/* ==========================================================================
   DEPTH DIGITAL — STYLESHEET
   1. Tokens        design values and scroll-driven variables
   2. Base          reset, typography, shared primitives
   3. Environment   the ocean layer behind every page
   4. Chrome        header, navigation, depth gauge, footer
   5. Layout        panels, page sections, rhythm
   6. Components    cards, buttons, forms, media, controls
   7. Pages         work, case study, pricing, team, contact
   8. Themes        light-panel and seafloor inversions
   9. Responsive    breakpoints, coarse pointer, reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Static design values first, then the variables assets/script.js rewrites on
   scroll. Every scroll-driven token needs a sensible default here: if the
   script never runs, these are what the page renders with.
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --ink: #f3fbfc;
  --muted: rgba(225, 245, 247, 0.72);
  --line: rgba(210, 244, 246, 0.18);
  --aqua: #65e4dc;
  --aqua-bright: #a5fff4;
  --deep: #03101a;
  --warm: #f0c895;
  --depth-logo-blue: #79b7ff;
  --indicator: var(--aqua-bright);

  /* Measure and rhythm */
  --max: 1240px;
  --rhythm: clamp(4.5rem, 9vw, 9rem);
  --rhythm-tight: clamp(2.5rem, 5vw, 4.5rem);

  /* Scroll-driven — written by updateScrollState() in assets/script.js */
  --scroll: 0;
  --gradient-y: 0%;
  --gradient-brightness: 1.06;
  --gradient-saturation: 1.05;
  --surface-opacity: 1;
  --deep-shade: 0;
  --header-bg-alpha: 0;
  --header-border-alpha: 0;
  --header-blur: 0px;
  --header-saturation: 100%;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--deep);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
body.menu-open .site-header { color: #f4fbfa; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.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-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 999;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #03101a;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

.ocean {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #061b27;
}
.ocean__gradient {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(90% 55% at 50% -5%, rgba(196,255,249,.95) 0%, rgba(55,207,215,.62) 18%, transparent 48%),
    linear-gradient(180deg,
      #5fd7dc 0%,
      #1882a2 17%,
      #0a526f 36%,
      #07384f 54%,
      #061f31 72%,
      #03111d 100%);
  transform: translate3d(0, var(--gradient-y), 0) scale(1.08);
  filter: saturate(var(--gradient-saturation)) brightness(var(--gradient-brightness));
}

.surface-glow {
  position: absolute;
  inset: -20% -10% auto;
  height: 60vh;
  background: radial-gradient(ellipse at center, rgba(218,255,249,.55), transparent 62%);
  opacity: var(--surface-opacity);
  filter: blur(22px);
}
/* Scroll-driven octopus: part of the fixed ocean layer, behind all page content. */
.scroll-octopus {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(440px, 74vw, 1150px);
  opacity: var(--octopus-opacity, 0);
  transform:
    translate3d(var(--octopus-x, -90vw), var(--octopus-y, 58vh), 0)
    scale(var(--octopus-scale, .24))
    rotate(var(--octopus-rotate, -3deg));
  transform-origin: 50% 50%;
  filter:
    blur(var(--octopus-blur, 10px))
    brightness(.78)
    saturate(.88)
    drop-shadow(0 28px 54px rgba(0, 10, 22, .3));
  will-change: transform, opacity, filter;
  contain: layout paint style;
}
.scroll-octopus picture,
.scroll-octopus__image {
  display: block;
  width: 100%;
  height: auto;
}
.scroll-octopus__image {
  animation: octopusFloat 7.5s ease-in-out infinite alternate;
  transform-origin: 52% 48%;
}

.depth-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, transparent 30%, rgba(0,8,15,.18) 76%, rgba(0,6,12,.52) 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,4,9,var(--deep-shade)) 100%);
}
#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1rem, 4vw, 4.5rem);
  background: rgba(3, 15, 24, var(--header-bg-alpha));
  border-bottom: 1px solid rgba(255, 255, 255, var(--header-border-alpha));
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(var(--header-saturation));
  backdrop-filter: blur(var(--header-blur)) saturate(var(--header-saturation));
  color: #f4fbfa;
  --menu-drop-color: #ffffff;
  --menu-label-color: #ffffff;
  transition: padding .35s ease, color .35s ease, background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled .brand__logo-stack { width: clamp(140px, 16vw, 224px); }
