/* ==========================================================================
   Heron ledger system (branch new-logo-new-design-website)

   Design read: a services site for practice owners and billing managers,
   told as one large editorial page. A single dawn image, a giant wordmark,
   3 big numbers and a ruled ledger carry the page. Colors come from the
   Heron logo: cobalt, cyan, navy and mist, with tints of cobalt and cyan for
   the color blocks and sun as the one warm note.

   Dials: DESIGN_VARIANCE 7, MOTION_INTENSITY 6, VISUAL_DENSITY 4.

   Shape rule: buttons and tags are full pills. Sheets have a 40px top edge.
   Ledger cells are square. Nothing else.

   Color story: this page is a deliberate sequence of color blocks (navy,
   mist, cobalt, aqua), so it is one fixed theme with no dark-mode switch.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Logo palette */
  --cobalt: #0367FA;
  --cyan: #1DD3D7;
  --navy: #062750;
  --paper: #F2F8FF;       /* the logo's mist: the page canvas, and text on dark */
  --night: #041B3A;       /* navy, one step deeper */
  --tile: #DCEEFB;        /* the logo tile: same blue as the LinkedIn logo */
  --tile-deep: #C9E4F8;   /* tile on hover */

  /* Tints of cobalt and cyan, and sun as the one warm note */
  --foam: #E4F8FA;
  --aqua: #C8F4F5;
  --sky: #99EBED;
  --blue-soft: #D7E7FE;
  --haze: #AECEFD;
  --sun: #FFD79A;

  /* Text */
  --ink: #062750;
  --ink-2: #3B5272;
  --ink-3: #53667E;

  /* Rules take their color from the block they sit in */
  --rule-c: color-mix(in oklab, currentColor 24%, transparent);
  --rule: 1px solid var(--rule-c);

  /* Type */
  /* Slabo has one weight, and only old-style numbers: 1 sits low and 3 hangs below
     the line. So the digits alone come from Bitter, loaded as a digits-only subset. */
  --display: "Bitter", "Slabo 13px", Georgia, "Times New Roman", serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale. Every text size on the site is a step on one ratio: each step is
     1.2 times the last on a phone, rising to 1.333 times at 1440px and wider. The
     Type roles section at the end of this file says which text uses which step. */
  --t-cap: 13.5px;
  --t-ui: clamp(15px, 14.67px + .09vw, 16px);
  --t-body: clamp(16px, 15.33px + .185vw, 18px);
  --t-1: clamp(19.2px, 17.6px + .444vw, 24px);
  --t-2: clamp(23px, 20.05px + .83vw, 32px);
  --t-3: clamp(27.6px, 22.65px + 1.39vw, 42.6px);
  --t-4: clamp(33.2px, 25.29px + 2.19vw, 56.8px);
  --t-5: clamp(39.8px, 27.82px + 3.33vw, 75.7px);
  --t-6: clamp(47.8px, 30.03px + 4.93vw, 101px);
  --t-7: clamp(57.3px, 31.55px + 7.16vw, 134.7px);
  --t-8: clamp(68.8px, 31.86px + 10.26vw, 179.6px);
  --t-9: clamp(82.6px, 30.29px + 14.52vw, 239.4px);

  /* Layout */
  --gutter: clamp(20px, 2.6vw, 40px);
  --nav-h: 72px;
  --sheet-r: 40px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: style;
  overflow-x: clip;
}

img, svg, picture, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.013em;
  line-height: 1.12;
  text-wrap: balance;
}
p { text-wrap: pretty; }
strong, b { font-weight: 650; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.icon { width: 1.2em; height: 1.2em; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  padding: 12px 20px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 600;
  transition: top .2s;
}
.skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform .5s var(--ease), background-color .25s, color .25s, box-shadow .25s;
}
.btn .icon { width: 1.1em; height: 1.1em; transition: transform .5s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:hover .icon.ne { transform: translate(2px, -2px); }
.btn:active { transform: scale(.98); }

.btn-ink { background: var(--navy); color: var(--paper); }
.btn-ink:hover { background: var(--cobalt); }
.btn-signal { background: var(--cyan); color: var(--navy); }
.btn-signal:hover { background: var(--paper); }
.btn-line { box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 45%, transparent); }
.btn-line:hover { box-shadow: inset 0 0 0 1px currentColor; }

/* Controls that float over both deep and light blocks get a two-tone ring */
.btn-signal:focus-visible, .nav-brand:focus-visible, .nav-pill:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--navy);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Glass nav. Frosted pills in the logo tile blue, so the whole header row
   matches the logo pill on both the deep hero and the light sections.
   (Web frosted glass, solid fallback when transparency is reduced.)
   -------------------------------------------------------------------------- */

