/* ============================================================
   Sovereign Motors Corp.
   See design-system/sovereign-motors-corp/MASTER.md
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#070708;
  --ink-2:#0D0D10;
  --ink-3:#141418;
  --ink-4:#1C1C21;

  --gold-300:#E6D9B4;
  --gold-400:#D3B269;
  --gold-500:#C09840;
  --gold-600:#A88038;
  --bronze:#806040;

  --fg:#F4F2ED;
  --fg-muted:#A8A49C;
  --fg-dim:#8A867E;

  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --line-gold:rgba(192,152,64,.32);

  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:180px;

  --container:1320px;
  --gutter:clamp(20px,5vw,64px);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-photo:cubic-bezier(.22,.55,.28,1);  /* gentler; for large imagery */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-micro:180ms; --t-hover:300ms; --t-reveal:800ms; --t-hero:1200ms;

  --font-display:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --nav-h:76px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:-.02em}

/* ---------- 3. Focus ---------- */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--gold-400);
  outline-offset:3px;
  border-radius:2px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold-500);color:var(--ink);
  padding:14px 22px;font-weight:600;
}
.skip:focus{left:var(--gutter);top:12px}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,11vw,var(--s8))}
.section--tight{padding-block:clamp(56px,8vw,var(--s7))}
.grid{display:grid;gap:var(--s4)}
.grid > *{min-width:0}
@media(min-width:900px){
  .g-7-5{grid-template-columns:7fr 5fr;gap:var(--s7)}
  .g-5-7{grid-template-columns:5fr 7fr;gap:var(--s7)}
  .g-8-4{grid-template-columns:8fr 4fr;gap:var(--s6)}
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:600px) and (max-width:899px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 5. Type ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-500);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{
  content:"";width:38px;height:1px;background:var(--gold-500);flex:none;
}
.eyebrow--plain::before{display:none}

.d1{font-size:clamp(2.3rem,5.4vw,4.6rem);font-weight:300;letter-spacing:-.035em}
.d2{font-size:clamp(1.9rem,3.9vw,3.2rem);font-weight:300;letter-spacing:-.03em}
.d3{font-size:clamp(1.5rem,2.7vw,2.25rem);font-weight:400;letter-spacing:-.02em}
.d4{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:500;letter-spacing:-.01em}

.lede{font-size:clamp(1.02rem,1.35vw,1.185rem);line-height:1.66;color:var(--fg-muted);max-width:62ch}
.muted{color:var(--fg-muted)}
.dim{color:var(--fg-dim)}
.gold{color:var(--gold-500)}
.mono-num{font-variant-numeric:tabular-nums}
.max-54{max-width:54ch}
.max-46{max-width:46ch}

/* table header label. NOTE: cannot reuse .eyebrow here - it is display:flex,
   which drops the <th> out of table layout and stacks the header vertically. */
.th{
  font-family:var(--font-display);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-500);
  padding-bottom:14px;white-space:nowrap;
}
.spec-table{width:100%;border-collapse:collapse}
.spec-table thead tr{border-bottom:1px solid var(--line-strong)}
.spec-table tbody tr{border-bottom:1px solid var(--line);
  transition:background var(--t-hover) var(--ease-io)}
.spec-table tbody tr:hover{background:rgba(192,152,64,.045)}
.spec-table td,.spec-table th{padding-block:15px;vertical-align:middle}
.spec-table caption{text-align:left;padding-bottom:var(--s2);
  font-size:12.5px;color:var(--fg-dim)}

/* ---------- 6. Rules ---------- */
.rule{height:1px;background:var(--line);position:relative;border:0}
.rule::before{content:"";position:absolute;inset:0 auto 0 0;width:64px;background:var(--gold-500)}

