/* DualCore Surface: every WordPress page outside the ocean (the generic page template, such as the privacy policy,
   and the 404). The "Water band": a band of underwater light at the top that melts into a calm foam page below.
   The header and menu come from shell.css; these are the same tokens as the ocean (ocean.css). */

:root {
  --ink: #0d1a1b;
  --ink-2: #33494a;
  --ink-3: #56696a;
  --foam: #f1f7f4;
  --foam-2: rgba(236, 246, 243, .80);
  --foam-3: rgba(236, 246, 243, .62);
  --orange: #ff6336;
  --cream: #f3f2e9;
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --hair: rgba(13, 26, 27, .18);
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --gut: clamp(20px, 4.45vw, 64px);
  --top-h: 84px;
  --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;

  /* inner pages */
  --paper: #f4f4ee;
  --paper-2: #e9eae2;
  --wrap: 1312px;
  --melt: 150px;                 /* water into foam, below the band */
  --rise: 0px;                   /* how far the product stage reaches up into the band (desktop) */
  --stage-h: 560px;
  --strip-h: min(56svh, 440px);  /* the product strip on phones and tablets */
  color-scheme: light;
}
html.is-under {
  --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;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
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;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
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, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { 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(13, 26, 27, .82); }
html.is-under :focus-visible { box-shadow: 0 0 0 4px rgba(2, 20, 28, .6); }
main: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); }

