/* =============================================================
   DIRECT CLASSICS
   Light editorial theme drawn from the logo: chrome, cyan, paper.

   Colour system
   -------------
   True black, because the logo is white artwork on a black field:
   on #000 its background is simply invisible, so the mark drops in
   anywhere without needing a transparent export.

   Surfaces the logo touches — nav, hero, footer — are pure black.
   Panels lift a step off it so cards read as objects. One cyan does
   all the work here: on black it measures better than 7:1, so it is
   safe for text, rules and fills alike.

   Token names are kept from the light build (--paper, --ink) so the
   component rules did not need rewriting; only the values changed.

   1  Tokens            6  Hero
   2  Reset & base      7  Sections
   3  Typography        8  Footer
   4  Buttons           9  Modal & toast
   5  Nav              10  Motion & responsive
   11 WordPress
   ============================================================= */

/* ---------- 1 · TOKENS ------------------------------------- */
:root{
  /* Brand — sampled from the mark */
  --cyan:#1cade4;          /* the logo blue; 7.5:1 on black        */
  --cyan-ink:#1cade4;      /* same value: no darkening needed here */
  --cyan-dark:#5fc9f2;     /* hover lifts rather than deepens      */
  --cyan-soft:#08222e;
  --chrome:#cdd4d9;
  --chrome-dim:#7d878e;
  --on-cyan:#04161f;       /* text on a cyan fill                  */

  /* Grounds */
  --paper:#000000;         /* the logo's own field                 */
  --paper-2:#080b0d;
  --card:#0f1418;
  --ink:#eef2f5;
  --ink-2:#97a3ab;
  --rule:#1f272d;

  --deep:#000000;
  --deep-2:#0f1418;

  /* Semantic — re-pointed inside .on-deep */
  --bg:var(--paper);
  --surface:var(--card);
  --text:var(--ink);
  --text-2:var(--ink-2);
  --line:var(--rule);
  --accent:var(--cyan-ink);
  --accent-2:var(--cyan-dark);
  --on-accent:var(--on-cyan);
  --shadow:0 0 0;

  /* Type */
  --f-display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --f-body:"Spectral",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --t-hero:clamp(2.3rem, 4.6vw, 4.1rem);
  --t-h2:clamp(2rem, 4.4vw, 3.6rem);
  --t-h3:clamp(1.15rem, 1.6vw, 1.4rem);
  --t-body:clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
  --t-small:0.85rem;
  --t-mono:0.72rem;

  /* Space */
  --pad:clamp(1.15rem, 4vw, 3.5rem);
  --gap:clamp(1.5rem, 3vw, 2.75rem);
  --sec:clamp(4.5rem, 11vh + 4vw, 9rem);
  --wrap:1280px;
  --nav-h:122px;   /* all three overridden per-site from the Customizer */
  --logo-h:88px;
  --logo-scale:1;

  --r:3px;
  --ease:cubic-bezier(.2,.7,.2,1);

  --z-canvas:0; --z-overlay:10; --z-nav:30; --z-modal:50; --z-toast:60;
}

/* Kept as a hook: every surface is already dark, so it only ensures
   anything dropped inside nav or footer inherits the right colour. */
.on-deep{color:var(--ink)}

/* ---------- 2 · RESET & BASE -------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--t-body)/1.65 var(--f-body);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* A whisper of warmth in the paper, and a faint tooth to the stock. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(80% 50% at 50% -8%, rgba(28,173,228,.10) 0%, transparent 62%),
    radial-gradient(60% 45% at 92% 104%, rgba(28,173,228,.06) 0%, transparent 60%);
}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer}
a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:.22em}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--cyan);color:var(--on-cyan)}

.wrap{width:min(var(--wrap), 100% - (var(--pad) * 2));margin-inline:auto}
.section{padding-block:var(--sec);position:relative}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:var(--pad);top:-100px;z-index:100;
  display:inline-flex;align-items:center;min-height:44px;
  padding:.85rem 1.2rem;background:var(--cyan);color:var(--on-cyan);
  font:700 var(--t-mono)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* ---------- 3 · TYPOGRAPHY --------------------------------- */
.h-display,h1,h2,h3{
  font-family:var(--f-display);font-weight:500;
  letter-spacing:-.004em;line-height:1.06;text-transform:none;
  margin:0;color:var(--text);text-shadow:none;
  font-variation-settings:"opsz" 72;
}
h3,.card__title,.pillar__title{font-weight:500;font-variation-settings:"opsz" 28}
h2.h-display,.h-display{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:0}
p{margin:0 0 1.15em}
.lede{font-size:calc(var(--t-body) * 1.16);line-height:1.55;color:var(--text)}
.mono{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase}

.eyebrow{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}

.section__head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4.25rem)}
.section__head--split{display:grid;gap:var(--gap);grid-template-columns:1fr;max-width:none;align-items:end}
.section__lede{color:var(--text-2);font-size:calc(var(--t-body) * 1.05);margin:1.4rem 0 0;max-width:52ch}

.pull{
  margin:2rem 0;padding:1.4rem 0 1.4rem 1.6rem;
  border-left:2px solid var(--cyan);
  font:italic 300 calc(var(--t-body) * 1.22)/1.5 var(--f-body);
  color:var(--text);
}
.pull cite{display:block;margin-top:.9rem;font:400 var(--t-mono)/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);font-style:normal}

.section + .section::before{
  content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}

/* ---------- 4 · BUTTONS ------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.9rem 1.5rem;
  font:700 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--r);
  text-decoration:none;text-align:center;
  transition:transform .28s var(--ease), background-color .28s var(--ease),
             border-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn--brass{
  background:var(--cyan);color:var(--on-cyan);border-color:var(--cyan);
  box-shadow:0 0 24px -8px rgba(28,173,228,.55);
}
.btn--brass:hover{background:var(--cyan-dark);border-color:var(--cyan-dark);transform:translateY(-2px);box-shadow:0 0 30px -6px rgba(28,173,228,.7)}
.btn--ghost{color:var(--text);border-color:var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
/* A secondary jump, not an action: smaller and quieter than the two
   enquiry buttons above it so it cannot compete with them. */
.btn--mini{
  padding:.5rem 1rem;min-height:0;
  font-size:.6rem;letter-spacing:.16em;
  color:var(--text-2);border-color:var(--line);background:transparent;
}
.btn--mini:hover{color:var(--accent);border-color:var(--accent);transform:none}
.car__more{margin:.75rem 0 0}

.btn--soon{color:var(--text-2);border-style:dashed;border-color:var(--line)}
.btn--soon:hover{color:var(--text);border-color:var(--text-2)}
.btn:active{transform:translateY(0)}

.soon-tag{
  font:400 .58rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  padding:.32em .5em;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  color:var(--accent);border-radius:2px;white-space:nowrap;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}

/* ---------- 5 · NAV ---------------------------------------- */
/* Deep bar throughout, because the mark is white artwork. Over the
   hero it starts transparent and settles into the bar on scroll. */
.nav{
  position:fixed;inset:0 0 auto;z-index:var(--z-nav);
  background:var(--deep);
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;opacity:1;
  background:linear-gradient(90deg,transparent,rgba(199,206,211,.22) 20%,var(--cyan) 50%,rgba(199,206,211,.22) 80%,transparent);
  transition:opacity .5s var(--ease);
}
.nav.is-scrolled{box-shadow:0 1px 0 rgba(255,255,255,.04)}
.nav__inner{
  width:min(var(--wrap), 100% - (var(--pad) * 2));margin-inline:auto;
  min-height:var(--nav-h);display:flex;align-items:center;gap:1.5rem;
}
.nav__brand{min-width:0}
.nav__brand-fallback{font-family:var(--f-display);font-size:1.2rem;letter-spacing:.04em;color:var(--ink)}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav__link{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.5rem .85rem;
  font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:#9aa5ac;border-radius:var(--r);text-decoration:none;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav__link:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav__link.is-current{color:var(--cyan)}
.nav__cta{margin-left:.6rem;min-height:44px;padding:.7rem 1.15rem;color:var(--ink);border-color:rgba(205,212,217,.28);background:transparent}
.nav__cta:hover{color:var(--cyan);border-color:var(--cyan)}
.nav__toggle{display:none;margin-left:auto;width:46px;height:46px;place-items:center;border:1px solid rgba(199,206,211,.3);border-radius:var(--r)}
.nav__toggle-bars{display:grid;gap:5px;width:20px}
.nav__toggle-bars i{height:1px;background:#eef1f3;transition:transform .3s var(--ease)}
.nav__toggle[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- 6 · HERO --------------------------------------- */
/* A bright studio, not a garage. The car is the darkest thing here. */
.hero{position:relative}
.hero__scroll{height:520vh;position:relative}
.hero__stage{
  position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;
  display:block;isolation:isolate;
  background:
    radial-gradient(85% 65% at 60% 36%, #14191d 0%, #080b0d 48%, #000000 100%);
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-canvas);
  touch-action:pan-y;cursor:grab;transition:filter .8s var(--ease);
}
.hero__canvas.is-dragging{cursor:grabbing}
.hero__canvas.is-blueprint{filter:grayscale(1) contrast(1.12) brightness(1.18)}

/* Soft floor haze + a light wash under the copy so text stays crisp. */
.hero__stage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.5) 15%, transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 34%, transparent 58%);
}
@media (max-width:700px){
  .hero__stage::after{
    background:linear-gradient(0deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.4) 62%, transparent 80%);
  }
}

.hero__fallback{position:absolute;inset:0;display:grid;place-items:center;padding:var(--pad);color:var(--chrome-dim);opacity:.75}
.hero__fallback svg{width:min(90%,760px)}

