/* ============================================================
   HAULKING — Prestige Towing, Sydney
   Design tokens (LOCKED — do not drift)
   Canvas:  matte dark grey #202024   Surface: #2A2A30
   Type:    ivory   #F2EEE6    Muted:   #9B958A
   Accent:  rose gold #CE9576 (rules/eyebrows) · #EBBD97 (bright) — matches the logo
   Font:    Archivo variable (wdth 62–125) — one family, many voices
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}

:root {
  --r-sm: 10px;   /* controls: inputs, selects, chips, tags, icon boxes, mega items */
  --r-md: 14px;   /* surfaces: cards, media, tiles, panels, tables */
  color-scheme: dark;   /* native date/time pickers + scrollbars render dark, not white */
  --ink:        #0E0E12;          /* deep space, not washed grey */
  --surface:    #16161C;
  --surface-2:  #1E1E26;
  --ivory:      #F4F1EA;
  --ivory-dim:  #CBC5BA;
  --muted:      #9B958C;
  --gold:       #E08B57;          /* hotter ember-copper */
  --gold-hi:    #FFB585;
  --ember:      255, 122, 61;     /* rgb triplets for ambient glows */
  --indigo:     96, 116, 190;
  --rule:       rgba(244, 241, 234, 0.10);
  --rule-gold:  rgba(224, 139, 87, 0.38);
  --max:        1200px;
  --pad:        clamp(20px, 5vw, 48px);
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

section { background: transparent; } /* body carries the atmosphere */
/* ambient aurora — two colour fields drifting behind all content */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 78% 12%, rgba(var(--ember), 0.13) 0%, transparent 65%),
    radial-gradient(50% 44% at 12% 78%, rgba(var(--indigo), 0.12) 0%, transparent 65%),
    radial-gradient(60% 60% at 50% 115%, rgba(var(--ember), 0.05) 0%, transparent 60%),
    var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: hk-aurora 46s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes hk-aurora {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.6%, 0) scale(1.06); }
}

img, svg, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a, button { cursor: pointer; touch-action: manipulation; }

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

::selection { background: var(--gold); color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Type voices ---------- */
.eyebrow {
  font-variation-settings: "wdth" 118;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

h1, h2, h3 { font-family: 'Clash Display', Archivo, sans-serif; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }

h1 { font-size: clamp(44px, 7vw, 96px); line-height: 1.0; }
h2 { font-size: clamp(30px, 4.2vw, 50px); }
h3 { font-size: 20px; font-weight: 600; }

.lede { font-size: clamp(17px, 2vw, 20px); color: var(--ivory-dim); max-width: 58ch; }

.gold-rule {
  width: 56px; height: 1px; background: var(--gold);
  margin: 26px 0;
  border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px;
  font: inherit; font-weight: 560; font-size: 14.5px;
  letter-spacing: 0.01em; text-transform: none;   /* sentence case reads modern; ALL-CAPS + wide tracking dates a page fast */
  border: 1px solid var(--gold); border-radius: var(--r-sm);
  background: var(--gold); color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 20px -12px rgba(0,0,0,0.8);
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 160ms var(--ease), box-shadow 200ms var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn.ghost {
  background: transparent; color: var(--ivory);
  border-color: rgba(242,238,230,0.22); box-shadow: none;
}
.btn svg { width: 15px; height: 15px; transition: transform 220ms var(--ease); }

@media (hover: hover) {
  .btn:hover { background: var(--gold-hi); border-color: var(--gold-hi); box-shadow: 0 10px 34px -10px rgba(var(--ember), 0.55); }
  .btn.ghost:hover { border-color: var(--gold); color: var(--gold-hi); background: transparent; }
  .btn:hover svg { transform: translateX(4px); }
  a.tel-link:hover { color: var(--gold-hi); }
}

/* ---------- Nav ---------- */
header.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(12, 12, 16, 0.92); /* solid-ish: NEVER backdrop-filter on fixed (iOS) */
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease);
}
header.nav.scrolled { border-bottom-color: var(--rule); }

.nav-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--pad);
  height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.wordmark { display: flex; align-items: center; padding: 8px 0; flex-shrink: 0; }
/* explicit width + no-shrink: in the flex nav the auto-width logo collapsed to 0 once the
   desktop links competed for space (861/108 ratio → 271px at 34px tall) */
.brand-logo { height: 34px; width: 271px; display: block; }
.foot-mark .brand-logo { height: 38px; }
@media (max-width: 640px) { .brand-logo { height: 28px; width: 223px; } }

.nav-links { display: flex; gap: 34px; align-items: center; list-style: none; }
.nav-links a {
  font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ivory-dim);
  padding: 8px 0;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.nav-cta .btn { white-space: nowrap; }
@media (hover: hover) { .nav-links a:hover { color: var(--gold-hi); } }

/* ---------- Services mega-menu ---------- */
.nav-links li.has-mega { position: relative; }
.mega-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ivory-dim); background: none; border: 0; padding: 8px 0;
  transition: color 200ms var(--ease);
}
.mega-toggle .chev { width: 13px; height: 13px; transition: transform 240ms var(--ease); }
.has-mega.open .mega-toggle, .has-mega:focus-within .mega-toggle { color: var(--gold-hi); }
.has-mega.open .mega-toggle .chev { transform: rotate(180deg); }
@media (hover: hover) { .mega-toggle:hover { color: var(--gold-hi); } .has-mega:hover .mega-toggle .chev { transform: rotate(180deg); } }

.mega {
  position: absolute; top: 100%; left: -24px; z-index: 120; padding-top: 16px;
  width: 620px; max-width: 88vw;
  opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
}
.has-mega.open > .mega, .has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
@media (hover: hover) { .has-mega:hover > .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } }
.mega-inner {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 16px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7);
}
/* reset the nav's uppercase/tracking inheritance inside the panel (buttons keep theirs) */
.mega a:not(.btn), .mega b, .mega span:not(.mega-eyebrow) { text-transform: none; letter-spacing: normal; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-item {
  display: block; padding: 12px 14px; border-radius: var(--r-sm);
  transition: background 180ms var(--ease);
}
.mega-item b { display: block; font-weight: 560; font-size: 15px; line-height: 1.3; color: var(--ivory); letter-spacing: -0.01em; }
.mega-item span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
@media (hover: hover) { .mega-item:hover { background: var(--surface-2); } .mega-item:hover b { color: var(--gold-hi); } }
.mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 14px 14px 4px; border-top: 1px solid var(--rule);
}
.mega-marques { font-size: 12.5px; color: var(--ivory-dim); line-height: 1.9; max-width: 62%; }
.mega-eyebrow { font-size: 11px; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--gold-hi); margin-right: 6px; }
.mega-marques .dot { color: var(--muted); }
@media (hover: hover) { .mega-marques a:hover { color: var(--gold-hi); } }
.btn.btn-sm { min-height: 40px; padding: 0 18px; font-size: 12px; }

.nav-cta { display: flex; align-items: center; gap: 18px; }
.tel-link {
  font-variation-settings: "wdth" 108;
  font-weight: 600; font-size: 15px; letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ivory);
  display: inline-flex; align-items: center; gap: 9px;
  transition: color 200ms var(--ease);
}
.tel-link svg { width: 16px; height: 16px; color: var(--gold-hi); }

.burger {
  display: none;
  background: none; border: 0; padding: 12px;
  width: 48px; height: 48px;
}
.burger span {
  display: block; width: 24px; height: 1.5px; background: var(--ivory);
  margin: 5px 0; transition: transform 260ms var(--ease), opacity 200ms;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
  padding-top: 110px; /* clears fixed nav when content is taller than viewport */
  padding-bottom: clamp(56px, 9vh, 110px);
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(206, 149, 118, 0.13) 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 100%, rgba(206, 149, 118, 0.05) 0%, transparent 50%),
    var(--ink);
}
/* hairline gold horizon */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-gold) 30%, var(--rule-gold) 70%, transparent);
}
.hero-media {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
/* real media (post-finalize --media): fills the same slots the .ph panels hold now */
.hero-media picture, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.truck img.truck-img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border: 1px solid var(--rule); }
.hero-media .ph { position: absolute; inset: 0; }
/* hero placeholder note: discreet corner tag so it never collides with hero copy */
.hero-media .ph .ph-label {
  position: absolute; top: 96px; right: var(--pad);
  max-width: 250px; text-align: right; padding: 0; line-height: 1.9;
  font-size: 10px; opacity: 0.75;
}
.hero-media .ph .ph-label svg { margin: 0 0 8px auto; width: 22px; height: 22px; }
@media (max-width: 820px) { .hero-media .ph .ph-label { display: none; } }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,12,16,0.55) 0%, rgba(12,12,16,0.35) 45%, rgba(12,12,16,0.94) 100%);
}
.hero .wrap { position: relative; z-index: 2; }

.hero .eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hero .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }

.hero p.lede { margin-top: 26px; }

.hero-actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

