/* ==========================================================
   Sunroof King — Homepage Styles (Red / Black / White)
   Light, bright, premium automotive shop site.
   Built to match: Website Media/Website Design References/
   Sunroof-King-Homepage-Visual-Reference-CORRECT-2026-08-17.png
   ========================================================== */

:root{
  --red:#D2141B;
  --red-dark:#A50F15;
  --black:#171412;
  --charcoal:#221E1B;
  --charcoal-soft:#4A433D;
  --white:#FFFFFF;
  --cream:#FAF8F5;
  --gray-light:#F4F3F1;
  --line:#E7E3DD;
  --shadow-sm: 0 2px 10px rgba(23,20,18,0.08);
  --shadow-md: 0 10px 28px rgba(23,20,18,0.13);
  --shadow-lg: 0 24px 56px rgba(23,20,18,0.24);
  --radius: 12px;
  /* Approved Call/Text banner artwork (call and text us/call and text.png) uses its
     own orange brand color, independent of the red used elsewhere on the page. */
  --orange:#F2600C;
  --orange-dark:#C94A03;
  /* Cream/orange molded header band (2026-09-02). Header chrome only. */
  --hdr-cream-1:#FFFDFA;
  --hdr-cream-2:#FBF5EC;
  --hdr-cream-3:#F4EBDD;
  --hdr-edge:#E7DCC9;
  --hdr-edge-soft:#F0E7D9;
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* Clearance for the sticky header when an in-page anchor is followed.
   2026-09-02: the desktop header grew from 120px to 150px, so the wide tier
   needs its own value or anchor targets land underneath it. Below 861px the
   header is 76-131px and 96px still clears it. */
[id]{ scroll-margin-top:96px; }
@media (min-width: 861px){ [id]{ scroll-margin-top:162px; } }

body{
  font-family:var(--font-sans);
  background:var(--white);
  color:var(--charcoal);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.wrap{ max-width:1280px; margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--font-serif); font-weight:700; color:var(--black); }

.eyebrow-rule{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:6px;
}
.eyebrow-rule .line{ width:56px; height:3px; background:var(--red); border-radius:2px; }
.eyebrow-rule h2{ font-size:2rem; text-transform:uppercase; letter-spacing:0.02em; }
.eyebrow-rule h2 .accent{ color:var(--red); }
.section-sub{ text-align:center; color:var(--charcoal-soft); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; font-size:0.82rem; margin-bottom:30px; }

.section{ padding:52px 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-weight:700; font-size:0.98rem;
  border-radius:8px; border:2px solid transparent; cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--red); border-color:var(--red); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); }
.btn-outline-dark{ background:transparent; border-color:var(--black); color:var(--black); }
.btn-outline-dark:hover{ background:var(--black); color:var(--white); transform:translateY(-2px); }
.btn-outline-light{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.8); color:var(--white); }
.btn-outline-light:hover{ background:var(--white); color:var(--black); transform:translateY(-2px); }
.btn-lg{ padding:17px 34px; font-size:1.02rem; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn svg{ width:19px; height:19px; flex-shrink:0; }

/* ============================================================
   HEADER
   ============================================================ */
/* 2026-09-02 — CREAM / ORANGE MOLDED HEADER.  Prototype A, owner-approved.

   THE STRATEGY, which replaces everything that came before it here:
   the logo, the nav type and the Call/Text control are sized for LEGIBILITY
   and are NEVER shrunk to force the eight nav items into one row. When the
   full nav stops fitting, the hamburger takes over instead.

   Approved 2026-09-02 (visual readability pass): 280px of VISIBLE logo
   artwork, 18px/700 nav, an enlarged Call/Text control, full nav through
   1240px, hamburger from 1239px down.
   Superseded: the first pass used a 234px logo CSS box, 17px nav and a
   1220px breakpoint. It read as undersized because a third of the logo file
   is white margin — see the .brand-logo-img note below.

   WHY THE HEADER IS TWO LEVELS. Measured at the approved sizes, a strict
   single row needs:
       brand plate 262 + nav 812 + Call/Text 242 + two gaps 44 = 1360px
       + 48px gutter + 15px scrollbar = 1423px of viewport
   which would hand a hamburger to every 1280px and 1366px laptop. Putting
   the Call/Text control ABOVE the nav takes the nav out of the logo's row and
   drops the requirement to 1139 + 48 + 15 = 1202px — without making one thing
   smaller. Hence the 1220px breakpoint.

   The five "narrow-desktop tiers" that used to live here (981 / 1024 / 1110 /
   1200 / 1280, shrinking the logo to 130px and the nav to 15px) are gone.
   They existed only to force the single row and are what made the header look
   undersized. Do not reintroduce them. */
header{
  background:linear-gradient(180deg, var(--hdr-cream-1) 0%, var(--hdr-cream-2) 58%, var(--hdr-cream-3) 100%);
  position:sticky; top:0; z-index:100;
  border-bottom:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 0 rgba(255,255,255,0.6),
    0 8px 22px rgba(23,20,18,0.10);
}
/* thin orange dimensional edge along the foot of the band */
header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,
    rgba(242,96,12,0.22) 0%,
    var(--orange) 18%,
    #FFA25C 50%,
    var(--orange) 82%,
    rgba(242,96,12,0.22) 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,0.55), 0 1px 3px rgba(201,74,3,0.35);
  pointer-events:none;
}

/* LAYOUT — brand left (spanning both rows), Call/Text over the nav on the
   right. CSS grid, so the existing markup order (brand, nav, Call/Text,
   hamburger) is untouched and no page's HTML has to change. */
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:24px;
  row-gap:7px;
  padding:12px 0;
}
.brand        { grid-column:1; grid-row:1 / span 2; }
.ct-banner--sm{ grid-column:2; grid-row:1; justify-self:end; }
.main-nav     { grid-column:2; grid-row:2; justify-self:end; }
.hamburger    { grid-column:2; grid-row:1 / span 2; justify-self:end; }

