/* ==========================================================================
   TOKENS — from DESIGN.md (Liquid Glass Automotive)
   ========================================================================== */
:root{
  /* Surfaces — "Obsidian Depth". #0A0A0B is the core neutral canvas. */
  --canvas:#0a0a0b;
  --surface:#131314;
  --surface-container-lowest:#0e0e0f;
  --surface-container-low:#1c1b1c;
  --surface-container:#201f20;
  --surface-container-high:#2a2a2b;

  /* Content */
  --on-surface:#e5e2e3;
  --on-surface-bright:#ffffff;
  --on-surface-variant:#e7bdb8;

  /* Racing Red — CTAs, active states, critical mechanical data only. */
  --racing-red:#e31e24;
  --racing-red-deep:#c00014;
  --primary:#ffb4ab;

  /* Metallic Silver */
  --silver:#c2c7ca;
  --outline:rgba(255,255,255,.14);
  --outline-faint:rgba(255,255,255,.06);

  /* Glass tiers */
  --glass-1:rgba(255,255,255,.05);
  --glass-2:rgba(20,20,21,.55);
  --blur-1:20px;
  --blur-2:40px;

  /* Type */
  --font-display:"Manrope","Helvetica Neue",Arial,sans-serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Shape — soft 0.25rem, precision-machined */
  --r-sharp:2px;
  --r:4px;
  --r-image:8px;

  /* Layout — 8px linear scale, letterboxed margins */
  --u:8px;
  --gutter:24px;
  --margin:80px;
  --container:1440px;
}

@media (max-width:900px){
  :root{ --margin:20px; }
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  /* No overflow-x:hidden anywhere — it silently breaks position:sticky. */
  background:var(--canvas);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--on-surface);
  font-family:var(--font-body);
  font-size:16px;
  line-height:24px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-loading{ overflow:hidden; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--racing-red); color:#fff; }

:focus-visible{
  outline:2px solid var(--racing-red);
  outline-offset:3px;
}

/* ==========================================================================
   TYPE ROLES
   ========================================================================== */
.t-hero{
  font-family:var(--font-display);
  font-size:clamp(46px,9.2vw,84px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.04em;
  text-transform:uppercase;
  margin:0;
  color:var(--on-surface-bright);
  text-shadow:0 0 60px rgba(0,0,0,.65), 0 2px 40px rgba(0,0,0,.5);
}

.t-headline{
  font-family:var(--font-display);
  font-size:clamp(32px,4.6vw,48px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:0;
  color:var(--on-surface-bright);
}

.t-sub{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:500;
  line-height:28px;
  letter-spacing:.02em;
  margin:0;
  color:var(--on-surface-bright);
}

.t-body{
  font-family:var(--font-body);
  font-size:18px;
  line-height:28px;
  font-weight:300;
  color:rgba(229,226,227,.7);
  margin:0;
}

.t-body-sm{
  font-family:var(--font-body);
  font-size:15px;
  line-height:23px;
  color:rgba(229,226,227,.5);
  margin:0;
}

/* JetBrains Mono is reserved for specifications and mechanical data. */
.t-mono{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  line-height:16px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.t-eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--racing-red);
  margin:0;
}

/* ==========================================================================
   LOADER
   ========================================================================== */
#loader{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--u) * 4);
  background:var(--canvas);
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 1.1s;
}
#loader[data-done="true"]{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader__mark{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:800;
  letter-spacing:.42em;
  color:var(--on-surface-bright);
  padding-left:.42em;
}

.loader__bar{
  position:relative;
  width:min(320px,60vw);
  height:2px;                 /* 2px indicators, no rounded ends */
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.loader__fill{
  position:absolute;
  inset:0;
  background:var(--racing-red);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s linear;
}

.loader__readout{
  display:flex;
  align-items:baseline;
  gap:calc(var(--u) * 2);
  color:rgba(229,226,227,.45);
}
.loader__pct{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--on-surface);
  font-variant-numeric:tabular-nums;
}
.loader__label{ letter-spacing:.24em; }

/* ==========================================================================
   NAV — top-anchored Liquid Glass bar
   ========================================================================== */
.nav{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:100;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--margin);
  background:linear-gradient(to bottom,rgba(10,10,11,.82),rgba(10,10,11,0));
  transition:background .5s ease, backdrop-filter .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.nav[data-stuck="true"]{
  background:var(--glass-2);
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(140%);
  backdrop-filter:blur(var(--blur-2)) saturate(140%);
  border-bottom-color:var(--outline-faint);
}

