:root {
  --ink: #f3fbfc;
  --muted: rgba(225, 245, 247, 0.72);
  --line: rgba(210, 244, 246, 0.18);
  --glass: rgba(7, 30, 43, 0.48);
  --aqua: #65e4dc;
  --aqua-bright: #a5fff4;
  --deep: #03101a;
  --warm: #f0c895;
  --scroll: 0;
  --gradient-y: 0%;
  --gradient-brightness: 1.06;
  --gradient-saturation: 1.05;
  --surface-opacity: 1;
  --surface-top: -2vh;
  --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;
  --depth-fill: 0%;
  --stage: 0;
  --header-bg: rgba(3, 15, 24, 0.25);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--deep);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 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));
  transition: filter .2s linear;
}
.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);
}
.caustics {
  position: absolute;
  inset: -30%;
  background-image:
    repeating-radial-gradient(ellipse at 20% 30%, transparent 0 18px, rgba(205,255,251,.13) 21px 23px, transparent 27px 52px),
    repeating-radial-gradient(ellipse at 74% 65%, transparent 0 22px, rgba(204,255,249,.1) 25px 27px, transparent 31px 58px);
  background-size: 280px 220px, 340px 280px;
  mix-blend-mode: screen;
  opacity: var(--caustics-opacity);
  filter: blur(5px);
  transform: translate3d(var(--caustics-x), var(--caustics-y), 0) rotate(-6deg) scale(1.2);
}
.caustics--one { animation: causticDrift 18s linear infinite; }
.caustics--two { transform: rotate(12deg) scale(1.35); opacity: var(--caustics-opacity-two); animation: causticDriftReverse 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; }

.reveal { will-change: transform, opacity; }
.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 causticDrift { from { background-position:0 0, 0 0; } to { background-position:280px 220px, -340px 280px; } }
@keyframes causticDriftReverse { from { background-position:0 0, 0 0; } to { background-position:-280px 220px, 340px -280px; } }
@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 */
:root { --depth-logo-blue: #79b7ff; }
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; }

.site-footer-wide {
  position:relative;
  z-index:2;
  width:min(calc(100% - 2rem), var(--max));
  margin:0 auto;
  padding:2rem 0 3rem;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(233,255,253,.55);
  font-size:.78rem;
}
.site-footer-wide__inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
.site-footer-wide a { color:rgba(242,255,254,.82); text-decoration:none; }

@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; }
}
@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; }
}

