/* Model landing pages. Same tokens, same radius and motion scales, same glass recipe
   as index.html, kept in one file because these ten pages are identical in structure
   and there is no build step to share a partial. */
:root{
  --paper:#F7F6F2; --paper-2:#EFEDE6; --ink:#131311; --ink-2:#63615A; --line:#E3E0D8;
  --ok:#1D6B45;
  --r-lg:16px; --r-md:10px; --r-sm:6px;
  --dur:200ms; --ease:cubic-bezier(.22,.61,.36,1); --dur-open:280ms;
  --headroom:104px;
  --glass-blur:blur(28px) saturate(210%);
  --glass-bg:color-mix(in srgb, var(--paper) 42%, transparent);
  --glass-bg-solid:var(--paper);
  --glass-gloss:linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.30) 22%,
    rgba(255,255,255,.11) 44%, rgba(255,255,255,0) 60%);
  --glass-streak:linear-gradient(180deg, rgba(255,255,255,.92) 0, rgba(255,255,255,.30) 1px,
    rgba(255,255,255,0) 2px);
  --irid:linear-gradient(100deg, rgba(198,217,255,.46) 0%, rgba(255,227,243,.36) 32%,
    rgba(210,243,231,.44) 64%, rgba(198,217,255,.38) 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
/* the <picture> wrapper is layout transparent, so height:100% on the image still
   resolves against .ph and object-fit keeps cropping as it did before */
picture{display:contents}
p,dd,li,.lede,.note{text-wrap:pretty}
h1,h2,h3,summary{text-wrap:balance}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:"Instrument Sans",-apple-system,system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-top:var(--headroom)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
.mono{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
[id]{scroll-margin-top:var(--headroom)}

/* ---------- header, the same glass as the rest of the site ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;
  align-items:center;padding:22px clamp(20px,4vw,56px);background:transparent;
  border-bottom:1px solid transparent}
/* GLASS PLATE. Same reason as the homepage: iOS Safari samples a fixed element's
   backdrop against the document mid-scroll, so the filter lives on an absolutely
   positioned child instead, with no isolation and no negative z-index inside it. */
header .plate{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--glass-bg);background-clip:padding-box;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
header>*:not(.plate){position:relative;z-index:1}
header .plate::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--glass-streak),var(--glass-gloss)}
header .plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--irid);pointer-events:none}
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:12px 6px 12px 0}
.wordmark .bar{width:2px;height:20px;background:var(--ink)}
.logoimg{display:block;width:auto;max-width:100%}
header .logoimg{height:15px}
header nav{display:flex;gap:clamp(14px,2vw,26px);align-items:center}
header nav a{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;min-width:44px;padding:0 4px;margin:-11px 0;
  text-shadow:0 0 3px var(--paper),0 0 6px var(--paper),0 0 12px rgba(247,246,242,.94)}