.site-header.is-scrolled {
  padding-top: .8rem;
  padding-bottom: .8rem;
  color: #f4fbfa;
  --menu-drop-color: #ffffff;
  --menu-label-color: #ffffff;
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand__logo-stack {
  position: relative;
  display: block;
  width: clamp(178px, 22vw, 308px);
  aspect-ratio: 1222 / 341;
  transition: width .35s cubic-bezier(.2,.65,.3,1);
}
.brand__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  transform-origin: left center;
}
.brand__logo--default {
  opacity: 0;
  filter: drop-shadow(0 8px 16px rgba(0, 14, 22, .16));
}
.brand__logo--light {
  opacity: 1;
  filter: drop-shadow(0 10px 18px rgba(120, 245, 255, .1));
}
.site-header.is-scrolled .brand__logo--default,
body.menu-open .brand__logo--default {
  opacity: 0;
  transform: translateY(-1px);
}
.site-header.is-scrolled .brand__logo--light,
body.menu-open .brand__logo--light {
  opacity: 1;
}
.menu-toggle {
  position: relative;
  z-index: 103;
  display: grid;
  justify-items: center;
  gap: .16rem;
  width: 68px;
  min-height: 64px;
  padding: .12rem .15rem .05rem;
  border: 0;
  color: #effafc;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
}
.menu-toggle__icon {
  position: relative;
  display: grid;
  width: 50px;
  height: 44px;
  place-items: center;
}
.menu-toggle__drop,
.menu-toggle__close {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.65,.3,1), color .35s ease;
}
.menu-toggle__drop {
  color: var(--menu-drop-color);
  filter: drop-shadow(0 8px 14px rgba(1, 23, 32, .16));
  transform-origin: 50% 50%;
}
.menu-toggle__close {
  opacity: 0;
  color: #effafc;
  transform: scale(.64) rotate(-20deg);
}
.menu-toggle__label {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .61rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translateX(.08em);
  color: var(--menu-label-color);
  text-shadow: 0 1px 6px rgba(0, 40, 60, 0.5);
}
.menu-toggle:hover .menu-toggle__drop,
.menu-toggle:focus-visible .menu-toggle__drop { transform: translateY(-1px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__drop {
  opacity: 0;
  transform: scale(.72);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.splash-droplet {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: var(--drop-size, 6px);
  height: calc(var(--drop-size, 6px) * 1.25);
  border-radius: 58% 42% 62% 38% / 68% 40% 60% 32%;
  background: var(--menu-drop-color);
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 10px rgba(108, 240, 220, .55);
  transform: translate(-50%, -50%) rotate(var(--drop-rotate, 0deg)) scale(.9);
  animation: menuSplash 1.2s cubic-bezier(.2,.65,.3,1) forwards;
}
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 101;
  display: grid;
  place-content: center;
  gap: 1.5rem;
  padding: 7rem 1.5rem 3rem;
  color: #f4fbfa;
  background: rgba(2, 14, 23, .9);
  backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.site-nav[hidden] { display: none; }
.site-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}
.site-nav a {
  text-decoration: none;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 1.1;
  text-align: center;
  color: rgba(244,255,255,.82);
  transition: color .2s ease, transform .2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: #fff; transform: translateY(-2px); }
.nav-cta {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--aqua-bright) !important;
  background: none;
}

.depth-gauge {
  position: fixed;
  z-index: 60;
  right: clamp(0.8rem, 2vw, 1.6rem);
  top: 50%;
  display: grid;
  justify-items: center;
  gap: .55rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.depth-gauge__label,
.depth-gauge__readout {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-shadow: 0 1px 6px rgba(0, 40, 60, 0.5);
}
.depth-gauge__label {
  color: #EFFAFC;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}
.depth-gauge__track {
  position: relative;
  width: 2px;
  height: 180px;
  border-radius: 999px;
  background: rgba(210, 240, 248, 0.4);
}
.depth-gauge__marker {
  position: absolute;
  left: 50%;
  top: var(--depth-marker-y, 0%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6CF0DC;
  box-shadow: 0 0 10px #6CF0DC;
  transform: translate(-50%, -50%);
}
.depth-gauge__readout {
  min-width: 3.2em;
  text-align: center;
  color: #6CF0DC;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

main { position: relative; z-index: 2; }
.panel {
  position: relative;
  min-height: 115vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 7rem clamp(1rem, 5vw, 5rem);
}
.panel--surface { min-height: 108vh; }
.panel--services { min-height: 135vh; }
.panel--work { min-height: 190vh; }
.panel--process { min-height: 135vh; }
.panel--contact { min-height: 130vh; align-items: end; padding-bottom: 3rem; }
.panel__inner {
  width: min(100%, var(--max));
  min-width: 0;
  margin-inline: auto;
}
.hero { padding-top: 4rem; }
.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--aqua-bright);
  font-size: clamp(.72rem, 1vw, .86rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-page main > section:not(#surface) .eyebrow,
.home-page .post-hero-water > section .eyebrow {
  font-size: clamp(.94rem, 1.15vw, 1.12rem);
}
.hero__title {
  max-width: 930px;
  margin: 0;
  font-size: clamp(4.2rem, 11vw, 10.5rem);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 620;
  text-wrap: balance;
}
.hero__title span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(239,255,253,.82);
  text-shadow: 0 0 36px rgba(113,241,231,.12);
}
.hero__copy {
  max-width: 610px;
  margin: 2.4rem 0 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: rgba(241,255,254,.82);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .9rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .site-nav a:focus-visible, .brand:focus-visible, input:focus-visible, textarea:focus-visible, .menu-toggle:focus-visible {
  outline: 3px solid var(--aqua-bright);
  outline-offset: 4px;
}
.button--primary {
  color: #052028;
  background: linear-gradient(135deg, #b9fff8, #5cddd7);
  box-shadow: 0 12px 35px rgba(63, 222, 211, .18);
}
.button--ghost { border-color: rgba(255,255,255,.28); background: rgba(4,29,42,.15); color: #fff; backdrop-filter: blur(10px); }
.scroll-cue {
  position: absolute;
  bottom: 3rem;
  left: clamp(1rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  gap: .8rem;
  color: rgba(236,255,254,.62);
  font-size: .8rem;
  letter-spacing: .06em;
}
.scroll-cue i { width: 46px; height: 1px; background: rgba(236,255,254,.35); position: relative; overflow: hidden; }
.scroll-cue i::after { content:""; position:absolute; inset:0; background:#fff; transform:translateX(-100%); animation:scrollCue 2.2s ease-in-out infinite; }

.split-layout, .process-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
}
.section-intro { position: sticky; top: 26vh; max-width: 520px; }
.section-intro h2,
.contact-layout h2 {
  margin: 0;
  font-size: clamp(2.8rem, 6.4vw, 6rem);
  line-height: .94;
  letter-spacing: -.06em;
  font-weight: 590;
}
.section-intro p:not(.eyebrow), .contact-layout__copy {
  margin: 1.6rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}
.service-list { display: grid; gap: 1rem; padding-top: 10vh; }
.service-card {
  position: relative;
  min-height: 265px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(216,253,251,.18);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(11,61,78,.58), rgba(4,26,40,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 25px 60px rgba(0,10,18,.15);
  backdrop-filter: blur(18px);
}
.service-card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(circle at 15% 0%, rgba(128,255,245,.14), transparent 36%);
  pointer-events:none;
}
.service-card__number { color: var(--aqua-bright); font-size: .75rem; letter-spacing: .12em; }
.service-card h3 { margin: 2.7rem 0 .8rem; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.035em; }
.service-card p { max-width: 580px; color: var(--muted); }
.service-card__meta { display: block; margin-top: 2rem; color: rgba(222,249,248,.56); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.work-layout { width: min(100%, 1380px); }
.section-intro--wide { position: relative; top: auto; max-width: 820px; margin-bottom: 5rem; }
.projects { display: grid; gap: 9rem; }
.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(280px, .68fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.project-card:nth-child(even) { grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); }
.project-card:nth-child(even) .project-card__visual { order: 2; }
.project-card__visual {
  position: relative;
  min-height: clamp(360px, 50vw, 680px);
  overflow: hidden;
  border: 1px solid rgba(215,255,251,.15);
  border-radius: 36px;
  box-shadow: 0 42px 90px rgba(0,8,16,.36), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.project-card__visual::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 35%, rgba(0,0,0,.1));
}
.project-card--one .project-card__visual { background: radial-gradient(circle at 80% 20%, #f5b796, transparent 38%), linear-gradient(135deg, #7b405e, #31254f 55%, #141d38); }
.project-card--two .project-card__visual { background: radial-gradient(circle at 50% 48%, rgba(116,255,239,.25), transparent 27%), linear-gradient(145deg, #123a49, #071921 70%); }
.project-card--three .project-card__visual { background: linear-gradient(145deg, #d7f6ed, #8bc9c2 55%, #315b64); }
.project-card__body span { color: var(--aqua-bright); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.project-card__body h3 { margin: .65rem 0 1rem; font-size: clamp(2.2rem, 4vw, 4.6rem); line-height: .98; letter-spacing: -.055em; }
.project-card__body p { color: var(--muted); font-size: 1.05rem; }
.project-card__body strong { display: inline-block; margin-top: 1.4rem; color: #fff; font-size: 1.25rem; }
.mock-browser { position:absolute; inset:10% 8%; padding:1.25rem; border-radius:22px; background:rgba(255,248,244,.92); box-shadow:0 35px 70px rgba(0,0,0,.28); transform:rotate(-4deg); }
.mock-browser > span { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#bba7ad; }
.mock-browser__hero { display:grid; place-items:center; height:75%; margin-top:1rem; border-radius:15px; background:linear-gradient(140deg,#f6d7ca,#b96878); color:#3c1730; font-size:clamp(3rem,8vw,8rem); font-weight:900; letter-spacing:-.08em; }
.data-orbit { position:absolute; left:50%; top:50%; width:52%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(126,255,243,.24); border-radius:50%; display:grid; place-items:center; }
.data-orbit::before,.data-orbit::after { content:""; position:absolute; inset:14%; border:1px solid rgba(126,255,243,.18); border-radius:50%; }
.data-orbit::after { inset:30%; }
.data-orbit i { position:absolute; width:16px; height:16px; border-radius:50%; background:#7efff2; box-shadow:0 0 26px #7efff2; }
.data-orbit i:nth-child(1){top:-8px;left:49%}.data-orbit i:nth-child(2){right:8%;bottom:12%}.data-orbit i:nth-child(3){left:5%;top:33%}.data-orbit b { font-size:clamp(4rem,8vw,8rem); letter-spacing:-.08em; }
.type-poster { position:absolute; inset:10%; display:grid; place-content:center; border:1px solid rgba(7,44,49,.2); color:#153d43; transform:rotate(3deg); }
.type-poster span { display:block; font-size:clamp(3.2rem,8vw,8.5rem); font-weight:900; line-height:.78; letter-spacing:-.1em; }
.type-poster span:last-child { color:transparent; -webkit-text-stroke:1px #153d43; transform:translateX(8%); }

.process-list { list-style:none; margin:8vh 0 0; padding:0; border-top:1px solid var(--line); }
.process-step { display:grid; grid-template-columns:70px 1fr; gap:1.5rem; padding:2rem 0; border-bottom:1px solid var(--line); }
.process-step > span { color:var(--aqua-bright); font-size:.76rem; letter-spacing:.1em; }
.process-step h3 { margin:0 0 .4rem; font-size:clamp(1.45rem,2.6vw,2.3rem); letter-spacing:-.035em; }
.process-step p { margin:0; color:var(--muted); }

.contact-layout { text-align:center; padding-top:14vh; }
.contact-layout h2 { max-width:1050px; margin-inline:auto; }
.contact-layout h2 span { color:var(--aqua-bright); }
.contact-layout__copy { max-width:720px; margin-inline:auto; }
.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  max-width:900px;
  margin:3rem auto 0;
  padding:clamp(1rem,3vw,2rem);
  text-align:left;
  border:1px solid rgba(218,255,252,.16);
  border-radius:30px;
  background:rgba(3,18,29,.58);
  box-shadow:0 40px 90px rgba(0,5,10,.4), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.field { display:grid; gap:.55rem; }
.field--full { grid-column:1/-1; }
.field label { color:rgba(239,255,253,.75); font-size:.82rem; }
.field input,.field textarea {
  width:100%;
  border:1px solid rgba(222,255,252,.16);
  border-radius:16px;
  padding:1rem;
  color:#fff;
  background:rgba(255,255,255,.055);
  resize:vertical;
}
.field input:hover,.field textarea:hover { border-color:rgba(222,255,252,.3); }
.contact-form .button { justify-self:start; margin-top:.5rem; border:0; }
.footer {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:1rem;
  align-items:center;
  margin-top:5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(233,255,253,.55);
  font-size:.78rem;
  text-align:left;
}
.footer a { color:rgba(242,255,254,.8); text-decoration:none; }
.footer span:last-child { text-align:right; }

.noscript { position:fixed; inset:auto 1rem 1rem; z-index:999; padding:1rem; border-radius:12px; background:#fff; color:#04131c; }

@keyframes octopusFloat {
  from { transform: translate3d(0, -5px, 0) rotate(-.45deg); }
  to { transform: translate3d(0, 7px, 0) rotate(.55deg); }
}
@keyframes scrollCue { 0%,15%{transform:translateX(-100%)} 55%,70%{transform:translateX(0)} 100%{transform:translateX(100%)} }
@keyframes menuSplash {
  0% {
    opacity: .9;
    transform: translate(-50%, -50%) rotate(var(--drop-rotate, 0deg)) scale(.9);
  }
  58% { opacity: .68; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y))) rotate(calc(var(--drop-rotate, 0deg) + 24deg)) scale(.18);
  }
}

@media (max-width: 900px) {
  .scroll-octopus { width: clamp(430px, 96vw, 820px); filter: blur(var(--octopus-blur, 10px)) brightness(.74) saturate(.84) drop-shadow(0 22px 42px rgba(0,10,22,.26)); }
  .depth-gauge__label { display:none; }
  .depth-gauge__track { height:110px; }
  .site-header { padding:1rem; }
  .brand__logo-stack { width:min(58vw, 240px); }
  .site-header.is-scrolled .brand__logo-stack { width:min(42vw, 170px); }
  .menu-toggle { width:63px; min-height:60px; }
  .menu-toggle__icon { width:46px; height:41px; }
  .site-nav a { font-size:clamp(1.9rem,8vw,3.4rem); }
  .split-layout,.process-layout { grid-template-columns:1fr; gap:3rem; }
  .section-intro { position:relative; top:auto; }
  .service-list { padding-top:0; }
  .project-card,.project-card:nth-child(even) { grid-template-columns:1fr; gap:1.8rem; }
  .project-card:nth-child(even) .project-card__visual { order:0; }
  .projects { gap:7rem; }
  .panel--work { min-height:auto; padding-block:10rem; }
  .footer { grid-template-columns:1fr; text-align:center; }
  .footer span:last-child { text-align:center; }
}

@media (max-width: 600px) {
  .scroll-octopus { width: 118vw; }
  .panel { min-height:110vh; padding:7rem 1rem; }
  .panel--services,.panel--process { min-height:auto; padding-block:9rem; }
  .panel--surface { min-height:100svh; }
  .panel--contact { min-height:120vh; padding-bottom:2rem; }
  .hero { padding-top:1rem; }
  .hero__title { font-size:clamp(3.85rem,20vw,6.5rem); }
  .hero__copy { font-size:1rem; }
  .scroll-cue { bottom:1.5rem; left:1rem; }
  .service-card { min-height:230px; border-radius:22px; }
  .project-card__visual { min-height:340px; border-radius:24px; }
  .contact-form { grid-template-columns:1fr; border-radius:22px; }
  .field--full { grid-column:auto; }
  .contact-form .button { width:100%; }
  .footer { margin-top:3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
  .ocean__gradient { transform:none!important; }
  #particle-canvas { display:none; }
  .scroll-octopus { display:none; }
  .splash-droplet { display:none!important; }
}


/* Expanded studio pages and homepage content */
body.inner-page { min-height: 100%; }
body.menu-open .menu-toggle__label { color: var(--depth-logo-blue); }

.panel--approach,
.panel--standards,
.panel--included,
.panel--trust,
.panel--support { min-height: 105vh; }
.panel--compact { min-height: auto; padding-block: clamp(7rem, 14vw, 12rem); }

.statement-block { max-width: 1050px; }
.statement-block h2 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .93;
  letter-spacing: -.065em;
  font-weight: 590;
}
.statement-block > p:not(.eyebrow) {
  max-width: 820px;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.approach-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  margin-top: 4rem;
  padding: clamp(1.2rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(4, 28, 42, .38);
  backdrop-filter: blur(16px);
}
.approach-compare article { min-height: 130px; }
.approach-compare small { color: var(--aqua-bright); letter-spacing: .12em; text-transform: uppercase; }
.approach-compare h3 { margin: .7rem 0 .45rem; font-size: clamp(1.35rem, 2.4vw, 2rem); }
.approach-compare p { margin: 0; color: var(--muted); }
.approach-compare__line { width: 1px; height: 110px; background: var(--line); }

.feature-grid,
.included-grid,
.support-grid,
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 4rem;
}
.feature,
.included-item,
.support-card,
.team-card {
  position: relative;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid rgba(216,253,251,.16);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(11,61,78,.46), rgba(4,26,40,.28));
  backdrop-filter: blur(16px);
}
.feature h3,
.support-card h3,
.team-card h2 { margin: 0 0 .7rem; font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.035em; }
.feature p,
.support-card p,
.team-card p { margin: 0; color: var(--muted); }
.feature strong { display:block; margin-bottom:.65rem; color:var(--aqua-bright); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; }

.included-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.included-item { min-height: 120px; display:flex; align-items:flex-end; }
.included-item::before { content:'✓'; position:absolute; top:1rem; right:1rem; color:var(--aqua-bright); font-family:"IBM Plex Mono", monospace; }
.included-note { max-width: 850px; margin-top: 2rem; color: var(--muted); }

.trust-panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid rgba(121,183,255,.26);
  border-radius: 36px;
  background: radial-gradient(circle at 12% 10%, rgba(121,183,255,.18), transparent 38%), rgba(3,20,32,.56);
  box-shadow: 0 40px 90px rgba(0,5,10,.22);
  backdrop-filter: blur(20px);
}
.trust-panel__badge {
  display:grid;
  place-items:center;
  width:min(100%, 320px);
  aspect-ratio:1;
  border:1px solid rgba(121,183,255,.38);
  border-radius:50%;
  color:var(--depth-logo-blue);
  text-align:center;
  font-family:"IBM Plex Mono", monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow: inset 0 0 50px rgba(121,183,255,.08), 0 0 70px rgba(121,183,255,.08);
}
.trust-panel__badge strong { display:block; max-width:180px; font-size:clamp(1.05rem,2vw,1.45rem); }
.trust-panel h2 { margin:0; font-size:clamp(2.5rem,5vw,5rem); line-height:.96; letter-spacing:-.055em; }
.trust-panel p { color:var(--muted); font-size:1.08rem; }

.support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.support-closing { margin-top:2rem; color:var(--aqua-bright); font-size:clamp(1.15rem,2vw,1.5rem); }

.page-hero { min-height: 82vh; align-items:end; padding-bottom: clamp(5rem, 11vw, 9rem); }
.page-hero__inner { width:min(100%, var(--max)); margin-inline:auto; }
.page-hero h1 { max-width:1050px; margin:0; font-size:clamp(4rem,10vw,9rem); line-height:.84; letter-spacing:-.075em; }
.page-hero h1 span { color:var(--depth-logo-blue); }
.page-hero__copy { max-width:760px; margin:2rem 0 0; color:var(--muted); font-size:clamp(1.05rem,2vw,1.35rem); }
.page-section { min-height:auto; padding-block: clamp(6rem, 12vw, 11rem); }
.page-section + .page-section { border-top: 1px solid rgba(255,255,255,.06); }
.page-section__head { max-width:850px; }
.page-section__head h2 { margin:0; font-size:clamp(2.7rem,6vw,5.8rem); line-height:.95; letter-spacing:-.06em; }
.page-section__head p { color:var(--muted); font-size:clamp(1rem,1.7vw,1.2rem); }
.page-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

.detail-list { display:grid; gap:1rem; margin-top:4rem; }
.detail-row {
  display:grid;
  grid-template-columns: 80px minmax(0,.65fr) minmax(0,1.35fr);
  gap:clamp(1rem,4vw,3rem);
  padding:2rem 0;
  border-top:1px solid var(--line);
}
.detail-row:last-child { border-bottom:1px solid var(--line); }
.detail-row > span { color:var(--aqua-bright); font-family:"IBM Plex Mono", monospace; font-size:.76rem; }
.detail-row h3 { margin:0; font-size:clamp(1.5rem,3vw,2.5rem); }
.detail-row p { margin:0; color:var(--muted); }
.detail-row ul { margin:.9rem 0 0; padding-left:1.2rem; color:var(--muted); }
.detail-row li + li { margin-top:.35rem; }

.team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.team-card { min-height: 390px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.team-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 75% 10%, rgba(121,183,255,.18), transparent 36%); pointer-events:none; }
.team-card__mark { position:absolute; top:1.4rem; left:1.4rem; display:grid; place-items:center; width:100px; aspect-ratio:1; border:1px solid rgba(121,183,255,.3); border-radius:50%; color:var(--depth-logo-blue); font-size:2.4rem; font-weight:600; }
.team-card__role { position:relative; display:block; margin-bottom:.7rem; color:var(--aqua-bright); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; }
.team-card h2,.team-card p { position:relative; }

.case-study-note { margin-top:2rem; color:rgba(225,245,247,.58); font-size:.86rem; }
.contact-card { max-width:900px; margin-top:3rem; }
.contact-card .contact-form { margin-inline:0; }

.contact-direct {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin-top: 3rem;
}

.contact-direct__card {
  position: relative;
  display: grid;
  gap: .35rem;
  min-height: 150px;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  overflow: hidden;
  border: 1px solid rgba(218, 255, 252, .17);
  border-radius: 26px;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(121, 183, 255, .15), transparent 42%),
    rgba(3, 18, 29, .62);
  box-shadow: 0 26px 64px rgba(0, 5, 10, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.contact-direct__card:hover,
.contact-direct__card:focus-visible {
  border-color: rgba(165, 255, 244, .42);
  background-color: rgba(8, 37, 50, .82);
  transform: translateY(-3px);
}

.contact-direct__card:focus-visible {
  outline: 3px solid rgba(165, 255, 244, .28);
  outline-offset: 3px;
}

.contact-direct__card span,
.contact-direct__card small {
  color: var(--muted);
}

.contact-direct__card span {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact-direct__card strong {
  align-self: end;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.contact-direct__card small {
  font-size: .75rem;
}

.contact-direct__card--whatsapp {
  background:
    radial-gradient(circle at 100% 0, rgba(120, 240, 168, .2), transparent 42%),
    rgba(3, 29, 31, .66);
}

.contact-form__success {
  margin: 0 0 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(120, 240, 168, .28);
  border-radius: 18px;
  color: #c9ffdf;
  background: rgba(23, 92, 65, .28);
}

.form-privacy-note {
  grid-column: 1 / -1;
  margin: -.1rem 0 0;
  color: rgba(225, 245, 247, .66);
  font-size: .78rem;
}

.form-privacy-note a {
  color: var(--aqua-bright);
  text-underline-offset: .2em;
}

.botcheck {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.site-footer-wide {
  --footer-floor-image: url('/assets/seafloor.webp');
  --footer-transition-depth: clamp(300px, 24vw, 360px);
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: visible;
  border-top: 0;
  background: transparent;
  color: rgba(225, 245, 247, .62);
  box-shadow: none;
}

.site-footer-wide::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(0px - var(--footer-transition-depth));
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--footer-floor-image);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .88;
  filter: saturate(.78) brightness(.78);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .03) 60px, rgba(0, 0, 0, .14) 130px, rgba(0, 0, 0, .38) 205px, rgba(0, 0, 0, .72) 270px, #000 var(--footer-transition-depth), #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .03) 60px, rgba(0, 0, 0, .14) 130px, rgba(0, 0, 0, .38) 205px, rgba(0, 0, 0, .72) 270px, #000 var(--footer-transition-depth), #000 100%);
  pointer-events: none;
}

.site-footer-wide::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(0px - var(--footer-transition-depth));
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(circle at 10% 12%, rgba(74, 215, 208, .08), transparent 34%),
    linear-gradient(180deg, rgba(2, 15, 24, .16), rgba(2, 13, 21, .58) 42%, rgba(2, 10, 17, .94) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .04) 55px, rgba(0, 0, 0, .16) 120px, rgba(0, 0, 0, .42) 190px, rgba(0, 0, 0, .76) 255px, #000 var(--footer-transition-depth), #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .04) 55px, rgba(0, 0, 0, .16) 120px, rgba(0, 0, 0, .42) 190px, rgba(0, 0, 0, .76) 255px, #000 var(--footer-transition-depth), #000 100%);
  pointer-events: none;
}

.site-footer-wide__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  padding: clamp(2.35rem, 4vw, 3.15rem) 0 clamp(1rem, 2vw, 1.35rem);
}

.site-footer-wide__top {
  display: grid;
  grid-template-columns: minmax(245px, .78fr) minmax(530px, 1.55fr);
  gap: clamp(2.8rem, 7vw, 7rem);
  align-items: start;
}

.site-footer-wide__brand {
  max-width: 360px;
}

.site-footer-wide__logo {
  display: inline-flex;
  width: min(174px, 58vw);
  margin-bottom: .8rem;
}

.site-footer-wide__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer-wide__statement {
  max-width: 34ch;
  margin: 0 0 .95rem;
  color: rgba(236, 252, 252, .7);
  font-size: clamp(.82rem, 1vw, .91rem);
  line-height: 1.55;
}

.site-footer-wide__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 0;
  padding-top: .72rem;
  border-top: 1px solid rgba(196, 246, 244, .09);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .67rem;
  letter-spacing: .015em;
}

.site-footer-wide__contact a + a::before {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 .72rem .14rem;
  border-radius: 50%;
  background: rgba(101, 228, 220, .58);
  content: "";
}

.site-footer-wide__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 3.2vw, 2.8rem);
}

.site-footer-wide__group {
  display: grid;
  align-content: start;
  gap: .44rem;
  padding-left: clamp(1rem, 2.2vw, 1.65rem);
  border-left: 1px solid rgba(196, 246, 244, .1);
}

.site-footer-wide__heading {
  margin: 0 0 .28rem;
  color: rgba(137, 239, 231, .68);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-footer-wide a {
  width: fit-content;
  color: rgba(242, 255, 254, .78);
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.site-footer-wide__group a {
  font-size: .8rem;
  line-height: 1.42;
}

.site-footer-wide a:hover,
.site-footer-wide a:focus-visible,
.site-footer-wide a[aria-current="page"] {
  color: var(--aqua-bright);
}

.site-footer-wide__group a:hover {
  transform: translateX(2px);
}

.site-footer-wide a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--aqua);
  outline-offset: 4px;
}

.site-footer-wide__phone {
  font-variant-numeric: tabular-nums;
}

.site-footer-wide__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem 2rem;
  margin-top: clamp(1.55rem, 3vw, 2.2rem);
  padding-top: .9rem;
  border-top: 1px solid rgba(196, 246, 244, .08);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  line-height: 1.6;
  letter-spacing: .03em;
}

.site-footer-wide__bottom p {
  margin: 0;
}

.site-footer-wide__identity {
  max-width: 80ch;
}

.site-footer-wide__bottom p:last-child {
  flex: 0 0 auto;
  color: rgba(165, 255, 244, .58);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .included-grid,.support-grid,.team-grid { grid-template-columns:1fr 1fr; }
  .trust-panel { grid-template-columns:1fr; }
  .trust-panel__badge { width:220px; }
  .detail-row { grid-template-columns:55px 1fr; }
  .detail-row p,.detail-row ul { grid-column:2; }
  .site-footer-wide__top { grid-template-columns: minmax(210px, .72fr) minmax(0, 1.45fr); gap: 2.2rem; }
  .site-footer-wide__brand { max-width: 320px; }
  .site-footer-wide__nav { gap: .7rem; }
  .site-footer-wide__group { padding-left: 1rem; }
}

@media (max-width: 760px) {
  .site-footer-wide__top { grid-template-columns: 1fr; gap: 1.8rem; }
  .site-footer-wide__brand { max-width: 520px; }
}

@media (max-width: 650px) {
  .approach-compare { grid-template-columns:1fr; }
  .approach-compare__line { width:100%; height:1px; }
  .feature-grid,.included-grid,.support-grid,.team-grid { grid-template-columns:1fr; }
  .included-item { min-height:105px; }
  .trust-panel { padding:1.5rem; border-radius:26px; }
  .team-card { min-height:340px; }
  .page-hero { min-height:78vh; }
  .detail-row { grid-template-columns:45px 1fr; gap:1rem; }
  .contact-direct { grid-template-columns: 1fr; }
  .contact-direct__card { min-height: 130px; }
  .site-footer-wide__inner { width: min(calc(100% - 1.5rem), var(--max)); padding-top: 1.8rem; }
  .site-footer-wide__nav { grid-template-columns: 1fr 1fr; gap: 1.5rem .9rem; }
  .site-footer-wide__group:last-child { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer-wide__group:last-child .site-footer-wide__heading { grid-column: 1 / -1; }
  .site-footer-wide__bottom { display: grid; gap: .38rem; }
  .site-footer-wide__bottom p:last-child { text-align: left; }
}

@media (max-width: 700px) {
  .site-footer-wide {
    --footer-floor-image: url('/assets/seafloor-mobile.webp');
    --footer-transition-depth: 300px;
  }
}

@media (max-width: 430px) {
  .site-footer-wide__logo { width: min(158px, 55vw); }
  .site-footer-wide__contact { display: grid; gap: .38rem; }
  .site-footer-wide__contact a + a::before { display: none; }
  .site-footer-wide__nav { gap: 1.35rem .7rem; }
  .site-footer-wide__group { padding-left: .8rem; }
  .site-footer-wide__group:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Website support page */
.site-nav a[aria-current="page"] { color: var(--depth-logo-blue); }
.support-hero { overflow: hidden; }
.support-hero .page-hero__inner { position: relative; }
.support-hero h1 { max-width: 1120px; }
.support-radar {
  position: absolute;
  right: clamp(-6rem, 1vw, 1rem);
  bottom: clamp(-10rem, -7vw, -4rem);
  width: clamp(260px, 36vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(121,183,255,.2);
  border-radius: 50%;
  opacity: .8;
  pointer-events: none;
}
.support-radar::before,
.support-radar::after,
.support-radar i {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(121,183,255,.22);
  border-radius: 50%;
}
.support-radar::after { inset: 30%; }
.support-radar i:nth-child(1) { inset: 44%; }
.support-radar i:nth-child(2) { inset: 0 50%; width: 1px; border: 0; border-radius: 0; background: linear-gradient(transparent, rgba(108,240,220,.36), transparent); }
.support-radar i:nth-child(3) { inset: 50% 0; height: 1px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(108,240,220,.36), transparent); }
.support-radar b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(108,240,220,.7), transparent);
  animation: radarSweep 8s linear infinite;
}
.support-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 1.5rem);
  margin-top: 4rem;
}
.support-path {
  position: relative;
  min-height: 470px;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(216,253,251,.16);
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(9,53,71,.56), rgba(3,22,35,.38));
  box-shadow: 0 30px 80px rgba(0,7,14,.16);
  backdrop-filter: blur(18px);
}
.support-path::after {
  content: '';
  position: absolute;
  right: -16%;
  bottom: -32%;
  width: 66%;
  aspect-ratio: 1;
  border: 1px solid rgba(121,183,255,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(121,183,255,.035), 0 0 0 70px rgba(121,183,255,.025);
}
.support-path--primary { border-color: rgba(108,240,220,.34); background: radial-gradient(circle at 90% 10%, rgba(108,240,220,.15), transparent 32%), linear-gradient(145deg, rgba(9,64,78,.62), rgba(3,24,37,.4)); }
.support-path__depth { display:inline-flex; padding:.45rem .7rem; border:1px solid rgba(121,183,255,.25); border-radius:999px; color:var(--depth-logo-blue); font-family:"IBM Plex Mono", monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.support-path__kicker { margin:2.8rem 0 .45rem; color:var(--aqua-bright); font-family:"IBM Plex Mono", monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.support-path h3 { position:relative; margin:0; font-size:clamp(2.4rem,5vw,4.8rem); line-height:.92; letter-spacing:-.06em; }
.support-path > p:not(.support-path__kicker) { position:relative; max-width:560px; color:var(--muted); }
.support-path ul { position:relative; margin:1.6rem 0 2rem; padding:0; list-style:none; color:rgba(232,250,250,.8); }
.support-path li { padding:.65rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
.support-path li::before { content:'•'; margin-right:.65rem; color:var(--aqua-bright); }
.text-link { position:relative; z-index:1; display:inline-flex; gap:.55rem; align-items:center; color:var(--aqua-bright); text-decoration:none; font-weight:600; }
.text-link span { transition:transform .25s ease; }
.text-link:hover span { transform:translateX(4px); }
.support-plans-section { position:relative; }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:4rem; align-items:stretch; }
.plan-card { position:relative; min-height:310px; padding:clamp(1.4rem,3vw,2.3rem); border:1px solid rgba(216,253,251,.16); border-radius:28px; background:rgba(3,24,37,.42); backdrop-filter:blur(16px); }
.plan-card--featured { transform:translateY(-1rem); border-color:rgba(108,240,220,.42); background:radial-gradient(circle at 100% 0, rgba(108,240,220,.14), transparent 35%), rgba(4,35,49,.56); box-shadow:0 26px 70px rgba(0,9,16,.22); }
.plan-card__tag { position:absolute; top:1rem; right:1rem; color:var(--aqua-bright); font-family:"IBM Plex Mono", monospace; font-size:.65rem; letter-spacing:.09em; text-transform:uppercase; }
.plan-card__name { margin:0 0 2.6rem; color:rgba(238,255,254,.7); font-family:"IBM Plex Mono", monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.plan-card__price { display:flex; align-items:flex-end; gap:.45rem; margin:0 0 1.5rem; }
.plan-card__price strong { font-size:clamp(3rem,6vw,5.4rem); line-height:.78; letter-spacing:-.07em; }
.plan-card__price span { color:var(--muted); }
.plan-card > p:last-child { color:var(--muted); }
.plan-note { max-width:900px; margin:2rem 0 0; color:rgba(225,245,247,.62); font-size:.86rem; }
.ownership-orbit { position:relative; display:grid; place-items:center; width:min(100%,320px); aspect-ratio:1; border:1px solid rgba(121,183,255,.32); border-radius:50%; color:var(--depth-logo-blue); font-family:"IBM Plex Mono", monospace; letter-spacing:.12em; text-transform:uppercase; box-shadow:inset 0 0 55px rgba(121,183,255,.07); }
.ownership-orbit::before,.ownership-orbit::after,.ownership-orbit i { content:''; position:absolute; border:1px solid rgba(108,240,220,.22); border-radius:50%; }
.ownership-orbit::before { inset:16%; }
.ownership-orbit::after { inset:31%; }
.ownership-orbit i:nth-of-type(1) { width:11px; height:11px; left:14%; top:50%; background:var(--aqua); box-shadow:0 0 14px rgba(108,240,220,.8); }
.ownership-orbit i:nth-of-type(2) { width:7px; height:7px; right:24%; top:19%; background:var(--depth-logo-blue); box-shadow:0 0 12px rgba(121,183,255,.75); }
@keyframes radarSweep { to { transform:rotate(360deg); } }
@media (max-width: 900px) {
  .support-radar { opacity:.45; right:-8rem; }
  .support-paths { grid-template-columns:1fr; }
  .support-path { min-height:auto; }
  .plan-grid { grid-template-columns:1fr; }
  .plan-card--featured { transform:none; }
  .ownership-orbit { width:220px; }
}
@media (max-width: 650px) {
  .support-radar { width:260px; right:-9rem; bottom:-4rem; }
  .support-path { border-radius:25px; }
  .support-path h3 { font-size:3rem; }
  .plan-card { min-height:250px; }
}
@media (prefers-reduced-motion: reduce) { .support-radar b { animation:none; } }

/* Editorial navigation and flagship work update */
body.menu-open .depth-gauge { opacity: 0; }
.site-nav {
  --nav-accent: var(--depth-logo-blue);
  display: block;
  padding: 0;
  /* was overflow:hidden — in landscape the 7 rows are taller than the viewport,
     which silently hid Pricing, Team and Start a project from touch users. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at 78% 42%, rgba(72,145,194,.18), transparent 25%),
    radial-gradient(circle at 72% 48%, rgba(108,240,220,.08), transparent 42%),
    linear-gradient(135deg, #020b12, #031622 55%, #020c16);
  backdrop-filter: blur(26px);
  transition: opacity .42s ease, visibility .42s ease;
}
.site-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 55%, #000);
}
.site-nav__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(2rem, 8vw, 9rem);
  width: min(calc(100% - clamp(2rem, 8vw, 9rem)), 1480px);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(7.8rem, 12vh, 10rem) 0 clamp(5.5rem, 8vh, 7rem);
  align-items: center;
}
.site-nav__primary { display: grid; align-content: center; }
.site-nav__eyebrow {
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  color: rgba(226,250,250,.46);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.site-nav a.site-nav__link {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 52px;
  gap: clamp(.5rem, 2vw, 1.6rem);
  align-items: baseline;
  padding: clamp(.35rem, .9vh, .65rem) 0;
  border-top: 1px solid rgba(230,255,253,.1);
  color: rgba(239,252,252,.72);
  text-align: left;
  transition: color .35s ease;
}
.site-nav a.site-nav__link:last-of-type { border-bottom: 1px solid rgba(230,255,253,.1); }

.site-nav__index,
.site-nav__depth {
  color: rgba(182,225,229,.42);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(.58rem, .8vw, .72rem);
  letter-spacing: .1em;
}
.site-nav__depth { text-align: right; }
.site-nav__label {
  font-size: clamp(2.45rem, 6.1vw, 6.3rem);
  font-weight: 560;
  line-height: .82;
  letter-spacing: -.065em;
}
.site-nav a.site-nav__link:hover,
.site-nav a.site-nav__link:focus-visible,
.site-nav a.site-nav__link[aria-current="page"] { color: #fff; transform: translateX(clamp(4px, .65vw, 12px)); }
.site-nav a.site-nav__link:hover .site-nav__depth,
.site-nav a.site-nav__link:focus-visible .site-nav__depth { color: var(--aqua-bright); }
.site-nav a.site-nav__link--cta { color: var(--aqua-bright); }
.site-nav__aside {
  position: relative;
  z-index: 3;
  align-self: end;
  max-width: 380px;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(230,255,253,.18);
  color: rgba(232,250,250,.68);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease .32s, transform .7s cubic-bezier(.2,.75,.25,1) .32s;
}
.site-nav.is-open .site-nav__aside { opacity: 1; transform: none; }
.site-nav__aside-kicker { color: var(--aqua-bright); font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.site-nav__aside > p:not(.site-nav__aside-kicker) { font-size: clamp(1rem, 1.5vw, 1.3rem); }
.site-nav__aside-meta { display: grid; gap: .6rem; margin-top: 2rem; font-size: .8rem; }
.site-nav__aside-meta a { color: #fff; text-decoration: none; }
.site-nav__footer {
  position: absolute;
  z-index: 3;
  inset: auto clamp(1rem, 4vw, 4.5rem) 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(228,249,249,.34);
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-nav__field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.site-nav__ring {
  position: absolute;
  right: clamp(-220px, -10vw, -80px);
  top: 50%;
  width: min(62vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(121,183,255,.14);
  border-radius: 50%;
  transform: translateY(-50%) scale(.76);
  opacity: 0;
  transition: transform 1.15s cubic-bezier(.16,.75,.24,1), opacity .7s ease;
}
.site-nav.is-open .site-nav__ring { transform: translateY(-50%) scale(1); opacity: 1; }
.site-nav__ring--two { inset: 50% clamp(-110px, -2vw, 10px) auto auto; width: min(43vw, 540px); transition-delay: .08s; }
.site-nav__ring--three { inset: 50% clamp(15px, 6vw, 120px) auto auto; width: min(24vw, 310px); transition-delay: .16s; }
.site-nav__beam {
  position: absolute;
  right: 0;
  top: 50%;
  width: min(58vw, 720px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108,240,220,.52), transparent);
  transform-origin: right center;
  animation: navSweep 12s linear infinite;
}
.site-nav__coordinate {
  position: absolute;
  right: clamp(1rem, 4vw, 4.5rem);
  top: 50%;
  color: rgba(220,248,249,.3);
  font-family: "IBM Plex Mono", monospace;
  font-size: .65rem;
  letter-spacing: .13em;
  transform: rotate(90deg) translateX(50%);
  transform-origin: right center;
}
.site-nav__coordinate b { color: var(--aqua-bright); font-weight: 500; }
@keyframes navSweep { to { transform: rotate(360deg); } }

/* Editorial homepage sections */
.panel--featured-work { min-height: auto; padding-block: clamp(9rem, 16vw, 15rem); }
.featured-work { width: min(100%, 1420px); }
.featured-work__header { max-width: 1040px; margin-bottom: clamp(4rem, 9vw, 8rem); }
.featured-work__header h2,
.specifications__intro h2,
.studio-preview__statement h2 {
  margin: 0;
  font-size: clamp(3.5rem, 9vw, 9rem);
  line-height: .84;
  letter-spacing: -.075em;
  font-weight: 580;
}
.featured-work__header h2 span,
.specifications__intro h2 span,
.studio-preview__statement h2 span { color: transparent; -webkit-text-stroke: 1px rgba(229,255,252,.72); }
.featured-work__header > p:not(.eyebrow) { max-width: 690px; margin: 2rem 0 0 auto; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.25rem); }
.featured-work__next > span { color: var(--aqua-bright); font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.featured-work__next p { margin: 0; color: var(--muted); }

/* Stylised live-project preview */
.case-visual {
  position: relative;
  min-height: clamp(520px, 62vw, 820px);
  overflow: hidden;
  border: 1px solid rgba(215,255,251,.16);
  border-radius: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(circle at 75% 10%, rgba(170,229,220,.35), transparent 28%),
    linear-gradient(145deg, #244c52, #0b2935 52%, #041620);
  box-shadow: 0 52px 110px rgba(0,7,13,.42), inset 0 1px 0 rgba(255,255,255,.08);
}
.case-visual::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 32%, rgba(0,0,0,.18)); pointer-events:none; }
.case-visual__grid { position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size:56px 56px; mask-image:linear-gradient(135deg,#000,transparent 72%); }
.case-browser { position:absolute; inset:8% 10% 12% 6%; overflow:hidden; border-radius:20px; background:#eef0e7; color:#15252b; box-shadow:0 45px 90px rgba(0,0,0,.38); transform:rotate(-2.2deg); }
.case-browser__bar { height:34px; display:flex; align-items:center; gap:5px; padding:0 12px; background:#e1e3da; border-bottom:1px solid rgba(24,39,44,.12); }
.case-browser__bar span { width:7px; height:7px; border-radius:50%; background:#a9aaa4; }
.case-browser__bar small { margin-left:auto; color:#777f7c; font-size:.52rem; }
.case-visual__depth { position:absolute; left:3%; bottom:3%; display:grid; justify-items:center; gap:.45rem; color:rgba(226,252,252,.56); font-family:"IBM Plex Mono", monospace; font-size:.62rem; }
.case-visual__depth i { width:1px; height:74px; background:linear-gradient(var(--aqua),transparent); }
.case-visual__depth b { color:var(--aqua-bright); font-size:.75rem; }

.panel--specifications { min-height: auto; padding-block: clamp(8rem, 15vw, 14rem); }
.specifications { width:min(100%,1380px); }
.specifications__intro { max-width:1100px; }
.specifications__intro > p:not(.eyebrow) { max-width:660px; margin:2rem 0 0 auto; color:var(--muted); }
.specification-panel { margin-top:clamp(4rem,8vw,7rem); border-top:1px solid rgba(232,255,253,.22); }
.specification-panel > div { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:1.4rem; align-items:center; padding:clamp(1.1rem,2.2vw,1.8rem) 0; border-bottom:1px solid rgba(232,255,253,.13); }
.specification-panel span { color:rgba(218,246,248,.36); font-family:"IBM Plex Mono",monospace; font-size:.67rem; }
.specification-panel strong { font-size:clamp(1.1rem,2vw,1.65rem); font-weight:520; }
.specification-panel b { color:var(--aqua-bright); font-family:"IBM Plex Mono",monospace; font-size:clamp(.75rem,1.2vw,.95rem); font-weight:500; text-align:right; text-transform:uppercase; letter-spacing:.07em; }
.specifications__note { max-width:880px; margin:2rem 0 0 auto; color:rgba(221,247,248,.52); font-size:.82rem; }

.panel--studio-preview { min-height:auto; padding-block:clamp(8rem,14vw,13rem); }
.studio-preview { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(3rem,8vw,9rem); align-items:center; }
.studio-preview__statement > p:not(.eyebrow) { max-width:560px; color:var(--muted); }
.studio-preview__people { border-top:1px solid var(--line); }
.studio-person { display:grid; grid-template-columns:62px 1fr; gap:1rem; align-items:end; min-height:150px; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.studio-person > span { align-self:start; color:var(--aqua-bright); font-family:"IBM Plex Mono",monospace; font-size:.66rem; }
.studio-person small { color:rgba(221,248,249,.5); font-family:"IBM Plex Mono",monospace; font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; }
.studio-person h3 { margin:.35rem 0 0; font-size:clamp(2.4rem,5vw,5.7rem); line-height:.8; letter-spacing:-.065em; }

/* Work and case study pages */
.work-hero { min-height:94vh; }
.work-hero h1 { max-width:1250px; }
.page-section--case { padding-top:4rem; }
.work-growth { max-width:980px; }
.work-growth h2 { margin:0; font-size:clamp(3rem,7vw,7rem); line-height:.9; letter-spacing:-.07em; }
.work-growth > p:not(.eyebrow) { max-width:680px; color:var(--muted); }
.work-growth__line { display:grid; grid-template-columns:64px 1fr auto; gap:1rem; padding:1.4rem 0; border-top:1px solid var(--line); }
.work-growth__line:nth-of-type(2) { border-bottom:1px solid var(--line); }
.work-growth__line span,.work-growth__line b { color:rgba(218,246,248,.45); font-family:"IBM Plex Mono",monospace; font-size:.68rem; }
.work-growth__line strong { font-size:clamp(1.25rem,2.2vw,1.75rem); }
.work-growth__line--future { opacity:.5; }
.case-hero { min-height:98vh; padding-top:10rem; }
.case-hero__inner { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:clamp(3rem,8vw,8rem); align-items:end; }
.case-hero h1 { max-width:1000px; margin:0; font-size:clamp(4.1rem,10vw,9.6rem); line-height:.83; letter-spacing:-.078em; }
.case-hero h1 span { color:transparent; -webkit-text-stroke:1px rgba(236,255,253,.72); }
.case-hero__copy { max-width:720px; color:var(--muted); font-size:clamp(1rem,1.7vw,1.3rem); }
.case-hero__meta { display:grid; grid-template-columns:90px 1fr; gap:.7rem 1rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.case-hero__meta span { color:rgba(220,247,248,.42); font-family:"IBM Plex Mono",monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.case-hero__meta strong { font-weight:520; }
.page-section--case-visual { padding-top:2rem; }
.case-study-page .page-section--case-visual .panel__inner { width:min(100%,1450px); }
.case-chapters { display:grid; gap:0; }
.case-chapter { display:grid; grid-template-columns:180px minmax(280px,.7fr) minmax(0,1fr); gap:clamp(1.5rem,5vw,5rem); padding:clamp(3rem,7vw,6rem) 0; border-top:1px solid var(--line); align-items:start; }
.case-chapter:last-child { border-bottom:1px solid var(--line); }
.case-chapter > span { color:var(--aqua-bright); font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.case-chapter h2 { margin:0; font-size:clamp(2.5rem,5vw,5.3rem); line-height:.92; letter-spacing:-.06em; }
.case-chapter p { margin:0; color:var(--muted); font-size:clamp(1rem,1.5vw,1.2rem); }
.case-delivery { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(3rem,8vw,9rem); }
.case-delivery__intro h2 { margin:0; font-size:clamp(3rem,6.5vw,6.5rem); line-height:.9; letter-spacing:-.07em; }
.case-delivery__list { border-top:1px solid var(--line); }
.case-delivery__list > div { display:grid; grid-template-columns:60px 1fr; gap:1rem; padding:1.35rem 0; border-bottom:1px solid var(--line); }
.case-delivery__list span { color:var(--aqua-bright); font-family:"IBM Plex Mono",monospace; font-size:.67rem; }
.case-delivery__list strong { font-size:clamp(1.15rem,2vw,1.65rem); font-weight:520; }

@media (max-width: 1000px) {
  .site-nav__inner { grid-template-columns:1fr; align-items:center; }
  .site-nav__aside { display:none; }
  .site-nav__ring { right:-280px; width:720px; opacity:.5; }
  .studio-preview { grid-template-columns:1fr; }
  .case-hero__inner,.case-delivery { grid-template-columns:1fr; }
  .case-chapter { grid-template-columns:120px 1fr; }
  .case-chapter p { grid-column:2; }
}
@media (max-width: 720px) {
  .site-nav__inner { width:calc(100% - 2rem); padding-top:7rem; padding-bottom:4.5rem; }
  .site-nav__eyebrow { margin-bottom:.7rem; }
  .site-nav a.site-nav__link { grid-template-columns:34px minmax(0,1fr) 42px; padding:.55rem 0; }
  .site-nav__label { font-size:clamp(2rem,11vw,3.6rem); }
  .site-nav__footer { display:none; }
  .site-nav__coordinate { display:none; }
  .site-nav__ring { right:-330px; }
  .featured-work__header h2,.specifications__intro h2,.studio-preview__statement h2 { font-size:clamp(3rem,14vw,5.2rem); }
  .featured-work__header > p:not(.eyebrow),.specifications__intro > p:not(.eyebrow) { margin-left:0; }
  .case-visual { min-height:520px; border-radius:26px; }
  .case-browser { inset:8% 5% 18% 5%; transform:rotate(-1deg); }
  .featured-work__next { grid-template-columns:1fr; gap:.8rem; }
  .specification-panel > div { grid-template-columns:38px minmax(0,1fr); }
  .specification-panel b { grid-column:2; text-align:left; }
  .studio-person { min-height:120px; }
  .case-hero h1 { font-size:clamp(3.5rem,14.5vw,6rem); }
  .case-hero__meta { grid-template-columns:75px 1fr; }
  .case-chapter { grid-template-columns:1fr; gap:1rem; }
  .case-chapter p { grid-column:auto; }
}
@media (prefers-reduced-motion: reduce) { .site-nav__beam { animation:none; } }


/* Services page — organised editorial layout */
.services-page .services-hero {
  min-height: 76vh;
}
.services-overview {
  padding-top: clamp(5.5rem, 10vw, 9rem);
}
.services-overview__head {
  max-width: 920px;
}
.services-overview__head > p:last-child {
  max-width: 760px;
  margin-top: 1.35rem;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.service-detail-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 560px;
  flex-direction: column;
  padding: clamp(1.5rem, 3.2vw, 2.7rem);
  overflow: hidden;
  border: 1px solid rgba(216, 253, 251, .16);
  border-radius: clamp(24px, 3vw, 34px);
  background:
    radial-gradient(circle at 100% 0, rgba(121, 183, 255, .14), transparent 34%),
    linear-gradient(145deg, rgba(8, 52, 68, .56), rgba(3, 22, 35, .38));
  box-shadow: 0 30px 80px rgba(0, 7, 14, .14);
  backdrop-filter: blur(18px);
}
.service-detail-card::after {
  content: '';
  position: absolute;
  right: -20%;
  bottom: -34%;
  width: 65%;
  aspect-ratio: 1;
  border: 1px solid rgba(108, 240, 220, .11);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(108, 240, 220, .025), 0 0 0 68px rgba(108, 240, 220, .018);
  pointer-events: none;
}
.service-detail-card__topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.service-detail-card__number {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 auto;
  border: 1px solid rgba(108, 240, 220, .38);
  border-radius: 50%;
  color: var(--aqua-bright);
}
.service-detail-card__type {
  color: rgba(225, 245, 247, .56);
  text-align: right;
}
.service-detail-card h3 {
  position: relative;
  z-index: 1;
  max-width: 12ch;
  margin: clamp(2rem, 4vw, 3.2rem) 0 1rem;
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  line-height: .92;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
}
.service-detail-card__summary {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
}
.service-detail-card__scope {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: clamp(2rem, 4vw, 3.2rem);
}
.service-detail-card__scope > p {
  margin: 0 0 .65rem;
  color: var(--aqua-bright);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.service-detail-card__scope ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-detail-card__scope li {
  position: relative;
  padding: .68rem 0 .68rem 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .075);
  color: rgba(235, 251, 251, .82);
  line-height: 1.42;
}
.service-detail-card__scope li::before {
  content: '';
  position: absolute;
  left: .05rem;
  top: 1.12rem;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 10px rgba(101, 228, 220, .45);
}
.service-detail-card__note {
  position: relative;
  z-index: 1;
  margin: .9rem 0 0;
  color: rgba(225, 245, 247, .5);
  font-size: .78rem;
  line-height: 1.5;
}
.services-performance__inner {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  gap: clamp(2.5rem, 8vw, 8rem);
  align-items: center;
}
.services-performance__label {
  display: grid;
  place-items: center;
  width: min(100%, 310px);
  aspect-ratio: 1;
  border: 1px solid rgba(121, 183, 255, .32);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121, 183, 255, .1), transparent 64%);
  box-shadow: inset 0 0 55px rgba(121, 183, 255, .06), 0 0 70px rgba(0, 10, 20, .16);
  text-align: center;
}
.services-performance__label span {
  display: block;
  color: var(--depth-logo-blue);
  font-size: clamp(4.5rem, 9vw, 7.8rem);
  font-weight: 650;
  line-height: .8;
  letter-spacing: -.08em;
}
.services-performance__label small {
  display: block;
  max-width: 120px;
  margin-top: .8rem;
  color: var(--aqua-bright);
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .09em;
  line-height: 1.45;
  text-transform: uppercase;
}
.services-performance .statement-block {
  max-width: 860px;
}
.services-performance .statement-block > p:last-child {
  max-width: 760px;
}
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-detail-card {
    min-height: auto;
  }
  .service-detail-card__scope {
    margin-top: 2.2rem;
    padding-top: 0;
  }
  .services-performance__inner {
    grid-template-columns: 1fr;
  }
  .services-performance__label {
    width: 220px;
  }
}
@media (max-width: 650px) {
  .services-page .services-hero {
    min-height: 72vh;
  }
  .services-page .page-hero h1 {
    font-size: clamp(3.75rem, 17vw, 5.5rem);
  }
  .services-overview {
    padding-top: 5rem;
  }
  .services-grid {
    margin-top: 2.5rem;
  }
  .service-detail-card {
    padding: 1.35rem;
    border-radius: 24px;
  }
  .service-detail-card__topline {
    align-items: flex-start;
  }
  .service-detail-card__type {
    max-width: 17ch;
  }
  .service-detail-card h3 {
    margin-top: 2.3rem;
    font-size: clamp(2.65rem, 13vw, 4rem);
  }
  .service-detail-card__summary {
    font-size: 1rem;
  }
  .service-detail-card__scope li {
    padding-block: .75rem;
  }
  .services-performance__label {
    width: 190px;
  }
}

/* Compact performance standards section */
.services-performance { overflow: hidden; }
.services-performance__inner {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.services-performance__score {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 230px);
  aspect-ratio: 1;
  border: 1px solid rgba(101,228,220,.32);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(101,228,220,.14), rgba(8,29,48,.18) 54%, transparent 73%);
  box-shadow: inset 0 0 48px rgba(101,228,220,.07), 0 0 56px rgba(101,228,220,.07);
  text-align: center;
  isolation: isolate;
}
.services-performance__halo {
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(101,228,220,.22), transparent 68%);
  filter: blur(14px);
  z-index: -1;
}
.services-performance__number {
  display: block;
  color: var(--aqua-bright);
  font-size: clamp(4.5rem, 8vw, 6.6rem);
  font-weight: 680;
  line-height: .82;
  letter-spacing: -.09em;
  text-shadow: 0 0 24px rgba(101,228,220,.32);
}
.services-performance__score small {
  display: block;
  max-width: 126px;
  margin-top: .72rem;
  color: rgba(235,251,251,.76);
  font-family: "IBM Plex Mono", monospace;
  font-size: .6rem;
  letter-spacing: .11em;
  line-height: 1.35;
  text-transform: uppercase;
}
.services-performance__content { min-width: 0; }
.services-performance .statement-block h2 { max-width: 18ch; }
.services-performance .statement-block > p:last-child { max-width: 66ch; }
.performance-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1.45rem;
}
.performance-tool {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: .65rem;
  align-items: center;
  min-height: 66px;
  padding: .72rem .8rem;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 14px;
  background: rgba(8,30,48,.34);
  backdrop-filter: blur(10px);
}
.performance-tool__logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: var(--aqua-bright);
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: -.04em;
}
.performance-tool__logo svg { width: 21px; height: 21px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; }
.performance-tool__logo--pagespeed svg path:first-child { opacity:.45; }
.performance-tool__logo--pagespeed svg path:last-child { opacity:1; }
.performance-tool h3 { margin:0 0 .12rem; color:#f1fbfc; font-size:.82rem; font-weight:600; line-height:1.2; }
.performance-tool p { margin:0; color:rgba(225,245,247,.54); font-size:.66rem; line-height:1.3; }
.services-performance__disclaimer { margin:.75rem 0 0; color:rgba(225,245,247,.4); font-size:.68rem; line-height:1.45; }

/* Native staggered reveal: visible by default, animated only when JS opts in. */
.performance-animate [data-performance-score] {
  opacity:.14;
  transform:translate3d(0,34px,0) scale(.76);
  filter:blur(12px) brightness(.72);
  transition:opacity 1.05s ease, transform 1.2s cubic-bezier(.16,1,.3,1), filter 1.1s ease;
}
.performance-animate [data-performance-tool] {
  opacity:0;
  transform:translate3d(0,20px,0) scale(.97);
  filter:blur(6px);
  transition:opacity .62s ease, transform .72s cubic-bezier(.16,1,.3,1), filter .62s ease;
  transition-delay:var(--tool-delay, 0ms);
}
.performance-animate.performance-visible [data-performance-score],
.performance-animate.performance-visible [data-performance-tool] {
  opacity:1;
  transform:none;
  filter:none;
}
.performance-animate.performance-visible [data-performance-score] {
  box-shadow:inset 0 0 55px rgba(101,228,220,.1), 0 0 74px rgba(101,228,220,.14);
}
/* --------------------------------------------------------------------------
   BREAKPOINT SCALE
   Fifteen distinct widths are in use. They are not arbitrary — each was added
   for a specific component — but they are worth knowing before adding more:

     1050 / 1000   desktop chrome: header quick links, nav aside, wide grids
      900 / 800    two-column layouts collapse
      760 / 720    section padding and heading scale step down
      700          panels collapse to content height (see .page-hero note)
      650 / 620    footer regroups, hero min-height drops
      600 / 560    card grids go single column
      430 / 420    smallest phones: work register wraps, tighter type

   Plus three non-width queries: (pointer: coarse) for touch targets,
   (max-height: 600px) and (orientation: landscape) for the nav, and
   (prefers-reduced-motion: reduce), which appears twelve times because motion
   is disabled per component rather than in one blanket rule.

   Consolidating these values would change behaviour at specific widths and
   needs per-component visual checking, so they are documented rather than
   merged.
   -------------------------------------------------------------------------- */

@media (max-width: 1050px){
  .performance-tools{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 800px){
  .services-performance__inner{grid-template-columns:1fr;gap:2rem;}
  .services-performance__score{width:190px;}
}
@media (max-width: 560px){
  .services-performance__inner{padding-block:3.5rem;}
  .services-performance__score{width:165px;}
  .services-performance__number{font-size:4rem;}
  .performance-tools{grid-template-columns:1fr;gap:.5rem;margin-top:1.15rem;}
  .performance-tool{min-height:58px;padding:.62rem .7rem;}
  .performance-tool p{font-size:.64rem;}
}
@media (prefers-reduced-motion: reduce){
  .performance-animate [data-performance-score],
  .performance-animate [data-performance-tool]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;}
}



/* ============================================================
   Depth interactions
   1 Droplet menu · 2 Depth scrubber · 3 Landmarks
   4 Marine snow (JS) · 5 Performance radar
   ============================================================ */

/* --- 1. Droplet menu: surface tension ---------------------- */
@keyframes dropletWobble {
  0%   { scale: 1 1; }
  17%  { scale: 1.034 .969; }
  34%  { scale: .973 1.031; }
  53%  { scale: 1.026 .977; }
  71%  { scale: .982 1.020; }
  86%  { scale: 1.011 .991; }
  100% { scale: 1 1; }
}
@keyframes dropletWobbleAlert {
  0%   { scale: 1 1; }
  15%  { scale: 1.064 .943; }
  33%  { scale: .950 1.057; }
  52%  { scale: 1.047 .959; }
  72%  { scale: .968 1.036; }
  100% { scale: 1 1; }
}
@keyframes dropletSquash {
  0%   { scale: 1 1; }
  20%  { scale: 1.12 .88; }
  46%  { scale: .93 1.09; }
  68%  { scale: 1.05 .96; }
  85%  { scale: .98 1.02; }
  100% { scale: 1 1; }
}
.menu-toggle__drop {
  color: color-mix(in oklab, var(--menu-drop-color), var(--deep) calc(var(--scroll, 0) * 58%));
  filter:
    drop-shadow(0 8px 14px rgba(1, 23, 32, .16))
    drop-shadow(0 0 calc(1px + var(--scroll, 0) * 10px) rgba(165, 255, 244, calc(var(--scroll, 0) * .66)));
}

/* Three ribbons cut like the logo's waves — thick through the body, whipping
   to a fine point. They hold still: the droplet splash carries the press. */

@media (prefers-reduced-motion: reduce) {
  .menu-wave { animation: none; }
  .menu-toggle.is-pressed .menu-toggle__waves { animation: none; }
}

/* Menu flood: the overlay fills from the top, then drains upward. */
.site-nav {
  clip-path: inset(0 0 100% 0);
  transition: opacity .42s ease, visibility .42s ease, clip-path .62s cubic-bezier(.2,.65,.3,1);
}
.site-nav.is-open { clip-path: inset(0 0 0 0); }
.site-nav__field::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(165,255,244,.8), rgba(121,183,255,.5), transparent);
  filter: blur(1px);
  opacity: 0;
  transform: translateY(0);
  transition: transform .62s cubic-bezier(.2,.65,.3,1), opacity .34s ease;
}
.site-nav.is-open .site-nav__field::before { opacity: 1; transform: translateY(100vh); }

/* --- 2. Depth gauge: draggable scrubber -------------------- */
.depth-gauge__scrub {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  padding: 12px 0;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.depth-gauge__scrub:focus { outline: none; }
.depth-gauge__scrub:focus-visible { outline: 3px solid var(--aqua-bright); outline-offset: 4px; border-radius: 12px; }
.depth-gauge.is-dragging .depth-gauge__scrub { cursor: grabbing; }
.depth-gauge__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--depth-marker-y, 0%);
  border-radius: 999px;
  background: linear-gradient(rgba(165,255,244,.2), #6CF0DC);
}
.depth-gauge__ticks { position: absolute; inset: 0; }
.depth-gauge__tick {
  position: absolute;
  left: 50%;
  top: var(--tick-y, 0%);
  width: 9px;
  height: 1px;
  margin-left: -4.5px;
  background: rgba(210, 240, 248, .5);
  transition: width .25s cubic-bezier(.2,.65,.3,1), background .25s ease;
}
.depth-gauge__tick.is-current { width: 16px; margin-left: -8px; background: var(--aqua-bright); }
.depth-gauge__tick-label {
  position: absolute;
  right: 15px;
  top: 50%;
  color: rgba(235, 251, 251, .82);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .58rem;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 40, 60, .6);
  white-space: nowrap;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.65,.3,1);
}
.depth-gauge:hover .depth-gauge__tick-label,
.depth-gauge.is-dragging .depth-gauge__tick-label,
.depth-gauge.is-focused .depth-gauge__tick-label { opacity: 1; transform: translate(0, -50%); }
.depth-gauge__marker { transition: width .22s ease, height .22s ease; }
.depth-gauge.is-dragging .depth-gauge__marker { width: 13px; height: 13px; box-shadow: 0 0 18px #6CF0DC; }
.depth-gauge.is-dragging .depth-gauge__readout,
.depth-gauge.is-focused .depth-gauge__readout { color: var(--aqua-bright); }
body.menu-open .depth-gauge { pointer-events: none; }

/* --- 3. Landmarks: one silhouette per depth stage ---------- */
.landmark {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform, opacity;
  contain: layout paint style;
}
.landmark svg { display: block; width: 100%; height: auto; fill: currentColor; }
.landmark--midwater {
  width: clamp(300px, 42vw, 700px);
  color: rgba(5, 30, 45, .96);
  opacity: var(--midwater-opacity, 0);
  filter: blur(var(--midwater-blur, 6px));
  transform:
    translate3d(var(--midwater-x, -60vw), var(--midwater-y, 44vh), 0)
    scale(var(--midwater-scale, 1))
    rotate(var(--midwater-rotate, 0deg));
}
/* --- 5. Performance radar --------------------------------- */
.depth-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 190px);
  aspect-ratio: 1;
  border: 1px solid rgba(121, 183, 255, .26);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(101,228,220,.12), rgba(8,29,48,.16) 54%, transparent 74%);
  box-shadow: inset 0 0 40px rgba(101,228,220,.06), 0 0 44px rgba(101,228,220,.06);
  overflow: hidden;
  isolation: isolate;
}
.depth-radar__rings { position: absolute; inset: 0; }
.depth-radar__rings i {
  position: absolute;
  border: 1px solid rgba(121, 183, 255, .2);
  border-radius: 50%;
}
.depth-radar__rings i:nth-child(1) { inset: 13%; }
.depth-radar__rings i:nth-child(2) { inset: 31%; }
.depth-radar__rings i:nth-child(3) {
  inset: 0 50%;
  width: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(transparent, rgba(108,240,220,.3), transparent);
}
.depth-radar__rings i:nth-child(4) {
  inset: 50% 0;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(108,240,220,.3), transparent);
}
.depth-radar__rings i:nth-child(5) {
  inset: 0;
  border-color: rgba(165, 255, 244, .85);
  opacity: 0;
}
.depth-radar__beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(108,240,220,.72), transparent);
  animation: radarSweep 9s linear infinite;
}
.depth-radar__readout { position: relative; z-index: 2; text-align: center; }
.depth-radar .services-performance__number {
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  letter-spacing: -.075em;
  font-variant-numeric: tabular-nums;
}
.depth-radar .services-performance__score small,
.depth-radar__readout small {
  display: block;
  max-width: 118px;
  margin: .6rem auto 0;
  color: rgba(235, 251, 251, .76);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .58rem;
  letter-spacing: .11em;
  line-height: 1.35;
  text-transform: uppercase;
}
.depth-radar__coordinate {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  color: rgba(220, 248, 249, .34);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .55rem;
  letter-spacing: .14em;
  white-space: nowrap;
}
.depth-radar__coordinate b { color: var(--aqua-bright); font-weight: 500; }
.services-performance__inner { grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); }
.performance-visible .depth-radar__rings i:nth-child(5) { animation: radarLock 1.5s cubic-bezier(.2,.65,.3,1) .3s 1; }
@keyframes radarLock {
  0%   { transform: scale(.58); opacity: 0; }
  28%  { opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}

@media (max-width: 900px) {
  .services-performance__inner { grid-template-columns: minmax(0, 1fr); }
  .depth-radar { width: min(100%, 168px); }
}
@media (max-width: 700px) {
  .depth-gauge__tick-label { display: none; }
  .landmark--midwater { width: clamp(260px, 72vw, 420px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { clip-path: none; }
  .site-nav__field::before { display: none; }
  .depth-radar__beam { display: none; }
  .landmark { display: none; }
}

/* Press ripple: rings leave the point of contact. */
.menu-ripple {
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  z-index: -1;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 1px solid var(--menu-drop-color);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: menuRipple .74s cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes menuRipple {
  0%   { transform: scale(.38); opacity: .7; }
  100% { transform: scale(4.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-ripple { display: none !important; }
}

/* ============================================================
   Pricing page
   ============================================================ */
.included-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.4rem, 4vw, 3rem);
  margin: 3.2rem 0 0;
  padding: 0;
  list-style: none;
  color: rgba(232, 250, 250, .82);
}
.included-grid li {
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.included-grid li::before { content: '·'; margin-right: .7rem; color: var(--aqua-bright); }
.promise-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.2rem);
  margin-top: 2.6rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid rgba(108, 240, 220, .26);
  border-radius: 22px;
  background: rgba(4, 35, 49, .4);
  backdrop-filter: blur(14px);
}
.promise-strip p { margin: 0; color: var(--muted); font-size: .94rem; }
.promise-strip b { display: block; margin-bottom: .3rem; color: var(--ink); }
.panel--light .promise-strip {
  border-color: var(--paper-line);
  background: linear-gradient(150deg, #ffffff, #f4fafb);
  box-shadow: 0 30px 60px -38px rgba(6, 40, 54, .35), inset 0 1px 0 #fff;
  backdrop-filter: none;
}
.panel--light .promise-strip p { color: var(--ink-body); }
.panel--light .promise-strip b { color: var(--ink-strong); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.4rem);
  margin-top: 4rem;
  align-items: stretch;
}
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(216, 253, 251, .16);
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(9, 53, 71, .56), rgba(3, 22, 35, .38));
  box-shadow: 0 30px 80px rgba(0, 7, 14, .16);
  backdrop-filter: blur(18px);
}
.tier-card::after {
  content: '';
  position: absolute;
  right: -22%;
  bottom: -34%;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(121, 183, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(121, 183, 255, .035), 0 0 0 62px rgba(121, 183, 255, .022);
  pointer-events: none;
}
.tier-card--featured {
  border-color: rgba(108, 240, 220, .42);
  background: radial-gradient(circle at 100% 0, rgba(108, 240, 220, .14), transparent 38%), linear-gradient(145deg, rgba(9, 64, 78, .62), rgba(3, 24, 37, .42));
}
.tier-card--featured > .support-path__depth { margin-top: clamp(1.75rem, 2vw, 2rem); }
.tier-card > * { position: relative; z-index: 1; }
.tier-card__price { margin: 2.2rem 0 .4rem; }
.tier-card__price strong {
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: .82;
  letter-spacing: -.07em;
}
.tier-card__kicker {
  margin: 0 0 1.2rem;
  color: var(--aqua-bright);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tier-card > p { color: var(--muted); }
.tier-card ul {
  margin: 1.4rem 0 1.8rem;
  padding: 0;
  list-style: none;
  color: rgba(232, 250, 250, .8);
  font-size: .95rem;
}
.tier-card li { padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tier-card li::before { content: '•'; margin-right: .65rem; color: var(--aqua-bright); }
.tier-card__note { margin: 0 0 1.4rem; color: rgba(225, 245, 247, .62); font-size: .85rem; }
.tier-card .text-link { margin-top: auto; align-self: flex-start; }

.addon-list {
  margin: 3rem 0 0;
  max-width: 760px;
}
.addon-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: .95rem 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.addon-list div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.addon-list dt { color: rgba(242, 255, 254, .88); }
.addon-list dd {
  margin: 0;
  color: rgba(221, 248, 249, .5);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 1.6rem);
  margin: 3.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.payment-steps li {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid rgba(216, 253, 251, .14);
  border-radius: 22px;
  background: rgba(3, 24, 37, .38);
}
.payment-steps__index {
  display: block;
  margin-bottom: 1.6rem;
  color: var(--depth-logo-blue);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .12em;
}
.payment-steps b { display: block; font-size: 1.25rem; letter-spacing: -.02em; }
.payment-steps p { margin: .5rem 0 0; color: var(--muted); font-size: .94rem; }

.faq { margin-top: 3rem; max-width: 900px; }
.faq__item { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.faq__item summary {
  padding: 1.25rem 2.4rem 1.25rem 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -.02em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  position: absolute;
  right: .4rem;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--aqua-bright);
  border-bottom: 1.5px solid var(--aqua-bright);
  transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.2,.65,.3,1);
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item summary:focus-visible { outline: 2px solid var(--aqua-bright); outline-offset: 3px; border-radius: 6px; }
.faq__item div { padding: 0 2.4rem 1.4rem 0; }
.faq__item p { margin: 0; color: var(--muted); }

@media (max-width: 900px) {
  .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-grid, .payment-steps { grid-template-columns: 1fr; }
  .promise-strip { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .included-grid { grid-template-columns: 1fr; }
}

.panel--case-results { min-height: auto; padding-block: clamp(8rem, 15vw, 14rem); }
.case-results {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(3rem, 8vw, 9rem);
}
.case-results__intro h2 {
  margin: 0;
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  line-height: .88;
  letter-spacing: -.07em;
}
.case-results__intro > p:last-child { max-width: 560px; color: var(--muted); }
.case-results__metrics { border-top: 1px solid var(--line); }
.case-results__metrics article {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(180px, 1fr) minmax(180px, .8fr);
  gap: 1.5rem;
  align-items: center;
  min-height: 150px;
  border-bottom: 1px solid var(--line);
}
.case-results__metrics article > span,
.case-results__metrics article > p {
  color: rgba(222, 249, 249, .55);
  font-size: .8rem;
}
.case-results__metrics article > span {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-results__metrics article > p { margin: 0; }
.case-results__metrics strong {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--aqua-bright);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .8;
  letter-spacing: -.07em;
}
.case-results__metrics strong small { color: rgba(230, 251, 251, .42); font-size: .48em; }
.case-results__metrics strong i { color: rgba(230, 251, 251, .42); font-size: .35em; font-style: normal; }
.case-results__link {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.case-results__link span { color: var(--aqua-bright); }

/* Responsive project device compositions */
.project-device-stage {
  position: relative;
  min-height: clamp(610px, 66vw, 900px);
  overflow: hidden;
  border: 1px solid rgba(215, 255, 251, .16);
  border-radius: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(circle at 82% 8%, rgba(106, 235, 224, .24), transparent 30%),
    linear-gradient(145deg, #173e4c, #071f2d 52%, #03131d);
  box-shadow: 0 52px 110px rgba(0, 7, 13, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.project-device-stage--compact { min-height: clamp(520px, 54vw, 720px); }
.project-device-stage__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(135deg, #000, transparent 76%);
}
.project-browser-frame {
  position: absolute;
  left: 5%;
  top: 7%;
  width: 82%;
  margin: 0;
  overflow: hidden;
  border: 7px solid #0b1014;
  border-radius: clamp(15px, 2vw, 25px);
  background: #0b1014;
  box-shadow: 0 44px 90px rgba(0, 0, 0, .46);
  transform: rotate(-1.25deg);
}
.project-browser-frame figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: #11171c;
}
.project-browser-frame figcaption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #596169;
}
.project-browser-frame figcaption span {
  margin-left: auto;
  color: #89939a;
  font-family: "IBM Plex Mono", monospace;
  font-size: .55rem;
  letter-spacing: .04em;
}
.project-browser-frame img { display: block; width: 100%; height: auto; }
.project-phone-frame {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 4%;
  width: clamp(150px, 19%, 250px);
  aspect-ratio: 430 / 932;
  margin: 0;
  padding: 7px;
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 40px);
  background: #090d11;
  box-shadow: 0 34px 78px rgba(0, 0, 0, .55);
  transform: rotate(3deg);
}
.project-phone-frame > span {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 50%;
  width: 29%;
  height: 6px;
  border-radius: 999px;
  background: #090d11;
  transform: translateX(-50%);
}
.project-phone-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(clamp(24px, 3vw, 40px) - 7px);
  object-fit: cover;
  object-position: top;
}
.project-device-stage__label {
  position: absolute;
  left: 2.5%;
  bottom: 3%;
  display: grid;
  gap: .25rem;
  color: rgba(224, 251, 251, .44);
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  letter-spacing: .1em;
}
.project-device-stage__label b { color: var(--aqua-bright); font-size: 1.1rem; }

/* Case-study editorial chapters */
.page-section--results { min-height: auto; padding-block: clamp(8rem, 14vw, 13rem); }
.case-outcomes {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}
.case-outcomes__copy h2,
.case-feature__copy h2,
.case-mobile-story__heading h2,
.case-gallery__copy h2 {
  margin: 0;
  font-size: clamp(3rem, 6.8vw, 6.8rem);
  line-height: .88;
  letter-spacing: -.07em;
}
.case-outcomes__copy > p:last-child,
.case-feature__copy > p:last-child,
.case-mobile-story__heading > p:last-child,
.case-gallery__copy > p:last-child {
  max-width: 630px;
  color: var(--muted);
  font-size: 1.05rem;
}
.case-outcomes__numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.case-outcomes__numbers article {
  min-height: 300px;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-outcomes__numbers article:first-child { border-left: 1px solid var(--line); }
.case-outcomes__numbers span {
  color: rgba(221, 247, 248, .48);
  font-family: "IBM Plex Mono", monospace;
  font-size: .67rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.case-outcomes__numbers strong {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: 4rem;
  color: var(--aqua-bright);
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: .8;
  letter-spacing: -.08em;
}
.case-outcomes__numbers strong small { color: rgba(229, 251, 251, .4); font-size: .45em; }
.case-outcomes__numbers strong i { color: rgba(229, 251, 251, .4); font-size: .3em; font-style: normal; }
.case-outcomes__numbers p { color: var(--muted); }

.case-feature,
.case-mobile-story,
.case-gallery-section {
  min-height: auto;
  padding-block: clamp(8rem, 15vw, 15rem);
}
.case-feature__layout {
  display: grid;
  grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.case-screen-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(218, 255, 252, .16);
  border-radius: clamp(22px, 3vw, 38px);
  background: rgba(4, 22, 32, .55);
  box-shadow: 0 42px 96px rgba(0, 7, 13, .4);
}
.case-screen-card img { display: block; width: 100%; height: auto; }
.case-screen-card--landscape { transform: rotate(1deg); }

.case-mobile-story__heading { max-width: 1080px; }
.case-mobile-story__heading > p:last-child { margin-left: auto; }
.case-mobile-story__devices {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: clamp(1.5rem, 7vw, 7rem);
  margin-top: clamp(4rem, 9vw, 8rem);
  min-height: clamp(680px, 75vw, 1080px);
}
.project-phone-frame--static {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(32vw, 360px);
  flex: 0 0 auto;
  transform: rotate(-2deg);
}
.project-phone-frame--offset { margin-top: clamp(5rem, 12vw, 11rem); transform: rotate(2.5deg); }

.case-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  width: min(calc(100% - clamp(2rem, 8vw, 10rem)), 1500px);
  margin-inline: auto;
}
.case-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 36px);
  box-shadow: 0 36px 80px rgba(0, 7, 13, .38);
}
.case-gallery figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-gallery__wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.case-gallery__copy { align-self: center; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 3rem); }
.case-gallery__small { aspect-ratio: 4 / 3; }
.case-gallery__tall { aspect-ratio: 4 / 3; margin-top: clamp(3rem, 8vw, 8rem) !important; }

@media (max-width: 1000px) {
  .case-results,
  .case-outcomes,
  .case-feature__layout { grid-template-columns: 1fr; }
  .case-results__link { grid-column: auto; }
  .case-results__metrics article { grid-template-columns: minmax(120px, .7fr) minmax(180px, 1fr) minmax(160px, .8fr); }
  .case-feature__copy { max-width: 760px; }
}

@media (max-width: 720px) {
  .case-results__metrics article {
    grid-template-columns: 1fr;
    gap: .7rem;
    padding-block: 1.5rem;
  }
  .case-results__metrics strong { font-size: 4.2rem; }
  .project-device-stage { min-height: 600px; }
  .project-browser-frame { left: 4%; top: 7%; width: 92%; border-width: 5px; transform: rotate(-.7deg); }
  .project-browser-frame figcaption { height: 25px; }
  .project-phone-frame { right: 5%; bottom: 4%; width: 37%; }
  .project-device-stage__label { display: none; }
  .case-outcomes__numbers { grid-template-columns: 1fr; }
  .case-outcomes__numbers article { min-height: 240px; border-left: 1px solid var(--line); }
  .case-outcomes__numbers strong { margin-top: 2.7rem; }
  .case-mobile-story__devices { min-height: 650px; gap: 1rem; }
  .project-phone-frame--static { width: 44vw; }
  .case-gallery { grid-template-columns: 1fr; width: min(calc(100% - 2rem), 1500px); }
  .case-gallery__wide { grid-column: auto; aspect-ratio: 4 / 3; }
  .case-gallery__copy { padding-inline: .5rem; }
  .case-gallery__tall { margin-top: 0 !important; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   WORK PRESENTATION
   Screens from a live project are shown as numbered plates. The numbering is
   the client's own site journey (home → treatments → team → reviews), so the
   sequence carries information rather than decoration.
   ──────────────────────────────────────────────────────────────────────────── */

/* Work page — case lead */
.work-coordinate {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .75rem;
  color: rgba(226,250,251,.74);
  font-family: "IBM Plex Mono", monospace;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.case-lead { display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); }
.case-lead__coordinate { padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.case-lead__visual {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(3,16,26,.5);
  box-shadow: 0 50px 110px -60px rgba(0,0,0,.95);
}
.case-lead__visual img { display: block; width: 100%; height: auto; }
.case-lead__body {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-top: clamp(.5rem, 2vw, 1.5rem);
}
.case-lead__body h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4.2vw, 4.2rem);
  line-height: .94;
  letter-spacing: -.055em;
}
.case-lead__side > p { margin: 0; color: var(--muted); }
.case-lead__details { margin: 2rem 0 0; }
.case-lead__details div {
  display: grid;
  grid-template-columns: minmax(90px, .36fr) 1fr;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid rgba(255,255,255,.09);
}
.case-lead__details div:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.case-lead__details dt {
  color: rgba(221,248,249,.42);
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-lead__details dd { margin: 0; color: rgba(242,255,254,.82); }

/* Work page — more to explore */
.page-section--explore { padding-inline: 0; }
.explore__head { display: grid; gap: 1rem; max-width: 780px; }
.explore__head h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: .95;
  letter-spacing: -.055em;
}
.explore__head p:not(.eyebrow) { margin: 0; color: var(--muted); }
.explore__head .eyebrow { margin: 0; }
.explore__tools { display: flex; align-items: center; gap: .75rem; margin-top: 1.4rem; }
.explore__hint {
  margin-left: .5rem;
  color: rgba(226,252,252,.42);
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.explore__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(6,26,38,.45);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .3s ease, opacity .3s ease;
}
.explore__arrow:hover { border-color: rgba(165,255,244,.5); background: rgba(9,40,56,.6); transform: translateY(-2px); }
.explore__arrow:focus-visible { outline: 2px solid var(--aqua-bright); outline-offset: 3px; }
.explore__arrow[disabled] { opacity: .28; cursor: default; transform: none; }

.explore__shelf {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.9rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: .5rem clamp(1rem, 5vw, 5rem) 1.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}
.explore__shelf::-webkit-scrollbar { display: none; }
.explore__shelf.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.explore__shelf:focus-visible { outline: 2px solid var(--aqua-bright); outline-offset: -6px; border-radius: 10px; }
.plate { flex: none; margin: 0; scroll-snap-align: center; }
.plate--wide { width: clamp(280px, 50vw, 700px); }
.plate--tall { width: clamp(160px, 22vw, 300px); }
.plate__open {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(3,16,26,.55);
  cursor: zoom-in;
  transition: border-color .4s ease, transform .5s cubic-bezier(.2,.65,.3,1), box-shadow .5s ease;
}
.plate__open img { display: block; width: 100%; height: auto; pointer-events: none; }
.plate__open:hover { border-color: rgba(165,255,244,.45); transform: translateY(-5px); box-shadow: 0 30px 60px -40px rgba(0,0,0,.9); }
.plate__open:focus-visible { outline: 2px solid var(--aqua-bright); outline-offset: 4px; }
.plate figcaption {
  display: flex;
  gap: .7rem;
  margin-top: .9rem;
  color: rgba(226,252,252,.55);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .05em;
}
.plate figcaption span { color: var(--aqua-bright); }
.explore__ruler {
  position: relative;
  height: 1px;
  margin: 0 clamp(1rem, 5vw, 5rem);
  background: rgba(255,255,255,.12);
}
.explore__ruler span {
  position: absolute;
  top: -1px;
  left: 0;
  width: 20%;
  height: 3px;
  background: var(--aqua);
  border-radius: 2px;
}

/* Enlarged plate */
.plate-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
  opacity: 0;
  transition: opacity .3s ease;
}
.plate-lightbox[hidden] { display: none; }
.plate-lightbox.is-open { opacity: 1; }
.plate-lightbox__backdrop { position: absolute; inset: 0; background: rgba(1,9,15,.9); backdrop-filter: blur(14px); }
.plate-lightbox__figure { position: relative; margin: 0; display: grid; gap: .9rem; justify-items: center; }
.plate-lightbox__figure img {
  max-width: min(100%, 1400px);
  max-height: 78vh;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.plate-lightbox__figure figcaption {
  display: flex;
  gap: 1.2rem;
  color: rgba(226,252,252,.62);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plate-lightbox__nav, .plate-lightbox__close { position: absolute; background: rgba(6,26,38,.7); }
.plate-lightbox__nav--prev { left: clamp(.5rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.plate-lightbox__nav--next { right: clamp(.5rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.plate-lightbox__nav--prev:hover, .plate-lightbox__nav--next:hover { transform: translateY(calc(-50% - 2px)); }
.plate-lightbox__close { top: clamp(.75rem, 3vw, 2rem); right: clamp(.75rem, 3vw, 2.5rem); }
body.lightbox-open { overflow: hidden; }

@media (max-width: 1000px) {
  .case-lead__body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .explore__tools { flex-wrap: wrap; }
  .explore__hint { flex-basis: 100%; margin: .4rem 0 0; }
  .plate--wide { width: 78vw; }
  .plate--tall { width: 46vw; }
  .plate-lightbox__nav--prev { left: .5rem; }
  .plate-lightbox__nav--next { right: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .plate__open:hover { transform: none; }
  .explore__arrow:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SURFACING SHEETS
   Reading-heavy sections rise onto foam-white panels that float in the water,
   so the page breathes dark → light → dark: diving and surfacing. The deep
   teal that is the water everywhere else becomes the accent colour up here.
   ──────────────────────────────────────────────────────────────────────────── */
.panel--light {
  min-height: auto;
  margin-inline: clamp(.6rem, 1.8vw, 2rem);
  margin-block: clamp(2.4rem, 6vw, 5.5rem);
  padding-block: clamp(5.5rem, 9vw, 8.5rem);
  border-radius: clamp(22px, 3.2vw, 42px);
  background: radial-gradient(130% 100% at 50% 0%, #ffffff 0%, #f3f9fa 48%, #e6f1f3 100%);
  color: #14404f;
  box-shadow:
    0 70px 150px -70px rgba(0, 12, 20, .6),
    inset 0 1px 0 #fff;
}
/* a foam line where the sheet meets the water above it */
.panel--light::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  filter: blur(.5px);
}

.panel--deep-water {
  min-height: auto;
  margin-inline: clamp(.6rem, 1.8vw, 2rem);
  margin-block: clamp(2.4rem, 6vw, 5.5rem);
  padding-block: clamp(5.5rem, 9vw, 8.5rem);
  border: 1px solid rgba(165, 255, 244, .14);
  border-radius: clamp(22px, 3.2vw, 42px);
  background:
    radial-gradient(110% 90% at 15% 0%, rgba(24, 130, 162, .38), transparent 58%),
    linear-gradient(155deg, #0a526f 0%, #07384f 48%, var(--deep) 100%);
  color: var(--ink);
  box-shadow:
    0 70px 150px -70px rgba(0, 7, 14, .86),
    0 0 90px -30px rgba(101, 228, 220, .14),
    inset 0 1px 0 rgba(255, 255, 255, .09);
}
.panel--deep-water::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(165, 255, 244, .58), transparent);
  filter: blur(.5px);
}
.panel--deep-water .section-intro p:not(.eyebrow),
.panel--deep-water .process-step p { color: var(--muted); }

.panel--light .eyebrow { color: #0b7079; }
.panel--light h2,
.panel--light h3 { color: #072b37; }
.panel--light .section-intro p:not(.eyebrow),
.panel--light .statement-block > p:not(.eyebrow) { color: rgba(9, 43, 55, .76); }

/* Light-panel component styling lives in the SURFACING SHEETS block below —
   the near-identical copy that used to sit here has been removed. */

/* Every page now descends toward the footer floor: sand light rises through
   the closing section before the photographed seabed continues behind the
   footer itself. */
.panel--seafloor > * { position: relative; z-index: 1; }
.panel--seafloor::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: radial-gradient(58% 85% at 50% 100%, rgba(240, 200, 149, .18), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.panel--seafloor .eyebrow { color: var(--warm); }
/* a sheet must never be the last thing before the floor */
.panel--seafloor.panel--light::after { display: none; }
.panel--seafloor.panel--light .eyebrow { color: var(--ink-accent); }

@media (max-width: 720px) {
  .panel--light { margin-inline: .5rem; padding-inline: clamp(1rem, 4vw, 1.6rem); }
}

@media print {
  .site-footer-wide::before,
  .site-footer-wide::after { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SURFACING SHEETS — SITE-WIDE COVERAGE
   Every component that can land on a white sheet needs its dark-glass styling
   inverted. The rule is constant: deep teal becomes the accent, glass becomes
   paper, and nothing relies on a light-on-dark assumption.
   ──────────────────────────────────────────────────────────────────────────── */
.panel--light {
  --ink-strong: #072b37;
  --ink-body: rgba(9, 43, 55, .76);
  --ink-quiet: rgba(10, 58, 72, .78);
  --ink-accent: #0b7079;
  --paper-line: rgba(9, 64, 78, .15);
  --indicator: #0b7079;
}

/* Headings, body and eyebrows anywhere inside a sheet */
.panel--light .page-section__head h2,
.panel--light .case-delivery__intro h2,
.panel--light .case-outcomes h2,
.panel--light h2,
.panel--light h3,
.panel--light h4 { color: var(--ink-strong); }
.panel--light p,
.panel--light li,
.panel--light dd { color: var(--ink-body); }
.panel--light .eyebrow,
.panel--light .site-nav__eyebrow { color: var(--ink-accent); }
.panel--light dt,
.panel--light small { color: var(--ink-quiet); }
.panel--light .text-link { color: #0a5f68; }
.panel--light hr,
.panel--light .page-section__head { border-color: var(--paper-line); }

/* Paper cards: one shared treatment for every card type on the site */
.panel--light .service-card,
.panel--light .service-detail-card,
.panel--light .support-card,
.panel--light .plan-card,
.panel--light .tier-card,
.panel--light .team-card,
.panel--light .contact-card,
.panel--light .performance-tool,
.panel--light .plate__open,
.panel--light .case-screen-card {
  border-color: var(--paper-line);
  background: linear-gradient(150deg, #ffffff, #f4fafb);
  box-shadow: 0 30px 60px -38px rgba(6, 40, 54, .35), inset 0 1px 0 #fff;
  backdrop-filter: none;
}
/* the decorative haloes inside dark cards would smear on paper */
.panel--light .service-card::before,
.panel--light .team-card::before,
.panel--light .service-detail-card::after,
.panel--light .tier-card::after { opacity: .28; }

.panel--light .service-card__number,
.panel--light .service-detail-card__number,
.panel--light .process-step > span,
.panel--light .plan-card__price,
.panel--light .case-outcomes__numbers strong { color: var(--ink-accent); }
.panel--light .service-card__meta,
.panel--light .service-detail-card__scope,
.panel--light .plan-card__tag,
.panel--light .team-card__role,
.panel--light .plate figcaption { color: var(--ink-quiet); }
.panel--light .plate figcaption span { color: var(--ink-accent); }

/* Rules, rows and dividers */
.panel--light .process-step,
.panel--light .faq__item,
.panel--light .case-delivery__list > *,
.panel--light .case-lead__details div,
.panel--light .included-grid > * { border-color: var(--paper-line); }

/* Form fields read far better on paper — that is why contact surfaces */
.panel--light .field input,
.panel--light .field textarea,
.panel--light .field select {
  border-color: rgba(9, 64, 78, .22);
  background: #fff;
  color: var(--ink-strong);
}
.panel--light .field label { color: var(--ink-quiet); }
.panel--light .field input::placeholder,
.panel--light .field textarea::placeholder { color: rgba(10, 58, 72, .68); }
.panel--light .field input:focus,
.panel--light .field textarea:focus { border-color: var(--ink-accent); }

/* Buttons and controls */
.panel--light .button--ghost,
.panel--light .explore__arrow {
  border-color: rgba(8, 52, 66, .32);
  background: rgba(255, 255, 255, .55);
  color: #093542;
  backdrop-filter: none;
}
.panel--light .button--ghost:hover,
.panel--light .explore__arrow:hover { border-color: var(--ink-accent); background: #fff; }
.panel--light .button--primary {
  color: #f2fdfc;
  background: linear-gradient(135deg, #0f7f89, #0a5b68);
  box-shadow: 0 14px 35px rgba(9, 84, 96, .3);
}
.panel--light .explore__hint,
.panel--light .work-coordinate,
.panel--light .support-closing { color: var(--ink-accent); }
.panel--light .explore__ruler { background: rgba(9, 64, 78, .18); }
.panel--light .explore__ruler span { background: var(--ink-accent); }

/* Focus rings need to be visible on paper too */
.panel--light a:focus-visible,
.panel--light button:focus-visible,
.panel--light input:focus-visible,
.panel--light textarea:focus-visible { outline-color: #0a5f68; }

/* ─────────────────────────────────────────────────────────────────────────────
   INTERACTION INDICATOR
   A rule that grows from the leading edge on hover, tap or keyboard focus, so
   the row you are pointing at announces itself. Each component uses whichever
   pseudo-element is free, since several already carry decorative ones.
   ──────────────────────────────────────────────────────────────────────────── */

.service-card,
.service-detail-card,
.support-card,
.plan-card,
.tier-card,
.team-card,
.performance-tool,
.process-step,
.faq__item,
.included-grid > *,
.case-delivery__list > * { position: relative; }

.service-card::after,
.team-card::after,
.service-detail-card::before,
.tier-card::before,
.support-card::after,
.plan-card::after,
.performance-tool::after,
.process-step::after,
.faq__item::after,
.included-grid > *::after,
.case-delivery__list > *::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--indicator);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2, .65, .3, 1);
  pointer-events: none;
}
/* cards carry the rule along their lower edge, inside the rounded corner */
.service-card::after,
.team-card::after,
.service-detail-card::before,
.tier-card::before,
.support-card::after,
.plan-card::after,
.performance-tool::after {
  left: 6%;
  right: 6%;
  width: auto;
  bottom: 10px;
}

.service-card:hover::after,
.service-card:focus-within::after,
.team-card:hover::after,
.team-card:focus-within::after,
.service-detail-card:hover::before,
.service-detail-card:focus-within::before,
.tier-card:hover::before,
.tier-card:focus-within::before,
.support-card:hover::after,
.support-card:focus-within::after,
.plan-card:hover::after,
.plan-card:focus-within::after,
.performance-tool:hover::after,
.performance-tool:focus-within::after,
.process-step:hover::after,
.process-step:focus-within::after,
.faq__item:hover::after,
.faq__item:focus-within::after,
.faq__item[open]::after,
.included-grid > *:hover::after,
.included-grid > *:focus-within::after,
.case-delivery__list > *:hover::after,
.case-delivery__list > *:focus-within::after { transform: scaleX(1); }

/* touch: the rule persists for the length of the press */
.service-card:active::after,
.team-card:active::after,
.tier-card:active::before,
.plan-card:active::after,
.process-step:active::after,
.faq__item:active::after { transform: scaleX(1); }

/* a matching lift, so the indicator is not the only signal */
.service-card,
.service-detail-card,
.support-card,
.plan-card,
.tier-card,
.team-card,
.performance-tool {
  transition: transform .5s cubic-bezier(.2, .65, .3, 1), border-color .4s ease, box-shadow .5s ease;
}
.service-card:hover,
.service-detail-card:hover,
.support-card:hover,
.plan-card:hover,
.tier-card:hover,
.team-card:hover,
.performance-tool:hover { transform: translateY(-4px); }

.process-step,
.faq__item { transition: background .4s ease; }
.process-step:hover,
.faq__item:hover { background: rgba(255, 255, 255, .035); }
.panel--light .process-step:hover,
.panel--light .faq__item:hover { background: rgba(9, 64, 78, .04); }

/* ─────────────────────────────────────────────────────────────────────────────
   VERTICAL RHYTHM
   One fluid spacing scale for every panel, so segments breathe consistently
   instead of each section inventing its own gap.
   ──────────────────────────────────────────────────────────────────────────── */
.page-section { padding-block: var(--rhythm); }
.page-section__head { margin-bottom: var(--rhythm-tight); }
.panel--light {
  margin-block: clamp(2rem, 5vw, 5rem);
  padding-block: var(--rhythm);
}
/* consecutive sheets read as one surfacing, not two */
.panel--light + .panel--light { margin-top: calc(var(--rhythm-tight) * -.35); }

/* sheets settle into the water rather than being pasted on it */
.panel--light {
  box-shadow:
    0 70px 150px -70px rgba(0, 12, 20, .6),
    0 0 90px -30px rgba(120, 220, 235, .12),
    inset 0 1px 0 #fff;
}

/* anchored jumps land below the fixed header */
[id] { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: reduce) {
  .service-card:hover,
  .service-detail-card:hover,
  .support-card:hover,
  .plan-card:hover,
  .tier-card:hover,
  .team-card:hover,
  .performance-tool:hover { transform: none; }
  .service-card::after,
  .team-card::after,
  .service-detail-card::before,
  .tier-card::before,
  .support-card::after,
  .plan-card::after,
  .performance-tool::after,
  .process-step::after,
  .faq__item::after { transition: none; }
}

/* Sheet text overrides that must out-rank component-level colour rules */
.panel--light .support-path > p,
.panel--light .explore__head p:not(.eyebrow),
.panel--light .case-outcomes__copy > p,
.panel--light .case-feature__copy > p,
.panel--light .case-mobile-story__heading > p,
.panel--light .case-gallery__copy > p,
.panel--light .section-intro p:not(.eyebrow),
.panel--light .statement-block > p:not(.eyebrow),
.panel--light .page-section__head p:not(.eyebrow),
.panel--light .case-delivery__intro p:not(.eyebrow) { color: var(--ink-body); }
.panel--light .support-path__kicker,
.panel--light .plan-note,
.panel--light .services-performance__disclaimer { color: var(--ink-quiet); }

/* Remaining small type inside sheets: metadata quiet, numerals accented */
.panel--light .service-detail-card__type,
.panel--light .case-outcomes__numbers span,
.panel--light .case-outcomes__numbers small,
.panel--light .case-delivery__list span,
.panel--light .case-delivery__list small { color: var(--ink-quiet); }
.panel--light .team-card__mark,
.panel--light .case-outcomes__numbers strong,
.panel--light .case-delivery__list > * > span:first-child { color: var(--ink-accent); }
.panel--light .case-outcomes__numbers strong small { color: rgba(10, 58, 72, .45); }

/* FAQ questions and inline arrows sat at near-white directly on the sheet */
.panel--light summary,
.panel--light .faq__item summary { color: var(--ink-strong); }
.panel--light summary::marker { color: var(--ink-accent); }
.panel--light .case-delivery__list i,
.panel--light .case-outcomes i,
.panel--light i { color: var(--ink-accent); }

/* The two support paths become paper as well, so the sheet stays one surface */
.panel--light .support-path {
  border-color: var(--paper-line);
  background: linear-gradient(150deg, #ffffff, #f4fafb);
  box-shadow: 0 30px 60px -38px rgba(6, 40, 54, .35), inset 0 1px 0 #fff;
  backdrop-filter: none;
}
.panel--light .support-path__depth {
  border-color: var(--paper-line);
  background: rgba(11, 112, 121, .08);
  color: #0a5f68;
}
.panel--light .support-path b,
.panel--light .support-path strong { color: var(--ink-strong); }
.panel--light .trust-panel__badge {
  background: rgba(11, 112, 121, .1);
  border-color: var(--paper-line);
}
.panel--light .trust-panel__badge strong,
.panel--light .trust-panel__badge b { color: #0a5f68; }

/* ─────────────────────────────────────────────────────────────────────────────
   TEAM PORTRAITS
   Real faces replace the initial-letter marks. The portrait leads the card and
   the copy sits beneath it, so the grid reads as people rather than monograms.
   ──────────────────────────────────────────────────────────────────────────── */
.team-card {
  min-height: 0;
  justify-content: flex-start;
  padding: clamp(.9rem, 1.8vw, 1.15rem);
}
.team-card__portrait {
  position: relative;
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.6rem);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: rgba(4, 26, 40, .5);
}
.team-card__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform .8s cubic-bezier(.2, .65, .3, 1);
}
.team-card:hover .team-card__portrait img,
.team-card:focus-within .team-card__portrait img { transform: scale(1.035); }
/* the water tints the portrait so faces sit inside the palette, not on top of it */
.team-card__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 61, 78, .1), rgba(3, 20, 32, .3));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.panel--light .team-card__portrait::after {
  background: linear-gradient(180deg, rgba(11, 112, 121, .04), rgba(9, 43, 55, .12));
}
.team-card__role { margin-bottom: .55rem; }
.team-card h2 { margin: 0 0 .6rem; }
.team-card__mark { display: none; }

@media (prefers-reduced-motion: reduce) {
  .team-card:hover .team-card__portrait img { transform: none; }
}

/* Long single words in display headings must never push the page wider than
   the screen — "Direct involvement." was overflowing the team hero at 390px. */
.page-hero h1,
.statement-block h2,
.page-section__head h2,
.case-hero h1 {
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 420px) {
  .page-hero h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .statement-block h2 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
}

/* Case-study hero: the 280px minimum column plus panel padding exceeded a
   320px screen, so the whole page scrolled sideways on the smallest phones. */
@media (max-width: 560px) {
  .case-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .case-hero h1 { font-size: clamp(2.6rem, 13vw, 4.1rem); }
  .case-hero__meta { grid-template-columns: 78px 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PROCESS ROADMAP
   The four stages hang off a dive line. A fill tracks the scroll position, so
   the rail reports how far down the process you have travelled, and the stage
   level with the waterline lights up.
   ──────────────────────────────────────────────────────────────────────────── */
.process-roadmap { position: relative; margin-top: 8vh; }
.process-roadmap .process-list { margin-top: 0; }
.process-roadmap__rail {
  position: absolute;
  top: 2.4rem;
  bottom: 2.4rem;
  left: 11px;
  width: 1px;
  background: rgba(210, 244, 246, .22);
  pointer-events: none;
}
.process-roadmap__rail i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(180deg, var(--aqua-bright), var(--aqua));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .28s linear;
  box-shadow: 0 0 12px rgba(101, 228, 220, .55);
}
.panel--light .process-roadmap__rail { background: rgba(9, 64, 78, .18); }
.panel--light .process-roadmap__rail i {
  background: linear-gradient(180deg, #14929c, #0b7079);
  box-shadow: 0 0 12px rgba(11, 112, 121, .3);
}

.process-roadmap .process-step { padding-left: 0; }
.process-roadmap .process-step > span { padding-left: 30px; }
/* the node: hollow while ahead of you, filled once passed, ringed when live */
.process-roadmap .process-step::before {
  content: '';
  position: absolute;
  top: 2.15rem;
  left: 11px;
  width: 11px;
  height: 11px;
  margin-left: -5px;
  border: 1px solid rgba(210, 244, 246, .4);
  border-radius: 50%;
  background: var(--deep);
  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.2,.65,.3,1), box-shadow .45s ease;
}
.panel--light .process-roadmap .process-step::before {
  border-color: rgba(9, 64, 78, .32);
  background: #fff;
}
.process-roadmap .process-step.is-passed::before {
  background: var(--aqua);
  border-color: var(--aqua);
}
.process-roadmap .process-step.is-active::before {
  background: var(--aqua-bright);
  border-color: var(--aqua-bright);
  transform: scale(1.45);
  box-shadow: 0 0 0 5px rgba(101, 228, 220, .16), 0 0 18px rgba(165, 255, 244, .5);
}
.panel--light .process-roadmap .process-step.is-passed::before {
  background: #0b7079;
  border-color: #0b7079;
}
.panel--light .process-roadmap .process-step.is-active::before {
  background: #0f8f9a;
  border-color: #0f8f9a;
  box-shadow: 0 0 0 5px rgba(11, 112, 121, .14), 0 0 18px rgba(11, 112, 121, .35);
}
/* the live stage steps forward; the rest wait */
.process-roadmap .process-step {
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.65,.3,1), background .4s ease;
}
.process-roadmap .process-step:not(.is-active):not(.is-passed) { opacity: .58; }
.process-roadmap .process-step.is-active { opacity: 1; }
.process-roadmap .process-step.is-active > span { color: var(--aqua-bright); }
.panel--light .process-roadmap .process-step.is-active > span { color: #0b7079; }

/* ─────────────────────────────────────────────────────────────────────────────
   APPROVAL MEDALLION
   Centred in its panel, carrying the same radar language as the performance
   dial, and rising out of the depth towards the reader as the panel arrives.
   ──────────────────────────────────────────────────────────────────────────── */
.panel--trust .trust-panel {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(2.4rem, 5vw, 3.8rem);
}
.trust-panel__copy { max-width: 760px; }
.trust-panel__copy .eyebrow { margin-bottom: .9rem; }
.trust-panel__copy p:not(.eyebrow) { margin-inline: auto; }

.trust-medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: min(74vw, 330px);
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(121, 183, 255, .38);
  border-radius: 50%;
  color: var(--depth-logo-blue);
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: radial-gradient(circle at 50% 45%, rgba(101,228,220,.10), rgba(8,29,48,.18) 54%, transparent 76%);
  box-shadow: inset 0 0 50px rgba(121,183,255,.08), 0 0 70px rgba(121,183,255,.08);
  /* rising from the depth: far, soft and dim → near, sharp and lit */
  transform: scale(calc(.66 + var(--emerge, 1) * .34));
  filter: blur(calc((1 - var(--emerge, 1)) * 7px));
  opacity: calc(.22 + var(--emerge, 1) * .78);
  will-change: transform, filter, opacity;
}
.trust-medallion strong {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 180px;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
}
.trust-medallion__rings { position: absolute; inset: 0; }
.trust-medallion__rings i {
  position: absolute;
  border: 1px solid rgba(121, 183, 255, .18);
  border-radius: 50%;
}
.trust-medallion__rings i:nth-child(1) { inset: 12%; }
.trust-medallion__rings i:nth-child(2) { inset: 29%; }
.trust-medallion__rings i:nth-child(3) {
  inset: 0 50%;
  width: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(transparent, rgba(108,240,220,.22), transparent);
}
.trust-medallion__beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(108,240,220,.45), transparent);
  animation: radarSweep 14s linear infinite;
}
/* one slow ping, so the dial reads as listening rather than decorated */
.trust-medallion__pulse {
  position: absolute;
  inset: 24%;
  border: 1px solid rgba(165, 255, 244, .5);
  border-radius: 50%;
  opacity: 0;
  animation: medallionPing 7s cubic-bezier(.25, .6, .3, 1) infinite;
}
@keyframes medallionPing {
  0%   { transform: scale(.55); opacity: 0; }
  12%  { opacity: .5; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 720px) {
  .process-roadmap .process-step > span { padding-left: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-medallion {
    transform: none;
    filter: none;
    opacity: 1;
  }
  .trust-medallion__beam,
  .trust-medallion__pulse { animation: none; }
  .process-roadmap__rail i { transition: none; }
  .process-roadmap .process-step { transition: none; }
}

/* Homepage closing transition */
#support.panel--light {
  margin-bottom: clamp(1rem, 2vw, 2rem);
}

#contact.panel--contact {
  min-height: auto;
  align-items: center;
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(6rem, 10vw, 9rem);
}

#contact .contact-layout {
  padding-top: 0;
}

@media (max-width: 600px) {
  #support.panel--light {
    margin-bottom: .75rem;
    padding-bottom: clamp(3.25rem, 13vw, 4.25rem);
  }

  #contact.panel--contact {
    padding: clamp(3.75rem, 15vw, 5rem) 1rem clamp(4.75rem, 18vw, 6rem);
  }
}


/* ==========================================================================
   UX pass — inline desktop navigation, contrast, mobile rhythm, controls
   ========================================================================== */

/* Work, Pricing and Start a project were reachable only through the droplet
   menu, even at full desktop width. They now sit in the header so a first-time
   visitor can see that pricing exists without opening anything. */
.header-links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  margin-left: auto;
  margin-right: clamp(1rem, 2.4vw, 2.4rem);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.header-links a {
  position: relative;
  padding: .35rem 0;
  color: inherit;
  text-decoration: none;
  opacity: .78;
  transition: opacity .3s cubic-bezier(.2,.65,.3,1);
}
.header-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.2,.65,.3,1);
}
.header-links a:hover,
.header-links a:focus-visible { opacity: 1; }
.header-links a:hover::after,
.header-links a:focus-visible::after,
.header-links a[aria-current="page"]::after { transform: scaleX(1); }
.header-links a[aria-current="page"] { opacity: 1; }
.header-links a:focus-visible { outline: 3px solid var(--aqua-bright); outline-offset: 5px; border-radius: 4px; }
.header-links__cta {
  padding: .5rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 1;
}
.header-links__cta::after { display: none; }
.header-links__cta:hover,
.header-links__cta:focus-visible { background: rgba(165, 255, 244, .14); }

@media (min-width: 1000px) {
  .header-links { display: flex; }
}
body.menu-open .header-links { opacity: 0; pointer-events: none; }

/* The surface panel sits over the brightest part of the water, where pale aqua
   on near-white loses almost all of its contrast. A dark halo keeps the eyebrow
   and lede readable there without altering how they look further down. */
.panel--surface .eyebrow,
.panel--surface .hero__copy,
.panel--surface .scroll-cue {
  text-shadow: 0 0 18px rgba(2, 20, 32, .78), 0 1px 3px rgba(2, 20, 32, .6);
}
.panel--surface .eyebrow { color: #c9fff7; }

/* The gauge grabs pointer events on a 44px strip at the right screen edge —
   exactly where a thumb swipes to scroll. On touch it stays as a depth readout
   and stops competing for the gesture; keyboard and mouse keep the full scrub. */
@media (hover: none) and (pointer: coarse) {
  .depth-gauge__scrub {
    width: 24px;
    pointer-events: none;
    touch-action: auto;
  }
  .depth-gauge__tick-label { display: none; }
}

/* Panels were each taller than the screen with their content centred, so a
   phone visitor scrolled through a lot of empty water between ideas. Below
   700px they size to their content instead, and the one full-height panel uses
   svh so it doesn't jump when the address bar collapses. */
@media (max-width: 700px) {
  .panel,
  .panel--services,
  .panel--work,
  .panel--process,
  .panel--contact,
  .panel--approach,
  .panel--standards,
  .panel--included,
  .panel--trust,
  .panel--support {
    min-height: auto;
    padding-block: clamp(4.5rem, 16vw, 6.5rem);
  }
  .panel--surface { min-height: 100svh; }
  .panel--contact { padding-bottom: clamp(4.5rem, 16vw, 6rem); }
}

/* Contact form failure state — a real message rather than a browser error page. */
.contact-form__error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255, 176, 176, .32);
  border-radius: 18px;
  color: #ffdcdc;
  background: rgba(122, 38, 38, .3);
  font-size: .95rem;
}
.contact-form button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* Entry price and the approval promise, sitting under the hero actions. */
.hero__anchor {
  margin: 1.4rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(241, 255, 254, .78);
}
.hero__anchor a {
  color: var(--aqua-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(165, 255, 244, .45);
  padding-bottom: 1px;
}
.hero__anchor a:hover,
.hero__anchor a:focus-visible { border-bottom-color: currentColor; }

/* ==========================================================================
   AUDIT PASS — layout regressions, dialog semantics, touch targets
   These rules sit last on purpose: several correct an earlier rule that would
   otherwise win on source order. Each one names the rule it is answering.
   ========================================================================== */

/* The compact-panel rule above collapses every .panel to content height below
   700px. .page-hero is a .panel, so it lost the 7rem top padding that kept it
   clear of the fixed header — at 375px content began at 72px while the header
   ran to ~94px, putting the eyebrow under the logo on seven pages. */
/* .panel's 7rem top padding is shorter than the fixed header at some sizes, so
   any hero with short content (the 404) collided with the brand. */
.page-hero { padding-top: clamp(9rem, 12vw, 11rem); }

@media (max-width: 700px) {
  .page-hero {
    min-height: 78svh;
    padding-top: calc(7.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: clamp(4.5rem, 16vw, 6.5rem);
  }
}

/* Short landscape viewports: the menu now scrolls, but it should not need to.
   Tightened rows and padding fit all seven links on a 375px-tall screen. */
@media (max-height: 600px) and (orientation: landscape) {
  .site-nav__inner {
    min-height: auto;
    padding-top: max(3.4rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1.2rem, env(safe-area-inset-bottom, 0px));
    align-items: start;
  }
  .site-nav__eyebrow { margin-bottom: .3rem; font-size: .6rem; }
  .site-nav a.site-nav__link { padding-block: .1rem; }
  .site-nav__label { font-size: clamp(1.35rem, 5.6vh, 2.1rem); }
  .site-nav__footer { display: none; }
}

/* Header chrome stays visually stable throughout the descent. The deep-glass
   background fades in smoothly, so white sections never trigger a harsh
   full-header inversion. */
.site-header:not(.is-scrolled) .header-links,
.site-header:not(.is-scrolled) .menu-toggle__label {
  text-shadow: 0 1px 8px rgba(0, 22, 34, .72);
}

/* Header quick links were #0a4d59 at .78 opacity (~3.6:1 over the surface).
   Full opacity carries the contrast; the underline still signals hover. */
.header-links a { opacity: 1; }

/* The entry price and the approval promise are the hero's strongest trust cue
   and were its least legible line. A text-shadow alone cannot be relied on over
   a gradient that keeps moving, so this sits on a scrim in the site's existing
   pill language — 5.7:1 even against the brightest water. */
.hero__anchor {
  display: inline-block;
  padding: .5rem .95rem;
  border-radius: 999px;
  color: rgba(241, 255, 254, .98);
  font-size: .86rem;
  background: rgba(3, 20, 32, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(2, 20, 32, .6);
}
.hero__anchor a { border-bottom-color: rgba(165, 255, 244, .6); }
@media (max-width: 430px) {
  .hero__anchor { padding: .45rem .8rem; font-size: .8rem; }
}

/* Footer links were 12.8px text with no padding — ~18px of touch height. */
@media (max-width: 650px) {
  .site-footer-wide__group a {
    display: block;
    padding-block: .55rem;
    line-height: 1.3;
  }
}

/* Legal small print was .58rem (~9.3px). */
.site-footer-wide__bottom { font-size: .68rem; }

/* Centred action row on the homepage closing panel — was an inline style. */
.hero__actions--centred { justify-content: center; }

/* Lightbox is now a native <dialog>: reset the UA box so the existing
   positioning keeps working, and style the backdrop it brings with it. */
dialog.plate-lightbox {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: hidden;
}
dialog.plate-lightbox::backdrop { background: rgba(2, 12, 20, .82); backdrop-filter: blur(6px); }
dialog.plate-lightbox:not([open]) { display: none; }
@media (prefers-reduced-motion: reduce) {
  dialog.plate-lightbox::backdrop { backdrop-filter: none; }
}

/* Marks the one optional field on the enquiry form. */
.field__optional { font-weight: 400; opacity: .78; font-size: .92em; }

/* Touch targets: on coarse pointers the footer contact and nav links, the
   scroll cue and the hero's inline price link were 17–20px tall. Padding is
   added by pointer type rather than width so landscape phones get it too. */
@media (pointer: coarse) {
  .site-footer-wide__contact a,
  .site-footer-wide__group a {
    display: inline-block;
    padding-block: .45rem;
    line-height: 1.3;
  }
  .site-footer-wide__group a { display: block; }
  .scroll-cue { padding-block: .35rem; }
  .hero__anchor a { display: inline-block; padding-block: .25rem; }
}

/* ========================================================================== 
   WATER JOURNEY — homepage media, nautical process and image-led packages
   Scoped to the homepage and pricing page so the shared components elsewhere
   keep their established behaviour.
   ========================================================================== */

/* Hero film */
.home-page #surface {
  isolation: isolate;
  overflow: hidden;
  background: #03101a;
}
.home-page #surface .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #041a28 url('/assets/hero-water-poster.webp') center / cover no-repeat;
}
.home-page #surface .hero-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(.92) contrast(1.05) brightness(.9);
  transform: scale(1.015);
}
.home-page #surface .hero-media__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 15, 25, .76) 0%, rgba(2, 17, 28, .48) 46%, rgba(2, 17, 28, .20) 100%),
    linear-gradient(180deg, rgba(1, 14, 23, .10) 0%, rgba(2, 16, 27, .16) 54%, rgba(2, 14, 23, .72) 100%);
}
.home-page #surface .hero,
.home-page #surface .scroll-cue {
  position: relative;
  z-index: 2;
}
.home-page #surface .hero__title,
.home-page #surface .hero__copy {
  text-shadow: 0 3px 28px rgba(1, 12, 20, .55);
}

/* Standalone organic moving-water interlude */
.water-interlude {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: clamp(650px, 84vh, 900px);
  margin: clamp(2.4rem, 6vw, 5.5rem) clamp(.6rem, 1.8vw, 2rem);
  padding: clamp(4.5rem, 8vw, 7.5rem) clamp(1rem, 5vw, 5rem);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: clamp(22px, 3.2vw, 42px);
  background:
    radial-gradient(circle at 76% 32%, rgba(88, 151, 165, .10), transparent 34%),
    radial-gradient(circle at 18% 72%, rgba(18, 84, 103, .06), transparent 30%),
    linear-gradient(145deg, #fbfdfd, #eef4f5 72%, #e5edef);
  box-shadow: 0 70px 150px -70px rgba(0, 12, 20, .6), inset 0 1px 0 #fff;
}
.water-interlude__inner {
  position: relative;
  width: min(100%, 1420px);
  min-height: clamp(500px, 60vw, 700px);
  margin-inline: auto;
}
.water-interlude__visual {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 5vw, 6rem);
  width: min(73vw, 1010px);
  aspect-ratio: 1.47;
  overflow: hidden;
  border-radius: 42% 58% 61% 39% / 37% 42% 58% 63%;
  background: #173544 url('/assets/organic-water-poster.webp') center 52% / cover no-repeat;
  box-shadow: 0 44px 90px rgba(3, 28, 41, .2);
  transform: translateY(-50%);
  -webkit-mask-image: url('/assets/organic-water-mask.svg');
  mask-image: url('/assets/organic-water-mask.svg');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.water-interlude__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(.78) contrast(1.08) brightness(.82);
  transform: scale(1.025);
}
.water-interlude__drop {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(20, 68, 82, .10);
  background: #254858 url('/assets/organic-water-poster.webp') center / cover no-repeat;
  box-shadow: 0 22px 44px rgba(5, 32, 43, .12);
}
.water-interlude__drop--one {
  top: 8%;
  left: 3%;
  width: clamp(76px, 10vw, 145px);
  aspect-ratio: 1.08;
  border-radius: 61% 39% 52% 48% / 45% 58% 42% 55%;
  transform: rotate(-9deg);
}
.water-interlude__drop--two {
  right: 0;
  bottom: 5%;
  width: clamp(54px, 7vw, 98px);
  aspect-ratio: .86;
  border-radius: 46% 54% 67% 33% / 58% 38% 62% 42%;
  transform: rotate(14deg);
}
.water-interlude__drop--three {
  bottom: 1%;
  left: 20%;
  width: clamp(38px, 4.5vw, 66px);
  aspect-ratio: 1.2;
  border-radius: 64% 36% 42% 58% / 52% 61% 39% 48%;
  opacity: .72;
}

/* Homepage process as an abstract nautical chart */
.home-page #process {
  overflow: hidden;
}
.home-page #process .process-layout--journey {
  display: block;
}
.home-page #process .section-intro--process {
  position: relative;
  top: auto;
  max-width: 830px;
}
.home-page #process .section-intro--process h2 {
  max-width: 800px;
}
.process-map {
  position: relative;
  min-height: clamp(690px, 61vw, 770px);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  isolation: isolate;
}
.process-map__surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border: 1px solid rgba(165, 255, 244, .16);
  border-radius: clamp(24px, 3vw, 38px);
  background:
    radial-gradient(circle at 18% 28%, rgba(101, 228, 220, .10), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(121, 183, 255, .10), transparent 26%),
    linear-gradient(rgba(165, 255, 244, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 255, 244, .032) 1px, transparent 1px),
    linear-gradient(145deg, rgba(5, 45, 61, .82), rgba(2, 21, 34, .92));
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 36px 80px rgba(0, 9, 17, .22);
}
.process-map__surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 46%, rgba(165, 255, 244, .035) 46.2%, transparent 46.5% 100%);
  pointer-events: none;
}
.process-route {
  position: absolute;
  z-index: 1;
  inset: 4% 3%;
  width: 94%;
  height: 92%;
  overflow: visible;
  pointer-events: none;
}
.process-route--mobile { display: none; }
.process-route__contours path {
  fill: none;
  stroke: rgba(165, 255, 244, .07);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.process-route__base,
.process-route__progress {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.process-route__base {
  stroke: rgba(203, 247, 247, .27);
  stroke-width: 2;
  stroke-dasharray: 5 11;
}
.process-route__progress {
  stroke: var(--aqua-bright);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(101, 228, 220, .7));
}
.process-route__waypoint circle:first-child {
  fill: rgba(3, 20, 32, .95);
  stroke: rgba(203, 247, 247, .52);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill .3s ease, stroke .3s ease, filter .3s ease;
}
.process-route__waypoint circle:last-child {
  fill: rgba(203, 247, 247, .7);
  transition: fill .3s ease;
}
.process-route__waypoint.is-passed circle:first-child {
  fill: rgba(101, 228, 220, .22);
  stroke: var(--aqua);
}
.process-route__waypoint.is-active circle:first-child {
  fill: rgba(165, 255, 244, .24);
  stroke: var(--aqua-bright);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 9px rgba(165, 255, 244, .75));
}
.process-route__waypoint.is-passed circle:last-child,
.process-route__waypoint.is-active circle:last-child { fill: var(--aqua-bright); }
.process-route__ship {
  filter: drop-shadow(0 0 8px rgba(165, 255, 244, .62));
  will-change: transform;
}
.process-route__vessel {
  fill: #dffffa;
  stroke: rgba(3, 37, 48, .8);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.process-route__deck { fill: #0b6170; }
.process-route__wake {
  fill: none;
  stroke: rgba(165, 255, 244, .5);
  stroke-width: 1.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.process-map .process-list {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.process-map .process-step {
  position: absolute;
  display: block;
  width: min(26%, 310px);
  min-height: 168px;
  padding: clamp(1.15rem, 2vw, 1.55rem);
  border: 1px solid rgba(210, 244, 246, .18);
  border-radius: 20px;
  color: var(--ink);
  background: rgba(3, 25, 38, .86);
  box-shadow: 0 22px 52px rgba(0, 9, 17, .24), inset 0 1px 0 rgba(255, 255, 255, .055);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  opacity: .78;
  transition: opacity .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.process-map .process-step:nth-child(1) { top: 7%; left: 2%; }
.process-map .process-step:nth-child(2) { top: 62%; left: 28%; }
.process-map .process-step:nth-child(3) { top: 7%; left: 55%; }
.process-map .process-step:nth-child(4) { top: 61%; right: 2%; }
.process-map .process-step::before { display: none; }
.process-map .process-step > span {
  display: block;
  margin-bottom: 1.45rem;
  padding: 0;
  color: rgba(165, 255, 244, .72);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .13em;
}
.process-map .process-step h3 {
  margin: 0 0 .55rem;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1.06;
}
.process-map .process-step p {
  margin: 0;
  color: rgba(225, 245, 247, .78);
  font-size: clamp(.88rem, 1.15vw, .98rem);
}
.process-map .process-step.is-passed { opacity: .9; }
.process-map .process-step.is-active {
  opacity: 1;
  border-color: rgba(165, 255, 244, .5);
  background: rgba(5, 45, 59, .94);
  box-shadow: 0 24px 58px rgba(0, 9, 17, .3), 0 0 30px rgba(101, 228, 220, .08), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.process-map .process-step.is-active > span { color: var(--aqua-bright); }

/* Image-led pricing cards */
.pricing-page #packages .tier-grid {
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.4rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.pricing-page #packages .tier-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(8, 58, 74, .95), rgba(2, 23, 36, .98));
  box-shadow: 0 34px 76px rgba(0, 8, 15, .25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pricing-page #packages .tier-card::after { display: none; }
.pricing-page #packages .tier-card__media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(205px, 18vw, 255px);
  overflow: hidden;
  background: #0b3445;
}
.pricing-page #packages .tier-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(2, 21, 34, .34));
  pointer-events: none;
}
.pricing-page #packages .tier-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .65, .3, 1);
}
.pricing-page #packages .tier-card--essential .tier-card__media img { object-position: 50% 52%; }
.pricing-page #packages .tier-card--reef .tier-card__media img { object-position: 50% 30%; }
.pricing-page #packages .tier-card--deep .tier-card__media img { object-position: 48% 44%; }
.pricing-page #packages .tier-card:hover .tier-card__media img { transform: scale(1.025); }
.pricing-page #packages .tier-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
}
.pricing-page #packages .tier-card__body > .support-path__depth { align-self: flex-start; }
.pricing-page #packages .tier-card__body .tier-card__price { margin-top: 2rem; }
.pricing-page #packages .tier-card__body .text-link { margin-top: auto; align-self: flex-start; }
.pricing-page #packages .tier-card--light {
  --indicator: #0b7079;
  border-color: rgba(9, 64, 78, .16);
  color: #072b37;
  background: linear-gradient(155deg, #ffffff, #edf5f6);
  box-shadow: 0 34px 70px rgba(0, 12, 20, .19), inset 0 1px 0 #fff;
}
.pricing-page #packages .tier-card--light .tier-card__media::after {
  background: linear-gradient(180deg, transparent 62%, rgba(7, 43, 55, .12));
}
.pricing-page #packages .tier-card--light .support-path__depth {
  border-color: rgba(9, 64, 78, .16);
  color: #0a5f68;
  background: rgba(11, 112, 121, .07);
}
.pricing-page #packages .tier-card--light .tier-card__price strong,
.pricing-page #packages .tier-card--light .tier-card__kicker { color: #072b37; }
.pricing-page #packages .tier-card--light .tier-card__body > p:not(.tier-card__price):not(.tier-card__kicker):not(.tier-card__note),
.pricing-page #packages .tier-card--light .tier-card__note { color: rgba(9, 43, 55, .76); }
.pricing-page #packages .tier-card--light ul { color: rgba(9, 43, 55, .82); }
.pricing-page #packages .tier-card--light li { border-bottom-color: rgba(9, 64, 78, .13); }
.pricing-page #packages .tier-card--light li::before { color: #0b7079; }
.pricing-page #packages .tier-card--light .text-link { color: #0a5f68; }
.pricing-page #packages .tier-card--featured {
  border-color: rgba(108, 240, 220, .45);
  background: linear-gradient(150deg, #0a5a6f, #063347 52%, #021a2a);
  box-shadow: 0 42px 88px rgba(0, 8, 15, .38), 0 0 42px rgba(101, 228, 220, .08);
}
.pricing-page #packages .tier-card--featured .plan-card__tag {
  position: absolute;
  z-index: 5;
  top: 1rem;
  right: 1rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(165, 255, 244, .35);
  border-radius: 999px;
  color: #dffffa;
  background: rgba(2, 22, 34, .72);
  box-shadow: 0 10px 24px rgba(0, 9, 16, .24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 961px) {
  .pricing-page #packages .tier-card--featured { transform: translateY(-1.35rem); }
  .pricing-page #packages .tier-card--featured:hover { transform: translateY(calc(-1.35rem - 4px)); }
}

@media (max-width: 900px) {
  .home-page #process .section-intro--process { max-width: 720px; }
  .process-map {
    min-height: auto;
    padding-block: 1rem;
  }
  .process-route--desktop { display: none; }
  .process-route--mobile {
    display: block;
    top: 2.5rem;
    bottom: 2.5rem;
    left: .95rem;
    right: auto;
    width: 64px;
    height: calc(100% - 5rem);
  }
  .process-map .process-list {
    position: relative;
    display: grid;
    gap: 2rem;
    padding: 2rem 1.25rem 2rem 5.75rem;
  }
  .process-map .process-step,
  .process-map .process-step:nth-child(n) {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 180px;
  }
}

@media (max-width: 960px) {
  .pricing-page #packages .tier-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    padding-top: 0;
  }
  .pricing-page #packages .tier-card {
    width: min(100%, 720px);
    margin-inline: auto;
  }
  .pricing-page #packages .tier-card--featured { transform: none; }
  .pricing-page #packages .tier-card__media { height: clamp(220px, 48vw, 330px); }
  .pricing-page #packages .tier-card--reef .tier-card__media img { object-position: 50% 26%; }
}

@media (max-width: 700px) {
  .home-page #surface .hero-media__video { object-position: 54% 42%; }
  .home-page #surface .hero-media__overlay {
    background:
      linear-gradient(90deg, rgba(2, 15, 25, .72), rgba(2, 17, 28, .32)),
      linear-gradient(180deg, rgba(1, 14, 23, .08) 0%, rgba(2, 16, 27, .22) 55%, rgba(2, 14, 23, .78) 100%);
  }
  .water-interlude {
    min-height: auto;
    margin-inline: .5rem;
    padding: clamp(3.6rem, 15vw, 5rem) .75rem;
  }
  .water-interlude__inner {
    min-height: clamp(440px, 145vw, 590px);
  }
  .water-interlude__visual {
    right: auto;
    left: 50%;
    width: min(88vw, 440px);
    aspect-ratio: .72;
    margin: 0;
    border-radius: 47% 53% 44% 56% / 34% 46% 54% 66%;
    transform: translate(-50%, -50%);
    -webkit-mask-image: url('/assets/organic-water-mask-mobile.svg');
    mask-image: url('/assets/organic-water-mask-mobile.svg');
  }
  .water-interlude__video { object-position: 50% 50%; }
  .water-interlude__drop--one {
    top: 1%;
    left: 2%;
    width: clamp(58px, 18vw, 82px);
  }
  .water-interlude__drop--two {
    right: 1%;
    bottom: 1%;
    width: clamp(46px, 13vw, 64px);
  }
  .water-interlude__drop--three { display: none; }
  .home-page #process { padding-inline: clamp(1rem, 4vw, 1.5rem); }
  .process-map { margin-top: 3rem; }
  .process-map .process-list { padding-left: 5.25rem; }
  .process-map .process-step { padding: 1.2rem; }
  .process-map .process-step > span { margin-bottom: 1.15rem; }
}

@media (max-width: 420px) {
  .process-route--mobile {
    left: .45rem;
    width: 54px;
  }
  .process-map .process-list {
    gap: 1.5rem;
    padding: 1.5rem .8rem 1.5rem 4.45rem;
  }
  .process-map .process-step { min-height: 172px; }
  .process-map .process-step h3 { font-size: 1.3rem; }
  .pricing-page #packages .tier-card__media { height: 220px; }
  .pricing-page #packages .tier-card__body { padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page #surface .hero-media__video,
  .water-interlude__video { display: none; }
  .process-route__progress {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .process-route__ship { display: none; }
  .process-route__waypoint circle,
  .process-map .process-step,
  .pricing-page #packages .tier-card__media img { transition: none; }
  .process-map .process-step { opacity: 1 !important; }
  .pricing-page #packages .tier-card:hover .tier-card__media img { transform: none; }
}

@media print {
  .home-page #surface .hero-media__video,
  .water-interlude__video,
  .liquid-bed,
  .process-route__ship { display: none; }
  .water-interlude { min-height: 520px; break-inside: avoid; }
  .water-interlude__visual,
  .water-interlude__drop,
  .liquid-bed__mass,
  .liquid-bed__satellite { --drift: 0px !important; }
  .process-map { break-inside: avoid; }
}

/* ========================================================================== 
   V63 — GLOBAL SURFACE FILM AND REFINEMENTS
   ========================================================================== */

/* A single local surface-light film now opens every public-facing route. */
.global-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0a4058 url('/assets/hero-water-poster.webp') 50% 38% / cover no-repeat;
}
.global-hero-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: saturate(.92) contrast(1.04) brightness(.9);
}
.global-hero-media__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 15, 25, .78) 0%, rgba(2, 17, 28, .5) 48%, rgba(2, 17, 28, .24) 100%),
    linear-gradient(180deg, rgba(1, 14, 23, .12) 0%, rgba(2, 16, 27, .2) 56%, rgba(2, 14, 23, .78) 100%);
}
.inner-page .page-hero,
.case-study-page .case-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f4fbfa;
}
.inner-page .page-hero {
  min-height: clamp(430px, 56svh, 650px);
  padding-top: clamp(8.5rem, 11vw, 10.5rem);
  padding-bottom: clamp(3.75rem, 7vw, 5.5rem);
}
.case-study-page .case-hero {
  min-height: clamp(540px, 58svh, 720px);
  padding-top: clamp(9rem, 11vw, 11rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}
.inner-page .page-hero__inner,
.case-study-page .case-hero__inner {
  position: relative;
  z-index: 2;
}
.inner-page .page-hero .eyebrow,
.inner-page .page-hero__copy,
.case-study-page .case-hero__copy {
  color: rgba(239, 253, 253, .88);
  text-shadow: 0 3px 24px rgba(1, 12, 20, .5);
}
.inner-page .page-hero h1,
.case-study-page .case-hero h1 {
  color: #f7ffff;
  text-shadow: 0 4px 34px rgba(1, 12, 20, .54);
}
.inner-page .page-hero h1 span { color: var(--aqua-bright); }
.inner-page .page-hero .button--ghost,
.case-study-page .case-hero .button--ghost {
  border-color: rgba(244, 255, 254, .68);
  color: #f7ffff;
}

/* Header chrome remains white before and after scroll on every standard page. */
.site-header,
.site-header.is-scrolled,
body.menu-open .site-header {
  color: #ffffff;
  --menu-drop-color: #ffffff;
  --menu-label-color: #ffffff;
}
.site-header .header-links a,
.site-header.is-scrolled .header-links a,
.site-header .menu-toggle,
.site-header .menu-toggle__label,
.site-header .menu-toggle__drop,
.site-header .menu-toggle__close { color: #ffffff; }
.site-header .brand__logo--default,
.site-header.is-scrolled .brand__logo--default,
body.menu-open .site-header .brand__logo--default { opacity: 0; }
.site-header .brand__logo--light,
.site-header.is-scrolled .brand__logo--light,
body.menu-open .site-header .brand__logo--light { opacity: 1; }

/* All three package photographs dissolve into their corresponding card body. */
.pricing-page #packages .tier-card__media {
  height: clamp(230px, 20vw, 285px);
  margin-bottom: -1px;
}
.pricing-page #packages .tier-card__body {
  z-index: 3;
  margin-top: -64px;
  padding-top: calc(clamp(1.5rem, 2.6vw, 2.2rem) + 64px);
}
.pricing-page #packages .tier-card--essential .tier-card__media::after {
  background: linear-gradient(180deg, transparent 46%, rgba(246, 250, 251, .12) 62%, rgba(246, 250, 251, .7) 84%, #f6fafb 100%);
}
.pricing-page #packages .tier-card--essential .tier-card__body {
  background: linear-gradient(180deg, rgba(246, 250, 251, 0) 0, #f6fafb 64px, #f1f7f8 100%);
}
.pricing-page #packages .tier-card--reef .tier-card__media::after {
  background: linear-gradient(180deg, transparent 44%, rgba(6, 51, 71, .1) 60%, rgba(6, 51, 71, .74) 84%, #063347 100%);
}
.pricing-page #packages .tier-card--reef .tier-card__body {
  background: linear-gradient(180deg, rgba(6, 51, 71, 0) 0, #063347 64px, #04273a 100%);
}
.pricing-page #packages .tier-card--deep .tier-card__media::after {
  background: linear-gradient(180deg, transparent 46%, rgba(239, 246, 247, .1) 62%, rgba(239, 246, 247, .72) 84%, #eff6f7 100%);
}
.pricing-page #packages .tier-card--deep .tier-card__body {
  background: linear-gradient(180deg, rgba(239, 246, 247, 0) 0, #eff6f7 64px, #e9f2f3 100%);
}

