/* ==========================================================================
   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;
  --caustics-opacity: .34;
  --caustics-opacity-two: .22;
  --caustics-x: 0%;
  --caustics-y: 0%;
  --light-y: 0vh;
  --light-scale: 1;
  --light-opacity: .95;
  --deep-shade: 0;
}

/* --------------------------------------------------------------------------
   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);
}
/* The two gradient layers used to drift by animating background-position on
   this element. background-position is not compositable, so every frame
   repainted a 160%-viewport surface and re-ran both the blur and the screen
   blend across it — measured at roughly ten times the cost of everything else
   on the page combined. The tiles now move by transform on two child layers
   instead, which the compositor can cache and translate. The pattern repeats,
   so a one-tile translation is seamless, and the children are oversized enough
   that their edges stay outside the viewport at full travel. */
.caustics {
  position: absolute;
  inset: -30%;
  mix-blend-mode: screen;
  opacity: var(--caustics-opacity);
  transform: translate3d(var(--caustics-x), var(--caustics-y), 0) rotate(-6deg) scale(1.2);
}
.caustics::before,
.caustics::after {
  content: '';
  position: absolute;
  inset: -60%;
  filter: blur(5px);
}
.caustics::before {
  background-image: repeating-radial-gradient(ellipse at 20% 30%, transparent 0 18px, rgba(205,255,251,.13) 21px 23px, transparent 27px 52px);
  background-size: 280px 220px;
}
.caustics::after {
  background-image: repeating-radial-gradient(ellipse at 74% 65%, transparent 0 22px, rgba(204,255,249,.1) 25px 27px, transparent 31px 58px);
  background-size: 340px 280px;
}
.caustics--one::before { animation: causticTileA 18s linear infinite; }
.caustics--one::after { animation: causticTileB 18s linear infinite; }
.caustics--two { transform: rotate(12deg) scale(1.35); opacity: var(--caustics-opacity-two); }
.caustics--two::before { animation: causticTileAReverse 24s linear infinite; }
.caustics--two::after { animation: causticTileBReverse 24s linear infinite; }
.light-rays {
  position: absolute;
  top: -12%;
  left: -10%;
  width: 120%;
  height: 88vh;
  background:
    linear-gradient(105deg, transparent 22%, rgba(221,255,252,.16) 29%, transparent 37%),
    linear-gradient(79deg, transparent 45%, rgba(194,255,247,.13) 52%, transparent 60%),
    linear-gradient(95deg, transparent 65%, rgba(213,255,251,.1) 71%, transparent 77%);
  transform-origin: top center;
  transform: translateY(var(--light-y)) scaleY(var(--light-scale));
  opacity: var(--light-opacity);
  filter: blur(10px);
}
/* 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,
#seabed-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#seabed-canvas { opacity: .88; transition: opacity .5s ease; }
#seabed-canvas.is-ready { opacity: .88; }

.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: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0);
  color: #0a4d59;
  --menu-drop-color: #0e5d67;
  --menu-label-color: #EFFAFC;
  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;
  background: rgba(3, 15, 24, .72);
  border-bottom-color: rgba(255,255,255,.08);
  color: #f4fbfa;
  --menu-drop-color: #79b7ff;
  --menu-label-color: #79b7ff;
  backdrop-filter: blur(18px);
}
.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: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 14, 22, .16));
}
.brand__logo--light {
  opacity: 0;
  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;
}
.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 waveShift { from { transform:translateX(-1.5%) scaleX(1.03); } to { transform:translateX(1.5%) scaleX(.98); } }
@keyframes causticTileA { from { transform: translate3d(0,0,0); } to { transform: translate3d(280px, 220px, 0); } }
@keyframes causticTileB { from { transform: translate3d(0,0,0); } to { transform: translate3d(-340px, 280px, 0); } }
@keyframes causticTileAReverse { from { transform: translate3d(0,0,0); } to { transform: translate3d(-280px, 220px, 0); } }
@keyframes causticTileBReverse { from { transform: translate3d(0,0,0); } to { transform: translate3d(340px, -280px, 0); } }
@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,.caustics,.light-rays { transform:none!important; }
  #particle-canvas,#seabed-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 {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(196, 246, 244, .1);
  background:
    radial-gradient(circle at 9% -35%, rgba(74, 215, 208, .1), transparent 31%),
    linear-gradient(180deg, rgba(4, 20, 30, .94), rgba(2, 12, 20, .98));
  color: rgba(225, 245, 247, .62);
  box-shadow: 0 -20px 64px rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.site-footer-wide::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(calc(100% - 2rem), var(--max));
  height: 1px;
  background: linear-gradient(90deg, rgba(101, 228, 220, .5), rgba(101, 228, 220, .08) 45%, transparent 78%);
  content: "";
  transform: translateX(-50%);
}

.site-footer-wide__inner {
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  padding: clamp(1.9rem, 3.4vw, 2.7rem) 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: 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));
}
.landmark--seafloor {
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(320px, 52vh, 620px);
  opacity: var(--seafloor-opacity, 0);
  filter: blur(var(--seafloor-blur, 6px));
  transform: translate3d(0, var(--seafloor-y, 26vh), 0);
}
.landmark--seafloor picture { display: block; height: 100%; }
.landmark--seafloor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* --- 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); }

.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 > * { 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.
   ──────────────────────────────────────────────────────────────────────────── */

