/* One continuous brand atmosphere, shared by every chapter. */
:root{--navy:#101e34;--grey:#707982;--brand-gradient:radial-gradient(ellipse at 7% 19%,#321e48ab,transparent 52%),radial-gradient(ellipse at 84% 24%,#43637e8c,transparent 54%),radial-gradient(ellipse at 67% 81%,#65dcd530,transparent 46%),radial-gradient(ellipse at 10% 93%,#e5b53723,transparent 42%),radial-gradient(ellipse at 95% 96%,#d9fff419,transparent 40%),linear-gradient(125deg,#182334 0%,#323643 45%,#11243a 78%,#4a535a 150%)}
html{background:#172435}body{isolation:isolate}body:before{content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;background:var(--brand-gradient)}
.stage-background,.section-atmosphere,.services-atmosphere,.problem-experience,.services-experience{background:transparent}
.masthead{background:linear-gradient(#111c30c9,#16263950,transparent);backdrop-filter:blur(8px)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.hero-video:not(.is-ready){visibility:hidden}.hero-video-shade{position:absolute;inset:0;background:linear-gradient(90deg,#15283b72,#321e4852),linear-gradient(#101e3452 20%,#101e3466 64%,#101e34ed);pointer-events:none}.hero-watermark{position:absolute;left:50%;top:52%;width:max-content;transform:translate(-50%,-50%);font:850 clamp(100px,12.8vw,240px)/1 Arial,sans-serif;letter-spacing:-.065em;color:#d9fff410;-webkit-text-stroke:1px #d9fff409;z-index:2;pointer-events:none;user-select:none;will-change:opacity,transform}.hero-logo-watermark{position:absolute;z-index:1;top:50%;left:50%;width:min(64vw,900px);height:min(64vw,900px);object-fit:contain;pointer-events:none;opacity:.055;filter:grayscale(1) brightness(1.8);transform:translate(-50%,-50%) rotate(-8deg);mix-blend-mode:screen;will-change:transform,opacity}
.services-experience .service-navigation:after{content:"";width:24px;height:24px;border-radius:50%;flex-shrink:0;opacity:0;background:conic-gradient(var(--gold) calc(var(--dwell-fill,0)*1turn),#d9fff41a 0);mask:radial-gradient(transparent 53%,#000 56%);transition:opacity .18s}.services-experience.is-holding .service-navigation:after{opacity:1}
.expansion-section{position:relative;isolation:isolate}.expansion-stage{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;isolation:isolate}.strategy-experience{height:1150svh}.interface-experience{height:560svh}
.expansion-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 70%,#65dcd511,transparent 60%);pointer-events:none}
.expansion-heading{position:absolute;inset:clamp(112px,15svh,170px) var(--pad) auto;text-align:center;z-index:4;pointer-events:none;opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.is-visible .expansion-heading{opacity:1;transform:none}.expansion-heading .section-overline{margin-bottom:12px}.expansion-heading h2{font-size:clamp(26px,2.7vw,47px);font-weight:700;line-height:1.7;margin:0;letter-spacing:-.025em}.expansion-heading h2 em,.portfolio-heading h2 em{font-style:normal;color:var(--cyan)}.expansion-heading p{font-size:clamp(14px,1.05vw,18px);line-height:1.9;color:#b3c8d0;margin:10px auto 0;max-width:850px}
.strategy-scene{position:absolute;inset:24% 0 5%;pointer-events:none}.strategy-scene canvas,.monitor-scene canvas{display:block;width:100%;height:100%}.strategy-overview{position:absolute;bottom:17%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;color:#c1dce0}.strategy-overview>span{display:block;font-size:14px;color:var(--gold);margin-bottom:8px}.strategy-overview>strong{font-weight:500;font-size:18px;white-space:nowrap}.strategy-copy{position:absolute;top:43%;width:37%;max-width:590px;z-index:5;opacity:0;visibility:hidden;will-change:transform,opacity}.strategy-copy[data-side=right]{right:6.8%;left:auto}.strategy-copy[data-side=left]{left:6.8%;right:auto}.strategy-tag{font:12px/1.6 monospace;letter-spacing:.10em;color:var(--gold);display:block;margin-bottom:18px}.strategy-copy h3{font-size:clamp(24px,2.45vw,43px);line-height:1.65;margin:0 0 20px;color:var(--mint);letter-spacing:-.02em}.strategy-copy p{font-size:clamp(16px,1.14vw,19px);line-height:2.15;color:#c4d3df;margin:0;text-wrap:pretty}.strategy-copy-line{display:block;width:88px;height:2px;margin-top:25px;background:linear-gradient(90deg,transparent,var(--gold));transform-origin:right}
.strategy-nav{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);display:flex;direction:ltr;gap:16px;z-index:6}.strategy-nav button{display:flex;gap:8px;align-items:center;border:0;background:transparent;padding:12px 3px;cursor:pointer;color:#a9bbc5;font:14px monospace}.strategy-nav i{width:27px;height:1px;background:#a9bbc544;transition:width .4s,background .4s}.strategy-nav button[aria-current=step]{color:var(--gold)}.strategy-nav button[aria-current=step] i{width:46px;background:var(--gold)}.expansion-foot{position:absolute;inset:auto var(--pad) 24px;display:flex;justify-content:space-between;align-items:center;color:#a5b8c8;font-size:13px}.expansion-foot>span[dir=ltr]{font:12px/1.5 monospace;letter-spacing:.07em}
.monitor-scene{position:absolute;inset:27% 0 3%;pointer-events:none}.interface-cards{position:absolute;inset:27% 0 8%;z-index:5;pointer-events:none}.interface-card{position:absolute;width:23%;display:flex;align-items:flex-start;gap:12px;padding:21px 19px;border:1px solid #d9fff433;border-radius:16px;background:linear-gradient(125deg,#d9fff418,#43637e38);box-shadow:0 20px 55px #07162635,inset 0 1px 0 #ffffff24;backdrop-filter:blur(18px);opacity:0;will-change:transform,opacity}.interface-card h3{font-size:clamp(16px,1.15vw,20px);font-weight:650;line-height:1.8;margin:0;color:#e2fff7}.interface-card p{font-size:14px;line-height:1.9;margin:8px 0 0;color:#bdd3db}.feature-count{flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border:1px solid #65dcd548;border-radius:8px;color:var(--cyan);font:12px monospace;margin-top:3px}.interface-card[data-feature="0"]{left:4%;top:10%}.interface-card[data-feature="1"]{right:4%;top:6%}.interface-card[data-feature="2"]{left:4%;top:54%}.interface-card[data-feature="3"]{right:4%;top:42%}.interface-card[data-feature="4"]{right:4%;top:77%}.interface-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}.interface-connectors g{opacity:0}.connector-line{fill:none;stroke:var(--cyan);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1}.connector-shadow{fill:none;stroke:#65dcd51b;stroke-width:5}.interface-connectors circle{fill:var(--cyan);stroke:#d9fff4;stroke-width:1}.interface-connectors .anchor-glow{fill:#65dcd51b;stroke:#65dcd544}.monitor-fallback{display:none}
/* DriftWall: alternating tracks, stronger perspective, text in the gaps. */
.portfolio-section{padding:130px 0 0;overflow:hidden}.portfolio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:0 var(--pad) 34px}.portfolio-heading h2{font-size:clamp(30px,3.5vw,57px);line-height:1.6;font-weight:700;margin:0;letter-spacing:-.035em}.portfolio-heading p{font-size:16px;color:#b5ccd6;line-height:2;margin:0 0 9px}.portfolio-heading .section-overline{margin-bottom:15px}.drift-wall{position:relative;height:clamp(640px,86svh,1000px);perspective:1350px;overflow:hidden;direction:ltr;touch-action:pan-y;isolation:isolate;mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent)}.drift-plane{position:absolute;left:50%;top:50%;display:flex;gap:22px;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(25deg) rotateY(-23deg) rotateZ(-6deg) translateZ(-100px);will-change:transform}.drift-column{width:clamp(230px,20vw,335px);flex:none;position:relative;transform-style:preserve-3d}.drift-track{transform-style:preserve-3d;will-change:transform}.drift-copy{display:flex;flex-direction:column;gap:0;transform-style:preserve-3d}.drift-tile{display:block;position:relative;aspect-ratio:1.46;width:100%;padding:0;border:1px solid #d9fff430;border-radius:15px;overflow:hidden;background:#10233b;box-shadow:0 18px 40px #08122177;text-decoration:none;transform:translateZ(0);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,filter .4s;filter:brightness(.78) saturate(.85);cursor:zoom-in;backface-visibility:hidden}.drift-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}.drift-tile-caption{position:absolute;inset:auto 0 0;padding:24px 15px 12px;direction:rtl;color:#fff;background:linear-gradient(transparent,#0d1c33ee);display:flex;justify-content:space-between;align-items:center;font-size:14px}.drift-tile-caption small{font-size:12px;color:#c5d5e0}.drift-tile:hover,.drift-tile:focus-visible{transform:translateZ(60px) scale(1.035);border-color:var(--cyan);filter:none;z-index:10}.drift-column:has(.drift-tile:hover){z-index:5}.drift-sentence{height:84px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 8px;direction:rtl;font-size:clamp(16px,1.4vw,22px);font-weight:550;line-height:1.8;letter-spacing:-.02em;color:#d9fff4d9;text-shadow:0 3px 22px #0c1829;pointer-events:none}.drift-sentence:before{content:"";width:14px;height:1px;background:var(--gold);margin-left:10px;flex-shrink:0}.portfolio-static{display:none}.portfolio-footer{padding:22px var(--pad) 46px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#abbfcb}.portfolio-footer a{padding:12px 0;color:var(--mint)}
/* Native modal: scrollable page, mobile preview and focus return. */
.project-dialog{padding:0;border:1px solid #d9fff438;border-radius:20px;background:#152539;color:var(--mint);width:min(1440px,94vw);max-width:94vw;height:90dvh;max-height:90dvh;overflow:hidden;box-shadow:0 35px 140px #0009}.project-dialog::backdrop{background:#060d1fd9;backdrop-filter:blur(12px)}.project-window{height:100%;display:flex;flex-direction:column}.project-toolbar{height:80px;flex-shrink:0;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid #d9fff420;background:#152539}.project-meta h2{font-size:18px;margin:4px 0 0;line-height:1.4}.project-demo-label{font-size:12px;color:var(--gold)}.project-devices{display:flex;gap:4px;padding:4px;background:#07172b;border:1px solid #43637e7a;border-radius:10px}.project-devices button{background:transparent;border:0;padding:9px 15px;border-radius:7px;font-size:14px;cursor:pointer;color:#b7cad7}.project-devices button[aria-pressed=true]{color:#092037;background:var(--cyan)}.project-actions{display:flex;align-items:center;gap:20px}.project-external{font-size:14px;color:#c4d6e0}.project-close{width:44px;height:44px;background:#d9fff413;border:1px solid #d9fff422;border-radius:10px;font:32px/1 Arial;cursor:pointer}.project-viewport{position:relative;flex:1;min-height:0;display:flex;justify-content:center;background:#0b1729;overflow:hidden}.project-frame{width:100%;height:100%;display:block;border:0;background:#f4f8f8;transition:width .35s ease}.project-dialog[data-size=mobile] .project-frame{width:min(390px,100%)}.project-loading{position:absolute;inset:0;display:grid;place-items:center;background:#102439;font-size:16px;color:var(--cyan)}.project-dialog.is-loaded .project-loading{display:none}body.project-open{overflow:hidden}.project-frame:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
@media(min-width:1700px){.strategy-copy{width:33%;top:42%}.interface-card{width:21%;}.interface-card[data-feature="0"],.interface-card[data-feature="2"]{left:6%}.interface-card[data-feature="1"],.interface-card[data-feature="3"],.interface-card[data-feature="4"]{right:6%}}
@media(max-width:1100px){.expansion-heading h2{font-size:30px}.expansion-heading p{font-size:15px}.strategy-copy{width:40%;top:42%}.strategy-copy[data-side=right]{right:4%}.strategy-copy[data-side=left]{left:4%}.strategy-copy h3{font-size:28px;margin-bottom:12px}.strategy-copy p{font-size:16px;line-height:1.95}.strategy-tag{font-size:12px;margin-bottom:10px;letter-spacing:0}.strategy-copy-line{margin-top:17px}.interface-card{width:25%;padding:15px 12px;gap:7px}.interface-card p{font-size:13px}.interface-card h3{font-size:16px}.interface-card[data-feature="0"],.interface-card[data-feature="2"]{left:3%}.interface-card[data-feature="1"],.interface-card[data-feature="3"],.interface-card[data-feature="4"]{right:3%}.feature-count{width:24px;height:24px;font-size:12px}.portfolio-heading{gap:20px}.portfolio-heading p{font-size:14px;max-width:35%}.drift-column{width:270px}}
@media(max-width:1000px){
  .hero-watermark{font-size:22vw;top:53%}.expansion-stage{min-height:740px}.expansion-heading{inset:95px 22px auto}.expansion-heading .section-overline{font-size:12px;letter-spacing:.05em;margin-bottom:8px}.expansion-heading h2{font-size:clamp(22px,5.5vw,32px);line-height:1.6}.expansion-heading p{font-size:14px;line-height:1.8;margin-top:9px;max-width:500px}.strategy-scene{inset:28% 0 43%}.strategy-overview{bottom:34%;width:100%}.strategy-overview>strong{font-size:17px}.strategy-copy,.strategy-copy[data-side=right],.strategy-copy[data-side=left]{top:auto;bottom:13%;left:22px;right:22px;width:auto;max-width:none}.strategy-tag{font-size:12px;margin-bottom:5px}.strategy-copy h3{font-size:23px;margin-bottom:8px;line-height:1.65}.strategy-copy p{font-size:15px;line-height:1.95;max-width:600px}.strategy-copy-line{display:none}.strategy-nav{bottom:5.5%;gap:10px}.strategy-nav i{width:18px}.strategy-nav button[aria-current=step] i{width:29px}.expansion-foot{bottom:14px;font-size:12px}.expansion-foot>span[dir=ltr]{display:none}.strategy-status{display:none}.monitor-scene{inset:24% 0 36%}.interface-cards{inset:auto 20px 7%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.interface-card,.interface-card[data-feature]{position:relative;inset:auto;width:auto;min-height:71px;padding:10px 9px;gap:8px;border-radius:12px}.interface-card[data-feature="4"]{grid-column:1/-1}.interface-card h3{font-size:14px;line-height:1.8;font-weight:600}.interface-card p{display:none}.feature-count{width:23px;height:23px;margin-top:0}.connector-line{stroke-width:1.1}.connector-shadow{stroke-width:3}.portfolio-section{padding-top:90px}.portfolio-heading{display:block;margin-bottom:15px}.portfolio-heading h2{font-size:30px}.portfolio-heading p{max-width:none;margin-top:16px;font-size:15px}.drift-wall{height:670px}.drift-column{width:230px}.drift-plane{gap:16px}.drift-sentence{font-size:17px;height:84px}.portfolio-footer{display:block;padding-bottom:25px;line-height:1.8}.portfolio-footer a{display:block;margin-top:12px}.project-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}.project-toolbar{height:auto;min-height:82px;padding:12px;gap:10px;flex-wrap:wrap}.project-meta h2{font-size:16px}.project-actions{gap:12px}.project-external{font-size:12px}.project-devices{order:3;flex-basis:100%;justify-content:center;padding:2px}.project-devices button{padding:7px 24px;font-size:13px}.project-close{width:42px;height:42px}.project-dialog[data-size=mobile] .project-frame{width:100%}
}
@media(max-width:370px){.strategy-copy h3{font-size:21px}.strategy-copy p{font-size:14px;line-height:1.85}.strategy-tag{font-size:12px}.expansion-heading h2{font-size:22px}.interface-card h3{font-size:13px}.interface-cards{inset-inline:16px;gap:8px}.interface-card[data-feature]{padding:9px 7px}.feature-count{width:20px;height:23px}.strategy-nav{gap:6px}}
@media(max-height:750px) and (min-width:1001px){.expansion-stage{min-height:620px}.expansion-heading{top:105px}.expansion-heading h2{font-size:30px;line-height:1.5}.expansion-heading p{font-size:14px;margin-top:7px}.expansion-heading .section-overline{margin-bottom:8px}.strategy-copy{top:41%}.strategy-copy h3{font-size:27px;margin-bottom:10px}.strategy-copy p{font-size:15px;line-height:1.85}.strategy-scene{top:26%}.strategy-overview{bottom:14%}.strategy-nav{bottom:6%}.expansion-foot{bottom:14px}.interface-cards{top:30%;bottom:10%}.interface-card{padding:12px;gap:7px}.interface-card h3{font-size:15px}.interface-card p{font-size:13px;line-height:1.65;margin-top:5px}.monitor-scene{top:29%}.interface-card[data-feature="4"]{top:76%}}
/* Readable modes retain all content, links and previews. */
html:not(.expansion-ready) .expansion-section,html.expansion-reduced .expansion-section,html.expansion-no-webgl .strategy-experience{height:auto!important}
html:not(.expansion-ready) .expansion-stage,html.expansion-reduced .expansion-stage,html.expansion-no-webgl .strategy-stage{position:relative;height:auto;min-height:0;padding:100px var(--pad) 70px;overflow:visible}
html:not(.expansion-ready) .expansion-heading,html.expansion-reduced .expansion-heading,html.expansion-no-webgl .strategy-stage .expansion-heading{position:relative;inset:auto;opacity:1;transform:none;margin-bottom:35px;pointer-events:auto}
html:not(.expansion-ready) .strategy-copy,html.expansion-reduced .strategy-copy,html.expansion-no-webgl .strategy-copy{position:relative;inset:auto!important;width:auto;max-width:850px;opacity:1!important;visibility:visible!important;transform:none!important;margin:0 auto 45px}
html:not(.expansion-ready) .strategy-nav,html.expansion-reduced .strategy-nav,html.expansion-no-webgl .strategy-nav,html:not(.expansion-ready) .strategy-overview,html.expansion-reduced .strategy-overview,html.expansion-no-webgl .strategy-overview{display:none}
html:not(.expansion-ready) .strategy-scene,html.expansion-no-webgl .strategy-scene{display:none}html.expansion-reduced .strategy-scene{position:relative;inset:auto;height:400px;margin-bottom:30px}
html:not(.expansion-ready) .interface-cards,html.expansion-reduced .interface-cards{position:relative;inset:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:15px}
html:not(.expansion-ready) .interface-card,html.expansion-reduced .interface-card{position:relative;inset:auto!important;width:auto;opacity:1!important;transform:none!important;grid-column:auto}
html:not(.expansion-ready) .monitor-scene,html:not(.expansion-ready) .interface-connectors,html.expansion-no-webgl .monitor-scene,html.expansion-no-webgl .interface-connectors,html.expansion-reduced .interface-connectors{display:none}
html.expansion-reduced .monitor-scene{position:relative;inset:auto;height:440px}
html:not(.expansion-ready) .monitor-fallback,html.expansion-no-webgl .monitor-fallback{display:block;position:absolute;top:36%;width:43%;left:28.5%}.monitor-fallback img{width:100%;height:auto;border:8px solid #18283a;border-bottom-width:22px;border-radius:14px}
html:not(.expansion-ready) .drift-wall,html.expansion-reduced .drift-wall{display:none}html:not(.expansion-ready) .portfolio-static,html.expansion-reduced .portfolio-static{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:30px var(--pad)}.portfolio-static a{display:block;border:1px solid #d9fff427;background:#173048;border-radius:14px;overflow:hidden}.portfolio-static img{width:100%;height:auto;display:block}.portfolio-static a>span{padding:16px;display:block;font-size:19px}.portfolio-static small{font-size:14px;display:block;color:#b4c8d0;margin-top:5px}
html:not(.expansion-ready) .expansion-foot,html.expansion-reduced .expansion-foot{display:none}
@media(prefers-reduced-motion:reduce){.expansion-heading,.drift-tile,.project-frame{transition:none}.hero-video{display:none}.hero-watermark{will-change:auto}}

.expansion-reduced .strategy-copy p{font-size:16px;line-height:2}.expansion-reduced .interface-card h3{font-size:16px}.expansion-reduced .interface-card p{display:block;font-size:14px}.expansion-reduced .expansion-heading p{font-size:16px}.expansion-reduced .strategy-scene{max-height:55svh}.expansion-reduced .monitor-scene{max-height:55svh}

html.expansion-reduced .monitor-fallback{position:relative;inset:auto;width:min(700px,100%);margin:20px auto}