/* Ocean Intelligence — motion build */
:root{
  --abyss:#03172A; --navy:#0A1B2A; --hull:#0D2436; --line:#1E3A4F; --line-soft:rgba(244,242,234,.12);
  --bone:#F4F2EA; --mist:#AEB8BB; --slate:#5A6B75;
  --teal:#5A99A6; --teal-bright:#7FB8C3; --teal-ink:#2F6B78; --glow:#E9C58F;
  --font-wordmark:"Cormorant Garamond",Georgia,serif;
  --font-serif:"Source Serif 4",Georgia,serif;
  --font-sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --radius-sm:3px;
  --container:1320px; --gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.19,1,.22,1);      /* expo out */
  --ease-io:cubic-bezier(.77,0,.18,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--abyss)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--abyss);color:var(--bone);font-family:var(--font-sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-serif);font-weight:300;letter-spacing:-.02em;line-height:1.05;color:var(--bone)}
em{font-style:italic;font-weight:300;color:var(--teal-bright)}
a{color:var(--teal);text-decoration:none}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
::selection{background:var(--teal);color:var(--abyss)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font:500 11.5px/1 var(--font-sans);letter-spacing:.34em;text-transform:uppercase;color:var(--teal)}
.muted{color:var(--mist)}
.rule{width:48px;height:1px;background:var(--teal);border:0}

/* ---------- film grain + cursor ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
#cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:none}
#cursor i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border:1px solid rgba(244,242,234,.55);border-radius:50%;transition:transform .5s var(--ease),background .3s,border-color .3s}
#cursor.on-link i{transform:scale(1.7);background:rgba(90,153,166,.14);border-color:var(--teal)}
@media (hover:hover) and (pointer:fine){ html.js #cursor{display:block} }

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:100;background:var(--abyss);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
html.seen #intro,html.no-js #intro{display:none}
.intro-mark{width:clamp(88px,11vw,132px);height:auto;overflow:visible}
.intro-mark .m-ring{stroke-dasharray:420;stroke-dashoffset:420}
.intro-mark,.intro-word{visibility:hidden}
.intro-word{overflow:hidden;font:500 15px/1.2 var(--font-wordmark);letter-spacing:.5em;text-transform:uppercase;color:var(--bone);padding-left:.5em;white-space:nowrap}
@media(max-width:600px){.intro-word{font-size:13px;letter-spacing:.3em;padding-left:.3em}}
.intro-word span{display:inline-block}

/* ---------- curtain ---------- */
#curtain{position:fixed;inset:0;z-index:99;background:var(--navy);transform:translateY(100%);pointer-events:none}
#curtain::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
html.arriving #curtain{transform:translateY(0)}

/* ---------- lockup + header ---------- */
.oi-lockup{display:flex;align-items:center;gap:14px}
.oi-mark{height:44px;width:auto;flex:none}
.oi-words{display:flex;flex-direction:column;line-height:1}
.oi-name{font-family:var(--font-wordmark);font-weight:500;font-size:21px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.oi-sub{font-family:var(--font-sans);font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-top:6px}
header{position:fixed;inset:0 0 auto;z-index:60;transition:transform .7s var(--ease),background .5s var(--ease),border-color .5s}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gutter);max-width:var(--container);margin:0 auto;transition:padding .5s var(--ease)}
header.scrolled{background:rgba(3,23,42,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line-soft)}
header.scrolled .bar{padding-top:14px;padding-bottom:14px}
header.hide{transform:translateY(-100%)}
nav{display:flex;align-items:center;gap:34px}
nav a.link{font:500 13.5px/1.35 var(--font-sans);letter-spacing:.02em;color:var(--mist);overflow:hidden;display:inline-block;height:1.35em;vertical-align:middle}
nav a.link span{display:inline-block;position:relative;transition:transform .6s var(--ease)}
nav a.link span::after{content:attr(data-hover);position:absolute;left:0;top:100%;color:var(--bone)}
nav a.link:hover span{transform:translateY(-100%)}
@media(max-width:760px){nav a.link{display:none}.oi-sub{display:none}.oi-mark{height:36px}.oi-name{font-size:16px}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;font:600 14px/1 var(--font-sans);letter-spacing:.05em;padding:16px 28px;border-radius:var(--radius-sm);border:1px solid transparent;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),border-color .5s var(--ease)}
.btn span,.btn svg{position:relative;z-index:1}
.btn .arr{width:20px;height:10px;transition:transform .6s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn::before{content:"";position:absolute;inset:0;z-index:0;transform:translateY(101%);transition:transform .6s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn.primary{background:var(--bone);color:var(--abyss)}
.btn.primary::before{background:var(--teal)}
.btn.ghost{border-color:rgba(244,242,234,.35);color:var(--bone)}
.btn.ghost::before{background:var(--bone)}
.btn.ghost:hover{color:var(--abyss);border-color:var(--bone)}
.btn.big{font-size:16px;padding:22px 38px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- background video ---------- */
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--abyss) center/cover no-repeat}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;padding-top:110px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero-media video{background-image:url(/media/hero-poster.jpg)}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(3,23,42,.55) 0%,rgba(3,23,42,0) 28%,rgba(3,23,42,0) 45%,rgba(3,23,42,.88) 100%),
  linear-gradient(90deg,rgba(3,23,42,.72) 0%,rgba(3,23,42,.2) 60%,rgba(3,23,42,0) 100%)}
