:root{
  --ink:#050608;--ink-2:#090c0f;--panel:#0d1216;--panel-2:#11191d;--paper:#f8f6ef;--muted:#a9b1b2;
  --line:rgba(255,255,255,.11);--teal:#63ead5;--teal-dark:#143f3c;--brass:#ddb96d;--brass-hot:#ffd893;
  --coral:#f07b64;--radius:22px;--shadow:0 34px 100px rgba(0,0,0,.42);--shell:min(1240px,calc(100% - 48px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Raleway,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");opacity:.025;mix-blend-mode:screen}
a{color:inherit}.shell{width:var(--shell);margin-inline:auto}.skip-link{position:fixed;left:16px;top:-80px;background:var(--paper);color:var(--ink);padding:12px 18px;z-index:200}.skip-link:focus{top:16px}.preview-ribbon{background:var(--brass);color:#19130b;text-align:center;font:700 10px/1 JetBrains Mono,monospace;letter-spacing:.16em;text-transform:uppercase;padding:7px;position:relative;z-index:110}
.site-header{position:sticky;top:0;z-index:90;background:rgba(5,6,8,.78);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:800 14px/1 Orbitron,sans-serif;letter-spacing:.1em;white-space:nowrap}.brand img{object-fit:contain}.nav-links{display:flex;align-items:stretch;height:42px;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.02)}.nav-links a{position:relative;display:flex;align-items:center;padding:0 15px;border-radius:999px;text-decoration:none;color:#c4c9c9;font:600 10px/1 JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase;overflow:hidden}.nav-links a::before{content:attr(data-scene);position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(110deg,rgba(99,234,213,.32),rgba(221,185,109,.22)),url('assets/kasey-ai-hero.png') center 37%/240% auto;opacity:0;transform:scale(1.16);transition:.35s ease;filter:saturate(.8)}.nav-links a::after{content:"";position:absolute;inset:auto 13px 4px;height:1px;background:linear-gradient(90deg,transparent,var(--brass-hot),var(--teal),transparent);opacity:0;transform:scaleX(.2);transition:.35s ease}.nav-links a span{position:relative;z-index:1}.nav-links a:hover,.nav-links a:focus-visible{color:white}.nav-links a:hover::before,.nav-links a:focus-visible::before{opacity:.2;transform:scale(1)}.nav-links a:hover::after,.nav-links a:focus-visible::after{opacity:1;transform:scaleX(1)}
.nav-cta{padding:12px 17px;border:1px solid rgba(99,234,213,.55);border-radius:999px;text-decoration:none;color:var(--teal);font:700 10px/1 JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase;transition:.25s ease}.nav-cta:hover,.nav-cta:focus-visible{background:var(--teal);color:#04100e;box-shadow:0 0 28px rgba(99,234,213,.28)}.menu-button{display:none;border:0;background:transparent;width:42px;height:42px}.menu-button span{display:block;width:24px;height:1px;background:white;margin:7px auto}
.hero{min-height:calc(100vh - 110px);display:grid;grid-template-columns:.95fr 1.05fr;grid-template-areas:"copy film" "support film";align-items:center;column-gap:64px;row-gap:0;padding-block:72px 82px;position:relative}.hero-copy{grid-area:copy;align-self:end}.film-shell{grid-area:film}.hero-support{grid-area:support;align-self:start}.hero::before{content:"";position:absolute;width:640px;height:640px;left:-340px;top:30px;background:radial-gradient(circle,rgba(99,234,213,.12),transparent 67%);pointer-events:none}.eyebrow,.section-label{display:flex;align-items:center;gap:10px;color:var(--teal);font:700 11px/1 JetBrains Mono,monospace;letter-spacing:.17em;text-transform:uppercase}.eyebrow span{width:26px;height:1px;background:var(--teal)}h1,h2,h3,p{margin-top:0}.hero h1{font:800 clamp(48px,5.5vw,84px)/.98 Orbitron,sans-serif;letter-spacing:-.055em;text-transform:uppercase;margin:23px 0 26px;max-width:720px}.hero h1 em,.section-grid h2 em{display:block;font-style:normal;color:transparent;background:linear-gradient(105deg,var(--paper) 3%,var(--brass-hot) 48%,var(--teal) 96%);-webkit-background-clip:text;background-clip:text}.hero-deck{font-size:18px;line-height:1.7;color:#c4cac9;max-width:680px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 20px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;padding:0 20px;border-radius:4px;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.02em;transition:.25s ease}.button-primary{background:var(--paper);color:var(--ink);box-shadow:0 14px 38px rgba(0,0,0,.3)}.button-primary:hover,.button-primary:focus-visible{background:var(--teal);transform:translateY(-2px);box-shadow:0 16px 44px rgba(99,234,213,.18)}.button-secondary{border:1px solid var(--line);color:#cbd0d0;background:rgba(255,255,255,.02)}.button-secondary span{color:var(--brass-hot)}.button-secondary:hover,.button-secondary:focus-visible{border-color:var(--brass);background:rgba(221,185,109,.07)}.qualification{max-width:650px;color:#7f898a;font-size:12px;line-height:1.6}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line);margin-top:32px;padding-top:20px;max-width:650px}.hero-proof div{display:flex;flex-direction:column;gap:4px}.hero-proof strong{font:700 18px/1 Orbitron,sans-serif;color:var(--paper)}.hero-proof span{color:#768182;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.film-shell{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:10px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.015));box-shadow:var(--shadow);isolation:isolate}.film-shell::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(221,185,109,.58),transparent 28%,transparent 62%,rgba(99,234,213,.4));z-index:-1;filter:blur(1px)}.film-chrome,.film-caption{display:flex;align-items:center;justify-content:space-between;padding:3px 5px 11px;color:#8f9998;font:600 9px/1 JetBrains Mono,monospace;letter-spacing:.1em;text-transform:uppercase}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-right:7px;box-shadow:0 0 12px var(--coral);animation:pulse 2s infinite}.film-poster{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:14px;overflow:hidden;background:#050608;cursor:pointer;color:white;text-align:left}.film-poster>img{position:absolute;inset:0;width:58%;height:150%;object-fit:cover;object-position:50% 17%;transform:translate(63%,-7%);filter:saturate(.8) contrast(1.05) brightness(.86)}.podcast-glow{position:absolute;inset:0;background:radial-gradient(circle at 74% 35%,rgba(255,216,147,.36),transparent 30%),radial-gradient(circle at 20% 20%,rgba(99,234,213,.18),transparent 33%),linear-gradient(105deg,#090d10 0 44%,rgba(5,6,8,.12) 75%)}.audience-lights{position:absolute;left:-6%;right:-6%;bottom:-10%;height:40%;background:radial-gradient(circle at 8% 60%,rgba(255,216,147,.3) 0 2px,transparent 4px),radial-gradient(circle at 22% 30%,rgba(99,234,213,.22) 0 3px,transparent 5px),radial-gradient(circle at 42% 70%,rgba(255,255,255,.22) 0 2px,transparent 4px),radial-gradient(circle at 57% 35%,rgba(240,123,100,.18) 0 3px,transparent 5px),radial-gradient(circle at 82% 60%,rgba(255,216,147,.26) 0 2px,transparent 4px);background-size:80px 70px;filter:blur(2px)}.host-silhouette{position:absolute;left:4%;bottom:0;width:27%;height:63%;background:radial-gradient(circle at 50% 20%,#191e20 0 15%,transparent 16%),linear-gradient(108deg,transparent 18%,#111719 19% 70%,transparent 71%);opacity:.9;filter:drop-shadow(0 0 30px rgba(99,234,213,.09))}.film-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,8,.95),rgba(5,6,8,.18) 63%,rgba(5,6,8,.25)),linear-gradient(0deg,rgba(5,6,8,.75),transparent 42%)}.film-kicker,.film-title,.play-button{position:absolute;z-index:2;left:7%}.film-kicker{top:12%;font:700 9px JetBrains Mono,monospace;letter-spacing:.2em;color:var(--teal)}.film-title{top:20%;font:800 clamp(24px,3vw,48px)/.95 Orbitron,sans-serif;letter-spacing:-.04em;text-shadow:0 4px 30px rgba(0,0,0,.5)}.play-button{bottom:9%;display:flex;align-items:center;gap:12px}.play-button i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 8px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.35);transition:.25s ease}.play-button i::before{content:"";margin-left:3px;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}.play-button b{font:700 10px JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.film-poster:hover .play-button i,.film-poster:focus-visible .play-button i{background:var(--teal);transform:scale(1.08)}.film-poster:hover>img{transform:translate(63%,-7%) scale(1.025)}.film-poster>img{transition:transform .7s ease}.film-caption{padding:12px 5px 2px}
.signal-strip{border-block:1px solid var(--line);overflow:hidden;background:#080b0d}.signal-track{width:max-content;display:flex;align-items:center;gap:26px;padding:17px 0;animation:marquee 28s linear infinite;font:700 10px JetBrains Mono,monospace;letter-spacing:.16em;color:#a2abaa}.signal-track i{width:5px;height:5px;transform:rotate(45deg);background:var(--brass)}
.section{padding-block:120px}.section h2{font:700 clamp(38px,5vw,68px)/1.04 Orbitron,sans-serif;letter-spacing:-.045em;text-transform:uppercase}.section-grid{display:grid;grid-template-columns:1.1fr .8fr;gap:92px;margin-top:40px}.section-copy{font-size:17px;color:#aab2b2;line-height:1.8}.pull-quote{border-left:2px solid var(--brass);padding:9px 0 9px 24px;margin-top:34px;color:var(--paper);font-size:20px;line-height:1.5;font-style:italic}.shift{position:relative}.shift-visual{height:420px;margin-top:70px;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at center,rgba(99,234,213,.1),transparent 32%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px;position:relative;overflow:hidden}.shift-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(99,234,213,.22);border-radius:50%;transform:translate(-50%,-50%)}.orbit-a{width:320px;height:320px}.orbit-b{width:570px;height:240px;transform:translate(-50%,-50%) rotate(-12deg);border-color:rgba(221,185,109,.18)}.shift-visual strong{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 21px/1.15 Orbitron,sans-serif;text-align:center;letter-spacing:.08em}.node{position:absolute;padding:9px 13px;border:1px solid var(--line);background:rgba(5,6,8,.8);border-radius:999px;color:#c8cecd;font:600 10px JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.n1{left:12%;top:25%}.n2{left:28%;bottom:18%}.n3{right:12%;top:23%}.n4{right:23%;bottom:18%}.n5{left:50%;top:10%;transform:translateX(-50%);border-color:rgba(99,234,213,.45);color:var(--teal)}
.systems{background:linear-gradient(180deg,#080b0d,#0b1013 55%,#080b0d);border-block:1px solid rgba(255,255,255,.06)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:54px}.section-head h2{max-width:800px;margin:23px 0 0}.section-head>p{max-width:320px;color:#8f9999;font-size:15px}.system-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:14px}.system-card{grid-column:span 2;position:relative;min-height:330px;padding:28px 23px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.012));overflow:hidden;transition:.3s ease}.system-card::after{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(99,234,213,.18),transparent 65%);opacity:0;transition:.3s}.system-card:hover{transform:translateY(-7px);border-color:rgba(99,234,213,.35);box-shadow:0 28px 70px rgba(0,0,0,.28)}.system-card:hover::after{opacity:1}.system-card>span{position:absolute;right:20px;top:20px;color:#536060;font:600 10px JetBrains Mono,monospace}.system-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(221,185,109,.3);border-radius:50%;color:var(--brass-hot);margin-bottom:50px}.system-card h3{font:700 18px Orbitron,sans-serif;text-transform:uppercase;letter-spacing:-.02em}.system-card p{color:#899293;font-size:13px;line-height:1.6}.system-card strong{display:block;margin-top:24px;color:#d9dddc;font-size:12px;line-height:1.55}
.consult-panel{display:grid;grid-template-columns:1.1fr .72fr;gap:70px;align-items:center;padding:68px;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at 86% 18%,rgba(221,185,109,.1),transparent 28%),linear-gradient(150deg,#0d1215,#070a0c);box-shadow:var(--shadow)}.consult-copy h2{margin:25px 0}.consult-copy>p{max-width:730px;color:#a9b1b1;font-size:17px;line-height:1.75}.outcomes{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:15px}.outcomes li{display:flex;align-items:center;gap:12px;color:#d9dddc;font-size:13px}.outcomes span{font:600 9px JetBrains Mono,monospace;color:var(--teal);border:1px solid rgba(99,234,213,.3);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto}.schedule-card{padding:28px;border-radius:18px;background:var(--paper);color:var(--ink);transform:rotate(1.2deg);box-shadow:0 26px 80px rgba(0,0,0,.34)}.schedule-top{display:flex;justify-content:space-between;text-transform:uppercase;font:600 9px JetBrains Mono,monospace;letter-spacing:.12em}.schedule-top strong{color:#7b6030}.schedule-visual{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:28px 0 26px}.schedule-visual span{text-align:center;font:700 8px JetBrains Mono,monospace;color:#646967}.schedule-visual i{height:34px;background:linear-gradient(135deg,var(--teal-dark),#2f746b);border-radius:3px;position:relative}.schedule-visual i:nth-of-type(n+6){background:linear-gradient(135deg,#a57e3d,var(--brass))}.schedule-visual i::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:white;right:5px;top:5px;opacity:.75}.schedule-card h3{font:800 25px/1.05 Orbitron,sans-serif;text-transform:uppercase;letter-spacing:-.035em}.schedule-card p{color:#515857;font-size:13px;line-height:1.6}.schedule-card .button{background:var(--ink);color:white;width:100%;margin-top:14px}.schedule-card small{display:block;margin-top:14px;color:#737a78;font-size:10px;line-height:1.5}
.proof{background:var(--paper);color:var(--ink)}.proof .section-label{color:#3b746c}.proof-grid{display:grid;grid-template-columns:1.1fr .8fr;gap:90px;margin-top:40px}.proof-lead p{max-width:700px;color:#4e5756;font-size:17px;line-height:1.75}.proof-stack{border-top:1px solid rgba(5,6,8,.18)}.proof-stack div{display:grid;grid-template-columns:.65fr 1fr;gap:20px;padding:25px 0;border-bottom:1px solid rgba(5,6,8,.18)}.proof-stack strong{font:800 13px Orbitron,sans-serif}.proof-stack span{color:#58605f;font-size:13px;line-height:1.55}
.brick-city{position:relative;overflow:hidden;background:radial-gradient(circle at 73% 38%,rgba(99,234,213,.12),transparent 27%),radial-gradient(circle at 68% 32%,rgba(255,216,147,.11),transparent 38%),linear-gradient(180deg,#070a0d,#0a1015 57%,#050608);border-bottom:1px solid var(--line)}.brick-city::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,#000,transparent 72%);pointer-events:none}.brick-city-grid{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:center}.brick-city-copy{position:relative;z-index:3}.brick-city-status{display:flex;align-items:center;gap:10px;margin:26px 0 18px;color:var(--brass-hot);font:700 10px JetBrains Mono,monospace;letter-spacing:.14em;text-transform:uppercase}.brick-city-status span{width:7px;height:7px;border-radius:50%;background:var(--brass-hot);box-shadow:0 0 18px var(--brass-hot);animation:beaconStatus 1.7s ease-in-out infinite}.brick-city h2{max-width:720px;margin:0}.brick-city h2 em{display:block;color:transparent;font-style:normal;background:linear-gradient(105deg,var(--paper),var(--brass-hot) 47%,var(--teal));-webkit-background-clip:text;background-clip:text}.brick-city-copy>p:not(.brick-city-status,.brick-city-note){max-width:650px;color:#aeb7b7;font-size:17px;line-height:1.75}.brick-city-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}.brick-city-tags span{padding:8px 10px;border:1px solid rgba(99,234,213,.22);border-radius:999px;background:rgba(99,234,213,.045);color:#a9f8ec;font:600 8px JetBrains Mono,monospace;letter-spacing:.12em}.brick-city-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;max-width:500px;min-height:70px;padding:12px 16px 12px 20px;border:1px solid rgba(255,216,147,.44);border-radius:6px;color:var(--paper);text-decoration:none;background:linear-gradient(105deg,rgba(221,185,109,.11),rgba(99,234,213,.055));box-shadow:0 18px 50px rgba(0,0,0,.3);transition:.3s ease}.brick-city-cta span{display:grid;gap:4px;font-weight:800}.brick-city-cta small{color:var(--brass-hot);font:700 8px JetBrains Mono,monospace;letter-spacing:.16em}.brick-city-cta b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:18px;transition:.3s ease}.brick-city-cta:hover,.brick-city-cta:focus-visible{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 22px 64px rgba(99,234,213,.12)}.brick-city-cta:hover b,.brick-city-cta:focus-visible b{background:var(--teal);transform:rotate(12deg)}.brick-city-note{color:#687373;font:500 9px JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.kb-beacon{position:relative;display:block;min-height:610px;border:1px solid rgba(255,255,255,.1);border-radius:26px;overflow:hidden;background:radial-gradient(circle at 58% 24%,rgba(255,244,207,.13),transparent 21%),linear-gradient(180deg,#07111b 0%,#0a1720 51%,#091015 76%,#030405 100%);box-shadow:0 38px 100px rgba(0,0,0,.48),inset 0 0 80px rgba(99,234,213,.045);isolation:isolate}.kb-beacon::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 44%,rgba(255,255,255,.035) 45%,transparent 46% 100%),radial-gradient(circle at 70% 20%,rgba(255,255,255,.08),transparent 32%);mix-blend-mode:screen}.kb-beacon::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,216,147,.1);border-radius:18px;pointer-events:none}.beacon-stars{position:absolute;inset:0 0 28%;background-image:radial-gradient(circle at 11% 25%,#fff 0 1px,transparent 2px),radial-gradient(circle at 26% 13%,rgba(99,234,213,.9) 0 1px,transparent 2px),radial-gradient(circle at 43% 35%,rgba(255,255,255,.7) 0 1px,transparent 2px),radial-gradient(circle at 72% 8%,rgba(255,216,147,.8) 0 1px,transparent 2px),radial-gradient(circle at 89% 28%,rgba(255,255,255,.75) 0 1px,transparent 2px),radial-gradient(circle at 62% 48%,rgba(99,234,213,.8) 0 1px,transparent 2px);background-size:190px 150px;opacity:.7}.beacon-cloud{position:absolute;height:94px;border-radius:50%;filter:blur(22px);opacity:.15;background:#a7c9d1}.cloud-one{left:-6%;right:34%;top:29%;transform:rotate(-8deg)}.cloud-two{left:42%;right:-9%;top:45%;transform:rotate(9deg);opacity:.1}.beacon-beam{position:absolute;z-index:1;left:15%;bottom:10%;width:67%;height:75%;clip-path:polygon(42% 100%,57% 100%,79% 0,12% 0);background:linear-gradient(90deg,rgba(99,234,213,.015),rgba(255,235,179,.24) 48%,rgba(99,234,213,.04));filter:blur(2px);transform-origin:50% 100%;animation:beaconSweep 8s ease-in-out infinite;mix-blend-mode:screen}.beacon-orb{position:absolute;z-index:3;left:55%;top:30%;width:250px;height:250px;display:grid;place-items:center;border:1px solid rgba(255,240,196,.75);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,247,221,.78) 0 7%,rgba(255,225,148,.28) 36%,rgba(99,234,213,.13) 61%,rgba(7,17,27,.36) 72%);box-shadow:0 0 34px rgba(255,225,148,.35),0 0 95px rgba(99,234,213,.24),inset 0 0 70px rgba(255,255,255,.2);animation:beaconFloat 5s ease-in-out infinite}.beacon-orb img{position:relative;z-index:2;width:54%;height:54%;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(255,255,255,.7)) drop-shadow(0 0 32px rgba(99,234,213,.75));opacity:.96}.beacon-ring{position:absolute;inset:-18px;border:1px solid rgba(255,216,147,.34);border-radius:50%;animation:beaconRing 3s ease-out infinite}.ring-two{inset:-44px;border-color:rgba(99,234,213,.2);animation-delay:1.5s}.brick-skyline{position:absolute;z-index:4;left:0;right:0;bottom:0;height:37%;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;padding:0 3%;background:linear-gradient(0deg,#020304 0 24%,transparent 24%)}.brick-skyline i{position:relative;display:block;width:12%;height:var(--h,70%);background:linear-gradient(90deg,#040608,#0a0f12 49%,#030405);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -12px 30px rgba(0,0,0,.45)}.brick-skyline i::before{content:"";position:absolute;inset:12px 9px 20px;background:repeating-linear-gradient(90deg,rgba(255,216,147,.72) 0 3px,transparent 3px 12px),repeating-linear-gradient(0deg,rgba(255,216,147,.72) 0 3px,transparent 3px 16px);opacity:.26;animation:windowFlicker 4s steps(2,end) infinite}.brick-skyline i:nth-child(1){--h:43%}.brick-skyline i:nth-child(2){--h:76%}.brick-skyline i:nth-child(3){--h:58%}.brick-skyline i:nth-child(4){--h:91%}.brick-skyline i:nth-child(4)::after{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:70px;background:linear-gradient(var(--brass-hot),transparent);box-shadow:0 0 10px var(--brass-hot)}.brick-skyline i:nth-child(5){--h:68%}.brick-skyline i:nth-child(6){--h:82%}.brick-skyline i:nth-child(7){--h:54%}.brick-skyline i:nth-child(8){--h:72%}.brick-skyline i:nth-child(9){--h:39%}.brick-skyline i:nth-child(2n)::before{animation-delay:1.2s}.beacon-console{position:absolute;z-index:6;left:24px;right:24px;bottom:19px;display:flex;justify-content:space-between;align-items:center;color:#dce7e5;font:700 8px JetBrains Mono,monospace;letter-spacing:.14em}.beacon-console small{color:var(--brass-hot)}.beacon-console strong{color:var(--teal);font-size:8px}.kb-beacon:hover .beacon-orb,.kb-beacon:focus-visible .beacon-orb{box-shadow:0 0 44px rgba(255,225,148,.5),0 0 135px rgba(99,234,213,.36),inset 0 0 70px rgba(255,255,255,.28)}
.faq-grid{display:grid;grid-template-columns:.7fr 1.1fr;gap:110px;margin-top:38px}.accordion{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:25px 0;display:flex;justify-content:space-between;gap:22px;color:#dce0df;font-weight:700}summary::-webkit-details-marker{display:none}summary span{color:var(--teal);font:400 22px/1 monospace;transition:.25s}details[open] summary span{transform:rotate(45deg)}details p{max-width:760px;color:#909999;font-size:14px;line-height:1.75;padding:0 50px 23px 0}
.contact{background:radial-gradient(circle at 12% 15%,rgba(99,234,213,.12),transparent 30%),radial-gradient(circle at 88% 84%,rgba(221,185,109,.11),transparent 31%),#090d0f;border-top:1px solid var(--line)}.contact-shell{display:grid;grid-template-columns:.82fr 1fr;gap:76px;align-items:start}.contact-copy h2{margin:25px 0;font-size:clamp(38px,4.2vw,62px)}.contact-copy>p{color:#98a2a1;max-width:530px;font-size:17px}.phone-card{display:grid;gap:4px;margin-top:42px;padding:20px;border:1px solid rgba(221,185,109,.28);border-radius:12px;text-decoration:none;background:rgba(221,185,109,.04);transition:.25s}.phone-card span{color:#8c9694;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.phone-card strong{font:700 24px Orbitron,sans-serif;color:var(--brass-hot)}.phone-card i{font-style:normal;color:#d4d9d8;font-size:12px}.phone-card:hover{transform:translateY(-3px);border-color:var(--brass);background:rgba(221,185,109,.08)}.form-card{border:1px solid var(--line);border-radius:var(--radius);padding:34px;background:rgba(5,6,8,.72);box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-grid label{display:block}.form-grid label>span{display:block;margin-bottom:8px;color:#aeb6b5;font:600 9px JetBrains Mono,monospace;letter-spacing:.12em;text-transform:uppercase}.wide{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid rgba(255,255,255,.13);border-radius:7px;background:#070a0c;color:var(--paper);padding:14px 15px;font:500 14px Raleway,sans-serif;outline:none}.form-grid textarea{min-height:140px;resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,234,213,.1)}.consent{display:flex!important;align-items:flex-start;gap:10px}.consent input{width:auto;margin-top:3px}.consent span{font:500 11px/1.55 Raleway,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#8f9897!important}.submit-button{min-height:56px;border:0;border-radius:6px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,var(--paper),#dfeae6);color:var(--ink);font-weight:900;cursor:pointer;transition:.25s}.submit-button:hover,.submit-button:focus-visible{background:var(--teal);transform:translateY(-2px)}.submit-button:disabled{opacity:.55;transform:none;cursor:wait}.form-note{margin:0;color:#6f7a79;font-size:10px;line-height:1.55}.form-error{color:#ff9c87;font-size:12px;margin:0}.honey{position:absolute;left:-9999px}.form-success{text-align:center;padding:70px 20px}.form-success>span{color:var(--teal);font:700 10px JetBrains Mono,monospace;letter-spacing:.16em;text-transform:uppercase}.form-success h3{font:800 34px Orbitron,sans-serif;text-transform:uppercase;margin:15px}.form-success p{color:#9ba4a3}.lead-reference{color:var(--brass);font:600 10px JetBrains Mono,monospace}
.site-footer{padding:38px 0 110px;border-top:1px solid var(--line);background:#050608}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:30px}.footer-grid>p{margin:0;color:#788281;font-size:12px;text-align:center}.footer-grid>div{display:flex;justify-content:flex-end;gap:18px}.footer-grid>div a{color:#9da6a5;text-decoration:none;font-size:11px}.mobile-rail{display:none}.film-modal{width:min(1080px,calc(100% - 32px));border:1px solid var(--line);border-radius:20px;padding:0;background:#080c0e;color:white;box-shadow:0 40px 120px rgba(0,0,0,.7)}.film-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(12px)}.modal-close{position:absolute;right:15px;top:12px;z-index:2;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:rgba(5,6,8,.75);color:white;font-size:24px;cursor:pointer}.modal-stage{display:block}.modal-stage>video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px 20px 0 0;background:#000}.modal-stage>div{padding:34px 48px 42px}.modal-stage span{color:var(--teal);font:700 9px JetBrains Mono,monospace;letter-spacing:.15em}.modal-stage h2{font:800 42px/.98 Orbitron,sans-serif;text-transform:uppercase;margin:20px 0}.modal-stage p{color:#8f9998}.modal-stage blockquote{margin:25px 0 0;padding-left:22px;border-left:2px solid var(--brass);color:#d9dddc;font-style:italic;line-height:1.65}
.nav-links a::before{background-image:linear-gradient(110deg,rgba(99,234,213,.32),rgba(221,185,109,.22)),url('assets/kasey-v4-approved-set-face-poster.jpg')}
.film-poster>img{object-position:50% 34%;filter:saturate(.88) contrast(1.04) brightness(.9)}
.modal-stage>video{object-fit:contain;background:radial-gradient(circle at center,rgba(99,234,213,.08),transparent 34%),#020304}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible,.hero .reveal{opacity:1;transform:none}@keyframes pulse{50%{opacity:.45;transform:scale(.82)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes beaconStatus{50%{opacity:.4;transform:scale(.72)}}@keyframes beaconSweep{0%,100%{transform:rotate(-3deg) scaleX(.95)}50%{transform:rotate(4deg) scaleX(1.05)}}@keyframes beaconFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}@keyframes beaconRing{0%{opacity:.55;transform:scale(.78)}100%{opacity:0;transform:scale(1.22)}}@keyframes windowFlicker{0%,100%{opacity:.18}50%{opacity:.38}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.signal-track{transform:none}.reveal{opacity:1;transform:none}}
@media(max-width:1080px){.nav{position:relative}.nav-links{display:none;position:absolute;left:0;right:0;top:72px;height:auto;padding:10px;border-radius:14px;background:rgba(5,6,8,.97);box-shadow:0 26px 70px rgba(0,0,0,.5)}.nav-links.is-open{display:grid}.nav-links a{min-height:48px;padding-inline:16px}.menu-button{display:block}.nav-cta{margin-left:auto}.hero{grid-template-columns:1fr;grid-template-areas:"copy" "film" "support";min-height:auto;row-gap:38px}.hero-copy{max-width:820px}.film-shell{max-width:850px}.hero-actions{margin-top:0}.system-card{grid-column:span 5;min-height:280px}.system-card:last-child{grid-column:3/span 6}.consult-panel{grid-template-columns:1fr;padding:48px}.schedule-card{max-width:520px;transform:none}.proof-grid,.faq-grid,.contact-shell{gap:56px}.brick-city-grid{grid-template-columns:1fr;gap:52px}.brick-city-copy{max-width:790px}.kb-beacon{min-height:560px}.footer-grid{grid-template-columns:1fr}.footer-grid>p{text-align:left}.footer-grid>div{justify-content:flex-start}}
@media(max-width:760px){:root{--shell:min(100% - 30px,680px)}.preview-ribbon{font-size:8px}.nav{height:68px}.brand{font-size:12px}.brand img{width:34px;height:34px}.nav-cta{display:none}.hero{padding-block:56px 66px;gap:38px}.hero h1{font-size:clamp(41px,13vw,62px)}.hero-deck{font-size:16px}.hero-actions{display:grid}.button{width:100%}.hero-proof{gap:8px}.hero-proof strong{font-size:14px}.hero-proof span{font-size:8px}.film-poster{aspect-ratio:4/3}.film-poster>img{width:70%;transform:translate(49%,-7%)}.film-title{font-size:28px}.film-kicker{font-size:7px}.film-caption{font-size:7px}.section{padding-block:82px}.section h2{font-size:clamp(36px,10.5vw,52px)}.section-grid,.section-head,.proof-grid,.faq-grid,.contact-shell{display:block}.section-copy{margin-top:34px}.shift-visual{height:350px}.orbit-b{width:420px}.n1{left:5%}.n2{left:7%}.n3{right:5%}.n4{right:5%}.system-grid{grid-template-columns:1fr}.system-card,.system-card:last-child{grid-column:auto;min-height:260px}.section-head>p{margin-top:20px}.consult-panel{padding:28px 20px}.outcomes{grid-template-columns:1fr}.schedule-card{margin-top:38px}.proof-stack{margin-top:42px}.brick-city-grid{display:block}.brick-city-copy>p:not(.brick-city-status,.brick-city-note){font-size:15px}.brick-city-tags{gap:6px}.brick-city-cta{max-width:none}.kb-beacon{min-height:440px;margin-top:42px}.beacon-orb{left:55%;top:31%;width:180px;height:180px}.beacon-console{left:17px;right:17px;bottom:15px}.beacon-console strong{display:none}.brick-skyline{height:38%}.brick-skyline i{width:14%}.brick-skyline i:nth-child(8),.brick-skyline i:nth-child(9){display:none}.faq h2{margin:22px 0 35px}.contact-copy{margin-bottom:48px}.form-card{padding:23px 18px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.footer-grid>div{flex-direction:column;gap:8px}.site-footer{padding-bottom:120px}.mobile-rail{position:fixed;z-index:88;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:1.3fr .7fr;gap:6px;padding:6px;border:1px solid var(--line);border-radius:10px;background:rgba(5,6,8,.9);backdrop-filter:blur(16px);box-shadow:0 12px 40px rgba(0,0,0,.5)}.mobile-rail a{display:grid;place-items:center;min-height:46px;border-radius:6px;text-decoration:none;font-size:11px;font-weight:800}.mobile-rail a:first-child{background:var(--paper);color:var(--ink)}.mobile-rail a:last-child{border:1px solid rgba(99,234,213,.38);color:var(--teal)}.modal-stage>div{padding:30px 24px 34px}.modal-stage h2{font-size:31px}}
/* ============================================================
   APEX PREMIUM LIFT — additive layer, v1
   Appended after the existing stylesheet. Changes no structure,
   no copy, no layout. Everything here is craft: motion physics,
   material depth, and the detail layer.
   Rollback = delete everything below this banner.
   ============================================================ */

:root{
  /* Motion physics. The page previously used only `ease`, which reads
     mechanical. These curves mimic real deceleration. */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-out-back:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:160ms;
  --dur-mid:320ms;
  --dur-slow:620ms;

  /* Elevation scale, tinted with the brand teal instead of pure black.
     Tinted shadows read as "lit room"; pure black reads as "sticker". */
  --sh-1:0 1px 2px rgba(2,10,10,.34), 0 2px 6px rgba(2,14,14,.24);
  --sh-2:0 6px 14px rgba(2,10,10,.36), 0 10px 28px rgba(2,16,16,.28);
  --sh-3:0 14px 30px rgba(2,10,10,.40), 0 26px 60px rgba(2,18,18,.32);
  --sh-4:0 26px 60px rgba(2,10,10,.46), 0 44px 110px rgba(2,18,18,.38);
  --glow-teal:0 0 0 1px rgba(99,234,213,.22), 0 14px 44px rgba(99,234,213,.16);
  --glow-brass:0 0 0 1px rgba(221,185,109,.24), 0 14px 44px rgba(221,185,109,.14);
}

/* ---- Type rendering ------------------------------------------------ */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Optical correction: very large display type needs negative tracking to
   avoid looking loose. Small caps labels need the opposite. */
.hero h1{letter-spacing:-.022em}
.section h2{letter-spacing:-.016em}

/* ---- Brand detail layer -------------------------------------------- */
::selection{background:rgba(99,234,213,.28);color:#f8f6ef;text-shadow:none}
::-moz-selection{background:rgba(99,234,213,.28);color:#f8f6ef}

html{scrollbar-color:rgba(99,234,213,.34) rgba(9,12,15,1);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#090c0f}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(99,234,213,.42),rgba(221,185,109,.30));
  border-radius:999px;border:3px solid #090c0f;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(99,234,213,.62),rgba(221,185,109,.44))}

/* Unified focus ring in brand accent — replaces per-element guesswork. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Atmospheric depth --------------------------------------------- */
/* Fine film grain over the whole page. Flat dark fields read as digital
   emptiness; grain reads as photographed material. Kept very low so it is
   felt, not seen. Never intercepts pointer events. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Motion: apply real easing to what already animates ------------- */
.button,.nav-cta,.nav-links a,.system-card,.schedule-card,.form-card,
.brick-city-cta,.mobile-rail a,.outcomes>*,.proof-stack>*{
  transition:
    transform var(--dur-mid) var(--ease-out-expo),
    box-shadow var(--dur-mid) var(--ease-out-expo),
    background-color var(--dur-fast) var(--ease-out-quint),
    border-color var(--dur-fast) var(--ease-out-quint),
    color var(--dur-fast) var(--ease-out-quint);
}

/* Primary actions get a touch of overshoot — confident, not bouncy. */
.button:hover,.nav-cta:hover,.brick-city-cta:hover{
  transform:translateY(-2px) scale(1.014);
  transition-timing-function:var(--ease-out-back);
  box-shadow:var(--sh-3),var(--glow-teal);
}
.button:active,.nav-cta:active,.brick-city-cta:active{
  transform:translateY(0) scale(.995);
  transition-duration:90ms;
}

/* Cards lift rather than merely tint. */
.system-card:hover,.schedule-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-4);
}

/* Link underline that grows from the left instead of snapping on. */
.section-copy a:not(.button),.brick-city-copy a:not(.brick-city-cta),
.faq a,.footer-grid a{
  position:relative;text-decoration:none;
  background-image:linear-gradient(var(--teal),var(--teal));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-mid) var(--ease-out-expo),color var(--dur-fast) linear;
}
.section-copy a:not(.button):hover,.brick-city-copy a:not(.brick-city-cta):hover,
.faq a:hover,.footer-grid a:hover{background-size:100% 1px}

/* ---- Staggered scroll reveals -------------------------------------- */
/* The .reveal system already exists; it just fired everything at once.
   Grouped children now cascade, which is the single strongest signal
   that a human choreographed the page. */
.reveal{transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo)}
.system-grid .reveal:nth-child(1),.outcomes .reveal:nth-child(1),.proof-stack .reveal:nth-child(1){transition-delay:0ms}
.system-grid .reveal:nth-child(2),.outcomes .reveal:nth-child(2),.proof-stack .reveal:nth-child(2){transition-delay:70ms}
.system-grid .reveal:nth-child(3),.outcomes .reveal:nth-child(3),.proof-stack .reveal:nth-child(3){transition-delay:140ms}
.system-grid .reveal:nth-child(4),.outcomes .reveal:nth-child(4),.proof-stack .reveal:nth-child(4){transition-delay:210ms}
.system-grid .reveal:nth-child(5),.outcomes .reveal:nth-child(5),.proof-stack .reveal:nth-child(5){transition-delay:280ms}
.system-grid .reveal:nth-child(6),.outcomes .reveal:nth-child(6),.proof-stack .reveal:nth-child(6){transition-delay:350ms}

/* ---- Material refinement ------------------------------------------- */
/* Hairline top-light on raised panels: real objects catch light on the
   edge nearest the source. One line, large perceived gain. */
.system-card,.schedule-card,.form-card,.consult-panel,.film-shell{
  position:relative;
}
.system-card::before,.schedule-card::before,.form-card::before,.film-shell::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,transparent);
  pointer-events:none;z-index:2;
}

/* The film is the centrepiece — give it real presence. */
.film-shell{box-shadow:var(--sh-4),0 0 90px rgba(99,234,213,.10)}

/* Form inputs: clearer resting state, brand-accent focus. */
.form-card input,.form-card textarea,.form-card select{
  transition:border-color var(--dur-fast) var(--ease-out-quint),
             box-shadow var(--dur-fast) var(--ease-out-quint),
             background-color var(--dur-fast) var(--ease-out-quint);
}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{
  border-color:rgba(99,234,213,.55);
  box-shadow:0 0 0 3px rgba(99,234,213,.13);
}
.form-card ::placeholder{color:rgba(169,177,178,.62)}

/* ---- Honour reduced motion (re-assert after our additions) ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal,.button,.nav-cta,.system-card,.schedule-card,.brick-city-cta,
  .form-card input,.form-card textarea,.form-card select{
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  .button:hover,.nav-cta:hover,.brick-city-cta:hover,
  .system-card:hover,.schedule-card:hover{transform:none}
  body::after{display:none}
}
/* ============================================================
   APEX PREMIUM LIFT — v2, visible refinements
   Still additive. No structural, copy, or layout changes.
   Targets the things that read as "premium" at a glance:
   spatial rhythm, atmospheric depth, editorial typography.
   ============================================================ */

/* ---- 1. Spatial rhythm ---------------------------------------------
   Every section was padding-block:120px — a metronome, not music.
   Alternating breathe/dense gives the page a tempo. */
.section:nth-of-type(odd){padding-block:132px}
.section:nth-of-type(even){padding-block:104px}
.section:first-of-type{padding-block:112px 132px}

/* ---- 2. Atmospheric depth ------------------------------------------
   A very soft directional glow behind alternating sections so the dark
   field reads as lit space rather than flat black. */
.section{position:relative;isolation:isolate}
.section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 60% at 12% 0%, rgba(99,234,213,.055), transparent 62%);
}
.section:nth-of-type(even)::before{
  background:radial-gradient(120% 60% at 88% 0%, rgba(221,185,109,.05), transparent 62%);
}

/* Hairline section seam — a lit edge, not a border. */
.section + .section{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 18%,rgba(255,255,255,.09) 82%,transparent) 1;
}

/* ---- 3. Editorial pull-quote ---------------------------------------
   Was a plain 2px brass rule. Now it carries weight. */
blockquote{
  position:relative;
  margin-block:30px 0;
  padding:6px 0 6px 30px;
  border-left:0;
  font-size:1.06em;
}
blockquote::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--brass-hot),var(--brass) 42%,rgba(221,185,109,0));
}
blockquote::after{
  content:"\201C";
  position:absolute;left:16px;top:-30px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:82px;line-height:1;color:rgba(221,185,109,.16);
  pointer-events:none;user-select:none;
}

/* ---- 4. Marquee edge fade -------------------------------------------
   The signal strip hard-cuts at the viewport edge. Masking it makes the
   motion feel continuous instead of clipped. */
.signal-strip,.signal-track{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* ---- 5. Card material ----------------------------------------------
   Adds interior light so cards read as objects, not rectangles. */
.system-card,.schedule-card,.form-card,.consult-panel{
  background-image:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.045), transparent 58%);
}
.system-card{box-shadow:var(--sh-2)}
.system-card:hover{box-shadow:var(--sh-4),0 0 0 1px rgba(99,234,213,.14)}

/* ---- 6. Section label ------------------------------------------------
   The "01 · THE SHIFT" kicker gets a lit leading rule. */
.section-label::before{
  content:"";display:inline-block;width:26px;height:1px;margin-right:2px;
  background:linear-gradient(90deg,rgba(99,234,213,0),var(--teal));
  vertical-align:middle;
}

/* ---- 7. Display headings --------------------------------------------
   Slightly richer gradient falloff on the big type. */
.hero h1,.section h2{text-wrap:balance}

/* ---- 8. Film frame ---------------------------------------------------
   Lift the centrepiece off the page a little more. */
.film-shell{
  box-shadow:var(--sh-4), 0 0 120px rgba(99,234,213,.13), 0 0 0 1px rgba(255,255,255,.07);
}

/* ---- 9. Primary CTA --------------------------------------------------
   The single most important element on a lead-gen page. */
.button--primary,.hero-actions .button:first-child,.nav-cta{
  position:relative;overflow:hidden;
}
.button--primary::after,.hero-actions .button:first-child::after,.nav-cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 46%,transparent 62%);
  transform:translateX(-130%);
  transition:transform 720ms var(--ease-out-expo);
}
.button--primary:hover::after,.hero-actions .button:first-child:hover::after,.nav-cta:hover::after{
  transform:translateX(130%);
}

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .button--primary::after,.hero-actions .button:first-child::after,.nav-cta::after{
    display:none;
  }
}

/* ---- Mobile: keep the rhythm from becoming cramped ------------------- */
@media(max-width:760px){
  .section:nth-of-type(odd){padding-block:88px}
  .section:nth-of-type(even){padding-block:72px}
  .section:first-of-type{padding-block:56px 66px}
  blockquote::after{font-size:60px;top:-22px}
  .section::before{background:radial-gradient(140% 40% at 50% 0%, rgba(99,234,213,.05), transparent 60%)}
}
/* ============================================================
   APEX PREMIUM LIFT — v3
   Corrects two v2 selectors that matched nothing, then goes
   deeper on the components that are actually on screen.
   Verified against a live DOM class inventory — no guessing.
   ============================================================ */

/* ---- CORRECTIONS ---------------------------------------------------
   v2 targeted `.button--primary` (does not exist; it is
   `.button-primary`) and styled `blockquote` (the only one is inside a
   hidden modal). The visible pull quote is `p.pull-quote`. */

/* Undo the wasted blockquote work so it cannot affect the modal. */
blockquote{padding:25px 0 0 22px;border-left:2px solid var(--brass)}
blockquote::before,blockquote::after{content:none}

/* ---- 1. The real pull quote ---------------------------------------- */
.pull-quote{
  position:relative;
  margin:30px 0 0;
  padding:10px 0 10px 32px;
  font-size:1.06em;line-height:1.62;
  color:#e2e6e5;
}
.pull-quote::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--brass-hot),var(--brass) 45%,rgba(221,185,109,0));
}
.pull-quote::after{
  content:"\201C";position:absolute;left:18px;top:-34px;
  font-family:Georgia,'Times New Roman',serif;font-size:88px;line-height:1;
  color:rgba(221,185,109,.15);pointer-events:none;user-select:none;
}

/* ---- 2. Primary CTA — correct class -------------------------------- */
.button-primary,.nav-cta{position:relative;overflow:hidden}
.button-primary::after,.nav-cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.20) 47%,transparent 63%);
  transform:translateX(-135%);
  transition:transform 760ms var(--ease-out-expo);
}
.button-primary:hover::after,.nav-cta:hover::after{transform:translateX(135%)}

