/* Design compliance vocabulary: Interactions feel like adjusting dials on equipment that was never designed for human hands. Text appears as if etched into wet stone. IntersectionObserver` at `threshold: 0.3`. The blur-focus pattern reinforces the underwater/foggy-mountain atmosphere: content materializes as though emerging from mist or deep water. Apply to: */
:root{
  --deep:#0a1f17;
  --pine:#0b3d2e;
  --granite:#162b23;
  --ocean:#1a4d3d;
  --foam:#c8ede4;
  --glass:#a3c4b8;
  --teal:#39d6b0;
  --cyan:#45e8d0;
  --warm:#d4856a;
  --ink:#1a3329;
  --mist:rgba(200,237,228,0.06);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--deep);color:var(--foam);font-family:"Nunito Sans",Inter,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow:hidden}
body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 78% 14%,rgba(69,232,208,.16),transparent 28%),radial-gradient(circle at 12% 76%,rgba(57,214,176,.12),transparent 32%),linear-gradient(135deg,#0a1f17 0%,#0b3d2e 40%,#162b23 100%)}

.snap-container{position:relative;z-index:1;height:100vh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.spread{position:relative;height:100vh;min-height:680px;scroll-snap-align:start;overflow:hidden;background:linear-gradient(135deg,#0a1f17 0%,#0b3d2e 40%,#162b23 100%)}
.panel{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:clamp(2rem,5vw,6rem);overflow:hidden}
.mountain{left:0;width:68%;background:linear-gradient(135deg,#0a1f17 0%,#0b3d2e 40%,#162b23 100%);clip-path:polygon(0 0,62% 0,55% 100%,0 100%);justify-content:flex-start}
.ocean{right:0;width:62%;background:linear-gradient(145deg,rgba(26,77,61,.94),rgba(57,214,176,.16));clip-path:polygon(38% 0,100% 0,100% 100%,31% 100%)}
.threshold .mountain{width:72%;clip-path:polygon(0 0,64% 0,57% 100%,0 100%)}
.threshold .ocean{width:58%;clip-path:polygon(31% 0,100% 0,100% 100%,24% 100%)}
.concept .mountain{width:50%;clip-path:polygon(0 0,82% 0,74% 100%,0 100%)}
.concept .ocean{width:72%;clip-path:polygon(20% 0,100% 0,100% 100%,13% 100%)}
.process .mountain{width:70%;clip-path:polygon(0 0,68% 0,59% 100%,0 100%)}
.process .ocean{width:56%;clip-path:polygon(28% 0,100% 0,100% 100%,20% 100%)}
.domains .mountain{width:56%;clip-path:polygon(0 0,89% 0,80% 100%,0 100%)}
.domains .ocean{width:56%;clip-path:polygon(20% 0,100% 0,100% 100%,11% 100%)}
.signal{display:grid;place-items:center;background:radial-gradient(circle at center,rgba(26,77,61,.54),transparent 42%),linear-gradient(135deg,#0a1f17 0%,#0b3d2e 40%,#162b23 100%)}

.panel-content{position:relative;z-index:3;max-width:42ch}.panel-content.wide{max-width:56ch}.text-block{margin-left:15vw;margin-right:3vw}.kicker,.dot,.icon-stack span,.domain-item span{font-family:"Commissioner",Inter,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--teal)}
h1,h2{font-family:"Commissioner",Inter,sans-serif;letter-spacing:.03em;margin:0;color:var(--foam);line-height:.95}h1{font-size:clamp(3rem,9vw,8.2rem);font-weight:700;text-shadow:0 0 44px rgba(57,214,176,.18)}h2{font-size:clamp(1.8rem,4vw,4.2rem);font-weight:300;line-height:1.05}.lead,p{font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.72;color:var(--glass)}.lead{max-width:38ch;margin-top:1.5rem}.concept h2{color:var(--ink)}.concept .ocean p{color:var(--ink)}

.section-dots{position:fixed;z-index:10;left:1.2rem;top:50%;transform:translateY(-50%);display:grid;gap:1rem}.dot{width:8px;height:8px;border-radius:50%;background:rgba(200,237,228,.22);box-shadow:0 0 12px rgba(57,214,176,.16);transition:transform .5s,background .5s}.dot.is-active{background:var(--warm);transform:scale(1.7)}
.depth-field{position:fixed;inset:0;z-index:2;pointer-events:none}.particle{position:absolute;border-radius:50%;background:var(--teal);box-shadow:0 0 16px var(--teal);opacity:.34;animation:plankton var(--dur,9s) ease-in-out infinite alternate;transform:translate3d(0,0,0)}
@keyframes plankton{from{opacity:.05;transform:translate(-10px,8px) scale(.8)}to{opacity:.58;transform:translate(18px,-20px) scale(1.2)}}

.fog{position:absolute;inset:-20%;background:linear-gradient(100deg,transparent 0%,rgba(200,237,228,.06) 35%,rgba(69,232,208,.09) 50%,rgba(200,237,228,.06) 65%,transparent 100%);filter:blur(20px);animation:fogdrift 48s linear infinite;opacity:.9}.fog-b{animation-duration:62s;animation-direction:reverse}@keyframes fogdrift{from{transform:translateX(-18%)}to{transform:translateX(18%)}}

.jelly-net{width:clamp(220px,33vw,430px);height:auto;overflow:visible;animation:breathe 8s ease-in-out infinite}.jelly-net path,.jelly-net circle,.icon-stack svg,.domain-item svg,.brand-mark{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.links path{stroke-dasharray:7 10;animation:dash 14s linear infinite}.nodes circle{filter:drop-shadow(0 0 10px rgba(57,214,176,.65));animation:nodefloat 7s ease-in-out infinite}.nodes .n2{animation-delay:-1s}.nodes .n3{animation-delay:-2s}.nodes .n4{animation-delay:-3s}.nodes .n5{animation-delay:-4s}.nodes .n6{animation-delay:-5s}.nodes .n7{animation-delay:-2.5s}@keyframes dash{to{stroke-dashoffset:-170}}@keyframes breathe{50%{transform:scale(1.025);opacity:.78}}@keyframes nodefloat{50%{transform:translateY(-8px)}}
.hero-icon{margin-left:10vw}.icon-stack{position:relative;z-index:3;display:grid;gap:2rem}.icon-stack article{display:flex;align-items:center;gap:1.1rem}.icon-stack svg{width:64px;height:64px;filter:drop-shadow(0 0 15px rgba(57,214,176,.32))}

.phase-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.2rem}.phase-list li{position:relative;padding-left:4.3rem}.phase-list span{position:absolute;left:0;top:.15rem;font-family:"Commissioner";color:var(--teal);font-size:.78rem;letter-spacing:.12em}.phase-list strong{display:block;font-family:"Commissioner";font-weight:500;color:var(--foam);font-size:1.35rem}.phase-list p{margin:.2rem 0 0;max-width:34ch}.morph-wrap{position:relative;width:clamp(170px,24vw,320px);height:clamp(170px,24vw,320px);display:grid;place-items:center}.morph-icon{width:62%;height:62%;border:1.5px solid var(--teal);filter:drop-shadow(0 0 24px rgba(57,214,176,.54));animation:morph 6s steps(3,end) infinite;background:linear-gradient(135deg,rgba(57,214,176,.12),transparent)}.morph-orbit{position:absolute;inset:8%;border:1px dashed rgba(69,232,208,.5);border-radius:50%;animation:orbit 44s linear infinite}@keyframes morph{0%{clip-path:polygon(4% 80%,33% 21%,49% 55%,62% 33%,96% 80%)}34%{clip-path:polygon(4% 55%,23% 30%,43% 66%,65% 34%,96% 58%,96% 78%,4% 78%)}67%,100%{clip-path:polygon(19% 51%,8% 34%,18% 12%,44% 18%,55% 5%,82% 18%,73% 43%,93% 58%,75% 86%,50% 76%,31% 92%,9% 75%)}}@keyframes orbit{to{transform:rotate(360deg)}}

.domain-grid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(115px,1fr));gap:1.2rem;width:min(43vw,580px)}.domains-left .domain-grid{margin-right:10vw}.domains-right .domain-grid{margin-left:10vw}.domain-item{min-height:145px;border:1px solid rgba(57,214,176,.22);background:rgba(10,31,23,.28);display:grid;place-items:center;align-content:center;gap:.8rem;transition:filter .45s,transform .45s,border-color .45s,opacity .45s}.domain-item svg{width:62px;height:62px;transition:transform .45s,filter .45s,stroke .45s}.domain-item:hover{transform:scale(1.08);border-color:rgba(57,214,176,.75)}.domain-grid:has(.domain-item:hover) .domain-item:not(:hover){filter:blur(4px);opacity:.46}.domain-item:hover svg{transform:scale(1.15);filter:drop-shadow(0 0 22px rgba(57,214,176,.7))}.domain-item.cognition svg{stroke:var(--warm)}

.terrain{position:absolute;left:-4%;right:-4%;bottom:-1px;height:18vh;pointer-events:none;will-change:transform}.terrain-one{background:#0b3d2e;opacity:.8;clip-path:polygon(0 100%,0 52%,8% 42%,17% 62%,25% 31%,36% 58%,46% 25%,56% 61%,67% 39%,78% 64%,89% 28%,100% 55%,100% 100%)}.terrain-two{height:22vh;background:#162b23;opacity:.5;clip-path:polygon(0 100%,0 66%,10% 48%,21% 72%,30% 45%,44% 73%,58% 36%,70% 70%,83% 43%,100% 68%,100% 100%)}.terrain-three{height:26vh;background:#1a4d3d;opacity:.3;clip-path:polygon(0 100%,0 76%,14% 56%,25% 84%,39% 61%,51% 82%,65% 50%,79% 86%,91% 59%,100% 74%,100% 100%)}

.blur-reveal{filter:blur(12px);opacity:.3;transform:translateY(18px);transition:filter 1.2s ease-out,opacity 1.2s ease-out,transform 1.2s ease-out}.is-visible .blur-reveal{filter:blur(0);opacity:1;transform:translateY(0)}.is-visible h1.blur-reveal,.is-visible h2.blur-reveal{transition-duration:1.4s}.phase-list li:nth-child(2),.icon-stack article:nth-child(2),.domain-item:nth-child(2){transition-delay:.15s}.phase-list li:nth-child(3),.icon-stack article:nth-child(3),.domain-item:nth-child(3){transition-delay:.3s}.signal .blur-reveal{filter:blur(24px);transition-duration:2.5s}.signal-core{text-align:center;position:relative;z-index:3}.brand-mark{width:90px;height:90px;margin-bottom:1.5rem;filter:drop-shadow(0 0 20px rgba(57,214,176,.5))}.signal h2{font-size:clamp(2.2rem,6vw,6rem);max-width:11ch}.signal a{display:inline-block;margin-top:2rem;color:var(--teal);font-family:"Commissioner";font-weight:300;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid currentColor;text-shadow:0 0 18px rgba(57,214,176,.45);transition:color .4s}.signal a:hover{color:var(--warm)}

@media (max-width:800px){.spread{min-height:760px}.panel{padding:2rem}.mountain,.ocean,.threshold .mountain,.threshold .ocean,.concept .mountain,.concept .ocean,.process .mountain,.process .ocean,.domains .mountain,.domains .ocean{width:100%;clip-path:none}.mountain{top:0;bottom:42%;align-items:flex-start}.ocean{top:38%;bottom:0}.text-block,.hero-icon,.domains-left .domain-grid,.domains-right .domain-grid{margin:0}.domain-grid{grid-template-columns:repeat(2,1fr);width:88vw}.section-dots{left:.55rem}.concept h2{color:var(--foam)}.concept .ocean p{color:var(--glass)}}
