/* ============================================================
   DRIVR Collection — Monochrome Editorial
   Type: Outfit (self-hosted, SIL OFL) — Bebas Neue for car captions
   White ground · black + gray · swiss grid · quiet motion
   ============================================================ */
/* Self-hosted from assets/fonts — nothing is fetched from a CDN.
   Outfit (SIL OFL 1.1) is the site's voice; Bebas Neue (SIL OFL 1.1) is kept
   only for car captions and the SOLD stamp, where names must fit one line. */
@font-face{font-family:Outfit;src:url("../assets/fonts/outfit-latin-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url("../assets/fonts/outfit-latin-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url("../assets/fonts/outfit-latin-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url("../assets/fonts/outfit-latin-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{
  font-family:"Bebas Neue";
  src:url("../assets/fonts/bebas-neue-latin-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --plate:"Bebas Neue",'Helvetica Neue',Impact,sans-serif;   /* pit-lane condensed */
  --bg:#ffffff;
  --warm:#f7f6f3;        /* warm off-white — the cream in the mark */
  --warm-2:#f1efea;      /* a shade deeper, for the footer */
  --fg:#000000;
  --fg-2:#333333;
  --mut:#8e8e8e;
  --line:#e4e4e4;
  --line-2:#f0f0f0;
  --well:#f5f5f5;
  --maxw:1560px;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --e:cubic-bezier(.16,1,.3,1);             /* expo-out — the long, soft settle */
  --e-io:cubic-bezier(.65,.05,.36,1);       /* in-out */
  --spring:cubic-bezier(.34,1.28,.44,1);    /* slight overshoot, spring-like */
  --e-swipe:cubic-bezier(.76,0,.24,1);      /* decisive in-out, for the hero push */
  --amber:#ff9e1b;                          /* the one colour on the site: turn-signal amber */
  --sans:Outfit,'Helvetica Neue',Helvetica,Arial,sans-serif;   /* the site's voice */
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;
  font-size:clamp(.95rem,1vw,1.05rem);line-height:1.55;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#000;color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.03em;line-height:.98}

/* fluid display scale */
.t-hero{font-size:clamp(2.9rem,10.5vw,10.5rem);letter-spacing:-.045em;line-height:.9}
.t-xl{font-size:clamp(2.2rem,6.5vw,5.5rem);letter-spacing:-.04em;line-height:.94}
.t-lg{font-size:clamp(1.75rem,4vw,3.2rem);letter-spacing:-.035em;line-height:1}
.t-md{font-size:clamp(1.2rem,2vw,1.65rem);letter-spacing:-.025em;line-height:1.15}
.lead{font-size:clamp(1.15rem,2.1vw,2.05rem);line-height:1.32;letter-spacing:-.03em;color:var(--fg)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.bleed{width:100%;padding:0 var(--pad)}

/* ---------- page transition ---------- */
body{opacity:1;transition:opacity .35s var(--e)}
body.is-leaving{opacity:0}

/* ---------- scroll progress ---------- */
.prog{position:fixed;top:0;left:0;height:1.5px;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--fg);z-index:80;pointer-events:none}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e),transform .8s var(--e)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}.d4{transition-delay:.36s}

/* line-mask headline reveal */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w > i{display:inline-block;font-style:normal;transform:translateY(115%);
  transition:transform .95s var(--e)}
.split.in .w > i{transform:none}

/* ---------- the one hover language: dim (+ spring press) ---------- */
a,button{transition:opacity .3s var(--e),transform .5s var(--spring)}
a:active,button:active{transform:scale(.975)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--sans);
  font-size:.95rem;letter-spacing:-.015em;font-weight:400;cursor:pointer;
  background:none;border:0;padding:0;color:var(--fg);position:relative}
.btn::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:left;transition:transform .5s var(--e)}
.btn:hover{opacity:.5}
.btn .arw{display:inline-block;transition:transform .45s var(--e)}
.btn:hover .arw{transform:translateX(6px)}
.btn--box{padding:1.05rem 2.2rem;border:1px solid var(--fg);font-size:.9rem}
.btn--box::after{display:none}
.btn--solid{padding:1.05rem 2.4rem;background:var(--fg);color:#fff;font-size:.9rem}
.btn--solid::after{display:none}
.btn--box:hover,.btn--solid:hover{transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:90;
  transition:transform .5s var(--e),background .4s var(--e),border-color .4s var(--e);
  border-bottom:1px solid transparent}
.site-header.is-stuck{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px)}
/* racing stripe: twin rules laid down across the base of the bar once it sticks */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background:linear-gradient(180deg,
    var(--fg) 0 2.5px, transparent 2.5px 4.5px, var(--fg) 4.5px 7px);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--e-swipe)}
