:root{
  --paper:#F0F3EF; --surface:#FAFBF9; --line:#CBD5C9;
  --ink:#101614; --ink-2:#3D4A45; --ink-3:#6D7B75;
  --pine:#175E4C; --pine-deep:#0C2A22; --pine-line:#1D4A3D;
  --node:#123328; --node-line:#25574A; --node-alt:#17362C;
  --signal:#E1552B; --signal-hover:#C8461F; --signal-soft:#F7DED2;
  --on-dark:#EAF2EC; --on-dark-2:#9FB8AC;
  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,5vw,80px);
  --gut:max(var(--pad),calc((100% - 1280px) / 2));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
h1,h2,h3,p,dl,dd,dt,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:10;background:var(--ink);color:var(--surface);padding:10px 14px;font:500 12px/1 var(--mono)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---------- shared type ---------- */
.eyebrow{font:500 11px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.eyebrow--pine{color:var(--pine)}
.eyebrow--muted{color:var(--on-dark-2)}
.h2{font-family:var(--display);font-size:clamp(1.55rem,2.5vw,2.125rem);font-weight:700;line-height:1.15;letter-spacing:-.022em;text-wrap:balance;max-width:660px}
.prose{font-size:18px;line-height:1.62;color:var(--ink-2);max-width:660px}
.tag{font:500 10px/1.4 var(--mono);letter-spacing:.12em;color:var(--ink-3)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:2px;font:500 13px/1 var(--mono);letter-spacing:.045em;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn--dark{background:var(--ink);color:var(--surface);padding:10px 18px;font-size:12px}
.btn--dark:hover{background:var(--pine)}
.btn--signal{background:var(--signal);color:#fff}
.btn--signal:hover{background:var(--signal-hover)}
.btn--ghost{border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--outline{border:1px solid var(--on-dark-2);color:var(--on-dark)}
.btn--outline:hover{border-color:var(--on-dark);background:#12362B}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:26px var(--gut)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{position:relative;display:block;width:22px;height:22px;flex:none}
.mark i{position:absolute;width:9px;height:9px;border-radius:1px;background:var(--pine)}
.mark i:nth-child(1){top:0;left:0}
.mark i:nth-child(2){top:0;left:13px}
.mark i:nth-child(3){top:13px;left:0}
.mark i:nth-child(4){top:13px;left:13px;background:var(--signal)}
.brand__name{font:700 17px/1 var(--display);letter-spacing:-.012em}
.brand__tag{font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3)}
.nav__links{display:flex;gap:34px}
.nav__links a{font:400 12px/1 var(--mono);letter-spacing:.03em;color:var(--ink-2);text-decoration:none}
.nav__links a:hover{color:var(--pine)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:72px;align-items:center;padding:96px var(--gut) 104px}
.hero__copy{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.hero h1{font-family:var(--display);font-size:clamp(2.4rem,5.2vw,4rem);font-weight:800;line-height:1.02;letter-spacing:-.026em;text-wrap:balance}
.lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:34ch}
.hero__art svg{display:block;width:100%;height:auto}

/* ---------- fact strip ---------- */
.meta{padding:0 var(--gut) 56px}
.meta__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.meta__grid>div{border-top:1px solid var(--line);padding:20px 24px 0 0;display:flex;flex-direction:column;gap:8px}
.meta dt{font:500 10px/1.4 var(--mono);letter-spacing:.13em;color:var(--ink-3)}
.meta dd{font:600 15px/1.3 var(--display)}

/* ---------- studio ---------- */
.studio{display:grid;grid-template-columns:220px minmax(0,1fr);gap:80px;padding:100px var(--gut);border-top:1px solid var(--line)}
.spine{display:flex;flex-direction:column;gap:14px}
.spine__note{font:400 11px/1.7 var(--mono);color:var(--ink-3)}
.studio__body{display:flex;flex-direction:column;gap:34px}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin-top:-16px}
.cap{border-top:1px solid var(--line);padding:20px 0 26px;display:flex;flex-direction:column;gap:9px}
.cap h3{font:600 19px/1.2 var(--display);letter-spacing:-.012em}
.cap p:last-child{font-size:15px;line-height:1.55;color:var(--ink-2)}

/* ---------- product bands ---------- */
.band{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:64px;align-items:start;padding:92px var(--gut) 96px}
.band--dark{grid-template-columns:minmax(0,1fr) 520px;background:var(--pine-deep);color:var(--on-dark)}
.band--light{background:var(--surface)}
.band--paper{background:var(--paper);border-top:1px solid var(--line)}
.band--reverse{grid-template-columns:500px minmax(0,1fr)}
.band__copy{display:flex;flex-direction:column;gap:22px}
.band__head{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.wordmark{font-family:var(--display);font-size:clamp(2rem,3.3vw,2.75rem);font-weight:800;letter-spacing:-.028em;line-height:1}
.pill{border:1px solid var(--line);border-radius:2px;padding:6px 11px;font:400 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.band--dark .pill{border-color:var(--on-dark-2);color:var(--on-dark-2)}
.pitch{font-size:19px;line-height:1.58;color:var(--ink-2)}
.band--dark .pitch{color:var(--on-dark)}
.specs{margin-top:10px}
.specs>div{display:grid;grid-template-columns:148px minmax(0,1fr);gap:24px;padding:13px 0;border-top:1px solid var(--line)}
.specs dt{font:400 10px/1.6 var(--mono);letter-spacing:.13em;color:var(--ink-3)}
.specs dd{font:400 13px/1.4 var(--mono)}
.band--dark .specs>div{border-top-color:var(--pine-line)}
.band--dark .specs dt{color:var(--on-dark-2)}
.band--dark .specs dd{color:var(--on-dark)}

/* ---------- diagram panels ---------- */
.panel{margin:0;display:flex;flex-direction:column;border-radius:3px}
.panel--outline{gap:30px;padding:30px 28px 26px;border:1px solid var(--pine-line)}
.panel--card{gap:22px;padding:28px 28px 30px;background:var(--paper);border:1px solid var(--line)}
.panel--dark{gap:24px;padding:28px 28px 30px;background:var(--pine-deep);color:var(--on-dark)}
.panel__title{font:400 10px/1.5 var(--mono);letter-spacing:.14em;color:var(--on-dark-2)}
.panel__title--ink{color:var(--ink-3)}

.topo{display:flex;align-items:center;overflow-x:auto;padding-bottom:2px}
.node{display:flex;flex-direction:column;gap:5px;padding:11px 13px;border-radius:2px;background:var(--node);border:1px solid var(--node-line)}
.node--alert{background:var(--node-alt);border-color:var(--signal)}
.node__label{font:500 11px/1.2 var(--mono);color:var(--on-dark);white-space:nowrap}
.node--alert .node__label{color:var(--signal)}
.node__sub{font:400 9px/1.2 var(--mono);letter-spacing:.07em;color:var(--on-dark-2);white-space:nowrap}
.link{flex:none;width:26px;height:1px;background:var(--on-dark-2)}
.topo__subs{display:flex;flex-direction:column;gap:7px}

.cycle{display:flex;flex-direction:column;gap:10px}
.cycle__strip{display:flex;gap:5px}
.cyc{flex:1;display:flex;flex-direction:column;gap:6px;align-items:center;min-width:0}
.cyc__track{display:flex;align-items:flex-end;width:100%;height:22px}
.cyc i{display:block;width:100%;border-radius:1px;background:#2E7F68}
.cyc[data-state="due"] i{background:var(--signal)}
.cyc[data-state="soon"] i{background:#173A30}
.cyc em{font:400 9px/1 var(--mono);font-style:normal;color:var(--on-dark-2)}
.cyc[data-state="due"] em{color:var(--signal)}

.code-row{display:flex;gap:18px;align-items:center}
.chip{width:96px;height:96px;flex:none}
.slug{font:500 15px/1.2 var(--mono)}
.slug__note{margin-top:7px;font:400 10px/1.6 var(--mono);color:var(--ink-3)}
.dests{display:flex;flex-direction:column;gap:8px}
.dest{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--surface)}
.dest .ico{color:var(--ink-3)}
.dest__label{flex:1;font:600 14px/1.2 var(--display)}
.dest__meta{font:400 9px/1 var(--mono);letter-spacing:.11em;color:var(--ink-3)}
.dest--live{background:var(--signal-soft);border-color:var(--signal)}
.dest--live .ico,.dest--live .dest__meta{color:var(--signal)}

.budget{display:flex;flex-direction:column;gap:9px}
.budget__bar{display:flex;gap:2px}
.budget__bar span{height:26px;border-radius:1px}
[data-seg="input"]{background:#25574A}
[data-seg="sim"]{background:#2E7F68}
[data-seg="render"]{background:#57B899}
[data-seg="present"]{background:var(--signal)}
.budget__axis{display:flex;justify-content:space-between;font:400 9px/1 var(--mono);letter-spacing:.09em;color:var(--on-dark-2)}
.legend>div{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:10px 0;border-top:1px solid var(--pine-line)}
.legend dt{display:flex;align-items:center;gap:11px;font:400 11px/1.2 var(--mono);color:var(--on-dark)}
.legend dt i{display:block;width:9px;height:9px;border-radius:1px;flex:none}
.legend dd{font:400 11px/1.2 var(--mono);color:var(--on-dark-2);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{padding:6px 10px;border:1px solid var(--node-line);border-radius:2px;font:400 9px/1 var(--mono);letter-spacing:.13em;color:var(--on-dark-2)}

/* ---------- process ---------- */
.process{display:flex;flex-direction:column;gap:44px;padding:100px var(--gut);background:var(--surface);border-top:1px solid var(--line)}
.process__head{display:flex;align-items:flex-end;justify-content:space-between;gap:80px}
.process__head>div{display:flex;flex-direction:column;gap:16px}
.process__note{max-width:300px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.step{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--ink);padding-top:22px}
.step--last{border-top-color:var(--signal)}
.step__n{font:700 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3)}
.step--last .step__n{color:var(--signal)}
.step h3{font:700 24px/1.1 var(--display);letter-spacing:-.021em}
.step__dur{font:400 9px/1.2 var(--mono);letter-spacing:.13em;color:var(--ink-3)}
.step p:last-child{font-size:15px;line-height:1.58;color:var(--ink-2)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:72px;padding:100px var(--gut);background:var(--pine-deep);color:var(--on-dark)}
.contact__copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.contact__h{font-family:var(--display);font-size:clamp(2rem,3.1vw,2.625rem);font-weight:800;line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.contact__lede{font-size:18px;line-height:1.6;color:var(--on-dark-2);max-width:520px}
.contact .actions{padding-top:10px}
.details>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;align-items:start;padding:15px 0;border-top:1px solid var(--pine-line)}
.details dt{font:400 10px/1.6 var(--mono);letter-spacing:.13em;color:var(--on-dark-2)}
.details dd{font:400 13px/1.5 var(--mono);color:var(--on-dark)}
.details dd.details__strong{font:600 15px/1.3 var(--display)}
.details a{text-decoration:none;border-bottom:1px solid var(--pine-line)}
.details a:hover{border-bottom-color:var(--signal);color:var(--signal)}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;padding:26px var(--gut);background:var(--paper);font:400 10px/1.4 var(--mono);letter-spacing:.1em;color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .hero{grid-template-columns:minmax(0,1fr) 380px;gap:56px}
  .band,.band--dark,.band--reverse{grid-template-columns:minmax(0,1fr) 440px;gap:48px}
  .band--reverse{grid-template-columns:440px minmax(0,1fr)}
  .studio{grid-template-columns:180px minmax(0,1fr);gap:48px}
  .contact{grid-template-columns:minmax(0,1fr) 420px;gap:48px}
}
@media (max-width:960px){
  .hero,.band,.band--dark,.band--reverse,.studio,.contact{grid-template-columns:minmax(0,1fr)}
  .hero{gap:48px;padding-bottom:72px}
  .hero__art svg{max-width:452px}
  .band{gap:44px;padding-block:72px}
  .studio,.process,.contact{padding-block:72px}
  .band--reverse .band__copy{order:-1}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .process__head{flex-direction:column;align-items:flex-start;gap:24px}
  .process__note{max-width:660px}
  .panel{max-width:520px}
}
@media (max-width:760px){
  .nav__links,.brand__tag{display:none}
  .meta__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps{grid-template-columns:minmax(0,1fr);margin-top:0}
  .details>div{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:560px){
  body{font-size:16px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .specs>div{grid-template-columns:minmax(0,1fr);gap:7px}
  .actions .btn{width:100%;justify-content:center}
  .code-row{flex-direction:column;align-items:flex-start}
  .panel--outline,.panel--card,.panel--dark{padding:22px 20px 24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}