.glass {
  background: rgb(220 238 251 / .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .55),
    0 8px 28px -12px rgb(4 27 58 / .38);
  color: var(--ink);
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--tile); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.nav {
  position: fixed; inset: 12px var(--gutter) auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* The one solid pill: the logo tile blue, so the logo keeps its own colors on every section */
.nav-brand {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 14px;
  border-radius: 999px;
  background: var(--tile);
  box-shadow:
    inset 0 0 0 1px rgb(6 39 80 / .14),
    0 8px 28px -12px rgb(4 27 58 / .38);
  transition: background-color .25s, transform .4s var(--ease);
}
.nav-brand:hover { background: var(--tile-deep); }
.nav-brand img { height: 36px; width: auto; }

.nav-links {
  display: none;
  position: absolute; left: 50%; transform: translateX(-50%);
  align-items: center; gap: 2px;
  height: 48px; padding: 0 8px;
  border-radius: 999px;
font-weight: 500;
}
.nav-links a {
  padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;
  transition: background-color .25s;
}
.nav-links a:hover { background: rgb(6 39 80 / .08); }
.nav-pill, .nav-toggle { transition: background-color .25s; }
.nav-pill:hover, .nav-toggle:hover { background: var(--tile-deep); }

.nav-actions { display: flex; align-items: center; gap: 8px; transition: transform .4s var(--ease); }
.nav-pill {
  display: none; align-items: center;
  height: 48px; padding: 0 20px;
  border-radius: 999px;
font-weight: 500;
  white-space: nowrap;
}
.nav-cta { min-height: 48px;padding: 0 20px; box-shadow: inset 0 0 0 1px rgb(6 39 80 / .14), 0 8px 28px -12px rgb(4 27 58 / .38); }

.nav-toggle {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  flex: none;
}
.nav-toggle span {
  position: absolute; left: 15px; right: 15px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 19px; }
.nav-toggle span:nth-child(2) { top: 27px; }
.nav.open .nav-toggle span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

/* Full-page menu */
.nav-sheet {
  position: fixed; inset: 0; z-index: -1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 96px var(--gutter) var(--gutter);
  background: var(--navy); color: var(--paper);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s, visibility .3s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav.open .nav-sheet { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-sheet ul { border-top: var(--rule); }
.nav-sheet li { border-bottom: var(--rule); }
.nav-sheet li a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(12px, 2.2vh, 20px) 4px;
  font-family: var(--display);
}
.nav-sheet li a .icon { width: .7em; height: .7em; color: var(--cyan); transition: transform .5s var(--ease); }
.nav-sheet li a.sheet-cta { color: var(--cyan); }
.nav-sheet li a:hover .icon { transform: translateX(6px); }
html.menu-open { overflow: hidden; }
html:not(.js) .nav-toggle { display: none; }   /* without JS the footer carries the links */

@media (min-width: 620px) {
  .nav-pill { display: inline-flex; }
}
/* Below the full bar, the pills slide away while reading down and return on the way
   up, so they never sit on top of text. The sheet stays put: it is fixed to the screen. */
@media (max-width: 1119px) {
  .nav-away:not(:focus-within) .nav-brand,
  .nav-away:not(:focus-within) .nav-actions { transform: translateY(-76px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-brand, .nav-actions { transition: none; }
}
@media (min-width: 1120px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   Hero: the dawn image and, over the sky, the promise. The logo in the top bar
   is the only place the name appears, so the opener leads with what Heron does.
   -------------------------------------------------------------------------- */

.hero-stack { position: relative; }

.hero {
  --vh: max(100svh, 560px);
  --h1: min(var(--t-5), 8.9cqw, var(--vh) * .084);   /* step 5, held to small phones and short windows */
  /* The horizon is painted 58.5% down the wide art. The art is sized and moved so
     the horizon always lands below the words, wherever the window's shape puts them. */
  --yh: .585;
  --art-ar: .625;                                       /* the art's height over its width */
  --hz: calc(var(--vh) - clamp(90px, 16svh, 200px));    /* where the horizon sits on screen */
  --art-h: max(var(--vh), 100cqw * var(--art-ar), var(--hz) / var(--yh), (var(--vh) - var(--hz)) / (1 - var(--yh)));
  position: sticky; top: 0;
  height: var(--vh);
  overflow: clip;
  container-type: inline-size;
  isolation: isolate;
  display: flex; justify-content: center;
  background: var(--night);
  color: var(--paper);
}

.hero-art {
  position: absolute; z-index: 0;
  left: 0; top: calc(var(--hz) - var(--yh) * var(--art-h));
  width: 100%; height: var(--art-h); max-width: none;
  object-fit: cover;
  object-position: 58% 50%;
}

.hero::before {                     /* a soft shade on the sky behind the words, clear at the horizon */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 78% 62% at 50% 44%, rgb(3 20 44 / .58), rgb(3 20 44 / .2) 62%, rgb(3 20 44 / 0) 88%);
}

.hero-copy {                        /* centered in the sky, between the top bar and the horizon */
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  align-self: flex-start;
  width: 100%; max-width: 1180px;
  min-height: calc(var(--hz) - 100px);
  padding: calc(var(--nav-h) + clamp(16px, 4svh, 48px)) var(--gutter) 0;
  text-align: center;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: clamp(18px, 3.4svh, 32px);
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  color: var(--paper);
  background: rgb(4 27 58 / .42);
  box-shadow: inset 0 0 0 1px rgb(242 248 255 / .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s;
}
.hero-pill:hover { background: rgb(4 27 58 / .7); }
.hero-pill-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cyan); color: var(--navy);
  font-weight: 600;
}
.hero-pill .icon { width: 1em; height: 1em; transition: transform .5s var(--ease); }
.hero-pill:hover .icon { transform: translateX(3px); }
.hero h1 {
  max-width: 12.5em;
  font-size: var(--h1);
  line-height: 1.06;
  text-wrap: balance;
  text-shadow: 0 0 .32em rgb(3 20 44 / .62), 0 1px 2px rgb(3 20 44 / .4);
}
.rotor {                            /* one line shows at a time */
  font: 400 var(--h1)/1.12 var(--display);
  letter-spacing: -.013em;
  color: var(--cyan);
  height: 1.12em; overflow: clip;
}
.rotor-track { display: block; }
.rotor-track > span { display: block; height: 1.12em; white-space: nowrap; }
.hero-sub {
  max-width: 34ch;
  text-wrap: balance;
  margin-top: clamp(14px, 2.4svh, 24px);
  color: rgb(242 248 255 / .9);
  text-shadow: 0 0 18px rgb(3 20 44 / .7), 0 1px 2px rgb(3 20 44 / .4);
}
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(20px, 3.6svh, 32px); }
.hero-ctas .btn { min-height: 46px; padding: 0 20px; }

/* Phones: the top bar drops to the logo and the menu, and the sentence under the
   headline waits for the next screens, so the opener stays clear */
@media (max-width: 619px) {
  .nav-cta { display: none; }
  .hero-sub { display: none; }
}
@media (max-width: 359px) {
  .hero-ctas .btn { padding: 0 16px; }
  .hero-ctas .icon, .hero-pill .icon { display: none; }
}
/* Short windows, such as a phone held sideways, drop it too, so the buttons stay clear of the horizon */
@media (max-height: 599px) {
  .hero-sub { display: none; }
}

/* Portrait screens use the portrait render, whose horizon sits 47% down */
@media (max-aspect-ratio: 1/1) {
  .hero { --yh: .47; --art-ar: 1.6667; }
  .hero-art { object-position: 62% 50%; }
}

/* Motion. The hero entrance is CSS only so it never waits on a script. */
@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: settle 2.6s var(--ease) both; }
  html.js .rotor-track { animation: rotor 10s var(--ease-io) 1s infinite both; }
  html.motion-paused .rotor-track { animation-play-state: paused; }
}
@keyframes settle { from { transform: scale(1.045); } }
@keyframes band-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes rotor {   /* the last stop is a repeat of the first line, so the loop has no seam */
  0%, 20.5% { transform: none; }
  25%, 45.5% { transform: translateY(-20%); }
  50%, 70.5% { transform: translateY(-40%); }
  75%, 95.5% { transform: translateY(-60%); }
  100% { transform: translateY(-80%); }
}
@media (prefers-reduced-motion: reduce) {
  .rotor-track { transform: translateY(-60%); }   /* rests on the last real line */
}

