/* ==========================================================================
   AQUAVET — Fish Nutrition & Health Solutions
   Design system + components
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Brand — ocean depth scale */
  --abyss:#04182B;
  --navy:#072B45;
  --ocean:#0A3F63;
  --blue:#0E5B8A;
  --blue-600:#1173AE;
  --aqua:#12A9C0;
  --aqua-400:#28C6DA;
  --aqua-200:#8FE2EC;
  --aqua-050:#EAF8FB;
  /* Sustainability accent — used sparingly */
  --kelp:#1F9D6B;
  --kelp-200:#9BDCC2;
  /* Neutrals */
  --ink:#0B1F30;
  --ink-70:#41586B;
  --ink-50:#6B8298;
  --line:#DDE7EE;
  --line-soft:#EDF3F7;
  --paper:#F5F9FB;
  --white:#FFFFFF;
  /* Type */
  --font-display:"Sora","Segoe UI Variable Display","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Space */
  --gut:clamp(1.25rem,4vw,2rem);
  --wrap:1240px;
  --wrap-narrow:820px;
  --sec:clamp(4.5rem,9vw,8rem);
  /* Radii + elevation */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(7,43,69,.06),0 4px 14px rgba(7,43,69,.05);
  --sh-2:0 2px 6px rgba(7,43,69,.07),0 18px 42px rgba(7,43,69,.10);
  --sh-3:0 4px 12px rgba(7,43,69,.09),0 34px 70px rgba(7,43,69,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:92px;
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;
  scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:clamp(1rem,.97rem + .16vw,1.0625rem);
  line-height:1.68;font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;line-height:1.12;
  letter-spacing:-.022em;margin:0 0 .6em;color:var(--navy);text-wrap:balance}
h1{font-size:clamp(2.4rem,1.5rem + 3.9vw,4.4rem);letter-spacing:-.033em;font-weight:600}
h2{font-size:clamp(1.85rem,1.25rem + 2.5vw,3.05rem);letter-spacing:-.028em}
h3{font-size:clamp(1.22rem,1.06rem + .72vw,1.6rem)}
h4{font-size:clamp(1.04rem,.98rem + .3vw,1.19rem);letter-spacing:-.012em}
p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--blue-600);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--aqua)}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin-bottom:.42em}
li::marker{color:var(--aqua)}
strong{font-weight:600;color:var(--navy)}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--aqua-200);color:var(--abyss)}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:999;
  background:var(--navy);color:#fff;padding:.75rem 1.4rem;border-radius:0 0 var(--r) var(--r);
  font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:0;color:#fff}

/* --- 3. Layout ---------------------------------------------------------- */
.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--gut) * 2),var(--wrap-narrow));margin-inline:auto}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--paper{background:var(--paper)}
.section--navy{background:var(--navy);color:#D5E5EF}
.section--abyss{background:var(--abyss);color:#C9DCE8}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4,
.section--abyss h1,.section--abyss h2,.section--abyss h3,.section--abyss h4{color:#fff}
.section--navy strong,.section--abyss strong{color:#fff}
.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.g-2-tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr))}
/* auto-fill variants: keep cards card-sized when there are fewer than a full row */
.g-3-fill{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.g-4-fill{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.g-prod{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}

/* --- 4. Section headers ------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-size:.735rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--aqua);margin:0 0 1.15rem}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px;flex:none}
.section--navy .eyebrow,.section--abyss .eyebrow{color:var(--aqua-400)}
.shead{max-width:none;margin-bottom:clamp(2.2rem,4.5vw,3.6rem)}
.shead--center{text-align:center;margin-inline:auto;max-width:760px}
.shead--center .eyebrow::before{display:none}
.shead p{color:var(--ink-70);font-size:1.075rem;max-width:64ch}
.shead--center p{margin-inline:auto}
.section--navy .shead p,.section--abyss .shead p{color:#A9C6D8}
.shead--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end}
.shead--split h2{margin-bottom:0}
@media(max-width:840px){.shead--split{grid-template-columns:1fr;align-items:start}}

/* --- 5. Buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-display);font-size:.945rem;font-weight:600;letter-spacing:-.005em;
  padding:.92rem 1.7rem;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .28s var(--ease-out),box-shadow .28s var(--ease),
  background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  position:relative;overflow:hidden;white-space:nowrap}
.btn svg{flex:none;transition:transform .32s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:linear-gradient(105deg,var(--blue-600),var(--aqua));color:#fff;
  box-shadow:0 6px 20px rgba(17,115,174,.30)}
.btn--primary:hover{color:#fff;box-shadow:0 12px 30px rgba(17,115,174,.42)}
.btn--ghost{border-color:var(--line);color:var(--navy);background:transparent}
.btn--ghost:hover{border-color:var(--aqua);color:var(--blue-600);background:var(--aqua-050)}
.btn--onDark{border-color:rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--onDark:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}
.btn--sm{padding:.62rem 1.2rem;font-size:.855rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-weight:600;font-size:.9rem;color:var(--blue-600)}
.link-arrow svg{transition:transform .3s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* --- 6. Navigation ------------------------------------------------------ */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  transition:background-color .38s var(--ease),box-shadow .38s var(--ease),
  height .38s var(--ease),border-color .38s var(--ease);
  border-bottom:1px solid transparent}
.nav__inner{height:100%;display:flex;align-items:center;gap:1.5rem;
  width:min(100% - (var(--gut) * 2),1340px);margin-inline:auto}
.nav__logo{display:flex;align-items:center;flex:none;margin-right:auto}
.nav__logo img{height:52px;width:auto;
  transition:opacity .3s var(--ease),height .38s var(--ease)}
.nav__logo .logo--light{display:block}
.nav__logo .logo--dark{display:none;position:absolute}
.nav__links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__links li{margin:0}
.nav__links a{font-family:var(--font-display);font-size:.895rem;font-weight:500;
  color:rgba(255,255,255,.86);padding:.55rem .82rem;border-radius:8px;position:relative;
  transition:color .22s var(--ease),background-color .22s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:.82rem;right:.82rem;bottom:.24rem;
  height:2px;background:var(--aqua-400);border-radius:2px;transform:scaleX(0);
  transform-origin:left;transition:transform .34s var(--ease-out)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:#fff}
.nav__cta{flex:none}
.nav__burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  padding:0;place-items:center;border-radius:10px;flex:none}
.nav__burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease-out),opacity .2s var(--ease),background-color .3s var(--ease)}
.nav__burger span+span{margin-top:5px}