/* 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;
  overflow: hidden;
  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-site { height:calc(100% - 34px); padding:clamp(.8rem,2vw,1.5rem); background:linear-gradient(180deg,#eef0e7,#e8eadf); }
.case-site__nav { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; font-size:clamp(.42rem,.75vw,.66rem); }
.case-site__nav strong { line-height:1; letter-spacing:-.035em; }
.case-site__nav span { color:#586765; }
.case-site__nav b { padding:.55rem .7rem; border-radius:999px; background:#153e40; color:#f0f3ec; font-weight:600; }
.case-site__hero { display:grid; grid-template-columns:1.05fr .95fr; gap:1rem; align-items:center; height:58%; margin-top:clamp(.7rem,2vw,1.4rem); padding:clamp(.8rem,2.4vw,2rem); border-radius:14px; overflow:hidden; background:#cfd8cb; }
.case-site__hero small { color:#596661; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(.38rem,.65vw,.58rem); }
.case-site__hero h4 { margin:.5rem 0; max-width:390px; font-size:clamp(1rem,2.5vw,2.6rem); line-height:.92; letter-spacing:-.055em; }
.case-site__hero p { margin:.55rem 0; color:#4c5d59; font-size:clamp(.45rem,.8vw,.72rem); }
.case-site__hero > div:first-child > span { display:inline-block; margin-top:.4rem; color:#153e40; font-weight:700; font-size:clamp(.42rem,.7vw,.65rem); }
.case-site__figure { position:relative; height:100%; min-height:150px; border-radius:11px; background:linear-gradient(145deg,#9dad9e,#607b76); overflow:hidden; }
.case-site__figure::before { content:''; position:absolute; left:41%; top:18%; width:24%; aspect-ratio:1; border-radius:50%; background:#d9c0aa; box-shadow:0 55px 0 18px #e8e4d9; }
.case-site__figure::after { content:''; position:absolute; left:12%; right:7%; bottom:6%; height:31%; border-radius:50% 50% 16px 16px; background:#9b755d; transform:rotate(-7deg); }
.case-site__figure i { position:absolute; z-index:2; width:32%; height:9%; border-radius:999px; background:#d5b7a3; transform-origin:left center; }
.case-site__figure i:nth-child(1) { left:36%; top:53%; transform:rotate(24deg); }
.case-site__figure i:nth-child(2) { left:28%; top:61%; transform:rotate(-8deg); }
.case-site__figure i:nth-child(3) { display:none; }
.case-site__metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-top:.7rem; }
.case-site__metrics span { padding:.55rem; border-top:1px solid rgba(25,48,47,.2); color:#60706b; font-size:clamp(.4rem,.7vw,.62rem); }
.case-site__metrics b { display:block; color:#173d3c; font-size:clamp(.7rem,1.2vw,1.1rem); }
.case-site__services { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.55rem; }
.case-site__services span { padding:.55rem; border-radius:7px; background:#f5f6f1; color:#455653; font-size:clamp(.4rem,.66vw,.58rem); }
.case-phone { position:absolute; right:4%; bottom:4%; width:clamp(130px,19%,220px); aspect-ratio:.5; padding:7px; border-radius:clamp(20px,3vw,35px); background:#0a1115; box-shadow:0 32px 70px rgba(0,0,0,.48); transform:rotate(4deg); }
.case-phone__speaker { position:absolute; z-index:3; top:13px; left:50%; width:30%; height:5px; border-radius:999px; background:#0b0e11; transform:translateX(-50%); }
.case-phone__screen { height:100%; padding:clamp(1rem,2vw,1.7rem) .8rem; border-radius:calc(clamp(20px,3vw,35px) - 7px); background:linear-gradient(180deg,#e9ece3,#cfd8ce); color:#183532; overflow:hidden; }
.case-phone__screen small { font-size:.42rem; }
.case-phone__screen strong { display:block; margin:2.4rem 0 .8rem; font-size:clamp(1rem,2.1vw,1.8rem); line-height:.9; letter-spacing:-.05em; }
.case-phone__screen > span { display:inline-block; padding:.45rem .55rem; border-radius:999px; background:#153e40; color:white; font-size:.42rem; }
.case-phone__screen i { display:block; height:10%; margin-top:.8rem; border-radius:6px; background:rgba(37,76,70,.13); }
.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); }
  .case-site__nav span { display:none; }
  .case-site__nav { grid-template-columns:1fr auto; }
  .case-site__hero { grid-template-columns:1fr; height:60%; }
  .case-site__figure { display:none; }
  .case-site__metrics,.case-site__services { grid-template-columns:1fr 1fr; }
  .case-site__services span:last-child { display:none; }
  .case-phone { width:132px; right:5%; }
  .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);
}
@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(221,248,249,.42);
  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(221,248,249,.44);
  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); }

/* Cards trade dark glass for paper */
.panel--light .service-card {
  border-color: rgba(9, 64, 78, .14);
  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 .service-card__number { color: #0b7079; }
.panel--light .service-card p { color: rgba(9, 43, 55, .76); }
.panel--light .service-card__meta { color: rgba(10, 58, 72, .55); }

.panel--light .process-step { border-bottom-color: rgba(9, 64, 78, .16); }
.panel--light .process-step span { color: #0b7079; }
.panel--light .process-step p { color: rgba(9, 43, 55, .72); }

.panel--light .support-card {
  border-color: rgba(9, 64, 78, .14);
  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-card h3 { color: #072b37; }
.panel--light .support-card p { color: rgba(9, 43, 55, .72); }
.panel--light .support-closing { color: #0b7079; }

/* Buttons keep their shapes; the palette flips */
.panel--light .button--ghost {
  border-color: rgba(8, 52, 66, .32);
  background: rgba(255, 255, 255, .55);
  color: #093542;
  backdrop-filter: none;
}
.panel--light .button--primary {
  color: #f2fdfc;
  background: linear-gradient(135deg, #0f7f89, #0a5b68);
  box-shadow: 0 14px 35px rgba(9, 84, 96, .3);
}

/* 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, .55);
  --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, .45); }
.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.
   ──────────────────────────────────────────────────────────────────────────── */
:root { --indicator: var(--aqua-bright); }

.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.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --rhythm: clamp(4.5rem, 9vw, 9rem);
  --rhythm-tight: clamp(2.5rem, 5vw, 4.5rem);
}
.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; }
}