/* --------------------------------------------------------------------------
   Reveals. Nothing is hidden by default: .pre goes on only once someone
   scrolls, and only on what is still below the screen. So crawlers and
   full-page screenshots, which never scroll, always get the whole page.
   -------------------------------------------------------------------------- */

.rv.pre { opacity: 0; transform: translateY(22px); }
.rv.in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}

/* Shared pieces */
.tag {
  display: inline-block;
  padding: .16em .72em .2em;
  border-radius: 999px;
  background: var(--navy);
  color: var(--paper);
}
.mega {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sheet: the ivory page that rises over the pinned hero
   -------------------------------------------------------------------------- */

.sheet {
  position: relative; z-index: 5;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background: var(--paper);
}
.areas {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 5.4vh, 60px);
  padding: clamp(80px, 13vh, 132px) var(--gutter) clamp(32px, 5vh, 56px);
  text-align: center;
}
.inline-label {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45em;
font-weight: 500;
}
.areas .mega span:not(.plus):not(.fade) { color: var(--ink); }
.areas .mega .plus { color: var(--ink-3); font-weight: 400; margin-inline: .02em; }
.areas .mega .fade { color: color-mix(in oklab, var(--ink) 62%, var(--paper)); }
.areas-lead { max-width: 36em; text-wrap: pretty; color: var(--ink-2); }

.area-pills {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  max-width: 980px;
}
.area-pills a {
  display: inline-flex; align-items: center;
  min-height: 52px; padding: 0 clamp(18px, 2vw, 28px);
  border-radius: 999px;
  background: var(--c);
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
  transition: transform .5s var(--ease), box-shadow .3s;
}
.area-pills a:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px rgb(6 39 80 / .5); }
.area-pills a:active { transform: scale(.98); }

.backers {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px clamp(24px, 3.4vw, 52px);
  margin-top: clamp(8px, 3vh, 28px);
font-weight: 600;
  color: var(--ink-2);
}
.backers img {
  height: 46px; width: auto;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  opacity: .82;
  transition: filter .25s, opacity .25s;
}
.backers img.lvlup { height: 50px; border-radius: 10px; }
.backers img.posthog { height: 66px; }
.backers img:hover { filter: none; opacity: 1; }
@media (max-width: 619px) {
  .backers { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 14px 28px; }
  .backers > span { grid-column: 1 / -1; text-align: center; }
  .backers img { height: 40px; }
  .backers img.lvlup { height: 42px; }
  .backers img.posthog { height: 52px; }
}

/* --------------------------------------------------------------------------
   Stakes. The 3 numbers sit side by side in one view, with no pinned scrolling.
   -------------------------------------------------------------------------- */

mark {
  display: inline-block;
  padding: .06em .58em .1em;
  border-radius: 999px;
  background: var(--navy);
  color: var(--paper);
}

.stakes {
  --num: min(var(--t-8), 19vw);        /* step 8, held to fit its column */
  position: relative;
  padding: clamp(56px, 11vh, 96px) var(--gutter) clamp(20px, 3.5vh, 32px);
  background: linear-gradient(to bottom, var(--paper) 0%, var(--foam) 42%, var(--aqua) 100%);
  overflow: clip;
}
.stakes h2 {
  max-width: 14em;
}
.stakes h2 span { color: color-mix(in oklab, var(--ink) 58%, var(--foam)); }

/* The 3 numbers share one view: a ruled row on wide screens, compact rows on phones */
.stats { margin-top: clamp(24px, 5vh, 56px); border-top: var(--rule); }
.stat-col {
  display: grid; grid-template-columns: 47% minmax(0, 1fr); align-items: center; column-gap: 12px;
  padding: clamp(14px, 2.2vh, 24px) 0;
  border-bottom: var(--rule);
}
.stat {
  display: flex; align-items: flex-start;
  font-family: var(--display);
  color: var(--ink);
}
.stat-unit {
  margin-top: .1em;
}
.stat-label {
  font-family: var(--display);
  color: var(--ink-2);
}
.stat-line {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-weight: 500;
}
.stakes-source {
  margin-top: clamp(14px, 2.4vh, 24px);
  max-width: 92ch;
line-height: 1.45;
  color: var(--ink-2);
}

@media (min-width: 720px) {
  .stakes { --num: min(var(--t-8), 12.6vw); }
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--rule); }
  .stat-col { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(18px, 3.2vh, 36px) clamp(14px, 2vw, 32px); border-bottom: 0; }
  .stat-col:first-child { padding-left: 0; }
  .stat-col + .stat-col { border-left: var(--rule); }
  .stat-label { margin-top: clamp(10px, 1.6vh, 16px); max-width: 12em; text-wrap: balance; }
  .stat-line { margin-top: auto; padding-top: clamp(12px, 2.2vh, 24px); }
}
@media (min-width: 820px) {
  .stakes {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 12px);
  }
}

/* --------------------------------------------------------------------------
   Journey: the morning frame continues the aqua above it. On wide screens the
   7 stops sit on the water along one route, and the logo bird hops from
   stop to stop while each one lights up. Below that, a plain connected list.
   -------------------------------------------------------------------------- */

.journey {
  position: relative;
  background: #8ED3DE;
  color: var(--ink);
  overflow: clip;
}
.journey h2 {
  padding: clamp(40px, 8vw, 72px) var(--gutter) clamp(16px, 3vw, 28px);
  background: var(--aqua);
}
.journey-art { width: 100%; height: clamp(240px, 62vw, 520px); object-fit: cover; object-position: 100% 50%; }
.journey-path, .journey-bird { display: none; }