/* Badge sits in place of the old text wordmark. Height-driven so the
   190x122 source keeps its aspect ratio at any nav height. */
.nav__badge{
  display:flex;
  align-items:center;
  transition:opacity .3s ease;
}
.nav__badge img{
  display:block;
  height:30px;
  width:auto;
}
.nav__badge:hover{ opacity:.75; }

.nav__links{
  display:flex;
  align-items:center;
  gap:calc(var(--u) * 6);
}
.nav__link{
  position:relative;
  padding:calc(var(--u) * 2) 0;
  color:rgba(229,226,227,.55);
  transition:color .3s ease;
}
.nav__link:hover{ color:var(--on-surface-bright); }

/* Active state: 2px racing red line 8px above the text — a dashboard indicator. */
.nav__link[aria-current="page"]{ color:var(--on-surface-bright); }
.nav__link[aria-current="page"]::before{
  content:"";
  position:absolute;
  top:calc(var(--u) * 2 - 10px);
  left:0;
  width:100%;
  height:2px;
  background:var(--racing-red);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:calc(var(--u) * 1.5);
  height:44px;
  padding:0 calc(var(--u) * 3.5);
  border-radius:var(--r-sharp);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
  white-space:nowrap;
}

/* Secondary: ghost glass — 1px metallic silver border, blurred bed, silver text. */
.btn--ghost{
  border:1px solid rgba(194,199,202,.32);
  color:var(--silver);
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(var(--blur-1));
  backdrop-filter:blur(var(--blur-1));
}
.btn--ghost:hover{
  border-color:rgba(194,199,202,.7);
  color:var(--on-surface-bright);
  background:rgba(255,255,255,.07);
}

/* Primary: solid Racing Red, white mono. */
.btn--primary{
  background:var(--racing-red);
  color:#fff;
  border:1px solid var(--racing-red);
}
.btn--primary:hover{
  background:#ff2a30;
  box-shadow:0 0 40px rgba(227,30,36,.35);
}

/* Tertiary: text only, mono, red arrow suffix. */
.btn--text{
  display:inline-flex;
  align-items:center;
  gap:calc(var(--u) * 1.5);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--on-surface);
  padding-bottom:calc(var(--u) * 1.25);
  border-bottom:1px solid var(--outline);
  transition:border-color .35s ease;
}
.btn--text:hover{ border-bottom-color:var(--racing-red); }
.btn--text .arrow{
  color:var(--racing-red);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.btn--text:hover .arrow{ transform:translateX(6px); }

.nav__toggle{ display:none; }

@media (max-width:1024px){
  .nav{ height:72px; }
  .nav__links{ display:none; }
  .nav__badge img{ height:24px; }
}

/* ==========================================================================
   HERO — 5000px scroll track, sticky 100vh canvas
   ========================================================================== */
.hero{
  position:relative;
  height:5000px;              /* set by CONFIG.scrollHeight at runtime */
  background:var(--canvas);
}

.hero__stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
}

#sequence{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:var(--surface-container-lowest);
}

/* Cinematic grade: vignette + top scrim for nav legibility + bottom blend. */
.hero__grade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 45%,rgba(0,0,0,0) 42%,rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom,rgba(10,10,11,.6) 0%,rgba(10,10,11,0) 22%),
    linear-gradient(to bottom,rgba(10,10,11,0) 78%,var(--canvas) 100%);
}

/* Beats — scroll-timed copy layers */
.beat{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  padding:0 var(--margin);
  will-change:transform,opacity;
  opacity:0;
}

.beat__inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}

/* Beat 1 — the thesis */
.beat--title{ align-items:center; justify-content:center; text-align:center; }
.beat--title .beat__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--u) * 3);
}
.hero__rule{
  width:1px;
  height:88px;
  background:linear-gradient(to bottom,rgba(255,255,255,.35),rgba(255,255,255,0));
  margin-top:calc(var(--u) * 2);
}
.hero__cue{
  display:flex;
  align-items:center;
  gap:calc(var(--u) * 1.5);
  color:rgba(229,226,227,.42);
}
.hero__cue .dot{
  width:5px; height:5px;
  background:var(--racing-red);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.2; }
}

/* Beat 2 — the Glass Blade, over the side profile */
.beat--blade{ align-items:center; justify-content:flex-start; }
.beat--blade .beat__inner{ display:flex; justify-content:flex-start; }

