@import url("fonts.css");

:root{
  --bg:#0e110d; --bg2:#141810; --bg3:#1b2018;
  --line:#262d20; --line2:#38422e;
  --fg:#edf1e6; --muted:#a2ad96; --muted2:#7a8470;
  --accent:#b6cf5e; --accent-hi:#cbe27a; --accent-dim:#7f9247;
  --wrap:1160px;
  --sans:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:400 16.5px/1.65 var(--sans);font-stretch:100%;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1.1rem}
h1,h2,h3{margin:0;font-weight:800;font-stretch:118%;letter-spacing:-.035em}
h1,h2{line-height:1.05}
h3{line-height:1.3}

/* browser surfaces */
::selection{background:var(--accent);color:#11150c}
:root{scrollbar-color:var(--line2) var(--bg);color-scheme:dark}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2);border:3px solid var(--bg);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--accent-hi)}
input,textarea{caret-color:var(--accent)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--accent);color:#11150c;
  padding:12px 18px;border-radius:3px;font-weight:700}
.lede{font-size:clamp(17px,1.7vw,19.5px);color:var(--muted);max-width:68ch}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(14,17,13,.72);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease}
header.stuck{background:rgba(14,17,13,.94);border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:30px;min-height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--fg);
  font-weight:800;font-size:15px;font-stretch:112%;letter-spacing:.08em;
  text-transform:uppercase;margin-right:auto}
.brand em{font-style:normal;font-weight:400;color:var(--muted)}
nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;
  transition:color .18s ease}
nav a:hover,nav a[aria-current=page]{color:var(--fg)}
nav a.cta{color:#11150c;background:var(--accent);padding:9px 17px;border-radius:3px;
  font-weight:700;transition:background .18s ease,transform .18s ease}
nav a.cta:hover{background:var(--accent-hi)}

/* buttons */
.btn{display:inline-block;padding:14px 28px;border-radius:3px;text-decoration:none;
  font-weight:700;font-size:15.5px;font-stretch:105%;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.btn-primary{background:var(--accent);color:#11150c}
.btn-primary:hover{background:var(--accent-hi);color:#11150c}
.btn-ghost{border:1px solid var(--line2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* hero */
.hero{position:relative;min-height:clamp(540px,82vh,820px);display:flex;
  align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(14,17,13,.62) 0%,rgba(14,17,13,.12) 32%,rgba(14,17,13,.94) 100%),
  linear-gradient(94deg,rgba(14,17,13,.92) 0%,rgba(14,17,13,.42) 52%,rgba(14,17,13,0) 92%)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.07);animation:settle 1.6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero-inner{position:relative;z-index:2;padding-block:clamp(44px,6vw,84px);width:100%}
.hero h1{font-size:clamp(58px,9.6vw,96px);font-weight:900;font-stretch:125%;
  letter-spacing:-.038em;margin-bottom:16px}
.hero-sub{font-size:clamp(19px,2.2vw,25px);font-weight:600;font-stretch:108%;
  line-height:1.32;letter-spacing:-.018em;margin:0 0 16px;max-width:24ch;color:var(--fg)}
.hero .lede{color:#c9d3be;max-width:56ch}
@media (prefers-reduced-motion:reduce){
  .hero-bg{animation:none;transform:scale(1)}
  html{scroll-behavior:auto}
}

/* record line under the hero */
.record{background:var(--bg2);border-bottom:1px solid var(--line)}
.record p{margin:0;padding-block:clamp(26px,3.4vw,38px);
  font-size:clamp(16.5px,1.75vw,20px);line-height:1.55;color:var(--muted);max-width:92ch}
.record strong{color:var(--fg);font-weight:700}

section{padding-block:clamp(60px,7.5vw,104px);border-bottom:1px solid var(--line)}
h2{font-size:clamp(31px,4.1vw,50px)}
.head{max-width:860px;margin-bottom:clamp(40px,5vw,64px)}
h2{max-width:19ch}
.head .lede{margin-top:20px;max-width:64ch}

/* capability rows */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(215px,.34fr) 1fr;gap:16px 48px;
  padding-block:30px;border-bottom:1px solid var(--line);align-items:baseline}
.row h3{font-size:clamp(21px,2.4vw,29px);font-weight:800;font-stretch:115%}
.row p{margin:0;color:var(--muted);max-width:62ch}
.row.lead h3{color:var(--accent)}

/* statements */
.statements{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,3.6vw,56px)}
.statements p{margin:0;font-size:clamp(17px,1.8vw,20px);line-height:1.5;color:var(--muted)}
.statements strong{display:block;color:var(--fg);font-weight:700;font-stretch:112%;
  letter-spacing:-.015em;margin-bottom:7px;font-size:1.06em}

/* specifications */
.spec-split{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,72px)}
table.specs{width:100%;border-collapse:collapse;font-size:15.5px}
table.specs th,table.specs td{text-align:left;padding:15px 0;
  border-bottom:1px solid var(--line);vertical-align:baseline}
table.specs th{font-weight:500;color:var(--muted2);width:45%;letter-spacing:0}
table.specs td{font-weight:600;color:var(--fg);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.spec-note{font-size:14px;color:var(--muted2);margin-top:22px;max-width:80ch}
.spec-note sup{color:var(--accent-dim)}

figure{margin:0}
figcaption{font-size:14px;color:var(--muted2);margin-top:15px;max-width:62ch}
.band{margin-top:clamp(36px,4.5vw,60px)}
.band img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);margin-top:28px}
.two-up figure{display:flex;flex-direction:column}
.two-up img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line)}
.drawing{margin-top:clamp(36px,4.5vw,60px);background:var(--bg2);border:1px solid var(--line);
  padding:clamp(22px,4vw,56px)}