/* ---------- 7. Buttons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--fg); --btn-bd:var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 30px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:2px;
  font-family:var(--font-display);
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;
  transition:background var(--t-hover) var(--ease-io),
             color var(--t-hover) var(--ease-io),
             border-color var(--t-hover) var(--ease-io),
             transform var(--t-micro) var(--ease-io);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ico{transition:transform var(--t-hover) var(--ease)}
.btn:hover .ico{transform:translateX(4px)}

.btn--gold{--btn-bg:var(--gold-500);--btn-fg:var(--ink);--btn-bd:var(--gold-500);font-weight:600}
.btn--gold:hover{--btn-bg:var(--gold-400);--btn-bd:var(--gold-400)}
.btn--gold:active{--btn-bg:var(--gold-600);--btn-bd:var(--gold-600)}
.btn--ghost:hover{--btn-bd:var(--gold-500);--btn-fg:var(--gold-500)}
.btn--sm{min-height:44px;padding:0 20px;font-size:12px}

/* text link with animated underline */
.tlink{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500);
  padding-block:6px;position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-hover) var(--ease);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink .ico{transition:transform var(--t-hover) var(--ease)}
.tlink:hover .ico{transform:translateX(4px)}

.ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5}

/* ---------- 8. Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background var(--t-hover) var(--ease-io),
             border-color var(--t-hover) var(--ease-io),
             height var(--t-hover) var(--ease-io);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(7,7,8,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  height:64px;
}
.hdr__in{width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:var(--gutter);display:flex;align-items:center;gap:var(--s5)}

.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand__mark{width:38px;height:39px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-display);font-size:19px;font-weight:400;
  letter-spacing:.17em;color:var(--fg);
}
.brand__sub{
  font-family:var(--font-display);font-size:9.5px;font-weight:400;
  letter-spacing:.2em;color:var(--gold-500);text-transform:uppercase;margin-top:4px;
}

.nav{display:none;margin-left:auto;align-items:center;gap:var(--s5)}
@media(min-width:1000px){.nav{display:flex}}
.nav a{
  font-family:var(--font-display);font-size:12.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
  position:relative;padding-block:8px;
  transition:color var(--t-hover) var(--ease-io);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-hover) var(--ease);
}
.nav a:hover{color:var(--fg)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.hdr__cta{display:none}
@media(min-width:1000px){.hdr__cta{display:inline-flex}}

.burger{
  /* Was display:grid + place-items:center. Grid gave each of the three bars its
     OWN ROW, so they spread across the full 48px instead of stacking 5px apart
     and the icon read as three loose lines. Flex column keeps them together;
     the 48px box stays for the tap target. */
  margin-left:auto;width:48px;height:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  transition:border-color var(--t-hover) var(--ease-io);
}
.burger:hover{border-color:var(--gold-500)}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:18px;height:1px;background:var(--fg);
  transition:transform var(--t-hover) var(--ease),opacity var(--t-micro) linear}
/* spacing now comes from the flex gap above, not a margin */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) var(--gutter) var(--s6);
  /* six links plus a button and the address can exceed a short phone screen —
     without this the overflow is simply unreachable */
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-hover) var(--ease-io),visibility var(--t-hover);
}
/* visibility flips instantly on open (it still fades out on close): while it
   transitions from hidden the drawer's links cannot take focus, so site.js's
   focus-the-first-link call was silently ignored and keyboard users stayed
   behind the overlay */
.drawer.is-open{opacity:1;visibility:visible;transition:opacity var(--t-hover) var(--ease-io),visibility 0s}
/* NAV LINKS ONLY. This was `.drawer a`, which also caught the button and the
   email link in .drawer__foot — `.drawer a` (0,1,1) outranks `.tlink` (0,1,0),
   so the address rendered at 2.5rem and ran off the side of every phone. */
.drawer nav a{
  font-family:var(--font-display);font-size:clamp(1.35rem,5.4vw,2.1rem);
  font-weight:300;letter-spacing:-.02em;color:var(--fg);
  padding-block:12px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:18px;
}
/* the entrance animation still applies to everything in the drawer */
.drawer a{opacity:0;transform:translateY(18px)}
.drawer.is-open a{animation:drawerIn .6s var(--ease) forwards}
.drawer a i{
  font-family:var(--font-body);font-style:normal;font-size:11px;
  color:var(--gold-500);letter-spacing:.1em;
}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer__foot{margin-top:var(--s5);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s3)}
.drawer__foot .btn{align-self:stretch}
/* the address is long and set in wide-tracked caps — let it shrink and wrap
   rather than push the drawer sideways */
