/* ============================================================
   RD Systems, rdsystems.io. One stylesheet for every page, no build step.
   The design: an Ink ground and one Sea line through each page as the customer's path.
   The finished page is the base: the .leg boxes below draw the line as CSS borders.
   With JavaScript (site.js) the same geometry becomes one SVG that draws with the scroll.
   When this file changes after launch, rename it (site.2.css) and update every page's link:
   _headers caches /assets/* for a year.
   ============================================================ */

@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --i { syntax: '<number>'; inherits: true; initial-value: 1; }
/* The classic scrollbar's width, as a length the contact sheet can inherit (0 where scrollbars overlay). */
@property --sbar { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* Our Inter file under our own family name. The GHL chat widget adds @font-face rules named "Inter" (from
   fonts.bunny.net) to the document; under the plain name its 400 and 700 faces replaced ours and re-wrapped
   the text after the route was built. No text of ours names "Inter", so no third-party face can render it. */
@font-face {
  font-family: 'RD Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback, so the swap to Inter moves nothing. */
@font-face {
  font-family: 'RD Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
/* The // labels only. A subset: a to z, R, D, S, 0, 4, space, slash, ampersand and the two apostrophes. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-labels.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0B1B3D;
  --indigo: #1E3A8A;
  --sea: #A8E0CC;
  --sea-deep: #308265;
  --steel: #475569;
  --mist: #F1F5F9;
  --white: #FFFFFF;
  --near-black: #020617;

  --font: 'RD Inter', 'RD Inter Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* The route's geometry. Whole pixels, so the CSS pieces meet cleanly. */
  --gutter: 20px;   /* page margin */
  --ro: 10px;       /* how far outside the text column the line turns */
  --r: 12px;        /* turn radius */
  --sw: 2px;        /* line weight */
  --ring: 36px;     /* station ring */
}
/* Sides. --L 1 puts a turn on the left rail, 0 on the right. sL and sR are fixed. The pairs below swap where a
   page's H1 changes its line count, which flips every later turn: s0/s1 at 900 (home, about), p0/p1 at 1024
   (professional services, whose first line needs a 906px column). */
.sR { --L: 0; }
.sL { --L: 1; }
.s0, .p0 { --L: 0; }
.s1, .p1 { --L: 1; }
@media (min-width: 600px) {
  :root { --gutter: 32px; --ro: 18px; --r: 16px; --ring: 40px; }
}
@media (min-width: 900px) {
  .s0 { --L: 1; }
  .s1 { --L: 0; }
}
@media (min-width: 1000px) {
  :root { --gutter: 48px; --ro: 28px; --r: 24px; --ring: 44px; }
}
@media (min-width: 1024px) {
  .p0 { --L: 1; }
  .p1 { --L: 0; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-padding-top: 96px; scroll-behavior: smooth; -webkit-tap-highlight-color: rgba(168, 224, 204, 0.25); overflow-x: clip; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--white);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a[href^="tel:"] { white-space: nowrap; }
button { font: inherit; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--sea); outline-offset: 4px; border-radius: 3px; }

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 100;
  background: var(--sea); color: var(--ink);
  padding: 0.75rem 1rem; border-radius: 6px; font-weight: 600; font-size: 0.875rem;
}
.skip-link:focus { top: 0.75rem; }
.skip-link:focus-visible { outline-color: var(--ink); outline-offset: -5px; }

.wrap, .container {
  max-width: calc(1240px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap { position: relative; z-index: 1; }

/* Line breaks and legs that exist only in one width range (an H1 whose line count changes). */
.lt600, .lt900, .lt1024 { display: inline; }
.ge600, .ge900, .ge1024, .mid { display: none; }
i.lt600, i.lt900, i.lt1024 { display: block; }
@media (min-width: 600px) {
  .lt600, i.lt600 { display: none; }
  .ge600 { display: inline; }
  i.ge600 { display: block; }
  .mid { display: inline; }
}
@media (min-width: 900px) {
  .lt900, i.lt900, .mid { display: none; }
  .ge900 { display: inline; }
  i.ge900 { display: block; }
}
@media (min-width: 1024px) {
  .lt1024, i.lt1024 { display: none; }
  .ge1024 { display: inline; }
  i.ge1024 { display: block; }
}

/* ============================================================
   Header: one pattern for every page
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 20; background: var(--ink); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; }
.nav__logo { display: block; flex-shrink: 0; }
.nav__logo img { height: 44px; width: auto; }
.pnav { display: flex; align-items: center; gap: 2rem; }
.pnav__links { display: flex; align-items: center; gap: 1.75rem; }
.pnav__link { font-weight: 500; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.8); white-space: nowrap; padding: 0.7rem 0; }
.pnav__link:hover { color: var(--white); }
.pnav__link[aria-current], .pnav__panel-link[aria-current] { color: var(--sea); }
.pnav__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 42px; padding: 0 1.25rem;
  background: var(--sea); color: var(--ink); font-weight: 650; font-size: 0.9375rem;
  border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.pnav__cta:hover, .btn:hover, .pnav__panel-cta:hover { background: #BDEBDA; }
.pnav__toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: 999px; cursor: pointer; color: var(--white); flex-shrink: 0;
  margin-right: -10px;
}
.pnav__toggle svg { width: 24px; height: 24px; display: block; }
.pnav__toggle .icon-close { display: none; }
.pnav__toggle[aria-expanded="true"] .icon-open { display: none; }
.pnav__toggle[aria-expanded="true"] .icon-close { display: block; }
.pnav__panel {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--ink);
  border-bottom: var(--sw) solid var(--sea);
  padding: 0.25rem var(--gutter) 1.5rem; display: flex; flex-direction: column;
}
.pnav__panel[hidden] { display: none; }
.pnav__panel-link { font-weight: 500; font-size: 1.125rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(168, 224, 204, 0.16); }
.pnav__panel-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; margin-top: 1.25rem;
  background: var(--sea); color: var(--ink); font-weight: 650; font-size: 1.0625rem; border-radius: 999px;
}
@media (max-width: 767px) {
  .pnav__links, .pnav__cta { display: none; }
  .pnav__toggle { display: inline-flex; }
}
@media (min-width: 768px) {
  .pnav__panel { display: none; }
}
@media (min-width: 1000px) {
  .nav__inner { height: 80px; }
  .nav__logo img { height: 56px; }
}
/* Without JavaScript the menu button can't open the panel, so show the links. */
@media (scripting: none) and (max-width: 767px) {
  .pnav__toggle { display: none; }
  .pnav__panel[hidden] { display: flex; flex-direction: row; gap: 1.5rem; position: static; border-bottom: 0; padding-bottom: 0.25rem; }
  .pnav__panel-link { font-size: 0.9375rem; padding: 0.75rem 0; border-bottom: 0; }
  .pnav__panel-cta { display: none; }
}

/* ============================================================
   The route, base state: drawn with borders, no script needed.
   .run    a horizontal stretch (the script reads these)
   .ut     a turn: arc, straight, arc, joining one run to the next
   .utin   the lower half of a turn that started in the band above
   .utout  the upper half of a turn that ends in the band below
   .rail   a straight vertical through a band with no run
   .loop   a ring on a run, where the content says something repeats
   ============================================================ */
.page { position: relative; container-type: inline-size; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; --pt: 72px; --pb: 80px; padding-top: var(--pt); padding-bottom: var(--pb); }
.grid--flush { --pb: 0px; }

.leg {
  position: absolute; z-index: -1; pointer-events: none; grid-column: 1 / -1;
  border: 0 solid var(--sea);
}
html.has-route .leg { visibility: hidden; }

.run {
  height: 0; border-top-width: var(--sw);
  left: calc(var(--r) - var(--ro)); right: calc(var(--r) - var(--ro));
  bottom: calc(var(--sw) / -2);
}
.ut, .utin, .utout, .rail {
  width: var(--r);
  left: calc(var(--L) * (0px - var(--ro)) + (1 - var(--L)) * (100% + var(--ro) - var(--r)));
  top: calc(var(--sw) / -2); bottom: calc(var(--sw) / -2);
  border-left-width: calc(var(--sw) * var(--L));
  border-right-width: calc(var(--sw) * (1 - var(--L)));
}
.ut {
  border-top-width: var(--sw); border-bottom-width: var(--sw);
  border-radius: calc(var(--r) * var(--L)) calc(var(--r) * (1 - var(--L))) calc(var(--r) * (1 - var(--L))) calc(var(--r) * var(--L));
}
.utin {
  top: calc(-1 * var(--pt, 0px));
  border-bottom-width: var(--sw);
  border-radius: 0 0 calc(var(--r) * (1 - var(--L))) calc(var(--r) * var(--L));
}
.utout {
  bottom: calc(-1 * var(--pb, 0px));
  border-top-width: var(--sw);
  border-radius: calc(var(--r) * var(--L)) calc(var(--r) * (1 - var(--L))) 0 0;
}
.rail { top: calc(-1 * var(--pt, 0px)); bottom: calc(-1 * var(--pb, 0px)); }
.loop {
  left: 0; bottom: calc(var(--sw) / -2); width: var(--ring); height: var(--ring);
  border-width: var(--sw); border-radius: 50%;
}
/* The end: the last run is a flex sibling of the closing button, so the line stops at the button's edge.
   --E 1: the last run travels right to left and the button is at the column's left edge. --E 0: the reverse. */
.run--cap {
  position: static; flex: 1 1 auto; height: var(--sw); align-self: center;
  margin-right: calc(var(--E, 1) * (var(--r) - var(--ro)));
  margin-left: calc((1 - var(--E, 1)) * (var(--r) - var(--ro)));
}
.eR, .e-s0, .e-p0 { --E: 0; flex-direction: row-reverse; }
.eL, .e-s1, .e-p1 { --E: 1; flex-direction: row; }
@media (min-width: 900px) {
  .e-s0 { --E: 1; flex-direction: row; }
  .e-s1 { --E: 0; flex-direction: row-reverse; }
}
@media (min-width: 1024px) {
  .e-p0 { --E: 1; flex-direction: row; }
  .e-p1 { --E: 0; flex-direction: row-reverse; }
}

/* The route, enhanced: one SVG built from the .run boxes. */
.route { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.route--top { z-index: 3; }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route path { fill: none; stroke: var(--sea); stroke-width: var(--sw); stroke-linejoin: round; }
.route .t { display: none; }
.dot {
  display: none; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); box-shadow: 0 0 0 3px rgba(168, 224, 204, 0.38);
  offset-rotate: 0deg;
}
@media (min-width: 600px) {
  .dot { width: 14px; height: 14px; box-shadow: 0 0 0 4px rgba(168, 224, 204, 0.38); }
}

/* Type that sits on the line gets a halo in the band's color, so the line passes behind the letters. */
.on-line {
  --h: 0.05em;
  text-shadow:
    var(--h) 0 0 var(--bg), calc(-1 * var(--h)) 0 0 var(--bg),
    0 var(--h) 0 var(--bg), 0 calc(-1 * var(--h)) 0 var(--bg),
    calc(0.7 * var(--h)) calc(0.7 * var(--h)) 0 var(--bg), calc(-0.7 * var(--h)) calc(0.7 * var(--h)) 0 var(--bg),
    calc(0.7 * var(--h)) calc(-0.7 * var(--h)) 0 var(--bg), calc(-0.7 * var(--h)) calc(-0.7 * var(--h)) 0 var(--bg);
}

/* ============================================================
   Bands and shared section type
   ============================================================ */
.band--ink { --bg: var(--ink); background: var(--ink); }
.band--indigo { --bg: var(--indigo); background: var(--indigo); }
.band__head { padding-bottom: 3.25rem; }
.band__head--station, .band__head--flush { padding-bottom: 0; }
.section__label { font-family: var(--mono); font-weight: 500; font-size: 0.8125rem; color: var(--sea); margin-bottom: 1.25rem; }
.section__title {
  font-weight: 300; font-size: clamp(2rem, 5.4vw, 3.75rem); line-height: 1.06; letter-spacing: -0.03em;
  max-width: 17em; text-wrap: balance;
}
/* A heading on the line: the row's bottom edge is pulled up so the line's center sits 0.14em below the
   baseline, the same place the H1's underline runs (Inter: the line box's bottom is lh / 2 - 0.364em below it). */
.section__title.on-line { margin-bottom: -0.026em; }
.section__lede, .pillar__lede {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); line-height: 1.5; color: rgba(255, 255, 255, 0.84);
  max-width: 36em; margin-top: 1.25rem; text-wrap: pretty;
}
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--sea); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.text-link:hover { color: var(--sea); }
.row__title { font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; }
.btn {
  display: inline-flex; align-items: center; gap: 0.625rem; height: 56px; padding: 0 1.75rem;
  background: var(--sea); color: var(--ink); font-weight: 650; font-size: 1.0625rem;
  border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}

.list { display: grid; gap: 0.75rem; font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); max-width: 36em; }
.list li { position: relative; padding-left: 1.25rem; text-wrap: pretty; }
.list li::before {
  content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sea);
}
.list a, .note a, .prose a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--sea); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.list a:hover, .note a:hover, .prose a:hover { color: var(--sea); }
.prose p { font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.84); max-width: 36em; text-wrap: pretty; }
.prose p + p { margin-top: 1.25rem; }
.prose strong, .note strong { color: var(--white); font-weight: 500; }
.section__title + .prose, .section__lede + .prose { margin-top: 1.5rem; }
.note { font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.84); max-width: 36em; margin-top: 2.5rem; text-wrap: pretty; }
.note--sea { font-weight: 500; color: var(--sea); }
.section__more { margin-top: 1.75rem; }
/* Links that stand alone get a 44px hit area. */
.section__more .text-link, .card__link, .work-card__links .text-link, .proof__links .text-link, .cta__more .text-link {
  display: inline-flex; align-items: center; min-height: 44px;
}
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 2.5rem; }
@media (min-width: 720px) {
  .list--2col { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; max-width: none; }
  .cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid { --pt: 112px; --pb: 112px; }
  .grid--flush { --pb: 0px; }
  .band__head { padding-bottom: 4.5rem; }
  .band__head--station, .band__head--flush { padding-bottom: 0; }
}