.hero-inner{width:100%;padding-bottom:clamp(90px,14vh,150px)}
.hero-eyebrow{display:flex;align-items:center;gap:14px;color:rgba(244,242,234,.82);text-shadow:0 1px 12px rgba(3,23,42,.5)}
.hero-eyebrow .tick{width:36px;height:1px;background:var(--teal);display:inline-block;transform-origin:left}
.hero-title{font-size:clamp(44px,6.4vw,104px);margin:26px 0 28px}
@media(min-width:900px){.hero-title .ln{white-space:nowrap}}
@media(max-height:760px) and (min-width:900px){.hero-title{font-size:clamp(44px,5.4vw,84px)}.hero-lede{margin-bottom:32px}}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-title .ln>span{display:inline-block}
.hero-lede{font-size:clamp(17px,1.45vw,21px);color:var(--mist);max-width:50ch;margin-bottom:42px;font-weight:400}
.hero-foot{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:space-between;align-items:center;font:500 11px/1 var(--font-sans);letter-spacing:.28em;text-transform:uppercase;color:rgba(244,242,234,.55);margin:0 auto}
.coord{font-variant-numeric:tabular-nums}
.scroll-cue{display:flex;align-items:center;gap:12px}
.scroll-cue i{width:1px;height:38px;background:rgba(244,242,234,.25);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--bone);animation:drip 2.2s var(--ease-io) infinite}
@keyframes drip{0%{top:-40%}100%{top:100%}}
@media(max-width:760px){.coord{display:none}.hero-foot{justify-content:flex-end}}

/* ---------- manifesto ---------- */
.manifesto{padding:clamp(120px,22vh,240px) 0}
.big-statement{font-family:var(--font-serif);font-weight:300;font-size:clamp(30px,4.6vw,68px);line-height:1.14;letter-spacing:-.02em;margin-top:40px;max-width:22ch}
[data-words] .w{display:inline-block;opacity:.14;transition:opacity .2s linear}
html.no-js [data-words] .w{opacity:1}