.blade{
  width:min(420px,100%);
  padding:calc(var(--u) * 5);
  border-radius:var(--r);
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(30px) saturate(140%);
  backdrop-filter:blur(30px) saturate(140%);
  /* Stroke-as-depth: top-heavy gradient ghost border, no drop shadow. */
  border:1px solid transparent;
  border-image:linear-gradient(to bottom,rgba(255,255,255,.28),rgba(255,255,255,.04)) 1;
}
.blade__title{ margin:calc(var(--u) * 2) 0 calc(var(--u) * 2.5); }
.blade__body{ margin-bottom:calc(var(--u) * 4); }

.spec{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--outline-faint);
}
.spec__cell{
  background:rgba(10,10,11,.35);
  padding:calc(var(--u) * 2);
}
.spec__key{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(229,226,227,.4);
  display:block;
  margin-bottom:calc(var(--u) * .75);
}
.spec__val{
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--on-surface-bright);
  font-variant-numeric:tabular-nums;
}

/* Beat 3 — the rear, the commission */
.beat--close{ align-items:center; justify-content:center; text-align:center; }
.beat--close .beat__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--u) * 3);
}
.beat--close .t-body{ max-width:44ch; }

/* HUD — mechanical readout, bottom of the stage */
.hud{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:4;
  pointer-events:none;
}
.hud__track{
  position:relative;
  height:2px;
  background:rgba(255,255,255,.1);
}
.hud__fill{
  position:absolute;
  inset:0;
  background:var(--racing-red);
  transform:scaleX(0);
  transform-origin:left center;
}

@media (max-width:760px){
  .beat--blade{ align-items:flex-end; padding-bottom:120px; }
  .blade{ width:100%; padding:calc(var(--u) * 3); }
}

/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */
.section{
  position:relative;
  padding:clamp(96px,13vw,176px) var(--margin);
}
.section--dim{ background:var(--surface-container-lowest); }

.wrap{
  max-width:var(--container);
  margin:0 auto;
}

.split{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(40px,5vw,80px);
  align-items:center;
}
.split__copy{ grid-column:span 5; }
.split__media{ grid-column:span 7; }
.split--flip .split__media{ grid-column:1 / span 7; grid-row:1; }
.split--flip .split__copy{ grid-column:8 / span 5; grid-row:1; }

.copy-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(var(--u) * 3);
}
.copy-stack .t-headline{ margin-top:calc(var(--u) * 1); }
.copy-stack .btn--text{ margin-top:calc(var(--u) * 2); }

.frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-image);
  border:1px solid var(--outline-faint);
  aspect-ratio:4 / 3;
}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* Parallax travel lives inside the mask. */
  transform:scale(1.14) translate3d(0,var(--shift,0),0);
  transition:filter 1.2s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.frame--mono img{ filter:grayscale(1) contrast(1.06); }
.frame--mono:hover img{ filter:grayscale(0) contrast(1); }

.detail-list{
  display:flex;
  flex-direction:column;
  gap:calc(var(--u) * 3);
  width:100%;
  margin-top:calc(var(--u) * 2);
}
.detail{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:calc(var(--u) * 2);
}
.detail h3{ margin:0 0 calc(var(--u) * .75); }

/* Collection */
.collection{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.collection__title{
  font-family:var(--font-display);
  font-size:clamp(48px,11.5vw,124px);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-align:center;
  margin:calc(var(--u) * 2) 0 clamp(48px,7vw,88px);
  background:linear-gradient(to bottom,#ffffff 18%,rgba(255,255,255,.18) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.collection__items{
  display:flex;
  flex-direction:column;
  gap:clamp(24px,4vw,56px);
  width:100%;
}

.showcase{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:var(--r-image);
  border:1px solid var(--outline-faint);
}
.showcase img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.86;
  transform:scale(1.06);
  transition:opacity 1.4s ease, transform 2s cubic-bezier(.4,0,.2,1);
}
.showcase:hover img{ opacity:1; transform:scale(1.1); }

/* Glass Blade caption over the image */
.showcase__blade{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--gutter);
  padding:clamp(24px,4vw,48px);
  background:linear-gradient(to top,rgba(10,10,11,.92),rgba(10,10,11,.35) 55%,rgba(10,10,11,0));
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.showcase__blade p{ margin:0; }
.showcase__spec{
  max-width:34ch;
  text-align:right;
  font-family:var(--font-body);
  font-size:15px;
  line-height:23px;
  color:rgba(229,226,227,.62);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  padding:calc(var(--u) * 8) var(--margin);
  background:var(--surface-container-lowest);
  border-top:1px solid rgba(255,255,255,.1);
}
.footer__row{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--u) * 4);
}
.footer__mark{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:800;
  letter-spacing:.36em;
  color:var(--on-surface-bright);
  padding-left:.36em;
}
.footer__meta{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(229,226,227,.34);
  text-align:center;
}
.footer__links{ display:flex; gap:calc(var(--u) * 4); }
.footer__links a{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(229,226,227,.5);
  transition:color .3s ease;
}
.footer__links a:hover{ color:var(--on-surface-bright); }