/* Home page — selected work feature */
.panel--work-feature {
  min-height: auto;
  padding-block: clamp(7rem, 13vw, 12rem);
  padding-inline: clamp(1rem, 3vw, 3rem);
}
.work-feature { width: min(100%, 1500px); margin-inline: auto; }
.work-feature__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem 3rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.work-feature__head .eyebrow { margin: 0; }
.work-feature__lede { margin: 0; max-width: 42ch; color: var(--muted); }

.work-feature__layout {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
.work-feature__story { min-width: 0; }
.work-feature__client {
  margin: 0 0 1.1rem;
  color: var(--aqua-bright);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.work-feature__story h2 {
  margin: 0;
  font-size: clamp(2.6rem, 4.4vw, 4.5rem);
  line-height: .92;
  letter-spacing: -.055em;
}
.work-feature__story h2 em { font-style: normal; color: var(--aqua); }
.work-feature__copy { margin: 1.4rem 0 0; max-width: 46ch; color: var(--muted); }
.work-feature__facts { margin: 2.2rem 0 0; }
.work-feature__facts div {
  display: grid;
  grid-template-columns: minmax(96px, .4fr) 1fr;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid rgba(255,255,255,.09);
}
.work-feature__facts div:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.work-feature__facts dt {
  color: rgba(226,250,251,.74);
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.work-feature__facts dd { margin: 0; color: rgba(242,255,254,.86); }
.work-feature__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.work-feature__stage { min-width: 0; }
.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;
}
.work-feature__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8,34,48,.85), rgba(2,14,22,.95));
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
}
.work-plate {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .85s cubic-bezier(.2,.65,.3,1), transform 1.8s cubic-bezier(.2,.65,.3,1);
}
.work-plate.is-active { opacity: 1; transform: none; }
.work-plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.work-plate--full img { object-position: 50% 50%; }
.work-feature__caption {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .95rem 0 0;
  min-height: 1.3rem;
  color: rgba(226,252,252,.62);
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  letter-spacing: .05em;
}
.work-feature__caption::before { content: ''; flex: none; width: 22px; height: 1px; background: var(--aqua); }

.work-register { display: flex; gap: .55rem; margin-top: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.work-register::-webkit-scrollbar { display: none; }
.work-register button {
  position: relative;
  flex: 1 1 0;
  min-width: 118px;
  display: grid;
  gap: .45rem;
  padding: .85rem 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  background: none;
  color: rgba(226,252,252,.5);
  text-align: left;
  cursor: pointer;
  transition: color .35s ease;
}
.work-register button:hover { color: rgba(240,255,255,.88); }
.work-register button.is-active { color: #fff; }
.work-register button:focus-visible { outline: 2px solid var(--aqua-bright); outline-offset: 4px; }
.work-register button::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--aqua-bright);
}
.work-register button.is-active::before { width: 100%; }
.work-register button.is-active.is-timing::before { animation: plate-dwell 5.6s linear forwards; }
@keyframes plate-dwell { from { width: 0; } to { width: 100%; } }
.work-register__num { font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .1em; }
.work-register__name { font-size: .83rem; line-height: 1.25; }

/* Work page — case lead */
.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) {
  .work-feature__layout,
  .case-lead__body { grid-template-columns: 1fr; }
  .work-feature__story { max-width: 720px; }
  .work-feature__frame { aspect-ratio: 16 / 11; }
}
@media (max-width: 720px) {
  .work-feature__head { display: block; }
  .work-feature__lede { margin-top: .7rem; }
  .work-feature__frame { aspect-ratio: 4 / 3; border-radius: 16px; }
  .work-register button { min-width: 104px; }
  .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) {
  .work-plate { transition: opacity .01ms; transform: none; }
  .work-register button.is-active.is-timing::before { animation: none; width: 100%; }
  .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--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 lands on the seafloor: sand light rises into the closing
   section, and the photographed floor sits behind it in the ocean layer. */
.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); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   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--work-feature,
  .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); }
}

/* Visible pause for the auto-advancing work reel (WCAG 2.2.2). */
.work-register__pause {
  flex: 0 0 auto;
  min-width: 0;
  width: 42px;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: .85rem 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  background: none;
  color: rgba(226,252,252,.5);
  cursor: pointer;
  transition: color .35s ease;
}
.work-register__pause:hover,
.work-register__pause.is-held { color: #fff; }
.work-register__pause:focus-visible { outline: 2px solid var(--aqua-bright); outline-offset: 4px; }
.work-register__pause svg { width: 15px; height: 15px; fill: currentColor; }
.work-register__pause .pause-icon--play { display: none; }
.work-register__pause.is-held .pause-icon--play { display: block; }
.work-register__pause.is-held .pause-icon--pause { display: none; }

/* 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; }
}

/* "MENU" was #EFFAFC over the bright surface band (~1.6:1). The droplet beside
   it already solved this; the label now matches it until the header darkens. */
.site-header { --menu-label-color: #0a4d59; }  /* 5.52:1 on the surface band, 8.39:1 on the glow */

/* 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; }
}

/* Work reel register: six controls at 118px overflowed a hidden-scrollbar row
   on small phones, so plates 04–05 were reachable only by an unhinted swipe. */
@media (max-width: 430px) {
  .work-register { flex-wrap: wrap; overflow-x: visible; row-gap: .9rem; }
  .work-register button { flex: 1 1 44%; min-width: 0; }
  .work-register__pause { flex: 0 0 100%; width: 100%; order: -1; padding-top: 0; border-top: 0; place-items: start; }
}

/* 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; }
}