/* The pricing radar is dormant off-screen and comes alive only while visible. */
.support-radar {
  isolation: isolate;
  background: radial-gradient(circle, rgba(108, 240, 220, .035), transparent 66%);
}
.support-radar b {
  height: 2px;
  filter: drop-shadow(0 0 6px rgba(108, 240, 220, .58));
  animation-duration: 11s;
  animation-play-state: paused;
}
.support-radar__dot {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a5fff4;
  box-shadow: 0 0 0 3px rgba(165, 255, 244, .1), 0 0 12px rgba(108, 240, 220, .58);
  opacity: .5;
  will-change: transform, opacity;
  animation-play-state: paused;
}
.support-radar__dot--one {
  top: 25%;
  left: 31%;
  animation: radarDotOne 13s ease-in-out infinite alternate, radarContact 11s linear 1.6s infinite;
}
.support-radar__dot--two {
  top: 38%;
  left: 69%;
  width: 6px;
  height: 6px;
  animation: radarDotTwo 16s ease-in-out infinite alternate, radarContact 11s linear 4.2s infinite;
}
.support-radar__dot--three {
  top: 70%;
  left: 42%;
  width: 7px;
  height: 7px;
  animation: radarDotThree 18s ease-in-out infinite alternate, radarContact 11s linear 7.1s infinite;
}
.support-radar__dot--four {
  top: 59%;
  left: 76%;
  width: 5px;
  height: 5px;
  animation: radarDotFour 15s ease-in-out infinite alternate, radarContact 11s linear 8.8s infinite;
}
.support-radar.is-visible b,
.support-radar.is-visible .support-radar__dot { animation-play-state: running; }