/* ---- 3. System cards — depth, numbering, icon treatment ------------- */
.system-card{
  position:relative;overflow:hidden;
  border-radius:18px;
  transition:transform var(--dur-mid) var(--ease-out-expo),
             box-shadow var(--dur-mid) var(--ease-out-expo),
             border-color var(--dur-mid) var(--ease-out-quint);
}
/* corner light — reads as a lit bevel, not a border */
.system-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(70% 46% at 0% 0%, rgba(99,234,213,.10), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(221,185,109,.07), transparent 62%);
  opacity:.85;transition:opacity var(--dur-mid) var(--ease-out-quint);
}
.system-card:hover::after{opacity:1}
.system-card:hover{transform:translateY(-5px)}

.system-icon{
  transition:transform var(--dur-mid) var(--ease-out-back),
             filter var(--dur-mid) var(--ease-out-quint);
}
.system-card:hover .system-icon{
  transform:translateY(-2px) scale(1.06);
  filter:drop-shadow(0 6px 16px rgba(99,234,213,.30));
}

/* ---- 4. Section label — lit leading rule ---------------------------- */
.section-label{letter-spacing:.14em}

/* ---- 5. Eyebrow + hero deck ---------------------------------------- */
.eyebrow{letter-spacing:.16em}
.hero-deck{max-width:62ch;line-height:1.72}