/* ==========================================================================
   REVEALS
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0s);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split__copy,
  .split__media,
  .split--flip .split__copy,
  .split--flip .split__media{ grid-column:1 / -1; grid-row:auto; }
  .split--flip .split__media{ order:2; }
  .split--flip .split__copy{ order:1; }
  .frame{ aspect-ratio:3 / 2; }
  .footer__row{ flex-direction:column; text-align:center; }
  .showcase__blade{ flex-direction:column; align-items:flex-start; }
  .showcase__spec{ text-align:left; }
}

/* ==========================================================================
   REDUCED MOTION — scrubbing stays (it is the content); easing does not.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .reveal{ opacity:1; transform:none; }
  .frame img{ transform:scale(1.02); }
}

/* ==========================================================================
   INVENTORY + SINGLE VEHICLE
   Reuses the tokens, type roles, .nav, .btn and .footer above.
   Every new class is es- prefixed: WordPress puts its own classes on <body>
   (page, home, single, logged-in, ...) and an unprefixed name would inherit
   layout onto the whole document.
   ========================================================================== */

body.es-subpage{ padding-top:88px; }

@media (max-width:1024px){
  body.es-subpage{ padding-top:72px; }
}

.es-wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--margin) clamp(88px,11vw,148px);
}
.es-wrap--vehicle{ padding-top:clamp(28px,4vw,48px); }

.es-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(var(--u) * 2.5);
  margin-bottom:clamp(36px,5vw,64px);
}
.es-head__title{
  font-family:var(--font-display);
  font-size:clamp(36px,6.4vw,72px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
  color:var(--on-surface-bright);
}
.es-head__intro{ max-width:54ch; }

/* --- status filters ---------------------------------------------------- */
.es-filters{
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--u) * 1);
  margin-bottom:calc(var(--u) * 5);
  padding-bottom:calc(var(--u) * 3);
  border-bottom:1px solid var(--outline-faint);
}
.es-filters__item{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(229,226,227,.5);
  padding:calc(var(--u) * 1.25) calc(var(--u) * 2);
  border:1px solid transparent;
  border-radius:var(--r-sharp);
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.es-filters__item:hover{ color:var(--on-surface-bright); border-color:var(--outline); }
.es-filters__item.is-active{
  color:#fff;
  background:var(--racing-red);
  border-color:var(--racing-red);
}

/* --- grid + cards ------------------------------------------------------ */
.es-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(20px,2.6vw,36px);
}

.es-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--outline-faint);
  border-radius:var(--r-image);
  overflow:hidden;
  background:var(--surface-container-lowest);
  transition:border-color .4s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.es-card:hover{ border-color:var(--outline); transform:translateY(-4px); }

.es-card__media{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--surface-container-low);
}
.es-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.es-card:hover .es-card__media img{ transform:scale(1.05); }

.es-card__placeholder{
  width:100%;
  height:100%;
  background:
    linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,0) 60%),
    var(--surface-container);
}

.es-card__status{
  position:absolute;
  top:calc(var(--u) * 2);
  left:calc(var(--u) * 2);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff;
  background:var(--racing-red);
  padding:calc(var(--u) * .75) calc(var(--u) * 1.5);
  border-radius:var(--r-sharp);
}

.es-card__body{
  display:flex;
  flex-direction:column;
  gap:calc(var(--u) * 1);
  padding:calc(var(--u) * 3);
}
.es-card__title{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.01em;
  margin:0;
  color:var(--on-surface-bright);
}
.es-card__year{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  color:rgba(229,226,227,.45);
  margin-bottom:calc(var(--u) * .75);
}
.es-card__line{
  font-size:15px;
  line-height:22px;
  color:rgba(229,226,227,.55);
  margin:0;
}
.es-card__price{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--primary);
  margin:calc(var(--u) * 1) 0 0;
  font-variant-numeric:tabular-nums;
}