.site-header.is-stuck::after{transform:scaleX(1)}
.site-header.is-hidden{transform:translateY(-101%)}
/* over a photographic hero the header reverses out to white until it sticks */
.site-header.on-dark:not(.is-stuck){color:#fff}
.site-header.on-dark:not(.is-stuck) .burger span{background:#fff}
.bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:clamp(1.1rem,1.8vw,1.6rem) var(--pad)}
.brand{display:block;line-height:0}
.brand__mark{height:clamp(38px,4.2vw,56px);width:auto;display:block;
  transition:transform .5s var(--spring),filter .5s var(--e)}
/* grow + glow, so it reads as the clickable way into the collection */
.brand:hover .brand__mark{transform:scale(1.08)}
.brand:active .brand__mark{transform:scale(1.03)}
/* on white the glow is a soft lift; over the hero photo it's an actual light */
.site-header:not(.on-dark) .brand:hover .brand__mark,
.site-header.is-stuck .brand:hover .brand__mark{
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.28)) drop-shadow(0 0 22px rgba(0,0,0,.14))}
.site-header.on-dark:not(.is-stuck) .brand:hover .brand__mark{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 5px 22px rgba(0,0,0,.4))
         drop-shadow(0 0 20px rgba(255,255,255,.6)) drop-shadow(0 0 48px rgba(255,255,255,.32))}
/* black ink by default (white pages); white ink only over the photographic hero */
.brand__mark--light{display:none}
.site-header.on-dark:not(.is-stuck):not(.is-navopen) .brand__mark--light{display:block}
.site-header.on-dark:not(.is-stuck):not(.is-navopen) .brand__mark--dark{display:none}
/* equal cells across the remaining width, divided by hairlines */
.nav{display:flex;align-items:stretch;flex:1 1 auto;
  margin-left:clamp(1.4rem,3.5vw,3.5rem)}
/* set in the condensed plate face — taller lettering for the same footprint */
.nav__link{flex:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:clamp(1rem,1.55vw,1.65rem);
  text-transform:uppercase;letter-spacing:.13em;font-weight:500;
  white-space:nowrap;border-left:1px solid rgba(0,0,0,.15);
  transition:opacity .35s var(--e)}
/* the label swaps for a duplicate — the same mechanic as the car captions */
.nav__mask{position:relative;display:block;overflow:hidden;height:1.12em}
.nav__mask i{display:block;font-style:normal;height:1.12em;line-height:1.12em;
  transition:transform .55s var(--e)}
.nav__mask i + i{position:absolute;top:0;left:0;right:0;transform:translateY(100%)}
.nav__link:hover .nav__mask i:first-child{transform:translateY(-100%)}
.nav__link:hover .nav__mask i + i{transform:none}
/* the page you're on keeps its rule — box-shadow, so the mask can't clip it */
.nav__link.is-active .nav__mask{box-shadow:0 2px 0 currentColor}
.nav__phone{display:inline-block;letter-spacing:.08em}
/* over the photographic hero the lettering carries the same shadow as the mark */
.site-header.on-dark:not(.is-stuck) .nav__link,
.site-header.on-dark:not(.is-stuck) .nav__phone,
.site-header.on-dark:not(.is-stuck) .brand__mark{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 5px 22px rgba(0,0,0,.45))}
/* dividers reverse out over photography */
.site-header.on-dark:not(.is-stuck) .nav__link{border-left-color:rgba(255,255,255,.32)}
/* hovering any one item quiets the rest */
.nav:hover .nav__link,.nav:hover .nav__phone{opacity:.38}
.nav:hover .nav__link:hover,.nav:hover .nav__phone:hover{opacity:1}
.nav:hover .nav__link.is-active{opacity:.38}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;
  padding:.4rem;position:relative;z-index:100}
.burger span{width:26px;height:1.5px;background:var(--fg);transition:transform .4s var(--e)}
.burger.is-open span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger.is-open span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media(max-width:920px){
  .nav{position:fixed;inset:0;flex:none;margin-left:0;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:.4rem;background:var(--bg);color:var(--fg);padding:2rem var(--pad);z-index:95;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e-io);pointer-events:none}
  .nav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
  /* stacked menu: no cells, no dividers */
  .nav__link{flex:none;border-left:0;justify-content:flex-start;
    font-size:clamp(1.8rem,7.5vw,2.9rem);font-weight:500;letter-spacing:.06em;line-height:1.24}
  .nav__phone{font-size:1.05rem;color:var(--mut);margin-top:1.6rem;letter-spacing:.1em}
  .burger{display:flex}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;width:100%;overflow:hidden;background:#111}