/* ============================================================
   Hero: the display H1 on the line, one run under each line of it
   ============================================================ */
.hero { --bg: var(--ink); background: var(--ink); }
.hero, .e404__inner { --h1: clamp(2.625rem, 10.8vw, 6rem); --lh: 1.13; --u: 0.06; --hero-pb: 60px; }
.hero--d1 { --h1: min(14.6vw, 12.5vh); }
.hero--d3 { --h1: clamp(2.25rem, 8.4vw, 5rem); }
@supports (width: 1cqw) {
  .hero, .e404__inner { --h1: clamp(2.625rem, 10.8cqw, 6rem); }
  .hero--d1 { --h1: min(14.6cqw, 12.5vh); }
  .hero--d3 { --h1: clamp(2.25rem, 8.4cqw, 5rem); }
}
/* On the narrowest phones (a 360 phone, or 360 with a classic scrollbar) the longest H1 lines no longer fit the
   column at the scale's floor and would wrap past their runs; there the floor follows the width.
   Case study: "Econsult Solutions:". About: "who judges a website". WordPress: "website redesign". */
@media (max-width: 379px) {
  .hero--cs { --h1: clamp(2rem, 9.2vw, 2.25rem); }
  .hero--long { --h1: clamp(2.25rem, 10.8vw, 2.625rem); }
  @supports (width: 1cqw) {
    .hero--cs { --h1: clamp(2rem, 9.2cqw, 2.25rem); }
    .hero--long { --h1: clamp(2.25rem, 10.8cqw, 2.625rem); }
  }
}
@media (max-width: 399px) {
  .hero--tight { --h1: clamp(2rem, 9.2vw, 2.25rem); }
  @supports (width: 1cqw) {
    .hero--tight { --h1: clamp(2rem, 9.2cqw, 2.25rem); }
  }
}
.hero__in { position: relative; padding-top: 14px; padding-bottom: var(--hero-pb); --pb: 0px; }
.hero .section__label { margin-bottom: 1rem; padding-top: 0.75rem; }
.crumbs { font-size: 0.9375rem; font-weight: 500; margin-bottom: 1.25rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.72); }
.crumbs li:not(:last-child)::after { content: '/'; color: rgba(168, 224, 204, 0.6); }
/* Each separator follows its crumb, so a wrapped line never starts with one. The 44px hit area comes from
   padding that negative margins take back, so the gaps on both sides of every separator are the same 0.5rem. */
