/* ==========================================================================
   DriverLine — Studio homepage
   One family (Archivo, variable width + weight), one route grammar,
   navy / blue / white with tonal depth.
   ========================================================================== */

:root {
  /* Color */
  --night: #050E22;        /* deepest brand navy: hero, estimator, close */
  --night-2: #0A1832;      /* raised surface on night */
  --navy: #0B3259;         /* the logo's navy */
  --navy-2: #072447;
  --blue: #2F66E0;         /* action blue (white text 5.1:1) */
  --blue-hi: #3E76F2;
  --signal: #6E9FFF;       /* route illumination on dark */
  --ice: #C3D5F7;          /* secondary text on dark */
  --mist: #93A6C6;         /* tertiary text on dark (7.1:1 on night) */
  --paper: #F2F5F9;
  --white: #FFFFFF;
  --ink: #0A1A33;
  --slate: #4A5A73;        /* body on light (6.9:1 on white) */
  --rule: #DCE3ED;
  --rule-dark: rgba(195, 213, 247, 0.12);
  --ready: #41C98E;

  /* Type */
  --ff: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.875rem, -0.4rem + 7.1vw, 6.25rem);
  --fs-statement: clamp(2.5rem, 0.9rem + 4.6vw, 5.25rem);
  --fs-h2: clamp(2.125rem, 1.25rem + 2.5vw, 3.625rem);
  --fs-h3: 1.1875rem;
  --fs-lede: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.875rem;

  /* Space + structure */
  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --sec: clamp(76px, 9.5vw, 148px);
  --hd-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.7, 0.12, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.25, 1);
  --t-fast: 160ms;
  --t-med: 420ms;
  --t-slow: 900ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd-h) + 24px); }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
::selection { background: rgba(62, 118, 242, 0.28); }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.nb { white-space: nowrap; }
.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-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 16px; border-radius: 8px;
  background: var(--white); color: var(--ink); font-weight: 600; font-size: var(--fs-small);
  transform: translateY(-160%); transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.process :focus-visible, .ops :focus-visible, .ind :focus-visible, .shift :focus-visible { outline-color: var(--blue); }

/* ---------- Type roles ---------- */
.label {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-label); font-weight: 560; line-height: 1.2;
  letter-spacing: 0.005em; color: var(--blue);
  margin-bottom: 22px;
}
/* a short covered segment: the site's single structural mark */
.label::before {
  content: ""; flex: none; width: 30px; height: 8px;
  background:
    radial-gradient(circle at 26px 4px, currentColor 0 3px, transparent 3.5px),
    linear-gradient(currentColor, currentColor) 0 3px / 24px 2px no-repeat;
}
.label--dark { color: var(--signal); }

.h2 {
  font-size: var(--fs-h2); line-height: 1.02; font-weight: 610;
  font-variation-settings: "wdth" 94;
  letter-spacing: -0.032em; color: var(--ink);
  text-wrap: balance;
}
.h2--dark { color: var(--white); }
.lede { margin-top: 22px; font-size: var(--fs-lede); line-height: 1.55; color: var(--slate); max-width: 34em; text-wrap: pretty; }
.lede--dark { color: var(--ice); }
.lede--lg { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); max-width: 30em; color: var(--ink); }

/* ---------- Buttons ---------- */
.bt {
  --bt-h: 46px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bt-h); padding: 0 22px; border-radius: 10px; border: 0;
  font-size: var(--fs-small); font-weight: 580; letter-spacing: -0.003em; line-height: 1;
  font-variation-settings: "wdth" 100;
  white-space: nowrap; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.bt--sm { --bt-h: 38px; padding: 0 16px; font-size: 0.875rem; border-radius: 9px; }
.bt--lg { --bt-h: 54px; padding: 0 28px; font-size: 1rem; border-radius: 12px; }
.bt--xl { --bt-h: 62px; padding: 0 34px; font-size: 1.0625rem; border-radius: 13px; }
.bt--block { width: 100%; }

.bt--primary {
  color: var(--white);
  background: linear-gradient(180deg, var(--blue-hi) 0%, var(--blue) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(3, 18, 60, 0.28),
    0 1px 2px rgba(3, 12, 34, 0.35),
    0 10px 28px -14px rgba(47, 102, 224, 0.9);
}
.bt--primary::after {
  /* a slim specular edge that brightens on hover */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.bt--primary:hover::after { opacity: 1; }
.bt--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(3, 18, 60, 0.28),
    0 2px 4px rgba(3, 12, 34, 0.3),
    0 16px 36px -14px rgba(62, 118, 242, 1);
}
.bt--primary:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    inset 0 1px 3px rgba(3, 18, 60, 0.35),
    0 1px 1px rgba(3, 12, 34, 0.3),
    0 6px 16px -12px rgba(47, 102, 224, 0.9);
}

.bt--quiet {
  color: var(--white);
  background: rgba(195, 213, 247, 0.04);
  box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.2);
}
.bt--quiet:hover { background: rgba(195, 213, 247, 0.08); box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.38); }
.bt--quiet:active { transform: translateY(1px) scale(0.985); background: rgba(195, 213, 247, 0.12); }

.bt--quiet-dark {
  --bt-h: auto; height: auto; padding: 6px 2px; border-radius: 4px;
  color: var(--ice); font-weight: 520;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  background-size: 100% 1px;
  transition: color var(--t-fast) var(--ease), background-size var(--t-med) var(--ease);
}
.bt--quiet-dark:hover { color: var(--white); }

/* ---------- Check ---------- */
.tick {
  position: relative; flex: none; display: inline-block;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(110, 159, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(110, 159, 255, 0.32);
}
.tick::after {
  content: ""; position: absolute; left: 7px; top: 4.5px; width: 5px; height: 9px;
  border: solid var(--signal); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg);
}

/* ==========================================================================
   Header
   ========================================================================== */
.hd { position: fixed; inset: 0 0 auto; z-index: 100; }
.hd__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 32px;
  height: var(--hd-h);
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
}
.hd::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  background: rgba(5, 14, 34, 0.82);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: inset 0 -1px 0 rgba(195, 213, 247, 0.08);
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
.hd.header--scrolled::before { opacity: 1; }
.hd__logo { flex: none; position: relative; display: block; border-radius: 6px; }
.hd__logo img { height: 38px; width: auto; transition: opacity var(--t-med) var(--ease); }
.hd__logo-light { position: absolute; left: 0; top: 0; opacity: 0; }

/* over light surfaces the bar's type turns ink, and frosts white once scrolled */
.hd--light.header--scrolled::before { background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 -1px 0 rgba(10, 26, 51, 0.08); }
.hd--light .hd__logo-dark { opacity: 0; }
.hd--light .hd__logo-light { opacity: 1; }
.hd--light .hd__link { color: rgba(10, 26, 51, 0.66); }
.hd--light .hd__link:hover { color: var(--ink); background: rgba(10, 26, 51, 0.05); }
.hd--light .hd__link[aria-current="page"] { color: var(--ink); }
.hd--light .hd__link[aria-current="page"]::after { background: var(--blue); }
.hd--light .hd__menu-bar { background: var(--ink); }
.hd--light :focus-visible { outline-color: var(--blue); }
.hd__link, .hd__menu-bar { transition: color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.hd__nav { display: flex; gap: 4px; margin-left: auto; }
.hd__link {
  position: relative; padding: 10px 14px; border-radius: 8px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.003em;
  color: rgba(225, 234, 250, 0.72);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.hd__link:hover { color: var(--white); background: rgba(195, 213, 247, 0.06); }
.hd__link[aria-current="page"] { color: var(--white); }
.hd__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--signal);
}
.hd__actions { display: flex; align-items: center; gap: 12px; }
.hd__menu { display: none; }

/* Mobile menu */
.mnav { display: none; }