.stops { padding: 8px var(--gutter) calc(var(--sheet-r) + 56px); }
.stop {
  --node: 52px;
  position: relative;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 12px 0;
}
.stop:not(:last-child)::after {
  content: ""; position: absolute; left: 25.5px; top: calc(50% + 26px); height: calc(100% - 28px);
  width: 1px; background: rgb(6 39 80 / .4);
  transition: background-color .3s;
}
.stop.is-on:not(:last-child)::after { background: var(--cobalt); }
.stop-node {
  display: grid; place-items: center;
  width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(6 39 80 / .26), 0 10px 22px -14px rgb(6 39 80 / .6);
  font-size: 20px;
  transition: background-color .3s, color .3s, box-shadow .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.stop-text { display: block; }
.stop-when { display: block;font-weight: 500; color: #2A4768; }
.stop-what { display: block; font-family: var(--display); text-wrap: balance; }

/* The last stop is where every claim is headed */
.stop-end .stop-node { background: var(--cobalt); color: #fff; box-shadow: 0 12px 26px -12px rgb(3 103 250 / .8); }

.stop.is-on .stop-node { background: var(--cobalt); color: #fff; box-shadow: 0 12px 26px -12px rgb(3 103 250 / .8); }
.stop.is-here .stop-node { transform: scale(1.1); }
.stop-end.is-here .stop-node { animation: paid 1.3s var(--ease) .1s; }
@keyframes paid {
  from { box-shadow: 0 0 0 0 rgb(3 103 250 / .55); }
  to { box-shadow: 0 0 0 26px rgb(3 103 250 / 0); }
}

@media (min-width: 900px) {
  .journey {
    aspect-ratio: 2400 / 1240;
    min-height: 720px; max-height: 118svh; width: 100%;
    background: var(--aqua);
  }
  .journey h2 {
    position: absolute; z-index: 2; left: 0; top: 0;
    padding: clamp(48px, 7vw, 96px) var(--gutter) 0;
    background: none;
    max-width: 8.4em;
  }
  .journey-art {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: 100% 50%;
  }
  .journey-path {
    display: block;
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible;
  }
  .journey-path path { fill: none; vector-effect: non-scaling-stroke; }
  .journey-line path { stroke: var(--ink); stroke-opacity: .42; stroke-width: 1.5px; }
  .journey-done { clip-path: inset(0 100% 0 0); transition: opacity .35s; }
  .journey-done path { stroke: var(--cobalt); stroke-width: 3px; }
  .stops { padding: 0; }
  .stop {
    --w: clamp(128px, 13.4vw, 216px);
    position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: var(--w);
    padding: 0;
    margin-left: calc(var(--w) / -2);
    margin-top: calc(var(--node) / -2);
    text-align: center;
  }
  .stop-end { --node: 64px; }
  .stop-end .stop-node { font-size: 26px; }
  .stop:not(:last-child)::after { display: none; }
}

/* Arrival: the route wipes in, then the stops pop on along it */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .journey.pre .journey-line { clip-path: inset(0 100% 0 0); }
  .journey.in .journey-line { clip-path: inset(-2% -2% -2% 0); transition: clip-path 1.3s var(--ease-io) .05s; }
  .journey.pre .stop-node { transform: scale(.4); opacity: 0; }
  .journey.in:not(.settled) .stop-node { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; transition-delay: calc(var(--i) * .14s + .15s); }
  .journey.pre .stop-text { opacity: 0; transform: translateY(8px); }
  .journey.in:not(.settled) .stop-text { opacity: 1; transform: none; transition: opacity .45s, transform .6s var(--ease); transition-delay: calc(var(--i) * .14s + .25s); }

  html.js .journey-bird {
    display: block;
    position: absolute; left: 0; top: 0; z-index: 3;
    width: clamp(52px, 4.6vw, 76px); height: auto; max-width: none;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 6px 8px rgb(6 39 80 / .28));
  }
  html.js .journey-bird.is-on { opacity: 1; }
}

/* Pause control for the loops. Small on purpose, and gone when motion is off. */
.motion-toggle {
  position: absolute; z-index: 4;
  right: var(--gutter); bottom: 14px;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--ink);
  background: rgb(242 248 255 / .7);
  box-shadow: inset 0 0 0 1px rgb(6 39 80 / .2);
  transition: background-color .25s;
}
.motion-toggle:hover { background: var(--paper); }
.motion-toggle::before {            /* pause: two bars */
  content: ""; width: 10px; height: 12px;
  border-inline: 3px solid currentColor;
}
.motion-toggle[aria-pressed="true"]::before {   /* play: a triangle */
  width: 0; height: 0;
  border: 0; border-block: 6px solid transparent; border-left: 10px solid currentColor;
  margin-left: 3px;
}
.journey .motion-toggle { bottom: calc(var(--sheet-r) + 14px); }
.hero > .motion-toggle {            /* on the water, bottom right */
  bottom: 18px;
  color: var(--paper);
  background: rgb(4 27 58 / .42);
  box-shadow: inset 0 0 0 1px rgb(242 248 255 / .4);
}
.hero > .motion-toggle:hover { background: rgb(4 27 58 / .7); }
html:not(.js) .motion-toggle { display: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   Services ledger: ruled rows, one color cell per service
   -------------------------------------------------------------------------- */

.services {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--sheet-r));
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background: var(--navy);
  color: var(--paper);
  overflow: clip;
}
.services-head {
  padding: clamp(72px, 11vw, 148px) var(--gutter) clamp(48px, 7vw, 96px);
  text-align: center;
}
.services-head p {
  margin-top: clamp(14px, 1.6vw, 24px);
  color: rgb(242 248 255 / .82);
}

.row { border-top: var(--rule); }
.services { padding-bottom: var(--sheet-r); }   /* room for the audit sheet that overlaps this block */
.services, .audit, .how, .faq, .section-faq { scroll-margin-top: calc(-1 * (var(--nav-h) + 16px)); }
.row-dark { background: var(--navy); color: var(--paper); }
.row-light { background: var(--paper); color: var(--ink); }

.row-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: var(--rule);
font-weight: 600;
}
.row-head > span { display: flex; align-items: center; gap: 8px; padding: 14px var(--gutter); }
.row-head > span + span { border-left: var(--rule); font-weight: 500; }
.row-head .icon { width: 18px; height: 18px; }

.row-title {
  padding: clamp(32px, 6vw, 72px) var(--gutter);
}
.row-body {
  padding: clamp(18px, 2.2vw, 30px) var(--gutter);
  line-height: 1.5;
  border-top: var(--rule);
}
.row-dark .row-body { color: rgb(242 248 255 / .86); }
.row-light .row-body { color: var(--ink-2); }

.row-ticks {
  padding: clamp(18px, 2.2vw, 30px) var(--gutter);
  border-top: var(--rule);
  display: grid; gap: 10px;
  font-family: var(--display);
}
.row-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.row-ticks .icon { width: 1.05em; height: 1.05em; margin-top: .1em; }
.row-dark .row-ticks .icon { color: var(--cyan); }
.row-light .row-ticks .icon { color: var(--cobalt); }