/* Scrolled / solid state */
.nav.is-solid .nav__logo img{height:44px}
.nav.is-solid{background:rgba(255,255,255,.90);backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);border-bottom-color:var(--line-soft);
  box-shadow:0 1px 30px rgba(7,43,69,.07);height:76px}
.nav.is-solid .nav__links a{color:var(--ink-70)}
.nav.is-solid .nav__links a:hover,.nav.is-solid .nav__links a[aria-current="page"]{color:var(--navy)}
.nav.is-solid .nav__burger span{background:var(--navy)}
.nav.is-solid .logo--light{display:none}
.nav.is-solid .logo--dark{display:block;position:static}
.nav.is-solid .btn--onDark{border-color:var(--navy);color:var(--navy);background:transparent}
.nav.is-solid .btn--onDark:hover{background:var(--navy);color:#fff}
.nav.is-hidden{transform:translateY(-100%)}
.nav{transition:transform .45s var(--ease),background-color .38s var(--ease),
  box-shadow .38s var(--ease),height .38s var(--ease),border-color .38s var(--ease)}
/* Pages without a dark hero start solid */
body.has-light-top .nav{background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line-soft)}
body.has-light-top .nav .nav__links a{color:var(--ink-70)}
body.has-light-top .nav .logo--light{display:none}
body.has-light-top .nav .logo--dark{display:block;position:static}
body.has-light-top .nav .nav__burger span{background:var(--navy)}
body.has-light-top .nav .btn--onDark{border-color:var(--navy);color:var(--navy)}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:99;background:var(--navy);
  padding:calc(var(--nav-h) + 1.5rem) var(--gut) 2rem;display:flex;flex-direction:column;
  transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease-out),
  visibility 0s linear .5s;overflow-y:auto}
.drawer.is-open{transform:translateY(0);visibility:visible;transition-delay:0s}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{margin:0;opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease) ,transform .5s var(--ease-out)}
.drawer.is-open li{opacity:1;transform:none}
.drawer a{display:block;font-family:var(--font-display);font-size:1.42rem;font-weight:500;
  color:#fff;padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.10)}
.drawer a:hover{color:var(--aqua-400)}
.drawer__foot{margin-top:auto;padding-top:2rem;color:#93B6CC;font-size:.9rem}
.drawer__foot a{font-size:.95rem;display:inline;border:0;padding:0;color:var(--aqua-200)}
body.nav-open{overflow:hidden}
body.nav-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav__burger span:nth-child(2){opacity:0}
body.nav-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open .nav{background:transparent;box-shadow:none;border-color:transparent}
body.nav-open .nav__burger span{background:#fff !important}
body.nav-open .nav .logo--light{display:block}
body.nav-open .nav .logo--dark{display:none}

@media(max-width:1080px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:grid}
}
@media(max-width:560px){
  .nav__logo img{height:44px}
  .nav.is-solid .nav__logo img{height:38px}
}

/* --- 7. Hero ------------------------------------------------------------ */
.hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + 4rem);padding-bottom:clamp(4.5rem,8vw,7rem);
  background:var(--abyss);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.08);animation:heroDrift 22s var(--ease) forwards}
@keyframes heroDrift{to{transform:scale(1)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(4,20,36,.62) 0%,rgba(4,20,36,.28) 46%,transparent 74%)}
.hero__content{position:relative;max-width:960px}
.hero h1{color:#fff;margin-bottom:1.1rem}
.hero h1 em{font-style:normal;color:var(--aqua-400)}
.hero__lede{font-size:clamp(1.06rem,.98rem + .48vw,1.32rem);color:#C3DAE8;max-width:60ch;
  margin-bottom:2.1rem;line-height:1.62}
.hero__badge{display:inline-flex;align-items:center;gap:.65rem;padding:.42rem .95rem .42rem .55rem;
  border:1px solid rgba(143,226,236,.30);border-radius:100px;background:rgba(18,169,192,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-display);font-size:.775rem;font-weight:500;letter-spacing:.055em;
  text-transform:uppercase;color:var(--aqua-200);margin-bottom:1.6rem}
.hero__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--aqua-400);flex:none;
  box-shadow:0 0 0 0 rgba(40,198,218,.6);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(40,198,218,0)}100%{box-shadow:0 0 0 0 rgba(40,198,218,0)}}
.hero__strip{margin-top:clamp(2.6rem,6vw,4.4rem);padding-top:1.9rem;
  border-top:1px solid rgba(255,255,255,.14);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem 1.8rem;max-width:880px}
.hero__strip dt{font-family:var(--font-display);font-size:clamp(1.55rem,1.2rem + 1.1vw,2.15rem);
  font-weight:600;color:#fff;letter-spacing:-.03em;line-height:1}
.hero__strip dd{margin:.45rem 0 0;font-size:.815rem;color:#96B8CE;letter-spacing:.055em;
  text-transform:uppercase;font-weight:500;line-height:1.45}
.hero__scroll{position:absolute;right:var(--gut);bottom:2.2rem;writing-mode:vertical-rl;
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);display:flex;align-items:center;gap:.9rem}
.hero__scroll::after{content:"";width:1px;height:52px;background:linear-gradient(rgba(255,255,255,.5),transparent)}
@media(max-width:900px){.hero__scroll{display:none}}

