/* Node-graph hero — fixed canvas mesh + centered headline/colour-block cluster. Light brand background; deep-teal colour block; fades out on scroll. */ /* NO view transitions — the page/mesh must NOT dissolve on navigation. The mesh canvas is never faded; it stays continuous because the new page paints its first frame with the camera on the node we came from. Hero TEXT: when JS is active (html.hero-js, set by a tiny inline script BEFORE first paint so there is no flash) the text starts HIDDEN, then: .hero-in -> fades in over .45s, added once the fly-in has finished (we've ARRIVED) .is-leaving -> fades out over .2s, added just before navigating away With no JS, html.hero-js is never set, so the text stays visible (safe fallback). */ html.hero-js .node-hero__cluster{ opacity:0; } /* held hidden */ html.hero-js .node-hero.hero-in .node-hero__cluster{ opacity:1; transition:opacity .45s ease; } html.hero-js .node-hero.is-leaving .node-hero__cluster{ opacity:0; transition:opacity .12s ease; } @media (prefers-reduced-motion: reduce){ html.hero-js .node-hero__cluster{ opacity:1; } /* reduced motion: show immediately */ html.hero-js .node-hero.hero-in .node-hero__cluster{ transition:none; } } .node-hero{ position:fixed; inset:0; z-index:3; pointer-events:none; background:linear-gradient(160deg,#F8FEFD,#E9FBF9); opacity:1; will-change:opacity; } .node-hero__canvas{display:block;width:100%;height:100%} .node-hero__grid{ position:fixed; inset:0; z-index:4; display:grid; grid-template-columns:1fr minmax(auto,1060px) 1fr; align-items:center; pointer-events:none; } .node-hero__cluster{grid-column:2; display:grid; grid-template-columns:1fr 360px; gap:44px; align-items:center; padding:0 24px} .node-hero__head .hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-teal-text,#007A78);margin-bottom:14px} .node-hero__head h1{font-size:clamp(30px,3.9vw,54px);font-weight:800;letter-spacing:-0.025em;line-height:1.06;color:var(--text-primary,#1F2D3D);margin:0} .node-hero__head h1 .gradient-text{background:linear-gradient(135deg,#007A78,#0E6FBF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .node-hero__block{ pointer-events:auto; background:linear-gradient(165deg,#063b41,#04262e); border:1px solid rgba(120,220,225,.22); border-radius:20px; padding:26px; color:#eaf6f7; box-shadow:0 24px 70px rgba(0,40,50,.28); } .node-hero__block p{font-size:15.5px;line-height:1.6;color:rgba(228,242,243,.92);margin:0} .node-hero__ctas{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap} .node-hero__ctas a{display:inline-block;padding:12px 20px;border-radius:100px;font-weight:800;font-size:14px;text-decoration:none} .node-hero__ctas a:first-child{background:linear-gradient(135deg,#00C2B8,#1DAEFF);color:#06232b} .node-hero__ctas a:nth-child(2){background:transparent;color:#bdeff0;border:1px solid rgba(150,220,225,.5);font-weight:700} .node-hero__cue{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:5;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-teal-text,#007A78);pointer-events:none} .node-hero-spacer{height:100vh} @media(max-width:880px){ .node-hero__cluster{grid-template-columns:1fr;gap:18px;padding:0 22px} .node-hero__block{max-width:440px} .node-hero__head h1{font-size:clamp(26px,7vw,40px)} } @media(prefers-reduced-motion:reduce){ .node-hero__cue{display:none} }