.hero__slides{position:absolute;inset:-8% 0;overflow:hidden;will-change:transform}
/* every slide is parked off to the right; the active one sits at 0 and the
   outgoing one is pushed off to the left — a fast, decisive swipe */
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center 58%;
  filter:brightness(.8);transform:translate3d(100%,0,0);
  transition:transform .6s var(--e-swipe);will-change:transform;backface-visibility:hidden}
.hero__slide.is-on{transform:translate3d(0,0,0)}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.68) 100%)}
/* slide indicators */
/* centred along the base of the frame */
.hero__dots{position:absolute;left:0;right:0;bottom:clamp(2.2rem,4.5vw,4rem);z-index:3;
  display:flex;justify-content:center;gap:.8rem}
.hero__dot{width:48px;height:3px;padding:0;border:0;cursor:pointer;background:rgba(255,255,255,.4);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:background .5s var(--e),transform .5s var(--spring)}
.hero__dot:hover{background:rgba(255,255,255,.75);transform:scaleY(1.6)}
.hero__dot.is-on{background:#fff}
/* eight indicators have to fit a phone */
@media(max-width:560px){.hero__dots{gap:.5rem}.hero__dot{width:24px;height:2.5px}}
/* the mark, dead centre, with the line beneath it */
.hero__inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(1.1rem,2.4vw,2rem);
  padding:0 var(--pad);color:#fff;text-align:center}
/* the mark is the way into the collection — it grows and lights up on hover */
.hero__logo-link{display:inline-block;line-height:0;cursor:pointer;
  opacity:0;transform:translateY(14px) scale(.985);
  animation:markIn 1.15s var(--e) .15s forwards}
@keyframes markIn{to{opacity:1;transform:none}}
.hero__logo{width:min(52vw,500px);height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)) drop-shadow(0 14px 48px rgba(0,0,0,.45));
  transition:transform .55s var(--spring),filter .55s var(--e)}
.hero__logo-link:hover .hero__logo{transform:scale(1.055);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)) drop-shadow(0 14px 48px rgba(0,0,0,.4))
         drop-shadow(0 0 26px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.3))}
.hero__logo-link:active .hero__logo{transform:scale(1.02)}
.hero__tag{font-size:clamp(1.1rem,1.85vw,1.7rem);text-transform:uppercase;letter-spacing:.16em;
  font-weight:400;color:#fff;cursor:default;
  text-shadow:0 1px 3px rgba(0,0,0,.4),0 5px 26px rgba(0,0,0,.5),0 14px 60px rgba(0,0,0,.35)}
/* hover: each word lifts in sequence (reusing the reveal's per-word delay) */
.hero__tag .w > i{transition:transform .55s var(--spring)}
.hero__tag.in:hover .w > i{transform:translateY(-7px)}
@media(max-width:560px){.hero__logo{width:74vw}}
.hero__cue{position:absolute;left:var(--pad);bottom:clamp(2.2rem,5vw,4.5rem);width:1px;height:64px;
  background:rgba(255,255,255,.45);overflow:hidden;display:none}
.hero__cue::after{content:"";position:absolute;inset:0;background:#fff;
  animation:cue 2.4s var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:820px){.hero__cue{display:none}}

/* statement under the hero */
/* the statement — centred, set large, carrying the section on its own.
   Sits on the warm tone with the script bleeding off the right edge. */
.stmt{position:relative;overflow:hidden;background:var(--warm);
  padding:clamp(4rem,9vw,9rem) var(--pad);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(2rem,4vw,3.2rem)}
.stmt > *{position:relative;z-index:1;max-width:var(--maxw)}

/* the script, blown up and bleeding off the right edge — cropped by the
   section's overflow so it reads as a watermark, not a background image */
.mark-ghost{position:absolute;z-index:0;right:-15%;top:50%;transform:translateY(-50%);
  width:min(80vw,1150px);aspect-ratio:923/468;pointer-events:none;opacity:.035;
  background:url("../assets/logo-drivr-black.png") no-repeat center/contain}
@media(max-width:760px){.mark-ghost{right:-30%;width:120vw;opacity:.045}}
.stmt p{max-width:38ch;font-size:clamp(1.5rem,3.4vw,3.2rem);line-height:1.12;
  letter-spacing:-.035em;color:var(--fg)}