/* Page hero (interior) */
.phero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;
  padding-top:calc(var(--nav-h) + clamp(3.4rem,7vw,5.6rem));
  padding-bottom:clamp(4.2rem,7vw,6rem)}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover;opacity:.42;transform:scale(1.05)}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(103deg,rgba(4,20,36,.66) 0%,rgba(5,28,48,.30) 52%,transparent 80%)}
.phero h1{color:#fff;margin-bottom:.75rem;position:relative;z-index:1;font-size:clamp(2.1rem,1.4rem + 2.9vw,3.5rem)}
.phero p{color:#B4CFDF;font-size:clamp(1rem,.96rem + .34vw,1.18rem);max-width:62ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.42rem;font-size:.815rem;color:#87ADC5;
  margin-bottom:1.35rem;list-style:none;padding:0}
.crumbs li{margin:0;display:flex;align-items:center;gap:.42rem}
.crumbs li+li::before{content:"/";color:rgba(255,255,255,.26)}
.crumbs a{color:#A9C9DC}
.crumbs a:hover{color:var(--aqua-400)}
.crumbs [aria-current]{color:#fff}

/* --- 8. Cards ----------------------------------------------------------- */
.card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .48s var(--ease-out),box-shadow .48s var(--ease),border-color .4s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--aqua-200)}
.card__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--navy);flex:none}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.05s var(--ease-out),filter .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.075)}
.card__body{padding:clamp(1.35rem,2.4vw,1.85rem);display:flex;flex-direction:column;flex:1;gap:.15rem}
.card__body h3{margin-bottom:.55rem}
.card__body h3 a{color:var(--navy)}
.card:hover .card__body h3 a{color:var(--blue-600)}
.pcard__body h3 a{color:var(--navy)}
.pcard:hover .pcard__body h3 a{color:var(--blue-600)}
.card__body p{color:var(--ink-70);font-size:.955rem;margin-bottom:1.1rem}
.card__foot{margin-top:auto;padding-top:.35rem}
.card__tag{position:absolute;left:1rem;top:1rem;z-index:2;background:rgba(4,24,43,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;
  font-family:var(--font-display);font-size:.685rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.35rem .72rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.18)}
.card__meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.79rem;color:var(--ink-50);
  margin-bottom:.7rem;font-weight:500;letter-spacing:.01em}
.card__meta span{display:inline-flex;align-items:center;gap:.34rem}
.card__meta svg{color:var(--aqua);flex:none}
.card--link::after{content:"";position:absolute;inset:0;z-index:3}
.card__result{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line);
  font-size:.87rem;color:var(--navy)}
.card__result b{display:block;font-family:var(--font-display);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--aqua);margin-bottom:.28rem;font-weight:600}

/* Solution card (icon based) */
.scard{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.6vw,2.15rem);position:relative;overflow:hidden;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .4s var(--ease)}
.scard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--aqua),var(--blue-600));transform:scaleX(0);
  transform-origin:left;transition:transform .55s var(--ease-out)}
.scard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.scard:hover::before{transform:scaleX(1)}
.scard__ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--aqua-050);color:var(--blue-600);margin-bottom:1.15rem;flex:none;
  transition:background-color .4s var(--ease),color .4s var(--ease),transform .5s var(--ease-out)}
.scard:hover .scard__ico{background:var(--blue-600);color:#fff;transform:scale(1.06) rotate(-3deg)}
.scard h3{font-size:1.16rem;margin-bottom:.5rem}
.scard p{color:var(--ink-70);font-size:.94rem;margin:0}
.scard__list{margin:1rem 0 0;padding:0;list-style:none;font-size:.885rem;color:var(--ink-70)}
.scard__list li{padding-left:1.15rem;position:relative;margin-bottom:.3rem}
.scard__list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--aqua)}

/* On dark */
.section--navy .scard,.section--abyss .scard{background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.10);backdrop-filter:blur(6px)}
.section--navy .scard:hover,.section--abyss .scard:hover{background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.10);box-shadow:none}
.section--navy .scard p,.section--abyss .scard p,
.section--navy .scard__list,.section--abyss .scard__list{color:#A9C6D8}
.section--navy .scard__ico,.section--abyss .scard__ico{background:rgba(40,198,218,.14);color:var(--aqua-400)}

/* --- 9. Product cards --------------------------------------------------- */
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .4s var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--aqua-200)}
.pcard__media{aspect-ratio:1/1;background:#08304C;overflow:hidden;position:relative;flex:none}
.pcard__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transition:transform .9s var(--ease-out)}
.pcard__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,24,43,.22),transparent 42%)}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__cat{position:absolute;right:.9rem;top:.9rem;z-index:2;font-family:var(--font-display);
  font-size:.66rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;background:rgba(4,24,43,.55);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:.28rem .62rem;border-radius:100px}
.pcard__body{padding:1.45rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.pcard__body h3{font-size:1.19rem;margin-bottom:.4rem}
.pcard__sub{font-size:.79rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--aqua);margin-bottom:.7rem;font-family:var(--font-display)}
.pcard__body p{font-size:.925rem;color:var(--ink-70);margin-bottom:1rem}
.pcard__spec{list-style:none;margin:0 0 1.2rem;padding:0;font-size:.865rem;color:var(--ink-70)}
.pcard__spec li{display:flex;flex-wrap:wrap;gap:.1rem .55rem;padding:.42rem 0;
  border-top:1px solid var(--line-soft)}
