@import url('./assets/ocean-fonts.css');
/* The lower outer wing terminals meet the wordmark center at y=358/886. */
.brand-mark{transform:translateY(calc(9.59368% + 2px))}
.nav .contact,.primary,.skip,.demo-controls button{border-radius:999px}
.hero{background:#062c35}.scene{background-size:cover;background-position:center;background-repeat:no-repeat}
[data-palette=lagoon] .scene{background-image:linear-gradient(90deg,#062a3390 0%,#062a3330 50%,transparent 80%),url('./assets/lagoon.webp')}
[data-palette=reef] .scene{background-image:linear-gradient(90deg,#073b4699 0%,#073b464d 52%,transparent 84%),url('./assets/reef.webp')}
[data-palette=offshore] .scene{background-image:linear-gradient(90deg,#07354a88 0%,#07354a33 52%,transparent 84%),url('./assets/offshore.webp')}
.scene:before,.horizon{display:none}
.scene:after{display:block;inset:0;width:100%;height:100%;filter:none;background:linear-gradient(90deg,#042d3599 0%,#042d3580 55%,#042d3560 100%),linear-gradient(180deg,#031f3570 0%,transparent 29%,transparent 73%,#062d3570 100%)}
.hero .eyebrow,.intro-copy,.hero-caption{color:#e2eeeb}
h1{font-family:Newsreader,Georgia,serif;font-size:clamp(60px,6.3vw,94px);letter-spacing:-2px;line-height:1.04;font-weight:400}
h1 em{color:#ffffff}
[data-type=instrument] h1{font-family:'Instrument Serif',Georgia,serif;letter-spacing:-1px;line-height:1.04}
[data-type=manrope] h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(54px,5.5vw,80px);letter-spacing:-3px;line-height:1.13;font-weight:500}
[data-type=manrope] h1 em{font-style:normal;font-weight:500}
.hero-inner{padding-top:95px}.intro-copy{max-width:490px;font-size:16px}
.nav .work-link{background:#073740b3;padding:11px 15px;border-radius:999px}
.primary{padding:17px 24px;background:#f5f6ef;color:#07353d}.nav .contact{background:#083740a6;backdrop-filter:blur(5px)}
.hero-foot{font-size:12px}.concept-tools a,.concept-tools button{font-size:12px;color:#e0efec}.intro-caption{color:#cdeee4}.intro-logo svg{stroke:#f2fff9}.skip{color:#f2fff9;border-color:#d4f5e16b;background:#073b4633;padding:10px 17px}
.study-controls{max-width:1504px;margin:auto;padding:68px 64px 74px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.study-controls .eyebrow{color:#586c6c;font-size:10px;letter-spacing:1.3px;margin-bottom:20px}.study-controls h2{font-family:Manrope,Arial,sans-serif;font-size:34px;font-weight:500;letter-spacing:-1px}.study-note{font-size:14px;line-height:1.9;color:#516567;max-width:540px;margin:20px 0 0}.controls{display:flex;flex-direction:column;gap:24px}.control-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#4f686b;margin:0 0 13px}.palette-links,.type-controls{display:flex;flex-wrap:wrap;gap:9px}.palette-links a,.type-controls button{border:1px solid #bbcfc9;border-radius:999px;background:transparent;padding:11px 16px;font-family:Manrope,Arial,sans-serif;color:#17494c;font-size:12px}.palette-links a[aria-current=page],.type-controls button[aria-pressed=true]{background:#17494c;color:#f6fff8;border-color:#17494c}.type-note{font-size:12px;line-height:1.8;color:#516567;margin:0}.foot{border-color:#d0ded9}
.hub .choices{grid-template-columns:repeat(3,1fr);gap:24px}.hub .choice h2{font-size:25px}.hub .choice img{aspect-ratio:1.43}.hub .hub-lede{max-width:700px}.hub .choice strong{border-radius:999px;border:1px solid #bdceca;padding:10px 15px}.hub .choice{display:flex;flex-direction:column;align-items:flex-start}.hub .choice p{flex:1}.hub h1{font-family:Newsreader,Georgia,serif}.hub .eyebrow{color:#586c6c}
@media(max-width:1100px){.hero-inner{padding-top:105px}h1{font-size:76px}[data-type=manrope] h1{font-size:64px}.study-controls{padding:56px 36px;gap:40px}.hub .choices{grid-template-columns:1fr}}
@media(max-width:700px){.scene{background-position:64% center}.hero{height:800px;min-height:760px}.hero-inner{padding-top:67px}h1{font-size:clamp(44px,11.8vw,61px);letter-spacing:-1px;line-height:1.1}[data-type=instrument] h1{font-size:clamp(48px,12.6vw,65px);letter-spacing:-.6px}[data-type=manrope] h1{font-size:clamp(38px,10vw,51px);letter-spacing:-1.6px;line-height:1.14}.intro-copy{font-size:14px;line-height:1.8;margin:25px 0}.hero-foot{font-size:11px}.concept-tools a,.concept-tools button{font-size:11px}.study-controls{padding:48px 22px;grid-template-columns:1fr;gap:32px}.study-controls h2{font-size:28px}.study-note{font-size:13px}.palette-links a,.type-controls button{padding:11px 14px}.hub h1{font-size:46px}.hub .choices{grid-template-columns:1fr}.nav .contact{padding:9px 13px}}

/* Selected Reef refinement: preserve water texture, shift green toward blue. */
[data-palette=reef-blue] .scene{background-image:linear-gradient(90deg,#073b4699 0%,#073b464d 52%,transparent 84%),url('./assets/reef.webp');filter:hue-rotate(9deg)}

/* Lightweight water drift: reuse the existing image; compositor transforms only. */
[data-palette=reef-blue] .scene{inset:-4%;animation:water-drift 9s ease-in-out infinite alternate;transform-origin:65% 35%}
@keyframes water-drift{from{transform:translate3d(-1.2%,-.7%,0) scale(1.025)}to{transform:translate3d(1.2%,1%,0) scale(1.055)}}
.water-paused .scene{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){[data-palette=reef-blue] .scene{animation:none;transform:none}}

[data-palette=reef-blue] .scene:before{display:block;inset:-8%;filter:none;background:radial-gradient(ellipse at 74% 20%,#a4fff744,transparent 45%),linear-gradient(115deg,transparent 48%,#c8fff426 53%,transparent 62%);animation:water-light 6s ease-in-out infinite alternate;opacity:.35}
@keyframes water-light{from{transform:translate3d(-2%,0,0);opacity:.25}to{transform:translate3d(3%,2%,0);opacity:.7}}
.water-paused .scene:before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){[data-palette=reef-blue] .scene:before{animation:none;opacity:0}}

[data-water-mode] .scene{inset:0;animation:none;transform:none}
[data-water-mode] .scene:before{display:none;animation:none}
.water-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.option-nav{padding:28px 64px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #d0ded9;font-size:12px;color:#17494c}
.option-nav>span{margin-right:12px}.option-nav a{padding:12px 17px;border:1px solid #bbcfc9;border-radius:999px}.option-nav a[aria-current=page]{background:#17494c;color:white}.option-nav .public-site{margin-left:auto}
@media(max-width:700px){.option-nav{padding:24px 22px;gap:10px}.option-nav>span{width:100%}.option-nav .public-site{margin-left:0}}