@media(max-width:820px){.stmt p{max-width:22ch}}

/* ---------- marquee statement ---------- */
/* white, so it reads as a clean band between the two tones */
.marquee{background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(1.1rem,2vw,1.8rem) 0;overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;will-change:transform;animation:marq 46s linear infinite}
.marquee span{font-size:clamp(1.6rem,4vw,3.4rem);letter-spacing:-.04em;font-weight:500;
  padding-right:.6em;display:inline-block}
.marquee em{font-style:normal;color:var(--mut)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vw,10rem) var(--pad)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(2.5rem,6vw,5rem)}
/* centred heading that sets the mark's script inline: THE Drivr COLLECTION */
.sec-head--mid{flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.2rem,2vw,1.8rem);text-align:center}
.lockup{display:flex;align-items:center;justify-content:center;
  gap:clamp(.5rem,1.4vw,1.4rem);flex-wrap:nowrap}
.lockup span{font-size:clamp(1.3rem,3.4vw,3rem);text-transform:uppercase;letter-spacing:.14em;
  font-weight:400;line-height:1;white-space:nowrap}
.lockup__mark{height:clamp(2.6rem,6.4vw,5.6rem);width:auto;display:block;
  margin-bottom:-.12em}
/* the masthead version — larger than the one on the home page */
.lockup--xl{justify-content:flex-start}
.lockup--xl span{font-size:clamp(1.6rem,4.6vw,4.2rem);letter-spacing:.12em}
.lockup--xl .lockup__mark{height:clamp(3.2rem,8.6vw,7.6rem)}
@media(max-width:560px){
  .lockup{gap:.4rem}
  .lockup span{letter-spacing:.08em}
  .lockup--xl span{letter-spacing:.05em}
}

/* ---------- brand ticker ---------- */
/* built as a list so manufacturer logos can drop straight in later */
.marquee__set{display:inline-flex;align-items:center;gap:clamp(1.4rem,3.2vw,3.4rem);
  padding-right:clamp(1.4rem,3.2vw,3.4rem)}
.marquee__set b{font-weight:400;font-size:clamp(1.2rem,2.8vw,2.3rem);
  text-transform:uppercase;letter-spacing:.18em;white-space:nowrap}
.marquee__set i{font-style:normal;color:var(--mut);font-size:.8em}

/* ---------- collection index grid ---------- */
.cars{display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(.8rem,1.6vw,1.6rem);row-gap:clamp(1.8rem,3.5vw,3.2rem)}
@media(min-width:760px){.cars{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.cars{grid-template-columns:repeat(4,1fr)}}
.item{display:block;position:relative}
.item__ph{position:relative;overflow:hidden;background:var(--well);aspect-ratio:4/5}
.item__media{position:absolute;inset:-4% 0;background-size:cover;background-position:center;
  transition:transform 1.1s var(--e),filter .6s var(--e);will-change:transform}
.item__ph .ph{position:absolute;inset:0;background:var(--well)}
.item__overlay{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.1rem;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--e),transform .5s var(--e)}
.item__overlay h3{color:#fff;font-size:.95rem;font-weight:400;letter-spacing:-.02em}
.item__label{margin-top:.75rem;font-size:.85rem;letter-spacing:-.01em;color:var(--fg-2)}
@media(hover:hover) and (min-width:761px){
  .item__label{display:none}
  /* the placeholder has no hover overlay, so it keeps its label */
  .item--soon .item__label{display:block}
  .item:hover .item__media{transform:scale(1.04);filter:brightness(.78)}
  .item:hover .item__overlay{opacity:1;transform:none}
}
@media(hover:none),(max-width:760px){
  .item__overlay{display:none}
  .item__label{display:block}
  .item:active .item__media{filter:brightness(.8)}
}
/* struck on the lower right of a sold car — double-ruled, set askew,
   sitting above the light sweep but outside the photo's zoom */
.item__stamp{position:absolute;z-index:3;
  right:clamp(1.1rem,2.2vw,2.4rem);
  /* lifted above the caption line so the longest car names never run into it */
  bottom:clamp(4.4rem,6.5vw,6.6rem);
  padding:.34em .6em;transform:rotate(-9deg);
  font-family:var(--plate);font-size:clamp(1.05rem,1.7vw,1.75rem);line-height:1;
  color:rgba(255,255,255,.94);
  border:2px solid rgba(255,255,255,.9);
  outline:1px solid rgba(255,255,255,.45);outline-offset:3px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  box-shadow:0 2px 16px rgba(0,0,0,.32);
  pointer-events:none}
.item__stamp i{display:block;font-style:normal;
  letter-spacing:.26em;margin-right:-.26em}   /* balance the trailing tracking */

.item--soon .item__media,.item--soon .ph{opacity:.5}
.item--soon .item__label{color:var(--mut)}

/* ---------- featured rail: landscape, three across, free scroll ---------- */
/* breaks out of the content column and runs the full width of the page */
.rail{position:relative;width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%)}
.cars--rail{--railgap:clamp(.8rem,1.6vw,1.6rem);
  display:flex;gap:var(--railgap);overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.25rem}
