:root {
  --ink:#061622;
  --ink2:#081f2d;
  --deep:#0b3040;
  --teal:#155064;
  --aqua:#2a7d86;
  --foam:#f0dec0;
  --sand:#c6a56f;
  --gold:#efad51;
  --amber:#e77e32;
  --sun:#ffc75b;
  --ember:#cc5e2f;
  --line:rgba(240,222,192,.16);
  --muted:rgba(240,222,192,.66);
  --ease:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--foam);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;cursor:none}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink)}

.page-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:rgba(255,255,255,.04)}
.page-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--aqua),var(--gold),var(--sun));box-shadow:0 0 16px rgba(255,199,91,.75)}

#stars{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.8}
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;will-change:transform}
.cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--sun);box-shadow:0 0 14px var(--sun)}
.cursor-ring{width:42px;height:42px;border:1px solid rgba(240,222,192,.55);border-radius:50%;transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,background .25s;backdrop-filter:blur(2px)}
.cursor-ring.hover{width:68px;height:68px;border-color:rgba(239,173,81,.75);background:rgba(239,173,81,.06)}

.site-header{position:fixed;z-index:90;left:0;right:0;top:0;height:82px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid transparent;transition:.4s var(--ease)}
.site-header.scrolled{height:68px;background:rgba(5,19,29,.68);backdrop-filter:blur(18px);border-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;justify-self:start;transition:transform .2s ease}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(240,222,192,.38);border-radius:50%;font:700 11px Georgia,serif;color:var(--gold)}
.brand-name{font-size:10px;letter-spacing:.23em;font-weight:700}
.nav{display:flex;gap:28px;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.nav a{position:relative;opacity:.66;transition:.25s}
.nav a:after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover:after{transform:scaleX(1);transform-origin:left}
.flow-toggle{justify-self:end;border:1px solid rgba(240,222,192,.2);background:rgba(3,15,24,.18);padding:9px 12px;border-radius:999px;display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.16em;cursor:pointer;transition:transform .2s ease,background .25s}
.flow-toggle:hover{background:rgba(239,173,81,.08)}
.flow-icon{display:flex;height:12px;gap:2px;align-items:end}.flow-icon i{display:block;width:2px;background:var(--gold);animation:bar 1s ease-in-out infinite alternate}.flow-icon i:nth-child(1){height:6px}.flow-icon i:nth-child(2){height:11px;animation-delay:.2s}.flow-icon i:nth-child(3){height:8px;animation-delay:.4s}@keyframes bar{to{height:3px;opacity:.45}}

.hero{position:relative;height:100svh;min-height:700px;overflow:hidden;display:flex;align-items:center;padding:0 7vw;isolation:isolate}
.hero-bg,.hero-color,.hero-vignette{position:absolute;inset:-4%;pointer-events:none}
.hero-bg{z-index:-5;background:url('assets/celestial-whale.png') center center/cover no-repeat;transform:scale(1.07);filter:saturate(1.03) contrast(1.02);will-change:transform,filter}
.hero-color{z-index:-4;background:linear-gradient(90deg,rgba(3,18,30,.72) 0%,rgba(3,18,30,.25) 37%,rgba(235,105,35,.04) 68%,rgba(238,135,40,.08) 100%);mix-blend-mode:multiply}
.hero-vignette{z-index:-3;background:radial-gradient(circle at 57% 42%,transparent 0 24%,rgba(3,16,25,.06) 45%,rgba(3,16,25,.52) 100%),linear-gradient(180deg,rgba(3,16,25,.32),transparent 22%,transparent 68%,#061622 103%)}
.whale-spirit{position:absolute;z-index:-1;inset:0;pointer-events:none;filter:drop-shadow(0 20px 50px rgba(0,0,0,.28));will-change:transform}
.whale-image{position:absolute;left:22%;top:22%;width:73%;height:60%;background:url('assets/celestial-whale.png') center center/cover no-repeat;clip-path:polygon(4% 35%,16% 18%,38% 12%,58% 20%,78% 34%,93% 37%,100% 53%,88% 61%,70% 57%,56% 73%,45% 88%,33% 76%,26% 60%,14% 55%);opacity:.16;mix-blend-mode:screen;filter:saturate(1.25) brightness(1.12);animation:whaleBreath 7s ease-in-out infinite alternate}
@keyframes whaleBreath{to{transform:translate3d(12px,-10px,0) rotate(-.4deg);opacity:.23}}

.celestial-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(.2px);opacity:.28;mix-blend-mode:screen;will-change:transform,opacity}
.moon-orb{width:240px;height:240px;left:10vw;top:11vh;background:radial-gradient(circle at 38% 34%,#fff3ba 0 12%,#e6aa57 43%,#683b2c 68%,transparent 71%);box-shadow:0 0 70px rgba(230,170,87,.16)}
.sun-orb{width:340px;height:340px;right:4vw;top:7vh;background:radial-gradient(circle,#fff1a0 0 20%,#ffc65a 37%,#ea7135 60%,transparent 71%);box-shadow:0 0 100px rgba(245,131,50,.25);opacity:.18}

.hero-copy-wrap{position:relative;z-index:4;width:min(820px,76vw);padding-top:46px}
.eyebrow,.section-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700}
.hero-title{margin:16px 0 24px;font:500 clamp(4.6rem,9vw,10rem)/.79 Georgia,"Times New Roman",serif;letter-spacing:-.065em;text-transform:uppercase;text-shadow:0 12px 30px rgba(0,0,0,.22)}
.hero-title .line{display:block;opacity:0;transform:translateY(95px) rotate(2deg);animation:titleIn 1.25s var(--ease) forwards}
.hero-title .line-2{color:var(--sun);font-style:italic;animation-delay:.12s}.hero-title .line-3{animation-delay:.22s}
@keyframes titleIn{to{opacity:1;transform:translateY(0) rotate(0)}}
.hero-text{max-width:590px;font-size:15px;line-height:1.7;color:rgba(240,222,192,.74)}
.hero-actions,.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;min-width:205px;padding:15px 17px;border-radius:999px;border:1px solid rgba(240,222,192,.22);font-size:10px;letter-spacing:.1em;text-transform:uppercase;transition:transform .2s ease,background .3s,color .3s,border-color .3s;overflow:hidden;position:relative}
.btn b{font-size:16px;font-weight:400}.btn.primary{background:var(--sun);color:#111a1e;border-color:var(--sun)}.btn.primary:hover{background:#ffe08a}.btn.ghost{background:rgba(4,18,28,.18);backdrop-filter:blur(8px)}.btn.ghost:hover{border-color:var(--gold);background:rgba(239,173,81,.08)}
.hero-coordinates{position:absolute;bottom:36px;z-index:4;display:flex;align-items:center;gap:10px;color:rgba(240,222,192,.45);font-size:8px;letter-spacing:.16em;text-transform:uppercase}.hero-coordinates.left{left:4vw}.hero-coordinates.left i{width:48px;height:1px;background:rgba(240,222,192,.28)}.hero-coordinates.right{right:4vw;flex-direction:column;align-items:flex-end;gap:4px}
.scroll-cue{position:absolute;left:50%;bottom:30px;z-index:4;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(240,222,192,.48);font-size:7px;letter-spacing:.18em}.scroll-pill{width:20px;height:32px;border:1px solid rgba(240,222,192,.28);border-radius:999px;padding:5px}.scroll-pill span{display:block;width:2px;height:7px;margin:auto;background:var(--gold);border-radius:2px;animation:scrollDrop 1.5s ease-in-out infinite}@keyframes scrollDrop{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:.1}100%{transform:translateY(0);opacity:0}}

.butterfly{position:absolute;width:28px;height:18px;z-index:3;will-change:transform}.butterfly i{position:absolute;top:2px;width:13px;height:15px;background:linear-gradient(135deg,#ffbd46,#dd6c2e 55%,#482820);border:1px solid rgba(26,29,28,.65);box-shadow:inset 0 0 0 1px rgba(255,225,131,.25);animation:wing .42s ease-in-out infinite alternate}.butterfly i:first-child{left:1px;border-radius:80% 20% 70% 30%;transform-origin:right center}.butterfly i:last-child{right:1px;border-radius:20% 80% 30% 70%;transform-origin:left center;animation-direction:alternate-reverse}@keyframes wing{to{transform:scaleX(.22) rotateY(65deg)}}
.b1{left:48%;top:26%;animation:floatA 9s ease-in-out infinite}.b2{right:7%;top:55%;transform:scale(1.15);animation:floatB 11s ease-in-out infinite}.b3{left:8%;bottom:16%;transform:scale(.85);animation:floatA 12s ease-in-out infinite reverse}.b4{left:45%;bottom:10%;transform:scale(.7);animation:floatB 8s ease-in-out infinite}.b5{right:18%;bottom:20%;transform:scale(.55);animation:floatA 10s ease-in-out infinite reverse}@keyframes floatA{50%{translate:24px -18px;rotate:5deg}}@keyframes floatB{50%{translate:-22px 24px;rotate:-8deg}}

.transition-scene{height:250vh;position:relative;background:#061622}
.transition-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.transition-bg{position:absolute;inset:0;z-index:-4;overflow:hidden;background:#082b3b;will-change:transform;--dive:0}
.transition-sticky:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#061622 0%,rgba(6,22,34,.35) 23%,rgba(10,62,71,.26) 55%,rgba(8,28,43,.82) 100%)}
.depth-fog{position:absolute;border-radius:50%;filter:blur(70px);opacity:.18;mix-blend-mode:screen}.fog-a{width:50vw;height:50vw;background:var(--aqua);left:-18vw;top:20%}.fog-b{width:44vw;height:44vw;background:var(--amber);right:-18vw;bottom:2%}
.depth-grid{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(rgba(240,222,192,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(240,222,192,.15) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(transparent,black 20%,black 80%,transparent);transform:perspective(700px) rotateX(70deg) translateY(38%);transform-origin:center bottom}
.transition-word{position:absolute;font:500 clamp(5rem,16vw,18rem)/.8 Georgia,serif;letter-spacing:-.07em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:scale(.65);will-change:opacity,transform,filter}.word-a{color:rgba(240,222,192,.9)}.word-b{color:var(--aqua);font-style:italic}.word-c{color:var(--sun)}
.transition-caption{position:absolute;bottom:8vh;margin:0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(240,222,192,.45)}

.section{position:relative;padding:130px 7vw;z-index:3}
.about{background:linear-gradient(180deg,#061622,#071f2c 70%,#082735)}
.about-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:10vw;margin-top:55px;align-items:start}.about h2,.section-head h2,.services h2{margin:0;font:400 clamp(3.6rem,6.6vw,7.3rem)/.93 Georgia,serif;letter-spacing:-.055em}.about h2 em,.section-head h2 em,.services h2 em{color:var(--sun);font-style:italic}.about-copy{padding-top:12px}.about-copy p{font:400 18px/1.7 Georgia,serif;color:rgba(240,222,192,.78);margin:0 0 24px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px;padding-top:26px;border-top:1px solid var(--line)}.stat{display:flex;flex-direction:column;gap:6px}.stat strong{font:400 38px Georgia,serif;color:var(--gold)}.stat span{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,222,192,.42)}
.mini-orbit{position:relative;width:110px;height:110px;margin-top:56px;border:1px solid rgba(239,173,81,.18);border-radius:50%;animation:spin 14s linear infinite}.mini-orbit:before,.mini-orbit:after{content:"";position:absolute;inset:18px;border:1px solid rgba(42,125,134,.3);border-radius:50%;transform:rotate(55deg)}.mini-orbit:after{inset:38px;border-color:rgba(255,199,91,.45)}.mini-orbit span{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--sun);left:2px;top:50%;box-shadow:0 0 15px var(--sun)}.mini-orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--aqua);right:17px;top:12px}.mini-orbit b{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--foam);left:51%;bottom:11px}@keyframes spin{to{transform:rotate(360deg)}}

.marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#082735;z-index:3}.marquee-track{width:max-content;display:flex;align-items:center;gap:30px;padding:17px 0;animation:marquee 26s linear infinite;color:rgba(240,222,192,.7);font:400 18px Georgia,serif;letter-spacing:.08em}.marquee-track b{color:var(--gold);font-size:11px}@keyframes marquee{to{transform:translateX(-50%)}}

.worlds{background:radial-gradient(circle at 70% 12%,rgba(42,125,134,.16),transparent 24%),linear-gradient(180deg,#082735,#061722 70%)}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end}.section-head h2{margin-top:18px}.section-head>p{max-width:430px;margin:0;color:var(--muted);line-height:1.65;font-size:14px}
.world-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:70px;perspective:1200px}.world-card{position:relative;min-height:510px;border:1px solid rgba(240,222,192,.15);border-radius:34px;background:rgba(6,22,34,.58);overflow:hidden;padding:24px;text-align:left;cursor:pointer;isolation:isolate;transition:transform .22s ease,border-color .35s,box-shadow .35s;backdrop-filter:blur(12px)}.world-card:hover{border-color:rgba(239,173,81,.4);box-shadow:0 30px 80px rgba(0,0,0,.28)}.world-card:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.72}.world-one:before{background:radial-gradient(circle at 50% 28%,rgba(255,199,91,.2),transparent 28%),linear-gradient(140deg,#102b34,#091822)}.world-two:before{background:radial-gradient(circle at 50% 27%,rgba(42,125,134,.32),transparent 30%),linear-gradient(140deg,#062331,#07131d)}.world-three:before{background:radial-gradient(circle at 50% 27%,rgba(231,126,50,.25),transparent 30%),linear-gradient(140deg,#2c251f,#0c161b)}.world-halo{position:absolute;left:50%;top:42%;width:280px;height:280px;border:1px solid rgba(240,222,192,.12);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 60px rgba(239,173,81,.05)}.world-halo:after{content:"";position:absolute;inset:-24px;border:1px dashed rgba(240,222,192,.09);border-radius:50%;animation:spin 18s linear infinite reverse}.world-sphere{position:absolute;left:50%;top:42%;width:205px;height:205px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;font:700 46px Georgia,serif;letter-spacing:-.04em;box-shadow:inset -22px -28px 50px rgba(0,0,0,.34),0 30px 70px rgba(0,0,0,.28);transition:transform .5s var(--ease),filter .4s}.world-card:hover .world-sphere{transform:translate(-50%,-50%) scale(1.06) rotate(-3deg);filter:brightness(1.08)}.sphere-one{background:radial-gradient(circle at 35% 30%,#ffe195,#d78638 34%,#204c57 64%,#071a25 100%)}.sphere-two{background:radial-gradient(circle at 32% 28%,#70d4cf,#1a6572 35%,#0a2d3a 67%,#061722 100%)}.sphere-three{background:radial-gradient(circle at 32% 28%,#ffd26d,#e06a2f 32%,#6f342c 63%,#101820 100%)}.world-sphere span{color:rgba(255,246,221,.9);text-shadow:0 4px 25px rgba(0,0,0,.25)}.world-info{position:absolute;left:24px;right:24px;bottom:28px}.world-info small{font-size:8px;letter-spacing:.16em;color:var(--gold)}.world-info h3{margin:8px 0 4px;font:400 34px Georgia,serif}.world-info p{margin:0;color:rgba(240,222,192,.48);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.world-enter{position:absolute;right:24px;top:24px;font-size:8px;letter-spacing:.14em;color:rgba(240,222,192,.42)}

.services{background:linear-gradient(180deg,#061722,#082431);display:grid;grid-template-columns:.92fr 1.08fr;gap:7vw;align-items:center;min-height:100vh;overflow:hidden}.portal-stage{display:grid;place-items:center;min-height:600px}.portal{position:relative;width:min(520px,42vw);aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 0 45px rgba(42,125,134,.18));will-change:transform}.portal-ring{position:absolute;border-radius:50%;inset:0;border:1px solid rgba(239,173,81,.35)}.pr1{inset:4%;border-width:2px;box-shadow:0 0 30px rgba(239,173,81,.12);animation:spin 16s linear infinite}.pr2{inset:13%;border-color:rgba(42,125,134,.55);border-style:dashed;animation:spin 11s linear infinite reverse}.pr3{inset:23%;border-color:rgba(240,222,192,.25);transform:rotateX(66deg);animation:portalWobble 7s ease-in-out infinite alternate}.pr4{inset:31%;border-color:rgba(255,199,91,.4);transform:rotateY(68deg);animation:portalWobble 9s ease-in-out infinite alternate-reverse}@keyframes portalWobble{to{transform:rotateX(72deg) rotateZ(34deg)}}.portal-core{position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff0a6 0 5%,#efad51 22%,#1b6974 55%,#061722 85%);box-shadow:0 0 55px rgba(239,173,81,.42),inset 0 0 30px rgba(0,0,0,.38);animation:corePulse 3.5s ease-in-out infinite alternate}@keyframes corePulse{to{transform:scale(1.08);box-shadow:0 0 85px rgba(239,173,81,.55),inset 0 0 30px rgba(0,0,0,.3)}}.portal-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sun);box-shadow:0 0 16px var(--sun)}.pd1{left:10%;top:46%;animation:twinkle 1.4s ease-in-out infinite alternate}.pd2{right:17%;top:18%;animation:twinkle 1.8s ease-in-out infinite alternate-reverse}.pd3{right:5%;bottom:26%;animation:twinkle 1.2s ease-in-out infinite alternate}@keyframes twinkle{to{opacity:.25;transform:scale(.55)}}
.services h2{margin:18px 0 48px}.service-list{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--ease),background .35s}.service-row:hover{padding-left:13px;padding-right:13px;background:rgba(239,173,81,.05)}.service-row span{font:italic 16px Georgia,serif;color:var(--gold)}.service-row strong{font:400 24px Georgia,serif}.service-row small{font-size:7px;letter-spacing:.14em;color:rgba(240,222,192,.34);text-align:right}

.philosophy{min-height:95vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;background:#071924;isolation:isolate}.philosophy-bg{position:absolute;inset:0;z-index:-3;overflow:hidden}.philosophy:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#082431 0%,rgba(7,25,36,.45) 28%,rgba(7,25,36,.64) 70%,#061622 100%)}.sunrise{position:absolute;width:330px;height:330px;border-radius:50%;right:8vw;bottom:-130px;z-index:-1;background:radial-gradient(circle at 40% 32%,#fff0a0,#ffc75b 28%,#e56f32 58%,#75342b 76%);box-shadow:0 0 110px rgba(231,126,50,.32);animation:sunFloat 8s ease-in-out infinite alternate}@keyframes sunFloat{to{transform:translateY(-35px) rotate(5deg)}}.philosophy blockquote{margin:25px 0 30px;font:400 clamp(3.2rem,6.4vw,7rem)/1 Georgia,serif;letter-spacing:-.05em}.philosophy blockquote em{color:var(--sun);font-style:italic}.philosophy>p{max-width:620px;margin:0;color:rgba(240,222,192,.62);font-size:14px;line-height:1.7}

.contact{min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:#061622}.contact-bg{position:absolute;inset:0;overflow:hidden}.contact:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,22,34,.91),rgba(6,22,34,.45) 55%,rgba(6,22,34,.82)),linear-gradient(180deg,#061622 0%,transparent 20%,#061622 100%)}.contact-glow{position:absolute;width:65vw;height:65vw;border-radius:50%;right:-26vw;top:0;background:rgba(231,126,50,.18);filter:blur(95px);mix-blend-mode:screen}.contact>*:not(.contact-bg):not(.contact-glow){position:relative;z-index:2}.contact-inner{margin-top:30px;max-width:980px}.contact h2{margin:0;font:400 clamp(4.6rem,9vw,10rem)/.82 Georgia,serif;letter-spacing:-.065em}.contact h2 span{color:var(--sun);font-style:italic}.contact-inner>p{max-width:560px;margin:35px 0 0;color:rgba(240,222,192,.7);font-size:16px;line-height:1.7}.contact footer{position:absolute!important;left:7vw;right:7vw;bottom:28px;display:flex;justify-content:space-between;gap:20px;color:rgba(240,222,192,.36);font-size:8px;letter-spacing:.18em;text-transform:uppercase}

.project-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}.project-modal.open{opacity:1;visibility:visible}.modal-backdrop{position:absolute;inset:0;background:rgba(2,10,17,.76);backdrop-filter:blur(18px)}.modal-panel{position:relative;width:min(1100px,94vw);min-height:620px;border:1px solid rgba(240,222,192,.18);border-radius:36px;background:linear-gradient(145deg,#0a2b39,#07131d 70%);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 35px 120px rgba(0,0,0,.5);transform:translateY(30px) scale(.96);transition:transform .45s var(--ease)}.project-modal.open .modal-panel{transform:translateY(0) scale(1)}.modal-close{position:absolute;z-index:3;right:20px;top:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(240,222,192,.18);background:rgba(6,22,34,.46);cursor:pointer;font-size:24px;line-height:1}.modal-visual{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(42,125,134,.25),transparent 34%)}.modal-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(240,222,192,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(240,222,192,.045) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,black,transparent 74%)}.modal-planet{width:290px;height:290px;border-radius:50%;background:radial-gradient(circle at 33% 28%,#ffe092,#e37d36 34%,#1b6470 67%,#061722 100%);box-shadow:inset -36px -45px 70px rgba(0,0,0,.35),0 35px 90px rgba(0,0,0,.38);animation:planetFloat 5s ease-in-out infinite alternate}@keyframes planetFloat{to{transform:translateY(-18px) rotate(4deg)}}.modal-orbit{position:absolute;width:410px;height:150px;border:1px solid rgba(240,222,192,.22);border-radius:50%;transform:rotate(-18deg);animation:spin 15s linear infinite}.modal-content{padding:78px 62px 60px;align-self:center}.modal-index{font-size:8px;letter-spacing:.22em;color:var(--gold)}.modal-content h3{font:400 54px/1 Georgia,serif;margin:14px 0 22px}.modal-content>p{font:400 17px/1.65 Georgia,serif;color:rgba(240,222,192,.7);max-width:520px}.modal-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0}.modal-tags span{border:1px solid rgba(240,222,192,.16);border-radius:999px;padding:8px 10px;font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:rgba(240,222,192,.62)}.modal-note{font-family:Inter,system-ui!important;font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase;color:rgba(240,222,192,.35)!important}

.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}.reveal{transform:translateY(36px)}.reveal-left{transform:translateX(-46px)}.reveal-right{transform:translateX(46px)}.in-view{opacity:1;transform:translate(0,0)}
.flow-off *{animation-play-state:paused!important}.flow-off .transition-bg,.flow-off .hero-bg,.flow-off .whale-spirit{transition:none!important}

@media (max-width:1000px){
  body{cursor:auto}.cursor{display:none}.nav{display:none}.site-header{grid-template-columns:1fr auto}.flow-toggle{grid-column:2}.hero{padding:0 6vw;min-height:660px}.hero-copy-wrap{width:min(92vw,760px)}.hero-title{font-size:clamp(4rem,13vw,8rem)}.hero-coordinates{display:none}.whale-image{left:8%;top:26%;width:100%;height:56%}.moon-orb{left:-50px}.sun-orb{right:-90px}.section{padding:100px 6vw}.about-grid,.services{grid-template-columns:1fr;gap:65px}.world-grid{grid-template-columns:1fr}.world-card{min-height:430px}.world-sphere{width:180px;height:180px}.portal{width:min(470px,82vw)}.portal-stage{min-height:500px}.service-row{grid-template-columns:38px 1fr}.service-row small{grid-column:2;text-align:left}.modal-panel{grid-template-columns:1fr;max-height:92vh;overflow:auto}.modal-visual{min-height:320px}.modal-content{padding:46px 30px 42px}.modal-content h3{font-size:44px}
}
@media (max-width:640px){
  .site-header{height:68px;padding:0 5vw}.brand-name{display:none}.hero{padding:0 5vw;align-items:flex-end;padding-bottom:120px}.hero-title{font-size:clamp(3.4rem,17vw,6rem);line-height:.82}.hero-text{font-size:13px}.hero-actions{width:100%}.btn{min-width:unset;flex:1}.scroll-cue{display:none}.butterfly{transform:scale(.7)}.section{padding:86px 5vw}.about h2,.section-head h2,.services h2{font-size:clamp(3rem,13vw,5rem)}.about-grid{margin-top:38px}.about-copy p{font-size:16px}.stats{grid-template-columns:1fr}.section-head{flex-direction:column;align-items:flex-start}.world-grid{margin-top:46px}.world-card{border-radius:26px;min-height:390px}.world-sphere{width:150px;height:150px}.world-halo{width:220px;height:220px}.world-info h3{font-size:30px}.portal-stage{min-height:390px}.services{gap:32px}.service-row strong{font-size:20px}.philosophy{min-height:80vh}.philosophy blockquote{font-size:clamp(2.7rem,12vw,4.6rem)}.contact h2{font-size:clamp(4rem,16vw,6.5rem)}.contact footer{left:5vw;right:5vw;flex-direction:column;gap:7px}.modal-planet{width:210px;height:210px}.modal-orbit{width:300px;height:110px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.cursor{display:none}body{cursor:auto}}


/* ==========================================================
   V3 — OCEAN CONTINUATION
   Only the places that repeated the hero artwork were changed.
   Hero, dive sequence, About, Projects and Services remain intact.
   ========================================================== */

/* DESIGN PHILOSOPHY: replace the repeated whale artwork with living water. */
.philosophy-bg{
  inset:0;
  overflow:hidden;
  opacity:1;
  transform:none;
  filter:none;
  background:
    radial-gradient(ellipse at 50% -12%,rgba(105,232,232,.26) 0%,rgba(38,159,177,.13) 28%,transparent 55%),
    radial-gradient(ellipse at 17% 28%,rgba(35,134,151,.16),transparent 34%),
    radial-gradient(ellipse at 82% 62%,rgba(17,101,121,.15),transparent 39%),
    linear-gradient(180deg,#0a3e50 0%,#092f40 26%,#071f2d 64%,#061722 100%);
  background-size:115% 115%,120% 120%,120% 120%,100% 100%;
  animation:oceanBreath 13s ease-in-out infinite alternate;
}
.philosophy-bg:before{
  content:"";
  position:absolute;
  inset:-22% -12% 8%;
  opacity:.58;
  background:repeating-conic-gradient(from 190deg at 50% 0%,rgba(132,238,235,.12) 0 3deg,transparent 3deg 11deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 35%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 35%,transparent 88%);
  mix-blend-mode:screen;
  transform-origin:50% 0;
  animation:lightSweep 18s ease-in-out infinite alternate;
}
.philosophy-bg:after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  top:-18px;
  height:210px;
  opacity:.48;
  background:
    radial-gradient(ellipse at 50% 2%,transparent 0 43%,rgba(120,237,230,.23) 46%,transparent 50%) 0 0/210px 84px repeat-x,
    radial-gradient(ellipse at 50% 0%,rgba(148,245,238,.14),transparent 61%) 95px 20px/270px 108px repeat-x;
  filter:blur(1px);
  transform:rotate(-1deg);
  animation:surfaceDrift 11s linear infinite;
}
.philosophy:after{
  background:
    linear-gradient(180deg,rgba(8,36,49,.18) 0%,rgba(7,25,36,.23) 35%,rgba(7,25,36,.53) 76%,#061622 100%);
}

/* The warm orb stays as a palette accent, but behaves like submerged light. */
.sunrise{
  opacity:.4;
  filter:blur(12px);
  background:radial-gradient(circle at 42% 35%,#fff1b0 0 8%,#f2b04f 22%,rgba(229,111,50,.54) 47%,rgba(31,118,129,.14) 68%,transparent 74%);
  box-shadow:0 0 130px rgba(64,205,204,.16),0 0 95px rgba(231,126,50,.16);
}

/* CONTACT: a calmer, deeper ocean instead of the repeated hero illustration. */
.contact-bg{
  inset:0;
  overflow:hidden;
  opacity:1;
  transform:none;
  filter:none;
  background:
    radial-gradient(ellipse at 48% -16%,rgba(83,220,223,.20),transparent 46%),
    radial-gradient(circle at 86% 38%,rgba(31,123,142,.13),transparent 30%),
    radial-gradient(circle at 12% 65%,rgba(20,99,118,.14),transparent 34%),
    linear-gradient(180deg,#092f40 0%,#071f2d 32%,#061824 70%,#04121b 100%);
  animation:deepOceanBreath 16s ease-in-out infinite alternate;
}
.contact-bg:before{
  content:"";
  position:absolute;
  inset:-22% -15% 18%;
  opacity:.35;
  background:repeating-conic-gradient(from 188deg at 50% 0%,rgba(128,233,231,.10) 0 2.5deg,transparent 2.5deg 10deg);
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.62) 44%,transparent 92%);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.62) 44%,transparent 92%);
  mix-blend-mode:screen;
  animation:lightSweep 21s ease-in-out infinite alternate-reverse;
}
.contact-bg:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.45;
  background-image:
    radial-gradient(circle at 8% 88%,rgba(197,248,243,.75) 0 1.5px,transparent 2px),
    radial-gradient(circle at 21% 72%,rgba(197,248,243,.52) 0 2px,transparent 2.5px),
    radial-gradient(circle at 37% 92%,rgba(197,248,243,.42) 0 1px,transparent 1.8px),
    radial-gradient(circle at 58% 78%,rgba(197,248,243,.62) 0 1.5px,transparent 2.2px),
    radial-gradient(circle at 74% 90%,rgba(197,248,243,.42) 0 2px,transparent 3px),
    radial-gradient(circle at 91% 68%,rgba(197,248,243,.55) 0 1px,transparent 2px);
  background-size:260px 320px,340px 430px,210px 290px,310px 380px,390px 470px,240px 340px;
  animation:bubblesRise 18s linear infinite;
}
.contact:after{
  background:
    linear-gradient(90deg,rgba(4,18,27,.88),rgba(6,28,39,.38) 55%,rgba(4,18,27,.74)),
    linear-gradient(180deg,rgba(6,22,34,.2) 0%,transparent 24%,rgba(4,18,27,.48) 100%);
}
.contact-glow{
  background:radial-gradient(circle,rgba(62,205,204,.16),rgba(231,126,50,.09) 38%,transparent 70%);
  filter:blur(100px);
}

/* Keep the beloved return control, just give it a water-ripple meaning. */
.surface-return{
  border-color:rgba(116,230,226,.36)!important;
  box-shadow:0 0 0 1px rgba(116,230,226,.04),0 0 32px rgba(44,176,185,.08);
}
.surface-return:after{
  content:"";
  position:absolute;
  width:52px;
  height:52px;
  right:-8px;
  top:50%;
  border:1px solid rgba(132,238,235,.38);
  border-radius:50%;
  transform:translateY(-50%) scale(.45);
  opacity:0;
  pointer-events:none;
  animation:returnRipple 2.8s ease-out infinite;
}
.surface-return:hover{
  background:rgba(56,184,188,.09)!important;
  border-color:rgba(139,238,232,.72)!important;
}

@keyframes oceanBreath{
  from{background-position:50% 0,0 0,100% 100%,0 0}
  to{background-position:48% 4%,3% 2%,97% 98%,0 0}
}
@keyframes deepOceanBreath{
  from{background-position:50% 0,100% 35%,0 65%,0 0}
  to{background-position:48% 5%,96% 38%,4% 61%,0 0}
}
@keyframes lightSweep{
  from{transform:translateX(-2%) skewX(-2deg) scaleX(.96)}
  to{transform:translateX(3%) skewX(2deg) scaleX(1.04)}
}
@keyframes surfaceDrift{
  from{background-position:0 0,95px 20px}
  to{background-position:420px 7px,-445px 15px}
}
@keyframes bubblesRise{
  from{background-position:0 80px,0 120px,0 60px,0 140px,0 100px,0 70px}
  to{background-position:16px -420px,-12px -510px,10px -360px,-14px -470px,12px -560px,-10px -410px}
}
@keyframes returnRipple{
  0%{opacity:0;transform:translateY(-50%) scale(.35)}
  24%{opacity:.62}
  100%{opacity:0;transform:translateY(-50%) scale(1.35)}
}

@media (max-width:640px){
  .philosophy-bg:after{height:150px;background-size:160px 70px,220px 92px}
  .contact-bg:after{opacity:.32}
}


/* ==========================================================
   V3.1 — TRUE SCROLL DIVE
   Hero is untouched. This replaces ONLY the repeated artwork
   inside the sticky DIVE / DEEPER / DISCOVER sequence.
   ========================================================== */
.transition-scene{
  height:285vh;
  background:#061622;
}
.transition-sticky{
  background:#082b3b;
}
.transition-bg{
  inset:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  background:#082b3b!important;
  overflow:hidden;
}
.ocean-depth{
  position:absolute;
  inset:-3%;
  transition:opacity .18s linear,transform .18s linear;
  will-change:opacity,transform;
}
.depth-surface{
  opacity:calc(1 - var(--dive-mid,0));
  background:
    radial-gradient(ellipse at 18% -4%,rgba(255,190,82,.24),transparent 27%),
    radial-gradient(ellipse at 77% 2%,rgba(84,230,225,.24),transparent 35%),
    linear-gradient(180deg,#0b5366 0%,#0a4355 22%,#0a3445 58%,#082938 100%);
}
.depth-mid{
  opacity:var(--dive-mid,0);
  background:
    radial-gradient(ellipse at 50% -5%,rgba(80,229,228,.22),transparent 38%),
    radial-gradient(circle at 17% 48%,rgba(27,135,151,.17),transparent 34%),
    radial-gradient(circle at 82% 68%,rgba(24,102,122,.18),transparent 36%),
    linear-gradient(180deg,#0a4052 0%,#093445 32%,#082939 68%,#071f2d 100%);
}
.depth-deep{
  opacity:var(--dive-deep,0);
  background:
    radial-gradient(ellipse at 50% -18%,rgba(53,187,195,.14),transparent 46%),
    radial-gradient(circle at 76% 56%,rgba(20,96,116,.16),transparent 35%),
    linear-gradient(180deg,#082d3d 0%,#082634 32%,#071f2d 65%,#061923 100%);
}
.waterline{
  position:absolute;
  left:-12%;right:-12%;
  height:180px;
  border-radius:48% 52% 50% 50%;
  mix-blend-mode:screen;
  filter:blur(.2px);
  will-change:transform,opacity;
}
.waterline-a{
  top:7%;
  opacity:calc(.72 - var(--dive-mid,0) * .48);
  background:
    radial-gradient(ellipse at 50% 0%,transparent 0 45%,rgba(163,247,239,.28) 47%,transparent 51%) 0 0/230px 92px repeat-x,
    radial-gradient(ellipse at 50% 0%,rgba(91,222,219,.12),transparent 62%) 110px 18px/310px 118px repeat-x;
  animation:transitionWave 10s linear infinite;
}
.waterline-b{
  top:14%;
  opacity:calc(.42 - var(--dive-mid,0) * .25);
  background:radial-gradient(ellipse at 50% 0%,transparent 0 46%,rgba(238,177,77,.18) 48%,transparent 51%) 0 0/280px 100px repeat-x;
  animation:transitionWaveReverse 14s linear infinite;
}
.underwater-rays{
  position:absolute;
  inset:-18% -18% 0;
  transform-origin:50% 0;
  opacity:calc(.56 - var(--dive-deep,0) * .28);
  background:repeating-conic-gradient(from 190deg at 50% 0%,rgba(145,245,239,.12) 0 2.5deg,transparent 2.5deg 10deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.68) 48%,transparent 90%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.68) 48%,transparent 90%);
  mix-blend-mode:screen;
  animation:raysDrift 14s ease-in-out infinite alternate;
}
.transition-bubbles{
  position:absolute;
  inset:0;
  opacity:calc(.15 + var(--dive-mid,0) * .35);
  background-image:
    radial-gradient(circle,rgba(200,250,246,.62) 0 1px,transparent 1.8px),
    radial-gradient(circle,rgba(200,250,246,.44) 0 2px,transparent 2.8px),
    radial-gradient(circle,rgba(242,187,88,.24) 0 1px,transparent 1.7px);
  background-size:230px 320px,370px 480px,310px 420px;
  will-change:background-position,opacity;
}
.bubbles-a{animation:transitionBubbles 18s linear infinite}
.bubbles-b{opacity:calc(.08 + var(--dive-deep,0) * .26);transform:scale(1.35);animation:transitionBubbles 26s linear infinite reverse}
.transition-sticky:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 32%,rgba(4,18,27,.08) 58%,rgba(4,16,24,.56) 100%),
    linear-gradient(180deg,rgba(6,22,34,.04),rgba(6,22,34,.18) 55%,rgba(6,22,34,.72));
}
.transition-sticky:after{
  background:linear-gradient(180deg,rgba(6,22,34,.04) 0%,rgba(6,22,34,.04) 18%,rgba(6,22,34,.14) 52%,rgba(8,31,44,.72) 100%)!important;
}
.depth-grid{
  opacity:calc(.08 - var(--dive-deep,0) * .055);
}
.fog-a{opacity:calc(.10 + var(--dive-mid,0) * .09)}
.fog-b{opacity:calc(.06 + var(--dive-deep,0) * .13)}
.transition-caption{
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
@keyframes transitionWave{to{background-position:460px 6px,-510px 13px}}
@keyframes transitionWaveReverse{to{background-position:-520px 4px}}
@keyframes raysDrift{from{transform:translateX(-2%) skewX(-2deg) scaleX(.97)}to{transform:translateX(3%) skewX(2deg) scaleX(1.04)}}
@keyframes transitionBubbles{from{background-position:0 120px,0 180px,0 80px}to{background-position:18px -520px,-14px -680px,12px -590px}}

@media (max-width:640px){
  .transition-scene{height:260vh}
  .waterline{height:125px}
  .waterline-a{background-size:170px 68px,230px 86px}
  .waterline-b{background-size:210px 76px}
}

/* ==========================================================
   V3.2 — Ocean section treatment
   Keeps the hero + dive sequence, but gives the remaining
   sections the illustrated underwater atmosphere the user wanted.
   ========================================================== */
.about,
.worlds,
.services,
.philosophy,
.contact{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -14%, rgba(86,230,232,.10), transparent 34%),
    linear-gradient(180deg, #082a3b 0%, #071f30 38%, #061826 100%);
}
.about::before,
.worlds::before,
.services::before,
.philosophy::before,
.contact::before{
  content:"";
  position:absolute;
  inset:-10% -6% 0;
  z-index:-4;
  background:
    radial-gradient(circle at 18% 24%, rgba(72,189,203,.16), transparent 18%),
    radial-gradient(circle at 84% 28%, rgba(33,135,154,.14), transparent 20%),
    radial-gradient(circle at 52% 72%, rgba(24,105,121,.18), transparent 24%),
    linear-gradient(180deg, rgba(163,247,239,.08) 0%, transparent 18%, transparent 72%, rgba(6,17,28,.32) 100%);
  filter: blur(4px);
  animation:oceanSceneFloat 18s ease-in-out infinite alternate;
}
.about::after,
.worlds::after,
.services::after,
.philosophy::after,
.contact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.95;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(173,247,242,.16), transparent 45%),
    repeating-conic-gradient(from 188deg at 50% 0%, rgba(170,245,242,.08) 0 2.8deg, transparent 2.8deg 10deg),
    radial-gradient(circle at 12% 72%, rgba(255,255,255,.045) 0 2px, transparent 2.4px),
    radial-gradient(circle at 82% 64%, rgba(255,255,255,.04) 0 2px, transparent 2.4px),
    radial-gradient(circle at 28% 44%, rgba(255,255,255,.035) 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 62% 84%, rgba(255,255,255,.03) 0 1.5px, transparent 1.9px);
  background-size:
    auto,
    auto,
    180px 260px,
    240px 320px,
    210px 300px,
    260px 360px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.75) 58%, rgba(0,0,0,.95));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.75) 58%, rgba(0,0,0,.95));
  animation:oceanBubblesDrift 26s linear infinite;
}

/* top and bottom wave separators for the underwater feel */
.about .section-label,
.worlds .section-label,
.services .section-label,
.philosophy .section-label,
.contact .section-label{
  position:relative;
  z-index:2;
}

.about .about-grid,
.worlds .section-head,
.worlds .world-grid,
.services .portal-stage,
.services .services-copy,
.philosophy > *,
.contact .contact-inner{
  position:relative;
  z-index:2;
}

.services{
  background:
    radial-gradient(ellipse at 50% -10%, rgba(76,232,231,.16), transparent 36%),
    linear-gradient(180deg, #08283a 0%, #072031 34%, #061824 100%);
}
.services:before{
  background:
    radial-gradient(circle at 20% 36%, rgba(62,183,199,.18), transparent 18%),
    radial-gradient(circle at 74% 20%, rgba(255,191,90,.08), transparent 16%),
    radial-gradient(circle at 78% 74%, rgba(33,122,142,.18), transparent 22%),
    linear-gradient(180deg, rgba(161,245,240,.08) 0%, transparent 18%, transparent 72%, rgba(6,17,28,.38) 100%);
}
.services:after{
  opacity:1;
}
.portal-stage::before,
.contact-inner::before,
.about-grid::before,
.world-grid::before{
  content:"";
  position:absolute;
  left:-6%; right:-6%; top:-42px;
  height:110px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 0 46%, rgba(165,248,242,.18) 48%, transparent 52%) 0 0/240px 96px repeat-x,
    radial-gradient(ellipse at 50% 0%, rgba(101,226,221,.10), transparent 62%) 110px 16px/320px 120px repeat-x;
  mix-blend-mode:screen;
  opacity:.65;
  animation:transitionWave 11s linear infinite;
}

.world-grid::before{top:-52px;opacity:.48}
.contact-inner::before{top:-26px;opacity:.36}

/* calmer contact section with deep water base */
.contact{
  background:
    radial-gradient(ellipse at 50% -8%, rgba(75,230,229,.10), transparent 34%),
    linear-gradient(180deg, #071d2b 0%, #061824 44%, #05131c 100%);
}
.contact:before{
  background:
    radial-gradient(circle at 18% 18%, rgba(58,176,191,.14), transparent 18%),
    radial-gradient(circle at 84% 26%, rgba(44,137,157,.12), transparent 18%),
    radial-gradient(circle at 50% 84%, rgba(30,107,122,.18), transparent 24%),
    linear-gradient(180deg, rgba(163,247,239,.06) 0%, transparent 18%, transparent 72%, rgba(2,9,14,.42) 100%);
}
.contact .contact-bg,
.contact .contact-glow{
  opacity:0;
}

/* philosophy section loses the warm sunrise and becomes underwater */
.philosophy{
  min-height:86vh;
}
.philosophy .sunrise{display:none}
.philosophy .philosophy-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(97,230,232,.14), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 26%),
    linear-gradient(180deg, #082536 0%, #071c2b 40%, #051520 100%);
}
.philosophy .philosophy-bg:before,
.philosophy .philosophy-bg:after{
  opacity:.42;
}

/* add subtle jelly-like glow toward the very bottom */
.contact footer::before,
.return-wrap::before{
  content:"";
  position:absolute;
  inset:auto 50% 0 auto;
}
.return-wrap{
  position:relative;
  z-index:2;
}
.return-wrap::before{
  left:50%;
  bottom:34px;
  width:min(540px,82vw);
  height:200px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(94,232,231,.14) 0%, rgba(94,232,231,.08) 26%, rgba(239,173,81,.10) 38%, transparent 70%),
    radial-gradient(ellipse at center, transparent 0 48%, rgba(180,247,241,.24) 50%, transparent 56%);
  filter: blur(4px);
  pointer-events:none;
}

@keyframes oceanSceneFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-10px,0) scale(1.02)}
}
@keyframes oceanBubblesDrift{
  from{background-position:0 0,0 0,0 120px,0 180px,0 80px,0 160px}
  to{background-position:0 0,0 0,18px -460px,-14px -580px,12px -400px,-10px -520px}
}