/* BRAND — molded cream plate behind the unchanged logo artwork */
.brand{
  position:relative;
  display:flex; align-items:center; flex-shrink:0;
  padding:15px 18px 17px;
  border-radius:18px;
  background:linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 54%, #F5EEE3 100%);
  border:1px solid var(--hdr-edge-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -3px 7px rgba(23,20,18,0.055),
    0 1px 2px rgba(23,20,18,0.07),
    0 9px 20px rgba(23,20,18,0.11);
}
/* thin recessed orange accent along the foot of the plate */
.brand::after{
  content:""; position:absolute; left:20px; right:20px; bottom:6px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(242,96,12,0.15), var(--orange) 45%, rgba(242,96,12,0.15));
  box-shadow:0 -1px 1px rgba(23,20,18,0.13), 0 1px 0 rgba(255,255,255,0.85);
}
/* 2026-09-02 — VISIBLE LOGO SIZE.

   assets/logo.png is 640x284, but the artwork inside it only occupies
   x 35..620, y 43..229 — 586x187. That is 91.6% of the file's width and just
   65.8% of its height: a third of the image is baked-in white margin. So a
   `width:234px` logo was only ever drawing a 214x68 mark, which is why the
   header read as undersized no matter what the CSS said.

   The margin is cropped here rather than in the file: assets/logo.png is also
   the FOOTER logo (.footer-logo-img on every page), and re-cropping the file
   would change the footer's aspect ratio too. clip-path hides the margin
   (it clips to transparent, so the plate's gradient shows through — negative
   margins alone would have painted the logo's opaque near-white ground over
   it), and the negative margins pull that hidden margin back out of layout so
   the plate hugs the artwork.

   --logo-w is the FILE width. Visible artwork = --logo-w x 0.9156.
   Responsive tiers below set --logo-w only; the crop maths follows it.
     rendered height  = w x 284/640 = w x 0.44375
     margin-top       = -(w x 0.44375 x 43/284) = -(w x 0.06719)
     margin-bottom    = -(w x 0.44375 x 54/284) = -(w x 0.08437)
     margin-left      = -(w x 35/640)           = -(w x 0.05469)
     margin-right     = -(w x 19/640)           = -(w x 0.02969)  */
.brand-logo-img{
  --logo-w:306px;                 /* 280px of visible artwork */
  width:var(--logo-w); height:auto; display:block;
  clip-path:inset(15.141% 2.969% 19.014% 5.469%);
  margin:
    calc(var(--logo-w) * -0.06719)
    calc(var(--logo-w) * -0.02969)
    calc(var(--logo-w) * -0.08437)
    calc(var(--logo-w) * -0.05469);
}