@keyframes radarDotOne {
  from { transform: translate3d(-5px, 3px, 0); }
  to { transform: translate3d(13px, -8px, 0); }
}
@keyframes radarDotTwo {
  from { transform: translate3d(6px, -7px, 0); }
  to { transform: translate3d(-12px, 10px, 0); }
}
@keyframes radarDotThree {
  from { transform: translate3d(-7px, -4px, 0); }
  to { transform: translate3d(10px, 7px, 0); }
}
@keyframes radarDotFour {
  from { transform: translate3d(4px, 8px, 0); }
  to { transform: translate3d(-10px, -6px, 0); }
}
@keyframes radarContact {
  0%, 78%, 100% { opacity: .46; filter: brightness(1); }
  84% { opacity: 1; filter: brightness(1.6); box-shadow: 0 0 0 7px rgba(165, 255, 244, .06), 0 0 18px rgba(108, 240, 220, .9); }
  91% { opacity: .62; filter: brightness(1.1); }
}

@media (max-width: 960px) {
  .pricing-page #packages .tier-card__media { height: clamp(250px, 48vw, 340px); }
}

@media (max-width: 700px) {
  .global-hero-media,
  .global-hero-media__video { object-position: 56% 36%; }
  .global-hero-media__overlay {
    background:
      linear-gradient(90deg, rgba(2, 15, 25, .74), rgba(2, 17, 28, .34)),
      linear-gradient(180deg, rgba(1, 14, 23, .12) 0%, rgba(2, 16, 27, .3) 55%, rgba(2, 14, 23, .82) 100%);
  }
  .inner-page .page-hero {
    min-height: max(460px, 56svh);
    padding-top: calc(7.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: clamp(3.5rem, 13vw, 5rem);
  }
  .case-study-page .case-hero {
    min-height: max(600px, 58svh);
    padding-top: calc(7.8rem + env(safe-area-inset-top, 0px));
    padding-bottom: 4.5rem;
  }

  /* On phones the frame becomes a short bridge into Process, not a spare page. */
  .water-interlude {
    z-index: 4;
    min-height: 0;
    margin: clamp(1.25rem, 5vw, 2rem) .5rem clamp(-4.25rem, -12vw, -3rem);
    padding: clamp(1rem, 4vw, 1.5rem) 0 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .water-interlude::after {
    content: '';
    position: absolute;
    z-index: 3;
    right: -.5rem;
    bottom: -1px;
    left: -.5rem;
    height: clamp(5rem, 20vw, 7rem);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 82, 111, 0), rgba(10, 82, 111, .7) 56%, #0a526f 100%);
  }
  .water-interlude__inner {
    width: 100%;
    min-height: clamp(215px, 56vw, 320px);
  }
  .water-interlude__visual {
    top: 0;
    right: auto;
    left: 50%;
    width: min(96vw, 560px);
    aspect-ratio: 1.68;
    border-radius: 46% 54% 58% 42% / 42% 47% 53% 58%;
    transform: translateX(-50%);
    -webkit-mask-image: url('/assets/organic-water-mask.svg');
    mask-image: url('/assets/organic-water-mask.svg');
  }
  .water-interlude__video { object-position: 50% 48%; }
  .water-interlude__drop { display: none; }
  .home-page #process {
    z-index: 2;
    margin-top: 0;
    padding-top: clamp(7.25rem, 25vw, 9rem);
    border-top-color: transparent;
  }
  .home-page #process::before { display: none; }

  .pricing-page #packages .tier-card__media { height: clamp(235px, 66vw, 320px); }
  .pricing-page #packages .tier-card__body {
    margin-top: -52px;
    padding: calc(1.35rem + 52px) 1.35rem 1.35rem;
  }
  .pricing-page #packages .tier-card--essential .tier-card__body {
    background: linear-gradient(180deg, rgba(246, 250, 251, 0) 0, #f6fafb 52px, #f1f7f8 100%);
  }
  .pricing-page #packages .tier-card--reef .tier-card__body {
    background: linear-gradient(180deg, rgba(6, 51, 71, 0) 0, #063347 52px, #04273a 100%);
  }
  .pricing-page #packages .tier-card--deep .tier-card__body {
    background: linear-gradient(180deg, rgba(239, 246, 247, 0) 0, #eff6f7 52px, #e9f2f3 100%);
  }
}