@media (max-width: 767px) {
  :root { --hd-h: 64px; }
  .hd__bar { gap: 12px; }
  .hd__logo img { height: 30px; }
  .hd__nav { display: none; }
  .hd__actions { margin-left: auto; }
  .hd__cta { display: none; }
  .hd__menu {
    display: grid; place-content: center; gap: 6px;
    width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 10px;
    background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .hd__menu-bar {
    display: block; width: 22px; height: 1.75px; border-radius: 2px; background: var(--white);
    transition: transform var(--t-med) var(--ease);
  }
  .hd__menu[aria-expanded="true"] .hd__menu-bar:first-child { transform: translateY(3.9px) rotate(45deg); }
  .hd__menu[aria-expanded="true"] .hd__menu-bar:last-child { transform: translateY(-3.9px) rotate(-45deg); }

  .mnav {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 1;
    padding: calc(var(--hd-h) + 28px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(47, 102, 224, 0.22), rgba(47, 102, 224, 0) 60%),
      var(--night);
    overflow-y: auto;
    visibility: hidden; opacity: 0;
    transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .mnav.mobile-nav--open { visibility: visible; opacity: 1; transition: opacity var(--t-med) var(--ease), visibility 0s; }
  .mnav__links { display: flex; flex-direction: column; }
  .mnav__link, .mnav__foot {
    transform: translateY(14px); opacity: 0;
    transition: transform 520ms var(--ease), opacity 520ms var(--ease);
    transition-delay: calc(var(--i) * 45ms + 60ms);
  }
  .mnav.mobile-nav--open .mnav__link, .mnav.mobile-nav--open .mnav__foot { transform: none; opacity: 1; }
  .mnav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; border-bottom: 1px solid var(--rule-dark);
    font-size: clamp(1.875rem, 1.2rem + 3.4vw, 2.5rem); font-weight: 560; line-height: 1.1;
    font-variation-settings: "wdth" 94; letter-spacing: -0.03em; color: var(--white);
  }
  .mnav__link[aria-current="page"]::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
    box-shadow: 0 0 0 5px rgba(110, 159, 255, 0.16);
  }
  .mnav__foot { padding-top: 32px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: min(100svh, 980px);
  background: var(--night); color: var(--white);
}
.hero__map { position: absolute; inset: 0; z-index: -1; }
.hero__map::after {
  /* the map recedes behind the copy and clears the header */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(5, 14, 34, 0.92) 28%, rgba(5, 14, 34, 0.4) 50%, rgba(5, 14, 34, 0) 64%),
    linear-gradient(0deg, var(--night) 0%, rgba(5, 14, 34, 0) 20%),
    linear-gradient(180deg, var(--night) 0%, rgba(5, 14, 34, 0.6) 9%, rgba(5, 14, 34, 0) 24%);
}
.hm { --u: 1; width: 100%; height: 100%; }
.hm-streets path { fill: none; stroke: rgba(150, 178, 232, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hm-streets--major path { stroke: rgba(150, 178, 232, 0.1); stroke-width: 1.25; }

/* a route: dotted while uncovered, a drawn lane once driven, territory lit once closed */
.hm-area { fill: #3E76F2; fill-opacity: 0; stroke: none; transition: fill-opacity 1100ms var(--ease); }
.hm-route.is-closed .hm-area, html:not(.js) .hm-area { fill-opacity: 0.075; }
.hm-track { fill: none; stroke: rgba(160, 184, 226, 0.3); stroke-width: 1.25; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hm-line { fill: none; stroke: #8DB4FF; stroke-width: calc(2px * var(--u)); stroke-linecap: round; stroke-linejoin: round; }
.hm-hit { fill: none; stroke: transparent; stroke-width: calc(22px * var(--u)); pointer-events: stroke; }
.hm-routes { transition: filter 900ms var(--ease); }
.hero.is-covered .hm-routes { filter: drop-shadow(0 0 5px rgba(61, 123, 255, 0.5)); }

.hm-stop__halo { fill: rgba(110, 159, 255, 0.18); transform-box: fill-box; transform-origin: center; transition: transform 650ms var(--ease), opacity 650ms var(--ease); }
.hm-stop__dot { fill: var(--white); stroke: none; transition: fill var(--t-med) var(--ease); }
.js .hm-stop:not(.is-lit) .hm-stop__halo { transform: scale(0.2); opacity: 0; }
.js .hm-stop:not(.is-lit) .hm-stop__dot { fill: rgba(160, 184, 226, 0.5); }

.hm-head { opacity: 0; transition: opacity 240ms var(--ease); }
.hm-head.is-moving { opacity: 1; }
.hm-head > circle { transform: scale(var(--hs, 1)); transform-box: fill-box; transform-origin: center; }
.hm-head__halo { fill: rgba(110, 159, 255, 0.3); }
.hm-head__dot { fill: var(--white); }

.hm-depot__ring { fill: rgba(110, 159, 255, 0.07); stroke: rgba(110, 159, 255, 0.34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hm-depot__base { fill: var(--white); }
.hm-depot__core { fill: var(--blue); }

/* hover isolation (desktop) */
.hm-line, .hm-stop, .hm-area { transition: opacity var(--t-med) var(--ease), stroke var(--t-med) var(--ease), fill-opacity 1100ms var(--ease); }
.hero.is-focus .hm-route:not(.is-hover) .hm-line { opacity: 0.28; }
.hero.is-focus .hm-route:not(.is-hover) .hm-stop { opacity: 0.35; }
.hero.is-focus .hm-route:not(.is-hover) .hm-area { fill-opacity: 0.02; }
.hero.is-focus .hm-route.is-hover .hm-line { stroke: #C4D7FF; }
.hero.is-focus .hm-route.is-hover .hm-area { fill-opacity: 0.16; }
.hero.is-focus .hm-route.is-hover .hm-stop__halo { transform: scale(1.3); }
.hero__inner, .hero__proof { pointer-events: none; }
.hero__copy, .hero__proof li { pointer-events: auto; }

/* depot label: where the routes start, then that they are covered */
.hm-tag {
  position: absolute; left: 0; top: 0; display: none;
  font-size: 0.8125rem; font-weight: 520; line-height: 1.35; letter-spacing: 0.003em;
  white-space: nowrap;
}
.js .hm-tag.is-placed { display: grid; justify-items: start; gap: 3px; }
.hm-tag__place { color: var(--ice); }
.hm-tag.is-compact .hm-tag__place { display: none; }
.hm-tag__state { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 580; }
.hm-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ready); box-shadow: 0 0 0 3px rgba(65, 201, 142, 0.18); }
.js .hm-tag__state { opacity: 0; transform: translateY(-4px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .hero.is-covered .hm-tag__state { opacity: 1; transform: none; }

.hero__inner {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--hd-h) + clamp(40px, 6vh, 88px));
  padding-bottom: clamp(48px, 7vh, 88px);
}
.hero__copy { max-width: 740px; }
.hero__kicker {
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.002em;
  color: var(--mist); margin-bottom: clamp(18px, 2.4vh, 28px);
}
.hero__title {
  font-size: var(--fs-display); line-height: 0.93; font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.042em;
  color: var(--white);
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.07em; margin-bottom: -0.07em; }
.hero__line > span { display: inline-block; white-space: nowrap; }
.hero__line:last-child > span {
  background: linear-gradient(180deg, #FFFFFF 30%, #CFDDFB 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__desc {
  margin-top: clamp(24px, 3.2vh, 34px); max-width: min(34em, 44vw);
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem); line-height: 1.58;
  color: rgba(214, 226, 247, 0.8); text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 4vh, 40px); }

.hero__proof {
  position: relative; display: flex; gap: clamp(20px, 4vw, 56px);
  padding-top: 22px; padding-bottom: 26px;
  font-size: var(--fs-small); font-weight: 500; color: rgba(225, 234, 250, 0.84);
}
.hero__proof::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--rule-dark); }
.hero__proof li { display: flex; align-items: center; gap: 12px; }

/* a covered stop: the site's mark for "handled" */
.pin { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(110, 159, 255, 0.14); }
.pin--light { background: var(--blue); box-shadow: 0 0 0 3px rgba(47, 102, 224, 0.16); }

/* Load choreography (one sequence) */
.js .hero .hero__line > span { transform: translateY(105%); }
.js .hero .hero__kicker, .js .hero .hero__desc, .js .hero .hero__actions, .js .hero .hero__proof { opacity: 0; transform: translateY(10px); }
.js .hero .hm-depot { opacity: 0; transition: opacity 700ms var(--ease) 300ms; }
.js .hero.is-in .hm-depot { opacity: 1; }
.js .hero.is-in .hero__line > span { transform: none; transition: transform 1100ms var(--ease); }
.js .hero.is-in .hero__line:nth-child(2) > span { transition-delay: 80ms; }
.js .hero.is-in .hero__kicker, .js .hero.is-in .hero__desc, .js .hero.is-in .hero__actions, .js .hero.is-in .hero__proof {
  opacity: 1; transform: none; transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.js .hero.is-in .hero__desc { transition-delay: 220ms; }
.js .hero.is-in .hero__actions { transition-delay: 320ms; }
.js .hero.is-in .hero__proof { transition-delay: 460ms; }
.js .hero:not(.is-run) .hm-line { opacity: 0; }

/* Stacked: tablet portrait and phones get the map as its own band */
@media (max-width: 1023px) {
  .hero { min-height: 0; }
  .hero__inner { order: 1; z-index: 1; padding-top: calc(var(--hd-h) + clamp(32px, 6vw, 72px)); padding-bottom: 0; }
  .hero__map { position: relative; inset: auto; order: 2; z-index: 0; height: clamp(250px, 62vw, 440px); margin-top: clamp(8px, 3vw, 28px); }
  .hero__map::after {
    background:
      linear-gradient(180deg, var(--night) 0%, rgba(5, 14, 34, 0) 22%),
      linear-gradient(0deg, var(--night) 0%, rgba(5, 14, 34, 0) 24%),
      linear-gradient(90deg, var(--night) 0%, rgba(5, 14, 34, 0) 10%, rgba(5, 14, 34, 0) 90%, var(--night) 100%);
  }
  .hero__proof { order: 3; padding-top: 22px; }
  .hero__desc { max-width: 36em; }
  .hero__title { font-size: clamp(3.25rem, 1rem + 6vw, 4.5rem); }
}
@media (max-width: 767px) {
  .hero__kicker { font-size: 0.875rem; max-width: 22em; }
  .hero__title { font-size: clamp(2.25rem, 0.2rem + 10.8vw, 3.6rem); line-height: 0.95; letter-spacing: -0.04em; }
  .hero__desc { font-size: 1.0625rem; line-height: 1.55; }
  .hero__actions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin-top: 28px; }
  .hero__actions .bt { width: 100%; padding: 0 12px; font-size: 0.9375rem; }
  .hero__map { height: clamp(240px, 74vw, 320px); margin-top: 4px; }
  .hm-tag { font-size: 0.75rem; }
  .hm-tag__state { gap: 6px; }
  .hero__proof { flex-direction: column; gap: 12px; padding-top: 22px; padding-bottom: 32px; }
}
@media (max-width: 359px) {
  .hero__actions { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   The shift — challenge to solution
   ========================================================================== */
.shift { position: relative; background: var(--paper); color: var(--ink); }
.shift__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 112px);
  padding-top: var(--sec); padding-bottom: var(--sec);
}
.shift__rail { position: sticky; top: calc(var(--hd-h) + 28px); align-self: start; height: min(calc(100svh - var(--hd-h) - 56px), 700px); }

.board {
  position: relative; height: 100%; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 20px;
  color: var(--white);
  background:
    radial-gradient(90% 60% at 20% 100%, rgba(47, 102, 224, 0.0), rgba(47, 102, 224, 0) 70%),
    linear-gradient(180deg, #0A1A36 0%, var(--night) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 80px -48px rgba(5, 14, 34, 0.55), 0 2px 6px rgba(5, 14, 34, 0.12);
  transition: background var(--t-slow) var(--ease);
}
.board::before {
  /* blue light rises as the route is covered */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 55% at 30% 100%, rgba(47, 102, 224, 0.32), rgba(47, 102, 224, 0) 70%);
  opacity: calc(var(--cov, 0) * 1);
  transition: opacity var(--t-slow) var(--ease);
}
.board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: linear-gradient(rgba(150, 178, 232, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 178, 232, 0.05) 1px, transparent 1px);
  background-size: 44px 44px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 85%);
  mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 85%);
}
.board > * { position: relative; z-index: 1; }
.board__head, .board__foot { position: relative; height: 22px; font-size: 0.875rem; font-weight: 560; letter-spacing: 0.003em; }
.board__state, .board__result { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px; transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.board__state--off, .board__result--off { color: var(--mist); }
.board__state--on, .board__result--on { color: var(--white); opacity: 0; transform: translateY(6px); }
.board.is-on .board__state--off, .board.is-done .board__result--off { opacity: 0; transform: translateY(-6px); }
.board.is-on .board__state--on, .board.is-done .board__result--on { opacity: 1; transform: none; }
.board__focus { display: inline-flex; align-items: center; gap: 10px; transition: opacity 160ms var(--ease); }
.board__focus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mist); }
.board__focus.is-swap { opacity: 0; }
.board__ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ready); box-shadow: 0 0 0 4px rgba(65, 201, 142, 0.16); }

.board__route { position: relative; display: grid; place-items: center; min-height: 0; padding: 20px 0; }
.board__map--v { width: 100%; height: 100%; max-width: 420px; overflow: visible; }
.board__map--h, .board__dots { display: none; }
.bm-track { fill: none; stroke: rgba(160, 184, 226, 0.36); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.bm-line { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(61, 123, 255, 0.6)); transition: stroke-dashoffset 760ms var(--ease-in-out); }
.bm-origin { fill: var(--white); }
.bm-stop__halo { fill: rgba(110, 159, 255, 0.16); transform-box: fill-box; transform-origin: center; transition: transform 600ms var(--ease), opacity 600ms var(--ease); }
.bm-stop__dot { fill: var(--white); stroke: var(--signal); stroke-width: 3; transition: fill var(--t-med) var(--ease), stroke var(--t-med) var(--ease), transform var(--t-med) var(--ease); transform-box: fill-box; transform-origin: center; }