.drawer__foot .tlink{font-size:clamp(10.5px,3vw,13px);letter-spacing:.1em;
  max-width:100%;word-break:break-word}

/* ---------- 9. Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;contain:paint;transform:translateZ(0)}
.hero__media .kb{position:absolute;inset:0;overflow:hidden}
.hero__media picture{position:absolute;inset:0;display:block}
.hero__media img{width:100%;height:100%;object-fit:cover}

/* Cross-dissolving stills, advanced by JS.
   NOTE 1: this used to be three CSS animations offset by animation-delay. Don't
   go back to that — browsers freeze animation timelines in throttled tabs, and
   the sequence sticks on slide one with playState still reporting "running".
   NOTE 2: fading the outgoing slide out while fading the incoming one in makes
   the composite dip toward the page background mid-transition, which reads as a
   black flash. The outgoing slide therefore stays fully opaque UNDERNEATH while
   the incoming one fades in on top of it. There is never a gap. */
.hero__media .kb{opacity:0;z-index:0}
.hero__media .kb img{transform:scale(1.03)}
.kb-live .hero__media .kb{opacity:0;z-index:0}
.kb-live .hero__media .kb.is-under{opacity:1;z-index:1;transition:none}
.kb-live .hero__media .kb.is-active{
  opacity:1;z-index:2;
  transition:opacity 1500ms var(--ease-io);
}
.kb-live .hero__media .kb.is-instant{transition:none !important}
/* The zoom must stay applied while the slide is fading OUT as well.
   If it is declared only for .is-active, the outgoing slide drops the animation
   the instant the class is removed and snaps from scale(1.12) back to 1.03
   while still fully visible underneath — that is the jitter. Declaring the same
   animation for both states keeps the identical animation-name on the element,
   so it continues rather than restarting. */
.kb-live .hero__media .kb.is-active img,
.kb-live .hero__media .kb.is-under img{animation:kbZoom 9s var(--ease-io) forwards}
@keyframes kbZoom{from{transform:scale(1.02)}to{transform:scale(1.085)}}

/* before JS runs — and if it never does — slide one simply stands */
.hero__media .kb--1{opacity:1}
.no-kb .hero__media .kb img,
.no-kb .hero__media .kb.is-active img{animation:none;transform:none}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(7,7,8,.90) 0%,rgba(7,7,8,.50) 22%,rgba(7,7,8,.30) 46%,rgba(7,7,8,.88) 84%,var(--ink) 100%),
    linear-gradient(90deg,rgba(7,7,8,.93) 0%,rgba(7,7,8,.78) 30%,rgba(7,7,8,.34) 60%,rgba(7,7,8,.06) 100%),
    radial-gradient(120% 80% at 16% 88%,rgba(7,7,8,.80),transparent 64%);
}
.hero__in > .wrap{position:relative}
.hero__in{position:relative;z-index:2;width:100%;flex:1;display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + clamp(24px,5vh,56px));
  padding-bottom:clamp(40px,7vh,84px)}
.hero__title{margin-top:var(--s3)}
.hero__title{line-height:1.02}
.hero__title .ln{display:block;overflow:hidden}
@media(min-width:900px){.hero__title .ln>span{white-space:nowrap}}
.hero__title .ln>span{display:block;transform:translateY(110%);
  animation:lineUp 1.2s var(--ease) forwards}
@keyframes lineUp{to{transform:none}}
.hero__meta{
  margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  align-items:center;
}
.hero__actions{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2)}

.hero__bar{
  position:relative;z-index:2;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(7,7,8,.72),var(--ink));
}
.hero__bar ul{
  max-width:var(--container);margin-inline:auto;padding:var(--s2) var(--gutter);
  display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr);
}
@media(min-width:820px){.hero__bar ul{grid-template-columns:repeat(4,1fr)}}
/* The floating contact button is fixed to the bottom-right of the VIEWPORT, and
   on a phone the stat bar lands right underneath it — the button covered the
   end of "availability confirmed". Reserve a column of clear space on the right
   so the labels wrap instead of disappearing behind it. */