.crumbs a { color: rgba(255, 255, 255, 0.84); display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.5rem; margin: -14px -0.5rem; text-decoration: underline; text-decoration-color: rgba(168, 224, 204, 0.5); text-underline-offset: 0.25em; }
.crumbs a:hover { color: var(--white); text-decoration-color: var(--sea); }
.h1box { position: relative; font-size: var(--h1); }
/* Heavy and light: the words that name what the business gets are 800 (.k), the rest 300. An H1 that is all
   subject carries .k itself. */
.hero h1, .e404__title { font-size: 1em; line-height: var(--lh); font-weight: 300; letter-spacing: -0.035em; }
.hero h1.k, .hero h1 .k, .e404__title { font-weight: 800; }
.hero--d1 h1 { letter-spacing: -0.04em; }
.hero--d1 h1 .k { letter-spacing: -0.035em; }

.h1box .run, .h1box .ut {
  bottom: auto;
  top: calc(1em * var(--lh) * var(--n) - 1em * var(--u) - var(--sw) / 2);
}
.h1box .ut { height: calc(1em * var(--lh) + var(--sw)); }
.h1box .run--in, .run--out { left: calc(50% - 50vw); }
@supports (width: 1cqw) {
  .h1box .run--in, .run--out { left: calc(50% - 50cqw); }
}

.hero__row { position: relative; padding-top: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.hero__row > .ut { top: calc(var(--h1) * var(--u) * -1 - var(--sw) / 2); }
.hero__sub {
  font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.84);
  max-width: 34em; text-wrap: pretty; padding-bottom: 26px;
}
/* DOM order stays as today (sub, button, meta line); the meta line is shown above the button. */
.hero__row--meta .hero__sub { padding-bottom: 14px; }
.hero__meta { font-size: 1rem; font-weight: 500; color: var(--sea); padding-bottom: 26px; text-wrap: balance; }
.hero__cta { display: flex; margin-bottom: -28px; order: 1; }
.hero__in > .utout { top: auto; bottom: 0; height: calc(var(--hero-pb) + var(--sw) / 2); }

