/* ====================================================================== UNDERSTUDY — shared design system. Locked direction: "THE WINGS". Cinematic & bold. Warm near-black base · bone text · single electric vermilion accent · restrained gold for durable data · spotlight glow + film grain + vignette. Type: Anton (display) / Archivo (body) / JetBrains Mono (cue + clapper labels). Migrated from the approved homepage 2026-06-07 so every page inherits the same world-class system. TOKEN NOTE: the legacy token NAMES (--ink, --paper, --c1..c5, --line) are kept but REMAPPED to the dark world, so the ~77 inline var() refs across the 20 pages flip to the dark theme automatically. --ink now = bone foreground; --paper now = near-black background. ====================================================================== */ :root{ /* Wings core */ --bg:#16130F; --bg-2:#100E0B; --bg-3:#221D17; --accent:#FF3B23; --accent-2:#FF7A52; --accent-d:#D62B16; --gold:#E8B873; --maxw:1320px; /* legacy names, remapped to dark world (kept so inline refs flip) */ --paper:#16130F; /* was cream bg -> near-black base */ --paper-2:#100E0B; /* darker panel */ --paper-3:#221D17; /* raised panel */ --ink:#F3EEE3; /* was near-black ink -> bone text */ --ink-soft:#B9B1A2; /* muted bone */ --ink-faint:#7C7567; /* faint bone */ --soft:#B9B1A2; --faint:#7C7567; /* pillar accent set — recoloured for the dark world. Vermilion is the lead; gold = durable; the rest are warm/muted so the palette stays disciplined (single hot accent, not a rainbow). */ --c1:#FF3B23; /* vermilion — lead */ --c2:#E8B873; /* gold — durable / numbers */ --c3:#13B97F; /* green — keep for "you keep"/durable signals */ --c4:#FF7A52; /* warm coral */ --c5:#E09250; /* amber */ --line:rgba(243,238,227,.12); --line-soft:rgba(243,238,227,.06); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html,body{background:var(--bg);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%} body{line-height:1.6;font-weight:350;font-size:17px;position:relative} ::selection{background:var(--accent);color:#fff} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,72px)} .mono{font-family:"JetBrains Mono",monospace;font-weight:500;letter-spacing:.22em;text-transform:uppercase} .accent{color:var(--accent)} /* em is the accent device throughout (no italic serif in the Wings world) */ em{font-style:normal;color:var(--accent)} /* legacy .serif -> Anton display, so old serif headings read cinematic */ .serif{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em} /* ---- logomark: force bone outline (overrides inline stroke="#191510") ---- */ .logomark{width:26px;height:26px;flex:0 0 auto} .logomark circle{stroke:#F3EEE3!important} .brand{display:inline-flex;align-items:center;gap:11px} /* ==================================================================== CINEMATIC ATMOSPHERE (fixed behind everything) Pages ship
We add the radial glow + vignette via body::before/::after so no markup change is needed on the 19 inner pages. ==================================================================== */ body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(48% 42% at 50% 22%,rgba(255,59,35,.16),rgba(255,122,82,.05) 42%,transparent 70%)} body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 18%,transparent 40%,rgba(0,0,0,.55) 100%)} /* homepage explicit atmosphere layer (index.html ships .atmos) */ .atmos{position:fixed;inset:0;z-index:0;pointer-events:none} .atmos .glow{position:absolute;top:-18%;left:48%;width:120vw;height:120vh;transform:translateX(-50%); background:radial-gradient(48% 42% at 50% 30%,rgba(255,59,35,.18),rgba(255,122,82,.06) 42%,transparent 70%)} .atmos .vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 18%,transparent 40%,rgba(0,0,0,.55) 100%)} .grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.06;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} #spot{position:fixed;width:680px;height:680px;border-radius:50%;pointer-events:none;z-index:1; background:radial-gradient(circle,rgba(255,122,82,.10),rgba(255,59,35,.05) 38%,transparent 66%); transform:translate(-50%,-50%);filter:blur(10px);opacity:0;transition:opacity .6s} #cursor{position:fixed;z-index:95;width:9px;height:9px;border-radius:50%;background:var(--accent); pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,border .25s;mix-blend-mode:screen} #cursor.big{width:54px;height:54px;background:transparent;border:1.4px solid rgba(255,59,35,.6)} /* ==================================================================== HEADER ==================================================================== */ header{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;transition:background .4s,border-color .4s} header.scrolled{background:rgba(16,14,11,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;justify-content:space-between;height:74px} .brand{font-family:"JetBrains Mono",monospace;font-weight:700;letter-spacing:.30em;font-size:15px;color:var(--ink)} .brand b{color:var(--accent)} nav.main{display:flex;gap:30px;align-items:center} nav.main a{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);transition:color .2s} nav.main a:hover,nav.main a.active{color:var(--ink)} .navcta{border:1px solid var(--accent);color:var(--accent)!important;border-radius:100px;padding:9px 20px;transition:.25s} .navcta:hover,.navcta.active{background:var(--accent);color:#fff!important;box-shadow:0 0 28px rgba(255,59,35,.45)} .menu-btn{display:none;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink);border-radius:100px;padding:9px 16px;cursor:pointer} /* ==================================================================== TYPE SCALE — Anton for all display headings ==================================================================== */ h1,h2,h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95} .display{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92} .h-hero{font-size:clamp(58px,9.2vw,148px);line-height:.9} .h-1{font-size:clamp(46px,7.4vw,108px);line-height:.92} .big{font-size:clamp(34px,6vw,84px);line-height:.96;max-width:18ch} .h-2{font-size:clamp(28px,4vw,54px)} .h-3{font-size:clamp(22px,2.6vw,32px);letter-spacing:.01em} .kicker{font-family:"Anton",sans-serif;text-transform:uppercase;line-height:1;letter-spacing:.01em;font-size:clamp(34px,6vw,80px);max-width:16ch} .lead{font-size:clamp(17px,1.7vw,21px);line-height:1.6;color:var(--soft);max-width:60ch} .lead b{color:var(--ink);font-weight:600} .eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .eyebrow a:hover{color:var(--accent)} /* cue line */ .cue{display:flex;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap} .cue .n{color:var(--accent);font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em} .cue .ln{height:1px;width:48px;background:var(--line)} .cue .t{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)} /* pillar-tinted cue numbers (e.g. span class="n mono p1") */ .cue .n.p1{color:var(--c1)} .cue .n.p2{color:var(--c2)} .cue .n.p3{color:var(--c3)} .cue .n.p4{color:var(--c4)} .cue .n.p5{color:var(--c5)} /* ==================================================================== BUTTONS ==================================================================== */ .btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border:none;border-radius:100px; padding:18px 32px;min-height:56px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500; cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s} .btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(255,59,35,.4);background:#ff5238} .btn .arr{transition:transform .3s} .btn:hover .arr{transform:translateX(4px)} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--ink);background:rgba(243,238,227,.04);box-shadow:none;color:var(--ink)} .ctarow{display:flex;align-items:center;gap:18px;flex-wrap:wrap} /* ==================================================================== LAYOUT ==================================================================== */ main{position:relative;z-index:3} .sec{padding:clamp(90px,11vw,150px) 0;border-top:1px solid var(--line-soft)} .sec.tight{padding:clamp(64px,8vw,100px) 0} .sec.notop{border-top:none} .sec.line{border-top:1px solid var(--line-soft)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} /* inner-page hero */ .phero{padding:150px 0 70px;position:relative;z-index:3} .breadcrumb{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:22px} .breadcrumb a:hover{color:var(--accent)} /* ==================================================================== STAT BAND ==================================================================== */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px} .stat .num{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(44px,5.2vw,76px);line-height:1;color:var(--ink);letter-spacing:.01em} .stat .num em{color:var(--accent)} .stat .lab{margin-top:10px;font-size:14px;color:var(--soft);max-width:24ch;line-height:1.5} /* ==================================================================== EARN — signature dark statement block (now a glowing band on the base) ==================================================================== */ .earn{position:relative;margin:0;padding:clamp(48px,7vw,92px) clamp(28px,5vw,72px);background:var(--bg-2);color:var(--ink); border:1px solid var(--line);border-radius:14px;overflow:hidden} .earn::before{content:"";position:absolute;right:-120px;top:-140px;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(255,59,35,.4),transparent 70%);pointer-events:none} .earn .mono{color:var(--accent);font-size:12px;position:relative;display:block;margin-bottom:18px} .earn h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:.01em; font-size:clamp(40px,7vw,96px);line-height:.9;margin:0 0 22px;position:relative} .earn h2 em{color:var(--accent)} .earn p{position:relative;max-width:60ch;font-size:clamp(16px,1.7vw,20px);line-height:1.6;color:var(--soft)} /* big centred earn used on homepage (.earn.solo with its own glow) */ .earn.solo{background:transparent;border:none;border-radius:0;text-align:center;padding:clamp(70px,10vw,130px) 0} .earn.solo::before{left:50%;right:auto;top:-30%;width:90vw;height:90vh;transform:translateX(-50%); background:radial-gradient(40% 38% at 50% 40%,rgba(255,59,35,.22),transparent 65%)} .earn.solo h2{font-size:clamp(48px,11vw,168px);line-height:.86} .earn.solo p{margin:32px auto 0;text-align:center} /* ==================================================================== PILLARS (the run-sheet list) ==================================================================== */ .pills{border-top:1px solid var(--line)} .pill{display:grid;grid-template-columns:90px 1fr auto;gap:28px;align-items:center;padding:34px 8px;border-bottom:1px solid var(--line); position:relative;transition:padding-left .35s,background .35s} .pill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(255,59,35,.10),transparent);transition:width .35s} .pill:hover{padding-left:24px} .pill:hover::before{width:60%} .pill .num,.pill .pn{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:20px;color:var(--accent)} .pill .name,.pill .nm{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(24px,3.4vw,44px);line-height:1;letter-spacing:.01em} .pill .desc,.pill .ds{margin-top:9px;color:var(--soft);font-size:15px;line-height:1.55;max-width:56ch} .pill .dot{width:13px;height:13px;border-radius:50%;background:var(--accent)} .pill .go{font-family:"JetBrains Mono",monospace;font-size:18px;color:var(--faint);transition:transform .3s,color .3s} .pill:hover .go{color:var(--accent);transform:translateX(6px)} /* colour-coded pillars */ .p1 .num,.p1 .pn{color:var(--c1)} .p1 .dot{background:var(--c1)} .p2 .num,.p2 .pn{color:var(--c2)} .p2 .dot{background:var(--c2)} .p3 .num,.p3 .pn{color:var(--c3)} .p3 .dot{background:var(--c3)} .p4 .num,.p4 .pn{color:var(--c4)} .p4 .dot{background:var(--c4)} .p5 .num,.p5 .pn{color:var(--c5)} .p5 .dot{background:var(--c5)} /* ==================================================================== CARDS (case studies, kb, steps) ==================================================================== */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card{border:1px solid var(--line);border-radius:14px;padding:30px;background:var(--bg-2);transition:transform .3s,box-shadow .3s,border-color .3s;display:block} .card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(0,0,0,.8);border-color:var(--line)} .card .k{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:18px} .card .res{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:30px;line-height:1.05;margin-bottom:12px;letter-spacing:.01em} .card .res em{color:var(--accent)} .card p{font-size:15px;color:var(--soft);line-height:1.55} .card .more{margin-top:18px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} /* ==================================================================== STEPS ==================================================================== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px} .steps.three{grid-template-columns:repeat(3,1fr)} .step{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:30px 26px;transition:background .35s} .step:hover{background:var(--bg-3)} .step .si{font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:12px;letter-spacing:.12em;margin-bottom:14px} .step h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(22px,2.6vw,28px);line-height:.98;margin-bottom:10px;letter-spacing:.01em} .step p{font-size:14px;color:var(--soft);line-height:1.55} /* homepage "moves" (3 phase grid) */ .moves{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;margin-top:50px} .move{background:var(--bg);padding:38px 32px;transition:background .35s} .move:hover{background:var(--bg-3)} .move .mn{font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:12px;letter-spacing:.14em;margin-bottom:22px} .move h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(26px,3vw,38px);line-height:.95;margin-bottom:14px;letter-spacing:.01em} .move p{color:var(--soft);font-size:15px;line-height:1.6} /* ==================================================================== PROSE / ARTICLES ==================================================================== */ .prose{max-width:760px} .prose p{font-size:18px;line-height:1.7;color:var(--ink);margin-bottom:22px} .prose p a,.prose li a{color:var(--accent);border-bottom:1px solid rgba(255,59,35,.35)} .prose p a:hover,.prose li a:hover{border-color:var(--accent)} .prose h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(28px,3.4vw,46px);margin:50px 0 16px;letter-spacing:.01em;line-height:.98} .prose h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(22px,2.6vw,30px);margin:36px 0 12px;letter-spacing:.01em} .prose ul{margin:0 0 22px 22px} .prose li{font-size:18px;line-height:1.65;margin-bottom:10px;color:var(--ink)} .prose .answer{font-size:21px;line-height:1.55;border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin-bottom:30px;color:var(--ink);background:linear-gradient(90deg,rgba(255,59,35,.05),transparent)} .prose blockquote{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(28px,3.6vw,42px);line-height:1.02;margin:34px 0;color:var(--ink);letter-spacing:.01em} /* ==================================================================== TERMS TABLE ==================================================================== */ .terms{border-top:1px solid var(--line)} .term{display:grid;grid-template-columns:260px 1fr;gap:30px;padding:28px 0;border-bottom:1px solid var(--line)} .term .t{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .term p{color:var(--soft);font-size:16px;line-height:1.6} .term p b{color:var(--ink)} /* ==================================================================== FAQ ACCORDION — supports both .qa
markup and plain ==================================================================== */ .faq{border-top:1px solid var(--line)} .qa,.faq details{border-bottom:1px solid var(--line)} .qa summary,.faq summary{list-style:none;cursor:pointer;padding:26px 0;font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400; font-size:clamp(20px,2.4vw,30px);display:flex;justify-content:space-between;gap:20px;align-items:baseline;letter-spacing:.01em;line-height:1.05;color:var(--ink)} .qa summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none} .qa summary .pm,.faq summary .pm{font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:22px;transition:transform .3s;flex:0 0 auto} .qa[open] summary .pm,.faq details[open] summary .pm{transform:rotate(45deg)} .qa .a,.faq .a{padding:0 0 28px;color:var(--soft);font-size:17px;line-height:1.65;max-width:780px} /* ==================================================================== FORM FIELDS ==================================================================== */ .field{margin-bottom:22px} .field label{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:8px} .field input,.field textarea,.field select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:12px 0; font-family:"Archivo",sans-serif;font-size:18px;color:var(--ink);transition:border-color .25s} .field input::placeholder,.field textarea::placeholder{color:var(--faint)} .field select{background:var(--bg-2)} .field select option{background:var(--bg-2);color:var(--ink)} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)} /* ==================================================================== DUOTONE PHOTOGRAPHY (brand-tinted, re-graded for the dark world) ==================================================================== */ .duo{position:relative;overflow:hidden;background:#0d0b09;border:1px solid var(--line);border-radius:14px} .duo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.55) contrast(1.18) brightness(.7) saturate(.9)} .duo::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,59,35,.22),transparent 48%,rgba(16,14,11,.7));mix-blend-mode:normal;pointer-events:none} .duo .tag{position:absolute;left:0;bottom:0;right:0;z-index:2;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:14px 16px;background:linear-gradient(transparent,rgba(8,7,5,.85))} /* photo + text feature row */ .feat{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(36px,5vw,64px);align-items:center} .feat .duo{height:clamp(300px,46vh,460px)} .feat.flip{grid-template-columns:1fr 1.1fr} /* homepage selected-work shot */ .feat .shot{position:relative;height:clamp(340px,52vh,520px);border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.8)} .feat .shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) contrast(1.16) brightness(.72) saturate(.9)} .feat .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,59,35,.14),transparent 50%,rgba(16,14,11,.6))} .feat .shot .lbl{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);background:linear-gradient(transparent,rgba(16,14,11,.85))} /* ==================================================================== DATA-VIZ — dashboard / chart card (dark, near-black, vermilion + gold) ==================================================================== */ .dash{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:24px; box-shadow:0 40px 90px -44px rgba(0,0,0,.85),inset 0 1px 0 rgba(243,238,227,.04);overflow:hidden} .dash::before{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%; background:radial-gradient(circle,rgba(255,59,35,.16),transparent 70%);pointer-events:none} .dash .dh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:12px;position:relative} .dash .dh .mono{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .dash .fig{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(40px,5vw,58px);line-height:1;color:var(--ink);letter-spacing:.01em;position:relative} .dash .fig .accent{color:var(--accent)} .dash .delta{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--c3);margin-left:10px;letter-spacing:.04em} .dash svg{display:block;width:100%;height:120px;margin-top:8px;position:relative} .dash .legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--soft);text-transform:uppercase} .dash .legend i{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle} .dash .bars{display:flex;align-items:flex-end;gap:9px;height:64px;margin-top:18px} .dash .bars .b{flex:1;background:linear-gradient(var(--accent),#8c2114);border-radius:3px 3px 0 0;min-height:3px;align-self:flex-end} .dash .cap{margin-top:14px;font-size:12px;color:var(--soft);border-top:1px solid var(--line-soft);padding-top:12px;line-height:1.5;position:relative} .dash .axis{display:flex;justify-content:space-between;margin-top:8px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase} /* ==================================================================== LADDER CHART — durability ladder (durable=gold/green, fragile=vermilion) ==================================================================== */ .ladder{display:flex;flex-direction:column;gap:11px} .ladder.compact{margin-top:6px} .rung{display:grid;grid-template-columns:230px 1fr 110px;gap:18px;align-items:center} .rung .lbl{font-size:15px;color:var(--ink)} .rung .lbl small{display:block;color:var(--faint);font-size:12px;margin-top:2px} .rung .track{height:34px;background:var(--bg-3);border-radius:6px;overflow:hidden} .rung .fill{height:100%;border-radius:6px;width:0} .rung .val{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:right} /* durable at top -> gold/green; fragile at bottom -> vermilion/muted */ .rung.r1 .fill{background:linear-gradient(90deg,#0E9E6E,#13b97f)} .rung.r1 .val{color:#13b97f} .rung.r2 .fill{background:linear-gradient(90deg,#1f9e84,#2bb89a)} .rung.r2 .val{color:#2bb89a} .rung.r3 .fill{background:linear-gradient(90deg,#caa15a,var(--gold))} .rung.r3 .val{color:var(--gold)} .rung.r4 .fill{background:linear-gradient(90deg,#c77a3a,#e09250)} .rung.r4 .val{color:#e09250} .rung.r5 .fill{background:linear-gradient(90deg,#d62b16,var(--accent))} .rung.r5 .val{color:var(--accent)} .rung.r6 .fill{background:linear-gradient(90deg,#4a443b,#6a6253)} .rung.r6 .val{color:var(--faint)} /* homepage ladder variant: text label inside the fill + tag column */ .rung .fill[data-grow]{display:flex;align-items:center;padding-left:16px;font-family:"JetBrains Mono",monospace;font-size:11px; letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap} .rung .tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:right} .rung.r1 .tag{color:#13b97f} .rung.r2 .tag{color:#2bb89a} .rung.r3 .tag{color:var(--gold)} .rung.r4 .tag{color:#e09250} .rung.r5 .tag{color:var(--accent)} .rung.r6 .tag{color:var(--faint)} .ladder-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,70px);align-items:center} /* ==================================================================== HERO (homepage) ==================================================================== */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:110px 0 70px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,72px);align-items:center;width:100%;position:relative;z-index:4} .h-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin-bottom:30px} .h-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)} .hero h1{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.004em;font-size:clamp(58px,9.2vw,148px);margin:0} .hero h1 .row{display:block;overflow:hidden} .hero h1 .row span{display:block} .hero h1 .small{font-size:.62em;color:var(--soft)} .hero .sub{margin-top:30px;font-size:clamp(17px,1.7vw,21px);line-height:1.58;color:var(--soft);max-width:46ch} .hero .sub b{color:var(--ink);font-weight:600} .hero .cta{margin-top:40px} .hero .proof{margin-top:34px;display:flex;align-items:center;gap:14px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .hero .proof .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);position:relative;flex:0 0 auto} .hero .proof .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:pulse 2.2s ease-out infinite} @keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}} .hero .proof b{color:var(--ink);font-weight:700} .stage{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:clamp(380px,60vh,640px)} .frame{position:relative;width:100%;height:clamp(380px,62vh,640px);border-radius:14px;overflow:hidden;box-shadow:0 50px 120px -40px rgba(0,0,0,.85);border:1px solid var(--line)} .frame img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;filter:grayscale(.35) contrast(1.12) brightness(.86) saturate(.95)} .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,59,35,.10),transparent 30%,rgba(16,14,11,.55) 100%)} .frame .clap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;padding:18px 20px; background:linear-gradient(transparent,rgba(16,14,11,.85));font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)} .frame .clap b{color:var(--ink)} .frame .reel{position:absolute;top:18px;left:20px;z-index:3;display:flex;gap:6px} .frame .reel i{width:9px;height:9px;border-radius:50%;background:rgba(243,238,227,.5)} .frame .reel i:first-child{background:var(--accent)} /* marquee strip */ .marq{position:relative;z-index:4;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:hidden;background:var(--bg-2)} .marq .track{display:flex;gap:48px;padding:18px 0;white-space:nowrap;width:max-content;animation:marq 36s linear infinite} .marq span{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:48px} .marq span::after{content:"\2726";color:var(--accent)} @keyframes marq{to{transform:translateX(-50%)}} /* statements / act leads */ .statement{max-width:20ch} .statement.display{font-size:clamp(40px,7vw,100px)} .act-lead{margin-top:30px;max-width:60ch} /* ==================================================================== FOOTER CTA (homepage standalone + footer .foot-cta) ==================================================================== */ .foot-cta{position:relative;text-align:center} section.foot-cta{padding:clamp(90px,13vw,180px) 0;overflow:hidden;border-top:1px solid var(--line-soft)} section.foot-cta::before{content:"";position:absolute;left:50%;bottom:-40%;width:100vw;height:100vh;transform:translateX(-50%); background:radial-gradient(40% 40% at 50% 60%,rgba(255,59,35,.18),transparent 64%);pointer-events:none} .foot-cta h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:.01em; font-size:clamp(44px,10vw,150px);line-height:.88;position:relative} .foot-cta h2 em{color:var(--accent)} .foot-cta .ctarow{justify-content:center;margin-top:40px;position:relative} /* footer .foot-cta (inside