@media(max-width:819px){
  .hero__bar ul{padding-right:calc(var(--gutter) + 76px)}
}
.stat b{
  display:block;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.25rem,1.9vw,1.7rem);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stat > span{
  display:block;margin-top:5px;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-muted);
}
.stat b span{display:inline;margin:0;font:inherit;letter-spacing:inherit;
  text-transform:none;color:inherit}

/* video pause control */
.vidctl{
  position:absolute;right:var(--gutter);bottom:0;z-index:3;
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(7,7,8,.55);border:1px solid var(--line-strong);border-radius:50%;
  cursor:pointer;color:var(--fg);
  transition:border-color var(--t-hover) var(--ease-io),background var(--t-hover) var(--ease-io);
}
.vidctl:hover{border-color:var(--gold-500);background:rgba(7,7,8,.8)}

/* scroll cue */
.cue{
  position:absolute;left:50%;bottom:calc(100% + 20px);transform:translateX(-50%);
  z-index:3;display:none;
}
@media(min-width:900px){.cue{display:block}}
.cue i{display:block;width:1px;height:56px;background:linear-gradient(var(--gold-500),transparent);
  position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--gold-300);
  animation:cueRun 2.4s var(--ease-io) infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.hero .lede{color:var(--fg);text-shadow:0 1px 24px rgba(7,7,8,.55)}
.hero .eyebrow{text-shadow:0 1px 16px rgba(7,7,8,.7)}
.hero__title{text-shadow:0 2px 40px rgba(7,7,8,.5)}

/* --- hero, small screens --- */
@media(max-width:600px){
  /* the leading rule + long label wrap badly at this width */
  .hero .eyebrow{letter-spacing:.16em;font-size:10.5px;align-items:flex-start}
  .hero .eyebrow::before{margin-top:8px;width:24px}
  .hero .lede{font-size:1rem;line-height:1.6}
  .hero__in{padding-bottom:clamp(28px,5vh,48px)}
  .hero__actions{gap:12px}
  .hero__actions .btn{flex:1 1 100%}      /* equal-width, not ragged */
  /* full-width buttons collide with an absolutely-placed control - inline it */
  .vidctl{position:static;margin-top:16px}
  .hero__bar ul{gap:var(--s2) var(--s3);padding-block:14px}
  .stat b{font-size:1.18rem}
  .stat > span{font-size:9.5px;letter-spacing:.12em}
}

/* ---------- 10. Reveal ---------- */
/* IMPORTANT: content is VISIBLE by default. The hidden-then-reveal state only
   applies under .js-reveal, which site.js adds to <html> only once it knows it
   can reliably reveal again (IntersectionObserver present, motion allowed).
   Hiding content in CSS and relying on JS to un-hide it means any hiccup leaves
   a permanently blank box — which is exactly what happened. Never do that. */
.js-reveal .rv{opacity:0;transform:translateY(26px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);
  transition-delay:var(--d,0ms)}
.js-reveal .rv.in{opacity:1;transform:none}
.js-reveal .rv-img{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.4s var(--ease-photo);transition-delay:var(--d,0ms)}
.js-reveal .rv-img.in{clip-path:inset(0 0 0 0)}

.js-reveal .rv-fade{opacity:0;transition:opacity 1400ms var(--ease-photo);transition-delay:var(--d,0ms)}
.js-reveal .rv-fade.in{opacity:1}

/* large photography: fade plus a slow settle out of a slight over-scale */
.js-reveal .rv-photo{
  opacity:0;transform:scale(1.08);
  transition:opacity 1000ms ease-out,
             transform 2000ms var(--ease-photo);
  transition-delay:var(--d,0ms);
}
.js-reveal .rv-photo.in{opacity:1;transform:none}