/* --- empty + pagination ------------------------------------------------ */
.es-empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(var(--u) * 3);
  padding:clamp(40px,7vw,88px);
  border:1px solid var(--outline-faint);
  border-radius:var(--r-image);
  background:var(--surface-container-lowest);
}
.es-empty .t-body{ max-width:48ch; margin:0; }

.es-pager{
  display:flex;
  justify-content:center;
  gap:calc(var(--u) * 1);
  margin-top:clamp(36px,5vw,64px);
}
.es-pager .page-numbers{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(229,226,227,.55);
  padding:calc(var(--u) * 1.25) calc(var(--u) * 2);
  border:1px solid var(--outline-faint);
  border-radius:var(--r-sharp);
  transition:color .3s ease, border-color .3s ease;
}
.es-pager .page-numbers:hover{ color:var(--on-surface-bright); border-color:var(--outline); }
.es-pager .page-numbers.current{
  color:#fff;
  background:var(--racing-red);
  border-color:var(--racing-red);
}

/* --- single vehicle ---------------------------------------------------- */
.es-vehicle__hero{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:var(--r-image);
  border:1px solid var(--outline-faint);
  margin-bottom:clamp(28px,4vw,52px);
}
.es-vehicle__hero img{ width:100%; height:100%; object-fit:cover; }

.es-vehicle__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:calc(var(--u) * 4);
  padding-bottom:clamp(28px,4vw,44px);
  border-bottom:1px solid var(--outline-faint);
}
.es-vehicle__title{
  font-family:var(--font-display);
  font-size:clamp(28px,4.4vw,50px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  margin:calc(var(--u) * 1.5) 0 calc(var(--u) * 1.5);
  color:var(--on-surface-bright);
}
.es-vehicle__year{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.2em;
  color:rgba(229,226,227,.45);
  margin-bottom:calc(var(--u) * 1);
}
.es-vehicle__badge{ color:rgba(229,226,227,.5); margin:0; }

.es-vehicle__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(var(--u) * 2);
}
.es-vehicle__price{
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--on-surface-bright);
  margin:0;
  font-variant-numeric:tabular-nums;
}

.es-vehicle__body{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:clamp(36px,4.5vw,64px);
  padding:clamp(36px,4.5vw,60px) 0;
}
.es-vehicle__copy{
  font-family:var(--font-body);
  font-size:18px;
  line-height:30px;
  font-weight:300;
  color:rgba(229,226,227,.72);
}
.es-vehicle__copy > * + *{ margin-top:calc(var(--u) * 3); }
.es-vehicle__copy h2,
.es-vehicle__copy h3{
  font-family:var(--font-display);
  color:var(--on-surface-bright);
  letter-spacing:.02em;
}
.es-vehicle__copy img{ border-radius:var(--r-image); max-width:100%; height:auto; }
.es-vehicle__copy a{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }

.es-vehicle__specs{
  align-self:start;
  padding:calc(var(--u) * 3);
  border:1px solid var(--outline-faint);
  border-radius:var(--r);
  background:var(--surface-container-lowest);
}
.es-speclist{ margin:calc(var(--u) * 2) 0 0; }
.es-speclist__row{
  display:flex;
  justify-content:space-between;
  gap:calc(var(--u) * 2);
  padding:calc(var(--u) * 1.5) 0;
  border-top:1px solid var(--outline-faint);
}
.es-speclist__row:first-child{ border-top:0; }
.es-speclist dt{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(229,226,227,.45);
}
.es-speclist dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  color:var(--on-surface-bright);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.es-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.es-gallery__item{ margin:0; }
.es-gallery__item img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:var(--r-image);
  border:1px solid var(--outline-faint);
}

.es-vehicle__foot{ padding-top:clamp(36px,4.5vw,60px); }