.hero__dims{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.hero__dims.is-on{opacity:1}
.dims__lines line{stroke:var(--cyan-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.dims__lines line.dim-line{stroke-width:1.25}
.dims__frame path{stroke:var(--chrome-dim);stroke-width:1;fill:none;opacity:.55}
.dims__labels text{font:400 10px var(--f-mono);letter-spacing:.16em;fill:var(--cyan-ink);text-transform:uppercase;text-anchor:middle}
.dims__title text{font:400 9px var(--f-mono);letter-spacing:.2em;fill:var(--ink-2);opacity:.7;text-transform:uppercase}

.hero__content{
  position:absolute;z-index:var(--z-overlay);
  left:var(--pad);bottom:clamp(9.5rem,17vh,12rem);
  width:min(34rem, calc(100% - (var(--pad) * 2)));
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.hero__content.is-gone{visibility:hidden}
.hero__title{display:block;font-size:inherit}
.hero__wordmark{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(2rem,3.6vw,3rem);letter-spacing:.06em;line-height:1;
  color:var(--ink);margin-bottom:.55rem;
}
.hero__strap{
  display:block;font:500 .68rem/1 var(--f-mono);letter-spacing:.36em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:clamp(1.4rem,3vw,2.2rem);
}
.hero__wordmark.visually-hidden + .hero__strap{margin-top:0}
.hero__tagline{
  display:block;font-family:var(--f-display);font-size:var(--t-hero);line-height:1.05;
  color:var(--ink);letter-spacing:-.01em;
}
.hero__sub{margin:1.3rem 0 1.9rem;max-width:34ch;color:var(--ink-2);font-size:calc(var(--t-body) * 1.02)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}

.spec{
  position:absolute;left:0;right:0;bottom:0;z-index:var(--z-overlay);
  border-top:1px solid var(--rule);
  background:color-mix(in srgb,#000 72%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.spec__row{
  width:min(var(--wrap), 100% - (var(--pad) * 2));margin-inline:auto;
  display:flex;gap:clamp(1rem,3.4vw,3.5rem);align-items:center;
  padding:.85rem 0 .8rem;overflow:hidden;
}
.spec__cell{display:flex;flex-direction:column;gap:.34rem;min-width:0}
.spec__cell i{font:400 .6rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);font-style:normal}
.spec__cell b{
  font:700 var(--t-mono)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;
}
.spec__cell:first-child b{color:var(--cyan-ink)}
.spec__bar{display:block;height:2px;background:var(--rule)}
.spec__bar span{display:block;height:100%;width:0;background:var(--cyan)}

.hero__cue{
  position:absolute;z-index:var(--z-overlay);right:var(--pad);bottom:clamp(6.2rem,10vh,7.5rem);
  margin:0;display:flex;align-items:center;gap:.75rem;
  font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
  transition:opacity .4s var(--ease);
}
.hero__cue i{width:1px;height:34px;background:linear-gradient(180deg,var(--cyan),transparent);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;inset:0;background:var(--cyan);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.hero__drag{
  position:absolute;z-index:var(--z-overlay);right:var(--pad);top:calc(var(--nav-h) + 1.4rem);margin:0;
  font:400 .62rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
  opacity:0;transition:opacity .5s var(--ease);
}
.hero__drag.is-on{opacity:.8}
.hero__cue.is-off{opacity:0}

/* ---------- 7 · SECTIONS ----------------------------------- */
.intro__grid{display:grid;gap:var(--gap) clamp(2rem,6vw,5rem);grid-template-columns:1fr}
.intro__title{grid-column:1}
.intro__marks{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:.9rem}
.intro__marks li{
  display:flex;gap:1rem;align-items:baseline;padding-top:.9rem;border-top:1px solid var(--rule);
  font:400 var(--t-small)/1.5 var(--f-mono);letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase;
}
.intro__marks b{color:var(--cyan-ink);font-weight:700;flex:none}

.pillars{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,1.6vw,1.4rem);grid-template-columns:1fr}
.pillar{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.4vw,2.1rem);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
}
.pillar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--cyan);opacity:0;transition:opacity .4s var(--ease);
}
.pillar:hover,.pillar:focus-within{
  transform:translateY(-4px);border-color:color-mix(in srgb,var(--cyan) 40%,var(--rule));
  box-shadow:0 0 0 1px rgba(28,173,228,.10);
}
.pillar:hover::before,.pillar:focus-within::before{opacity:1}
.pillar__no{position:absolute;top:1.1rem;right:1.2rem;font:700 .68rem/1 var(--f-mono);letter-spacing:.2em;color:var(--chrome-dim)}
.pillar__icon{display:block;width:52px;height:52px;color:var(--cyan-ink);margin-bottom:1.35rem}
.pillar__icon svg{width:100%;height:100%}
.pillar__title{margin:0 0 .8rem;font-size:clamp(1.3rem,1.8vw,1.6rem)}
.pillar__copy{color:var(--ink-2);font-size:calc(var(--t-body) * .96);margin-bottom:1.3rem}
.pillar__meta{margin:0 0 1.6rem;display:grid;gap:.55rem}
.pillar__meta div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.55rem;border-bottom:1px solid var(--rule)}
.pillar__meta dt,.pillar__meta dd{margin:0;font:400 .68rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.pillar__meta dt{color:var(--chrome-dim)}
.pillar__meta dd{color:var(--ink);text-align:right}
.pillar__cta{margin-top:auto;width:100%}

/* A second way in, under the button rather than beside it: the button is the
   decision, this is the reading. Underlined because on a panel already full of
   uppercase mono, a link that is only a colour does not read as one. */
/* The auto margin moves to the aside when there is one, so the pair sits at
   the foot of the panel together and the button stays flush with the buttons
   either side of it. */
.pillar:has(.pillar__aside) .pillar__cta{margin-top:.55rem}
.pillar__aside{margin:auto 0 0;text-align:center;font-size:.82rem}
/* Padded to a 24px target. It is a standalone link, not one sitting inside a
   sentence, so the inline exception does not cover it. */
.pillar__aside a{
  display:inline-block;padding:.45rem .3rem;
  color:var(--text-2);text-decoration:underline;text-underline-offset:3px;
}
.pillar__aside a:hover{color:var(--cyan-ink)}

/* The foot of the Collection, offered to somebody who did not find their car
   here and may well own one we are after. */
.collection__sell{
  margin:clamp(2rem,4vw,3rem) 0 0;padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--rule);text-align:center;
}
.collection__sell a{
  display:inline-block;
  font:400 var(--t-mono)/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--ink-2) 50%,var(--rule));
  padding:.3rem .3rem .35rem;
}
.collection__sell a:hover{color:var(--cyan-ink);border-bottom-color:var(--cyan)}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,1.8vw,1.6rem);grid-template-columns:1fr}
.card{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover,.card:focus-within{transform:translateY(-6px);border-color:color-mix(in srgb,var(--cyan) 40%,var(--rule));box-shadow:0 0 0 1px rgba(28,173,228,.12)}
.card__art{
  position:relative;padding:clamp(1.6rem,3vw,2.4rem);
  background:linear-gradient(160deg,#0d1216,#070a0c);
  border-bottom:1px solid var(--rule);color:var(--chrome-dim);
}
.card__body{padding:clamp(1.3rem,2vw,1.75rem);flex:1}
.card__kicker{font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-ink);margin:0 0 .8rem}
.card__title{font-size:clamp(1.25rem,1.8vw,1.55rem);margin:0 0 1.2rem}
.card__spec{margin:0;display:grid;gap:.5rem}
.card__spec div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
.card__spec dt,.card__spec dd{margin:0;font:400 .68rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.card__spec dt{color:var(--chrome-dim)}
.card__spec dd{color:var(--ink)}
.card__link{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1.05rem clamp(1.3rem,2vw,1.75rem);min-height:52px;
  border-top:1px solid var(--rule);text-decoration:none;
  font:700 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.card__link:hover{color:var(--cyan-ink);background:var(--cyan-soft)}
.collection__foot{margin:clamp(2.2rem,4vw,3.2rem) 0 0;text-align:center}

.story{background:linear-gradient(180deg,transparent,var(--paper-2) 30%,transparent)}
.story__grid{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;align-items:start}
.story__frame{
  position:relative;padding:clamp(1rem,2vw,1.4rem);
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  box-shadow:0 0 0 1px rgba(28,173,228,.08);
}
.story__frame::before,.story__frame::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--cyan);opacity:.8}
.story__frame::before{top:7px;left:7px;border-right:0;border-bottom:0}
.story__frame::after{bottom:7px;right:7px;border-left:0;border-top:0}
.story__photo{width:100%;height:auto;border-radius:2px}
.story__tag{display:block;margin-top:1rem;text-align:center;font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.story__text .h-display{margin-bottom:1.4rem}
.story__text p{color:var(--ink-2)}
.story__text .lede{color:var(--ink)}
.story__steps{list-style:none;margin:2.2rem 0;padding:0;display:grid;gap:0;grid-template-columns:repeat(2,1fr)}
.story__steps li{padding:1rem 1rem 1rem 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:.35rem}
.story__steps b{font:400 1.05rem/1 var(--f-display);letter-spacing:.02em;color:var(--cyan-ink)}
.story__steps span{font:400 .68rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

.process{background:var(--paper-2)}
.process__list{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:1fr}
.process__step{position:relative;padding:clamp(1.8rem,3vw,2.6rem) 0}
.process__step + .process__step{border-top:1px solid var(--rule)}
.process__no{
  display:block;font:400 clamp(2.6rem,5vw,4rem)/1 var(--f-display);
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--cyan) 60%,transparent);
  margin-bottom:.7rem;
}
.process__title{font-size:clamp(1.4rem,2.4vw,2rem);margin:0 0 .85rem}
.process__step p{color:var(--ink-2);max-width:42ch;margin:0;font-size:calc(var(--t-body) * .96)}

/* ---------- 8 · FOOTER ------------------------------------- */
.foot{position:relative;padding-block:var(--sec) clamp(2rem,4vw,3rem);background:var(--deep)}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan) 50%,transparent)}
.foot__top{display:grid;gap:clamp(2.4rem,5vw,4rem);grid-template-columns:1fr}
.foot__logo-fallback{display:block;font-family:var(--f-display);font-size:1.6rem;letter-spacing:.04em;color:var(--ink);text-decoration:none;margin-bottom:1rem}
.foot__line{color:#9aa5ac;max-width:38ch;font-size:calc(var(--t-body) * .95);margin-bottom:1.6rem}
.foot__cols{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:1fr}
.foot__col h3{font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin:0 0 1.2rem}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.foot__col li button,.foot__col li a{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.35rem 0;
  font:400 var(--t-small)/1.4 var(--f-body);color:#9aa5ac;text-decoration:none;
  transition:color .25s var(--ease);
}
.foot__col li button:hover,.foot__col li a:hover{color:#fff}
.foot__col address{font-style:normal;color:#9aa5ac;font-size:var(--t-small);line-height:1.7;margin-bottom:1rem}
.foot__contact a{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--chrome)}
.foot__social{display:flex!important;flex-wrap:wrap;gap:.9rem!important;margin-top:.8rem!important}
/* A one-letter name like X gives a link 11px of width to hit. The label is
   not the target; the box around it is, and that box gets a thumb's worth
   of width as well as height. */
.foot__social a,.foot__social button{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  justify-content:center;min-width:44px;padding:0 .25rem;
}

/* ---------- the footer plate --------------------------------

   The footer is pressed like a number plate — and specifically a
   pre-1973 one: black ground, silver characters, no blue band. That
   is the plate a car built before 1973 is entitled to wear, so it is
   the plate that would actually be on the cars this site sells, and
   it lands in the existing palette instead of fighting it with DVLA
   yellow.

   The small print sits along the bottom edge, where a real plate
   carries its supplier and standards marking.
   ------------------------------------------------------------- */

.plate{
  position:relative;
  margin-top:clamp(1rem,3vw,2rem);
  padding:clamp(2rem,5vw,3.4rem) clamp(1.4rem,4vw,3rem) clamp(1.1rem,2.5vw,1.6rem);
  border-radius:clamp(10px,1.6vw,18px);
  border:1px solid rgba(199,206,211,.2);
  /* The ground stays true black. The whole theme depends on that: the logo
     is white artwork on a black plate of its own, and on anything lighter
     that plate reappears as a box around the mark — including under any
     brushed-metal sheen, however faint. The metal has to come from the rim,
     the rivets and the edge highlights instead, and it does. */
  background:#000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.9),
    0 18px 40px rgba(0,0,0,.55);
}

/* The raised inner rim of a pressed plate. */
.plate::before{
  content:"";
  position:absolute;
  inset:clamp(7px,1.1vw,12px);
  border:1px solid rgba(199,206,211,.13);
  border-radius:clamp(5px,1vw,10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  pointer-events:none;
}

/* Light raking across the ends.

   A pressed plate has a rolled edge, and a rolled edge catches the light
   along its length — brightest where it faces you, falling away towards the
   corners. Two one-pixel gradients on the rim do it. They sit on the rim
   rather than on the ground, which matters: any lift across the plate's
   surface would bring back the black box around the logo. */
.plate::after{
  content:"";
  position:absolute;
  inset:clamp(7px,1.1vw,12px);
  border-radius:clamp(5px,1vw,10px);
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:1px 100%, 1px 100%, 100% 1px;
  background-position:left center, right center, center top;
  background-image:
    linear-gradient(to bottom, transparent 0%, rgba(214,226,234,.30) 22%, rgba(232,241,246,.62) 50%, rgba(214,226,234,.30) 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(214,226,234,.30) 22%, rgba(232,241,246,.62) 50%, rgba(214,226,234,.30) 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(232,241,246,.22) 30%, rgba(232,241,246,.34) 50%, rgba(232,241,246,.22) 70%, transparent 100%);
}

/* A specular pin on each rivet, so they read as domed metal rather than dots. */
.plate__rivets i{
  box-shadow:0 0 3px rgba(199,206,211,.35), inset 0 -1px 1px rgba(0,0,0,.5);
}

.plate__rivets i{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#c7ced3,#5a636a 70%,#2b3238);
}
.plate__rivets i:nth-child(1){top:clamp(14px,2vw,20px);left:clamp(14px,2vw,20px)}
.plate__rivets i:nth-child(2){top:clamp(14px,2vw,20px);right:clamp(14px,2vw,20px)}
.plate__rivets i:nth-child(3){bottom:clamp(14px,2vw,20px);left:clamp(14px,2vw,20px)}
.plate__rivets i:nth-child(4){bottom:clamp(14px,2vw,20px);right:clamp(14px,2vw,20px)}

.plate__reg{
  margin-top:clamp(2.4rem,6vw,4rem);
  padding-top:clamp(1.6rem,4vw,2.4rem);
  border-top:1px solid rgba(199,206,211,.12);
  text-align:center;
}

.plate__chars{
  display:inline-block;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem,8.5vw,4.4rem);
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  /* Fallback first: without background-clip the gradient never paints, and a
     transparent colour would leave the registration invisible. */
  color:#dfe5e9;
  text-shadow:0 2px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,255,255,.16);
}

@supports (-webkit-background-clip:text) or (background-clip:text){
  .plate__chars{
    background:linear-gradient(180deg,#ffffff 0%,#dbe1e6 38%,#8d969d 56%,#f0f4f6 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.28)) drop-shadow(0 -2px 2px rgba(0,0,0,.95));
  }
}

.vin{
  position:relative;margin-top:clamp(3rem,6vw,4.5rem);padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.4rem,3vw,2.4rem);
  border:1px solid rgba(199,206,211,.28);border-radius:2px;
  background:
    repeating-linear-gradient(94deg, rgba(199,206,211,.05) 0 1px, transparent 1px 4px),
    linear-gradient(172deg,#232c33,#161d23 60%,#1d252c);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
}
/* One plate, not two. Inside the footer plate the VIN block loses its own
   rivets and reads as an engraved panel rather than a second thing bolted
   over the first. */
.plate .vin{
  margin-top:clamp(2rem,4vw,3rem);
  background:linear-gradient(172deg,#080b0e,#040709 60%,#070a0d);
  border-color:rgba(199,206,211,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.plate .vin__rivets{display:none}

.vin__rivets i{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#c7ced3,#5a636a 70%,#2b3238)}
.vin__rivets i:nth-child(1){top:8px;left:8px}
.vin__rivets i:nth-child(2){top:8px;right:8px}
.vin__rivets i:nth-child(3){bottom:8px;left:8px}
.vin__rivets i:nth-child(4){bottom:8px;right:8px}
.vin__grid{margin:0;display:grid;gap:.9rem 1.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.vin__grid div{display:flex;flex-direction:column;gap:.35rem}
.vin__grid dt{font:400 .58rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:#8b949b}
.vin__grid dd{margin:0;font:700 .74rem/1 var(--f-mono);letter-spacing:.14em;color:var(--chrome)}
/* Inside the plate this is the supplier legend along the bottom edge —
   small, centred, no rule above it, because the pressed rim already
   divides the plate from the registration. */
.foot__legal{
  margin:clamp(1.4rem,3vw,2rem) 0 0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;
  font-family:var(--f-mono);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:#6d767d;text-align:center;
}

/* ---------- 9 · MODAL & TOAST ------------------------------ */
.modal{
  width:min(660px, calc(100% - 1.6rem));max-height:min(90dvh,900px);
  padding:0;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);color:var(--ink);overflow:auto;
  box-shadow:0 0 0 1px rgba(28,173,228,.10), 0 40px 90px -40px #000;
}
.modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(6px)}
.modal:not([open]){display:none}
.modal.is-open{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--z-modal);display:block}
.modal__inner{padding:clamp(1.5rem,3.5vw,2.6rem)}
.modal__head{position:relative;padding-right:3rem;margin-bottom:1.6rem}
.modal__title{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.7rem;text-wrap:balance}
.modal__lede{color:var(--ink-2);margin:0;font-size:calc(var(--t-body) * .95)}
.modal__close{
  position:absolute;top:-.4rem;right:-.4rem;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:var(--r);color:var(--ink-2);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.modal__close:hover{color:var(--ink);border-color:var(--cyan)}
.modal__close svg{width:18px;height:18px}
.modal__notice{
  display:block;padding:.9rem 1rem;margin:0 0 1.6rem;
  border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);border-radius:var(--r);
  background:var(--cyan-soft);font-size:var(--t-small);color:var(--ink);
}
.modal__notice b{color:var(--cyan-dark)}
.modal__notice--error{border-color:#5c2a24;background:#1c0f0d}
.modal__notice--error b{color:#ef8b7d}
.modal__grid{display:grid;gap:1.1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.field{margin:0;display:flex;flex-direction:column;gap:.5rem}
.field--full{grid-column:1 / -1}
.field label{font:400 .66rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.field label span[aria-hidden]{color:var(--cyan-ink)}
.field__opt{letter-spacing:.14em;opacity:.7;text-transform:none;font-size:.62rem}
.field__hint{
  display:block;margin-top:.45rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;
  color:var(--text-2);
}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;min-height:48px;
  font:400 .95rem/1.4 var(--f-body);color:var(--ink);
  background:#070a0c;border:1px solid var(--rule);border-radius:var(--r);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2397a3ab' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(22,166,223,.15);outline:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0564a}
.field__err{font:400 .68rem/1.3 var(--f-mono);letter-spacing:.08em;color:#ef8b7d}
.modal__foot{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.modal__small{margin:0;font-size:.76rem;color:var(--ink-2);max-width:30ch}
.modal__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-left:auto}
.modal__done{text-align:center;padding:1rem 0}
.modal__done h3{font-size:clamp(1.8rem,3.4vw,2.4rem);margin:.4rem 0 1rem}
.modal__done p{color:var(--ink-2);max-width:40ch;margin-inline:auto}
.modal__done .eyebrow{justify-content:center}

.toast{
  position:fixed;left:50%;bottom:1.6rem;z-index:var(--z-toast);
  transform:translate(-50%,140%);opacity:0;pointer-events:none;
  padding:.85rem 1.3rem;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--deep);color:#eef1f3;
  font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(28,173,228,.14);
  transition:transform .45s var(--ease), opacity .35s var(--ease);
  max-width:calc(100% - 2rem);text-align:center;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ---------- 10 · MOTION & RESPONSIVE ----------------------- */
/* Gated on .js, set by a line in the head. Without JavaScript nothing would
   ever add .is-in, so an ungated opacity:0 here is a blank page waiting to
   happen. No JS, no hiding. */
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
.pillars > [data-reveal].is-in{transition-delay:calc(var(--i, 0) * 90ms)}
.cards > [data-reveal].is-in{transition-delay:calc(var(--i, 0) * 110ms)}
.process__list > [data-reveal].is-in{transition-delay:calc(var(--i, 0) * 120ms)}

@media (min-width:600px){
  .vin__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .story__steps{grid-template-columns:repeat(4,1fr)}
  .story__steps li{padding-right:1.2rem}
}
@media (min-width:720px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .foot__cols{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .intro__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:auto 1fr}
  .intro__title{grid-column:1;grid-row:2;align-self:start}
  .intro__grid .eyebrow{grid-column:1;grid-row:1}
  .intro__body{grid-column:2;grid-row:1 / span 2}
  .section__head--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .section__head--split .section__lede{margin-top:0;justify-self:end}
  .story__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .process__list{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
  .process__step + .process__step{border-top:0}
  .process__step{padding-left:clamp(1.5rem,3vw,3rem)}
  .process__step + .process__step::before{content:"";position:absolute;left:0;top:clamp(1.8rem,3vw,2.6rem);bottom:clamp(1.8rem,3vw,2.6rem);width:1px;background:var(--rule)}
  .foot__top{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1100px){ .pillars{grid-template-columns:repeat(4,1fr)} }

@media (max-width:860px){
  .nav__toggle{display:grid}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    padding:1rem var(--pad) 1.5rem;background:var(--deep);
    border-bottom:1px solid rgba(199,206,211,.2);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav__links.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__link{justify-content:space-between;min-height:52px;font-size:.78rem}
  .nav__cta{margin:.6rem 0 0}
}
@media (max-width:600px){
  .spec__cell--hide-sm{display:none}
  .hero__content{bottom:clamp(8.5rem,20vh,11rem)}
  .hero__cue{display:none}
  .modal__grid{grid-template-columns:1fr}
  .modal__actions{width:100%}
  .modal__actions .btn{flex:1}
  .foot__legal{flex-direction:column;align-items:center}
}
@media (max-width:420px){ .story__steps{grid-template-columns:1fr} }

@media (max-height:620px){
  .hero__stage{min-height:0}
  .hero__sub{display:none}
  .hero__content{bottom:7.5rem}
}

@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .hero__scroll{height:auto}
  .hero__stage{position:relative;height:auto;min-height:100svh}
  .hero__cue{display:none}
  .card:hover,.pillar:hover,.btn:hover{transform:none}
}

@media print{
  .nav,.hero__canvas,.hero__dims,.spec,.toast,.modal{display:none!important}
  body{background:#fff;color:#000}
}

/* =============================================================
   11 · WORDPRESS
   Real content: editor output, archives, galleries, pagination.
   ============================================================= */

/* ---------- logo (only ever on deep surfaces) --------------- */
.custom-logo-link{display:block;line-height:0;max-width:100%}
.nav__brand{display:flex;align-items:center;flex:none;min-width:0}
.nav__brand-fallback{text-decoration:none}

/* Constrain the logo from the bar itself, not from .nav__brand.
   WordPress's the_custom_logo() emits its own <a>; if anything ever wraps it
   in another one the parser unnests them and .nav__brand stops being an
   ancestor, at which point a descendant rule silently stops applying and the
   logo renders at full size. Scoping to .nav survives that. */
/* The brand box is a fixed-height window. With no trim the logo simply fits
   it; with trim the image renders proportionally taller and the window clips
   the bottom off, so mark and wordmark gain the space the strapline was using. */
.nav__brand{height:var(--logo-h);overflow:hidden;align-items:flex-start}
.nav .custom-logo,
.nav__brand img{
  display:block;
  width:auto;
  height:calc(var(--logo-h) * var(--logo-scale, 1));
  max-height:none;
  max-width:min(52vw,420px);
  object-fit:contain;
  object-position:top left;
}
.foot .custom-logo{
  display:block;height:auto;width:auto;
  max-width:min(70vw,240px);max-height:76px;object-fit:contain;
}
.foot__logo{margin-bottom:1.4rem}
.foot__logo{max-width:240px}

/* ---------- page scaffolding -------------------------------- */
.section--top{padding-top:calc(var(--nav-h) + clamp(2.5rem,7vw,5rem))}
.wrap--narrow{width:min(760px, 100% - (var(--pad) * 2))}
.page__head{margin-bottom:clamp(2rem,4vw,3rem)}
.page__head .h-display{margin-bottom:1.2rem}
.page__hero{margin:0 0 clamp(2rem,4vw,3rem)}
.page__hero img{width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r)}
.collection__empty{color:var(--ink-2);font-style:italic;padding:2rem 0}

/* ---------- editor content ---------------------------------- */
.prose{max-width:70ch}
.prose > * + *{margin-top:1.15em}
.prose h2{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.1rem);margin-top:2.2em;line-height:1.15}
.prose h3{font-family:var(--f-display);font-size:clamp(1.15rem,1.8vw,1.4rem);margin-top:1.8em}
.prose h4{font:400 .78rem/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-ink);margin-top:1.8em}
.prose a{color:var(--cyan-ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.5em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.4em}
.prose ul li::before{content:"";position:absolute;left:.25em;top:.72em;width:7px;height:1px;background:var(--cyan)}
.prose blockquote{margin:2rem 0;padding:1.2rem 0 1.2rem 1.6rem;border-left:2px solid var(--cyan);font:italic 300 calc(var(--t-body) * 1.16)/1.5 var(--f-body)}
.prose img,.prose figure img{width:100%;height:auto;border-radius:var(--r)}
.prose figure{margin:2rem 0}
.prose figcaption{margin-top:.7rem;font:400 var(--t-mono)/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.prose hr{border:0;height:1px;background:var(--rule);margin:2.5rem 0}
.prose code{font-family:var(--f-mono);font-size:.85em;background:var(--paper-2);padding:.15em .4em;border-radius:2px}
.prose pre{overflow-x:auto;padding:1.2rem;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r)}
.prose table{width:100%;border-collapse:collapse;font-size:.92em}
.prose th,.prose td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--rule)}
.prose th{font:400 .68rem/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink)}

/* ---------- status filters ---------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filters__link{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.6rem 1.1rem;
  font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.filters__link:hover{color:var(--cyan-ink);border-color:var(--cyan)}
.filters__link.is-on{color:var(--on-cyan);background:var(--cyan);border-color:var(--cyan)}
.filters__link span{opacity:.65;font-size:.85em}

/* Shop categories carry a colour each, so a long row can be read by hue
   rather than by reading every label. The colour arrives as --pill on the
   element; every value in that palette clears 7:1 both as text on the card
   ground and as a fill under the dark ink, so either state passes AA. */
.filters--tint .filters__link{position:relative;padding-left:2.1rem}
.filters--tint .filters__link::before{
  content:"";position:absolute;left:1.1rem;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;
  border-radius:50%;background:var(--pill,var(--cyan));
  transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.filters--tint .filters__link{background:var(--card)}
@supports (background:color-mix(in srgb,red 10%,blue)){
  .filters--tint .filters__link{
    background:color-mix(in srgb,var(--pill,var(--cyan)) 10%,var(--card));
    border-color:color-mix(in srgb,var(--pill,var(--cyan)) 52%,var(--rule));
  }
}
.filters--tint .filters__link:hover{color:var(--pill,var(--cyan));border-color:var(--pill,var(--cyan))}
.filters--tint .filters__link:hover::before{transform:scale(1.5)}
.filters--tint .filters__link.is-on{
  color:var(--on-cyan);background:var(--pill,var(--cyan));border-color:var(--pill,var(--cyan));
}
.filters--tint .filters__link.is-on::before{background:var(--on-cyan)}

/* ---------- cards with photography -------------------------- */
.card__art{display:block;text-decoration:none;overflow:hidden}
.card__art--photo{padding:0;background:none}
.card__art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__art img{transform:scale(1.04)}
.card__ghost{width:100%;height:auto;opacity:.5;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.card:hover .card__ghost{opacity:.9;transform:translateX(6px)}
.card__title a{color:inherit;text-decoration:none}
.card__title a:hover{color:var(--cyan-ink)}
.card__price{margin-left:auto;color:var(--cyan-ink)}
.cards--archive{margin-bottom:clamp(2rem,4vw,3rem)}

/* ---------- single car -------------------------------------- */
.car__head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.car__title{margin-bottom:1.1rem}
/* A note to whoever runs the site, never to a visitor. Deliberately looks
   like a sticky note rather than part of the design, so it cannot be
   mistaken for content and left there. */
.editor-note{
  margin:1rem 0 0;padding:.7rem .9rem;
  border:1px dashed var(--accent);border-radius:var(--r);
  background:rgba(28,173,228,.07);
  font-family:var(--f-mono);font-size:.66rem;line-height:1.6;
  letter-spacing:.04em;color:var(--text-2);
}
.editor-note b{color:var(--accent);font-weight:400}

/* ---------- the contact page ---------------------------------
   The written page and the form on the left, the details beside them,
   because somebody arriving here wants one of the two and should not
   have to scroll to find out which is which.
   ------------------------------------------------------------- */

.contact__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (min-width:900px){
  .contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,21rem)}
  .details{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
}

.details{
  padding:clamp(1.3rem,3vw,1.8rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
}
.details__title{
  margin:0 0 1.2rem;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.15;color:var(--text);
}
.details__row + .details__row{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.details__row h3{
  margin:0 0 .45rem;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-2);font-weight:400;
}
.details__address{margin:0;font-style:normal;line-height:1.55;color:var(--text)}
.details__address p{margin:0}
.details__big{margin:0;font-size:1.02rem;line-height:1.4}
.details__big a{color:var(--accent);text-decoration:none}
.details__big a:hover{text-decoration:underline}

.details__social{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.details__social a{
  display:flex;align-items:center;gap:.6rem;
  min-height:44px;padding:.2rem .3rem;margin-left:-.3rem;
  color:var(--text);text-decoration:none;border-radius:var(--r);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.details__social a:hover{color:var(--accent);background:rgba(255,255,255,.04)}
.details__social svg{width:18px;height:18px;flex:0 0 auto}
.details__social span{font-size:.85rem}

/* ---------- the form on the contact page --------------------- */

.cform{margin-top:clamp(2.2rem,5vw,3.2rem);padding-top:clamp(2rem,4vw,2.6rem);border-top:1px solid var(--line)}
.cform__title{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.cform__lede{margin:0 0 1.6rem;max-width:52ch;color:var(--text-2);line-height:1.6}
.cform__grid{display:grid;gap:1rem}
@media (min-width:640px){
  .cform__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cform .field--full{grid-column:1 / -1}
}
.cform__foot{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  margin-top:1.4rem;
}
.cform__small{margin:0;font-size:.76rem;color:var(--text-2)}

/* ---------- the picture viewer on a car page ------------------
   One large picture, a row of thumbnails under it, and the whole set
   already in the page so a change is instant.

   The stage keeps one shape for the whole set, taken from the tallest
   picture, and fits each picture inside it. Sizing to each picture in
   turn would make the page jump under the reader's cursor every time
   they picked a thumbnail; cropping to a common shape would take the
   ends off the cars. Against a black page the space around a picture
   that does not fill the stage reads as the page, not as a bar.
   ------------------------------------------------------------- */

/* The whole viewer is held to the stage's width, not just the stage, so the
   row of thumbnails lines up under the picture instead of running wider than
   it. Full column width while the picture fits in the height allowed; past
   that the width comes back off the ratio and the whole thing centres. */
.viewer{
  --band-h:78svh;
  margin:0 auto clamp(2rem,4vw,3.5rem);
  max-width:min(100%, calc(var(--band-h) * var(--band-ar,1.5)));
}

.viewer__stage{
  position:relative;
  width:100%;aspect-ratio:var(--band-ar,1.5);
  border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--deep);
}

.viewer__frame{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.viewer__frame.is-on{opacity:1;visibility:visible}

.viewer__img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;
  transition:transform .6s var(--ease);
}
.viewer--zoomable .viewer__stage{cursor:zoom-in}
.viewer--zoomable .viewer__stage:hover .viewer__frame.is-on .viewer__img{transform:scale(1.02)}

/* Arrows sit on the picture but keep a full-size tap target around a
   small mark, the same bargain the slideshow dots make. */
.viewer__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:56px;padding:0;border:0;
  display:grid;place-items:center;
  background:rgba(0,0,0,.42);color:var(--ink);
  cursor:pointer;opacity:0;
  transition:opacity .3s var(--ease), background-color .3s var(--ease);
}
.viewer__nav--prev{left:0;border-radius:0 var(--r) var(--r) 0}
.viewer__nav--next{right:0;border-radius:var(--r) 0 0 var(--r)}
.viewer__nav:hover{background:rgba(0,0,0,.7)}
.viewer:hover .viewer__nav,
.viewer__nav:focus-visible{opacity:1}
.viewer__nav:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.viewer__count{
  position:absolute;right:.7rem;bottom:.6rem;margin:0;
  padding:.24rem .5rem;border-radius:var(--r);
  background:rgba(0,0,0,.55);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;color:var(--ink);
}

.viewer__cap{
  margin:.7rem 0 0;min-height:1.2em;
  font-size:.78rem;line-height:1.4;color:var(--text-2);
}
.viewer__cap:empty{min-height:0;margin:0}

/* The rail the marked-up screenshot asked for: small pictures in a row
   directly under the big one. */
.viewer__rail{
  list-style:none;margin:.9rem 0 0;padding:0 0 .4rem;
  display:flex;gap:.55rem;
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  -webkit-overflow-scrolling:touch;
}
.viewer__rail::-webkit-scrollbar{height:5px}
.viewer__rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.viewer__rail li{flex:0 0 auto;scroll-snap-align:start}

.viewer__thumb{
  display:block;position:relative;
  width:96px;aspect-ratio:4/3;
  border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--deep);
  transition:border-color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
  opacity:.62;
}
.viewer__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.viewer__thumb:hover{opacity:1;transform:translateY(-2px)}
.viewer__thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The one you are looking at: brought fully up and underlined in the
   brand blue, so the row reads as a position, not just a set. */
.viewer__thumb.is-on{opacity:1;border-color:var(--accent)}
.viewer__thumb.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--accent);
}

@media (max-width:600px){
  .viewer__thumb{width:76px}
  .viewer__nav{opacity:1;background:rgba(0,0,0,.5)}
}

@media (prefers-reduced-motion:reduce){
  .viewer__frame{transition:none}
  .viewer__img,.viewer__thumb{transition:none}
  .viewer--zoomable .viewer__stage:hover .viewer__frame.is-on .viewer__img{transform:none}
  .viewer__thumb:hover{transform:none}
}

/* ---------- Sell -------------------------------------------- */

/* The invitation reads as a page opening, not as a section head: one column,
   measured, with the button close under the copy where a decision is made. */
.sell__head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sell__lede{margin-top:1rem}
.sell__act{margin:1.6rem 0 0}
/* The criteria, before the list of specific models.

   Each is a card standing slightly off the page rather than a line in a
   table, because this is the part of the page that has to be read by
   somebody scanning, and six flat rows are scanned as one block rather
   than six points. They arrive tilted back and settle as you reach them,
   which is enough movement to be noticed without being a performance. */
.sell__points{margin:0 0 clamp(2.5rem,5vw,4rem)}
.sell__pointstitle{
  margin:0 0 clamp(1.1rem,2vw,1.6rem);
  font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
}

.afters{
  display:grid;margin:0;
  gap:clamp(.9rem,1.6vw,1.25rem);
  /* Wide enough that six points land as three by two rather than four and a
     gap. Narrower screens fall to two, then one. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
  perspective:1200px;
}

.afters__card{
  position:relative;
  padding:clamp(1.35rem,2.4vw,1.85rem);
  border:1px solid var(--rule);border-radius:var(--r);
  background:linear-gradient(158deg,#131b21 0%,#0b0f12 58%,#080b0d 100%);
  box-shadow:0 18px 34px -26px #000, inset 0 1px 0 rgba(255,255,255,.055);
  transform-style:preserve-3d;
}

/* The lit top edge is what makes it read as a raised surface rather than a
   lighter rectangle. Kept to one hairline so it stays a suggestion. */
.afters__card::before{
  content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(28,173,228,.5),transparent);
  opacity:0;transition:opacity .5s var(--ease);
}
.afters__card:hover::before{opacity:1}

.afters__no{
  position:absolute;top:1rem;right:1.1rem;
  font:700 .66rem/1 var(--f-mono);letter-spacing:.2em;color:var(--chrome-dim);
}
.afters__label{
  margin:0 0 .55rem;
  font:400 var(--t-mono)/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-ink);
}
.afters__value{margin:0;color:var(--text);font-size:1rem;line-height:1.55}

/* Tilted back and pushed away to begin with. The container holds the
   perspective, so the depth is shared and the row tilts as one plane. */
.js .afters > [data-reveal]{
  opacity:0;
  transform:translateY(26px) translateZ(-70px) rotateX(-14deg);
  transform-origin:50% 0;
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .45s var(--ease), box-shadow .55s var(--ease);
}
.afters > [data-reveal].is-in{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 95ms);
}

/* Specificity has to clear the .is-in rule above, or the settled card can
   never be moved again by a hover. */
.afters > .afters__card.is-in:hover{
  transform:translateY(-4px) translateZ(16px) rotateX(3.5deg);
  border-color:color-mix(in srgb,var(--cyan) 42%,var(--rule));
  box-shadow:0 28px 46px -26px #000, 0 0 0 1px rgba(28,173,228,.14), inset 0 1px 0 rgba(255,255,255,.085);
  transition-delay:0s;
}

.sell__pointsnote{margin:clamp(1.1rem,2vw,1.5rem) 0 0;color:var(--text-2);font-size:.92rem}

@media (prefers-reduced-motion:reduce){
  /* The rule above is more specific than the blanket [data-reveal] reset, so
     it has to be undone by name or the cards stay tilted and invisible for
     anybody who asked for less movement. */
  .js .afters > [data-reveal],
  .afters > [data-reveal].is-in{opacity:1;transform:none;transition-delay:0s}
  .afters > .afters__card.is-in:hover{transform:none}
  .afters{perspective:none}
}

.sell__listhead{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.sell__listhead .h-display{font-size:clamp(1.5rem,3vw,2.1rem)}

/* A car being chased now, marked on the picture rather than in the text,
   because the point of it is to be seen before anything is read. */
.card__flag{
  position:absolute;left:clamp(1rem,2vw,1.4rem);top:clamp(1rem,2vw,1.4rem);
  padding:.3rem .6rem;border-radius:var(--r);
  background:var(--cyan);color:var(--on-cyan);
  font:400 var(--t-mono)/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
}

/* Sold cars read as closed; a car we want reads as open, so the card keeps
   full contrast and the price line takes the accent the other way about. */
.card--wanted .card__price{color:var(--cyan-ink)}

/* ---------- films under a car's gallery ---------------------- */

/* Held to exactly the width the viewer works out for itself, off the same
   ratio, so the strip and the picture frame above it share an edge however
   the photographs are shaped. With no pictures there is nothing to match. */
.carfilms{
  --band-h:78svh;
  margin:0 auto clamp(2rem,4vw,3.5rem);
  max-width:min(100%, calc(var(--band-h) * var(--band-ar,1.5)));
}
.carfilms--wide{max-width:100%}

/* The gallery's own bottom margin is the gap before the next section. When a
   film strip follows it that gap is in the wrong place, so it closes up and
   the two sit together as one block. */
.viewer:has(+ .carfilms){margin-bottom:1.4rem}

.carfilms__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:0 0 .8rem;
}
.carfilms__title{
  margin:0;
  font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
}

.carfilms__nav{display:flex;gap:.4rem;margin:0}
/* The border is the only edge this button has — its fill sits a step off pure
   black — so it is lifted clear of the page rather than left at --rule, which
   is a hairline meant for dividing panels, not for outlining a control. */
.carfilms__arrow{
  width:44px;height:44px;padding:0;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--ink-2) 58%,var(--rule));
  border-radius:var(--r);
  background:var(--card);color:var(--ink-2);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease);
}
.carfilms__arrow:hover:not(:disabled){color:var(--cyan-ink);border-color:var(--cyan)}
.carfilms__arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.carfilms__arrow:disabled{opacity:.3;cursor:default}

/* Smaller than the page-wide rails, and no bleed to the viewport edge: this
   one lines up with the gallery, so running past its edge would break the
   very alignment it is here for. */
.carfilms__rail{margin-inline:0;padding-inline:0;scroll-behavior:smooth}
/* A fixed card width rather than a minimum: with a minimum, four videos in a
   wide column simply stretch to fill it and stop being a strip at all. */
.carfilms__rail.films__rail--portrait{grid-auto-columns:clamp(112px,24vw,148px)}
.carfilms__rail.films__rail--landscape{grid-auto-columns:clamp(176px,34vw,238px)}
.carfilms__rail .film__cap{display:none}

@media (prefers-reduced-motion:reduce){
  .carfilms__rail{scroll-behavior:auto}
}

/* ---------- the full-size picture ---------------------------- */

.shot-box{
  --shot-pad:clamp(1rem,4vw,3rem);
  border:0;padding:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;
  background:rgba(0,0,0,.94);color:var(--ink);overflow:hidden;
}
.shot-box::backdrop{background:rgba(0,0,0,.92)}
.shot-box__stage{
  width:100%;height:100%;
  display:grid;place-items:center;padding:var(--shot-pad);
}

/* Sized against the viewport rather than its parent. The dialog is exactly
   the viewport, so these are exact; a percentage here resolves against a
   grid row whose height is decided after the image, and a large picture
   came out taller than the screen. */
.shot-box__img{
  width:auto;height:auto;
  max-width:calc(100vw - (var(--shot-pad) * 2));
  max-height:calc(100dvh - (var(--shot-pad) * 2));
  object-fit:contain;display:block;
}
.shot-box__close,
.shot-box__nav{
  position:absolute;z-index:2;
  min-width:48px;min-height:48px;padding:0;border:0;
  display:grid;place-items:center;
  background:rgba(0,0,0,.5);color:var(--ink);cursor:pointer;border-radius:var(--r);
}
.shot-box__close{top:1rem;right:1rem}
.shot-box__nav--prev{left:1rem;top:50%;transform:translateY(-50%)}
.shot-box__nav--next{right:1rem;top:50%;transform:translateY(-50%)}
.shot-box__close:hover,.shot-box__nav:hover{background:rgba(0,0,0,.8)}
.shot-box__close:focus-visible,.shot-box__nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shot-box__count{
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);margin:0;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;color:var(--ink-2);
}
.car__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start}
.car__h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:1.2rem}
.car__story{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule)}
.car__gallery{margin-top:clamp(2.5rem,5vw,4rem)}
.car__panel{
  padding:clamp(1.4rem,2.4vw,2rem);background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(28,173,228,.08);
}
.car__price{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 1.4rem;padding-bottom:1.2rem;border-bottom:1px solid var(--rule)}
.car__price span{font:400 .62rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.car__price b{font:400 clamp(1.4rem,2vw,1.8rem)/1 var(--f-display);color:var(--cyan-ink)}
.car__spec{margin:0 0 1.6rem;display:grid;gap:.55rem}
.car__spec div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.55rem;border-bottom:1px solid var(--rule)}
.car__spec dt,.car__spec dd{margin:0;font:400 .68rem/1.35 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.car__spec dt{color:var(--chrome-dim);flex:none}
.car__spec dd{color:var(--ink);text-align:right}
.process__head{margin-bottom:clamp(2rem,5vw,3.2rem)}

/* ---------- a car that came out of the workshop --------------- */

.from-build{
  margin-top:1.4rem;padding:1rem 1.1rem;
  border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 6%,var(--surface));
}
.from-build__title{
  margin:0 0 .45rem;
  font-family:var(--f-display);font-size:1rem;line-height:1.25;color:var(--text);
}
.from-build__link{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;
}
.from-build__link:hover{text-decoration:underline}