/* NAVIGATION — full size, never shrunk */
.main-nav{
  display:flex; gap:4px;
  font-size:1.125rem;           /* 18px — raised from 17px, 2026-09-02 */
  font-weight:700; color:var(--charcoal);
  flex-wrap:nowrap; white-space:nowrap;
  align-items:center;
  position:relative;            /* containing block for .mega — see below */
}
.main-nav > a,
.nav-item--mega > a{
  position:relative;
  /* 6px horizontal, not 10px: the hover pill's padding is invisible width.
     Trimming it is what buys the 18px TYPE its room — the type itself is
     never reduced. */
  padding:9px 6px;
  border-radius:9px;
  border-bottom:0;
  color:var(--charcoal);
  transition:background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.main-nav > a:hover,
.nav-item--mega > a:hover{
  color:var(--red);
  border-bottom:0;
  background:linear-gradient(180deg, #FFFFFF 0%, #F7F0E5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 2px rgba(23,20,18,0.08),
    0 4px 10px rgba(23,20,18,0.09);
}
.main-nav a.is-active{
  color:var(--red);
  border-bottom:0;
  background:linear-gradient(180deg, #FFFFFF 0%, #FBF3E8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -2px 5px rgba(23,20,18,0.05),
    0 1px 2px rgba(23,20,18,0.08);
}
/* recessed orange underscore marking the current page */
.main-nav a.is-active::before{
  content:""; position:absolute; left:6px; right:6px; bottom:3px; height:2px;
  border-radius:2px; background:var(--orange);
  box-shadow:0 -1px 1px rgba(23,20,18,0.14);
}

/* DESKTOP GUTTER.  .header-inner overrides .wrap's `padding:0 24px` with its
   own vertical-only padding, so the header row has always run edge-to-edge
   while the body below it is inset 24px. With a molded plate around the logo
   that flush edge reads as a mistake, so the gutter is restored here — which
   also lines the logo up with the content column beneath it.
   Deliberately left at 0 below 981px: the approved 2026-08-25 mobile header
   fit was measured against a zero-padding row. */
@media (min-width: 981px){
  .header-inner{ padding:12px 24px; }
}

/* The breakpoint block that drives the nav/hamburger swap lives further down,
   immediately after the .hamburger base rule — it has to, or the base
   `display:none` beats it on source order and the hamburger never appears. */

/* ============================================================
   REUSABLE COMPONENT — Call / Text Banner  ( .ct-banner )
   This reproduces the approved artwork at
   `call and text us/call and text.png` (= assets/call-text-banner-reference.png)
   in live HTML/CSS so it keeps real tel:/sms: links, instead of a flat image.
   Three sizes: --sm (header), --lg (footer, full width), --card (fitted to a
   narrower column, used in the "Visit Our Shop" CTA card).
   ============================================================ */
.ct-banner{
  position:relative; background:var(--white);
  border:2px solid var(--orange); border-radius:28px;
  box-shadow:0 22px 50px rgba(242,96,12,0.14), 0 18px 40px rgba(23,20,18,0.16), 0 2px 6px rgba(23,20,18,0.08);
}
.ct-icon-btn{
  flex-shrink:0; border-radius:50%; border:3px solid var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--white);
  background:radial-gradient(circle at 32% 28%, #FFB066 0%, var(--orange) 55%, var(--orange-dark) 100%);
  box-shadow:0 10px 20px rgba(242,96,12,0.4), inset 0 2px 3px rgba(255,255,255,0.65), inset 0 -4px 8px rgba(0,0,0,0.22);
  transition:transform 0.15s ease;
}
.ct-icon-btn:hover{ transform:translateY(-2px) scale(1.05); }
.ct-strip-dot{ width:4px; height:4px; border-radius:50%; background:var(--orange); display:inline-block; flex-shrink:0; }

/* ---- Shared banner internals (sized down per variant below) ---- */
.ct-banner-crown{
  position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  width:54px; height:54px; border-radius:50%;
  background:var(--white); border:2px solid var(--orange); color:var(--orange-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(23,20,18,0.16);
}
.ct-banner-crown svg{ width:26px; height:26px; }
.ct-banner-row{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; row-gap:14px; }
.ct-banner-center{ text-align:center; }
.ct-banner-label{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:1.22rem; font-weight:700; font-style:italic; color:var(--charcoal);
  font-family:var(--font-serif); margin-bottom:4px;
}
.ct-line{ width:32px; height:2px; background:linear-gradient(90deg, transparent, var(--orange)); }
.ct-banner-label .ct-line:last-child{ background:linear-gradient(90deg, var(--orange), transparent); }
.ct-banner-phone{
  display:block; font-family:var(--font-sans); font-weight:800; color:var(--black);
  font-size:clamp(1.9rem, 4.4vw, 3.1rem); letter-spacing:0.01em;
}
.ct-banner-phone:hover{ color:var(--orange-dark); }
.ct-banner-strip{
  margin-top:22px; background:var(--cream); border:1px solid var(--orange); border-radius:999px;
  padding:12px 22px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:8px 12px; font-size:0.8rem; font-weight:700; color:var(--charcoal-soft); text-transform:uppercase; letter-spacing:0.02em;
}
.ct-banner-strip svg{ width:15px; height:15px; color:var(--orange-dark); flex-shrink:0; }

/* ---- Compact variant (header) ----
   2026-09-02: rebuilt as a dimensional cream/orange control to match the
   molded band. The two compact tiers that used to follow this block
   (min-width:981 and min-width:1110, shrinking the icons to 30px and the
   number to 0.8rem) are gone with the rest of the shrink-to-fit strategy —
   the control is now one size from 481px up. */
.ct-banner--sm{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 17px 6px 5px; border-radius:999px; flex-shrink:0;
  background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 46%, #F7EFE3 100%);
  border:2px solid var(--orange);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -4px 9px rgba(201,74,3,0.10),
    0 2px 4px rgba(23,20,18,0.10),
    0 10px 22px rgba(242,96,12,0.20);
}
.ct-banner--sm .ct-icon-btn{ width:38px; height:38px; border-width:2px; }
.ct-banner--sm .ct-icon-btn svg{ width:17px; height:17px; }
.ct-banner-center-sm{ display:flex; flex-direction:column; line-height:1.2; }
.ct-banner-label-sm{ font-size:0.64rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--charcoal-soft); font-weight:700; }
.ct-banner-phone-sm{ font-size:1.04rem; font-weight:800; color:var(--black); font-family:var(--font-sans); }
.ct-banner-phone-sm:hover{ color:var(--orange-dark); }

/* 2026-09-02 — the control reads too small on a real desktop, so it steps up
   from 861px, where the header row has hundreds of pixels spare. It is held
   at the size above for 481-860px: at 481px the row is
   135 logo + 246 pill + 38 hamburger + 40 gaps = 459px in a 481px window,
   and the larger pill (285px) would overflow it. */
@media (min-width: 861px){
  .ct-banner--sm{ padding:7px 21px 7px 6px; gap:12px; }
  .ct-banner--sm .ct-icon-btn{ width:44px; height:44px; }
  .ct-banner--sm .ct-icon-btn svg{ width:20px; height:20px; }
  .ct-banner-label-sm{ font-size:0.7rem; letter-spacing:0.08em; }
  .ct-banner-phone-sm{ font-size:1.2rem; }
}

/* ---- Reduced footer variant — same design, sized down in fixed px (not
   vw-clamp) so it complements the footer instead of dominating it. ---- */
.ct-banner--footer{ max-width:460px; margin:0 auto; padding:22px 24px 13px; }
.ct-banner--footer .ct-banner-row{ gap:16px; }
.ct-banner--footer .ct-icon-btn{ width:52px; height:52px; }
.ct-banner--footer .ct-icon-btn svg{ width:22px; height:22px; }
.ct-banner--footer .ct-banner-label{ font-size:0.98rem; margin-bottom:2px; }
.ct-banner--footer .ct-banner-phone{ font-size:1.7rem; }
.ct-banner--footer .ct-banner-crown{ width:42px; height:42px; top:-20px; }
.ct-banner--footer .ct-banner-crown svg{ width:19px; height:19px; }
.ct-banner--footer .ct-banner-strip{ font-size:0.64rem; padding:8px 14px; gap:5px 7px; margin-top:16px; }

/* 2026-09-02: restyled into the molded family. This block MUST stay above the
   responsive section — declared below it, it beat the phone tier on source
   order and left a 46px plated button on a 390px row. */
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; cursor:pointer; padding:0 10px; flex-shrink:0;
  border-radius:12px;
  background:linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 52%, #F5EEE3 100%);
  border:1px solid var(--hdr-edge-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 1px 2px rgba(23,20,18,0.07),
    0 6px 14px rgba(23,20,18,0.10);
}
.hamburger span{ display:block; width:100%; height:2.5px; background:var(--charcoal); border-radius:2px; }

/* THE ONE BREAKPOINT.
   2026-09-02: moved 1220px -> 1240px. The logo grew to 280px of visible
   artwork and the nav to 18px, and the row now measures
     318px brand plate + 24px gap + 819px nav = 1161px of content,
     + 48px gutter = 1209px of layout, + 15px scrollbar = 1224px of viewport.
   1220px would have been 4px short. Per the owner's instruction the
   breakpoint moved up rather than the logo or type coming back down; 1240px
   keeps ~16px of slack and still sits below 1280px, so 1280px and 1366px
   laptops keep the full navigation.
   Below it the full nav is replaced by the hamburger — nothing is resized.

   Placed here, straight after the .hamburger base rule, ON PURPOSE. Both
   carry the same specificity, so source order decides: higher up the page
   the base `display:none` won and the hamburger stayed invisible at every
   width. Do not move this block back above .hamburger. */
@media (min-width: 1240px){
  .main-nav{ display:flex; }
  .hamburger{ display:none; }
}
@media (max-width: 1239px){
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  /* no nav to stack under, so the row collapses back to a simple flex row */
  .header-inner{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
}

.mobile-nav{
  display:none; flex-direction:column;
  background:linear-gradient(180deg, #FFFDFA 0%, #FBF5EC 100%);
  border-top:1px solid var(--hdr-edge);
  padding:8px 24px 20px;
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ color:var(--charcoal); padding:12px 0; font-size:1.02rem; font-weight:700; border-bottom:1px solid var(--line); }
.mobile-nav-cta{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.mobile-nav-cta .btn{ flex:1; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ background:var(--white); padding:36px 0 0; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center; }

.hero-copy h1{
  font-family:var(--font-sans); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.1rem, 4vw, 3.05rem); line-height:1.08; letter-spacing:-0.01em;
  color:var(--black);
}
.hero-copy h1 .accent{ color:var(--red); }
/* 2026-09-02 — hero paragraph raised 1.12rem (17.9px) -> 1.2rem (19.2px) to
   match the Vehicle Makes readability standard. Measure held by widening
   max-width with it, so the line length does not tighten as the type grows. */
.hero-copy p.lede{ margin-top:18px; font-size:1.2rem; line-height:1.68; color:var(--charcoal-soft); max-width:530px; }
.hero-copy .btn-row{ margin-top:22px; }

/* ============================================================
   HERO TRUST PANEL   ( .hero-badges — index.html only )

   2026-09-02, owner-approved redesign. Replaces four separate weak cards
   that carried 10.9px uppercase labels and 17px icons — the smallest text
   anywhere on the site — with ONE molded cream/orange dashboard panel
   holding four internal segments.

   Built from the same tokens as the frozen Vehicle Makes hero: cream
   gradient ground, molded outer frame, orange illuminated trim, dimensional
   inset/outset shadows. The four messages, their icons and the markup are
   unchanged; only the surface and the sizing move.

   Sizes: trust titles 19.2px (was 10.9px), icons 30px inside 54px discs
   (was 17px inside 34px). Nothing here drops below 15px at any width.

   .hero-badges exists on index.html alone, so this block cannot reach the
   frozen pages even though it lives in the shared stylesheet.
   ============================================================ */
/* ---- "View Our Services": molded cream key with orange illuminated inset ----
   Chamfered corners come from clip-path, so no extra markup and no image.
   The href and link text are untouched. */
.hero-copy .btn-row .btn-outline-dark.btn-lg{
  position:relative;
  padding:20px 40px;
  font-size:1.2rem; font-weight:800; letter-spacing:0.01em;
  color:var(--black);
  border:1px solid #DCCFB8;
  border-radius:0;
  clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                    calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(168deg, #FFFDF9 0%, #FAF3E8 52%, #F2E7D6 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -3px 0 rgba(0,0,0,0.07),
    0 2px 4px rgba(23,20,18,0.08),
    0 12px 26px rgba(23,20,18,0.16);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
/* the recessed orange trim inside the key */
.hero-copy .btn-row .btn-outline-dark.btn-lg::before{
  content:"";
  position:absolute; inset:6px;
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
                    calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  border:2px solid rgba(242,96,12,0.62);
  box-shadow:0 0 12px rgba(242,96,12,0.30), inset 0 0 14px rgba(242,96,12,0.10);
  pointer-events:none;
}
/* orange arrow at the right, decorative only */
.hero-copy .btn-row .btn-outline-dark.btn-lg::after{
  content:"\2192";
  margin-left:16px;
  font-size:1.3rem; font-weight:800; line-height:1;
  color:var(--orange-dark);
  text-shadow:0 1px 0 rgba(255,255,255,0.9);
}
.hero-copy .btn-row .btn-outline-dark.btn-lg:hover{
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(168deg, #FFFFFF 0%, #FDF8F0 52%, #F6EDDF 100%);
  color:var(--black);
  transform:translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    0 2px 4px rgba(23,20,18,0.08),
    0 18px 34px rgba(242,96,12,0.24);
}
.hero-copy .btn-row .btn-outline-dark.btn-lg:active{
  transform:translateY(2px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(23,20,18,0.10);
}

.hero-badges{
  position:relative;
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin-top:44px; max-width:100%;
  padding:18px;
  border-radius:0;
  clip-path:polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px),
                    calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px);
  border:1px solid var(--hdr-edge);
  background:
    radial-gradient(120% 90% at 82% 18%, rgba(242,96,12,0.10) 0%, rgba(242,96,12,0) 58%),
    radial-gradient(90% 70% at 8% 0%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(168deg, #FBF4E9 0%, #F7EEE0 46%, #F2E6D4 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -3px 0 rgba(0,0,0,0.06),
    0 2px 4px rgba(23,20,18,0.06),
    0 14px 32px rgba(23,20,18,0.13);
}
/* orange illuminated inner border, the hero's signature detail */
.hero-badges::after{
  content:"";
  position:absolute; inset:9px;
  clip-path:polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px),
                    calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  border:3px solid rgba(242,96,12,0.6);
  box-shadow:
    0 0 16px rgba(242,96,12,0.30),
    inset 0 0 22px rgba(242,96,12,0.10);
  pointer-events:none;
}
/* restrained corner fasteners */
.hero-badges::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 21px 21px, #B5A88F 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
    radial-gradient(circle at calc(100% - 21px) 21px, #B5A88F 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
    radial-gradient(circle at 21px calc(100% - 21px), #B5A88F 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
    radial-gradient(circle at calc(100% - 21px) calc(100% - 21px), #B5A88F 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px);
  pointer-events:none;
}

/* four dimensional internal sections, divided by moulded grooves */
.hero-badge-card{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:18px;
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:26px 22px;
  text-align:left;
}
.hero-badge-card:not(:last-child){ border-right:1px solid rgba(181,168,143,0.55); }
.hero-badge-card:not(:last-child)::after{
  content:""; position:absolute; top:18px; bottom:18px; right:-1px; width:1px;
  background:rgba(255,255,255,0.95);
}

/* dimensional icon disc */
.hero-badge-card .icon{
  width:66px; height:66px; border-radius:50%; flex-shrink:0; margin:0;
  color:var(--white);
  background:radial-gradient(circle at 32% 26%, #F0575E 0%, var(--red) 52%, var(--red-dark) 100%);
  border:3px solid var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 10px 22px rgba(165,15,21,0.34),
    inset 0 2px 4px rgba(255,255,255,0.55),
    inset 0 -5px 10px rgba(0,0,0,0.26);
}
.hero-badge-card .icon svg{ width:34px; height:34px; }

/* 19.2px bold uppercase, two-tone as in the reference */
.hero-badge-card .hb-title{
  display:block;
  font-family:var(--font-sans);
  font-size:1.2rem; font-weight:900;
  text-transform:uppercase; letter-spacing:0.01em;
  line-height:1.16;
  text-shadow:0 1px 0 rgba(255,255,255,0.9);
}
.hero-badge-card .hb-a{ color:var(--black); }
.hero-badge-card .hb-b{ color:var(--red); display:block; }

/* ---- trust panel reflow ----
   Below 560px the two columns become one, so the vertical groove is removed
   and the horizontal groove has to run between every segment instead of only
   the first two. Type stays at 19.2px on the phone; only the icon and the
   padding come down. */
/* ---- trust housing reflow ----
   4 across -> 2x2 -> 1 column. The vertical groove becomes a horizontal one
   at each step. Trust titles hold 19.2px the whole way down; only the icon,
   the padding and the chamfer come in. */
@media (max-width: 1100px){
  .hero-badge-card{ padding:22px 16px; gap:14px; }
  .hero-badge-card .icon{ width:58px; height:58px; }
  .hero-badge-card .icon svg{ width:30px; height:30px; }
}
@media (max-width: 900px){
  .hero-badges{ grid-template-columns:repeat(2, 1fr); }
  .hero-badge-card:not(:last-child){ border-right:0; }
  .hero-badge-card:not(:last-child)::after{ display:none; }
  .hero-badge-card:nth-child(odd){ border-right:1px solid rgba(181,168,143,0.55); }
  .hero-badge-card:nth-child(odd)::after{
    content:""; display:block; position:absolute; top:18px; bottom:18px; right:-1px; width:1px;
    background:rgba(255,255,255,0.95);
  }
  .hero-badge-card:nth-child(-n+2){ border-bottom:1px solid rgba(181,168,143,0.55); }
  .hero-badge-card:nth-child(-n+2)::before{
    content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:1px;
    background:rgba(255,255,255,0.95);
  }
}
@media (max-width: 560px){
  .hero-badges{
    grid-template-columns:1fr; margin-top:28px; padding:12px;
    clip-path:polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
                      calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  }
  .hero-badges::after{
    inset:7px;
    clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                      calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    border-width:2px;
  }
  .hero-badge-card{ padding:17px 14px; gap:14px; }
  .hero-badge-card:nth-child(odd){ border-right:0; }
  .hero-badge-card:nth-child(odd)::after{ display:none; }
  .hero-badge-card:nth-child(-n+2){ border-bottom:0; }
  .hero-badge-card:nth-child(-n+2)::before{ display:none; }
  .hero-badge-card:not(:last-child){ border-bottom:1px solid rgba(181,168,143,0.55); }
  .hero-badge-card:not(:last-child)::before{
    content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:1px;
    background:rgba(255,255,255,0.95); display:block;
  }
  .hero-badge-card .icon{ width:54px; height:54px; }
  .hero-badge-card .icon svg{ width:28px; height:28px; }
  /* the two-tone stack becomes one line on a narrow column */
  .hero-badge-card .hb-b{ display:inline; }
  .hero-copy .btn-row .btn-outline-dark.btn-lg{ padding:18px 26px; font-size:1.12rem; }
}

.hero-photo{ position:relative; }
.hero-social{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:18px; }
.hero-social-icon{
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--white);
  border:3px solid var(--white);
  box-shadow:0 12px 24px rgba(23,20,18,0.28), inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -5px 9px rgba(0,0,0,0.28);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-social-icon svg{ width:28px; height:28px; }
.hero-social-icon:hover{ transform:translateY(-4px) scale(1.07); box-shadow:0 16px 30px rgba(23,20,18,0.34), inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -5px 9px rgba(0,0,0,0.28); }

.hero-social-icon.instagram{
  background:radial-gradient(circle at 30% 105%, #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 62%, #285AEB 92%);
}
.hero-social-icon.tiktok{
  background:radial-gradient(circle at 32% 26%, #3a3a3a 0%, #161616 55%, #000000 100%);
}
.hero-social-icon.youtube{
  background:radial-gradient(circle at 32% 26%, #ff6b62 0%, #FF0000 55%, #c40000 100%);
}
.hero-photo-frame{
  position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:1672/941; background:var(--cream);
}
.hero-photo-frame img{ width:100%; height:100%; object-fit:cover; }

/* Two equal hero panels, STACKED at every width (2026-08-31): team photo on
   top, Ford promo directly beneath it, linking to the Ford page. Both are 1fr
   grid rows sharing .hero-photo-frame's fixed aspect-ratio, so they can never
   differ in size and neither image can stretch. Each fills the full width of
   the right-hand hero column. */
.hero-photo-pair{ display:grid; grid-template-columns:1fr; gap:18px; }
a.hero-photo-frame{ display:block; transition:transform 0.15s ease, box-shadow 0.15s ease; }
a.hero-photo-frame:hover{ transform:translateY(-4px); box-shadow:0 30px 62px rgba(23,20,18,0.28); }

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--black); margin-top:32px; }
.trust-strip-inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px 40px; padding:20px 24px; text-align:center;
}
.trust-strip .trust-item{ display:flex; align-items:center; gap:10px; position:relative; }
.trust-strip .trust-item svg{ width:19px; height:19px; color:var(--red); flex-shrink:0; }
.trust-strip .trust-item span{ font-size:0.8rem; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:0.04em; }
.trust-strip .trust-item:not(:last-child)::after{
  content:""; position:absolute; right:-20px; top:50%; transform:translateY(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--red);
}

/* ============================================================
   SERVICE DIRECTORY — "Everything We Do at Sunroof King"
   Text-only list restored from the pre-redesign homepage backup.
   Sits between the hero/trust strip and the 12-card services grid.
   No photos, no icons — deliberately plain and scannable.
   ============================================================ */
.directory-section{ background:var(--white); padding:44px 0 6px; }
.directory-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; max-width:1080px; margin:0 auto; }
.directory-group h3{
  font-family:var(--font-serif); font-size:1.05rem; color:var(--black);
  padding-bottom:9px; margin-bottom:8px; border-bottom:2px solid rgba(210,20,27,0.28);
}
.directory-list{ list-style:none; }
.directory-list li{
  font-weight:700; font-size:0.86rem; color:var(--charcoal);
  padding:7px 0; border-bottom:1px dashed var(--line); line-height:1.3;
}
.directory-list li:last-child{ border-bottom:none; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-section{ background:var(--white); }
.svc-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
.svc-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); text-align:center;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.svc-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--cream); }
.svc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-icon{
  position:absolute; left:50%; bottom:-19px; transform:translateX(-50%);
  width:38px; height:38px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; border:3px solid var(--white);
  box-shadow:var(--shadow-sm);
}
.svc-icon svg{ width:18px; height:18px; }
.svc-body{ padding:28px 14px 18px; }
.svc-body h3{ font-family:var(--font-sans); font-size:0.92rem; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:6px; line-height:1.3; }
.svc-body p{ font-size:0.86rem; color:var(--charcoal-soft); line-height:1.48; }
/* Service cards that link to a detail page. Purely additive: keeps the exact
   approved .svc-card appearance and hover lift, just makes the card clickable
   and adds a small "View Details" affordance. */
a.svc-card--link{ display:block; color:inherit; text-decoration:none; }
.svc-more{
  display:inline-block; margin-top:10px;
  font-size:0.74rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--red);
}
.svc-more::after{ content:" \2192"; }
a.svc-card--link:hover .svc-more{ text-decoration:underline; }

/* ============================================================
   WHY CHOOSE US — dark section
   ============================================================ */
.why-section{ background:var(--black); padding:52px 0; }
.why-section .eyebrow-rule h2{ color:var(--white); }
.why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:28px; }
.why-card{ display:flex; align-items:flex-start; gap:16px; }
.why-icon{
  width:52px; height:52px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.why-icon svg{ width:24px; height:24px; }
.why-card h3{ font-family:var(--font-sans); font-size:0.98rem; font-weight:800; text-transform:uppercase; color:var(--white); margin-bottom:6px; line-height:1.3; }
.why-card p{ font-size:0.86rem; color:rgba(255,255,255,0.68); line-height:1.5; }

/* ============================================================
   OWNER MESSAGE — "A Personal Note" (homepage only)
   ============================================================ */
.owner-section{ background:var(--white); padding:48px 0; }
.owner-card{
  display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center;
  max-width:1140px; margin:0 auto;
  background:var(--cream); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-md); padding:36px 42px;
}
.owner-photo-col{ text-align:center; }
.owner-photo-frame{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); aspect-ratio:4/5;
}
.owner-photo-frame img{ width:100%; height:100%; object-fit:cover; }
.owner-name{ font-family:var(--font-serif); font-style:italic; font-size:1.2rem; color:var(--black); margin-top:14px; }
.owner-title{
  font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--charcoal-soft); margin-top:5px; padding-top:9px;
  border-top:1px solid var(--line); display:inline-block;
}
.owner-copy .eyebrow-rule{ justify-content:flex-start; margin-bottom:4px; }
.owner-copy .eyebrow-rule .line{ display:none; }
.owner-copy .eyebrow-rule h2{ font-size:1.7rem; text-transform:none; }
.owner-subtitle{
  color:var(--red); font-weight:800; text-transform:uppercase; letter-spacing:0.14em;
  font-size:0.72rem; margin-bottom:14px; display:flex; align-items:center; gap:12px;
}
.owner-subtitle::before, .owner-subtitle::after{ content:""; width:26px; height:2px; background:var(--red); }
.owner-copy p{ color:var(--charcoal); font-size:0.98rem; line-height:1.68; margin-bottom:11px; }
.owner-signoff{ font-family:var(--font-sans); font-weight:800; color:var(--black); font-size:0.92rem; margin-bottom:0 !important; }

/* ============================================================
   OUR PROCESS
   ============================================================ */
.process-section{ background:var(--gray-light); padding:40px 0; }
.process-row{ display:flex; align-items:flex-start; justify-content:center; gap:0; margin-top:26px; flex-wrap:wrap; }
.process-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:132px; }
.process-icon{
  width:48px; height:48px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); margin-bottom:10px;
}
.process-icon svg{ width:21px; height:21px; }
.process-step h3{ font-family:var(--font-sans); font-size:0.82rem; font-weight:800; text-transform:uppercase; margin-bottom:3px; }
.process-step p{ font-size:0.74rem; color:var(--charcoal-soft); line-height:1.35; }
.process-arrow{ color:var(--red); flex-shrink:0; align-self:center; margin-top:12px; }
.process-arrow svg{ width:18px; height:18px; }

/* ============================================================
   VISIT SHOP + CTA
   ============================================================ */
.shop-section{ background:var(--white); }
.shop-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:stretch; }
.shop-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); }
.shop-photo img{ width:100%; height:100%; object-fit:cover; min-height:340px; }

