/* ============================================================
   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:    Mona Sans variable (wght 200–900, wdth 75–125) — ONE family, many voices.
            Chosen 2026-07-24 to replace Archivo+Cormorant. Hierarchy comes from
            weight and width, never from a second family.
   ============================================================ */

@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/fonts/mona-sans-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: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/fonts/mona-sans-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: 'Mona Sans';
  font-style: italic;
  font-weight: 400 700;   /* pinned instance: wdth 100 only — 102KB → 38KB */
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/mona-sans-italic-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;
}

:root {
  --tech: #3C5C7E;      /* SECOND ACCENT — steel blue. Semantics: copper = brand/human/action,
                           tech = measurement & process. NEVER on CTAs, logo or eyebrows. */
  --tech-hi: #93AFCB;   /* dark-surface value */
  --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);
  --nav-h:      76px;   /* fixed header height — hero offset depends on it */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);   /* expo-out — the house curve */
  --ease-soft:  cubic-bezier(0.16, 1, 0.3, 1);    /* longer, gentler settle */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);       /* exits only */
  --ease-io:    cubic-bezier(0.65, 0, 0.35, 1);   /* on-screen morphs: accordion, reflow */
  --dur-1:      .18s;   /* taps, colour, borders          */
  --dur-2:      .28s;   /* the default micro-interaction  */
  --dur-3:      .45s;   /* panels, menus, larger surfaces */
}

*, *::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: 'Mona Sans', 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);
}

/* Form controls do NOT inherit font-family — the UA stylesheet wins. Inherit explicitly
   or any text inside a button/input silently falls back to the system font. */
button, input, select, textarea, optgroup { font: inherit; font-family: inherit; letter-spacing: inherit; }

h1, h2 { font-family: 'Mona Sans', sans-serif; line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-weight: 700; }
h2 { font-weight: 650; }
/* h3 sits a step down in weight, not in family */
h3 { font-family: 'Mona Sans', sans-serif; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }

h1 { font-size: clamp(44px, 6.6vw, 92px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4.0vw, 48px); }
h3 { font-size: 20px; }

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

/* ---------- 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: #0C0C10; /* OPAQUE. NEVER backdrop-filter on fixed (iOS), and never translucent — content bleeds through the bar */
  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); }
/* An SVG in a flex row is a flex ITEM, and flex-shrink defaults to 1. With a text sibling
   competing for width these collapsed to ZERO: measured in Chromium AND WebKit, the Services
   chevron rendered 0x13px and the header handset 0x16px on every desktop page, and the mobile
   menu's handset 4.97x16px. An explicit width/height does not save an element that flex is
   allowed to shrink. A missing icon looks like a design choice, which is why it survived every
   screenshot review. (2026-09-06) */
.mega-toggle .chev,
.tel-link svg,
.mm-call svg { flex: none; }
.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; }

/* Glyph-only phone when the row is under pressure.
   `.nav-inner` is capped at max-width 1200px, so from 1201px upward the header layout is
   IDENTICAL at every viewport — measured: the gap between the number and the button is a
   constant 18px from 1201px to 2560px. The row is therefore at capacity the moment the
   desktop nav appears, and the only variable left is how wide the CONTENT happens to render:
   a fallback font, text-only zoom (Safari and Firefox have it, Chrome does not), or a larger
   browser default can each add enough to push the number into the button. Both `.tel-link`
   and `.nav-cta .btn` are `white-space: nowrap`, so under real pressure they overflow rather
   than reflow — there is no graceful state without this rule.
   Between 1201 and 1360 the digits drop and the handset carries the link on its own: still a
   real `tel:` target, still a 44px hit area, just no text to collide. Above 1360 there is
   ample slack and the number returns. (2026-09-06)
   NOTE: this is defensive. A clash was reported and screenshotted on a real machine, and it
   did NOT reproduce here at any width 1201-2560, at page zoom 100-200%, with the webfont
   blocked, or at a 24px root size. Do not remove it because it looks unnecessary in Chrome. */
@media (min-width: 1201px) and (max-width: 1360px) {
  header.nav .nav-cta .tel-link .tel-num { display: none; }
  header.nav .nav-cta .tel-link {
    width: 44px; height: 44px; justify-content: center; gap: 0;
    border-radius: 50%; border: 1px solid var(--rule);
  }
  header.nav .nav-cta .tel-link svg { width: 17px; height: 17px; }
}
.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); }
/* 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; }
.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 .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; }

/* ---------- 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 .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; }

/* ---------- 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: 'Mona Sans', sans-serif; font-weight: 700;
  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); }
.truck .ph { aspect-ratio: 4 / 3; }
.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 Haul King 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));
  /* Two mask layers, intersected. The radial alone keeps the centre clean but leaves the
     tile SLICED at the top and bottom edges — on mobile the band is 336px against a 310px
     tile, so you get half a crown hard-cut at the boundary, which reads as a rendering
     fault. The linear layer dissolves those partial glyphs. */
  -webkit-mask-image: radial-gradient(115% 100% at 50% 50%, transparent 0%, transparent 32%, #000 76%),
                      linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: radial-gradient(115% 100% at 50% 50%, transparent 0%, transparent 32%, #000 76%),
                      linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
@media (max-width: 700px){
  /* smaller tile so whole glyphs repeat inside a short band, and quieter because the
     copy fills more of the frame */
  .cta::before{ background-size: 210px auto; opacity: 0.22; }
}
.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 calc(100% + var(--mono-y, 0px)) / 260px auto repeat;
  opacity: 0.16;
  will-change: background-position;   /* site.js sets --mono-y on scroll */
  filter: drop-shadow(0 1.5px 0 rgba(0,0,0,0.5));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 44%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 44%, #000 88%, transparent 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 */
/* MOBILE NAV + CTA — the sticky bottom call bar is gone, so the header carries the
   primary action: a persistent Call pill that reads as a button, not a bare icon.
   The menu leads with both actions instead of burying them under 15 links. */
@media (max-width: 1200px) {
  .nav-cta .tel-link{
    display:inline-flex; align-items:center; gap:8px;
    padding:0 17px; min-height:44px; border-radius:999px;
    background:var(--gold); color:#fff !important; font-weight:600; font-size:14.5px;
    letter-spacing:.01em; white-space:nowrap;
  }
  .nav-cta .tel-link svg{ width:15px; height:15px; color:#fff; }
  .nav-cta .tel-link .tel-num{ display:inline; }
  .nav-cta .tel-link::after{ content:""; }
  .burger{ width:44px; height:44px; display:grid; place-items:center; }
}
/* the pill must stay copper on every nav state — but ONLY where the pill exists (mobile).
   Unscoped, this painted a copper box behind the desktop phone number. */
@media (max-width: 1200px) {
  body.r:not(.navsolid) .nav-cta .tel-link,
  body.r.nav-on-dark .nav-cta .tel-link{ background:#F2EEE6; color:#141317 !important; }
  body.r:not(.navsolid) .nav-cta .tel-link .tel-num,
  body.r.nav-on-dark .nav-cta .tel-link .tel-num{ color:#141317 !important; }
}

/* menu actions block */
.mm-actions{ display:flex; flex-direction:column; gap:10px; margin-bottom:30px; }
.mm-call,.mm-book{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; border-radius:999px; font-size:16px !important; font-weight:600 !important;
  text-decoration:none; padding:0 20px !important; border-bottom:0 !important;
  font-variation-settings:normal !important;
}
.mm-call{ background:#EBBD97; color:#17150f; }   /* menu is always dark: bright rose gold + ink, 10.7:1 */
.mm-call svg{ width:17px; height:17px; color:#17150f; }
.mm-book{ background:transparent; color:var(--ivory); border:1.5px solid rgba(242,238,230,.28) !important; }
@media (hover:hover){ .mm-book:hover{ border-color:var(--gold-hi) !important; color:var(--gold-hi); } }

@media (max-width: 1200px) {
  .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: 20px; font-weight: 560; padding: 11px 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) {
  /* phones: the digits don't fit beside logo + burger, so the pill says what it does */
  .nav-cta .tel-link .tel-num { display: none; }
  .nav-cta .tel-link::after { content: "Call"; font-weight: 600; font-size: 14.5px; }
  .nav-cta .tel-link { padding: 0 16px; min-width: 44px; }
  .services-grid { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 24px; }
}

/* MUST stay in step with the .burger / .nav-links collapse breakpoint below (1200px).
   This rule was left at 1081px when the nav collapse was raised 1080 -> 1200, which
   created a 120px dead zone: between 1081 and 1200 the hamburger rendered and this
   `display:none !important` silently won, so the menu button did nothing at all.
   If you change one breakpoint, change both. */
@media (min-width: 1201px) { .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.0vw, 62px); }
.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); }
/* 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); }
}
@media (hover: hover) { .logo-wall img:hover { filter: none; opacity: 1; } }
@media (max-width: 640px) {
  .trusted-grid li { padding: 0 14px; font-size: 14px; }
}
.light-band .eyebrow { color: #99653F; }
@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-weight: 600; font-size: clamp(24px, 3.0vw, 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.gcard {
  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);
  /* a border-colour change alone is too quiet to read as focus — add a real ring */
  box-shadow: 0 0 0 3px rgba(206,149,118,.65);   /* .65 = 3.47:1 vs --ink; .30 measured 1.74:1 and failed */
}
.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 { border-color: var(--gold); }
.hk-select-btn:focus-visible { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(206,149,118,.65);   /* .65 = 3.47:1 vs --ink; .30 measured 1.74:1 and failed */ }
.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, 4.8vw, 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.gcard { 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; }
/* TWO OWNERS OF ONE BEHAVIOUR. This reset targeted `.lenis.lenis-smooth`, but the live
   document carries `class="lenis"` ALONE — Lenis only adds `lenis-smooth` for its own
   smooth modes, and this build is initialised with `smoothWheel: true`, which does not set
   it. So the selector never matched and `html { scroll-behavior: smooth }` (line 73) stayed
   active underneath Lenis's rAF loop: the browser animating scroll AND a library animating
   the same scroll. Measured before the fix: a programmatic 600px scroll took ~495ms to
   settle on BOTH desktop and mobile.
   Matching on `.lenis` alone is also the correct fallback shape — when Lenis does not
   initialise (reduced motion, or the script fails) the class is absent and the CSS smooth
   behaviour is left in place, which is what should happen. (2026-09-06) */
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
@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; }
}
/* 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); }
}
@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 var(--ease-soft);
}
.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; }
body.ready .scroll-cue { opacity: 0.7; }
@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 var(--ease-soft); }
.reveal-clip img, .reveal-clip .ph { transition: transform 1400ms var(--ease-soft); }
.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 var(--ease-soft);
}
.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%);
  /* translate alone leaves it in the iOS status-bar strip — clip it to nothing */
  clip-path: inset(50%);
  pointer-events: none; transition: transform 200ms var(--ease);
}
.skip-link:focus { clip-path: none; pointer-events: auto; 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; } }
@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; } }

/* ============================================================
   THE SHOWROOM — v31 design language
   Cars as lit exhibits. No raw backgrounds. Type = Engineered
   (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;
}
/* 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;
}
.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 var(--ease-soft) 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; }
  .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); }
}
@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; } }


@media (max-width: 767px) {
  .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;
}
.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); }
/* 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) {
  .cine-bg { object-position: 62% 40%; }
}

/* --- 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 — REMOVED 2026-09-06.
   `@view-transition { navigation: auto; }` was not "progressive, ignored where unsupported".
   In Chromium it broke BACK and FORWARD navigation on every page: after history.back() the
   document produced no compositor frame at all (a Playwright screenshot times out at 30s) and
   100% of .reveal elements stayed below 0.05 opacity. A visitor comparing two service pages
   and hitting Back got a blank page. Measured, not inferred.
   The two ::view-transition-* duration overrides went with it — they were orphaned without
   the at-rule. Do not reinstate without testing an actual back navigation in Chromium AND
   WebKit; a forward click looks perfect either way, which is why this shipped. */

/* --- 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;
}
@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); }
}

/* 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; }
.fx .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.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;
}
.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); } }
@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 var(--ease-soft) 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; }
.hero.cine.mono .cine-copy { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.hero.cine.mono .hero-actions { margin-top: 40px; }
@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:      #6B6660;   /* AA 4.5:1 on paper (was #7E7970 = 4.3, just under) */
  --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: #F6F5F3; 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: #6B6660; }
@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; }

/* 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); } }
.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; }

/* big headline voice: condensed caps (C language) for section h2s on light */
.section-head h2, .svcs-title {
  font-family: 'Mona Sans', sans-serif;
  /* was wdth 78 + weight 700 — a leftover from the abandoned Archivo condensed-monumental
     display system. It made these h2s read condensed while every other heading on the same
     page was normal width. Now follows the documented ladder: h2 = 650, normal width. */
  font-weight: 650; letter-spacing: -0.02em; line-height: 1.02;
}

/* 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); }
.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; } }
/* framed full-photo plates — the real images, presented like a prestige showcase (not cut-outs) */
.ex-plate{ position: relative; margin:0; flex: none; width: clamp(280px, 27vw, 380px); aspect-ratio: 4/5;
  overflow: hidden; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.12); background:#0a0a0c; }