.row-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 4vw, 64px) var(--gutter);
  background: var(--c);
  color: var(--ink);
}
.p-title {
  font-family: var(--display);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
}
.p-rows { margin-top: clamp(12px, 1.4vw, 20px); }
.p-rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(10px, 1.1vw, 15px) 0;
  border-top: 1px solid rgb(6 39 80 / .24);
}
.p-rows b { font-family: var(--display); font-weight: 400; line-height: 1; white-space: nowrap; }
.p-codes li > span:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.p-codes small { color: #2A4768; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 26px; padding: 0 10px;
  border-radius: 999px;
  background: rgb(242 248 255 / .72);
  box-shadow: inset 0 0 0 1px rgb(6 39 80 / .14);
font-weight: 600;
  white-space: nowrap;
}
.chip .icon { width: 13px; height: 13px; }
.p-big {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-top: clamp(12px, 1.4vw, 20px);
  border-top: 1px solid var(--ink);
  font-weight: 600;
}
.p-big b {
  font-family: var(--display);
  font-weight: 400;
}
.p-note { margin-top: clamp(12px, 1.4vw, 20px);color: #2A4768; }

@media (min-width: 960px) {
  .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }
  .row-head  { grid-column: 1; grid-row: 1; }
  .row-title { grid-column: 1; grid-row: 2; align-self: center; }
  .row-body  { grid-column: 1; grid-row: 3; }
  .row-panel { grid-column: 2; grid-row: 1 / span 2; }
  .row-ticks { grid-column: 2; grid-row: 3; border-left: var(--rule); align-content: center; }
}

/* Aged A/R chart inside the backlog cell */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px;font-weight: 500; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; background: rgb(6 39 80 / .32); }
.legend i.after { background: var(--ink); }
.aging-chart {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px);
  align-items: end;
  height: clamp(150px, 15vw, 230px);
  margin-top: clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--ink);
}
.aging-col { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.bar {
  flex: 1; height: var(--h);
  background: rgb(6 39 80 / .32);
  transform-origin: bottom;
}
.bar.after { background: var(--ink); }
.aging-labels {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px);
  margin-top: 8px;
font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  .aging.pre .bar { transform: scaleY(.04); }
  .aging.in .bar { transform: none; transition: transform 1.3s var(--ease) .3s; }
  .aging.in .bar.after { transition-delay: .55s; }
}

/* Phones: the 5 leaks are cards side by side, one to a screen. Swiping is the browser's
   own scroll, so it works with no script and every card stays in the page for search.
   Wider screens keep the ruled rows above and never see any of this. */
.row-controls { display: none; }
@media (max-width: 619px) {
  .services-head { padding-bottom: 32px; }
  .row-track {
    --card: min(100vw - 56px, 440px);
    position: relative;
    display: flex; gap: 12px;
    padding-inline: calc((100% - var(--card)) / 2);          /* so every card can sit dead center */
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    counter-reset: leak;
  }
  .row-track::-webkit-scrollbar { display: none; }
  .row {
    display: flex; flex-direction: column;
    flex: 0 0 var(--card);
    border-top: 0;
    border-radius: 24px;
    overflow: clip;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    counter-increment: leak;
  }
  .row-dark { box-shadow: inset 0 0 0 1px var(--rule-c); }
  .row-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px var(--gutter);
  }
  .row-head > span { padding: 0; }
  .row-head > span + span, .row-ticks { display: none; }   /* the paragraph already says what the ticks say */
  .row-head::after { content: counter(leak) " of 5"; font-weight: 500; white-space: nowrap; }
  .row-title { padding: 20px var(--gutter) 10px; }
  .row-body { padding: 0 var(--gutter) 20px; border-top: 0; }
  .row-panel { flex: 1; padding: 20px var(--gutter); }
  .aging-unit { display: none; }                           /* too wide for a card's chart, so the note says it */
  .aging .p-note::before { content: "Days old. "; }

  html.js .row-controls {
    --leak-hold: 3s;                                         /* how long each card stays, its move included */
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px var(--gutter) 24px;
  }
  .row-dots { display: flex; margin-left: -3px; }
  .row-dots button { display: grid; place-items: center; width: 30px; height: 44px; }
  .row-dots button::before {
    content: ""; width: 9px; height: 9px; border-radius: 999px;
    background: rgb(242 248 255 / .44);
    transition: width .35s var(--ease), background-color .25s;
  }
  .row-dots button[aria-current="true"]::before {
    width: 24px;
    background: rgb(242 248 255 / .24) linear-gradient(var(--c), var(--c)) no-repeat;
  }
  .row-controls .motion-toggle, .row-controls .motion-toggle:hover {
    position: static; margin: 0 8px 0 auto;
    width: 44px; height: 44px;
    color: var(--paper); background: none;
    box-shadow: inset 0 0 0 1px rgb(242 248 255 / .36);
  }
  .row-arrows { display: flex; gap: 8px; }
  .row-arrow {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(242 248 255 / .36);
    transition: transform .4s var(--ease);
  }
  .row-arrow:active { transform: scale(.96); }
  .row-arrow .icon { width: 18px; height: 18px; }
  .row-arrow:first-child .icon { transform: scaleX(-1); }
}
@media (max-width: 339px) {
  .row-head .icon { display: none; }                       /* so the longest name and "4 of 5" share a line */
  .row-dots button { width: 25px; }                        /* so the dots and 3 round buttons share a line */
}
/* The active dot is the row's clock: each time it fills, the next card comes in (see the script).
   Whatever holds the row stops the clock, and the card gets its full time back afterwards. */