/* ==========================================================================
   Hero foot and header CTA fit
   ========================================================================== */

/* The label is uppercase mono at .12em tracking, so the trailing letter-space
   after the final glyph also drags it left inside the pill; the indent cancels
   that so it reads optically centred rather than mathematically centred. */
/* Specificity, not spacing, was the bug: `.header-links a` scores (0,1,1) and
   outranked `.header-links__cta` at (0,1,0), so the pill's horizontal padding
   was never applied at all and the border sat flush against the caps. Matching
   on both classes puts the CTA back in control of its own box. */
.header-links a.header-links__cta {
  display: inline-flex;
  align-items: center;
  padding: .62rem 1.6rem;
  text-indent: .12em;
  line-height: 1.15;
  white-space: nowrap;
}

@media (min-width: 701px) {
  /* The cue was absolutely positioned against the panel while the hero block
     was vertically centred in the same box, so on shorter viewports the two
     collided. Giving the panel an explicit second row puts a guaranteed gap
     between them at every height instead of relying on them missing. */
  .home-page #surface {
    grid-template-rows: 1fr auto;
    row-gap: clamp(3rem, 6vh, 5rem);
    padding-bottom: clamp(4rem, 7vh, 6rem);
  }
  .home-page #surface .hero { align-self: center; }
  .home-page #surface .scroll-cue {
    position: relative;
    bottom: auto;
    left: auto;
    align-self: end;
    justify-self: start;
    /* Match the hero's left edge rather than the panel's, so the rule, the
       label and the buttons all start on the same vertical line. */
    margin-left: max(0px, calc((100% - var(--max)) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-hero-media__video { display: none; }
  .support-radar b,
  .support-radar__dot { animation: none !important; }
  .support-radar__dot { opacity: .72; transform: none; }
}

@media print {
  .global-hero-media__video,
  .support-radar__dot { display: none !important; }
}

/* ==========================================================================
   LIQUID FRAME
   One composition used twice, mirrored. A water mass anchored to a viewport
   edge and bleeding past it, a ghost of the same silhouette behind it, three
   satellites that read as having come off it, and a static particle field
   tying the ground together. Desktop only: the tuned mobile bridge below
   700px is untouched and only gains the copy block.
   ========================================================================== */

.water-interlude__copy { position: relative; z-index: 3; }
.water-interlude__copy .eyebrow { color: #0b7078; margin-bottom: .9rem; }
.water-interlude__copy h2 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1.0;
  letter-spacing: -.05em;
  font-weight: 590;
  color: #0b2b39;
  text-wrap: balance;
}
.water-interlude__copy p:not(.eyebrow) {
  margin: 1.3rem 0 0;
  max-width: 42ch;
  color: #40626f;
  font-size: clamp(.98rem, 1.2vw, 1.1rem);
  line-height: 1.62;
}
.water-interlude__ghost,
.water-interlude__particles { display: none; }

@media (min-width: 701px) {
  .water-interlude {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: center;
    justify-items: stretch;
    min-height: clamp(540px, 68vh, 740px);
    margin: 0;
    padding: clamp(4.5rem, 8vh, 7rem) 0;
    padding-left: max(clamp(1rem, 5vw, 5rem), calc((100% - var(--max)) / 2));
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(180deg, #fbfdfd 0%, #eef4f5 44%, #d8e6e9 76%, rgba(216, 230, 233, 0) 100%);
  }
  /* The visual layers become a full-bleed canvas behind the copy column, so
     every shape can be positioned against the viewport rather than a card. */
  .water-interlude__inner {
    position: absolute;
    inset: 0;
    width: auto;
    min-height: 0;
    margin: 0;
    pointer-events: none;
  }
  .water-interlude__copy { grid-column: 1; padding-right: clamp(1rem, 2vw, 2.5rem); }

  /* The mass, anchored right and bleeding 9% past the edge. */
  .water-interlude__visual {
    top: 50%;
    right: -9%;
    left: auto;
    width: 56%;
    height: clamp(430px, 60vh, 660px);
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    transform: translateY(calc(-50% + var(--drift, 0px)));
    -webkit-mask-image: url('/assets/liquid-mass-mask.svg');
    mask-image: url('/assets/liquid-mass-mask.svg');
  }
  .water-interlude__video {
    filter: saturate(.6) contrast(1.1) brightness(.86);
    object-position: 50% 50%;
  }

  /* Ghost: same silhouette, larger, offset up and left, flat tint only. Kept
     faint enough to read as a tonal shift rather than a second shape. */
  .water-interlude__ghost {
    position: absolute;
    display: block;
    top: 50%;
    right: -6%;
    width: 60%;
    height: clamp(500px, 70vh, 780px);
    background: rgba(20, 86, 105, .028);
    transform: translateY(-54%);
    -webkit-mask-image: url('/assets/liquid-mass-mask.svg');
    mask-image: url('/assets/liquid-mass-mask.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Painted once as a single background image — never animated, never 32 nodes. */
  .water-interlude__particles {
    position: absolute;
    display: block;
    inset: -4% 0 -4% 30%;
    background-image:
    radial-gradient(circle 1.9px at 53.8% 15.1%, rgba(12,44,58,0.133) 0 1.9px, transparent 1.9px),
    radial-gradient(circle 1.0px at 71.0% 36.6%, rgba(12,44,58,0.211) 0 1.0px, transparent 1.0px),
    radial-gradient(circle 1.0px at 16.4% 43.4%, rgba(12,44,58,0.136) 0 1.0px, transparent 1.0px),
    radial-gradient(circle 1.1px at 62.4% 82.7%, rgba(12,44,58,0.16) 0 1.1px, transparent 1.1px),
    radial-gradient(circle 1.8px at 77.4% 94.8%, rgba(12,44,58,0.191) 0 1.8px, transparent 1.8px),
    radial-gradient(circle 2.2px at 98.7% 4.7%, rgba(12,44,58,0.172) 0 2.2px, transparent 2.2px),
    radial-gradient(circle 1.4px at 34.5% 11.8%, rgba(12,44,58,0.267) 0 1.4px, transparent 1.4px),
    radial-gradient(circle 1.9px at 39.0% 58.2%, rgba(12,44,58,0.187) 0 1.9px, transparent 1.9px),
    radial-gradient(circle 1.0px at 71.8% 6.3%, rgba(12,44,58,0.157) 0 1.0px, transparent 1.0px),
    radial-gradient(circle 1.4px at 80.9% 42.8%, rgba(12,44,58,0.225) 0 1.4px, transparent 1.4px),
    radial-gradient(circle 2.1px at 64.7% 30.0%, rgba(12,44,58,0.246) 0 2.1px, transparent 2.1px),
    radial-gradient(circle 1.7px at 46.0% 57.4%, rgba(12,44,58,0.278) 0 1.7px, transparent 1.7px),
    radial-gradient(circle 2.4px at 84.1% 28.8%, rgba(12,44,58,0.141) 0 2.4px, transparent 2.4px),
    radial-gradient(circle 1.1px at 61.9% 75.7%, rgba(12,44,58,0.208) 0 1.1px, transparent 1.1px),
    radial-gradient(circle 2.0px at 16.8% 66.8%, rgba(12,44,58,0.223) 0 2.0px, transparent 2.0px),
    radial-gradient(circle 1.9px at 92.9% 31.4%, rgba(12,44,58,0.227) 0 1.9px, transparent 1.9px),
    radial-gradient(circle 2.2px at 74.1% 45.6%, rgba(12,44,58,0.29) 0 2.2px, transparent 2.2px),
    radial-gradient(circle 1.0px at 66.3% 66.4%, rgba(12,44,58,0.246) 0 1.0px, transparent 1.0px),
    radial-gradient(circle 2.1px at 78.7% 99.3%, rgba(12,44,58,0.171) 0 2.1px, transparent 2.1px),
    radial-gradient(circle 0.9px at 59.2% 66.9%, rgba(12,44,58,0.203) 0 0.9px, transparent 0.9px),
    radial-gradient(circle 1.0px at 37.5% 11.7%, rgba(12,44,58,0.258) 0 1.0px, transparent 1.0px),
    radial-gradient(circle 1.5px at 32.5% 24.8%, rgba(12,44,58,0.277) 0 1.5px, transparent 1.5px),
    radial-gradient(circle 1.7px at 25.0% 44.9%, rgba(12,44,58,0.279) 0 1.7px, transparent 1.7px),
    radial-gradient(circle 1.3px at 89.6% 86.4%, rgba(12,44,58,0.195) 0 1.3px, transparent 1.3px),
    radial-gradient(circle 2.3px at 56.9% 88.4%, rgba(12,44,58,0.147) 0 2.3px, transparent 2.3px),
    radial-gradient(circle 1.3px at 38.5% 23.2%, rgba(12,44,58,0.207) 0 1.3px, transparent 1.3px),
    radial-gradient(circle 0.9px at 74.8% 26.3%, rgba(12,44,58,0.195) 0 0.9px, transparent 0.9px),
    radial-gradient(circle 2.3px at 57.8% 56.6%, rgba(12,44,58,0.244) 0 2.3px, transparent 2.3px),
    radial-gradient(circle 1.9px at 69.5% 61.8%, rgba(12,44,58,0.13) 0 1.9px, transparent 1.9px),
    radial-gradient(circle 2.2px at 94.3% 78.0%, rgba(12,44,58,0.264) 0 2.2px, transparent 2.2px),
    radial-gradient(circle 1.1px at 59.8% 39.9%, rgba(12,44,58,0.234) 0 1.1px, transparent 1.1px),
    radial-gradient(circle 1.2px at 21.7% 6.7%, rgba(12,44,58,0.149) 0 1.2px, transparent 1.2px);
  }

  /* Satellites hug the mass on its inward side in a clear size hierarchy. */
  /* Satellites are droplets, not miniatures of the mass: the full silhouette
     reads as a torn scrap at this size, so they keep a soft elongated blob. */
  .water-interlude__drop {
    z-index: 2;
    border: 0;
    box-shadow: 0 14px 30px rgba(5, 32, 43, .10);
  }
  .water-interlude__drop--one {
    top: 23%;
    left: auto;
    right: 33%;
    width: clamp(84px, 8vw, 126px);
    aspect-ratio: 1.42;
    border-radius: 54% 46% 43% 57% / 48% 52% 48% 52%;
    transform: translateY(var(--drift, 0px)) rotate(-13deg);
  }
  .water-interlude__drop--two {
    right: 39%;
    bottom: 27%;
    width: clamp(48px, 4.6vw, 74px);
    aspect-ratio: 1.34;
    border-radius: 47% 53% 56% 44% / 52% 46% 54% 48%;
    transform: translateY(var(--drift, 0px)) rotate(12deg);
    opacity: .84;
  }
  .water-interlude__drop--three {
    left: auto;
    right: 44%;
    bottom: 46%;
    width: clamp(22px, 2.1vw, 34px);
    aspect-ratio: 1.28;
    border-radius: 58% 42% 46% 54% / 50% 55% 45% 50%;
    transform: translateY(var(--drift, 0px)) rotate(-7deg);
    opacity: .6;
  }
}

/* --------------------------------------------------------------------------
   Section B — "See the direction before you commit."
   The same system mirrored onto the dark ground: mass anchored left, copy
   right, and the medallion sitting on the water as the one high-contrast
   element in the section.
   -------------------------------------------------------------------------- */

.liquid-bed { display: none; }

@media (min-width: 701px) {
  .panel--trust { position: relative; overflow: hidden; }
  .liquid-bed {
    position: absolute;
    display: block;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .liquid-bed__mass,
  .liquid-bed__ghost {
    position: absolute;
    top: 50%;
    left: -9%;
    width: 52%;
    height: clamp(420px, 58vh, 640px);
    overflow: hidden;
    background: #06283a;
    -webkit-mask-image: url('/assets/liquid-mass-mask.svg');
    mask-image: url('/assets/liquid-mass-mask.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform: translateY(calc(-50% + var(--drift, 0px))) scaleX(-1);
  }
  .liquid-bed__ghost {
    left: -4%;
    width: 60%;
    height: clamp(540px, 74vh, 810px);
    background: rgba(121, 183, 255, .038);
    transform: translateY(-56%) scaleX(-1);
  }
  .liquid-bed__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(.5) contrast(1.05) brightness(.66);
    opacity: .5;
  }
  .liquid-bed__satellite {
    position: absolute;
    display: block;
    overflow: hidden;
    background: #12384a url('/assets/organic-water-poster.webp') center / cover no-repeat;
  }
  .liquid-bed__satellite--one {
    top: 70%;
    left: 41%;
    width: clamp(52px, 4.8vw, 82px);
    aspect-ratio: 1.2;
    border-radius: 57% 43% 48% 52% / 43% 57% 43% 57%;
    transform: translateY(var(--drift, 0px)) rotate(12deg);
    opacity: .42;
  }
  .liquid-bed__satellite--two {
    top: 74%;
    left: 44%;
    width: clamp(22px, 2.2vw, 34px);
    aspect-ratio: 1.06;
    border-radius: 62% 38% 45% 55% / 52% 58% 42% 48%;
    transform: translateY(var(--drift, 0px));
    opacity: .3;
  }

  /* Card chrome off: the section becomes the ground and the medallion, sitting
     on the water, becomes the focal point. */
  .panel--trust .trust-panel {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    justify-items: stretch;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding: 0;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .panel--trust .trust-medallion {
    justify-self: center;
    width: min(34vw, 360px);
    color: #d6ecff;
    border-color: rgba(165, 244, 255, .5);
    background:
      radial-gradient(circle at 50% 46%, rgba(4, 26, 42, .82), rgba(4, 26, 42, .58) 56%, rgba(4, 26, 42, 0) 78%),
      radial-gradient(circle at 50% 45%, rgba(101, 228, 220, .12), rgba(8, 29, 48, .2) 54%, transparent 76%);
    box-shadow: inset 0 0 60px rgba(121, 183, 255, .12), 0 0 90px rgba(4, 22, 36, .55);
  }
  .panel--trust .trust-panel h2 {
    font-size: clamp(2.1rem, 3.4vw, 3.5rem);
    line-height: 1.0;
  }
  .panel--trust .trust-panel__copy { max-width: 36rem; }
  .panel--trust .trust-panel__copy p:not(.eyebrow) { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-bed__video { display: none; }
}

/* On phones the interlude is a dark bridge into Process, so the copy inverts. */
@media (max-width: 700px) {
  .water-interlude__copy {
    padding: 0 clamp(1rem, 5vw, 1.5rem) clamp(1.5rem, 6vw, 2.25rem);
  }
  .water-interlude__copy .eyebrow { color: var(--aqua-bright); }
  .water-interlude__copy h2 {
    font-size: clamp(1.9rem, 8.4vw, 2.5rem);
    color: #eafafa;
  }
  .water-interlude__copy p:not(.eyebrow) {
    color: rgba(233, 250, 250, .74);
    font-size: 1rem;
  }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .water-interlude__particles { opacity: .7; }
}

/* Drift is the one moment of motion in these sections: each layer moves at a
   slightly different rate so the satellites visibly separate from the mass as
   you scroll. Set as a custom property so it composes with each element's own
   rotate/translate without JS needing to know the base transform. */
@media (prefers-reduced-motion: reduce) {
  .water-interlude__visual,
  .water-interlude__drop,
  .liquid-bed__mass,
  .liquid-bed__satellite { --drift: 0px !important; }
}

/* ==========================================================================
   TIER DEPTH RAILS
   The three package photographs stop being three separate pictures and become
   three readings on one scale: 0m at the top of each block, 100m at the foot,
   markers at 15, 45 and 90. A depth only means something next to the other
   two, so hovering a card also draws its neighbours' depths as ghost ticks on
   the same rail, and the row moves as one body of water rather than three.
   ========================================================================== */

.pricing-page #packages .tier-card__media { --sink: 2.4%; }

.pricing-page #packages .tier-depth {
  position: absolute;
  z-index: 3;
  top: 1.2rem;
  bottom: 1.2rem;
  left: 1.35rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(223, 255, 250, .04),
    rgba(223, 255, 250, .34) 10%,
    rgba(223, 255, 250, .34) 90%,
    rgba(223, 255, 250, .04));
  /* One shadow on the wrapper keeps the rail, ticks and dot legible over the
     bright turquoise at the top of the Essential photograph. */
  filter: drop-shadow(0 0 3px rgba(2, 18, 28, .55));
  pointer-events: none;
}

.pricing-page #packages .tier-depth__marker {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--aqua-bright);
  box-shadow: 0 0 0 3px rgba(101, 228, 220, .2);
  transition: top 1.05s cubic-bezier(.22, .72, .24, 1) var(--stagger, 0ms);
}
.pricing-page #packages .tier-depth__marker em {
  position: absolute;
  top: 50%;
  left: 15px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
  color: #eafffb;
  white-space: nowrap;
  transform: translateY(-50%);
}
.pricing-page #packages .tier-grid.is-sounded .tier-depth__marker {
  top: calc(var(--depth) * 1%);
}

/* Stagger the descent so the scale reads as a sequence, not three dots landing
   at once. */
.pricing-page #packages .tier-card--essential { --stagger: 0ms; }
.pricing-page #packages .tier-card--reef { --stagger: 150ms; }
.pricing-page #packages .tier-card--deep { --stagger: 300ms; }

/* The neighbours' depths, drawn on the hovered card's own rail. */
.pricing-page #packages .tier-depth__ghost {
  position: absolute;
  left: 50%;
  top: calc(var(--at) * 1%);
  width: 7px;
  height: 1px;
  margin: 0 0 0 -3px;
  background: rgba(223, 255, 250, .72);
  opacity: 0;
  transition: opacity .4s ease .06s;
}
.pricing-page #packages .tier-depth__ghost em {
  position: absolute;
  top: 50%;
  left: 12px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6rem;
  font-style: normal;
  letter-spacing: .08em;
  color: rgba(234, 255, 251, .66);
  white-space: nowrap;
  transform: translateY(-50%);
}
.pricing-page #packages .tier-card:hover .tier-depth__ghost,
.pricing-page #packages .tier-card:focus-within .tier-depth__ghost { opacity: 1; }