.hero-meta {
  display: flex; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap;
  margin-top: clamp(40px, 6vh, 72px);
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.hero-meta div small {
  display: block; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.hero-meta div strong {
  font-variation-settings: "wdth" 105;
  font-weight: 600; font-size: 17px; letter-spacing: 0.02em;
}

/* ---------- Placeholder media panels (until Ahmed's photos arrive) ---------- */
.ph {
  background:
    linear-gradient(135deg, rgba(242,238,230,0.045) 0%, rgba(242,238,230,0.015) 100%);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(-45deg, transparent 0 18px, rgba(242,238,230,0.022) 18px 19px);
}
.ph .ph-label {
  position: relative;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 20px; line-height: 2;
}
.ph .ph-label svg { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--gold); opacity: 0.7; }

/* ---------- Marques strip ---------- */
.marques { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.marques .wrap {
  display: flex; align-items: center; gap: clamp(24px, 4vw, 56px);
  padding-top: 22px; padding-bottom: 22px;
  overflow-x: auto; scrollbar-width: none;
}
.marques .wrap::-webkit-scrollbar { display: none; }
.marques small {
  flex: none; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  position: sticky; left: 0; z-index: 2; padding-right: 20px;
  /* solid mask first, then a soft fade — without the solid step the marquee text
     slides right up against the label and reads as one broken word */
  background: var(--ink); box-shadow: 20px 0 0 0 var(--ink), 40px 0 24px 6px var(--ink);
}
.marques span {
  flex: none;
  font-variation-settings: "wdth" 112;
  font-weight: 500; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: 0.75; white-space: nowrap;
}

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 12vh, 150px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(44px, 6vh, 72px); }
.section-head .eyebrow { display: block; margin-bottom: 18px; }
.section-head .seal { height: 46px; width: auto; margin-bottom: 20px; opacity: 0.96; }

/* ---------- Services ---------- */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.svc {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--ink);
  transition: background 300ms var(--ease);
  position: relative;
}
/* .reveal would otherwise clobber .svc's background transition (same element,
   later declaration) — restate all three per-property, then stagger only the entrance */
.svc.reveal { transition: opacity 600ms var(--ease), transform 600ms var(--ease), background 300ms var(--ease); }
.services-grid .svc.reveal:nth-child(3n+2) { transition-delay: 70ms, 70ms, 0ms; }
.services-grid .svc.reveal:nth-child(3n+3) { transition-delay: 140ms, 140ms, 0ms; }
.svc::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease);
}
@media (hover: hover) {
  .svc:hover { background: var(--surface); }
  .svc:hover::after { transform: scaleX(1); }
}
a.svc { display: block; }
.svc .more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-hi);
}
.svc .more::after { content: "→"; transition: transform 220ms var(--ease); }
@media (hover: hover) { .svc:hover .more::after { transform: translateX(4px); } }
.svc .glyph {
  display: block; width: 22px; height: 22px; margin-bottom: 38px;
  color: var(--gold-hi);
  transition: transform 420ms var(--ease);
}
@media (hover: hover) { .svc:hover .glyph { transform: translateY(-2px); } }
.svc h3 { margin-bottom: 12px; }
.svc p { font-size: 15px; color: var(--muted); }

/* ---------- Standard (process) ---------- */
.standard { background: linear-gradient(180deg, rgba(22,22,28,0.85) 0%, rgba(14,14,18,0.4) 100%); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.standard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 56px); }
.std { border-top: 1px solid var(--rule); padding-top: 24px; }
.std small {
  display: block; font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: 46px; line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(235,189,151,0.5);
  margin-bottom: 16px;
}
.std h3 { font-size: 18px; margin-bottom: 10px; }
.std p { font-size: 14.5px; color: var(--muted); }

/* ---------- Fleet ---------- */
.fleet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.truck { position: relative; }
.truck .ph { aspect-ratio: 4 / 3; }
.truck figcaption { padding: 22px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.truck figcaption h3 { font-size: 19px; }
.truck figcaption span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ---------- Coverage ---------- */
.coverage-flex { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills span, .pills a {
  font-size: 13px; letter-spacing: 0.06em; color: var(--ivory-dim);
  border: 1px solid var(--rule); padding: 11px 18px; border-radius: 999px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
@media (hover: hover) { .pills a:hover { border-color: var(--gold); color: var(--gold-hi); } }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.review {
  background: var(--surface); border: 1px solid var(--rule);
  padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 18px;
}
.review .stars { display: flex; gap: 3px; }
.review .stars svg { width: 14px; height: 14px; color: var(--gold-hi); }
.review blockquote { font-size: 15.5px; color: var(--ivory-dim); line-height: 1.7; flex: 1; }
.review cite { font-style: normal; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------- CTA / Contact ---------- */
.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(100% 130% at 50% 120%, rgba(206, 149, 118, 0.16) 0%, transparent 60%),
    var(--surface);
  border-top: 1px solid var(--rule);
  text-align: center;
}
/* embossed HaulKing monogram — transparent tile + real relief (highlight above,
   shadow below), masked to fade out behind the centred copy. No looping animation. */
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(/images/monogram-pattern.webp) center / 310px auto repeat;
  opacity: 0.30;
  filter: drop-shadow(0 1.5px 0 rgba(0,0,0,0.55)) drop-shadow(0 -1px 0 rgba(255,238,225,0.10));
  -webkit-mask-image: radial-gradient(115% 100% at 50% 50%, transparent 0%, transparent 32%, #000 76%);
          mask-image: radial-gradient(115% 100% at 50% 50%, transparent 0%, transparent 32%, #000 76%);
}
.cta .wrap { position: relative; z-index: 1; max-width: 780px; }

/* --- monogram motion (transform/opacity only, GPU-friendly; off for reduced-motion) --- */
.cta h2 { margin-bottom: 18px; }
.cta p { color: var(--ivory-dim); margin-bottom: 40px; }
.cta .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta .tel-big {
  display: block;
  font-variation-settings: "wdth" 104;
  font-size: clamp(30px, 5vw, 46px); font-weight: 620; letter-spacing: 0.02em;
  color: var(--ivory); margin-bottom: 34px;
  transition: color 200ms var(--ease);
}
@media (hover: hover) { .cta .tel-big:hover { color: var(--gold-hi); } }

/* ---------- Footer ---------- */
footer { position: relative; overflow: hidden; border-top: 1px solid var(--rule); padding: 56px 0 40px; }
/* faint monogram relief, weighted to the base so link columns stay clean */
footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(/images/monogram-pattern.webp) center bottom / 260px auto repeat;
  opacity: 0.16;
  filter: drop-shadow(0 1.5px 0 rgba(0,0,0,0.5));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 44%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 44%, #000 100%);
}
footer .wrap { position: relative; z-index: 1; }
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.foot-grid p, .foot-grid a { font-size: 13.5px; color: var(--muted); }
.foot-grid a { display: block; padding: 7px 0; transition: color 200ms var(--ease); }
@media (hover: hover) { .foot-grid a:hover { color: var(--gold-hi); } }
.foot-note { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-note p { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* entrance stagger for sibling cards that intersect together */
.standard-grid .std.reveal:nth-child(2) { transition-delay: 60ms; }
.standard-grid .std.reveal:nth-child(3) { transition-delay: 120ms; }
.standard-grid .std.reveal:nth-child(4) { transition-delay: 180ms; }
.reviews-grid .review.reveal:nth-child(2) { transition-delay: 70ms; }
.reviews-grid .review.reveal:nth-child(3) { transition-delay: 140ms; }
.fleet-grid .truck.reveal:nth-child(2) { transition-delay: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}
/* no-JS / fallback safety: never leave content hidden */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .standard-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .coverage-flex { grid-template-columns: 1fr; }
}

/* nav collapses earlier than the content grids — the full link row + phone + CTA
   genuinely doesn't fit between 820 and ~1080 */
@media (max-width: 1080px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-cta { gap: 4px; }
  .burger { display: block; }
  .mobile-menu {
    position: fixed; inset: 76px 0 0 0; z-index: 99;
    background: var(--ink);
    padding: 36px var(--pad);
    display: none; flex-direction: column; gap: 6px;
    overflow-y: auto;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    font-variation-settings: "wdth" 100;
    font-size: 26px; font-weight: 540; padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  /* keyframes fire on display:none → flex, so links cascade in when the menu opens */
  .mobile-menu.open a { animation: hk-menu-in 360ms var(--ease) backwards; }
  .mobile-menu.open a:nth-child(2) { animation-delay: 40ms; }
  .mobile-menu.open a:nth-child(3) { animation-delay: 80ms; }
  .mobile-menu.open a:nth-child(4) { animation-delay: 120ms; }
  .mobile-menu.open a:nth-child(5) { animation-delay: 160ms; }
  .mobile-menu.open a:nth-child(6) { animation-delay: 200ms; }
  .mobile-menu.open a:nth-child(7) { animation-delay: 240ms; }
  .mobile-menu .btn { margin-top: 28px; justify-content: center; }
}
@media (max-width: 820px) {
  .tel-num { display: none; } /* icon-only phone link on mobile; menu + hero carry the number */
  .nav-cta .tel-link { padding: 14px; min-width: 44px; min-height: 44px; justify-content: center; }
  .services-grid { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 24px; }
}

@media (min-width: 1081px) { .mobile-menu { display: none !important; } }

/* ============================================================
   Internal pages
   ============================================================ */
.page-hero {
  padding: 170px 0 clamp(56px, 8vh, 96px);
  background:
    radial-gradient(110% 100% at 82% 0%, rgba(206, 149, 118, 0.11) 0%, transparent 55%),
    var(--ink);
  border-bottom: 1px solid var(--rule);
}
.page-hero .eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.page-hero .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.page-hero h1 { font-size: clamp(36px, 5.4vw, 64px); }
.page-hero .lede { margin-top: 22px; }
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); transition: color 200ms var(--ease); }
@media (hover: hover) { .crumbs a:hover { color: var(--gold-hi); } }
/* sibling-service links — stops each service page being a dead end */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin-top: 22px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.rel-card { display: block; background: var(--ink); padding: 22px 24px; transition: background 180ms var(--ease); }
.rel-card b { display: block; font-variation-settings: "wdth" 100; font-size: 17px; font-weight: 560; color: var(--ivory); letter-spacing: -0.01em; }
.rel-card span { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
@media (hover: hover) { .rel-card:hover { background: var(--surface); } .rel-card:hover b { color: var(--gold-hi); } }
.rel-more { margin-top: 20px; font-size: 14px; color: var(--muted); }
.rel-more a { color: var(--gold-hi); }

/* ============================================================
   EDITORIAL SECTIONS — photography carries the page.
   Full-bleed image, type panel overlapping it off-grid. No cards, no boxes.
   ============================================================ */
.ed {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--max)) 1fr;
  align-items: center;
  padding: clamp(80px, 12vh, 150px) 0;
}
.ed-media {
  grid-column: 2 / 4;          /* bleeds off the right edge */
  grid-row: 1;                 /* MUST share the row with the panel, or they stack */
  position: relative; z-index: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-md);
}
.ed-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-panel {
  grid-column: 2 / 3;
  grid-row: 1;
  justify-self: start;
  position: relative; z-index: 2;
  max-width: 520px;
  margin-left: var(--pad);
  padding: clamp(34px, 4vw, 52px);
  background: linear-gradient(180deg, rgba(28,28,32,0.96) 0%, rgba(28,28,32,0.92) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9);
}
/* oversized index numeral — editorial device, purely typographic */
.ed-index {
  position: absolute; top: -0.52em; left: clamp(28px, 4vw, 46px);
  font-variation-settings: "wdth" 78;
  font-size: clamp(72px, 9vw, 128px); font-weight: 620; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(206,149,118,0.32);
  pointer-events: none;
}
.ed-panel h2 { margin: 14px 0 18px; font-size: clamp(32px, 4.6vw, 58px); }
.ed-body { color: var(--ivory-dim); font-size: 16.5px; line-height: 1.7; }
.ed-specs {
  list-style: none; display: flex; flex-wrap: wrap; gap: 26px 40px;
  margin: 30px 0 32px; padding-top: 26px; border-top: 1px solid var(--rule);
}
.ed-specs b {
  display: block; font-variation-settings: "wdth" 100;
  font-size: 26px; font-weight: 620; color: var(--gold-hi); letter-spacing: -0.02em;
}
.ed-specs span {
  display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px;
}
/* mirrored variant for alternating rhythm down the page */
.ed.flip .ed-media { grid-column: 1 / 3; }
.ed.flip .ed-panel { grid-column: 2 / 3; justify-self: end; margin-left: 0; margin-right: var(--pad); }
.ed.flip .ed-index { left: auto; right: clamp(28px, 4vw, 46px); }

@media (max-width: 900px) {
  .ed { grid-template-columns: 1fr; padding: 64px 0 0; }
  .ed-media { grid-column: 1; aspect-ratio: 4 / 3; border-radius: 0; }
  .ed-panel {
    grid-column: 1; grid-row: auto; justify-self: stretch;
    max-width: none; margin: -60px var(--pad) 0; padding: 30px 26px;
  }
  .ed.flip .ed-media, .ed.flip .ed-panel { grid-column: 1; margin-left: var(--pad); margin-right: var(--pad); }
}

/* client logo wall — drop transparent PNG/SVG into images/clients/ and swap the
   .trusted-grid text list for .logo-wall. Greyscale at rest keeps a row of clashing
   brand colours calm; full colour on hover. */
.logo-wall {
  list-style: none; display: grid; gap: 34px 46px; align-items: center; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--rule); padding-top: 32px;
}
.logo-wall li { display: flex; align-items: center; justify-content: center; }
.logo-wall img {
  max-height: 38px; width: auto; max-width: 100%;
  filter: grayscale(1) brightness(1.7); opacity: 0.55;
  transition: filter 260ms var(--ease), opacity 260ms var(--ease);
}
@media (hover: hover) { .logo-wall img:hover { filter: none; opacity: 1; } }

