/* =====================================================================
   PROTO → CODE · home hero: the wordmark inks from prototype to production
   (canvas drawn by js/hero.js), then the promise and the figures.
   ===================================================================== */
.hero{position:relative;min-height:max(600px,calc(100svh - 64px));display:flex;flex-direction:column}
.hero .stage{position:relative;flex:1;min-height:300px;width:100%;max-width:var(--max);margin:0 auto}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the Prototype layer switch sits in the stage's top-right corner, on the wordmark it reveals; hero.js draws the state label to its left */
.hero .stage > .sw{position:absolute;z-index:2;top:8px;right:clamp(20px,5%,72px);background:var(--paper)}
/* phones: the wordmark wraps to two lines with notes above it, so the switch moves to the bottom-right corner (the state label's place) */
@media (max-width:699px){.hero .stage > .sw{top:auto;bottom:0}}
.hero .nojs{display:none}
.hero-copy{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px 48px;align-items:end;padding-bottom:clamp(28px,5vh,56px)}
.hero h1{font-weight:760;font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.028em;max-width:16ch}
.hero .lead{margin-top:18px;max-width:46ch;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--graphite)}
.hero .cta{margin-top:26px}
@media (max-width:900px){.hero-copy{grid-template-columns:1fr}}
@media (max-width:620px){.hero .stage{min-height:260px}}