/* ---- 6. Hero proof band -------------------------------------------- */
.hero-proof strong{
  background:linear-gradient(180deg,#fff,#cfd6d4);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---- 7. Film frame — the centrepiece -------------------------------- */
.film-shell{
  border-radius:20px;
  transition:transform 620ms var(--ease-out-expo), box-shadow 620ms var(--ease-out-expo);
}
.film-shell:hover{transform:translateY(-3px)}
.play-button{transition:transform var(--dur-mid) var(--ease-out-back),box-shadow var(--dur-mid) var(--ease-out-expo)}
.play-button:hover{transform:scale(1.07);box-shadow:0 10px 34px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.10)}

/* ---- 8. Marquee edge fade (correct classes) ------------------------- */
.signal-strip{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

/* ---- 9. Nav — glass refinement -------------------------------------- */
.nav-links{backdrop-filter:blur(14px) saturate(1.15)}
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  transform:scaleX(0);transform-origin:50%;
  transition:transform var(--dur-mid) var(--ease-out-expo);
}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---- 10. Reveal polish ---------------------------------------------- */
.reveal{will-change:opacity,transform}

@media (prefers-reduced-motion:reduce){
  .button-primary::after,.nav-cta::after{display:none}
  .system-card:hover,.film-shell:hover,.play-button:hover{transform:none}
  .nav-links a::after{transition:none}
}

@media(max-width:760px){
  .pull-quote{padding-left:24px}
  .pull-quote::after{font-size:62px;top:-24px;left:12px}
  .system-card:hover{transform:none}
}
/* ============================================================
   APEX CINEMATIC HERO — 16:9 film stage with a built-in menu
   Video is the ground. Headline, CTAs and menu ride on top, so
   everything stays above the fold instead of being pushed down.
   ============================================================ */

.hero-cinema{
  position:relative;
  margin-top:0;
  padding:0;
  isolation:isolate;
}

.hc-stage{
  position:relative;
  width:100%;
  /* 16:9, but never taller than the viewport minus the header —
     this is what keeps the headline + CTA above the fold. */
  aspect-ratio:16/9;
  max-height:calc(100svh - 124px);
  min-height:520px;
  overflow:hidden;
  display:grid;
  grid-template-rows:1fr auto;
  border-bottom:1px solid var(--line);
}

/* ---- media layer ---------------------------------------------------- */
.hc-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hc-poster,.hc-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
}
.hc-video{opacity:0;transition:opacity 1200ms var(--ease-out-expo)}
.hc-video.is-live{opacity:1}
.hc-poster{opacity:1;filter:saturate(1.02)}