@media (max-width:900px){
  .portal-stage::before,
  .contact-inner::before,
  .about-grid::before,
  .world-grid::before{height:84px;background-size:180px 72px,250px 96px}
}

/* ==========================================================
   V4 — Real ocean artwork integration
   Uses the new underwater image behind the post-hero sections.
   Hero remains untouched.
   ========================================================== */
:root{
  --ocean-art:url('assets/ocean-depth-v4.png');
}

/* DIVE / DEEPER / DISCOVER now uses the real underwater art */
.transition-scene{
  height:300vh;
  background:#061622 !important;
}
.transition-sticky{
  background:#071c2a !important;
}
.transition-bg{
  background:
    linear-gradient(180deg, rgba(8,31,44,.06) 0%, rgba(8,31,44,.12) 35%, rgba(4,14,21,.58) 100%) !important;
}
.transition-bg::before{
  content:"";
  position:absolute;
  inset:-2% 0 0;
  background:
    linear-gradient(180deg, rgba(9,45,62,.04), rgba(6,25,37,.18) 40%, rgba(3,11,17,.52) 100%),
    var(--ocean-art) center top / cover no-repeat;
  transform:translateY(calc(var(--dive,0) * -12%)) scale(1.06);
  transform-origin:center top;
  will-change:transform;
}
.transition-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% -4%, rgba(166,247,243,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%, transparent 74%, rgba(3,10,15,.48));
  pointer-events:none;
}
.ocean-depth,.waterline,.underwater-rays,.transition-bubbles{display:none !important}
.depth-fog.fog-a{opacity:calc(.14 + var(--dive,0) * .12)}
.depth-fog.fog-b{opacity:calc(.10 + var(--dive,0) * .18)}
.depth-grid{opacity:calc(.05 - var(--dive,0) * .03)}
.transition-caption{color:rgba(232,241,250,.7)}