/* ------------------------------------------------------------------ header states */
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, html.is-under .top.on-light { text-shadow: none; }
html.is-under .top:not(.on-light) .nav a { color: var(--foam); }
html.is-under .brand-label { color: var(--foam); }
/* light look, once the band has scrolled away: dark words on a pale bar */
.top.on-light {
  --fg: var(--ink); --fg-2: var(--ink-2); --hair: rgba(13, 26, 27, .16); --btn-bg: var(--ink); --btn-fg: var(--cream);
  background: rgba(244, 244, 238, .9); box-shadow: 0 1px 0 rgba(13, 26, 27, .08); text-shadow: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
html.is-under .top.on-light .brand-label { color: var(--ink-2); }
.top.on-light .menu-btn { background: rgba(255, 255, 255, .6); }
/* once scrolled while still over water (both looks): a dark glass bar, so words never collide with the header */
.top.is-scrolled {
  background: rgba(3, 30, 38, .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);
}
/* no blur support: a solid bar, so nothing ever shows through behind the mark */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top.is-scrolled { background: #04222b; }
  .top.on-light { background: #f4f4ee; }
}

/* ------------------------------------------------------------------ the water */
.sea {
  /* the page starts below the admin bar when one shows (WordPress moves the page down by its height) */
  position: absolute; z-index: 0; top: var(--ab-doc, 0px); left: 0; right: 0; height: calc(var(--band-real, 480px) + var(--melt));
  overflow: hidden; pointer-events: none;
  /* before WebGL starts (and without it): close to the first frame, the lit ceiling above, the teal below */
  background:
    linear-gradient(90deg, rgba(14, 44, 54, .14) 0%, rgba(14, 44, 54, 0) 40%),
    radial-gradient(60% 50% at 55% 20%, rgba(130, 205, 212, .22), rgba(130, 205, 212, 0) 70%),
    linear-gradient(180deg, #64aeb8 0%, #66b3bf 30%, #519aa9 58%, #3c6874 88%, #36606b 100%);
}
/* Services and Pricing sit deeper (20 m and 30 m): their first frame is darker, so the pre-WebGL water is too */
html[data-page="services"] .sea { background: linear-gradient(90deg, rgba(10, 34, 44, .16) 0%, rgba(10, 34, 44, 0) 40%), linear-gradient(180deg, #1f5664 0%, #2a6c7a 32%, #2d7382 58%, #2c6470 88%, #2a5d69 100%); }
html[data-page="pricing"] .sea { background: linear-gradient(90deg, rgba(8, 28, 38, .18) 0%, rgba(8, 28, 38, 0) 40%), linear-gradient(180deg, #17444f 0%, #1f5563 32%, #245f6d 58%, #275c68 88%, #265a66 100%); }
.sea canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s var(--e-io); }
.sea canvas.on { opacity: 1; }
.no-webgl .sea canvas { display: none; }
/* the light lifts as the water nears the page: brighter, a touch more cyan, never grey */
.sea::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(var(--melt) - 10px); height: 34%;
  background: linear-gradient(180deg, rgba(70, 180, 190, 0), rgba(96, 200, 206, .30) 70%, rgba(130, 218, 220, .42));
  mix-blend-mode: screen;
  /* less behind the words on the left, so the intro's bottom row keeps its contrast */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .3) 48%, #000 72%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .3) 48%, #000 72%);
}
/* the melt: water into foam, through bright aqua, with a soft, wide ripple instead of a ruler edge */
.sea::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(var(--melt) + 80px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='84' x2='0' y2='186'%3E%3Cstop offset='0' stop-color='%23c4ece9' stop-opacity='.55'/%3E%3Cstop offset='.45' stop-color='%23e4f2ee' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23f4f4ee'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Cfilter id='g' x='-5%25' y='-300%25' width='110%25' height='700%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23g)' fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='3' d='M-100 94C200 72 430 112 700 90S1220 62 1700 96'/%3E%3Cpath filter='url(%23b)' fill='url(%23f)' d='M-100 106C200 86 430 126 700 104S1220 76 1700 110V280H-100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(150, 214, 216, 0) 0%, rgba(166, 228, 230, .4) 24%, rgba(190, 236, 235, .72) 44%, rgba(224, 244, 240, .93) 64%, var(--paper) 86%);
}

/* ------------------------------------------------------------------ intro (on the water) */
.intro {
  position: relative; z-index: 1; min-height: clamp(360px, 42svh, 470px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--top-h) + clamp(28px, 6svh, 80px)) 0 clamp(18px, 2.6svh, 30px);
  color: var(--fg);
}
/* a soft shade under the words: the header's words at the top, the heading and lead on the left */
.intro::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 38, 48, .58) 0, rgba(3, 38, 48, .5) 64px, rgba(3, 38, 48, .2) 120px, rgba(3, 38, 48, 0) 180px),
    linear-gradient(90deg, rgba(3, 38, 48, .56) 0%, rgba(3, 38, 48, .52) 47%, rgba(3, 38, 48, .3) 60%, rgba(3, 38, 48, 0) 74%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.intro-in { position: relative; text-shadow: 0 1px 18px rgba(0, 30, 40, .38), 0 0 2px rgba(0, 30, 40, .22); }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--fg-2); }
.eyebrow .n { color: #b33c17; }
.eyebrow .depth { color: #ffb596; text-transform: none; letter-spacing: .08em; }   /* "10 m", never "10 M" */
.eyebrow .sep { color: var(--foam-3); margin-inline: -4px; }
html.is-under .intro .eyebrow { color: var(--foam); }
.intro h1 {
  margin-top: 16px; font-size: clamp(46px, 6.6vw, 96px); line-height: .96; letter-spacing: -.05em; font-weight: 560;
}
.lead { margin-top: clamp(14px, 1.8vw, 22px); max-width: min(30em, 42vw); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.012em; color: var(--foam); }

/* the intro's bottom row: where things are on this page, and the water's pause (as on Home's bottom row) */
.intro-row {
  margin-top: clamp(14px, 2.2svh, 24px); max-width: min(calc(30 * clamp(18px, 1.45vw, 21px)), 52vw); font-size: 14.5px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px;
}
.jump { display: flex; 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 { display: none; }           /* the header's pill says it on wider screens */

/* Pause belongs to the row: after the jump links, behind a hairline */
.pause { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13.5px; color: var(--foam); }
.intro-row .pause { padding-left: 22px; }
.intro-row .pause::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 1px; background: rgba(236, 246, 243, .34); }
.pause-ico { flex: none; position: relative; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(236, 246, 243, .5); background: rgba(3, 34, 44, .28); }
.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; }
.pause:hover .pause-ico { background: rgba(3, 34, 44, .5); }
.no-webgl .pause { display: none; }

/* ------------------------------------------------------------------ the page below */
.paper { position: relative; z-index: 1; }
html[data-look="light"] .paper, html[data-look="light"] .foot {
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --hair: rgba(13, 26, 27, .13); --btn-bg: var(--ink); --btn-fg: var(--cream);
  color: var(--fg);
}

.sec { padding-top: clamp(72px, 9vw, 136px); }
.products { padding-top: 0; }
.sec-head { position: relative; max-width: 760px; }
.sec-head h2:not(.sec-label) { margin-top: 16px; font-size: clamp(36px, 4.5vw, 64px); line-height: 1; letter-spacing: -.045em; }
.sec-sub { margin-top: 16px; max-width: 30em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.012em; color: var(--fg-2); }
.sec-label { font-weight: 450; }

.tag { color: var(--fg-3); }
.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(--fg-2); max-width: 30em; }
.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(--fg);
  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); }