.pcard__spec li > span{flex:1 1 170px;min-width:0}
.pcard__spec li:first-child{border-top:0}
.pcard__spec b{color:var(--navy);font-weight:600;flex:none;min-width:88px;font-size:.79rem;
  letter-spacing:.03em;text-transform:uppercase;padding-top:.08em}
.pcard__foot{margin-top:auto}

/* --- 10. Stats ---------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:1px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);overflow:hidden}
/* icon sits above the number */
.stat{background:var(--navy);padding:clamp(1.6rem,3vw,2.3rem) clamp(1.2rem,2.4vw,1.8rem);
  transition:background-color .45s var(--ease)}
.stat:hover{background:#0A3552}
.stat__n{font-family:var(--font-display);font-size:clamp(2.2rem,1.5rem + 2.6vw,3.5rem);
  font-weight:600;line-height:1;color:#fff;letter-spacing:-.038em;
  display:flex;align-items:baseline;gap:.06em}
.stat__n .suf{font-size:.52em;color:var(--aqua-400)}
.stat__l{margin-top:.85rem;font-size:.855rem;color:#9BBDD3;line-height:1.5}
.stat__src{margin-top:.5rem;font-size:.715rem;color:#66889E;letter-spacing:.02em}

/* Light stat tiles */
.stats--light{background:var(--line);border-color:var(--line)}
.stats--light .stat{background:var(--white)}
.stats--light .stat:hover{background:var(--paper)}
.stats--light .stat__n{color:var(--navy)}
.stats--light .stat__n .suf{color:var(--aqua)}
.stats--light .stat__l{color:var(--ink-70)}
.stats--light .stat__src{color:var(--ink-50)}

/* --- 11. Feature split -------------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--wide{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
@media(max-width:900px){.split--wide{grid-template-columns:1fr}}
.split__media{position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-2);aspect-ratio:4/3.1}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media--tall{aspect-ratio:4/4.6}
.media-stack{position:relative;padding-bottom:clamp(2.5rem,6vw,4rem);
  padding-right:clamp(2.5rem,6vw,4rem)}
.media-stack__main{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/3.3}
.media-stack__main img{width:100%;height:100%;object-fit:cover}
.media-stack__sub{position:absolute;right:0;bottom:0;width:52%;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-3);border:5px solid #fff;aspect-ratio:4/3}
.media-stack__sub img{width:100%;height:100%;object-fit:cover}
.section--navy .media-stack__sub,.section--abyss .media-stack__sub{border-color:var(--navy)}
.media-badge{position:absolute;left:0;bottom:clamp(1rem,4vw,2.4rem);z-index:3;text-align:left;
  background:#fff;border-radius:var(--r);padding:1rem 1.3rem;box-shadow:var(--sh-2);
  max-width:230px;border-left:3px solid var(--aqua)}
.media-badge b{display:block;font-family:var(--font-display);font-size:1.45rem;color:var(--navy);
  line-height:1;letter-spacing:-.03em}
.media-badge span{display:block;margin-top:.35rem;font-size:.775rem;color:var(--ink-50);
  text-transform:uppercase;letter-spacing:.07em;font-weight:500}

/* --- 12. Expertise list ------------------------------------------------- */
.exp{border-top:1px solid var(--line)}
.exp__row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1rem,3vw,2.4rem);align-items:start;padding:clamp(1.4rem,2.6vw,2rem) 0;
  border-bottom:1px solid var(--line);position:relative;transition:background-color .4s var(--ease)}
.exp__row:hover{background:linear-gradient(90deg,var(--aqua-050),transparent 70%)}
.exp__num{font-family:var(--font-display);font-size:.78rem;font-weight:600;color:var(--aqua);
  letter-spacing:.1em;padding-top:.42em;min-width:2.4rem}
.exp__row h3{margin:0;font-size:clamp(1.08rem,1rem + .5vw,1.4rem);
  transition:transform .45s var(--ease-out)}
.exp__row:hover h3{transform:translateX(6px)}
.exp__row p{margin:0;color:var(--ink-70);font-size:.95rem}
@media(max-width:820px){
  .exp__row{grid-template-columns:auto minmax(0,1fr);gap:.4rem 1rem}
  .exp__row p{grid-column:2}
}

/* --- 13. Partners ------------------------------------------------------- */
.marquee{position:relative;overflow:hidden;padding-block:.5rem;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;width:max-content;
  animation:marqueeRun 46s linear infinite;will-change:transform}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__run{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.25rem);
  padding-right:clamp(.75rem,1.6vw,1.25rem)}
@keyframes marqueeRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.pmark{flex:none;width:clamp(146px,15vw,186px);height:clamp(92px,9.5vw,112px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:.95rem 1.1rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(7,43,69,.04);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.pmark:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--aqua-200)}
.pmark img{width:100%;height:100%;object-fit:contain;object-position:center}
.section--navy .pmark,.section--abyss .pmark{border-color:rgba(255,255,255,.12)}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none;
    scrollbar-width:thin;padding-bottom:1rem}
  .marquee__track{animation:none}
}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden}
.partner{background:#fff;aspect-ratio:16/10;display:grid;place-items:center;padding:1.15rem;
  transition:background-color .35s var(--ease)}
.partner:hover{background:var(--aqua-050)}
.partner img{max-height:66px;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1) opacity(.62);transition:filter .45s var(--ease),transform .45s var(--ease-out)}
.partner:hover img{filter:none;transform:scale(1.05)}

/* --- 14. Case study ----------------------------------------------------- */
.cs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:960px){.cs{grid-template-columns:1fr}}
.cs__aside{position:sticky;top:calc(var(--nav-h) + 24px);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem}
@media(max-width:960px){.cs__aside{position:static}}
.cs__h{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);
  margin-bottom:1.1rem;font-weight:600}