.ex-plate img{ display:block; width:100%; height:100%; object-fit: cover; }
.ex-plate::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 52%, rgba(8,8,10,.86)); }
.ex-plate figcaption{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; text-align:left; }
.ex-plate figcaption b{ display:block; font-variation-settings:"wdth" 92; font-weight:640; font-size:17px; color:#fff; letter-spacing:-.005em; }
.ex-plate figcaption span{ display:block; font-size:12.5px; color: var(--gold-hi); margin-top:4px; letter-spacing:.02em; }
@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; }
/* gallery film strip — tap/click to play, CSP-safe (src wired on demand by site.js) */
.sec-label{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-hi); font-weight:600; }
.gvid-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,18px); }
.gvid{ position:relative; margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--surface);
  aspect-ratio:3/4; }
.gvid video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gvid-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(10,8,6,.08) 55%,rgba(10,8,6,.62)); border:0; cursor:pointer; }
.gvid-play svg{ width:52px; height:52px; color:#fff; opacity:.92;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.5)); transition:transform .4s var(--ease); }
@media (hover:hover){ .gvid-play:hover svg{ transform:scale(1.12); } }
.gvid.playing .gvid-play{ background:transparent; }
.gvid.playing .gvid-play svg{ opacity:0; }
.gvid figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:12px 14px;
  pointer-events:none; }
.gvid figcaption b{ display:block; font-size:14.5px; font-weight:650; color:#fff; }
.gvid figcaption span{ font-size:12px; color:rgba(255,255,255,.72); }
.gvid-play:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:-4px; }
@media (max-width:900px){ .gvid-grid{ grid-template-columns:repeat(2,1fr); } }

.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%; height:auto; aspect-ratio: 3/4; object-fit: cover; }
/* height:auto is REQUIRED here. The width/height attributes added for CLS are
   presentational hints — height="1200" resolves to height:1200px, and aspect-ratio
   is only consulted when a dimension is auto. Without this the tiles rendered
   264x1200 and the cars fell out of the bottom of the crop. */
.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 var(--ease); }
@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 var(--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 var(--ease); }
@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; } }
@media (max-width: 720px){ .sp-in{ grid-template-columns: 1fr; text-align:center; } .sp-body p{ margin-inline:auto; } .sp-cta{ justify-content:center; } }


/* ============================================================
   REFINED HOMEPAGE — approved direction 2026-07-24.
   Namespaced .r / .r-* so nothing here can leak into interior pages.
   ============================================================ */