/* JS: route starts uncovered and closes with the reader */
.js .bm-line:not(.is-closed) { stroke-dashoffset: 1; }
.js .bm-stop:not(.is-closed) .bm-stop__halo { transform: scale(0); opacity: 0; }
.js .bm-stop:not(.is-closed) .bm-stop__dot { fill: var(--night); stroke: rgba(160, 184, 226, 0.5); }
.js .bm-stop.is-active:not(.is-closed) .bm-stop__dot { stroke: var(--white); transform: scale(1.25); }
.js .bm-stop.is-active:not(.is-closed) .bm-stop__halo { transform: scale(1.2); opacity: 1; fill: rgba(195, 213, 247, 0.12); }

.shift__body { min-width: 0; }

.plist { margin-top: clamp(40px, 5vw, 64px); counter-reset: none; }
.plist__item {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px 40px;
  padding: 24px 0 26px; border-top: 1px solid var(--rule);
}
.plist__item:last-child { border-bottom: 1px solid var(--rule); }
.plist__title {
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em;
  display: flex; gap: 14px; align-items: baseline;
}
.plist__title::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px);
  box-shadow: inset 0 0 0 1.5px #A3B0C4; transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.plist__item.is-active .plist__title::before { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(10, 26, 51, 0.08); }
.plist__item p { color: var(--slate); font-size: 1rem; line-height: 1.6; }

.solution { margin-top: clamp(104px, 11vw, 176px); }
.label--on { color: var(--blue); }
.statement {
  font-size: var(--fs-statement); line-height: 0.96; font-weight: 610;
  font-variation-settings: "wdth" 92; letter-spacing: -0.04em; color: var(--ink);
}
.statement span { display: block; }
.solution .lede--lg { margin-top: 30px; }
.slist { margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3.4vw, 56px); }
.slist__item { position: relative; padding: 26px 0 30px; border-top: 1px solid var(--rule); }
.slist__item::before {
  /* covered: a short blue segment along the rule */
  content: ""; position: absolute; top: -1px; left: 0; width: 36px; height: 2px; background: var(--blue);
  transform-origin: left; transition: width var(--t-med) var(--ease);
}
.slist__item:hover::before { width: 72px; }
.slist__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.slist__item p { margin-top: 8px; color: var(--slate); font-size: 1rem; line-height: 1.6; }

@media (max-width: 1023px) {
  .shift__inner { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .shift__rail {
    position: sticky; top: var(--hd-h); z-index: 5; height: auto;
    margin-inline: calc(var(--gutter) * -1);
  }
  .board {
    height: auto; border-radius: 0; padding: 14px var(--gutter) 14px;
    grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 10px 16px; align-items: center;
    box-shadow: 0 10px 30px -18px rgba(5, 14, 34, 0.6);
  }
  .board::after { display: none; }
  .board__head { grid-column: 1; grid-row: 1; height: 18px; font-size: 0.8125rem; min-width: 11.5em; }
  .board__foot { grid-column: 2; grid-row: 1; height: 18px; font-size: 0.8125rem; justify-self: end; min-width: 8.5em; text-align: right; }
  .board__foot .board__result { left: auto; right: 0; }
  .board__route { grid-column: 1 / -1; grid-row: 2; padding: 0; height: 22px; display: block; }
  .board__map--v { display: none; }
  .board__map--h { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .board__map--h .bm-track, .board__map--h .bm-line { vector-effect: non-scaling-stroke; }
  .board__map--h .bm-line { stroke-width: 2.5; filter: none; }
  .board__dots { display: flex; justify-content: space-between; position: absolute; inset: 0; align-items: center; padding: 0 calc(10 / 360 * 100% - 6px); }
  .board__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 2px rgba(160, 184, 226, 0.55); transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
  .board__dot--origin { border-radius: 3px; background: var(--white); box-shadow: none; }
  .board__dot.is-closed { background: var(--white); box-shadow: inset 0 0 0 2.5px var(--signal), 0 0 0 4px rgba(110, 159, 255, 0.18); }
  .board__dot.is-active:not(.is-closed) { box-shadow: inset 0 0 0 2px var(--white); transform: scale(1.2); }
  html:not(.js) .board__dot:not(.board__dot--origin) { background: var(--white); box-shadow: inset 0 0 0 2.5px var(--signal); }
  .shift__body { padding-top: clamp(56px, 9vw, 88px); }
}
@media (min-width: 1024px) and (max-width: 1239px) {
  .plist__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plist__item p { padding-left: 23px; }
}
@media (max-width: 767px) {
  .plist__item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0 20px; }
  .plist__item p { font-size: 0.9375rem; }
  .slist__item { padding: 18px 0 22px; }
  .slist__item p { font-size: 0.9375rem; }
  .plist__item p { padding-left: 23px; }
  .slist { grid-template-columns: minmax(0, 1fr); }
  .solution { margin-top: 88px; }
  .statement { font-size: max(2.125rem, min(calc((100vw - 40px) / 8.9), 3.25rem)); }
}

/* ==========================================================================
   How it works
   ========================================================================== */
.process { background: var(--white); padding-block: var(--sec); }
.process__head { max-width: 720px; }
.steps {
  --p: 0;
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(56px, 6vw, 88px); padding-top: 52px;
}
.steps::before, .steps::after {
  content: ""; position: absolute; top: 7px; left: 7px; right: 0; height: 2px; border-radius: 2px;
}
.steps::before { background: repeating-linear-gradient(90deg, #B9C4D6 0 2px, transparent 2px 10px); }
.steps::after { background: var(--blue); transform-origin: left; transform: scaleX(var(--p)); transition: transform 1600ms var(--ease-in-out); }
.js .steps:not(.is-drawn) { --p: 0; }
.steps.is-drawn, html:not(.js) .steps { --p: 1; }
.steps__item { position: relative; }
.steps__node {
  position: absolute; top: -52px; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); box-shadow: inset 0 0 0 2px #B9C4D6;
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.steps.is-drawn .steps__node, html:not(.js) .steps__node { box-shadow: inset 0 0 0 4px var(--blue); }
.steps__item:nth-child(1) { --d: 0; }
.steps__item:nth-child(2) { --d: 420; }
.steps__item:nth-child(3) { --d: 840; }
.steps__item:nth-child(4) { --d: 1260; }
.steps__item:hover .steps__node { transform: scale(1.25); background: var(--blue); box-shadow: inset 0 0 0 4px var(--blue), 0 0 0 6px rgba(47, 102, 224, 0.12); transition-delay: 0ms; }
.steps__no {
  display: block; margin-bottom: 18px;
  font-size: clamp(2.75rem, 1.8rem + 2.2vw, 4.25rem); line-height: 0.9; font-weight: 250;
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.steps__item:hover .steps__no { color: var(--blue); }
.steps__no { transition: color var(--t-med) var(--ease); }
.steps__title { font-size: 1.375rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.018em; font-variation-settings: "wdth" 96; }
.steps__item p { margin-top: 12px; color: var(--slate); font-size: 1rem; line-height: 1.6; max-width: 26em; }

@media (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; row-gap: 48px; }
  .steps::before, .steps::after { display: none; }
  .steps__node { position: relative; top: 0; margin-bottom: 22px; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 36px; margin-top: 48px; }
  .steps::before, .steps::after { display: block; top: 8px; bottom: 32px; left: 7px; right: auto; width: 2px; height: auto; }
  .steps::before { background: repeating-linear-gradient(180deg, #B9C4D6 0 2px, transparent 2px 10px); }
  .steps::after { transform-origin: top; transform: scaleY(var(--p)); }
  .steps__item { padding-bottom: 32px; }
  .steps__no { font-size: 2.5rem; margin-bottom: 10px; }
  .steps__item:last-child { padding-bottom: 0; }
  .steps__node { position: absolute; top: 2px; left: -36px; margin: 0; }
  .steps__no { margin-bottom: 8px; }
}

/* ==========================================================================
   Estimator
   ========================================================================== */
.est { position: relative; isolation: isolate; overflow: clip; background: var(--night); color: var(--white); padding-block: var(--sec); }
.est__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(47, 102, 224, 0.2), rgba(47, 102, 224, 0) 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(11, 50, 89, 0.55), rgba(11, 50, 89, 0) 70%);
}
.est__head { max-width: 760px; }
.est__grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 88px); align-items: start;
  margin-top: clamp(48px, 5.5vw, 80px);
}

/* Controls */
.est__form { min-width: 0; }
.est__primary { margin: 0; padding: 0; border: 0; display: grid; gap: 30px; }
.ctl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ctl__label { font-size: var(--fs-small); font-weight: 500; color: var(--ice); }
.ctl__val { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--white); }

.ctl__range {
  --pct: 0%;
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  touch-action: pan-y;
}
.ctl__range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--signal) 0 var(--pct), rgba(195, 213, 247, 0.14) var(--pct) 100%);
}
.ctl__range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(195, 213, 247, 0.14); }
.ctl__range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--signal); }
.ctl__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 50% 35%, #FFFFFF 0 55%, #E6EDFA 100%);
  box-shadow: 0 0 0 1px rgba(5, 14, 34, 0.25), 0 4px 10px rgba(3, 10, 28, 0.5), 0 0 0 0 rgba(110, 159, 255, 0.35);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ctl__range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: #FFFFFF; box-shadow: 0 0 0 1px rgba(5, 14, 34, 0.25), 0 4px 10px rgba(3, 10, 28, 0.5);
}
.ctl__range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(5, 14, 34, 0.25), 0 4px 10px rgba(3, 10, 28, 0.5), 0 0 0 7px rgba(110, 159, 255, 0.16); }
.ctl__range:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 1px rgba(5, 14, 34, 0.25), 0 6px 14px rgba(3, 10, 28, 0.5), 0 0 0 10px rgba(110, 159, 255, 0.18); }
.ctl__range:focus-visible { outline: none; }
.ctl__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--signal), 0 4px 10px rgba(3, 10, 28, 0.5); }
.ctl__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--signal); }

.days { position: relative; }
.days__input, .num input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; border: 0;
  background: rgba(195, 213, 247, 0.05); box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.16);
  color: var(--white); font-size: 1rem; font-variant-numeric: tabular-nums;
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.days__input:focus-visible, .num input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--signal), 0 0 0 3px rgba(110, 159, 255, 0.25); background: rgba(195, 213, 247, 0.08); }
.js .days__input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.days__picks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 4px; border-radius: 12px; background: rgba(195, 213, 247, 0.05); box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.14); }
.js .days__picks[hidden] { display: grid; }
html:not(.js) .days__picks { display: none; }
.days__pick { position: relative; display: block; cursor: pointer; }
.days__pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.days__pick span {
  display: grid; place-items: center; height: 40px; border-radius: 9px;
  font-size: 1rem; font-weight: 520; font-variant-numeric: tabular-nums; color: var(--ice);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.days__picks { position: relative; isolation: isolate; }
.days__thumb { display: none; }
.days__pick:hover span { color: var(--white); background: rgba(195, 213, 247, 0.06); }
.num input:hover, .days__input:hover { box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.3); }
/* a single sliding selection where :has() is available */
@supports selector(:has(*)) {
  .days__thumb { display: block; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 7); border-radius: 9px; background: var(--white); box-shadow: 0 1px 2px rgba(3, 10, 28, 0.4), 0 6px 14px -8px rgba(3, 10, 28, 0.6); transform: translateX(calc(var(--d, 4) * 100%)); transition: transform 320ms var(--ease); }
  .days__picks:has(input[value="1"]:checked) { --d: 0; } .days__picks:has(input[value="2"]:checked) { --d: 1; }
  .days__picks:has(input[value="3"]:checked) { --d: 2; } .days__picks:has(input[value="4"]:checked) { --d: 3; }
  .days__picks:has(input[value="5"]:checked) { --d: 4; } .days__picks:has(input[value="6"]:checked) { --d: 5; }
  .days__picks:has(input[value="7"]:checked) { --d: 6; }
  .days__pick input:checked + span { background: transparent; box-shadow: none; }
}
.days__pick input:checked + span { color: var(--night); background: var(--white); box-shadow: 0 1px 2px rgba(3, 10, 28, 0.4), 0 6px 14px -8px rgba(3, 10, 28, 0.6); font-weight: 600; }
.days__pick input:active + span { transform: scale(0.96); }
.days__pick input:focus-visible + span { box-shadow: 0 0 0 2px var(--signal); }