.cs__facts{list-style:none;margin:0;padding:0}
.cs__facts li{padding:.72rem 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-70)}
.cs__facts li:first-child{border-top:0;padding-top:0}
.cs__facts b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-50);margin-bottom:.22rem;font-weight:600}
.cs__facts strong{color:var(--navy);font-weight:600}
.csblock{margin-bottom:clamp(2rem,4vw,3rem)}
.csblock:last-child{margin-bottom:0}
.csblock__k{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);background:var(--navy);padding:.36rem .8rem;border-radius:100px;
  margin-bottom:.95rem}
.csblock--challenge .csblock__k{background:#8A5A2B}
.csblock--solution .csblock__k{background:var(--blue-600)}
.csblock--impact .csblock__k{background:var(--kelp)}
.csblock p{color:var(--ink-70)}
.csblock h3{font-size:1.35rem}

/* --- 15. Gallery -------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:.9rem}
.gal--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
/* Small strip for archive photography that should not be upscaled */
.gal--sm{grid-template-columns:repeat(auto-fill,minmax(min(50% - .45rem,215px),1fr))}
.gal--sm figure{aspect-ratio:1/1}
.gal--sm img{filter:saturate(.94) contrast(1.04)}
.icolist.grid{display:grid}
.gal figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--navy);
  position:relative}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out),
  filter .5s var(--ease)}
.gal figure:hover img{transform:scale(1.08)}
.gal figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,24,43,.5),transparent 55%);opacity:0;
  transition:opacity .4s var(--ease)}
.gal figure:hover::after{opacity:1}

/* --- 16. Timeline ------------------------------------------------------- */
.tl{position:relative;padding-left:2.1rem}
.tl::before{content:"";position:absolute;left:6px;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(var(--aqua),var(--aqua-200) 65%,transparent)}
.tl__item{position:relative;padding-bottom:2.1rem}
.tl__item:last-child{padding-bottom:0}
.tl__item::before{content:"";position:absolute;left:-2.1rem;top:.45rem;width:14px;height:14px;
  border-radius:50%;background:#fff;border:3px solid var(--aqua);box-shadow:0 0 0 4px var(--white)}
.section--paper .tl__item::before{box-shadow:0 0 0 4px var(--paper)}
.tl__yr{font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  color:var(--aqua);text-transform:uppercase}
.tl__h{margin:.28rem 0 .4rem;font-size:clamp(1.04rem,.98rem + .3vw,1.19rem);letter-spacing:-.012em}
.tl__item p{margin:0;color:var(--ink-70);font-size:.94rem}

/* --- 17. CTA band ------------------------------------------------------- */
.cta{position:relative;overflow:hidden;isolation:isolate;background:var(--abyss);color:#fff;
  padding-block:clamp(5.5rem,9vw,8rem) clamp(4rem,8vw,7rem);text-align:center}
.cta__media{position:absolute;inset:0;z-index:-2}
.cta__media img{width:100%;height:100%;object-fit:cover;opacity:.34}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(85% 120% at 50% 8%,rgba(4,20,36,.30),rgba(4,20,36,.78))}
.cta h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta p{color:#B4CFDF;max-width:56ch;margin:0 auto 2.1rem;font-size:1.08rem}
.cta .btn-row{justify-content:center}

/* --- 18. Forms ---------------------------------------------------------- */
.form{display:grid;gap:1.15rem}
.field{display:flex;flex-direction:column;gap:.42rem}
.field label{font-family:var(--font-display);font-size:.83rem;font-weight:600;color:var(--navy);
  letter-spacing:.01em}
.field label .req{color:#C0533A}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.98rem;color:var(--ink);
  padding:.82rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);width:100%}
.field textarea{resize:vertical;min-height:140px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--aqua);
  box-shadow:0 0 0 4px rgba(40,198,218,.16)}
.field input::placeholder,.field textarea::placeholder{color:#9FB2C0}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B8298' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1.15rem}
.form__note{font-size:.83rem;color:var(--ink-50)}
.form-status{padding:.85rem 1.1rem;border-radius:var(--r-sm);font-size:.9rem;display:none}
.form-status.is-on{display:block}
.form-status--ok{background:#E7F6EF;color:#146848;border:1px solid #9BDCC2}
.form-status--err{background:#FDEDE8;color:#8A3418;border:1px solid #F0BCA8}

/* --- 19. Contact tiles -------------------------------------------------- */
.ctile{display:flex;gap:1rem;padding:1.3rem;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:border-color .3s var(--ease),transform .4s var(--ease-out),
  box-shadow .4s var(--ease)}
.ctile:hover{border-color:var(--aqua-200);transform:translateY(-3px);box-shadow:var(--sh-1)}
.ctile__ico{width:42px;height:42px;border-radius:12px;background:var(--aqua-050);color:var(--blue-600);
  display:grid;place-items:center;flex:none}
.ctile__h{margin:0 0 .3rem;font-size:.98rem;font-family:var(--font-display);font-weight:600;
  color:var(--navy);line-height:1.3}
.ctile p,.ctile a{margin:0;font-size:.925rem;color:var(--ink-70);display:block;line-height:1.55}
.ctile a:hover{color:var(--blue-600)}

/* --- 20. Footer --------------------------------------------------------- */
.foot{background:var(--abyss);color:#96B8CE;padding-block:clamp(3.5rem,6vw,5rem) 0;
  font-size:.925rem}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.55fr) repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(2rem,4vw,3rem)}
.foot__brand img{height:56px;width:auto;margin-bottom:1.15rem}
.foot__brand p{max-width:38ch;color:#8CAFC6;font-size:.925rem}
.foot__h{font-family:var(--font-display);font-size:.755rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin:0 0 1.05rem;font-weight:600}
.foot__col{display:block}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55rem}
.foot a{color:#96B8CE}
.foot a:hover{color:var(--aqua-400)}
.foot__social{display:flex;gap:.55rem;margin-top:1.4rem}
.foot__social a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.13);
  display:grid;place-items:center;color:#96B8CE;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),
  transform .35s var(--ease-out)}