/* A hero with no button (the case study, contact): the inner is a grid, so the turn after the H1's last line
   can run from that line past what follows to the band's bottom. --n is the H1's last line. */
.hero__in--grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__in--grid > .utout {
  font-size: var(--h1); height: auto;
  top: calc(1em * var(--lh) * var(--n) - 1em * var(--u) - var(--sw) / 2);
  bottom: calc(-1 * var(--hero-pb));
}
.hero__in--grid .hero__sub { padding-top: 22px; padding-bottom: 1.25rem; }
.hero__lede { font-size: 1.1875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.84); max-width: 34em; text-wrap: pretty; padding-top: 22px; }

@media (min-width: 600px) {
  .hero__sub { font-size: 1.1875rem; }
}
@media (min-width: 900px) {
  .hero, .e404__inner { --lh: 1.09; --u: 0.05; --hero-pb: 76px; }
  .hero--d1 { --h1: min(9.3vw, 124px); }
  @supports (width: 1cqw) {
    .hero--d1 { --h1: min(9.3cqw, 124px); }
  }
  .hero__in { padding-top: 20px; }
  .hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: end; column-gap: 3rem; padding-top: 30px; }
  .hero__sub { grid-column: 1; grid-row: 1 / 3; font-size: 1.25rem; padding-bottom: 28px; }
  .hero__row--meta .hero__sub { grid-row: 1; padding-bottom: 14px; }
  .hero__meta { grid-column: 1; grid-row: 2; padding-bottom: 28px; }
  /* The button's right edge stays 104px from the viewport edge, clear of the chat bubble on short laptops. */
  .hero__cta { grid-column: 2; grid-row: 1 / 3; align-self: end; padding-right: calc(104px - var(--gutter)); }
  .hero__in--grid .hero__sub { grid-column: auto; grid-row: auto; font-size: 1.25rem; padding-top: 30px; padding-bottom: 1.5rem; }
  .hero__lede { padding-top: 30px; }
}

/* ============================================================
   Stations: a title on the line. Numbered ones carry a ring at the start.
   The numeral is a sibling before the heading inside .station, never inside the heading.
   ============================================================ */
.station { position: relative; padding-left: calc(var(--ring) + 0.75rem); }
.card__title {
  font-weight: 800; font-size: clamp(1.625rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.022em;
  text-wrap: balance; margin-bottom: -0.036em;
}
.station__title {
  font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance; margin-bottom: -0.046em;
}
/* A linked title keeps a 44px hit area without changing the line box. */
.card__title a, .fit__title a { display: inline-block; padding-block: 0.45em; margin-block: -0.45em; }
.card__title a:hover, .fit__title a:hover { color: var(--sea); }
.card__num {
  position: absolute; left: 0; bottom: calc(var(--ring) / -2); width: var(--ring); height: var(--ring);
  display: grid; place-items: center; border-radius: 50%;
  border: var(--sw) solid var(--sea); background: var(--bg);
  font-weight: 700; font-size: 1rem; letter-spacing: 0; line-height: 1; text-shadow: none;
}
/* Where something repeats, the line itself loops around the numeral. */
.card__num--loop { bottom: 0; border-color: transparent; background: none; }
.station__rest { padding-top: 2rem; }
.section__lede.station__rest { margin-top: 0; }
.station__rest + .list { margin-top: 2rem; }
@media (min-width: 900px) {
  .station__rest { padding-top: 2.5rem; }
}

/* Home, What we build: three numbered stations */
.card__rest { padding: 2rem 0 4rem; display: grid; gap: 1.25rem; }
.card__body { font-size: 1.0625rem; line-height: 1.55; max-width: 32em; text-wrap: pretty; }
.card__list { display: grid; gap: 0.5rem; font-size: 1rem; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.card__list li { position: relative; padding-left: 1.25rem; text-wrap: pretty; }
.card__list li::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--sea);
}
.card__link { justify-self: start; }
@media (min-width: 900px) {
  .card__rest {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 4rem; row-gap: 0.75rem;
    padding: 2.5rem 0 5.5rem calc(var(--ring) + 0.75rem);
  }
  .card__body { grid-column: 1; grid-row: 1; font-size: 1.1875rem; }
  .card__list { grid-column: 2; grid-row: 1 / 3; font-size: 1.0625rem; }
  .card__link { grid-column: 1; grid-row: 2; align-self: start; }
}

/* Services hub: three plain stations (linked titles) and the pillar bands */
.site-card__rest { padding: 1.5rem 0 3rem; }
.site-card__rest:last-of-type { padding-bottom: 0; }
.site-card__body { font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); max-width: 36em; text-wrap: pretty; }
.pillar__rest { padding-top: 2rem; }
.pillar__rest .pillar__lede { margin-top: 0; }
.pillar__rest .list { margin-top: 2rem; }
@media (min-width: 900px) {
  .pillar__rest { padding-top: 2.5rem; }
}

/* ============================================================
   Work rows: the goal on the line, above the screenshot
   ============================================================ */
.work-card { display: contents; }
.work-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 1rem; }
.work-card__title { font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; }
.work-card__meta { font-size: 1rem; color: rgba(255, 255, 255, 0.72); }
.work-card__goal, .goal {
  position: relative; padding: 0.5rem 0 0; margin-bottom: -0.046em;
  font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance;
}
.work-card__goal-label, .goal dt { font-weight: 300; color: var(--sea); margin-right: 0.15em; }
.work-card__goal-text, .goal dd { font-weight: 750; }
.work-card__rest { display: grid; gap: 1.5rem; padding: 1.75rem 0 4.5rem; }
.work-card__shot, .proof__shot, .shots figure { border-radius: 8px; overflow: hidden; background: var(--indigo); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.band--indigo .work-card__shot, .band--indigo .shots figure { background: var(--ink); }
.work-card__shot img, .proof__shot img, .shots img { width: 100%; }
.work-card__text { font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 36em; text-wrap: pretty; }
.work-card__links, .proof__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: 0.75rem; }
.work-card:last-of-type .work-card__rest { padding-bottom: 2rem; }
.work__more { margin-top: 0; }
@media (min-width: 900px) {
  .work-card__rest {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.5rem; align-items: start;
    padding: 2.25rem 0 6.5rem;
  }
    .work-card__shot { grid-column: 1 / 9; grid-row: 1; }
  .work-card__side { grid-column: 9 / 13; grid-row: 1; }
  .work-card:nth-of-type(even) .work-card__shot { grid-column: 5 / 13; }
  .work-card:nth-of-type(even) .work-card__side { grid-column: 1 / 5; }
  .work-card__links { flex-direction: column; align-items: flex-start; }
  .work-card:last-of-type .work-card__rest { padding-bottom: 2.5rem; }
}

