/* DDFS immersive layer — original assets and native scrolling retained. */
:root{--chapter-progress:0;--hero-travel:0}.header{position:relative;z-index:20}.header nav a{position:relative}.header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:linear-gradient(90deg,#8c68ff,#60dcef);transform:scaleX(0);transform-origin:left;transition:transform .3s}.header nav a:hover::after,.header nav a[aria-current=page]::after{transform:scaleX(1)}
.reading-line{position:fixed;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#8255ed,#74e4f4);transform:scaleX(var(--chapter-progress));transform-origin:left;z-index:1002;pointer-events:none}
.cinematic-hero{background:radial-gradient(ellipse at 78% 40%,#23637940,transparent 47%),radial-gradient(ellipse at 50% 85%,#653ed226,transparent 48%),#090e16;min-height:820px}
.cinematic-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 42%,#71dff510 42.1%,transparent 42.2%,transparent 65%,#9881fa0d 65.1%,transparent 65.3%);pointer-events:none}
.scene-stage{perspective:1200px}.scene-stage:after{background:linear-gradient(90deg,#090e16 0%,#090e16e8 15%,#090e1655 43%,transparent 68%),linear-gradient(0deg,#111113,transparent 20%)}
.scene-halo{filter:blur(2px);opacity:.8}.scene-wordmark{opacity:.38;letter-spacing:-.06em}.cinematic-hero .hero-wordmark{margin-bottom:42px}.cinematic-hero h1{max-width:790px;font-weight:450}.cinematic-hero .lead{max-width:455px}.scene-caption{background:#10192399;backdrop-filter:blur(12px);border:1px solid #7497b144;padding:18px 24px;border-left:2px solid #60dcef;box-shadow:0 20px 80px #0003}
.motion-on .hero-content{transform:translate3d(0,calc(var(--hero-travel)*-24px),0)}.motion-on .hero-bottom{opacity:calc(1 - var(--hero-travel))}.motion-on .scene-wordmark{transform:translate3d(calc(var(--hero-travel)*-40px),0,0)}
.section{position:relative}.section::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#7893ae30,transparent);pointer-events:none}.section.chapter-active::before{background:linear-gradient(90deg,#6be2f900,#6be2f999,#8c68ed44,transparent)}
.chapter-number{position:absolute;top:20px;right:0;font:10px/1.4 'Courier New',monospace;letter-spacing:2px;color:#92acbc;opacity:.65;pointer-events:none}.motion-on .chapter-enter{animation:chapter-open .85s cubic-bezier(.16,1,.3,1) both}@keyframes chapter-open{from{opacity:.3;transform:translate3d(0,38px,0)}to{opacity:1;transform:none}}
.price-row{position:relative;border-radius:8px;transition:background .3s,box-shadow .3s;isolation:isolate}.price-row::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,#61dff510,transparent 55%,#795fe413);opacity:0;transition:opacity .4s}.price-row:hover::before,.price-row:focus-within::before{opacity:1}.price-row strong{color:#d9f8ff}.price-row:hover{box-shadow:inset 2px 0 #61dff5}.price-row h3{transition:color .3s}.price-row:hover h3{color:#93e7f5}
.work-image{border:1px solid #637f9844;border-radius:12px;box-shadow:0 30px 90px #0004;overflow:hidden}.work-caption{padding-top:22px}.process article{background:linear-gradient(145deg,#1c283544,#10151b44);border-top:1px solid #7b99b452;padding:28px;transition:background .4s}.process article:hover{background:#20324188}.service-detail{column-gap:9%}.service-detail>div:nth-child(2){padding:28px;border:1px solid #4b657744;background:linear-gradient(145deg,#1c2c3844,#16142122);border-radius:12px}.service-detail .service-price{color:#b5eef7}.hosting-band{background:radial-gradient(ellipse at 95% 60%,#53d8f012,transparent 70%)}.closing{border-radius:16px;background:linear-gradient(115deg,#19253488,#1e153533);padding-inline:4%;margin-bottom:70px}.button{position:relative;overflow:hidden;box-shadow:0 0 0 #60dcef00;transition:background .25s,box-shadow .3s,transform .25s}.button:hover{box-shadow:0 8px 32px #3ebace25}.button:focus-visible,a:focus-visible{outline:2px solid #8ce2f3;outline-offset:5px}
.page-transition{image-rendering:auto}.light-wave{opacity:.25}.motion-on .light-wave{animation-duration:25s}.motion-on .field-signals{opacity:.5}.motion-paused *{animation-play-state:paused!important}
@media(min-width:1050px){#system-scene{width:80%;left:31%}.scene-caption{right:7%;bottom:112px}.cinematic-hero .hero-content{padding-top:48px}}
@media(max-width:700px){.cinematic-hero{min-height:1000px}.cinematic-hero .hero-wordmark{margin-bottom:30px}.scene-caption{padding:12px 16px;bottom:90px}.scene-stage:after{background:linear-gradient(180deg,#090e16f5,transparent 45%,transparent 85%,#111113)}.section .chapter-number{top:9px;font-size:9px}.service-detail>div:nth-child(2){padding:20px}.closing{padding:30px 6%}.motion-on .hero-content{transform:none}.process article{padding:22px}.chapter-enter{animation-duration:.55s!important}}
body:not(.motion-on) .hero-content,body:not(.motion-on) .scene-wordmark{transform:none}body:not(.motion-on) .chapter-enter{animation:none}body:not(.motion-on) .hero-bottom{opacity:1}
@media(prefers-reduced-motion:reduce){.chapter-enter{animation:none!important}.hero-content,.scene-wordmark{transform:none!important}.hero-bottom{opacity:1!important}.reading-line{display:none}}
/* Custom Motion choreography: masked words, alternating panels, dimensional portfolio entry. */
.word-window{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.word-ink{display:inline-block;transform-origin:0 100%}
.scroll-entry.reveal-pending{opacity:1!important;transform:none!important}
.section:has(.scroll-entry){overflow-x:clip;overflow-y:clip}
.section::before{transform:scaleX(.16);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1),background 1s}
.section.chapter-active::before{transform:scaleX(1)}
.process article{position:relative;overflow:hidden}.process article::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#60dcef,#8260da);transform:scaleX(0);transform-origin:left;transition:transform .6s}.process article:hover::after{transform:scaleX(1)}
body:not(.motion-on) .section::before{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.section::before{transform:none;transition:none}}
/* Custom Motion showcase — local depth and interactions, existing backdrop retained. */
.experience-stage{position:relative;min-height:660px;border:1px solid #65798b55;border-radius:20px;isolation:isolate;background:#10172066;overflow:hidden}
.experience-controls{position:relative;z-index:3;display:flex;border-bottom:1px solid #65798b44}.experience-controls button{flex:1;border:0;border-right:1px solid #65798b33;padding:25px 24px;background:transparent;color:#b2bcc9;font:inherit;text-align:left;cursor:pointer;transition:background .3s,color .3s}.experience-controls button span{font:10px monospace;letter-spacing:2px;color:#81cddd;margin-right:14px}.experience-controls button b{float:right;font-weight:400}.experience-controls button[aria-pressed=true]{background:#5bd7f014;color:#fff;box-shadow:inset 0 -2px #60dcef}.experience-controls button:hover{background:#87d9ed10}
.experience-art{position:absolute;top:85px;right:0;width:66%;height:550px;perspective:1400px;pointer-events:none}.experience-deck{position:absolute;inset:70px 75px 100px 50px;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-14deg) rotateZ(-4deg);transition:transform 1.25s cubic-bezier(.16,1,.3,1)}
.experience-sheet{position:absolute;border:1px solid #abc8df66;border-radius:14px;box-shadow:0 25px 65px #0006;transition:transform 1.25s cubic-bezier(.16,1,.3,1);backface-visibility:hidden}.sheet-back{inset:0;background:#1b2538;transform:translate3d(44px,-32px,-65px);padding:30px;color:#aac3d3}.sheet-back>span{font:9px monospace;letter-spacing:2px}.sheet-back strong{display:block;font-size:40px;line-height:1.1;margin-top:25px}.swatches{display:flex;gap:8px;margin-top:18px}.swatches i{width:30px;height:30px;border-radius:50%;background:#63d9f0}.swatches i:nth-child(2){background:#8b65da}.swatches i:nth-child(3){background:#eff8ff}
.sheet-front{inset:0;background:linear-gradient(120deg,#0d1420,#172539);padding:22px 30px;transform:translateZ(15px)}.mini-toolbar{display:flex;gap:5px;align-items:center;font:8px monospace;letter-spacing:2px;color:#8b9aad}.mini-toolbar i{height:5px;width:5px;background:#647687;border-radius:50%}.mini-toolbar span{margin-left:auto}.sheet-front img{width:145px;height:auto;margin:25px 0 18px}.mini-copy{font-size:clamp(20px,2.25vw,35px);line-height:1.14;color:#eef5fa;letter-spacing:-1px}.mini-copy em{font-style:normal;color:#71d4ee}.mini-action{font-size:10px;margin-top:24px;width:175px;border-bottom:1px solid #73deec;padding-bottom:10px;color:#b3e9f4}.mini-action span{float:right}.sheet-note{bottom:-39px;right:-40px;display:flex;gap:15px;align-items:center;padding:20px;background:#1b2d38;transform:translateZ(65px);max-width:280px}.note-symbol{font-size:32px;color:#83e2ee}.sheet-note small{display:block;font:8px monospace;letter-spacing:1px;color:#9db2c4}.sheet-note strong{font-size:13px;color:#edf8fc;display:block;margin-top:7px}
.experience-orbit{position:absolute;inset:0 20px;border:1px solid #839eb32e;border-radius:50%;transform:rotate(-30deg) scaleY(.8)}.experience-caption{position:relative;width:33%;margin:105px 0 35px 38px;z-index:2}.experience-caption h3{font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-1.5px;margin:22px 0}.experience-caption p{font-size:15px;line-height:1.8;color:#b4c1ce}.experience-more{position:relative;z-index:3;margin:0 0 45px 38px;background:none;border:0;border-bottom:1px solid #9daebb;color:#e9f5f9;padding:9px 0;font:inherit;cursor:pointer}
[data-view=motion] .experience-deck{transform:rotateX(14deg) rotateY(-22deg) rotateZ(-7deg)}[data-view=motion] .sheet-back{transform:translate3d(90px,-65px,-90px)}[data-view=motion] .sheet-front{transform:translate3d(-22px,12px,35px)}[data-view=motion] .sheet-note{transform:translate3d(12px,25px,115px)}[data-view=connection] .experience-deck{transform:rotateX(0deg) rotateY(9deg) rotateZ(2deg)}[data-view=connection] .sheet-back{transform:translate3d(-20px,-20px,-40px)}[data-view=connection] .sheet-note{transform:translate3d(-20px,-35px,60px)}
.detail-dialog{color:#e9f2f8;background:#111a27;border:1px solid #8ba4bb66;border-radius:18px;width:min(830px,calc(100% - 36px));max-height:85dvh;padding:0;box-shadow:0 40px 140px #0009}.detail-dialog::backdrop{background:#060b14c9;backdrop-filter:blur(10px)}.detail-close{position:sticky;top:16px;float:right;margin:16px;z-index:2;border:1px solid #879aaf77;border-radius:50%;width:42px;height:42px;color:#fff;background:#162433;font-size:24px;cursor:pointer}.detail-body{padding:55px}.detail-body h2{font-size:clamp(30px,5vw,56px);line-height:1.05;letter-spacing:-2px;margin:25px 0}.detail-body p{color:#bac8d5;line-height:1.8}.detail-body img{display:block;width:100%;height:auto;border-radius:8px;margin:24px 0}.detail-points{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}.detail-points>div{padding:20px;border:1px solid #71869b55;border-radius:8px}.detail-points strong{color:#8eddeb}.detail-points p{font-size:14px;margin-bottom:0}.project-peek{border:1px solid #809aae77;background:#121e2b;color:#dbeef4;padding:10px 18px;border-radius:30px;font:inherit;cursor:pointer}.project-peek:hover{border-color:#72d7eb}
button:focus-visible{outline:2px solid #8ce2f3;outline-offset:4px}.motion-on .scroll-entry.motion-wait{opacity:0!important}.scroll-entry.reveal-target{transition:none}.experience-art .experience-sheet{will-change:auto}
@media(max-width:850px){.experience-stage{min-height:850px}.experience-controls button{padding:18px 12px;font-size:12px}.experience-controls button span{display:block;margin:0 0 8px}.experience-controls button b{display:none}.experience-caption{width:auto;margin:32px 26px;max-width:480px}.experience-caption h3{font-size:32px}.experience-art{top:345px;width:100%;height:440px}.experience-deck{inset:50px 65px 80px 40px}.experience-more{margin:0 26px 35px}.mini-copy{font-size:25px}.sheet-front img{width:125px;margin:20px 0}.sheet-note{right:-30px;max-width:245px;padding:16px}.detail-body{padding:38px 24px}.detail-points{grid-template-columns:1fr}.work-caption{flex-wrap:wrap;gap:15px}}
@media(max-width:430px){.experience-stage{min-height:820px}.experience-deck{inset:55px 42px 70px 25px}.sheet-front{padding:18px}.sheet-note{right:-20px;bottom:-45px}.sheet-back{padding:20px}.mini-copy{font-size:22px}}
body:not(.motion-on) .experience-deck,body:not(.motion-on) .experience-sheet{transition:none}
@media(prefers-reduced-motion:reduce){.experience-deck,.experience-sheet{transition:none!important}}
@media(max-width:850px){.experience-stage{min-height:940px}.experience-art{top:440px}}