.foot__social a:hover{background:var(--aqua);border-color:var(--aqua);color:#fff;transform:translateY(-2px)}
.foot__bar{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.10);
  padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:space-between;
  font-size:.845rem;color:#6E92AB}

/* --- 21. Misc ----------------------------------------------------------- */
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.9rem}
.prose > :first-child{margin-top:0}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);
  font-size:.735rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:.32rem .78rem;border-radius:100px;background:var(--aqua-050);color:var(--blue-600);
  border:1px solid #CCE9F0}
.pill--kelp{background:#EAF7F1;color:#157A50;border-color:var(--kelp-200)}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.filter{font-family:var(--font-display);font-size:.855rem;font-weight:500;padding:.55rem 1.1rem;
  border-radius:100px;border:1.5px solid var(--line);background:#fff;color:var(--ink-70);
  cursor:pointer;transition:all .28s var(--ease)}
.filter:hover{border-color:var(--aqua-200);color:var(--navy)}
.filter[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.note{border-left:3px solid var(--aqua);background:var(--aqua-050);padding:1rem 1.25rem;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.92rem;color:var(--ink-70)}
.note b{color:var(--navy)}
.quote{border-left:3px solid var(--aqua);padding-left:clamp(1.2rem,3vw,2rem);
  font-family:var(--font-display);font-size:clamp(1.12rem,1rem + .6vw,1.44rem);font-weight:400;
  line-height:1.5;color:var(--navy);letter-spacing:-.015em}
.section--navy .quote,.section--abyss .quote{color:#E4F1F8}
.quote cite{display:block;margin-top:1.1rem;font-family:var(--font-body);font-size:.88rem;
  font-style:normal;color:var(--ink-50);letter-spacing:0}
.section--navy .quote cite{color:#8CAFC6}
.wavesep{display:block;width:100%;height:auto;color:var(--paper)}

/* --- 22. Motion --------------------------------------------------------- */
html.no-js [data-reveal],html.no-js [data-stagger] > *{opacity:1 !important;transform:none !important}
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .78s var(--ease),transform .88s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal="zoom"]{transform:scale(.965)}
@media(max-width:860px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(24px)}
}
[data-stagger] > *{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .8s var(--ease-out)}
[data-stagger].is-in > *{opacity:1;transform:none}
[data-parallax]{will-change:transform}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal],[data-stagger] > *{opacity:1 !important;transform:none !important}
  .hero__media img{transform:none;animation:none}
}

