/* ==========================================================================
   MARQUE — direction layer
   Loaded AFTER the clone's inline <style>, so it wins on specificity ties.
   Theme: a private collection, walked at night, by appointment.
   Villain: the showroom — fluorescent light, pressure, sameness.
   Through-line: the vault slot light. One red hairline that runs the page.
   Restraint: two radii (0 and 999px). Accent appears three times, no more.
   ========================================================================== */

:root{
  --pad:clamp(20px, 4.6vw, 88px);
  --navpad:clamp(16px, 3.2vw, 42px);
  --maxw:1640px;
  --chalk:#EDEBE7;
  --ink:#08080A;
  --mono:Mono,ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --e:cubic-bezier(.16,1,.3,1);
}

/* ── fluid pass — the clone was pinned to 1280px ───────────────────────── */
body{width:auto; overflow-x:clip}
.in{max-width:var(--maxw); margin-inline:auto; width:100%}
.find,.showroom,.certified,.services,.next,footer{min-height:0; height:auto}
.find,.services{padding-block:clamp(56px,8vw,120px)}
.curated .pin-inner{display:flex; flex-direction:column; justify-content:center}
.find .in,.curated .in,.services .in{padding-top:0}
.certified{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.certified .panel{padding:clamp(40px,5vw,72px) clamp(28px,4vw,64px)}
.next{min-height:78svh}
footer{padding:clamp(52px,7vw,84px) var(--navpad) 30px}
.fgrid{grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(150px,1fr)); gap:clamp(20px,3vw,42px)}
.models,.cards,.svc{grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr))}
.models .shot{height:clamp(120px,13vw,178px)}
.card .ph{height:clamp(240px,26vw,360px)}
.svc .shot{height:clamp(150px,16vw,214px)}