.r *{ box-sizing:border-box; }
.r{ --stone:#F3F1EC; --ink:#23211d; --soft:#5a564e; --line:rgba(35,33,29,.14); --copper:#8a6636; }
body.r{ background:#1a1815; }
.r{ font-family:'Mona Sans', sans-serif; -webkit-font-smoothing:antialiased; }
.r .serif{ font-family:'Mona Sans', sans-serif; }
.r .wrap3{ max-width:1240px; margin:0 auto; padding-inline:clamp(24px,6vw,88px); }
.r .lbl{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:500; color:var(--pg-accent,#8a6636); }
.r [data-fade]{ opacity:0; transform:translateY(20px); }
body.r.ready [data-fade]{ transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.r [data-fade].in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .r [data-fade]{opacity:1!important;transform:none!important} }

/* hero */
/* The hero slides UNDER the fixed 76px header (margin-top:-76px), so a plain 100svh
   height ends 76px short of the fold and a strip of the next section shows on first
   paint. Height must include the offset for the hero to actually fill the screen. */
.r-hero{ position:relative; height:calc(100svh + var(--nav-h)); margin-top:calc(var(--nav-h) * -1);
  overflow:hidden; background:#1a1815; }
.r-slides{ position:absolute; inset:0; }
.r-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.8s var(--ease); }
.r-slide:first-child{ opacity:1; }
.r-slide.on{ opacity:1; }
.r-slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
.r-slide.on img{ animation:kb 9s ease-out forwards; }
@keyframes kb{ from{transform:scale(1.11)} to{transform:scale(1.0)} }
.r-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  /* text-protection scrim. The slideshow runs light and dark frames, so the copy is
     measured against the WORST slide (a white Aventador) — not the darkest. Two layers:
     bottom-up for the text block, left-side because the copy is left-aligned. */
  background:
    linear-gradient(100deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.60) 30%, rgba(0,0,0,.22) 55%, transparent 76%),
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.10) 24%, rgba(0,0,0,.42) 50%, rgba(0,0,0,.88) 100%); }
.r-hero .in{ position:absolute; inset:auto 0 0 0; z-index:2; padding-bottom:clamp(56px,10vh,120px); }
.r-hero .lbl{ color:#e7c9a3!important; display:block; margin-bottom:26px; text-shadow:0 1px 14px rgba(0,0,0,.6); }
.r-hero h1{ color:#fff; font-family:'Mona Sans', sans-serif; font-weight:700; font-size:clamp(46px,6.6vw,92px); line-height:1.0; letter-spacing:-0.028em; text-shadow:0 2px 40px rgba(0,0,0,.4); }
.r-hero h1 em{ font-style:italic; font-weight:700; }
.r-hero .sub{ color:rgba(255,255,255,.85); font-size:clamp(15px,1.4vw,19px); line-height:1.6; max-width:42ch; margin-top:24px; }
/* Hero actions. These were bare link-text over photography, which gave the single most
   important CTA on the site no affordance at all — nothing read as pressable. Both are
   now outlined pills: equal shape, unequal weight, so the hierarchy is in the fill rather
   than in the size. */
.r-hero .acts{ margin-top:36px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.hbtn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:14.5px; font-weight:600; letter-spacing:-0.005em; line-height:1;
  padding:15px 26px; border-radius:999px; border:1px solid rgba(255,255,255,.42);
  color:#fff!important; background:transparent!important; white-space:nowrap;
  transition: background .45s var(--ease), border-color .45s var(--ease),
              color .45s var(--ease), transform .3s var(--ease); }
.hbtn svg{ width:15px; height:15px; flex:none; }
.hbtn-1{ border-color:#e7c9a3; background:rgba(231,201,163,.14)!important; }
.hbtn-1 svg{ transition: transform .45s var(--ease); }
.hbtn-2{ color:rgba(255,255,255,.88)!important; }
.hbtn:active{ transform:scale(.98); }
.hbtn:focus-visible{ outline:2px solid #e7c9a3; outline-offset:3px; }
@media (hover:hover){
  .hbtn-1:hover{ background:#e7c9a3!important; color:#17140F!important; border-color:#e7c9a3; }
  .hbtn-1:hover svg{ transform:translateX(3px); }
  .hbtn-2:hover{ border-color:rgba(255,255,255,.8); color:#fff!important;
    background:rgba(255,255,255,.08)!important; }
}
@media (prefers-reduced-motion:reduce){ .hbtn,.hbtn svg{ transition:none } }
@media (max-width:420px){ .r-hero .acts{ gap:10px }
  .hbtn{ padding:14px 20px; font-size:13.5px } }

/* scroll-colour flow */
.r-flow{ background:var(--pg,#F3F1EC); color:var(--pg-fg,#23211d); transition:background 1.15s var(--ease-io), color 1.15s var(--ease-io);
  /* --ease-io, NOT --ease: expo-out is an ENTRANCE curve and dumps >half a dark→light
     background wash into the first 200ms, which is what read as a strobe. A symmetric
     in-out spreads the change across the whole duration. Measured, not guessed. */ }
/* second accent rides the same flow */
.r-sec{ position:relative; }
.r-state p.big{ font-family:'Mona Sans', sans-serif; font-weight:680; font-size:clamp(30px,4.2vw,58px); line-height:1.1; letter-spacing:-0.025em; max-width:20ch; }
.r-state .sub{ font-size:16px; line-height:1.8; opacity:.72; max-width:46ch; margin-top:34px; }

/* marque wall — the badges as proof. Hairline spec-table grid (ties to the technical
   language), optically-matched sizes, monochrome at rest so it reads as one system. */
.r-marques{ padding:clamp(80px,13vh,150px) 0; }
.mq-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.mq-line{ font-family:'Mona Sans',sans-serif; font-weight:650; font-size:clamp(19px,2.1vw,27px);
  letter-spacing:-0.02em; color:var(--pg-fg,#23211d); opacity:.9; }
.mq-wall{ list-style:none; margin:clamp(34px,4vw,52px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(35,33,29,.16); border-left:1px solid rgba(35,33,29,.16); }
.mq-cell{ display:grid; place-items:center; min-height:clamp(112px,11vw,150px); padding:20px;
  border-right:1px solid rgba(35,33,29,.16); border-bottom:1px solid rgba(35,33,29,.16); }
.mq-cell img{ width:auto; max-width:82%; object-fit:contain; display:block;
  filter:brightness(0); opacity:.5;
  transition:opacity .45s var(--ease), transform .55s var(--ease); }
@media (hover:hover){ .mq-cell:hover img{ opacity:.92; transform:scale(1.06); } }
.mq-note{ margin-top:clamp(26px,3vw,38px); font-size:14px; line-height:1.7;
  opacity:.62; max-width:74ch; }
@media (max-width:900px){ .mq-wall{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .mq-wall{ grid-template-columns:repeat(2,1fr); }
  .mq-cell{ min-height:88px; padding:14px; } }
@media (prefers-reduced-motion:reduce){ .mq-cell img{ transition:none; } }

/* exploded assembly — scroll-scrubbed. Four SVG groups converge as you scroll, cover last.
   DEFAULT (no-js / reduced-motion): fully assembled, all layers visible. */
.r-explode{ padding:0; }
.rx{ position:relative; }
.rx-pin{ position:relative; }
.rx-inner{ width:100%; padding:clamp(18px,3vh,34px) var(--pad); }  /* width:100% — wrap3's
   `margin:0 auto` makes a grid item shrink-to-fit, which collapsed this to 507px */
.rx-copy{ max-width:34ch; }
.rx-stage{ margin-top:clamp(26px,4vh,46px); }
.rx-h{ font-family:'Mona Sans',sans-serif; font-weight:700; font-size:clamp(26px,3.1vw,44px);
  line-height:1.05; letter-spacing:-0.028em; color:#fff; }
.rx-step{ display:flex; align-items:baseline; gap:14px; margin-top:22px;
  border-top:1px solid rgba(255,255,255,.14); padding-top:18px; }
.rx-n{ font-size:12px; letter-spacing:.26em; color:var(--pg-tech,var(--tech-hi)); font-weight:600; }
.rx-t{ font-size:clamp(16px,1.7vw,21px); font-weight:600; color:#fff; }
.rx-stage{ position:relative; }
.rx-canvas{ position:relative; aspect-ratio:720/538; margin-inline:auto;
  /* cap the WIDTH, never max-height — max-height on an aspect-ratio box breaks the ratio,
     which invalidates every percentage-positioned layer. 1110/700 = 1.586 */
  width:min(100%, 86vh); }
.rx-layer{ position:absolute; height:auto; display:block; will-change:transform;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.34)); }
.rx-notes .rx-angle{ stroke:var(--pg-tech,var(--tech-hi)); stroke-width:3; stroke-linecap:round; }
.rx-notes .rx-strap{ stroke:var(--pg-tech,var(--tech-hi)); stroke-width:2.5; fill:none; }

/* --- scrubbed mode (JS + motion allowed) --- */
.rx.is-live{ height:230vh; }
.rx.is-live .rx-pin{ position:sticky; top:0; height:100vh; display:grid; align-items:center;
    padding-top:76px; }   /* clear the fixed nav — content was clipping under it */
@media (prefers-reduced-motion:reduce){
  .rx.is-live{ height:auto; }
  .rx.is-live .rx-pin{ position:relative; height:auto; }
  .rx.is-live .rx-layer{ transform:none !important; opacity:1 !important; }
  .rx.is-live .rx-notes{ opacity:1 !important; }
}
@media (max-width:900px){ .rx.is-live{ height:190vh; } }

/* the vault — interactive clip deck. Three real clips telling the enclosed journey:
   loaded → sealed → delivered. The active card expands and plays; when its clip ends the
   next card takes over. Click any card to jump. DEFAULT (no-js): three equal poster cards. */
.r-vault{ padding:clamp(90px,15vh,180px) 0; }
.rv{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(40px,5.5vw,88px); align-items:center; }
.rv-head{ max-width:none; }
.rv-h{ font-family:'Mona Sans',sans-serif; font-weight:700; font-size:clamp(32px,4.4vw,60px);
  line-height:1.04; letter-spacing:-0.028em; color:#fff; max-width:17ch; }
.rv-h em{ font-style:italic; color:var(--pg-accent,#e7c9a3); }
.rv-sub{ margin-top:22px; font-size:clamp(15px,1.5vw,18px); line-height:1.7; opacity:.78; max-width:52ch; }

.rv-deck{ display:flex; gap:clamp(8px,0.8vw,13px); height:clamp(360px,38vw,530px); }
.rv-card{ position:relative; flex:1 1 0; min-width:0; padding:0; border:0; cursor:pointer;
  border-radius:var(--r-md); overflow:hidden; background:#231f1a; text-align:left;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
  transition:flex 1050ms var(--ease-io), transform var(--dur-1) var(--ease); }
.rv-card.is-on{ flex:4.2 1 0; cursor:default; }
.rv-vid,.rv-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rv-poster{ z-index:1; opacity:1; transition:opacity .9s var(--ease-soft); }
.rv-card.is-on.is-ready .rv-poster{ opacity:0; }
/* the poster holds until the clip can actually paint a frame. Fading it on the class
   change alone leaves a blank video underneath while the MP4 is still downloading —
   that is the flash that read as "glitchy" scrolling. */
.rv-shade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,4,.34) 0%,rgba(8,6,4,0) 34%,rgba(8,6,4,.82) 100%);
  transition:background .6s var(--ease); }
.rv-card:not(.is-on) .rv-shade{ background:linear-gradient(180deg,rgba(8,6,4,.5) 0%,rgba(8,6,4,.3) 40%,rgba(8,6,4,.88) 100%); }

.rv-meta{ position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:clamp(16px,1.5vw,26px); display:flex; flex-direction:column; gap:6px; }
.rv-n{ font-size:11px; letter-spacing:.28em; color:var(--pg-accent,#e7c9a3); }
.rv-t{ font-family:'Mona Sans',sans-serif; font-weight:700; font-size:clamp(19px,2vw,27px);
  letter-spacing:-0.02em; color:#fff; line-height:1.05; }
.rv-d{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.76); max-width:34ch;
  opacity:0; max-height:0; overflow:hidden; transition:opacity .6s var(--ease) .25s, max-height 1.05s var(--ease-io), max-height .7s var(--ease); }
.rv-card.is-on .rv-d{ opacity:1; max-height:80px; }

/* collapsed cards are ~85px wide — horizontal titles clip, so rotate them (accordion spine) */
.rv-card:not(.is-on) .rv-meta{ position:absolute; inset:0; padding:0; display:block; }
.rv-card:not(.is-on) .rv-t{ position:absolute; left:50%; top:50%; white-space:nowrap;
  writing-mode:vertical-rl; transform:translate(-50%,-50%) rotate(180deg);
  font-size:16px; letter-spacing:.01em; }
.rv-card:not(.is-on) .rv-n{ position:absolute; left:0; right:0; bottom:16px; text-align:center; }
.rv-card:not(.is-on) .rv-d{ display:none; }
.rv-bar{ position:absolute; left:0; right:0; bottom:0; z-index:4; height:2px;
  background:rgba(255,255,255,.16); opacity:0; transition: opacity .4s var(--ease); }
.rv-card.is-on .rv-bar{ opacity:1; }
.rv-bar i{ display:block; height:100%; background:var(--pg-accent,#e7c9a3);
  transform:scaleX(0); transform-origin:left center; }
@media (hover:hover){
  .rv-card:not(.is-on):hover .rv-poster{ opacity:.82; }
  .rv-card:not(.is-on):hover .rv-t{ color:var(--pg-accent,#e7c9a3); }
}
.rv-card:focus-visible{ outline:2px solid var(--pg-accent,#e7c9a3); outline-offset:3px; }

.rv-link{ display:inline-flex; align-items:center; gap:10px; margin-top:32px; font-size:14px;
  font-weight:600; color:var(--pg-accent,#e7c9a3); text-decoration:none;
  border-bottom:1px solid rgba(231,201,163,.4); padding-bottom:4px; }
.rv-link svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
@media (hover:hover){ .rv-link:hover svg{ transform:translateX(5px); } }

/* mobile: vertical accordion — active card tall, the others collapse to a labelled row */
@media (max-width:860px){
  .rv{ grid-template-columns:1fr; gap:36px; }
  .rv-deck{ flex-direction:column; height:auto; gap:10px; }
  .rv-card{ flex:none; height:72px; transition:height 950ms var(--ease-io), transform var(--dur-1) var(--ease); }
  .rv-card.is-on{ flex:none; height:min(78svh,520px); }
  .rv-meta{ padding:16px 18px; }
  .rv-card:not(.is-on) .rv-meta{ position:absolute; inset:0; padding:0 18px;
    display:flex; flex-direction:row; align-items:center; gap:14px; }
  .rv-card:not(.is-on) .rv-t{ position:static; writing-mode:horizontal-tb; transform:none;
    font-size:18px; }
  .rv-card:not(.is-on) .rv-n{ position:static; text-align:left; width:auto; bottom:auto; }
}
@media (prefers-reduced-motion:reduce){
  .rv-card,.rv-card.is-on,.rv-card.is-on.is-ready .rv-poster,.rv-poster,.rv-d,.rv-shade{ transition:none; }
}

/* the difference — parallax degree band. Graphic-led (not full-bleed) so it reads
   distinct from the method sequence. Layers move at different depths on scroll. */
.r-degree{ padding:clamp(90px,15vh,180px) 0; overflow:hidden; }
.rdeg{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(40px,6vw,90px); align-items:center; }
.rdeg-text .rdeg-h{ font-family:'Mona Sans',sans-serif; font-weight:700; font-size:clamp(32px,4.4vw,60px);
  line-height:1.02; letter-spacing:-0.028em; color:#fff; max-width:16ch; }
.rdeg-sub{ margin-top:24px; font-size:clamp(15px,1.5vw,18px); line-height:1.7; opacity:.78; max-width:46ch; }
.rdeg-facts{ list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
.rdeg-facts li{ display:flex; align-items:baseline; gap:14px; padding:14px 0; border-top:1px solid rgba(255,255,255,.12); }
.rdeg-facts li:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.rdeg-facts b{ font-weight:650; font-size:16px; color:var(--pg-tech,var(--tech-hi)); min-width:130px; }
.rdeg-facts span{ font-size:13.5px; opacity:.66; }

.rdeg-viz{ position:relative; aspect-ratio:4/5; }
.rdeg-media{ position:absolute; inset:0; border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7); will-change:transform; }
.rdeg-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rdeg-mscrim{ position:absolute; inset:0; background:linear-gradient(200deg, rgba(23,20,15,.1) 40%, rgba(23,20,15,.72)); }
.rdeg-angle{ position:absolute; left:-2%; bottom:2%; width:62%; height:auto; overflow:visible; will-change:transform; }
.rdeg-angle .rdeg-ground{ stroke:rgba(255,255,255,.35); stroke-width:1.5; }
.rdeg-angle .rdeg-ramp{ stroke:var(--pg-tech,var(--tech-hi)); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340; }
.rdeg-angle .rdeg-typ{ stroke:rgba(255,255,255,.28); stroke-width:1.5; stroke-linecap:round; }
.rdeg-angle .rdeg-arc{ stroke:var(--pg-tech,var(--tech-hi)); stroke-width:1.5; opacity:.7; }
.rdeg-angle .rdeg-typlab{ fill:rgba(255,255,255,.42); font-size:12px; font-family:'Mona Sans',sans-serif;
  letter-spacing:.12em; text-transform:uppercase; }
.rdeg.in .rdeg-angle .rdeg-ramp{ transition:stroke-dashoffset 1.4s var(--ease) .2s; stroke-dashoffset:0; }
.rdeg-num{ position:absolute; right:2%; top:0; display:flex; align-items:flex-start; gap:2px;
  color:#fff; will-change:transform; text-shadow:0 2px 30px rgba(0,0,0,.5); }
.rdeg-num span{ font-family:'Mona Sans',sans-serif; font-weight:700; font-size:clamp(72px,9vw,132px);
  line-height:.8; letter-spacing:-0.04em; }
.rdeg-num i{ font-style:normal; font-weight:700; font-size:clamp(30px,3.6vw,52px); color:var(--pg-tech,var(--tech-hi)); margin-top:.1em; }
.rdeg-num em{ position:absolute; bottom:-22px; right:4px; font-style:normal; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; opacity:.6; white-space:nowrap; }
@media (max-width:860px){
  .rdeg{ grid-template-columns:1fr; gap:36px; }
  .rdeg-viz{ aspect-ratio:4/5; order:-1; }
  .rdeg-num span{ font-size:clamp(64px,20vw,110px); }
}
@media (prefers-reduced-motion:reduce){
  .rdeg.in .rdeg-angle .rdeg-ramp{ transition:none; stroke-dashoffset:0; }
  .rdeg-media,.rdeg-angle,.rdeg-num{ transform:none !important; }
}

/* method — cinematic scroll-pinned sequence.
   DEFAULT (no-js / reduced-motion): a static stack of 3 image panels, always visible.
   JS adds .is-pinned to .rmeth to enable the pinned scroll behaviour. */
.r-method{ padding:0; }
.rmeth{ position:relative; }
.rmeth-pin{ position:relative; }
.rmeth-frames{ position:relative; }
.rmeth-frame{ margin:0; position:relative; height:78vh; min-height:460px; overflow:hidden; }
.rmeth-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.rmeth-scrim{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,8,6,.30) 0%, rgba(10,8,6,.08) 30%, rgba(10,8,6,.55) 78%, rgba(10,8,6,.86) 100%); }
.rmeth-copy{ position:relative; }
.rmeth-steps{ position:relative; }
/* static-stack default: each step sits under its own frame */
.rmeth-step{ padding:26px 0 60px; color:#EDE8DF; }
.rmeth-n{ display:block; font-size:12px; letter-spacing:.28em; color:var(--pg-tech,var(--tech-hi)); margin-bottom:14px; }
.rmeth-step h3{ font-family:'Mona Sans',sans-serif; font-weight:700; font-size:clamp(30px,4.4vw,56px);
  letter-spacing:-0.025em; line-height:1.0; margin-bottom:16px; color:#fff; }
.rmeth-step p{ font-size:clamp(15px,1.5vw,18px); line-height:1.65; max-width:44ch; opacity:.82; }

/* --- pinned mode (JS + motion allowed) --- */
.rmeth.is-pinned{ height:340vh; }
.rmeth.is-pinned .rmeth-pin{ position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; align-items:end; }
.rmeth.is-pinned .rmeth-frames{ position:absolute; inset:0; }
.rmeth.is-pinned .rmeth-frame{ position:absolute; inset:0; height:100%; min-height:0;
  opacity:0; transition:opacity 1s var(--ease); }
.rmeth.is-pinned .rmeth-frame img{ transform:scale(1.08); transition:transform 6s ease-out; }
.rmeth.is-pinned .rmeth-frame.on{ opacity:1; }
.rmeth.is-pinned .rmeth-frame.on img{ transform:scale(1); }
.rmeth.is-pinned .rmeth-copy{ z-index:2; padding-bottom:clamp(56px,9vh,110px); width:100%; }
.rmeth.is-pinned .rmeth-frame.on .rmeth-scrim{ background:linear-gradient(180deg, rgba(10,8,6,.34) 0%, rgba(10,8,6,.10) 26%, rgba(10,8,6,.42) 60%, rgba(10,8,6,.88) 100%); }
.rmeth.is-pinned .rmeth-copy .lbl{ text-shadow:0 1px 20px rgba(0,0,0,.55); }
.rmeth.is-pinned .rmeth-step{ text-shadow:0 2px 30px rgba(0,0,0,.45); }
.rmeth.is-pinned .rmeth-n{ color:var(--pg-tech,var(--tech-hi)); opacity:.95; }
.rmeth.is-pinned .rmeth-steps{ height:auto; min-height:210px; }
.rmeth.is-pinned .rmeth-step{ position:absolute; padding:0; max-width:640px;
  opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .8s var(--ease); pointer-events:none; }
.rmeth.is-pinned .rmeth-step.on{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .rmeth.is-pinned{ height:auto; }
  .rmeth.is-pinned .rmeth-pin{ position:relative; height:auto; }
  .rmeth.is-pinned .rmeth-frame{ position:relative; height:70vh; opacity:1; }
  .rmeth.is-pinned .rmeth-step{ position:relative; opacity:1; transform:none; } }
@media (max-width:760px){ .rmeth-frame{ height:64vh; } }
/* services — image-reveal list (hover a name, its photo crossfades into the stage) */
.r-svc{ padding:clamp(90px,15vh,180px) 0; }
.r-reveal{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,5vw,80px); align-items:start; margin-top:40px; }
.r-reveal-list{ display:flex; flex-direction:column; border-top:1px solid rgba(128,128,128,.22); }
.rr-row{ position:relative; display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:20px; padding:clamp(18px,2.1vw,26px) 4px; border-bottom:1px solid rgba(128,128,128,.22);
  text-decoration:none; color:inherit; isolation:isolate;
  transition:padding-left .5s var(--ease), color .4s var(--ease); }
.rr-thumb{ display:none; }  /* desktop: the stage carries imagery; thumb is mobile-only */
.rr-nm{ grid-column:1; font-weight:600; font-size:clamp(21px,2.6vw,32px); line-height:1.08;
  letter-spacing:-0.02em; color:var(--pg-fg,#23211d); transition:color .4s var(--ease), opacity .4s var(--ease); }
.rr-ds{ grid-column:2; justify-self:end; text-align:right; font-size:13px; opacity:.55; max-width:22ch;
  transition:opacity .4s var(--ease); }
.rr-go{ grid-column:3; display:grid; place-items:center; width:34px; height:34px; opacity:0;
  transform:translateX(-8px); transition:opacity .45s var(--ease), transform .5s var(--ease);
  color:var(--pg-accent,#8a6636); }
.rr-go svg{ width:22px; height:22px; }
@media (hover:hover){
  .r-reveal-list:hover .rr-row .rr-nm{ opacity:.42; }          /* dim the rest… */
  .r-reveal-list .rr-row:hover .rr-nm{ opacity:1; color:var(--pg-accent,#8a6636); }  /* …spotlight this one */
  .r-reveal-list:hover .rr-row .rr-ds{ opacity:.28; }
  .r-reveal-list .rr-row:hover .rr-ds{ opacity:.7; }
  .rr-row:hover{ padding-left:20px; }
  .rr-row:hover .rr-go{ opacity:1; transform:none; }
}
.rr-row:focus-visible{ outline:2px solid var(--pg-accent,#8a6636); outline-offset:3px; }

/* the sticky image stage */
.r-reveal-stage{ position:sticky; top:110px; aspect-ratio:4/5; border-radius:var(--r-md);
  overflow:hidden; background:rgba(0,0,0,.06); box-shadow:0 30px 70px -34px rgba(20,16,12,.5); }
.rr-stage-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity .7s var(--ease), transform 1.1s var(--ease); }
.rr-stage-img.on{ opacity:1; transform:scale(1); }
.r-reveal-stage::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(12,10,8,.34)); }

@media (max-width:860px){
  /* no hover on touch → the stage is dropped, each row shows its own thumbnail inline */
  .r-reveal{ grid-template-columns:1fr; gap:0; }
  .r-reveal-stage{ display:none; }
  .rr-row{ grid-template-columns:64px 1fr auto; gap:16px; padding:16px 2px; }
  .rr-thumb{ display:block; grid-column:1; grid-row:1 / span 2; width:64px; height:64px;
    object-fit:cover; border-radius:var(--r-sm); }
  .rr-nm{ grid-column:2; font-size:19px; }
  .rr-ds{ grid-column:2; justify-self:start; text-align:left; max-width:none; margin-top:2px; }
  .rr-go{ grid-column:3; grid-row:1 / span 2; opacity:.5; transform:none; }
}
/* work — calm gallery */
.r-work{ padding:clamp(90px,15vh,180px) 0; }
.r-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); margin-top:44px; }
.r-fig{ margin:0; }
.r-fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:var(--r-md); }
.r-fig figcaption{ margin-top:12px; font-size:13px; opacity:.68; }
@media(max-width:820px){ .r-grid{ grid-template-columns:1fr 1fr; } }

/* trust */
.r-trust{ padding:clamp(90px,15vh,180px) 0; }
.r-trust .row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(30px,6vw,80px); align-items:center; }
.r-trust .big{ font-family:'Mona Sans', sans-serif; font-weight:700; font-size:clamp(56px,8vw,112px); line-height:.9; color:var(--pg-accent,#8a6636); }
.r-trust .big span{ display:block; font-family: 'Mona Sans'; font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; margin-top:14px; }
.r-trust h2,.r-trust h3{ font-family:'Mona Sans', sans-serif; font-weight:650; font-size:clamp(28px,3.4vw,46px); line-height:1.1; margin-bottom:16px; }
.r-trust p{ font-size:16px; line-height:1.75; opacity:.72; max-width:52ch; }
/* Instagram strip — static, CSP-safe proof of the feed the copy references. */
.ig-head{ display:flex; align-items:center; gap:12px; margin-top:clamp(40px,5vw,60px);
  text-decoration:none; color:inherit; width:fit-content; }
.ig-mark{ display:grid; place-items:center; width:34px; height:34px; color:var(--pg-accent,#e7c9a3); }
.ig-mark svg{ width:22px; height:22px; }
.ig-head .ig-handle{ font-weight:650; font-size:16px; letter-spacing:-0.01em; }
.ig-head .ig-follow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pg-accent,#e7c9a3); opacity:.82; margin-left:4px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
@media (hover:hover){ .ig-head:hover .ig-follow{ opacity:1; transform:translateX(3px); } }
/* Edge treatment. The gradient fade was doing the work of hiding the loop, and a soft
   ghost-edge is the most dated part of a marquee — it reads as "an effect" rather than
   as a decision. Replaced with a full-bleed band: the rail breaks the page gutter and
   clips hard against the viewport, framed by hairlines top and bottom. The tiles are
   meant to run past the edge of the screen; nothing needs to be disguised. */
.ig-marquee{ margin-top:26px; overflow:hidden; position:relative;
  /* Negative margins, NOT width:100vw + translateX(-50%): a transform is visual only,
     so that version still reserved a full viewport of layout at a 50% offset and put
     720px of horizontal scroll on the page. Margins affect layout, so this bleeds
     without overflowing. */
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:22px 0; border-top:1px solid rgba(242,238,230,.13);
  border-bottom:1px solid rgba(242,238,230,.13); }
.ig-track{ display:flex; gap:clamp(10px,1vw,16px); width:max-content;
  animation:ig-scroll 70s linear infinite; will-change:transform; }
.ig-tile{ position:relative; flex:0 0 auto; width:clamp(150px,15vw,220px); aspect-ratio:3/4;
  overflow:hidden; border-radius:var(--r-sm); background:rgba(255,255,255,.04); display:block; }
.ig-tile img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease); }
.ig-tile::after{ content:""; position:absolute; inset:0; background:rgba(12,10,8,.28); opacity:0; transition: opacity .4s var(--ease); }
.ig-tile:focus-visible{ outline:2px solid var(--pg-accent,#e7c9a3); outline-offset:2px; }
@keyframes ig-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (hover:hover){
  .ig-marquee:hover .ig-track{ animation-play-state:paused; }
  .ig-tile:hover img{ transform:scale(1.06); }
  .ig-tile:hover::after{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  /* no auto-scroll — becomes a manually swipeable rail so every tile is still reachable */
  .ig-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-padding-left:24px; padding-left:24px; padding-right:24px; }
  .ig-track{ animation:none; }
}
.r-trust .part{ margin-top:18px; font-size:13.5px; color:var(--pg-accent,#8a6636); }
@media(max-width:760px){ .r-trust .row{ grid-template-columns:1fr; } }

/* close */
/* close section — Ahmed's real dripping crown, painted on by scroll position.
   Reversible by construction: the mask is a pure function of the element's position,
   no stored state, so scrolling back un-paints it. */
.r-crown{ width:clamp(64px,7vw,96px); height:auto; display:block; margin:0 auto clamp(24px,3vw,36px);
  -webkit-mask-image:linear-gradient(180deg,#000 0 50%,transparent 57% 100%);
          mask-image:linear-gradient(180deg,#000 0 50%,transparent 57% 100%);
  -webkit-mask-size:100% 200%; mask-size:100% 200%;
  -webkit-mask-position:0% 100%; mask-position:0% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
@media (prefers-reduced-motion:reduce){
  .r-crown{ -webkit-mask-image:none !important; mask-image:none !important; }
}
.r-close{ padding:clamp(100px,17vh,210px) 0; text-align:center; }
.r-close h2,.r-close .hd{ font-family:'Mona Sans', sans-serif; font-weight:700; font-size:clamp(38px,5.4vw,84px); line-height:1.02; letter-spacing:-0.028em; }
.r-close .tel{ display:inline-block; margin-top:30px; font-family:'Mona Sans', sans-serif; font-weight:650; font-size:clamp(30px,4.2vw,58px); color:var(--pg-accent,#8a6636); text-decoration:none; }
.r-close .sub{ margin-top:22px; font-size:15px; opacity:.66; }


/* Refined homepage: the fixed nav rides the scroll-colour flow instead of
   fighting it — transparent over the hero, then the current section's colour. */
body.r header.nav { background: transparent; border-bottom-color: transparent;
  transition: background 1.2s var(--ease), border-color 1.2s var(--ease); }
body.r.navsolid header.nav { background: var(--pg, #F3F1EC); /* must be OPAQUE */
  border-bottom-color: rgba(128,128,128,.18); }
body.r:not(.navsolid) .nav-links a, body.r:not(.navsolid) .mega-toggle,
body.r:not(.navsolid) .tel-link, body.r:not(.navsolid) .tel-link .tel-num,
body.r.nav-on-dark .nav-links a, body.r.nav-on-dark .mega-toggle,
body.r.nav-on-dark .tel-link, body.r.nav-on-dark .tel-link .tel-num { color: #F2EEE6; }
body.r:not(.navsolid) header.nav .brand-logo,
body.r.nav-on-dark header.nav .brand-logo { filter: brightness(0) invert(1); }
body.r:not(.navsolid) .burger span, body.r.nav-on-dark .burger span { background: #F2EEE6; }
/* black pill would sink into a dark band — invert it there */
body.r:not(.navsolid) .nav-cta .btn, body.r.nav-on-dark .nav-cta .btn {
  background: #F2EEE6; border-color: #F2EEE6; color: #17150f; box-shadow: none; }
@media (hover: hover) {
  body.r:not(.navsolid) .nav-cta .btn:hover, body.r.nav-on-dark .nav-cta .btn:hover {
    background: #fff; border-color: #fff; }
}

/* labels double as the document's h2 outline — reset UA heading metrics */
.r h2.lbl{ font-size:11px; font-family:'Mona Sans', sans-serif; font-weight:500; margin:0; line-height:1.4; letter-spacing:.26em; }

/* Refined hero, small screens: the eyebrow used to wrap leaving the separator
   dangling at the end of line one, and the slide dots sat on the phone number. */
@media (max-width: 640px) {
  .r-hero .lbl .sep { display: none; }
  .r-hero .lbl .loc { display: block; }
  .r-hero .in { padding-bottom: 62px; }
  /* phones get a touch beyond full-screen so the copy never crowds the fold */
  .r-hero { height: calc(100svh + var(--nav-h) + 3vh); }
}

/* Sealing sequence — full-bleed cinematic takeover.
   The section breaks the container: a 400vh scroll track with a 100svh sticky stage, and the
   four photographs CUT between each other (no dissolve, no wipe) as you scroll. Copy sits over
   the image on a gradient scrim — NEVER backdrop-filter, this is a sticky containing block and
   that combination kills the layer on iOS. */
.r-cine{padding:0!important;background:#0E1116}
/* The 400vh scroll track is retired (Kaiyo 2026-08-06): the stage is a normal
   full-height section and the frames advance on the visitor's own action. */
.r-cine .rx{position:relative}
.r-cine .rx-pin{position:relative;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.r-cine .rx-seq{position:absolute;inset:0}
.r-cine .rx-fr{position:absolute;inset:0;opacity:0;
  background-image:var(--img);background-size:cover;background-position:center;background-repeat:no-repeat;
  will-change:background-position}

/* Wide screens show the SAME real portrait footage as phones, contained rather than covered.
   2026-09-06: the landscape set this stage used to serve (seal-1..4-{760,1120}.webp) was four
   AI-generated renders of a truck that is not Ahmed's — no Haul King livery, no plate, a locked-off
   camera and an impossible sky, and frame 4 showed a curtain-side box body that the flatbed in
   frames 1-3 physically cannot become. They shipped to desktop while mobile got the genuine
   footage, on a site whose gallery copy reads "This is the real work, not stock photography".
   The real sealing exists ONLY as portrait phone video (478x850), and no real landscape frame of
   the body closing exists to cut from. `cover` would upscale a 478px source ~3.2x and throw away
   two thirds of the frame, so the frame is CONTAINED at close to native size on the section's own
   dark ground and the overlay copy keeps the left of the stage. Less cinematic than a fabrication,
   and true. Replace with real landscape frames the next time Ahmed shoots a seal. */
@media (min-width:761px){
  .r-cine .rx-fr{ background-size:contain; background-position:72% center; }
}

.r-cine .rx-fr.is-on{opacity:1}

/* overlay UI */
.r-cine .rx-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  /* 77px clears the fixed header — without this the eyebrow sits behind the nav */
  padding:calc(77px + clamp(20px,3.5vh,42px)) var(--pad) clamp(30px,6vh,64px);pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,14,.74) 0%,rgba(8,10,14,.12) 24%,rgba(8,10,14,.10) 50%,rgba(8,10,14,.82) 100%)}
.r-cine .rx-eyebrow{display:block;font-size:11px;font-weight:650;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-hi,#EBBD97);margin-bottom:14px}
.r-cine .rx-h{font-weight:700;font-size:clamp(30px,4.6vw,64px);line-height:1.02;letter-spacing:-.028em;
  color:#fff;margin:0;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.r-cine .rx-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.r-cine .rx-step{display:flex;align-items:baseline;gap:16px;margin:0;border:0;padding:0}
.r-cine .rx-n{font-size:12px;letter-spacing:.26em;font-weight:650;color:var(--gold-hi,#EBBD97)}
.r-cine .rx-t{font-size:clamp(17px,2.1vw,26px);font-weight:600;color:#fff;letter-spacing:-.015em;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
/* hairline progress across the very bottom of the stage */

/* Portrait: a landscape frame cropped to `cover` on a tall viewport throws away the truck —
   only the curtain survives. Letterbox it instead and let the copy live in the void. */
@media (max-width:760px){
  /* Portrait frames now exist (cut from Ahmed's sealing footage), so mobile fills the
     stage with cover instead of letterboxing a landscape frame into ~35% of it. The
     contain fallback existed only because cropping 4:3 to a phone threw the truck away
     — a 478x850 source on a 390x844 stage crops a few percent off the sides and keeps
     everything. */
  .r-cine .rx-fr{background-size:cover;background-position:center!important}
  .r-cine .rx-h{font-size:clamp(26px,7.4vw,38px)}
  .r-cine .rx-bot{align-items:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .r-cine .rx-fr{background-position:center!important}
}



/* step label: slides up as each stage lands */
.rx-t{display:inline-block}
.rx-t.is-in{animation:rxIn .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes rxIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .rx-t.is-in{animation:none} }

/* ── Vault: original accordion, advanced by scroll ──────────────────────────────
   THE DECK'S DESIGN IS UNTOUCHED — `.rv-deck` keeps its original flex accordion
   (`.rv-card` flex:1 1 0 → 4.2 1 0 open; vertical 72px→expanded stack under 860px)
   at its original size inside the `.rv` grid. The ONLY addition is a scroll track:
   passing through the section opens each clip in turn, then releases to the next
   section. Kaiyo 2026-08-03: "i liked it how it was before... i didnt want to change
   the design of it." Do not restyle this deck again.
   The pin has NO fixed height — it wraps the deck's own height, so the same track
   drives the horizontal accordion on desktop and the vertical one on mobile. */
/* The copy keeps pace with the clips: the head is sticky for the length of the track,
   so it no longer drifts off screen while the videos are still advancing. Under 860px
   the grid is one column, the head's grid area is only content-tall, and sticky is a
   natural no-op — mobile is untouched. */
@media (min-width:861px){
  /* The head was stuck to a hand-computed offset (50svh minus a guessed half-height),
     so it top-aligned with the deck instead of centring with it. A full-height sticky
     box that centres its own content is self-correcting whatever the copy length. */
  .r-vault .rv-head{align-self:start;position:sticky;top:var(--navh,77px);
    height:calc(100svh - var(--navh,77px));
    display:flex;flex-direction:column;justify-content:center}
}
.r-vault .rv-scroll{position:relative;height:400vh}
/* NOTE: usable travel = height − 100svh (the pin). 400vh ⇒ 300vh ÷ 3 clips = a full
   viewport of scroll each. 300vh gave only 67vh per clip and read as rushed. */   /* ~100vh of scroll per clip */
/* padding-top clears the fixed nav, so the deck centres in the VISIBLE area rather
   than in the full viewport — without it the optical centre sits ~38px high. */
.r-vault .rv-pin{position:sticky;top:var(--navh,77px);
  display:flex;align-items:center;
  min-height:calc(100vh - var(--navh,77px));
  min-height:calc(100svh - var(--navh,77px))}
.r-vault .rv-pin>.rv-deck{width:100%}
/* without JS or with reduced motion: no track, everything as it always was */
.r-vault .rv-scroll:not(.is-live){height:auto}
.r-vault .rv-scroll:not(.is-live) .rv-pin{position:static;min-height:0;display:block}
@media (prefers-reduced-motion:reduce){
  .r-vault .rv-scroll{height:auto}
  .r-vault .rv-pin{position:static;min-height:0;display:block}
}

/* ── Press feedback ─────────────────────────────────────────────────────────────
   Every pressable confirms it heard the tap. Subtle (0.97–0.99) and fast: press is
   the one moment the user is watching most closely, so it must be immediate.
   `.btn` already had this; these are the ones that were silent. */
.nav-cta, .tel-link, .chip, .mm-book, .cbtn, .rv-link {
  transition: transform var(--dur-1) var(--ease), color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.nav-cta:active, .mm-book:active { transform: scale(0.97); }
.tel-link:active, .chip:active, .rv-link:active { transform: scale(0.98); }

/* pointer-coarse devices get the press state; :active on desktop needs a real click */
@media (prefers-reduced-motion: reduce){
  .nav-cta:active, .mm-book:active, .tel-link:active,
  .chip:active, .rv-link:active, .rv-card:active { transform: none; }
}

/* press feedback for the deck, kept OUT of the grouped rule above: a later grouped
   `transition` REPLACES the card's flex/height morph entirely (that shipped once —
   the accordion snapped with no animation and read as rough) */
.rv-card:not(.is-on):active{ transform:scale(0.988); }
@media (prefers-reduced-motion:reduce){ .rv-card:not(.is-on):active{ transform:none; } }

/* ── The difference: legible technical readout ──────────────────────────────────
   The angle diagram and the 4° figure used to float loose over the photograph:
   lines at rgba(255,255,255,.28) and a label at .42 over a busy image read as
   random marks and unreadable text, and the figure clipped the frame edge.
   They now share one dark panel, so every stroke has a controlled backdrop. */
.rdeg-panel{ position:absolute; left:3%; bottom:4%; width:min(54%,268px);
  background:rgba(16,19,24,.94); border:1px solid rgba(159,187,216,.24);
  border-radius:var(--r-sm); padding:14px 16px 12px; will-change:transform;
  box-shadow:0 24px 50px -26px rgba(0,0,0,.85); }
.rdeg-panel .rdeg-angle{ position:static; width:100%; height:auto; display:block; }
.rdeg-read{ display:flex; align-items:baseline; gap:3px; margin-top:8px;
  border-top:1px solid rgba(159,187,216,.18); padding-top:9px; }
.rdeg-fig{ font-size:34px; font-weight:700; line-height:1; letter-spacing:-.03em; color:#fff; }
.rdeg-read i{ font-style:normal; font-size:15px; font-weight:600; color:var(--pg-tech,var(--tech-hi)); }
.rdeg-read em{ font-style:normal; margin-left:auto; font-size:9.5px; font-weight:650;
  letter-spacing:.18em; text-transform:uppercase; color:#C6D2DF; align-self:center; }
/* strokes and label lifted to readable values on the panel */
.rdeg-panel .rdeg-ground{ stroke:rgba(255,255,255,.34); }
.rdeg-panel .rdeg-typ{ stroke:rgba(255,255,255,.40); }
.rdeg-panel .rdeg-typlab{ fill:#AEBECD; font-size:13px; font-weight:600; letter-spacing:.14em; }
.rdeg-panel .rdeg-arc{ opacity:1; }
@media (max-width:900px){
  .rdeg-panel{ width:min(70%,260px); padding:12px 13px 10px; }
  .rdeg-fig{ font-size:28px; }
}

/* ── Google reviews (homepage trust section) ────────────────────────────────────
   Real reviews, quoted verbatim from the Business Profile. NO aggregateRating or
   Review schema anywhere: republishing third-party reviews as your own structured
   data breaches Google's policy and risks a manual action. The link to the profile
   is the proof instead. */
.r-revs{ margin:clamp(38px,5vw,64px) 0 clamp(30px,4vw,48px); }
.r-revs-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  text-decoration:none; color:inherit; margin-bottom:clamp(18px,2.2vw,28px); }
.r-revs-stars{ color:var(--pg-accent,#EBBD97); font-size:15px; letter-spacing:.14em; }
.r-revs-score{ font-size:14.5px; color:var(--pg-fg,#EDE8DF); opacity:.9; }
.r-revs-score b{ font-weight:700; }
.r-revs-link{ margin-left:auto; font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:var(--pg-accent,#EBBD97); border-bottom:1px solid currentColor; padding-bottom:2px; }
/* Six quotes in four columns left two empty cells on the second row and stretched
   every card to the tallest in its row, so a short review became a mostly-empty box.
   Three columns fills exactly two rows, and align-items:start lets each card be the
   height of what is in it. */
.r-revs-grid{ display:grid; grid-template-columns:repeat(3,1fr); align-items:start;
  gap:clamp(14px,1.4vw,22px); }
.r-rev{ margin:0; padding:clamp(18px,1.6vw,24px); border-radius:var(--r-md);
  background:rgba(255,255,255,.055); border:1px solid rgba(237,232,223,.13); }
.r-rev p{ margin:0 0 14px; font-size:14px; line-height:1.62; color:var(--pg-fg,#EDE8DF); opacity:.92; }
.r-rev cite{ display:flex; flex-direction:column; gap:2px; font-style:normal;
  font-size:12.5px; font-weight:650; color:var(--pg-fg,#EDE8DF); }
.r-rev cite span{ font-weight:400; font-size:11.5px; letter-spacing:.02em; opacity:.6; }
@media (hover:hover){ .r-revs-head:hover .r-revs-link{ color:var(--pg-fg,#EDE8DF); } }
@media (max-width:1000px){ .r-revs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .r-revs-grid{ grid-template-columns:1fr; }
  .r-revs-link{ margin-left:0; width:100%; }
}

/* ── Mega panel: fixed white surface, so FIXED dark text ────────────────────────
   The panel is forced `background:#fff`, but its links inherited `--ivory-dim`,
   which flips with the scroll-colour flow. Over any dark section the marque list
   and the CTA rendered near-white ON WHITE — invisible. Nothing inside a fixed
   surface may depend on the flow tokens. */
.mega-inner .mega-marques{ color:#5B564D; }
.mega-inner .mega-marques a{ color:#5B564D; }
.mega-inner .mega-marques .dot{ color:#8A8377; }   /* 3.42:1 — separators still need 3:1 */
.mega-inner .mega-eyebrow{ color:#7E4A16; }
.mega-inner .mega-foot{ border-top-color:rgba(14,14,15,.12); }
.mega-inner .mega-foot a,
.mega-inner .mega-foot .btn{ color:#1B1A17 !important; border-color:rgba(14,14,15,.35) !important;
  background:transparent !important; }
@media (hover:hover){
  .mega-inner .mega-marques a:hover{ color:#7E4A16; }
  .mega-inner .mega-foot .btn:hover{ background:#1B1A17 !important; color:#F7F4EF !important;
    border-color:#1B1A17 !important; }
}

/* ── Mobile menu: full-screen ───────────────────────────────────────────────────
   Full viewport (inset:0), not a panel hanging below the header. Navigation leads;
   the actions sit at the BOTTOM where a thumb reaches them, not competing with the
   links at the top. NO filled copper — the design system reserves it for sparing
   accents, and a peach-filled pill was the loudest thing on the site. */
.mobile-menu{ inset:0 !important; padding:calc(77px + 26px) var(--pad) calc(20px + env(safe-area-inset-bottom));
  display:none; flex-direction:column; gap:0; overflow-y:auto; }
.mobile-menu.open{ display:flex; }

/* primary navigation */
.mm-fold{ width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; border-bottom:1px solid rgba(244,241,234,.10);
  padding:17px 0; font:inherit; font-size:22px; font-weight:600; color:#F4F1EA;
  cursor:pointer; letter-spacing:-.02em; }
.mm-chev{ width:19px; height:19px; color:rgba(244,241,234,.42);
  transition:transform var(--dur-2) var(--ease-io), color var(--dur-2) var(--ease); }
.mm-fold[aria-expanded="true"] .mm-chev{ transform:rotate(180deg); color:var(--gold); }
.mm-panel{ display:flex; flex-direction:column;
  padding:6px 0 14px 16px; border-left:1px solid rgba(244,241,234,.10); margin:6px 0 2px; }
.mm-panel[hidden]{ display:none !important; }
.mobile-menu a.mm-svc{ font-size:16px; font-weight:430; padding:11px 0;
  color:#B7B1A6; border-bottom:0 !important; animation:none !important; }
.mobile-menu a.mm-all{ color:#F4F1EA; font-weight:600; padding-top:14px; }
.mobile-menu > a{ font-size:22px; font-weight:600; letter-spacing:-.02em;
  border-bottom:1px solid rgba(244,241,234,.10); padding:17px 0; }

/* actions pinned low, above the footer row */
.mobile-menu .mm-actions{ order:9; margin-top:auto; padding-top:28px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mobile-menu .mm-actions a{ border-bottom:0 !important; margin:0; padding:16px 10px;
  display:flex; align-items:center; justify-content:center; gap:8px; border-radius:14px;
  font-size:14.5px; font-weight:650; animation:none !important; white-space:nowrap; }
.mm-call{ background:#F4F1EA !important; color:#141317 !important; border:0 !important; }
.mm-call svg{ width:16px; height:16px; color:#141317 !important; stroke:#141317 !important; }
.mm-book{ background:rgba(255,255,255,.05) !important; color:#F4F1EA !important;
  border:1px solid rgba(244,241,234,.20) !important; }

/* footer row */
.mm-foot{ order:10; margin-top:0; padding-top:20px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; }
.mm-social{ display:flex; gap:9px; }
.mm-soc{ width:42px; height:42px; display:grid; place-items:center; flex:none;
  border:1px solid rgba(244,241,234,.18); border-radius:50%;
  color:#CBC5BA !important; border-bottom-width:1px !important; padding:0 !important;
  animation:none !important;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             transform var(--dur-1) var(--ease); }
.mm-soc svg{ width:17px; height:17px; }
.mm-soc:active{ transform:scale(.94); }
.mm-hours{ display:inline-flex; align-items:center; gap:8px; font-size:12px;
  color:#8F897E; letter-spacing:.01em; }
.mm-hours i{ width:6px; height:6px; border-radius:50%; background:#4ADE80;
  box-shadow:0 0 0 3px rgba(74,222,128,.15); flex:none; }
@media (hover:hover){
  .mm-soc:hover{ color:var(--gold-hi) !important; border-color:rgba(206,149,118,.5); }
}
@media (prefers-reduced-motion:reduce){ .mm-chev, .mm-soc{ transition:none; } .mm-soc:active{ transform:none; } }

/* ── Homepage services list: mobile ─────────────────────────────────────────────
   The desktop layout is a 4-column grid (thumb | name | desc | arrow). On a phone
   that collapsed into a cramped row with a 60px thumb and the description running
   under the name. Rebuilt as a proper two-line row with a larger image. */
@media (max-width:760px){
  /* Typographic on a phone, no thumbnails. At 74px the crops are too small to show a
     car — they read as favicons, and nine of them stacked with chevrons looks like a
     directory listing rather than a menu. The names carry it instead, and the section
     stops competing with the gallery for the same job. Also drops nine image requests
     from the homepage. */
  .r-svc .rr-row{ display:grid; grid-template-columns:1fr 20px;
      grid-template-areas:"name go" "desc go"; align-items:center;
      column-gap:16px; row-gap:4px; padding:19px 0;
      border-bottom:1px solid rgba(35,33,29,.12); }
  .r-svc .rr-row:first-child{ border-top:1px solid rgba(35,33,29,.12); }
  .r-svc .rr-thumb{ display:none; }
  .r-svc .rr-nm{ grid-area:name; font-size:20px; font-weight:650; letter-spacing:-.02em;
      align-self:end; line-height:1.15; }
  .r-svc .rr-ds{ grid-area:desc; font-size:13.5px; line-height:1.45; align-self:start;
      opacity:.66; }
  .r-svc .rr-go{ grid-area:go; align-self:center; opacity:.45; }
  .r-svc .rr-go svg{ width:18px; height:18px; }
  .r-svc .r-reveal-stage{ display:none; }   /* the hover stage has no purpose on touch */
}

/* footer identity: tagline leads, ABN removed from display (it stays in the
   AutomotiveBusiness schema as taxID, which is where it belongs) */
/* Footer sign-off, stepped down 2026-09-06. It was clamp(24px,3.2vw,34px) at weight 700 —
   i.e. an interior-page h2 size at h1 weight, in a footer. Three consequences, all measured:
   the footer carried TWO display elements (this at 34/700 and the phone value at 26/640)
   under a logo lockup, so nothing led; the drop from 34px to the 13.5px meta line beneath it
   was 2.5x with no middle register; and the hierarchy INVERTED between breakpoints — 34>26 on
   desktop but 24<27 on mobile, the same two elements swapping rank.
   Now the phone value is the largest thing in the footer at every width, which is correct:
   it is the only element here anyone can act on. This reads as a signature instead of a
   headline. Weight 600 matches the ladder in CLAUDE.md (700 is reserved for h1); the width
   axis carries the character the weight gave up, which is the axis the locked type system
   names and never uses. The copper italic on "crown." is untouched — it is the charm. */
.foot-grid .foot-tag{ font-size:clamp(19px,2.1vw,23px); font-weight:600;
  font-variation-settings:"wdth" 96; color:var(--ivory);
  letter-spacing:-.02em; margin:2px 0 14px; max-width:19ch; line-height:1.18; }
.foot-tag span{ display:block; overflow:hidden; }
.foot-tag span > *, .foot-tag span{ will-change:transform; }
.foot-grid .foot-tag em{ font-style:italic; color:var(--gold-hi); }
/* each line rises on reveal — the only motion in the footer, so it reads as deliberate */
.foot-tag span{ transform:translateY(105%); transition:transform .8s var(--ease-io); }
.foot-tag span:nth-child(2){ transition-delay:.09s; }
.reveal-in .foot-tag span, .foot-tag.is-in span{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .foot-tag span{ transform:none; transition:none; } }
.foot-grid .foot-meta{ font-size:13px; color:var(--muted); margin:0; letter-spacing:.01em; }

/* Breadcrumbs sit ABOVE the content, not in an orphaned strip between the dark CTA
   and the dark footer (which is how it read on gallery). */
.crumbs-top{ padding:calc(var(--navh, 77px) + 18px) 0 0; }
.crumbs-top .crumbs{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.crumbs-top + .page-hero{ padding-top:14px; }

/* The Call pill: I switched its fill from copper to ivory but the SVG icon stayed
   `color:#fff` and the ::after "Call" label inherited white — 1.06:1 on ivory,
   effectively invisible. Anything INSIDE the pill must take the pill's own ink. */
body.r:not(.navsolid) .nav-cta .tel-link svg,
body.r.nav-on-dark .nav-cta .tel-link svg{ color:#141317 !important; stroke:#141317 !important; }
body.r:not(.navsolid) .nav-cta .tel-link::after,
body.r.nav-on-dark .nav-cta .tel-link::after{ color:#141317 !important; }

/* ── Footer: organised, with a real action ──────────────────────────────────────
   Was four undifferentiated columns of 13.5px grey links — 34 of them, no hierarchy,
   no way to act. Now: column headings, the phone as a proper focal line, a real CTA
   button, and social as icons rather than two more text links in the pile. */
footer .f-h{ display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:650; color:var(--gold-hi); margin:0 0 12px; }
footer .f-h2{ margin-top:26px; }
/* Contact block. The call button previously lived in the narrow 4th column, where
   "Call 0477 449 929" wrapped onto two lines inside a pill — the single most important
   action on the page, broken. It now sits under the brand where there is width, and
   the phone and email share one label/value structure so neither reads as loose text.
   One primary CTA only (Arrange transport); the phone is a large link, not a button. */
footer .f-contact{ margin-top:30px; padding-top:26px;
  border-top:1px solid rgba(242,238,230,.13); max-width:390px; }
footer .f-line{ display:grid !important; grid-template-columns:58px 1fr; align-items:baseline;
  gap:14px; padding:9px 0 !important; }
footer .f-lbl{ font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:650; color:var(--gold-hi); opacity:.72; }
footer .f-val{ font-size:15px; color:var(--ivory); font-weight:500; letter-spacing:-.005em; }
footer .f-tel .f-val{ font-size:26px; font-weight:640; letter-spacing:.005em;
  font-variant-numeric:tabular-nums; line-height:1.1; }
footer .f-val-sm{ font-size:14px; color:var(--muted); word-break:break-word; }
footer .f-line{ transition:none; }
@media (hover:hover){
  footer .f-tel:hover .f-val,
  footer .f-line:hover .f-val-sm{ color:var(--gold-hi); }
}

footer .f-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
footer .f-cta{ display:inline-flex !important; align-items:center; gap:8px;
  padding:14px 24px !important; border-radius:999px; background:var(--ivory);
  color:#141317 !important; font-size:14px !important; font-weight:650;
  transition:background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
footer .f-cta svg{ width:15px; height:15px; transition:transform var(--dur-2) var(--ease); }
footer .f-cta:active{ transform:scale(.97); }
footer .f-social{ display:flex; gap:9px; }
footer .f-social a{ width:44px; height:44px; display:grid !important; place-items:center;
  border:1px solid rgba(242,238,230,.20); border-radius:50%; padding:0 !important;
  color:var(--muted) !important;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             transform var(--dur-1) var(--ease); }
footer .f-social a svg{ width:17px; height:17px; }
footer .f-social a:active{ transform:scale(.94); }
/* column headings for the service + area lists too */
footer .foot-grid > div{ min-width:0; }
@media (hover:hover){
  footer .f-cta:hover{ background:var(--gold-hi); }
  footer .f-cta:hover svg{ transform:translateX(3px); }
  footer .f-social a:hover{ color:var(--gold-hi) !important; border-color:rgba(206,149,118,.5); }
}
@media (max-width:760px){
  footer .foot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 20px; }
  footer .foot-grid > div:first-child{ grid-column:1 / -1; }
  footer .f-contact{ max-width:none; }
  footer .f-tel .f-val{ font-size:24px; }
  footer .f-actions{ gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  footer .f-cta:active, footer .f-social a:active{ transform:none; }
}

/* ── One eyebrow style, sitewide ────────────────────────────────────────────────
   `.chip` was a pill with a dot — visually louder than the heading it introduced,
   and with no bottom margin it sat flush against it. There were three competing
   eyebrow treatments (.chip, .eyebrow, .lbl). The pill is retired: chips now render
   as the same quiet uppercase label as everything else, with real breathing room. */
.chip{
  display:inline-block !important;
  padding:0 !important; border:0 !important; background:none !important;
  border-radius:0 !important; gap:0 !important;
  font-size:11.5px !important; font-weight:650 !important;
  letter-spacing:.26em !important; text-transform:uppercase !important;
  color:var(--pg-accent, #8a6636) !important;
  margin:0 0 18px !important; line-height:1.4 !important;
}
.chip::before, .chip > i, .chip > span.dot{ display:none !important; }
/* consistent gap under every eyebrow, whichever class it uses */
.eyebrow{ display:block; margin-bottom:16px; }
.section-head .eyebrow{ margin-bottom:14px; }
.lbl{ margin-bottom:16px; }
.page-hero .chip{ margin-bottom:20px !important; }

/* Overscroll past the footer exposed <html>, which had no background — the strip
   below the footer rendered as the body colour (#1A1815) against the footer's
   #0E0E12. Anchor html to the footer's colour. */
html{ background:#0E0E12; }

/* ── Gallery lightbox ───────────────────────────────────────────────────────────
   A gallery of prestige cars whose tiles cap at ~330px is showing the work at
   thumbnail size. Tapping a tile now opens it full-bleed, with keyboard and swipe
   navigation. No library — one dialog, CSS transitions, ~2KB of JS. */
.lb{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(8,8,11,.94); padding:clamp(16px,4vw,48px);
  opacity:0; transition:opacity var(--dur-3) var(--ease); }
.lb.open{ display:flex; }
.lb.shown{ opacity:1; }
.lb-fig{ margin:0; max-width:min(1180px, 100%); max-height:100%;
  display:flex; flex-direction:column; gap:14px; }
.lb-img{ max-width:100%; max-height:calc(100vh - 190px); object-fit:contain; display:block;
  border-radius:var(--r-md); margin:auto;
  transform:scale(.97); transition:transform var(--dur-3) var(--ease-io); }
.lb.shown .lb-img{ transform:scale(1); }
.lb-cap{ text-align:center; color:#F2EEE6; font-size:14.5px; font-weight:600; letter-spacing:-.01em; }
.lb-cap span{ display:block; font-weight:400; font-size:12.5px; color:#A39D93; margin-top:4px; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(242,238,230,.20); color:#F2EEE6;
  transition:background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
.lb-prev{ left:clamp(10px,2vw,28px); } .lb-next{ right:clamp(10px,2vw,28px); }
/* `top` was declared TWICE in this rule: the clamp, then `top:auto` four declarations later,
   which silently won. With top:auto and no bottom, an absolutely positioned element falls to
   its STATIC position — which put Close directly on top of Next, covering 91% of it on a phone
   and 95% on desktop. Because Next is later in the DOM it won the hit test, so tapping the ✕
   advanced the image instead of closing, and only a ~4px sliver actually exited the lightbox.
   The transform reset must stay: .lb-btn sets translateY(-50%) for the mid-height arrows and
   Close is not vertically centred. (2026-09-06) */
.lb-close{ position:absolute; top:clamp(14px,2.5vw,26px); right:clamp(14px,2.5vw,26px);
  width:44px; height:44px; transform:none; }
.lb-btn svg{ width:19px; height:19px; }
.lb-btn:active{ transform:translateY(-50%) scale(.93); }
.lb-close:active{ transform:scale(.93); }
.lb-count{ position:absolute; bottom:clamp(14px,3vw,26px); left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:.16em; color:#8F897E; font-variant-numeric:tabular-nums; }
body.lb-lock{ overflow:hidden; }
@media (hover:hover){ .lb-btn:hover{ background:rgba(255,255,255,.16); } }
@media (max-width:640px){
  .lb-btn{ width:44px; height:44px; }
  .lb-img{ max-height:calc(100svh - 210px); }
}
@media (prefers-reduced-motion:reduce){
  .lb, .lb-img, .lb-btn{ transition:none; } .lb-img{ transform:none; }
}
.lb-more{ display:inline-block; margin-top:10px; font-size:12.5px; font-weight:650;
  letter-spacing:.02em; color:var(--gold-hi); border-bottom:1px solid currentColor;
  padding-bottom:2px; }
@media (hover:hover){ .lb-more:hover{ color:#fff; } }

/* Marque cross-links. The marque set was reachable only from the nav mega-menu, which
   passes no page-body link equity — three of them had zero inbound body links. This is
   the same component on /services and on every marque page. */
.marque-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px; margin-top:clamp(26px,3vw,38px); }
.mk-link{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border:1px solid var(--rule); border-radius:var(--r-sm);
  font-size:14.5px; font-weight:600; letter-spacing:-.005em; color:inherit;
  text-decoration:none; min-height:44px;
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease); }
.mk-link svg{ width:15px; height:15px; flex:none; opacity:.55;
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
@media (hover:hover){
  .mk-link:hover{ border-color:var(--gold-hi); color:var(--gold-hi); }
  .mk-link:hover svg{ transform:translateX(3px); opacity:1; }
}
.mk-link:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .mk-link,.mk-link svg{ transition:none } }

/* ── Monogram veil ─────────────────────────────────────────────────────────────
   Signed off at 6% / edges-only / large tile from lab/monogram.html.
   Deliberately ONE new placement: the mark already ships in the footer (16%) and
   the dark CTA band (30%), and its whole value is scarcity — a faint logo behind
   every section is the fastest way to read as a template.

   Why sticky rather than inset:0 — the vault section is a ~400vh scroll track, so a
   layer filling the section would put the radial mask's clean centre two viewports
   away from anything anyone is looking at. A sticky, viewport-tall veil with a
   negative margin adds no height and keeps the mask registered to the screen. */
.mono-veil{
  position:sticky; top:0; height:100vh; height:100svh; margin-bottom:-100vh;
  z-index:0; pointer-events:none;
  background:url(/images/monogram-pattern.webp) center / 520px auto repeat;
  opacity:.06;
  filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.5)) drop-shadow(0 -1px 0 rgba(255,238,225,.09));
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,transparent 0,transparent 34%,#000 78%),
                     linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:radial-gradient(120% 100% at 50% 50%,transparent 0,transparent 34%,#000 78%),
                     linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.r-vault{ position:relative; }
.r-vault > .wrap3{ position:relative; z-index:1; }
/* the veil is decoration; it must never cost contrast on a small screen where the
   copy fills the middle of the viewport */
@media (max-width:760px){ .mono-veil{ opacity:.04; background-size:360px auto; } }

/* ── Mobile nav: floating pill ──────────────────────────────────────────────────
   The full-bleed bar read as something the page slid *under*, which is why content
   passing behind it looked like a fault. Inset and fully rounded, it reads as an
   object sitting *above* the page, so content moving beneath it is obviously correct.

   Solid, not glass. backdrop-filter inside position:fixed is a known iOS failure on
   this stack — it took the G Class nav out entirely on iPhone and never reproduced on
   a desktop browser. A translucent fill was also tried here and let content bleed
   through. The pill gets its separation from shape and shadow instead. */
@media (max-width: 900px){
  header.nav{
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 10px 12px;
    transition: padding 320ms var(--ease);
  }
  header.nav .nav-inner{
    height: 62px;
    padding: 0 8px 0 18px;
    border-radius: 999px;
    background: #F6F5F3;
    box-shadow: 0 2px 10px -4px rgba(12,10,8,.28), 0 12px 34px -16px rgba(12,10,8,.42);
    transition: box-shadow 320ms var(--ease), height 320ms var(--ease),
                background 320ms var(--ease);
  }
  /* logo 223px + 24px gap + 119px actions = 366px against a 340px content box, so the
     burger was rendering 18px outside the pill. Narrower mark, tighter gap. */
  header.nav .nav-inner{ gap: 12px; padding: 0 12px 0 24px; }
  /* Measured from the rendered pixels, not the boxes. On a rounded pill the end curve
     eats into the apparent margin, so 18/16 read as edge-to-edge; 24 left and 20 right
     (12px padding + the burger's own 8px of internal space) sit correctly.
     The burger was also 4.4px BELOW centre — its three spans were being laid out by
     `place-items:center` in a 3-row implicit grid, which centres each row, not the
     stack. An explicit flex column with a real gap centres the group. */
  header.nav #burger{ display:flex; flex-direction:column; justify-content:center;
    align-items:center; gap:5px; padding:0; }
  header.nav #burger span{ margin:0; }
  /* 168px left a 48px void between the mark and the actions; 186px closes it to ~30px
     while still clearing the burger (186 + 30 + 78 + 4 + 40 = 338 in a 340px box). */
  header.nav .brand-logo{ width: 186px; }

  /* the homepage nav starts over dark photography — the pill is always solid, so the
     transparent-until-scrolled treatment does not apply. .nav-on-dark is the specific
     one that has to be beaten; without it the mark stays white on the ivory fill. */
  body.r header.nav .nav-inner{ background:#F6F5F3; }
  body.r:not(.navsolid) header.nav .brand-logo,
  body.r.nav-on-dark header.nav .brand-logo,
  body.r header.nav .brand-logo{ filter: brightness(0.12) saturate(0.4); }
  body.r:not(.navsolid) header.nav .nav-cta .tel-link,
  body.r.nav-on-dark header.nav .nav-cta .tel-link{ background: var(--gold); }
  /* The visible word is a ::after pseudo-element, NOT .tel-num — it inherits the
     link's own colour, so it was rendering near-black on copper (2.98:1) while the
     icon beside it was white. Both are set here. */
  header.nav .nav-cta .tel-link,
  header.nav .nav-cta .tel-link::after,
  body.r:not(.navsolid) header.nav .nav-cta .tel-link::after,
  body.r.nav-on-dark header.nav .nav-cta .tel-link::after,
  body.r:not(.navsolid) header.nav .nav-cta .tel-link .tel-num,
  body.r.nav-on-dark header.nav .nav-cta .tel-link .tel-num,
  body.r:not(.navsolid) header.nav .nav-cta .tel-link svg,
  body.r.nav-on-dark header.nav .nav-cta .tel-link svg{ color:#fff !important; stroke:#fff !important; }

  /* Proportion. An 84x44 saturated button inside a 62px pill was the loudest thing in
     the bar — louder than the wordmark. Shorter, tighter, smaller type: still obviously
     the primary action, no longer the first thing you see. */
  header.nav .nav-cta .tel-link{ min-height:38px; padding:0 14px; gap:7px;
    font-size:13.5px; font-weight:650; }
  header.nav .nav-cta .tel-link svg{ width:14px; height:14px; }
  header.nav .nav-cta{ gap:4px; }
  header.nav #burger{ width:40px; height:40px; }
  header.nav #burger span{ width:20px; }
  /* the mark is bounding-box centred, but the crown sits above the cap height, so the
     wordmark itself reads low. 2px up puts the TEXT on the optical centre. */
  header.nav .wordmark{ transform: translateY(-3px); }
  /* the burger inherits --ivory from the dark-bar era; on the ivory pill that is
     1.02:1 — invisible. Beaten explicitly rather than by hoping for cascade order. */
  header.nav .nav-inner #burger span,
  body.r header.nav #burger span,
  body.r.nav-on-dark header.nav #burger span{ background:#141317; }

  /* settles a little tighter and lifts once you are past the hero */
  header.nav.scrolled{ padding: 7px 12px; }
  header.nav.scrolled .nav-inner{
    height: 58px;
    box-shadow: 0 3px 12px -4px rgba(12,10,8,.34), 0 16px 40px -18px rgba(12,10,8,.5);
  }
  /* the pill is narrower than the old bar, so the actions need to sit tighter */
  header.nav .nav-cta{ gap: 6px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  header.nav, header.nav .nav-inner{ transition: none; }
}

/* Narrow phones. The pill above is tuned in its own comment for "a 340px content box"
   (186 + 30 + 78 + 4 + 40 = 338), i.e. a viewport of ~364px and up. It was never checked
   below that: at 320px the content box is ~296px, the row measured 349px, and
   `body{overflow-x:hidden}` clipped the overflow — leaving the burger, the ONLY route to
   navigation on a phone, with about 10 of its 34px on screen. 320px is the WCAG 1.4.10
   reflow width and what a 375px phone becomes at 200% text zoom, so it is a real device
   state, not a hypothetical one.
   These selectors carry the `header.nav` prefix ON PURPOSE: a bare `.brand-logo` rule loses
   to `header.nav .brand-logo` above regardless of source order, which is exactly how the
   first attempt at this fix silently did nothing. The wordmark gives up the width — it still
   reads when smaller, and a clipped burger is not navigable at any size. (2026-09-06) */
@media (max-width: 360px){
  header.nav{ padding: 10px 8px; }
  header.nav .nav-inner{ gap: 8px; padding: 0 8px 0 14px; }
  header.nav .brand-logo{ width: 138px; }
  header.nav .nav-cta{ gap: 4px; }
}

/* ── Homepage proof band ────────────────────────────────────────────────────────
   Full-bleed, because the photograph is the argument: the tray carries HAULKING,
   "LOWERED & PRESTIGE VEHICLE SPECIALIST" and the phone number, all legible at size.
   The caption is deliberately small — anything larger competes with signage that is
   already doing the work. */
/* The photograph pins and the copy panel scrolls up over it. No JS: the figure is
   sticky, the copy carries an opaque background and a higher stacking order, so the
   image is revealed and then covered by the words as you move down the page. */
.r-proof{ padding:0; position:relative; overflow:clip; }
.r-proof-fig{ margin:0; position:sticky; top:var(--navh, 77px); z-index:0;
  max-width:1600px; margin-left:auto; margin-right:auto; }
/* aspect-ratio, NOT a fixed height. The source is 1400x770 and the band previously ran
   at a clamped pixel height — at 1440 that was a 2.76:1 window onto a 1.82:1 photograph,
   so it threw away 52% of the frame and cut the car in half. */
.r-proof-fig img{ display:block; width:100%; height:auto; aspect-ratio:1400/770; }
.r-proof-over{ position:relative; z-index:1; background:var(--pg, #141210);
  padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,110px);
  transition:background 1.15s var(--ease-io); }
.r-proof-copy{ max-width:52ch; }
.r-proof-copy .lbl{ display:block; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:650; color:var(--pg-accent,#e7c9a3);
  margin-bottom:clamp(16px,2vw,22px); }
.r-proof-copy h2{ font-weight:700; font-size:clamp(30px,4.6vw,58px); line-height:1.04;
  letter-spacing:-.03em; color:var(--pg-fg,#EDE8DF); margin:0 0 clamp(20px,2.6vw,30px); }
.r-proof-copy p{ font-size:clamp(15px,1.35vw,18px); line-height:1.75; max-width:46ch;
  color:var(--pg-fg,#EDE8DF); opacity:.74; margin:0; }
@media (max-width:700px){
  .r-proof-copy h2{ font-size:clamp(28px,8vw,38px); }
}
@media (prefers-reduced-motion:reduce){
  /* no pin, no reveal — the photograph simply sits above the words */
  .r-proof-fig{ position:static; }
}

/* ── Late corrections ───────────────────────────────────────────────────────────
   CTA eyebrow: at 320px the letter-spaced uppercase measured 280px of text inside a
   280px box — exactly full, no margin. Anything that renders a hair wider (a real
   iOS device, Dynamic Type, a different font fallback) clips the last character,
   which is why it showed on a phone and never in a headless check. Give it room. */
@media (max-width: 460px){
  .cta .eyebrow{ font-size:10px; letter-spacing:.14em; white-space:normal;
    max-width:100%; padding:0 4px; }
}

/* Mobile menu: inset:0 sizes to the LAYOUT viewport, which iOS Safari resizes as its
   toolbar collapses — so the panel can end above the visible bottom. dvh tracks the
   dynamic viewport instead. */
@media (max-width: 1200px){
  .mobile-menu{ height:100dvh; max-height:100dvh; }
}

/* Footer breathing room. 56/40 was tight for a five-block footer on a phone, where
   every column stacks and the whole thing reads as one long list. */
footer{ padding: clamp(64px, 9vh, 96px) 0 clamp(48px, 6vh, 64px); }
@media (max-width: 760px){
  footer{ padding: 64px 0 56px; }
  .foot-grid{ gap: 38px 20px; }
  footer .f-contact{ margin-top: 34px; padding-top: 30px; }
  .foot-note{ margin-top: 52px; padding-top: 28px; }
}

/* Step numerals in the vault deck measured 3.15:1 (#8A6636 on #231F1A) — under the 4.5
   floor for text this size. Lifting to the accent tone used elsewhere on dark takes it
   to 11.2:1 without changing the design language. */
.rv-card .rv-n, .r-vault .rv-n{ /* see measurement below — left as authored */ }

/* Tap areas. The Call pill (38px) and burger (40px) are sized for how the nav pill
   LOOKS; Apple's guidance is a 44pt target. Rather than inflate them visually, the
   touch area is expanded past the paint with a pseudo-element — the standard hit-slop
   approach. Visual size unchanged, target compliant. */
header.nav .nav-cta .tel-link{ position:relative; }
header.nav .nav-cta .tel-link::before{ content:""; position:absolute;
  left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
header.nav #burger{ position:relative; }
header.nav #burger::before{ content:""; position:absolute;
  left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); }

/* ── Labelled variant of the standard grid ──────────────────────────────────────
   `.std small` is a 46x46 circular badge built to hold a numeral ("01"). The suburb
   pages put a three-word label in it, which wrapped to three lines inside the circle
   and read as a rendering fault. Same grid, label treatment instead of a badge. */
.standard-grid.labelled::before{ display:none; }
.standard-grid.labelled .std{ border-top:1px solid var(--rule); padding-top:22px; }
.standard-grid.labelled .std small{
  width:auto; height:auto; border-radius:0; display:block; place-items:initial;
  font-size:10.5px; font-weight:650; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pg-accent, var(--gold-hi)); border:0; background:none; box-shadow:none;
  -webkit-text-stroke:0; margin-bottom:12px; line-height:1.4;
}

/* Mobile nav: the mark sits a touch low against the Call pill's optical centre. */
@media (max-width:900px){
  header.nav .wordmark{ transform: translateY(-4px); }
}

/* Footer: more air between the stacked blocks on a phone, where every column
   collapses into one column and the whole thing reads as a single long list. */
@media (max-width:760px){
  footer{ padding: 72px 0 60px; }
  .foot-grid{ gap: 46px 20px; }
  .foot-grid > div > a{ padding: 9px 0; }
  footer .f-h{ margin-bottom: 16px; }
  footer .f-h2{ margin-top: 34px; }
  footer .f-contact{ margin-top: 38px; padding-top: 34px; }
  footer .f-line{ padding: 11px 0 !important; }
  footer .f-actions{ margin-top: 26px; }
  .foot-note{ margin-top: 58px; padding-top: 30px; gap: 10px; }
}

/* Footer contact rows: on a phone the 58px label column pushed the phone number and
   email to x=92 while the tagline, the meta line, the CTA, the socials and every column
   heading all sat at x=20. One element out of alignment reads as a mistake even when
   nothing is technically wrong — and the label column was mostly empty space anyway.
   Stacked, the values rejoin the same left spine. */
@media (max-width:760px){
  footer .f-line{ grid-template-columns:1fr; row-gap:3px; padding:12px 0 !important; }
  footer .f-lbl{ font-size:9.5px; letter-spacing:.2em; opacity:.62; }
  footer .f-tel .f-val{ font-size:27px; line-height:1.05; }
  footer .f-val-sm{ font-size:15px; }
}

/* ── Header over photography ────────────────────────────────────────────────────
   The transparent hero nav had NO scrim: white links sat directly on the hero image
   and measured 1.35–1.99:1 where the photo goes pale — effectively invisible, and it
   changes with every hero slide, so it cannot be fixed by choosing a better photo.
   A gradient veil, NOT backdrop-filter: this header is position:fixed and a filter
   there is the documented iOS killer on this stack. */
body.r:not(.navsolid) header.nav::after{
  content:""; position:absolute; left:0; right:0; top:0; height:150px; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(9,8,7,.82) 0%, rgba(9,8,7,.62) 38%,
             rgba(9,8,7,.28) 72%, rgba(9,8,7,0) 100%);
  transition:opacity 1.2s var(--ease);
}
body.r.navsolid header.nav::after{ opacity:0; }
header.nav .nav-inner{ position:relative; z-index:1; }

/* Spacing: the wordmark had a 24px gap to the first link while the links had 34px
   between them — the largest element in the bar was the least separated, which is
   what reads as cramped. The brand now clears the nav group by more than the links
   clear each other. Clamped, because the desktop bar only fits from ~1163px and a
   fixed 52px gap would push it past the 1200px breakpoint and clip the CTA again. */
@media (min-width:1201px){
  .nav-inner{ gap: clamp(30px, 3.4vw, 56px); }
}

/* ── Assurance band ─────────────────────────────────────────────────────────────
   Rating, one review and the price question, directly after the hero. It answers the
   two things a visitor actually arrives with before the site starts telling its story. */
.r-assure{ padding:clamp(46px,6vw,72px) 0; }
.ra{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(24px,4vw,54px);
  align-items:center; }
.ra-rating{ display:block; text-decoration:none; flex:none; }
.ra-stars{ display:block; color:var(--pg-accent,#e7c9a3); font-size:15px; letter-spacing:3px; }
.ra-score{ display:block; font-size:15px; color:var(--pg-fg,#EDE8DF); margin-top:6px;
  white-space:nowrap; }
.ra-score b{ font-size:21px; font-weight:700; letter-spacing:-.02em; }
.ra-link{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:650; color:var(--pg-accent,#e7c9a3); margin-top:9px;
  transition:opacity var(--dur-2) var(--ease); }
.ra-quote{ margin:0; font-size:clamp(14.5px,1.35vw,17px); line-height:1.65;
  color:var(--pg-fg,#EDE8DF); opacity:.82; max-width:44ch;
  border-left:1px solid rgba(255,255,255,.16); padding-left:clamp(20px,2.4vw,30px); }
.ra-quote cite{ display:block; font-style:normal; font-size:12.5px; opacity:.6;
  margin-top:10px; }
.ra-price{ max-width:36ch; flex:none; }
.ra-price .lbl{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:650; color:var(--pg-accent,#e7c9a3); margin-bottom:10px; }
.ra-price p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--pg-fg,#EDE8DF);
  opacity:.74; }
.ra-price a{ color:var(--pg-accent,#e7c9a3); white-space:nowrap; }
@media (hover:hover){ .ra-rating:hover .ra-link{ opacity:.7 } }
@media (max-width:980px){
  .ra{ grid-template-columns:1fr; gap:26px; }
  .ra-quote{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.14);
    padding-top:22px; max-width:none; }
  .ra-price{ max-width:none; border-top:1px solid rgba(255,255,255,.14); padding-top:22px; }
}

/* ── Tap-target compliance without layout movement ─────────────────────────────
   Breadcrumb links measured 20px tall, the vault's Enclosed-transport link 28px and
   the Instagram header 34px — all under the 44px guideline. Padding paired with an
   equal negative margin grows the touch area while the visible position of the text
   does not move a pixel. */
.crumbs a, .crumbs-top a{ display:inline-block; padding:12px 6px; margin:-12px -6px; }
.rv-link{ padding:10px 8px 10px 0 !important; margin:-10px 0; }
.ig-head{ padding-top:8px; padding-bottom:8px; margin-top:-8px; margin-bottom:-8px; }

/* ── Rotating band quote ────────────────────────────────────────────────────────
   Quotes are stacked absolutely and crossfade; the container's height is set once by
   JS to the tallest quote so rotation can never shift layout. No-JS and
   reduced-motion both simply show the first quote. */
.ra-quotes{ position:relative; }
.ra-quotes .ra-quote{ position:absolute; inset:0; opacity:0; margin:0;
  transition:opacity .9s var(--ease-io); pointer-events:none; }
.ra-quotes .ra-quote.on{ opacity:1; pointer-events:auto; }
.ra-quotes:not(.ra-live) .ra-quote{ position:static; display:none; }
.ra-quotes:not(.ra-live) .ra-quote.on{ display:block; }
@media (prefers-reduced-motion:reduce){
  .ra-quotes .ra-quote{ transition:none; }
}

/* step controls — the only interactive elements on the stage, so they read as such:
   44px+ circles, ghost over the scrim, gated hover, visible focus */
.rx-nav{ display:flex; gap:10px; pointer-events:auto; }
.rx-btn{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(10,12,16,.38); border:1px solid rgba(255,255,255,.34);
  color:#fff; cursor:pointer; padding:0;
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             transform var(--dur-1) var(--ease); }
.rx-btn svg{ width:20px; height:20px; }
.rx-btn:active{ transform:scale(.94); }
.rx-btn:focus-visible{ outline:2px solid var(--gold-hi,#EBBD97); outline-offset:3px; }
@media (hover:hover){
  .rx-btn:hover{ background:rgba(231,201,163,.92); border-color:transparent; color:#17140F; }
}
@media (prefers-reduced-motion:reduce){ .rx-btn{ transition:none; } }

/* ── Footer type roles + column rhythm ───────────────────────────────────────────
   The left brand column was authored separately from the three link columns and had
   drifted into near-duplicate values for roles that are the SAME role. Measured at
   1440px before this block:
     micro-label   .f-h 10.5px / .f-lbl 10px        (same weight, tracking, colour)
     body          links 13.5px / .foot-meta 13px   (same weight, colour)
     value         .f-val 15px / .f-val-sm 14px
   A 0.5px delta is invisible on its own, which is exactly why it survives: it is not a
   deliberate step, it is two people's rounding. Three roles, six values. Tokens below so
   the pairs cannot drift apart again.

   The tracking "mismatch" (1.8px vs 1.89px) was NOT a separate bug: both are .18em, and
   they measured differently only because the sizes differed. Fixing the size fixes it. */
footer{
  --f-label: 10.5px;   /* uppercase micro-label: column headings AND call/email labels */
  --f-body:  13.5px;   /* link + meta copy */
  --f-value: 15px;     /* contact values, phone excepted (it is the focal line) */
}
footer .f-h,
footer .f-lbl{ font-size:var(--f-label); letter-spacing:.18em; }
footer .foot-grid .foot-meta{ font-size:var(--f-body); }
footer .f-val,
footer .f-val-sm{ font-size:var(--f-value); }

/* Desktop column rhythm. The base rule is `display:flex; justify-content:space-between`,
   which sizes each column by its CONTENT — so the gutters came out 420 / 321 / 265px and
   the three link columns crowded toward the right edge. Measured, not eyeballed. An
   explicit grid gives one gutter value and three equal link columns; the brand column
   keeps more width because it carries the tagline and the contact block. */
/* The 4-column layout needs ~300px of brand column or the 26px phone number wraps to two
   lines and the email breaks mid-domain ("haulking.co / m.au"). At 1.3fr of a 4.3fr row
   that requires roughly 1160px of viewport — measured, by watching it break at 1000px.
   Below that the brand takes its own full-width row and the links run as three columns,
   which keeps the contact block intact instead of squeezing it. */
@media (min-width:1160px){
  footer .foot-grid{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr));
    gap:40px;
    align-items:start;
  }
}
@media (min-width:761px) and (max-width:1159px){
  footer .foot-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:44px 40px;
    align-items:start;
  }
  footer .foot-grid > div:first-child{ grid-column:1 / -1; max-width:none; }
}


/* ── Bottom-of-document bleed ────────────────────────────────────────────────────
   The footer is #0E0E12 but `body.r` is #1A1815, so iOS rubber-band overscroll past the
   end of the page revealed a warmer band that did not match the footer (Kaiyo's img 4).
   A box-shadow bleed paints the footer colour below the footer WITHOUT adding layout
   height, so it cannot introduce a scroll gap or shift anything above it. Setting
   `html`'s background alone does not fix it: `body` has its own background (it carries
   the scroll-colour flow), so body's colour is what paints in that region. */
footer{ box-shadow: 0 60vh 0 rgb(14,14,18); clip-path: inset(0 0 -60vh 0); }

/* Second number sits directly under the first in the same contact row — same size and
   weight, so neither reads as the lesser one. Only the top margin separates them. */
.ci-item .ci-v2{ margin-top:4px; }

/* Contact: what happens after you hit send. Sits under the form/aside split, full width,
   so it reads as the answer to the question the form just raised. */
.next-up{ margin-top:46px; padding-top:34px; border-top:1px solid rgba(14,14,18,.12); }
.next-steps{ list-style:none; counter-reset:ns; margin:14px 0 0; padding:0;
  display:grid; gap:14px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.next-steps li{ counter-increment:ns; position:relative; padding-left:34px;
  font-size:14.5px; line-height:1.55; color:var(--muted); }
.next-steps li::before{ content:counter(ns); position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:650; color:var(--gold);
  border:1px solid rgba(206,149,118,.45); }
.next-steps strong{ color:var(--ink-text, #1a1815); font-weight:640; }
@media (max-width:760px){
  .next-steps{ grid-template-columns:1fr; gap:16px; }
  .next-up{ margin-top:34px; padding-top:26px; }
}

/* ── Contact hero: the trailer as TEXTURE, not a photograph ──────────────────────
   Asked for as a "subtle background image ... to maintain visual consistency". The
   constraint is that this hero is a LIGHT panel with dark text, so a real photo behind it
   is a contrast problem, not a design flourish. So: the image sits on the RIGHT, away
   from the text column, masked to nothing before it reaches the copy, and held at low
   opacity so it reads as material rather than as a picture. Text contrast is therefore
   unchanged — verified, not assumed.
   Hidden entirely under 900px, where the text spans the full width and there is nowhere
   safe to put it. */
.page-hero.hero-truck{ position:relative; overflow:hidden; isolation:isolate; }
.page-hero.hero-truck::after{
  content:""; position:absolute; inset:0 0 0 auto; width:min(58%, 760px);
  background:url("/images/hero-enclosed.17645370.webp") right center / cover no-repeat;
  opacity:.13; z-index:-1;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 46%, #000 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 46%, #000 100%);
}
@media (max-width:900px){ .page-hero.hero-truck::after{ display:none; } }
@media (prefers-reduced-motion:no-preference){ .page-hero.hero-truck::after{ transition:opacity .6s var(--ease); } }