/* ---------- approach (pinned) ---------- */
.approach{position:relative;background:var(--abyss)}
.approach-pin{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:center;isolation:isolate}
.approach-media{position:absolute;inset:0;z-index:-1}
.approach-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,23,42,.9) 0%,rgba(3,23,42,.55) 50%,rgba(3,23,42,.35) 100%),linear-gradient(0deg,rgba(3,23,42,.6),rgba(3,23,42,0) 40%)}
.approach-inner{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center}
.approach-head{display:flex;flex-direction:column;gap:20px}
.approach-head h2{font-size:clamp(34px,4.6vw,66px);max-width:12ch}
.progress{margin-top:30px;width:min(240px,60%);height:1px;background:var(--line-soft);position:relative}
.progress i{position:absolute;inset:0;background:var(--teal);transform-origin:left;transform:scaleX(0)}
.principles{list-style:none;position:relative;min-height:300px}
.principle{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.principle .num{font:500 12px/1 var(--font-sans);letter-spacing:.3em;color:var(--teal);margin-bottom:26px}
.principle h3{font-size:clamp(30px,3.6vw,52px);max-width:14ch;margin-bottom:22px}
.principle p{color:var(--mist);font-size:clamp(17px,1.4vw,20px);max-width:36ch}
html.js .principle{opacity:0}
html.js .principle[data-i="0"]{opacity:1}
/* mobile / no pin: stack */
@media(max-width:860px){
  .approach-pin{height:auto;min-height:0;padding:120px 0}
  .approach-inner{grid-template-columns:1fr}
  .principles{min-height:0;display:flex;flex-direction:column;gap:56px}
  .principle{position:relative;inset:auto}
  html.js .principle{opacity:1}
  .progress{display:none}
}

/* ---------- missions ---------- */
.missions{position:relative;padding:clamp(120px,18vh,200px) 0;overflow:hidden;isolation:isolate}
.missions-media{position:absolute;inset:0;z-index:-1}
.missions-shade{position:absolute;inset:0;background:linear-gradient(180deg,var(--abyss) 0%,rgba(3,23,42,.55) 22%,rgba(3,23,42,.6) 70%,var(--abyss) 100%)}
.sec-head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(56px,8vh,96px);max-width:62ch}
.sec-head h2{font-size:clamp(34px,4.6vw,66px);max-width:16ch}
.mission-list{list-style:none;border-top:1px solid var(--line-soft)}
.mission{position:relative;display:grid;grid-template-columns:80px minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:baseline;padding:clamp(28px,4vh,44px) 0;border-bottom:1px solid var(--line-soft)}
.mission::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.mission:hover::after{transform:scaleX(1)}
.mission .num{font:500 12px/1 var(--font-sans);letter-spacing:.3em;color:var(--teal)}
.mission h3{font-size:clamp(24px,2.6vw,38px);transition:transform .7s var(--ease)}
.mission:hover h3{transform:translateX(10px)}
.mission p{color:var(--mist);font-size:17px}
@media(max-width:860px){.mission{grid-template-columns:40px 1fr}.mission p{grid-column:2}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:30px 0;background:var(--abyss)}
.marquee .track{display:flex;align-items:center;gap:48px;padding-right:48px;width:max-content;animation:marq 60s linear infinite;will-change:transform;backface-visibility:hidden}
.marquee span{font-family:var(--font-serif);font-weight:300;font-style:italic;font-size:clamp(26px,3.4vw,48px);color:rgba(244,242,234,.82);white-space:nowrap}
.marquee i{width:10px;height:10px;border:1px solid var(--teal);border-radius:50%;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- band ---------- */
.band{text-align:center;padding:clamp(120px,20vh,220px) 0;background:var(--navy)}
.band .claim{font-family:var(--font-serif);font-weight:300;font-size:clamp(28px,3.8vw,56px);line-height:1.18;max-width:24ch;margin:0 auto;letter-spacing:-.015em}
.status{display:inline-flex;align-items:center;gap:12px;margin-top:48px;font:500 11.5px/1 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--teal)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(90,153,166,.55)}100%{box-shadow:0 0 0 14px rgba(90,153,166,0)}}

/* ---------- contact CTA ---------- */
.contact-cta{position:relative;padding:clamp(130px,20vh,220px) 0;overflow:hidden;isolation:isolate}
.contact-media{position:absolute;inset:0;z-index:-1}
.contact-shade{position:absolute;inset:0;background:linear-gradient(180deg,var(--navy) 0%,rgba(3,23,42,.72) 25%,rgba(3,23,42,.78) 100%)}
.cta-title{font-size:clamp(52px,9vw,140px)!important;max-width:none!important}
.who{list-style:none;border-top:1px solid var(--line-soft);margin-bottom:56px;max-width:900px}
.who li{padding:20px 0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:150px 1fr;gap:20px;color:var(--mist);font-size:16.5px}
.who li b{font:500 11px/1.6 var(--font-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
@media(max-width:600px){.who li{grid-template-columns:1fr;gap:6px}}

/* ---------- footer ---------- */
footer{padding:80px 0 36px;border-top:1px solid var(--line-soft);overflow:hidden}
.foot-word{font-family:var(--font-wordmark);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:min(calc((100vw - 2 * var(--gutter)) / 12.4),96px);line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(244,242,234,.16);white-space:nowrap;margin-bottom:48px}
footer .row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--slate)}
footer a{color:var(--mist)}footer a:hover{color:var(--bone)}