.est__more { margin-top: 36px; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
.est__more-sum {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none; border-radius: 4px;
  font-size: 1rem; font-weight: 560; color: var(--white);
}
.est__more-sum::-webkit-details-marker { display: none; }
.est__more-hint { font-size: 0.875rem; font-weight: 450; color: var(--mist); }
.est__more-icon { position: relative; width: 14px; height: 14px; }
.est__more-icon::before, .est__more-icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.75px; border-radius: 2px; background: var(--ice); transition: transform var(--t-med) var(--ease); }
.est__more-icon::after { transform: rotate(90deg); }
.est__more[open] .est__more-icon::after { transform: rotate(0deg); }
.est__more-body { padding: 4px 0 28px; display: grid; gap: 28px; }
.nums { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
.nums__legend { grid-column: 1 / -1; padding: 0; margin-bottom: 12px; font-size: 0.8125rem; font-weight: 600; color: var(--signal); letter-spacing: 0.01em; }
.num { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.num label { font-size: 0.8125rem; font-weight: 500; color: var(--ice); line-height: 1.3; }
.nums__note { grid-column: 1 / -1; font-size: 0.8125rem; line-height: 1.55; color: var(--mist); }

/* Readout */
.readout {
  position: relative; min-width: 0;
  padding: clamp(28px, 3.2vw, 48px);
  border-radius: 20px;
  background: #0A1730;
  box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.readout__title { font-size: 1rem; font-weight: 560; color: var(--ice); letter-spacing: -0.003em; }
.readout__totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-top: 28px; padding-bottom: 28px; }
.readout__k { display: block; font-size: 0.875rem; font-weight: 500; color: var(--mist); margin-bottom: 6px; }
.readout__big {
  display: block; font-size: clamp(3.25rem, 1.6rem + 4.2vw, 6rem); line-height: 0.95; font-weight: 300;
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 100;
  color: var(--white);
}
.readout__daily { text-align: right; }
.readout__mid { display: block; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1; font-weight: 350; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--white); }

.mix { display: flex; gap: 3px; height: 8px; margin-bottom: 8px; }
.mix__seg { flex: var(--w, 1) 1 0; min-width: 4px; border-radius: 3px; transition: flex-grow 500ms var(--ease); }
.mix__seg--0, .rows__key--0::before { background: #7AA6FF; }
.mix__seg--1, .rows__key--1::before { background: #B4CBF7; }
.mix__seg--2, .rows__key--2::before { background: #4472DA; }
.mix__seg--3, .rows__key--3::before { background: #8AA0C6; }
.mix__seg--4, .rows__key--4::before { background: #2F4F92; }

.rows { margin-top: 8px; }
.rows__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-dark); font-size: 0.9375rem; }
.rows__key { display: inline-flex; align-items: center; gap: 12px; color: var(--ice); }
.rows__key::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.rows__val { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--white); }
.readout__act { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 32px; }
.readout__note { margin-top: 22px; font-size: 0.8125rem; line-height: 1.55; color: var(--mist); max-width: 40em; }

@media (max-width: 1023px) {
  .est__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .est__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .readout { display: contents; }
  .readout__title { display: none; }
  .readout__totals {
    order: -1; position: sticky; top: var(--hd-h); z-index: 4;
    margin: 0 calc(var(--gutter) * -1) 32px; padding: 12px var(--gutter) 13px;
    background: rgba(5, 14, 34, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: inset 0 -1px 0 var(--rule-dark), inset 0 1px 0 var(--rule-dark);
    gap: 12px;
  }
  .readout__big { font-size: clamp(2.125rem, 0.6rem + 7.4vw, 2.75rem); }
  .readout__mid { font-size: 1.5rem; }
  .readout__k { font-size: 0.75rem; margin-bottom: 3px; }
  .mix { margin-top: 32px; }
  .mix { margin-top: 40px; }
  .readout__act { flex-direction: column; align-items: stretch; }
  .readout__act .bt--primary { width: 100%; }
  .readout__act .bt--quiet-dark { align-self: flex-start; }
  .nums { grid-template-columns: minmax(0, 1fr); }
  .est__more-sum { grid-template-columns: 1fr auto; row-gap: 4px; }
  .est__more-hint { grid-column: 1; grid-row: 2; }
  .est__more-icon { grid-column: 2; grid-row: 1 / span 2; }
}

/* ==========================================================================
   Reliability & compliance — a specification sheet, the page's quiet rest
   ========================================================================== */
.ops { background: var(--white); padding-block: var(--sec); }
.ops__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 112px); align-items: end; }
.ops__head .lede { margin-top: 0; }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 88px); margin-top: clamp(48px, 5vw, 72px); }
.spec__label {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px; border-bottom: 2px solid var(--ink);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.002em; color: var(--ink);
}
.spec__row { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.spec__row dt { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.spec__row dd { margin-top: 8px; color: var(--slate); font-size: 1rem; line-height: 1.6; max-width: 34em; }
@media (max-width: 1023px) {
  .ops__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .spec { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
  .spec__row { padding: 18px 0 20px; }
}

/* ==========================================================================
   Industries — the automotive origin, extended along the same route
   ========================================================================== */
.ind { background: var(--paper); padding-block: var(--sec); }
.ind__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 112px); align-items: end; }
.ind__head .lede { margin-top: 0; }
.ind__map {
  position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(64px, 9vw, 152px); align-items: center;
  margin-top: clamp(48px, 5.5vw, 80px);
}
.ind__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ind__paths .br-track { fill: none; stroke: #AFBBD0; stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
.ind__paths .br-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1200ms var(--ease-in-out); transition-delay: calc(var(--i, 0) * 140ms); }
.ind__map.is-drawn .br-line, html:not(.js) .br-line { stroke-dashoffset: 0; }
.ind__map.is-settled .br-line { transition: none; }

.origin {
  position: relative; z-index: 1;
  padding: clamp(32px, 3.6vw, 52px);
  border-radius: 20px; color: var(--white);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(62, 118, 242, 0.28), rgba(62, 118, 242, 0) 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #051A36 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -56px rgba(5, 26, 54, 0.85);
}
.origin__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.origin__title { font-size: clamp(1.875rem, 1.2rem + 1.7vw, 2.625rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.032em; font-variation-settings: "wdth" 94; max-width: 11em; text-wrap: balance; }
.origin__years { flex: none; display: grid; justify-items: end; text-align: right; gap: 6px; margin-top: -4px; }
.origin__num { font-size: clamp(2.75rem, 1.8rem + 2.2vw, 4rem); line-height: 0.85; font-weight: 250; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--white); }
.origin__cap { max-width: 9.5em; font-size: 0.8125rem; line-height: 1.35; font-weight: 500; color: var(--ice); }
.origin__desc { margin-top: 22px; color: var(--ice); font-size: 1.0625rem; line-height: 1.6; max-width: 36em; }
.origin__list { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.origin__list li { padding-top: 18px; border-top: 1px solid rgba(195, 213, 247, 0.18); }
.origin__list h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.origin__list p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--ice); }
.origin__port {
  position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--white); box-shadow: inset 0 0 0 4px var(--blue), 0 0 0 6px rgba(47, 102, 224, 0.12);
}

.ext { position: relative; z-index: 1; }
.ext__lead {
  display: flex; align-items: center; gap: 14px; padding-bottom: 18px;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink);
}
.ext__lead .pin { margin-left: -2px; }
.ext__list { display: grid; }
.ext__item { position: relative; padding: 20px 0 22px 28px; border-top: 1px solid var(--rule); }
.ext__item::before {
  content: ""; position: absolute; left: -4px; top: 27px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px rgba(47, 102, 224, 0.14);
}
.ext__item h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
.ext__item p { margin-top: 6px; color: var(--slate); font-size: 1rem; line-height: 1.58; }

@media (max-width: 1023px) {
  .ind__head { grid-template-columns: minmax(0, 1fr); }
  .ind__map { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ind__lines, .origin__port { display: none; }
  .ext { padding-left: 22px; margin-left: 4px; background: linear-gradient(var(--blue), var(--blue)) 0 10px / 2px calc(100% - 44px) no-repeat; }
  .ext__lead { padding-bottom: 14px; }
  .ext__lead .pin { position: absolute; left: -4px; top: 9px; margin: 0; }
  .ext__item { border-top: 0; padding: 14px 0 16px; }
  .ext__item::before { left: -26px; top: 20px; }
}
@media (max-width: 767px) {
  .origin { margin-inline: calc(var(--gutter) * -0.4); border-radius: 18px; padding: 28px 24px 30px; }
  .origin__top { flex-direction: column-reverse; gap: 18px; }
  .origin__years { justify-items: start; text-align: left; grid-template-columns: auto 1fr; align-items: end; gap: 12px; }
  .origin__num { font-size: 2.75rem; }
  .origin__cap { max-width: 12em; }
  .origin__desc { font-size: 1rem; margin-top: 16px; }
  .origin__list { grid-template-columns: minmax(0, 1fr); margin-top: 22px; gap: 16px; }
  .origin__list li { padding-top: 14px; }
}

/* ==========================================================================
   Close + footer — the coverage story resolves
   ========================================================================== */
.close { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--white); padding-top: clamp(112px, 12vw, 184px); padding-bottom: clamp(96px, 10vw, 152px); }
.close::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(45% 70% at 74% 50%, rgba(47, 102, 224, 0.2), rgba(47, 102, 224, 0) 70%);
}
/* the route arrives from the section above and stops at the call to action */
.close__line { position: absolute; top: 0; left: calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 7px); width: 2px; height: clamp(64px, 7vw, 108px); }
.close__trace { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(110, 159, 255, 0), var(--signal)); transform-origin: top; transition: transform 1000ms var(--ease-in-out); }
.close__node { position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 4px var(--signal), 0 0 0 7px rgba(110, 159, 255, 0.14); transition: transform 600ms var(--ease) 800ms, opacity 600ms var(--ease) 800ms; }
.js .close:not(.is-drawn) .close__trace { transform: scaleY(0); }
.js .close:not(.is-drawn) .close__node { transform: scale(0.4); opacity: 0; }