@media (max-width:900px){
  .es-vehicle__body{ grid-template-columns:1fr; }
  .es-vehicle__head{ flex-direction:column; align-items:flex-start; }
  .es-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FOOTER LOCKUP
   Swaps the "ES" wordmark for the full lockup. Done in CSS rather than markup
   so all three footers pick it up without editing any template — and the "ES"
   text stays in the DOM, pushed out of view, so screen readers still get it.
   Path is relative to this stylesheet: assets/ -> assets/img/
   Source is 668x154 (aspect 4.338); dimensions below hold that ratio.
   ========================================================================== */

.footer__mark{
  display:block;
  width:139px;
  height:32px;
  padding-left:0;
  background:url('img/es-lockup.png') no-repeat center center;
  background-size:contain;
  text-indent:-200vw;
  white-space:nowrap;
  overflow:hidden;
}

@media (max-width:900px){
  .footer__mark{
    width:122px;
    height:28px;
  }
}

/* ==========================================================================
   NAV LOCKUP
   The full lockup replaces the monogram. At the previous 30px badge height
   the "SIGNATURE / COLLECTION" text is too small to read, so it steps up.
   Aspect is 4.34:1, so 36px tall renders 156px wide inside the 88px nav.
   ========================================================================== */

.nav__badge img{ height:36px; }

@media (max-width:1024px){
  .nav__badge img{ height:28px; }
}

/* The collection card links through to the inventory, so it is an <a>.
   Anchors are inline by default, which would drop the width and aspect-ratio
   set on .showcase and collapse the card. */
.collection__items .showcase{ display:block; }

/* ==========================================================================
   MOBILE NAV
   .nav__toggle was styled in the original sheet but the markup was never
   built, so below 1024px the links were simply hidden with no way to reach
   them. Driven by a checkbox rather than JS: es-signature.js only loads on
   the landing page, so a JS menu would be dead on Inventory and vehicle pages.
   ========================================================================== */

.nav__checkbox{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

@media (max-width:1024px){
  .nav{
    justify-content:flex-start;
    gap:calc(var(--u) * 1.5);
  }
  .nav__badge{ margin-right:auto; }

  .nav__toggle{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    flex:0 0 auto;
    cursor:pointer;
    border:1px solid rgba(194,199,202,.32);
    border-radius:var(--r-sharp);
    background:rgba(255,255,255,.03);
  }
  .nav__toggle span{
    display:block;
    width:18px;
    height:2px;
    background:var(--silver);
    transition:transform .3s ease, opacity .2s ease;
  }

  /* Hamburger folds into a cross when open. */
  .nav__checkbox:checked ~ .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__checkbox:checked ~ .nav__toggle span:nth-child(2){ opacity:0; }
  .nav__checkbox:checked ~ .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Keyboard focus lands on the hidden checkbox, so ring the label. */
  .nav__checkbox:focus-visible ~ .nav__toggle{
    outline:2px solid var(--racing-red);
    outline-offset:2px;
  }

  /* Panel drops out of the fixed bar. */
  .nav__links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:calc(var(--u) * 1) var(--margin) calc(var(--u) * 2);
    background:var(--glass-2);
    -webkit-backdrop-filter:blur(var(--blur-2)) saturate(140%);
    backdrop-filter:blur(var(--blur-2)) saturate(140%);
    border-bottom:1px solid var(--outline-faint);
  }
  .nav__checkbox:checked ~ .nav__links{ display:flex; }

  .nav__links .nav__link{
    padding:calc(var(--u) * 2.25) 0;
    border-bottom:1px solid var(--outline-faint);
    color:var(--on-surface);
  }
  .nav__links .nav__link:last-child{ border-bottom:0; }

  /* The desktop active marker sits above the text; on a stacked list it
     reads better as a left bar. */
  .nav__links .nav__link[aria-current="page"]::before{
    top:auto;
    left:calc(var(--margin) * -1 + 8px);
    width:2px;
    height:100%;
  }
}

/* ==========================================================================
   COLLECTION CARD ON PHONES
   The blade is absolute with backdrop-filter:blur(6px). Once it stacks into a
   column it grows tall enough to cover and blur roughly half the photograph.
   Below 760px it leaves the overlay and sits under the image instead.
   ========================================================================== */

@media (max-width:760px){
  .showcase{ aspect-ratio:auto; }

  .showcase img{
    aspect-ratio:16 / 9;
    height:auto;
    opacity:1;
    transform:none;
  }
  .showcase:hover img{ transform:none; }

  .showcase__blade{
    position:static;
    padding:calc(var(--u) * 3);
    background:var(--surface-container-lowest);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    gap:calc(var(--u) * 1.5);
  }
}

/* ==========================================================================
   LOADER LOCKUP
   Replaces the "ES" wordmark on the loading screen. CSS rather than markup,
   as with the footer, so no template changes — and the text stays in the DOM,
   pushed out of view, for screen readers.
   56vw keeps it narrower than the 60vw progress bar on small phones.
   ========================================================================== */

.loader__mark{
  width:min(240px,56vw);
  aspect-ratio:668 / 154;
  padding-left:0;
  background:url('img/es-lockup.png') no-repeat center center;
  background-size:contain;
  text-indent:-200vw;
  white-space:nowrap;
  overflow:hidden;
}

/* ==========================================================================
   LIGHTBOX
   Triggers are buttons wrapping the hero and gallery images, so keyboard
   activation comes free rather than being reimplemented on a div.
   ========================================================================== */

.es-zoom{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  cursor:zoom-in;
  overflow:hidden;
}
.es-vehicle__hero .es-zoom{ height:100%; }
.es-zoom img{ display:block; }

/* --- overlay ------------------------------------------------------------ */
.es-lb{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(6,6,7,.94);
  -webkit-backdrop-filter:blur(var(--blur-2));
  backdrop-filter:blur(var(--blur-2));
  opacity:0;
  transition:opacity .26s cubic-bezier(.4,0,.2,1);
}
/* [hidden] is a UA rule; the class above would otherwise win. */
.es-lb[hidden]{ display:none; }
.es-lb[data-open="true"]{ opacity:1; }

.es-lb__stage{
  margin:0;
  max-width:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.es-lb__stage img{
  display:block;
  max-width:min(1600px,92vw);
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--r-image);
  opacity:1;
  transition:opacity .2s ease;
}
.es-lb[data-loading="true"] .es-lb__stage img{ opacity:.25; }

/* --- controls ----------------------------------------------------------- */
.es-lb__close,
.es-lb__nav{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:1px solid rgba(194,199,202,.28);
  border-radius:var(--r-sharp);
  background:rgba(255,255,255,.04);
  color:var(--silver);
  font-family:var(--font-mono);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.es-lb__close:hover,
.es-lb__nav:hover{
  border-color:var(--racing-red);
  color:var(--on-surface-bright);
  background:rgba(227,30,36,.14);
}
.es-lb__close{ top:clamp(12px,2.5vw,28px); right:clamp(12px,2.5vw,28px); }
.es-lb__nav--prev{ left:clamp(12px,2.5vw,28px); top:50%; transform:translateY(-50%); }
.es-lb__nav--next{ right:clamp(12px,2.5vw,28px); top:50%; transform:translateY(-50%); }

.es-lb__count{
  position:absolute;
  bottom:clamp(14px,2.5vw,28px);
  left:0;
  right:0;
  margin:0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  color:rgba(229,226,227,.55);
  font-variant-numeric:tabular-nums;
}

/* Page must not scroll behind the viewer. */
body.es-lb-open{ overflow:hidden; }

@media (max-width:600px){
  .es-lb__nav{ top:auto; bottom:clamp(52px,12vw,72px); transform:none; }
  .es-lb__stage img{ max-height:70vh; }
}

/* ==========================================================================
   CONTACT
   Two columns: details on the left, form on the right. Form field styling is
   deliberately light — Fluent Forms brings its own CSS, which survives the
   stylesheet purge, so these rules only set what it inherits.
   ========================================================================== */

.es-contact{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:clamp(40px,5vw,80px);
  align-items:start;
}

.es-contact__details{
  display:flex;
  flex-direction:column;
  gap:calc(var(--u) * 4);
  padding:calc(var(--u) * 4);
  border:1px solid var(--outline-faint);
  border-radius:var(--r);
  background:var(--surface-container-lowest);
}

.es-detail{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(var(--u) * 1);
}
.es-detail + .es-detail{
  padding-top:calc(var(--u) * 4);
  border-top:1px solid var(--outline-faint);
}
.es-detail__value{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:28px;
  color:var(--on-surface-bright);
}
.es-detail__value--address{
  font-size:16px;
  line-height:26px;
  color:rgba(229,226,227,.75);
}
.es-detail__value a{
  color:var(--on-surface-bright);
  border-bottom:1px solid var(--outline);
  padding-bottom:2px;
  transition:border-color .3s ease, color .3s ease;
}
.es-detail__value a:hover{
  border-bottom-color:var(--racing-red);
  color:#fff;
}
.es-detail .btn--text{ margin-top:calc(var(--u) * 1.5); }

.es-contact__note{
  padding-top:calc(var(--u) * 3);
  border-top:1px solid var(--outline-faint);
  margin:0;
}

.es-contact__form{
  display:flex;
  flex-direction:column;
  gap:calc(var(--u) * 2.5);
}

@media (max-width:900px){
  .es-contact{ grid-template-columns:1fr; }
  .es-contact__form{ order:-1; }
}

/* --- what the form inherits ------------------------------------------- */
.es-main__content{
  font-family:var(--font-body);
  font-size:16px;
  line-height:26px;
  color:rgba(229,226,227,.72);
}
.es-main__content label{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(229,226,227,.55);
  margin-bottom:calc(var(--u) * 1);
}
.es-main__content input[type="text"],
.es-main__content input[type="email"],
.es-main__content input[type="tel"],
.es-main__content input[type="url"],
.es-main__content input[type="number"],
.es-main__content select,
.es-main__content textarea{
  width:100%;
  background:var(--surface-container-lowest);
  color:var(--on-surface-bright);
  border:0;
  border-bottom:1px solid rgba(194,199,202,.32);
  border-radius:0;
  padding:calc(var(--u) * 1.5) 0;
  font-family:var(--font-body);
  font-size:16px;
  transition:border-color .3s ease;
}
.es-main__content input:focus,
.es-main__content select:focus,
.es-main__content textarea:focus{
  outline:none;
  border-bottom-color:var(--racing-red);
}
.es-main__content textarea{ min-height:150px; resize:vertical; }
.es-main__content input[type="submit"],
.es-main__content button[type="submit"]{
  width:auto;
  background:var(--racing-red);
  color:#fff;
  border:0;
  border-radius:var(--r-sharp);
  padding:calc(var(--u) * 2) calc(var(--u) * 4);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease;
}
.es-main__content input[type="submit"]:hover,
.es-main__content button[type="submit"]:hover{ background:#ff2a30; }

.es-notice{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(229,226,227,.6);
  padding:calc(var(--u) * 2) calc(var(--u) * 2.5);
  border-left:2px solid var(--racing-red);
  background:var(--surface-container-lowest);
  margin:0;
}
.es-notice strong{ color:var(--on-surface-bright); font-weight:500; }

/* ==========================================================================
   FLUENT FORMS SUBMIT BUTTON
   Matched to .btn--primary.

   !important is deliberate. Fluent Forms' Styler emits an inline <style> block
   near the end of the document, after this stylesheet, and its rules can carry
   ID specificity — so neither source order nor a longer selector reliably
   wins. Scoped to body.es-signature so forms elsewhere on the site are
   untouched.
   ========================================================================== */

body.es-signature .ff-btn-submit,
body.es-signature button.ff-btn-submit,
body.es-signature .ff_btn_style{
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:calc(var(--u) * 2) calc(var(--u) * 4) !important;
  background:var(--racing-red) !important;
  background-image:none !important;
  color:#fff !important;
  border:1px solid var(--racing-red) !important;
  border-radius:var(--r-sharp) !important;
  font-family:var(--font-mono) !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background .35s ease, box-shadow .35s ease;
}

body.es-signature .ff-btn-submit:hover,
body.es-signature button.ff-btn-submit:hover,
body.es-signature .ff_btn_style:hover{
  background:#ff2a30 !important;
  color:#fff !important;
  border-color:#ff2a30 !important;
  box-shadow:0 0 40px rgba(227,30,36,.35) !important;
}

body.es-signature .ff-btn-submit:focus-visible,
body.es-signature button.ff-btn-submit:focus-visible{
  outline:2px solid var(--primary) !important;
  outline-offset:3px !important;
}

/* Mid-submit, so it does not flash back to the plugin default. */
body.es-signature .ff-btn-submit:disabled,
body.es-signature .ff-btn-submit[disabled],
body.es-signature .ff-btn-submit.ff_working{
  background:var(--racing-red) !important;
  color:#fff !important;
  opacity:.6 !important;
  cursor:wait;
}

/* Fluent Forms wraps the button in a group that can add its own alignment. */
body.es-signature .ff-el-group.ff-text-left{ text-align:left; }

/* ==========================================================================
   HEADER MUST SIT AT THE VIEWPORT TOP
   position:fixed resolves against the viewport — unless an ancestor creates a
   containing block for it. A transform, filter, perspective, backdrop-filter,
   will-change or contain on html or body silently re-anchors the header to the
   body box instead. On subpages, which carry padding-top to clear the header,
   that shows up as empty space above it.

   Nothing on the document root legitimately needs those properties, and a
   theme or plugin can apply them through inline CSS that survives the
   stylesheet purge, so they are neutralised here. The header is also pinned to
   top:0 unconditionally: no offset rule means no gap is possible.
   ========================================================================== */

html,
body.es-signature{
  transform:none !important;
  filter:none !important;
  perspective:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  will-change:auto !important;
  contain:none !important;
}

body.es-signature .nav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
}