.shop-info-stack{ display:flex; flex-direction:column; justify-content:center; gap:22px; }
.shop-info-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:28px 30px;
}
.shop-info-card h3{ font-size:1.3rem; margin-bottom:4px; }
.shop-info-card .shop-info-highlight{ color:var(--red); font-weight:800; text-transform:uppercase; font-size:0.92rem; letter-spacing:0.03em; margin-bottom:16px; }
.shop-info-line{ display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:0.92rem; font-weight:600; color:var(--charcoal); }
.shop-info-line:last-child{ border-bottom:none; }
.shop-info-line svg{ width:19px; height:19px; color:var(--red); flex-shrink:0; margin-top:2px; }
.shop-info-line a{ color:var(--red); font-weight:700; }
.shop-info-line a:hover{ color:var(--red-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--black); color:rgba(255,255,255,0.85); padding:32px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.12); }

.footer-logo-chip{
  display:inline-block; background:var(--white); padding:8px 14px;
  border-radius:8px; line-height:0;
}
.footer-logo-img{ height:48px; width:auto; display:block; }
.footer-brand p{ font-size:0.88rem; line-height:1.55; margin-top:10px; color:rgba(255,255,255,0.68); }

.footer-cta{ padding:10px 0 0; }

.footer-col h4{
  color:var(--red); text-transform:uppercase; letter-spacing:0.08em; font-size:0.78rem;
  margin-bottom:12px; font-weight:800;
}
.footer-col a, .footer-col p{
  display:block; font-size:0.88rem; font-weight:500; margin-bottom:8px; color:rgba(255,255,255,0.72);
}
.footer-col a:hover{ color:var(--red); }
.footer-col .footer-line-icon{ display:flex; align-items:flex-start; gap:9px; }
.footer-col .footer-line-icon svg{ width:16px; height:16px; color:var(--red); flex-shrink:0; margin-top:2px; }

