@font-face{font-family:Archivo;src:url(/assets/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url(/assets/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 75%;font-display:swap}
:root{
  --paper:#f1eee7; --ink:#14130f; --rule:#d0c9b9; --red:#c3121f; --dim:#5d594e;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sans:Archivo,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);font-variant-numeric:tabular-nums}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
img,video{max-width:100%;display:block;height:auto}

/* bar */
.bar{position:sticky;top:0;z-index:20;display:flex;gap:18px;align-items:baseline;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--rule);background:var(--paper);flex-wrap:wrap}
.brand{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.bar nav{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bar nav a{text-decoration:none;color:var(--dim)}
.bar nav a:hover{color:var(--red)}
.bar nav a.lang{color:var(--ink);border-left:1px solid var(--rule);padding-left:16px}

main{max-width:1120px;margin:0 auto;padding:0 22px 90px}
.cmd{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);margin:34px 0 10px}
.hero{padding:8px 0 26px;border-bottom:1px solid var(--rule)}
h1{font-size:clamp(30px,5.2vw,58px);line-height:.98;letter-spacing:-.035em;font-weight:800;font-stretch:86%;
  margin:0 0 18px;max-width:19ch;text-wrap:balance}
.lede{margin:0;max-width:62ch;color:var(--ink);font-size:clamp(16px,1.5vw,19px)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}

.btn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--red);color:#fff;text-decoration:none;border:1px solid var(--red);padding:12px 18px;border-radius:2px;cursor:pointer}
.btn:hover{background:#a30f1a;border-color:#a30f1a}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin:0;padding:0;background:var(--rule);border-bottom:1px solid var(--rule)}
.stats>div{background:var(--paper);padding:18px 14px 20px}
.stats dt{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.stats dd{margin:0;font-size:12.5px;line-height:1.35;color:var(--dim);max-width:20ch}

/* cards */
.strip,.grid{display:grid;gap:26px;margin:34px 0 40px}
.strip{grid-template-columns:repeat(3,1fr)}
.grid{grid-template-columns:repeat(3,1fr)}
.card{text-decoration:none;display:block}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#e4e0d7;border:1px solid var(--rule)}
.card:hover img{border-color:var(--red)}
.card-t{display:block;font-weight:700;font-stretch:88%;letter-spacing:-.01em;margin:10px 0 3px;line-height:1.2}
.card-p{display:block;font-family:var(--mono);font-size:12.5px;color:var(--dim)}

/* kv */
.kv{margin:10px 0 40px;border-top:1px solid var(--rule)}
.kv>div{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--rule)}
.kv .k{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.kv .v{max-width:60ch}

.note{border:1px solid var(--ink);padding:22px;margin:0 0 20px}
.note .cmd{margin:0 0 8px}
.note p:last-child{margin:0;max-width:70ch}

/* car page */
h1.car-h{font-size:clamp(26px,4vw,44px);max-width:24ch;margin:10px 0 8px}
.car-sub{font-family:var(--mono);font-size:14px;color:var(--dim);margin:0 0 26px}
.hero-img,.vid,.orig,figure{margin:0 0 26px}
.hero-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}
figcaption{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:8px;max-width:70ch}
.vid video{width:100%;border:1px solid var(--rule);background:#000}
.copy{margin:0 0 30px;max-width:70ch}
.copy .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.copy p{font-size:clamp(17px,1.6vw,20px);line-height:1.5}
.facts{margin:18px 0 0;padding:0;list-style:none}
.facts li{padding:9px 0;border-top:1px solid var(--rule);font-family:var(--mono);font-size:13px}
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0 0 34px}
.spec>div{background:var(--paper);padding:14px}
.spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.spec dd{margin:0;font-weight:700;font-stretch:90%}
.spec .dim{font-weight:400;color:var(--dim);font-family:var(--mono);font-size:12px}

.lead{border-top:2px solid var(--ink);padding-top:26px;margin:0 0 40px;max-width:620px}
.lead h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;margin:0 0 10px;font-weight:800;font-stretch:88%}
.form{display:grid;gap:6px;margin:18px 0 0}
.form label{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin-top:10px}
.form input,.form textarea{font:inherit;font-size:16px;padding:11px 12px;background:#faf8f3;border:1px solid #b8b1a1;border-radius:2px;width:100%}
.form input:focus,.form textarea:focus{border-color:var(--red);outline:2px solid var(--red);outline-offset:1px}
.form .btn{margin-top:18px;justify-self:start}
.small{font-size:12.5px;margin:10px 0 0;max-width:52ch}
.dim{color:var(--dim)}
.buy{margin:0 0 44px}
.more{border-top:1px solid var(--rule);padding-top:26px}

footer{border-top:1px solid var(--rule);padding:24px 22px 40px;max-width:1120px;margin:0 auto}
footer p{margin:0 0 8px;font-size:12.5px;color:var(--dim);max-width:90ch}

/* case study */
.case h2{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;font-weight:800;font-stretch:88%;margin:44px 0 12px}
.case p{max-width:68ch}
table{width:100%;border-collapse:collapse;margin:18px 0 30px;font-size:14.5px}
th,td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--rule)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--ink)}
td.num{font-family:var(--mono);white-space:nowrap}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 30px}
.proof figure{margin:0}
.proof figcaption{margin-top:6px}
.before{color:var(--dim)}

@media (max-width:860px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .strip,.grid{grid-template-columns:repeat(2,1fr)}
  .spec{grid-template-columns:repeat(2,1fr)}
  .kv>div{grid-template-columns:1fr;gap:4px}
  .proof{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .strip,.grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  main{padding:0 16px 70px}
  .bar{padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}