/* One water column: the hovered card sinks, the other two lift and fall back a
   little. The image is over-scaled so the travel never exposes an edge. */
.pricing-page #packages .tier-card__media img {
  transform: scale(1.06);
  transition: transform .75s cubic-bezier(.2, .65, .3, 1), filter .45s ease;
}
.pricing-page #packages .tier-card:hover .tier-card__media img,
.pricing-page #packages .tier-card:focus-within .tier-card__media img {
  transform: scale(1.06) translateY(var(--sink));
}
.pricing-page #packages .tier-grid:has(.tier-card:hover) .tier-card:not(:hover) .tier-card__media img,
.pricing-page #packages .tier-grid:has(.tier-card:focus-within) .tier-card:not(:focus-within) .tier-card__media img {
  transform: scale(1.06) translateY(calc(var(--sink) / -2));
  filter: brightness(.94);
}

@media (max-width: 900px) {
  /* Single column: no neighbour is on screen to compare against, so the rail
     carries the reading and the row response is dropped. */
  .pricing-page #packages .tier-depth { left: 1.1rem; }
  .pricing-page #packages .tier-grid:has(.tier-card:hover) .tier-card:not(:hover) .tier-card__media img {
    transform: scale(1.06);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The comparison has to survive with nothing moving at all: markers are
     placed at their depths immediately and nothing responds to hover. */
  .pricing-page #packages .tier-depth__marker {
    top: calc(var(--depth) * 1%);
    transition: none;
  }
  .pricing-page #packages .tier-depth__ghost { transition: none; }
  .pricing-page #packages .tier-card__media img { transition: none; }
  .pricing-page #packages .tier-card:hover .tier-card__media img,
  .pricing-page #packages .tier-card:focus-within .tier-card__media img,
  .pricing-page #packages .tier-grid:has(.tier-card:hover) .tier-card:not(:hover) .tier-card__media img,
  .pricing-page #packages .tier-grid:has(.tier-card:focus-within) .tier-card:not(:focus-within) .tier-card__media img {
    transform: scale(1.06);
    filter: none;
  }
}

@media print {
  .pricing-page #packages .tier-depth { display: none; }
}