/* The second link on a finished card: the log is still worth reading, but the
   car it became is the thing to click first. */
.build-card__log{
  display:block;padding:.75rem 1.2rem;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);text-decoration:none;
}
.build-card__log:hover{color:var(--accent)}

/* ---------- hero slideshow -----------------------------------

   Pictures behind the words. Two things keep it from becoming the
   usual carousel: the crossfade is long enough to read as a dissolve
   rather than a cut, and each frame drifts very slightly while it is
   up, so a still photograph does not sit dead on the screen.

   The scrim is not decoration. Type over an uncontrolled photograph
   fails contrast the moment somebody uploads a bright one, so the
   left side where the words sit is always weighted down.
   ------------------------------------------------------------- */

.slides{position:absolute;inset:0;overflow:hidden;background:var(--deep)}

.slides__frame{
  position:absolute;inset:0;margin:0;
  opacity:0;
  transition:opacity 1.6s var(--ease);
  will-change:opacity;
}
.slides__frame.is-on{opacity:1}

.slides__img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.slides__frame.is-on .slides__img{animation:dc-drift 14s linear forwards}

@keyframes dc-drift{
  from{transform:scale(1.04)}
  to{transform:scale(1.10)}
}

/* The scrim is weighted, not even: heavy where the words are, almost
   nothing across the right where the car is. Its strength is a setting,
   because the right amount depends entirely on how bright the owner's
   photographs are and only they can see them. --scrim is a multiplier
   on every stop, so one number moves the whole thing. */