/* ============================================================
   Proof (service pages): the goal fact on the line, then the screenshot and the other facts.
   The dl keeps its DOM order; the Goal div is placed in the row above the rest.
   ============================================================ */
.proof__grid, .proof__side, .proof .facts { display: contents; }
.goal dt, .goal dd { display: inline; }
.proof__shot { grid-row: 3; margin-top: 1.75rem; align-self: start; }
.facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.facts > div.goal { display: block; border: 0; grid-template-columns: none; padding: 0.5rem 0 0; }
.facts dt { font-size: 0.8125rem; font-weight: 500; color: var(--sea); padding-top: 0.2rem; }
.facts dd { font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); text-wrap: pretty; }
.facts > div.goal dt, .facts > div.goal dd { font-size: 1em; line-height: inherit; padding: 0; }
/* The label and the text are inline siblings with no space between them in the markup; the margin stands in
   for the word space the work rows have (0.15em plus a space: 18px at 48px). */
.facts > div.goal dt { font-weight: 300; color: var(--sea); margin-right: 0.377em; }
.facts > div.goal dd { font-weight: 750; color: var(--white); }
.proof .facts > div:nth-child(1) { grid-row: 4; margin-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.proof .facts > div:nth-child(2) { grid-row: 2; }
.proof .facts > div:nth-child(3) { grid-row: 5; }
.proof .facts > div:nth-child(4) { grid-row: 6; }
.proof .facts > div:nth-child(5) { grid-row: 7; }
.proof .facts > div:nth-child(6) { grid-row: 8; }
.proof .facts > div:nth-child(7) { grid-row: 9; }
.proof .facts > div:nth-child(8) { grid-row: 10; }
.proof__links { grid-row: 11; }
.proof__quote { grid-row: 12; margin-top: 3rem; max-width: 780px; }
@media (min-width: 900px) {
  .proof .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.5rem; }
  .proof .band__head, .proof .goal { grid-column: 1 / -1; }
  .proof__shot { grid-column: 1 / 9; grid-row: 3 / 12; margin-top: 2.25rem; }
  .proof .facts > div, .proof__links { grid-column: 9 / 13; }
  .proof .facts > div.goal { grid-column: 1 / -1; }
  .proof .facts > div:nth-child(1) { grid-row: 3; margin-top: 2.25rem; border-top: 0; padding-top: 0; }
  .proof .facts > div:nth-child(1) dt { padding-top: 0.15rem; }
  .proof .facts > div:nth-child(3) { grid-row: 4; }
  .proof .facts > div:nth-child(4) { grid-row: 5; }
  .proof .facts > div:nth-child(5) { grid-row: 6; }
  .proof .facts > div:nth-child(6) { grid-row: 7; }
  .proof .facts > div:nth-child(7) { grid-row: 8; }
  .proof .facts > div:nth-child(8) { grid-row: 9; }
  .proof__links { grid-row: 10; flex-direction: column; align-items: flex-start; }
  .proof .facts > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .proof__quote { grid-column: 1 / 9; grid-row: 12; margin-top: 4rem; }
}

/* The case study hero's facts */
.facts--hero { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; margin-top: 0.5rem; }
.facts--hero > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.75rem 0; border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.facts--hero dt { padding-top: 0; }
.facts--hero dd { font-size: 0.9375rem; }
.facts--hero a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--sea); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.facts--hero a:hover { color: var(--sea); }
@media (min-width: 640px) {
  .facts--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .facts--hero dd { font-size: 1rem; }
}
@media (min-width: 1080px) {
  .facts--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   How it works: five numbered stations, the loop at step 5
   ============================================================ */
.steps, .step { display: contents; }
.step__rest { padding: 1.5rem 0 3rem; display: grid; gap: 0.5rem; }
.step__when { font-size: 1rem; font-weight: 500; color: var(--sea); }
.step__body { font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); max-width: 34em; text-wrap: pretty; }
.steps__loop { font-size: 1.0625rem; font-weight: 500; line-height: 1.5; color: var(--sea); max-width: 34em; padding-top: 0.5rem; text-wrap: pretty; }
@media (min-width: 900px) {
  .step__rest { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); column-gap: 2.5rem; padding: 2rem 0 3.5rem calc(var(--ring) + 0.75rem); }
  .step__body { font-size: 1.125rem; }
  .steps__loop { margin-left: calc(var(--ring) + 0.75rem); }
}

/* ============================================================
   Home: how we measure, who it's for
   ============================================================ */
.measure__title { font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.measure__body { font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.84); max-width: 32em; margin-top: 0.5rem; text-wrap: pretty; }
.fit__title { font-weight: 800; font-size: clamp(1.625rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
.fit__title a { text-decoration: underline; text-decoration-color: var(--sea); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.fit__body { font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); max-width: 32em; margin-top: 1rem; text-wrap: pretty; }
.fit__subtitle { margin-top: 3.5rem; margin-bottom: 1.25rem; }
@media (min-width: 900px) {
  .fit__subtitle { margin-top: 4.5rem; }
}

/* ============================================================
   Who you work with, and the about page: prose and the portrait
   ============================================================ */
.portrait { margin-top: 2.5rem; width: 100%; max-width: 260px; }
.portrait img { width: 100%; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.portrait figcaption { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.15rem; font-weight: 600; }
.portrait figcaption span { font-weight: 400; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }
@media (min-width: 860px) {
  .who .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.5rem; }
  .who__text { grid-column: 1 / 8; }
  .portrait { grid-column: 9 / 13; margin-top: 0; justify-self: end; align-self: start; max-width: 340px; }
}

/* ============================================================
   Questions: details on the band
   ============================================================ */
.faq { max-width: 820px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 48px; padding: 1.125rem 0; font-weight: 700; font-size: 1.125rem; line-height: 1.35; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ''; width: 14px; height: 14px; flex-shrink: 0; background: linear-gradient(var(--white), var(--white)) center / 14px 2px no-repeat, linear-gradient(var(--white), var(--white)) center / 2px 14px no-repeat; }
.faq__item[open] .faq__q::after { background: linear-gradient(var(--white), var(--white)) center / 14px 2px no-repeat; }
.faq__a { padding: 0 0 1.5rem; max-width: 680px; }
.faq__a p { font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.84); text-wrap: pretty; }
.faq__a a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--sea); text-underline-offset: 0.25em; }
.faq__a a:hover { color: var(--sea); }