/* trade clients — names only (third-party marque logos need written permission) */
.trusted-grid {
  list-style: none; display: flex; flex-wrap: wrap; gap: 14px 0;
  margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 26px;
}
.trusted-grid li {
  font-variation-settings: "wdth" 100;
  font-size: clamp(15px, 1.6vw, 18px); font-weight: 500; color: var(--ivory-dim);
  padding: 0 26px; border-right: 1px solid var(--rule); line-height: 1.4;
}
.trusted-grid li:first-child { padding-left: 0; }
.trusted-grid li:last-child { border-right: 0; }
.trusted-note { margin-top: 20px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .trusted-grid li { padding: 0 14px; font-size: 14px; }
}

/* concrete equipment specs + transit cover — makes the "specialist" claim measurable */
.spec-strip {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; margin-top: 36px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden;
}
.spec-strip li { background: var(--ink); padding: 22px 20px; }
.spec-strip b {
  display: block; font-variation-settings: "wdth" 100;
  font-size: 21px; font-weight: 600; color: var(--gold-hi); letter-spacing: -0.01em;
}
.spec-strip span {
  display: block; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-top: 7px;
}

/* ---------- The one LIGHT section (deliberate contrast against the dark) ----------
   Rose gold is too pale on ivory, so the accent deepens to bronze for legible contrast. */
.light-band {
  background: var(--ivory); color: #23201D;
  border-top: 1px solid rgba(35,32,29,0.10); border-bottom: 1px solid rgba(35,32,29,0.10);
}
.light-band .eyebrow { color: #99653F; }
.signature { max-width: 780px; margin: 0 auto; text-align: center; }
.sig-crown { height: 54px; width: auto; margin: 0 auto 22px; display: block; }
.signature blockquote {
  font-variation-settings: "wdth" 94;
  font-size: clamp(26px, 3.9vw, 44px); font-weight: 560; line-height: 1.16;
  letter-spacing: -0.015em; color: #17150F; margin: 16px 0 24px; text-wrap: balance;
}
.signature .sig-body { font-size: 17px; line-height: 1.7; color: #4E463D; max-width: 60ch; margin: 0 auto; }
.signature figcaption {
  margin-top: 26px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #7A7066;
}
.sig-more { margin-top: 16px; font-size: 14px; }
.sig-more a { color: #99653F; border-bottom: 1px solid rgba(153,101,63,0.35); padding-bottom: 2px; }
@media (hover: hover) { .sig-more a:hover { color: #23201D; border-bottom-color: #23201D; } }

.crumbs span[aria-hidden], .crumbs .sep { opacity: 0.5; }
/* breadcrumbs now sit at the FOOT of the page */
.crumbs-foot { border-top: 1px solid var(--rule); padding: 26px 0 6px; }
.crumbs-foot .crumbs { margin-bottom: 0; }

/* mobile menu: services sub-list + section labels */
.mobile-menu .mm-eyebrow {
  display: block; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-hi); padding: 22px 0 2px; border: 0;
}
.mobile-menu .mm-eyebrow:first-child { padding-top: 0; }
.mobile-menu a.mm-svc { font-size: 19px; padding: 11px 0; font-weight: 500; }

.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.prose p { color: var(--ivory-dim); margin-bottom: 20px; max-width: 65ch; }
.prose h2 { font-size: clamp(24px, 3vw, 34px); margin: 44px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: none; margin: 0 0 22px; }
.prose ul li { color: var(--ivory-dim); padding: 10px 0 10px 26px; position: relative; border-bottom: 1px solid var(--rule); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 20px; width: 12px; height: 1px; background: var(--gold); }
.prose strong { color: var(--ivory); font-weight: 600; }

.aside-card {
  position: sticky; top: 100px;
   
  padding: clamp(26px, 3vw, 36px);
}
.aside-card h3 { margin-bottom: 8px; }
.aside-card > p { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; }
.aside-card .tel-big {
  display: block; font-variation-settings: "wdth" 104;
  font-size: 26px; font-weight: 620; color: var(--ivory); margin-bottom: 20px;
  transition: color 200ms var(--ease);
}
@media (hover: hover) { .aside-card .tel-big:hover { color: var(--gold-hi); } }
.aside-card .btn { width: 100%; justify-content: center; margin-bottom: 12px; }
.aside-card small { display: block; font-size: 12px; color: var(--muted); text-align: center; }

/* FAQ — native details/summary, styled */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0;
  font-variation-settings: "wdth" 100;
  font-size: 17px; font-weight: 540; color: var(--ivory);
  transition: color 200ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-size: 22px; font-weight: 300; color: var(--gold-hi);
  transition: transform 260ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) { .faq summary:hover { color: var(--gold-hi); } }
.faq details p { color: var(--muted); font-size: 15px; padding: 0 40px 22px 0; max-width: 65ch; }

/* ============================================================
   Forms
   ============================================================ */
.form-card { padding: clamp(26px, 4vw, 48px); scroll-margin-top: 96px; }
.step-dots { display: flex; gap: 8px; margin-bottom: 34px; }
.step-dot { flex: 1; height: 2px; background: var(--rule); position: relative; }
.step-dot.current, .step-dot.done { background: var(--gold); }
.step-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); font-weight: 600; display: block; margin-bottom: 8px; }
/* form headings are h2 for document outline, but sized like h3 */
.form-card h2 { font-size: 23px; font-variation-settings: "wdth" 100; font-weight: 540; letter-spacing: -0.01em; }
.form-step h2 { margin-bottom: 26px; }
.form-step { display: none; }
.form-step.active { display: block; animation: hk-step-in 280ms var(--ease); }
@keyframes hk-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hk-menu-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.form-step h3 { margin-bottom: 26px; font-size: 23px; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.frow.one { grid-template-columns: 1fr; }
.field label { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--ivory-dim); margin-bottom: 8px; }
.field label b { color: var(--gold-hi); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px;
  background: var(--ink); border: 1px solid var(--rule); color: var(--ivory);
  font: inherit; font-size: 16px; padding: 13px 16px;
  border-radius: var(--r-sm); -webkit-appearance: none; appearance: none;
  transition: border-color 200ms var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B958A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 42px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field input.field-invalid, .field select.field-invalid, .field textarea.field-invalid { border-color: #C4463D; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 7px; }

/* custom themed dropdown (JS-enhanced <select>) — dark, on-brand, replaces OS popup */
.hk-select { position: relative; }
.hk-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.hk-select-btn {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--ink); border: 1px solid var(--rule); color: var(--ivory);
  font: inherit; font-size: 16px; text-align: left; padding: 13px 16px; border-radius: var(--r-sm); cursor: pointer;
  transition: border-color 200ms var(--ease);
}
.hk-select:not(.has-value) .hk-select-label { color: var(--muted); }
.hk-select-chev { width: 13px; height: 13px; color: var(--muted); flex: none; transition: transform 240ms var(--ease); }
.hk-select.open .hk-select-btn, .hk-select-btn:focus-visible { border-color: var(--gold); outline: none; }
.hk-select.open .hk-select-chev { transform: rotate(180deg); color: var(--gold-hi); }
.hk-select.invalid .hk-select-btn { border-color: #C4463D; }
.hk-select-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  list-style: none; margin: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.75);
  max-height: 300px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.hk-select.open .hk-select-list { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hk-opt { padding: 11px 14px; border-radius: var(--r-sm); font-size: 15px; color: var(--ivory-dim); cursor: pointer; }
.hk-opt.hi { background: var(--surface-2); color: var(--ivory); }
.hk-opt[aria-selected="true"] { color: var(--gold-hi); }
.hk-opt[aria-selected="true"]::after { content: "✓"; float: right; color: var(--gold-hi); }
@media (hover: hover) { .hk-opt:hover { background: var(--surface-2); color: var(--ivory); } }

.file-dropzone {
  border: 1px dashed rgba(242, 238, 230, 0.25);
  padding: 26px 20px; text-align: center; cursor: pointer; position: relative;
  transition: border-color 200ms var(--ease);
  margin-bottom: 10px;
}
@media (hover: hover) { .file-dropzone:hover { border-color: var(--gold); } }
.file-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-dropzone p { font-size: 14px; color: var(--ivory-dim); pointer-events: none; }
.file-dropzone small { font-size: 12px; color: var(--muted); pointer-events: none; }
.file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.file-chip { font-size: 12px; color: var(--ivory-dim); border: 1px solid var(--rule); padding: 6px 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-error { display: none; font-size: 13px; color: #E07B72; margin-bottom: 8px; }
.file-error.is-visible { display: block; }

.fnav { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; }
.fnav .btn { min-width: 140px; justify-content: center; }
.fnav .spacer { flex: 1; }
.hp-wrap { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Sending / error overlays */
.hk-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(12, 12, 16, 0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease);
  padding: var(--pad);
}
.hk-overlay.on { opacity: 1; pointer-events: auto; }
.hk-overlay-inner {
  text-align: center; max-width: 480px;
  transform: scale(0.98);
  transition: transform 260ms var(--ease);
}
.hk-overlay.on .hk-overlay-inner { transform: scale(1); }
.hk-overlay-inner > p { font-variation-settings: "wdth" 100; font-size: 24px; font-weight: 560; margin-bottom: 10px; }
.hk-overlay-inner > small { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.hk-crown-pulse { width: 54px; height: 54px; color: var(--gold-hi); margin: 0 auto 24px; animation: hk-pulse 1.6s var(--ease) infinite; }
@keyframes hk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.92); } }
@media (prefers-reduced-motion: reduce) {
  .hk-crown-pulse { animation: none; }
  .form-step.active, .mobile-menu.open a { animation: none; }
  .hk-overlay-inner { transform: none; transition: none; }
  .btn, .btn:active { transform: none; }
}
.hk-err-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.hk-err-actions .btn { justify-content: center; }
.hk-err-retry {
  margin-top: 22px; background: none; border: 0; color: var(--muted);
  font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) { .hk-err-retry:hover { color: var(--ivory); } }

/* Thank-you / 404 */
.state-page { min-height: 100svh; display: flex; align-items: center; text-align: center; padding: 140px 0 80px; }
.state-page .wrap { max-width: 640px; }
.state-page .crown-lg { height: 64px; width: auto; margin: 0 auto 30px; display: block; }
.state-page h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 18px; }
.state-page p { color: var(--ivory-dim); margin-bottom: 36px; }
.state-page .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .aside-card { position: static; }
}
@media (max-width: 640px) {
  .frow { grid-template-columns: 1fr; }
  .page-hero { padding-top: 140px; }
  .fnav { flex-direction: column-reverse; }
  .fnav .btn { width: 100%; }
}

/* three-up variant of the standard grid (suburb pages) */
.standard-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .standard-grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .standard-grid.three { grid-template-columns: 1fr; } }