/* ---------- 11. Cards ---------- */
.card{
  background:var(--ink-3);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--t-hover) var(--ease-io),
             transform var(--t-hover) var(--ease),
             background var(--t-hover) var(--ease-io);
}
.card:hover{border-color:var(--line-gold);transform:translateY(-4px);background:var(--ink-4)}
.card__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink-2)}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.card__foot{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);border-radius:2px;
  color:var(--fg-muted);white-space:nowrap;
  background:transparent;   /* <button class="chip"> would otherwise take buttonface */
}
/* filter chips are real controls: give them a 44px target and a hover state */
button.chip{
  min-height:44px;padding:0 16px;display:inline-flex;align-items:center;
  cursor:pointer;font-family:var(--font-body);
  transition:border-color var(--t-hover) var(--ease-io),color var(--t-hover) var(--ease-io);
}
button.chip:hover{border-color:var(--line-gold);color:var(--fg)}
button.chip[aria-pressed="true"]{border-color:var(--gold-500);color:var(--gold-500)}
.chip--gold{border-color:var(--line-gold);color:var(--gold-500)}

/* media that fills a stretched grid cell.
   NOTE: do NOT use aspect-ratio here - with align-items:stretch the height is
   already resolved, so aspect-ratio would derive a width that overflows the column. */
.fill-media{position:relative;overflow:hidden;min-height:320px;background:var(--ink-2)}
.fill-media picture{position:absolute;inset:0;display:block}
.fill-media img{width:100%;height:100%;object-fit:cover}

/* feature icons read as decoration at 16px; give them presence */
.feat-ico .ico{width:26px;height:26px;stroke-width:1.25}

/* index number */
.idx{
  font-family:var(--font-display);font-size:11px;letter-spacing:.2em;
  color:var(--gold-500);font-variant-numeric:tabular-nums;
}

/* ---------- 11b. Manufacturer cards ---------- */
.marques{display:grid;gap:var(--s4)}
@media(min-width:820px){.marques{grid-template-columns:repeat(2,1fr);gap:var(--s5)}}
.marque{
  background:var(--ink-3);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--t-hover) var(--ease-io),
             transform var(--t-hover) var(--ease),
             background var(--t-hover) var(--ease-io);
}
.marque:hover{border-color:var(--line-gold);transform:translateY(-4px);background:var(--ink-4)}
.marque__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.marque__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease)}
.marque:hover .marque__media img{transform:scale(1.05)}

/* type-led state used until the client supplies photography — a designed
   fallback, not a broken image */
.marque__media--type{
  display:grid;place-items:center;
  background:
    radial-gradient(120% 140% at 22% 12%,rgba(192,152,64,.14),transparent 62%),
    linear-gradient(160deg,var(--ink-4),var(--ink-2) 70%);
  border-bottom:1px solid var(--line);
}
.marque__ghost{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:.06em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(230,217,180,.34);
  user-select:none;
}
.marque__body{padding:var(--s4);display:flex;flex-direction:column;flex:1}
.marque__head{display:flex;align-items:center;gap:var(--s3)}
.status{
  margin-left:auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;white-space:nowrap;
}
.status--live{background:rgba(192,152,64,.16);color:var(--gold-400);
  border:1px solid var(--line-gold)}
.status--order{background:transparent;color:var(--fg-muted);border:1px solid var(--line)}

/* ---------- 12. Steps ---------- */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  display:grid;gap:var(--s2) var(--s5);padding-block:var(--s4);
  border-top:1px solid var(--line);align-items:start;
}
.step:last-child{border-bottom:1px solid var(--line)}
@media(min-width:800px){.step{grid-template-columns:auto 3fr 6fr;gap:var(--s6)}}
.step__n{
  font-family:var(--font-display);font-size:12px;letter-spacing:.2em;
  color:var(--gold-500);font-variant-numeric:tabular-nums;padding-top:6px;
}
.step:hover{background:linear-gradient(90deg,rgba(192,152,64,.05),transparent 55%)}
.step{transition:background var(--t-hover) var(--ease-io)}