.cars--rail::-webkit-scrollbar{display:none}
.cars--rail .item{flex:0 0 calc((100% - (2 * var(--railgap))) / 3)}

/* ---------- the film treatment: landscape frame, standing caption,
   swap on hover, light sweep. Shared by the rail and the collection grid. */
.cars--film .item__ph{aspect-ratio:3/2}
.cars--film .item__overlay{opacity:0;transform:translateY(14px);display:block;
  padding:clamp(1.1rem,1.8vw,2rem);
  background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.7) 100%);
  transition:opacity 1s var(--e) .15s,transform 1s var(--e) .15s}
.cars--film .item.in .item__overlay{opacity:1;transform:none}
.cars--film .item__label{display:none}
/* the placeholder has no caption overlay, so it keeps its label */
.cars--film .item--soon .item__label{display:block;margin-top:.9rem}
/* second line: what's missing, in the quiet grey */
.item--soon .item__label span{display:block;margin-top:.35rem;
  font-size:.72em;letter-spacing:.14em;color:var(--mut)}
/* nothing to click, so don't offer a pointer */
.item--soon{cursor:default}
/* grid cards are narrower than the full-bleed rail — ease the caption down
   so the longest names still set on one line */
.cars--film:not(.cars--rail) .item__swap{font-size:clamp(1.05rem,1.75vw,1.6rem)}
/* landscape frames want fewer, larger columns than the old portrait grid */
@media(min-width:760px){.cars--film:not(.cars--rail){grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.cars--film:not(.cars--rail){grid-template-columns:repeat(3,1fr)}}

/* the caption swaps: name rides out, price + call to action rides in */
.item__swap{position:relative;overflow:hidden;height:1.06em;
  /* scaled so the longest name — 1986 Porsche 911 Turbo RSR Build — still sets
     on one line inside a card at every width */
  font-family:var(--plate);font-size:clamp(1.2rem,1.9vw,2.2rem);
  letter-spacing:.045em;line-height:1.06;color:#fff;white-space:nowrap}
/* two classes so this beats the base `.item__overlay h3` rule */
.item__swap .item__name,.item__swap .item__meta{display:block;margin:0;
  font-family:inherit;font-size:inherit;font-weight:400;line-height:inherit;
  letter-spacing:inherit;color:inherit;text-transform:none;
  text-shadow:0 1px 4px rgba(0,0,0,.55),0 4px 22px rgba(0,0,0,.45);
  transition:transform .55s var(--e),opacity .45s var(--e)}
.item__swap .item__meta{position:absolute;inset:0;transform:translateY(105%);opacity:0;
  display:flex;gap:1.1em;align-items:baseline}
.item__meta .go{opacity:.75}
.item:hover .item__name{transform:translateY(-105%);opacity:0}
.item:hover .item__meta{transform:none;opacity:1}

/* photograph: slow push in, with light travelling across the paintwork */
.cars--film .item__ph::after{content:"";position:absolute;inset:-20% -40%;z-index:1;
  pointer-events:none;opacity:0;
  background:linear-gradient(102deg,transparent 40%,rgba(255,255,255,.30) 50%,transparent 60%);
  transform:translateX(-70%)}
.cars--film .item:hover .item__media{transform:scale(1.06);filter:none}
/* the alternate angle: stacked on top, invisible until hover, then dissolved in.
   It carries .item__media too, so it inherits the same zoom. */
.item__media--alt{opacity:0;transition:opacity .7s var(--e),transform 1.1s var(--e)}
.cars--film .item:hover .item__media--alt{opacity:1}
.cars--film .item:hover .item__ph::after{opacity:1;transform:translateX(70%);
  transition:transform 1.1s var(--e),opacity .3s var(--e)}
@media(max-width:900px){.cars--rail .item{flex-basis:calc((100% - var(--railgap)) / 2)}}
@media(max-width:600px){.cars--rail .item{flex-basis:82%}}

/* dashboard turn-signal arrows, sitting on the edges of the photography */
.rail__arw{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  border:0;background:none;padding:0;line-height:0;cursor:pointer;
  animation:blinker 1.05s steps(1,end) infinite}
.rail__arw svg{width:clamp(38px,3.2vw,56px);height:auto;
  fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,158,27,.5))}