/* ============================================================
   ELEVATION v8 — hero as experience, scroll craft, micro-detail
   All motion respects prefers-reduced-motion (see block at end).
   ============================================================ */

/* ---- Lenis smooth scroll ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ---- Hero slideshow: 4 slides, long slow crossfade + Ken Burns on each ----
   Pure CSS (no JS, no CSP change). Slide 1 is the preloaded LCP image and is the
   only one visible at rest, so nothing pops in late. 24s cycle = 6s per slide. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hero-slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slide { animation: hk-slide 24s linear infinite; will-change: opacity; }
  .hero-slide:nth-child(1) { animation-delay:  0s; }
  .hero-slide:nth-child(2) { animation-delay:  6s; }
  .hero-slide:nth-child(3) { animation-delay: 12s; }
  .hero-slide:nth-child(4) { animation-delay: 18s; }
}
@keyframes hk-slide {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  25%   { opacity: 1; }
  29%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* ---- Hero: slow Ken Burns drift on the image ---- */
.hero-media img, .hero-media picture {
  will-change: transform;
  animation: hk-kenburns 26s ease-in-out infinite alternate;
  transform-origin: 62% 44%;
}
/* slideshow slides need BOTH animations; the shorthand above would clobber the fade */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide { animation: hk-slide 24s linear infinite, hk-kenburns 26s ease-in-out infinite alternate; }
  .hero-slide:nth-child(1) { animation-delay:  0s, 0s; }
  .hero-slide:nth-child(2) { animation-delay:  6s, 0s; }
  .hero-slide:nth-child(3) { animation-delay: 12s, 0s; }
  .hero-slide:nth-child(4) { animation-delay: 18s, 0s; }
}
@keyframes hk-kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.6%, 0); }
}

/* ---- Hero: gold horizon hairline breathes ---- */
.hero::after { animation: hk-hairline 6.5s ease-in-out infinite; }
@keyframes hk-hairline {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---- Hero H1: line-by-line rise reveal ---- */
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero h1 .line:nth-child(2) > span { transition-delay: 110ms; }
body.ready .hero h1 .line > span { transform: translateY(0); }

/* stagger the hero's supporting elements in after the headline */
.hero .eyebrow, .hero p.lede, .hero-actions, .hero-meta {
  opacity: 0; transform: translateY(14px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
body.ready .hero .eyebrow { transition-delay: 120ms; }
body.ready .hero p.lede { transition-delay: 340ms; }
body.ready .hero-actions { transition-delay: 460ms; }
body.ready .hero-meta { transition-delay: 580ms; }
body.ready .hero .eyebrow,
body.ready .hero p.lede,
body.ready .hero-actions,
body.ready .hero-meta { opacity: 1; transform: none; }

/* ---- Hero: scroll cue ---- */
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transition: opacity 900ms var(--ease) 900ms;
}
body.ready .scroll-cue { opacity: 0.7; }
.scroll-cue span {
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ivory-dim);
}
.scroll-cue i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(var(--gold-hi), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue i::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--gold-hi);
  animation: hk-cue 2.1s var(--ease) infinite;
}
@keyframes hk-cue {
  0%   { top: -50%; }
  60%, 100% { top: 100%; }
}
@media (max-width: 820px) { .scroll-cue { display: none; } }

/* ---- Clip-path image reveal (fleet, media) ----
   VISIBLE by default. Only JS-armed ('.armed') hides it, and only until '.in'.
   This guarantees the image never ships blank if the observer doesn't fire. */