.slides__scrim{
  position:absolute;inset:0;
  --scrim:.4;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,calc(var(--scrim) * 1))    0%,
      rgba(0,0,0,calc(var(--scrim) * .82)) 24%,
      rgba(0,0,0,calc(var(--scrim) * .4))  50%,
      rgba(0,0,0,calc(var(--scrim) * .1))  74%,
      rgba(0,0,0,calc(var(--scrim) * .18)) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,calc(var(--scrim) * .45)) 0%,
      transparent 18%,
      transparent 86%,
      var(--deep) 100%);
}

/* On a narrow screen the words run the full width, so weighting the left
   achieves nothing. The gradient turns vertical instead: open across the
   top where the car is, heavier from the headline down. */
@media (max-width:760px){
  .slides__scrim{
    background:
      linear-gradient(to bottom,
        rgba(0,0,0,calc(var(--scrim) * .5))  0%,
        rgba(0,0,0,calc(var(--scrim) * .2)) 22%,
        rgba(0,0,0,calc(var(--scrim) * .78)) 58%,
        rgba(0,0,0,calc(var(--scrim) * .9)) 88%,
        var(--deep) 100%);
  }
}

/* Legibility must not depend on the scrim, or turning it down would
   break the headline. The halo does that job on its own. */
.hero--slides .hero__title,
.hero--slides .hero__sub,
.hero--slides .hero__strap{
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 26px rgba(0,0,0,.7);
}