/* Legibility scrim — directional, so the left copy column stays readable
   without flattening the whole frame. */
.hc-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(5,6,8,.94) 0%, rgba(5,6,8,.80) 34%, rgba(5,6,8,.34) 58%, rgba(5,6,8,.18) 100%),
    linear-gradient(0deg, rgba(5,6,8,.92) 0%, rgba(5,6,8,0) 42%);
}
.hc-vignette{
  position:absolute;inset:0;
  background:radial-gradient(120% 82% at 50% 44%, transparent 46%, rgba(0,0,0,.55) 100%);
}
.hc-grain{
  position:absolute;inset:0;opacity:.05;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- content layer --------------------------------------------------- */
.hc-inner{
  position:relative;z-index:2;
  align-self:center;
  display:grid;grid-template-columns:minmax(0,1.05fr) auto;
  align-items:center;gap:48px;
  padding-block:34px;
}
.hc-copy{max-width:62ch}
.hc-copy .eyebrow{margin-bottom:16px}

.hero-cinema h1{
  font-size:clamp(42px,4.6vw,74px);
  line-height:1.02;letter-spacing:-.024em;
  margin:0 0 18px;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}
.hc-deck{
  font-size:clamp(15px,1.12vw,18px);line-height:1.7;
  color:#c8d0ce;max-width:58ch;margin:0 0 26px;
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}
.hc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}