@media (max-width: 619px) and (prefers-reduced-motion: no-preference) {
  .row-dots button[aria-current="true"]::before { animation: leak-hold var(--leak-hold) linear infinite; }
  html.motion-paused .row-dots button::before { animation: none; }
  .row-controls.still .row-dots button::before { animation: none; }
  .services:has(.row-track :focus-visible) .row-dots button::before { animation: none; }
}
@media (max-width: 619px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .services:has(.row-track:hover) .row-dots button::before { animation: none; }
}
@keyframes leak-hold { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
@media (max-width: 619px) and (pointer: coarse) {          /* pressing and holding stops the row, so it must not pick out words instead */
  .row-track { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* --------------------------------------------------------------------------
   Free audit: cobalt sheet with the giant 90
   -------------------------------------------------------------------------- */

.audit {
  position: relative; z-index: 3;
  margin-top: calc(-1 * var(--sheet-r));
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background-color: var(--cobalt);
  color: var(--paper);
  overflow: clip;
}
.audit-top { padding: clamp(72px, 10vw, 136px) var(--gutter) clamp(24px, 4vw, 56px); }
.audit-top h2 {
  max-width: 13em;
}
.audit-top p {
  max-width: 40ch;
  margin-top: clamp(14px, 1.6vw, 24px);
  color: var(--paper);
}
.audit-main { display: grid; grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
.audit-num {
  display: flex; align-items: flex-start;
  font-family: var(--display);
  color: var(--aqua);
}
.audit-num small {
  margin: .2em 0 0 .5em;
  color: var(--paper);
}
@media (max-width: 619px) {
  .audit-num { align-items: baseline; }
  .audit-num small { margin: 0 0 0 .4em; }
}
.findings { margin-top: clamp(24px, 4vw, 40px); }
.finding { padding: clamp(18px, 2.2vw, 32px) 0; border-top: 1px solid rgb(242 248 255 / .42); }
.finding p {
  max-width: 46ch;
  margin-top: 8px;
  color: var(--paper);
}
.audit-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  margin-top: clamp(16px, 2vw, 32px);
  padding: clamp(24px, 3vw, 40px) var(--gutter) calc(var(--sheet-r) + clamp(32px, 5vw, 64px));
  border-top: 1px solid rgb(242 248 255 / .42);
}
.audit-cta .btn { min-height: 56px; padding: 0 30px; }
.audit-cta p { display: flex; align-items: center; gap: 8px;color: var(--paper); }

@media (min-width: 960px) {
  .audit-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: end; }
  .findings { margin-top: 0; }
  .finding:last-child { padding-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   How it works: an ivory head, then slides that stack on each other
   -------------------------------------------------------------------------- */

.how { position: relative; z-index: 4; margin-top: calc(-1 * var(--sheet-r)); }
.how-head {
  position: relative;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background: var(--paper);
  padding: clamp(72px, 10vw, 136px) var(--gutter) clamp(56px, 8vw, 112px);
  text-align: center;
}
.mega-2 span { color: color-mix(in oklab, var(--ink) 62%, var(--paper)); }
.how-head p { margin-top: clamp(14px, 1.6vw, 24px);color: var(--ink-2); }

.slide {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  overflow: clip;
  border-top: 1px solid rgb(242 248 255 / .2);
}
.slide-a { background: var(--night); color: var(--paper); --num-c: var(--cyan); }
.slide-b { background: var(--navy); color: var(--paper); --num-c: var(--cyan); }
.slide-c { background: var(--aqua); color: var(--ink); --num-c: var(--navy); }
.slide-c .tag { background: var(--navy); }
.slide-a .tag, .slide-b .tag { background: var(--cyan); color: var(--navy); }

.slide-num {
  padding: clamp(20px, 5vw, 40px) var(--gutter) 0;
  font-family: var(--display);
  color: var(--num-c);
}
.slide-copy { padding: clamp(24px, 5vw, 40px) var(--gutter) clamp(40px, 8vw, 64px); }
.slide-copy .tag { align-self: flex-start; }
.slide-copy h3 {
  margin-top: 14px;
}
.slide-copy p {
  max-width: 34ch;
  margin-top: clamp(14px, 2vw, 28px);
}

@media (min-width: 900px) {
  .slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
  .slide-num {
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--gutter);
    border-right: 1px solid color-mix(in oklab, currentColor 28%, transparent);
    color: var(--num-c);
    overflow: clip;
  }
  .slide-copy { display: flex; flex-direction: column; justify-content: center; padding: 96px var(--gutter) 64px; }
}
@media (min-width: 900px) and (min-height: 560px) {
  .slide { position: sticky; top: 0; }
}

/* Typed text. The layout is reserved up front so nothing shifts. */
.type-rest { visibility: hidden; }
.caret { position: relative; }
.caret::after {
  content: ""; position: absolute; left: 1px; top: .02em;
  width: .5em; height: 1.08em;
  background: currentColor;
  opacity: .9;
}
.typed-done .caret::after { animation: caret 1.05s steps(1) 3 forwards; }
@keyframes caret { 50% { opacity: 0; } 100% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Promises: a ruled grid. Beside each promise, dots act out what it says.
   -------------------------------------------------------------------------- */

.promises { position: relative; z-index: 5; padding-bottom: 52px; background: var(--paper); color: var(--ink); }
.promises .motion-toggle { bottom: 8px; }
.promise-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.promise {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  border-bottom: var(--rule);
}
.promise-art {
  display: grid; place-items: center;
  border-right: var(--rule);
  padding: clamp(12px, 2vw, 28px);
  min-height: clamp(150px, 36vw, 340px);
}
.dots { width: min(100%, 260px); aspect-ratio: 1; }
.promise-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 3vw, 44px) var(--gutter);
}
.promise-copy p {
  margin-top: clamp(8px, 1vw, 16px);
  line-height: 1.46;
  color: var(--ink-2);
}
/* Phones stack each promise: the drawing, then the words at full width, with no column rule between them */
@media (max-width: 619px) {
  .promise { grid-template-columns: minmax(0, 1fr); }
  .promise-art { justify-items: start; min-height: 0; padding: 26px var(--gutter) 0; border-right: 0; }
  .dots { width: 76px; }
  .promise-copy { padding-block: 14px 28px; }
}
@media (min-width: 1000px) {
  .promises { padding-bottom: 0; }
  .promises .motion-toggle { right: auto; left: calc(50% + 14px); bottom: 14px; }
  .promise-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .promise:nth-child(odd) { border-right: var(--rule); }
}

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */

.voice {
  position: relative; z-index: 5;
  background: var(--foam);
  color: var(--ink);
  padding: clamp(64px, 9vw, 136px) var(--gutter);
  border-bottom: var(--rule);
}
.voice blockquote {
  max-width: 24em;
  font-family: var(--display);
  color: color-mix(in oklab, var(--ink) 66%, var(--foam));
  text-wrap: pretty;
}
.voice blockquote span { color: var(--ink); }
.voice figcaption { margin-top: clamp(16px, 2vw, 28px);font-weight: 500; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px);
  padding: clamp(64px, 9vw, 136px) var(--gutter) calc(var(--sheet-r) + clamp(64px, 9vw, 136px));
  background: var(--paper);
}
.faq-side p { margin-top: clamp(14px, 1.6vw, 22px);color: var(--ink-2); }
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.text-link .icon { width: 1em; height: 1em; transition: transform .5s var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }

.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: var(--rule); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(16px, 1.7vw, 24px) 0;
  font-family: var(--display);
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.pm { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-c); transition: background-color .25s, color .25s, transform .5s var(--ease); }
.pm .icon { width: 16px; height: 16px; }
.faq-list summary:hover .pm { background: var(--aqua); }
.faq-list details[open] .pm { transform: rotate(45deg); background: var(--navy); color: var(--paper); }
.faq-list details p {
  max-width: 62ch;
  padding: 0 52px clamp(18px, 2vw, 28px) 0;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (min-width: 960px) {
  .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .faq-side { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
}

/* --------------------------------------------------------------------------
   Closing and footer: one deep block
   -------------------------------------------------------------------------- */

.closing {
  position: relative; z-index: 6;
  margin-top: calc(-1 * var(--sheet-r));
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  padding: clamp(88px, 13vw, 180px) var(--gutter) clamp(64px, 9vw, 120px);
  background: var(--night);
  color: var(--paper);
  text-align: center;
}
.closing h2 span { color: var(--cyan); }
.closing p { margin-top: clamp(16px, 2vw, 28px);color: rgb(242 248 255 / .86); }
.closing-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(22px, 3vw, 40px); }
.closing-ctas .btn { min-height: 56px; padding: 0 clamp(20px, 5.4vw, 28px); }

.footer {
  position: relative; z-index: 6;
  background: var(--night);
  color: var(--paper);
  container-type: inline-size;
  overflow: clip;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px;
  padding: clamp(40px, 5vw, 64px) var(--gutter);
  border-top: var(--rule);
}
.footer-brand { grid-column: 1 / -1; }
.footer-logo { display: inline-flex; padding: 8px 18px; border-radius: 999px; background: var(--tile); transition: background-color .25s; }
.footer-logo:hover { background: var(--tile-deep); }
.footer-logo img { height: 44px; width: auto; }
.footer-brand p { margin-top: 12px; max-width: 26ch; color: rgb(242 248 255 / .82); }
.footer-badge { height: 64px; width: auto; margin-top: 18px; filter: brightness(1.75) saturate(.75); }
.footer-col .footer-h { font-family: var(--body); font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--cyan); margin-bottom: 12px; }
.footer-col a { display: block; padding: 5px 0;color: rgb(242 248 255 / .86); transition: color .2s; }
.footer-col a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer-more { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; color: var(--paper) !important; }
.footer-more .icon { width: 1em; height: 1em; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding: 16px var(--gutter);
  border-top: var(--rule);
  color: rgb(242 248 255 / .74);
}
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr)) minmax(0, 2fr); }
  .footer-brand { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Inner pages. Each page has one color (--head, set on main): a full-bleed
   head with a giant title, then an ivory sheet that rises over it.
   -------------------------------------------------------------------------- */

.nb { white-space: nowrap; }
.wrap { padding-inline: var(--gutter); }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: band-in 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
}