/* Section-specific ocean placements */
.about,
.worlds,
.services,
.philosophy,
.contact{
  background:#071825 !important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.about::before,
.worlds::before,
.services::before,
.philosophy::before,
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-5;
  background-image:
    linear-gradient(180deg, rgba(5,18,28,.22) 0%, rgba(5,18,28,.38) 42%, rgba(3,10,16,.62) 100%),
    var(--ocean-art);
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.88;
  transform:scale(1.05);
  filter:saturate(1.04) contrast(1.02);
}
.about::after,
.worlds::after,
.services::after,
.philosophy::after,
.contact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(145,244,240,.16), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 18%, transparent 78%, rgba(3,11,17,.3) 100%);
}

.about::before{background-position:center 18%;}
.worlds::before{background-position:center 38%;}
.services::before{background-position:center 56%;}
.philosophy::before{background-position:center 73%;}
.contact::before{background-position:center 92%;}

/* readability glass layers */
.about .about-grid,
.worlds .section-head,
.worlds .world-grid,
.services .services-copy,
.philosophy blockquote,
.philosophy > p,
.contact .contact-inner{
  position:relative;
  z-index:2;
}
.about .about-grid::after,
.worlds .world-grid::after,
.services .services-copy::after,
.contact .contact-inner::after{
  content:"";
  position:absolute;
  inset:-28px -28px;
  z-index:-1;
  border-radius:36px;
  background:linear-gradient(180deg, rgba(4,16,24,.16), rgba(4,16,24,.3));
  backdrop-filter: blur(1.5px);
  pointer-events:none;
}
.worlds .world-grid::after{inset:-24px -18px; border-radius:44px;}
.services .services-copy::after{inset:-34px -24px; border-radius:32px;}
.contact .contact-inner::after{inset:-30px -30px; border-radius:36px;}