/* --- 23. Print ---------------------------------------------------------- */
@media print{
  .nav,.drawer,.cta,.foot__social,.hero__scroll{display:none !important}
  body{color:#000}
  .hero,.phero{background:#fff;color:#000;padding-top:2rem}
  .hero h1,.phero h1{color:#000}
  a::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* ==========================================================================
   24. Ambient water motion
   Layered light + caustics + drifting waves, applied to the deep-water
   sections only so light content sections stay calm and readable.
   All of it is decorative, pointer-inert, and off under reduced motion.
   ========================================================================== */
.waterfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  contain:strict}
.hero > .wrap,.phero > .wrap,.cta > .wrap,
.section--navy > .wrap,.section--abyss > .wrap{position:relative;z-index:1}
.hero__scroll{z-index:2}

/* Shafts of light through water */
.wfx-rays{position:absolute;inset:-40% -20%;opacity:.12;
  background:repeating-linear-gradient(100deg,
    transparent 0 78px,
    rgba(198,242,252,.85) 78px 96px,
    transparent 96px 118px,
    rgba(198,242,252,.45) 118px 128px,
    transparent 128px 250px);
  filter:blur(16px);transform-origin:60% 0%;
  animation:wfxRays 30s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform,opacity}
@keyframes wfxRays{
  0%  {transform:translate3d(-3%,0,0) rotate(-1.4deg) scaleY(1);opacity:.07}
  45% {opacity:.15}
  100%{transform:translate3d(4%,0,0) rotate(1.6deg) scaleY(1.12);opacity:.10}
}

/* Slow caustic blooms — the moving light on a pond floor */
.wfx-caustic{position:absolute;inset:-25%;mix-blend-mode:screen;filter:blur(38px);
  will-change:transform}
.wfx-caustic--a{opacity:.30;
  background:
    radial-gradient(34% 24% at 20% 22%,rgba(40,198,218,.50),transparent 62%),
    radial-gradient(28% 20% at 74% 34%,rgba(143,226,236,.38),transparent 64%);
  animation:wfxDriftA 38s ease-in-out infinite alternate}
.wfx-caustic--b{opacity:.22;
  background:
    radial-gradient(40% 26% at 58% 76%,rgba(17,115,174,.55),transparent 66%),
    radial-gradient(24% 18% at 12% 68%,rgba(40,198,218,.32),transparent 62%);
  animation:wfxDriftB 52s ease-in-out infinite alternate}
@keyframes wfxDriftA{
  0%  {transform:translate3d(-3%,-2%,0) scale(1.00)}
  50% {transform:translate3d(3%,2%,0)   scale(1.14)}
  100%{transform:translate3d(-1%,4%,0)  scale(1.06)}
}
@keyframes wfxDriftB{
  0%  {transform:translate3d(2%,3%,0)   scale(1.08)}
  50% {transform:translate3d(-4%,-2%,0) scale(1.00)}
  100%{transform:translate3d(1%,-4%,0)  scale(1.12)}
}

/* Surface swell — two wave bands sliding at different speeds */
.wfx-swell{position:absolute;left:0;right:0;height:46%;bottom:0;opacity:.30}
.wfx-swell svg{position:absolute;left:0;bottom:0;width:200%;max-width:none;height:100%;
  will-change:transform}
.wfx-swell svg:nth-child(1){animation:wfxSwellA 34s linear infinite;opacity:.55}
.wfx-swell svg:nth-child(2){animation:wfxSwellB 52s linear infinite;opacity:.35}
@keyframes wfxSwellA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes wfxSwellB{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* Rising particles (canvas) */
.wfx-bubbles{position:absolute;inset:0;width:100%;height:100%;opacity:.9}

/* Light sections get one very quiet drifting tint — barely perceptible,
   just enough that the page never feels completely static. */
.section--paper{overflow:hidden;isolation:isolate}
.section--paper::before{content:"";position:absolute;inset:-30% -10%;z-index:-1;
  pointer-events:none;opacity:.55;filter:blur(60px);
  background:
    radial-gradient(30% 22% at 18% 24%,rgba(40,198,218,.10),transparent 65%),
    radial-gradient(34% 24% at 82% 72%,rgba(17,115,174,.08),transparent 68%);
  animation:wfxDriftA 46s ease-in-out infinite alternate}

@media(prefers-reduced-motion:reduce){
  .waterfx{display:none}
  .section--paper::before{animation:none;opacity:.35}
}
/* Keep the effect off very small screens where it costs more than it gives */
@media(max-width:520px){
  .wfx-rays{display:none}
  .wfx-caustic{filter:blur(46px)}
}

/* ==========================================================================
   25. Generated scenes
   Photo-free backgrounds for the hero, page headers and CTA bands. Built from
   gradients and SVG so they stay razor sharp at any resolution and carry far
   more motion than a still image could.
   ========================================================================== */
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-2;
  background:
    radial-gradient(90% 62% at 74% -6%, rgba(45,190,220,.34) 0%, transparent 58%),
    radial-gradient(80% 55% at 10% -8%, rgba(20,140,190,.30) 0%, transparent 55%),
    radial-gradient(120% 80% at 50% 106%, rgba(3,14,26,.85) 0%, transparent 62%),
    linear-gradient(178deg, #0B4468 0%, #083050 30%, #06223A 62%, #04182B 100%)}
.scene--deep{background:
    radial-gradient(95% 65% at 78% -10%, rgba(56,205,232,.38) 0%, transparent 60%),
    radial-gradient(85% 58% at 16% -6%, rgba(18,120,175,.34) 0%, transparent 58%),
    radial-gradient(130% 85% at 50% 108%, rgba(2,10,20,.90) 0%, transparent 60%),
    linear-gradient(180deg, #0C4C74 0%, #073350 34%, #05203A 66%, #030F1C 100%)}
.scene--band{background:
    radial-gradient(85% 110% at 50% -18%, rgba(38,170,205,.30) 0%, transparent 62%),
    linear-gradient(180deg, #072F4C 0%, #051E33 58%, #04182B 100%)}

/* Fish silhouettes drifting at three depths */
.scene__fish{position:absolute;inset:0;width:100%;height:100%}
@keyframes fishSwim{
  from{transform:translate3d(104vw,0,0)}
  25% {transform:translate3d(74vw,-14px,0)}
  50% {transform:translate3d(48vw,10px,0)}
  75% {transform:translate3d(22vw,-8px,0)}
  to  {transform:translate3d(-26vw,0,0)}
}

/* Slow-panning measurement grid — the "scientific" texture layer */
.scene__grid{position:absolute;inset:-10%;opacity:.22;
  background-image:
    linear-gradient(rgba(143,226,236,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,226,236,.30) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  animation:gridPan 44s linear infinite}
@keyframes gridPan{from{background-position:0 0}to{background-position:88px 88px}}

/* Current lines — long dashes travelling along soft curves */
.scene__current{position:absolute;inset:0;width:100%;max-width:none;height:100%;opacity:.75}
.scene__current path{fill:none;stroke:rgba(160,232,246,.55);stroke-width:1.1;
  vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:2 96;
  animation:currentFlow linear infinite}
@keyframes currentFlow{from{stroke-dashoffset:490}to{stroke-dashoffset:0}}

/* Big translucent icon watermark on interior page headers */
.scene__mark{position:absolute;right:-2%;top:50%;width:min(46vw,520px);
  transform:translateY(-50%);opacity:.055;color:#BFEFF8;
  animation:markFloat 22s ease-in-out infinite alternate}
.scene__mark svg{width:100%;height:auto;stroke-width:.55}
@keyframes markFloat{
  from{transform:translateY(-52%) rotate(-2.5deg) scale(1)}
  to  {transform:translateY(-46%) rotate(2.5deg)  scale(1.06)}
}
@media(max-width:780px){.scene__mark{opacity:.04;width:70vw;right:-14%}}

/* Wave divider between light and dark bands */
.wavesplit{position:absolute;left:0;right:0;line-height:0;pointer-events:none;z-index:0;
  overflow:hidden;height:clamp(38px,5vw,74px)}
.wavesplit--top{top:-1px;transform:scaleY(-1)}
.wavesplit--bottom{bottom:-1px}
.wavesplit svg{position:absolute;left:0;bottom:0;display:block;width:200%;max-width:none;height:100%;
  animation:waveSlide 30s linear infinite}
.wavesplit svg:nth-child(1){opacity:.32;bottom:26%;animation-duration:46s;
  animation-direction:reverse}
.wavesplit svg:nth-child(2){opacity:1}
@keyframes waveSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Light sections: a visible but quiet moving texture */
.section--paper::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(rgba(17,115,174,.16) 1px, transparent 1px),
    radial-gradient(rgba(18,169,192,.13) 1px, transparent 1px);
  background-size:44px 44px, 44px 44px;
  background-position:0 0, 22px 22px;
  mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  animation:dotDrift 30s linear infinite}
@keyframes dotDrift{
  from{background-position:0 0, 22px 22px}
  to  {background-position:44px 44px, 66px 66px}
}

/* Icon-led media tiles — replaces low-resolution photography */
.tile{position:relative;overflow:hidden;display:grid;place-items:center;
  aspect-ratio:16/10;flex:none;isolation:isolate;
  background:linear-gradient(150deg,#083C5E 0%,#0B5A83 48%,#0E7C96 100%)}
.tile--alt{background:linear-gradient(150deg,#0A3350 0%,#12648F 55%,#12A9C0 100%)}
.tile--kelp{background:linear-gradient(150deg,#07394B 0%,#0E6F79 52%,#1F9D6B 100%)}
.tile--deep{background:linear-gradient(150deg,#051F34 0%,#0A3F63 55%,#1173AE 100%)}
.tile::before{content:"";position:absolute;inset:-30%;z-index:-1;opacity:.5;
  background:
    radial-gradient(36% 28% at 24% 26%, rgba(190,240,250,.45), transparent 62%),
    radial-gradient(30% 24% at 76% 70%, rgba(40,198,218,.40), transparent 64%);
  filter:blur(24px);animation:wfxDriftA 30s ease-in-out infinite alternate}
.tile__pattern{position:absolute;inset:0;opacity:.20;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent 76%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent 76%);
  animation:gridPan 30s linear infinite}
.tile__wave{position:absolute;left:0;right:0;bottom:0;height:52%;opacity:.35}
.tile__wave svg{position:absolute;bottom:0;left:0;width:200%;max-width:none;height:100%;
  animation:waveSlide 34s linear infinite}
.tile__wave svg:nth-child(2){opacity:.6;animation-duration:44s;animation-direction:reverse}
.tile__ico{position:relative;z-index:2;color:#EAFBFF;opacity:.94;
  filter:drop-shadow(0 6px 18px rgba(3,15,28,.4));
  transition:transform .7s var(--ease-out)}
.tile__ico svg{width:clamp(46px,5.6vw,68px);height:auto;stroke-width:1.35}
.card:hover .tile__ico,.scard:hover .tile__ico{transform:translateY(-4px) scale(1.06)}
.tile__label:empty{display:none}
.tile__label{position:absolute;left:1rem;bottom:.9rem;z-index:2;
  font-family:var(--font-display);font-size:.67rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(234,251,255,.72)}

/* Icon rows used in place of decorative photographs */
.icolist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.icolist li{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .95rem;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--white);
  font-size:.93rem;color:var(--ink-70);
  transition:border-color .3s var(--ease),transform .4s var(--ease-out)}
.icolist li:hover{border-color:var(--aqua-200);transform:translateX(3px)}
.icolist .i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--aqua-050);color:var(--blue-600);flex:none}
.section--navy .icolist li,.section--abyss .icolist li{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);color:#A9C6D8}
.section--navy .icolist .i,.section--abyss .icolist .i{background:rgba(40,198,218,.14);
  color:var(--aqua-400)}

/* Numbered icon card — the expertise grid */
.xcard{position:relative;overflow:hidden;background:var(--white);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .4s var(--ease)}
.xcard::after{content:"";position:absolute;right:-28px;bottom:-34px;width:132px;height:132px;
  border-radius:50%;background:radial-gradient(circle,rgba(40,198,218,.14),transparent 68%);
  transition:transform .7s var(--ease-out)}
.xcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--aqua-200)}
.xcard:hover::after{transform:scale(1.5)}
.xcard__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.15rem}
.xcard__ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--aqua-050),#DCF1F7);color:var(--blue-600);
  transition:background .45s var(--ease),color .45s var(--ease),transform .55s var(--ease-out)}
.xcard:hover .xcard__ico{background:linear-gradient(140deg,var(--blue-600),var(--aqua));
  color:#fff;transform:rotate(-5deg) scale(1.06)}
.xcard__n{font-family:var(--font-display);font-size:1.9rem;font-weight:600;
  color:var(--line);letter-spacing:-.04em;line-height:1;
  transition:color .45s var(--ease)}
.xcard:hover .xcard__n{color:var(--aqua-200)}
.xcard h3{font-size:1.12rem;margin-bottom:.5rem;position:relative;z-index:1}
.xcard p{font-size:.93rem;color:var(--ink-70);margin:0 0 1rem;position:relative;z-index:1}
.xcard ul{list-style:none;margin:auto 0 0;padding:0;position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:.4rem}
.xcard li{margin:0;font-size:.755rem;font-weight:600;letter-spacing:.045em;
  text-transform:uppercase;color:var(--blue-600);background:var(--aqua-050);
  border:1px solid #D6ECF3;padding:.26rem .6rem;border-radius:100px;
  font-family:var(--font-display)}

/* Key-figure tiles gain an icon */
.stat__ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(40,198,218,.14);color:var(--aqua-400);margin-bottom:.9rem}
.stats--light .stat__ico{background:var(--aqua-050);color:var(--blue-600)}

@media(prefers-reduced-motion:reduce){
  .scene__fish use,.scene__grid,.scene__current path,.scene__mark,
  .wavesplit svg,.section--paper::after,.tile::before,.tile__pattern,.tile__wave svg{
    animation:none !important}
}
@media(max-width:520px){
  .scene__grid,.scene__current{display:none}
}