.slides__dots{
  position:absolute;right:clamp(1.2rem,3vw,2.6rem);bottom:clamp(1.4rem,4vw,3rem);
  display:flex;gap:.55rem;z-index:2;
}
/* The bar is 3px; the button around it is 44. A 3px tall tap target is
   unusable with a thumb, and the visible mark is not the thing you have
   to hit. */
.slides__dot{
  width:34px;min-height:44px;padding:0;border:0;
  background:transparent;cursor:pointer;
  display:grid;place-items:center;
}
.slides__dot::before{
  content:"";
  display:block;width:30px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.32);
  transition:background-color .35s var(--ease), width .35s var(--ease);
}
.slides__dot:hover::before{background:rgba(255,255,255,.65)}
.slides__dot.is-on::before{background:var(--accent);width:34px}
.slides__dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A slideshow hero has no model to scrub, so it does not need the tall
   scroll track the 3D one lives in. */
.hero--slides .hero__scroll{height:auto;min-height:100svh}
.hero--slides .hero__stage{position:relative;height:100svh;min-height:34rem}

@media (prefers-reduced-motion:reduce){
  .slides__frame{transition:none}
  .slides__frame.is-on .slides__img{animation:none;transform:none}
}

/* ---------- shop --------------------------------------------- */

.product__blurb{margin:.6rem 0 0;font-size:.88rem;line-height:1.5;color:var(--text-2)}
.product__price{
  margin:.8rem 0 0;
  font-family:var(--f-display);font-size:1.35rem;color:var(--text);
}
.product__stock{
  margin:.35rem 0 0;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.shop__note{
  margin-top:clamp(1.5rem,4vw,2.2rem);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--text-2);
}
.product-single .car__actions .btn{width:100%}