.reveal-clip { clip-path: inset(0 0 0 0); transition: clip-path 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-clip img, .reveal-clip .ph { transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-clip.armed { clip-path: inset(0 0 100% 0); }
.reveal-clip.armed img, .reveal-clip.armed .ph { transform: scale(1.08); }
.reveal-clip.in { clip-path: inset(0 0 0 0); }
.reveal-clip.in img, .reveal-clip.in .ph { transform: scale(1); }

/* ---- Section heading line reveal ---- */
.line-reveal .line { display: block; overflow: hidden; }
.line-reveal .line > span {
  display: block; transform: translateY(105%);
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.line-reveal .line:nth-child(2) > span { transition-delay: 90ms; }
.line-reveal.in .line > span { transform: translateY(0); }

/* ---- Marque strip: continuous drift ---- */
.marques .wrap { overflow: hidden; }
.marques .track {
  display: flex; align-items: center; gap: clamp(28px, 4vw, 56px);
  animation: hk-marquee 42s linear infinite;
  will-change: transform;
}
.marques:hover .track { animation-play-state: paused; }
@keyframes hk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Animated gold underline on prose + crumb + footer links ---- */
.prose a:not(.btn), .aside-card a:not(.btn) {
  background-image: linear-gradient(var(--gold-hi), var(--gold-hi));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 320ms var(--ease);
  padding-bottom: 1px;
}
@media (hover: hover) {
  .prose a:not(.btn):hover, .aside-card a:not(.btn):hover { background-size: 100% 1px; }
}

/* ---- Fixed-nav anchor offset ---- */
[id] { scroll-margin-top: 92px; }

/* ---- Reduced motion: strip all of the above to instant/visible ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-media img, .hero-media picture,
  .hero::after, .scroll-cue i::after, .marques .track { animation: none; }
  .hero h1 .line > span,
  body.ready .hero .eyebrow, body.ready .hero p.lede,
  body.ready .hero-actions, body.ready .hero-meta { transform: none; opacity: 1; transition: none; }
  .hero .eyebrow, .hero p.lede, .hero-actions, .hero-meta { opacity: 1; transform: none; }
  .scroll-cue { opacity: 0.7; transition: none; }
  .reveal-clip { clip-path: none; transition: none; }
  .reveal-clip img, .reveal-clip .ph { transform: none; }
  .line-reveal .line > span { transform: none; transition: none; }
}
/* no-JS safety: never leave the hero headline hidden */
.no-js .hero h1 .line > span,
.no-js .hero .eyebrow, .no-js .hero p.lede,
.no-js .hero-actions, .no-js .hero-meta,
.no-js .line-reveal .line > span { transform: none; opacity: 1; }
.no-js .reveal-clip { clip-path: none; }

/* ============================================================
   UX AUDIT FIXES v11 — tap targets, skip link, landmark
   ============================================================ */
/* Skip-to-content (visible only on keyboard focus) */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--gold); color: var(--ink);
  padding: 12px 20px; font-weight: 600; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform 200ms var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-primary { display: contents; }

/* marque strip: linked marques match the span styling + gold on hover */
.marques .track a {
  flex: none;
  font-variation-settings: "wdth" 112;
  font-weight: 500; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: 0.75; white-space: nowrap;
  transition: color 200ms var(--ease), opacity 200ms var(--ease);
}
@media (hover: hover) { .marques .track a:hover { color: var(--gold-hi); opacity: 1; } }

/* ---------- Media band (flagship service pages) ---------- */
.media-band {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.media-band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .media-band { aspect-ratio: 4 / 3; } }

/* ---------- Brand pull-quote (proof section until real reviews land) ---------- */
.pullquote {
  max-width: 820px; margin: 0 auto; text-align: center;
  padding: clamp(30px, 5vh, 60px) 0;
}
.pq-crown { width: 40px; height: 40px; color: var(--gold-hi); margin: 0 auto 30px; }
.pullquote blockquote {
  font-size: clamp(26px, 4vw, 44px);
  font-variation-settings: "wdth" 94;
  font-weight: 560; line-height: 1.16; letter-spacing: -0.015em;
  text-wrap: balance;
}
.pullquote figcaption {
  margin-top: 26px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- CTA crown bookend ---------- */
.cta-crown { height: 48px; width: auto; margin: 0 auto 20px; display: block; }

/* ---------- Recent work gallery (real jobs) ---------- */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.work-tile { position: relative; }
.work-tile img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border: 1px solid var(--rule); }
.work-tile figcaption {
  margin-top: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 1024px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .work-grid { grid-template-columns: 1fr; } }

/* ---------- Protection tiers (enclosed page) ---------- */
.protect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 28px); }
.protect-card {
  background: var(--ink); border: 1px solid var(--rule);
  padding: clamp(26px, 3vw, 40px);
  position: relative;
}
.protect-card:first-child { border-color: var(--rule-gold); }
.protect-tag {
  display: inline-block; margin-bottom: 18px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-hi);
}
.protect-card h3 { font-size: 24px; margin-bottom: 12px; }
.protect-card > p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.protect-card ul { list-style: none; }
.protect-card li {
  color: var(--ivory-dim); font-size: 14.5px; padding: 9px 0 9px 26px; position: relative;
  border-top: 1px solid var(--rule);
}
.protect-card li::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 12px; height: 1px; background: var(--gold);
}
.protect-note { margin-top: 30px; font-size: 15px; color: var(--muted); text-align: center; }
@media (max-width: 720px) { .protect-grid { grid-template-columns: 1fr; } }

/* hero: one quiet credential line instead of a 4-column stat grid */
.hero-line {
  margin-top: clamp(34px, 5vh, 56px); padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px; letter-spacing: 0.04em; color: var(--muted);
}
.hero-line span { color: var(--gold); margin: 0 8px; }

/* ============================================================
   THE SHOWROOM — v31 design language
   Cars as lit exhibits. No raw backgrounds. Type = Engineered
   (Archivo condensed-monumental display).
   ============================================================ */

/* film grain over everything — the cheapest premium tell */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  background: url(/images/grain.png) repeat; background-size: 96px;
  opacity: 0.05; mix-blend-mode: overlay;
}

/* --- hero exhibit --- */
.hero.hx {
  min-height: 100svh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(110% 120% at 78% 82%, #2c2620 0%, transparent 55%),
    radial-gradient(90% 80% at 20% 15%, #26262b 0%, transparent 60%),
    var(--ink);
  padding-top: 96px;
}
/* the exhibit light — a cone from above the car */
.hx-light {
  position: absolute; right: -6%; bottom: 0; width: 62%; height: 88%;
  background: radial-gradient(55% 62% at 62% 68%, rgba(235,189,151,0.14) 0%, rgba(235,189,151,0.05) 42%, transparent 70%);
  pointer-events: none;
}
.hx-car {
  position: absolute; left: auto; top: auto; right: clamp(-60px, -2vw, 0px); bottom: 6vh;
  width: min(52vw, 900px); height: auto;
  filter: drop-shadow(0 50px 70px rgba(0,0,0,0.8));
  z-index: 1;
}
/* reflected floor shadow */
.hero.hx::after {
  content: ""; position: absolute; right: 2%; bottom: calc(7vh - 26px);
  width: min(48vw, 840px); height: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.65) 0%, transparent 70%);
  filter: blur(6px); z-index: 0;
}
.hx-copy { position: relative; z-index: 2; max-width: none; }
.hx-h1 {
  font-variation-settings: "wdth" 66;
  font-size: clamp(54px, 9vw, 138px);
  line-height: 0.88; letter-spacing: -0.015em; text-transform: uppercase;
  font-weight: 700; white-space: nowrap;
}
.hx-lede { max-width: 38ch; margin-top: 26px; }
.hero.hx .hero-actions { margin-top: 34px; }
.hero.hx .hero-line { max-width: 560px; }

/* kinetic headline: words rise on load. Animated-in is the RESULT of an animation
   that always runs (pure CSS, no JS dependency) — final state = visible. */
@media (prefers-reduced-motion: no-preference) {
  .hx-h1 .w { display: inline-block; animation: hx-rise 700ms var(--ease) backwards; }
  .hx-h1 .w:nth-child(2) { animation-delay: 70ms; }
  .hx-h1 .w:nth-child(3) { animation-delay: 140ms; }
  .hx-h1 .w:nth-child(4) { animation-delay: 220ms; }
  .hx-h1 .w:nth-child(5) { animation-delay: 300ms; }
  .hx-car { animation: hx-drive 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
}
@keyframes hx-rise { from { opacity: 0; transform: translateY(0.55em); } }
@keyframes hx-drive { from { opacity: 0; transform: translateX(60px); } }

@media (max-width: 900px) {
  .hero.hx { flex-direction: column; justify-content: flex-end; padding-bottom: 62vw; }
  .hero.hx .hero-line { display: none; }  /* callbar carries the essentials on mobile */
  .hx-car { right: -12vw; bottom: 3vh; width: 104vw; }
  .hx-car { right: -14vw; bottom: 4vh; width: 108vw; }
  .hero.hx::after { right: -4vw; bottom: calc(4vh - 20px); width: 90vw; }
  .hx-light { right: -20%; width: 120%; }
  .hx-h1 { font-size: clamp(52px, 15vw, 92px); }
}

/* --- dealer marquee (Trusted by) --- */
.tk-marquee { overflow: hidden; margin-top: 26px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tk-track {
  list-style: none; display: flex; gap: 0; width: max-content;
  animation: tk-scroll 40s linear infinite;
}
.tk-track li {
  font-variation-settings: "wdth" 100;
  font-size: clamp(16px, 1.8vw, 21px); font-weight: 520; color: var(--ivory-dim);
  padding: 26px 34px; white-space: nowrap; position: relative;
}
.tk-track li::after { content: "·"; position: absolute; right: -6px; color: var(--gold); }
@keyframes tk-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; flex-wrap: wrap; width: auto; } }
@media (hover: hover) { .tk-marquee:hover .tk-track { animation-play-state: paused; } }

/* --- mobile sticky call bar (the 2am journey) --- */
.callbar { display: none; }
@media (max-width: 767px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; gap: 1px;
    background: var(--rule);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; font-weight: 600; font-size: 15px;
    background: var(--ink); color: var(--ivory);
  }
  .callbar a.cb-call { background: var(--gold); color: var(--ink); }
  body { padding-bottom: 57px; } /* keep content clear of the bar */
  footer { padding-bottom: 90px; }
}

/* scroll-driven exhibit settle (progressive: only where supported) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work-tile img {
      animation: tile-settle both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes tile-settle { from { transform: scale(1.06); opacity: 0.4; } }
  }
}

@media (max-width: 767px) {
  .hero.hx .hero-actions { display: none; }  /* callbar = the actions on phones */
  .hero.hx { padding-bottom: 58vw; }
}

/* ============================================================
   CINEMA HERO — full-bleed graded photography (v32)
   ============================================================ */