.rail__arw--l{left:clamp(.9rem,1.6vw,2rem)}
.rail__arw--l svg{transform:scaleX(-1)}
.rail__arw--r{right:clamp(.9rem,1.6vw,2rem)}
@keyframes blinker{0%,49%{opacity:1}50%,100%{opacity:.16}}
/* reaching for it holds the signal on */
.rail__arw:hover{animation:none;opacity:1;transform:translateY(-50%) scale(1.12)}
.rail__arw:active{transform:translateY(-50%) scale(.96)}
/* nothing further that way — the signal goes dark */
.rail__arw[disabled]{animation:none;opacity:.2;cursor:default}
.rail__arw[disabled] svg{stroke:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.rail__arw[disabled]:hover{transform:translateY(-50%) scale(1)}

/* ---------- full-screen showcase: white dissolves into the photograph ---------- */
.showcase{position:relative;width:100vw;margin-left:50%;transform:translateX(-50%);
  height:min(94svh,900px);min-height:520px;overflow:hidden;background:#fff}
.showcase__img{position:absolute;inset:-6% 0;background-size:cover;background-position:center 62%;
  will-change:transform}
/* the top third melts out of the white page; the base darkens for the type */
.showcase__veil{position:absolute;inset:0;pointer-events:none;
  background:
    /* the copy sits lower-left, so darken that corner */
    linear-gradient(78deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,0) 58%),
    /* the top melts out of the white page, the base grounds the type */
    linear-gradient(180deg,
      #fff 0%, rgba(255,255,255,.84) 9%, rgba(255,255,255,.36) 20%, rgba(255,255,255,0) 34%,
      rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%)}
.showcase__body{position:absolute;inset:auto 0 0 0;z-index:2;color:#fff;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(2.4rem,5vw,4.5rem)}
.showcase__body h2{font-size:clamp(1.7rem,4vw,3.4rem);max-width:16ch;
  text-shadow:0 1px 3px rgba(0,0,0,.4),0 5px 26px rgba(0,0,0,.5)}
.showcase__body p{margin:1.4rem 0 2rem;max-width:44ch;color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(0,0,0,.45)}
.showcase__body .btn{color:#fff}

/* ---------- split feature (service) ---------- */
.feature{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vw,9rem) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.feature__media{aspect-ratio:4/5;overflow:hidden;background:var(--well);position:relative}
.feature__media > div{position:absolute;inset:-5% 0;background-size:cover;background-position:center;
  will-change:transform}
.feature__text p{color:var(--fg-2);max-width:38ch;margin:1.5rem 0 2.4rem}
@media(max-width:820px){.feature{grid-template-columns:1fr;gap:2rem}.feature__media{aspect-ratio:4/3}}

/* ---------- page head ---------- */
.page-head{position:relative;overflow:hidden;max-width:var(--maxw);margin:0 auto;
  padding:calc(clamp(5rem,10vw,9rem) + 3rem) var(--pad) clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;border-bottom:1px solid var(--line)}
.page-head h1,.page-head p{position:relative;z-index:1}
.page-head--solo{grid-template-columns:1fr}
.page-head p{color:var(--fg-2);max-width:34ch}
@media(max-width:820px){.page-head{grid-template-columns:1fr;gap:1.4rem;align-items:start}}

/* ---------- car detail ---------- */
.detailwrap{position:relative;overflow:hidden;max-width:var(--maxw);margin:0 auto;
  padding:calc(clamp(5rem,10vw,9rem) + 1.5rem) var(--pad) clamp(4rem,9vw,8rem)}
.detailwrap > .back,.detailwrap > .detail,.detailwrap > .detail__missing{position:relative;z-index:1}
/* the watermark sits high on the page so it reads behind the title block */
.detailwrap .mark-ghost{top:34%}
.back{display:inline-block;font-size:.95rem;color:var(--fg-2);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.back:hover{opacity:.5}
.detail{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.gallery__stage{aspect-ratio:3/2;overflow:hidden;margin-bottom:.8rem;background:var(--warm);
  cursor:zoom-in}
/* contain, not cover — a portrait frame in a landscape stage would otherwise
   be cropped to a band. Every photo is shown whole. */
.gallery__main{width:100%;height:100%;background-size:contain;background-repeat:no-repeat;
  background-position:center;transition:opacity .5s var(--e)}
.gallery__main.fading{opacity:0}
/* a strip that grows with the set — auto-fit so three photos stay large
   and ten still fit on one line */
.gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:.55rem}
@media(max-width:560px){.gallery__thumbs{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}}
.gallery__thumb{padding:0;border:0;background:none;cursor:pointer;aspect-ratio:3/2;overflow:hidden;
  opacity:.35}
.gallery__thumb:hover{opacity:.65}
.gallery__thumb.is-on{opacity:1}
.gallery__timg{width:100%;height:100%;background-size:cover;background-position:center}
.detail__info{position:sticky;top:clamp(5.5rem,9vw,7.5rem)}
@media(max-width:900px){.detail__info{position:static}}
.detail__price{font-size:1.15rem;letter-spacing:-.02em;margin:1rem 0 2rem;color:var(--fg-2)}
.detail__desc{color:var(--fg-2);margin-bottom:2.8rem;max-width:44ch}
.detail__h2{font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--mut);margin-bottom:1rem}
.spectable{border-top:1px solid var(--line);margin-bottom:2.8rem}
.spectable > div{display:flex;justify-content:space-between;gap:1.5rem;padding:.95rem 0;
  border-bottom:1px solid var(--line-2)}
.spectable dt{color:var(--mut)}
.spectable dd{text-align:right}
.detail__actions{display:flex;gap:2rem;flex-wrap:wrap;align-items:center}
.detail__missing{padding:6rem 0}
.detail__missing p{margin-top:1rem;color:var(--fg-2)}
.detail__missing a{border-bottom:1px solid var(--fg)}
.detail__missing a:hover{opacity:.5}

/* ---------- service list ---------- */
.svc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem)}
@media(max-width:820px){.svc-list{grid-template-columns:1fr;gap:2.5rem}}
.svc{border-top:1px solid var(--fg);padding-top:1.5rem}
.svc h3{font-size:clamp(1.15rem,1.6vw,1.4rem);margin-bottom:.9rem}
.svc p{color:var(--fg-2)}
.svc-cta{margin-top:clamp(3rem,6vw,6rem);border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem);
  display:flex;gap:clamp(1.5rem,3vw,3rem);align-items:center;flex-wrap:wrap}