/* ---------- likes -------------------------------------------- */

.car__like{margin:1.2rem 0 0}

.like{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;min-height:44px;
  background:transparent;border:1px solid var(--line);border-radius:19px;
  color:var(--text-2);cursor:pointer;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.like:hover{color:var(--accent);border-color:var(--accent)}
.like:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.like[disabled]{opacity:.6;cursor:default}

.like__heart{display:grid;place-items:center;transition:transform .25s var(--ease)}
.like:hover .like__heart{transform:scale(1.12)}

.like.is-on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.like.is-on .like__heart svg path{fill:currentColor}
.like__n{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .like,.like__heart{transition:none}
  .like:hover .like__heart{transform:none}
}

/* ---------- comments, continued ------------------------------ */

.comments-section{padding-top:0}
.comment-note{font-size:.82rem;color:var(--text-2);margin-bottom:1.4rem}
.comments-closed{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.comment-list .children{list-style:none;margin:1.2rem 0 0 1.2rem;padding:0;display:grid;gap:1.2rem}
.comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.7rem}
.comment-author{display:flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;color:var(--text)}
.comment-author img{border-radius:50%}
.comment-metadata{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;color:var(--text-2)}
.comment-metadata a{color:inherit;text-decoration:none}
.comment-content p{margin:0 0 .8em}
.comment-content p:last-child{margin-bottom:0}
.reply{margin-top:.8rem}
.reply a{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none}

.car__actions{display:grid;gap:.6rem}
.car__note{margin:1.2rem 0 0;font-size:.76rem;color:var(--ink-2)}

/* ---------- gallery ----------------------------------------- */
.gallery{display:grid;gap:clamp(.7rem,1.4vw,1.1rem);grid-template-columns:repeat(2,1fr)}
.gallery__item{margin:0}
.gallery__item a{display:block;overflow:hidden;border-radius:var(--r);border:1px solid var(--rule)}
.gallery__item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.gallery__item a:hover img{transform:scale(1.04)}
.gallery__item figcaption{margin-top:.6rem;font:400 .62rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- social rail --------------------------------------

   A fixed column on the left edge. Square tiles in the brand cyan,
   because at this size a tinted glyph on black disappears — the
   colour is what makes them findable in peripheral vision.

   Hidden below 1100px: narrower than that and a fixed column either
   overlaps the content or squeezes it, and the same links are in the
   footer anyway.
   ------------------------------------------------------------- */

.srail{display:none}

@media (min-width:1100px){
  .srail{
    display:block;
    position:fixed;
    left:0;
    top:50%;
    transform:translateY(-50%);
    z-index:40;
  }
  .srail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}

  .srail__link{
    display:grid;place-items:center;
    width:40px;height:40px;
    background:var(--accent);
    color:var(--on-accent);
    border-radius:0 3px 3px 0;
    transition:width .25s var(--ease), background-color .25s var(--ease);
  }
  .srail__link svg{width:19px;height:19px;display:block}
  .srail__link:hover,
  .srail__link:focus-visible{width:48px;background:var(--accent-2)}
  .srail__link:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
}

@media (prefers-reduced-motion:reduce){
  .srail__link{transition:none}
  .srail__link:hover,.srail__link:focus-visible{width:40px}
}

/* ---------- card rails ---------------------------------------

   The homepage strips scroll sideways instead of stopping at three.
   Same mechanics as the film rail: bleed to the viewport edge on
   small screens so a cut-off card shows there is more, and snap so
   a flick lands on a card rather than between two.
   ------------------------------------------------------------- */

.cards--rail{
  display:grid;
  /* The base .cards rule sets explicit columns at wider breakpoints. Left in
     place they are still explicit tracks here, so the first three cards get
     squeezed into collapsed 1fr columns and appear as slivers before the rail
     proper begins. */
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(255px,80vw);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  padding-bottom:.8rem;
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
}
.cards--rail::-webkit-scrollbar{height:6px}
.cards--rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.cards--rail > .card{scroll-snap-align:start;min-width:0}

/* A hover lift inside a scroller would clip against the scroll box, so
   the card stays put here and the border does the work instead. */
.cards--rail > .card:hover{transform:none}

@media (min-width:700px){
  .cards--rail{margin-inline:0;padding-inline:0;grid-auto-columns:minmax(300px,340px)}
}

/* ---------- MOT history --------------------------------------

   A ledger, not a feature: three columns that line up down the page
   so a run of tests can be read as a run, and consecutive mileages
   compared at a glance.
   ------------------------------------------------------------- */

.mot__list{list-style:none;margin:0;padding:0;max-width:44rem}

.mot__item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.25rem 1.5rem;
  padding:.95rem 0;
  border-top:1px solid var(--line);
}
.mot__item:first-child{border-top:0}

.mot__date{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);
}
.mot__miles{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  text-align:right;white-space:nowrap;color:var(--text-2);
}
.mot__miles b{color:var(--accent);font-weight:500}
.mot__miles i{font-style:normal;margin-left:.35em}
.mot__result{
  grid-column:1 / -1;
  font-size:.88rem;line-height:1.45;color:var(--text-2);
}
.mot__result:empty{display:none}

@media (min-width:620px){
  .mot__item{grid-template-columns:11rem 8rem 1fr;align-items:baseline}
  .mot__miles{text-align:left}
  .mot__result{grid-column:auto}
}

/* ---------- the workshop, with the engine behind it -----------

   The model is fixed behind the whole page and scrubs against the
   document's own scroll, so it keeps assembling as you read. It is
   held well back: heavily dimmed, blurred a touch, and pushed to one
   side, because the moment it competes with the text it stops being
   a background and starts being a problem.
   ------------------------------------------------------------- */

.shopbg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.shopbg__stage{position:absolute;inset:0}

.shopbg__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.72;
  filter:none;
}

/* A wash over the model, weighted rather than even.

   The text lives on the left, so that side stays heavy. The right two
   thirds are left largely open, which is where the engine actually sits
   and where there is nothing to read over it. Contrast is measured
   after every change to this, not assumed. */
.shopbg::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--deep) 0%, rgba(0,0,0,.8) 30%, rgba(0,0,0,.24) 58%, rgba(0,0,0,.06) 80%, rgba(0,0,0,.2) 100%),
    linear-gradient(to bottom, var(--deep) 0%, rgba(0,0,0,.25) 16%, transparent 34%, transparent 74%, var(--deep) 100%);
}

/* Everything on the page rides above it. */
.shopbg__over{position:relative;z-index:1}

/* Text over a rendered model cannot be checked by measuring CSS colours:
   the canvas is a separate layer, so a contrast audit sees the page's own
   background and passes regardless of what the engine is doing behind it.
   Now that the right side of the wash is open, a bright piece of metal can
   land under the standfirst. A dark halo on the type guarantees the reading
   whatever is behind it, and is invisible against plain black. */
.shopbg__over .section__head h1,
.shopbg__over .section__head h2,
.shopbg__over .section__lede,
.shopbg__over .eyebrow{
  text-shadow:0 1px 2px rgba(0,0,0,.92), 0 0 20px rgba(0,0,0,.8);
}

@media (max-width:860px){
  /* On a phone the model sits directly under the text with no room to
     move aside, so it comes back a little. Not out of sight. */
  .shopbg__canvas{opacity:.45}
}

@media (prefers-reduced-motion:reduce){
  .shopbg__canvas{opacity:.6}
}

/* ---------- the workshop ------------------------------------

   A build reads as a running record rather than a listing, so the
   log is a dated timeline down the page: date and stage in a narrow
   rail on the left, the work itself in the column beside it.
   ------------------------------------------------------------- */

.build-card__flag,
.build-card__stage{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;
}
.build-card__flag{color:var(--accent)}
.build-card__flag--done{color:var(--text-2)}
.build-card__stage{color:var(--text-2)}
.build-card__stage::before{content:"·";margin:0 .45em;color:var(--line)}

.build-card__latest{
  margin:.9rem 0 0;font-size:.85rem;line-height:1.45;color:var(--text-2);
}
.build-card__when{
  display:block;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.25rem;
}

/* Progress. Drawn only when a number has actually been given — see
   dc_build_progress(), where "not set" and "0%" stay distinct. */
.progress{margin:1rem 0 0}
.progress__track{
  height:3px;border-radius:2px;overflow:hidden;
  background:var(--line);
}
.progress__fill{
  display:block;height:100%;
  background:var(--accent);
  transition:width .8s var(--ease);
}
.progress__read{
  display:flex;justify-content:space-between;gap:1rem;
  margin:.5rem 0 0;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);
}
.progress__pct{color:var(--accent)}
.progress--wide{max-width:32rem}