.page-head {
  position: relative; z-index: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + clamp(28px, 5vw, 64px)) var(--gutter) calc(var(--sheet-r) + clamp(24px, 3vw, 40px));
  background: var(--head);
  color: var(--ink);
}
@media (min-width: 900px) and (min-height: 700px) {
  .page-head { position: sticky; top: 0; min-height: min(100svh, 880px); }
}
.page-head ~ * { position: relative; z-index: 1; }
.page-head + * {
  margin-top: calc(-1 * var(--sheet-r));
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
}
.page-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-bottom: clamp(20px, 3vw, 40px);
font-weight: 500;
}
.back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.back .icon { width: 1em; height: 1em; transform: rotate(180deg); transition: transform .5s var(--ease); }
.back:hover .icon { transform: rotate(180deg) translateX(4px); }
.display {
  max-width: 11.4em;
}
.page-band {
  display: grid; gap: 18px 24px;
  margin-top: clamp(24px, 4vw, 56px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--ink);
}
.page-intro .lead {
  max-width: 42ch;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.meta { margin-top: 8px;font-weight: 500; }
.page-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) {
  .page-band { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .page-ctas { justify-content: flex-end; }
}

.section {
  padding-block: clamp(56px, 8vw, 120px);
  background: var(--paper);
  color: var(--ink);
}
.section + .section { border-top: var(--rule); }
.section:has(+ .closing), article:has(+ .closing) { padding-bottom: calc(var(--sheet-r) + clamp(56px, 8vw, 120px)); }
.h2 {
  max-width: 15em;
}
.section-head .lead {
  max-width: 50ch;
  margin-top: clamp(14px, 1.6vw, 24px);
  color: var(--ink-2);
}

/* Numbered steps */
.list-steps {
  counter-reset: step;
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--ink);
}
.list-steps li {
  counter-increment: step;
  padding: clamp(20px, 2.4vw, 36px) 0;
  border-bottom: var(--rule);
}
.list-steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--display);
}
.list-steps h3 { margin-top: clamp(14px, 1.8vw, 28px); }
.list-steps p { margin-top: 8px;color: var(--ink-2); }
@media (min-width: 900px) {
  .list-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .list-steps li { padding-inline: clamp(16px, 2vw, 28px); border-bottom: 0; border-left: var(--rule); }
  .list-steps li:first-child { padding-left: 0; border-left: 0; }
  .list-steps li:last-child { padding-right: 0; }
}

/* Ruled grid of capabilities */
.cards {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--ink);
}
.card { display: block; padding: clamp(22px, 3vw, 44px) 0; border-bottom: var(--rule); }
.cell-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--head);
  box-shadow: inset 0 0 0 1px rgb(6 39 80 / .2);
  font-size: 20px;
}
.card h3 { margin-top: clamp(16px, 2vw, 28px); }
.card p { max-width: 46ch; margin-top: 8px;color: var(--ink-2); }
@media (min-width: 760px) {
  .cards:not(.rows) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards:not(.rows) .card { padding-inline: clamp(20px, 3vw, 44px); }
  .cards:not(.rows) .card:nth-child(odd) { padding-left: 0; border-right: var(--rule); }
  .cards:not(.rows) .card:nth-child(even) { padding-right: 0; }
}

/* Quote on inner pages */
.quote-mark { display: none; }
.quote-card blockquote {
  max-width: 24em;
  font-family: var(--display);
  text-wrap: pretty;
}
.quote-card figcaption { margin-top: clamp(16px, 2vw, 28px);font-weight: 500; color: var(--ink-2); }

/* FAQ on inner pages, same list as the homepage */
.section-faq > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); }
@media (min-width: 960px) {
  .section-faq > .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .section-faq .section-head { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
}

/* Closing on inner pages has no highlighted span */
.page-head ~ .closing { z-index: 2; }

/* Resources list: full rows that take the page color on hover */
.cards.rows .card { display: grid; gap: 10px; position: relative; isolation: isolate; }
.cards.rows .card::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 calc(-1 * var(--gutter));
  background: var(--head);
  opacity: 0;
  transition: opacity .3s;
}
.cards.rows .card:hover::before { opacity: 1; }
.cards.rows .tag { justify-self: start; }
.cards.rows .card h3 { margin-top: 0; }
.cards.rows .card p { margin-top: 0; color: var(--ink-2); }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.link .icon { width: 1.05em; height: 1.05em; transition: transform .5s var(--ease); }
.card:hover .link .icon { transform: translateX(5px); }
@media (min-width: 900px) {
  .cards.rows .card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 4fr) minmax(0, 1fr);
    column-gap: clamp(16px, 2vw, 32px);
    align-items: start;
    padding-block: clamp(28px, 3.4vw, 52px);
  }
  .cards.rows .link { justify-self: end; margin-top: .3em; }
}

