/* =============================================================================
   GARAGE & GATE PALACE — SITE STYLESHEET
   Source of truth for brand tokens: brand/brand-sheet.html
   Every page in website-2.0/ links this one file. Change a color here and it
   changes everywhere.

   DESIGN RULE (from growth-engine/03-content-engine.md "Do not"):
   No stock photography of garage doors. Homeowners recognize it and it costs
   the credibility the site exists to build. This design uses type, color,
   and drawn SVG instead. Swap in real job photos when they exist.
   ============================================================================= */

:root{
  --navy:#132A4A;
  --navy-deep:#0B1B30;
  --navy-mid:#1D4173;
  --gold:#D8A03D;
  --gold-lt:#EFC77A;
  --bone:#F6F3EE;
  --bone-dk:#E9E4DB;
  --charcoal:#1F242B;
  --grey:#6B7480;
  --grey-lt:#98A0AB;
  --line:#E5E0D8;
  --white:#fff;
  --danger:#B3452F;

  --head:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
  --body:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;

  --wrap:1120px;
  --wrap-narrow:760px;
  --bar:60px;
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--charcoal);
  background:var(--bone);
  line-height:1.68;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy-mid)}
::selection{background:var(--gold);color:var(--navy-deep)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--head);line-height:1.16;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(1.6rem,3.3vw,2.3rem);color:var(--navy)}
h3{font-size:1.15rem;font-weight:700}
h4{font-size:1rem;font-weight:700}

.eyebrow{
  font-family:var(--head);font-weight:700;font-size:.76rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;
}
.eyebrow-navy{color:var(--navy-mid)}

/* ---------- Skip link (accessibility) ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy-deep);
  padding:12px 20px;font-family:var(--head);font-weight:700;z-index:200}
.skip:focus{left:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--head);font-weight:700;font-size:1rem;
  padding:15px 28px;border-radius:6px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}
.btn-gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 6px 18px rgba(216,160,61,.32)}
.btn-gold:hover{background:var(--gold-lt);box-shadow:0 10px 26px rgba(216,160,61,.42)}
.btn-ghost{background:transparent;color:var(--bone);border-color:rgba(246,243,238,.5)}
.btn-ghost:hover{background:rgba(246,243,238,.1);border-color:var(--bone)}
.btn-navy{background:var(--navy);color:var(--bone);box-shadow:0 6px 18px rgba(19,42,74,.26)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--bone)}
.btn-sm{padding:11px 20px;font-size:.92rem}

/* ---------- Header + nav ---------- */
header.site{background:var(--bone);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0}
.head-in .logo img{height:44px;width:auto}
.head-right{display:flex;align-items:center;gap:20px}
.head-phone{font-family:var(--head);font-weight:800;font-size:1.1rem;color:var(--navy);
  text-decoration:none;letter-spacing:-.01em;line-height:1.2}
.head-phone:hover{color:var(--gold)}
.head-phone small{display:block;font-size:.63rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey)}

nav.main{border-bottom:1px solid var(--line);background:var(--white)}
nav.main ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap;justify-content:center;padding:0}
nav.main a{
  display:block;padding:13px 18px;text-decoration:none;color:var(--navy);
  font-family:var(--head);font-weight:700;font-size:.84rem;letter-spacing:.07em;
  text-transform:uppercase;border-bottom:3px solid transparent;transition:.15s;
}
nav.main a:hover{color:var(--gold);border-bottom-color:var(--gold-lt)}
nav.main a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(900px 420px at 78% -10%, rgba(216,160,61,.20), transparent 62%),
             linear-gradient(160deg,var(--navy) 0%, var(--navy-deep) 100%);
  color:var(--bone);padding:74px 0 64px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(246,243,238,.05) 0 1px, transparent 1px 76px);
  mask-image:linear-gradient(to bottom,transparent,#000 55%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%,transparent);
}
.hero .wrap,.hero .wrap-narrow{position:relative;z-index:1}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:18px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{font-size:clamp(1.02rem,2vw,1.2rem);color:rgba(246,243,238,.87);max-width:60ch;margin-bottom:32px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
.hero-note{font-size:.9rem;color:rgba(246,243,238,.62)}

.hero-sm{padding:52px 0 46px}
.hero-sm h1{font-size:clamp(1.8rem,4vw,2.6rem);max-width:22ch;margin-bottom:14px}
.hero-sm .lede{margin-bottom:0;font-size:1.05rem}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.84rem;color:rgba(246,243,238,.6);margin-bottom:18px}
.crumbs a{color:rgba(246,243,238,.82);text-decoration:none}
.crumbs a:hover{color:var(--gold);text-decoration:underline}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- Trust strip ---------- */
.strip{background:var(--navy-deep);border-top:1px solid rgba(246,243,238,.12);color:var(--bone)}
.strip ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 44px;padding:19px 0}
.strip li{font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
  min-width:0;max-width:100%}
