/* DualCore Surface 3.1.0: the ocean. One long page over one fixed backdrop: the surface at the top (ink on the bright
   sea), then everything on the water (foam words, dark glass only on objects), down to the reef at the bottom.
   The header and the phone menu come from shell.css. js/ocean.js sets --under, --deep, --reef, --sbo, --veil and
   --finds on <html> from the scroll. */
:root {
  --ink: #0d1a1b;
  --ink-2: #33494a;
  --ink-3: #5a6f6e;
  --foam: #f1f7f4;
  --foam-2: rgba(236, 246, 243, .95);
  --foam-3: rgba(236, 246, 243, .86);
  --orange: #ff6336;
  --peach: #ffd6c6;          /* orange that reads on the water (the depths, the numbers) */
  --cream: #f3f2e9;
  --fg: var(--foam);
  --fg-2: var(--foam-2);
  --fg-3: var(--foam-3);
  --hair: rgba(236, 246, 243, .22);
  --btn-bg: var(--foam);
  --btn-fg: #06262d;
  --gut: clamp(20px, 4.45vw, 64px);
  --top-h: 84px;
  --wrap: 1312px;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --sans: "DC Geist", "DC Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DC Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "DC Serif", Georgia, serif;
  --horizon: 57.5vh;
  /* dark glass, only on objects (the plans, the product index, the concept cards, the studio's cards) */
  --glass: linear-gradient(180deg, rgba(7, 42, 52, .66), rgba(3, 26, 34, .74));
  --glass-rim: rgba(214, 244, 244, .15);
  --blur: blur(22px) saturate(1.2);
  --pm: min(24px, calc(var(--gut) - 16px));   /* glass reaches this far past the gutter, so the words stay on it */
  --shade: 2, 24, 32;                          /* the colour of a local shade under words on the water */
  --text-glow: 0 1px 16px rgba(0, 24, 32, .5), 0 0 2px rgba(0, 24, 32, .35);
  /* set by js/ocean.js (and before the first paint by js/ocean-head.js) */
  --under: 0; --deep: 0; --reef: 0; --sbo: 0; --veil: 0; --finds: 1;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { background: #0a3440; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: auto; }
body {
  margin: 0; font-family: var(--sans); color: var(--fg); background: transparent;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
p, h1, h2, h3, h4, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 560; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 450; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; box-shadow: 0 0 0 4px rgba(2, 20, 28, .7); }
[tabindex="-1"]:focus { outline: none; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.skip:focus { top: 12px; }
::selection { background: var(--orange); color: #fff; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
[id] { scroll-margin-top: calc(var(--ab, 0px) + var(--top-h) + 16px); }
main { position: relative; z-index: 1; display: block; }
main:focus { outline: none; }

/* ------------------------------------------------------------------ the header over the ocean */
/* on the surface: ink on the sky (a frosted pale bar once the page moves); under water: foam on a dark glass bar */
html.is-ocean:not(.is-under) .top { --fg: var(--ink); --fg-2: var(--ink-2); --hair: rgba(13, 26, 27, .18); --btn-bg: var(--ink); --btn-fg: var(--cream); }
html.is-ocean:not(.is-under) .top.is-bar {
  background: rgba(226, 240, 240, .72); box-shadow: 0 1px 0 rgba(13, 26, 27, .07);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
html.is-ocean:not(.is-under) .menu-btn { background: rgba(255, 255, 255, .3); }
html.is-under .top { text-shadow: 0 1px 14px rgba(0, 30, 40, .42), 0 0 2px rgba(0, 30, 40, .25); }
html.is-under .top .pill { text-shadow: none; }
html.is-under .top .nav a { color: var(--foam-2); }
html.is-under .top .nav a:hover, html.is-under .top .nav a[aria-current] { color: var(--foam); }
html.is-under .brand-label { color: var(--foam-2); }
html.is-under .top.is-bar {
  background: rgba(3, 28, 36, .74); box-shadow: 0 1px 0 rgba(214, 244, 244, .08);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.is-ocean:not(.is-under) .top.is-bar { background: #dcebeb; }
  html.is-under .top.is-bar { background: #04222b; }
}
/* the surface carries its own big "Get a free preview" button: the header's pill waits for the water */
html.is-ocean:not(.is-under) .top .pill { opacity: 0; visibility: hidden; }
.top .pill { transition: opacity .35s var(--e-io), visibility .35s, background-color .45s var(--e-io), color .45s var(--e-io); }
/* on a menu trip the page moves fast: the header changes with it instead of trailing behind */
html.is-flying .top, html.is-flying .top .pill, html.is-flying .top .mark-b, html.is-flying .dock { transition-duration: .12s; }

/* ------------------------------------------------------------------ the backdrop */
/* 100lvh: a phone's collapsing address bar never resizes the water */
.stage { position: fixed; top: var(--ab, 0px); left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; overflow: hidden; background: #0e4452; }
.fb, .fb > div { position: absolute; inset: 0; }
/* the sea from above, before WebGL (and without it): the sky, the far water, the two cores */
.fb-sky {
  opacity: calc(1 - var(--under));
  background: linear-gradient(180deg, #a9d1da 0%, #cfe6e8 32%, #ebe9e0 calc(var(--horizon) - 1px), #d7e8e2 var(--horizon), #a8d6d0 calc(var(--horizon) + 8vh), #7cc3bd 100%);
}
.fb-mono { position: absolute; bottom: calc(100% - var(--horizon)); width: 3.1vw; transform: skewY(-16deg); transform-origin: bottom left; opacity: 0; }
.no-webgl .fb-mono { opacity: 1; }
.fb-a { left: 60.5%; height: 22vh; background: linear-gradient(90deg, #f07149, #e0552c); }
.fb-b { left: 64.6%; height: 30vh; background: linear-gradient(90deg, #f6f4ee, #dcd9cf); }
/* under water: lit from above and to the right, deepening with the scroll */
.fb-under {
  opacity: var(--under);
  background:
    radial-gradient(80% 60% at 78% -10%, rgba(110, 196, 208, .36), rgba(110, 196, 208, 0) 70%),
    linear-gradient(180deg, #226f7e 0%, #1a5a69 45%, #104656 100%);
}
.fb-under::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #06303c, #02161d); opacity: calc(var(--deep) * .8); }
/* the reef as a still picture at the bottom of the page (without WebGL, or while the live seabed loads) */
.fb-reef { opacity: var(--reef); background: #062c36 url("../assets/seabed/desktop-color.webp") 72% 100% / cover no-repeat; }
/* while the live seabed gets ready (or if it can't), the still reef shows in front of the sea */
html.reef-wait .fb-reef { z-index: 1; }
.fb-reef::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 44, 56, .5), rgba(6, 44, 56, .26) 60%, rgba(3, 26, 34, .4)); }
@media (max-aspect-ratio: 19/20) { .fb-reef { background-image: url("../assets/seabed/phone-color.webp"); background-position: 80% 100%; } }
#gl, #seabed { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gl { opacity: 0; }
#seabed { opacity: 0; }
#seabed.on { opacity: var(--sbo); }
.no-webgl #gl, .no-webgl #seabed { display: none; }
/* the veil: a little deeper water behind the words, so they read at every depth (none on the surface) */
.stage::after { content: ""; position: absolute; inset: 0; background: rgb(2, 20, 28); opacity: var(--veil); }

/* ------------------------------------------------------------------ the dock: how deep you are, and the water's Pause */
.dock {
  position: fixed; z-index: 28; right: var(--gut); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 14px; border-radius: 999px; color: var(--foam); font-size: 13px;
  background: rgba(3, 28, 36, .72); box-shadow: inset 0 0 0 1px rgba(214, 244, 244, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .45s var(--e-io), color .45s var(--e-io), box-shadow .45s var(--e-io);
}
/* the dock sits at the bottom of the screen: it turns to the water's colours as soon as the water reaches it */
html.is-ocean:not(.dock-under) .dock { color: var(--ink); background: rgba(236, 246, 244, .78); box-shadow: inset 0 0 0 1px rgba(13, 26, 27, .12); }
.gauge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; font-variant-numeric: tabular-nums; min-width: 6.4em; }
.gauge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 99, 54, .22); }
.pause { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px; color: inherit; transition: background-color .25s; }
.pause:hover { background: rgba(255, 255, 255, .1); }
.pause-ico { flex: none; position: relative; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; opacity: .9; }
/* the dock stays small (the label is for screen readers; the button has a tooltip): it covers little of the page */
.pause { padding: 0; width: 40px; justify-content: center; }
.pause-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gauge { min-width: 5.4em; }
/* keyboard focus and in-page landings stop clear of the dock and the assistant's launcher */
html { scroll-padding-bottom: 96px; }
.pause-ico::before, .pause-ico::after { content: ""; position: absolute; top: 8px; width: 2px; height: 8px; background: currentColor; border-radius: 1px; }
.pause-ico::before { left: 8.5px; } .pause-ico::after { left: 12.5px; }
.pause[aria-pressed="true"] .pause-ico::before { left: 9.5px; width: 0; height: 0; background: none; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-radius: 0; }
.pause[aria-pressed="true"] .pause-ico::after { display: none; }
.no-webgl .pause { display: none; }
.no-webgl .dock { padding-right: 14px; }
/* the DualCore assistant (a separate plugin) floats its launcher in the bottom-right corner: the dock steps left of it */
html.has-dca .dock { right: calc(var(--dca-w, 172px) + var(--dca-r, 24px) + 12px); bottom: calc(var(--dca-b, 24px) + (var(--dca-h, 50px) - 48px) / 2); }

/* ------------------------------------------------------------------ the surface */
.surface { position: relative; height: 100vh; height: 100svh; min-height: 520px; --fg: var(--ink); --fg-2: var(--ink-2); --hair: rgba(13, 26, 27, .18); --btn-bg: var(--ink); --btn-fg: var(--cream); color: var(--fg); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); display: flex; align-items: center; gap: 12px; }
.h1 { font-weight: 500; font-size: min(6.1vw, 9.6vh, 92px); line-height: .96; letter-spacing: -.05em; margin: 20px 0 22px; color: var(--fg); }
.h1 .l { display: block; }
.h1 .nw, .nw { white-space: nowrap; }
.h1, .lead { text-wrap: balance; }
.surface .lead { font-size: min(1.32vw, 2.2vh, 19px); line-height: 1.45; color: var(--fg-2); max-width: 31em; letter-spacing: -.005em; }
.home-copy { position: absolute; left: var(--gut); top: clamp(calc(var(--top-h) + 22px), calc(var(--horizon) - 440px), 200px); width: min(760px, 52vw); }
.home-copy .lead { margin-bottom: 30px; }
.surface .promise { margin-top: 18px; font-size: 13px; color: var(--fg-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  text-shadow: none; transition: translate .35s var(--e-out), box-shadow .3s, border-color .3s, background-color .3s;
}
.btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--e-out); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 14px 30px -16px rgba(0, 25, 32, .6); }
.btn-primary:hover { translate: 0 -1px; }
.btn-primary:hover svg { transform: translate(2px, -2px); }
.btn-ghost { border: 1px solid var(--hair); color: var(--fg); background: transparent; }
.btn-ghost:hover { border-color: currentColor; }
.btn-ghost:hover .down { transform: translateY(3px); }
/* the three pieces of work on the water: js/ocean.js places each .find over its pane (from the 3D projection). They
   ride on the fixed backdrop, so they live in a fixed layer, and step out of the way as the view tips under */
.finds { position: fixed; top: var(--ab, 0px); left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 2; pointer-events: none; opacity: var(--finds); }
html.finds-off .finds { visibility: hidden; }
.find { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--e-io); }
.has-gl .find.is-placed, .no-webgl .find { opacity: 1; }
.find-hit { position: absolute; inset: 0; display: block; pointer-events: auto; border-radius: 8px; }
.find-hit img, .loud-fallback { display: none; }
.find-label { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; width: max-content; max-width: 220px; text-align: center; display: grid; gap: 1px; color: var(--ink); pointer-events: none; }
.find-label .mono { font-size: 9.5px; letter-spacing: .1em; color: var(--ink); }
.find-label strong { font-size: 14px; font-weight: 500; letter-spacing: -.015em; }
.find-hit:hover + .find-label strong, .find-hit:focus-visible + .find-label strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.no-webgl .find-hit img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 8px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 18px 30px -18px rgba(0, 40, 50, .6); }
.no-webgl .f-app .find-hit img { border-radius: 14px; box-shadow: 0 0 0 4px #0c1112, 0 18px 30px -18px rgba(0, 40, 50, .6); }
.no-webgl .loud-fallback {
  display: grid; place-content: center; gap: 6px; width: 100%; height: 100%; border-radius: 8px; text-align: center;
  background: radial-gradient(80% 60% at 50% 110%, rgba(255, 99, 54, .35), rgba(255, 99, 54, 0) 70%), linear-gradient(160deg, #1b1a19, #0b0b0b);
  color: #f3f2e9; box-shadow: 0 18px 30px -18px rgba(0, 40, 50, .6);
}
.no-webgl .loud-fallback b { font-weight: 800; letter-spacing: .02em; font-size: 10.5px; }
.no-webgl .loud-fallback i { font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: #ff9d80; }
/* the surface's bottom row: the starting price and the email, and the hint that the page goes down */
/* the surface's words step back as the view tips toward the water */
.home-copy { opacity: var(--ink-o, 1); }
/* the bottom row would slide up across the floating work: it steps back as soon as the page moves */
.surface-row { opacity: var(--row-o, 1); }
html.row-off .surface-row { visibility: hidden; }
.surface-row { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13.5px; color: var(--ink); }
.b-left { display: flex; gap: 26px; align-items: center; }
.b-price strong { font-weight: 600; }
.b-mail { position: relative; color: var(--ink); transition: color .25s; }
.b-mail:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.cue { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; display: grid; justify-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.cue-line { width: 1px; height: 26px; background: linear-gradient(180deg, rgba(13, 26, 27, 0), rgba(13, 26, 27, .55)); transform-origin: top; animation: cue 2.4s var(--e-io) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.is-paused .cue-line { animation: none; }
.no-webgl .surface .h1, .no-webgl .surface .lead { text-shadow: 0 1px 18px rgba(230, 244, 242, .5); }

/* ------------------------------------------------------------------ the zones: everything below the surface, on the water */
.zone:not(.surface) { position: relative; text-shadow: var(--text-glow); }
.zone .btn, .zone .plan-btn, .zone .card-media, .zone .v, .zone .svc-art, .zone .custom-quote .plan-btn { text-shadow: none; }
/* after the crossing the page sinks through open water before Work rises into view */
#work { padding-top: calc(48vh + 40px); padding-top: calc(48svh + 40px); }
#services, #pricing { padding-top: clamp(170px, 30vh, 320px); }
#studio { padding-top: clamp(190px, 36vh, 380px); }
.sub { position: relative; padding-top: clamp(84px, 10vw, 150px); }
.zone-intro { position: relative; }
/* a soft shade of deeper water under words that sit straight on the water: wide, with a long feather, so it reads
   as the water getting a little deeper there rather than as a shape */
.zone-intro::before, .sec-head::before, .process-copy::before, .duo-main::before, .closing-copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: -34%; right: -44%; top: -62%; bottom: -62%;
  background: radial-gradient(50% 50% at 44% 50%, rgba(var(--shade), .5) 0%, rgba(var(--shade), .45) 20%, rgba(var(--shade), .34) 40%, rgba(var(--shade), .2) 60%, rgba(var(--shade), .08) 80%, rgba(var(--shade), 0) 100%);
}
.zone-intro::before { left: -40%; right: -30%; }
/* the small print that sits straight on the water gets a quiet shade of its own */
.concept-note, .svc-kicker, .price-note, .fine { position: relative; }
.concept-note::before, .svc-kicker::before, .price-note::before, .sub > .wrap > .fine::before {
  content: ""; position: absolute; z-index: -1; inset: -90% -20% -90% -16%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--shade), .46) 0%, rgba(var(--shade), .38) 30%, rgba(var(--shade), .2) 60%, rgba(var(--shade), .06) 84%, rgba(var(--shade), 0) 100%);
}
.eyebrow .depth { color: var(--peach); text-transform: none; letter-spacing: .08em; }
.eyebrow .sep { color: var(--foam-3); margin-inline: -4px; }
.zone:not(.surface) .eyebrow { color: var(--foam); }
/* Work's small depth label would arrive in the bright water just under the waterline: it shows once the page has
   sunk past 6.5 m, where the water behind it is deep enough to read it (js/ocean.js sets .eb-on) */
#work .zone-intro .eyebrow { opacity: 0; transition: opacity .45s var(--e-io); }
html.eb-on #work .zone-intro .eyebrow { opacity: 1; }
.zone:not(.surface) .eyebrow .sep { color: var(--foam-2); }
.zone-h { margin-top: 16px; max-width: 11em; font-size: clamp(46px, 6.6vw, 96px); line-height: .96; letter-spacing: -.05em; font-weight: 560; text-wrap: balance; }
.zone:not(.surface) .lead { margin-top: clamp(14px, 1.8vw, 22px); max-width: 30em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.012em; color: var(--foam); text-wrap: pretty; }
.intro-row { margin-top: clamp(14px, 2.2svh, 24px); font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; }
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.jump a, .jump-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 500; letter-spacing: -.01em; color: var(--foam); }
.jump a:first-child { margin-left: -4px; }
.jump a:hover, .jump-cta:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.jump-dot { color: var(--foam-3); padding: 0 2px; }
.jump-arrow { width: 11px; height: 11px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--foam-2); }
.jump-cta .env { width: 16px; height: 12px; margin-right: 9px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.jump-cta { padding-left: 22px; position: relative; }
.jump-cta::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 1px; background: rgba(236, 246, 243, .34); }

/* shared pieces */
.sec-head { position: relative; max-width: 760px; }
.sec-label { font-weight: 450; }
.eyebrow .n { color: var(--foam); display: inline-flex; align-items: center; gap: 9px; }
.eyebrow .n::before, .n-dot { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 99, 54, .22); }
.h3 { margin-top: 16px; font-size: clamp(36px, 4.5vw, 64px); line-height: 1; letter-spacing: -.045em; font-weight: 560; text-wrap: balance; }
.soft { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--foam-2); }
.h3 .soft { font-size: 1.04em; }
.sec-sub { margin-top: 16px; max-width: 30em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.012em; color: var(--foam-2); }
.tag { color: var(--foam-3); }
.tag .n { color: var(--peach); }
.line { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -.01em; }
.desc { margin-top: 8px; color: var(--foam-2); max-width: 30em; }
.desc.small { font-size: 14px; color: var(--foam-3); }
.fine, .price-note, .concept-note { margin-top: 26px; max-width: 52em; font-size: 14px; line-height: 1.6; color: var(--foam-2); }
.ext {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; min-height: 44px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--foam);
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 12px) / 0 1px no-repeat; transition: background-size .45s var(--e-out);
}
.ext svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--e-out); }
.ext:hover { background-size: calc(100% - 18px) 1px; }
.ext:hover svg { transform: translate(2px, -2px); }
.ticks { margin-top: 16px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--foam-2); }
.ticks li { position: relative; padding-left: 18px; }
.ticks li::before { content: ""; position: absolute; left: 1px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 99, 54, .2); }
.more { margin-top: 16px; border-top: 1px solid var(--hair); }
.more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0 6px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; list-style: none; color: var(--foam);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair);
  background: linear-gradient(currentColor, currentColor) 50% 50% / 9px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 9px no-repeat;
  transition: transform .35s var(--e-out);
}
.more[open] summary::after { transform: rotate(45deg); }
.more summary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.more p { padding: 2px 0 6px; font-size: 14px; line-height: 1.6; color: var(--foam-2); }
/* glass: dark, a little clear, only on objects */
.plate, .glass {
  border-radius: 26px; background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 rgba(214, 244, 244, .1), 0 40px 80px -50px rgba(0, 10, 14, .7);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.plate { margin-inline: calc(-1 * var(--pm)); padding: clamp(22px, 2.4vw, 32px) max(var(--pm), 20px); }

/* ------------------------------------------------------------------ Work: our own products */
.idx .sec-label { position: relative; }
.idx .sec-label::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -50%; top: -220%; bottom: -220%; pointer-events: none; background: radial-gradient(50% 50% at 40% 50%, rgba(var(--shade), .46) 0%, rgba(var(--shade), .36) 30%, rgba(var(--shade), .18) 62%, rgba(var(--shade), 0) 100%); }
.idx-list { margin-top: 22px; }
.p h4 { margin-top: 8px; line-height: 1.04; letter-spacing: -.035em; }
.p .line { margin-top: 6px; }
.p-af h4 { font-size: clamp(30px, 2.7vw, 40px); }
.p-hl, .p-lm { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--hair); }
.p-hl h4, .p-lm h4 { font-size: clamp(22px, 1.7vw, 25px); letter-spacing: -.03em; }
.p-hl .line, .p-lm .line { font-size: clamp(19px, 1.45vw, 21px); }
.p-hl .desc { font-size: 15px; line-height: 1.5; }
.p-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 18px; }
.p-hd .ext { margin-top: 4px; min-height: 40px; }
@media (pointer: coarse) { .p-hd .ext { min-height: 44px; } }
.v { margin: 0; }
.v img { width: 100%; height: auto; }
.device {
  position: relative; padding: 3.4%; border-radius: 15.5% / 7.3%;
  background: linear-gradient(150deg, #34393b 0%, #111314 38%, #1b1e1f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 0 0 4px #060707, 0 50px 90px -40px rgba(0, 8, 12, .8);
}
.device::before, .device::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #222628; }
.device::before { left: -2px; top: 19%; height: 7%; }
.device::after { right: -2px; top: 25%; height: 11%; }
.device img { border-radius: 12.5% / 5.8%; background: #07080a; }
.slate {
  padding: 3.2%; border-radius: 22px; background: linear-gradient(150deg, #34393b 0%, #111314 40%, #1b1e1f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 0 0 4px #060707, 0 50px 90px -40px rgba(0, 8, 12, .8);
}
.crop { aspect-ratio: 900 / 730; overflow: hidden; border-radius: 13px; background: #f1f0f5; }
.lm-tile {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(80% 42% at 50% 108%, rgba(255, 99, 54, .30), rgba(255, 99, 54, .07) 55%, rgba(255, 99, 54, 0) 76%), linear-gradient(172deg, #2a2b2d 0%, #161718 52%, #08080a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 160, .16), 0 50px 90px -40px rgba(0, 8, 12, .8);
}
.lm-in { display: grid; justify-items: center; gap: 1.1em; }
.lm-word { font-family: var(--sans); font-weight: 760; font-size: min(8.2cqi, 28px); letter-spacing: .18em; margin-right: -.18em; line-height: 1; color: #f4efe6; text-shadow: 0 0 22px rgba(255, 99, 54, .22); }
.lm-sub { font-size: min(4.6cqi, 10.5px); letter-spacing: .22em; margin-right: -.22em; color: #ff8a63; padding-top: 1.1em; border-top: 1px solid rgba(255, 138, 99, .28); }
@media (min-width: 1100px) {
  .prods { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: start; }
  .idx { padding-right: clamp(24px, 3vw, 56px); padding-top: 24px; }
  .still { position: relative; height: min(clamp(500px, 100svh - 205px, 700px), 48vw); container-type: size; }
  .v { position: absolute; transition: translate .6s var(--e-out), opacity .5s var(--e-io), filter .5s var(--e-io); }
  .v-cap { display: none; }
  .v-af { z-index: 2; top: 0; width: 41.3cqh; left: calc(40cqw - 20.6cqh); }
  .v-hl { z-index: 1; top: 3cqh; width: 48cqh; left: calc(40cqw + 18.4cqh); }
  .v-lm { z-index: 3; top: 49cqh; width: 24cqh; left: calc(40cqw + 19.6cqh); }
  .prods:has(.p-af:is(:hover, :focus-within)) .v:not(.v-af), .prods:has(.p-hl:is(:hover, :focus-within)) .v:not(.v-hl),
  .prods:has(.p-lm:is(:hover, :focus-within)) .v:not(.v-lm) { filter: saturate(.45) brightness(.8); }
  .prods:has(.p-af:is(:hover, :focus-within)) .v-af, .prods:has(.p-hl:is(:hover, :focus-within)) .v-hl,
  .prods:has(.p-lm:is(:hover, :focus-within)) .v-lm { translate: 0 -8px; z-index: 4; }
}
@media (max-width: 1099px) {
  .prods { display: flex; flex-direction: column; }
  .still {
    order: -1; display: flex; align-items: flex-end; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding: 10px var(--gut) 20px; height: calc(min(56svh, 440px) + 64px);
  }
  .still::-webkit-scrollbar { display: none; }
  .still:focus-visible { outline-offset: -4px; }
  .v { position: relative; flex: none; scroll-snap-align: start; display: flex; flex-direction: column; }
  .v-af { width: calc(min(56svh, 440px) / 2.084); }
  .v-hl { width: min(80vw, calc(min(56svh, 440px) * 1.1)); }
  .v-lm { width: min(62vw, calc(min(56svh, 440px) * .72)); }
  .v-hl .crop { aspect-ratio: 900 / 470; }
  .v-cap { align-self: flex-start; margin-top: 14px; padding: 7px 11px; border-radius: 999px; color: var(--foam); background: rgba(3, 26, 34, .68); box-shadow: inset 0 0 0 1px rgba(214, 244, 244, .14); text-shadow: none; white-space: nowrap; }
  .still .device, .still .slate { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 4px #060707, 0 26px 34px -22px rgba(0, 20, 28, .6); }
  .still .lm-tile { box-shadow: inset 0 0 0 1px rgba(255, 190, 160, .16), 0 26px 34px -22px rgba(0, 20, 28, .6); }
  .idx { margin-top: 8px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .idx-list { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
  .p-hl, .p-lm { margin-top: 0; padding-top: 0; border-top: 0; }
  .p-hd { display: block; }
}

/* ------------------------------------------------------------------ Work: the concept sites */
.cards { margin-top: clamp(36px, 4.4vw, 60px); margin-inline: calc(-1 * var(--pm)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.card {
  --cp: min(16px, var(--pm));
  position: relative; padding: var(--cp) var(--cp) 8px; border-radius: 26px; background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 rgba(214, 244, 244, .1), 0 40px 80px -50px rgba(0, 10, 14, .7);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.card-media { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #e9eae2; box-shadow: 0 0 0 1px rgba(214, 244, 244, .12); transition: box-shadow .6s var(--e-out); }
.card-media img, .card-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-media video { opacity: 0; transition: opacity .45s var(--e-io); }
.card-media.playing video { opacity: 1; }
.card-media.nl { background: #e4e0d1; }
.card-media.nl img { object-position: 50% 76%; }
.card:hover .card-media { box-shadow: 0 0 0 1px rgba(214, 244, 244, .24); }
.card:focus-within .card-media { outline: 2px solid var(--orange); outline-offset: 3px; }
.card-copy { padding: 18px max(8px, var(--pm) - var(--cp)) 4px; }
.card-copy h4 { margin-top: 10px; font-size: clamp(22px, 1.8vw, 27px); line-height: 1.1; letter-spacing: -.03em; }
.card-copy .line { margin-top: 6px; font-size: clamp(19px, 1.5vw, 22px); }
.card-copy .desc { font-size: 15px; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 26px; }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .cards { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ------------------------------------------------------------------ Services */
.sec-head-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 110px); align-items: end; }
.sec-head-split .sec-sub { margin-top: 0; padding-bottom: 6px; }
.sec-head-split > div .sec-sub { margin-top: 16px; }
.svc-kicker { margin-top: clamp(40px, 5vw, 64px); color: var(--foam-2); }
.svc-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); }
.svc h4 { margin-top: 8px; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -.03em; }
.svc .tag { margin-top: 20px; }
.svc .desc { font-size: 15px; }
.svc-art {
  position: relative; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(70% 55% at 70% 0%, rgba(170, 232, 236, .5), rgba(170, 232, 236, 0) 70%), linear-gradient(180deg, #4d98a6 0%, #3f8292 45%, #30626f 100%);
  box-shadow: inset 0 0 0 1px rgba(214, 244, 244, .16), 0 30px 60px -36px rgba(0, 10, 14, .7);
  font-size: 12px; color: var(--ink);
}
.svc-art::after { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 22px, rgba(255, 255, 255, .05) 22px 30px); }
.svc:nth-child(2) .svc-art { background: radial-gradient(70% 55% at 30% 0%, rgba(170, 232, 236, .45), rgba(170, 232, 236, 0) 70%), linear-gradient(180deg, #47909e 0%, #3a7a8a 45%, #2d5d6a 100%); }
.svc:nth-child(3) .svc-art { background: radial-gradient(70% 55% at 60% 0%, rgba(170, 232, 236, .4), rgba(170, 232, 236, 0) 70%), linear-gradient(180deg, #418797 0%, #357282 45%, #295664 100%); }
.svc:nth-child(4) .svc-art { background: radial-gradient(70% 55% at 40% 0%, rgba(170, 232, 236, .36), rgba(170, 232, 236, 0) 70%), linear-gradient(180deg, #3b7f8e 0%, #306b7a 45%, #25505c 100%); }
.mini-browser, .mini-tool { width: 72%; border-radius: 10px; background: #f6f8f4; box-shadow: 0 18px 34px -18px rgba(0, 24, 32, .55), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.mini-browser { position: relative; padding: 26px 16px 16px; }
.mini-browser .dots { position: absolute; left: 12px; top: 10px; display: flex; gap: 4px; }
.mini-browser .dots i { width: 6px; height: 6px; border-radius: 50%; background: #c9d2cc; }
.mini-browser .dots i:first-child { background: var(--orange); }
.mini-browser b { display: block; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; }
.mini-browser em { display: block; margin-top: 8px; font-family: var(--mono); font-style: normal; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #b33c17; }
.mini-browser .bar { display: block; margin-top: 10px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #d9e8e4, #c3dcd8); }
.mini-chat { width: 78%; display: grid; gap: 10px; }
.mini-chat .q { justify-self: end; padding: 8px 12px; border-radius: 12px 12px 3px 12px; background: rgba(4, 34, 44, .62); color: var(--foam); font-size: 12px; }
.mini-chat .a { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: #f6f8f4; box-shadow: 0 18px 34px -18px rgba(0, 24, 32, .55); font-size: 12.5px; line-height: 1.3; }
.mini-chat .a i { font-style: normal; color: #c2410c; }
.mini-chat .a em { font-family: var(--serif); font-size: 14px; }
.mini-tool { padding: 14px; display: grid; gap: 6px; }
.mini-tool .k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mini-tool b { font-size: clamp(14px, 1.25vw, 17px); letter-spacing: -.03em; font-weight: 600; margin-bottom: 2px; }
.mini-tool i { height: 8px; border-radius: 4px; background: #dfe7e3; }
.mini-tool i:nth-of-type(2) { width: 78%; }
.mini-tool i:nth-of-type(3) { width: 56%; }
.mini-tool .go { justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 10.5px; }
.mini-finder { position: relative; width: 70%; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.mini-finder i { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(246, 250, 248, .9); }
.mini-finder i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.mini-finder i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.mini-finder i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.mini-finder i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.mini-finder .ring { width: 38%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246, 250, 248, .9), 0 0 0 7px rgba(255, 99, 54, .5); }
.mini-finder em { position: absolute; bottom: 10%; font-family: var(--mono); font-style: normal; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--foam); }
.svc-foot { margin-top: clamp(36px, 4vw, 52px); padding-top: 18px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; }
.svc-foot p { font-size: clamp(17px, 1.3vw, 19px); letter-spacing: -.012em; color: var(--foam-2); max-width: 40em; }
.svc-foot .ext { margin-top: 0; }
.cap-grid { margin-top: clamp(36px, 4.4vw, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.cap { padding-top: 20px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; }
.cap h4 { margin-top: 10px; font-size: clamp(24px, 2vw, 30px); line-height: 1.08; letter-spacing: -.035em; }
.cap .ticks { margin-bottom: 8px; }
.cap .ext { margin-top: auto; align-self: flex-start; }
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px clamp(32px, 6vw, 110px); align-items: center; }
.duo-main { position: relative; }
.duo-main .sec-sub { max-width: 32em; }
.duo-main .ext { margin-top: 18px; }
.note-card { margin-inline: 0; padding: clamp(24px, 3vw, 40px); }
.note-card h4 { margin-top: 10px; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
.note-card .desc { max-width: none; }

/* ------------------------------------------------------------------ Pricing */
.plan-aside { margin-inline: 0; padding: 22px 24px; border-radius: 22px; }
.plan-count { margin-top: 12px; display: flex; align-items: center; gap: 16px; font-size: 15.5px; line-height: 1.35; letter-spacing: -.01em; color: var(--foam); }
.plan-count .num { font-size: 46px; line-height: 1; letter-spacing: -.05em; font-weight: 560; }
.plan-aside .ticks { margin-top: 14px; font-size: 14.5px; }
.plan-aside .fine { margin-top: 14px; font-size: 13px; }
.sec-head-split .plan-aside { align-self: end; }
.plan-grid { margin-top: clamp(36px, 4.4vw, 60px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 24px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 rgba(214, 244, 244, .1), 0 40px 80px -50px rgba(0, 10, 14, .7);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.plan h4 { margin-top: 10px; font-size: clamp(23px, 1.8vw, 27px); line-height: 1.08; letter-spacing: -.035em; }
.plan > .desc { font-size: 15px; min-height: calc(3 * 1.55em); }
.price { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price .from { width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--foam-3); }
.price strong { font-size: clamp(40px, 3.4vw, 52px); line-height: 1; letter-spacing: -.05em; font-weight: 560; }
.price .per { width: 100%; font-size: 15px; color: var(--foam-2); }
.price .per b { font-weight: 600; color: var(--foam); }
.plan .ticks { margin-bottom: 18px; }
.plan .more { margin-top: auto; }
.plan-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; min-height: 50px; padding: 0 20px; border-radius: 999px;
  background: rgba(236, 246, 243, .1); color: var(--foam); box-shadow: inset 0 0 0 1px rgba(236, 246, 243, .42);
  font-size: 15px; font-weight: 500; letter-spacing: -.01em; text-align: center;
  transition: translate .35s var(--e-out), background-color .3s, box-shadow .3s;
}
.plan-btn:hover { background: rgba(236, 246, 243, .18); box-shadow: inset 0 0 0 1px var(--foam); }
.plan-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--e-out); }
.plan-btn:hover svg { transform: translate(2px, -2px); }
/* the featured plan (Website Managed): lit water inside the glass, and the solid button */
.plan-featured {
  background: radial-gradient(90% 60% at 80% -10%, rgba(150, 226, 232, .3), rgba(150, 226, 232, 0) 70%), linear-gradient(180deg, rgba(26, 96, 110, .88) 0%, rgba(15, 68, 80, .9) 55%, rgba(10, 52, 62, .92) 100%);
  box-shadow: inset 0 0 0 1px rgba(214, 244, 244, .24), 0 44px 80px -40px rgba(0, 10, 14, .8);
}
.plan-featured .tag { color: var(--foam); }
.plan-featured .plan-btn, .custom-quote .plan-btn { background: var(--foam); color: #06262d; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 26px -16px rgba(0, 20, 26, .6); }
.plan-featured .plan-btn:hover, .custom-quote .plan-btn:hover { translate: 0 -1px; }
.custom {
  position: relative; overflow: hidden; isolation: isolate; margin-top: clamp(40px, 5vw, 72px); border-radius: 30px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 88px); padding: clamp(28px, 4vw, 56px);
  box-shadow: inset 0 0 0 1px rgba(214, 244, 244, .16), 0 50px 90px -50px rgba(0, 8, 12, .8);
}
.custom-sea {
  position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(60% 70% at 88% 0%, rgba(160, 230, 236, .26), rgba(160, 230, 236, 0) 70%), radial-gradient(50% 60% at 10% 100%, rgba(255, 99, 54, .16), rgba(255, 99, 54, 0) 70%), linear-gradient(160deg, rgba(20, 84, 98, .86) 0%, rgba(12, 60, 72, .9) 50%, rgba(6, 40, 50, .94) 100%);
}
.custom-sea::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, rgba(255, 255, 255, 0) 0 36px, rgba(255, 255, 255, .03) 36px 50px); }
.custom .tag { color: #ffd6c4; }
.custom h4 { margin-top: 10px; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -.045em; }
.custom .desc { color: var(--foam-2); max-width: 34em; }
.custom-quote { align-self: end; padding: 24px; border-radius: 22px; background: rgba(3, 26, 34, .44); box-shadow: inset 0 0 0 1px rgba(214, 244, 244, .14); }
.custom-price { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: clamp(34px, 3vw, 44px); line-height: 1; letter-spacing: -.02em; }
.custom-quote .plan-btn { width: 100%; }
.extra-grid { margin-top: clamp(36px, 4.4vw, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.extra { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid var(--hair); }
.extra h4 { margin-top: 10px; font-size: clamp(24px, 2vw, 30px); line-height: 1.08; letter-spacing: -.035em; }
.extra-price { margin-top: 12px; font-size: clamp(22px, 1.8vw, 26px); font-weight: 560; letter-spacing: -.03em; }
.extra-price span { font-size: 15px; font-weight: 400; letter-spacing: -.01em; color: var(--foam-2); }
.extra .more { margin-top: 16px; }
.extra .ext { margin-top: auto; padding-top: 10px; align-self: flex-start; }

/* ------------------------------------------------------------------ Studio */
.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.story-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; width: max-content; max-width: 100%; }
.story-label .tag { color: var(--foam-2); }
.story-label::before { left: -40%; right: -40%; top: -150%; bottom: -150%; }
/* the card keeps to the left, like every other section's words; the right side stays open to the towers */
.story-body { width: min(100%, 780px); padding: clamp(28px, 3.6vw, 52px); }
.story-body .h3 { margin-top: 0; }
.story-body .soft, .process-copy .soft { display: block; }
.story-body p { margin-top: 18px; max-width: 38em; font-size: 16.5px; line-height: 1.65; color: var(--foam-2); }
.story-body .story-lead { margin-top: 24px; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.45; letter-spacing: -.012em; color: var(--foam); }
.story-body .ext { margin-top: 18px; }
.process-lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 110px); align-items: end; }
.process-copy { position: relative; }
.process-copy .actions { margin-top: 26px; }
.small-note { margin-top: 14px; font-size: 14px; color: var(--foam-2); }
.preview-card { padding: clamp(24px, 3vw, 36px); }
.preview-card h4, .steps h4 { margin-top: 10px; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -.03em; }
.preview-card > p:not(.tag) { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--foam-2); }
.steps { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.steps li { padding: 24px 22px 26px; }
.steps li > p:not(.tag) { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--foam-2); }

/* ------------------------------------------------------------------ the closing, on the reef */
/* the page ends on the reef: the words on the open water on the left, the towers and the coral on the right */
.closing { display: flex; align-items: center; min-height: calc(100svh - var(--foot-h, 150px)); padding: clamp(160px, 26vh, 300px) var(--gut) 40px; }
.closing-copy { position: relative; width: min(640px, 46vw); }
.closing-copy::before { left: -50%; right: -40%; top: -30%; bottom: -30%; background: radial-gradient(50% 50% at 46% 50%, rgba(var(--shade), .56) 0%, rgba(var(--shade), .5) 24%, rgba(var(--shade), .36) 46%, rgba(var(--shade), .2) 66%, rgba(var(--shade), .07) 84%, rgba(var(--shade), 0) 100%); }
.closing h2 { font-size: clamp(46px, 6.2vw, 96px); line-height: .96; letter-spacing: -.05em; font-weight: 560; max-width: 10.5ch; text-wrap: balance; }
.closing .lead { max-width: 30em; }
.closing .actions { margin-top: clamp(22px, 2.6vw, 32px); }
.closing .btn-ghost { border-color: rgba(236, 246, 243, .45); background: rgba(3, 34, 44, .26); }
.closing .btn-ghost:hover { border-color: var(--foam); background: rgba(3, 34, 44, .44); }
.closing .promise { margin-top: 18px; font-size: 14px; color: var(--foam-2); }
.about { margin-top: clamp(26px, 3vw, 38px); padding-top: 22px; border-top: 1px solid var(--hair); max-width: 32em; font-size: 15px; line-height: 1.55; color: var(--foam); }
.facts { margin-top: 12px; max-width: 34em; font-size: 14px; color: var(--foam-2); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.facts strong { color: var(--foam); font-weight: 600; }

/* ------------------------------------------------------------------ the footer, on the seabed */
.foot { position: relative; z-index: 1; padding: 30px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14.5px; color: var(--foam-2); text-shadow: var(--text-glow); }
.foot::before { content: ""; position: absolute; z-index: -1; inset: -60px 0 0; background: linear-gradient(180deg, rgba(2, 18, 24, 0), rgba(2, 18, 24, .66) 60px, rgba(2, 18, 24, .74)); pointer-events: none; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 48px; align-items: center; padding-top: 22px; border-top: 1px solid var(--hair); }
.foot-brand { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; }
.foot-brand strong { color: var(--foam); font-weight: 560; }
.foot .mark { flex: none; width: 18px; height: 26px; overflow: visible; }
.foot .mark-a { fill: var(--orange); }
.foot .mark-b { fill: var(--foam); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: -12px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--foam-2); font-weight: 500; }
.foot-nav a:hover, .foot-nav a[aria-current] { color: var(--foam); }
.foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.foot-meta a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-meta a:hover { color: var(--foam); }
.from { display: inline-flex; align-items: center; gap: 9px; }
.from .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
/* the dock sits in the footer's corner at the very bottom: keep the footer's words clear of it */
.foot-meta { padding-right: 250px; }
html.has-dca .foot-meta { padding-right: calc(var(--dca-w, 172px) + 270px); }

/* ------------------------------------------------------------------ the assistant's fallback note (contact.js) */
.contact-status:not([hidden]) {
  position: fixed; z-index: 40; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); translate: -50% 0; width: min(560px, calc(100% - 2 * var(--gut)));
  padding: 14px 48px 14px 18px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; background: rgba(246, 250, 248, .97); color: var(--ink);
  box-shadow: 0 24px 60px -24px rgba(0, 20, 28, .7), 0 0 0 1px rgba(13, 26, 27, .08); text-shadow: none;
}
.contact-status a { text-decoration: underline; text-underline-offset: 3px; }
.status-x { position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--ink-2); }
.status-x:hover { background: rgba(13, 26, 27, .07); color: var(--ink); }

/* ------------------------------------------------------------------ short desktop screens */
@media (max-height: 780px) and (min-width: 761px) {
  :root { --top-h: 74px; }
  .surface .promise { display: none; }
  .surface-row { height: 64px; }
}
@media (min-width: 1800px) and (min-height: 1000px) {
  .h1 { font-size: min(6.1vw, 9.6vh, 124px); }
  .home-copy { width: min(1000px, 52vw); }
  .surface .lead { font-size: min(1.32vw, 2.2vh, 23px); }
  .btn { min-height: 58px; padding: 0 26px; font-size: 16.5px; }
}

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1199px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan > .desc { min-height: 0; }
}
@media (max-width: 1099px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom { grid-template-columns: minmax(0, 1fr); }
  .custom-quote { align-self: stretch; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story, .process-lead { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .sec-head-split, .duo { grid-template-columns: minmax(0, 1fr); }
  .sec-head-split .sec-sub { padding-bottom: 0; }
  .cap-grid, .extra-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .closing-copy { width: min(640px, 100%); }
}
@media (max-width: 699px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .svc-art { aspect-ratio: 16 / 10; }
}
@media (max-width: 860px) {
  .jump-cta { display: inline-flex; }
}
@media (min-width: 861px) {
  .jump-cta { display: none; }   /* the header's pill says it on wider screens */
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 760px) {
  :root { --top-h: 64px; --gut: 20px; --pm: 10px; --blur: none; --glass: linear-gradient(180deg, rgba(5, 38, 48, .8), rgba(3, 24, 32, .86)); }
  .h1 { font-size: min(11.4vw, 46px); margin: 14px 0 16px; letter-spacing: -.048em; }
  .surface .lead { font-size: 16px; }
  .home-copy { top: calc(var(--top-h) + 20px); left: var(--gut); right: var(--gut); width: auto; }
  .home-copy .lead { margin-bottom: 22px; max-width: 21em; }
  .home-copy .actions .btn { min-height: 48px; padding: 0 20px; }
  .surface .promise { display: none; }
  .surface-row { height: 58px; font-size: 13px; }
  .b-mail { display: none; }
  .cue { display: none; }
  .find-label { max-width: none; bottom: calc(100% + 7px); }
  .find-label .long { display: none; }
  .find-label .mono { font-size: 8.5px; letter-spacing: .08em; white-space: nowrap; }
  .find-label strong { font-size: 13px; white-space: nowrap; }
  #work { padding-top: calc(44svh + 40px); }
  #services, #pricing { padding-top: 150px; }
  #studio { padding-top: 170px; }
  .sub { padding-top: 88px; }
  .zone-h { margin-top: 12px; font-size: min(12.4vw, 52px); }
  .zone:not(.surface) .lead { font-size: 18px; }
  .intro-row { margin-top: 8px; gap: 0 12px; }
  .jump-cta { padding-left: 0; }
  .jump-cta::before { display: none; }
  /* orange text cannot reach AA on the brighter water: the depth reads in foam, with an orange dot */
  .eyebrow .depth { color: var(--foam); display: inline-flex; align-items: center; gap: 10px; }
  .eyebrow .depth::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 99, 54, .22); }
  /* phones: the words run the full width, so their shades do too */
  .zone-intro::before, .sec-head::before, .process-copy::before, .duo-main::before {
    left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); top: -40px; bottom: -36px;
    background: linear-gradient(180deg, rgba(var(--shade), 0), rgba(var(--shade), .5) 26%, rgba(var(--shade), .5) 76%, rgba(var(--shade), 0));
  }
  .idx .sec-label::before { left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); top: -30px; bottom: -30px; background: linear-gradient(180deg, rgba(var(--shade), 0), rgba(var(--shade), .52) 32%, rgba(var(--shade), .52) 68%, rgba(var(--shade), 0)); }
  .top.is-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.is-under .top.is-bar { background: #04212a; }
  html.is-ocean:not(.is-under) .top.is-bar { background: #dcebeb; }
  .custom { border-radius: 26px; padding: 26px 20px; }
  .custom-quote { padding: 20px 18px; }
  .plan { padding: 24px 20px 20px; }
  .story-body { padding: 24px 20px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .closing { align-items: flex-start; padding-top: 150px; }
  .closing-copy { width: 100%; }
  .closing-copy::before { left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); top: -40px; bottom: -40px; background: linear-gradient(180deg, rgba(var(--shade), 0), rgba(var(--shade), .56) 14%, rgba(var(--shade), .56) 86%, rgba(var(--shade), 0)); }
  .closing h2 { font-size: min(12vw, 48px); max-width: 11ch; }
  .closing .actions .btn { width: 100%; justify-content: center; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot-brand { align-items: flex-start; }
  .foot-meta, html.has-dca .foot-meta { padding-right: 0; padding-bottom: 8px; }
  .foot-in { gap: 6px 48px; }
  .foot::before { background: linear-gradient(180deg, rgba(2, 18, 24, 0), rgba(2, 18, 24, .5) 70px, rgba(2, 18, 24, .62)); }
  /* the page ends with a window onto the reef between the last words and the footer */
  .closing { padding-bottom: 26svh; }
  /* the dock: the depth and a round Pause at the right edge, where the text is ragged; above the assistant's launcher */
  /* phones: just the round Pause at rest; the depth shows beside it while the page moves, then steps away, so the
     ends of the lines are only ever crossed for a moment */
  .dock { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 4px; gap: 0; }
  html.has-dca .dock { right: var(--dca-r, 16px); bottom: calc(var(--dca-b, 16px) + var(--dca-h, 50px) + 10px); }
  html:not(.no-webgl) .gauge {
    position: absolute; right: calc(100% + 6px); top: 50%; translate: 0 -50%; height: 30px; min-width: 0; padding: 0 11px; border-radius: 999px;
    white-space: nowrap; background: inherit; box-shadow: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--e-io);
  }
  html:not(.no-webgl) .dock.is-live .gauge { opacity: 1; transition-duration: .2s; }
  .no-webgl .dock { padding: 0 12px; min-height: 40px; }
  html { scroll-padding-bottom: 140px; }
  .contact-status:not([hidden]) { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .h1 { font-size: 36px; }
  .b-price { font-size: 12.5px; }
  .find-label .mono { font-size: 7.5px; letter-spacing: .06em; }
  .find-label strong { font-size: 12px; }
  .zone-h { font-size: 40px; }
  .foot-nav { margin-left: -9px; gap: 0; }
  .foot-nav a { padding: 0 9px; }
  .jump a, .jump-cta { font-size: 14px; }
  .btn { padding: 0 18px; }
}
@media (pointer: coarse) { .b-mail { padding: 12px 0; margin: -12px 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}