/* the hero's routes return, every territory covered */
.close__map { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 58%), linear-gradient(0deg, transparent 0%, #000 18%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 34%, #000 58%); }
.close__map .hm { width: 100%; height: 100%; }
.close__map .hm-head, .close__map .hm-pool, .close__map .hm-hit { display: none; }
.close__map .hm-routes { filter: none; }

.close__inner { position: relative; }
.close__title { font-size: clamp(2.5rem, 0.6rem + 4.4vw, 4.75rem); line-height: 0.98; font-weight: 610; letter-spacing: -0.04em; font-variation-settings: "wdth" 92; max-width: 9.5em; text-wrap: balance; }
.close__desc { margin-top: 24px; max-width: 30em; font-size: var(--fs-lede); line-height: 1.55; color: var(--ice); text-wrap: pretty; }
.close__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
@media (max-width: 767px) {
  .close { padding-top: 0; padding-bottom: 72px; }
  .close__line { display: none; }
  .close__map { position: relative; inset: auto; height: clamp(220px, 64vw, 280px); margin-bottom: 8px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); }
  html:not(.js) .close { padding-top: 88px; }
  .close__title { font-size: clamp(2.25rem, 0.4rem + 8.8vw, 3rem); }
  .close__act { flex-direction: column; align-items: stretch; margin-top: 32px; }
}

.ft { background: var(--night); color: var(--white); padding-bottom: 36px; }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 56px; border-top: 1px solid var(--rule-dark); }
.ft__logo { display: inline-block; border-radius: 6px; }
.ft__logo img { height: 40px; width: auto; }
.ft__desc { margin-top: 18px; max-width: 24em; font-size: var(--fs-small); line-height: 1.6; color: var(--ice); }
.ft__addr { margin-top: 10px; font-size: 0.875rem; color: var(--mist); }
.ft__title { font-size: 0.8125rem; font-weight: 600; color: var(--mist); letter-spacing: 0.01em; margin-bottom: 16px; }
.ft__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ft__links a { font-size: var(--fs-small); color: rgba(225, 234, 250, 0.8); border-radius: 3px; padding: 2px 0; transition: color var(--t-fast) var(--ease); }
.ft__links a:hover { color: var(--white); }
.ft__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule-dark); font-size: 0.8125rem; color: var(--mist); }
@media (max-width: 1023px) { .ft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-top: 44px; }
  .ft__col:last-child { grid-column: 1 / -1; }
  .ft__bottom { margin-top: 40px; flex-direction: column; }
}

/* ==========================================================================
   Page system — shared by every page beyond the homepage
   ========================================================================== */

/* Page header: one statement, set large; dark for story pages, light for task pages */

/* Sections */
.sec { position: relative; isolation: isolate; padding-block: var(--sec); }
.sec--white { background: var(--white); }
.sec--paper { background: var(--paper); }

.split-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 112px); align-items: end; }
.split-head .lede { margin-top: 0; }
@media (max-width: 1023px) { .split-head { grid-template-columns: minmax(0, 1fr); } }

/* Marks: a short route segment over each item — dotted while a problem, drawn once handled */
.marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 3.6vw, 56px); margin-top: clamp(48px, 5vw, 72px); }
.marks__item { position: relative; padding: 34px 0 34px; border-top: 1px solid var(--rule); }
.marks__item::before, .marks__item::after { content: ""; position: absolute; top: -5px; }

.marks--on .marks__item { border-top-color: var(--rule-dark); }
.marks--on .marks__item::before { left: 0; top: -1px; width: 56px; height: 2px; background: var(--signal); transform-origin: left; transition: transform 700ms var(--ease-in-out); transition-delay: calc(var(--n, 0) * 90ms); }
.marks--on .marks__item::after { left: 56px; width: 9px; height: 9px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(110, 159, 255, 0.18); transition: transform 400ms var(--ease), opacity 400ms var(--ease); transition-delay: calc(var(--n, 0) * 90ms + 520ms); }
.js .marks--on:not(.is-drawn) .marks__item::before { transform: scaleX(0); }
.js .marks--on:not(.is-drawn) .marks__item::after { transform: scale(0.3); opacity: 0; }
.marks__item:nth-child(2) { --n: 1; } .marks__item:nth-child(3) { --n: 2; } .marks__item:nth-child(4) { --n: 3; }
.marks__item:nth-child(5) { --n: 4; } .marks__item:nth-child(6) { --n: 5; }
.marks__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.marks__item p { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--slate); max-width: 30em; }
.marks--on .marks__item p { color: var(--ice); }
@media (max-width: 1023px) { .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .marks { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .marks__item { padding: 26px 0 26px; }
  .marks__item p { font-size: 0.9375rem; }
}

/* A specification without groups */
.spec--flat { margin-top: clamp(40px, 4.5vw, 64px); }
.spec--flat .spec__row { border-top: 1px solid var(--rule); border-bottom: 0; }
.spec--flat .spec__row:nth-last-child(-n + 2) { border-bottom: 1px solid var(--rule); }
@media (max-width: 767px) { .spec--flat { gap: 0; } .spec--flat .spec__row:nth-last-child(2) { border-bottom: 0; } }

/* Close without the map reprise */
.close--plain::before { background: radial-gradient(45% 80% at 20% 0%, rgba(47, 102, 224, 0.24), rgba(47, 102, 224, 0) 70%); }
@media (max-width: 767px) { .close--plain { padding-top: 88px; } }

/* ==========================================================================
   About
   ========================================================================== */
.lineage { --p: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 5.5vw, 80px); padding-top: 40px; }
.lineage::before, .lineage::after { content: ""; position: absolute; top: 7px; left: 7px; right: 0; height: 2px; }
.lineage::before { background: repeating-linear-gradient(90deg, #A8B4C8 0 2px, transparent 2px 9px); }
.lineage::after { right: calc(33.333% - 16px); background: var(--blue); transform-origin: left; transform: scaleX(var(--p)); transition: transform 1500ms var(--ease-in-out); }
.lineage.is-drawn, html:not(.js) .lineage { --p: 1; }
.lineage__stop { position: relative; display: grid; gap: 6px; }
.lineage__stop::before {
  content: ""; position: absolute; top: -40px; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 2px #A8B4C8;
  transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease); transition-delay: calc(var(--n, 0) * 620ms);
}
.lineage.is-drawn .lineage__stop::before, html:not(.js) .lineage__stop::before { background: var(--white); box-shadow: inset 0 0 0 4px var(--blue); }
.lineage__stop:nth-child(2) { --n: 1; } .lineage__stop:nth-child(3) { --n: 2; }
.lineage__when { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1; font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.lineage__what { font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--slate); max-width: 16em; }

.lead__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 112px); margin-top: clamp(64px, 7vw, 104px); align-items: start; }
.lead__quote { margin: 0; }
.lead__quote blockquote {
  margin: 0; font-size: clamp(1.625rem, 0.95rem + 1.7vw, 2.5rem); line-height: 1.16; font-weight: 520;
  font-variation-settings: "wdth" 96; letter-spacing: -0.024em; color: var(--ink); text-wrap: balance;
}
.lead__quote figcaption { display: grid; gap: 2px; margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--ink); max-width: 18em; }
.lead__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.lead__role { font-size: 0.9375rem; color: var(--slate); }
.lead__bio p { font-size: 1.0625rem; line-height: 1.66; color: var(--slate); max-width: 36em; }
.lead__bio p + p { margin-top: 18px; }