/* ── restraint: pull the accent back to three appearances ─────────────── */
.eyebrow{color:#8B8681; font-family:var(--mono); font-size:10px; letter-spacing:.2em}
.find .eyebrow,.services .eyebrow{color:#6E6A64}
.rule{background:var(--chalk); height:1px; width:44px; opacity:.5}
.find .rule,.services .rule{background:#1A1A1A; opacity:.28}
.lnk svg [stroke],.lnk svg{stroke:currentColor !important}
.tabs button::after{background:var(--chalk)}
.find .tabs button::after,.services .tabs button::after{background:#0A0A0A}
/* the three places red is allowed to be */
.btn-red{background:#D5001C}
.live-dot{background:#D5001C}

/* ── margins are real estate ──────────────────────────────────────────── */
.edge{
  position:fixed; top:0; bottom:0; width:var(--navpad); z-index:55;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  pointer-events:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  color:rgba(237,235,231,.42); mix-blend-mode:difference;
}
.edge span{writing-mode:vertical-rl; white-space:nowrap}
.edge--l{left:0}
.edge--r{right:0}
.edge--r span{transform:rotate(180deg)}
.baseline{
  position:fixed; left:var(--navpad); right:var(--navpad); bottom:14px; z-index:55;
  display:flex; align-items:center; gap:16px; pointer-events:none;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  color:rgba(237,235,231,.5); mix-blend-mode:difference;
}
.baseline__rule{flex:1; height:1px; background:currentColor; opacity:.28; position:relative}
.baseline__rule i{position:absolute; inset:0 auto 0 0; background:currentColor; width:var(--prog,0%)}
.live-dot{width:5px; height:5px; border-radius:999px; display:inline-block; margin-right:7px;
  animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:1180px){.edge{display:none} .baseline{left:16px;right:16px}}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{height:76px}
.nav ul a{font-family:var(--mono); letter-spacing:.16em; font-size:10px; opacity:.72;
  transition:opacity .4s var(--e)}
.nav ul a::before{content:"/"; opacity:.4; margin-right:5px}
.nav ul a:hover{opacity:1}
.nav ul a::after{background:var(--chalk)}
body.sticky .nav{height:60px; background:rgba(6,6,8,.78)}
.nav.on-dark{color:var(--chalk)}
.prog{display:none}

/* ══ CHAPTER 1 — ARRIVAL ══ settle ═════════════════════════════════════ */
.hero{min-height:100svh; display:grid; grid-template-rows:1fr auto auto auto;
  align-content:end; overflow:clip}
.hero .bg{transform:scale(1.06); transform-origin:72% 62%}
.hero .sh{background:
  linear-gradient(180deg,rgba(3,5,8,.34) 0%,rgba(3,5,8,0) 26%,rgba(3,5,8,0) 62%,rgba(3,5,8,.52) 100%)}
/* the picture leaves the upper-left empty, so the type simply sits in it */
.hero .wordmark{
  position:relative; left:auto; top:auto; grid-row:2; z-index:6;
  padding:0 var(--pad); margin:0 0 clamp(18px,3vh,34px); width:100%; justify-self:start;
  font-size:clamp(33px,6.2vw,98px); line-height:.92; letter-spacing:-.012em;
  /* Wide enough for the longer of the two lines at the largest size it can
     reach — the line masks clip, so a headline that outgrows this box loses
     its last letters silently. Still leaves the right third to the car. */
  max-width:min(64%, 900px);
  text-shadow:none;
}
.hero .wordmark .ln{display:block; overflow:hidden}
.hero .wordmark .ln>i{display:block; font-style:normal; transform:translateY(104%);
  transition:transform 1.35s var(--e)}
.is-ready .hero .wordmark .ln:nth-child(1)>i{transition-delay:.22s}
.is-ready .hero .wordmark .ln:nth-child(2)>i{transition-delay:.34s}
.is-ready .hero .wordmark .ln>i{transform:translateY(0)}
.hero .in{position:relative; grid-row:3; bottom:auto; left:auto; right:auto;
  padding-bottom:clamp(64px,10vh,104px); z-index:6}
.hero p{font-size:clamp(12px,1.05vw,14px); line-height:1.9; color:#CFCFCF; max-width:30ch}
.hero .btns{gap:clamp(16px,2.4vw,34px); flex-wrap:wrap}
/* the hero's own cut-out car — real depth, not a flat photograph */
.hero__car{display:none}  /* the forecourt photograph already has its car */

/* ══ CHAPTER 3 — COLLECTION ══ travel: the inventory runs past a fixed frame */
.curated{background:#000; overflow:clip}
.curated h2{font-size:clamp(22px,3vw,44px); letter-spacing:-.016em}
.hrail-wrap{display:flex; overflow:visible; margin-top:clamp(28px,4vw,52px)}
.cards.hrail{
  display:flex; grid-template-columns:none; gap:clamp(14px,1.8vw,26px);
  width:max-content; min-width:max-content; flex:0 0 auto;
  /* --rp runs 0→1 across the pin and --railmax is the rail's real overflow
     in px, measured by direct.js on load and resize. A fixed percentage was
     a guess: it stopped 58% along, which left the last card half off-screen
     and never reached the end of the collection.
     --vel is published every frame by the rig; the rail leans into a fast
     flick and settles out of it. Kept under 2deg — past that it reads as a
     rendering bug rather than as weight. */
  transform:translate3d(calc(var(--rp,0) * var(--railmax,0px)),0,0)
            skewX(calc(var(--vel,0) * 1.6deg));
}
.cards.hrail .card{width:clamp(280px,30vw,460px); flex:none}
.cards.hrail .card:nth-child(even){margin-top:clamp(14px,2.4vw,38px)}

/* ══ CHAPTER 4 — SPECTRUM ══ the swap ══════════════════════════════════ */
.spectrum{background:#060607; color:var(--chalk); overflow:clip}
.spec__stage{position:relative; display:grid;
  grid-template-rows:auto minmax(0,1fr) auto; align-content:center; justify-items:center;
  gap:clamp(14px,2.4vh,30px); height:100svh;
  /* the readout row was sitting inside the last 6% of the viewport, which is
     exactly the band the reveal observer excludes — on a pinned section it
     never moves out of it, so it never revealed. It is driven by the scene
     now, and it also has room to breathe. */
  padding:clamp(52px,8vh,96px) var(--pad) clamp(40px,6vh,68px);
  max-width:var(--maxw); margin-inline:auto; width:100%}
.spec__frame{
  position:relative; height:100%; aspect-ratio:3/2; max-width:100%; overflow:hidden;
  background:#0b0b0c; border-radius:2px;
}
.spec__frame figure{position:absolute; inset:0; margin:0; clip-path:inset(0 0 0 100%)}
/* the first finish is the ground state and is always drawn; the other five
   are wiped over it and stay drawn underneath once they have arrived */
.spec__frame figure:first-child{clip-path:inset(0 0 0 0)}
/* the whole stack drifts a hair across the pin, so a run of finishes reads as
   one continuous camera move rather than six separate cards */
.spec__frame img{width:100%; height:100%; object-fit:cover;
  transform:translate3d(var(--drift,0),0,0) scale(1.05);
  transition:transform .8s cubic-bezier(.22,.9,.24,1)}
.spec__frame figure.on img{transform:translate3d(var(--drift,0),0,0) scale(1.01)}
.spec__meta{
  position:relative; z-index:4; width:100%;
  display:flex; align-items:center; gap:clamp(14px,2vw,28px);
  padding:0 4px;
}
.spec__name{display:block; white-space:nowrap; font-family:Disp,sans-serif; font-weight:700;
  text-transform:uppercase; font-size:clamp(18px,2.4vw,38px); line-height:1.05; letter-spacing:-.02em; color:var(--chalk)}
.spec__name b{display:inline-block; font-weight:700;
  transition:opacity .15s linear, transform .34s var(--e)}
.spec__name b.swap{opacity:0; transform:translateY(38%)}
.spec__idx{margin-left:auto; white-space:nowrap; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:rgba(237,235,231,.55)}
.spec__idx b{color:var(--chalk); font-weight:400}
.spec__swatches{display:flex; gap:9px; align-items:center}
.spec__swatches i{width:11px; height:11px; border-radius:999px; opacity:.3;
  transition:opacity .26s, transform .26s var(--e); display:block}
.spec__swatches i.on{opacity:1; transform:scale(1.5)}
.spec__head{position:relative; z-index:4; width:100%; text-align:center}
.spec__head h2{font-size:clamp(19px,2.3vw,34px); letter-spacing:-.016em; margin-top:10px; color:var(--chalk)}

/* ══ CHAPTER 5 — SHOWROOM ══ reveal (wipe) ═════════════════════════════ */
.showroom{min-height:82svh; display:grid; align-items:center; overflow:clip}
.showroom .in{padding-top:0; grid-area:1/1; z-index:3}
.showroom h2{font-size:clamp(22px,3vw,46px); letter-spacing:-.016em}
.showroom p{max-width:36ch}
.showroom .bg{transform:scale(1.1)}

/* ══ CHAPTER 6 — ASSURANCE ══ lockstep ═════════════════════════════════ */
.certified{background:#0A0A0A}
/* the image column used to be sticky at 100svh, which forced the whole
   section to a viewport-and-a-bit tall and left the panel floating in four
   hundred pixels of dead black. It now simply matches the panel. */
.certified .shot{position:relative; height:auto}
.certified h2{font-size:clamp(24px,3.2vw,48px); letter-spacing:-.018em}
.pillars{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.pillars>*{opacity:0; transform:translateY(18px)}
.pillars.in>*{opacity:1; transform:none; transition:opacity .8s var(--e), transform .8s var(--e)}
.pillars.in>*:nth-child(2){transition-delay:.11s}
.pillars.in>*:nth-child(3){transition-delay:.22s}

/* ══ CHAPTER 7 — SERVICE ══ scale in place ═════════════════════════════ */
.services{background:var(--chalk)}
.services .svc .cell{opacity:0; transform:translateY(14px)}
.services .svc.in .cell{opacity:1; transform:none; transition:opacity .8s var(--e), transform .8s var(--e)}
.services .svc.in .cell:nth-child(2){transition-delay:.08s}
.services .svc.in .cell:nth-child(3){transition-delay:.16s}
.services .svc.in .cell:nth-child(4){transition-delay:.24s}

/* ══ CHAPTER 8 — DEPARTURE ══ release ══════════════════════════════════ */
.next{display:grid; align-items:center; overflow:clip}
.next .in{padding-top:0; grid-area:1/1; z-index:3}
.next h2{font-size:clamp(28px,5vw,84px); letter-spacing:-.024em; line-height:.94}
.next .bg{transform:scale(1.12)}

/* ── joins: the colour bleed arrives before the content ───────────────── */
.bleed{position:absolute; left:0; right:0; height:clamp(60px,9vh,120px); z-index:2; pointer-events:none}
.bleed--down{bottom:0; background:linear-gradient(180deg,transparent,var(--to,#EDEBE7))}
.bleed--up{top:0; background:linear-gradient(0deg,transparent,var(--to,#000))}

/* ── reduced motion: a design, not a kill switch ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero .wordmark .ln>i{transform:none}
  .find .models .cell,.services .svc .cell,.pillars>*{opacity:1; transform:none}
  /* The rail's travel is a scrub, so with motion off it has to become a
     grid. `width:auto` alone does not do that: .hrail-wrap is a flex row,
     so the rail still sizes to six cards laid end to end and the last two
     sit permanently outside the clip — unreachable, and never even loaded,
     because a lazy image that is never near the viewport never decodes. */
  .hrail-wrap{display:block}
  .cards.hrail{
    /* min-width:max-content is what makes the rail a rail; without clearing
       it the grid still sizes to six cards laid end to end */
    transform:none !important; display:grid; width:100%; max-width:100%; min-width:0;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:clamp(18px,2.4vw,30px);
  }
  .cards.hrail .card{width:auto; max-width:100%; margin-top:0 !important; opacity:1 !important}
  .curated .card,.curated .top{opacity:1 !important; transform:none !important}
}

/* rest states the scenes hand back to (also the reduced-motion frame) */
.curated .card{opacity:0}
@media (prefers-reduced-motion:reduce){
  .curated .card{opacity:1}
}

/* sticky pin-inners create their own stacking context; keep pinned content
   above section backgrounds so nothing is trapped behind them. */
.pin-inner{position:sticky; z-index:3}

/* grid items default to min-width:auto, which lets long words force a wrap */
.pillars>*,.svc .cell,.models .cell,.fgrid>*{min-width:0}
.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.pillars{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}}
.fgrid .logo{margin-bottom:4px}
.fgrid .blurb{margin-top:14px}


/* ══ MOTION ════════════════════════════════════════════════════════════
   Smoothness comes from three things and none of them is more effects:
   the scrub value is eased, only transform/opacity animate, and every
   scrubbed layer is promoted while it is on screen and released after.
   ────────────────────────────────────────────────────────────────────── */
:root{--eo:cubic-bezier(.22,.9,.24,1)}

/* entrances — one shape, varied only by direction */
.rv{opacity:0; transform:translateY(22px)}
.rvl{opacity:0; transform:translateX(-26px)}
.rv.in,.rvl.in{opacity:1; transform:none;
  transition:opacity .85s var(--eo), transform .85s var(--eo)}
.rv.d1.in{transition-delay:.08s}
.rv.d2.in{transition-delay:.16s}
.rv.d3.in{transition-delay:.24s}

/* grouped children stagger themselves instead of arriving as a block */
.models.in .cell,.svc.in .cell,.pillars.in>*{
  animation:mqRise .8s var(--eo) both; animation-delay:calc(var(--i,0) * 65ms)}
@keyframes mqRise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* the hero settles rather than snapping */
.hero .wordmark .ln{overflow:hidden}
.hero .wordmark .ln>i{display:block; transform:translateY(105%);
  transition:transform 1.15s var(--eo)}
.is-ready .hero .wordmark .ln:nth-child(1)>i{transition-delay:.16s}
.is-ready .hero .wordmark .ln:nth-child(2)>i{transition-delay:.26s}
.is-ready .hero .wordmark .ln>i{transform:translateY(0)}

/* scrub targets: promote while live, release when not — permanent
   will-change on many layers costs more memory than it saves */
.hero__stage,.cards.hrail,.cta__bg,.hero .bg,.next .bg{will-change:auto}
.is-scrubbing .hero__stage,.is-scrubbing .cards.hrail,
.is-scrubbing .hero .bg,.is-scrubbing .next .bg{will-change:transform}

/* the horizontal rail must never ease — easing a scrub fights the wheel */
.cards.hrail{transition:none}

/* ── the finish swap ──────────────────────────────────────────────────────
   The page's one signature move, and it was fighting itself. The old version
   toggled a class and let a 340ms CSS transition draw the wipe: the outgoing
   finish snapped away the instant it lost the class, so for those 340ms you
   were watching the new one crawl across an empty dark panel — and a fast
   scroll in either direction restarted the transition before it ever landed,
   which is what made it look broken.
   Now story.js writes the clip inline from the scroll position itself. Each
   finish wipes over the one before it and both stay drawn, so there is never
   a gap; and because there is no timer, scrubbing fast, slow, forwards or
   backwards is always exactly proportional to the wheel. */
.spec__frame figure{clip-path:inset(0 0 0 100%)}
.spec__frame figure:first-child{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .rv,.rvl{opacity:1; transform:none}
  .models.in .cell,.svc.in .cell,.pillars.in>*{animation:none}
  .hero .wordmark .ln>i{transform:none}
  /* motion off: the scenes settle to their rest frame, which for the spectrum
     is the first finish and a readout that agrees with it */
  .spec__frame figure{clip-path:inset(0 0 0 100%)}
  .spec__frame figure:first-child{clip-path:inset(0 0 0 0)}
}

/* the headline stays clear of the subject at every width */
@media (max-width:900px){
  .hero .wordmark{max-width:none; font-size:clamp(30px,8vw,64px)}
  .hero .bg{transform:scale(1.16); transform-origin:78% 66%}
}

/* ══ LEGIBILITY PASS ═══════════════════════════════════════════════════════
   The clone this page was traced from set its supporting text at 9–12px,
   which is a screenshot size, not a reading size. Nothing below the headline
   survived a scroll-past. Everything here is a size change only — no copy,
   colour or layout is touched, so the composition is exactly as approved. */
.eyebrow{font-size:11px; letter-spacing:.22em}
.nav ul a{font-size:11px; letter-spacing:.14em; opacity:.82}
.lnk{font-size:11.5px; letter-spacing:.12em}
.tabs button{font-size:12px; letter-spacing:.13em}

.hero p{font-size:clamp(14px,1.25vw,17px); line-height:1.7; max-width:34ch; color:#DAD8D4}
.showroom p{font-size:clamp(14px,1.2vw,17px); line-height:1.75; max-width:36ch}
.certified .sub{font-size:clamp(13.5px,1.1vw,16px); line-height:1.7; max-width:44ch}

.card .spec{font-size:11px; letter-spacing:.11em; color:#AFACA7}
.card h3{font-size:clamp(19px,1.6vw,24px)}
.models h3{font-size:clamp(18px,1.5vw,22px)}

.pillars h3{font-size:12px; letter-spacing:.16em}
.pillars p{font-size:13.5px; line-height:1.65; color:#B4B1AC}
.svc .cell h3{font-size:clamp(16px,1.3vw,20px)}
.svc .cell p{font-size:13.5px; line-height:1.65}
.fgrid h4{font-size:11px; letter-spacing:.18em}
.fgrid a,.fgrid p,.fgrid span,.fgrid li{font-size:13px}

/* the spectrum readout is the label for the one thing the section exists to
   show — it was smaller than the section's own eyebrow */
.spec__name{font-size:clamp(22px,2.9vw,44px)}
.spec__idx{font-size:12px}

/* ══ SMALL SCREENS ═════════════════════════════════════════════════════════
   The page this was traced from was authored at a fixed 1280px and never had
   a small-screen pass: five nav links at a 38px gap and six model tabs are
   both wider than a phone, so the whole document scrolled sideways. Both
   become contained scrollers — every link stays reachable, and the page
   itself stops moving horizontally. */
@media (max-width:900px){
  .nav{gap:14px; padding-inline:var(--navpad)}
  .nav ul{
    margin:0; flex:1; min-width:0; gap:20px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; padding-block:8px;
  }
  .nav ul::-webkit-scrollbar{display:none}
  .nav ul li{flex:none; scroll-snap-align:start}
  .nav ul a{white-space:nowrap}
  .nav .navicons{flex:none}

  .tabs{
    overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap;
    scroll-snap-type:x proximity; padding-bottom:6px;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none; white-space:nowrap; scroll-snap-align:start}
}
/* the footer's four fixed tracks add up to 766px, so the document itself
   scrolled sideways on every phone. Two tracks, then one. */
@media (max-width:820px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,5vw,34px)}
  .fgrid > :first-child{grid-column:1 / -1}
}
@media (max-width:520px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
}

/* On a phone the spectrum runs shorter — six finishes should not cost two
   thumb-lengths of scroll. The curated rail is a different problem: a
   horizontal scrub is a desktop gesture, and at 390px the -58% travel runs
   every card off the left edge and leaves a screen of empty black behind it.
   So on a phone it stops being a rail and becomes what it should be there —
   a stack you scroll normally. */
@media (max-width:700px){
  .spectrum{--pin:130}

  .curated.pin{height:auto}
  .curated > .pin-inner{position:static; height:auto; overflow:visible; display:block}
  /* .hrail-wrap is a flex row, so an `auto`-width rail still sizes to the
     six cards laid end to end — 2258px inside a 390px screen. It has to be
     a block that fills the column before the cards can wrap. */
  .hrail-wrap{display:block; overflow:visible}
  .cards.hrail{
    transform:none !important; display:grid; grid-template-columns:minmax(0,1fr);
    width:100%; max-width:100%; min-width:0; gap:clamp(18px,5vw,28px); margin-top:26px;
  }
  .cards.hrail .card{width:auto; max-width:100%; margin-top:0 !important; opacity:1 !important}
  .card .ph{height:clamp(210px,58vw,280px)}
  .curated .card,.curated .top{opacity:1 !important; transform:none !important}
}

/* ══ THE FOUR PHOTOGRAPHED SECTIONS, REDRAWN ═══════════════════════════════
   Four places on this page were being carried by imagery that undid the rest
   of it: a "private showroom" that was a wood-panelled living room complete
   with a table lamp and framed mountain prints; a bright white workshop with
   a full-length figure and his shoes in shot; four stock-photo clichés on
   cream; and a warm Mediterranean postcard closing a page whose entire world
   is cold and dark. Three photographs were re-shot. The fourth set was
   deleted rather than replaced — see the note in the markup. */

/* ── the fold ─────────────────────────────────────────────────────────── */
.hero p{max-width:26ch}

/* ── the private showroom ─────────────────────────────────────────────── */
/* The new photograph already carries its own darkness on the left, so the
   scrim only has to protect the type — not manufacture a void for it. */
.showroom{min-height:min(88svh,860px)}
.showroom .bg{object-position:64% 52%}
.showroom .sh{background:
  linear-gradient(90deg,rgba(4,4,5,.94) 0%,rgba(4,4,5,.82) 26%,rgba(4,4,5,.28) 52%,rgba(4,4,5,0) 72%),
  linear-gradient(0deg,rgba(4,4,5,.55),rgba(4,4,5,0) 34%)}
.showroom h2{font-size:clamp(26px,3.6vw,54px)}
.showroom p{margin-top:20px}
.showroom .btn{margin-top:30px}

/* ── certified ────────────────────────────────────────────────────────── */
/* The panel content used to sit at the top of a full-bleed column, leaving
   roughly four hundred pixels of dead black beneath it. It is centred now,
   and the section is only as tall as it needs to be. */
.certified{min-height:0; align-items:stretch; padding-bottom:0}
.certified .panel{display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(56px,7vw,92px)}
.certified .shot{overflow:hidden}
.certified .shot img{width:100%; height:100%; object-fit:cover; object-position:56% 50%}

/* the numbered list that replaced the icon row */
.certified .pillars{list-style:none; counter-reset:p; margin:clamp(30px,4vh,48px) 0 0;
  padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  border-top:1px solid rgba(237,235,231,.16)}
.certified .pillars li{counter-increment:p; display:grid; gap:2px 22px;
  grid-template-columns:34px minmax(0,1fr); align-items:baseline;
  padding:clamp(14px,1.8vh,20px) 0; border-bottom:1px solid rgba(237,235,231,.16)}
.certified .pillars li::before{content:counter(p,decimal-leading-zero);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--red)}
.certified .pillars h3{font-family:Disp,sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(15px,1.3vw,19px); letter-spacing:.02em; color:var(--chalk)}
.certified .pillars p{grid-column:2; margin-top:3px; font-size:14px; line-height:1.6;
  color:#A8A5A0; max-width:36ch}
.certified .lnk{margin-top:clamp(26px,3.4vh,38px); align-self:flex-start}

/* ── services: an index, not a gallery ────────────────────────────────── */
.services .in{display:grid; gap:clamp(34px,5vw,72px); align-items:start}
@media (min-width:900px){
  .services .in{grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr)}
  .svc__head{position:sticky; top:clamp(96px,11vh,132px)}
}
.svc__head h2{font-size:clamp(26px,3vw,46px); line-height:.98; margin-top:14px; color:#0A0A0A;
  text-wrap:balance}
.services .svc{list-style:none; counter-reset:s; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  border-top:1px solid var(--line-l)}
.services .svc .cell{counter-increment:s; display:grid; gap:4px 26px;
  grid-template-columns:38px minmax(0,1fr); align-items:baseline;
  padding:clamp(20px,2.6vw,30px) 0; border-bottom:1px solid var(--line-l);
  transition:padding-left .4s var(--e)}
.services .svc .cell::before{content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#9C9C9C}
.services .svc .cell:hover{padding-left:10px}
.services .svc h3{font-family:Disp,sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(17px,1.7vw,24px); letter-spacing:.01em; color:#0A0A0A}
.services .svc p{grid-column:2; margin-top:4px; font-size:15px; line-height:1.6;
  color:#5E5A55; max-width:46ch}
.services .svc .lnk{grid-column:2; margin-top:12px}

/* ── departure ────────────────────────────────────────────────────────── */
/* The type sat on open water with nothing under it. The new frame is a
   desert road at blue hour and the left half of it is already dark; the
   scrim just deepens what the photograph gives. */
.next .bg{object-position:62% 62%; transform:scale(1.06)}
.next .sh{background:
  linear-gradient(90deg,rgba(3,5,10,.9) 0%,rgba(3,5,10,.7) 30%,rgba(3,5,10,.18) 60%,rgba(3,5,10,0) 80%),
  linear-gradient(0deg,rgba(3,5,10,.6),rgba(3,5,10,0) 40%)}

/* ══ THE ARRIVAL ═══════════════════════════════════════════════════════════
   A page this dark should not simply appear. The shutters part on a hairline
   of red and hand over to the wordmark, which rises through the opening —
   `is-ready` is held back until the shutters start moving so the two beats
   are one gesture rather than two things that happen to overlap. */
.gate{position:fixed; inset:0; z-index:200; pointer-events:none; overflow:hidden}
.gate__half{position:absolute; top:-2px; bottom:-2px; width:50.4%; background:#000;
  will-change:transform; backface-visibility:hidden}
.gate__l{left:0} .gate__r{right:0}
.gate__line{position:absolute; left:50%; top:50%; width:1.5px; height:0; opacity:0;
  background:var(--red); transform:translate(-50%,-50%);
  box-shadow:0 0 26px 3px rgba(213,0,28,.55)}

html.gate-arm .gate__line{animation:gateLine .40s cubic-bezier(.7,0,.28,1) forwards}
html.gate-open .gate__line{animation:gateLineOut .34s cubic-bezier(.6,0,.3,1) forwards}
html.gate-open .gate__l{animation:gateL .82s cubic-bezier(.76,0,.18,1) .05s forwards}
html.gate-open .gate__r{animation:gateR .82s cubic-bezier(.76,0,.18,1) .05s forwards}
html.gate-done .gate{display:none}
@keyframes gateLine{from{height:0; opacity:0} 12%{opacity:1} to{height:min(38vh,340px); opacity:1}}
@keyframes gateLineOut{to{height:0; opacity:0}}
@keyframes gateL{to{transform:translate3d(-100.5%,0,0)}}
@keyframes gateR{to{transform:translate3d(100.5%,0,0)}}
/* nothing may scroll under a closed gate */
html.gate-arm body,html.gate-open body{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .gate{display:none !important} }

/* ══ KEYBOARD ══════════════════════════════════════════════════════════════
   There was no focus style anywhere on this page: a keyboard user could not
   see where they were. The ring is the accent colour on dark ground and ink
   on the cream sections, so it is always the strongest thing on screen. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:1px}
.find :focus-visible,.services :focus-visible{outline-color:#0A0A0A}
.btn:focus-visible,.lnk:focus-visible{outline-offset:5px}

/* ══ FIND YOUR PORSCHE ═════════════════════════════════════════════════════
   Six models in an auto-fit grid landed as four-then-two, so the section
   carried a two-cell hole at every desktop width. Three across fills exactly,
   and each car now sits on a plate with a contact shadow it lifts off when
   you point at it — the range reads as objects on a table rather than as
   cut-outs floating on cream. */
.models{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(18px,2.4vw,34px);
  row-gap:clamp(20px,2.6vw,38px); margin-top:clamp(18px,2.4vw,34px)}
@media (min-width:940px){ .models{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .models{grid-template-columns:minmax(0,1fr)} }

.models .cell{padding:0; position:relative; isolation:isolate}
/* The plate is exactly the colour the six photographs were shot on, so the
   letterboxing around each car is invisible and the cars share one ground.
   Each already carries its own contact shadow — adding a CSS one would give
   every car two. */
.models .shot{
  height:clamp(150px,15vw,208px); background:#F2F0EC;
  border:1px solid rgba(10,10,10,.07); position:relative; overflow:hidden;
}
.models .shot img{
  width:100%; height:100%; object-fit:contain; object-position:50% 54%;
  transition:transform .6s var(--e);
}
.models .cell:hover .shot img,.models .cell:focus-within .shot img{transform:scale(1.055)}
/* a hairline of the accent draws under the plate as you point at it */
.models .shot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--e);
}
.models .cell:hover .shot::after,.models .cell:focus-within .shot::after{transform:scaleX(1)}
.models .meta{border-top:1px solid var(--line-l); padding-top:15px; margin-top:16px}
.models .cell .lnk{transition:transform .4s var(--e)}
.models .cell:hover .lnk{transform:translateX(4px)}

/* the rail reads as grabbable, because it is */
@media (hover:hover) and (pointer:fine){
  .hrail-wrap{cursor:grab}
  html.is-railing,html.is-railing .hrail-wrap{cursor:grabbing}
  html.is-railing{user-select:none}
  html.is-railing .card{pointer-events:none}
}
@media (max-width:700px){ .hrail-wrap{cursor:auto} }