.strip li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- Sections ---------- */
section{padding:70px 0}
section.tight{padding:48px 0}
.sec-head{max-width:660px;margin-bottom:42px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--grey);margin-top:13px;font-size:1.04rem}
.on-navy{background:var(--navy);color:var(--bone)}
.on-navy h2,.on-navy h3{color:var(--bone)}
.on-navy .sec-head p{color:rgba(246,243,238,.78)}
.on-white{background:var(--white)}

/* ---------- Card grids ---------- */
.grid{display:grid;gap:20px}
/* min() keeps the track from forcing a column wider than the viewport on
   narrow phones. Without it, a 300px minimum overflows a 320px screen. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:27px 25px;
  transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(19,42,74,.10)}
.card.topline{border-top:3px solid var(--gold)}
.card h3{color:var(--navy);margin-bottom:9px}
.card p{color:var(--grey);font-size:.96rem}
.card .ico{width:38px;height:38px;margin-bottom:15px}
a.card{text-decoration:none;display:block;color:inherit}
a.card h3{transition:color .15s}
a.card:hover h3{color:var(--gold)}
.card-more{display:inline-block;margin-top:14px;font-family:var(--head);font-weight:700;
  font-size:.86rem;color:var(--navy-mid);letter-spacing:.03em}
a.card:hover .card-more{color:var(--gold)}

/* ---------- Steps ---------- */
.step-n{font-family:var(--head);font-weight:800;font-size:.8rem;letter-spacing:.16em;
  color:var(--gold);margin-bottom:11px}
.step h3{margin-bottom:8px}
.step p{font-size:.96rem;color:var(--grey)}
.on-navy .step p{color:rgba(246,243,238,.76)}

/* ---------- Prose (articles) ---------- */
.prose{font-size:1.06rem;line-height:1.78;color:#2A3038}
.prose > *+*{margin-top:1.15em}
.prose h2{font-size:1.62rem;margin-top:2.1em;margin-bottom:.15em;color:var(--navy)}
.prose h3{font-size:1.2rem;margin-top:1.7em;margin-bottom:.1em;color:var(--navy)}
.prose ul,.prose ol{padding-left:1.35em}
.prose li{margin-top:.5em}
.prose li::marker{color:var(--gold)}
.prose strong{color:var(--navy);font-weight:700}
.prose a{color:var(--navy-mid);text-underline-offset:3px}
.prose a:hover{color:var(--gold)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose blockquote{border-left:4px solid var(--gold);padding:4px 0 4px 22px;color:var(--navy);
  font-family:var(--head);font-weight:600;font-size:1.12rem;line-height:1.5}

.lead-para{font-size:1.16rem;line-height:1.68;color:var(--navy);font-weight:600;font-family:var(--head)}

/* ---------- Callouts ---------- */
.callout{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:8px;padding:22px 26px;margin:1.7em 0}
.callout h4{color:var(--navy);margin-bottom:7px;font-family:var(--head)}
.callout p{color:var(--grey);font-size:.98rem}
.callout.warn{border-left-color:var(--danger);background:#FCF6F4}
.callout.warn h4{color:var(--danger)}
.callout.navy{background:var(--navy);border-color:var(--navy);border-left-color:var(--gold)}
.callout.navy h4{color:var(--bone)}
.callout.navy p{color:rgba(246,243,238,.82)}

/* ---------- FAQ accordion (no JavaScript) ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:var(--white)}
.faq summary{
  cursor:pointer;padding:20px 52px 20px 22px;font-family:var(--head);font-weight:700;
  font-size:1.04rem;color:var(--navy);position:relative;list-style:none;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:700;color:var(--gold);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--gold)}
.faq summary:focus-visible{outline:3px solid var(--gold-lt);outline-offset:-3px}
.faq .ans{padding:0 26px 22px;color:var(--grey);font-size:1rem}
.faq .ans > *+*{margin-top:.9em}
.faq .ans ul{padding-left:1.3em}
.faq .ans li{margin-top:.4em}
.faq .ans li::marker{color:var(--gold)}

/* ---------- Article list ---------- */
.art-list{display:grid;gap:18px}
.art{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;text-decoration:none;color:inherit;display:block;transition:.18s}
.art:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(19,42,74,.10)}
.art .tag{font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:9px}
.art h3{color:var(--navy);font-size:1.28rem;margin-bottom:8px;letter-spacing:-.02em}
.art:hover h3{color:var(--gold)}
.art p{color:var(--grey);font-size:.97rem}
.art .meta{margin-top:13px;font-size:.84rem;color:var(--grey-lt)}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;margin:1.6em 0;border:1px solid var(--line);border-radius:8px;background:var(--white)}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:.97rem}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line)}
th{font-family:var(--head);font-weight:700;color:var(--navy);background:var(--bone);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
tr:last-child td{border-bottom:0}

/* ---------- Symptom / support rows ---------- */
.symptom{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin-bottom:16px}
.symptom h3{color:var(--navy);margin-bottom:6px;display:flex;align-items:baseline;gap:10px}
.symptom .lbl{font-size:.68rem;font-family:var(--head);letter-spacing:.13em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px;font-weight:700;white-space:nowrap}
.lbl-diy{background:#E6F0E8;color:#2F6B3E}
.lbl-call{background:#FBEDE9;color:var(--danger)}
.symptom p{color:var(--grey);font-size:.97rem}
.symptom ol,.symptom ul{color:var(--grey);font-size:.97rem;padding-left:1.3em;margin-top:.6em}
.symptom li{margin-top:.4em}
.symptom li::marker{color:var(--gold)}

/* ---------- Closing CTA ---------- */
.close-cta{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--bone);text-align:center}
.close-cta h2{color:var(--bone);margin-bottom:13px}
.close-cta p{color:rgba(246,243,238,.82);max-width:54ch;margin:0 auto 28px}
.close-cta .hero-cta{justify-content:center;margin-bottom:0}
.close-big{display:inline-block;font-family:var(--head);font-weight:800;
  font-size:clamp(1.7rem,4.4vw,2.5rem);color:var(--gold);text-decoration:none;
  letter-spacing:-.02em;margin-bottom:24px}
.close-big:hover{color:var(--gold-lt)}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-deep);color:rgba(246,243,238,.72);
  padding:52px 0 calc(38px + var(--bar));font-size:.93rem}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  padding-bottom:30px;border-bottom:1px solid rgba(246,243,238,.13)}