.field { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(40px, 6vw, 112px); margin-top: clamp(64px, 7vw, 104px); padding-top: 28px; border-top: 1px solid #C9D3E1; }

@media (max-width: 1023px) {
  .lead__grid, .field { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .lineage { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .lineage::before, .lineage::after { display: none; }
  /* each stop carries its own leg to the next: dotted, then drawn */
  .lineage__stop { padding: 0 0 28px 36px; background: repeating-linear-gradient(180deg, #A8B4C8 0 2px, transparent 2px 9px) 7px 22px / 2px calc(100% - 22px) no-repeat; }
  .lineage__stop:last-child { padding-bottom: 0; background: none; }
  .lineage__stop::before { top: 4px; left: 0; }
  .lineage__stop:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: 0; width: 2px; background: var(--blue); transform-origin: top; transform: scaleY(var(--p)); transition: transform 600ms var(--ease-in-out); transition-delay: calc(var(--n, 0) * 620ms); }
  .lineage__when { font-size: 1.75rem; }
  .lead__grid { margin-top: 56px; }
  .field { margin-top: 56px; }
  
  
}

/* ==========================================================================
   About — the page is the route: one spine runs through the story
   ========================================================================== */
.ah { position: relative; isolation: isolate; overflow: clip; background: var(--night); color: var(--white); padding-top: calc(var(--hd-h) + clamp(64px, 8vw, 128px)); padding-bottom: clamp(56px, 6vw, 96px); }
.ah__light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 80% at 92% -10%, rgba(47, 102, 224, 0.28), rgba(47, 102, 224, 0) 62%),
    radial-gradient(40% 50% at 0% 100%, rgba(11, 50, 89, 0.6), rgba(11, 50, 89, 0) 70%); }
.ah__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-rows: auto auto; gap: 0 clamp(40px, 6vw, 112px); align-items: end; }
.ah__top .label { grid-column: 1 / -1; }
.ah__title { font-size: clamp(2.75rem, 0.1rem + 6.4vw, 6.5rem); line-height: 0.93; font-weight: 600; font-variation-settings: "wdth" 92; letter-spacing: -0.045em; color: var(--white); max-width: 9.5em; text-wrap: balance; }
.ah__intro { padding-bottom: 0.4em; font-size: var(--fs-lede); line-height: 1.6; color: var(--ice); max-width: 30em; text-wrap: pretty; }

.lineage--dark { margin-top: clamp(64px, 8vw, 128px); padding-top: 44px; }
.lineage--dark::before { background: repeating-linear-gradient(90deg, rgba(160, 184, 226, 0.4) 0 2px, transparent 2px 9px); }
.lineage--dark::after { background: var(--signal); }
.lineage--dark .lineage__stop::before { top: -44px; background: var(--night); box-shadow: inset 0 0 0 2px rgba(160, 184, 226, 0.5); }
.lineage--dark.is-drawn .lineage__stop::before, html:not(.js) .lineage--dark .lineage__stop::before { background: var(--white); box-shadow: inset 0 0 0 4px var(--signal), 0 0 0 6px rgba(110, 159, 255, 0.14); }
.lineage--dark .lineage__when { font-size: clamp(2.5rem, 1.4rem + 2.8vw, 4.5rem); font-weight: 250; letter-spacing: -0.05em; color: var(--white); }
.lineage--dark .lineage__what { margin-top: 6px; color: var(--ice); }
.js .lineage--dark .lineage__stop { opacity: 0.35; transition: opacity 700ms var(--ease); transition-delay: calc(var(--n, 0) * 620ms); }
.js .lineage--dark.is-drawn .lineage__stop { opacity: 1; }

/* the spine */
.story { --pad: clamp(72px, 9vw, 136px); --sp: 0; position: relative; }
html:not(.js) .story { --sp: 1; }
.story__spine {
  position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; width: 2px;
  left: calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 7px);
  background: repeating-linear-gradient(180deg, rgba(138, 154, 178, 0.55) 0 2px, transparent 2px 9px);
}
.story__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--blue), var(--signal)); transform-origin: top; transform: scaleY(var(--sp)); }
.chap { position: relative; isolation: isolate; padding-block: var(--sec); }
.chap--paper { background: var(--paper); }
.chap--white { background: var(--white); }
.chap--night, .chap--turn { background: var(--night); color: var(--white); }
.chap__in { position: relative; padding-left: var(--pad); }
.chap__k { position: relative; display: flex; align-items: center; min-height: 22px; margin-bottom: 26px; font-size: var(--fs-label); font-weight: 560; color: var(--blue); }
.chap__k--dark { color: var(--signal); }
.chap__node { position: absolute; left: calc(var(--pad) * -1); top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px #A8B4C8; transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.chap--night .chap__node, .chap--turn .chap__node { background: var(--night); box-shadow: inset 0 0 0 2px rgba(160, 184, 226, 0.55); }
.chap__k.is-lit .chap__node, html:not(.js) .chap__node { background: var(--white); box-shadow: inset 0 0 0 4px var(--blue), 0 0 0 7px rgba(47, 102, 224, 0.12); }
.chap--night .chap__k.is-lit .chap__node { box-shadow: inset 0 0 0 4px var(--signal), 0 0 0 7px rgba(110, 159, 255, 0.16); }
.chap__node--depot { left: calc(var(--pad) * -1 - 5px); width: 26px; height: 26px; margin-top: -13px; border-radius: 7px; display: grid; place-items: center; }
.chap__node--depot span { width: 10px; height: 10px; border-radius: 2.5px; background: rgba(160, 184, 226, 0.6); transition: background-color var(--t-med) var(--ease); }
.chap__k.is-lit .chap__node--depot { background: var(--white); box-shadow: 0 0 0 9px rgba(110, 159, 255, 0.14), 0 0 32px rgba(110, 159, 255, 0.45); }
.chap__k.is-lit .chap__node--depot span { background: var(--blue); }
.chap__head .lede { max-width: 36em; }

/* chapter 1 */
.chap--paper .lead__grid { margin-top: clamp(56px, 6vw, 88px); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chap--paper .lead__quote blockquote { font-size: clamp(1.75rem, 0.9rem + 2vw, 2.875rem); line-height: 1.12; letter-spacing: -0.028em; }
.chap--paper .lead__quote blockquote::before { content: "“"; display: block; height: 0.55em; margin-bottom: 0.08em; font-size: 2.4em; line-height: 1; font-weight: 300; color: var(--blue); }
.record { margin-top: clamp(56px, 6vw, 88px); padding: clamp(24px, 3vw, 40px); border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1px #E1E7EF, 0 40px 80px -60px rgba(10, 26, 51, 0.45); }
.record__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.record__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.record__meta { font-size: 0.8125rem; font-weight: 560; color: #64748B; }
.record__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.record__list li { display: flex; align-items: baseline; gap: 14px; padding: 17px 0 18px; border-bottom: 1px solid #E5EAF1; font-size: 1.0625rem; font-weight: 520; line-height: 1.4; color: var(--ink); }
.record__list li:nth-last-child(-n + 2) { border-bottom: 0; }
.record__list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(47, 102, 224, 0.14); transform: translateY(-2px); }

/* chapter 2: the gaps */
.gaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 88px); margin-top: clamp(48px, 5vw, 72px); }
.gaps__item { padding: 26px 0 30px; border-top: 1px solid var(--rule); }
.gaps__title { display: flex; align-items: center; gap: 14px; font-size: clamp(1.1875rem, 1.05rem + 0.3vw, 1.375rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.016em; color: var(--ink); }
.gaps__title::before { content: ""; flex: none; width: 34px; height: 9px; background:
    radial-gradient(circle at 29.5px 4.5px, transparent 0 2.5px, #9AA7BC 2.6px 4px, transparent 4.2px),
    repeating-linear-gradient(90deg, #9AA7BC 0 2px, transparent 2px 7px) 0 3.5px / 24px 2px no-repeat; }
.gaps__item p { margin-top: 10px; padding-left: 48px; font-size: 1rem; line-height: 1.62; color: var(--slate); max-width: 32em; }

/* chapter 3: the turn */
.chap--turn { padding-block: clamp(104px, 12vw, 192px) clamp(56px, 6vw, 96px); overflow: clip; }
.turn__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 90% at 15% 0%, rgba(47, 102, 224, 0.26), rgba(47, 102, 224, 0) 70%); }
.turn__statement { max-width: 21em; font-size: clamp(1.875rem, 0.9rem + 2.6vw, 3.5rem); line-height: 1.1; font-weight: 520; font-variation-settings: "wdth" 96; letter-spacing: -0.03em; color: var(--white); text-wrap: balance; }
.chap--night { padding-top: clamp(56px, 6vw, 96px); }
.chap--night .chap__in { padding-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--rule-dark); }

/* chapter 5 */
.proofline { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 56px); margin-top: clamp(40px, 4vw, 56px); font-size: 0.9375rem; font-weight: 520; color: var(--ink); }
.proofline li { display: flex; align-items: center; gap: 12px; }

.close--story .close__line { left: calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 7px); }
.close--story .chap__in { --pad: clamp(72px, 9vw, 136px); }

@media (max-width: 1023px) {
  .ah__top { grid-template-columns: minmax(0, 1fr); }
  .ah__intro { margin-top: 28px; }
  .chap--paper .lead__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .story, .close--story .chap__in { --pad: 34px; }
  .story__spine, .close--story .close__line { left: calc(var(--gutter) - 13px); }
  .chap__node { left: calc(var(--pad) * -1 - 7px); width: 14px; height: 14px; margin-top: -7px; }
  .chap__node--depot { left: calc(var(--pad) * -1 - 11px); width: 22px; height: 22px; margin-top: -11px; }
  .ah { padding-top: calc(var(--hd-h) + 44px); }
  .ah__title { font-size: clamp(2.5rem, 0.2rem + 10.6vw, 3.5rem); }
  .lineage--dark { margin-top: 56px; }
  .lineage--dark .lineage__stop { padding-bottom: 26px; background: repeating-linear-gradient(180deg, rgba(160, 184, 226, 0.4) 0 2px, transparent 2px 9px) 7px 24px / 2px calc(100% - 24px) no-repeat; }
  .lineage--dark .lineage__stop:last-child { background: none; padding-bottom: 0; }
  .lineage--dark .lineage__stop::before { top: 6px; }
  .lineage--dark .lineage__stop:not(:last-child)::after { background: var(--signal); top: 24px; }
  .lineage--dark .lineage__when { font-size: 2.5rem; }
  .gaps { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .gaps__item { padding: 20px 0 22px; }
  .gaps__item p { padding-left: 0; font-size: 0.9375rem; }
  .record { margin-inline: -6px; padding: 22px 18px; }
  .record__list { grid-template-columns: minmax(0, 1fr); }
  .record__list li { font-size: 1rem; padding: 14px 0 15px; }
  .record__list li:nth-last-child(2) { border-bottom: 1px solid #E5EAF1; }
  .turn__statement { font-size: clamp(1.4375rem, 0.6rem + 4vw, 1.875rem); line-height: 1.16; }
  .chap--turn { padding-block: 88px 48px; }
  .proofline { flex-direction: column; }
  .close--story { padding-top: 96px; }
  .close--story .close__line { display: block; height: 72px; }
}

/* ==========================================================================
   Resources — the estimator as a decision tool
   ========================================================================== */

.tool { position: relative; background: var(--night); color: var(--white); padding-bottom: var(--sec); }
.tool > .wrap { position: relative; }
.tool__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(40px, 6vw, 112px); align-items: end; padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--rule-dark); }
.tool__note { padding: 18px 22px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.14); background: rgba(195, 213, 247, 0.03); }
.tool__note p { font-size: 0.9375rem; line-height: 1.55; color: var(--ice); }
.tool__note .tool__note-k { margin-bottom: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--signal); }

.tool__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(40px, 4.5vw, 64px); }
.tool__form { min-width: 0; }

.grp { margin: 0; padding: 26px 0 34px; border: 0; border-top: 1px solid var(--rule-dark); min-width: 0; }
.grp__title { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--white); }
.grp__fields { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; padding-top: 22px; }
.grp__note { grid-column: 1 / -1; margin-top: -6px; font-size: 0.8125rem; line-height: 1.55; color: var(--mist); max-width: 52em; }

.fld { min-width: 0; }
.fld--days { grid-column: 1 / -1; }
.fld__label { display: block; margin-bottom: 9px; font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: var(--ice); }

/* stepper: type directly, or tap / hold − + */
.stp { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; height: 52px; border-radius: 12px; background: rgba(195, 213, 247, 0.05); box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.16); transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.stp:hover { box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.3); }
.stp:focus-within { background: rgba(195, 213, 247, 0.08); box-shadow: inset 0 0 0 1px var(--signal), 0 0 0 3px rgba(110, 159, 255, 0.25); }
.stp__input {
  width: 100%; min-width: 0; height: 100%; padding: 0 8px; border: 0; background: transparent; outline: none;
  font-size: 1.0625rem; font-weight: 520; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-align: left; color: var(--white);
  -moz-appearance: textfield; appearance: textfield;
}
.stp__input::-webkit-outer-spin-button, .stp__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stp[data-pre]::before, .stp[data-unit]::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.9375rem; color: var(--mist); pointer-events: none; }
.stp[data-pre]::before { content: attr(data-pre); left: 54px; }
.stp[data-pre] .stp__input { padding-left: 22px; }
.stp[data-unit] .stp__input { padding-right: 28px; }
.stp[data-unit]::after { content: attr(data-unit); right: 52px; }
.stp__btn { position: relative; display: grid; place-items: center; border: 0; background: transparent; color: var(--ice); cursor: pointer; border-radius: 11px; -webkit-tap-highlight-color: transparent; transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
html:not(.js) .stp__btn { visibility: hidden; }
.stp__btn:hover { background: rgba(195, 213, 247, 0.08); color: var(--white); }
.stp__btn:active { transform: scale(0.92); background: rgba(195, 213, 247, 0.14); }
.stp__btn[disabled] { opacity: 0.3; cursor: default; }
.stp__minus, .stp__plus { position: relative; width: 12px; height: 1.75px; border-radius: 2px; background: currentColor; }
.stp__plus::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: currentColor; transform: rotate(90deg); }