/* ============================================================
   Quotes (work index, case study, the WordPress proof)
   ============================================================ */
.quote { max-width: 780px; }
.quote__text p { font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.4; letter-spacing: -0.3px; font-weight: 500; text-wrap: pretty; }
.proof__quote p { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.4; letter-spacing: -0.3px; font-weight: 500; text-wrap: pretty; }
.proof__quote figcaption { margin-top: 1rem; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.72); }
.proof__quote figcaption strong { color: var(--white); font-weight: 700; }
.quote__credit { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9375rem; }
.quote__name { font-weight: 700; }
.quote__role { color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   Case study: the three shots
   ============================================================ */
.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.shots__phone { justify-self: center; width: 100%; max-width: 260px; }
.shots__caption { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); max-width: 36em; }
/* From 640 the phone capture fills the second column beside the two stacked shots. It was captured 390px wide
   (the 780 file is its 2x), so the block stops at 1067px: the phone column is then 390px and the two rows
   beside it 841px, and the capture is never drawn larger than it was taken. */
@media (min-width: 640px) {
  .shots { grid-template-columns: 1.685fr 1fr; max-width: 1067px; }
  .shots__phone { grid-column: 2; grid-row: 1 / span 2; justify-self: stretch; max-width: none; }
  .shots__phone img { height: 100%; object-fit: cover; object-position: top center; }
}

/* ============================================================
   The close: a plain band; the button is the end of the line
   ============================================================ */
.cta .band__head { padding-bottom: 0; }
.cta__body { font-size: 1.125rem; line-height: 1.55; color: rgba(255, 255, 255, 0.84); max-width: 36em; margin-top: 1.25rem; text-wrap: pretty; }
.cta__actions { display: flex; align-items: center; margin-top: 2.25rem; margin-bottom: -28px; }
/* The case study's second link: under the button at 390 (right-aligned with it); beside it, on its open side,
   from 720, with its margin box ending at the button's center so the turn still lands there. */
.cta__more { justify-self: end; padding-top: calc(28px + 0.5rem); font-size: 1.0625rem; line-height: 1.5; }
@media (min-width: 720px) {
  .cta--more .grid { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 1.75rem; }
  .cta--more .band__head { grid-column: 1 / -1; }
  .cta--more .cta__actions { grid-column: 1; grid-row: 2; }
  .cta__more { grid-column: 2; grid-row: 2; align-self: start; margin-top: 2.25rem; padding-top: 6px; margin-bottom: -22px; }
}

/* ============================================================
   Contact: the form on a Mist sheet with its height reserved, the booking strip, the channels.
   The GHL form's height is a staircase of the iframe's own width (its text wrapping), so the sheet's height
   follows the sheet's width through a container query on the grid around it, never the viewport.
   Measured November 11th on the live form, every pixel from 230 to 765 wide, in an iframe tall enough to
   need no scrollbar: 29 steps, from 1564px of content at 230 to 941px from 675 up. Two staircases:
   --fh  the content height plus the 5px form_embed.js adds, each step held 3px past where it was measured.
         The sheet's height where scrollbars overlay (phones): exact, never shorter than the form.
   --fb  the same steps 15px later. Where scrollbars take room (--sbar, the viewport less the page's width,
         is above 0) the form can show its own scrollbar for a moment while it loads; that narrows it by
         15px, makes it taller, and the scrollbar then stays unless the sheet already fits the narrower form.
   The media queries before the container block are for browsers without container queries: --fb read at the
   narrowest sheet a viewport can give. form_embed.js wraps the iframe in two divs and rewrites its inline
   height, so every wrapper in the sheet takes the full height and the iframe fills it: nothing below moves.
   ============================================================ */