.foot-cols img{height:50px;width:auto;margin-bottom:18px}
.foot-cols h4{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.foot-cols ul{list-style:none}
.foot-cols li{margin-bottom:8px}
.foot-cols a{color:rgba(246,243,238,.76);text-decoration:none}
.foot-cols a:hover{color:var(--gold)}

/* Canonical NAP. Must stay identical to the GBP listing, character for
   character. Source of truth: brand/canonical-nap-and-listing-copy.md */
.nap{font-style:normal;display:flex;flex-direction:column;gap:4px;line-height:1.5}
.nap .nap-name{font-family:var(--head);font-weight:800;font-size:1.16rem;color:var(--bone);letter-spacing:-.01em}
.nap .nap-area{color:rgba(246,243,238,.82)}
.nap .nap-tel{color:var(--bone);text-decoration:none;font-family:var(--head);font-weight:800;font-size:1.16rem}
.nap .nap-tel:hover{color:var(--gold)}
.foot-extra{display:flex;flex-direction:column;gap:4px;margin-top:11px}
.foot-email{color:rgba(246,243,238,.82);text-decoration:none;font-size:.97rem}
.foot-email:hover{color:var(--gold);text-decoration:underline}
.foot-hours{color:rgba(246,243,238,.62);font-size:.89rem}
.foot-bottom{padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 24px;
  justify-content:space-between;font-size:.85rem}

/* ---------- Mobile sticky call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--navy-deep);border-top:1px solid rgba(216,160,61,.35);
  box-shadow:0 -6px 20px rgba(0,0,0,.28)}
.callbar .inner{display:flex}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  height:var(--bar);text-decoration:none;font-family:var(--head);font-weight:800;font-size:1rem}
.callbar .cb-call{background:var(--gold);color:var(--navy-deep)}
.callbar .cb-text{color:var(--bone)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:820px){
  section{padding:54px 0}
  .hero{padding:54px 0 48px}
  .hero-sm{padding:42px 0 38px}
  .head-in .logo img{height:37px}
  .head-phone{font-size:1rem}
  .hero-cta .btn{flex:1 1 100%}
  nav.main ul{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.main ul::-webkit-scrollbar{display:none}
  nav.main a{padding:12px 14px;font-size:.78rem;white-space:nowrap}
  .strip ul{gap:11px 24px;padding:15px 0}
  .strip li{font-size:.76rem}
  .callbar{display:block}
  .foot-cols{grid-template-columns:1fr;gap:26px}
  .prose{font-size:1.02rem}
}
@media (max-width:420px){
  .head-phone small{display:none}
}
/* Smallest phones still in use (iPhone SE 1st gen is 320px wide). */
@media (max-width:380px){
  .wrap,.wrap-narrow{padding:0 16px}
  .strip ul{gap:9px 18px}
  .strip li{font-size:.72rem;letter-spacing:.04em}
  .strip li::before{width:5px;height:5px}
  .card,.symptom,.art{padding:22px 18px}
  .callout{padding:18px 18px}
  .faq summary{padding:17px 44px 17px 16px;font-size:.98rem}
  .faq .ans{padding:0 18px 18px}
  .btn{padding:14px 20px;font-size:.95rem}
}
@media (min-width:821px){
  footer.site{padding-bottom:38px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
@media print{
  header.site,nav.main,.callbar,.close-cta,.hero-cta{display:none}
  body{background:#fff;font-size:12pt}
}