.hc-proof{
  display:flex;gap:34px;list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(255,255,255,.12);padding-top:18px;max-width:min(560px,100%);
}

/* ---- play-with-sound control ---------------------------------------- */
.hc-side{display:grid;justify-items:end}
.hc-play{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:2px 14px;align-items:center;
  padding:16px 22px 16px 16px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(8,11,13,.52);backdrop-filter:blur(16px) saturate(1.2);
  color:var(--paper);cursor:pointer;
  box-shadow:var(--sh-3);
  transition:transform var(--dur-mid) var(--ease-out-back),
             box-shadow var(--dur-mid) var(--ease-out-expo),
             border-color var(--dur-fast) var(--ease-out-quint);
}
.hc-play i{
  grid-row:1/3;width:44px;height:44px;border-radius:50%;
  background:var(--paper);position:relative;
}
.hc-play i::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--ink);
}
.hc-play b{font:700 13px/1.2 Raleway,system-ui,sans-serif;letter-spacing:.01em}
.hc-play em{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--muted);font-style:normal}
.hc-play:hover{
  transform:translateY(-2px) scale(1.02);
  border-color:rgba(99,234,213,.44);
  box-shadow:var(--sh-4),var(--glow-teal);
}
.hc-play:active{transform:translateY(0) scale(.99)}

/* ---- the built-in menu ----------------------------------------------- */
.hc-menu{
  position:relative;z-index:3;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border-top:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(5,6,8,.30),rgba(5,6,8,.72));
  backdrop-filter:blur(20px) saturate(1.25);
}
.hc-menu a{
  position:relative;overflow:hidden;
  display:grid;gap:5px;justify-items:start;align-content:center;
  padding:17px 22px;min-height:74px;
  text-decoration:none;color:#aeb6b5;
  border-left:1px solid rgba(255,255,255,.07);
  transition:color var(--dur-fast) var(--ease-out-quint),
             background-color var(--dur-mid) var(--ease-out-quint);
}
.hc-menu a:first-child{border-left:0}
.hc-menu a i{
  font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.16em;
  color:var(--brass);font-style:normal;opacity:.85;
}
.hc-menu a span{
  font:700 13px/1.15 Raleway,system-ui,sans-serif;letter-spacing:.02em;
}

/* the light-up: a rising wash + a lit top edge */
.hc-menu a::before{
  content:"";position:absolute;inset:auto 0 0 0;height:0;
  background:linear-gradient(180deg,rgba(99,234,213,.16),rgba(99,234,213,.04));
  transition:height var(--dur-mid) var(--ease-out-expo);
  pointer-events:none;
}
.hc-menu a::after{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  transform:scaleX(0);transform-origin:50%;
  transition:transform var(--dur-mid) var(--ease-out-expo);
  pointer-events:none;
}
.hc-menu a:hover,.hc-menu a:focus-visible{color:var(--paper);background-color:rgba(255,255,255,.03)}
.hc-menu a:hover::before,.hc-menu a:focus-visible::before{height:100%}
.hc-menu a:hover::after,.hc-menu a:focus-visible::after{transform:scaleX(1)}

/* current section — stays lit while you're in it */
.hc-menu a.is-active{color:var(--paper)}
.hc-menu a.is-active::after{transform:scaleX(1)}
.hc-menu a.is-active::before{height:100%}
.hc-menu a.is-active i{color:var(--teal-hot,var(--teal));opacity:1}

/* click confirmation pulse */
@keyframes hcFlash{
  0%{box-shadow:inset 0 0 0 0 rgba(99,234,213,.55)}
  40%{box-shadow:inset 0 0 0 2px rgba(99,234,213,.55)}
  100%{box-shadow:inset 0 0 0 0 rgba(99,234,213,0)}
}
.hc-menu a.is-flash{animation:hcFlash 620ms var(--ease-out-expo)}

/* the old split hero is gone; keep the header from double-bordering */
.hero-cinema + .signal-strip{border-top:0}

/* ---- responsive ------------------------------------------------------ */
@media(max-width:1080px){
  .hc-inner{grid-template-columns:1fr;gap:26px}
  .hc-side{justify-items:start}
  .hc-menu{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr)}
  .hc-menu a{border-left:1px solid rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.07);min-height:64px}
  .hc-menu a:nth-child(3n+1){border-left:0}
}
@media(max-width:760px){
  .hc-stage{
    aspect-ratio:auto;
    max-height:none;min-height:0;
    grid-template-rows:auto auto;
  }
  /* On phones the film becomes a real 16:9 band on top, copy below it —
     no cropping of Kasey's face, no data burned on autoplay. */
  .hc-media{position:relative;inset:auto;aspect-ratio:16/9;width:100%}
  .hc-poster,.hc-video{position:absolute}
  .hc-scrim{background:linear-gradient(0deg,rgba(5,6,8,.92),rgba(5,6,8,.12) 62%)}
  .hc-inner{padding-block:26px 30px;gap:20px}
  .hero-cinema h1{font-size:clamp(34px,10.5vw,52px)}
  .hc-actions{display:grid}
  .hc-actions .button{width:100%}
  .hc-proof{gap:16px;flex-wrap:wrap}
  .hc-menu{grid-template-columns:repeat(2,1fr)}
  .hc-menu a{min-height:58px;padding:13px 16px}
  .hc-menu a:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.07)}
  .hc-menu a:nth-child(2n+1){border-left:0}
  .hc-play{padding:12px 18px 12px 12px}
  .hc-play i{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  .hc-video{display:none}
  .hc-menu a::before,.hc-menu a::after{transition:none}
  .hc-menu a.is-flash{animation:none}
  .hc-play:hover{transform:none}
}