.build__back{
  margin:0 0 1.5rem;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;
}
.build__back a{color:var(--text-2);text-decoration:none}
.build__back a:hover{color:var(--accent)}

.build__hero{
  margin:2rem 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.build__hero img{display:block;width:100%;height:auto}

.build__state{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);
  align-items:flex-end;margin-top:clamp(1.5rem,4vw,2.5rem);
}
.build__facts{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.4rem);margin:0}
.build__facts div{margin:0}
.build__facts dt{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:.3rem;
}
.build__facts dd{margin:0;font-size:.95rem;color:var(--text)}

/* Specs beside the story rather than stacked down the left, which left
   half the page empty on a wide screen. The text column is still capped
   for reading; it is the second column that fills the width. */
.build__split{
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(1.5rem,4vw,2.5rem);
  align-items:start;
}
.build__specs{max-width:38rem}
.build__intro{max-width:60ch}

@media (min-width:960px){
  .build__split{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}
  .build__specs{position:sticky;top:calc(var(--nav-h,72px) + 1.5rem)}
}
.build__ask{text-align:center}

/* ---------- build log --------------------------------------- */

.log__list{list-style:none;margin:0;padding:0}

.log__item{
  display:grid;gap:.6rem 2rem;
  padding:clamp(1.6rem,4vw,2.4rem) 0;
  border-top:1px solid var(--line);
}
.log__item:first-child{border-top:0;padding-top:0}
.log__item{scroll-margin-top:calc(var(--nav-h) + 2rem)}

.log__meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
.log__date{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.log__stage{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);
}

.log__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.15;
  margin:0 0 .8rem;
}
.log__title a{color:var(--text);text-decoration:none}
.log__title a:hover{color:var(--accent)}

.log__shot{
  margin:0 0 1.2rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.log__shot img{display:block;width:100%;height:auto}

.log__text{max-width:42rem}

.log__shots{
  list-style:none;margin:1.2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;
}
.log__shots img{
  display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r);
}

.log__art{margin-top:1.2rem}
.log__art:empty{display:none}
.log__art > .log__shot:first-child{margin-top:0}

@media (min-width:820px){
  .log__item{grid-template-columns:11rem minmax(0,1fr)}
  .log__meta{display:block}
  .log__date{display:block;margin-bottom:.4rem}
  .log__shots{grid-template-columns:repeat(2,1fr)}
}

/* Wide enough for the photographs to take the right-hand column instead
   of sitting under the words with the page empty beside them. */
@media (min-width:1120px){
  .log__item{grid-template-columns:11rem minmax(0,1fr) minmax(0,22rem)}
  .log__art{margin-top:0}
  .log__shots{grid-template-columns:repeat(2,1fr)}
}

/* ---------- the build timeline ------------------------------
   One line carrying the whole story: the year the car was made, the
   day it arrived, then a point for every entry in the log.

   The track is given a minimum width per point, so on a narrow screen
   it scrolls sideways rather than crushing the points together. Origin
   points keep their captions on show; log points hold theirs back until
   hovered, because a dozen of them at once would be a wall of text.
   ----------------------------------------------------------- */

.tl{margin:clamp(1.6rem,4vw,2.6rem) 0 clamp(2rem,5vw,3rem)}

.tl__scroll{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  padding:0 2px;
}
.tl__scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r)}
.tl__scroll::-webkit-scrollbar{height:6px}
.tl__scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.tl__track{
  --tl-w:106px;                    /* how much room one point's caption gets */
  list-style:none;margin:0;padding:0;
  position:relative;height:178px;
  min-width:max(100%, calc(var(--tl-n,6) * var(--tl-w)));
}

/* Points are placed inside an area inset by half a caption at each end, so
   the first and last captions sit fully on the page rather than half off it. */
.tl__pt,.tl__break{
  left:calc( var(--tl-w) / 2 + (100% - var(--tl-w)) * var(--p,0) / 100 );
}
.tl__track::before{
  content:"";position:absolute;top:68px;height:1px;
  left:calc(var(--tl-w) / 2);right:calc(var(--tl-w) / 2);
  background:linear-gradient(90deg,rgba(125,135,142,.4),rgba(28,173,228,.6));
}

/* The break: the line is cut, and the cut is labelled. Hiding it would
   be a lie about the scale either side of it. */
.tl__break{
  position:absolute;top:60px;width:34px;margin-left:-17px;height:18px;
  background:var(--bg);
}
.tl__break::before,.tl__break::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:rgba(125,135,142,.7);transform:skewX(-22deg);
}
.tl__break::before{left:11px}
.tl__break::after{left:20px}
/* Above the line, not below it: the band under the line belongs to the
   captions, and on a narrow rail this label would sit on top of one. */
.tl__break span{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome-dim);white-space:nowrap;
}

.tl__pt{position:absolute;top:0;bottom:0;transform:translateX(-50%);scroll-snap-align:center}
.tl__pt .tl__hit{width:var(--tl-w)}
.tl__pt:hover,.tl__pt:focus-within{z-index:4}

.tl__hit{
  position:relative;
  display:grid;grid-template-rows:60px 16px auto;
  justify-items:center;align-content:start;
  text-decoration:none;color:inherit;
}

/* Ties each photograph to its own point on the line, so a row of them
   reads as marks on the timeline rather than pictures floating above it. */
.tl__pt--log .tl__hit::before{
  content:"";position:absolute;left:50%;top:58px;width:1px;height:12px;
  background:rgba(125,135,142,.45);transform:translateX(-50%);
  transition:top .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),background .25s ease;
}
.tl__pt--log .tl__hit:hover::before,
.tl__pt--log .tl__hit:focus-visible::before{top:44px;height:26px;background:var(--accent)}
a.tl__hit{cursor:pointer}

.tl__thumb{
  align-self:end;display:block;width:66px;height:46px;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.6);
  transform:perspective(440px) rotateX(20deg) translateY(3px);
  transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.tl__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.tl__hit:hover .tl__thumb,
.tl__hit:focus-visible .tl__thumb{
  transform:perspective(440px) rotateX(0deg) translateY(-8px) scale(1.3);
  border-color:var(--accent);
  box-shadow:0 16px 32px rgba(0,0,0,.78);
}

.tl__dot{
  align-self:center;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--chrome-dim);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.tl__pt--log .tl__dot{border-color:var(--accent)}
.tl__pt--birth .tl__dot,
.tl__pt--done .tl__dot{width:13px;height:13px;background:var(--accent);border-color:var(--accent)}
.tl__hit:hover .tl__dot,
.tl__hit:focus-visible .tl__dot{transform:scale(1.5);background:var(--accent);border-color:var(--accent)}

.tl__cap{
  margin-top:.55rem;display:grid;gap:.18rem;justify-items:center;
  text-align:center;max-width:104px;
}
.tl__when{
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}
.tl__what{font-size:.7rem;line-height:1.25;color:var(--text-2)}
.tl__stage{
  font-family:var(--f-mono);font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome-dim);
}
.tl__pt--birth .tl__what,
.tl__pt--done .tl__what{color:var(--text)}

.tl__pt--log .tl__cap{
  opacity:0;transform:translateY(-5px);
  transition:opacity .25s ease,transform .25s ease;
}
.tl__pt--log .tl__hit:hover .tl__cap,
.tl__pt--log .tl__hit:focus-visible .tl__cap{
  opacity:1;transform:none;
  width:140px;max-width:140px;
  padding:.5rem .6rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
}

.tl__hint{
  margin:.9rem 0 0;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--chrome-dim);
}

@media (max-width:760px){
  .tl__track{--tl-w:92px;height:164px}
  .tl__hit{grid-template-rows:54px 16px auto}
  .tl__thumb{width:58px;height:40px}
  .tl__cap{max-width:90px}
}

@media (prefers-reduced-motion:reduce){
  .tl__thumb{transform:none;transition:none}
  .tl__hit:hover .tl__thumb,
  .tl__hit:focus-visible .tl__thumb{transform:none}
  .tl__dot,.tl__pt--log .tl__cap,.tl__pt--log .tl__hit::before{transition:none}
  .tl__pt--log .tl__cap{transform:none}
  .log__item:target{animation:none}
}

/* Jumped to from the timeline. */
.log__item:target .log__title a{color:var(--accent)}
@keyframes dc-log-flash{
  0%,100%{box-shadow:0 0 0 0 rgba(28,173,228,0)}
  30%{box-shadow:-1.2rem 0 0 0 var(--accent)}
}
.log__item:target{animation:dc-log-flash 1.8s ease-out 1}

.log-nav{
  display:grid;gap:1rem;
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:clamp(1.5rem,4vw,2rem);
  border-top:1px solid var(--line);
}
.log-nav__link{text-decoration:none;color:var(--text)}
.log-nav__link--next{text-align:right}
.log-nav__dir{
  display:block;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:.3rem;
}
.log-nav__title{font-family:var(--f-display);font-size:1.05rem;line-height:1.25}
.log-nav__link:hover .log-nav__title{color:var(--accent)}
.log-entry__all{margin-top:clamp(1.5rem,4vw,2.5rem)}

@media (min-width:640px){
  .log-nav{grid-template-columns:1fr 1fr}
}

/* ---------- films (social video) ----------------------------

   A rail rather than a grid: social video arrives a clip at a time
   and reads best the way it was shot, scrolled sideways. Each card
   is a poster and a play button until it is pressed — the platform's
   own player is only fetched on the click, so a homepage carrying
   six reels still weighs what one image weighs.
   ------------------------------------------------------------- */

.films__rail{
  list-style:none;margin:0;padding:0 0 .6rem;
  display:grid;grid-auto-flow:column;
  gap:clamp(.8rem,1.4vw,1.2rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
  /* Bleed to the viewport edge on small screens so a card is visibly
     cut off — the only reliable hint that a rail scrolls. */
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
}
.films__rail::-webkit-scrollbar{height:6px}
.films__rail::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}

.films__rail--portrait{grid-auto-columns:minmax(190px,62vw)}
.films__rail--landscape{grid-auto-columns:minmax(280px,84vw)}

/* The shape lives on the card, not on the button inside it. The button is
   removed the moment somebody presses play, and a player dropped into a
   card with no height of its own has nothing to size against. */
.film{
  position:relative;scroll-snap-align:start;min-width:0;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);overflow:hidden;
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.films__rail--portrait .film{aspect-ratio:9/16}
.films__rail--landscape .film{aspect-ratio:16/9}

.film:hover,.film:focus-within{
  border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule));
  transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(28,173,228,.12);
}

.film__open{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:0;border:0;background:transparent;cursor:pointer;
  text-decoration:none;color:inherit;
}
.film__open:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}

/* The branded card, always present, always underneath. Instagram and
   Facebook hand over no thumbnail at all; a blocked or deleted one leaves
   nothing either. This is what shows through in every one of those cases,
   and a poster that does arrive simply covers it. */
.film__ground{
  position:absolute;inset:0;
  display:grid;align-content:start;justify-items:center;
  padding-top:16%;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--cyan) 10%,var(--card)) 0%,var(--card) 70%);
}