.footer-bottom{
  background:var(--red); margin-top:0; padding:9px 0;
}
.footer-bottom-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:0.82rem; color:var(--white); font-weight:700;
}

/* 2026-09-01 — Privacy Policy link in the footer-bottom row. Additive only:
   the row keeps its frozen red bar, white text, 0.82rem size and 700 weight,
   and stays a two-child flex row, so nothing moves. The underline is the only
   thing that marks it as a link, since a{color:inherit} would otherwise make
   it indistinguishable from the copyright text beside it. */
.footer-bottom-inner a{ text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.footer-bottom-inner a:hover{ text-decoration:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .svc-grid{ grid-template-columns:repeat(3, 1fr); }
  .why-grid{ grid-template-columns:repeat(2, 1fr); }
  .hero-badges{ max-width:100%; }   /* already a 2-col panel; only the cap is released */
  .directory-grid{ grid-template-columns:1fr 1fr; max-width:640px; }
}

/* 2026-09-02: the nav/hamburger swap used to live here. It now happens at
   1220px — see "THE ONE BREAKPOINT" up in the header section. Everything else
   in this block is page layout and is unchanged. */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ order:-1; }
  .hero-photo-pair{ gap:14px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .shop-grid{ grid-template-columns:1fr; }
  .owner-card{ grid-template-columns:240px 1fr; gap:30px; padding:30px 34px; }
}