/* --------------------------------------------------------------------------
   Long form. On wide screens an answer-first summary stays pinned in the
   left column while the article runs in the right column.
   -------------------------------------------------------------------------- */

article.wrap {
  padding-block: clamp(56px, 8vw, 120px);
  background: var(--paper);
  color: var(--ink);
}
article + .section { border-top: var(--rule); }
.prose { display: grid; grid-template-columns: minmax(0, 1fr); }
.prose p, .prose ul { margin-top: 1.05em;line-height: 1.62; color: #26405F; }
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--ink); }
.prose a, .row-body a, .stakes-source a, .quote-card figcaption a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover, .row-body a:hover, .stakes-source a:hover, .quote-card figcaption a:hover { text-decoration-thickness: 2px; }
.prose h2 {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(18px, 2vw, 28px);
  border-top: var(--rule);
}
.prose h2 + p, .prose h2 + ul, .prose h2 + h3 { margin-top: .8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { display: grid; gap: .65em; }
.prose li { position: relative; padding-left: 1.5em; }
.prose li::before { content: ""; position: absolute; left: .2em; top: .66em; width: .38em; height: .38em; border-radius: 50%; background: var(--ink); }
.prose .summary {
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--head);
  color: var(--ink);
  font-family: var(--display);
}
@media (min-width: 1000px) {
  .prose { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); }
  .prose > * { grid-column: 2; }
  .prose > .summary {
    grid-column: 1; grid-row: 1 / span 80;
    position: sticky; top: calc(var(--nav-h) + 24px);
    align-self: start;
  }
  .prose > .summary + * { margin-top: 0; }
}
@media (max-width: 999px) {
  .prose > .summary { margin-bottom: 8px; }
}

/* 404: the dawn scene, with the flock that flew off */
.page-head-art {
  position: relative;
  min-height: 100svh;
  padding-bottom: clamp(24px, 3vw, 40px);
  background: var(--night);
  color: var(--paper);
  overflow: clip;
  isolation: isolate;
}
.page-art {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 58% 60%;
}
@media (max-aspect-ratio: 1/1) { .page-art { object-position: 50% 28%; } }
.page-head-art::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(3 20 44 / .55) 0%, rgb(3 20 44 / .15) 42%, rgb(3 20 44 / .82) 100%);
}
.page-head-art .tag { background: var(--cyan); color: var(--navy); }
.page-head-art .page-band { border-top-color: rgb(242 248 255 / .4); }

/* --------------------------------------------------------------------------
   Type roles. Every text size on the site is set here, from the scale in :root.
   To change how a kind of text looks, change its line here and nowhere else.
   -------------------------------------------------------------------------- */

/* Caption: legal lines, notes, chart labels */
.chip, .p-note, .aging-labels, .stakes-source, .footer-bottom { font-size: var(--t-cap); }

/* Interface: navigation, buttons, tags and small labels */
.btn, .tag, .nav-links, .nav-pill, .hero-pill, .inline-label, .area-pills a, .backers,
.stop-when, .row-head, .legend, .p-codes small, .audit-cta p,
.footer-col .footer-h, .footer-col a, .page-top, .meta, .prose .sources,
.voice figcaption, .quote-card figcaption { font-size: var(--t-ui); }

/* Reading text takes --t-body from the body, so it needs no line here */

/* Step 1: intros under headings, short lines, questions */
.hero-sub, .services-head p, .audit-top p, .how-head p, .closing p, .slide-copy p,
.page-intro .lead, .section-head .lead, .areas-lead { font-size: var(--t-1); line-height: 1.36; }
.stop-what, .row-ticks, .p-title, .faq-list summary, .prose h3, .prose .summary {
  font-size: var(--t-1); letter-spacing: -.006em; line-height: 1.24;
}

/* Step 2: small headings */
.stat-label, .promise-copy h3, .list-steps h3, .card h3, .prose h2 {
  font-size: var(--t-2); letter-spacing: -.01em; line-height: 1.14;
}

/* Step 3: feature headings and quotes */
.finding h3, .voice blockquote, .quote-card blockquote, .cards.rows .card h3,
.nav-sheet li a, .audit-num small {
  font-size: var(--t-3); letter-spacing: -.012em; line-height: 1.14;
}

/* Step 4: row and slide titles, the panel total */
.row-title, .slide-copy h3, .p-big b {
  font-size: var(--t-4); letter-spacing: -.014em; line-height: 1.08;
}

/* Step 5: every section heading. The hero headline uses it too, through --h1 */
.stakes h2, .journey h2, .services-head h2, .audit-top h2, .mega-2, .faq-side h2, .closing h2, .h2 {
  font-size: var(--t-5); letter-spacing: -.018em; line-height: 1.04;
}

/* Step 6: inner page titles and numbered steps */
.display, .list-steps li::before {
  font-size: var(--t-6); letter-spacing: -.02em; line-height: 1.02;
}

/* Step 7: the Audit+Recover line, held to the width of a phone */
.mega { font-size: min(var(--t-7), 13vw); letter-spacing: -.02em; line-height: 1; }

/* Step 8: the 3 big numbers, with their units 3 steps down */
.stat-num { font-size: var(--num); letter-spacing: -.02em; line-height: 1; }
.stat-unit { font-size: var(--t-3); letter-spacing: -.012em; line-height: 1; }
@media (min-width: 720px) {
  .stat-unit { font-size: calc(var(--num) * .4215); }
}

/* Step 9: the audit 90 and the slide numbers */
.audit-num span, .slide-num { font-size: var(--t-9); font-weight: 400; letter-spacing: -.02em; line-height: 1; }

/* Phones: the quote, the stat labels and the leak cards' titles drop a step, and headings get a little more air between lines */
@media (max-width: 619px) {
  .voice blockquote { font-size: var(--t-2); line-height: 1.24; }
  .row-title { font-size: var(--t-3); letter-spacing: -.012em; line-height: 1.14; }
  .stat-label { font-size: var(--t-1); line-height: 1.2; }
  .stakes h2, .journey h2, .services-head h2, .audit-top h2, .mega-2, .faq-side h2, .closing h2, .h2 { line-height: 1.09; }
  .display { line-height: 1.07; }
}