/* ------------------------------------------------------------------ 01 · our own products (after Aperture's Apps chapter) */
/* the index: AdaptaFit leads, Hand Load is a compact row, LOUDMOUTH is a quiet last line */
.idx-list { margin-top: 18px; }
.p h3 { margin-top: 8px; line-height: 1.04; letter-spacing: -.035em; }
.p .line { margin-top: 6px; }
.p-af h3 { 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 h3, .p-lm h3 { 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; } }

/* the stage: devices, arranged as one still life */
.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, .16), inset 0 0 0 4px #060707,
    0 60px 90px -46px rgba(0, 34, 44, .6), 0 22px 40px -26px rgba(0, 34, 44, .42);
}
.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; }
/* tablet: Hand Load's record screen, cropped to the part with content */
.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, .14), inset 0 0 0 4px #060707,
    0 50px 80px -44px rgba(0, 34, 44, .56), 0 18px 34px -24px rgba(0, 34, 44, .4);
}
.crop { aspect-ratio: 900 / 730; overflow: hidden; border-radius: 13px; background: #f1f0f5; }
/* LOUDMOUTH: a dark tile, a low warm DualCore glow, the name in tracked capitals; nothing else claimed */
.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, 255, 255, .08), 0 50px 80px -44px rgba(0, 24, 32, .7), 0 18px 34px -24px rgba(0, 24, 32, .5);
}
.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) {
  /* the index on the left; on the right the stage reaches up into the band, so real work surfaces on the first screen */
  :root { --rise: clamp(110px, 17svh, 170px); --stage-h: min(clamp(500px, 100svh - 205px, 720px), 50vw); --melt: 130px; }
  /* the section is pulled up over the intro's bottom row: let clicks through everywhere but the index and devices */
  /* (its negative margin collapses through .products and .paper, so all three start inside the band) */
  .paper, .products, .prods { pointer-events: none; }
  .paper > :not(.products) { pointer-events: auto; }
  .prods { position: relative; display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); margin-top: calc(-1 * var(--rise)); }
  .prods > * > * , .v { pointer-events: auto; }
  .idx { padding-top: calc(var(--rise) + var(--melt) * .42); padding-right: clamp(24px, 3vw, 56px); }
  .stage { position: relative; height: var(--stage-h); 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; }
  /* a still life with air in it: the phone 86% of the stage tall (its frame is 2.084 times as tall as wide), its screen
     never covered; the tablet higher and to the right, only its bezel behind the phone's edge; the tile below the
     tablet, just touching the phone's frame */
  .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); }
  /* the index and the stage answer each other (pointer or keyboard) */
  .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(.9); }
  .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; }
  .prods:has(.p:is(:hover, :focus-within)) .p:not(:hover, :focus-within) { opacity: .82; }
  .p { transition: opacity .4s var(--e-io); }
}
/* light look: the band's light still plays on the top of the phone as it surfaces */
html[data-look="light"] .v-af::after {
  content: ""; position: absolute; inset: 0; border-radius: 15.5% / 7.3%; pointer-events: none;
  background: linear-gradient(180deg, rgba(150, 226, 232, .16) 0%, rgba(150, 226, 232, .05) 24%, rgba(150, 226, 232, 0) 40%);
}