/* Brand-plate tiers. CASCADING max-width steps, so they must stay in this
   order: 860, then 700, then the 640 block below (which already carries the
   135px logo), then 560. Each simply overrides the one above it. */
@media (max-width: 860px){
  .brand{ padding:7px 12px 9px; border-radius:13px; }
  .brand-logo-img{ --logo-w:262px; }        /* 240px visible */
}

@media (max-width: 760px){
  .owner-card{ grid-template-columns:1fr; gap:20px; text-align:center; padding:26px 22px; border-radius:16px; }
  .owner-photo-frame{ max-width:220px; margin:0 auto; aspect-ratio:1/1; }
  .owner-copy{ text-align:left; }
}

@media (max-width: 700px){
  .process-row{ flex-direction:column; align-items:center; gap:24px; }
  .process-arrow{ display:none; }
  .brand{ padding:6px 10px 8px; border-radius:12px; }
  .brand-logo-img{ --logo-w:216px; }        /* 198px visible */
  .brand::after{ left:9px; right:9px; bottom:4px; }
}

@media (max-width: 640px){
  .brand-logo-img{ --logo-w:147px; }        /* 135px visible - unchanged from the approved mobile size */
  .hero{ padding-top:32px; }
  .hero-copy h1{ font-size:1.9rem; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn{ text-align:center; }
  /* single column on phones: the divider logic follows in the block below */
  .trust-strip-inner{ gap:10px 20px; }
  .section{ padding:52px 0; }
  .eyebrow-rule h2{ font-size:1.5rem; }
  .svc-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .svc-body{ padding:24px 10px 16px; }
  .svc-body h3{ font-size:0.8rem; }
  .why-grid{ grid-template-columns:1fr; }
  .directory-section{ padding:36px 0 4px; }
  .directory-grid{ grid-template-columns:1fr; max-width:100%; gap:26px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; justify-content:center; }
  .ct-banner--footer{ padding:24px 18px 14px; border-radius:22px; }
  .ct-banner--footer .ct-icon-btn{ width:46px; height:46px; }
  .ct-banner--footer .ct-icon-btn svg{ width:19px; height:19px; }
  .ct-banner--footer .ct-banner-strip{ font-size:0.6rem; padding:8px 12px; gap:5px 8px; }
}

:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

/* Mobile: show the shop photo whole. The 340px min-height on .shop-photo img
   squeezes a 16:9 photo into a near-square box and crops ~46% of its width,
   cutting off the Sunroof King signage. .shop-photo is used by index.html only. */
@media (max-width: 640px){
  .shop-photo img{ min-height:0; height:auto; aspect-ratio:16/9; }
}

/* PHONE: the molded plate and the plated hamburger are switched OFF here.

   The cut-off is 560px, not 480px. At 481px the plate (+22px) and the plated
   hamburger (+8px) put the row at 489px in a 481px window — an 8px overflow,
   because the Call/Text control does not compact until 480px. Dropping both
   at 560px leaves 481-560 at 459px, comfortably clear, and hands the approved
   2026-08-25 mobile arrangement back untouched at its approved sizes.
   The cream band and the orange edge still carry the look down to the phone. */
@media (max-width: 560px){
  .brand{
    padding:0; border:0; border-radius:0;
    background:none; box-shadow:none;
  }
  .brand::after{ display:none; }
  .hamburger{
    width:38px; height:38px; padding:0; border:0;
    background:none; box-shadow:none; border-radius:0;
  }
  .hamburger span{ height:2px; }
}

/* ============================================================
   MOBILE HEADER — CALL / TEXT CTA   (added 2026-08-25)

   The header Call/Text pill used to be switched off below 700px
   (`.ct-banner--sm{ display:none }`), leaving phones with only a logo and a
   hamburger. Mobile is the primary customer experience, so the CTA now stays
   in the header at every width.

   Nothing here is new design: the 701-980px band already renders exactly this
   arrangement (logo + Call/Text pill + hamburger on one row) and is approved.
   These rules only size that same arrangement down so it fits a phone. The
   markup, the wording, and the tel:/sms: hrefs are untouched.

   Desktop (>= 981px) is not reached by any rule below.

   Fit arithmetic, measured on staging at the header's real widths (the header
   row has no horizontal padding: `.header-inner{ padding:14px 0 }` overrides
   `.wrap`, so the full viewport width is available):

     <= 700px   205 + 240 + 38 + 48 gaps = 531   fits from 531px
     <= 480px   135 + 204 + 38 + 24 gaps = 401   fits from 402px
     <= 400px   118 + 195 + 38 + 20 gaps = 371   fits from 372px
     <= 374px   wraps to two rows, so it cannot overflow at any width
   ============================================================ */

/* Step 1 — 481-700px. The pill fits at its approved size; it only had to stop
   being hidden. No other change in this band. */

/* Step 2 — <= 480px. Below ~462px the approved pill no longer clears the logo
   and the hamburger, so the pill is sized down. Wording, colours, artwork and
   links are unchanged; only metrics move. */
@media (max-width: 480px){
  .header-inner{ gap:12px; }
  .ct-banner--sm{ padding:4px 12px 4px 4px; gap:7px; }
  .ct-banner--sm .ct-icon-btn{ width:34px; height:34px; }
  .ct-banner--sm .ct-icon-btn svg{ width:15px; height:15px; }
  .ct-banner-label-sm{ font-size:0.55rem; letter-spacing:0.04em; }
  .ct-banner-phone-sm{ font-size:0.86rem; }

  /* Touch targets. The icon buttons are 34px so the pill stays compact, but a
     tap target must be at least 44px. An empty, transparent ::after centred on
     each button extends the hit area to 44px without the artwork growing: the
     pseudo-element is part of the <a>, so a tap anywhere in it still triggers
     the same tel:/sms: link. The centre text link reaches 44px through
     min-height instead, which is shorter than the pill's own height and so
     does not make the header taller. */
  .ct-banner--sm .ct-icon-btn{ position:relative; }
  .ct-banner--sm .ct-icon-btn::after{
    content:""; position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:44px; height:44px; border-radius:50%;
  }
  .ct-banner-center-sm{ min-height:44px; justify-content:center; }
}

/* Step 3 — <= 400px. The last step that keeps one row on a 375px iPhone.
   The logo takes one more step down, 135px -> 118px, continuing the reduction
   it already makes at 981px (205px) and 640px (135px). */
@media (max-width: 400px){
  .header-inner{ gap:10px; }
  .brand-logo-img{ --logo-w:129px; }        /* 118px visible - unchanged from the approved mobile size */
  .ct-banner--sm{ padding:4px 10px 4px 4px; gap:6px; }
  .ct-banner-phone-sm{ font-size:0.82rem; }
}

/* Step 4 — <= 374px. Narrower than any current iPhone (SE is 375px), so this
   is a safety net rather than a layout anyone should see. Rather than let the
   row overflow, the pill drops onto its own full-width line beneath the logo
   and hamburger. Wrapping is done with flex order on the existing elements,
   so the markup order is untouched. */
@media (max-width: 374px){
  .header-inner{ flex-wrap:wrap; row-gap:8px; }
  .brand{ order:1; }
  .hamburger{ order:2; margin-left:auto; }
  .ct-banner--sm{ order:3; flex-basis:100%; justify-content:center; }
}

/* ============================================================
   VEHICLE MAKES MEGA-MENU  (desktop)   — added 2026-08-31
   One top-level nav item that is BOTH a link to /vehicle-makes/
   and the trigger for a grouped panel. Opens on hover and on
   keyboard focus (:focus-within), so it needs no extra focusable
   control in the nav row — the header has no width left for one.
   Escape and outside-click are handled in script.js.
   Brands with a finished page are links; the rest are plain spans,
   same rule as the hub itself. No dead links.
   ============================================================ */
/* 2026-09-02: .nav-item--mega gives up its containing block and .main-nav
   takes it (see `position:relative` on .main-nav above), so the 880px panel is
   anchored to the RIGHT EDGE OF THE NAV instead of being centred on the
   "Vehicle Makes" item. Centred, the item's new position further right pushed
   the panel past the viewport and gave every page a horizontal scrollbar —
   even while closed, because visibility:hidden still counts toward scrollWidth.
   Hover, focus-within, Escape and outside-click behaviour are unchanged. */
.nav-item--mega{ position:static; display:flex; align-items:center; }
.nav-item--mega > a::after{
  content:""; display:inline-block; width:0; height:0; margin-left:5px;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; vertical-align:middle;
  transition:transform 0.15s ease;
}
.nav-item--mega:hover > a::after,
.nav-item--mega:focus-within > a::after{ transform:rotate(180deg); }

.mega{
  position:absolute; top:calc(100% + 10px); left:auto; right:0;
  transform:translateY(6px);
  width:min(880px, calc(100vw - 48px));
  background:linear-gradient(180deg, #FFFFFF 0%, #FDFAF5 100%);
  border:1px solid var(--hdr-edge-soft); border-radius:14px;
  box-shadow:0 2px 6px rgba(23,20,18,0.08), 0 26px 60px rgba(23,20,18,0.22);
  padding:26px 28px 24px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index:120;
}
.nav-item--mega:hover .mega,
.nav-item--mega:focus-within .mega,
.mega.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
}
.mega-group h4{
  font-family:var(--font-sans); font-size:0.95rem; font-weight:900;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--charcoal);
  padding-bottom:9px; margin-bottom:11px; border-bottom:2px solid var(--red);
}
.mega-list{ display:flex; flex-direction:column; gap:1px; }
.mega-list a, .mega-list span{
  font-size:1.05rem; font-weight:600; line-height:1.3;
  padding:7px 9px; border-radius:6px; border-bottom:0;
}
.mega-list span{ color:var(--charcoal-soft); font-weight:500; }
.mega-list a{ color:var(--red); }
.mega-list a:hover{ background:var(--cream); color:var(--red-dark); border-bottom:0; }
.mega-foot{
  grid-column:1 / -1; border-top:1px solid var(--line); padding-top:14px; margin-top:2px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.mega-foot p{ font-size:0.9rem; color:var(--charcoal-soft); margin:0; }
.mega-foot a{ font-size:0.92rem; font-weight:800; color:var(--red); border-bottom:0; }
.mega-foot a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .mega{ transition:none; }
  .nav-item--mega > a::after{ transition:none; }
}