/* ---- de-duplicate the navigation ------------------------------------
   The hero carries its own menu. While it is on screen the header's
   link row is redundant, so it recedes; it returns the moment the hero
   leaves. The logo and the CTA never move. */
.site-header .nav-links{
  transition:opacity 420ms var(--ease-out-expo),
             transform 420ms var(--ease-out-expo),
             visibility 420ms linear;
}
.site-header.at-hero .nav-links{
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
}
.site-header{transition:background-color 420ms var(--ease-out-expo),border-color 420ms var(--ease-out-expo)}
.site-header.at-hero{background:transparent;border-bottom-color:transparent}

@media (prefers-reduced-motion:reduce){
  .site-header .nav-links{transition:none}
}
@media(max-width:1080px){
  /* mobile nav is already a toggle — never hide it */
  .site-header.at-hero .nav-links{opacity:1;visibility:visible;transform:none;pointer-events:auto}
}

/* ---- short-viewport adaptation ---------------------------------------
   On laptops the limiting dimension is height, not width. The stage's
   max-height cannot win if the copy inside it is intrinsically taller,
   so the copy itself has to give. This keeps the built-in menu inside
   the fold on 13" screens without hiding anything. */
@media (min-width:761px) and (max-height:860px){
  .hc-stage{min-height:0}
  .hero-cinema h1{font-size:clamp(34px,3.5vw,52px);margin-bottom:12px}
  .hc-deck{font-size:15px;line-height:1.6;margin-bottom:18px;max-width:52ch}
  .hc-inner{padding-block:20px;gap:32px}
  .hc-actions{margin-bottom:16px;gap:10px}
  .hc-proof{padding-top:12px;gap:26px}
  .hc-menu a{min-height:60px;padding:12px 18px}
  .hc-play{padding:12px 18px 12px 12px}
  .hc-play i{width:38px;height:38px}
}
@media (min-width:761px) and (max-height:720px){
  /* Compress rather than delete — hiding the copy left dead space and made
     the composition read sparse. The content stays; the type tightens. */
  .hero-cinema h1{font-size:clamp(30px,3vw,44px);margin-bottom:10px}
  .hc-deck{font-size:14px;line-height:1.55;margin-bottom:14px;max-width:46ch}
  .hc-proof{padding-top:10px;gap:22px;font-size:.92em}
  .hc-inner{padding-block:14px;gap:26px}
  .hc-actions{margin-bottom:12px}
  .hc-menu a{min-height:54px;padding:10px 16px}
  .hc-play{padding:10px 16px 10px 10px}
  .hc-play i{width:34px;height:34px}
}
/* ============================================================
   APEX PREMIUM LIFT — v4, "structure and imagery"
   Appended after apex-hero.css. This is the first layer that
   assumes markup changes (see lift_build.py); every rule here
   degrades safely if the markup transform has not been applied.
   Rollback = delete everything below this banner and revert
   index.html to the PREDEPLOY-LIFT backup.
   ============================================================ */

:root{
  /* v1–v3 shipped shadows, motion and glows but never a radius or
     spacing scale, so every card hard-coded its own. Three radius
     languages were in use: 999 / 26 / 22 / 18 / 12 / 7 / 6 / 4.
     Naming them does not change any pixel today — it gives the
     next edit somewhere to land. */
  --radius-pill:999px;
  --radius-xl:26px;
  --radius-lg:22px;   /* == the legacy --radius */
  --radius-md:18px;
  --radius-sm:12px;
  --radius-xs:6px;    /* buttons + inputs stay deliberately square */

  --space-2xs:6px;  --space-xs:12px;  --space-sm:20px;
  --space-md:34px;  --space-lg:56px;  --space-xl:92px;

  /* referenced at apex-hero.css line ~594 but never defined,
     so it silently fell back to plain --teal */
  --teal-hot:#8ff6e6;
}

/* ============================================================
   1. THE HERO HEADLINE
   apex-hero.css set only size/leading/tracking on `.hero-cinema h1`.
   The Orbitron / uppercase / gradient-em rules still live on
   `.hero h1` (base line 14) — a selector that stopped matching the
   moment the split hero was replaced. Result: the single biggest
   promise on the page rendered Raleway 700, sentence case, no
   gradient, while every H2 under it rendered Orbitron uppercase.
   This restores the page's own voice to its own headline.
   ============================================================ */

.hero-cinema h1{
  font-family:Orbitron,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  /* Orbitron uppercase sets ~40% wider than Raleway sentence case at
     the same px, so the scale drops to keep the block the same height
     and the 01–06 menu inside the fold. */
  font-size:clamp(32px,4.5vw,68px);
  letter-spacing:-.048em;
  line-height:.98;
}

/* The gradient the section H2s have always had. `.hero h1 em` was in
   that selector list and matched nothing; this puts the hero back in. */
.hero-cinema h1 em{
  display:block;
  font-style:normal;
  color:transparent;
  background:linear-gradient(105deg,var(--paper) 3%,var(--brass-hot) 48%,var(--teal) 96%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* The compressed variants exist so the built-in menu survives on 13"
   laptops. They were tuned for Raleway; retune for Orbitron's width. */
@media (min-width:761px) and (max-height:860px){
  .hero-cinema h1{font-size:clamp(28px,3.1vw,46px)}
}
@media (min-width:761px) and (max-height:720px){
  .hero-cinema h1{font-size:clamp(26px,2.6vw,38px)}
}
@media (max-width:760px){
  .hero-cinema h1{font-size:clamp(24px,7.4vw,36px);letter-spacing:-.04em}
}

/* ---- the hero stat row ----------------------------------------------
   `.hero-proof div{}` (base line 14) never matched: the items are <li>.
   So the three proof points lost their column layout and gap. */
.hc-proof li{
  display:flex;flex-direction:column;gap:5px;
  min-width:0;
}
.hc-proof strong{
  font:700 clamp(15px,1.3vw,20px)/1 Orbitron,sans-serif;
  color:transparent;
  background:linear-gradient(120deg,var(--paper),var(--brass-hot) 78%);
  -webkit-background-clip:text;background-clip:text;
  letter-spacing:-.01em;
}
.hc-proof span{
  color:#8b9594;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;line-height:1.3;
}

/* ---- the seam into the page -----------------------------------------
   apex-hero.css removes the signal strip's top border while the hero
   sits above it, which left a hard cut. Give it the same fading rule
   the rest of the page uses between sections. */
.hero-cinema + .signal-strip{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(99,234,213,.30),rgba(221,185,109,.18),transparent) 1;
}

/* ============================================================
   2. TYPE HIERARCHY
   The section H2s were capped at 68px — larger than the hero H1 at
   every viewport, which inverted the page's hierarchy and cost a
   lot of vertical space (`.shift` measured 13.8% ink fill across
   1,337px). A 12% trim restores the order without touching the
   display face or the uppercase character.
   ============================================================ */
.section h2{font-size:clamp(36px,4.4vw,60px)}

/* ============================================================
   3. SHIFT — give the diagram the room the copy was wasting
   ============================================================ */
.shift .section-grid{gap:var(--space-lg) var(--space-xl);margin-top:32px}

/* The headline column runs 420px; the copy column ran 260px and simply
   stopped, leaving 264px of nothing above the diagram. Stretching the
   column and pushing the quote to its foot closes the hole and lands
   the quote on the headline's last line — an alignment, not a gap. */
.shift .section-copy{
  align-self:stretch;
  display:flex;flex-direction:column;
}
.shift .section-copy > p:first-child{margin-bottom:0}
.shift .pull-quote{margin-top:auto;margin-bottom:0}

.shift-visual{
  margin-top:38px;
  height:clamp(340px,38vw,460px);
  /* the generated network plate sits under the existing CSS grid +
     orbit rings, so the diagram reads as lit space rather than a
     drawing floating on flat black */
  background-image:
    radial-gradient(circle at center,rgba(99,234,213,.12),transparent 34%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(180deg,rgba(8,11,13,.62),rgba(8,11,13,.86)),
    url('assets/kb-network-plate.jpg');
  background-size:auto,44px 44px,44px 44px,auto,cover;
  background-position:center,center,center,center,center;
  background-repeat:no-repeat,repeat,repeat,no-repeat,no-repeat;
}

/* ---- the diagram breathes ---------------------------------------------
   The orbit was two static rings. A slow, shallow scale on each — offset
   in phase and period so they never sync — reads as a system holding
   itself in balance rather than a drawing. Nothing moves fast enough to
   pull the eye off the copy. */
@keyframes shiftOrbitA{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%    {transform:translate(-50%,-50%) scale(1.045)}
}
@keyframes shiftOrbitB{
  0%,100%{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
  50%    {transform:translate(-50%,-50%) rotate(-12deg) scale(1.028)}
}
.orbit-a{animation:shiftOrbitA 13s var(--ease-out-quint) infinite}
.orbit-b{animation:shiftOrbitB 19s var(--ease-out-quint) infinite}

@keyframes shiftCoreGlow{
  0%,100%{text-shadow:0 0 26px rgba(99,234,213,.16)}
  50%    {text-shadow:0 0 40px rgba(99,234,213,.34)}
}
.shift-visual strong{animation:shiftCoreGlow 13s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .orbit-a,.orbit-b,.shift-visual strong{animation:none}
}

/* ============================================================
   4. SYSTEMS — break the five-equal row
   `.system-grid` is already `repeat(10,1fr)` with every card at
   `span 2`: five identical columns, the lowest-energy layout there
   is, and only ~250px per card at 1312px. The grid needs no new
   markup to become deliberate — only different spans.
   ============================================================ */
@media (min-width:1081px){
  .system-grid{gap:16px}
  /* row one: three cards, the first given extra width so the eye has
     a place to enter. row two: two wide cards. */
  .system-card:nth-child(1){grid-column:span 4}
  .system-card:nth-child(2){grid-column:span 3}
  .system-card:nth-child(3){grid-column:span 3}
  .system-card:nth-child(4){grid-column:span 5}
  .system-card:nth-child(5){grid-column:span 5}
  /* Wider cards mean shorter text, so the inherited 330px floor left a
     void under every card. Height now follows content, and the closing
     question is pinned to the bottom edge so the residual space reads
     as composition rather than as a gap. */
  .system-card:nth-child(-n+3){
    display:flex;flex-direction:column;
    min-height:296px;
  }
  .system-card:nth-child(-n+3) p{margin-bottom:0}
  .system-card:nth-child(-n+3) strong{margin-top:auto;padding-top:24px}
  .system-card:nth-child(1) .system-icon{margin-bottom:38px}

  /* the two wide cards get horizontal room, so lay them out on an axis */
  .system-card:nth-child(n+4){
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"icon head" "icon body" "icon note";
    align-content:start;
    column-gap:26px;
    padding:30px 28px;
    min-height:0;
  }
  .system-card:nth-child(n+4) .system-icon{grid-area:icon;margin-bottom:0}
  .system-card:nth-child(n+4) h3{grid-area:head;margin:0 0 10px}
  .system-card:nth-child(n+4) p{grid-area:body;margin:0;max-width:52ch}
  .system-card:nth-child(n+4) strong{grid-area:note;margin-top:16px}
}
@media (min-width:761px) and (max-width:1080px){
  .system-card{grid-column:span 5}
  .system-card:nth-child(5){grid-column:span 10}
}
@media (max-width:760px){
  .system-card{grid-column:span 10;min-height:0}
}

/* ---- the icons ------------------------------------------------------
   Were ⌖ ◒ ↗ ∞ ✦ — Unicode glyphs whose weight, size and baseline
   differ per character and per platform. Now inline SVG on
   currentColor: one stroke weight, one optical size, themeable. */
.system-icon{
  width:46px;height:46px;
  border-color:rgba(221,185,109,.34);
  color:var(--brass-hot);
  margin-bottom:44px;
  transition:transform var(--dur-mid) var(--ease-out-back),
             border-color var(--dur-mid) var(--ease-out-expo),
             box-shadow var(--dur-mid) var(--ease-out-expo);
}
.system-icon svg{width:21px;height:21px;display:block;overflow:visible}
.system-card:hover .system-icon{
  transform:translateY(-2px) scale(1.07);
  border-color:rgba(99,234,213,.5);
  box-shadow:0 0 0 1px rgba(99,234,213,.14),0 10px 26px rgba(99,234,213,.14);
  color:var(--teal);
}

/* ---- hover personality ----------------------------------------------
   v3 gave every card the same -5px lift. Give the wide cards a
   shallower one so the row does not move as a single slab. */
.system-card:nth-child(n+4):hover{transform:translateY(-3px)}

/* ============================================================
   5. CONSULTATION — stop the panel floating on flat black
   ============================================================ */
.consultation .consult-panel{
  background-image:
    radial-gradient(circle at 88% 12%,rgba(221,185,109,.13),transparent 46%),
    linear-gradient(150deg,rgba(13,18,21,.94),rgba(7,10,12,.97)),
    url('assets/kb-network-plate.jpg');
  background-size:auto,auto,cover;
  background-position:center,center,20% center;
  background-repeat:no-repeat;
}

/* ============================================================
   6. PROOF — put a person on a page that sells a person
   Below the hero the whole document held three real assets: the
   hero poster, the hero loop, and a 42px logo. This section
   claimed "strategy from someone who has lived on both sides of
   the system" and showed no one. The portrait is a frame from the
   approved film, so it is the same person the hero introduces.
   ============================================================ */
.proof-grid{
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:var(--space-lg) var(--space-xl);
  align-items:start;
  margin-top:34px;
}
.proof-portrait{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#e7e3d8;
  box-shadow:0 26px 64px rgba(5,6,8,.22),0 2px 6px rgba(5,6,8,.10);
  /* the one intentional break in an otherwise square grid */
  transform:rotate(-1.1deg);
}
.proof-portrait img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
}
/* a warm scrim so the photo sits in the paper section rather than on it */
.proof-portrait::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,transparent 52%,rgba(120,96,48,.10));
  pointer-events:none;
}
.proof-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 20px 15px;
  background:linear-gradient(0deg,rgba(8,10,10,.82),transparent);
  color:var(--paper);
  font:700 9.5px/1.4 JetBrains Mono,monospace;
  letter-spacing:.15em;text-transform:uppercase;
}
.proof-body{min-width:0}
.proof-body h2{margin-bottom:22px}
.proof-lead p{max-width:62ch;margin-bottom:0}
.proof-stack{margin-top:var(--space-md)}
.proof-stack div{grid-template-columns:.5fr 1fr;padding:22px 0}
.proof-stack strong{font-size:14px;letter-spacing:-.01em}