.hero.cine {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 0 0 clamp(48px, 9vh, 96px);
  background: #0b0b0c;
}
.cine-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
.cine-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,12,0.60) 0%, rgba(11,11,12,0.10) 30%, rgba(11,11,12,0.22) 62%, rgba(11,11,12,0.90) 100%),
    linear-gradient(96deg, rgba(11,11,12,0.66) 0%, rgba(11,11,12,0.18) 46%, transparent 70%);
}
.cine-copy { position: relative; z-index: 2; max-width: none; width: 100%; }
.cine-h1 {
  font-family: 'Clash Display', Archivo, sans-serif;
  font-weight: 600; font-size: clamp(50px, 7.4vw, 110px);
  line-height: 1.0; letter-spacing: -0.02em; margin-top: 20px;
}
.cine-lede { max-width: 46ch; margin-top: 22px; color: rgba(242,238,230,0.85); }
.hero.cine .hero-actions { margin-top: 34px; }
.btn.cine-b1 { background: var(--ivory); border-color: var(--ivory); color: #141416; }
@media (hover: hover) { .btn.cine-b1:hover { background: #fff; border-color: #fff; } }
.btn.cine-b2 { border-color: rgba(242,238,230,0.35); }
.cine-strip {
  position: absolute; right: var(--pad); bottom: clamp(52px, 9.5vh, 100px); z-index: 2;
  display: flex; gap: 40px;
}
.cine-strip b {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: 26px; display: block; color: var(--ivory);
}
.cine-strip span {
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,238,230,0.55); font-weight: 600;
}
/* kinetic rise on the headline words (CSS-only, visible end-state) */
@media (prefers-reduced-motion: no-preference) {
  .cine-h1 .w { display: inline-block; animation: hx-rise 700ms var(--ease) backwards; }
  .cine-h1 .w:nth-child(2) { animation-delay: 70ms; }
  .cine-h1 .w:nth-child(3) { animation-delay: 140ms; }
  .cine-h1 .w:nth-child(4) { animation-delay: 220ms; }
  .cine-h1 .w:nth-child(5) { animation-delay: 300ms; }
  .cine-bg { animation: hk-kenburns 30s ease-in-out infinite alternate; will-change: transform; }
}
@media (max-width: 1100px) { .cine-strip { display: none; } }
@media (max-width: 767px) {
  .hero.cine .hero-actions { display: none; }  /* callbar carries the actions */
  .cine-bg { object-position: 62% 40%; }
}

/* --- cine band: full-bleed graded photo section (beat 2, THE NUMBER) --- */
.cine-band {
  position: relative; overflow: hidden;
  min-height: 82vh; display: flex; align-items: center;
  padding: clamp(72px, 12vh, 130px) 0;
}
.cine-band .cine-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.cb-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(11,11,12,0.82) 0%, rgba(11,11,12,0.45) 48%, rgba(11,11,12,0.15) 75%),
    linear-gradient(180deg, rgba(11,11,12,0.55) 0%, transparent 30%, rgba(11,11,12,0.55) 100%);
}
.cb-copy { position: relative; z-index: 2; max-width: 640px; margin-left: var(--pad); }
.cb-num {
  display: block; font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(90px, 13vw, 190px); line-height: 0.9; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(235,189,151,0.55);
  margin-bottom: 8px;
}
.cb-body { color: rgba(242,238,230,0.85); font-size: 16.5px; line-height: 1.7; margin: 18px 0 30px; max-width: 52ch; }

/* --- services cards: boxes → hairline editorial rows --- */
.svc {
  background: transparent;
  border: 0; border-top: 1px solid var(--rule);
  border-right: 0; border-bottom: 0;
  padding: clamp(26px, 3vw, 38px) clamp(4px, 1vw, 14px);
}
@media (hover: hover) { .svc:hover { background: rgba(255,255,255,0.025); } }


/* internal page-hero: cinematic field, consistent with the homepage world */
.page-hero {
  background:
    radial-gradient(110% 130% at 82% -10%, rgba(206,149,118,0.10) 0%, transparent 55%),
    radial-gradient(80% 90% at 10% 110%, #232328 0%, transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--rule);
}

/* MPA View Transitions — progressive, ignored where unsupported */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation-duration: 180ms; }
  ::view-transition-new(root) { animation-duration: 260ms; }
}

/* --- Singer-lesson hero: the photograph carries it; interface nearly vanishes --- */
.cine-h1.quiet {
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.12; letter-spacing: 0.005em;
  max-width: 16ch; text-wrap: balance;
}
.cine-links { margin-top: 22px; font-size: 16.5px; font-weight: 500; }
.cine-links a { color: var(--ivory); border-bottom: 1px solid rgba(244,241,234,0.4); padding-bottom: 3px; transition: border-color 200ms var(--ease), color 200ms var(--ease); }
@media (hover: hover) { .cine-links a:hover { color: var(--gold-hi); border-color: var(--gold-hi); } }
.cine-links .sep { margin: 0 18px; color: rgba(244,241,234,0.35); }
/* let the photograph breathe: much lighter scrim */
.hero.cine .cine-scrim {
  background:
    linear-gradient(180deg, rgba(11,11,12,0.42) 0%, transparent 26%, transparent 58%, rgba(11,11,12,0.72) 100%),
    linear-gradient(96deg, rgba(11,11,12,0.38) 0%, transparent 48%);
}

/* ============================================================
   RICH LANDING SYSTEM v37 — chips, gradient-border cards, icon
   chips, jewel dividers, journey rail, framed media, mesh hero.
   ============================================================ */

/* pill badge (section label) */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(var(--ember), 0.30);
  background: linear-gradient(135deg, rgba(var(--ember),0.12), rgba(var(--ember),0.03));
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-hi);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px 2px rgba(var(--ember), 0.55); }

/* gradient-border card */
.gcard {
  position: relative; border-radius: var(--r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #16161d 0%, #101015 100%) padding-box,
    linear-gradient(135deg, rgba(var(--ember),0.45), rgba(255,255,255,0.07) 40%, rgba(var(--indigo),0.35)) border-box;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
@media (hover: hover) {
  .gcard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(var(--ember),0.18), 0 12px 40px -12px rgba(var(--ember),0.25); }
}

/* icon chip */
.ic {
  width: 46px; height: 46px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; margin-bottom: 18px;
  color: var(--gold-hi);
  border: 1px solid rgba(var(--ember), 0.28);
  background: linear-gradient(135deg, rgba(var(--ember),0.16), rgba(var(--ember),0.04));
  box-shadow: 0 6px 18px -8px rgba(var(--ember), 0.35);
}
.ic svg { width: 22px; height: 22px; }

/* jewel divider — gradient hairline with the HK diamond */
.divider {
  display: flex; align-items: center; gap: 20px;
  max-width: var(--max); margin: 0 auto; padding: clamp(30px, 5vh, 54px) var(--pad);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ember), 0.35));
}
.divider::after { background: linear-gradient(90deg, rgba(var(--ember), 0.35), transparent); }
.divider img { height: 14px; width: auto; opacity: 0.9; }

/* journey rail — connected numbered steps */
.standard-grid { position: relative; }
.standard-grid::before {
  content: ""; position: absolute; left: 2%; right: 2%; top: 23px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ember),0.4) 12%, rgba(var(--ember),0.4) 88%, transparent);
}
.std { border-top: 0; padding-top: 0; }
.std small {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 17px; -webkit-text-stroke: 0; color: var(--gold-hi);
  border: 1px solid rgba(var(--ember), 0.4);
  background: linear-gradient(135deg, #1a1a21, #101014);
  box-shadow: 0 0 0 6px var(--ink), 0 0 22px -4px rgba(var(--ember), 0.45);
  position: relative; z-index: 1; margin-bottom: 20px;
}

/* framed media (hero) */
.frame {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(var(--ember), 0.12),
    0 40px 90px -30px rgba(0,0,0,0.9),
    0 20px 70px -20px rgba(var(--ember), 0.22);
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11,11,12,0.5) 100%); pointer-events: none; }