/* Transparent of its own: a failed image shows the ground beneath rather
   than painting over it with the same gradient and hiding the wordmark. */
.film__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .8s var(--ease);
}
.film:hover .film__poster{transform:scale(1.04)}
.film__mark{
  font-family:var(--f-display);font-size:1rem;letter-spacing:.06em;
  color:var(--text-2);text-align:center;padding:0 1rem;
}

.film__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 42%,rgba(0,0,0,.05) 70%);
}

/* Restrained until approached. Seven solid brand-colour discs in a row
   read as buttons on a form, not as film. */
.film__cue{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  background:rgba(4,22,31,.5);color:#fff;
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.film__cue svg{margin-left:2px}
.film:hover .film__cue,
.film:focus-within .film__cue{
  transform:translate(-50%,-50%) scale(1.09);
  background:var(--accent);color:var(--on-accent);border-color:transparent;
}

.film__foot{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  padding:.9rem;text-align:left;
}
.film__badge{
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.film__cap{
  font-family:var(--f-body,inherit);font-size:.85rem;line-height:1.35;
  color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- the player lightbox ------------------------------

   Sized per platform, because they are not alike. YouTube and Vimeo
   fill whatever box they are given. Instagram, Facebook and TikTok
   render their own header, caption and action row inside the frame,
   need real width to do it — Instagram gives up below about 326px —
   and are taller than the video itself. Those get a fixed portrait
   box with room for the furniture rather than a bare aspect ratio.
   ------------------------------------------------------------- */

.film-box{
  padding:0;border:0;background:transparent;
  max-width:100vw;max-height:100vh;
  overflow:visible;
}
.film-box::backdrop{background:rgba(0,0,0,.88)}
/* Fallback for browsers without <dialog>: the polyfill-free path. */
.film-box:not([open]){display:none}

.film-box__stage{
  position:relative;
  width:min(94vw,420px);
  aspect-ratio:9/16;
  max-height:82vh;
  background:#000;
  border:1px solid var(--rule);
  border-radius:var(--r);
  overflow:hidden;
}
.film-box[data-shape="landscape"] .film-box__stage{
  width:min(94vw,960px);
  aspect-ratio:16/9;
}

/* Platforms that draw their own chrome inside the frame. */
.film-box[data-provider="instagram"] .film-box__stage,
.film-box[data-provider="facebook"] .film-box__stage,
.film-box[data-provider="tiktok"] .film-box__stage{
  width:min(94vw,400px);
  height:min(82vh,740px);
  aspect-ratio:auto;
  background:#fff;
}
.film-box[data-provider="tiktok"] .film-box__stage{background:#000}

.film-box__player{
  display:block;width:100%;height:100%;border:0;background:#000;
}
.film-box[data-provider="instagram"] .film-box__player,
.film-box[data-provider="facebook"] .film-box__player{background:#fff}

.film-box__close{
  position:absolute;top:-54px;right:0;
  display:grid;place-items:center;
  width:38px;height:38px;padding:0;
  border:1px solid var(--rule);border-radius:50%;
  background:var(--card);color:var(--ink);cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.film-box__close:hover,.film-box__close:focus-visible{background:var(--accent);color:var(--on-accent)}
.film-box__close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (max-width:520px){
  .film-box__close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}

.film__fallback{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:.9rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}

@media (min-width:700px){
  .films__rail{margin-inline:0;padding-inline:0}
  .films__rail--portrait{grid-auto-columns:minmax(200px,240px)}
  .films__rail--landscape{grid-auto-columns:minmax(320px,400px)}
}

@media (prefers-reduced-motion:reduce){
  .film,.film__poster,.film__cue{transition:none}
  .film:hover{transform:none}
  .film:hover .film__poster{transform:none}
}

/* ---------- service pages ----------------------------------- */
.service__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start}

/* ---------- journal ----------------------------------------- */
.posts{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.2rem,2.4vw,2rem);grid-template-columns:1fr}
.post-card{
  display:flex;flex-direction:column;overflow:hidden;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.post-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--cyan) 40%,var(--rule));box-shadow:0 0 0 1px rgba(28,173,228,.10)}
.post-card__art{display:block;overflow:hidden}
.post-card__art img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post-card__body{padding:clamp(1.3rem,2vw,1.75rem)}
.post-card__excerpt{color:var(--ink-2);font-size:calc(var(--t-body) * .96)}
.post-card__more{font:700 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink);text-decoration:none}
.post__meta{margin-top:2.5rem;font:400 var(--t-mono)/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.post__nav{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.post__nav a{font:400 var(--t-small)/1.4 var(--f-body);color:var(--ink-2);text-decoration:none}
.post__nav a:hover{color:var(--cyan-ink)}
.post__nav-next{margin-left:auto;text-align:right}

/* ---------- search ------------------------------------------ */
.searchform{display:flex;gap:.6rem;margin-top:1.6rem;flex-wrap:wrap}
.searchform input{
  flex:1 1 14rem;min-height:48px;padding:.85rem .95rem;
  font:400 .95rem/1.4 var(--f-body);color:var(--ink);
  background:#070a0c;border:1px solid var(--rule);border-radius:var(--r);
}
.searchform input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(22,166,223,.15)}
.results{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.result{padding-bottom:1.6rem;border-bottom:1px solid var(--rule)}
.result p{color:var(--ink-2);margin-bottom:0}

/* ---------- pagination -------------------------------------- */
.pagination{margin-top:clamp(2rem,4vw,3rem)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:.5rem .9rem;background:var(--card);
  font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border:1px solid var(--rule);border-radius:var(--r);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.page-numbers:hover{color:var(--cyan-ink);border-color:var(--cyan)}
.page-numbers.current{color:var(--on-cyan);background:var(--cyan);border-color:var(--cyan)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- forms ------------------------------------------- */
.dc-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- comments ---------------------------------------- */
.comments-area{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule)}
.comment-list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1.5rem}
.comment-body{padding:1.2rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--r)}
.comment-form label{display:block;font:400 .66rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem}
/* Checkboxes must be excluded by hand: the selector below is broad enough to
   catch the "save my name" tickbox and stretch it into a 48px white slab. */
.comment-form input[type=checkbox]{
  width:auto;min-height:0;margin:0 .5rem 0 0;accent-color:var(--accent);vertical-align:middle;
}
.comment-form .comment-form-cookies-consent{
  display:flex;align-items:flex-start;gap:.1rem;margin-bottom:1.2rem;
}
.comment-form .comment-form-cookies-consent label{
  margin:0;text-transform:none;letter-spacing:.04em;font-size:.7rem;color:var(--text-2);
}

.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{
  width:100%;padding:.85rem .95rem;min-height:48px;
  font:400 .95rem/1.4 var(--f-body);color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:1rem;
}
.comment-form input[type=submit]{
  min-height:48px;padding:.9rem 1.5rem;cursor:pointer;
  font:700 var(--t-mono)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-cyan);background:var(--cyan);border:1px solid var(--cyan);border-radius:var(--r);
}

/* ---------- still hero (3D turned off) ---------------------- */
.hero--still .hero__scroll{height:auto}
.hero--still .hero__stage{position:relative;height:auto;min-height:100svh}
.hero__still{position:absolute;inset:0}
.hero__still img{width:100%;height:100%;object-fit:cover}

/* ---------- the hero on a phone -------------------------------
   A landscape photograph in a portrait frame can only be cropped or
   made shorter. Cropping is what a full-height hero does, and it takes
   the sides off: on a picture of a car, that is the car. So here the
   picture stops being a backdrop and becomes a band with a shape of its
   own, and the words move off the photograph onto the black beneath it.

   Nothing is cropped here at all: the picture is fitted inside the band
   whole. The band is sized to the tallest picture chosen (see
   dc_hero_ratio), so a wider one sits inside it with a little black above
   and below, which against a black page is simply the page.

   All of this hangs off .hero--m-whole. Choosing "Fill the screen" on
   the front page drops the class and the old full-height crop returns,
   which is the right answer for photographs shot loose enough to take it.
   ------------------------------------------------------------- */

@media (max-width:760px), (max-width:1024px) and (orientation:portrait){
  .hero--m-whole.hero--slides .hero__scroll,
  .hero--m-whole.hero--still .hero__scroll{height:auto;min-height:0}

  /* The nav is fixed over the top of the page. A full-bleed hero is meant
     to run under it; a band is not, and it was losing its top 81px, which
     is a third of the picture on a phone. The stage is black like the nav,
     so the space simply reads as part of it. */
  .hero--m-whole.hero--slides .hero__stage,
  .hero--m-whole.hero--still .hero__stage{
    position:relative;height:auto;min-height:0;overflow:visible;
    display:flex;flex-direction:column;
    padding-top:var(--nav-h);
    background:var(--deep);
  }

  /* The full-bleed wash belongs to a hero the words sit on top of. */
  .hero--m-whole.hero--slides .hero__stage::after,
  .hero--m-whole.hero--still .hero__stage::after{display:none}

  .hero--m-whole.hero--slides .slides,
  .hero--m-whole.hero--still .hero__still{
    position:relative;inset:auto;flex:0 0 auto;
    width:100%;aspect-ratio:var(--hero-ar,1.5);
    overflow:hidden;
  }
  /* Fitted, not cropped. Against a black page the space around a picture
     that does not fill the band is not a bar, it is the page. */
  .hero--m-whole.hero--slides .slides__img,
  .hero--m-whole.hero--still .hero__still img{
    width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  }

  /* The slow zoom crops further with every second it runs. */
  .hero--m-whole.hero--slides .slides__frame.is-on .slides__img{animation:none;transform:none}

  /* Only a blend into the black below. The words are not on the picture
     any more, so there is nothing left for the scrim to protect. */
  .hero--m-whole.hero--slides .slides__scrim{
    background:linear-gradient(to bottom,
      rgba(0,0,0,calc(var(--scrim) * .3)) 0%,
      transparent 24%,
      transparent 70%,
      rgba(0,0,0,calc(var(--scrim) * .5)) 93%,
      var(--deep) 100%);
  }

  .hero--m-whole.hero--slides .hero__content,
  .hero--m-whole.hero--still .hero__content{
    position:static;width:auto;bottom:auto;left:auto;
    padding:clamp(1.4rem,6vw,2.2rem) var(--pad) clamp(2.2rem,9vw,3.2rem);
  }

  /* On the black ground the halo is only muddying the letters. */
  .hero--m-whole.hero--slides .hero__title,
  .hero--m-whole.hero--slides .hero__sub,
  .hero--m-whole.hero--slides .hero__strap{text-shadow:none}

  .hero--m-whole.hero--slides .slides__dots{bottom:.5rem;right:.7rem}
}


@media (min-width:720px){
  .posts{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .car__grid{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}
  .service__grid{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}
  .car__aside,.service__aside{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
}
@media (min-width:1100px){ .posts{grid-template-columns:repeat(3,1fr)} }

/* ---------- hero model loading state ------------------------ */
.hero__loading{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;margin:0;opacity:0;pointer-events:none;
  font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-2);
  transition:opacity .3s var(--ease);
}
.hero__stage.is-loading .hero__loading{opacity:.75}
.hero__stage.is-loading .hero__canvas{opacity:0}
.hero__canvas{transition:filter .8s var(--ease), opacity .6s var(--ease)}