/* `.section::before` paints a teal/brass corner glow at z-index:-1
   inside `isolation:isolate` — which lands it *above* the paper
   background on the one light section. */
.proof::before{display:none}

/* The only tonal inversion on the page met the dark field with a 1px
   line on both edges — two hard cuts. Grading the first and last 110px
   lets the paper arrive and leave instead of snapping. */
.proof{
  background-image:
    linear-gradient(180deg,rgba(16,22,24,.13),rgba(16,22,24,0) 110px),
    linear-gradient(0deg,rgba(16,22,24,.11),rgba(16,22,24,0) 110px);
  border-top-color:rgba(5,6,8,.10);
}

@media (max-width:900px){
  .proof-grid{grid-template-columns:1fr}
  .proof-portrait{transform:none;max-width:420px}
}

/* ============================================================
   7. FAQ — fill the column that held nothing
   `.faq-grid` is .7fr/1.1fr: the headline occupied the top of the
   left column and roughly 240px of it sat empty beneath.
   ============================================================ */
.faq-grid{align-items:start}
.faq-aside{
  margin-top:var(--space-md);
  padding:24px 24px 26px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
}
.faq-aside p{
  color:#9aa4a3;font-size:14px;line-height:1.65;margin:0 0 18px;
}
.faq-aside .button{width:100%}
.faq-aside small{
  display:block;margin-top:14px;
  color:#6f7a79;font-size:11px;line-height:1.5;
}
@media (max-width:900px){ .faq-aside{max-width:520px} }

/* ============================================================
   8. CONTACT — close the void under the phone card
   ============================================================ */
.contact-shell{align-items:start}
.contact-assurance{
  margin:var(--space-sm) 0 0;
  padding:var(--space-sm) 0 0;
  display:grid;gap:13px;
  border-top:1px solid var(--line);
  list-style:none;
  max-width:56ch;
}
/* Neither grid nor flex works here: both make the <strong> and the
   sentence after it separate boxes, so the line breaks into columns.
   The marker is taken out of flow instead and the text stays one run. */
.contact-assurance li{
  display:block;position:relative;padding-left:20px;
  color:#98a2a1;font-size:13.5px;line-height:1.62;
  list-style:none;
}
.contact-assurance li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 3px rgba(99,234,213,.14);
}
.contact-assurance strong{color:#d8dddc;font-weight:700}

/* ============================================================
   9. FOOTER — architecture instead of three centred lines
   ============================================================ */
.site-footer{padding:var(--space-lg) 0 110px}
.footer-grid{
  grid-template-columns:1.5fr 1fr 1.1fr 1fr;
  align-items:start;
  gap:var(--space-md) var(--space-lg);
}
/* The base stylesheet ships `.footer-grid>div{display:flex;
   justify-content:flex-end;gap:18px}` for the old single link row.
   Left in place it turns each new column into a right-aligned flex
   row, which overflowed the page horizontally. */
.footer-grid>.footer-brand,
.footer-grid>.footer-col{
  display:block;justify-content:normal;gap:0;min-width:0;
}
.footer-grid>.footer-legal{justify-content:flex-start;gap:8px 22px}
.footer-brand p{
  margin:16px 0 0;color:#788281;font-size:12.5px;line-height:1.7;
  max-width:34ch;text-align:left;
}
.footer-col h3{
  margin:0 0 14px;
  color:var(--teal);font:700 10px/1 JetBrains Mono,monospace;
  letter-spacing:.16em;text-transform:uppercase;
}
.footer-col a,.footer-col span{
  display:block;margin-bottom:9px;
  color:#9da6a5;text-decoration:none;font-size:12.5px;line-height:1.5;
}
.footer-col a{transition:color var(--dur-fast) var(--ease-out-expo)}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--paper)}
.footer-legal{
  grid-column:1/-1;
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  margin-top:var(--space-sm);padding-top:var(--space-sm);
  border-top:1px solid var(--line);
}
.footer-legal p{margin:0;color:#5f6968;font-size:11.5px;text-align:left}
.footer-legal a{color:#8b9493;text-decoration:none;font-size:11.5px}
.footer-legal a:hover{color:var(--paper)}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   10. BRICK CITY — spacing only, per scope.
   No structural, copy, colour or animation change. The beacon,
   both links and all six keyframes are untouched.
   ============================================================ */
.brick-city .brick-city-grid{align-items:center}

/* ============================================================
   11. DETAIL LAYER
   ============================================================ */

/* The reveal stagger at v1 lines ~143-148 was written for
   `.system-grid .reveal` and shipped with no `.reveal` in the
   markup — built, never called. lift_build.py adds the class; this
   makes the cascade land on the new asymmetric order. */
.system-grid .reveal:nth-child(1){transition-delay:0ms}
.system-grid .reveal:nth-child(2){transition-delay:70ms}
.system-grid .reveal:nth-child(3){transition-delay:140ms}
.system-grid .reveal:nth-child(4){transition-delay:210ms}
.system-grid .reveal:nth-child(5){transition-delay:280ms}

/* Hover personality per element type, rather than one shared curve. */
.faq-aside .button:hover{transform:translateY(-2px)}
.proof-portrait{transition:transform var(--dur-slow) var(--ease-out-expo),
                           box-shadow var(--dur-slow) var(--ease-out-expo)}
.proof-portrait:hover{
  transform:rotate(-.5deg) translateY(-3px);
  box-shadow:0 34px 78px rgba(5,6,8,.26),0 2px 8px rgba(5,6,8,.12);
}
summary{transition:color var(--dur-fast) var(--ease-out-expo)}
summary:hover{color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .proof-portrait,.proof-portrait:hover{transition:none;transform:none}
  .system-icon{transition:none}
}
/* ============================================================
   APEX LIFT — v5, "instrument panel"
   Answering two notes: the black reads as void rather than space,
   and the page should feel like an interface — Jarvis readouts,
   a Tron grid — without becoming a costume.

   Rule followed throughout: the effect must be legible at a glance
   and invisible under scrutiny. Nothing here exceeds 8% opacity on
   a field, nothing animates faster than 7s, and every motion has a
   reduced-motion escape. If a rule reads as "sci-fi decoration"
   rather than "precision instrument", it is not in this file.

   Rollback = delete everything below this banner.
   ============================================================ */

:root{
  --hud-line:rgba(99,234,213,.30);
  --hud-line-soft:rgba(99,234,213,.14);
  --hud-grid:rgba(120,240,220,.030);
  --hud-brass:rgba(221,185,109,.26);
}

/* ============================================================
   1. GIVE THE BLACK STRUCTURE
   The dark field was one flat value (#050608 / #080b0d) across
   ~7,000px with a single tonal break. Flat black reads as absence.
   A grid at 3% turns the same black into measured space — you do
   not consciously see it, you stop reading the page as empty.
   Masked on all four edges so it never tiles to the border.
   ============================================================ */
.section:not(.proof):not(.brick-city)::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(var(--hud-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--hud-grid) 1px,transparent 1px),
    /* a soft ground lift so consecutive dark sections are not the
       same value twice in a row */
    radial-gradient(120% 62% at 50% 0%,rgba(99,234,213,.045),transparent 62%);
  background-size:66px 66px,66px 66px,auto;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent),
                     linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent),
                     linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}