@media (max-width: 1099px) {
  /* phones and tablets: the three screens as one short strip you can swipe, the index below it */
  .prods { display: flex; flex-direction: column; }
  .stage {
    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(var(--strip-h) + 64px);
  }
  .stage::-webkit-scrollbar { display: none; }
  .stage:focus-visible { outline-offset: -4px; }
  .v { position: relative; flex: none; scroll-snap-align: start; display: flex; flex-direction: column; }
  .v-af { width: calc(var(--strip-h) / 2.084); }
  .v-hl { width: min(80vw, calc(var(--strip-h) * 1.1)); }
  .v-lm { width: min(62vw, calc(var(--strip-h) * .72)); }
  .v-lm .lm-tile { aspect-ratio: 4 / 5; }
  /* phones: the tablet shows its tabs and the record's summary, not the notes below */
  .v-hl .crop { aspect-ratio: 900 / 470; }
  /* every screen says what it is */
  .v-cap { margin-top: 14px; color: var(--fg-3); white-space: nowrap; }
  html[data-look="light"] .v-cap { color: var(--ink-2); }
  /* shadows short enough to stay inside the swipe strip (it clips them) */
  html[data-look] .stage .device, html[data-look] .stage .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, 30, 40, .5); }
  html[data-look] .stage .lm-tile { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 26px 34px -22px rgba(0, 30, 40, .5); }
  .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; }
}

/* ------------------------------------------------------------------ 02 · concept sites */
.cards { margin-top: clamp(36px, 4.4vw, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.card { position: relative; }
.card-media {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 0 0 1px rgba(13, 26, 27, .07), 0 34px 60px -40px rgba(0, 34, 44, .5);
  transition: translate .6s var(--e-out), 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 { translate: 0 -5px; box-shadow: 0 0 0 1px rgba(13, 26, 27, .07), 0 44px 70px -40px rgba(0, 34, 44, .6); }
.card:focus-within .card-media { outline: 2px solid var(--orange); outline-offset: 3px; }
.card-copy { padding: 22px 2px 0; }
.card-copy h3 { 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: 18px; }
@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: 40px; } }

/* ------------------------------------------------------------------ closing */
.cta { padding-bottom: clamp(72px, 9vw, 128px); }
.cta-card {
  position: relative; overflow: hidden; border-radius: 32px; isolation: isolate;
  color: var(--foam);
  --fg: var(--foam); --fg-2: var(--foam-2); --hair: rgba(236, 246, 243, .24); --btn-bg: var(--foam); --btn-fg: #06262d;
}
.cta-in { position: relative; z-index: 1; padding: clamp(44px, 6vw, 92px) clamp(24px, 6vw, 88px); text-shadow: 0 1px 16px rgba(0, 30, 40, .3); }
.cta-in .btn { text-shadow: none; }
/* light look: a small window back into the same water (live when WebGL runs; the band's gradient otherwise) */
.cta-sea { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #5aa7b4 0%, #4f97a6 40%, #3f7784 100%); }
.cta-sea canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--e-io); }
.cta-sea canvas.on { opacity: 1; }
.no-webgl .cta-sea canvas { display: none; }
.cta-sea::after {
  content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(3, 38, 48, .56) 0%, rgba(3, 38, 48, .48) 45%, rgba(3, 38, 48, .38) 66%, rgba(3, 38, 48, .16) 86%, rgba(3, 38, 48, .08) 100%);
}
.cta-card h2 { max-width: 14em; font-size: clamp(36px, 4.8vw, 68px); line-height: 1; letter-spacing: -.045em; }
.cta-line { margin-top: 20px; max-width: 32em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--foam); }
.cta-row { margin-top: clamp(28px, 3.4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 24px 0 22px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-size: 16px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 16px 30px -16px rgba(0, 20, 26, .6);
  transition: translate .35s var(--e-out), box-shadow .35s var(--e-out);
}
.btn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.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:hover { translate: 0 -1px; }
.btn:hover svg { transform: translate(2px, -2px); }
.mail { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--foam); }
.mail:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.promise { margin-top: 22px; font-size: 14px; color: var(--foam); opacity: .9; }