header nav a:hover{opacity:.7}
header nav a.cta{border-bottom:1px solid var(--ink);padding-bottom:2px}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  header{border-bottom-color:var(--line)}
  header .plate{background:var(--glass-bg-solid)}
  header .plate::before{display:none}
}
@media (prefers-reduced-transparency:reduce){
  header{border-bottom-color:var(--line)}
  header .plate{background:var(--glass-bg-solid);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  header .plate::before,header .plate::after{display:none}
}

/* ---------- layout ---------- */
main{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
section{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
h1{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.95;font-size:clamp(34px,6.4vw,76px)}
h2{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1;font-size:clamp(24px,3.4vw,40px);margin-bottom:22px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:22px 0 0;font-size:12px}
/* every crumb, link or separator or current page, gets the same 44px box so their text
   sits on one baseline. Plain inline spans centred in a 44px line sat 12px lower. */
.crumbs a,.crumbs span{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 2px}
/* the crumbs are a navigation row, not prose, so 2.5.5 applies in both axes. "NOON"
   is only 35px of text, which left the link 4.5px short of a 44px target. */
.crumbs a{min-width:44px}
.crumbs a{text-decoration:underline;text-underline-offset:4px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}

.mhero{padding-top:clamp(24px,4vw,44px)}
.eyebrow{display:block;margin-bottom:16px}
.mhero .claim{font-size:clamp(16px,1.9vw,20px);color:var(--ink-2);max-width:62ch;margin-top:18px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 30px;min-height:48px;border:1px solid var(--ink);border-radius:var(--r-md);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.big{padding:19px 36px;min-height:56px}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- spec rows ---------- */
.spec{border-top:1px solid var(--ink)}
.spec .row{display:grid;grid-template-columns:clamp(120px,18vw,190px) 1fr;gap:14px 22px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec dt{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.spec dd{color:var(--ink);max-width:62ch}
.variants{list-style:none;margin:24px 0 0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.variants li{font-size:14.5px;color:var(--ink-2);padding-left:16px;position:relative}
.variants li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--line)}
.note{margin-top:26px;font-size:14px;color:var(--ink-2);max-width:64ch}
#arrives p{color:var(--ink-2);max-width:64ch;margin-bottom:14px}
#arrives p:last-child{margin-bottom:0}
.lede{color:var(--ink-2);max-width:64ch;margin-bottom:clamp(24px,4vw,38px)}

/* ---------- finishes grid ---------- */
.grid{display:grid;gap:clamp(14px,2.2vw,26px);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){ .grid{grid-template-columns:repeat(4,1fr)} }
/* Past builds: three photographs of finished wheels rather than fourteen renders, so
   they run one per row on a phone and three across from 900, the rhythm they had as the
   lookbook on the homepage. */
.grid.builds{grid-template-columns:1fr}
@media(min-width:900px){ .grid.builds{grid-template-columns:repeat(3,1fr)} }
.grid figure{margin:0}
.grid .ph{aspect-ratio:1/1;background:var(--paper-2);border-radius:var(--r-lg);overflow:hidden}
.grid .ph img{border-radius:inherit}
.grid figcaption{margin-top:10px;font-size:12px;line-height:1.45;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);text-wrap:balance}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-weight:600;font-size:16px;color:var(--ink);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:9px;height:9px;
  border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);
  transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-open) var(--ease)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.faq p{margin:0 0 22px;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:64ch}
.faq-body{overflow:hidden}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- cta ---------- */
.cta{text-align:center}
.cta .lede{margin-inline:auto}

/* ---------- footer ---------- */
/* One footer, on every page, written from one source so the copies cannot drift.
   Three aligned parts: who we are, what we build, how to reach us. The model index is
   a named list in readable case rather than ten uppercase codes in a grid, each row
   giving the platform and the car it is. Rows are grid cells with a 44px minimum, so
   two targets can never sit closer together than their own height. */
footer{border-top:1px solid var(--line);margin:0;
  padding:clamp(44px,6vw,64px) clamp(20px,4vw,56px) 28px;
  font-family:"Instrument Sans",-apple-system,system-ui,sans-serif;
  display:block;background:var(--paper)}
.foot-in{max-width:1240px;margin:0 auto;display:grid;align-items:start;
  gap:clamp(30px,4vw,40px) clamp(28px,5vw,72px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.9fr)}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot-mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;
  padding:12px 6px 12px 0;text-decoration:none}
.foot-brand .bar{width:2px;height:16px;background:var(--ink);flex:none}
footer .logoimg{display:block;width:auto;height:11px;max-width:100%}
.foot-say{margin:0;max-width:30ch;font-size:13px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.foot-h{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 10px;line-height:1}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid}
.foot-col li{margin:0;max-width:none}
.foot-col a{display:flex;align-items:center;gap:10px;min-height:44px;padding:2px 0;
  font-size:14px;line-height:1.35;color:var(--ink-2);text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.foot-col a:hover .p{text-decoration:underline;text-underline-offset:3px}
.foot-fit .p{color:var(--ink);font-weight:500;flex:none;min-width:62px}
.foot-fit .c{color:var(--ink-2);font-size:13px}
.foot-base{max-width:1240px;margin:clamp(30px,4vw,44px) auto 0;padding-top:20px;
  border-top:1px solid var(--line);color:var(--ink-2);
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
@media(min-width:560px){
  .foot-fit ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2.5vw,44px)}
}
@media(max-width:860px){
  .foot-in{grid-template-columns:1fr}
  .foot-say{max-width:46ch}
}
/* THE BRAND, AT BRAND SIZE. 15px of logo beside an 11px nav read as a caption rather
   than a wordmark, and at that height the strokes are barely a device pixel, so
   antialiasing greys them against the paper. The header row is 44px tall either way
   (the nav links set it), so this does not move the header. Same treatment as the
   homepage, so the mark is one size across the site on a phone. */
@media(max-width:640px){
  header .logoimg{height:22px}
  header .wordmark{gap:12px;padding-block:9px}
  header .wordmark .bar{width:3px;height:26px}
}

@media(max-width:640px){
  .crumbs,.mono,header nav a,.spec dt,.grid figcaption{font-size:12px}
  .spec .row{grid-template-columns:1fr;gap:4px}
}