:root{--page-bg:#d8d9d4;--page-fg:#111719;--accent:#ff5b37;--next-fg:#111719;--build:0;--build-invert:0}.forma-intro{position:relative;min-height:115svh;padding:145px clamp(20px,4vw,60px) 80px;overflow:hidden;background:#d8d9d4}.forma-intro-grid{position:absolute;inset:0;background:linear-gradient(rgba(17,23,25,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(17,23,25,.11) 1px,transparent 1px);background-size:clamp(42px,5vw,78px) clamp(42px,5vw,78px);transform:perspective(900px) rotateX(calc(var(--progress)*32deg));transform-origin:center bottom}.forma-intro-copy{position:relative;z-index:2}.forma-intro h1{font-size:clamp(112px,22vw,340px);line-height:.6;letter-spacing:-.12em;margin:12vh 0 10vh}.forma-intro h1 span{color:transparent;-webkit-text-stroke:1px #111719}.forma-intro-copy>div{display:grid;grid-template-columns:1fr .72fr;gap:50px;border-top:1px solid #111719;padding-top:18px}.forma-intro h2{font-size:clamp(36px,5vw,72px);line-height:.9;letter-spacing:-.06em}.forma-intro-copy>div p{max-width:44ch;justify-self:end;line-height:1.7}.forma-intro figure{position:relative;z-index:2;margin:14vh 0 0 28vw}.forma-intro figure img{display:block;width:100%;height:62vh;object-fit:cover;filter:saturate(.7);clip-path:polygon(calc(18% - var(--progress)*18%) 0,100% 0,100% 100%,0 100%,0 25%)}.forma-intro figcaption{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid #111719;font:8px var(--mono);letter-spacing:.13em;text-transform:uppercase}.forma-build{height:480vh;background:#101719}.forma-build-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 340px;overflow:hidden}.forma-viewport{position:relative;overflow:hidden;background:#0d1315}.forma-viewport>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(calc(1 - var(--build))) brightness(calc(.45 + var(--build)*.45));transform:scale(calc(1.18 - var(--build)*.12));clip-path:inset(calc((1 - var(--build))*18%) calc((1 - var(--build))*16%))}.forma-blueprint{position:absolute;inset:7%;border:1px solid rgba(119,202,239,calc(1 - var(--build)));background:linear-gradient(rgba(119,202,239,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(119,202,239,.18) 1px,transparent 1px);background-size:7% 7%;transform:perspective(1000px) rotateX(calc(56deg - var(--build)*56deg)) scale(calc(.76 + var(--build)*.24));transform-origin:center bottom;opacity:calc(1 - var(--build)*.72)}.forma-blueprint i{position:absolute;border:1px solid #77caef}.forma-blueprint i:nth-child(1){inset:11% 18% 52% 9%}.forma-blueprint i:nth-child(2){inset:44% 8% 12% 35%}.forma-blueprint i:nth-child(3){inset:22% 58% 19% 20%}.forma-blueprint i:nth-child(4){left:50%;top:0;bottom:0}.forma-blueprint span{position:absolute;font:8px var(--mono);color:#77caef}.forma-blueprint span:nth-of-type(1){left:9%;top:8%}.forma-blueprint span:nth-of-type(2){right:8%;top:8%}.forma-blueprint span:nth-of-type(3){left:9%;bottom:8%}.forma-blueprint span:nth-of-type(4){right:8%;bottom:8%}.forma-measure{position:absolute;z-index:3;left:8%;right:8%;bottom:8%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;color:#fff;font:8px var(--mono);letter-spacing:.14em}.forma-measure i{height:1px;background:#fff;transform:scaleX(var(--build));transform-origin:left}.forma-build aside{padding:10vh 32px;background:#d8d9d4;color:#111719;border-left:1px solid #111719;display:flex;flex-direction:column}.forma-build ol{list-style:none;margin-top:40px}.forma-build li{display:grid;grid-template-columns:30px 1fr;gap:6px 12px;padding:18px 0;border-top:1px solid #7d817f;color:#7c807f;transition:color .4s,transform .4s}.forma-build li.is-active{color:#111719;transform:translateX(-12px)}.forma-build li b{font:8px var(--mono)}.forma-build li span{font-size:23px;font-weight:750;letter-spacing:-.04em}.forma-build li small{grid-column:2;font-size:12px;line-height:1.45}.forma-stage-count{margin-top:auto;font-size:50px;letter-spacing:-.07em;color:var(--accent)}.forma-materials{padding:16vh 0;background:#d8d9d4}.forma-materials header{display:grid;grid-template-columns:.4fr 1fr;gap:60px}.forma-materials h2{font-size:clamp(60px,8vw,116px);line-height:.82;letter-spacing:-.075em}.forma-material-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14vh;border-block:1px solid #111719}.forma-material-grid article{min-height:390px;padding:32px;border-right:1px solid #111719;display:flex;flex-direction:column}.forma-material-grid article:last-child{border:0}.forma-material-grid span{font:8px var(--mono);letter-spacing:.14em}.forma-material-grid strong{font-size:clamp(28px,3vw,42px);line-height:.95;margin:auto 0 28px}.forma-material-grid p{font-size:14px;line-height:1.7;color:#4f5859}.forma-final{position:relative;min-height:110svh;overflow:hidden;display:grid;place-items:center}.forma-final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.65);transform:scale(calc(1.08 - var(--progress)*.03))}.forma-final::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 58%)}.forma-final-copy{position:relative;z-index:2;text-align:center;color:#fff}.forma-final-copy h2{font-size:clamp(76px,13vw,190px);line-height:.72;letter-spacing:-.085em;margin-top:38px}@media(max-width:800px){.forma-intro{padding-inline:18px}.forma-intro h1{font-size:28vw;margin-top:16vh}.forma-intro-copy>div{grid-template-columns:1fr}.forma-intro-copy>div p{justify-self:start}.forma-intro figure{margin-left:12vw}.forma-intro figure img{height:52vh}.forma-build{height:420vh}.forma-build-pin{grid-template-columns:1fr}.forma-build aside{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:22px;background:rgba(216,217,212,.92);backdrop-filter:blur(15px)}.forma-build aside>.xp-kicker,.forma-build li small{display:none}.forma-build ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0}.forma-build li{display:block;padding:10px 4px}.forma-build li span{display:block;font-size:12px;margin-top:5px}.forma-build li.is-active{transform:none}.forma-stage-count{position:absolute;right:18px;top:18px;font-size:28px}.forma-viewport{height:100svh}.forma-materials header{grid-template-columns:1fr}.forma-material-grid{grid-template-columns:1fr}.forma-material-grid article{min-height:280px;border-right:0;border-bottom:1px solid #111719}.forma-final-copy h2{font-size:21vw}}