/* ---------- inquire ---------- */
/* the closing section takes the warm tone back up again */
#inquire{background:var(--warm);max-width:none}
#inquire > .inq{max-width:var(--maxw);margin:0 auto}
.inq{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
@media(max-width:900px){.inq{grid-template-columns:1fr;gap:2.5rem}}
.inq__head{max-width:16ch;margin-bottom:1.8rem}
.inq__phone{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.035em;display:inline-block}
.inq__phone:hover{opacity:.5}
.form{display:flex;flex-direction:column;gap:0}
.field{position:relative;padding-top:1.9rem}
.field label{position:absolute;top:0;left:0;font-size:.82rem;color:var(--mut);letter-spacing:-.01em}
/* proper boxes — white fields on the warm ground, hairline ruled */
.field input,.field select,.field textarea{width:100%;background:#fff;
  border:1px solid var(--line);border-radius:0;font-family:var(--sans);
  font-size:1.02rem;letter-spacing:-.01em;color:var(--fg);padding:.85rem 1rem;
  transition:border-color .35s var(--e),box-shadow .35s var(--e)}
.field input::placeholder,.field textarea::placeholder{color:#b9b9b9}
/* focus doubles the rule rather than adding a colour */
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.field textarea{resize:vertical;min-height:8.5rem}
.field select{appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:11px 7px}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
@media(max-width:560px){.field--row{grid-template-columns:1fr}}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.field__err{display:none;font-size:.82rem;color:var(--fg-2);margin-top:.5rem}
.field.is-invalid .field__err{display:block}
.form__foot{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:2.6rem}
.form__note{font-size:.9rem;color:var(--fg-2);max-width:46ch;line-height:1.5}
.form__note a{border-bottom:1px solid currentColor}
.form__note a:hover{opacity:.55}
.form__done{padding:3rem 0;border-top:1px solid var(--fg)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;gap:clamp(.5rem,2vw,2.2rem);
  padding:clamp(1rem,4vw,3rem);
  background:rgba(14,14,14,.6);
  backdrop-filter:blur(26px) saturate(115%);
  -webkit-backdrop-filter:blur(26px) saturate(115%)}
.lb.is-on{display:flex;animation:lbIn .35s var(--e)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__img{max-width:min(90vw,1600px);max-height:86svh;width:auto;height:auto;
  object-fit:contain;background:#141414;box-shadow:0 40px 130px rgba(0,0,0,.55)}
.lb__x{position:absolute;top:clamp(.6rem,2vw,1.6rem);right:clamp(.6rem,2vw,1.6rem);
  width:46px;height:46px;border:0;background:none;cursor:pointer;
  color:#fff;font-size:2rem;line-height:1;opacity:.75}
.lb__x:hover{opacity:1}
.lb__nav{flex:0 0 auto;border:0;background:none;padding:.4rem;cursor:pointer;opacity:.7}
.lb__nav:hover{opacity:1}
.lb__nav svg{width:clamp(26px,3vw,44px);height:auto;
  fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lb__count{position:absolute;left:0;right:0;bottom:clamp(.8rem,2.4vw,1.8rem);text-align:center;
  color:rgba(255,255,255,.7);font-size:.82rem;letter-spacing:.18em}
/* on a phone the arrows drop below the photo rather than squeezing it */
@media(max-width:700px){
  .lb__nav{position:absolute;bottom:2.8rem}
  .lb__nav--prev{left:1.2rem}
  .lb__nav--next{right:1.2rem}
  .lb__img{max-width:96vw}
}

/* ---------- footer ---------- */
.site-footer{background:var(--warm-2);border-top:1px solid var(--line)}
.foot{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,6vw,5rem) var(--pad) 2rem;
  display:grid;grid-template-columns:1.4fr .6fr;gap:2.5rem;align-items:start}
@media(max-width:760px){.foot{grid-template-columns:1fr;gap:2rem}}
.foot__logo{width:clamp(160px,18vw,260px);height:auto}
.foot__tag{color:var(--fg-2);margin-top:1.8rem;max-width:28ch}
.foot__soon{color:var(--mut);margin-top:.7rem}
.foot__nav{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
@media(min-width:761px){.foot__nav{align-items:flex-end}}
.foot__nav a:hover{opacity:.5}
.foot__legal{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem;padding:1.6rem var(--pad);border-top:1px solid var(--line-2);
  font-size:.85rem;color:var(--mut)}

/* ============================================================
   Block lettering — everything set the way the hero line is:
   uppercase, tracked out, light weight. Tracking eases off as
   the type gets bigger so large caps don't fall apart.
   ============================================================ */
h1,h2,h3,h4,
.brand,.nav__link,.nav__phone,.btn,.back,
.t-hero,.t-xl,.t-lg,.t-md,
.sec-head h2,.page-head h1,.marquee span,
.item__label,.item__overlay h3,
.detail__title,.detail__price,.detail__h2,.spectable dt,.spectable dd,
.svc h3,.svc-cta p,
.inq__head,.inq__phone,.field label,.form__done,.form__note,
.foot__nav a,.foot__legal,.foot__soon,
.hero__tag{
  text-transform:uppercase;
  font-weight:400;
}
/* large display */
h1,h2,.t-hero,.t-xl,.t-lg,.sec-head h2,.page-head h1,
.detail__title,.inq__head,.form__done,.detail__missing h1{letter-spacing:.07em}
/* mid */
h3,h4,.t-md,.btn,.svc h3,.svc-cta p,.item__overlay h3,
.inq__phone,.marquee span,.detail__price{letter-spacing:.12em}
/* small */
.item__label,.field label,.foot__legal,.foot__soon,.foot__nav a,
.form__note,.back,.detail__h2{letter-spacing:.16em}
/* spec values are long strings — less tracking so they don't wrap badly */
.spectable dt,.spectable dd{letter-spacing:.1em;font-size:.88rem}
/* the closed select should read like the labels around it */
.field select{text-transform:uppercase;letter-spacing:.12em;font-size:.92rem}
/* tracked caps need more air between lines */
h1,h2,.t-hero,.t-xl,.t-lg{line-height:1.1}
.hero__tag{line-height:1.3}
.inq__head{max-width:22ch}
.item__label{font-size:.78rem}
.spectable dd{text-align:right}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important;animation-delay:0ms!important}
  .reveal{opacity:1;transform:none}
  .w > i{transform:none}
  .marquee__track{animation:none}
  .hero__cue{display:none}
  body.is-leaving{opacity:1}
}