/* keep the illustrative feeling without synthetic sunrise */
.philosophy .sunrise{display:none !important}
.philosophy .philosophy-bg{
  display:none !important;
}
.philosophy{
  min-height:78vh;
  text-shadow:0 3px 18px rgba(0,0,0,.32);
}

/* subtle luminous seams between layers */
.about .about-grid::before,
.worlds .world-grid::before,
.services .services-copy::before,
.contact .contact-inner::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:-44px;
  height:96px;
  z-index:-1;
  opacity:.48;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 0 46%, rgba(174,248,243,.22) 48%, transparent 52%) 0 0/220px 92px repeat-x,
    radial-gradient(ellipse at 50% 0%, rgba(97,222,219,.10), transparent 62%) 110px 16px/300px 112px repeat-x;
  mix-blend-mode:screen;
  animation:transitionWave 12s linear infinite;
}

/* slightly calmer project / service cards so the image can shine */
.world-card,
.service-row,
.contact-inner,
.about-grid{
  box-shadow: 0 24px 80px rgba(1,8,12,.18);
}
.service-row{background:rgba(4,16,24,.14)}
.service-row:hover{background:rgba(239,173,81,.08)}

/* return button area blends into darker bottom of the image */
.contact footer{
  background:linear-gradient(180deg, transparent, rgba(3,10,15,.18));
}
.surface-return{
  box-shadow:0 0 0 1px rgba(240,222,192,.14),0 18px 40px rgba(0,0,0,.2);
}

@media (max-width: 900px){
  .about::before{background-position:center 16%;}
  .worlds::before{background-position:center 36%;}
  .services::before{background-position:center 56%;}
  .philosophy::before{background-position:center 76%;}
  .contact::before{background-position:center 94%;}
  .about .about-grid::after,
  .worlds .world-grid::after,
  .services .services-copy::after,
  .contact .contact-inner::after{inset:-14px}
}