.sheet { position: sticky; top: calc(var(--hd-h) + 24px); padding: clamp(26px, 2.8vw, 40px); border-radius: 20px; background: #0A1730; box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sheet__title { font-size: 1rem; font-weight: 560; color: var(--ice); }
.sheet__live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--mist); white-space: nowrap; }
.sheet__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ready); box-shadow: 0 0 0 3px rgba(65, 201, 142, 0.16); }
.sheet .readout__big { font-size: clamp(3rem, 1.6rem + 3vw, 5rem); }
.rows__pct { margin-left: auto; font-size: 0.8125rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.sheet .rows__row { gap: 14px; }
.sheet .rows__val { min-width: 4.5em; text-align: right; }
.sheet__act { margin-top: 28px; }
.sheet__note { margin-top: 16px; font-size: 0.8125rem; line-height: 1.55; color: var(--mist); }

.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 88px); margin-top: clamp(48px, 5vw, 72px); }
.ledger__title { padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.ledger__list li { display: flex; align-items: center; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--rule); font-size: 1.125rem; font-weight: 520; letter-spacing: -0.01em; color: var(--ink); }
.ledger__list li::before { content: ""; flex: none; width: 26px; height: 2px; background: repeating-linear-gradient(90deg, #9AA7BC 0 2px, transparent 2px 7px); }

.close__title--long { max-width: 13em; font-size: clamp(2.25rem, 0.6rem + 3.7vw, 4.25rem); }

@media (max-width: 359px) {
  .grp__fields { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 1023px) {
  .tool__head, .tool__grid { grid-template-columns: minmax(0, 1fr); }
  .sheet { position: relative; top: auto; }
}
@media (max-width: 767px) {
  
  .grp__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; align-items: end; }
  .grp__fields .fld__label { font-size: 0.8125rem; }
  .stp { grid-template-columns: 38px minmax(0, 1fr) 38px; height: 50px; }
  .stp[data-pre]::before { left: 44px; }
  .stp[data-unit]::after { right: 42px; }
  .tool__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .sheet { display: contents; }
  .sheet__head { order: 1; margin-top: 36px; }
  .sheet__basis { order: 2; margin: 8px 0 0; }
  .sheet .mix { order: 3; margin-top: 22px; }
  .sheet .rows { order: 4; }
  .sheet__note { order: 5; }
  .sheet__act { order: 6; }
  .tool .readout__totals { margin-bottom: 8px; }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .ledger__list li { font-size: 1.0625rem; padding: 15px 0; }
}

/* Resources refinement: the tool is the page */
.tool--hero { isolation: isolate; overflow: clip; padding-top: calc(var(--hd-h) + clamp(56px, 7vw, 112px)); }
.tool__light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 40% at 88% 0%, rgba(47, 102, 224, 0.26), rgba(47, 102, 224, 0) 70%),
    radial-gradient(40% 30% at 70% 38%, rgba(47, 102, 224, 0.12), rgba(47, 102, 224, 0) 70%); }
.tool--hero .tool__head { padding-top: 0; border-top: 0; }
.tool__title { font-size: clamp(2.625rem, 0.4rem + 4.9vw, 5.25rem); line-height: 0.95; font-weight: 600; font-variation-settings: "wdth" 92; letter-spacing: -0.042em; color: var(--white); max-width: 10em; text-wrap: balance; }
.tool__intro p { font-size: var(--fs-lede); line-height: 1.58; color: var(--ice); max-width: 32em; text-wrap: pretty; }
.tool__intro p + p { margin-top: 14px; font-size: 1rem; color: var(--mist); }
.tool--hero .tool__note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px 24px; margin-top: clamp(36px, 4vw, 56px); padding: 16px 22px; }
.tool--hero .tool__note .tool__note-k { margin: 0; }
.tool__note-link { font-size: 0.875rem; font-weight: 560; color: var(--ice); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(195, 213, 247, 0.4); border-radius: 2px; }
.tool__note-link:hover { color: var(--white); text-decoration-color: currentColor; }

