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

.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:40px;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}
.foot__social a,.foot__social button{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;min-height:32px}

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

/* ---------- 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}
.car__hero{margin:0 0 clamp(2rem,4vw,3.5rem)}
.car__hero img{width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r)}
.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{
  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)}

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

.car__like{margin:1.2rem 0 0}

.like{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;min-height:38px;
  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 ------------------------------------

   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)}

.build__specs{margin-top:clamp(1.5rem,4vw,2.5rem);max-width:38rem}
.build__intro{margin-top:clamp(1.5rem,4vw,2.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__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);
}

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

.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 same ground the typeset card uses sits under every poster. A
   thumbnail that is slow, blocked or hanging then shows a branded card
   rather than an empty hole, and a loaded one covers it completely. */
.film__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--cyan) 10%,var(--card)) 0%,var(--card) 70%);
  transition:transform .8s var(--ease);
}
.film:hover .film__poster{transform:scale(1.04)}

/* No thumbnail to be had — Instagram and Facebook will not hand one
   over. A typeset card is a better answer than a broken image. */
.film__poster--blank{
  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%);
}
.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}

@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)}