/* mesh hero */
.hero.fx {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  text-align: center; padding-top: clamp(140px, 18vh, 210px);
}
.fx-mesh { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 42% at 50% -6%, rgba(var(--ember), 0.20) 0%, transparent 62%),
    radial-gradient(36% 30% at 82% 24%, rgba(var(--indigo), 0.16) 0%, transparent 60%),
    radial-gradient(40% 34% at 14% 30%, rgba(var(--ember), 0.10) 0%, transparent 60%);
}
.fx .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.fx-h1 {
  margin-top: 26px; font-size: clamp(46px, 6.6vw, 92px);
  line-height: 1.02; letter-spacing: -0.02em; max-width: 17ch;
}
.fx-h1 .grad {
  font-style: normal;
  background: linear-gradient(100deg, #FFD3AD 0%, var(--gold) 45%, #C46A3B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-lede { margin-top: 24px; max-width: 56ch; color: var(--ivory-dim); font-size: clamp(16px, 1.6vw, 18.5px); }
.fx-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.btn.glow {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border: 0; color: #17110c;
  box-shadow: 0 12px 38px -10px rgba(var(--ember), 0.6), 0 1px 0 rgba(255,255,255,0.25) inset;
}
@media (hover: hover) { .btn.glow:hover { box-shadow: 0 16px 48px -10px rgba(var(--ember), 0.8); transform: translateY(-1px); } }
.fx-frame { margin: clamp(44px, 7vh, 76px) auto 0; width: min(1080px, 100%); position: relative; z-index: 2; }
.fx-stats {
  display: flex; gap: clamp(26px, 4vw, 64px); justify-content: center; flex-wrap: wrap;
  margin-top: clamp(34px, 5vh, 54px);
}
.fx-stats div { text-align: center; }
.fx-stats b { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 30px; display: block; color: var(--ivory); }
.fx-stats b i { font-style: normal; color: var(--gold-hi); }
.fx-stats span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .fx .chip, .fx-h1, .fx-lede, .fx-actions { animation: hx-rise 700ms var(--ease) backwards; }
  .fx-h1 { animation-delay: 80ms; } .fx-lede { animation-delay: 160ms; } .fx-actions { animation-delay: 240ms; }
  .fx-frame { animation: fx-frame-in 900ms cubic-bezier(0.16,1,0.3,1) 300ms backwards; }
}
@keyframes fx-frame-in { from { opacity: 0; transform: translateY(40px) scale(0.985); } }

/* --- monumental hero (Finalist 1, decluttered) --- */
.hero.cine.mono { justify-content: center; align-items: stretch; }
.mono-scrim {
  background:
    linear-gradient(90deg, rgba(8,8,10,0.86) 0%, rgba(8,8,10,0.52) 42%, rgba(8,8,10,0.10) 72%) !important,
    linear-gradient(180deg, rgba(8,8,10,0.55) 0%, transparent 26%, transparent 70%, rgba(8,8,10,0.70) 100%) !important;
}
.hero.cine.mono .cine-copy { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.mono-kick {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-hi); font-weight: 600;
}
.mono-kick::before { content: ""; width: 56px; height: 1px; background: var(--gold); }
.mono-h1 {
  font-family: Archivo, sans-serif;
  font-variation-settings: "wdth" 64;
  font-size: clamp(64px, 10vw, 156px);
  line-height: 0.86; letter-spacing: -0.02em; text-transform: uppercase;
  font-weight: 740; margin: 26px 0 0; max-width: 12ch;
}
.hero.cine.mono .hero-actions { margin-top: 40px; }

/* credentials band under the hero */
.stat-band { border-bottom: 1px solid var(--rule); }
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-top: 30px; padding-bottom: 34px; gap: 18px;
}
.stat-row b {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px); display: block; color: var(--ivory); letter-spacing: -0.01em;
}
.stat-row b i { font-style: normal; color: var(--gold-hi); }
.stat-row span {
  display: block; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-top: 6px;
}
@media (max-width: 760px) { .stat-row { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }
@media (prefers-reduced-motion: no-preference) {
  .mono-h1 .w { display: inline-block; animation: hx-rise 700ms var(--ease) backwards; }
  .mono-h1 .w:nth-child(2) { animation-delay: 80ms; }
  .mono-h1 .w:nth-child(3) { animation-delay: 160ms; }
  .mono-h1 .w:nth-child(4) { animation-delay: 240ms; }
}

/* ============================================================
   THEME C — FINAL SKIN (v40): light base, dark kept for
   photo hero, 4° band, CTA and footer. Nike rhythm.
   Appended last so it wins the cascade.
   ============================================================ */
:root {
  color-scheme: light;
  --ink:        #F6F5F3;          /* base surface (light) */
  --surface:    #FFFFFF;
  --surface-2:  #EFEDE9;
  --ivory:      #0E0E0F;          /* primary text (ink) */
  --ivory-dim:  #454239;
  --muted:      #7E7970;
  --gold:       #A05E1C;          /* ember, darkened for light-bg contrast */
  --gold-hi:    #7E4A16;          /* hover = darker on light */
  --ember:      176, 115, 51;
  --rule:       rgba(14, 14, 15, 0.12);
  --rule-gold:  rgba(160, 94, 28, 0.35);
}
/* dark islands keep the original palette */
.cine-band, .cta, footer, .mobile-menu {
  --ink: #0E0E12; --surface: #16161C; --surface-2: #1E1E26;
  --ivory: #F4F1EA; --ivory-dim: #CBC5BA; --muted: #9B958C;
  --gold: #D7A474; --gold-hi: #EBBD97;
  --rule: rgba(244, 241, 234, 0.10); --rule-gold: rgba(176, 115, 51, 0.38);
  background-color: var(--ink); color: var(--ivory);
}
footer { background-color: #0E0E12; }
.cta { background-color: #101014; }

/* ambient: pastel mesh instead of dark aurora */
body::before {
  background:
    radial-gradient(42% 30% at 12% 6%, rgba(217,207,255,0.35) 0%, transparent 60%),
    radial-gradient(38% 28% at 88% 10%, rgba(255,196,160,0.30) 0%, transparent 60%),
    radial-gradient(45% 35% at 55% 96%, rgba(223,243,200,0.22) 0%, transparent 55%),
    var(--ink);
  animation: none;
}
body::after { opacity: 0.03; }  /* grain, lighter touch on light */
body { background: var(--ink); color: var(--ivory); }

/* nav goes light */
header.nav { background: rgba(246, 245, 243, 0.94); border-bottom-color: rgba(14,14,15,0.10); }
header.nav.scrolled { border-bottom-color: rgba(14,14,15,0.14); }
.brand-logo { filter: brightness(0.12) saturate(0.4); }   /* ink version of the mark on light */
footer .brand-logo { filter: none; }                       /* footer stays dark, real colours */
.nav-links a, .mega-toggle { color: #454239; }
@media (hover: hover) { .nav-links a:hover, .mega-toggle:hover { color: #0E0E0F; } }
.tel-link { color: #0E0E0F; }
.tel-link svg { color: var(--gold); }
.mega-inner { background: #fff; border-color: rgba(14,14,15,0.10); box-shadow: 0 30px 70px -25px rgba(14,14,15,0.25); }
.mega-item b { color: #0E0E0F; } .mega-item span { color: #7E7970; }
@media (hover: hover) { .mega-item:hover { background: #F3F1ED; } .mega-item:hover b { color: var(--gold); } }

/* buttons: black pills (Nike), inverted inside dark islands */
.btn {
  background: #0E0E0F; border-color: #0E0E0F; color: #fff;
  border-radius: 999px; box-shadow: 0 10px 26px -12px rgba(14,14,15,0.45);
}
@media (hover: hover) { .btn:hover { background: #26241f; border-color: #26241f; box-shadow: 0 12px 30px -12px rgba(14,14,15,0.55); } }
.btn.ghost { background: transparent; color: #0E0E0F; border: 1.5px solid rgba(14,14,15,0.25); box-shadow: none; }
@media (hover: hover) { .btn.ghost:hover { border-color: #0E0E0F; color: #0E0E0F; background: transparent; } }
.cine-band .btn.ghost, .cta .btn.ghost { color: var(--ivory); border-color: rgba(244,241,234,0.35); }
.cta .btn { background: #F4F1EA; border-color: #F4F1EA; color: #0E0E0F; }
.callbar a { background: #fff; color: #0E0E0F; }
/* Call must out-rank Book in BOTH themes — on light pages both were neutral rectangles
   of equal weight, which is a 50/50 choice at the exact moment someone wants a human. */
.callbar a.cb-call { background: var(--gold); color: #fff; border-color: var(--gold); }
@media (max-width: 767px) { .callbar a.cb-call { flex: 1.55; } }   /* give Call the wider slot */
.callbar { background: rgba(14,14,15,0.12); border-top-color: rgba(14,14,15,0.12); }

/* chips + cards + icons on light */
.chip {
  border-color: rgba(160, 94, 28,0.35);
  background: rgba(160, 94, 28,0.07);
  color: #7E4A16;
}
.chip::before { background: var(--gold); box-shadow: 0 0 8px 1px rgba(160, 94, 28,0.4); }
.gcard {
  background: #fff; border: 1px solid rgba(14,14,15,0.09); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(14,14,15,0.04);
}
@media (hover: hover) { .gcard:hover { box-shadow: 0 18px 44px -18px rgba(14,14,15,0.22); transform: translateY(-4px); } }
.ic { border-color: rgba(160, 94, 28,0.25); background: rgba(160, 94, 28,0.10); color: #A05E1C; box-shadow: none; }
.svc { border-top: 0; }  /* cards carry the separation now */
.svc h3 { color: #0E0E0F; } .svc p { color: #57534C; }
.rel-grid { background: transparent; border: 0; gap: 14px; border-radius: 0; }
.rel-card { background: #fff; border: 1px solid rgba(14,14,15,0.09); border-radius: var(--r-md); }
.rel-card b { color: #0E0E0F; }
.spec-strip { background: transparent; border: 0; gap: 14px; border-radius: 0; }
.spec-strip li { background: #fff; border: 1px solid rgba(14,14,15,0.09); border-radius: var(--r-md); }
.spec-strip b { color: var(--gold); }

/* big headline voice: condensed caps (C language) for section h2s on light */
.section-head h2, .svcs-title {
  font-family: Archivo, sans-serif; font-variation-settings: "wdth" 62;
  font-weight: 760; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9;
}
.cine-band h2 { font-family: Archivo, sans-serif; font-variation-settings: "wdth" 62; font-weight: 760; text-transform: uppercase; line-height: 0.9; }

/* journey nodes + numerals recolour */
.std small { color: var(--gold); border-color: rgba(160, 94, 28,0.4); background: #fff; box-shadow: 0 0 0 6px var(--ink); }
.standard { background: transparent; }
.standard-grid::before { background: linear-gradient(90deg, transparent, rgba(160, 94, 28,0.35) 12%, rgba(160, 94, 28,0.35) 88%, transparent); }
.tk-track li::after { color: var(--gold); }
.marques small { background: var(--ink); box-shadow: 20px 0 0 0 var(--ink), 40px 0 24px 6px var(--ink); }

/* operator band: white island on paper */
.light-band { background: #fff; }

/* C hero — photo IS the hero, type stamped on it */
.hero.chero {
  position: relative; height: calc(100svh - 76px); min-height: 560px;
  margin-top: 76px; overflow: hidden; display: flex; align-items: flex-end;
}
.chero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
/* Two scrims, not one. The vertical gradient alone left white type sitting on a white car;
   the diagonal bed anchors the headline bottom-left and keeps the tray livery
   ("LOWERED & PRESTIGE VEHICLE SPECIALIST") legible instead of competing with it. */
.chero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.02) 30%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,0.78) 100%),
  linear-gradient(78deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.22) 30%, transparent 55%); }
.chero-in { position: relative; z-index: 2; padding-bottom: clamp(36px, 6vh, 60px); color: #fff; }
.chero-h1 {
  font-family: Archivo, sans-serif; font-variation-settings: "wdth" 62;
  font-weight: 760; text-transform: uppercase;
  font-size: clamp(40px, 5.0vw, 74px); line-height: 0.92; letter-spacing: -0.012em;
  max-width: 13ch; color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,0.45);
}
.chero-row { display: flex; gap: 12px; margin-top: 28px; align-items: center; }
.chero .btn { background: #fff; border-color: #fff; color: #0E0E0F; }
.chero .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
@media (prefers-reduced-motion: no-preference) {
  .chero-bg { animation: hk-kenburns 30s ease-in-out infinite alternate; }
  .chero-h1 .w { display: inline-block; animation: hx-rise 700ms var(--ease) backwards; }
  .chero-h1 .w:nth-child(2) { animation-delay: 80ms; }
  .chero-h1 .w:nth-child(3) { animation-delay: 160ms; }
  .chero-h1 .w:nth-child(4) { animation-delay: 240ms; }
}
@media (max-width: 767px) { .chero .chero-row { display: none; } }
/* fix: CTA ghost was inheriting the solid ivory fill -> white on white */
.cta .btn.ghost { background: transparent; color: var(--ivory); border-color: rgba(244,241,234,0.35); }
/* fix: page-hero still carried the dark-era radial field -> grey smear on light theme */
.page-hero {
  background:
    radial-gradient(110% 130% at 82% -10%, rgba(160,94,28,0.07) 0%, transparent 55%),
    radial-gradient(80% 90% at 10% 110%, rgba(160,94,28,0.05) 0%, transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--rule);
}

.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ── Comparison matrix ─────────────────────────────────────── */
/* grid/flex items default to min-width:auto and get blown out by wide children */
.prose{ min-width: 0; }
.ctable-wrap{ margin: 42px 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }
.ctable{ width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.ctable thead th{ font-variation-settings:"wdth" 116; font-weight: 640; font-size: 12.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold);
  text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.ctable tbody th{ font-variation-settings:"wdth" 94; font-weight: 620; text-align: left;
  color: var(--ivory); padding: 20px 22px; vertical-align: top; width: 27%; }
.ctable td{ padding: 20px 22px; vertical-align: top; color: var(--muted); }
.ctable tbody tr + tr th, .ctable tbody tr + tr td{ border-top: 1px solid var(--rule); }
.ctable tbody td:last-child{ color: var(--ivory); width: 30%;
  box-shadow: inset 3px 0 0 -1px var(--gold); background: rgba(160,94,28,0.045); }
.ctable strong{ color: var(--gold-hi); font-weight: 680; }
.ctable-hint{ display: none; margin: -30px 0 42px; font-size: 13px; letter-spacing: .04em;
  color: var(--gold); font-variation-settings:"wdth" 104; }
@media (max-width: 860px){ .ctable-hint{ display: block; } }

/* neutral variant: even-handed comparison, no column is visually the "right answer" */
.ctable--neutral tbody td{ color: var(--ivory); }
.ctable--neutral tbody td:last-child{ box-shadow: none; background: transparent; }
.ctable--neutral tbody td + td{ border-left: 1px solid var(--rule); }
@media (max-width: 700px){
  .ctable{ font-size: 14.5px; }
  .ctable thead th, .ctable tbody th, .ctable td{ padding: 15px 16px; }
}

/* ── Review cards (dormant until REVIEWS is populated — see REVIEWS-KIT.md) ── */
.rv-band{ background: var(--surface); border-block: 1px solid var(--rule); }
.rv-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.rv-card{ margin: 0; padding: 30px 28px; background: #fff; border: 1px solid var(--rule);
  border-radius: var(--r-md); display: flex; flex-direction: column; gap: 14px; }
.rv-stars{ color: var(--gold); font-size: 15px; letter-spacing: .18em; line-height: 1; }
.rv-card blockquote{ margin: 0; font-size: 17px; line-height: 1.55; color: var(--ivory);
  font-variation-settings:"wdth" 96; }
.rv-card figcaption{ margin-top: auto; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.rv-card figcaption strong{ color: var(--ivory); font-weight: 640; }
.rv-card figcaption span{ display: block; color: var(--gold); font-size: 12.5px;
  letter-spacing: .04em; margin-top: 3px; }
@media (max-width: 900px){ .rv-grid{ grid-template-columns: 1fr; gap: 16px; } }

/* ── Exotic showcase — floating cut-outs on a dark band ── */
.ex-band{ background:
    radial-gradient(120% 90% at 50% 0%, rgba(160,94,28,0.10), transparent 60%),
    #0E0E12;
  color: #F4F1EA; padding: clamp(56px,8vh,96px) 0 0; overflow: hidden; }
.ex-head{ text-align: center; }
.ex-head h2{ color:#fff; margin-top:10px; }
.ex-marquee{ margin-top: 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ex-track{ display: flex; gap: 8px; width: max-content; align-items: flex-end;
  animation: ex-scroll 60s linear infinite; }
.ex-item{ margin:0; width: clamp(260px, 26vw, 380px); flex: none; text-align: center; }
.ex-item img{ display:block; width:100%; height: auto; object-fit: contain;
  /* fade the ragged tray/bottom edge into the band */
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 99%); }
.ex-item figcaption{ font-variation-settings:"wdth" 96; font-size: 13px; letter-spacing: .04em;
  color: var(--gold-hi); margin-top: 6px; }
@keyframes ex-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (hover:hover){ .ex-marquee:hover .ex-track{ animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce){ .ex-track{ animation: none; flex-wrap: nowrap; overflow-x: auto; } }

/* ── Enclosed trailer video block (vertical phone clips, two-up) ── */
.evid-section{ background: var(--surface); }
.evid-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,320px)); gap: 20px; justify-content: center; }
.evid{ margin:0; }
.evid video{ display:block; width:100%; aspect-ratio: 478 / 850; object-fit: cover;
  border-radius: var(--r-md); background:#0E0E12; box-shadow: 0 18px 50px rgba(14,14,15,0.22); }
.evid figcaption{ margin-top: 12px; text-align:center; font-variation-settings:"wdth" 96;
  font-size: 13.5px; letter-spacing:.03em; color: var(--gold); }
@media (max-width: 640px){ .evid-grid{ grid-template-columns: 1fr; max-width: 340px; margin-inline:auto; } }

/* ── Gallery page (portrait phone photos) ── */
.gal-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gtile{ position: relative; margin:0; display:block; overflow:hidden; border-radius: var(--r-md);
  border: 1px solid var(--rule); background: var(--surface); text-decoration:none; }
.gtile img{ display:block; width:100%; aspect-ratio: 3/4; object-fit: cover; }
.gtile figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 26px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(14,14,15,0.82));
  color:#fff; display:flex; flex-direction:column; gap:2px; }
.gtile figcaption b{ font-variation-settings:"wdth" 96; font-weight:680; font-size:15px; }
.gtile figcaption span{ font-size:12px; letter-spacing:.02em; color:rgba(255,255,255,.72); }
a.gtile::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow .25s; }
@media (hover:hover){ a.gtile:hover::after{ box-shadow: inset 0 0 0 2px var(--gold); } a.gtile:hover img{ transform: scale(1.03); } }
.gtile img{ transition: transform .4s ease; }
@media (max-width: 900px){ .gal-grid{ grid-template-columns: 1fr 1fr; } }

/* mega-menu secondary link rows stacked left of the CTA */
.mega-cols { display: flex; flex-direction: column; gap: 6px; max-width: 74%; }
.mega-cols .mega-marques { max-width: 100%; }

/* portrait marque photo — contained figure (wide 21:9 band would crop a phone photo's car) */
.media-portrait{ margin: 0 auto; max-width: 460px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--rule); }
.media-portrait img{ display: block; width: 100%; height: auto; }

/* thank-you: what-happens-next steps */
.ty-steps{ counter-reset:t; list-style:none; max-width:520px; margin:26px auto 8px; text-align:left; }
.ty-steps li{ counter-increment:t; position:relative; padding:14px 0 14px 44px; border-bottom:1px solid var(--rule); font-size:15px; line-height:1.5; color:var(--ivory-dim); }
.ty-steps li:last-child{ border-bottom:none; }
.ty-steps li::before{ content:counter(t); position:absolute; left:0; top:12px; width:28px; height:28px; border-radius:50%; background:var(--gold); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.ty-steps strong{ color:var(--ivory); }
.ty-urgent{ margin-top:20px; font-size:14px; color:var(--muted); }

/* contact info grid */
.contact-info{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:clamp(40px,6vh,64px); padding-top:clamp(32px,4vh,44px); border-top:1px solid var(--rule); }
.ci-item .ci-k{ display:block; font-variation-settings:"wdth" 116; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.ci-item .ci-v{ display:block; font-weight:640; font-size:17px; color:var(--ivory); text-decoration:none; }
a.ci-v{ transition:color .2s; }
@media (hover:hover){ a.ci-v:hover{ color:var(--gold-hi); } }
.ci-item p{ font-size:13px; line-height:1.5; color:var(--muted); margin-top:6px; }
@media (max-width:860px){ .contact-info{ grid-template-columns:1fr 1fr; gap:20px 18px; } }
@media (max-width:480px){ .contact-info{ grid-template-columns:1fr; } }