.form-sheet { position: relative; max-width: 760px; height: 1500px; background: var(--mist); border-radius: 8px; overflow: hidden; }
.form-sheet div { height: 100%; }
.form-sheet iframe { display: block; width: 100% !important; height: 100% !important; border: 0; }
.form-sheet :focus-visible { outline-color: var(--indigo); }
@media (min-width: 345px) { .form-sheet { height: 1370px; } } @media (min-width: 360px) { .form-sheet { height: 1330px; } }
@media (min-width: 375px) { .form-sheet { height: 1310px; } } @media (min-width: 390px) { .form-sheet { height: 1243px; } }
@media (min-width: 415px) { .form-sheet { height: 1183px; } } @media (min-width: 460px) { .form-sheet { height: 1143px; } }
@media (min-width: 520px) { .form-sheet { height: 1075px; } } @media (min-width: 600px) { .form-sheet { height: 1026px; } }
@media (min-width: 680px) { .form-sheet { height: 986px; } } @media (min-width: 775px) { .form-sheet { height: 946px; } }
@supports (container-type: inline-size) {
  .form .grid { container-type: inline-size; --sbar: calc(100vw - 100cqw); --fh: 1603px; --fb: 1603px; }
  .form-sheet { height: max(var(--fh), min(var(--fb), var(--fh) + var(--sbar) * 99999)); }
  @container (min-width: 233px) { .form-sheet { --fh: 1569px; } } @container (min-width: 234px) { .form-sheet { --fh: 1540px; } } @container (min-width: 237px) { .form-sheet { --fh: 1520px; } }
  @container (min-width: 247px) { .form-sheet { --fh: 1500px; } } @container (min-width: 248px) { .form-sheet { --fb: 1569px; } } @container (min-width: 249px) { .form-sheet { --fb: 1540px; } }
  @container (min-width: 251px) { .form-sheet { --fh: 1480px; } } @container (min-width: 252px) { .form-sheet { --fb: 1520px; } } @container (min-width: 255px) { .form-sheet { --fh: 1460px; } }
  @container (min-width: 257px) { .form-sheet { --fh: 1439px; } } @container (min-width: 260px) { .form-sheet { --fh: 1410px; } } @container (min-width: 262px) { .form-sheet { --fb: 1500px; } }
  @container (min-width: 265px) { .form-sheet { --fh: 1390px; } } @container (min-width: 266px) { .form-sheet { --fb: 1480px; } } @container (min-width: 267px) { .form-sheet { --fh: 1370px; } }
  @container (min-width: 270px) { .form-sheet { --fb: 1460px; } } @container (min-width: 272px) { .form-sheet { --fb: 1439px; } } @container (min-width: 275px) { .form-sheet { --fb: 1410px; } }
  @container (min-width: 280px) { .form-sheet { --fb: 1390px; } } @container (min-width: 282px) { .form-sheet { --fb: 1370px; } } @container (min-width: 283px) { .form-sheet { --fh: 1350px; } }
  @container (min-width: 290px) { .form-sheet { --fh: 1330px; } } @container (min-width: 298px) { .form-sheet { --fb: 1350px; } } @container (min-width: 302px) { .form-sheet { --fh: 1310px; } }
  @container (min-width: 305px) { .form-sheet { --fb: 1330px; } } @container (min-width: 316px) { .form-sheet { --fh: 1283px; } } @container (min-width: 317px) { .form-sheet { --fb: 1310px; } }
  @container (min-width: 318px) { .form-sheet { --fh: 1263px; } } @container (min-width: 320px) { .form-sheet { --fh: 1243px; } } @container (min-width: 331px) { .form-sheet { --fb: 1283px; } }
  @container (min-width: 332px) { .form-sheet { --fh: 1223px; } } @container (min-width: 333px) { .form-sheet { --fb: 1263px; } } @container (min-width: 335px) { .form-sheet { --fb: 1243px; } }
  @container (min-width: 338px) { .form-sheet { --fh: 1203px; } } @container (min-width: 345px) { .form-sheet { --fh: 1183px; } } @container (min-width: 347px) { .form-sheet { --fb: 1223px; } }
  @container (min-width: 353px) { .form-sheet { --fb: 1203px; } } @container (min-width: 360px) { .form-sheet { --fb: 1183px; } } @container (min-width: 390px) { .form-sheet { --fh: 1143px; } }
  @container (min-width: 405px) { .form-sheet { --fb: 1143px; } } @container (min-width: 414px) { .form-sheet { --fh: 1115px; } } @container (min-width: 429px) { .form-sheet { --fb: 1115px; } }
  @container (min-width: 432px) { .form-sheet { --fh: 1095px; } } @container (min-width: 436px) { .form-sheet { --fh: 1075px; } } @container (min-width: 447px) { .form-sheet { --fb: 1095px; } }
  @container (min-width: 451px) { .form-sheet { --fb: 1075px; } } @container (min-width: 480px) { .form-sheet { --fh: 1046px; } } @container (min-width: 487px) { .form-sheet { --fh: 1026px; } }
  @container (min-width: 495px) { .form-sheet { --fb: 1046px; } } @container (min-width: 502px) { .form-sheet { --fb: 1026px; } } @container (min-width: 538px) { .form-sheet { --fh: 1006px; } }
  @container (min-width: 553px) { .form-sheet { --fb: 1006px; } } @container (min-width: 568px) { .form-sheet { --fh: 986px; } } @container (min-width: 583px) { .form-sheet { --fb: 986px; } }
  @container (min-width: 668px) { .form-sheet { --fh: 966px; } } @container (min-width: 678px) { .form-sheet { --fh: 946px; } } @container (min-width: 683px) { .form-sheet { --fb: 966px; } }
  @container (min-width: 693px) { .form-sheet { --fb: 946px; } }
}