/* A lit rail where each dark section begins — the horizon line of
   an instrument, brightest at centre, gone at the edges. */
.section:not(.proof) + .section:not(.proof){
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,
      transparent,
      var(--hud-line-soft) 26%,
      var(--hud-line) 50%,
      var(--hud-brass) 68%,
      transparent) 1;
}

/* ============================================================
   2. HUD CORNER BRACKETS
   Drawn in background-image, not pseudo-elements — `::before` and
   `::after` on `.system-card` are already spoken for by v1 and the
   base sheet. Two opposite corners only: four is a sci-fi frame,
   two is a registration mark.
   ============================================================ */
.system-card,
.form-card,
.consult-panel,
.faq-aside,
.schedule-card{
  background-repeat:no-repeat;
}
/* NOTE: two layers below are restorations, not additions.
   The base sheet sets `background:linear-gradient(155deg,…)` on
   `.system-card`; v2 then set `background-image:radial-gradient(…)`,
   which REPLACED that wash rather than adding to it — the base card
   material has been missing since v2 shipped. Declaring a background-
   image here would drop v2's light in turn, so the stack restates all
   three deliberately: brackets, v2's interior light, base wash. */
.system-card{
  background-image:
    /* top-left bracket */
    linear-gradient(90deg,var(--hud-line) 0 15px,transparent 15px),
    linear-gradient(180deg,var(--hud-line) 0 15px,transparent 15px),
    /* bottom-right bracket */
    linear-gradient(270deg,var(--hud-line-soft) 0 15px,transparent 15px),
    linear-gradient(0deg,var(--hud-line-soft) 0 15px,transparent 15px),
    /* v2's interior light */
    radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.045),transparent 58%),
    /* the base card wash */
    linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  background-size:15px 1px,1px 15px,15px 1px,1px 15px,auto,auto;
  background-position:14px 14px,14px 14px,calc(100% - 14px) calc(100% - 14px),calc(100% - 14px) calc(100% - 14px),0 0,0 0;
  background-repeat:no-repeat;
  transition:background-color var(--dur-mid) var(--ease-out-expo),
             transform var(--dur-mid) var(--ease-out-expo),
             border-color var(--dur-mid) var(--ease-out-expo),
             box-shadow var(--dur-mid) var(--ease-out-expo);
}
.system-card:hover{--hud-line:rgba(99,234,213,.55);--hud-line-soft:rgba(99,234,213,.30)}

.form-card,.consult-panel{
  position:relative;
}
/* brackets for the two big panels, as their own layer so the
   existing panel gradients survive untouched */
.form-card::after,
.consult-panel::after{
  content:"";
  position:absolute;inset:16px;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--hud-line) 0 18px,transparent 18px),
    linear-gradient(180deg,var(--hud-line) 0 18px,transparent 18px),
    linear-gradient(270deg,var(--hud-line) 0 18px,transparent 18px),
    linear-gradient(0deg,var(--hud-line) 0 18px,transparent 18px);
  background-size:18px 1px,1px 18px,18px 1px,1px 18px;
  background-position:0 0,0 0,100% 100%,100% 100%;
  background-repeat:no-repeat;
  opacity:.62;
}

/* ============================================================
   3. THE SCAN
   One slow pass of light down the two panels that ask for an
   action. 7.5s, 3% peak, and it never repeats in phase with the
   orbit — so the page never looks like it is on a metronome.
   ============================================================ */
/* Driven by background-position, not translateY: a translate is measured
   against the band's own height, so a fixed 38px band only ever crossed
   the top ~45% of a 700px panel. Position is measured against the parent,
   so the sweep traverses any panel height correctly. */
@keyframes hudScan{
  0%   {background-position:0 -40%;opacity:0}
  12%  {opacity:1}
  88%  {opacity:1}
  100% {background-position:0 140%;opacity:0}
}
.form-card::before,
.consult-panel::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;z-index:1;
  background-image:linear-gradient(180deg,
      transparent,
      rgba(99,234,213,.040) 44%,
      rgba(140,250,232,.070) 50%,
      rgba(99,234,213,.040) 56%,
      transparent);
  background-size:100% 34%;
  background-repeat:no-repeat;
  animation:hudScan 7.5s var(--ease-out-quint) infinite;
}
.consult-panel::before{animation-duration:9.2s;animation-delay:1.4s}
.form-card{overflow:hidden}
.consult-panel{overflow:hidden}

/* ============================================================
   4. THE DIAGRAM AS AN INSTRUMENT
   The orbit panel had rings and pills. Registration ticks on all
   four edges and a centre reticle turn it from a drawing into a
   readout — the Tron note, at 20% strength.
   ============================================================ */
.shift-visual::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    /* edge registration ticks */
    linear-gradient(90deg,var(--hud-line) 0 22px,transparent 22px),
    linear-gradient(270deg,var(--hud-line) 0 22px,transparent 22px),
    linear-gradient(90deg,var(--hud-line) 0 22px,transparent 22px),
    linear-gradient(270deg,var(--hud-line) 0 22px,transparent 22px),
    /* centre reticle: two crossed hairlines, short */
    linear-gradient(90deg,transparent calc(50% - 44px),var(--hud-line-soft) calc(50% - 44px) calc(50% - 26px),transparent calc(50% - 26px)),
    linear-gradient(90deg,transparent calc(50% + 26px),var(--hud-line-soft) calc(50% + 26px) calc(50% + 44px),transparent calc(50% + 44px));
  background-size:22px 1px,22px 1px,22px 1px,22px 1px,100% 1px,100% 1px;
  background-position:
    18px 18px, calc(100% - 18px) 18px,
    18px calc(100% - 18px), calc(100% - 18px) calc(100% - 18px),
    0 50%, 0 50%;
  background-repeat:no-repeat;
}
/* the core label reads as a value, not a caption */
.shift-visual strong{
  letter-spacing:.14em;
  padding:14px 22px;
  border:1px solid rgba(99,234,213,.18);
  border-radius:4px;
  background:rgba(5,6,8,.55);
  backdrop-filter:blur(3px);
}

/* ============================================================
   5. TELEMETRY TYPE
   Every section label gets a trailing readout bar. Same family and
   tracking as the existing mono labels, so it reads as part of the
   system rather than an addition to it.
   ============================================================ */
.section-label,.eyebrow{position:relative}
.section:not(.proof) .section-label::after{
  content:"";
  display:inline-block;
  width:54px;height:1px;margin-left:14px;
  vertical-align:middle;
  background:linear-gradient(90deg,var(--hud-line),transparent);
}
/* the node pills become instrument tags */
.node{
  border-color:rgba(99,234,213,.22);
  box-shadow:0 0 0 1px rgba(5,6,8,.6),0 6px 18px rgba(0,0,0,.4);
}

/* ============================================================
   6. TRON EDGE
   A lit top edge on every panel, brighter on hover. This is the
   single most "Tron" move in the file and it is one pixel tall.
   ============================================================ */
.system-card,.form-card,.consult-panel,.faq-aside,.proof-portrait{
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(140,250,232,.10);
}
.system-card:hover{
  box-shadow:var(--sh-4),inset 0 1px 0 rgba(140,250,232,.30),0 0 0 1px rgba(99,234,213,.20);
}

/* the capability marquee gets rails top and bottom */
.signal-strip{
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--hud-line-soft) 30%,var(--hud-line) 50%,var(--hud-line-soft) 70%,transparent) 1;
}

/* ============================================================
   7. RESTRAINT VALVE
   Everything above is decoration on a lead-gen page. It all stops
   the moment the machine says stop, and none of it is load-bearing
   for legibility.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .form-card::before,.consult-panel::before{animation:none;opacity:0}
}
@media (max-width:760px){
  /* on a phone the grid and the brackets are noise at that scale */
  .section:not(.proof):not(.brick-city)::after{background-size:44px 44px,44px 44px,auto;opacity:.6}
  .form-card::after,.consult-panel::after{inset:10px}
  .section:not(.proof) .section-label::after{width:28px;margin-left:10px}
  .shift-visual::after{opacity:.7}

  /* Verified in a real 390px viewport: the base sheet's mobile rule
     `.footer-grid>div{flex-direction:column}` turns the legal row into a
     stretched column, and its contents centred while every other footer
     group stayed left. One ragged edge in an otherwise aligned stack. */
  .footer-grid>.footer-legal{
    align-items:flex-start;
    flex-direction:row;flex-wrap:wrap;gap:6px 18px;
  }
  .footer-legal p,.footer-legal a{text-align:left;align-self:flex-start}
  .footer-legal p{width:100%}
}
/* ============================================================
   APEX LIFT — v6, "the ground"
   A living landscape behind the page instead of flat black.

   The brief was explicit: soothing light, vivid cool colour, and
   it must NOT distract. So this layer is built to be felt and not
   looked at. The film sits at 22% behind a two-stop scrim, the
   HUD grid still reads on top of it, and every piece of body copy
   was contrast-checked against the brightest frame — not the
   average one. If a rule here makes text harder to read, it is
   wrong, however good it looks.

   Rollback = delete everything below this banner and remove the
   .kb-ambient element from the markup.
   ============================================================ */

.kb-ambient{
  position:fixed;
  inset:0;
  z-index:-3;              /* under content, under .section::after grid */
  overflow:hidden;
  pointer-events:none;
  background:#050608;      /* the floor if the video never arrives */
}
.kb-ambient video,
.kb-ambient img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 42%;   /* keeps the carved face off the very bottom */
  opacity:.38;
}
/* The scrim. Two gradients rather than one flat wash: the page is
   darkest where the copy columns run and opens up toward the edges,
   so the landscape is visible without ever sitting under a sentence. */
.kb-ambient::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(5,6,8,.88) 0%,
      rgba(5,6,8,.60) 26%,
      rgba(5,6,8,.56) 62%,
      rgba(5,6,8,.86) 100%),
    radial-gradient(120% 78% at 50% 46%,
      rgba(5,6,8,.50), rgba(5,6,8,.18) 62%, transparent 100%);
}

/* The hero carries its own film; the ambient layer must not glow
   through it, and the light Proof section paints over it anyway. */
.hero-cinema{position:relative;z-index:1;background:#050608}
.signal-strip{position:relative;background:rgba(8,11,13,.86)}

/* Sections become translucent so the landscape reads through them,
   but each keeps enough of its own ground to hold its type. */
.section:not(.proof){background-color:rgba(5,6,8,.42)}
.systems{background-image:linear-gradient(180deg,rgba(8,11,13,.86),rgba(11,16,19,.72) 55%,rgba(8,11,13,.86))}
.proof{position:relative;z-index:1}
.site-footer{position:relative;background:rgba(5,6,8,.88)}

/* ---- restraint ------------------------------------------------------
   On a phone this is a background video nobody asked to download, on a
   metered connection, behind a lead form. Poster only — and on reduced
   motion, poster only everywhere. */
@media (max-width:760px){
  .kb-ambient video{display:none}
  .kb-ambient img{opacity:.30}
}
@media (prefers-reduced-motion:reduce){
  .kb-ambient video{display:none}
}