:root{--bg:#07070a;--bg2:#0a0a0f;--panel:#101016;--text:#f1f0ec;--muted:#9a98a3;--line:rgba(255,255,255,.12);--soft:rgba(255,255,255,.065);--accent:#8d5cf6;--accent2:#bca7ff;--display:"Oswald",sans-serif;--sans:"Inter",sans-serif;--mono:"IBM Plex Mono",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:.5rem;left:.5rem;z-index:9999;transform:translateY(-150%);background:#fff;color:#000;padding:.7rem 1rem}.skip-link:focus{transform:translateY(0)}
.site-header{position:fixed;inset:0 0 auto;z-index:1000;height:72px;padding:0 clamp(1.25rem,3vw,3rem);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(7,7,10,.9),transparent);backdrop-filter:blur(12px);transition:transform .35s ease}.site-header.is-hidden{transform:translateY(-100%)}.brand{font-weight:600;letter-spacing:-.045em;font-size:1.1rem}.desktop-nav{display:flex;gap:clamp(1.25rem,2.7vw,3rem);align-items:center;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em}.desktop-nav a{color:#d7d4de}.desktop-nav a:hover{color:var(--accent2)}.contact-pill{border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.16);border-radius:999px;padding:.58rem .88rem;text-transform:uppercase;letter-spacing:.08em;font:500 .7rem var(--mono);display:flex;align-items:center;gap:.55rem;cursor:pointer}.contact-dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--accent2);box-shadow:0 0 14px var(--accent)}.menu-toggle{display:none;background:none;border:0;width:44px;height:44px}.menu-toggle span:not(.sr-only){display:block;width:22px;height:1px;background:#fff;margin:6px auto}.mobile-menu{position:fixed;inset:72px 0 0;z-index:999;padding:2rem;background:rgba(7,7,10,.98);backdrop-filter:blur(18px);flex-direction:column;gap:1.25rem;font:500 2rem var(--display);text-transform:uppercase}.mobile-menu:not([hidden]){display:flex}.mobile-menu button{margin-top:1rem;background:none;border:1px solid var(--line);padding:1rem;text-align:left}
.section-pad{padding-inline:clamp(1.25rem,4vw,4rem)}.section-label,.chapter-num{font:500 .67rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#aaa7b4}
.hero{min-height:100svh;position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--soft) 1px,transparent 1px),linear-gradient(90deg,var(--soft) 1px,transparent 1px);background-size:7.5vw 7.5vw;mask-image:linear-gradient(to bottom,#000 12%,transparent 95%);opacity:.28}.hero-grid:after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 68% 36%,rgba(141,92,246,.17),transparent 28%)}.hero-noise{position:absolute;inset:0;opacity:.07;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.hero-copy{position:relative;z-index:3;padding:8rem 0 4rem clamp(1.4rem,3vw,3.3rem);max-width:800px}.eyebrow{display:flex;gap:.75rem;align-items:center;color:var(--accent2);font:500 .65rem var(--mono);margin-bottom:1.15rem}.eyebrow-line{width:130px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}.hero-kicker{margin:0 0 .1rem;font:500 clamp(1.15rem,2vw,2rem) var(--display);text-transform:uppercase;letter-spacing:.03em}.hero h1{margin:0;font:600 clamp(6rem,14vw,13rem)/.82 var(--display);letter-spacing:-.055em;text-transform:uppercase;white-space:nowrap}.hero-identity{margin-top:1.6rem}.hero-name{margin:0;font:500 clamp(1rem,2vw,1.5rem) var(--mono);letter-spacing:.28em}.hero-name span{color:var(--accent2)}.hero-role{color:#bbb8c4;font:400 .78rem var(--mono)}.hero-summary{width:min(350px,85%);margin-top:2rem;color:#c2c0ca;font:400 .78rem/1.7 var(--mono)}.scroll-cue{display:flex;gap:.75rem;align-items:center;margin-top:2rem;color:#aaa7b4;font:500 .63rem var(--mono);text-transform:uppercase;letter-spacing:.08em}.scroll-cue span{color:var(--accent2)}.hero-portrait{position:absolute;inset:0 0 0 44%;z-index:1;overflow:hidden}.portrait-main,.portrait-ghost,.portrait-shadow{position:absolute;background-image:linear-gradient(to bottom,transparent 66%,var(--bg) 100%),linear-gradient(90deg,var(--bg) 0%,transparent 18%),url('assets/errol-portrait.png');background-size:cover;background-position:center 18%}.portrait-main{inset:2% -1% -3% 3%;filter:grayscale(1) contrast(1.1) brightness(.78)}.portrait-ghost{inset:4% 40% 1% -17%;opacity:.26;filter:grayscale(1) contrast(1.3) brightness(.5) sepia(.2) hue-rotate(220deg) saturate(2.5);transform:scaleX(-1)}.portrait-shadow{inset:4% -5% -1% 12%;opacity:.18;filter:grayscale(1) blur(8px) brightness(.55);transform:translateX(35px) scale(1.02)}.portrait-ghost:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(141,92,246,.42));mix-blend-mode:screen}.portrait-orbit{position:absolute;width:72vw;aspect-ratio:1;border:1px solid rgba(255,255,255,.075);border-radius:50%;right:-36vw;top:6%}.portrait-orbit:before,.portrait-orbit:after{content:"";position:absolute;inset:9%;border:1px solid rgba(255,255,255,.05);border-radius:50%}.portrait-orbit:after{inset:19%}.portrait-crosshair{position:absolute;right:19%;top:47%;width:30px;height:30px}.portrait-crosshair:before,.portrait-crosshair:after{content:"";position:absolute;background:rgba(255,255,255,.22)}.portrait-crosshair:before{width:100%;height:1px;top:50%}.portrait-crosshair:after{height:100%;width:1px;left:50%}.hero-side-note{position:absolute;z-index:3;right:5%;top:36%;color:#a7a4af;font:500 .62rem/1.8 var(--mono);letter-spacing:.05em}
.work-shell{background:var(--bg)}.work-intro{min-height:38vh;padding-top:6rem;padding-bottom:4rem;display:flex;justify-content:space-between;align-items:end;gap:2rem;border-bottom:1px solid var(--line)}.work-intro h2,.thoughts h2{margin:.7rem 0 0;font:500 clamp(2.7rem,5.1vw,5.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.03em}.work-intro>p{max-width:430px;color:var(--muted);font:400 .85rem/1.7 var(--mono)}.work-pin{height:100svh;position:relative;overflow:hidden}.work-progress{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.06);z-index:20}.work-progress span{display:block;width:33.333%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 18px rgba(141,92,246,.4)}.work-slides{height:100%;display:flex;will-change:transform}.project{width:100vw;min-width:100vw;height:100svh;padding:clamp(5.8rem,9vh,7.4rem) clamp(1.25rem,4vw,4rem) clamp(2rem,4vh,3rem);display:grid;grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);grid-template-rows:auto 1fr;gap:2rem;position:relative;overflow:hidden;border-right:1px solid var(--line);background:#08080b}.project:nth-child(2){background:#0b0910}.project:nth-child(3){background:#08090d}.project:before{content:"";position:absolute;inset:0;background:linear-gradient(var(--soft) 1px,transparent 1px),linear-gradient(90deg,var(--soft) 1px,transparent 1px);background-size:9vw 9vw;opacity:.2;mask-image:linear-gradient(#000,transparent 94%)}.project-number{grid-column:1/-1;position:relative;z-index:2;font:500 .7rem var(--mono);color:var(--accent2);letter-spacing:.08em}.project-copy{align-self:end;padding-bottom:5vh;position:relative;z-index:3;max-width:620px}.project-label{margin:0 0 1rem;font:500 .72rem var(--mono);color:var(--accent2);text-transform:uppercase;letter-spacing:.1em}.project h3{margin:0;font:500 clamp(3rem,5.2vw,6rem)/.97 var(--display);text-transform:uppercase;letter-spacing:-.035em}.project-copy>p:not(.project-label){color:#aaa7b4;font:400 .82rem/1.7 var(--mono);max-width:540px;margin:1.3rem 0}.project-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.3rem}.project-tags span{border:1px solid rgba(255,255,255,.12);padding:.42rem .55rem;font:500 .56rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#aaa7b4}.project-copy a{font:500 .67rem var(--mono);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:.35rem}.project-visual{position:relative;align-self:center;justify-self:stretch;min-height:62vh;perspective:1200px;z-index:2}.project-glow{position:absolute;width:52%;aspect-ratio:1;border-radius:50%;right:2%;top:22%;background:rgba(141,92,246,.15);filter:blur(80px)}.glass-shell{position:absolute;inset:8% 2% 8% 6%;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:linear-gradient(145deg,rgba(22,25,32,.96),rgba(7,8,12,.84));box-shadow:0 55px 100px rgba(0,0,0,.55);transform:rotateY(-9deg) rotateX(4deg);overflow:hidden}.ui-topline{height:44px;border-bottom:1px solid var(--line);display:flex;gap:7px;align-items:center;padding:0 16px}.ui-topline i{width:6px;height:6px;border-radius:50%;background:#777}.ui-eyebrow{font:500 .55rem var(--mono);color:var(--accent2);padding:7% 7% 0}.ui-title{font:600 clamp(2rem,3.6vw,4rem) var(--display);padding:1% 7% 3%;text-transform:uppercase}.kin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 7%}.kin-stats span{height:74px;border:1px solid var(--line);background:linear-gradient(140deg,rgba(255,255,255,.06),rgba(141,92,246,.05));border-radius:10px}.kin-strip{height:10%;margin:3% 7%;border-radius:9px;background:linear-gradient(90deg,rgba(141,92,246,.35),rgba(255,255,255,.05))}.kin-card{position:absolute;right:6%;bottom:7%;width:42%;height:27%;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(7,7,10,.72);box-shadow:0 30px 70px rgba(0,0,0,.35)}.kin-card.small{right:51%;width:27%;height:20%;bottom:10%}.birthday-visual{display:grid;place-items:center}.bd-window{position:absolute;width:64%;height:54%;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:linear-gradient(145deg,rgba(30,21,44,.9),rgba(9,8,13,.95));box-shadow:0 50px 90px rgba(0,0,0,.45)}.bd-window.back{transform:translate(-12%,-10%) rotate(-5deg);opacity:.5}.bd-window.mid{transform:translate(13%,5%) rotate(4deg);opacity:.7}.bd-phone{position:relative;z-index:3;width:34%;min-width:230px;height:72%;border-radius:32px;border:1px solid rgba(255,255,255,.17);background:linear-gradient(180deg,#15111d,#0b0910);box-shadow:0 45px 90px rgba(0,0,0,.55);padding:12% 8%}.bd-face{width:70px;height:70px;border-radius:50%;margin:0 auto 2rem;background:linear-gradient(135deg,#f1b6a4,#764fd4);box-shadow:0 0 40px rgba(141,92,246,.24)}.bd-line{height:10px;border-radius:999px;background:rgba(255,255,255,.12);margin:12px 0}.bd-line.short{width:62%}.bd-cta{height:42px;border-radius:9px;background:linear-gradient(90deg,#7f4ce7,#b86dea);margin-top:25px}.lobe-visual{display:grid;place-items:center}.lobe-shell{position:relative;width:90%;height:68%;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#0d0e14;box-shadow:0 50px 100px rgba(0,0,0,.5);display:grid;grid-template-columns:18% 1fr;overflow:hidden;transform:rotateY(-7deg) rotateX(2deg)}.lobe-nav{border-right:1px solid var(--line);background:linear-gradient(180deg,#11121a,#090a0f)}.lobe-stage{position:relative;background:radial-gradient(circle at 58% 45%,rgba(80,100,255,.16),transparent 30%)}.lobe-stage i{position:absolute;width:64px;height:64px;border:1px solid rgba(141,92,246,.42);border-radius:12px}.lobe-stage i:nth-child(1){left:16%;top:20%}.lobe-stage i:nth-child(2){right:18%;top:28%}.lobe-stage i:nth-child(3){left:38%;bottom:14%}.lobe-stage i:nth-child(4){right:32%;bottom:28%}.lobe-modal{position:absolute;right:9%;bottom:10%;padding:1rem 1.2rem;border:1px solid rgba(141,92,246,.42);background:rgba(12,12,18,.84);font:500 .66rem var(--mono);letter-spacing:.08em;color:var(--accent2)}
.statement{border-bottom:1px solid var(--line);overflow:hidden;background:#09090d}.statement-inner{min-height:36vh;padding:4rem clamp(1.25rem,4vw,4rem);display:grid;grid-template-columns:1.25fr .6fr .9fr;gap:3rem;align-items:center;position:relative}.statement h2{margin:.6rem 0 0;font:600 clamp(3rem,6.2vw,6.8rem)/.93 var(--display);text-transform:uppercase;letter-spacing:-.035em}.statement p{color:#aaa7b4;font:400 .8rem/1.7 var(--mono);max-width:260px}.orbital-field{position:relative;height:240px}.orbital-field span{position:absolute;inset:50% auto auto 50%;width:88%;height:24%;transform:translate(-50%,-50%);border:1px solid rgba(141,92,246,.2);border-radius:50%}.orbital-field span:nth-child(2){width:68%;height:18%}.orbital-field span:nth-child(3){width:48%;height:12%}.orbital-field span:nth-child(4){width:28%;height:7%}.orbital-field i{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 24px var(--accent)}
.systems{height:620vh;position:relative;background:#07070a}.systems-stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(300px,.82fr) minmax(480px,1.18fr);grid-template-rows:1fr auto;gap:2rem;padding:clamp(5.5rem,9vh,7rem) clamp(1.25rem,4vw,4rem) 1.7rem;overflow:hidden;border-bottom:1px solid var(--line)}.systems-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 46%,rgba(141,92,246,.09),transparent 30%),linear-gradient(var(--soft) 1px,transparent 1px),linear-gradient(90deg,var(--soft) 1px,transparent 1px);background-size:auto,8vw 8vw,8vw 8vw;opacity:.45;mask-image:linear-gradient(#000,transparent 96%)}.systems-copy{position:relative;z-index:4;align-self:center}.systems-copy h2{margin:.8rem 0 2rem;font:500 clamp(3.2rem,6vw,6.5rem)/.96 var(--display);text-transform:uppercase;letter-spacing:-.038em}.system-step-copy span{font:500 .6rem var(--mono);color:var(--accent2);letter-spacing:.08em}.system-step-copy p{color:#cac7d0;font:400 .86rem/1.75 var(--mono);min-height:4.6rem;max-width:350px}.systems-progress{width:min(350px,80%);height:1px;background:rgba(255,255,255,.1);margin-top:1.6rem}.systems-progress span{display:block;width:16.67%;height:100%;background:var(--accent2);box-shadow:0 0 12px var(--accent)}.systems-visual{position:relative;z-index:2;align-self:center;height:min(68vh,700px);display:grid;place-items:center;perspective:1400px}.system-scene{position:relative;width:min(560px,80%);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(57deg) rotateZ(-35deg)}.scene-panel{position:absolute;inset:18%;border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(141,92,246,.03));box-shadow:0 30px 75px rgba(0,0,0,.28);backdrop-filter:blur(6px);transform-style:preserve-3d;transition:opacity .25s ease}.panel-interface{transform:translateZ(30px)}.panel-logic{transform:translateZ(-26px)}.panel-flow{transform:translateZ(-82px)}.panel-data{transform:translateZ(-138px)}.panel-auto{transform:translateZ(-194px)}.panel-infra{transform:translateZ(-250px)}.panel-interface span{position:absolute;left:10%;right:10%;height:10%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}.panel-interface span:nth-child(1){top:16%}.panel-interface span:nth-child(2){top:40%;width:55%}.panel-interface span:nth-child(3){bottom:15%;width:72%}.panel-logic i,.panel-data em{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--accent2);box-shadow:0 0 18px rgba(141,92,246,.38)}.panel-logic i:nth-child(1){left:18%;top:20%}.panel-logic i:nth-child(2){right:18%;top:22%}.panel-logic i:nth-child(3){left:35%;bottom:18%}.panel-logic i:nth-child(4){right:30%;bottom:24%}.panel-flow b{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--accent2),transparent);width:64%;left:18%;top:25%}.panel-flow b:nth-child(2){top:39%;transform:rotate(17deg)}.panel-flow b:nth-child(3){top:53%;transform:rotate(-12deg)}.panel-flow b:nth-child(4){top:66%;width:48%}.panel-flow b:nth-child(5){top:78%;left:33%;width:34%}.panel-data em:nth-child(1){left:15%;top:20%}.panel-data em:nth-child(2){left:42%;top:14%}.panel-data em:nth-child(3){right:14%;top:34%}.panel-data em:nth-child(4){right:27%;bottom:18%}.panel-data em:nth-child(5){left:34%;bottom:15%}.panel-data em:nth-child(6){left:16%;bottom:36%}.panel-auto u{position:absolute;border:1px solid rgba(188,167,255,.38);width:25%;height:18%;text-decoration:none}.panel-auto u:nth-child(1){left:16%;top:18%}.panel-auto u:nth-child(2){right:17%;top:26%}.panel-auto u:nth-child(3){left:31%;bottom:16%}.panel-auto u:nth-child(4){right:24%;bottom:26%}.panel-infra strong{position:absolute;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04)}.panel-infra strong:nth-child(1){inset:14% 56% 55% 14%}.panel-infra strong:nth-child(2){inset:45% 15% 16% 48%}.panel-infra strong:nth-child(3){inset:22% 22% 47% 51%}.scene-core{position:absolute;inset:43%;border-radius:50%;background:var(--accent);box-shadow:0 0 55px rgba(141,92,246,.7);transform:translateZ(55px)}.scene-orbit{position:absolute;width:82%;aspect-ratio:1;border:1px solid rgba(141,92,246,.08);border-radius:50%}.scene-orbit:before,.scene-orbit:after{content:"";position:absolute;inset:12%;border:1px solid rgba(255,255,255,.06);border-radius:50%}.scene-orbit:after{inset:26%}.scene-labels{position:absolute;inset:0;font:500 .56rem var(--mono);color:#6f6c77;letter-spacing:.08em}.scene-labels span{position:absolute}.scene-labels span:nth-child(1){left:7%;top:18%}.scene-labels span:nth-child(2){right:7%;top:22%}.scene-labels span:nth-child(3){left:5%;bottom:25%}.scene-labels span:nth-child(4){right:8%;bottom:20%}.scene-labels span:nth-child(5){left:42%;top:7%}.scene-labels span:nth-child(6){left:45%;bottom:7%}.systems-index{grid-column:1/-1;position:relative;z-index:4;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line)}.system-step{appearance:none;background:none;border:0;border-right:1px solid var(--line);padding:1rem .75rem;text-align:left;cursor:pointer;color:#777481;transition:color .25s ease,background .25s ease}.system-step:last-child{border-right:0}.system-step span{display:block;font:500 .58rem var(--mono);margin-bottom:.35rem}.system-step strong{font:500 .67rem var(--mono);text-transform:uppercase;letter-spacing:.07em}.system-step.is-active{color:#fff;background:rgba(141,92,246,.08)}
.statement-next{background:linear-gradient(180deg,#09090d,#0b0910)}.wire-cubes{position:relative;height:240px;min-width:320px}.wire-cubes i{position:absolute;width:90px;height:90px;border:1px solid rgba(141,92,246,.28);transform:rotate(30deg) skewY(-15deg)}.wire-cubes i:nth-child(1){left:5%;top:35%}.wire-cubes i:nth-child(2){left:24%;top:10%}.wire-cubes i:nth-child(3){left:43%;top:38%}.wire-cubes i:nth-child(4){left:62%;top:2%}.wire-cubes i:nth-child(5){left:74%;top:45%}
.thoughts{padding-top:6rem;padding-bottom:4rem;border-bottom:1px solid var(--line)}.thoughts-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3rem}.outline-link{display:inline-flex;align-items:center;border:1px solid var(--line);padding:.85rem 1rem;font:500 .65rem var(--mono);text-transform:uppercase;letter-spacing:.08em}.thoughts-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.thought-card{min-height:330px;padding:2rem;border-right:1px solid var(--line);position:relative;overflow:hidden}.thought-card:last-child{border-right:0}.thought-date{font:500 .6rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#777481}.thought-card h3{font:500 clamp(1.5rem,2.4vw,2.6rem)/1.05 var(--display);text-transform:uppercase;margin:2rem 0 1rem;max-width:82%}.thought-card>p:not(.thought-date){color:#9996a2;font:400 .75rem/1.6 var(--mono);max-width:82%}.thought-card a{position:absolute;left:2rem;bottom:2rem;font:500 .65rem var(--mono);text-transform:uppercase;letter-spacing:.08em}.thought-art{position:absolute;right:-18%;top:-5%;width:68%;aspect-ratio:1;border-radius:48% 52% 58% 42%;background:repeating-radial-gradient(ellipse at center,rgba(141,92,246,.2) 0 1px,transparent 2px 11px);transform:rotate(-18deg)}.about-line{display:grid;grid-template-columns:.25fr 1fr auto;gap:2rem;align-items:center;padding:2.3rem 0 0;margin-top:2.3rem;border-top:1px solid var(--line);font:400 .76rem/1.7 var(--mono);color:#aaa7b4}.about-line>span{font:500 .6rem var(--mono);color:var(--accent2);letter-spacing:.08em}.about-line p{max-width:780px;margin:0}.about-line a{font:500 .63rem var(--mono);text-transform:uppercase;letter-spacing:.07em}
.final-cta{min-height:72vh;position:relative;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}.final-cta:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 79% 50%,rgba(141,92,246,.12),transparent 28%)}.final-cta-inner{position:relative;z-index:2;width:100%;padding:5rem clamp(1.25rem,4vw,4rem);display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:end}.final-cta h2{margin:0;font:600 clamp(5rem,10vw,11rem)/.8 var(--display);text-transform:uppercase;letter-spacing:-.055em}.final-cta h2 span{color:var(--accent2)}.cta-copy{padding-bottom:1rem}.cta-copy p{color:#c8c5cf;font:400 .95rem/1.7 var(--mono);margin-bottom:1.5rem}.cta-button{border:1px solid rgba(141,92,246,.55);background:linear-gradient(90deg,rgba(141,92,246,.16),rgba(141,92,246,.05));padding:1rem 1.2rem;font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.cta-orbit{position:absolute;right:-8vw;top:50%;width:46vw;aspect-ratio:1;transform:translateY(-50%)}.cta-orbit span{position:absolute;inset:0;border:1px solid rgba(141,92,246,.13);border-radius:50%}.cta-orbit span:nth-child(2){inset:15%}.cta-orbit span:nth-child(3){inset:32%}.cta-orbit i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent2);left:50%;top:50%;box-shadow:0 0 22px var(--accent)}
.site-footer{min-height:100px;padding:1.4rem clamp(1.25rem,4vw,4rem);display:grid;grid-template-columns:auto 1fr auto auto auto;gap:2rem;align-items:center;font:500 .58rem var(--mono);text-transform:uppercase;letter-spacing:.07em;color:#777481}.site-footer nav,.socials{display:flex;gap:1.4rem}.site-footer a:hover{color:var(--accent2)}.back-top{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.contact-dialog{width:min(760px,94vw);border:1px solid var(--line);padding:0;background:#0b0b10;color:var(--text);box-shadow:0 40px 120px rgba(0,0,0,.7)}.contact-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}.contact-panel{padding:clamp(1.5rem,4vw,3rem);display:grid;gap:1.2rem;position:relative}.contact-panel h2{font:500 clamp(2.8rem,6vw,5.5rem)/.95 var(--display);text-transform:uppercase;margin:.3rem 0 1rem}.close-contact{position:absolute;right:1rem;top:1rem;width:40px;height:40px;border:1px solid var(--line);background:none;border-radius:50%;font-size:1.5rem;cursor:pointer}.contact-options{display:flex;flex-wrap:wrap;gap:.6rem}.contact-options button{background:none;border:1px solid var(--line);padding:.7rem .85rem;font:500 .65rem var(--mono);cursor:pointer}.contact-panel label{display:grid;gap:.45rem;font:500 .63rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#aaa7b4}.contact-panel input,.contact-panel textarea{width:100%;background:#08080b;color:#fff;border:1px solid var(--line);padding:.9rem;outline:none}.contact-panel input:focus,.contact-panel textarea:focus{border-color:var(--accent)}.form-note{font:400 .6rem/1.5 var(--mono);color:#706d78}
@media(max-width:900px){.desktop-nav{display:none}.menu-toggle{display:block}.hero{grid-template-columns:1fr;min-height:900px}.hero-copy{padding-top:8rem;padding-right:1.25rem;align-self:start}.hero h1{font-size:clamp(5rem,23vw,10rem)}.hero-portrait{inset:36% 0 0 10%;opacity:.78}.hero-side-note{display:none}.work-intro{min-height:auto;padding-top:4rem;display:grid}.work-pin{height:auto;overflow:visible}.work-slides{display:block}.project{width:auto;min-width:0;height:auto;min-height:100svh;grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.project-visual{min-height:46vh;grid-row:2}.project-copy{grid-row:3;align-self:start}.statement-inner{grid-template-columns:1fr;min-height:auto}.orbital-field,.wire-cubes{height:180px}.systems{height:auto}.systems-stage{position:relative;height:auto;min-height:100svh;grid-template-columns:1fr;grid-template-rows:auto auto auto}.systems-visual{height:500px}.systems-index{grid-template-columns:repeat(2,1fr)}.thoughts-heading{align-items:start;flex-direction:column}.thoughts-grid{grid-template-columns:1fr}.thought-card{border-right:0;border-bottom:1px solid var(--line)}.about-line{grid-template-columns:1fr}.final-cta-inner{grid-template-columns:1fr;align-items:start}.final-cta{min-height:80svh}.cta-orbit{width:90vw;right:-35vw;opacity:.7}.site-footer{grid-template-columns:1fr 1fr}.site-footer nav,.socials{flex-wrap:wrap}.back-top{justify-self:end}}
@media(max-width:560px){.site-header{height:64px}.mobile-menu{inset:64px 0 0}.hero{min-height:820px}.hero-copy{padding-left:1.15rem}.hero-name{letter-spacing:.15em}.hero-summary{width:92%}.portrait-ghost{display:none}.hero-portrait{inset:41% -12% 0 8%}.work-intro h2,.thoughts h2{font-size:clamp(2.4rem,12vw,4rem)}.project{padding-left:1.15rem;padding-right:1.15rem}.project h3{font-size:clamp(2.7rem,13vw,4.5rem)}.project-visual{min-height:360px}.bd-phone{min-width:210px;width:52%;height:75%}.statement h2{font-size:clamp(3rem,14vw,5.2rem)}.statement-inner{padding-left:1.15rem;padding-right:1.15rem}.orbital-field,.wire-cubes{min-width:0;width:100%}.systems-stage{padding-left:1.15rem;padding-right:1.15rem}.systems-copy h2{font-size:clamp(3rem,14vw,5rem)}.systems-visual{height:410px}.system-scene{width:90%}.systems-index{grid-template-columns:1fr}.system-step{border-right:0;border-bottom:1px solid var(--line)}.thoughts{padding-left:1.15rem;padding-right:1.15rem}.final-cta-inner{padding-left:1.15rem;padding-right:1.15rem}.final-cta h2{font-size:clamp(4.4rem,21vw,7rem)}.site-footer{padding-left:1.15rem;padding-right:1.15rem;grid-template-columns:1fr}.back-top{justify-self:start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.systems{height:auto}.systems-stage{position:relative!important}.work-pin{height:auto!important}.work-slides{display:block!important;transform:none!important}}

/* Build 3 — art-directed portrait system */
.hero{isolation:isolate;background:
  radial-gradient(circle at 71% 26%,rgba(126,74,255,.16),transparent 27%),
  radial-gradient(circle at 58% 62%,rgba(77,48,133,.08),transparent 34%),
  #07070a}
.hero-copy{max-width:760px}
.hero-portrait{inset:0 0 0 37%;overflow:hidden;pointer-events:none}
.portrait-ambient{position:absolute;inset:-8% -10% -10% -3%;background:
  linear-gradient(90deg,rgba(7,7,10,.98) 0%,rgba(7,7,10,.72) 18%,rgba(7,7,10,.13) 48%,rgba(7,7,10,.22) 100%),
  radial-gradient(circle at 60% 44%,rgba(144,89,255,.18),transparent 31%);z-index:0}
.portrait-main,.portrait-ghost{position:absolute;display:block;max-width:none;object-fit:cover;user-select:none;-webkit-user-drag:none}
.portrait-main{z-index:2;right:-2%;top:0;width:77%;height:108%;object-position:44% 42%;filter:grayscale(.88) saturate(.38) contrast(1.12) brightness(.72);mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.48) 13%,#000 28%,#000 78%,rgba(0,0,0,.88) 92%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.48) 13%,#000 28%,#000 78%,rgba(0,0,0,.88) 92%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);mask-composite:intersect}
.portrait-ghost{z-index:1;left:2%;top:7%;width:54%;height:91%;object-position:56% 35%;opacity:.30;filter:grayscale(1) contrast(1.16) brightness(.53) sepia(.15) hue-rotate(220deg) saturate(3.5);transform:scaleX(-1) rotate(-1.5deg);mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse at 56% 43%,#000 0%,rgba(0,0,0,.96) 48%,transparent 78%);mask-image:radial-gradient(ellipse at 56% 43%,#000 0%,rgba(0,0,0,.96) 48%,transparent 78%)}
.portrait-shadow{z-index:3;inset:auto 0 0 0;height:33%;background:linear-gradient(to top,#07070a 2%,rgba(7,7,10,.91) 23%,rgba(7,7,10,.48) 55%,transparent 100%);filter:none;opacity:1;transform:none}
.portrait-main:after,.portrait-ghost:after{display:none}
.hero-side-note{right:4.2%;top:34%;z-index:5;color:#8f8a99}
.portrait-orbit{z-index:4;right:-35vw;top:5%}.portrait-crosshair{z-index:5;right:15.5%;top:48%}
.hero:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(7,7,10,.92) 0%,rgba(7,7,10,.60) 33%,transparent 51%,transparent 80%,rgba(7,7,10,.18) 100%)}
.hero-copy{z-index:6}.hero-grid,.hero-noise{z-index:3}

.thoughts-heading{display:grid;grid-template-columns:1fr minmax(220px,30vw) auto;align-items:end;gap:clamp(1.5rem,3vw,3rem)}
.thoughts-heading-copy{align-self:end}.thoughts-portrait{margin:0;height:230px;position:relative;overflow:hidden;border-left:1px solid var(--line);border-right:1px solid var(--line);background:#0b0b10}
.thoughts-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,10,.65),transparent 25%,transparent 74%,rgba(7,7,10,.75)),linear-gradient(to top,rgba(7,7,10,.65),transparent 52%);pointer-events:none}
.thoughts-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:grayscale(.35) saturate(.65) contrast(1.05) brightness(.72);transform:scale(1.04)}
.about-line{grid-template-columns:90px .17fr 1fr auto}.about-thumb{width:90px;height:90px;margin:0;overflow:hidden;border:1px solid var(--line);background:#0b0b10}.about-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(.75) contrast(1.08) brightness(.72)}

@media(max-width:1100px) and (min-width:901px){.hero-portrait{inset:0 -10% 0 40%}.portrait-main{width:84%}.portrait-ghost{left:-4%;width:58%}.hero h1{font-size:clamp(6rem,13vw,11rem)}.thoughts-heading{grid-template-columns:1fr 280px}.thoughts-heading .outline-link{grid-column:1/-1;justify-self:start}.about-line{grid-template-columns:80px .2fr 1fr}.about-line a{grid-column:3}}
@media(max-width:900px){.hero{min-height:920px}.hero-portrait{inset:30% -28% -3% 1%;opacity:1}.portrait-main{right:0;top:6%;width:86%;height:100%;object-position:48% 28%;filter:grayscale(.82) saturate(.42) contrast(1.08) brightness(.62)}.portrait-ghost{left:3%;top:0;width:54%;height:77%;opacity:.25}.portrait-shadow{height:48%}.hero:after{background:linear-gradient(to bottom,rgba(7,7,10,.12) 0%,rgba(7,7,10,.05) 40%,rgba(7,7,10,.72) 69%,#07070a 100%),linear-gradient(90deg,rgba(7,7,10,.9),transparent 48%)}.thoughts-heading{grid-template-columns:1fr}.thoughts-portrait{width:100%;height:320px}.thoughts-heading .outline-link{justify-self:start}.about-line{grid-template-columns:80px 1fr}.about-line p,.about-line a{grid-column:2}}
@media(max-width:560px){.hero{min-height:860px}.hero-copy{padding-top:7.5rem}.hero-portrait{inset:35% -42% -5% 0}.portrait-main{width:100%;height:94%;object-position:46% 25%}.portrait-ghost{display:block;left:-1%;top:-3%;width:65%;height:72%;opacity:.18}.hero:after{background:linear-gradient(to bottom,rgba(7,7,10,.04) 0%,rgba(7,7,10,.09) 44%,rgba(7,7,10,.82) 72%,#07070a 100%),linear-gradient(90deg,rgba(7,7,10,.82),transparent 54%)}.thoughts-portrait{height:250px}.about-line{grid-template-columns:64px 1fr}.about-thumb{width:64px;height:64px}}

/* Build 6 — stabilized editorial hero. The hero no longer pins or translates its copy,
   so the composition remains intact while the supporting language reacts to natural scroll. */
:root{--poppins:'Poppins',sans-serif;--lora:'Lora',serif}
.hero{min-height:100svh;height:auto;overflow:hidden;--hero-field-alpha:.15}
.hero-copy{max-width:780px}
.hero-summary{width:min(430px,88%);margin-top:1.9rem;color:#d7d4df;font-family:var(--poppins);line-height:1.18}
.hero-summary-prefix,.hero-word{font-family:var(--poppins);font-size:clamp(1.45rem,2.05vw,2rem);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin:0}
.hero-summary-prefix{color:#f0eef4;margin-bottom:.14rem}
.hero-word-stage{position:relative;height:clamp(2.05rem,2.9vw,2.8rem);overflow:hidden;margin:0 0 .65rem;isolation:isolate}
.hero-word{position:absolute;left:0;top:0;display:block;white-space:nowrap;color:#f0eef4;opacity:0;transform:translateY(72%);filter:blur(4px);will-change:transform,opacity,filter}
.hero-word.is-active{opacity:1;transform:translateY(0);filter:blur(0)}
.hero-summary-tail{margin:.15rem 0 0;color:#aaa6b3;font:400 .74rem/1.65 var(--mono);max-width:330px}
.scroll-cue{display:none!important}
/* Preserve the accidental upside-down echo that became part of the art direction. */
.portrait-ghost{transform:rotate(180deg) scaleX(-1)!important;transform-origin:50% 50%;opacity:.22;mix-blend-mode:screen;filter:grayscale(1) contrast(1.17) brightness(.48) sepia(.18) hue-rotate(220deg) saturate(3.4)}
/* No positional GSAP transforms are applied to portrait layers in this build. */
.hero-grid:after{opacity:var(--hero-field-alpha);transition:opacity .45s ease}
.hero[data-hero-state="products"] .portrait-orbit{opacity:.42}
.hero[data-hero-state="systems"] .portrait-orbit{opacity:.72;border-color:rgba(167,116,255,.15)}
.hero[data-hero-state="experiences"] .portrait-orbit{opacity:.34}
.hero[data-hero-state="products"] .portrait-crosshair{opacity:.45}
.hero[data-hero-state="systems"] .portrait-crosshair{opacity:.95}
.hero[data-hero-state="experiences"] .portrait-crosshair{opacity:.25}
.hero[data-hero-state="systems"] .hero-grid{opacity:.40}
.hero[data-hero-state="experiences"] .hero-grid{opacity:.20}
.hero[data-hero-state="systems"] .portrait-ghost{opacity:.31}
.hero[data-hero-state="experiences"] .portrait-ghost{opacity:.16}
@media(max-width:900px){.hero-summary-prefix,.hero-word{font-size:clamp(1.35rem,5.2vw,1.8rem)}.hero-word-stage{height:2.35rem}}
@media(max-width:560px){.hero-summary{width:94%}.hero-summary-prefix,.hero-word{font-size:clamp(1.25rem,6vw,1.65rem)}.hero-word-stage{height:2.15rem}.hero-summary-tail{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.hero-word{position:static;display:none;opacity:1;transform:none;filter:none}.hero-word:first-child{display:block}.hero-word-stage{height:auto;overflow:visible}.portrait-ghost{transform:rotate(180deg) scaleX(-1)!important}}

/* Build 7 — brighter editorial rhythm + stable cinematic hero */
:root{
  --paper:#f5f2eb;
  --paper-2:#fbfaf7;
  --ink:#0b0b0f;
  --ink-soft:#55515f;
  --paper-line:rgba(11,11,15,.14);
}

/* Hero: keep the composition stable; only the word layer cycles. */
.hero{min-height:100svh;background:#07070a}
.hero-summary{width:min(520px,92%);margin-top:2rem}
.hero-summary-prefix,.hero-word,.hero-summary-tail{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.45}
.hero-summary-prefix,.hero-word{font-family:var(--poppins);font-weight:600;letter-spacing:-.02em}
.hero-word{font-family:var(--lora);font-style:italic;font-weight:600}
.hero-word-stage{height:2.3em;margin:.1rem 0 .35rem;overflow:hidden}
.hero-summary-tail{font-family:var(--poppins);font-weight:400;color:#c4c0cd;max-width:500px;margin:.2rem 0 0}

/* Move the inverted echo left so it reads as an editorial trace, not a duplicate. */
.portrait-ghost{
  left:-10%!important;
  width:59%!important;
  top:8%!important;
  opacity:.18!important;
  filter:grayscale(1) contrast(1.12) brightness(.43) sepia(.15) hue-rotate(220deg) saturate(3.1)!important;
  transform:rotate(180deg) scaleX(-1)!important;
  -webkit-mask-image:radial-gradient(ellipse at 58% 44%,#000 0%,rgba(0,0,0,.92) 43%,rgba(0,0,0,.35) 64%,transparent 79%)!important;
  mask-image:radial-gradient(ellipse at 58% 44%,#000 0%,rgba(0,0,0,.92) 43%,rgba(0,0,0,.35) 64%,transparent 79%)!important;
}
.hero[data-hero-state="systems"] .portrait-ghost{opacity:.25!important}
.hero[data-hero-state="experiences"] .portrait-ghost{opacity:.13!important}

/* Larger readable secondary typography globally. */
.work-intro>p,.project-copy>p:not(.project-label),.statement p,.system-step-copy p,.thought-card>p:not(.thought-date),.about-line p,.cta-copy p{
  font-size:clamp(.98rem,1.2vw,1.16rem);
  line-height:1.65;
}
.project-label,.section-label,.chapter-num,.project-number,.thought-date{font-size:.72rem}
.project-tags span,.project-copy a,.outline-link,.about-line a{font-size:.64rem}

/* Light editorial chapter: Selected Work introduction. */
.work-shell{background:var(--paper-2);color:var(--ink)}
.work-intro{background:var(--paper-2);border-bottom:1px solid var(--paper-line);min-height:46vh;padding-top:clamp(6rem,10vw,9rem);padding-bottom:clamp(5rem,8vw,8rem)}
.work-intro .section-label{color:#6c6576}
.work-intro h2{color:var(--ink);max-width:800px}
.work-intro>p{color:var(--ink-soft);max-width:520px}

/* Project chapters alternate to create energy rather than one endless black canvas. */
.project{border-color:rgba(255,255,255,.10)}
.project:nth-child(1){background:#0a0a0e;color:#f4f1eb}
.project:nth-child(2){background:var(--paper);color:var(--ink);border-color:var(--paper-line)}
.project:nth-child(2):before{background:linear-gradient(rgba(11,11,15,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,11,15,.05) 1px,transparent 1px)}
.project:nth-child(2) .project-copy>p:not(.project-label){color:#5c5663}
.project:nth-child(2) .project-label,.project:nth-child(2) .project-number{color:#7247d8}
.project:nth-child(2) .project-tags span{border-color:rgba(11,11,15,.16);color:#625c69}
.project:nth-child(2) .project-copy a{border-color:rgba(11,11,15,.3)}
.project:nth-child(2) .project-glow{background:rgba(141,92,246,.12)}
.project:nth-child(3){background:#08090d;color:#f4f1eb}

/* White negative-space statement chapters. */
.statement-problem,.statement-next{background:var(--paper-2);color:var(--ink);border-color:var(--paper-line)}
.statement-problem .chapter-num,.statement-next .chapter-num{color:#7247d8}
.statement-problem p,.statement-next p{color:#5a5561}
.statement-problem .orbital-field span,.statement-problem .orbital-field i{border-color:rgba(11,11,15,.15)}
.statement-next .wire-cubes i{border-color:rgba(114,71,216,.34)}
.statement-inner{min-height:72vh;padding-top:clamp(6rem,9vw,9rem);padding-bottom:clamp(6rem,9vw,9rem)}
.statement h2{color:var(--ink)}

/* Systems remains dark so the technical visual becomes a deliberate cinematic chapter. */
.systems{background:#09090d;color:#f3f0ea}

/* My Thoughts becomes editorial/paper-like. */
.thoughts{background:var(--paper);color:var(--ink);padding-top:clamp(6rem,9vw,9rem);padding-bottom:clamp(6rem,9vw,9rem)}
.thoughts .section-label,.thought-date{color:#6b6473}
.thoughts h2{color:var(--ink)}
.thoughts-heading .outline-link{border-color:rgba(11,11,15,.26)}
.thoughts-portrait{background:#e9e5dc;border-color:var(--paper-line)}
.thoughts-portrait:after{background:linear-gradient(90deg,rgba(245,242,235,.72),transparent 24%,transparent 74%,rgba(245,242,235,.82)),linear-gradient(to top,rgba(245,242,235,.74),transparent 52%)}
.thoughts-portrait img{filter:grayscale(.25) saturate(.72) contrast(1.02) brightness(.92)}
.thought-card{border-color:var(--paper-line)}
.thought-card h3{color:var(--ink)}
.thought-card>p:not(.thought-date){color:#625d68}
.thought-card a{color:#3e3945}
.thought-card-featured{background:#ece8df}
.about-line{border-color:var(--paper-line)}
.about-line p{color:#5c5663}
.about-thumb{border-color:var(--paper-line);background:#e8e4da}
.about-thumb img{filter:grayscale(.55) contrast(1.02) brightness(.9)}

/* Final return to black for a decisive closing beat. */
.final-cta{background:#07070a;color:#f3f0ea}

/* Header adapts when JS toggles the light state. */
.site-header.is-light{background:linear-gradient(to bottom,rgba(251,250,247,.96),rgba(251,250,247,.72),transparent);color:#0b0b0f}
.site-header.is-light .desktop-nav a{color:#35313a}
.site-header.is-light .contact-pill{border-color:rgba(11,11,15,.2);background:rgba(255,255,255,.46);color:#0b0b0f}
.site-header.is-light .menu-toggle span:not(.sr-only){background:#0b0b0f}

@media(max-width:900px){
  .hero-summary-prefix,.hero-word,.hero-summary-tail{font-size:1.05rem}
  .portrait-ghost{left:-17%!important;width:67%!important}
  .work-intro{min-height:auto;align-items:start}
  .statement-inner{min-height:auto}
}
@media(max-width:560px){
  .hero-summary-prefix,.hero-word,.hero-summary-tail{font-size:1rem}
  .hero-word-stage{height:2.15em}
  .portrait-ghost{left:-13%!important;width:76%!important}
  .work-intro,.thoughts{padding-top:5rem;padding-bottom:5rem}
}


/* Build 8 — static hero copy, perspective shift, alternate self, and stronger dark-to-light transition */
.hero{--glow-x:64%;--glow-y:36%;}
.hero-copy{z-index:4;max-width:860px}
.hero-summary{width:min(560px,92%);margin-top:2.2rem}
.hero-summary-prefix,.hero-summary-focus,.hero-summary-tail{margin:0;color:#f0edf5;font-family:var(--poppins);font-weight:600;letter-spacing:-.03em;line-height:1.15;font-size:clamp(1.22rem,1.7vw,1.7rem)}
.hero-summary-focus{display:block;max-width:15ch;margin-top:.15rem;color:#d8d2e9;text-wrap:balance}
.hero-summary-tail{margin-top:.75rem;max-width:26ch;color:#d2ceda;font-weight:400;line-height:1.45;text-wrap:pretty}
.hero-portrait{inset:0 -3% 0 36%;overflow:hidden;pointer-events:none}
.portrait-main{right:-1%;top:-1%;width:82%;height:109%;object-position:44% 34%;filter:grayscale(.82) saturate(.48) contrast(1.08) brightness(.76);transform-origin:58% 42%}
.portrait-ghost{left:-18%!important;top:9%!important;width:60%!important;height:76%!important;opacity:.16!important;filter:grayscale(1) contrast(1.08) brightness(.42) sepia(.12) hue-rotate(220deg) saturate(2.8)!important;mix-blend-mode:screen;mask-image:radial-gradient(circle at 58% 44%,#000 0%,rgba(0,0,0,.95) 44%,rgba(0,0,0,.42) 67%,transparent 82%);-webkit-mask-image:radial-gradient(circle at 58% 44%,#000 0%,rgba(0,0,0,.95) 44%,rgba(0,0,0,.42) 67%,transparent 82%)}
.portrait-ambient{position:absolute;inset:-10% -12% -8% 18%;background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(132,86,245,.34),rgba(132,86,245,.1) 18%,transparent 42%),radial-gradient(circle at calc(var(--glow-x) - 18%) calc(var(--glow-y) + 12%),rgba(255,255,255,.08),transparent 18%);filter:blur(10px);opacity:.92;mix-blend-mode:screen}
.portrait-orbit{right:-31vw;top:2%;width:76vw;opacity:.58;border-color:rgba(255,255,255,.08)}
.portrait-orbit:before,.portrait-orbit:after{border-color:rgba(255,255,255,.06)}
.portrait-crosshair{right:14%;top:50%;opacity:.55}
.hero-grid{opacity:.32}
.hero-grid:after{inset:-16%;background:radial-gradient(circle at 73% 34%,rgba(141,92,246,.24),transparent 24%),radial-gradient(circle at 62% 48%,rgba(255,255,255,.05),transparent 17%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:24svh;pointer-events:none;background:linear-gradient(to bottom,rgba(7,7,10,0) 0%,rgba(7,7,10,.18) 24%,rgba(245,242,235,.18) 64%,rgba(251,250,247,.94) 100%);z-index:2}
.work-intro{position:relative;overflow:hidden}
.work-intro::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(to bottom,rgba(251,250,247,0) 0%,rgba(251,250,247,.72) 72%,rgba(251,250,247,1) 100%);pointer-events:none;z-index:2}
.hero-side-note{right:4.5%;top:33%;font-size:.66rem;color:#b2aebc;letter-spacing:.08em}
@media(max-width:1100px) and (min-width:901px){.hero-portrait{inset:0 -8% 0 39%}.portrait-main{width:84%}.portrait-ghost{left:-15%!important;width:63%!important}.hero-summary{width:min(520px,96%)}}
@media(max-width:900px){.hero-summary-prefix,.hero-summary-focus,.hero-summary-tail{font-size:clamp(1.08rem,4.2vw,1.32rem)}.hero-summary-focus{max-width:17ch}.hero-portrait{inset:30% -22% -3% 3%}.portrait-main{width:88%;height:101%;object-position:47% 27%}.portrait-ghost{left:-7%!important;top:4%!important;width:57%!important;height:72%!important;opacity:.18!important}.portrait-ambient{inset:-8% -16% 0 10%}.hero::after{height:18svh}}
@media(max-width:560px){.hero-summary{width:94%}.hero-summary-prefix,.hero-summary-focus,.hero-summary-tail{font-size:1rem;line-height:1.35}.hero-summary-tail{max-width:22ch}.hero-portrait{inset:36% -36% -3% 0}.portrait-main{width:100%;height:95%;object-position:46% 25%}.portrait-ghost{display:block;left:-6%!important;top:2%!important;width:68%!important;height:69%!important}.portrait-crosshair{right:18%;top:46%;transform:scale(.9)}}
@media(prefers-reduced-motion:reduce){.portrait-main,.portrait-ghost,.portrait-ambient,.portrait-orbit,.hero-grid,.portrait-crosshair{transform:none!important}}


/* Build 9 — restore hero composition, unify supporting typography, keep interaction subtle */
.hero{
  min-height:100svh;
  --glow-x:68%;
  --glow-y:35%;
  overflow:hidden;
}
.hero-copy{
  z-index:4;
  max-width:780px;
}
.hero-summary{
  width:min(540px,90%);
  margin-top:2rem;
}
.hero-summary p{
  margin:0;
  max-width:31ch;
  color:#ece9f2;
  font-family:var(--poppins);
  font-size:clamp(1.08rem,1.3vw,1.28rem);
  font-weight:600;
  line-height:1.48;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.hero-portrait{
  inset:0 0 0 40%;
  overflow:hidden;
  pointer-events:none;
}
.portrait-main{
  right:-1%;
  top:0;
  width:78%;
  height:107%;
  object-position:44% 40%;
  filter:grayscale(.9) saturate(.35) contrast(1.1) brightness(.72);
}
.portrait-ghost{
  left:-13%!important;
  top:9%!important;
  width:55%!important;
  height:73%!important;
  opacity:.17!important;
  filter:grayscale(1) contrast(1.12) brightness(.42) sepia(.14) hue-rotate(220deg) saturate(3)!important;
  transform:rotate(180deg) scaleX(-1)!important;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse at 58% 44%,#000 0%,rgba(0,0,0,.94) 45%,rgba(0,0,0,.35) 67%,transparent 82%)!important;
  mask-image:radial-gradient(ellipse at 58% 44%,#000 0%,rgba(0,0,0,.94) 45%,rgba(0,0,0,.35) 67%,transparent 82%)!important;
}
.portrait-ambient{
  position:absolute;
  inset:-10% -8% -6% 26%;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(132,86,245,.24),rgba(132,86,245,.08) 19%,transparent 42%),
    radial-gradient(circle at 78% 48%,rgba(255,255,255,.045),transparent 18%);
  filter:blur(12px);
  opacity:.86;
  mix-blend-mode:screen;
}
.portrait-orbit{
  right:-36vw;
  top:5%;
  width:72vw;
  opacity:.46;
}
.portrait-crosshair{
  right:16%;
  top:48%;
  opacity:.46;
}
.hero-grid{
  opacity:.27;
}
.hero-grid:after{
  inset:-18%;
  background:
    radial-gradient(circle at 72% 34%,rgba(141,92,246,.18),transparent 25%),
    radial-gradient(circle at 66% 52%,rgba(255,255,255,.04),transparent 18%);
}

/* Remove the Build 8 white gradient that crossed the middle of the hero. */
.hero::after{
  content:none!important;
}

/* Keep the dark/light handoff crisp and intentional at the actual section boundary. */
.work-intro{
  clip-path:none!important;
  position:relative;
}
.work-intro::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:rgba(11,11,15,.12);
  pointer-events:none;
}

/* Slightly more generous body sizing without making the hero dense. */
.hero-role{
  font-size:clamp(.8rem,.85vw,.92rem);
  line-height:1.55;
}
.hero-side-note{
  right:4.5%;
  top:34%;
  font-size:.68rem;
  line-height:1.9;
  color:#b1adbb;
}

@media(max-width:1100px) and (min-width:901px){
  .hero-portrait{inset:0 -6% 0 40%}
  .portrait-main{width:84%}
  .portrait-ghost{left:-10%!important;width:60%!important}
}
@media(max-width:900px){
  .hero-summary p{font-size:clamp(1rem,3.8vw,1.18rem);max-width:29ch}
  .hero-portrait{inset:31% -24% -3% 2%}
  .portrait-main{width:88%;height:100%;object-position:47% 27%}
  .portrait-ghost{left:-4%!important;top:2%!important;width:58%!important;height:70%!important}
}
@media(max-width:560px){
  .hero-summary{width:94%}
  .hero-summary p{font-size:1rem;line-height:1.45}
  .hero-portrait{inset:37% -38% -4% 0}
  .portrait-main{width:100%;height:95%;object-position:46% 25%}
  .portrait-ghost{left:-3%!important;top:0!important;width:68%!important;height:67%!important}
}


/* Build 10 — Next Version evolution visual */
.statement-next .statement-inner{grid-template-columns:minmax(0,1.15fr) minmax(260px,.7fr) minmax(360px,1fr);align-items:center;column-gap:clamp(2rem,4vw,4rem)}
.statement-next p{font-size:clamp(1.05rem,1.35vw,1.45rem);line-height:1.6;max-width:18ch}
.evolution-visual{position:relative;min-width:360px;height:320px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.evolution-visual::before{content:"";position:absolute;left:10%;right:12%;top:50%;height:1px;background:linear-gradient(90deg,rgba(114,71,216,.07),rgba(114,71,216,.18),rgba(114,71,216,.07));transform:translateY(-50%)}
.evolution-flow{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:clamp(.6rem,1vw,1rem)}
.version-card{position:relative;height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;opacity:.88}
.version-index{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:#7a7190}
.version-shape{position:relative;display:block;width:78px;height:78px;transform:rotate(33deg) skewY(-14deg);border:1px solid rgba(114,71,216,.34);background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,0));box-shadow:0 10px 30px rgba(114,71,216,.06)}
.version-card .version-shape::before,.version-card .version-shape::after{content:"";position:absolute;inset:0;border:1px solid rgba(114,71,216,.22);opacity:0;transition:opacity .3s ease}
.version-card-1 .version-shape{width:70px;height:70px;background:none;border-color:rgba(114,71,216,.28);box-shadow:none}
.version-card-2 .version-shape::before{opacity:1;transform:translate(-12px,-12px)}
.version-card-3 .version-shape::before{opacity:1;transform:translate(-13px,-13px)}
.version-card-3 .version-shape::after{opacity:1;inset:auto auto 100% 0;width:100%;height:13px;transform:skewX(-54deg);transform-origin:bottom left;border-bottom:none;background:rgba(114,71,216,.04)}
.version-card-4 .version-shape{background:linear-gradient(135deg,rgba(114,71,216,.06),rgba(255,255,255,.02));box-shadow:0 18px 35px rgba(114,71,216,.08)}
.version-card-4 .version-shape::before{opacity:1;transform:translate(-14px,-14px)}
.version-card-4 .version-shape::after{opacity:1;inset:auto auto 100% 0;width:100%;height:14px;transform:skewX(-54deg);transform-origin:bottom left;border-bottom:none;background:rgba(114,71,216,.06)}
.version-card-5 .version-shape{width:88px;height:88px;border-color:rgba(114,71,216,.5);background:linear-gradient(140deg,rgba(255,255,255,.8),rgba(209,198,242,.16) 55%,rgba(114,71,216,.08));box-shadow:0 20px 40px rgba(114,71,216,.12)}
.version-card-5 .version-shape::before{opacity:1;transform:translate(-16px,-16px);border-color:rgba(114,71,216,.32)}
.version-card-5 .version-shape::after{opacity:1;inset:auto auto 100% 0;width:100%;height:16px;transform:skewX(-54deg);transform-origin:bottom left;border-bottom:none;background:linear-gradient(180deg,rgba(114,71,216,.12),rgba(255,255,255,.03))}
.evolution-core{position:absolute;right:2%;top:50%;width:150px;height:150px;transform:translateY(-50%) rotate(-10deg);filter:drop-shadow(0 26px 44px rgba(114,71,216,.14));opacity:.9}
.core-face,.core-trace{position:absolute;display:block}
.core-face{border:1px solid rgba(114,71,216,.48);background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(114,71,216,.09));backdrop-filter:blur(4px)}
.face-front{inset:36px 28px 28px 36px}
.face-top{left:36px;top:20px;width:86px;height:18px;transform:skewX(-54deg);transform-origin:left bottom;background:linear-gradient(180deg,rgba(114,71,216,.18),rgba(255,255,255,.08));border-bottom:none}
.face-side{right:12px;top:36px;width:18px;height:86px;transform:skewY(-36deg);transform-origin:left top;background:linear-gradient(180deg,rgba(114,71,216,.12),rgba(255,255,255,.03));border-left:none}
.core-trace{height:1px;background:linear-gradient(90deg,rgba(114,71,216,0),rgba(114,71,216,.38),rgba(114,71,216,0));transform-origin:left center}
.trace-a{left:-72px;top:56px;width:94px}
.trace-b{left:-56px;top:98px;width:78px}
.statement-next .chapter-num{margin-bottom:1rem;display:inline-block}
.statement-next h2{max-width:10ch}
.statement-next .version-card:nth-child(odd){transform:translateY(14px)}
.statement-next .version-card:nth-child(even){transform:translateY(-10px)}
@media(max-width:1100px){.statement-next .statement-inner{grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);grid-template-areas:"title visual" "copy visual"}.statement-next .statement-inner>div:first-child{grid-area:title}.statement-next .statement-inner>p{grid-area:copy}.evolution-visual{grid-area:visual;min-width:300px;height:280px}.evolution-core{right:0;width:132px;height:132px}.version-shape{width:66px;height:66px}.version-card-5 .version-shape{width:76px;height:76px}}
@media(max-width:900px){.statement-next .statement-inner{grid-template-columns:1fr;grid-template-areas:none}.statement-next p{max-width:26ch}.evolution-visual{min-width:0;width:100%;height:280px;margin-top:.8rem}.evolution-flow{gap:.25rem}.version-card{height:180px}.version-shape{width:58px;height:58px}.version-card-5 .version-shape{width:68px;height:68px}.evolution-core{position:absolute;right:1rem;top:48%;width:116px;height:116px}.trace-a{width:54px;left:-38px}.trace-b{width:44px;left:-30px}}
@media(max-width:560px){.statement-next h2{max-width:9ch}.evolution-visual{height:250px}.version-index{font-size:.62rem}.version-shape{width:50px;height:50px}.version-card-5 .version-shape{width:62px;height:62px}.evolution-core{width:100px;height:100px;right:.25rem}.face-front{inset:26px 22px 22px 26px}.face-top{left:26px;top:14px;width:64px;height:14px}.face-side{right:10px;top:26px;width:14px;height:64px}}


/* Build 11 — polish interactions */
.desktop-nav a,.mobile-menu a,.site-footer nav a,.socials a,.project a,.thought-card a,.outline-link,.secondary-cta-link{transition:color .24s ease,opacity .24s ease,transform .24s ease,border-color .24s ease,background .24s ease}
.desktop-nav a.is-active,.site-footer nav a.is-active{color:var(--accent2)}
.desktop-nav a.is-active::after{content:"";display:block;width:100%;height:1px;background:rgba(141,92,246,.55);margin-top:.35rem;box-shadow:0 0 10px rgba(141,92,246,.25)}
.project{cursor:none}
.project-copy a,.thought-card,.thought-card a,.outline-link,.cta-button,.secondary-cta-link{cursor:none}
.cursor-chip{position:fixed;left:0;top:0;z-index:1600;pointer-events:none;padding:.55rem .72rem;border:1px solid rgba(141,92,246,.38);border-radius:999px;background:rgba(12,12,18,.86);backdrop-filter:blur(10px);font:500 .62rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#f4f1fb;transform:translate3d(-50%,-50%,0) scale(.82);opacity:0;transition:opacity .18s ease,transform .18s ease;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.cursor-chip.is-visible{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.thoughts-heading{align-items:center}
.thoughts-grid{position:relative;overflow:hidden}
.thought-card{background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.06));transition:transform .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease}
.thought-card::before{content:"";position:absolute;inset:auto -10% -35% auto;width:68%;aspect-ratio:1;border-radius:42% 58% 55% 45%;background:radial-gradient(circle at 50% 50%,rgba(141,92,246,.18),rgba(141,92,246,.02) 52%,transparent 72%);transform:translateY(18px) scale(.92);opacity:.55;transition:transform .45s ease,opacity .45s ease,filter .45s ease}
.thought-card::after{content:"";position:absolute;left:2rem;right:2rem;bottom:1.1rem;height:1px;background:linear-gradient(90deg,rgba(141,92,246,.35),rgba(141,92,246,0));transform:scaleX(.15);transform-origin:left center;transition:transform .35s ease,opacity .35s ease;opacity:.65}
.thought-card:nth-child(2)::before{background:repeating-linear-gradient(90deg,rgba(141,92,246,.11) 0 1px,transparent 1px 12px),radial-gradient(circle at 50% 50%,rgba(141,92,246,.1),transparent 62%);border-radius:0;inset:auto 0 -30% auto;width:50%}
.thought-card:nth-child(3)::before{background:repeating-radial-gradient(circle at center,rgba(141,92,246,.2) 0 1px,transparent 2px 12px);border-radius:46% 54% 38% 62%}
.thought-card:hover,.thought-card:focus-within{transform:translateY(-8px);border-color:rgba(141,92,246,.18);background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.08));box-shadow:0 18px 44px rgba(0,0,0,.08)}
.thought-card:hover::before,.thought-card:focus-within::before{transform:translateY(0) scale(1.02);opacity:.9;filter:drop-shadow(0 10px 26px rgba(141,92,246,.16))}
.thought-card:hover::after,.thought-card:focus-within::after{transform:scaleX(1)}
.thought-card a:hover,.project a:hover,.outline-link:hover,.secondary-cta-link:hover{color:var(--accent2);transform:translateX(4px)}
.final-cta{scroll-margin-top:7rem}
.cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.secondary-cta-link{display:inline-flex;align-items:center;gap:.4rem;font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#a49daf;opacity:.92}
.secondary-cta-link::before{content:"";width:42px;height:1px;background:rgba(141,92,246,.28);display:inline-block}
.cta-orbit{transition:transform .4s ease,filter .4s ease}
.cta-orbit.is-engaged{filter:drop-shadow(0 0 18px rgba(141,92,246,.18))}
.cta-orbit.is-engaged span:nth-child(1){transform:scale(.88)}
.cta-orbit.is-engaged span:nth-child(2){transform:scale(.78)}
.cta-orbit.is-engaged span:nth-child(3){transform:scale(.66)}
.cta-orbit.is-engaged i{transform:scale(1.35)}
.cta-orbit span,.cta-orbit i{transition:transform .45s ease,opacity .45s ease}
.final-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(141,92,246,.28),transparent)}
@media (pointer:coarse){.project,.project-copy a,.thought-card,.thought-card a,.outline-link,.cta-button,.secondary-cta-link{cursor:pointer}.cursor-chip{display:none!important}}
@media(max-width:900px){.cta-actions{gap:.8rem}.secondary-cta-link{font-size:.62rem}.thought-card{min-height:280px}}


/* Build 12 — hero typography refinement, cinematic project worlds, deeper systems reveal */

/* HERO: premium but restrained typography */
.hero-kicker{
  font-family:var(--poppins);
  font-weight:600;
  letter-spacing:-.02em;
  text-transform:none;
  font-size:clamp(1.05rem,1.6vw,1.55rem);
}
.hero h1{
  letter-spacing:-.06em;
  line-height:.8;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.11em;
  color:#a58af8;
  margin-bottom:1.35rem;
}
.hero-name{
  font-family:var(--poppins);
  font-weight:500;
  letter-spacing:.18em;
  font-size:clamp(1.02rem,1.45vw,1.42rem);
}
.hero-role{
  font-family:var(--poppins);
  font-weight:400;
  letter-spacing:-.01em;
  color:#b9b5c2;
}
.hero-summary p{
  font-family:var(--poppins);
  font-weight:500;
  line-height:1.46;
  letter-spacing:-.025em;
  max-width:34ch;
  color:#e7e3ed;
}
.hero-side-note{
  letter-spacing:.1em;
  color:#aaa5b4;
}
.hero-side-note::before{
  content:"";
  display:block;
  width:46px;
  height:1px;
  margin-bottom:.8rem;
  background:linear-gradient(90deg,rgba(167,138,248,.7),transparent);
}

/* SELECTED WORK: each project becomes a distinct world */
.project{
  isolation:isolate;
  --world-accent:141,92,246;
}
.project-kintinuity{--world-accent:105,178,138}
.project-birthday{--world-accent:199,111,154}
.project-lobework{--world-accent:122,108,255}

.project::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 44%,rgba(var(--world-accent),.15),transparent 28%),
    linear-gradient(125deg,rgba(var(--world-accent),.035),transparent 42%);
  opacity:.9;
}
.project-world-label{
  position:absolute;
  z-index:3;
  right:clamp(1.25rem,4vw,4rem);
  top:clamp(5.8rem,9vh,7.4rem);
  font:500 .58rem var(--mono);
  letter-spacing:.12em;
  color:rgba(var(--world-accent),.8);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  opacity:.72;
}
.project-transition-plane{
  position:absolute;
  z-index:8;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(var(--world-accent),.08) 44%,rgba(var(--world-accent),.22) 100%);
  transform-origin:right center;
  transform:scaleX(.001);
  opacity:0;
}
.project-copy,.project-visual,.project-number{z-index:4}
.project h3{
  max-width:10ch;
  text-wrap:balance;
}
.project-copy>p:not(.project-label){
  font-family:var(--poppins);
  font-weight:400;
  font-size:clamp(.98rem,1.1vw,1.12rem);
  line-height:1.65;
  max-width:48ch;
}
.project-label{
  color:rgba(var(--world-accent),.95)!important;
}
.project-number{
  color:rgba(var(--world-accent),.95)!important;
}
.project-tags span{
  border-color:rgba(var(--world-accent),.2)!important;
}
.project-copy a{
  border-color:rgba(var(--world-accent),.38)!important;
}
.project-glow{
  background:rgba(var(--world-accent),.16)!important;
}
.project-visual{
  transform-style:preserve-3d;
}
.project-visual::after{
  content:"";
  position:absolute;
  inset:12% 7% 10% 12%;
  border:1px solid rgba(var(--world-accent),.12);
  transform:translate3d(24px,-20px,-30px);
  pointer-events:none;
}
.project-kintinuity .glass-shell{
  border-color:rgba(105,178,138,.18);
}
.project-birthday .bd-window,
.project-birthday .bd-phone{
  border-color:rgba(199,111,154,.18);
}
.project-lobework .lobe-shell{
  border-color:rgba(122,108,255,.18);
}

/* SYSTEMS: make "what's underneath" more legible and cinematic */
.systems-stage{
  --system-depth:1;
}
.system-surface{
  position:absolute;
  inset:12%;
  z-index:8;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(28,29,36,.93),rgba(10,10,15,.88));
  box-shadow:0 35px 90px rgba(0,0,0,.38);
  transform:translateZ(72px);
  backdrop-filter:blur(7px);
  transition:opacity .35s ease,transform .35s ease,border-color .35s ease;
  pointer-events:none;
}
.system-surface span{
  position:absolute;
  left:10%;
  right:10%;
  height:9%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  border-radius:3px;
}
.system-surface span:nth-child(1){top:16%}
.system-surface span:nth-child(2){top:39%;right:38%}
.system-surface span:nth-child(3){bottom:17%;left:26%}
.system-surface i{
  position:absolute;
  right:12%;
  top:13%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a78aff;
  box-shadow:0 0 22px rgba(167,138,248,.55);
}
.systems[data-system-state="0"] .system-surface{opacity:1;transform:translateZ(72px) scale(1)}
.systems[data-system-state="1"] .system-surface{opacity:.82;transform:translate3d(-18px,-12px,100px) rotateZ(-1deg)}
.systems[data-system-state="2"] .system-surface{opacity:.6;transform:translate3d(-34px,-24px,118px) rotateZ(-2deg)}
.systems[data-system-state="3"] .system-surface{opacity:.42;transform:translate3d(-46px,-34px,132px) rotateZ(-3deg)}
.systems[data-system-state="4"] .system-surface{opacity:.28;transform:translate3d(-58px,-44px,145px) rotateZ(-4deg)}
.systems[data-system-state="5"] .system-surface{opacity:.16;transform:translate3d(-70px,-52px,158px) rotateZ(-5deg)}
.systems[data-system-state="5"] .scene-panel{border-color:rgba(167,138,248,.2)}
.systems[data-system-state="5"] .scene-core{box-shadow:0 0 80px rgba(141,92,246,.85)}
.system-step{
  position:relative;
  overflow:hidden;
}
.system-step::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#a78aff,transparent);
  transform:scaleX(0);
  transition:transform .25s ease;
}
.system-step.is-active::after{transform:scaleX(1)}
.system-step-copy p{
  font-family:var(--poppins);
  font-size:clamp(.96rem,1.05vw,1.08rem);
  line-height:1.62;
}

/* More intentional section handoffs */
.statement-problem,
.statement-next,
.thoughts,
.work-intro{
  position:relative;
}
.statement-problem::before,
.statement-next::before,
.thoughts::before{
  content:"";
  position:absolute;
  left:clamp(1.25rem,4vw,4rem);
  right:clamp(1.25rem,4vw,4rem);
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,11,15,.13),transparent);
}

/* Keep hover / cursor polish restrained */
@media (hover:hover) and (pointer:fine){
  .project:hover .project-world-label{opacity:1}
  .project:hover .project-visual{filter:brightness(1.03)}
}
@media(max-width:900px){
  .project-world-label{display:none}
  .project h3{max-width:14ch}
  .system-surface{inset:14%}
}
@media(max-width:560px){
  .hero-name{letter-spacing:.12em}
  .hero-summary p{max-width:28ch}
}


/* Build 13 — distinct project branding + true cover transitions + dramatic systems peeling */

/* PROJECT BRAND WORLDS */
.project-kintinuity{
  --project-primary:#9ee86d;
  --project-secondary:#2e7d62;
  --world-accent:158,232,109;
  background:
    radial-gradient(circle at 72% 48%,rgba(77,160,118,.18),transparent 30%),
    linear-gradient(135deg,#080b0a 0%,#090b0d 55%,#08090b 100%)!important;
}
.project-birthday{
  --project-primary:#ee67d5;
  --project-secondary:#8b5cf6;
  --world-accent:238,103,213;
  background:
    radial-gradient(circle at 72% 48%,rgba(238,103,213,.15),transparent 31%),
    radial-gradient(circle at 80% 70%,rgba(139,92,246,.11),transparent 26%),
    linear-gradient(135deg,#fffaf7 0%,#f8eff8 52%,#f5f0ff 100%)!important;
}
.project-lobework{
  --project-primary:#9a7cff;
  --project-secondary:#5b7cff;
  --world-accent:154,124,255;
  background:
    radial-gradient(circle at 72% 45%,rgba(91,124,255,.17),transparent 30%),
    radial-gradient(circle at 82% 62%,rgba(154,124,255,.12),transparent 24%),
    linear-gradient(135deg,#08090f 0%,#0a0b13 58%,#090a0f 100%)!important;
}
.project-label{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.project-brand-dot{
  width:.42rem;
  height:.42rem;
  border-radius:50%;
  display:inline-block;
  background:var(--project-primary);
  box-shadow:0 0 16px color-mix(in srgb,var(--project-primary) 70%,transparent);
}
.project-kintinuity .project-copy a{
  background:linear-gradient(90deg,rgba(158,232,109,.08),rgba(158,232,109,.015));
}
.project-birthday .project-copy a{
  background:linear-gradient(90deg,rgba(238,103,213,.09),rgba(139,92,246,.025));
}
.project-lobework .project-copy a{
  background:linear-gradient(90deg,rgba(154,124,255,.1),rgba(91,124,255,.025));
}
.project-kintinuity .kin-shell{
  box-shadow:0 34px 90px rgba(46,125,98,.16),0 0 0 1px rgba(158,232,109,.06);
}
.project-birthday .birthday-visual{
  filter:drop-shadow(0 28px 62px rgba(238,103,213,.12));
}
.project-lobework .lobe-visual{
  filter:drop-shadow(0 32px 72px rgba(91,124,255,.16));
}
.project-kintinuity .project-world-label{color:rgba(158,232,109,.86)}
.project-birthday .project-world-label{color:rgba(207,73,172,.8)}
.project-lobework .project-world-label{color:rgba(154,124,255,.86)}

/* TRUE COVER / OVERLAY WORK EXPERIENCE ON DESKTOP */
@media(min-width:901px){
  .work-pin{
    position:relative;
    height:100svh;
    overflow:hidden;
  }
  .work-slides{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
    transform:none!important;
  }
  .project{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    min-width:100%!important;
    height:100%!important;
    clip-path:none;
    will-change:transform,clip-path,filter,opacity;
  }
  .project:nth-child(1){z-index:1}
  .project:nth-child(2){z-index:2}
  .project:nth-child(3){z-index:3}
  .project-transition-plane{
    z-index:9;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(var(--world-accent),.06) 22%,
        rgba(var(--world-accent),.18) 72%,
        rgba(var(--world-accent),.28) 100%);
    mix-blend-mode:screen;
  }
}

/* SYSTEMS: each layer should clearly peel away and reveal the next */
.system-scene{
  overflow:visible;
}
.scene-panel{
  transition:
    opacity .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}
.scene-panel.is-current{
  opacity:1!important;
  border-color:rgba(167,138,248,.38)!important;
  box-shadow:
    0 32px 85px rgba(0,0,0,.35),
    0 0 48px rgba(141,92,246,.12);
  filter:brightness(1.12);
}
.scene-panel.is-past{
  opacity:.22!important;
  filter:brightness(.72) saturate(.7);
}
.scene-panel.is-future{
  opacity:.045!important;
  filter:brightness(.55) saturate(.5);
}
.system-surface{
  transition:none!important;
}
.systems[data-system-state="0"] .system-surface{
  opacity:1;
}
.systems[data-system-state="1"] .system-surface{
  opacity:.48;
}
.systems[data-system-state="2"] .system-surface{
  opacity:.2;
}
.systems[data-system-state="3"] .system-surface{
  opacity:.08;
}
.systems[data-system-state="4"] .system-surface{
  opacity:.025;
}
.systems[data-system-state="5"] .system-surface{
  opacity:0;
}
.system-step-copy{
  position:relative;
}
.system-step-copy::before{
  content:"";
  position:absolute;
  left:-1rem;
  top:-.4rem;
  width:2px;
  height:calc(100% + .8rem);
  background:linear-gradient(to bottom,#a78aff,transparent);
  opacity:.45;
}
.system-step.is-active{
  background:linear-gradient(180deg,rgba(141,92,246,.14),rgba(141,92,246,.045));
}
@media(max-width:900px){
  .project-brand-dot{width:.36rem;height:.36rem}
}


/* Build 15 — Stable Editorial Track for Selected Work */

/* Exact Kintinuity palette */
.project-kintinuity{
  --project-primary:#11758E;
  --project-secondary:#8BD1D5;
  --project-warm:#FA987B;
  --project-anchor:#174A5A;
  --world-accent:17,117,142;
  background:
    radial-gradient(circle at 74% 44%,rgba(139,209,213,.17),transparent 28%),
    radial-gradient(circle at 84% 66%,rgba(250,152,123,.07),transparent 20%),
    linear-gradient(135deg,#081013 0%,#0a171b 54%,#071014 100%)!important;
}
.project-kintinuity .project-label,
.project-kintinuity .project-number{color:#8BD1D5!important}
.project-kintinuity .project-brand-dot{background:#FA987B;box-shadow:0 0 17px rgba(250,152,123,.45)}
.project-kintinuity .project-world-label{color:rgba(139,209,213,.78)}
.project-kintinuity .project-tags span{border-color:rgba(139,209,213,.23)!important}
.project-kintinuity .project-copy a{border-color:rgba(17,117,142,.48)!important;background:linear-gradient(90deg,rgba(17,117,142,.15),rgba(139,209,213,.03))}
.project-kintinuity .project-glow{background:radial-gradient(circle,rgba(17,117,142,.22),rgba(139,209,213,.06) 46%,transparent 72%)!important}
.project-kintinuity .kin-shell{border-color:rgba(139,209,213,.2)!important;box-shadow:0 34px 90px rgba(17,117,142,.16),0 0 0 1px rgba(139,209,213,.05)!important}
.project-kintinuity .kin-strip{background:linear-gradient(90deg,#11758E,#8BD1D5)!important}

/* BirthdayMe — current brand direction */
.project-birthday{
  --project-primary:#F25372;
  --project-secondary:#9B63E8;
  --project-warm:#FF9E29;
  --world-accent:242,83,114;
  background:
    radial-gradient(circle at 72% 42%,rgba(155,99,232,.13),transparent 27%),
    radial-gradient(circle at 83% 66%,rgba(242,83,114,.12),transparent 22%),
    linear-gradient(135deg,#fffdfc 0%,#fff8f8 46%,#f8f2ff 100%)!important;
}
.project-birthday .project-label,
.project-birthday .project-number{color:#D64A88!important}
.project-birthday .project-brand-dot{background:linear-gradient(135deg,#F25372,#9B63E8 65%,#FF9E29);box-shadow:0 0 17px rgba(214,74,136,.34)}
.project-birthday .project-world-label{color:rgba(192,66,139,.72)}
.project-birthday .project-tags span{border-color:rgba(155,99,232,.2)!important}
.project-birthday .project-copy a{border-color:rgba(214,74,136,.34)!important;background:linear-gradient(90deg,rgba(242,83,114,.09),rgba(155,99,232,.06))}
.project-birthday .project-glow{background:radial-gradient(circle,rgba(155,99,232,.15),rgba(242,83,114,.08) 44%,transparent 72%)!important}

/* LobeWork — dark ink + warm orange */
.project-lobework{
  --project-primary:#FF7048;
  --project-secondary:#252331;
  --project-accent:#8B79FF;
  --world-accent:255,112,72;
  background:
    radial-gradient(circle at 72% 44%,rgba(255,112,72,.10),transparent 23%),
    radial-gradient(circle at 84% 62%,rgba(139,121,255,.08),transparent 24%),
    linear-gradient(135deg,#07070a 0%,#0b0a10 54%,#08080c 100%)!important;
}
.project-lobework .project-label,
.project-lobework .project-number{color:#FF8A68!important}
.project-lobework .project-brand-dot{background:#FF7048;box-shadow:0 0 18px rgba(255,112,72,.5)}
.project-lobework .project-world-label{color:rgba(255,138,104,.72)}
.project-lobework .project-tags span{border-color:rgba(255,112,72,.18)!important}
.project-lobework .project-copy a{border-color:rgba(255,112,72,.32)!important;background:linear-gradient(90deg,rgba(255,112,72,.1),rgba(139,121,255,.02))}
.project-lobework .project-glow{background:radial-gradient(circle,rgba(255,112,72,.12),rgba(139,121,255,.05) 42%,transparent 72%)!important}

/* Editorial horizontal track */
@media(min-width:901px){
  .work-pin{
    position:relative;
    height:100svh;
    overflow:hidden;
  }
  .work-slides{
    display:flex!important;
    width:max-content!important;
    height:100%!important;
    transform:none;
    will-change:transform;
  }
  .project{
    position:relative!important;
    inset:auto!important;
    flex:0 0 100vw!important;
    width:100vw!important;
    min-width:100vw!important;
    height:100%!important;
    clip-path:none!important;
    transform:none;
    filter:none;
    opacity:1;
    backface-visibility:hidden;
    overflow:hidden;
  }

  /* slight overlap so next world is previewed */
  .project + .project{
    margin-left:-9vw;
    padding-left:calc(clamp(1.25rem,4vw,4rem) + 9vw);
  }

  .project-transition-plane{display:none!important}

  /* angled chapter seam */
  .project::before{
    content:"";
    position:absolute;
    z-index:6;
    right:-4vw;
    top:0;
    bottom:0;
    width:8vw;
    background:linear-gradient(90deg,transparent,rgba(var(--world-accent),.06));
    clip-path:polygon(34% 0,100% 0,66% 100%,0 100%);
    pointer-events:none;
    opacity:.9;
  }

  .project-copy,
  .project-visual,
  .project-world-label,
  .project-number{
    will-change:transform,opacity,filter;
  }

  .project-visual{
    transform-style:preserve-3d;
  }

  .project-world-label{
    opacity:.35;
  }
}

/* Active chapter emphasis */
.project.is-active .project-world-label{opacity:.9}
.project.is-active .project-copy{filter:none}
.project.is-active .project-visual{filter:none}
.project.is-dimmed .project-copy{opacity:.45}
.project.is-dimmed .project-visual{opacity:.58;filter:saturate(.72) brightness(.8)}
.project.is-dimmed .project-world-label{opacity:.2}

/* Moving chapter index */
.work-index{
  position:absolute;
  left:clamp(1.25rem,4vw,4rem);
  right:clamp(1.25rem,4vw,4rem);
  bottom:1.2rem;
  z-index:20;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  pointer-events:none;
}
.work-index-item{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.65rem;
  font:500 .58rem var(--mono);
  letter-spacing:.08em;
  color:#77727f;
  text-transform:uppercase;
}
.work-index-item b{font-weight:500}
.work-index-line{
  height:1px;
  background:rgba(255,255,255,.14);
  overflow:hidden;
}
.work-index-line::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,#a78aff,transparent);
  transform:scaleX(.12);
  transform-origin:left center;
  transition:transform .28s ease,opacity .28s ease;
  opacity:.35;
}
.work-index-item.is-active{color:#fff}
.work-index-item.is-active .work-index-line::after{transform:scaleX(1);opacity:1}

/* Systems peel stays strong from Build 13 */
.scene-panel.is-current{
  opacity:1!important;
  filter:brightness(1.18) saturate(1.06)!important;
  border-color:rgba(167,138,248,.46)!important;
  box-shadow:0 36px 92px rgba(0,0,0,.42),0 0 62px rgba(141,92,246,.15)!important;
}
.scene-panel.is-past{
  opacity:.12!important;
  filter:brightness(.58) saturate(.55)!important;
}
.scene-panel.is-future{
  opacity:.025!important;
  filter:brightness(.42) saturate(.4)!important;
}


/* Build 16 — deterministic Selected Work track fix */
@media(min-width:901px){
  .work-pin{
    position:relative!important;
    height:100svh!important;
    overflow:hidden!important;
  }
  .work-slides{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:max-content!important;
    height:100%!important;
    transform:translate3d(0,0,0);
    will-change:transform;
  }
  .project{
    position:relative!important;
    inset:auto!important;
    flex:0 0 100vw!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    height:100svh!important;
    margin-left:0!important;
    clip-path:none!important;
    opacity:1!important;
    transform:none;
    filter:none;
    overflow:hidden;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .project + .project{
    margin-left:0!important;
    padding-left:clamp(1.25rem,4vw,4rem)!important;
  }

  /* A restrained angled seam gives a preview feeling without overlapping actual panels. */
  .project::before{
    opacity:.18!important;
  }
  .project::after{
    opacity:.85!important;
  }

  .project-copy,
  .project-visual,
  .project-world-label,
  .project-number{
    transition:none!important;
    will-change:transform,opacity;
  }
  .project.is-active .project-copy,
  .project.is-active .project-visual{
    opacity:1!important;
    filter:none!important;
  }
  .project.is-dimmed .project-copy{
    opacity:.72!important;
  }
  .project.is-dimmed .project-visual{
    opacity:.78!important;
    filter:saturate(.86) brightness(.9)!important;
  }
}

/* keep index legible on both dark and light chapters */
.project-birthday ~ * .work-index-item{color:#6d6673}
.work-index{
  background:linear-gradient(180deg,transparent,rgba(7,7,10,.18));
  padding-top:.5rem;
}


/* Build 17 — restore reliable pinned horizontal Selected Work */
@media(min-width:901px){
  .work-shell{
    position:relative;
    overflow:visible;
  }
  .work-pin{
    position:relative!important;
    width:100%!important;
    height:100svh!important;
    min-height:100svh!important;
    overflow:hidden!important;
  }
  .work-slides{
    display:flex!important;
    flex-wrap:nowrap!important;
    height:100%!important;
    width:300vw!important;
    max-width:none!important;
    transform:translate3d(0,0,0);
    will-change:transform;
  }
  .project{
    position:relative!important;
    inset:auto!important;
    flex:0 0 100vw!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    height:100svh!important;
    min-height:100svh!important;
    margin:0!important;
    padding-left:clamp(1.25rem,4vw,4rem)!important;
    padding-right:clamp(1.25rem,4vw,4rem)!important;
    clip-path:none!important;
    transform:none;
    opacity:1!important;
    filter:none!important;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .project + .project{
    margin-left:0!important;
  }
  .project::before{
    opacity:.12!important;
  }
}


/* Build 18 — simple sticky horizontal work track, no ScrollTrigger pinning */
@media(min-width:901px){
  .work-pin{
    position:relative!important;
    height:300svh!important;
    min-height:300svh!important;
    overflow:visible!important;
  }
  .work-sticky{
    position:sticky;
    top:0;
    height:100svh;
    overflow:hidden;
  }
  .work-slides{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:300vw!important;
    height:100%!important;
    transform:translate3d(0,0,0);
    will-change:transform;
  }
  .project{
    flex:0 0 100vw!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    height:100svh!important;
    min-height:100svh!important;
    margin:0!important;
    clip-path:none!important;
    transform:none;
    opacity:1!important;
    filter:none!important;
  }
  .project + .project{
    margin-left:0!important;
    padding-left:clamp(1.25rem,4vw,4rem)!important;
  }
  .work-progress,
  .work-index{
    position:absolute;
    z-index:30;
  }
  .work-progress{top:0;left:0;right:0}
  .work-index{bottom:1.2rem}
}

/* reduce secondary motion so the horizontal travel remains the star */
@media(min-width:901px){
  .project.is-dimmed .project-copy{opacity:.82!important}
  .project.is-dimmed .project-visual{opacity:.86!important;filter:saturate(.92) brightness(.94)!important}
}


/* Build 19 — selected work sync guard */
@media(min-width:901px){
  .work-slides{
    transform:none;
  }
}


/* Build 20 — definitive Selected Work transform fix.
   Earlier experimental CSS contains transform:none!important on .work-slides.
   This final rule intentionally wins the cascade and uses one CSS variable as the sole source of truth. */
@media(min-width:901px){
  .work-slides{
    --work-x:0px;
    display:flex!important;
    flex-wrap:nowrap!important;
    width:300vw!important;
    max-width:none!important;
    height:100%!important;
    transform:translate3d(var(--work-x),0,0)!important;
    will-change:transform;
  }
  .work-pin{
    height:300svh!important;
    min-height:300svh!important;
    overflow:visible!important;
  }
  .work-sticky{
    position:sticky!important;
    top:0!important;
    height:100svh!important;
    overflow:hidden!important;
  }
  .project{
    position:relative!important;
    flex:0 0 100vw!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    height:100svh!important;
    min-height:100svh!important;
    margin:0!important;
  }
}


/* Build 21 — friendlier light brand worlds for Selected Work */

/* KINTINUITY — patient-friendly, calm, clinical without feeling sterile */
.project-kintinuity{
  --project-primary:#11758E;
  --project-secondary:#8BD1D5;
  --project-warm:#FA987B;
  --project-anchor:#174A5A;
  --world-accent:17,117,142;
  background:
    radial-gradient(circle at 76% 36%,rgba(139,209,213,.34),transparent 30%),
    radial-gradient(circle at 88% 72%,rgba(250,152,123,.12),transparent 22%),
    linear-gradient(135deg,#F7F7F4 0%,#EFF8F8 45%,#E7F3F4 100%)!important;
  color:#14282F!important;
}
.project-kintinuity::after{
  background:
    radial-gradient(circle at 76% 44%,rgba(17,117,142,.12),transparent 28%),
    linear-gradient(125deg,rgba(139,209,213,.09),transparent 42%)!important;
}
.project-kintinuity::before{
  background:linear-gradient(90deg,transparent,rgba(17,117,142,.09))!important;
}
.project-kintinuity .project-label,
.project-kintinuity .project-number{color:#11758E!important}
.project-kintinuity .project-brand-dot{
  background:#FA987B!important;
  box-shadow:0 0 17px rgba(250,152,123,.38)!important;
}
.project-kintinuity h3{color:#14282F!important}
.project-kintinuity .project-copy>p:not(.project-label){color:#66747A!important}
.project-kintinuity .project-tags span{
  color:#174A5A!important;
  border-color:rgba(17,117,142,.2)!important;
  background:rgba(255,255,255,.42);
}
.project-kintinuity .project-copy a{
  color:#174A5A!important;
  border-color:rgba(17,117,142,.36)!important;
  background:linear-gradient(90deg,rgba(139,209,213,.22),rgba(255,255,255,.4))!important;
}
.project-kintinuity .project-world-label{color:rgba(23,74,90,.55)!important}
.project-kintinuity .glass-shell{
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(240,248,248,.66))!important;
  border-color:rgba(17,117,142,.16)!important;
  box-shadow:0 34px 90px rgba(17,117,142,.11),0 0 0 1px rgba(139,209,213,.08)!important;
}
.project-kintinuity .ui-title,
.project-kintinuity .ui-eyebrow{color:#174A5A!important}
.project-kintinuity .kin-card,
.project-kintinuity .kin-stats span{
  border-color:rgba(17,117,142,.12)!important;
  background:rgba(255,255,255,.65)!important;
}
.project-kintinuity .kin-strip{
  background:linear-gradient(90deg,#11758E,#8BD1D5)!important;
}
.project-kintinuity .project-glow{
  background:radial-gradient(circle,rgba(139,209,213,.28),rgba(17,117,142,.08) 46%,transparent 72%)!important;
}

/* LOBEWORK — warm off-white / soft gray with ink + orange signal accents */
.project-lobework{
  --project-primary:#FF7048;
  --project-secondary:#22212A;
  --project-accent:#8B79FF;
  --world-accent:255,112,72;
  background:
    radial-gradient(circle at 75% 38%,rgba(255,112,72,.13),transparent 24%),
    radial-gradient(circle at 86% 68%,rgba(139,121,255,.09),transparent 22%),
    linear-gradient(135deg,#F4F1EC 0%,#F8F7F3 50%,#EEEDEA 100%)!important;
  color:#1E1D25!important;
}
.project-lobework::after{
  background:
    radial-gradient(circle at 74% 44%,rgba(255,112,72,.10),transparent 25%),
    linear-gradient(125deg,rgba(34,33,42,.025),transparent 45%)!important;
}
.project-lobework::before{
  background:linear-gradient(90deg,transparent,rgba(255,112,72,.07))!important;
}
.project-lobework .project-label,
.project-lobework .project-number{color:#FF7048!important}
.project-lobework .project-brand-dot{
  background:#FF7048!important;
  box-shadow:0 0 18px rgba(255,112,72,.38)!important;
}
.project-lobework h3{color:#1E1D25!important}
.project-lobework .project-copy>p:not(.project-label){color:#5D5B65!important}
.project-lobework .project-tags span{
  color:#34323B!important;
  border-color:rgba(34,33,42,.14)!important;
  background:rgba(255,255,255,.46);
}
.project-lobework .project-copy a{
  color:#1E1D25!important;
  border-color:rgba(255,112,72,.30)!important;
  background:linear-gradient(90deg,rgba(255,112,72,.10),rgba(255,255,255,.42))!important;
}
.project-lobework .project-world-label{color:rgba(34,33,42,.42)!important}
.project-lobework .lobe-shell{
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(236,235,239,.70))!important;
  border-color:rgba(34,33,42,.12)!important;
  box-shadow:0 32px 82px rgba(34,33,42,.10),0 0 0 1px rgba(255,112,72,.04)!important;
}
.project-lobework .lobe-nav,
.project-lobework .lobe-stage i{
  border-color:rgba(34,33,42,.10)!important;
  background:rgba(255,255,255,.64)!important;
}
.project-lobework .lobe-modal{
  color:#1E1D25!important;
  border-color:rgba(255,112,72,.24)!important;
  background:rgba(255,255,255,.82)!important;
}
.project-lobework .project-glow{
  background:radial-gradient(circle,rgba(255,112,72,.14),rgba(139,121,255,.045) 42%,transparent 72%)!important;
}

/* BirthdayMe keeps its bright celebratory treatment; tighten text contrast slightly */
.project-birthday h3{color:#18151E!important}
.project-birthday .project-copy>p:not(.project-label){color:#6C6471!important}
.project-birthday .project-tags span{color:#6D586D!important}
.project-birthday .project-copy a{color:#3A243A!important}


/* Build 22 — Systems "deck of cards" depth reveal */
.systems-visual{overflow:visible}
.system-scene{width:min(620px,84%);overflow:visible}
.scene-panel,.system-surface{transform-origin:center center;will-change:transform,opacity,filter;transition:none!important}

.scene-panel{opacity:.04}
.scene-panel.is-current{
  opacity:1!important;
  filter:brightness(1.16) saturate(1.04)!important;
  border-color:rgba(167,138,248,.45)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 58px rgba(141,92,246,.14)!important;
}
.scene-panel.is-past{
  filter:brightness(.72) saturate(.72)!important;
  border-color:rgba(167,138,248,.16)!important;
}
.scene-panel.is-future{
  opacity:.025!important;
  filter:brightness(.44) saturate(.42)!important;
}

.system-surface{
  border-color:rgba(255,255,255,.18)!important;
  background:linear-gradient(145deg,rgba(28,29,36,.92),rgba(10,10,15,.86))!important;
  box-shadow:0 34px 88px rgba(0,0,0,.36)!important;
}

.systems-copy{z-index:12!important}
.systems-copy::after{
  content:"";
  position:absolute;
  inset:-3rem -4rem -3rem -4rem;
  z-index:-1;
  background:linear-gradient(90deg,rgba(9,9,13,.98) 0%,rgba(9,9,13,.9) 58%,rgba(9,9,13,.36) 82%,transparent 100%);
  pointer-events:none;
}

.scene-orbit{opacity:.34}
.scene-labels{opacity:.34}
.systems[data-system-state="5"] .scene-orbit{opacity:.62!important}
.systems[data-system-state="5"] .scene-labels{opacity:.7!important}
.systems[data-system-state="5"] .scene-core{box-shadow:0 0 84px rgba(141,92,246,.82)!important}

@media(max-width:1100px){
  .systems-copy::after{inset:-2rem -2rem -2rem -2rem}
}
@media(max-width:900px){
  .systems-copy::after{display:none}
}


/* Build 23 — keep passed Systems layers visibly persistent */
.scene-panel.is-past{
  opacity:.26!important;
  filter:brightness(.78) saturate(.78)!important;
  border-color:rgba(167,138,248,.18)!important;
}
.scene-panel.is-current{opacity:1!important}
.scene-panel.is-future{opacity:.035!important}

.systems[data-system-state="1"] .scene-panel.is-past{opacity:.30!important}
.systems[data-system-state="2"] .scene-panel.is-past{opacity:.27!important}
.systems[data-system-state="3"] .scene-panel.is-past{opacity:.24!important}
.systems[data-system-state="4"] .scene-panel.is-past{opacity:.22!important}
.systems[data-system-state="5"] .scene-panel.is-past{opacity:.20!important}

.systems-copy::after{
  background:linear-gradient(
    90deg,
    rgba(9,9,13,.96) 0%,
    rgba(9,9,13,.84) 44%,
    rgba(9,9,13,.52) 67%,
    rgba(9,9,13,.16) 87%,
    transparent 100%
  )!important;
}

.systems-visual{margin-left:-2vw}


/* Build 24 — lighter, selectable contact experience */
.contact-dialog{
  width:min(1080px,calc(100vw - 2rem));
  max-height:min(92svh,900px);
  padding:0;
  border:0;
  background:transparent;
  color:#19181f;
  overflow:visible;
}
.contact-dialog::backdrop{
  background:rgba(18,18,22,.42);
  backdrop-filter:blur(8px);
}
.contact-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(420px,1.28fr);
  min-height:650px;
  background:#f8f7f3;
  border:1px solid rgba(31,29,38,.12);
  box-shadow:0 28px 90px rgba(20,18,26,.22);
  overflow:hidden;
}
.contact-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,rgba(141,92,246,.10),transparent 25%),
    radial-gradient(circle at 88% 84%,rgba(250,64,5,.06),transparent 22%);
}
.close-contact{
  position:absolute;
  z-index:6;
  top:1.25rem;
  right:1.25rem;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(31,29,38,.14);
  background:rgba(255,255,255,.78);
  color:#24212a;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.close-contact:hover{transform:rotate(5deg);border-color:rgba(141,92,246,.34);background:#fff}

.contact-intro{
  position:relative;
  z-index:2;
  padding:clamp(3rem,6vw,5.5rem) clamp(2rem,4vw,4rem);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-right:1px solid rgba(31,29,38,.10);
  background:linear-gradient(155deg,#f1eee8 0%,#f8f7f3 58%,#eeeaf7 100%);
}
.contact-kicker{
  margin:0 0 1.2rem;
  font:500 .68rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#7659d8;
}
.contact-intro h2{
  margin:0;
  font:600 clamp(3.4rem,6vw,6.2rem)/.84 var(--display);
  text-transform:uppercase;
  letter-spacing:-.055em;
  color:#15141a;
}
.contact-lede{
  margin:1.7rem 0 0;
  max-width:32ch;
  font:400 clamp(1rem,1.2vw,1.14rem)/1.65 var(--poppins);
  color:#68636f;
}

.contact-form-body{
  position:relative;
  z-index:2;
  padding:clamp(4.8rem,7vw,6.2rem) clamp(2rem,4vw,4rem) clamp(2.5rem,4vw,3.5rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.project-fieldset{border:0;padding:0;margin:0 0 2rem}
.project-fieldset legend{
  margin-bottom:1rem;
  font:600 clamp(1.35rem,2vw,1.8rem) var(--poppins);
  letter-spacing:-.03em;
  color:#1b1920;
}
.contact-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}
.contact-options button{
  min-height:66px;
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.95rem 1rem;
  border:1px solid rgba(31,29,38,.13);
  background:rgba(255,255,255,.62);
  color:#35313b;
  font:500 .86rem var(--poppins);
  text-align:left;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease;
}
.contact-options button span{
  font:500 .58rem var(--mono);
  color:#9b94a4;
}
.contact-options button:hover{
  transform:translateY(-2px);
  border-color:rgba(141,92,246,.28);
  background:#fff;
  box-shadow:0 10px 24px rgba(26,22,34,.06);
}
.contact-options button.is-selected,
.contact-options button[aria-pressed="true"]{
  border-color:rgba(117,83,219,.44);
  background:linear-gradient(135deg,rgba(141,92,246,.10),rgba(255,255,255,.96));
  color:#5135b5;
  box-shadow:0 10px 24px rgba(93,65,176,.08);
}
.contact-options button.is-selected span,
.contact-options button[aria-pressed="true"] span{color:#7659d8}

.contact-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.contact-fields label{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.contact-fields label>span{
  font:500 .62rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#797380;
}
.contact-fields input,
.contact-fields textarea{
  width:100%;
  border:1px solid rgba(31,29,38,.14);
  background:rgba(255,255,255,.72);
  color:#1c1a21;
  border-radius:0;
  padding:1rem 1.05rem;
  outline:none;
  font:400 1rem var(--poppins);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.contact-fields input::placeholder,
.contact-fields textarea::placeholder{color:#a8a2ad}
.contact-fields input:focus,
.contact-fields textarea:focus{
  border-color:rgba(117,83,219,.46);
  background:#fff;
  box-shadow:0 0 0 3px rgba(141,92,246,.08);
}
.message-field{grid-column:1/-1}
.contact-fields textarea{resize:vertical;min-height:150px}

.contact-submit-row{
  margin-top:1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.contact-submit{
  min-width:220px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  border:0;
  background:#19181f;
  color:#fff;
  padding:1rem 1.15rem;
  font:500 .72rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.contact-submit:hover{
  transform:translateY(-2px);
  background:#5d43bd;
  box-shadow:0 12px 28px rgba(93,67,189,.18);
}
.form-note{
  margin:0;
  max-width:24ch;
  font:400 .72rem/1.5 var(--mono);
  color:#88828d;
}

@media(max-width:820px){
  .contact-dialog{width:min(94vw,720px);max-height:94svh;overflow:auto}
  .contact-panel{grid-template-columns:1fr;min-height:auto}
  .contact-intro{min-height:280px;border-right:0;border-bottom:1px solid rgba(31,29,38,.10);padding:3rem 2rem 2.2rem;justify-content:flex-end}
  .contact-intro h2{font-size:clamp(3rem,11vw,5rem)}
  .contact-form-body{padding:2.2rem 2rem 2.5rem}
}
@media(max-width:560px){
  .contact-options{grid-template-columns:1fr}
  .contact-fields{grid-template-columns:1fr}
  .message-field{grid-column:auto}
  .contact-submit-row{align-items:flex-start;flex-direction:column}
  .contact-submit{width:100%}
}


/* Build 25 — adaptive contact form */
.contact-panel{
  grid-template-columns:minmax(300px,.64fr) minmax(520px,1.36fr)!important;
  min-height:690px;
}
.contact-intro{
  overflow:hidden;
}
.contact-intro h2{
  font-size:clamp(3.6rem,5.3vw,5.8rem)!important;
  line-height:.88!important;
  max-width:6.6ch;
  overflow-wrap:normal;
}
.contact-lede{
  max-width:29ch!important;
}
.contact-personalized{
  min-height:1.4em;
  margin:1.2rem 0 0;
  font:500 .72rem/1.5 var(--mono);
  letter-spacing:.04em;
  color:#7659d8;
}
.contact-form-body{
  justify-content:flex-start!important;
  overflow:auto;
  max-height:88svh;
}
.contact-fields-primary{
  margin-bottom:1.5rem;
}
.contact-select-block{
  margin-bottom:1.25rem;
}
.select-label{
  display:block;
  margin-bottom:.7rem;
  font:600 clamp(1.35rem,1.8vw,1.7rem) var(--poppins);
  letter-spacing:-.03em;
  color:#1b1920;
}
.select-wrap{position:relative}
.select-wrap::after{
  content:"↓";
  position:absolute;
  right:1.1rem;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font:500 .78rem var(--mono);
  color:#7659d8;
}
.select-wrap select{
  width:100%;
  appearance:none;
  border:1px solid rgba(31,29,38,.14);
  background:#fff;
  color:#26232c;
  padding:1rem 3rem 1rem 1rem;
  font:500 1rem var(--poppins);
  outline:none;
  cursor:pointer;
}
.select-wrap select:focus{
  border-color:rgba(117,83,219,.46);
  box-shadow:0 0 0 3px rgba(141,92,246,.08);
}

.adaptive-questions{
  min-height:124px;
  margin-bottom:1.25rem;
  padding:1rem;
  border:1px solid rgba(31,29,38,.10);
  background:linear-gradient(135deg,rgba(255,255,255,.54),rgba(242,239,248,.55));
}
.adaptive-empty{
  min-height:90px;
  display:flex;
  align-items:center;
}
.adaptive-empty p{
  margin:0;
  max-width:34ch;
  font:400 .92rem/1.55 var(--poppins);
  color:#817a87;
}
.adaptive-panel[hidden]{display:none!important}
.adaptive-panel{
  animation:adaptiveIn .25s ease both;
}
@keyframes adaptiveIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.adaptive-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  align-items:end;
}
.adaptive-grid>label,
.adaptive-panel>label,
.choice-field{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.adaptive-grid label>span,
.adaptive-panel label>span,
.choice-field legend{
  margin-bottom:.5rem;
  font:500 .62rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#77717e;
}
.adaptive-grid input,
.adaptive-panel input,
.adaptive-grid select{
  width:100%;
  border:1px solid rgba(31,29,38,.13);
  background:rgba(255,255,255,.82);
  color:#201e24;
  padding:.9rem 1rem;
  font:400 .92rem var(--poppins);
  outline:none;
}
.adaptive-grid input:focus,
.adaptive-panel input:focus,
.adaptive-grid select:focus{
  border-color:rgba(117,83,219,.42);
  box-shadow:0 0 0 3px rgba(141,92,246,.07);
}
.choice-field{border:0;padding:0;margin:0}
.segmented-choice{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.segmented-choice label{position:relative}
.segmented-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.segmented-choice span{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  border:1px solid rgba(31,29,38,.13);
  background:rgba(255,255,255,.68);
  font:500 .85rem var(--poppins);
  cursor:pointer;
}
.segmented-choice label+label span{border-left:0}
.segmented-choice input:checked+span{
  background:linear-gradient(135deg,rgba(141,92,246,.13),rgba(255,255,255,.96));
  color:#5639b7;
  border-color:rgba(117,83,219,.34);
}
.conditional-field[hidden]{display:none!important}
.contact-form-body>.message-field{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.contact-form-body>.message-field>span{
  font:500 .62rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#797380;
}
.contact-form-body>.message-field textarea{
  width:100%;
  min-height:135px;
  border:1px solid rgba(31,29,38,.14);
  background:rgba(255,255,255,.72);
  color:#1c1a21;
  padding:1rem 1.05rem;
  font:400 1rem var(--poppins);
  outline:none;
  resize:vertical;
}
.contact-form-body>.message-field textarea:focus{
  border-color:rgba(117,83,219,.46);
  background:#fff;
  box-shadow:0 0 0 3px rgba(141,92,246,.08);
}

@media(max-width:900px){
  .contact-panel{grid-template-columns:1fr!important}
  .contact-intro h2{max-width:none}
}
@media(max-width:620px){
  .adaptive-grid{grid-template-columns:1fr}
}


/* Build 26 — 5-step guided contact diagnostic */
.contact-dialog{
  width:min(1120px,calc(100vw - 2rem));
  max-height:94svh;
  padding:0;
  border:0;
  background:transparent;
  color:#1a1820;
}
.contact-dialog::backdrop{
  background:rgba(15,15,20,.42);
  backdrop-filter:blur(8px);
}
.contact-panel{
  min-height:680px!important;
  display:block!important;
  background:#f8f7f3!important;
  border:1px solid rgba(31,29,38,.12)!important;
  box-shadow:0 30px 100px rgba(15,13,20,.24)!important;
  overflow:hidden!important;
}
.wizard-shell{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  min-height:680px;
}
.wizard-rail{
  position:relative;
  padding:2.2rem 1.7rem;
  border-right:1px solid rgba(31,29,38,.10);
  background:
    radial-gradient(circle at 20% 14%,rgba(141,92,246,.10),transparent 28%),
    linear-gradient(180deg,#f0ede7,#f7f5f0 58%,#efebf7);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.wizard-brand p{
  margin:0;
  font:500 .68rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#7659d8;
}
.wizard-brand span{
  display:block;
  margin-top:.45rem;
  font:400 .68rem var(--mono);
  color:#97909b;
}
.wizard-progress{
  margin-top:auto;
  margin-bottom:auto;
}
.wizard-progress-line{
  height:1px;
  background:rgba(31,29,38,.12);
  margin-bottom:1.35rem;
  overflow:hidden;
}
.wizard-progress-line span{
  display:block;
  width:20%;
  height:100%;
  background:linear-gradient(90deg,#7659d8,#a98cff);
  transition:width .35s ease;
}
.wizard-progress ol{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.8rem;
}
.wizard-progress li{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:.55rem;
  min-height:34px;
  color:#9a949d;
  transition:color .25s ease,transform .25s ease;
}
.wizard-progress li span{
  font:500 .58rem var(--mono);
  letter-spacing:.08em;
}
.wizard-progress li b{
  font:500 .76rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.07em;
}
.wizard-progress li.is-active{
  color:#4f35b2;
  transform:translateX(3px);
}
.wizard-progress li.is-complete{
  color:#4b4851;
}
.wizard-rail-note{
  font:400 .68rem/1.5 var(--mono);
  color:#8d8792;
}
.wizard-rail-note p{margin:0}

.close-contact{
  top:1rem!important;
  right:1rem!important;
  z-index:20!important;
}

.wizard-stage{
  position:relative;
  min-width:0;
  padding:clamp(4.2rem,7vw,5.8rem) clamp(2rem,5vw,4.5rem) 2rem;
  display:flex;
  flex-direction:column;
}
.wizard-step{
  flex:1;
  animation:wizardStepIn .32s ease both;
}
.wizard-step[hidden]{display:none!important}
@keyframes wizardStepIn{
  from{opacity:0;transform:translateX(14px)}
  to{opacity:1;transform:none}
}
.wizard-step-head{
  margin-bottom:2rem;
}
.wizard-kicker{
  margin:0 0 .9rem;
  font:500 .62rem var(--mono);
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#7659d8;
}
.wizard-step-head h2{
  margin:0;
  max-width:15ch;
  font:600 clamp(2.6rem,4.7vw,4.8rem)/.95 var(--display);
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:#17151b;
}
.wizard-step-head p:not(.wizard-kicker){
  margin:1rem 0 0;
  max-width:44ch;
  font:400 1rem/1.6 var(--poppins);
  color:#74707a;
}

.wizard-fields{
  display:grid;
  gap:1rem;
}
.wizard-fields.two-col{
  grid-template-columns:1fr 1fr;
}
.wizard-fields label,
.context-block>label{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.wizard-fields label>span,
.context-block>label>span,
.choice-field legend{
  font:500 .62rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#77717e;
}
.wizard-fields input,
.context-block input,
.context-block textarea{
  width:100%;
  border:1px solid rgba(31,29,38,.13);
  background:#fff;
  color:#201e24;
  padding:1rem;
  font:400 1rem var(--poppins);
  outline:none;
}
.wizard-fields input:focus,
.context-block input:focus,
.context-block textarea:focus{
  border-color:rgba(117,83,219,.42);
  box-shadow:0 0 0 3px rgba(141,92,246,.07);
}

.ask-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
.ask-grid button{
  min-height:118px;
  padding:1rem;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:.25rem .7rem;
  text-align:left;
  border:1px solid rgba(31,29,38,.12);
  background:rgba(255,255,255,.7);
  color:#26232b;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.ask-grid button>span{
  grid-row:1/3;
  font:500 .58rem var(--mono);
  color:#aaa3ad;
}
.ask-grid button strong{
  font:600 1rem var(--poppins);
}
.ask-grid button em{
  font:400 .76rem/1.45 var(--poppins);
  color:#7a747f;
  font-style:normal;
}
.ask-grid button:hover{
  transform:translateY(-2px);
  border-color:rgba(117,83,219,.28);
  background:#fff;
  box-shadow:0 12px 28px rgba(47,39,69,.06);
}
.ask-grid button.is-selected{
  border-color:rgba(117,83,219,.46);
  background:linear-gradient(135deg,rgba(141,92,246,.11),rgba(255,255,255,.96));
  box-shadow:0 12px 28px rgba(85,59,165,.08);
}
.ask-grid button.is-selected strong{color:#5538b8}

.painpoint-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}
.painpoint-grid button{
  min-height:64px;
  padding:.9rem 1rem;
  border:1px solid rgba(31,29,38,.12);
  background:#fff;
  color:#34303a;
  text-align:left;
  font:500 .88rem/1.35 var(--poppins);
  cursor:pointer;
  position:relative;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.painpoint-grid button::after{
  content:"+";
  position:absolute;
  right:.9rem;
  top:50%;
  transform:translateY(-50%);
  font:500 1rem var(--mono);
  color:#a69faa;
}
.painpoint-grid button:hover{
  transform:translateY(-1px);
  border-color:rgba(117,83,219,.27);
}
.painpoint-grid button.is-selected{
  border-color:rgba(117,83,219,.42);
  background:linear-gradient(135deg,rgba(141,92,246,.11),rgba(255,255,255,.98));
  color:#5135b5;
}
.painpoint-grid button.is-selected::after{
  content:"✓";
  color:#5b3fc0;
}

.context-block{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:1rem;
  align-items:start;
}
.existing-choice{
  border:0;
  padding:0;
  margin:0;
}
.context-url-field{
  align-self:end;
}
.context-notes-field{
  grid-column:1/-1;
}
.context-block textarea{
  min-height:160px;
  resize:vertical;
}

.segmented-choice{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.segmented-choice label{position:relative}
.segmented-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.segmented-choice span{
  display:flex;
  min-height:50px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(31,29,38,.13);
  background:#fff;
  font:500 .85rem var(--poppins);
  cursor:pointer;
}
.segmented-choice label+label span{border-left:0}
.segmented-choice input:checked+span{
  border-color:rgba(117,83,219,.36);
  background:linear-gradient(135deg,rgba(141,92,246,.12),#fff);
  color:#5639b7;
}

.review-card{
  border:1px solid rgba(31,29,38,.11);
  background:rgba(255,255,255,.68);
}
.review-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid rgba(31,29,38,.09);
}
.review-row:last-child{border-bottom:0}
.review-row>div{
  display:grid;
  gap:.3rem;
}
.review-row span{
  font:500 .58rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#97909c;
}
.review-row strong{
  max-width:48ch;
  font:500 .93rem/1.45 var(--poppins);
  color:#27242c;
}
.review-row button{
  border:0;
  background:transparent;
  color:#6c50d0;
  font:500 .66rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.07em;
  cursor:pointer;
}
.review-submit{
  margin-top:1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.review-submit p{
  margin:0;
  font:400 .82rem var(--mono);
  color:#8b8590;
}

.wizard-controls{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid rgba(31,29,38,.09);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
}
.wizard-back,
.wizard-next{
  border:0;
  background:transparent;
  cursor:pointer;
  font:500 .72rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.wizard-back{
  justify-self:start;
  color:#6d6872;
}
.wizard-next{
  justify-self:end;
  min-width:150px;
  padding:.95rem 1rem;
  background:#19181f;
  color:#fff;
  transition:transform .2s ease,background .2s ease;
}
.wizard-next:hover{
  transform:translateY(-2px);
  background:#5d43bd;
}
.wizard-step-count{
  display:flex;
  gap:.3rem;
  font:500 .62rem var(--mono);
  color:#918a95;
}
.wizard-step-count span:first-child{color:#684dc8}

.contact-submit{
  min-width:180px;
  border:0;
  background:#19181f;
  color:#fff;
  padding:1rem 1.1rem;
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  font:500 .72rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
}

@media(max-width:860px){
  .contact-dialog{width:min(95vw,760px);max-height:95svh;overflow:auto}
  .wizard-shell{grid-template-columns:1fr;min-height:auto}
  .wizard-rail{
    padding:1rem 1.2rem;
    border-right:0;
    border-bottom:1px solid rgba(31,29,38,.09);
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:1rem;
  }
  .wizard-progress{
    margin:0;
  }
  .wizard-progress ol{
    grid-template-columns:repeat(5,1fr);
    gap:.25rem;
  }
  .wizard-progress li{
    grid-template-columns:1fr;
    min-height:auto;
    text-align:center;
  }
  .wizard-progress li b{display:none}
  .wizard-progress-line{margin-bottom:.6rem}
  .wizard-rail-note{display:none}
  .wizard-stage{padding:3.6rem 1.4rem 1.4rem}
}
@media(max-width:620px){
  .wizard-fields.two-col,
  .ask-grid,
  .painpoint-grid,
  .context-block{
    grid-template-columns:1fr;
  }
  .context-notes-field{grid-column:auto}
  .wizard-step-head h2{font-size:clamp(2.4rem,12vw,3.6rem)}
  .review-submit{
    align-items:flex-start;
    flex-direction:column;
  }
  .contact-submit{width:100%}
}


/* Build 28 — multi-select intake, short-height responsiveness, review ID, success state */

.contact-dialog{
  width:min(1120px,calc(100vw - 20px))!important;
  max-height:calc(100dvh - 20px)!important;
  overflow:hidden!important;
}
.contact-panel{
  height:min(760px,calc(100dvh - 20px))!important;
  min-height:0!important;
}
.wizard-shell{
  height:100%!important;
  min-height:0!important;
}
.wizard-stage{
  min-height:0;
  overflow:hidden;
  padding-bottom:0!important;
}
.wizard-step{
  min-height:0;
  overflow:auto;
  padding-right:.35rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(117,83,219,.25) transparent;
}
.wizard-step::-webkit-scrollbar{width:7px}
.wizard-step::-webkit-scrollbar-thumb{background:rgba(117,83,219,.22);border-radius:10px}
.wizard-controls{
  position:sticky;
  bottom:0;
  z-index:12;
  margin-top:auto!important;
  padding:1rem 0 1.1rem!important;
  background:linear-gradient(180deg,rgba(248,247,243,0),#f8f7f3 24%);
}
.wizard-step-head h2{
  max-width:16ch!important;
}
.ask-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin:-.7rem 0 .85rem;
}
.ask-toolbar button{
  border:0;
  background:transparent;
  color:#6045c1;
  padding:0;
  font:500 .66rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.07em;
  cursor:pointer;
}
.ask-toolbar span{
  font:400 .66rem var(--mono);
  color:#98919d;
}
.ask-grid button.is-selected{
  border-color:rgba(117,83,219,.5)!important;
  background:linear-gradient(135deg,rgba(141,92,246,.13),rgba(255,255,255,.98))!important;
}
.ask-grid button.is-selected::after{
  content:"✓";
  position:absolute;
  right:.9rem;
  top:.8rem;
  color:#6548c8;
  font:600 .72rem var(--mono);
}
.ask-grid button{position:relative}

.other-description{
  margin-top:.8rem;
  padding:1rem;
  border:1px solid rgba(117,83,219,.16);
  background:rgba(141,92,246,.045);
}
.other-description label{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.other-description label span,
.reference-row label span{
  font:500 .6rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7b7480;
}
.other-description input,
.reference-row input{
  width:100%;
  border:1px solid rgba(31,29,38,.13);
  background:#fff;
  color:#211f25;
  padding:.85rem .9rem;
  font:400 .9rem var(--poppins);
  outline:none;
}
.other-description input:focus,
.reference-row input:focus{
  border-color:rgba(117,83,219,.4);
  box-shadow:0 0 0 3px rgba(141,92,246,.07);
}

.references-wrap{
  grid-column:1/-1;
}
.reference-list{
  display:grid;
  gap:.75rem;
}
.reference-row{
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:.75rem;
}
.reference-row label{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.add-reference{
  margin-top:.7rem;
  border:0;
  background:transparent;
  color:#6247c3;
  padding:0;
  font:500 .66rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.07em;
  cursor:pointer;
}
.request-id-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
  padding:.8rem 1rem;
  border:1px solid rgba(117,83,219,.15);
  background:linear-gradient(90deg,rgba(141,92,246,.07),rgba(255,255,255,.7));
}
.request-id-strip span{
  font:500 .58rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8e8792;
}
.request-id-strip strong{
  font:600 .78rem var(--mono);
  color:#5c41bd;
  letter-spacing:.06em;
}
.success-step{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  min-height:100%;
  max-width:620px;
}
.success-step[hidden]{display:none!important}
.success-mark{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:1.4rem;
  background:linear-gradient(135deg,#6548c8,#a88cff);
  color:#fff;
  font:600 1.15rem var(--poppins);
  box-shadow:0 16px 34px rgba(101,72,200,.18);
}
.success-step h2{
  margin:0;
  font:600 clamp(3rem,5vw,5.4rem)/.9 var(--display);
  text-transform:uppercase;
  letter-spacing:-.05em;
  color:#17151b;
}
.success-copy{
  margin:1.2rem 0 .5rem;
  font:400 1rem/1.6 var(--poppins);
  color:#716b75;
}
.success-request-id{
  display:inline-block;
  margin:.35rem 0 1.25rem;
  font:600 1.05rem var(--mono);
  color:#5d43bd;
  letter-spacing:.06em;
}
.success-note{
  max-width:52ch;
  margin:0;
  font:400 .75rem/1.6 var(--mono);
  color:#8a8490;
}
.success-close{
  margin-top:1.5rem;
  min-width:150px;
  border:0;
  background:#19181f;
  color:#fff;
  padding:.95rem 1rem;
  font:500 .7rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
}

/* Short laptop-height optimization */
@media (min-width:861px) and (max-height:780px){
  .wizard-shell{grid-template-columns:220px minmax(0,1fr)}
  .wizard-rail{padding:1.25rem 1.2rem!important}
  .wizard-stage{padding:2.75rem 2.5rem 0!important}
  .wizard-step-head{margin-bottom:1.15rem!important}
  .wizard-step-head h2{font-size:clamp(2.35rem,4.3vw,3.8rem)!important}
  .wizard-step-head p:not(.wizard-kicker){margin-top:.65rem!important;font-size:.88rem!important}
  .ask-grid{gap:.55rem!important}
  .ask-grid button{min-height:86px!important;padding:.75rem!important}
  .painpoint-grid button{min-height:52px!important;padding:.75rem .9rem!important}
  .wizard-progress ol{gap:.45rem!important}
  .wizard-progress li{min-height:27px!important}
  .wizard-controls{padding:.7rem 0 .8rem!important}
}

@media(max-width:860px){
  .contact-dialog{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
  }
  .contact-panel{
    height:100dvh!important;
    min-height:100dvh!important;
    border:0!important;
  }
  .wizard-shell{
    height:100dvh!important;
  }
  .wizard-stage{
    min-height:0;
    overflow:hidden;
  }
  .wizard-step{
    padding-right:0;
  }
}
@media(max-width:620px){
  .ask-toolbar{align-items:flex-start;flex-direction:column;gap:.35rem}
  .reference-row{grid-template-columns:1fr}
}

.painpoint-grid button{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.painpoint-grid button small{
  flex:0 0 auto;
  font:500 .55rem var(--mono);
  letter-spacing:.06em;
  color:#9992a0;
}
.painpoint-grid button.is-selected small{color:#6c50cd}


/* Build 29 — confirmation polish + cleaner pain-point action spacing */

.painpoint-grid button{
  padding-right:3.25rem!important;
}
.painpoint-grid button small{
  margin-right:.65rem;
  padding-right:.4rem;
  white-space:nowrap;
}
.painpoint-grid button::after{
  right:1rem!important;
  width:1.2rem;
  text-align:center;
}
.painpoint-grid button.is-selected::after{
  right:1rem!important;
}

/* Friendlier confirmation screen */
.success-step{
  max-width:700px!important;
  padding:1rem 0 2rem;
}
.success-step h2{
  max-width:10ch;
  font-size:clamp(3.2rem,5.1vw,5.6rem)!important;
  line-height:.9!important;
}
.success-copy{
  max-width:42ch;
  font-size:1.05rem!important;
}
.success-request-id{
  margin:.45rem 0 1.5rem!important;
  padding:.75rem 1rem;
  border:1px solid rgba(117,83,219,.18);
  background:linear-gradient(90deg,rgba(141,92,246,.075),rgba(255,255,255,.7));
  font-size:1rem!important;
}
.success-summary{
  width:min(100%,620px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  margin:0 0 1.4rem;
}
.success-summary>div{
  min-height:132px;
  padding:1rem;
  border:1px solid rgba(31,29,38,.10);
  background:rgba(255,255,255,.65);
}
.success-summary span{
  display:block;
  margin-bottom:.55rem;
  font:500 .58rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7659d8;
}
.success-summary p{
  margin:0;
  font:400 .86rem/1.55 var(--poppins);
  color:#6f6874;
}
.success-summary strong{
  color:#37313d;
  font-weight:600;
}
.success-close{
  min-width:180px!important;
  padding:1rem 1.15rem!important;
}
@media(max-width:620px){
  .success-summary{grid-template-columns:1fr}
  .success-step h2{font-size:clamp(2.8rem,13vw,4.4rem)!important}
}


/* Build 30 — production contact delivery states */
.hp-field{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.submit-feedback{
  min-height:1.25rem;
  margin-top:1rem;
  font:500 .68rem/1.5 var(--mono);
  color:#a03d45;
}
.submit-feedback.is-ok{color:#4f7d67}
.contact-submit[disabled]{
  cursor:wait;
  opacity:.72;
  transform:none!important;
}


/* Build 32 — spatial storytelling + system map + Barba transition shell */

.systems-stage{
  --system-camera-x:0px;
  --system-camera-y:0px;
}
.systems-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 46%,rgba(137,92,246,.13),transparent 25%),
    radial-gradient(circle at 72% 46%,transparent 0 14%,rgba(137,92,246,.035) 14.2% 14.5%,transparent 14.7% 25%,rgba(137,92,246,.025) 25.2% 25.4%,transparent 25.6%);
  mix-blend-mode:screen;
  opacity:.9;
}
.systems-explore{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  margin-top:1.35rem;
  padding:.72rem 0;
  border:0;
  border-bottom:1px solid rgba(177,150,255,.34);
  background:transparent;
  color:#d5c9ff;
  cursor:pointer;
  font:500 .61rem var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
  position:relative;
  z-index:20;
}
.systems-explore span:last-child{
  transition:transform .28s ease;
}
.systems-explore:hover span:last-child{
  transform:translate(4px,-4px);
}
.systems-depth-field{
  position:absolute;
  inset:-24% -24%;
  transform-style:preserve-3d;
  pointer-events:none;
  opacity:.65;
}
.systems-depth-field span{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(120px,16vw,250px);
  aspect-ratio:1;
  border:1px solid rgba(153,116,255,.09);
  transform:translate(-50%,-50%) rotate(45deg);
}
.systems-depth-field span:nth-child(1){scale:.65}
.systems-depth-field span:nth-child(2){scale:1.1}
.systems-depth-field span:nth-child(3){scale:1.55}
.systems-depth-field span:nth-child(4){scale:2.05}
.systems-depth-field span:nth-child(5){scale:2.65}
.systems-depth-field span:nth-child(6){scale:3.35}
.system-coordinate{
  position:absolute;
  top:5%;
  right:2%;
  z-index:8;
  color:#5f5a69;
  font:500 .52rem var(--mono);
  letter-spacing:.08em;
  white-space:nowrap;
}
.systems-visual::after{
  content:"DEPTH / LOGIC / FLOW";
  position:absolute;
  right:2%;
  bottom:4%;
  color:#514c59;
  font:500 .5rem var(--mono);
  letter-spacing:.1em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
}
.system-scene{
  transform-origin:50% 50%;
}
.scene-panel{
  box-shadow:
    0 34px 90px rgba(0,0,0,.30),
    inset 0 0 42px rgba(153,116,255,.02);
}
.scene-panel.is-current{
  box-shadow:
    0 42px 110px rgba(0,0,0,.38),
    0 0 60px rgba(134,86,255,.08),
    inset 0 0 48px rgba(167,138,248,.035);
}
.scene-core{
  animation:systemCorePulse 3.8s ease-in-out infinite;
}
@keyframes systemCorePulse{
  0%,100%{filter:brightness(.9);transform:translateZ(55px) scale(.92)}
  50%{filter:brightness(1.25);transform:translateZ(55px) scale(1.08)}
}

/* Immersive spatial explorer */
.system-explorer[hidden]{display:none!important}
.system-explorer{
  position:fixed;
  inset:0;
  z-index:9990;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(119,75,230,.13),transparent 26%),
    linear-gradient(180deg,#08080b,#050507);
  color:#f5f2ee;
}
.system-explorer::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:7vw 7vw;
  transform:perspective(900px) rotateX(62deg) translateY(14%);
  transform-origin:center 70%;
  mask-image:linear-gradient(to bottom,transparent 5%,#000 48%,transparent 92%);
}
.system-explorer.is-open{
  display:block;
}
.system-explorer-chrome{
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 1.7rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(#08080be8,#08080b80,transparent);
}
.system-explorer-brand{
  display:flex;
  align-items:center;
  gap:1rem;
  font:500 .58rem var(--mono);
  letter-spacing:.11em;
  color:#9b93a4;
}
.system-explorer-brand b{
  color:#cbbdff;
  font-weight:500;
}
.system-explorer-close{
  border:0;
  background:transparent;
  color:#d9d4de;
  cursor:pointer;
  font:500 .6rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.system-explorer-hint{
  position:absolute;
  z-index:30;
  left:1.7rem;
  bottom:1.55rem;
  color:#655f6c;
  font:500 .5rem var(--mono);
  letter-spacing:.11em;
}
.system-impress{
  position:absolute!important;
  inset:0;
  width:1600px!important;
  height:900px!important;
  margin:auto;
  transform-origin:center center;
}
.system-impress-step{
  width:700px;
  min-height:390px;
  padding:3rem;
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(116,76,220,.035)),
    rgba(13,13,18,.86);
  box-shadow:0 50px 140px rgba(0,0,0,.43);
  backdrop-filter:blur(18px);
  opacity:.18;
  transition:opacity .5s ease,filter .5s ease,border-color .5s ease,box-shadow .5s ease;
  filter:blur(1.2px);
}
.system-impress-step.active,
.system-impress-step.present{
  opacity:1;
  filter:none;
  border-color:rgba(174,146,255,.34);
  box-shadow:0 54px 170px rgba(0,0,0,.55),0 0 85px rgba(126,82,239,.13);
}
.system-impress-step.past{opacity:.1}
.system-impress-step.future{opacity:.16}
.system-impress-step>span{
  display:block;
  color:#a991fb;
  font:500 .61rem var(--mono);
  letter-spacing:.1em;
  margin-bottom:1.2rem;
}
.system-impress-step h3{
  margin:0;
  max-width:8ch;
  color:#f6f3ef;
  font:500 clamp(4rem,6.3vw,7.4rem)/.88 var(--display);
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.system-impress-step p{
  max-width:39ch;
  margin:1.5rem 0 0;
  color:#aaa4af;
  font:400 .85rem/1.7 var(--mono);
}
.impress-glyph{
  position:absolute;
  right:3rem;
  bottom:3rem;
  width:170px;
  height:170px;
  border:1px solid rgba(158,121,250,.15);
  transform:rotate(45deg);
}
.impress-glyph i{
  position:absolute;
  display:block;
  border:1px solid rgba(195,177,255,.36);
}
.glyph-interface i{left:20%;right:20%;height:15%}
.glyph-interface i:nth-child(1){top:20%}
.glyph-interface i:nth-child(2){top:43%;right:42%}
.glyph-interface i:nth-child(3){bottom:18%;left:35%}
.glyph-nodes i{width:16px;height:16px;border-radius:50%;background:#8d5cf6}
.glyph-nodes i:nth-child(1){left:18%;top:18%}
.glyph-nodes i:nth-child(2){right:16%;top:22%}
.glyph-nodes i:nth-child(3){left:35%;bottom:20%}
.glyph-nodes i:nth-child(4){right:26%;bottom:16%}
.glyph-flow i{height:1px;width:68%;left:16%;background:#a88cff}
.glyph-flow i:nth-child(1){top:28%;rotate:12deg}
.glyph-flow i:nth-child(2){top:49%;rotate:-18deg}
.glyph-flow i:nth-child(3){top:70%;rotate:8deg}
.glyph-data i{width:12px;height:12px;border-radius:50%;background:#aa8dff}
.glyph-data i:nth-child(1){left:18%;top:22%}
.glyph-data i:nth-child(2){left:48%;top:14%}
.glyph-data i:nth-child(3){right:16%;top:38%}
.glyph-data i:nth-child(4){left:28%;bottom:18%}
.glyph-data i:nth-child(5){right:26%;bottom:16%}
.glyph-auto i{width:40%;height:23%}
.glyph-auto i:nth-child(1){left:10%;top:13%}
.glyph-auto i:nth-child(2){right:10%;top:30%}
.glyph-auto i:nth-child(3){left:18%;bottom:15%}
.glyph-auto i:nth-child(4){right:12%;bottom:12%}
.glyph-infra i{background:rgba(163,134,244,.055)}
.glyph-infra i:nth-child(1){inset:12% 52% 52% 12%}
.glyph-infra i:nth-child(2){inset:42% 12% 12% 48%}
.glyph-infra i:nth-child(3){inset:18% 18% 48% 52%}
.system-impress-overview{
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
.system-impress-overview h3{
  max-width:11ch;
  font-size:7.5rem;
}
.system-explorer-nav{
  position:absolute;
  z-index:40;
  left:50%;
  bottom:1.15rem;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:1rem;
}
.system-explorer-nav>button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(16,15,20,.68);
  color:#ddd7e2;
  cursor:pointer;
}
.system-explorer-dots{
  display:flex;
  align-items:center;
  gap:.48rem;
  padding:.65rem .85rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(15,14,19,.66);
}
.system-explorer-dots button{
  width:6px;
  height:6px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#4d4852;
  cursor:pointer;
  transition:width .24s ease,background .24s ease,border-radius .24s ease;
}
.system-explorer-dots button.is-active{
  width:23px;
  border-radius:5px;
  background:#a98bfd;
}

/* Page transition shell — Barba ready */
.page-transition{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:#08080b;
  transform:translateY(-102%);
  will-change:transform;
}
.page-transition-mark{
  color:#f5f1eb;
  font:600 clamp(4rem,10vw,9rem)/1 var(--display);
  letter-spacing:-.04em;
}
.page-transition-line{
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#8d5cf6,#d2c1ff);
}

@media(max-width:900px){
  .systems-explore{display:none}
  .system-coordinate{display:none}
  .system-explorer{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .scene-core{animation:none!important}
  .page-transition{display:none!important}
}


/* Build 33 — TRUE SPATIAL SYSTEMS SECTION
   Infinite-canvas camera movement inspired by impress.js.
   The complete world now pans, rolls, rotates and zooms through six destinations. */

.systems-spatial{
  height:780vh!important;
  position:relative;
  background:#060609;
  color:#f4f1ec;
}
.systems-spatial .systems-stage{
  position:sticky!important;
  top:0;
  width:100%;
  height:100svh!important;
  min-height:0!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  perspective:1400px;
  border-bottom:1px solid rgba(255,255,255,.08);
  isolation:isolate;
}
.systems-spatial .systems-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%,rgba(121,77,230,.075),transparent 34%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.32));
  background-size:auto;
  opacity:1;
  mask-image:none;
}
.systems-spatial .systems-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(6,6,9,.52) 78%,#060609 110%);
  mix-blend-mode:normal;
}
.systems-viewport{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
.systems-world{
  position:absolute;
  left:0;
  top:0;
  width:3000px;
  height:2400px;
  transform-origin:0 0;
  transform-style:preserve-3d;
  will-change:transform;
}
.systems-world-grid{
  position:absolute;
  inset:-400px;
  background:
    linear-gradient(rgba(148,113,243,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,113,243,.065) 1px,transparent 1px);
  background-size:120px 120px;
  opacity:.5;
}
.systems-world-grid::after{
  content:"";
  position:absolute;
  inset:8%;
  border:1px solid rgba(167,139,250,.10);
  border-radius:50%;
  box-shadow:
    0 0 0 160px rgba(167,139,250,.025),
    0 0 0 320px rgba(167,139,250,.018),
    0 0 0 520px rgba(167,139,250,.012);
}
.systems-world-ghost{
  position:absolute;
  color:rgba(255,255,255,.024);
  font:500 260px/.85 var(--display);
  letter-spacing:-.05em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.ghost-a{left:120px;top:980px;rotate:-12deg}
.ghost-b{left:1580px;top:210px;rotate:78deg}
.ghost-c{left:1160px;top:1850px;rotate:176deg}

.system-spatial-step{
  --step-r:0deg;
  position:absolute;
  width:760px;
  min-height:420px;
  padding:2.4rem;
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) rotate(var(--step-r));
  opacity:.10;
  filter:blur(1.4px);
  transition:opacity .26s linear,filter .26s linear;
  pointer-events:none;
}
.system-spatial-step[data-spatial-step="0"]{left:1120px;top:780px;--step-r:0deg}
.system-spatial-step[data-spatial-step="1"]{left:2050px;top:520px;--step-r:14deg}
.system-spatial-step[data-spatial-step="2"]{left:2480px;top:1370px;--step-r:90deg}
.system-spatial-step[data-spatial-step="3"]{left:1550px;top:2050px;--step-r:178deg}
.system-spatial-step[data-spatial-step="4"]{left:520px;top:1500px;--step-r:268deg}
.system-spatial-step[data-spatial-step="5"]{left:560px;top:500px;--step-r:356deg}

.system-spatial-step.is-active{
  opacity:1;
  filter:none;
}
.system-spatial-step .section-label,
.system-spatial-step .spatial-step-kicker{
  display:block;
  margin:0 0 1rem;
  color:#b8a4ff;
  font:500 .62rem var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.system-spatial-step .section-label{
  color:#a9a4b0;
  margin-bottom:1.7rem;
}
.system-spatial-step h2,
.system-spatial-step h3{
  margin:0;
  max-width:9ch;
  color:#f6f2ec;
  font:500 clamp(4rem,6.6vw,7.5rem)/.87 var(--display);
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.system-spatial-step[data-spatial-step="0"] h2{
  max-width:8.6ch;
}
.system-spatial-step .spatial-step-copy{
  max-width:40ch;
  margin:1.45rem 0 0;
  color:#cbc7d0;
  font:400 .9rem/1.75 var(--mono);
}

.spatial-architecture{
  position:absolute!important;
  left:1500px!important;
  top:1120px!important;
  width:930px!important;
  height:930px!important;
  transform:translate(-50%,-50%) rotate(-24deg)!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  opacity:.82;
  pointer-events:none;
}
.spatial-architecture .system-scene{
  width:650px!important;
}
.spatial-architecture .scene-orbit{
  width:82%!important;
}
.spatial-architecture .scene-labels{
  inset:7%!important;
}
.spatial-architecture .systems-depth-field{
  inset:-30%!important;
}

.spatial-marker{
  position:absolute;
  color:rgba(198,183,255,.28);
  font:500 .54rem var(--mono);
  letter-spacing:.12em;
  white-space:nowrap;
}
.marker-a{left:780px;top:350px;rotate:-20deg}
.marker-b{left:2250px;top:220px;rotate:18deg}
.marker-c{left:2700px;top:1050px;rotate:90deg}
.marker-d{left:1770px;top:2260px;rotate:178deg}
.marker-e{left:210px;top:1710px;rotate:268deg}
.marker-f{left:260px;top:240px;rotate:356deg}

.systems-spatial-hud{
  position:absolute;
  z-index:20;
  top:1.25rem;
  left:clamp(1.2rem,3vw,3rem);
  right:clamp(1.2rem,3vw,3rem);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:#68636f;
  font:500 .52rem var(--mono);
  letter-spacing:.10em;
  text-transform:uppercase;
  pointer-events:none;
}
.system-spatial-hud span:last-child{
  color:#82798e;
}
.systems-spatial .systems-index{
  position:absolute!important;
  left:0;
  right:0;
  bottom:0;
  z-index:25!important;
  grid-column:auto!important;
  background:linear-gradient(180deg,transparent,rgba(6,6,9,.93) 35%,rgba(6,6,9,.99));
  border-top:1px solid rgba(255,255,255,.09)!important;
  padding-top:1rem;
}
.systems-spatial .system-step{
  min-height:74px;
  padding:1rem .8rem 1.15rem!important;
  background:rgba(6,6,9,.3);
  backdrop-filter:blur(7px);
}
.systems-spatial .system-step.is-active{
  color:#fff;
  background:linear-gradient(180deg,rgba(112,73,204,.18),rgba(112,73,204,.10));
  box-shadow:inset 0 2px 0 rgba(173,145,255,.56);
}
.systems-scroll-cue{
  position:absolute;
  right:2rem;
  bottom:104px;
  z-index:22;
  display:flex;
  align-items:center;
  gap:.75rem;
  color:#5c5663;
  font:500 .49rem var(--mono);
  letter-spacing:.1em;
}
.systems-scroll-cue i{
  width:34px;
  height:1px;
  background:#685d77;
  transform-origin:left center;
  animation:spatialCue 1.7s ease-in-out infinite;
}
@keyframes spatialCue{
  0%,100%{transform:scaleX(.35);opacity:.4}
  50%{transform:scaleX(1);opacity:1}
}

/* Each state reveals increasingly deep architecture layers. */
.systems-spatial[data-system-state="0"] .scene-panel{opacity:.07!important}
.systems-spatial[data-system-state="0"] .panel-interface{opacity:1!important}
.systems-spatial[data-system-state="1"] .panel-interface{opacity:.34!important}
.systems-spatial[data-system-state="1"] .panel-logic{opacity:1!important}
.systems-spatial[data-system-state="2"] .panel-interface,
.systems-spatial[data-system-state="2"] .panel-logic{opacity:.28!important}
.systems-spatial[data-system-state="2"] .panel-flow{opacity:1!important}
.systems-spatial[data-system-state="3"] .scene-panel{opacity:.22!important}
.systems-spatial[data-system-state="3"] .panel-data{opacity:1!important}
.systems-spatial[data-system-state="4"] .scene-panel{opacity:.24!important}
.systems-spatial[data-system-state="4"] .panel-auto{opacity:1!important}
.systems-spatial[data-system-state="5"] .scene-panel{opacity:.42!important}
.systems-spatial[data-system-state="5"] .panel-infra{opacity:1!important}
.systems-spatial[data-system-state="5"] .scene-core{
  box-shadow:0 0 110px rgba(141,92,246,.95)!important;
}

@media(max-width:900px){
  .systems-spatial{height:auto!important}
  .systems-spatial .systems-stage{
    position:relative!important;
    height:auto!important;
    min-height:100svh!important;
    padding:6rem 1.25rem 1.5rem!important;
  }
  .systems-spatial-hud,.systems-scroll-cue{display:none}
  .systems-viewport{
    position:relative;
    inset:auto;
    overflow:visible;
  }
  .systems-world{
    position:relative;
    width:auto;
    height:auto;
    transform:none!important;
  }
  .systems-world-grid,.systems-world-ghost,.spatial-marker{display:none}
  .system-spatial-step{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:auto;
    min-height:0;
    padding:0 0 4rem;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }
  .system-spatial-step:not([data-spatial-step="0"]){display:none}
  .spatial-architecture{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    height:440px!important;
    transform:none!important;
  }
  .systems-spatial .systems-index{
    position:relative!important;
    margin:0 -1.25rem -1.5rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .systems-spatial{height:auto!important}
  .systems-spatial .systems-stage{position:relative!important;height:auto!important;min-height:100svh!important}
  .systems-scroll-cue{display:none!important}
}


/* Build 34 — deeper spatial excavation + restored square/layer architecture */

.systems-world{
  transform-style:preserve-3d!important;
  perspective:1800px;
}
.systems-tunnel{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform-style:preserve-3d;
  will-change:transform;
}
.tunnel-plane{
  position:absolute;
  left:1500px;
  top:1180px;
  width:1150px;
  height:1150px;
  margin:-575px 0 0 -575px;
  border:1px solid rgba(155,119,245,.09);
  background:
    linear-gradient(45deg,rgba(154,118,245,.022),transparent 36%),
    linear-gradient(-45deg,rgba(154,118,245,.017),transparent 38%);
  transform-origin:center center;
}
.tunnel-1{transform:translateZ(220px) rotate(45deg) scale(.48);opacity:.78}
.tunnel-2{transform:translateZ(90px) rotate(45deg) scale(.68);opacity:.64}
.tunnel-3{transform:translateZ(-90px) rotate(45deg) scale(.92);opacity:.50}
.tunnel-4{transform:translateZ(-330px) rotate(45deg) scale(1.22);opacity:.36}
.tunnel-5{transform:translateZ(-650px) rotate(45deg) scale(1.62);opacity:.24}
.tunnel-6{transform:translateZ(-1050px) rotate(45deg) scale(2.15);opacity:.15}
.tunnel-7{transform:translateZ(-1550px) rotate(45deg) scale(2.85);opacity:.09}

.system-depth-stack{
  position:absolute;
  left:50%;
  top:50%;
  width:560px;
  height:560px;
  margin:-280px 0 0 -280px;
  transform-style:preserve-3d;
  pointer-events:none;
  z-index:-1;
  will-change:transform;
}
.depth-square{
  position:absolute;
  inset:0;
  border:1px solid rgba(181,153,255,.23);
  background:linear-gradient(135deg,rgba(141,92,246,.045),rgba(255,255,255,.008));
  transform-origin:center;
  box-shadow:inset 0 0 45px rgba(141,92,246,.025);
}
.depth-square-1{transform:translateZ(170px) rotate(45deg) scale(.43);opacity:1}
.depth-square-2{transform:translateZ(115px) rotate(45deg) scale(.58);opacity:.88}
.depth-square-3{transform:translateZ(45px) rotate(45deg) scale(.74);opacity:.76}
.depth-square-4{transform:translateZ(-45px) rotate(45deg) scale(.91);opacity:.62}
.depth-square-5{transform:translateZ(-155px) rotate(45deg) scale(1.11);opacity:.48}
.depth-square-6{transform:translateZ(-290px) rotate(45deg) scale(1.35);opacity:.35}
.depth-square-7{transform:translateZ(-455px) rotate(45deg) scale(1.65);opacity:.23}
.depth-square-8{transform:translateZ(-660px) rotate(45deg) scale(2.02);opacity:.14}

.spatial-architecture{
  perspective:1700px!important;
  transform-style:preserve-3d!important;
}
.spatial-architecture .system-scene{
  transform-style:preserve-3d!important;
}
.spatial-architecture .scene-panel{
  border-color:rgba(181,153,255,.25)!important;
  background:
    linear-gradient(135deg,rgba(141,92,246,.065),rgba(255,255,255,.014))!important;
  box-shadow:
    0 32px 110px rgba(0,0,0,.34),
    0 0 58px rgba(122,80,230,.045),
    inset 0 0 58px rgba(157,121,248,.027)!important;
}
.spatial-architecture .panel-interface{outline:1px solid rgba(215,202,255,.17)}
.spatial-architecture .panel-logic{outline:1px solid rgba(201,182,255,.15)}
.spatial-architecture .panel-flow{outline:1px solid rgba(188,164,255,.13)}
.spatial-architecture .panel-data{outline:1px solid rgba(174,147,250,.12)}
.spatial-architecture .panel-auto{outline:1px solid rgba(160,132,240,.11)}
.spatial-architecture .panel-infra{outline:1px solid rgba(148,119,231,.10)}

.system-spatial-step{
  text-shadow:0 28px 80px rgba(0,0,0,.32);
}

.systems-world-grid::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1250px;
  height:1250px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(160,126,248,.05);
  box-shadow:
    0 0 0 150px rgba(160,126,248,.021),
    0 0 0 315px rgba(160,126,248,.016),
    0 0 0 500px rgba(160,126,248,.011),
    0 0 0 720px rgba(160,126,248,.007);
}

.systems-spatial[data-system-state="0"] .system-depth-stack{opacity:.50}
.systems-spatial[data-system-state="1"] .system-depth-stack{opacity:.62}
.systems-spatial[data-system-state="2"] .system-depth-stack{opacity:.74}
.systems-spatial[data-system-state="3"] .system-depth-stack{opacity:.84}
.systems-spatial[data-system-state="4"] .system-depth-stack{opacity:.93}
.systems-spatial[data-system-state="5"] .system-depth-stack{opacity:1}

@media(max-width:900px){
  .systems-tunnel{display:none}
  .system-depth-stack{opacity:.42!important}
}


/* Build 35 — varied camera language */
.system-spatial-step.is-active{
  text-shadow:0 30px 90px rgba(0,0,0,.38),0 0 38px rgba(129,84,238,.05);
}


/* Build 36 — upright landing states + cinematic focus/vignette */
.system-spatial-step[data-spatial-step="0"],
.system-spatial-step[data-spatial-step="1"],
.system-spatial-step[data-spatial-step="2"],
.system-spatial-step[data-spatial-step="3"],
.system-spatial-step[data-spatial-step="4"],
.system-spatial-step[data-spatial-step="5"]{
  --step-r:0deg!important;
}

/* Keep destination text visually upright and crisp */
.system-spatial-step{
  transform:translate(-50%,-50%) rotate(0deg)!important;
  transform-origin:center center!important;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}
.system-spatial-step.is-active{
  filter:none!important;
}

/* Stronger cinematic vignette that focuses the center destination */
.systems-spatial .systems-stage::after{
  background:
    radial-gradient(circle at 50% 48%,
      transparent 0 24%,
      rgba(6,6,9,.10) 42%,
      rgba(6,6,9,.44) 72%,
      rgba(6,6,9,.86) 100%)!important;
  transition:background .4s ease;
}

/* A subtle center light makes pan-only moves feel intentional */
.systems-spatial .systems-stage::before{
  background:
    radial-gradient(circle at 50% 48%,rgba(127,82,237,.11),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.015),rgba(0,0,0,.30))!important;
}

/* Lower the visual noise around inactive copy */
.system-spatial-step:not(.is-active){
  opacity:.075!important;
}
.system-spatial-step.is-active{
  opacity:1!important;
  text-shadow:
    0 28px 85px rgba(0,0,0,.42),
    0 0 42px rgba(132,89,238,.07);
}

/* Slight focus halo around the active destination */
.system-spatial-step.is-active::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 45% 45%,rgba(119,75,230,.08),transparent 68%);
  filter:blur(22px);
}


/* Build 38 — repaired held/upright camera states */
.system-spatial-step{
  transform:translate(-50%,-50%) rotate(0deg)!important;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}
.system-spatial-step.is-active{
  filter:none!important;
}

.next-version-cinematic{position:relative;height:560vh;background:radial-gradient(circle at 72% 44%,rgba(116,81,216,.07),transparent 26%),linear-gradient(180deg,#f4f1eb 0%,#f7f5f0 48%,#f2efe8 100%);color:#16141a}
.next-version-stage{position:sticky;top:0;height:100svh;min-height:720px;overflow:hidden;display:grid;grid-template-columns:minmax(320px,.88fr) minmax(0,1.2fr);align-items:center;gap:2rem;padding:clamp(2rem,4vw,4rem);isolation:isolate}
.next-version-stage:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(rgba(35,31,43,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(35,31,43,.045) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at 65% 48%,#000 0 42%,transparent 78%);opacity:.42}
.next-version-stage:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 72% 46%,transparent 0 22%,rgba(244,241,235,.35) 48%,rgba(244,241,235,.96) 94%)}
.next-version-copy{position:relative;z-index:8;padding-bottom:4rem}.next-version-copy .chapter-num{display:inline-block;margin-bottom:1.1rem;color:#8064dc;font:500 .64rem var(--mono);letter-spacing:.1em}.next-version-copy .section-label{margin:0 0 1.15rem;color:#7f7786;font:500 .61rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.next-version-copy h2{margin:0;max-width:8.5ch;font:500 clamp(4.6rem,7.6vw,8.6rem)/.86 var(--display);letter-spacing:-.05em;text-transform:uppercase;color:#17151b}.next-version-subcopy{margin:1.5rem 0 0;font:400 clamp(.95rem,1.2vw,1.15rem)/1.65 var(--poppins);color:#777079}
.next-version-viewport{position:relative;height:min(78vh,760px);min-height:560px;perspective:1800px;transform-style:preserve-3d;z-index:5}.next-version-camera{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform}.version-object{position:relative;width:min(42vw,620px);aspect-ratio:1;transform-style:preserve-3d;will-change:transform}.version-stage-plane{position:absolute;inset:0;transform-style:preserve-3d;transition:opacity .22s linear}.version-stage-plane span,.version-stage-plane i{position:absolute;display:block;box-sizing:border-box}
.stage-plane-2,.stage-plane-3,.stage-plane-4,.stage-plane-5{opacity:0}
.version-surface{border:1px solid rgba(93,68,173,.24);background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(118,81,213,.05));box-shadow:0 36px 90px rgba(45,37,63,.08)}.surface-main{inset:19%;transform:translateZ(60px) rotate(45deg)}.surface-cut{inset:31%;transform:translateZ(84px) rotate(45deg);background:rgba(116,81,213,.07)}.version-marker{width:8px;height:8px;border-radius:50%;background:#7e61db}.marker-1{left:28%;top:31%;transform:translateZ(100px)}.marker-2{right:29%;bottom:31%;transform:translateZ(100px)}
.layer-slab{inset:21%;border:1px solid rgba(104,77,190,.23);background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(119,82,216,.045));transform-origin:center}.slab-a{transform:translate3d(-44px,32px,90px) rotate(45deg)}.slab-b{transform:translate3d(-12px,10px,30px) rotate(45deg)}.slab-c{transform:translate3d(22px,-14px,-30px) rotate(45deg)}.slab-d{transform:translate3d(52px,-38px,-90px) rotate(45deg)}
.wireframe-box{border:1px solid rgba(104,75,191,.32)}.wire-1{inset:21%;transform:translateZ(82px) rotate(45deg)}.wire-2{inset:29%;transform:translateZ(16px) rotate(45deg)}.wire-3{inset:37%;transform:translateZ(-50px) rotate(45deg)}.wireframe-line{left:24%;width:52%;height:1px;background:linear-gradient(90deg,transparent,rgba(104,75,191,.34),transparent)}.line-a{top:34%;transform:translateZ(105px) rotate(18deg)}.line-b{top:51%;transform:translateZ(14px) rotate(-24deg)}.line-c{top:68%;transform:translateZ(-70px) rotate(12deg)}
.volume-face{inset:24%;border:1px solid rgba(89,61,172,.25);background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(119,82,216,.08));transform-origin:center}.face-a{transform:translateZ(118px) rotateX(56deg) rotateZ(45deg)}.face-b{transform:translate3d(74px,40px,0) rotateY(66deg) rotateZ(45deg)}.face-c{transform:translate3d(-50px,82px,-52px) rotateX(-28deg) rotateY(-16deg) rotateZ(45deg)}.volume-core{left:39%;top:39%;width:22%;height:22%;border-radius:24%;background:radial-gradient(circle at 38% 35%,#d5c6ff,#7955d6 70%,#5a3bb7 100%);box-shadow:0 0 80px rgba(104,72,191,.22);transform:translateZ(160px)}
.resolved-shell{border:1px solid rgba(92,64,178,.28);background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(119,82,216,.07));box-shadow:0 28px 90px rgba(54,40,82,.08),inset 0 0 35px rgba(119,82,216,.03)}.shell-a{inset:22%;transform:translateZ(70px) rotate(45deg)}.shell-b{inset:31%;transform:translateZ(120px) rotate(45deg)}.resolved-core{left:40%;top:40%;width:20%;height:20%;border-radius:30%;background:radial-gradient(circle at 36% 34%,#e6ddff,#8a68e7 64%,#5d3dbb 100%);box-shadow:0 0 100px rgba(104,72,191,.32);transform:translateZ(190px)}.resolved-trace{height:1px;background:linear-gradient(90deg,transparent,#8b6ce2,transparent);transform-origin:left center}.trace-1{left:18%;top:32%;width:64%;transform:translateZ(130px) rotate(12deg)}.trace-2{left:20%;top:52%;width:58%;transform:translateZ(80px) rotate(-16deg)}.trace-3{left:24%;top:69%;width:52%;transform:translateZ(35px) rotate(7deg)}
.next-version-stepper{position:absolute;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(31,28,38,.11);background:linear-gradient(180deg,rgba(244,241,235,.40),rgba(244,241,235,.96) 38%,#f4f1eb);backdrop-filter:blur(10px)}.version-step{min-height:82px;border:0;border-right:1px solid rgba(31,28,38,.09);background:transparent;color:#8a838d;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.36rem;padding:1rem 1.15rem;cursor:pointer;text-align:left}.version-step span{font:500 .55rem var(--mono);color:#99929d}.version-step strong{font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.06em}.version-step.is-active{background:linear-gradient(180deg,rgba(119,82,216,.07),rgba(119,82,216,.02));box-shadow:inset 0 2px 0 rgba(119,82,216,.48);color:#3b3248}.version-step.is-active span{color:#7659d8}
.next-version-hud{position:absolute;top:1.4rem;left:clamp(1.2rem,3vw,3rem);right:clamp(1.2rem,3vw,3rem);z-index:20;display:flex;justify-content:space-between;color:#938b96;font:500 .52rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:900px){.next-version-cinematic{height:auto}.next-version-stage{position:relative;min-height:100svh;height:auto;grid-template-columns:1fr;padding:5.5rem 1.25rem 1.25rem}.next-version-copy{padding-bottom:0}.next-version-copy h2{font-size:clamp(3.8rem,14vw,6rem)}.next-version-viewport{height:460px;min-height:0}.version-object{width:min(80vw,480px)}.next-version-stepper{position:relative;margin:1rem -1.25rem -1.25rem}.version-step{min-height:68px;padding:.8rem .65rem}.next-version-hud{display:none}}


/* Build 40 — fixed sticky viewport + dynamic stage copy */

.next-version-cinematic{
  height:620vh!important;
  overflow:visible!important;
}
.next-version-stage{
  position:sticky!important;
  top:0!important;
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  overflow:hidden!important;
  grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr)!important;
  padding-bottom:2.5rem!important;
}
.next-version-viewport{
  height:min(76svh,720px)!important;
  min-height:520px!important;
  align-self:center;
}
.next-version-stepper{display:none!important}

.next-version-stage-label{
  position:absolute;
  z-index:18;
  top:clamp(5.5rem,10vh,7.5rem);
  right:clamp(2rem,5vw,5rem);
  width:min(33vw,430px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  align-items:start;
  pointer-events:none;
}
.next-version-stage-label>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(115,82,206,.18);
  background:rgba(255,255,255,.52);
  color:#7659d8;
  font:600 .64rem var(--mono);
  letter-spacing:.08em;
}
.next-version-stage-label strong{
  display:block;
  margin-bottom:.38rem;
  color:#2d2734;
  font:600 .72rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.next-version-stage-label p{
  margin:0;
  max-width:34ch;
  color:#7d7680;
  font:400 .78rem/1.55 var(--mono);
}

.next-version-copy{
  align-self:center!important;
  padding-bottom:0!important;
}
.next-version-copy h2{
  max-width:8.2ch!important;
}
.next-version-hud{
  opacity:.72;
}

/* Put the object lower/right enough that stage text sits clearly above it */
.next-version-camera{
  transform-origin:center 58%;
}
.version-object{
  margin-top:3.4rem;
}

/* Extra viewport protection for shorter desktop windows */
@media (min-width:901px) and (max-height:820px){
  .next-version-stage{
    min-height:100svh!important;
    padding:1.5rem 2.2rem!important;
  }
  .next-version-copy h2{
    font-size:clamp(3.7rem,6.7vw,6.8rem)!important;
  }
  .next-version-subcopy{
    margin-top:1rem!important;
    font-size:.9rem!important;
  }
  .next-version-viewport{
    height:72svh!important;
    min-height:430px!important;
  }
  .next-version-stage-label{
    top:4.2rem!important;
    right:2.2rem!important;
    width:min(36vw,390px)!important;
  }
  .version-object{
    width:min(38vw,520px)!important;
    margin-top:2rem!important;
  }
}

/* Mobile stays non-sticky and readable */
@media(max-width:900px){
  .next-version-cinematic{height:auto!important}
  .next-version-stage{
    position:relative!important;
    height:auto!important;
    min-height:auto!important;
    max-height:none!important;
  }
  .next-version-stage-label{
    position:relative;
    top:auto;
    right:auto;
    width:auto;
    margin:1.25rem 0 .25rem;
  }
}


/* ====================================================================
   BUILD 41 — IDEOLOGY SYSTEM
   03 = thought process / diagnosis
   04 = systems / technical architecture (preserved)
   05 = production / iteration
   ==================================================================== */

/* ---------- 03 / PROBLEM PROCESS ---------- */

.problem-process{
  position:relative;
  height:560vh!important;
  background:
    radial-gradient(circle at 72% 45%,rgba(119,82,216,.055),transparent 24%),
    linear-gradient(180deg,#f4f1eb 0%,#f8f6f1 52%,#f2efe9 100%);
  color:#17151b;
  overflow:visible!important;
}
.problem-stage{
  position:sticky;
  top:0;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(350px,.88fr) minmax(0,1.12fr);
  align-items:center;
  gap:clamp(2rem,5vw,6rem);
  padding:clamp(2rem,4vw,4rem);
  isolation:isolate;
}
.problem-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(44,39,51,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,39,51,.045) 1px,transparent 1px);
  background-size:86px 86px;
  mask-image:radial-gradient(circle at 70% 48%,#000 0 44%,transparent 80%);
  opacity:.44;
}
.problem-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 69% 48%,transparent 0 22%,rgba(244,241,235,.26) 48%,rgba(244,241,235,.95) 92%);
}
.problem-copy{
  position:relative;
  z-index:10;
}
.problem-copy .chapter-num{
  display:inline-block;
  margin-bottom:1rem;
  color:#795bd6;
  font:500 .64rem var(--mono);
  letter-spacing:.1em;
}
.problem-copy .section-label{
  margin:0 0 1rem;
  color:#827b85;
  font:500 .61rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.problem-copy h2{
  margin:0;
  max-width:8.4ch;
  color:#17151b;
  font:500 clamp(4.7rem,7.6vw,8.8rem)/.86 var(--display);
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.problem-thesis{
  margin:1.45rem 0 0;
  max-width:28ch;
  color:#6f6873;
  font:400 clamp(.96rem,1.25vw,1.12rem)/1.65 var(--poppins);
}

.problem-stage-copy{
  display:none;

  margin-top:2.1rem;
  width:min(100%,520px);
  display:grid;
  grid-template-columns:46px 1fr;
  gap:1rem;
  align-items:start;
}
.problem-stage-copy>span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(117,82,210,.20);
  background:rgba(255,255,255,.50);
  color:#775ad4;
  font:600 .63rem var(--mono);
}
.problem-stage-copy strong{
  display:block;
  margin:.1rem 0 .42rem;
  color:#302936;
  font:600 .72rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.problem-stage-copy p{
  margin:0;
  max-width:42ch;
  color:#77717a;
  font:400 .78rem/1.62 var(--mono);
}

.problem-visual{
  position:relative;
  z-index:5;
  height:min(76svh,760px);
  min-height:540px;
  display:grid;
  place-items:center;
}
.problem-scan-field{
  position:relative;
  width:min(48vw,700px);
  aspect-ratio:1;
  transform-style:preserve-3d;
  will-change:transform;
}
.problem-scan-field::before{
  content:"";
  position:absolute;
  inset:7%;
  border:1px solid rgba(109,78,192,.11);
  transform:rotate(45deg);
}
.problem-scan-field::after{
  content:"";
  position:absolute;
  inset:20%;
  border:1px solid rgba(109,78,192,.08);
  transform:rotate(45deg);
}
.problem-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(113,80,202,.14);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.orbit-a{width:78%;height:34%;rotate:8deg}
.orbit-b{width:64%;height:26%;rotate:-17deg}
.orbit-c{width:50%;height:18%;rotate:28deg}
.problem-axis{
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(108,78,188,.10);
  transform-origin:center;
}
.axis-x{width:84%;height:1px;transform:translate(-50%,-50%)}
.axis-y{width:1px;height:84%;transform:translate(-50%,-50%)}
.problem-node{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid rgba(113,81,203,.36);
  background:#f6f3ee;
}
.node-1{left:18%;top:30%}.node-2{right:20%;top:25%}.node-3{left:25%;bottom:18%}.node-4{right:24%;bottom:24%}

.problem-signal,
.problem-root{
  position:absolute;
  width:min(42%,250px);
  padding:1rem 1.05rem;
  border:1px solid rgba(42,36,48,.10);
  background:rgba(255,255,255,.78);
  box-shadow:0 22px 70px rgba(50,41,64,.07);
  backdrop-filter:blur(9px);
  transform-origin:center;
}
.problem-signal span,
.problem-root span{
  display:block;
  margin-bottom:.42rem;
  color:#7b60d4;
  font:600 .54rem var(--mono);
  letter-spacing:.08em;
}
.problem-signal strong,
.problem-root strong{
  color:#332e37;
  font:500 .76rem/1.45 var(--mono);
}
.signal-a{left:2%;top:16%;transform:rotate(-4deg)}
.signal-b{right:2%;top:19%;transform:rotate(3deg)}
.signal-c{left:5%;bottom:16%;transform:rotate(3deg)}
.signal-d{right:1%;bottom:17%;transform:rotate(-3deg)}
.problem-root{
  left:50%;
  top:50%;
  width:min(58%,340px);
  transform:translate(-50%,-50%) scale(.72);
  opacity:0;
  border-color:rgba(117,82,210,.30);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(121,85,216,.08));
  box-shadow:0 32px 100px rgba(78,57,120,.14);
}
.problem-focus-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:24%;
  aspect-ratio:1;
  border:1px solid rgba(117,82,210,.32);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.7);
  opacity:.35;
  box-shadow:0 0 0 22px rgba(117,82,210,.025),0 0 0 54px rgba(117,82,210,.015);
}
.problem-focus-vignette{
  position:absolute;
  left:50%;
  top:50%;
  width:48%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  pointer-events:none;
  opacity:.7;
  background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,.08) 20%,rgba(255,255,255,.02) 42%,rgba(244,241,235,.16) 62%,rgba(244,241,235,.68) 100%);
  filter:blur(16px);
  mix-blend-mode:screen;
}
.problem-signal.is-active,
.problem-root.is-active{
  border-color:rgba(118,86,214,.42);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(121,85,216,.09));
  box-shadow:0 28px 80px rgba(90,68,136,.18);
}
.problem-signal.is-near,
.problem-root.is-near{
  border-color:rgba(118,86,214,.18);
  background:rgba(255,255,255,.72);
}
.problem-hud{
  position:absolute;
  left:clamp(1.2rem,3vw,3rem);
  right:clamp(1.2rem,3vw,3rem);
  top:1.35rem;
  z-index:20;
  display:flex;
  justify-content:space-between;
  color:#958d98;
  font:500 .52rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------- 05 / PRODUCTION PROCESS ---------- */

.production-process{
  position:relative;
  height:580vh!important;
  background:
    radial-gradient(circle at 72% 46%,rgba(111,78,207,.075),transparent 25%),
    linear-gradient(180deg,#f3f0ea 0%,#f8f6f1 48%,#f1eee7 100%);
  color:#17151b;
  overflow:visible!important;
}
.production-stage{
  position:sticky;
  top:0;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(350px,.86fr) minmax(0,1.14fr);
  align-items:center;
  gap:clamp(2rem,5vw,6rem);
  padding:clamp(2rem,4vw,4rem);
  isolation:isolate;
}
.production-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(44,39,51,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,39,51,.045) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(circle at 70% 48%,#000 0 46%,transparent 82%);
  opacity:.40;
}
.production-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 71% 47%,transparent 0 24%,rgba(243,240,234,.26) 49%,rgba(243,240,234,.95) 93%);
}
.production-copy{
  position:relative;
  z-index:10;
}
.production-copy .chapter-num{
  display:inline-block;
  margin-bottom:1rem;
  color:#795bd6;
  font:500 .64rem var(--mono);
  letter-spacing:.1em;
}
.production-copy .section-label{
  margin:0 0 1rem;
  color:#827b85;
  font:500 .61rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.production-copy h2{
  margin:0;
  max-width:8.6ch;
  color:#17151b;
  font:500 clamp(4.8rem,7.8vw,9rem)/.86 var(--display);
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.production-headline .production-word{
  display:inline-block;
  opacity:.03;
  filter:blur(16px);
  transform:translateY(18px) scale(.985);
  transition:opacity .38s ease,filter .38s ease,transform .38s ease,color .38s ease;
  color:rgba(23,21,27,.12);
  will-change:opacity,transform,filter;
}
.production-headline .production-word.is-active,
.production-headline .production-word.is-past{
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
  color:#17151b;
}
.production-headline .production-word.is-past{
  opacity:.88;
  color:rgba(23,21,27,.88);
}
.production-thesis{
  margin:1.4rem 0 0;
  max-width:35ch;
  color:#685f6c;
  font:500 clamp(1.02rem,1.35vw,1.22rem)/1.6 var(--poppins);
}
.production-stage-copy{
  width:min(100%,520px);
  display:grid;
  grid-template-columns:46px 1fr;
  gap:1rem;
}
.production-visual-copy{
  position:absolute;
  left:52%;
  bottom:4.5%;
  z-index:18;
  width:min(32vw,420px);
  transform:translateX(-12%);
  padding:1rem 1.1rem;
  border:1px solid rgba(117,82,210,.12);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.62));
  backdrop-filter:blur(12px);
  box-shadow:0 18px 48px rgba(61,47,84,.06);
}
.production-stage-copy>span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(117,82,210,.20);
  background:rgba(255,255,255,.50);
  color:#775ad4;
  font:600 .63rem var(--mono);
}
.production-stage-copy strong{
  display:block;
  margin:.1rem 0 .42rem;
  color:#302936;
  font:600 .72rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.production-stage-copy p{
  margin:0;
  max-width:42ch;
  color:#77717a;
  font:400 .78rem/1.62 var(--mono);
}

.production-visual{
  position:relative;
  z-index:5;
  height:min(76svh,760px);
  min-height:540px;
  display:grid;
  place-items:center;
  perspective:1800px;
  transform-style:preserve-3d;
}
.production-visual::after{
  content:"";
  position:absolute;
  inset:18% 8% 8% 22%;
  background:radial-gradient(circle at 55% 42%,rgba(135,104,223,.13),rgba(135,104,223,0) 58%);
  opacity:.65;
  pointer-events:none;
}
.production-field{
  position:absolute;
  inset:5% 0 1% 6%;
  overflow:hidden;
  pointer-events:none;
  transform-style:preserve-3d;
}
.production-field span{
  position:absolute;
  display:block;
  box-sizing:border-box;
}
.field-grid{
  inset:10% 7%;
  border:1px solid rgba(120,87,208,.10);
  opacity:.02;
}
.grid-a{transform:rotate(0deg) scale(.84)}
.grid-b{inset:18% 15%;transform:rotate(45deg) scale(.76);border-color:rgba(120,87,208,.10)}
.field-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(128,93,219,.9),transparent);
  opacity:0;
  transform-origin:left center;
  filter:drop-shadow(0 0 10px rgba(128,93,219,.16));
}
.line-a{left:18%;top:34%;width:32%}
.line-b{left:30%;top:55%;width:38%}
.line-c{left:44%;top:28%;width:26%;transform-origin:right center}
.line-d{left:49%;top:67%;width:24%}
.field-node{
  width:10px;height:10px;border-radius:50%;
  background:#8a6be5;
  box-shadow:0 0 18px rgba(122,88,214,.22);
  opacity:0;
}
.node-a{left:22%;top:32%}
.node-b{left:61%;top:28%}
.node-c{left:67%;top:55%}
.node-d{left:48%;top:66%}
.field-outline{
  border:1px solid rgba(120,87,208,.14);
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(120,87,208,.02));
  opacity:0;
}
.field-beam{
  left:24%;
  top:48%;
  width:140px;
  height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(147,116,235,.95),rgba(255,255,255,0));
  box-shadow:0 0 18px rgba(136,104,227,.24);
  opacity:0;
  transform:translate3d(0,0,0) rotate(8deg);
}
.outline-a{inset:18% 18%;transform:rotate(45deg)}
.outline-b{inset:26% 25%;transform:rotate(45deg)}
.outline-c{inset:33% 32%;transform:rotate(45deg)}
.production-camera{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  will-change:transform;
}
.production-object{
  position:relative;
  width:min(46vw,660px);
  aspect-ratio:1;
  transform-style:preserve-3d;
  will-change:transform;
}
.production-layer{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  opacity:0;
}
.production-layer span{
  position:absolute;
  display:block;
  box-sizing:border-box;
}
.layer-assumption{opacity:1}

.production-frame{
  inset:19%;
  border:1px solid rgba(103,74,187,.26);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(119,82,216,.045));
  transform:translateZ(44px) rotate(45deg);
  box-shadow:0 34px 95px rgba(61,47,84,.07);
}
.production-dot{
  width:8px;height:8px;border-radius:50%;background:#8566e0;
}
.assumption-dot-a{left:31%;top:28%;transform:translateZ(76px)}
.assumption-dot-b{right:31%;bottom:28%;transform:translateZ(76px)}

.prototype-plane{
  inset:20%;
  border:1px solid rgba(105,75,191,.24);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(119,82,216,.055));
}
.proto-a{transform:translate3d(-44px,32px,100px) rotate(45deg)}
.proto-b{transform:translate3d(0,0,20px) rotate(45deg)}
.proto-c{transform:translate3d(46px,-32px,-70px) rotate(45deg)}
.prototype-control{
  height:8px;
  border:1px solid rgba(107,76,192,.25);
  background:rgba(255,255,255,.65);
}
.proto-control-a{left:33%;top:39%;width:34%;transform:translateZ(135px)}
.proto-control-b{left:38%;top:49%;width:24%;transform:translateZ(135px)}

.evidence-ring{
  left:50%;top:50%;border:1px solid rgba(109,77,194,.20);border-radius:50%;transform:translate(-50%,-50%);
}
.evidence-ring-a{width:66%;height:29%;rotate:12deg}
.evidence-ring-b{width:48%;height:21%;rotate:-20deg}
.evidence-point{
  width:10px;height:10px;border-radius:50%;background:#8667df;box-shadow:0 0 24px rgba(112,78,204,.22);
}
.evidence-point-a{left:25%;top:36%}.evidence-point-b{right:27%;top:31%}.evidence-point-c{left:53%;bottom:25%}
.evidence-trace{
  left:24%;width:52%;height:1px;background:linear-gradient(90deg,transparent,#9a7be8,transparent);
}
.evidence-trace-a{top:44%;rotate:15deg}.evidence-trace-b{top:57%;rotate:-19deg}

.revision-slab{
  inset:21%;
  border:1px solid rgba(104,74,190,.25);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(119,82,216,.06));
}
.revision-a{transform:translate3d(-62px,30px,85px) rotate(38deg)}
.revision-b{transform:translate3d(10px,-18px,12px) rotate(48deg)}
.revision-c{transform:translate3d(67px,-50px,-74px) rotate(41deg)}
.revision-arrow{
  width:70px;height:1px;background:#8d6de1;transform-origin:left center;
}
.revision-arrow-a{left:22%;top:29%;rotate:18deg}.revision-arrow-b{right:24%;bottom:28%;rotate:-22deg}

.better-shell{
  border:1px solid rgba(96,66,182,.29);
  background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(119,82,216,.07));
  box-shadow:0 30px 100px rgba(62,47,89,.08),inset 0 0 38px rgba(119,82,216,.025);
}
.better-shell-a{inset:20%;transform:translateZ(64px) rotate(45deg)}
.better-shell-b{inset:31%;transform:translateZ(120px) rotate(45deg)}
.better-core{
  left:40%;top:40%;width:20%;height:20%;border-radius:28%;
  background:radial-gradient(circle at 36% 34%,#e8dfff,#8c6ae8 64%,#5b3bb9 100%);
  box-shadow:0 0 110px rgba(102,70,190,.30);transform:translateZ(180px);
}
.better-trace{
  height:1px;background:linear-gradient(90deg,transparent,#8a6be0,transparent);transform-origin:left center;
}
.better-trace-a{left:19%;top:34%;width:62%;transform:translateZ(120px) rotate(10deg)}
.better-trace-b{left:22%;top:53%;width:56%;transform:translateZ(80px) rotate(-14deg)}
.better-trace-c{left:25%;top:69%;width:49%;transform:translateZ(34px) rotate(6deg)}

.production-hud{
  position:absolute;
  left:clamp(1.2rem,3vw,3rem);
  right:clamp(1.2rem,3vw,3rem);
  top:1.35rem;
  z-index:20;
  display:flex;
  justify-content:space-between;
  color:#958d98;
  font:500 .52rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}


@media (max-width:900px){
  .production-headline .production-word{
    opacity:1;
    filter:none;
    transform:none;
    color:#17151b;
  }
  .production-field{display:none}
}

/* ---------- responsive ---------- */

@media (min-width:901px) and (max-height:820px){
  .problem-stage,.production-stage{
    padding:1.4rem 2.3rem;
  }
  .problem-copy h2,.production-copy h2{
    font-size:clamp(3.8rem,6.4vw,6.7rem);
  }
  .problem-thesis,.production-thesis{margin-top:.9rem}
  .problem-stage-copy,.production-stage-copy{margin-top:1.15rem}
  .problem-visual,.production-visual{
    height:70svh;
    min-height:420px;
  }
  .problem-scan-field,.production-object{
    width:min(41vw,540px);
  }
}

@media(max-width:900px){
  .problem-process,.production-process{height:auto!important}
  .problem-stage,.production-stage{
    position:relative;
    height:auto;
    min-height:auto;
    grid-template-columns:1fr;
    padding:5rem 1.25rem 2rem;
  }
  .problem-copy h2,.production-copy h2{
    font-size:clamp(3.8rem,14vw,6rem);
  }
  .problem-visual,.production-visual{
    height:470px;
    min-height:0;
  }
  .problem-scan-field,.production-object{
    width:min(88vw,500px);
  }
  .problem-hud,.production-hud{display:none}
}

@media(prefers-reduced-motion:reduce){
  .problem-process,.production-process{height:auto!important}
  .problem-stage,.production-stage{position:relative}
}

/* Build 44 — Section 03 cleanup + mobile refinement + selected-work tracker removal */
.work-index{display:none!important}

/* The cards now own all stage-specific explanation; no duplicate left-side step copy. */
.problem-stage-copy{display:none!important}

/* Keep desktop cards comfortably readable when their detail opens. */
@media(min-width:901px){
  .problem-signal,
  .problem-root{
    width:min(44%,280px);
  }
  .problem-signal.is-active,
  .problem-root.is-active{
    transform-origin:center;
  }
  .problem-signal.is-active .problem-detail,
  .problem-root.is-active .problem-detail{
    margin-top:.62rem;
  }
}

/* Short-height desktops / tablet landscape: keep the work copy clear now that the
   bottom tracker is gone, and keep the problem composition from feeling cramped. */
@media(min-width:901px) and (max-height:760px){
  .project{
    padding-bottom:clamp(1rem,2.4vh,1.6rem)!important;
  }
  .project-copy{
    padding-bottom:1.4vh!important;
  }
  .problem-stage{
    padding-top:1rem!important;
    padding-bottom:1rem!important;
  }
  .problem-copy h2{
    font-size:clamp(3.4rem,6vw,6rem)!important;
  }
  .problem-thesis{
    margin-top:.75rem!important;
  }
  .problem-visual{
    height:74svh!important;
    min-height:390px!important;
  }
  .problem-scan-field{
    width:min(42vw,520px)!important;
  }
}

/* Mobile: stop treating the diagnostic field as a tiny desktop canvas.
   Preserve the idea, but lay the five thought cards out as a readable sequence. */
@media(max-width:900px){
  .problem-process{
    background:linear-gradient(180deg,#f4f1eb 0%,#f8f6f1 52%,#f2efe9 100%)!important;
  }
  .problem-stage{
    display:block!important;
    padding:4.75rem 1.15rem 2.2rem!important;
  }
  .problem-copy{
    max-width:100%;
  }
  .problem-copy h2{
    max-width:7.6ch!important;
    font-size:clamp(3.65rem,15vw,6rem)!important;
    line-height:.87!important;
  }
  .problem-thesis{
    max-width:26ch!important;
    margin-top:1rem!important;
    font-size:.98rem!important;
  }
  .problem-visual{
    height:auto!important;
    min-height:0!important;
    margin-top:2.1rem;
    display:block!important;
  }
  .problem-scan-field{
    width:100%!important;
    aspect-ratio:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.75rem!important;
    transform:none!important;
  }
  .problem-scan-field::before,
  .problem-scan-field::after,
  .problem-orbit,
  .problem-axis,
  .problem-node,
  .problem-focus-ring,
  .problem-focus-vignette{
    display:none!important;
  }
  .problem-signal,
  .problem-root{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:none!important;
    padding:1rem 1.05rem!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
    border:1px solid rgba(42,36,48,.10)!important;
    background:rgba(255,255,255,.78)!important;
    box-shadow:none!important;
  }
  .problem-root{
    order:5;
    border-color:rgba(117,82,210,.28)!important;
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(121,85,216,.07))!important;
  }
  .problem-signal span,
  .problem-root span{
    font-size:.58rem!important;
  }
  .problem-signal strong,
  .problem-root strong{
    font-size:.78rem!important;
  }
  .problem-detail{
    display:block!important;
    max-height:none!important;
    margin:.55rem 0 0!important;
    opacity:1!important;
    transform:none!important;
    font-size:.72rem!important;
    line-height:1.55!important;
  }
}

/* Build 45 — Selected Work pacing refinement.
   Give each project a brief full-viewport reading plateau before horizontal travel resumes. */
@media(min-width:901px){
  .work-pin{
    height:340svh!important;
    min-height:340svh!important;
  }
  .work-sticky{
    height:100svh!important;
  }
}


/* ====================================================================
   Build 46 — Selected Work viewport-height containment
   Keep every project fully framed on smaller laptops / landscape tablets.
   ==================================================================== */

@media(min-width:901px){
  /* The sticky viewport is the actual visual stage. */
  .work-sticky{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    overflow:hidden!important;
  }

  .work-slides{
    height:100svh!important;
    min-height:100svh!important;
    align-items:stretch!important;
  }

  .project{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    box-sizing:border-box!important;
    overflow:hidden!important;

    /* Keep the project number and the content in a bounded stage. */
    grid-template-rows:auto minmax(0,1fr)!important;
    align-items:stretch!important;
  }

  .project-copy{
    min-height:0!important;
    align-self:center!important;
    padding-bottom:0!important;
  }

  .project-visual{
    min-height:0!important;
    height:min(68svh,680px)!important;
    max-height:68svh!important;
    align-self:center!important;
    overflow:visible!important;
  }

  /* Prevent unusually long display lines from making the composition too tall. */
  .project h3{
    font-size:clamp(2.8rem,5vw,5.8rem)!important;
    line-height:.94!important;
  }
}

/* Compact laptop / landscape tablet mode.
   This is intentionally height-driven, not only width-driven. */
@media(min-width:901px) and (max-height:820px){
  .project{
    padding:
      clamp(3.5rem,7.2vh,4.7rem)
      clamp(1.5rem,3.2vw,3rem)
      clamp(.9rem,2vh,1.35rem)!important;
    gap:clamp(.7rem,1.5vh,1.15rem)!important;
  }

  .project-number{
    font-size:.58rem!important;
    line-height:1!important;
  }

  .project-copy{
    align-self:center!important;
    max-width:min(35vw,540px)!important;
  }

  .project-label{
    margin-bottom:.55rem!important;
    font-size:.61rem!important;
  }

  .project h3{
    /* Height is the limiting factor here. */
    font-size:clamp(2.45rem,7.1vh,4.65rem)!important;
    line-height:.91!important;
    letter-spacing:-.04em!important;
  }

  .project-copy>p:not(.project-label){
    margin:.72rem 0!important;
    max-width:46ch!important;
    font-size:.72rem!important;
    line-height:1.48!important;
  }

  .project-tags{
    gap:.32rem!important;
    margin-bottom:.7rem!important;
  }

  .project-tags span{
    padding:.30rem .44rem!important;
    font-size:.49rem!important;
  }

  .project-copy a{
    font-size:.56rem!important;
    padding-bottom:.22rem!important;
  }

  .project-visual{
    height:min(62svh,520px)!important;
    max-height:62svh!important;
    transform-origin:center center!important;
  }

  /* Keep the mockups inside their half of the stage. */
  .project-kintinuity .glass-shell{
    inset:7% 2% 7% 5%!important;
  }

  .project-birthday .bd-phone{
    height:67%!important;
    min-width:190px!important;
    width:31%!important;
  }

  .project-birthday .bd-window{
    width:60%!important;
    height:50%!important;
  }

  .project-lobework .lobe-shell{
    width:88%!important;
    height:62%!important;
  }

  .project-world-label{
    font-size:.52rem!important;
  }
}

/* Extra-short landscape screens — common 1366×600/650 browser windows
   and some landscape tablets with browser chrome visible. */
@media(min-width:901px) and (max-height:680px){
  .project{
    grid-template-columns:minmax(270px,.78fr) minmax(360px,1.22fr)!important;
    padding:
      clamp(2.9rem,6.2vh,3.6rem)
      clamp(1.25rem,2.8vw,2.5rem)
      .65rem!important;
    gap:.65rem!important;
  }

  .project-copy{
    max-width:min(36vw,500px)!important;
  }

  .project-label{
    margin-bottom:.38rem!important;
    font-size:.55rem!important;
  }

  .project h3{
    font-size:clamp(2.15rem,6.65vh,3.95rem)!important;
    line-height:.89!important;
  }

  .project-copy>p:not(.project-label){
    margin:.5rem 0!important;
    font-size:.65rem!important;
    line-height:1.38!important;
    max-width:48ch!important;
  }

  .project-tags{
    gap:.24rem!important;
    margin-bottom:.45rem!important;
  }

  .project-tags span{
    padding:.24rem .36rem!important;
    font-size:.44rem!important;
  }

  .project-copy a{
    font-size:.50rem!important;
  }

  .project-visual{
    height:min(57svh,430px)!important;
    max-height:57svh!important;
  }

  .project-birthday .bd-phone{
    min-width:165px!important;
    height:64%!important;
  }

  .bd-face{
    width:50px!important;
    height:50px!important;
    margin-bottom:1rem!important;
  }

  .bd-cta{
    height:32px!important;
    margin-top:14px!important;
  }

  .project-lobework .lobe-shell{
    height:58%!important;
  }
}

/* Narrow landscape desktop/tablet widths get a slightly more balanced split. */
@media(min-width:901px) and (max-width:1180px){
  .project{
    grid-template-columns:minmax(280px,.9fr) minmax(380px,1.1fr)!important;
    column-gap:1.25rem!important;
  }

  .project h3{
    font-size:clamp(2.55rem,4.6vw,4.6rem)!important;
  }

  .project-visual{
    width:100%!important;
  }
}

/* Reduced motion still gets the safe contained composition. */
@media(prefers-reduced-motion:reduce) and (min-width:901px){
  .work-sticky,
  .work-slides,
  .project{
    max-height:none!important;
  }
}


/* ====================================================================
   Build 48 — Systems section cleanup
   - remove bottom block navigation
   - replace with compact vertical dot nav on the right
   - hide DSCX camera / XYZR telemetry labels
   ==================================================================== */

@media(min-width:901px){
  .systems-spatial-hud{
    display:none!important;
  }

  .systems-spatial .systems-stage{
    grid-template-rows:1fr!important;
    padding-bottom:clamp(1.25rem,3.2vh,2rem)!important;
  }

  .systems-spatial .systems-index{
    position:absolute!important;
    top:50%!important;
    right:clamp(1rem,1.8vw,1.8rem)!important;
    left:auto!important;
    bottom:auto!important;
    transform:translateY(-50%);
    z-index:26!important;
    width:auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:.7rem!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
    pointer-events:auto;
  }

  .systems-spatial .system-step{
    position:relative;
    width:14px!important;
    height:14px!important;
    min-height:14px!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.12)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important;
    backdrop-filter:none!important;
    overflow:hidden!important;
    color:transparent!important;
    text-indent:-9999px!important;
    transition:transform .22s ease, background .22s ease, box-shadow .22s ease, opacity .22s ease;
  }

  .systems-spatial .system-step span,
  .systems-spatial .system-step strong,
  .systems-spatial .system-step::after{
    display:none!important;
  }

  .systems-spatial .system-step::before{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:999px;
    background:rgba(255,255,255,.34);
    opacity:.16;
    transition:opacity .22s ease, transform .22s ease, background .22s ease;
  }

  .systems-spatial .system-step:hover{
    transform:scale(1.08);
    background:rgba(255,255,255,.18)!important;
  }

  .systems-spatial .system-step:hover::before{
    opacity:.38;
  }

  .systems-spatial .system-step.is-active{
    background:rgba(126,84,231,.24)!important;
    box-shadow:
      0 0 0 1px rgba(198,183,255,.6),
      0 0 16px rgba(126,84,231,.32)!important;
  }

  .systems-spatial .system-step.is-active::before{
    opacity:1;
    transform:scale(1.02);
    background:linear-gradient(180deg,#cfbeff 0%, #8a63f0 100%);
  }

  .systems-scroll-cue{
    right:clamp(1rem,1.8vw,1.8rem)!important;
    bottom:clamp(1rem,3.2vh,2rem)!important;
  }
}

@media(max-width:900px){
  .systems-spatial-hud{display:none!important}
  .systems-spatial .systems-index{display:none!important}
}

/* Keep the problem section dependent on the cards, not duplicated stage text. */
.problem-stage-copy{display:none!important}


/* Build 49 — storytelling section boundary guard */
.problem-process,
.systems-spatial,
.production-process{
  margin-top:0!important;
  transform:none;
}

@media(min-width:901px){
  .problem-process,
  .systems-spatial,
  .production-process{
    position:relative!important;
  }
}

/* ====================================================================
   Build 52 — Section 05 / deliberate iterative construction language
   ==================================================================== */

.production-stage{
  isolation:isolate;
}
.production-blueprint{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.production-blueprint svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.blueprint-path{
  fill:none;
  stroke:rgba(112,79,200,.18);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  opacity:0;
}
.path-axis-h,.path-axis-v{stroke:rgba(84,70,112,.13)}
.path-grid-1,.path-grid-2{stroke:rgba(112,79,200,.105)}
.path-diag-1,.path-diag-2{stroke:rgba(112,79,200,.16)}
.path-revision{stroke:rgba(122,83,219,.38);stroke-width:1.45}
.blueprint-node{
  fill:#8c6de6;
  opacity:0;
  filter:drop-shadow(0 0 8px rgba(130,94,223,.25));
}
.blueprint-measure{
  position:absolute;
  z-index:1;
  opacity:0;
  color:rgba(81,71,94,.44);
  font:500 .48rem var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.measure-a{left:20%;top:31%}
.measure-b{right:20%;top:33%}
.measure-c{right:18%;bottom:21%}
.blueprint-glow{
  position:absolute;
  left:54%;
  top:45%;
  width:32vw;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(120,84,215,.13),rgba(120,84,215,0) 68%);
  filter:blur(22px);
  opacity:0;
  transform:translate(-50%,-50%);
}

/* The smaller construction field now occupies the full stage rather than
   being trapped inside the right visual. */
.production-field{
  inset:0!important;
  z-index:1;
  overflow:hidden;
  opacity:1;
}
.production-field .grid-a{inset:12% 8%!important}
.production-field .grid-b{inset:19% 16%!important}
.production-field .line-a{left:18%;top:35%;width:46%!important}
.production-field .line-b{left:29%;top:58%;width:44%!important}
.production-field .line-c{left:46%;top:27%;width:38%!important}
.production-field .line-d{left:54%;top:70%;width:31%!important}
.production-field .node-a{left:25%;top:34%}
.production-field .node-b{left:67%;top:27%}
.production-field .node-c{left:73%;top:57%}
.production-field .node-d{left:52%;top:69%}
.production-field .outline-a{inset:17% 25% 17% 43%!important}
.production-field .outline-b{inset:24% 31% 24% 49%!important}
.production-field .outline-c{inset:31% 37% 31% 55%!important}
.production-field .beam-a{left:34%;top:48%}

/* One coherent stack is the backbone of the five production phases.
   01 = one plane, 02 = two planes ... 05 = five planes. */
.iteration-stack{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  z-index:2;
}
.iteration-plane{
  position:absolute;
  inset:20%;
  border:1px solid rgba(103,74,187,.24);
  background:linear-gradient(135deg,rgba(255,255,255,.70),rgba(119,82,216,.035));
  box-shadow:0 26px 75px rgba(65,49,91,.045);
  opacity:0;
  transform-origin:center center;
  will-change:transform,opacity,filter;
}
.iteration-plane.plane-1{transform:translate3d(-34px,26px,-72px) rotate(45deg)}
.iteration-plane.plane-2{transform:translate3d(-18px,13px,-30px) rotate(45deg)}
.iteration-plane.plane-3{transform:translate3d(0,0,18px) rotate(45deg)}
.iteration-plane.plane-4{transform:translate3d(18px,-13px,68px) rotate(45deg)}
.iteration-plane.plane-5{transform:translate3d(34px,-26px,122px) rotate(45deg)}

/* Retire the competing square geometries; their controls/data/revision marks
   remain and now annotate the canonical stack instead. */
.production-frame,
.prototype-plane,
.revision-slab,
.better-shell{display:none!important}

/* BUILD is the anchor on entry. Future words are intentionally unreadable
   until their phase arrives. */
.production-headline .production-word[data-production-word="0"]{
  opacity:1;
  filter:none;
  transform:none;
  color:#17151b;
}
.production-headline .production-word[data-production-word="1"],
.production-headline .production-word[data-production-word="2"]{
  opacity:.018;
  filter:blur(20px);
  color:rgba(23,21,27,.08);
}

/* Annotation now feels attached to the drawing, not like a floating UI card. */
.production-visual-copy{
  left:50%!important;
  bottom:3.5%!important;
  width:min(31vw,420px)!important;
  transform:translateX(-4%)!important;
  background:rgba(251,249,245,.82)!important;
  box-shadow:0 12px 42px rgba(61,47,84,.045)!important;
  border-color:rgba(117,82,210,.15)!important;
}
.production-visual-copy::before{
  content:"";
  position:absolute;
  right:82%;
  bottom:100%;
  width:clamp(90px,10vw,170px);
  height:1px;
  background:linear-gradient(90deg,rgba(122,87,213,.08),rgba(122,87,213,.55));
  transform-origin:right center;
  transform:rotate(-30deg);
}
.production-visual-copy::after{
  content:"";
  position:absolute;
  right:calc(82% + clamp(86px,9.7vw,164px));
  bottom:calc(100% + clamp(42px,5.1vw,83px));
  width:7px;
  height:7px;
  border-radius:50%;
  border:1px solid rgba(122,87,213,.48);
  background:#f8f5f0;
  box-shadow:0 0 16px rgba(122,87,213,.18);
}

@media(min-width:901px) and (max-height:820px){
  .production-visual-copy{
    bottom:2.2%!important;
    width:min(32vw,390px)!important;
    padding:.8rem .9rem!important;
  }
}

@media(max-width:900px){
  .production-blueprint,
  .production-field{display:none!important}
  .iteration-plane{opacity:.16!important}
  .iteration-plane.plane-1{opacity:.85!important}
  .production-visual-copy::before,
  .production-visual-copy::after{display:none}
}

/* ====================================================================
   Build 54 — signature homepage refinement
   Hero: restrained depth + persistent signal
   My Thoughts: editorial idea field
   CTA: converging signal / magnetic resolution
   ==================================================================== */

/* HERO — composed first, interactive second */
.hero-signal{
  position:absolute;
  right:24%;
  top:31%;
  z-index:7;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent2);
  box-shadow:0 0 0 8px rgba(141,92,246,.035),0 0 24px rgba(141,92,246,.48);
  opacity:.82;
  pointer-events:none;
}
.hero h1{will-change:transform}
.portrait-main,.portrait-ghost,.portrait-ambient,.hero-signal{will-change:transform}
@keyframes heroSignalBreath{
  0%,100%{transform:scale(.82);opacity:.55;box-shadow:0 0 0 5px rgba(141,92,246,.025),0 0 14px rgba(141,92,246,.32)}
  50%{transform:scale(1.08);opacity:1;box-shadow:0 0 0 12px rgba(141,92,246,.035),0 0 30px rgba(141,92,246,.58)}
}
.hero-signal{animation:heroSignalBreath 4.8s ease-in-out infinite}

/* MY THOUGHTS — editorial field rather than a conventional blog strip */
.thoughts-editorial{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 20%,rgba(141,92,246,.075),transparent 24%),
    linear-gradient(180deg,#f4f1eb 0%,#f7f4ee 100%);
}
.thoughts-editorial::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:linear-gradient(rgba(46,40,53,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(46,40,53,.04) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 88%,transparent 100%);
}
.thoughts-field{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.7;
}
.thoughts-field span{
  position:absolute;
  border:1px solid rgba(113,79,198,.10);
  border-radius:50%;
  transition:transform .7s ease,opacity .7s ease,border-color .7s ease;
}
.thoughts-field span:nth-child(1){width:34vw;height:12vw;right:-4vw;top:13%;transform:rotate(14deg)}
.thoughts-field span:nth-child(2){width:25vw;height:9vw;right:7vw;top:24%;transform:rotate(-18deg)}
.thoughts-field span:nth-child(3){width:17vw;height:7vw;right:18vw;top:34%;transform:rotate(25deg)}
.thoughts-field i{
  position:absolute;
  right:22%;
  top:28%;
  width:7px;height:7px;border-radius:50%;
  background:#8c6ae8;
  box-shadow:0 0 22px rgba(115,82,205,.35);
}
.thoughts-heading{position:relative;z-index:3}
.thoughts-heading-copy{max-width:640px}
.thoughts-deck{
  margin:1.15rem 0 0;
  max-width:52ch;
  color:#67616b;
  font:400 .78rem/1.7 var(--mono);
}
.thoughts-grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.24fr .88fr .88fr;
  align-items:stretch;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(2px);
}
.thought-card{
  min-height:390px;
  padding:2.2rem;
  background:rgba(255,255,255,.22);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .45s ease,filter .45s ease,box-shadow .45s ease,background .45s ease;
}
.thought-card-lead{min-height:460px}
.thought-card h3{position:relative;z-index:3;max-width:88%}
.thought-card>p,.thought-card a{position:relative;z-index:3}
.thought-card.is-thought-active{
  transform:translateY(-10px) scale(1.012);
  background:rgba(255,255,255,.47);
  box-shadow:0 24px 64px rgba(67,52,91,.11);
}
.thought-card.is-thought-muted{opacity:.48;filter:blur(.45px)}

.thought-system-art,.thought-clarity-art,.thought-module-art{
  position:absolute;
  right:7%;
  bottom:10%;
  width:38%;
  aspect-ratio:1;
  pointer-events:none;
  opacity:.62;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .5s ease;
}
.thought-system-art span{
  position:absolute;
  width:8px;height:8px;border-radius:50%;background:#8d69e4;box-shadow:0 0 18px rgba(119,84,211,.25)
}
.thought-system-art span:nth-child(1){left:12%;top:24%}.thought-system-art span:nth-child(2){right:14%;top:18%}.thought-system-art span:nth-child(3){left:54%;bottom:12%}
.thought-system-art::before,.thought-system-art::after{
  content:"";position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(117,82,210,.42),transparent);transform-origin:left center
}
.thought-system-art::before{left:15%;top:29%;width:68%;transform:rotate(18deg)}
.thought-system-art::after{left:28%;top:54%;width:55%;transform:rotate(-28deg)}
.thought-system-art i{position:absolute;inset:20%;border:1px solid rgba(117,82,210,.18);transform:rotate(45deg)}

.thought-clarity-art span{position:absolute;left:12%;right:8%;height:1px;background:rgba(111,79,195,.26)}
.thought-clarity-art span:nth-child(1){top:30%;transform:scaleX(.42);transform-origin:left}
.thought-clarity-art span:nth-child(2){top:50%;transform:scaleX(.72);transform-origin:left}
.thought-clarity-art span:nth-child(3){top:70%;transform:scaleX(.28);transform-origin:left}

.thought-module-art{display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:rotate(-8deg)}
.thought-module-art span{border:1px solid rgba(117,82,210,.20);background:rgba(141,92,246,.045)}
.thought-module-art span:nth-child(2){transform:translateY(14px)}
.thought-module-art span:nth-child(3){transform:translateX(10px)}

.thought-card[data-thought-kind="systems"].is-thought-active .thought-system-art{transform:scale(1.14) rotate(4deg);opacity:1}
.thought-card[data-thought-kind="clarity"].is-thought-active .thought-clarity-art{transform:translateX(-8px);opacity:1}
.thought-card[data-thought-kind="clarity"].is-thought-active .thought-clarity-art span:nth-child(1){transform:scaleX(.92)}
.thought-card[data-thought-kind="clarity"].is-thought-active .thought-clarity-art span:nth-child(2){transform:scaleX(.58)}
.thought-card[data-thought-kind="clarity"].is-thought-active .thought-clarity-art span:nth-child(3){transform:scaleX(.82)}
.thought-card[data-thought-kind="composable"].is-thought-active .thought-module-art{transform:rotate(0deg) scale(1.08);opacity:1}

/* CTA — the page resolves into a focused invitation */
.final-cta{min-height:78vh;isolation:isolate}
.final-cta::before{
  background:
    radial-gradient(circle at var(--cta-x,78%) var(--cta-y,50%),rgba(141,92,246,.17),transparent 24%),
    radial-gradient(circle at 70% 54%,rgba(93,58,172,.08),transparent 42%)!important;
  transition:background .35s ease;
}
.cta-signal-field{position:absolute;inset:0;z-index:1;pointer-events:none}
.cta-signal-field b{
  position:absolute;width:6px;height:6px;border-radius:50%;background:#ab91fa;box-shadow:0 0 18px rgba(141,92,246,.34);opacity:.42
}
.cta-signal-field b:nth-child(1){left:63%;top:25%}
.cta-signal-field b:nth-child(2){left:77%;top:37%}
.cta-signal-field b:nth-child(3){left:68%;top:72%}
.cta-signal-field b:nth-child(4){left:88%;top:63%}
.cta-signal-field em{
  position:absolute;right:18%;top:50%;width:8px;height:8px;border-radius:50%;background:#d0bfff;box-shadow:0 0 30px rgba(141,92,246,.55);transform:translateY(-50%)
}
.final-cta.is-resolving .cta-signal-field b{opacity:.82}
.cta-button{position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
.cta-button::before{content:"";position:absolute;inset:-80%;background:radial-gradient(circle,rgba(202,185,255,.22),transparent 42%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.cta-button:hover::before,.cta-button:focus-visible::before{opacity:1}
.cta-button:hover,.cta-button:focus-visible{border-color:rgba(190,166,255,.72);box-shadow:0 12px 38px rgba(102,65,192,.20)}
.cta-orbit{will-change:transform}

@media(max-width:900px){
  .thoughts-grid{grid-template-columns:1fr}
  .thought-card,.thought-card-lead{min-height:310px}
  .thoughts-field{opacity:.4}
  .thought-system-art,.thought-clarity-art,.thought-module-art{width:30%}
  .hero-signal{display:none}
  .cta-signal-field{opacity:.58}
}
@media(prefers-reduced-motion:reduce){
  .hero-signal{animation:none}
  .thought-card{transform:none!important;filter:none!important;opacity:1!important}
}


/* Build 55 — My Thoughts visibility guard.
   Cards are content-first and remain visible unless the on-enter reveal is actively running. */
.thoughts-editorial .thought-card{
  opacity:1;
  visibility:visible;
}


/* Build 56 — CTA spacing + footer icon polish */
.final-cta h2{
  line-height:.88!important;
}
.final-cta h2 span{
  display:inline-block;
  margin-top:.055em;
}
.final-cta-inner{
  align-items:center!important;
}
.cta-copy{
  padding-bottom:0!important;
}
.site-footer{
  min-height:104px;
  border-top:1px solid rgba(255,255,255,.06);
}
.social-icons{
  display:flex!important;
  align-items:center;
  gap:.75rem!important;
}
.social-icons a{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  color:#7e7a86;
  transition:color .24s ease,border-color .24s ease,background .24s ease,transform .24s ease,box-shadow .24s ease;
}
.social-icons a svg{
  width:16px;
  height:16px;
  fill:currentColor;
  display:block;
}
.social-icons a:hover,
.social-icons a:focus-visible{
  color:#c2abff;
  border-color:rgba(194,171,255,.34);
  background:rgba(141,92,246,.07);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(91,57,171,.13);
  outline:none;
}
@media(max-width:900px){
  .final-cta h2{line-height:.9!important}
  .site-footer{row-gap:1.1rem}
  .social-icons{flex-wrap:nowrap!important}
}
@media(max-width:560px){
  .social-icons a{width:36px;height:36px}
}


/* Build 57 — legal pages */
.legal-page{
  background:#f4f1eb;
  color:#17151b;
  min-height:100svh;
}
.legal-header{
  position:sticky;
  top:0;
  z-index:20;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(1.25rem,4vw,4rem);
  border-bottom:1px solid rgba(23,21,27,.08);
  background:rgba(244,241,235,.88);
  backdrop-filter:blur(14px);
}
.legal-header .brand{
  color:#17151b;
}
.legal-header nav{
  display:flex;
  gap:1.2rem;
  font:500 .58rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.legal-header a:hover{color:var(--accent)}
.legal-shell{
  width:min(1180px,calc(100% - 2.5rem));
  margin:0 auto;
  padding:clamp(5rem,9vw,8rem) 0 clamp(6rem,10vw,9rem);
  display:grid;
  grid-template-columns:minmax(240px,.48fr) minmax(0,1fr);
  gap:clamp(3rem,8vw,8rem);
}
.legal-intro{
  position:sticky;
  top:118px;
  align-self:start;
}
.legal-kicker{
  margin:0 0 1rem;
  color:#7659d8;
  font:600 .6rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.legal-intro h1{
  margin:0;
  font:500 clamp(4rem,8vw,8rem)/.88 var(--display);
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.legal-meta{
  margin:1.4rem 0 0;
  color:#77717a;
  font:400 .72rem/1.6 var(--mono);
}
.legal-body{
  max-width:760px;
}
.legal-body section{
  padding:0 0 2.4rem;
  margin:0 0 2.4rem;
  border-bottom:1px solid rgba(23,21,27,.08);
}
.legal-body h2{
  margin:0 0 .85rem;
  font:600 .78rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.legal-body p,
.legal-body li{
  color:#5f5963;
  font:400 .95rem/1.75 var(--poppins);
}
.legal-body ul{
  padding-left:1.15rem;
}
.legal-body a{
  color:#5f42c8;
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-note{
  padding:1rem 1.1rem;
  border:1px solid rgba(117,82,210,.16);
  background:rgba(255,255,255,.5);
}
.legal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.5rem clamp(1.25rem,4vw,4rem);
  border-top:1px solid rgba(23,21,27,.08);
  font:500 .56rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7a747d;
}
.legal-footer nav{
  display:flex;
  gap:1.1rem;
}
@media(max-width:800px){
  .legal-header nav{display:none}
  .legal-shell{grid-template-columns:1fr}
  .legal-intro{position:relative;top:auto}
  .legal-intro h1{font-size:clamp(3.5rem,16vw,6rem)}
  .legal-footer{align-items:flex-start;flex-direction:column}
}

/* ====================================================================
   Build 59 — responsive/runtime hardening
   Production-safe breakpoint behavior for mobile, tablet landscape,
   short laptop windows, and live viewport resizing.
   ==================================================================== */

html.is-resizing *,
html.is-resizing *::before,
html.is-resizing *::after{
  transition-duration:.001ms!important;
}

/* Mobile/tablet: storytelling becomes readable document flow rather than
   compressed desktop camera choreography. */
@media(max-width:900px){
  .hero{
    min-height:100svh!important;
    overflow:hidden!important;
  }
  .hero-copy{
    padding-top:clamp(6.5rem,14vh,8rem)!important;
    padding-bottom:3rem!important;
  }
  .hero h1{
    font-size:clamp(4.5rem,20vw,8rem)!important;
    line-height:.88!important;
  }
  .hero-portrait{
    inset:36% -18% -2% 5%!important;
  }

  .work-pin{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .work-slides{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    transform:none!important;
  }
  .project{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    padding:clamp(4.5rem,9vh,6rem) clamp(1.15rem,4.5vw,2rem) clamp(3rem,7vh,4.5rem)!important;
    gap:1.1rem!important;
    cursor:auto!important;
  }
  .project-number{grid-column:1!important}
  .project-visual{
    grid-row:2!important;
    min-height:0!important;
    height:clamp(330px,52vw,520px)!important;
    max-height:none!important;
    margin:.25rem 0 .75rem!important;
    transform:none!important;
    opacity:1!important;
  }
  .project-copy{
    grid-row:3!important;
    max-width:680px!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
  }
  .project h3{
    font-size:clamp(3rem,11vw,5.4rem)!important;
    line-height:.91!important;
  }
  .project-world-label{display:none!important}

  .problem-process,
  .production-process,
  .systems-spatial{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .problem-stage,
  .production-stage,
  .systems-spatial .systems-stage{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .problem-stage,
  .production-stage{
    grid-template-columns:1fr!important;
    gap:1.5rem!important;
    padding:5rem 1.2rem 4rem!important;
  }
  .problem-copy h2,
  .production-copy h2{
    font-size:clamp(3.7rem,14vw,6.4rem)!important;
    max-width:none!important;
  }
  .problem-visual,
  .production-visual{
    height:auto!important;
    min-height:440px!important;
    overflow:visible!important;
  }
  .problem-scan-field,
  .production-object{
    width:min(86vw,520px)!important;
    transform:none!important;
  }
  .problem-signal,
  .problem-root{
    filter:none!important;
  }
  .production-headline .production-word{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    color:#17151b!important;
  }
  .production-blueprint,
  .production-field{
    opacity:.38!important;
  }
  .production-visual-copy{
    position:relative!important;
    left:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:520px!important;
    transform:none!important;
    margin:1rem auto 0!important;
  }

  .systems-spatial .systems-stage{
    padding:5rem 1.2rem 4rem!important;
  }
  .systems-viewport{
    position:relative!important;
    inset:auto!important;
    min-height:540px!important;
    overflow:hidden!important;
  }
  .systems-world{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) scale(.74)!important;
    transform-origin:center!important;
  }
  .systems-copy{
    position:relative!important;
    z-index:5!important;
    max-width:none!important;
  }
  .systems-copy h2{
    font-size:clamp(3.5rem,14vw,6rem)!important;
  }

  .thoughts-editorial{
    padding-top:4.5rem!important;
    padding-bottom:4.5rem!important;
  }
  .thoughts-heading{
    gap:1.5rem!important;
  }
  .thoughts-portrait{
    height:clamp(240px,58vw,360px)!important;
  }
  .thought-card{
    min-height:260px!important;
  }

  .final-cta{
    min-height:auto!important;
  }
  .final-cta-inner{
    min-height:auto!important;
    padding-top:5.5rem!important;
    padding-bottom:5.5rem!important;
    gap:3rem!important;
  }
  .final-cta h2{
    font-size:clamp(4.2rem,18vw,7rem)!important;
    line-height:.92!important;
  }
  .cta-copy{
    max-width:520px!important;
  }
  .cta-orbit{
    width:min(120vw,720px)!important;
    right:-45vw!important;
    opacity:.5!important;
  }

  .site-footer{
    grid-template-columns:1fr!important;
    gap:1.2rem!important;
    padding-top:2rem!important;
    padding-bottom:2rem!important;
  }
  .site-footer nav{
    gap:.8rem 1.1rem!important;
  }
  .social-icons{justify-content:flex-start!important}
  .back-top{justify-self:start!important}
}

/* Phones: avoid oversized art and compressed copy. */
@media(max-width:560px){
  .hero-portrait{inset:42% -32% -1% 1%!important}
  .project-visual{height:340px!important}
  .project h3{font-size:clamp(2.8rem,13vw,4.5rem)!important}
  .problem-visual,.production-visual{min-height:390px!important}
  .systems-viewport{min-height:470px!important}
  .systems-world{transform:translate(-50%,-50%) scale(.62)!important}
  .thought-card{min-height:230px!important}
  .final-cta h2{font-size:clamp(3.8rem,20vw,6rem)!important}
}

/* Short desktop/laptop windows: keep pinned compositions inside the stage. */
@media(min-width:901px) and (max-height:720px){
  .hero-copy{padding-top:5.5rem!important}
  .hero h1{font-size:clamp(4.6rem,10.5vh,7.2rem)!important}
  .project{padding-top:clamp(3rem,6vh,4rem)!important;padding-bottom:.7rem!important}
  .project h3{font-size:clamp(2.2rem,6.3vh,3.8rem)!important}
  .project-copy>p:not(.project-label){font-size:.64rem!important;line-height:1.4!important}
  .project-visual{height:55svh!important;max-height:55svh!important}
  .problem-copy h2,.production-copy h2{font-size:clamp(3.5rem,8.5vh,5.9rem)!important}
  .problem-stage,.production-stage{padding-top:1.15rem!important;padding-bottom:1.15rem!important}
  .problem-visual,.production-visual{height:68svh!important;min-height:390px!important}
  .systems-copy h2{font-size:clamp(3.6rem,9vh,6.2rem)!important}
}

/* ====================================================================
   Build 60 — homepage QA + Thoughts foundation
   ==================================================================== */

/* Selected Work: stricter viewport containment on shallow desktop windows. */
@media(min-width:901px){
  .work-pin{
    height:300dvh!important;
    min-height:300dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .work-sticky,
  .work-slides,
  .project{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
  }
  .project{
    grid-template-rows:min-content minmax(0,1fr)!important;
  }
  .project-copy{
    align-self:center!important;
    padding-bottom:0!important;
    min-height:0!important;
    max-height:calc(100dvh - 7rem)!important;
  }
  .project-visual{
    align-self:center!important;
    min-height:0!important;
    max-height:68dvh!important;
  }
}
@media(min-width:901px) and (max-height:820px){
  .project{
    padding-top:clamp(2.7rem,5.6vh,3.8rem)!important;
    padding-bottom:clamp(.7rem,1.7vh,1.15rem)!important;
    gap:clamp(.55rem,1.2vh,.9rem)!important;
  }
  .project-label{margin-bottom:.42rem!important;font-size:.55rem!important}
  .project h3{font-size:clamp(2.1rem,6.4vh,4.05rem)!important;line-height:.9!important}
  .project-copy>p:not(.project-label){margin:.48rem 0!important;font-size:.62rem!important;line-height:1.38!important;max-width:50ch!important}
  .project-tags{margin-bottom:.46rem!important;gap:.24rem!important}
  .project-tags span{padding:.22rem .34rem!important;font-size:.43rem!important}
  .project-copy a{font-size:.49rem!important;padding-bottom:.18rem!important}
  .project-visual{height:min(56dvh,470px)!important;max-height:56dvh!important}
  .bd-phone{height:63%!important;min-width:165px!important}
  .lobe-shell{height:56%!important}
}
@media(min-width:901px) and (max-height:680px){
  .project{padding-top:2.35rem!important;padding-bottom:.45rem!important;gap:.42rem!important}
  .project h3{font-size:clamp(1.95rem,6vh,3.45rem)!important;line-height:.88!important}
  .project-copy>p:not(.project-label){font-size:.58rem!important;line-height:1.32!important;margin:.38rem 0!important}
  .project-tags span{font-size:.39rem!important}
  .project-visual{height:min(52dvh,390px)!important;max-height:52dvh!important}
}

/* Problem Process: state zero is painted before JS runs, preventing the
   all-cards-visible flash on first entry. JS replaces these values as soon as
   the storytelling trigger advances. */
@media(min-width:901px){
  .problem-process:not(.is-story-ready) .problem-signal,
  .problem-process:not(.is-story-ready) .problem-root{
    opacity:.13;
    filter:blur(4px);
    transform:scale(.93);
  }
  .problem-process:not(.is-story-ready) .signal-a{
    opacity:1;
    filter:none;
    transform:rotate(-4deg) scale(1.035);
    border-color:rgba(118,86,214,.42);
    background:linear-gradient(135deg,rgba(255,255,255,.985),rgba(121,85,216,.10));
    box-shadow:0 32px 90px rgba(90,68,136,.16);
  }
  .problem-process:not(.is-story-ready) .signal-a .problem-detail{
    max-height:160px;
    opacity:1;
    transform:none;
  }
  .problem-process:not(.is-story-ready) .problem-root{opacity:.05}
}

/* My Thoughts homepage cards: reserve a consistent footer lane so CTA labels
   do not compete with the editorial art. */
.thoughts-editorial .thought-card{
  padding-bottom:5.2rem!important;
}
.thoughts-editorial .thought-card>a{
  left:2.2rem!important;
  bottom:1.75rem!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:32px;
  padding:.42rem .05rem!important;
  border-top:1px solid rgba(117,82,210,.16);
  width:max-content;
  letter-spacing:.09em!important;
  z-index:8!important;
}
.thoughts-editorial .thought-system-art,
.thoughts-editorial .thought-clarity-art,
.thoughts-editorial .thought-module-art{
  bottom:16%!important;
}
@media(max-width:900px){
  .thoughts-editorial .thought-card{padding-bottom:4.7rem!important}
  .thoughts-editorial .thought-card>a{left:1.25rem!important;bottom:1.2rem!important}
}

/* --------------------------------------------------------------------
   My Thoughts / article system
   -------------------------------------------------------------------- */
.thoughts-page,.article-page{background:#f4f1eb;color:#17151b;min-height:100svh}
.thoughts-site-header,.article-site-header{
  position:sticky;top:0;z-index:40;height:72px;display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(1.2rem,4vw,4rem);
  border-bottom:1px solid rgba(23,21,27,.08);background:rgba(244,241,235,.9);
  backdrop-filter:blur(14px)
}
.thoughts-site-header nav,.article-site-header nav{display:flex;gap:1.1rem;font:500 .58rem var(--mono);text-transform:uppercase;letter-spacing:.08em}
.thoughts-site-header a:hover,.article-site-header a:hover{color:#7659d8}
.thoughts-index-hero{
  min-height:64svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);
  gap:clamp(2rem,8vw,8rem);align-items:end;padding:clamp(5rem,9vw,8rem) clamp(1.2rem,4vw,4rem) clamp(3rem,6vw,5rem);
  border-bottom:1px solid rgba(23,21,27,.08);position:relative;overflow:hidden
}
.thoughts-index-hero:after{content:"";position:absolute;right:-5%;top:5%;width:46vw;aspect-ratio:1;border:1px solid rgba(117,82,210,.08);transform:rotate(45deg);pointer-events:none}
.thoughts-index-hero h1{margin:0;font:500 clamp(4.8rem,10vw,10rem)/.84 var(--display);letter-spacing:-.05em;text-transform:uppercase}
.thoughts-index-hero p{max-width:46ch;margin:0 0 .7rem;color:#6d6671;font:400 .84rem/1.75 var(--mono)}
.thoughts-index-list{padding:0 clamp(1.2rem,4vw,4rem) 7rem}
.thought-index-card{display:grid;grid-template-columns:100px minmax(0,1fr) minmax(240px,.55fr) auto;gap:clamp(1rem,3vw,3rem);align-items:center;padding:2.3rem 0;border-bottom:1px solid rgba(23,21,27,.09)}
.thought-index-card .type{font:500 .58rem var(--mono);color:#7659d8;text-transform:uppercase;letter-spacing:.08em}
.thought-index-card h2{margin:0;font:500 clamp(2rem,4vw,4rem)/.96 var(--display);text-transform:uppercase;letter-spacing:-.03em}
.thought-index-card p{margin:0;color:#6d6671;font:400 .76rem/1.65 var(--mono)}
.thought-index-card>a{font:600 .58rem var(--mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(23,21,27,.14);padding:.8rem .9rem}
.thought-index-card>a:hover{border-color:rgba(117,82,210,.45);color:#7659d8}

.article-hero{padding:clamp(5rem,8vw,7.5rem) clamp(1.2rem,4vw,4rem) 3.5rem;border-bottom:1px solid rgba(23,21,27,.08)}
.article-hero-inner{width:min(1080px,100%);margin:0 auto}
.article-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;font:500 .58rem var(--mono);color:#716a75;text-transform:uppercase;letter-spacing:.08em}
.article-meta .accent{color:#7659d8}
.article-hero h1{max-width:12ch;margin:0;font:500 clamp(4rem,8.4vw,8.6rem)/.87 var(--display);letter-spacing:-.05em;text-transform:uppercase}
.article-deck{max-width:650px;margin:1.6rem 0 0;color:#665f6a;font:400 clamp(1rem,1.5vw,1.22rem)/1.65 var(--poppins)}
.article-layout{width:min(1120px,calc(100% - 2.4rem));margin:0 auto;display:grid;grid-template-columns:190px minmax(0,720px);gap:clamp(2rem,7vw,6rem);padding:4.5rem 0 7rem;justify-content:center}
.article-rail{position:sticky;top:112px;align-self:start;font:500 .56rem/1.65 var(--mono);color:#827b85;text-transform:uppercase;letter-spacing:.07em}
.article-rail a{display:block;margin-top:.7rem;color:#5e5666;text-transform:none;letter-spacing:0}
.article-body{font:400 1.04rem/1.82 var(--poppins);color:#4f4953}
.article-body h2{margin:3.5rem 0 1rem;color:#17151b;font:500 clamp(2.2rem,4vw,4rem)/.98 var(--display);letter-spacing:-.025em;text-transform:uppercase}
.article-body h3{margin:2.5rem 0 .7rem;color:#17151b;font:600 1rem var(--mono);letter-spacing:.04em;text-transform:uppercase}
.article-body p{margin:0 0 1.4rem}
.article-body ul{margin:0 0 1.6rem;padding-left:1.2rem}
.article-body blockquote{margin:3rem 0;padding:1.4rem 0 1.4rem 1.4rem;border-left:2px solid #8a63e9;color:#28222f;font:500 clamp(1.5rem,2.7vw,2.4rem)/1.28 var(--display)}
.article-callout{margin:2.5rem 0;padding:1.2rem 1.3rem;border:1px solid rgba(117,82,210,.16);background:rgba(255,255,255,.45);font:400 .82rem/1.7 var(--mono);color:#5e5762}
.article-diagram{margin:3rem 0;min-height:320px;border:1px solid rgba(117,82,210,.13);background:linear-gradient(rgba(117,82,210,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(117,82,210,.045) 1px,transparent 1px);background-size:52px 52px;display:grid;place-items:center;position:relative;overflow:hidden}
.article-diagram:before{content:"";width:42%;aspect-ratio:1;border:1px solid rgba(117,82,210,.25);transform:rotate(45deg);box-shadow:0 0 70px rgba(117,82,210,.07)}
.article-diagram span{position:absolute;font:500 .55rem var(--mono);color:#7659d8;text-transform:uppercase;letter-spacing:.08em}
.article-diagram span:nth-child(1){top:16%;left:14%}.article-diagram span:nth-child(2){right:13%;top:46%}.article-diagram span:nth-child(3){bottom:14%;left:38%}
.article-end-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(23,21,27,.08)}
.article-end-nav a{padding:2rem clamp(1.2rem,4vw,4rem);font:500 .62rem var(--mono);text-transform:uppercase;letter-spacing:.07em}
.article-end-nav a:last-child{text-align:right;border-left:1px solid rgba(23,21,27,.08)}
.article-end-nav strong{display:block;margin-top:.45rem;font:500 clamp(1.2rem,2vw,2rem) var(--display);letter-spacing:-.02em}

@media(max-width:800px){
  .thoughts-site-header nav,.article-site-header nav{display:none}
  .thoughts-index-hero{grid-template-columns:1fr;min-height:auto;padding-top:5rem}
  .thought-index-card{grid-template-columns:1fr;gap:.7rem;padding:1.8rem 0}
  .thought-index-card>a{width:max-content}
  .article-layout{grid-template-columns:1fr;padding-top:3rem}
  .article-rail{position:relative;top:auto;border-bottom:1px solid rgba(23,21,27,.08);padding-bottom:1.2rem}
  .article-end-nav{grid-template-columns:1fr}.article-end-nav a:last-child{text-align:left;border-left:0;border-top:1px solid rgba(23,21,27,.08)}
}


/* Build 61 — focused regression repair */

/* Selected Work: explicit sticky stage after restoring the 300dvh runway. */
@media(min-width:901px){
  .work-sticky{
    position:sticky!important;
    top:0!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  .work-slides{
    height:100%!important;
    min-height:100%!important;
    max-height:100%!important;
  }
}

/* Problem cards: once JS owns the story state, active content must be allowed
   to become fully legible — especially ROOT. */
@media(min-width:901px){
  .problem-process.is-story-ready .problem-signal.is-active,
  .problem-process.is-story-ready .problem-root.is-active{
    opacity:1!important;
    filter:blur(0)!important;
  }
  .problem-process.is-story-ready .problem-signal.is-active .problem-detail,
  .problem-process.is-story-ready .problem-root.is-active .problem-detail{
    max-height:180px!important;
    opacity:1!important;
    transform:translateY(0)!important;
  }
}

/* My Thoughts: establish a true footer lane for the link. */
.thoughts-editorial .thought-card{
  padding-bottom:6rem!important;
}
.thoughts-editorial .thought-card>a{
  position:absolute!important;
  left:2.2rem!important;
  bottom:1.7rem!important;
  top:auto!important;
  margin:0!important;
  z-index:12!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.35rem;
  min-height:34px;
  padding:.42rem 0!important;
  border-top:1px solid rgba(117,82,210,.18);
  width:max-content;
}
@media(max-width:900px){
  .thoughts-editorial .thought-card{
    padding-bottom:5.3rem!important;
  }
  .thoughts-editorial .thought-card>a{
    left:1.25rem!important;
    bottom:1.25rem!important;
  }
}


/* ====================================================================
   Build 62 — Selected Work CTA containment
   Reserve a guaranteed bottom lane for View Project on desktop.
   ==================================================================== */

@media(min-width:901px){
  .project-copy{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding-bottom:2.45rem!important;
    overflow:visible!important;
  }

  .project-copy>a{
    position:absolute!important;
    left:0!important;
    bottom:.2rem!important;
    margin:0!important;
    width:max-content!important;
    z-index:8!important;
  }
}

/* Shallower laptop / tablet-landscape stages:
   compress content slightly more and keep CTA inside the safe area. */
@media(min-width:901px) and (max-height:820px){
  .project-copy{
    padding-bottom:2.1rem!important;
  }

  .project-copy>a{
    bottom:.1rem!important;
  }
}

@media(min-width:901px) and (max-height:720px){
  .project{
    padding-top:clamp(2.45rem,5.2vh,3.25rem)!important;
    padding-bottom:.65rem!important;
  }

  .project-copy{
    justify-content:flex-start!important;
    padding-top:.2rem!important;
    padding-bottom:1.95rem!important;
  }

  .project h3{
    font-size:clamp(2rem,5.7vh,3.55rem)!important;
    line-height:.885!important;
  }

  .project-copy>p:not(.project-label){
    margin:.34rem 0!important;
    font-size:.56rem!important;
    line-height:1.28!important;
  }

  .project-tags{
    margin-top:.06rem!important;
    margin-bottom:.32rem!important;
  }

  .project-copy>a{
    bottom:0!important;
    font-size:.48rem!important;
  }

  .project-visual{
    height:min(50dvh,370px)!important;
    max-height:50dvh!important;
  }
}

@media(min-width:901px) and (max-height:640px){
  .project-copy{
    padding-bottom:1.8rem!important;
  }

  .project h3{
    font-size:clamp(1.8rem,5.45vh,3.15rem)!important;
  }

  .project-copy>p:not(.project-label){
    font-size:.53rem!important;
    line-height:1.24!important;
  }

  .project-tags span{
    font-size:.37rem!important;
    padding:.18rem .3rem!important;
  }
}


/* Build 65 — article card link affordance */
.thought-card[role="link"]{cursor:pointer}
.thought-card[role="link"]:focus-visible{
  outline:2px solid rgba(141,92,246,.65);
  outline-offset:-2px;
}