/* BidNama hub B: "Glass & Water"
   Mobile-first. Tokens on :root. Textures are built in code (SVG grain, CSS flutes, WebGL water). */

@font-face { font-family: "Instrument Serif"; src: url(../assets/fonts/instrument-serif-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(../assets/fonts/instrument-serif-italic-latin.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(../assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
/* Doto, subset to price glyphs only ($ 0-9 , + / f r o m space) */
@font-face { font-family: "Doto"; src: url(../assets/fonts/doto-800-subset.woff2) format("woff2"); font-weight: 800; font-display: swap; }
/* metric-matched fallback so the serif swap does not shift the hero */
@font-face { font-family: "Serif Fallback"; src: local("Times New Roman"), local("Times"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; }

:root {
  /* water palette */
  --ink: #06161a;
  --ink-2: #0b2328;
  --deep: #0a3236;
  --teal: #12514f;
  --sea: #2a7f78;
  --mist: #9cc9c0;
  --foam: #e4efeb;
  --bone: #f3f1eb;
  --paper: #ffffff;
  --text: #0b1d21;
  --muted: #475a5c;
  --line: rgba(11, 29, 33, .14);
  --line-strong: rgba(11, 29, 33, .28);
  --on-dark: #eef3f0;
  --on-dark-muted: rgba(238, 243, 240, .76);
  --orange: #ff4f00;

  --serif: "Instrument Serif", "Serif Fallback", Georgia, serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dots: "Doto", var(--mono);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: 20px;
  --radius: 18px;
  --radius-sm: 12px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --head-h: 60px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --flutes: repeating-linear-gradient(90deg,
      rgba(255,255,255,.16) 0px, rgba(255,255,255,.03) 2px, rgba(255,255,255,0) 6px,
      rgba(0,0,0,.10) 11px, rgba(0,0,0,.16) 13px, rgba(255,255,255,.16) 14px);
}
@media (min-width: 768px) { :root { --gutter: 32px; --head-h: 68px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--head-h); } /* in-page links land just below the fixed header */
main[tabindex="-1"]:focus, main section[tabindex="-1"]:focus { outline: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 18px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; border-radius: 6px; }
[data-tone="dark"] :focus-visible, .site-head.is-dark :focus-visible { outline-color: var(--mist); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; transform: translateY(-200%); z-index: 100; background: var(--bone); color: var(--ink); padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); position: relative; }

/* --------------------------------------------------------- type */
.eyebrow {
  font-family: var(--mono); font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: var(--s4); font-weight: 500;
}
.eyebrow--light { color: var(--mist); }
h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.012em;
  font-size: clamp(2.35rem, 1.55rem + 3.5vw, 4.5rem); line-height: 1.0; text-wrap: balance;
}
h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; line-height: 1.1; }
em { font-style: italic; }
.sec-head { max-width: 820px; margin-bottom: var(--s7); }
.sec-head h2 { margin-bottom: var(--s5); }
.sec-lede { font-size: 1.04rem; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.sec-lede strong { color: var(--text); font-weight: 600; }
@media (min-width: 1024px) {
  .sec-head--split { max-width: none; display: grid; grid-template-columns: 7fr 5fr; gap: var(--s7); align-items: end; }
  .sec-head--split h2 { margin-bottom: 0; }
  .sec-head--split .sec-lede { padding-bottom: 6px; }
  .sec-head { margin-bottom: var(--s8); }
}

/* --------------------------------------------------------- buttons */
.btn {
  --bg: transparent; --fg: currentColor; --bd: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 22px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:active { transform: scale(.97); }
.btn span[aria-hidden] { transition: transform .3s var(--ease-out); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn--light { --bg: var(--bone); --fg: var(--ink); --bd: var(--bone); }
.btn--light:hover { --bg: #fff; --bd: #fff; }
.btn--glass { --bg: rgba(255,255,255,.06); --fg: var(--on-dark); --bd: rgba(238,243,240,.38); }
.btn--glass:hover { --bg: rgba(255,255,255,.14); --bd: rgba(238,243,240,.7); }
.btn--ink { --bg: var(--ink); --fg: var(--bone); --bd: var(--ink); }
.btn--ink:hover { --bg: var(--teal); --bd: var(--teal); }
.btn--line { --bg: transparent; --fg: var(--ink); --bd: var(--line-strong); }
.btn--line:hover { --bd: var(--ink); --bg: rgba(255,255,255,.5); }

/* --------------------------------------------------------- textures */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: var(--grain); background-size: 180px 180px; opacity: .22; mix-blend-mode: overlay;
}
.grain--light { opacity: .5; mix-blend-mode: multiply; }
.bg-aqua {
  background:
    radial-gradient(55% 40% at 8% 6%, rgba(96, 172, 160, .30), transparent 70%),
    radial-gradient(45% 38% at 96% 22%, rgba(150, 198, 210, .34), transparent 70%),
    radial-gradient(60% 40% at 30% 68%, rgba(196, 222, 212, .55), transparent 70%),
    radial-gradient(55% 45% at 92% 96%, rgba(120, 180, 176, .26), transparent 70%),
    var(--bone);
}
.bg-aqua--b {
  background:
    radial-gradient(50% 40% at 92% 4%, rgba(96, 172, 160, .28), transparent 70%),
    radial-gradient(48% 40% at 4% 40%, rgba(150, 198, 210, .32), transparent 70%),
    radial-gradient(60% 45% at 70% 90%, rgba(196, 222, 212, .6), transparent 70%),
    var(--bone);
}

/* --------------------------------------------------------- header (fixed, never moves) */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--head-h);
  padding: 8px max(10px, calc(var(--gutter) - 10px)) 0;
  pointer-events: none;
}
.site-head__bar {
  pointer-events: auto; height: calc(var(--head-h) - 16px); max-width: 1300px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 8px 0 12px; border-radius: 14px;
  color: var(--ink);
  background: rgba(243, 241, 235, .94);
  border: 1px solid rgba(11, 29, 33, .08);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.site-head.is-dark .site-head__bar { color: var(--on-dark); background: rgba(6, 22, 26, .88); border-color: rgba(238, 243, 240, .14); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; min-height: 44px; padding-right: 6px; }
.brand__mark { width: 24px; height: 24px; flex: none; }
.brand__word { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.site-head__mail {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: -.01em; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 10px;
  transition: background-color .2s ease;
}
.site-head__mail:hover { background: rgba(127, 160, 160, .16); }
@media (max-width: 359px) { .site-head__mail { font-size: 12px; padding: 0 6px; } .brand__word { font-size: 16px; } }

/* --------------------------------------------------------- navigation (inside the fixed header; the header itself never moves or resizes) */
.site-head__bar { position: relative; }
.site-head__end { display: flex; align-items: center; gap: 6px; flex: none; }
.nav__link, .nav__cta, .nav__toggle, .nav__sheet-cta, .nav__sheet-mail { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.nav__list { margin: 0; padding: 0; list-style: none; }
.nav:focus { outline: none; }

/* under 960px: logo + Menu button; the links live in a solid sheet under the bar */
@media (max-width: 959px) {
  .site-head__bar { background: rgb(243, 241, 235); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-head.is-dark .site-head__bar { background: rgb(8, 24, 28); }
  .site-head__mail, .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px; margin: 0;
    background: transparent; color: inherit; border: 1px solid rgba(11, 29, 33, .2); border-radius: 10px; cursor: pointer;
    font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -.005em;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .site-head.is-dark .nav__toggle { border-color: rgba(238, 243, 240, .28); }
  .nav__toggle:hover, .nav__toggle[aria-expanded="true"] { background: rgba(127, 160, 160, .16); }
  .nav__burger { position: relative; width: 18px; height: 12px; flex: none; }
  .nav__burger::before, .nav__burger::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor;
    transition: transform .3s var(--ease-out), top .3s var(--ease-out);
  }
  .nav__burger::before { top: 2px; }
  .nav__burger::after { top: 8.25px; }
  .nav__toggle[aria-expanded="true"] .nav__burger::before { top: 5.1px; transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__burger::after { top: 5.1px; transform: rotate(-45deg); }

  .nav {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    max-height: calc(100svh - var(--head-h) - 16px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 20px 20px; border-radius: 14px;
    background: rgb(243, 241, 235); color: var(--ink); border: 1px solid rgba(11, 29, 33, .1);
    box-shadow: 0 28px 44px -26px rgba(2, 10, 12, .55);
  }
  .site-head.is-dark .nav { background: rgb(8, 24, 28); color: var(--on-dark); border-color: rgba(238, 243, 240, .14); }
  .site-head.nav-open .nav { display: block; }
  .nav__list li + li { border-top: 1px solid var(--line); }
  .site-head.is-dark .nav__list li + li { border-top-color: rgba(238, 243, 240, .12); }
  .nav__link {
    position: relative; display: flex; align-items: center; min-height: 58px; padding: 4px 36px 4px 2px;
    font-family: var(--serif); font-size: 1.85rem; line-height: 1.1; letter-spacing: -.01em; text-decoration: none;
  }
  .nav__link::after { content: "→"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 15px; opacity: .45; transition: transform .3s var(--ease-out), opacity .2s ease; } /* out of flow: the active underline stays on the words */
  .nav__link:hover::after { opacity: .9; transform: translate(3px, -50%); }
  .nav__link.is-active { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
  .nav__foot { display: grid; gap: 8px; padding-top: 16px; }
  .nav__sheet-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 20px; border-radius: 999px;
    background: var(--ink); color: var(--bone); text-decoration: none; font-family: var(--sans); font-size: 16px; font-weight: 600;
  }
  .site-head.is-dark .nav__sheet-cta { background: var(--bone); color: var(--ink); }
  .nav__sheet-mail { display: flex; align-items: center; justify-content: center; min-height: 44px; font-family: var(--mono); font-size: 13.5px; text-decoration: none; opacity: .8; }
  .nav__sheet-mail:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .site-head.nav-open .nav { animation: nav-in .28s var(--ease-out) both; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .nav { top: 100%; border-radius: 0 0 16px 16px; border-width: 0 0 1px; padding: 4px 20px 22px; max-height: calc(100svh - var(--head-h)); }
}
.nav-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(4, 14, 17, .5); }
.nav-scrim[hidden] { display: none; }
html.nav-lock, html.nav-lock body { overflow: hidden; }

/* 960px and up: links in the bar, active section underlined, a small solid Get a quote */
@media (min-width: 960px) {
  .site-head__bar { padding-right: 4px; gap: 16px; }
  .nav { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; }
  .nav__foot, .nav__toggle { display: none; }
  .nav__list { display: flex; align-items: center; gap: 2px; }
  .nav__link {
    position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 10px;
    font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; text-decoration: none;
    opacity: .74; transition: opacity .2s ease, background-color .2s ease;
  }
  .nav__link::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 9px; height: 1.5px; border-radius: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-out);
  }
  .nav__link:hover { opacity: 1; background: rgba(127, 160, 160, .16); }
  .nav__link:focus-visible { opacity: 1; }
  .nav__link.is-active { opacity: 1; }
  .nav__link.is-active::after { transform: scaleX(1); }
  .site-head__mail { display: none; }
  .nav__cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; white-space: nowrap;
    background: var(--ink); color: var(--bone); text-decoration: none; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
    transition: background-color .2s ease, color .2s ease;
  }
  .nav__cta:hover { background: var(--teal); }
  .site-head.is-dark .nav__cta { background: var(--bone); color: var(--ink); }
  .site-head.is-dark .nav__cta:hover { background: #fff; }
}
@media (min-width: 1280px) { .site-head__mail { display: inline-flex; } .nav__link { padding: 0 13px; } .nav__link::after { left: 13px; right: 13px; } }

/* --------------------------------------------------------- water hosts (hero + CTA) */
[data-water] { position: relative; overflow: clip; background: var(--ink); color: var(--on-dark); isolation: isolate; }
[data-water-stage] {
  position: relative;
  /* static grainy water gradient: the poster that shows before (or without) WebGL */
  background:
    radial-gradient(70% 55% at 18% 12%, rgba(42, 127, 120, .75), transparent 70%),
    radial-gradient(60% 50% at 82% 30%, rgba(18, 81, 79, .8), transparent 72%),
    radial-gradient(80% 60% at 60% 105%, rgba(3, 12, 15, .95), transparent 70%),
    linear-gradient(160deg, #0f4646 0%, #0a3034 38%, #06161a 100%);
}
.water-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block;
  opacity: 0; transition: opacity 1.1s ease;
}
.water-canvas.is-on { opacity: 1; }

/* fluted glass panel: CSS flutes are the fallback, the shader refracts the water when WebGL is on */
.flute-panel {
  position: relative; z-index: 2; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(238, 243, 240, .2);
  background: var(--flutes), linear-gradient(180deg, rgba(5, 22, 27, .52), rgba(5, 22, 27, .62));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -30px rgba(2, 10, 12, .7);
}
.gl-on .flute-panel {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%), rgba(4, 18, 22, .12);
}
.flute-panel::after { /* thin specular rim on the top edge, like glass catching light */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.10), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.06));
}

/* --------------------------------------------------------- hero */
.hero { min-height: 100svh; }
.hero__stage { min-height: 100svh; display: flex; flex-direction: column; transform-origin: 50% 0; }
.hero__grid { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; z-index: 2;
  padding-top: calc(var(--head-h) + 12svh); padding-bottom: 46px; }
.hero__panel { padding: 24px 20px 22px; }
.hero__copy { position: relative; z-index: 1; }
.hero__title {
  font-family: var(--serif); font-weight: 400; color: #f6f5f0;
  font-size: clamp(2.7rem, 1.45rem + 5.6vw, 5.15rem); line-height: .98; letter-spacing: -.018em;
  margin-bottom: 20px; text-wrap: balance;
}
.hero__title em { color: #cfe7df; }
.hero__lede { color: var(--on-dark-muted); font-size: 16px; line-height: 1.5; max-width: 52ch; margin-bottom: 20px; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hero__actions .btn { flex: 1 1 auto; padding-inline: 16px; font-size: 15.5px; }
.hero .eyebrow { margin-bottom: 12px; }
/* "Prepared for {business}" (?b=). Shown only when the head script set .has-prep, before first paint: no layout shift. */
.prep { display: none; }
.has-prep .prep {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(238, 243, 240, .18);
}
.prep__k { font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.prep__v { font-size: 15px; line-height: 1.35; font-weight: 600; color: #f6f5f0; overflow-wrap: anywhere; min-width: 0; }
.hero__meta { font-family: var(--mono); font-size: 12.5px; color: var(--on-dark-muted); letter-spacing: .01em; line-height: 1.5; text-wrap: balance; }
.hero__meta strong { color: var(--on-dark); font-weight: 600; }
.hero__visual { display: none; }
.hero__hint {
  position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--head-h) + 18px); text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(238,243,240,.82);
  text-shadow: 0 1px 10px rgba(2, 10, 12, .85), 0 0 2px rgba(2, 10, 12, .6); pointer-events: none;
}
.hero__hint span::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; }
.hero__hint span::after { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 10px; }

@media (min-width: 600px) {
  .hero__panel { padding: 34px 32px 30px; }
  .hero__actions .btn { flex: 0 0 auto; padding-inline: 22px; font-size: 16px; }
  .hero__lede { font-size: 1.04rem; line-height: 1.55; }
  .hero .eyebrow { margin-bottom: var(--s4); }
}
@media (min-width: 760px) and (max-width: 1199px) { .hero__panel { max-width: 720px; } }
@media (min-width: 1200px) {
  .hero__grid { flex-direction: row; align-items: center; justify-content: space-between; gap: 4vw;
    padding-top: calc(var(--head-h) + 40px); padding-bottom: 72px; }
  .hero__panel { flex: 0 1 660px; padding: 44px 46px 40px; }
  .hero__visual { display: block; flex: 0 1 600px; position: relative; align-self: center; }
  .hero__visual figcaption { font-family: var(--mono); font-size: 11.5px; color: rgba(238,243,240,.62); margin-top: 22px; letter-spacing: .02em; padding-left: 4px; }
}
@media (min-width: 1200px) { .hero__hint { top: auto; bottom: 58px; } }
@media (min-width: 1200px) and (max-height: 760px) { .hero__title { font-size: clamp(2.6rem, 1rem + 4.2vw, 4.8rem); } }

/* device frames */
.browser { position: relative; border-radius: 12px; overflow: hidden; background: #e9edeb; border: 1px solid rgba(11,29,33,.14);
  box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 30px 50px -28px rgba(6, 22, 26, .55); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #f4f5f2; border-bottom: 1px solid rgba(11,29,33,.1); }
.browser__bar i { width: 9px; height: 9px; border-radius: 3px; background: #cdd5d2; flex: none; }
.browser__bar span { margin-left: 8px; font-family: var(--mono); font-size: 10.5px; color: #5b6b6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { width: 100%; aspect-ratio: 1200 / 750; object-fit: cover; object-position: top; background: #dfe5e3; }
.phone { position: relative; border-radius: 26px; padding: 6px; background: #0d1517; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 50px -24px rgba(2, 10, 12, .75); }
.phone img { border-radius: 20px; width: 100%; aspect-ratio: 480 / 1039; object-fit: cover; object-position: top; background: #dfe5e3; }

.hv { position: relative; padding-bottom: 12%; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); transition: transform .9s var(--ease-out); }
.hv__desk { width: 92%; margin-left: auto; }
.hv__phone { position: absolute; width: 27%; left: 0; bottom: 0; transform: translate3d(calc(var(--tx, 0px) * .8), calc(var(--ty, 0px) * .8), 0); transition: transform .9s var(--ease-out); }

/* hero exit: the stage recedes as the page slides over it */
.hero__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #030b0d; opacity: 0; pointer-events: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__stage { animation: hero-exit linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .hero__stage::after { animation: hero-dim linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .hero__grid, .hero__hint { animation: hero-fade linear both; animation-timeline: view(); animation-range: exit 0% exit 55%; }
  }
}
@keyframes hero-exit { to { transform: translateY(32%) scale(.93); } }
@keyframes hero-dim { to { opacity: .55; } }
@keyframes hero-fade { to { opacity: 0; transform: translateY(-40px); } }
.no-sdt .hero__stage { transform: translateY(calc(var(--hx, 0) * 32%)) scale(calc(1 - var(--hx, 0) * .07)); }
.no-sdt .hero__stage::after { opacity: calc(var(--hx, 0) * .55); }
.no-sdt .hero__grid, .no-sdt .hero__hint { opacity: calc(1 - var(--hx, 0) * 1.8); }
/* phones: keep the hero copy solid until the cream sheet slides over it (no dark, empty fluted band) */
@media (max-width: 640px) {
  .hero__grid { animation: none !important; }
  .no-sdt .hero__grid { opacity: 1; }
}

/* --------------------------------------------------------- sheets (content sections) */
.sheet { position: relative; z-index: 2; padding-block: 88px; background: var(--bone); }
@media (min-width: 1024px) { .sheet { padding-block: 136px; } }
.sheet > .wrap { z-index: 2; }
.hook { border-radius: 28px 28px 0 0; margin-top: -28px; }
@media (min-width: 1024px) { .hook { border-radius: 40px 40px 0 0; margin-top: -40px; } }

/* --------------------------------------------------------- clarity mechanic: fluted glass that clears at the centre */
.clarify { position: relative; isolation: isolate; }
.clarify > figure, .clarify.browser > .onesite__view, .demo__media.clarify > * , .person.clarify .illo { transition: filter .9s var(--ease-out); }
.clarify::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: var(--flutes), linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  background-size: 14px 100%, 100% 100%;
  opacity: 0; transition: opacity .9s var(--ease-out);
}
.clarify--text::after { display: none; }
/* scroll-driven version (Chromium, Safari 26+) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .clarify::after { animation: unflute linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .work-card.clarify figure img, .demo__media.clarify > *, .onesite__frame.clarify .onesite__page, .person.clarify .illo {
      animation: unblur linear both; animation-timeline: view(); animation-range: entry 0% entry 30%;
    }
  }
}
@keyframes unflute { from { opacity: 1; background-size: 14px 100%, 100% 100%; } 60% { opacity: .5; } to { opacity: 0; background-size: 28px 100%, 100% 100%; } }
@keyframes unblur { from { filter: blur(4px) saturate(.8); } to { filter: blur(0) saturate(1); } }
/* IntersectionObserver fallback (Firefox etc.) */
.cl-io .clarify:not(.is-clear)::after { opacity: 1; }
.cl-io .work-card.clarify:not(.is-clear) figure img,
.cl-io .demo__media.clarify:not(.is-clear) > *,
.cl-io .onesite__frame.clarify:not(.is-clear) .onesite__page,
.cl-io .person.clarify:not(.is-clear) .illo { filter: blur(4px) saturate(.8); }
.cl-io .work-card figure img, .cl-io .onesite__page { transition: filter .7s var(--ease-out); }

/* --------------------------------------------------------- glass cards */
.glass-card {
  position: relative; border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(11,29,33,.06), 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 44px -30px rgba(6, 22, 26, .38);
}
@media (hover: hover) and (pointer: fine) {
  .glass-card { -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
  .glass-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(255,255,255,.55), transparent 45%);
    opacity: 0; transition: opacity .4s ease;
  }
  .glass-card:hover::before { opacity: 1; }
}

/* --------------------------------------------------------- page 2: the four people */
.people { display: grid; gap: 16px; }
@media (min-width: 760px) { .people { grid-template-columns: 1fr 1fr; gap: 20px; } }
.person { display: grid; grid-template-rows: auto auto 1fr; gap: 18px; padding: 22px 20px 22px; }
.person > * { position: relative; z-index: 1; }
@media (min-width: 1024px) { .person { padding: 30px 30px 28px; gap: 22px; } }
.person__head h3 { font-size: 1.9rem; margin-bottom: 4px; }
.person__why { color: var(--muted); font-size: .98rem; }

.illo {
  position: relative; border-radius: 12px; padding: 14px 14px 12px;
  background: linear-gradient(180deg, #fbfcfb, #f1f5f3); border: 1px solid rgba(11,29,33,.1);
  font-size: 14px; line-height: 1.4; overflow: hidden;
}
.illo__tag { position: absolute; top: 10px; right: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5a6a6b; border: 1px dashed rgba(11,29,33,.28); padding: 2px 6px; border-radius: 4px; }
.illo__title { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5a6a6b; margin-bottom: 10px; padding-right: 96px; }
.illo__name { font-weight: 700; font-size: 15px; margin-bottom: 8px; letter-spacing: -.01em; }
.illo__name span, .match__name span { font-weight: 400; color: var(--muted); }
.illo__sub { font-size: 12.5px; color: var(--muted); margin: -4px 0 10px; }
.illo__rows { display: grid; gap: 0; }
.illo__rows > div { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(11,29,33,.08); }
.illo__rows dt { font-family: var(--mono); font-size: 11.5px; color: #5a6a6b; padding-top: 1px; }
.illo__rows dd { font-family: var(--mono); font-size: 12.5px; color: var(--text); word-break: break-word; }
.is-hit { position: relative; }
.illo__rows > div.is-hit { background: rgba(42,127,120,.1); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-top-color: rgba(42,127,120,.3); }
.illo__rows > div.is-hit dd { color: var(--teal); font-weight: 700; }
.match { border: 1px solid rgba(11,29,33,.12); border-radius: 10px; padding: 10px 12px; background: #fff; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.match + .match { margin-top: 8px; }
.match__name { font-weight: 700; font-size: 14px; grid-column: 1; }
.match__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.match__tags span { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; background: rgba(42,127,120,.1); color: #164e4b; border: 1px solid rgba(42,127,120,.22); }
.match__link { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--teal); }
.match--ghost { opacity: .55; background: transparent; }
.match--ghost .match__tags span { background: rgba(11,29,33,.05); color: var(--muted); border-color: rgba(11,29,33,.12); }
.match--ghost .match__link { color: var(--muted); font-weight: 400; }
.illo--mail { padding-top: 14px; }
.sig__name { font-family: var(--serif); font-size: 22px; line-height: 1.1; padding-top: 6px; border-top: 1px solid rgba(11,29,33,.1); }
.sig__co { font-size: 13px; color: var(--muted); margin: 2px 0 10px; }
.sig__links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 12.5px; }
.sig__links span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11,29,33,.3); }
.sig__links .is-hit { color: var(--teal); font-weight: 700; text-decoration-color: currentColor; }

.person__foot { display: grid; gap: 12px; align-content: start; }
.found { font-size: .95rem; color: var(--text); padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.found span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 3px; }
.looks { display: grid; gap: 6px; }
.looks li { position: relative; padding-left: 20px; font-size: .97rem; }
.looks li::before { content: ""; position: absolute; left: 0; top: .78em; width: 11px; height: 2px; background: var(--sea); border-radius: 2px; }

.trades-note { margin: var(--s6) 0 0; padding: 18px 20px; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--muted); max-width: 900px; font-size: 1rem; }
.trades-note strong { color: var(--text); }

/* all of it on one website */
.onesite { margin-top: var(--s9); display: grid; gap: 22px; }
.onesite__title { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem); margin-bottom: 12px; }
.onesite__lede { color: var(--muted); max-width: 46ch; }
.onesite__frame { border-radius: 14px; }
.onesite__view { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #e8ecea; }
.onesite__page { position: absolute; left: 0; top: 0; width: 100%; transform: translate3d(0, var(--pan, 0%), 0); transition: transform .9s var(--ease-out); will-change: transform; }
.onesite__page img { width: 100%; height: auto; aspect-ratio: 1100 / 3786; }
.onesite__mark {
  position: absolute; border: 2px solid var(--orange); border-radius: 6px; pointer-events: none;
  left: var(--mx0, 0%); top: var(--my0, 0%); width: var(--mw, 100%); height: var(--mh, 1.3%);
  background: rgba(255, 79, 0, .07);
  transition: left .9s var(--ease-out), top .9s var(--ease-out), width .9s var(--ease-out), height .9s var(--ease-out);
}
.onesite__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.onesite__list::-webkit-scrollbar { display: none; }
.onesite__list li { scroll-snap-align: start; display: flex; }
.gather {
  width: 100%; text-align: left; display: grid; gap: 2px; align-content: start; min-height: 76px;
  padding: 14px 16px; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: rgba(255,255,255,.6); border: 1px solid rgba(11,29,33,.12);
  transition: background-color .25s ease, border-color .25s ease, transform .12s ease;
}
.gather:active { transform: scale(.97); }
.gather b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.1; display: flex; align-items: center; gap: 10px; }
.gather b::before { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; flex: none; transition: background-color .25s ease, border-color .25s ease; }
.gather span { color: var(--muted); font-size: .95rem; padding-left: 22px; }
.gather:hover { border-color: rgba(11,29,33,.32); background: rgba(255,255,255,.85); }
.gather.is-on { background: #fff; border-color: var(--ink); }
.gather.is-on b::before { background: var(--orange); border-color: var(--orange); }
@media (min-width: 900px) {
  .onesite { grid-template-columns: 5fr 7fr; grid-template-areas: "intro frame" "list frame"; column-gap: 56px; row-gap: 26px; align-items: start; }
  .onesite__intro { grid-area: intro; }
  .onesite__frame { grid-area: frame; position: sticky; top: calc(var(--head-h) + 24px); }
  .onesite__list { grid-area: list; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; overflow: visible; margin: 0; padding: 0; gap: 10px; }
  .onesite__view { aspect-ratio: 16 / 11; }
}

/* --------------------------------------------------------- who we build for */
.trades { background: var(--bone); }
.group + .group { margin-top: var(--s8); }
.group__title { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.group__title span { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.work-card { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.work-card figure { overflow: hidden; aspect-ratio: 4 / 3; background: #d9e2df; }
.work-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.work-card__body { padding: 16px 16px 18px; }
.work-card h4 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin-bottom: 6px; }
.work-card p { color: var(--muted); font-size: .97rem; }
@media (hover: hover) { .work-card:hover figure img { transform: scale(1.04); } }
@media (min-width: 640px) { .rail { grid-auto-columns: 46%; } }
@media (min-width: 1024px) {
  .rail { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 20px; }
}

/* --------------------------------------------------------- why + where (dark grainy band) */
.why {
  color: var(--on-dark); overflow: clip;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(42,127,120,.55), transparent 70%),
    radial-gradient(50% 45% at 100% 60%, rgba(18,81,79,.7), transparent 72%),
    radial-gradient(60% 50% at 30% 100%, rgba(10,50,54,.9), transparent 70%),
    var(--ink);
}
.why .grain { opacity: .3; }
.why h2 { color: #f6f5f0; margin-bottom: var(--s7); }
.why__grid { display: grid; gap: var(--s8); }
@media (min-width: 1024px) { .why__grid { grid-template-columns: 1.05fr 1fr; gap: 96px; align-items: start; } }
.reasons { display: grid; gap: 0; counter-reset: r; }
.reasons li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 22px 0; border-top: 1px solid rgba(238,243,240,.16); }
.reasons li:last-child { border-bottom: 1px solid rgba(238,243,240,.16); }
.reasons__n { font-family: var(--dots); font-weight: 800; font-size: 34px; line-height: 1; color: var(--mist); }
.reasons p { font-family: var(--serif); font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); line-height: 1.18; color: #f1f3ee; text-wrap: pretty; }

.where__title { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -.005em; color: var(--on-dark); margin-bottom: 18px; }
.where { display: grid; gap: 10px; position: relative; }
.where__item {
  position: relative; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(238,243,240,.16);
}
.where__place { font-size: .98rem; color: var(--on-dark); margin-bottom: 10px; font-weight: 500; }
.field { display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; border: 1px solid rgba(238,243,240,.22); font-family: var(--mono); font-size: 12.5px; }
.field__k { flex: none; padding: 7px 10px; background: rgba(238,243,240,.1); color: var(--on-dark-muted); border-right: 1px solid rgba(238,243,240,.18); }
.field__v { padding: 7px 10px; color: #bfe5dc; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where__sink { position: relative; margin-top: 18px; padding: 26px 150px 26px 22px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(238,243,240,.22); background: rgba(6, 22, 26, .55); }
.where__sink p { position: relative; z-index: 1; font-family: var(--serif); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1; color: #f6f5f0; max-width: 18ch; }
.where__sink em { color: #cfe7df; }
.iris { /* iridescent thin-film ring: the one accent shape on the page */
  position: absolute; z-index: 0; right: -60px; top: 50%; width: 200px; aspect-ratio: 1; margin-top: -100px; border-radius: 50%;
  background: conic-gradient(from 0deg, #7fd6c7, #b7a6f0, #f3c3a1, #f6eec5, #8fd0e6, #7fd6c7);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%, #000 70%, transparent 72%);
          mask: radial-gradient(circle, transparent 54%, #000 56%, #000 70%, transparent 72%);
  opacity: .78; filter: saturate(.9);
  animation: iris-turn 22s linear infinite;
}
@keyframes iris-turn { to { transform: rotate(360deg); } }
.illo-note { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-muted); }
@media (min-width: 640px) and (max-width: 1023px) { .where { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .where__item { display: grid; grid-template-columns: 1fr minmax(0, 1.15fr); align-items: center; gap: 16px; } .where__place { margin-bottom: 0; } }

/* --------------------------------------------------------- demos */
.demos { background: var(--bone); }
.demo { display: grid; gap: 28px; padding-block: 40px; border-top: 1px solid var(--line); }
.demo:first-of-type { border-top: 0; padding-top: 0; }
.demo__media { position: relative; padding: 0 10% 12% 0; border-radius: 12px; }
.demo__desk { width: 100%; }
.demo__phone { position: absolute; right: 0; bottom: 0; width: 28%; }
.demo__kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.demo__name { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1; margin-bottom: 12px; }
.demo__for { color: var(--muted); margin-bottom: 18px; max-width: 46ch; }
.ids { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ids span { font-family: var(--mono); font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.6); }
.try__title { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.try { border-top: 1px solid var(--line); margin-bottom: 18px; }
.try li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.try li::before { content: "→"; color: var(--sea); font-family: var(--mono); font-size: 14px; }
.demo__pkg { font-size: 1rem; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.demo__pkg span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dot-num { font-family: var(--dots); font-weight: 800; font-size: 1.35em; letter-spacing: .01em; color: var(--ink); line-height: 1; }
.demo__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.demo__actions .btn { flex: 1 1 200px; }
@media (min-width: 1024px) {
  .demo { grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; padding-block: 72px; }
  .demo--flip .demo__media { order: 2; }
  .demo__actions .btn { flex: 0 0 auto; }
}

/* --------------------------------------------------------- pricing (owner-loved DNA on frosted cards) */
.plans { display: grid; gap: 18px; align-items: stretch; margin-bottom: 22px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.plan-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 30px 24px 24px; border-radius: 16px;
  background: rgba(255,255,255,.86); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 40px -32px rgba(6,22,26,.4);
  transition: transform .25s var(--ease-out), border-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .plan-card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .plan-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 50px -30px rgba(6,22,26,.45); }
}
.plan-card--chosen { border: 1.5px solid var(--orange); background: rgba(255, 253, 249, .94); }
.plan-card__tab {
  position: absolute; top: -1.5px; right: -1.5px; border-radius: 0 16px 0 10px;
  background: var(--orange); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 12px 6px 14px;
}
.plan-card__name { font-family: var(--serif); font-size: 2.1rem; line-height: 1; margin-bottom: 14px; }
.plan-card__price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed var(--line-strong); min-height: 76px; }
.plan-card__from { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.price-num { position: relative; display: inline-block; font-family: var(--dots); font-weight: 800; font-size: 46px; line-height: 1; color: var(--ink); letter-spacing: .01em; white-space: nowrap; }
.plan-card--chosen .price-num { color: var(--orange); }
.tw-ghost { visibility: hidden; }
.dc { display: inline-block; margin-inline: -.2em -.12em; }
.tw-live { position: absolute; left: 0; top: 0; white-space: nowrap; }
.tw-live.is-typing::after { content: ""; display: inline-block; width: .42em; height: .78em; margin-left: .08em; background: currentColor; vertical-align: -.02em; }
.plan-card__list { flex: 1; display: grid; gap: 11px; align-content: start; margin-bottom: 22px; }
.plan-card__list li { position: relative; padding-left: 22px; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.plan-card__list li::before { content: "+"; position: absolute; left: 0; top: -1px; font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--orange); }
.plan-card__list b { color: var(--text); font-weight: 650; }
.plan-card__meta { display: grid; gap: 6px; padding-top: 14px; margin-bottom: 20px; border-top: 1px dashed var(--line-strong); font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.plan-card__meta div { display: flex; justify-content: space-between; gap: 12px; }
.plan-card__meta dd { color: var(--text); font-weight: 700; }
.plan-btn {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 16px;
  border-radius: 12px; text-decoration: none; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; -webkit-tap-highlight-color: transparent;
}
.plan-btn:active { transform: scale(.97); }
.plan-btn--outline { border: 1px solid var(--line-strong); color: var(--ink); background: #fff; }
.plan-btn--outline:hover { border-color: var(--ink); background: var(--foam); }
.plan-btn--orange { background: var(--orange); color: var(--ink); border: 1px solid var(--orange); }
.plan-btn--orange:hover { background: #ff6a26; }
.plan-btn--black { background: var(--ink); color: var(--bone); border: 1px solid var(--ink); }
.plan-btn--black:hover { background: var(--teal); border-color: var(--teal); }

.addons { display: grid; gap: 0; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.78); margin-bottom: 16px; }
.addon { padding: 18px 22px; }
.addon + .addon { border-top: 1px dashed var(--line-strong); }
.addon__k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c23d00; font-weight: 700; margin-bottom: 4px; }
.addon__v { font-size: 1rem; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.addon .dot-num { font-size: 1.5em; }
.nw { white-space: nowrap; }
@media (max-width: 559px) { .addon__sep { display: none; } .addon__v .nw { display: block; width: 100%; } }
@media (min-width: 760px) { .addons { grid-template-columns: 1fr 1fr; } .addon + .addon { border-top: 0; border-left: 1px dashed var(--line-strong); } }
.terms { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: center; margin: 0 auto 26px; max-width: 60ch; text-wrap: balance; }

.compare { border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.6); }
.compare summary { list-style: none; cursor: pointer; min-height: 54px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.compare summary::-webkit-details-marker { display: none; }
.compare__icon { width: 14px; height: 14px; position: relative; flex: none; }
.compare__icon::before, .compare__icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform .3s var(--ease-out); }
.compare__icon::after { transform: rotate(90deg); }
.compare[open] .compare__icon::after { transform: rotate(0); }
.compare__scroll { overflow-x: auto; padding: 0 12px 14px; }
.compare table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.compare th, .compare td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.1; border-top: 0; }
.compare thead th span { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.compare tbody th { font-weight: 500; color: var(--text); width: 34%; }
.compare td { color: var(--muted); }
.compare td.y { color: var(--teal); font-weight: 700; }
.compare td.n { color: #8a9899; }

/* --------------------------------------------------------- how it works */
.how { background: var(--bone); padding-bottom: 56px; }
@media (min-width: 1024px) { .how { padding-bottom: 72px; } }
.steps { display: grid; gap: 0; position: relative; }
.step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 20px 0 26px; }
.step::before { content: ""; position: absolute; left: 23px; top: 70px; bottom: -4px; width: 2px; background: linear-gradient(var(--mist), rgba(156, 201, 192, .25)); }
.step:last-child::before { display: none; }
.step__n {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  font-family: var(--dots); font-weight: 800; font-size: 26px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
}
.step p { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; padding-top: 6px; text-wrap: pretty; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .step { grid-template-columns: 1fr; gap: 22px; padding: 0; }
  .step::before { left: 62px; right: -22px; top: 23px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--mist), rgba(156,201,192,.25)); }
}

/* --------------------------------------------------------- who you'll work with */
.who { padding-top: 0; padding-bottom: 120px; }
#who { scroll-margin-top: 28px; } /* the card starts at the section top: leave air under the header */
@media (min-width: 1024px) { .who { padding-top: 0; padding-bottom: 152px; } }
.who__card {
  display: grid; grid-template-columns: 58px 1fr; grid-template-areas: "mono head" "text text" "mail mail";
  gap: 18px 16px; align-items: center;
  padding: 22px 20px; border-radius: var(--radius);
  background: rgba(255,255,255,.86); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 40px -32px rgba(6,22,26,.4);
}
.who__mono { /* monogram tile: the water, behind fluted glass, like the hero */
  grid-area: mono; position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; border-radius: 25%;
  display: grid; place-items: center; align-self: start;
  background: var(--flutes),
    radial-gradient(80% 70% at 20% 10%, rgba(42,127,120,.85), transparent 70%),
    linear-gradient(160deg, #0f4646 0%, #0a3034 45%, #06161a 100%);
  border: 1px solid rgba(11,29,33,.2);
}
.who__mono span { font-family: var(--serif); font-size: 27px; line-height: 1; letter-spacing: -.02em; color: #f6f5f0; transform: translateY(1px); }
.who__head { grid-area: head; min-width: 0; }
.who__head .eyebrow { margin-bottom: 6px; }
.who__name { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1; margin: 0 0 4px; }
.who__role { color: var(--muted); font-size: .94rem; line-height: 1.4; }
.who__text { grid-area: text; display: grid; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.who__text p { font-family: var(--serif); font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); line-height: 1.2; text-wrap: pretty; }
.who__text .who__note { font-family: var(--sans); font-size: .92rem; line-height: 1.45; color: var(--muted); }
.who__mail {
  grid-area: mail; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); text-decoration: none;
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: border-color .2s ease, background-color .2s ease, transform .12s ease; -webkit-tap-highlight-color: transparent;
}
.who__mail:hover { border-color: var(--ink); background: var(--foam); }
.who__mail:active { transform: scale(.97); }
.who__mail span { transition: transform .3s var(--ease-out); }
.who__mail:hover span { transform: translateX(3px); }
@media (min-width: 760px) {
  .who__card { grid-template-columns: 104px 1fr auto; grid-template-areas: "mono head mail" "mono text mail"; gap: 14px 32px; padding: 32px 34px; }
  .who__mono span { font-size: 46px; }
  .who__mail { align-self: center; }
}

/* --------------------------------------------------------- closing CTA */
.cta { margin-top: -32px; border-radius: 32px 32px 0 0; z-index: 3; }
.cta__stage { min-height: 88svh; display: flex; align-items: center; padding-block: 120px 96px; }
.cta__wrap { z-index: 2; }
.cta__panel { padding: 30px 22px 26px; max-width: 760px; margin-inline: auto; text-align: left; }
.cta__panel h2 { color: #f6f5f0; margin-bottom: 16px; font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.cta__panel p { color: var(--on-dark-muted); margin-bottom: 24px; font-size: 1.05rem; max-width: 52ch; }
.cta__panel p a { color: var(--on-dark); text-underline-offset: 3px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__actions .btn { flex: 1 1 200px; }
@media (min-width: 768px) { .cta__panel { padding: 52px 52px 46px; } .cta__actions .btn { flex: 0 0 auto; } }
@media (max-width: 399px) { .cta__panel { padding-inline: 16px; } } /* room for the 300px spam check on 375px phones */

/* contact form inside the fluted panel: dark glass fields so text stays readable over the refracted water */
.cta__panel .cta__lede { margin-bottom: 26px; }
.lead { --err: #ffb39c; margin: 0 0 22px; }
.no-js .lead { display: none; }
.lead__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .lead__grid { grid-template-columns: 1fr 1fr; gap: 18px 16px; } .lf--wide { grid-column: 1 / -1; } }
.lf { display: grid; gap: 7px; align-content: start; min-width: 0; }
.lf label { font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--on-dark); line-height: 1.3; }
.lf__opt { font-weight: 400; color: var(--on-dark-muted); }
.lf input, .lf textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; margin: 0;
  font: 400 16px/1.4 var(--sans); color: var(--on-dark);
  background: rgba(3, 15, 18, .58); border: 1px solid rgba(238, 243, 240, .30); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.lf textarea { min-height: 104px; resize: vertical; display: block; }
.lf input::placeholder, .lf textarea::placeholder { color: rgba(238, 243, 240, .46); opacity: 1; }
.lf input:hover, .lf textarea:hover { border-color: rgba(238, 243, 240, .5); }
.lf input:focus, .lf textarea:focus { outline: none; border-color: var(--mist); background: rgba(3, 15, 18, .72); }
.lf input:focus-visible, .lf textarea:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; border-radius: 12px; }
.lf input[aria-invalid="true"], .lf textarea[aria-invalid="true"] { border-color: var(--err); }
.lf input:-webkit-autofill { -webkit-text-fill-color: var(--on-dark); -webkit-box-shadow: 0 0 0 40px #0b2a2d inset; caret-color: var(--on-dark); }
.lead .lf__err { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--err); }
.lead .lf__err:empty { display: none; }
.lead__trap { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lead__check { margin-top: 20px; min-height: 65px; max-width: 100%; overflow: hidden; }
.lead__actions { display: flex; margin-top: 18px; }
.lead__send { flex: 1 1 auto; }
.lead__send[aria-busy="true"] { opacity: .75; cursor: progress; }
.lead .lead__status { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--on-dark); max-width: none; }
.lead .lead__status:empty { display: none; }
.cta__panel .lead__next { margin: 16px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-muted); max-width: 60ch; }
.cta__panel .lead__next b { color: var(--on-dark); font-weight: 600; }
.lead .lead__status.is-error { color: var(--err); font-weight: 500; }
.lead .lead__status a { color: inherit; }
@media (min-width: 640px) { .lead__send { flex: 0 0 auto; min-width: 220px; } }

.lead__done {
  margin: 0 0 22px; padding: 22px 22px 20px; border-radius: 16px;
  background: rgba(3, 15, 18, .55); border: 1px solid rgba(156, 201, 192, .45);
}
.lead__done:focus { outline: none; }
.lead__done:focus-visible { outline: 2px solid var(--mist); outline-offset: 3px; }
.cta__panel .lead__done-k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin: 0 0 10px; }
.cta__panel .lead__done-t { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); color: #f6f5f0; margin-bottom: 10px; text-wrap: balance; }
.cta__panel .lead__done p { margin-bottom: 0; max-width: 56ch; }
.cta__panel .lead__done .lead__done-k { margin-bottom: 10px; }

.cta__panel .lead__privacy { font-size: 14px; line-height: 1.45; margin: -4px 0 26px; max-width: none; color: var(--on-dark-muted); }
.cta__panel .lead__privacy a { color: var(--on-dark); text-underline-offset: 3px; white-space: nowrap; }
.no-js .lead__privacy { display: none; }
.cta__alt { border-top: 1px solid rgba(238, 243, 240, .16); padding-top: 20px; }
.cta__panel .cta__alt-k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin: 0 0 12px; }

.foot { position: relative; z-index: 3; background: var(--ink); color: var(--on-dark-muted); padding: 30px 0 calc(30px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(238,243,240,.1); font-size: 14px; }
.foot__row { display: grid; gap: 8px; }
.foot a { color: var(--on-dark); text-underline-offset: 3px; }
.foot__fine { font-size: 13px; max-width: 70ch; }
/* postal address: three tidy lines on phones, wraps only between chunks on wider screens */
.addr__l { white-space: nowrap; }
@media (max-width: 640px) { .addr__l { display: block; white-space: normal; } }
.foot__addr { font-style: normal; font-size: 13px; line-height: 1.5; color: var(--on-dark-muted); max-width: 44ch; overflow-wrap: anywhere; }
.foot__nav { white-space: nowrap; }
@media (max-width: 640px) { .foot__copy, .foot__nav { display: block; } .foot__sep { display: none; } .foot__copy { margin-bottom: 2px; } }
@media (min-width: 900px) {
  .foot__row { grid-template-columns: auto 1fr; gap: 6px 40px; }
  .foot__line { grid-column: 1; grid-row: 1; }
  .foot__addr { grid-column: 1; grid-row: 2; }
  .foot__fine { grid-column: 2; grid-row: 1 / span 2; align-self: start; text-align: right; justify-self: end; }
}

/* toast */
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: var(--bone); color: var(--ink); padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 15px;
  box-shadow: 0 16px 30px -16px rgba(2,10,12,.6); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .35s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------- reduced motion: a complete static version */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .clarify::after { opacity: 0 !important; }
  .clarify *, .clarify { filter: none !important; }
  .clarify--text { opacity: 1 !important; }
  .hero__stage, .hero__grid { transform: none !important; opacity: 1 !important; }
}

/* phones: dock the header bar to the top edge so nothing scrolls visibly above or around it */
@media (max-width: 640px) {
  .site-head { padding: 0; }
  .site-head__bar { height: var(--head-h); border-radius: 0; border-width: 0 0 1px; padding-inline: 12px 6px; background: rgb(243, 241, 235); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-head.is-dark .site-head__bar { background: rgb(8, 24, 28); }
}

/* --------------------------------------------------------- legal pages (/privacy/, /terms/) */
.legal-top__stage { padding: calc(var(--head-h) + 48px) 0 72px; }
.legal-top .wrap { z-index: 2; }
.legal-top h1 { font-family: var(--serif); font-weight: 400; color: #f6f5f0; font-size: clamp(2.6rem, 1.7rem + 3.8vw, 4.6rem); line-height: 1; letter-spacing: -.015em; margin-bottom: 14px; }
.legal-top .eyebrow { margin-bottom: 14px; }
.legal-top__date { font-family: var(--mono); font-size: 13px; color: var(--on-dark-muted); }
.legal { border-radius: 28px 28px 0 0; margin-top: -28px; padding-block: 52px 80px; }
.legal__body { max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--text); }
.legal__body h2 { font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem); line-height: 1.15; margin: 44px 0 12px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p, .legal__body ul { margin-bottom: 14px; }
.legal__body ul { list-style: disc; padding-left: 1.25em; }
.legal__body li { margin-bottom: 6px; padding-left: 2px; }
.legal__body li::marker { color: var(--sea); }
.legal__body a { color: var(--teal); text-underline-offset: 3px; font-weight: 500; }
.legal__body strong { font-weight: 600; }
.legal__addr { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-strong); background: rgba(255,255,255,.5); max-width: 44ch; }
.legal__body .legal__addr-k { margin: 0 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 500; }
.legal__addr address { font-style: normal; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 640px) { .legal__addr { padding: 12px 14px; } .legal__addr address { font-size: 14.5px; } }
.legal__lede { font-size: 1.08rem; color: var(--muted); padding-bottom: 28px; margin-bottom: 36px !important; border-bottom: 1px dashed var(--line-strong); }
@media (min-width: 1024px) { .legal { border-radius: 40px 40px 0 0; margin-top: -40px; padding-block: 80px 120px; } .legal__body { font-size: 18px; } }

/* deep-link targets used in sales emails */
#all-of-it,#govcon-addon{scroll-margin-top:96px}