/* ---------- Mobile: Vehicle Makes as an expandable group ---------- */
.mnav-group{ border-bottom:1px solid var(--line); }
.mnav-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-sans); font-size:1.02rem; font-weight:700; color:var(--charcoal);
  padding:14px 0; min-height:48px;
}
.mnav-toggle::after{
  content:""; width:9px; height:9px; flex-shrink:0; margin-right:2px;
  border-right:2.5px solid var(--red); border-bottom:2.5px solid var(--red);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform 0.18s ease;
}
.mnav-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.mnav-panel{ display:none; padding:2px 0 16px; }
.mnav-panel.is-open{ display:block; }
.mnav-sub{
  font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--charcoal-soft); margin:14px 0 8px;
}
.mnav-sub:first-child{ margin-top:4px; }
.mnav-brands{ display:flex; flex-wrap:wrap; gap:8px; }
.mnav-brands a, .mnav-brands span{
  display:inline-flex; align-items:center;
  min-height:44px; padding:10px 14px; border-radius:9px;
  font-size:0.92rem; font-weight:700; line-height:1.2;
  border:1px solid var(--line); background:var(--cream); color:var(--charcoal-soft);
}
.mnav-brands a{ background:var(--white); border-color:var(--red); color:var(--red); }
.mnav-all{
  display:inline-flex; align-items:center; min-height:46px; margin-top:16px;
  font-weight:800; color:var(--red); font-size:0.95rem;
}
@media (prefers-reduced-motion: reduce){ .mnav-toggle::after{ transition:none; } }

/* ---------- Footer: four link columns beside the brand block ---------- */
.footer-grid{ grid-template-columns:1.25fr 0.85fr 0.95fr 1.15fr 1.15fr; }
.footer-col .footer-sub{
  font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em;
  color:rgba(255,255,255,0.45); margin:14px 0 6px;
}
.footer-col .footer-sub:first-of-type{ margin-top:0; }
.footer-col a.is-secondary{ font-size:0.8rem; opacity:0.78; padding-left:10px; }

@media (max-width: 1160px){
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width: 760px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px){
  .footer-grid{ grid-template-columns:1fr; }
}