/* each group names the result lines it feeds */
.grp__feeds { clear: both; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; font-size: 0.8125rem; color: var(--mist); }
.feed { display: inline-flex; align-items: center; gap: 8px; }
.feed::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.feed--0::before { background: #7AA6FF; } .feed--1::before { background: #B4CBF7; } .feed--2::before { background: #4472DA; }
.feed--3::before { background: #8AA0C6; } .feed--4::before { background: #2F4F92; }
.grp { transition: opacity var(--t-med) var(--ease); }
.sheet .rows__row, .sheet .mix__seg { transition: opacity 220ms var(--ease), flex-grow 500ms var(--ease); }
.sheet .rows__row.is-dim { opacity: 0.32; }
.sheet .mix__seg.is-dim { opacity: 0.22; }
.sheet .rows__val, .sheet .readout__big, .sheet .readout__mid { transition: color 700ms var(--ease); }
.sheet .is-changed { color: #A9C6FF; transition-duration: 60ms; }
.sheet__basis { margin: -10px 0 20px; font-size: 0.8125rem; color: var(--mist); }
.sheet__note { margin-top: 18px; }
.sheet__act { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule-dark); }
.sheet__carry { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 0.8125rem; color: var(--ice); }
.stp.is-called { box-shadow: inset 0 0 0 1px var(--signal), 0 0 0 4px rgba(110, 159, 255, 0.3); }

/* the reference: what this estimator prices, and what it doesn't */
.ledger__title { display: flex; align-items: center; gap: 12px; }
.ledger__gap { width: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 7px); }
.ledger__list li { display: block; padding: 0; border-bottom: 1px solid var(--rule); }
.ledger__list li::before { display: none; }
.ledger__item { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 17px 0; border-radius: 3px; }
.ledger__name { font-size: 1.125rem; font-weight: 520; letter-spacing: -0.01em; color: var(--ink); transition: color var(--t-fast) var(--ease); }
.ledger__field { font-size: 0.8125rem; color: #64748B; text-align: right; transition: color var(--t-fast) var(--ease); }
a.ledger__item:hover .ledger__name { color: var(--blue); }
a.ledger__item:hover .ledger__field { color: var(--ink); }
.ledger__list--out .ledger__name { display: inline-flex; align-items: center; gap: 14px; color: var(--slate); }
.ledger__list--out .ledger__name::before { content: ""; width: 26px; height: 2px; background: repeating-linear-gradient(90deg, #9AA7BC 0 2px, transparent 2px 7px); }
.ledger__group:last-child { align-self: start; }

@media (max-width: 1023px) {
  .tool--hero .tool__note { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .tool--hero { padding-top: calc(var(--hd-h) + 44px); }
  .tool__title { font-size: clamp(2.375rem, 0.2rem + 10vw, 3.25rem); }
  .tool__intro { margin-top: 4px; }
  .tool__intro p + p { display: none; }
  .grp__feeds { padding-top: 8px; }
  .ledger__item { flex-direction: column; gap: 2px; padding: 14px 0; }
  .ledger__field { text-align: left; }
  .ledger__name { font-size: 1.0625rem; }
}

/* ==========================================================================
   Contact — a request, with as little in the way as possible
   ========================================================================== */

.reach { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 18px; font-size: 0.9375rem; color: var(--slate); }
.reach a, .contact a, .doc a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(47, 102, 224, 0.35); transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); border-radius: 2px; }
.reach a:hover, .contact a:hover, .doc a:hover { text-decoration-color: currentColor; color: #2552B8; }
.contact a.bt { text-decoration: none; color: var(--white); }

.contact { background: var(--white); padding-bottom: var(--sec); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px clamp(40px, 6vw, 104px); align-items: start; }
.contact-form-wrapper { min-width: 0; padding: clamp(24px, 3.4vw, 48px); border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px #E3E9F1; }

.handoff { margin-bottom: 28px; padding: 18px 22px 20px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px #DCE3ED, 0 1px 2px rgba(10, 26, 51, 0.04); }
.js .handoff[hidden] { display: none; }
.handoff__k { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--blue); }
.handoff__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 10px; }
.handoff__num { font-size: 2.25rem; line-height: 1; font-weight: 300; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ink); }
.handoff__per { font-size: 0.9375rem; color: var(--slate); }
.handoff__meta { margin-top: 6px; font-size: 0.9375rem; color: var(--ink); font-weight: 500; }
.handoff__note { margin-top: 10px; font-size: 0.8125rem; color: #64748B; }

.cf__title { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.024em; font-variation-settings: "wdth" 96; color: var(--ink); }
.cf__desc { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--slate); max-width: 36em; }
.form-required-legend { margin-top: 8px; font-size: 0.8125rem; color: #64748B; }
.form-required-legend span { color: var(--blue); }

.form { margin-top: 8px; }

.form-row--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-group { margin-top: 18px; min-width: 0; }
.form-label { display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 520; line-height: 1.35; color: var(--ink); }
.form-label--required::after { content: " *"; color: var(--blue); }
.form-input, .form-textarea {
  display: block; width: 100%; height: 52px; padding: 0 16px; border-radius: 11px;
  border: 1px solid #C7D1DE; background: var(--white); color: var(--ink);
  font-size: 1rem; font-family: inherit; line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-textarea { height: auto; min-height: 128px; padding: 14px 16px; resize: vertical; }
select.form-input {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A5A73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.form-input::placeholder, .form-textarea::placeholder { color: #8A97AB; }
.form-input:hover, .form-textarea:hover { border-color: #97A6BC; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 102, 224, 0.18); }
.form-input--error, .form-input--error:hover { border-color: #C93B3B; }
.form-input--error:focus { border-color: #C93B3B; box-shadow: 0 0 0 3px rgba(201, 59, 59, 0.16); }
.form-error { display: block; font-size: 0.8125rem; line-height: 1.4; color: #B42318; }
.form-error:not(:empty) { margin-top: 7px; }
.form-help { display: block; margin-top: 7px; font-size: 0.8125rem; color: #64748B; }
.form-error-message { margin-top: 24px; padding: 14px 16px; border-radius: 11px; background: #FEF3F2; box-shadow: inset 0 0 0 1px #FBD0CC; font-size: 0.9375rem; line-height: 1.5; color: #7A271A; }
.form-error-message a { color: #7A271A; }
.form-submit { margin-top: 32px; }
.form-submit:disabled { cursor: progress; opacity: 0.78; transform: none; }
.form-submit__spin { width: 18px; height: 18px; }

.form-success { padding: 8px 0 4px; outline: none; }
.form-success__mark { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 5px var(--blue), 0 0 0 8px rgba(47, 102, 224, 0.1); }
.form-success__mark span { width: 12px; height: 7px; border: solid var(--blue); border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
.form-success__title { margin-top: 22px; font-size: clamp(1.625rem, 1.2rem + 1vw, 2rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.026em; color: var(--ink); }
.form-success__message { margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; color: var(--slate); max-width: 32em; }
.form-success__fallback { margin-top: 12px; font-size: 0.9375rem; color: var(--slate); }

.contact-info { position: sticky; top: calc(var(--hd-h) + 32px); }
.contact-info__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); }
.contact-info__lede { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--slate); }
.reachlist { margin-top: 24px; border-bottom: 1px solid #DCE3ED; }
.reachlist__row { padding: 16px 0 17px; border-top: 1px solid #DCE3ED; }
.reachlist dt { font-size: 0.8125rem; font-weight: 600; color: #64748B; }
.reachlist dd { margin-top: 4px; font-size: 1rem; line-height: 1.5; color: var(--ink); }

.faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 88px); margin-top: clamp(40px, 4.5vw, 64px); }
.faq__item { padding: 24px 0 28px; border-top: 1px solid var(--rule); }
.faq__item dt { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; color: var(--ink); }
.faq__item dd { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--slate); max-width: 34em; }

@media (max-width: 1023px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-info { position: static; }
}
@media (max-width: 767px) {
  .contact-form-wrapper { margin-inline: calc(var(--gutter) * -0.5); padding: 24px 20px 28px; border-radius: 18px; }
  .form-row--2 { grid-template-columns: minmax(0, 1fr); }
  .faq__list { grid-template-columns: minmax(0, 1fr); }
  .faq__item { padding: 20px 0 22px; }
}

/* Contact refinement: the final step */
.ch { background: var(--white); padding-top: calc(var(--hd-h) + clamp(48px, 6vw, 104px)); padding-bottom: clamp(40px, 4.5vw, 72px); }
.ch__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(40px, 6vw, 104px); align-items: end; }
.ch__title { font-size: clamp(2.625rem, 0.5rem + 4.6vw, 5rem); line-height: 0.95; font-weight: 600; font-variation-settings: "wdth" 92; letter-spacing: -0.042em; color: var(--ink); max-width: 9em; text-wrap: balance; }
.ch__lede { margin-top: 24px; font-size: var(--fs-lede); line-height: 1.55; color: var(--slate); max-width: 32em; }

.next { padding-bottom: 6px; }
.next__title { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.next__route { position: relative; margin-top: 18px; }
.next__stop { position: relative; display: grid; gap: 3px; padding: 0 0 18px 30px; background: repeating-linear-gradient(180deg, #A8B4C8 0 2px, transparent 2px 8px) 6px 20px / 2px calc(100% - 20px) no-repeat; }
.next__stop:last-child { padding-bottom: 0; background: none; }
.next__stop::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px #A8B4C8; }
.next__stop.is-here::before { box-shadow: inset 0 0 0 4px var(--blue), 0 0 0 5px rgba(47, 102, 224, 0.12); }
.next__name { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.next__desc { font-size: 0.875rem; line-height: 1.5; color: var(--slate); max-width: 26em; }

/* the form's three groups sit on a quiet rail; a group's stop fills once its required fields are in */
.contact .form { position: relative; }
.fgroup { position: relative; padding-left: 34px; margin-top: 30px; }
.fgroup::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: -24px; width: 2px; background: repeating-linear-gradient(180deg, #C2CCDA 0 2px, transparent 2px 8px); }
.fgroup:last-of-type::before { display: none; }
.fgroup__title { position: relative; display: flex; align-items: center; gap: 10px; padding-bottom: 2px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.fgroup__node { position: absolute; left: -34px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px #B0BCCD; transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease); }
.fgroup.is-complete .fgroup__node { box-shadow: inset 0 0 0 4px var(--blue), 0 0 0 5px rgba(47, 102, 224, 0.12); }
.fgroup__opt { font-size: 0.75rem; font-weight: 520; color: #64748B; }
.fgroup .form-group:first-of-type, .fgroup .form-row--2:first-of-type { margin-top: 14px; }
.contact .form-error-message, .contact .form-submit, .contact .form-after { margin-left: 34px; width: calc(100% - 34px); }
.form-after { margin-top: 12px; font-size: 0.8125rem; color: #64748B; }
.cf__head { padding-bottom: 6px; }

/* an estimate carried over from the estimator reads like the estimator */
.handoff--dark { position: relative; overflow: hidden; padding: 22px 24px 22px; background: var(--night); box-shadow: inset 0 0 0 1px rgba(195, 213, 247, 0.08); }
.handoff--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 100% 0%, rgba(47, 102, 224, 0.3), rgba(47, 102, 224, 0) 70%); }
.handoff--dark > * { position: relative; }
.handoff--dark .handoff__k { color: var(--signal); }
.handoff--dark .handoff__num { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); color: var(--white); }
.handoff--dark .handoff__per { color: var(--ice); }
.handoff--dark .handoff__meta { color: var(--white); }
.handoff--dark .handoff__note { color: var(--mist); }
.handoff--dark .pin--light { background: var(--signal); box-shadow: 0 0 0 4px rgba(110, 159, 255, 0.16); }
.js .handoff--dark:not([hidden]) { animation: handoff-in 600ms var(--ease) both; }
@keyframes handoff-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  .ch__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
  .ch { padding-top: calc(var(--hd-h) + 40px); }
  .ch__title { font-size: clamp(2.375rem, 0.3rem + 9.8vw, 3.25rem); }
  .ch__lede { margin-top: 18px; }
  .next__desc { display: none; }
  .next__stop { padding-bottom: 12px; }
  .fgroup { padding-left: 26px; }
  .fgroup__node { left: -26px; width: 12px; height: 12px; margin-top: -6px; }
  .fgroup::before { left: 5px; }
  .contact .form-error-message, .contact .form-submit, .contact .form-after { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Documents — Privacy, Terms, SMS consent, confirmation
   Typeset for reading; no route graphics, no scroll effects
   ========================================================================== */
.doc { background: var(--white); color: var(--ink); padding-bottom: clamp(72px, 8vw, 128px); }
.doc .container { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.doc .container--narrow { max-width: calc(720px + var(--gutter) * 2); }
.doc .about-hero { padding-top: calc(var(--hd-h) + clamp(48px, 6vw, 96px)); padding-bottom: clamp(28px, 3vw, 44px); }
.doc .about-hero .container { max-width: calc(720px + var(--gutter) * 2); }
.doc .about-hero__title { font-size: clamp(2.25rem, 1rem + 3.2vw, 3.75rem); line-height: 1.0; font-weight: 600; font-variation-settings: "wdth" 94; letter-spacing: -0.036em; text-wrap: balance; color: var(--ink); }
.doc .about-hero__description { margin-top: 18px; font-size: var(--fs-lede); line-height: 1.55; color: var(--slate); max-width: 36em; }
.page-thanks .about-hero__title::before { content: ""; display: block; width: 44px; height: 44px; margin-bottom: 28px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 5px var(--blue), 0 0 0 8px rgba(47, 102, 224, 0.1); }

.doc .section { padding-block: clamp(28px, 3vw, 44px); }
.doc .section--gray { background: var(--paper); padding-block: clamp(40px, 4vw, 56px); }
.legal-content { max-width: 720px; }
.legal-content__updated { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px #E1E7EF; font-size: 0.8125rem; font-weight: 560; color: var(--ink); }
.legal-content__updated::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.legal-content__heading { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.022em; font-variation-settings: "wdth" 96; color: var(--ink); }
.legal-content > .legal-content__heading:first-child, .legal-content__updated + .legal-content__heading { margin-top: 28px; }
.section > .container > .legal-content > .legal-content__heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content__subheading { margin-top: 28px; font-size: 1.125rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.legal-content p, .legal-content li { font-size: 1.0625rem; line-height: 1.7; color: #33425B; }
.legal-content p { margin-top: 12px; }
.legal-content strong { font-weight: 620; color: var(--ink); }
.legal-content__list { margin-top: 12px; display: grid; gap: 8px; }
ul.legal-content__list li { position: relative; padding-left: 22px; }
ul.legal-content__list li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
ol.legal-content__list { counter-reset: doc; }
ol.legal-content__list li { position: relative; padding-left: 36px; counter-increment: doc; }
ol.legal-content__list li::before { content: counter(doc); position: absolute; left: 0; top: 0.2em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px #B9C5D6; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.legal-content__contact { margin-top: 16px; padding: 20px 22px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px #E1E7EF; }
.section--gray .legal-content__contact { background: var(--white); }
.legal-content__contact p:first-child { margin-top: 0; }
.legal-content__quote { margin: 18px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--blue); }
.legal-content__quote p { margin-top: 0; color: var(--ink); }

/* SMS consent evidence */
.evidence-banner { padding-block: 8px clamp(28px, 3vw, 44px); }
.evidence-banner__card { padding: clamp(24px, 3vw, 36px); border-radius: 18px; background: var(--night); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.evidence-banner__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--signal); }
.evidence-banner__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.evidence-banner__lede { margin-top: 12px; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.016em; color: var(--white); }
.evidence-banner__disclaimer { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--ice); }
.evidence-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.evidence-banner__action-note { font-size: 0.8125rem; color: var(--mist); }
.legal-content .evidence-banner__action-note { color: #64748B; }
.sms-consent-pdf-button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; border-radius: 11px;
  font-size: 0.9375rem; font-weight: 580; line-height: 1.3; color: var(--white) !important; text-decoration: none !important;
  background: linear-gradient(180deg, var(--blue-hi), var(--blue));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(3, 12, 34, 0.3);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.sms-consent-pdf-button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 22px -12px rgba(47, 102, 224, 0.9); }
.sms-consent-pdf-button:active { transform: translateY(1px); }

.consent-doc { margin-top: 24px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px #D5DDE8, 0 24px 48px -36px rgba(10, 26, 51, 0.35); overflow: hidden; }
.consent-doc__header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 18px 22px; border-bottom: 1px solid #E1E7EF; background: var(--paper); }
.consent-doc__brand { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.consent-doc__brand-sub { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 500; color: #64748B; }
.consent-doc__meta { display: grid; gap: 2px; font-size: 0.75rem; color: #64748B; font-variant-numeric: tabular-nums; }
.consent-doc__body { padding: 22px; }
.consent-doc__body p { font-size: 0.9375rem; }
.consent-doc__subhead { margin-top: 0 !important; font-weight: 600; color: var(--ink) !important; }
.consent-doc__caption { color: #64748B !important; }
.consent-doc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 18px; }
.consent-doc__field-label { display: block; font-size: 0.75rem; font-weight: 600; color: #64748B; }
.consent-doc__field-line { display: block; margin-top: 6px; padding-bottom: 8px; border-bottom: 1px solid #B9C5D6; font-size: 0.875rem; color: #64748B; font-style: italic; }
.consent-doc__section-title { margin-top: 24px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.consent-doc__checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 0.9375rem; color: var(--ink); }
.consent-doc__checkbox-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.consent-doc__signature { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 28px; }
.consent-doc__sig-line { padding-top: 8px; border-top: 1px solid #8A97AB; font-size: 0.75rem; color: #64748B; }
.consent-doc__footer { padding: 14px 22px; border-top: 1px solid #E1E7EF; background: var(--paper); font-size: 0.8125rem; color: #64748B; }
@media (max-width: 767px) {
  .consent-doc__fields, .consent-doc__signature { grid-template-columns: minmax(0, 1fr); }
  .legal-content p, .legal-content li { font-size: 1rem; }
}

/* small grey text on the paper surfaces keeps AA contrast (4.5:1) */
.contact-form-wrapper .form-required-legend, .contact-form-wrapper .form-help, .contact-form-wrapper .fgroup__opt, .contact-form-wrapper .form-after,
.consent-doc__brand-sub, .consent-doc__meta, .consent-doc__footer { color: #5F6F86; }

/* ==========================================================================
   Reduced motion: everything arrives settled
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}