/* SEW immersive enhancement, 28 October 2026. Static fallback always works. */
:root{--depth-scroll:0px;--depth-angle-x:0deg;--depth-angle-y:0deg;--head-scroll:0px}
html{scroll-padding-top:110px}
body{overflow-x:clip}
.journey-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:1100;pointer-events:none;background:#12202aa6}
.journey-progress-line{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e23c39,#f78b63,#89afc9);transform:scaleX(0);transform-origin:left;box-shadow:0 0 15px #ef4d4a88;will-change:transform}
/* Dimensional hero built with genuine user supplied installation photos. */
.immersive-v4 .hero{position:relative;isolation:isolate;overflow:hidden;background:#07141e}
.immersive-v4 .hero::before{content:"";position:absolute;inset:-13% -3%;z-index:-2;pointer-events:none;background:url('projects/battery-storage.webp') center 45%/cover no-repeat;transform:translate3d(0,calc(var(--head-scroll)*.25),0) scale(1.1);filter:saturate(.92);opacity:.55}
.immersive-v4 .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#06111af7 0%,#06111aef 35%,#06111abd 70%,#06111ac9 100%),radial-gradient(ellipse at 70% 25%,#c0353430,transparent 60%)}
.hero-depth-field{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-depth-grid{position:absolute;inset:-60%;background:repeating-linear-gradient(0deg,transparent 0px,transparent 70px,#a9c5d00d 71px,#a9c5d00d 72px),repeating-linear-gradient(90deg,transparent 0px,transparent 70px,#a9c5d00d 71px,#a9c5d00d 72px);transform:perspective(880px) rotateX(57deg) translate3d(0,calc(var(--head-scroll)*.16),0);opacity:.54}
.hero-depth-beam{position:absolute;width:52%;height:70%;right:-23%;top:-20%;background:radial-gradient(ellipse,#e74a3c32,transparent 66%);filter:blur(35px);animation:ambient-breathe 8s ease-in-out infinite alternate}
@keyframes ambient-breathe{from{transform:translate3d(-3%,2%,0);opacity:.34}to{transform:translate3d(5%,-4%,0);opacity:.8}}
.immersive-v4 .hero-inner{position:relative;z-index:1;perspective:1400px}
.immersive-v4 .hero-copy{position:relative;z-index:2}
.immersive-v4 .hero-art{position:relative;perspective:1100px;transform:translate3d(0,calc(var(--head-scroll)*-.08),0)}
.immersive-v4 .hero-site-photo{backface-visibility:hidden;transform:perspective(1100px) rotateX(var(--depth-angle-x)) rotateY(var(--depth-angle-y)) translate3d(0,calc(var(--head-scroll)*-.07),0);transform-style:preserve-3d;transition:box-shadow .5s ease,filter .5s ease;box-shadow:0 45px 85px #000a,0 0 0 1px #ffffff3d}
.immersive-v4 .hero-site-photo img{height:395px;transform:scale(1.065);object-position:center;transition:transform .5s ease}
.immersive-v4 .hero-site-photo:hover{box-shadow:0 48px 100px #000c,0 0 40px #f64c481f}
.immersive-v4 .hero-site-photo:hover img{transform:scale(1.11)}
.photo-sweep{position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff1f 48%,transparent 59%);transform:translateX(-125%);animation:photo-sweep 11s ease-in-out infinite}
@keyframes photo-sweep{0%,38%{transform:translateX(-125%)}57%,100%{transform:translateX(125%)}}
.depth-hud{position:absolute;z-index:3;right:-18px;top:-25px;width:208px;padding:12px 14px;border:1px solid #ffffff57;background:linear-gradient(130deg,#192e3cf0,#0c1720e8);border-radius:8px;color:#c8d9e3;box-shadow:0 18px 36px #0008;display:grid;gap:8px;pointer-events:none;transform:translate3d(0,calc(var(--head-scroll)*-.11),32px)}
.depth-hud-dot{position:absolute;top:17px;right:13px;width:7px;height:7px;border-radius:50%;background:#ff615b;box-shadow:0 0 0 5px #ff615b22,0 0 15px #ff605ba6;animation:hud-pulse 2.7s infinite}
@keyframes hud-pulse{50%{box-shadow:0 0 0 10px #ff615b08,0 0 23px #ff605ba6}}
.depth-hud-top,.depth-hud-bottom{font-size:.57rem;letter-spacing:.12em;line-height:1.5;font-weight:800;padding-right:12px}
.depth-hud-bottom{color:#f3786d}.depth-hud-line{height:1px;background:linear-gradient(90deg,#f5655a,#ffffff22)}
.scroll-journey{display:inline-flex;align-items:center;gap:12px;margin-top:27px;color:#dcebf1;text-transform:uppercase;font-size:.67rem;letter-spacing:.14em;font-weight:800;opacity:.9;text-decoration:none}
.scroll-journey:hover{color:#fff}
.scroll-journey-icon{width:23px;height:35px;border:1px solid #a4c3cc;border-radius:20px;display:grid;justify-content:center;padding-top:6px}
.scroll-journey-icon span{width:3px;height:8px;background:#fa645e;border-radius:3px;animation:scroll-mouse 1.8s ease-in-out infinite}
@keyframes scroll-mouse{50%{transform:translateY(10px);opacity:.3}}
.scroll-journey-arrow{font-size:1.1rem;color:#ef615b}
/* Project gallery: actual work, with layered image depth and perspective cards. */
.immersive-v4 .project-section{position:relative;background:radial-gradient(ellipse at 8% 10%,#1b4356,#0b1b26 57%,#08141e 100%);color:white;overflow:hidden}
.immersive-v4 .project-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#1b405a26,transparent 45%,#ef51460c);opacity:1}
.immersive-v4 .project-section .section-head h2{color:#f0f6fa}
.immersive-v4 .project-section .section-head p{color:#b4c8d4}
.immersive-v4 .project-section .overline{color:#fb6864}
.project-experience-lede{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:3px 0 24px;border-top:1px solid #ffffff29;padding:16px 0;color:#bfd1dc}
.project-index{font-size:.71rem;color:#fc7a6a;letter-spacing:.17em;font-weight:800}
.project-travel{font-size:.76rem;text-align:right}
.immersive-v4 .project-cards{perspective:1350px;gap:30px}
.immersive-v4 .project-card{position:relative;border:1px solid #ffffff35;background:#122c3b;box-shadow:0 30px 66px #0007;transform:translate3d(0,var(--card-y,0px),0) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transform-style:preserve-3d;will-change:transform;transition:box-shadow .4s,border-color .4s}
.immersive-v4 .project-card:hover{border-color:#ff7a6980;box-shadow:0 34px 82px #000b,0 0 20px #f3654c17}
.immersive-v4 .project-card img{height:315px;aspect-ratio:auto;transform:translate3d(0,var(--photo-offset,0px),0) scale(1.13);will-change:transform;transition:filter .4s}
.immersive-v4 .project-card:hover img{filter:saturate(1.18) contrast(1.06)}
.immersive-v4 .project-card figcaption{position:relative;z-index:1;background:linear-gradient(145deg,#142c3c,#0a1a25);transform:translateZ(28px);padding:26px 28px}
.immersive-v4 .project-card strong{color:#f2f7fa}
.immersive-v4 .project-card span{color:#b3c8d3}
.immersive-v4 .project-card .project-card-discover{margin-top:9px;font-weight:800;font-size:.66rem;letter-spacing:.12em;color:#f27971}
.immersive-v4 .project-card .project-corner{position:absolute;z-index:2;top:18px;left:18px;font-size:.68rem;font-weight:850;letter-spacing:.12em;color:white;background:#071722d1;padding:10px 13px;border:1px solid #ffffff39;border-radius:6px;backdrop-filter:blur(9px);transform:translateZ(20px)}
.immersive-v4 .project-note{color:#a5c2ce}
/* The scroll chapters retain readable, real content, accented with depth. */
.chapter-nr{display:block;color:#fc7269;font-size:.68rem;font-weight:800;letter-spacing:.18em;margin-bottom:12px}
.chapter-nr-dark{color:#b53538}
.immersive-v4 .depth-stack{perspective:1100px}
.immersive-v4 .feature-row{transform:translate3d(var(--stack-x,0px),0,var(--stack-z,0px)) rotateY(var(--stack-rotate,0deg));border-color:#51738366;transition:border-color .25s,background .25s}
.immersive-v4 .feature-row:hover{border-color:#f36c6588;background:#1a3543}
.immersive-firewatch-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#eaf0f4,#fff 58%,#f1eeee)}
.immersive-firewatch-section:before{content:"";position:absolute;width:700px;height:700px;left:-300px;top:-290px;border-radius:50%;border:1px solid #b9cbd4;box-shadow:0 0 0 75px #8eaab20a,0 0 0 155px #8eaab208;pointer-events:none}
.immersive-v4 .depth-firewatch{position:relative;transform:translate3d(0,var(--fw-y,0px),0) rotateY(var(--fw-ry,0deg));backface-visibility:hidden;will-change:transform;box-shadow:0 32px 60px #0b233427}
.firewatch-depth-tag{position:absolute;z-index:3;top:15px;left:16px;padding:9px 12px;border-radius:7px;background:#071924db;backdrop-filter:blur(8px);color:#f4f6f9;font-size:.62rem;letter-spacing:.08em;font-weight:800;border:1px solid #ffffff5c}
.tag-pulse{display:inline-block;width:7px;height:7px;background:#f25957;border-radius:50%;margin-right:7px;box-shadow:0 0 14px #f25957}
.immersive-v4 .callout{position:relative;overflow:hidden}
.immersive-v4 .callout:before{content:"";position:absolute;inset:-150% 40%;background:#ffffff1d;transform:rotate(-25deg);pointer-events:none;animation:ambient-breathe 8s infinite alternate}
.immersive-v4 .callout>*{position:relative}
/* User-controlled cinematic settings. Buttons are operational and never block site navigation. */
.motion-controls{position:fixed;bottom:16px;right:18px;z-index:990;display:flex;gap:8px}
.motion-controls button{cursor:pointer;display:flex;gap:8px;align-items:center;border:1px solid #ffffff52;border-radius:999px;background:#071a26e6;color:#eff6f8;box-shadow:0 8px 30px #0007;backdrop-filter:blur(12px);padding:10px 14px;font:800 .65rem/1.2 Manrope,Arial,sans-serif;letter-spacing:.1em}
.motion-controls button:focus-visible{outline:3px solid #f7736e;outline-offset:2px}
.motion-controls button:hover{background:#172f3e}
.motion-controls button[aria-pressed="false"]{opacity:.85}
.tilt-switch{display:none!important}
@media (hover:none) and (pointer:coarse){.motion-controls .tilt-switch{display:flex!important}}
.journey-rail{position:fixed;right:16px;top:44%;transform:translateY(-50%);z-index:800;display:flex;flex-direction:column;gap:12px}
.journey-rail a{display:flex;justify-content:flex-end;align-items:center;gap:8px;text-decoration:none;color:#dce6ec;font-weight:800;font-size:.61rem;letter-spacing:.09em;text-shadow:0 1px 7px #000;transition:color .25s}
.journey-rail a span:last-child{display:none}
.journey-rail a span:first-child{padding:7px 8px;border:1px solid #ffffff80;border-radius:50%;background:#102c3dd9}
.journey-rail a.active,.journey-rail a:hover{color:#ff7a6e}
.journey-rail a.active span:first-child{border-color:#ff7770;box-shadow:0 0 16px #ff66664a}
.journey-rail a:hover span:last-child,.journey-rail a:focus-visible span:last-child{display:block}
/* Progressive reveal only when script is available. */
.depth-ready .will-reveal{opacity:0;transform:translate3d(0,38px,0) scale(.975);filter:blur(5px);transition:opacity .85s cubic-bezier(.25,.8,.25,1),transform .95s cubic-bezier(.2,.85,.2,1),filter .85s ease;transition-delay:var(--reveal-delay,0ms)}
.depth-ready .will-reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
.depth-ready .service-card.will-reveal.is-visible{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.9,.2,1),filter .8s ease,box-shadow .3s ease}
.depth-ready .service-card.will-reveal.is-visible:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 18px 46px #112a3b21}
@media(max-width:1100px){.depth-hud{right:0;top:-18px;width:180px}}
@media(max-width:940px){.journey-rail{display:none}.hero-depth-beam{opacity:.5}}
@media(max-width:790px){.immersive-v4 .hero::before{inset:-7%;opacity:.32}.immersive-v4 .hero::after{background:linear-gradient(#06111ae8,#06111adb)}.immersive-v4 .hero-art{transform:none}.depth-hud{top:-15px;right:9px;width:170px}.immersive-v4 .hero-site-photo img{height:320px}.immersive-v4 .project-card img{height:300px}.project-experience-lede{flex-direction:column;align-items:start;gap:6px}.project-travel{text-align:left}.motion-controls{right:10px;bottom:12px}.motion-controls button{padding:10px 11px}}
@media(max-width:530px){.immersive-v4 .hero-site-photo img{height:257px}.hero-depth-grid{opacity:.28}.depth-hud{top:-13px;width:145px;right:7px;padding:8px;font-size:.55rem}.depth-hud-top,.depth-hud-bottom{font-size:.5rem}.scroll-journey{margin-top:24px}.immersive-v4 .project-card img{height:245px}.motion-controls button{font-size:.60rem}.project-card .project-corner{font-size:.57rem}}
/* Respect reduced motion, user toggle, and sensible device constraints. */
@media(prefers-reduced-motion:reduce){.immersive-v4 .hero:before,.immersive-v4 .hero-site-photo,.immersive-v4 .hero-art,.immersive-v4 .project-card,.immersive-v4 .project-card img,.immersive-v4 .depth-firewatch,.immersive-v4 .feature-row{transform:none!important}.depth-ready .will-reveal{opacity:1!important;transform:none!important;filter:none!important}.scroll-journey-icon span,.hero-depth-beam,.photo-sweep,.depth-hud-dot,.tag-pulse,.immersive-v4 .callout:before{animation:none!important}.journey-progress-line{transition:none}}
.motion-off .immersive-v4 .hero:before,.motion-off .immersive-v4 .hero-site-photo,.motion-off .immersive-v4 .hero-art,.motion-off .immersive-v4 .project-card,.motion-off .immersive-v4 .project-card img,.motion-off .immersive-v4 .depth-firewatch,.motion-off .immersive-v4 .feature-row{transform:none!important}
.motion-off .will-reveal{opacity:1!important;filter:none!important;transform:none!important}
.motion-off .hero-depth-beam,.motion-off .photo-sweep,.motion-off .depth-hud-dot,.motion-off .scroll-journey-icon span,.motion-off .callout:before{animation:none!important}