/* ---------- 13. Accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:var(--s3) 0;display:flex;align-items:flex-start;gap:var(--s3);
  font-family:var(--font-display);font-size:clamp(1rem,1.6vw,1.22rem);
  font-weight:400;letter-spacing:-.01em;color:var(--fg);
  transition:color var(--t-hover) var(--ease-io);
}
.acc__btn:hover{color:var(--gold-500)}
.acc__btn .sign{margin-left:auto;flex:none;width:16px;height:16px;position:relative;margin-top:6px}
.acc__btn .sign::before,.acc__btn .sign::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--gold-500);
  transition:transform var(--t-hover) var(--ease)}
.acc__btn .sign::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .sign::after{transform:rotate(0)}
.acc__panel{overflow:hidden;height:0;transition:height 420ms var(--ease-io)}
.acc__panel>div{padding-bottom:var(--s4);color:var(--fg-muted);max-width:72ch}

/* ---------- 14. Forms ---------- */
/* ---------- enquiry confirmation ----------
   Shown in place of the form once it has been sent. [hidden] is spelled out
   because a display rule elsewhere would otherwise beat the attribute — the
   same trap that once left the contact menu permanently open. */
.enq-thanks[hidden],form[hidden]{display:none}
.enq-thanks{
  text-align:center;padding:var(--s5) var(--s4);
  border:1px solid var(--line-gold);border-radius:2px;background:var(--ink-2);
}
.enq-thanks__tick .ico{width:44px;height:44px;stroke-width:1.2}
.enq-thanks__lede{margin-top:var(--s2);max-width:46ch;margin-inline:auto}
.enq-thanks__home{margin-top:var(--s4)}

/* model pills under a marque heading */
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}

.field{display:flex;flex-direction:column;gap:9px}
.field label{
  font-family:var(--font-display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-muted);
}
.field .req{color:var(--gold-500)}
.field input,.field select,.field textarea{
  max-width:100%;
  background:var(--ink-2);border:1px solid var(--line);border-radius:2px;
  padding:15px 16px;color:var(--fg);width:100%;
  transition:border-color var(--t-hover) var(--ease-io),background var(--t-hover) var(--ease-io);
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-dim)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-500);background:var(--ink-3);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--gold-400);outline-offset:2px}
.field .hint{font-size:12.5px;color:var(--fg-dim)}
.field .err{font-size:12.5px;color:#E8896B;display:none;align-items:center;gap:7px}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#E8896B}
.field.is-bad .err{display:flex}
.field select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C09840' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
textarea{resize:vertical;min-height:132px}

/* ---------- 15. Footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--ink-2);padding-block:var(--s7) var(--s4)}
.ftr__grid{display:grid;gap:var(--s5)}
@media(min-width:860px){.ftr__grid{grid-template-columns:2.2fr 1fr 1fr 1.5fr;gap:var(--s6)}}
.ftr h3{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-500);font-weight:500;margin-bottom:var(--s3);
  font-family:var(--font-display);
}
.ftr li+li{margin-top:11px}
/* Footer links were 20px tall — fine with a mouse, too small to hit reliably
   with a thumb. Pad them to a ~44px target on touch layouts and pull the list
   spacing in so the column does not grow. */
@media(max-width:860px){
  .ftr li+li{margin-top:2px}
  .ftr ul a{display:inline-block;padding-block:11px}
}
.ftr a{color:var(--fg-muted);transition:color var(--t-hover) var(--ease-io)}
.ftr a:hover{color:var(--gold-500)}
.ftr__bot{
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-size:12.5px;color:var(--fg-dim);
}
.ftr__bot-right{margin-left:auto}
/* Below this the three items wrap, and margin-left:auto shoved the last one to
   the far right on a line of its own — which read as broken alignment rather
   than a deliberate split. Stack them flush left instead. */
@media(max-width:700px){
  .ftr__bot{display:grid;justify-items:start;gap:7px}
  .ftr__bot-right{margin-left:0}
}
.contactline{display:flex;align-items:flex-start;gap:12px;color:var(--fg-muted)}
.contactline .ico{stroke:var(--gold-500);margin-top:3px}
/* The phone and email here are tap-to-call / tap-to-mail on a phone, and were
   only 26px tall. Pad them to a proper target without moving the icon, which
   stays aligned to the first line of text. */
@media(max-width:860px){
  .contactline{align-items:center}
  .contactline .ico{margin-top:0}
  .contactline a{display:inline-block;padding-block:9px}
}

/* ---------- 16. Misc ---------- */
.figure{position:relative;overflow:hidden;border-radius:3px;background:var(--ink-2)}
.figure img{width:100%;height:100%;object-fit:cover}
.ratio-16-9{aspect-ratio:16/9}
.ratio-3-2{aspect-ratio:3/2}
.ratio-4-5{aspect-ratio:4/5}

.band{position:relative;overflow:hidden}
.band__bg{position:absolute;inset:0;z-index:0}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.band__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink),rgba(7,7,8,.68) 42%,var(--ink))}
.band .wrap{position:relative;z-index:1}