.book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; justify-items: start; }
.book__text { display: block; font-size: 1.125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.84); max-width: 36em; text-wrap: pretty; }
.book__actions { display: flex; align-items: center; width: 100%; }
/* The turn into this band ends at the button's center, 28px above the strip's bottom edge. */
.reach .utin { bottom: calc(28px - var(--sw) / 2); }
@media (min-width: 900px) {
  .book { display: flex; align-items: center; }
  .book__text { flex-shrink: 0; }
  .book__actions { flex: 1 1 auto; width: auto; }
}
.channels__heading { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid rgba(255, 255, 255, 0.14); margin-bottom: 1.75rem; }
.channels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 1.5rem; max-width: 760px; }
.channel { display: flex; align-items: flex-start; gap: 0.875rem; }
.channel__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--sea); margin-top: 0.2rem; }
.channel__icon svg { width: 20px; height: 20px; display: block; }
.channel__label { font-size: 0.8125rem; font-weight: 500; color: var(--sea); margin-bottom: 0.35rem; }
.channel__value { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--white); overflow-wrap: anywhere; }
a.channel__value {
  display: inline-block; padding-block: 11px; margin-block: -11px;
  text-decoration: underline; text-decoration-color: var(--sea); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
a.channel__value:hover { color: var(--sea); }
.channel__value--addr { font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
@media (min-width: 640px) {
  .channels { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Legal pages: white ground, one rail in deep Sea
   ============================================================ */
html.is-legal { color-scheme: light; }
.is-legal body { color: var(--near-black); background: var(--white); }
.legal-main { padding: 40px 0 80px; }
.legal { position: relative; max-width: 760px; }
/* The rail is the article's own leg: its left border sits --ro outside the article's left edge and spans the
   article exactly, from the H1's top to the last paragraph's end. */
.legal > .rail { --pt: 0px; --pb: 0px; }
.legal .leg { border-color: var(--sea-deep); }
.legal :focus-visible { outline-color: var(--indigo); }
.legal h1 { font-weight: 800; font-size: clamp(2rem, 6.6vw, 4rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.legal .updated { font-size: 0.9375rem; color: var(--steel); margin: 0.875rem 0 2.5rem; }
.legal h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 2.5rem 0 0.75rem; text-wrap: balance; }
.legal h3 { font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--ink); margin: 1.75rem 0 0.5rem; }
/* The article is 760px; running text holds the 36em measure, about 75 characters at 17px. */
.legal p, .legal li { font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; max-width: 36em; }
.legal p { margin: 0 0 1.25rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1.25rem; }
.legal li { margin: 0 0 0.4rem; }
.legal li::marker { color: var(--ink); }
.legal a { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }
.legal strong { color: var(--ink); font-weight: 700; }
.legal u { text-decoration: underline; text-underline-offset: 2px; }
.legal .addr { font-style: normal; line-height: 1.7; }
.legal .allcaps { text-transform: uppercase; font-size: 0.9375rem; letter-spacing: 0.2px; }
/* The "In Short" summaries: a quieter paragraph, not a box. */
.clause { color: var(--steel); margin: 0 0 1.25rem; }
.clause p { margin: 0; }
/* The table of contents keeps its markup (links separated by <br>); the links are shown as a plain list of 44px rows. */
.toc { margin: 0 0 1.25rem; }
.toc br { display: none; }
.toc a { display: block; padding: 0.5rem 0; font-size: 1.0625rem; line-height: 1.65; text-decoration-color: rgba(30, 58, 138, 0.4); }
.toc a:hover { text-decoration-color: currentColor; }
/* The categories table scrolls inside its own wrapper under 560px of column, never the page. */
.table-wrap { overflow-x: auto; margin: 0 0 1.25rem; }
.legal table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9375rem; line-height: 1.5; }
.legal th { text-align: left; vertical-align: bottom; padding: 0.6rem 0.75rem; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink); }
.legal td { padding: 0.65rem 0.75rem; border-bottom: 1px solid rgba(11, 27, 61, 0.12); vertical-align: top; }
.legal th:first-child, .legal td:first-child { padding-left: 0; }
.legal th:last-child, .legal td.center { text-align: center; white-space: nowrap; }
@media (min-width: 900px) {
  .legal-main { padding: 64px 0 112px; }
}
@media (min-width: 1000px) {
  .legal { margin-inline: auto; }
}

/* ============================================================
   404: Ink throughout, the main centered vertically, no footer. The four links are stations, one per run,
   and the last run leaves the page at the edge.
   ============================================================ */
.is-404 body { min-height: 100vh; display: flex; flex-direction: column; }
.is-404 .page { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.e404 { width: 100%; padding-block: 3rem 4rem; --bg: var(--ink); }
.e404__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
.e404__text { font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.84); max-width: 44ch; padding-top: 22px; text-wrap: pretty; }
/* The button's center is the row's bottom edge, so the run and the turns meet it there. */
.e404__cta { display: flex; margin-top: 2rem; margin-bottom: -28px; }
.e404__turn { grid-row: 2 / 5; font-size: var(--h1); top: calc(1em * var(--lh) - 1em * var(--u) - var(--sw) / 2); }
.e404__links { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto); padding-top: 28px; }
.e404__links a {
  display: block; width: max-content; max-width: 100%; padding-top: 1.5rem; min-width: 44px;
  font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1; letter-spacing: -0.02em;
}
.e404__links a:hover { color: var(--sea); }
/* The first turn starts at the button's center, 28px above this grid's first row. */
.e404__links .ut--from-cta { top: calc(-28px - var(--sw) / 2); }
@media (min-width: 900px) {
  .e404__text { padding-top: 30px; }
}

/* ============================================================
   Footer. The markup is compliance-locked; only the styling lives here.
   The right column and the bottom padding keep clear of the chat bubble (58px at 20px from the corner).
   ============================================================ */
.footer { background: var(--mist); color: var(--steel); padding: 3rem 0 96px; font-size: 0.9375rem; }
.is-legal .footer { border-top: 1px solid rgba(11, 27, 61, 0.12); }
.footer :focus-visible { outline-color: var(--indigo); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: space-between; align-items: flex-start; }
.footer__meta { display: flex; flex-direction: column; gap: 0.45rem; }
.footer__name { color: var(--ink); font-weight: 700; }
.footer__addr { font-style: normal; line-height: 1.55; }
.footer__legal { font-size: 0.875rem; }
.footer__right { display: flex; flex-direction: column; align-items: flex-start; }
.footer__contact { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--ink); font-weight: 600; }
.footer__contact:hover, .footer__links a:hover { text-decoration: underline; }
.footer__contact-icon { flex-shrink: 0; color: var(--indigo); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; font-size: 0.875rem; }
.footer__links a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
@media (min-width: 600px) {
  .footer { padding-bottom: 3rem; }
  .footer__right { align-items: flex-end; margin-right: calc(96px - var(--gutter)); }
}

/* ============================================================
   Motion: a layer over the finished page.
   The line draws with the scroll and a dot travels it as the customer.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) and (offset-path: path("M0 0L1 1")) {
    .route {
      animation: a-intro 2s cubic-bezier(0.6, 0.04, 0.2, 1) 0.2s both, a-travel 1ms linear both;
      animation-timeline: auto, scroll(root block);
    }
    .route .t { display: inline; opacity: 0.3; }
    .route .p {
      stroke-dasharray: 100 300;
      stroke-dashoffset: calc(101px - 101px * clamp(0, (var(--p) * var(--i) - var(--a)) * var(--k), 1));
    }
    .dot { display: block; offset-distance: calc(var(--p) * var(--i) * 100%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@keyframes a-intro { from { --i: 0; } to { --i: 1; } }

/* ============================================================
   Print (legal pages): the document, without the chrome
   ============================================================ */
@media print {
  .is-legal .nav, .is-legal .skip-link, .is-legal .leg, .is-legal .footer__right { display: none; }
  html.is-legal { scroll-padding-top: 0; }
  .is-legal body { font-size: 11pt; color: #000; background: #fff; }
  .legal-main { padding: 0; }
  .legal { max-width: none; }
  .legal p, .legal li, .toc a { font-size: 11pt; line-height: 1.5; }
  .legal h1 { font-size: 24pt; color: #000; }
  .legal h2 { font-size: 14pt; color: #000; break-after: avoid; }
  .legal h3 { font-size: 12pt; color: #000; break-after: avoid; }
  .legal a, .toc a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; }
  .legal strong { color: #000; }
  .table-wrap { overflow: visible; }
  .legal table { min-width: 0; font-size: 10pt; }
  .legal tr { break-inside: avoid; }
  .is-legal .footer { background: none; border-top: 1px solid #000; padding: 1.5rem 0; color: #000; }
}