/* ------------------------------------------------------------------ footer */
.foot { position: relative; z-index: 1; padding: 44px 0 calc(44px + 64px); font-size: 14.5px; color: var(--fg); }
html[data-look="light"] .foot { border-top: 1px solid var(--hair); background: var(--paper); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 48px; align-items: center; }
.foot-brand { display: flex; align-items: center; gap: 14px; color: var(--fg-2); grid-column: 1 / -1; }
.foot-brand strong { color: var(--fg); font-weight: 560; }
.foot .mark { flex: none; width: 18px; height: 26px; overflow: visible; }
.foot .mark-a { fill: var(--orange); }
.foot .mark-b { fill: currentColor; }
.foot-brand .mark { color: var(--fg); }
.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(--fg-2); font-weight: 500; }
.foot-nav a:hover, .foot-nav a[aria-current] { color: var(--fg); }
.foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; color: var(--fg-2); }
.foot-meta a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-meta a:hover { color: var(--fg); }
.from { display: inline-flex; align-items: center; gap: 9px; }
.from .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

.btn-ghost {
  display: inline-flex; align-items: center; height: 54px; padding: 0 22px; border-radius: 999px;
  border: 1px solid rgba(236, 246, 243, .5); color: var(--foam); font-size: 16px; font-weight: 500; letter-spacing: -.01em;
  background: rgba(3, 34, 44, .22); transition: background-color .3s var(--e-io), border-color .3s var(--e-io);
}
.btn-ghost:hover { border-color: var(--foam); background: rgba(3, 34, 44, .4); }
/* ------------------------------------------------------------------ leaving for Home: rise to the surface */
html.rising .sea { position: fixed; inset: var(--ab, 0px) 0 0; height: auto; z-index: 25; animation: sea-up .16s var(--e-io) both; }
html.rising .sea::before, html.rising .sea::after { opacity: 0; }
html.rising main, html.rising .foot { opacity: 0; transition: opacity .2s var(--e-io); }
html.rising .top, html.rising .top * { transition: none !important; }
@keyframes sea-up { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ phones */
@media (max-width: 860px) {
  .jump-cta { display: inline-flex; }   /* the header's pill is hidden here: keep a way to get in touch on the first screen */
}
@media (max-width: 760px) {
  /* a taller camera sees more of the lit ceiling: match its first frame */
  .sea { background: linear-gradient(180deg, #6fc2cc 0%, #62b0bd 25%, #549eae 50%, #467f8f 72%, #3d6f7c 100%); }
  :root { --top-h: 64px; --gut: 20px; --melt: 170px; }
  .intro { min-height: 0; padding: calc(var(--top-h) + 30px) 0 22px; }
  /* phones: the lead runs the full width, so the shade does too, but only as far down as the words: under the last
     row it thins out over about 150 px, and the melt below takes over, so the band never ends on a line */
  .intro::before {
    bottom: -150px;
    background: linear-gradient(180deg, rgba(3, 38, 48, .6) 0, rgba(3, 38, 48, .57) 64px, rgba(3, 38, 48, .52) 34%,
      rgba(3, 38, 48, .46) calc(100% - 250px), rgba(3, 38, 48, .4) calc(100% - 170px), rgba(3, 38, 48, .24) calc(100% - 110px),
      rgba(3, 38, 48, .1) calc(100% - 55px), rgba(3, 38, 48, 0) 100%);
    -webkit-mask-image: none; mask-image: none;
  }
  /* the melt: a long ramp from the water through bright aqua to the page */
  .sea::after {
    height: var(--melt);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='96' x2='0' y2='196'%3E%3Cstop offset='0' stop-color='%23d2efec' stop-opacity='.5'/%3E%3Cstop offset='.5' stop-color='%23e8f3ef' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23f4f4ee'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='url(%23f)' d='M-40 112C60 100 130 124 210 112S330 96 440 116V260H-40Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
      linear-gradient(180deg, rgba(120, 196, 204, 0) 0%, rgba(140, 212, 216, .28) 22%, rgba(172, 226, 228, .56) 42%, rgba(210, 238, 236, .84) 62%, rgba(236, 244, 240, .97) 80%, var(--paper) 94%);
  }
  .sea::before { display: none; }
  /* the strip's phone rises out of the melt */
  .products .stage { padding-top: 0; }
  /* orange text cannot reach AA on the brighter phone 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); }
  .intro h1 { margin-top: 12px; }
  .lead, .intro-row { max-width: none; }
  .lead { font-size: 18px; }
  .intro-row { margin-top: 8px; gap: 0 12px; }
  .jump { flex: 1 1 auto; }
  /* Pause: a quiet icon at the end of the jump row (still 44 px to tap, still named "Pause motion") */
  .intro-row .pause { order: 2; width: 44px; justify-content: center; padding: 0; opacity: .82; }
  .intro-row .pause::before { display: none; }
  .intro-row .pause-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .intro-row .jump-cta { order: 3; margin-left: -4px; }
  /* phones: the scrolled bars are fully opaque (a hairline marks the edge), so no page words ever show behind the mark */
  .top.is-scrolled { background: #04212a; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top.on-light { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cta-card { border-radius: 26px; }
  .cta-sea::after { background: linear-gradient(180deg, rgba(3, 38, 48, .5), rgba(3, 38, 48, .44) 60%, rgba(3, 38, 48, .5)); }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot-brand { align-items: flex-start; }
}
@media (max-width: 360px) {
  .foot-nav { margin-left: -9px; gap: 0; }
  .foot-nav a { padding: 0 9px; font-size: 14.5px; }
  .intro h1 { font-size: 42px; }
  .lead { font-size: 17px; }
  .btn { padding: 0 18px; }
  .jump a, .jump-cta { font-size: 14px; }
}

/* ================================================================== Services, Pricing and every other page
   The same system as Work: mono tags with an orange number, serif-italic second lines, plates on the foam page,
   and the water again wherever something should stand out (the featured plan, the custom website). */
.sec { position: relative; }
.intro h1 { max-width: 10em; text-wrap: balance; }
.intro h1 .nw { white-space: nowrap; }
.soft { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--ink-2); }
.intro .soft { color: inherit; }
/* the first section after the band starts in the melt, where the water turns to foam */
.sec-first { padding-top: calc(var(--melt) * .62); }
.tag .n { color: #b33c17; }

/* a section heading with its sub-line (or an aside) beside it on wide screens */
.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 h2:not(.sec-label), .h2 { margin-top: 16px; font-size: clamp(36px, 4.5vw, 64px); line-height: 1; letter-spacing: -.045em; font-weight: 560; text-wrap: balance; }
.sec-head h2 .soft, .h2 .soft { font-size: 1.04em; }
.fine { margin-top: 26px; max-width: 46em; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.desc.small { font-size: 14px; color: var(--ink-3); }
.ticks { margin-top: 16px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-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, .16); }

/* "more" details (scope, visit details, how a quote is calculated) */
.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;
}
.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(--fg-2); }

/* ------------------------------------------------------------------ Services: the four services */
.svc-kicker { margin-top: clamp(40px, 5vw, 64px); color: var(--ink-3); }
.svc-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); }
.svc h3 { 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; }
/* each service has a small drawing of itself, on the water */
.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, .55), rgba(170, 232, 236, 0) 70%),
    linear-gradient(180deg, #5aa7b4 0%, #4f97a6 45%, #3f7784 100%);
  box-shadow: 0 0 0 1px rgba(13, 26, 27, .06), 0 30px 50px -36px rgba(0, 34, 44, .55);
  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, .5), rgba(170, 232, 236, 0) 70%), linear-gradient(180deg, #549fad 0%, #468a9a 45%, #376b78 100%); }
.svc:nth-child(3) .svc-art { background: radial-gradient(70% 55% at 60% 0%, rgba(170, 232, 236, .45), rgba(170, 232, 236, 0) 70%), linear-gradient(180deg, #4c95a4 0%, #3f7f8f 45%, #31606c 100%); }
.svc:nth-child(4) .svc-art { background: radial-gradient(70% 55% at 40% 0%, rgba(170, 232, 236, .4), rgba(170, 232, 236, 0) 70%), linear-gradient(180deg, #458b9a 0%, #397584 45%, #2c5662 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, .55); 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: var(--orange); }
.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(--ink-2); max-width: 40em; }
.svc-foot .ext { margin-top: 0; }

/* ------------------------------------------------------------------ Services: capabilities */
.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 h3 { 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; }

/* ------------------------------------------------------------------ Services: handoff or managed, and photos */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px clamp(32px, 6vw, 110px); align-items: center; }
.duo-main .sec-sub { max-width: 32em; }
.duo-main .ext { margin-top: 18px; }
.note-card { padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: #fbfbf7; box-shadow: 0 0 0 1px rgba(13, 26, 27, .07), 0 40px 70px -50px rgba(0, 34, 44, .45); }
.note-card h3 { 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 { padding: 22px 24px; border-radius: 22px; background: #fbfbf7; box-shadow: 0 0 0 1px rgba(13, 26, 27, .07); }
.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(--ink); }
.plan-count .num { font-size: 46px; line-height: 1; letter-spacing: -.05em; font-weight: 560; color: var(--ink); }
.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: #fbfbf7; box-shadow: 0 0 0 1px rgba(13, 26, 27, .08), 0 36px 60px -46px rgba(0, 34, 44, .45);
}
.plan h3 { 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(--fg-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(--fg-2); }
.price .per b { font-weight: 600; color: var(--fg); }
.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: var(--ink); color: var(--cream); font-size: 15px; font-weight: 500; letter-spacing: -.01em; text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 14px 26px -16px rgba(0, 20, 26, .6);
  transition: translate .35s var(--e-out), box-shadow .35s var(--e-out);
}
.plan-btn svg, .btn-quiet 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 { translate: 0 -1px; }
.plan-btn:hover svg { transform: translate(2px, -2px); }
/* the featured plan (Website Managed): on the water */
.plan-featured {
  color: var(--foam); --fg: var(--foam); --fg-2: var(--foam-2); --fg-3: rgba(236, 246, 243, .72); --hair: rgba(236, 246, 243, .24);
  background:
    radial-gradient(90% 60% at 80% -10%, rgba(150, 226, 232, .38), rgba(150, 226, 232, 0) 70%),
    linear-gradient(180deg, #2f7c8a 0%, #1e5f6c 55%, #154a55 100%);
  box-shadow: 0 0 0 1px rgba(214, 244, 244, .12) inset, 0 44px 70px -40px rgba(0, 34, 44, .7);
}
.plan-featured .tag { color: #ffc2a8; }
.plan-featured .desc, .plan-featured .ticks { color: rgba(236, 246, 243, .9); }
.plan-featured .ticks li::before { box-shadow: 0 0 0 3px rgba(255, 99, 54, .25); }
.plan-featured .plan-btn { background: var(--foam); color: #06262d; }
.plan-featured :focus-visible, .custom :focus-visible { box-shadow: 0 0 0 4px rgba(2, 20, 28, .6); }

/* the fifth plan: a custom website, quoted around the project, on deeper water */
.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);
  color: var(--foam); --fg: var(--foam); --fg-2: var(--foam-2); --fg-3: rgba(236, 246, 243, .72); --hair: rgba(236, 246, 243, .24);
}
.custom-sea {
  position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(60% 70% at 88% 0%, rgba(160, 230, 236, .34), 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, #1b5966 0%, #10414c 50%, #0a2f38 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: #ffc2a8; }
.custom h3 { margin-top: 10px; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -.045em; }
.custom .desc { color: rgba(236, 246, 243, .9); max-width: 34em; }
.custom .ticks { color: rgba(236, 246, 243, .9); }
.custom-quote { align-self: end; padding: 24px; border-radius: 22px; background: rgba(3, 26, 34, .38); 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 { background: var(--foam); color: #06262d; width: 100%; }
.price-note { margin-top: 26px; max-width: 58em; font-size: 14px; line-height: 1.6; color: var(--ink-3); }

.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 h3 { 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(--ink-2); }
.extra .more { margin-top: 16px; }
.extra .ext { margin-top: auto; padding-top: 10px; align-self: flex-start; }

/* ------------------------------------------------------------------ Work: the concepts' honesty line */
.concept-note { margin-top: clamp(28px, 3vw, 40px); max-width: 52em; font-size: 14px; line-height: 1.6; color: var(--ink-3); }

/* ------------------------------------------------------------------ generic pages and 404 */
.intro-short { min-height: clamp(300px, 34svh, 380px); }
.intro-short h1 { font-size: clamp(42px, 5.4vw, 80px); }
.doc { padding: calc(var(--melt) * .8) 0 clamp(72px, 9vw, 128px); }
.prose { max-width: 44em; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose > :first-child { margin-top: 0; }
/* a Pause with nothing before it in the row (the generic pages) needs no divider */
.intro-row .pause:first-child { padding-left: 0; }
.intro-row .pause:first-child::before { display: none; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); line-height: 1.15; letter-spacing: -.03em; margin-top: 1.8em; }
.prose h2 { font-size: clamp(28px, 2.6vw, 38px); }
.prose h3 { font-size: clamp(22px, 1.9vw, 27px); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose img, .prose figure { max-width: 100%; height: auto; border-radius: 12px; }
.prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 2px solid var(--orange); font-family: var(--serif); font-style: italic; font-size: 1.25em; color: var(--ink); }
.prose a { color: var(--ink); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--hair); text-align: left; }
.prose .alignleft { float: left; margin: .3em 1.4em 1em 0; }
.prose .alignright { float: right; margin: .3em 0 1em 1.4em; }
.prose .aligncenter { margin-inline: auto; }
.prose .wp-caption-text, .prose figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.post-list { display: grid; gap: 34px; max-width: 44em; }
.post-item h2 { margin-top: 8px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.035em; }
.post-item .prose { margin-top: 10px; }
.post-nav { margin-top: 40px; }
.post-nav .nav-links { display: flex; justify-content: space-between; gap: 20px; }
.lost { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(13, 26, 27, .3); }
.btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn-quiet svg { width: 12px; height: 12px; }
.paper .contact-status:not([hidden]) { margin-top: 18px; max-width: 40em; padding: 14px 18px; border-radius: 16px; background: #fbfbf7; color: var(--ink); font-size: 15px; box-shadow: 0 0 0 1px rgba(13, 26, 27, .1); }
.paper .cta .contact-status:not([hidden]) { background: rgba(246, 250, 248, .94); text-shadow: none; }

/* ------------------------------------------------------------------ responsive: Services, Pricing, generic */
@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; }
}
@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; }
}
@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: 760px) {
  .intro h1 .nw { white-space: normal; }
  .sec-first { padding-top: calc(var(--melt) + 8px); }
  .doc { padding-top: calc(var(--melt) + 8px); }
  .custom { border-radius: 26px; padding: 26px 20px; }
  .custom-quote { padding: 20px 18px; }
  .plan { padding: 24px 20px 20px; }
  .intro-short { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .sea canvas, .cta-sea canvas { transition: none; }
}