.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:var(--s3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;gap:var(--s5);width:max-content;animation:mq 42s linear infinite}
.marquee li{
  font-family:var(--font-display);font-size:clamp(.95rem,1.5vw,1.2rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
  display:flex;align-items:center;gap:var(--s5);white-space:nowrap;
}
.marquee li::after{content:"";width:5px;height:5px;background:var(--gold-500);
  border-radius:50%;flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

.note{
  font-size:12.5px;line-height:1.55;color:var(--fg-dim);
  border-left:1px solid var(--line-gold);padding-left:var(--s2);max-width:74ch;
}

/* film grain — filmic depth without hurting contrast */
.grain{
  position:fixed;inset:0;z-index:98;pointer-events:none;opacity:.028;
  transform:translateZ(0);will-change:transform;contain:paint;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* page header for interior pages */
.phead{padding-top:calc(var(--nav-h) + clamp(56px,9vw,110px));padding-bottom:clamp(40px,6vw,72px);
  position:relative;overflow:hidden}
.phead__bg{position:absolute;inset:0;z-index:0}
.phead__bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.phead__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,8,.9),rgba(7,7,8,.72) 45%,var(--ink))}
.phead .wrap{position:relative;z-index:1}
.crumb{display:flex;gap:10px;align-items:center;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.crumb a:hover{color:var(--gold-500)}
.crumb span{color:var(--gold-500)}

/* ---------- 17. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv,.js-reveal .rv{opacity:1;transform:none}
  .rv-img,.js-reveal .rv-img{clip-path:none}
  .rv-fade,.js-reveal .rv-fade{opacity:1}
  .rv-photo,.js-reveal .rv-photo{opacity:1;transform:none}
  .hero__title .ln>span{transform:none}
  .hero__media video,.hero__media img{animation:none;transform:none}
  .marquee ul{animation:none}
  .cue{display:none}
}

/* ---------- 18. Direct-contact button (sits beside the Repliq bubble) ----------
   Repliq owns right:20px/bottom:20px with a 56px bubble and a 340px panel above
   it, at z-index 999999. This sits immediately to its left and one level below,
   so Repliq's panel can overlay it cleanly and the two never collide. */
.chatfab{position:fixed;right:90px;bottom:20px;z-index:999998}
/* no Repliq bubble to sit beside — take the corner */
.chatfab--solo{right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px)}
.chatfab__btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:56px;padding:0 22px;
  background:var(--gold-500);color:var(--ink);
  border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:background var(--t-hover) var(--ease-io),transform var(--t-micro) var(--ease-io);
}
.chatfab__btn:hover{background:var(--gold-400);transform:translateY(-2px)}
.chatfab__ico{width:20px;height:20px;flex:none}
@media(max-width:760px){
  .chatfab__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .chatfab__btn{padding:0;width:56px;justify-content:center}
}
.chatfab__menu[hidden]{display:none}
.chatfab__menu{
  position:absolute;right:0;bottom:calc(100% + 12px);min-width:230px;
  background:var(--ink-3);border:1px solid var(--line-strong);border-radius:4px;
  padding:8px;display:grid;gap:2px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.chatfab__num{
  padding:10px 12px 12px;margin:0;
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:.02em;
  color:var(--gold-500);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.chatfab__menu a{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:3px;
  color:var(--fg);font-size:.94rem;min-height:44px;
  transition:background var(--t-hover) var(--ease-io),color var(--t-hover) var(--ease-io);
}
.chatfab__menu a:hover{background:var(--ink-4);color:var(--gold-500)}
.chatfab__menu .ico{stroke:var(--gold-500);flex:none}
@media(prefers-reduced-motion:reduce){.chatfab__btn{transition:none}}