/* ---------- generic reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(34px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}

/* ---------- interior pages ---------- */
body.interior{padding-top:92px}
body.interior header{background:rgba(3,23,42,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.page-head{position:relative;padding:clamp(80px,14vh,150px) 0 60px}
.page-head h1{font-size:clamp(44px,7vw,104px);margin:22px 0 26px}
.page-head .lede{color:var(--mist);max-width:56ch;font-size:clamp(17px,1.4vw,20px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start;padding-bottom:120px}
@media(max-width:940px){.contact-grid{grid-template-columns:1fr}}
.form-plain iframe{display:block;width:100%;border:none;background:transparent;min-height:1000px}
.confirm{position:relative;min-height:calc(100svh - 92px);display:flex;align-items:center;padding:100px 0;overflow:hidden;isolation:isolate}
.confirm .inner{max-width:64ch}
.confirm h1{font-size:clamp(40px,6vw,88px);margin:24px 0 28px}
.confirm p{color:var(--mist);font-size:clamp(17px,1.5vw,20px);margin-bottom:18px}
.confirm .next{margin-top:48px;padding-top:32px;border-top:1px solid var(--line-soft)}
.confirm .next p{font-size:16px;margin:0;color:var(--slate)}
.page-media{position:absolute;inset:0;z-index:-1;opacity:.5}
.page-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--abyss) 20%,rgba(3,23,42,.6) 100%),linear-gradient(0deg,var(--abyss),rgba(3,23,42,0) 50%)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #intro,#cursor,.grain{display:none!important}
  html.js .reveal,html.js .principle{opacity:1!important;transform:none!important}
  [data-words] .w{opacity:1!important}
  .approach-pin{height:auto;min-height:0;padding:120px 0}
  .principles{min-height:0;display:flex;flex-direction:column;gap:56px}
  .principle{position:relative;inset:auto}
  .progress{display:none}
  .marquee .track{flex-wrap:wrap;width:auto;justify-content:center}
}

/* ---------- cookie consent ---------- */
#oi-consent{position:fixed;left:max(16px,var(--gutter));bottom:24px;z-index:97;max-width:440px;background:rgba(10,27,42,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-soft);border-radius:6px;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
#oi-consent.show{opacity:1;transform:none;pointer-events:auto}
#oi-consent p{font-size:14.5px;line-height:1.55;color:var(--mist);margin-bottom:18px}
#oi-consent p a{color:var(--teal-bright);text-decoration:underline;text-underline-offset:3px}
.oi-consent-actions{display:flex;gap:10px;justify-content:flex-end}
.oi-c-btn{font:600 13px/1 var(--font-sans);letter-spacing:.05em;padding:13px 22px;border-radius:var(--radius-sm);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.oi-c-decline{background:transparent;color:var(--bone);border:1px solid rgba(244,242,234,.35)}
.oi-c-decline:hover{border-color:var(--bone)}
.oi-c-accept{background:var(--bone);color:var(--abyss);border:1px solid var(--bone)}
.oi-c-accept:hover{background:var(--teal);border-color:var(--teal)}
@media(max-width:600px){#oi-consent{left:16px;right:16px;bottom:16px;max-width:none}}
footer .legal{display:flex;gap:20px}
footer .legal a{color:var(--slate)}footer .legal a:hover{color:var(--bone)}
.prose{max-width:68ch;padding-bottom:120px}
.prose h2{font-size:clamp(24px,2.4vw,32px);font-weight:400;margin:48px 0 14px}
.prose p,.prose li{color:var(--mist);font-size:17px;margin-bottom:14px}
.prose ul{padding-left:20px}
.prose a{color:var(--teal-bright);text-decoration:underline;text-underline-offset:3px}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--slate);cursor:pointer}
.linklike:hover{color:var(--bone)}
.prose .linklike{color:var(--teal-bright);text-decoration:underline;text-underline-offset:3px}