.drawing img{margin-inline:auto;aspect-ratio:auto}

/* timeline */
.tl-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,64px);align-items:start}
.tl{list-style:none;margin:0;padding:0;border-left:1px solid var(--line2)}
.tl li{padding:0 0 32px 30px;position:relative}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-5px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--line2)}
.tl li.now::before{background:var(--accent);box-shadow:0 0 0 5px rgba(182,207,94,.16)}
.tl h3{font-size:17px;font-weight:700;font-stretch:110%;letter-spacing:-.01em;
  margin-bottom:7px}
.tl li.now h3{color:var(--accent)}
.tl p{color:var(--muted);margin:0;font-size:15.5px}

/* contact */
.contact{background:var(--bg2)}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(28px,3.4vw,48px)}
.contact-grid h3{font-size:16px;font-weight:700;font-stretch:110%;color:var(--muted2);
  letter-spacing:0;line-height:1.4;margin-bottom:14px}
a.mail{display:inline-block;font-size:clamp(19px,2.3vw,27px);font-weight:800;
  font-stretch:112%;letter-spacing:-.028em;text-decoration:none;
  border-bottom:2px solid var(--accent-dim);padding-bottom:4px;
  transition:border-color .2s ease,color .2s ease}
a.mail:hover{border-bottom-color:var(--accent)}
.contact-grid p{color:var(--muted);margin:0}

/* registry list */
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:14px 36px;margin:0;font-size:16px}
dl.facts dt{color:var(--muted2)}
dl.facts dd{margin:0;font-variant-numeric:tabular-nums}

.callout{border-left:2px solid var(--accent);background:var(--bg2);
  padding:clamp(24px,3vw,34px);margin-top:clamp(36px,4.5vw,56px)}
.callout p{margin:0;max-width:80ch;color:var(--muted)}
.callout strong{color:var(--fg)}

/* renders pending real photography — delete with the markup */
.render{position:relative}
.render::after,.render-badge{content:"Render";position:absolute;top:13px;right:13px;z-index:3;
  font-size:11px;font-weight:800;font-stretch:112%;letter-spacing:.12em;
  text-transform:uppercase;color:#11150c;background:var(--accent);padding:6px 10px;
  border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.render-badge{top:auto;bottom:16px;right:16px}

footer{padding-block:56px;color:var(--muted2);font-size:14.5px}
.foot-grid{display:flex;gap:48px;flex-wrap:wrap;justify-content:space-between}
footer strong{color:var(--fg);font-weight:700}
footer .legal{max-width:48ch;line-height:1.75}
footer nav{flex-direction:column;gap:10px;align-items:flex-start}
footer nav a{color:var(--muted)}

@media (max-width:880px){
  .spec-split,.two-up,.tl-grid{grid-template-columns:1fr}
  .spec-split{gap:0}
  .tl-grid{gap:40px}
  .row{grid-template-columns:1fr;gap:10px;padding-block:26px}
  .statements{grid-template-columns:1fr}
}
@media (max-width:760px){
  .drawing{overflow-x:auto;padding:20px}
  .drawing img{min-width:620px}
}
@media (max-width:640px){
  .bar{flex-wrap:wrap;min-height:0;padding-block:11px;gap:9px}
  .brand{flex:1 0 100%;font-size:13.5px;gap:9px;margin-right:0}
  .brand svg{width:22px;height:22px}
  nav{flex:1 0 100%;flex-wrap:nowrap;justify-content:space-between;
    align-items:center;gap:12px}
  nav a{font-size:14.5px}
  /* the in-page anchor is reachable from the hero button */
  nav a[href$="#specifications"]{display:none}
  nav a.cta{padding:8px 14px;font-size:14px;white-space:nowrap}
  .hero{min-height:80vh;align-items:flex-end}
  .hero-inner{padding-block:38px}
  .btns{gap:10px;margin-top:26px}
  .btn{padding:13px 20px;font-size:15px}
}