/* ============================================================
       PAGE-LEVEL DENSITY OVERRIDES
       Tighter vertical rhythm without losing any content. Each
       section keeps its own internal structure; only the dead
       space between blocks shrinks.
       ============================================================ */
    :root {
      --section-y: 4.5rem;        /* was 6rem */
      --section-y-tight: 2.25rem; /* was 3rem */
    }
    @media (min-width: 1024px) {
      :root { --section-y: 5rem; }
    }

    /* ============================================================
       RESET & BASE
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--text-base);
      line-height: var(--leading-body);
      color: var(--color-text);
      background: var(--color-surface);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: var(--color-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
    a:hover { color: var(--color-link-hover); }
    button { font: inherit; cursor: pointer; }
    h1, h2, h3, h4, h5 {
      font-family: var(--font-serif);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: var(--tracking-tight);
      line-height: var(--leading-tight);
      margin: 0;
    }
    p { margin: 0; text-wrap: pretty; }

    :focus-visible {
      outline: 2px solid var(--color-focus-ring);
      outline-offset: 3px;
      border-radius: var(--radius-sm);
    }

    .container {
      width: 100%;
      max-width: var(--content-wide);
      margin: 0 auto;
      padding: 0 var(--space-5);
    }
    @media (min-width: 768px) { .container { padding: 0 var(--space-7); } }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange-deep);
      margin-bottom: var(--space-4);
    }
    .eyebrow::before {
      content: "";
      width: 24px;
      height: 1px;
      background: currentColor;
      flex-shrink: 0;
    }
    .eyebrow--on-dark { color: var(--color-brand-orange); }

    .tnum { font-variant-numeric: tabular-nums; }

    /* ============================================================
       BUTTONS
       ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      padding: 14px 22px;
      font-family: var(--font-sans);
      font-size: var(--text-base);
      font-weight: var(--weight-semibold);
      line-height: 1;
      border-radius: var(--radius-md);
      border: 1px solid transparent;
      transition: background var(--duration-fast) var(--ease-out),
                  color var(--duration-fast) var(--ease-out),
                  border-color var(--duration-fast) var(--ease-out),
                  transform var(--duration-fast) var(--ease-out);
      white-space: nowrap;
    }
    .btn--primary {
      background: var(--color-brand-orange);
      color: #fff;
    }
    .btn--primary:hover { background: var(--color-brand-orange-dark); color: #fff; }
    .btn--primary:active { background: var(--color-brand-orange-deep); }
    .btn--ghost {
      background: transparent;
      color: var(--color-ink);
      border-color: var(--color-hairline-strong);
    }
    .btn--ghost:hover { border-color: var(--color-ink); }
    .btn--outline-light {
      background: transparent;
      color: var(--color-surface);
      border-color: rgba(255,255,255,0.55);
    }
    .btn--outline-light:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
    .btn--sm { padding: 10px 16px; font-size: var(--text-sm); }

    .arrow-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-weight: var(--weight-medium);
      color: var(--color-link);
    }
    .arrow-link svg { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-out); }
    .arrow-link:hover { color: var(--color-link-hover); }
    .arrow-link:hover svg { transform: translateX(3px); }
    .arrow-link--on-dark { color: var(--color-surface); }
    .arrow-link--on-dark:hover { color: var(--color-brand-orange); }

    /* ============================================================
       HEADER
       ============================================================ */
    .site-header {
      position: sticky;
      top: 0;
      z-index: var(--z-sticky);
      background: color-mix(in oklab, var(--color-surface) 92%, transparent);
      -webkit-backdrop-filter: saturate(150%) blur(10px);
      backdrop-filter: saturate(150%) blur(10px);
      border-bottom: var(--border-thin);
      transition: box-shadow var(--duration-base) var(--ease-out);
    }
    .site-header[data-scrolled="true"] { box-shadow: var(--shadow-sm); }
    .site-header__inner {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      min-height: 76px;
      padding-top: var(--space-3);
      padding-bottom: var(--space-3);
    }
    .site-header__logo img { height: 38px; width: auto; }

    .site-nav { display: none; }
    @media (min-width: 1180px) {
      .site-nav {
        display: flex;
        gap: var(--space-4);
        margin-left: var(--space-5);
        flex: 1;
        flex-wrap: nowrap;
      }
    }
    .site-nav a {
      white-space: nowrap;
      color: var(--color-text);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      padding: var(--space-2) 0;
      position: relative;
    }
    .site-nav a:hover { color: var(--color-ink); }
    .site-nav a[aria-current="page"] { color: var(--color-ink); }
    .site-nav a::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -2px;
      height: 2px;
      background: var(--color-brand-orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--duration-base) var(--ease-out);
    }
    .site-nav a:hover::after,
    .site-nav a[aria-current="page"]::after { transform: scaleX(1); }

    /* Grouped nav dropdowns (desktop ≥1180px; mobile uses the drawer) */
    .nav-group { position: relative; display: flex; align-items: center; }
    .nav-group__btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      background: none;
      border: none;
      margin: 0;
      padding: var(--space-2) 0;
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-text);
      cursor: pointer;
      position: relative;
    }
    .nav-group__btn::after {
      content: "";
      position: absolute;
      left: 0; right: 16px; bottom: -2px;
      height: 2px;
      background: var(--color-brand-orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--duration-base) var(--ease-out);
    }
    .nav-group:hover .nav-group__btn,
    .nav-group:focus-within .nav-group__btn,
    .nav-group.is-active .nav-group__btn { color: var(--color-ink); }
    .nav-group:hover .nav-group__btn::after,
    .nav-group:focus-within .nav-group__btn::after,
    .nav-group.is-active .nav-group__btn::after { transform: scaleX(1); }
    .nav-group__caret { transition: transform var(--duration-fast) var(--ease-out); }
    .nav-group:hover .nav-group__caret,
    .nav-group:focus-within .nav-group__caret,
    .nav-group.is-open .nav-group__caret { transform: rotate(180deg); }

    .nav-group__menu {
      position: absolute;
      top: 100%;
      left: -12px;
      min-width: 248px;
      margin-top: 8px;
      background: var(--color-surface-elevated);
      border: var(--border-thin);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      padding: var(--space-2);
      display: flex;
      flex-direction: column;
      gap: 2px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity var(--duration-fast) var(--ease-out),
                  transform var(--duration-fast) var(--ease-out),
                  visibility var(--duration-fast);
      z-index: 60;
    }
    .nav-group__menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
    .nav-group:hover .nav-group__menu,
    .nav-group:focus-within .nav-group__menu,
    .nav-group.is-open .nav-group__menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .nav-group__menu a {
      white-space: nowrap;
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-sm);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-text);
      position: static;
    }
    .nav-group__menu a::after { display: none; }
    .nav-group__menu a:hover { background: var(--color-surface-sunken); color: var(--color-ink); }
    .nav-group__menu a[aria-current="page"] { color: var(--color-brand-orange-deep); }

    .site-header__actions {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      margin-left: auto;
    }
    .site-header__phone {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-sans);
      font-variant-numeric: tabular-nums;
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.005em;
    }
    @media (max-width: 1319px) {
      .site-header__phone { display: none; }
    }
    .site-header__phone::before {
      content: none;
    }
    .site-header__menu {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      background: transparent;
      border: var(--border-thin);
      border-radius: var(--radius-sm);
      color: var(--color-ink);
    }
    @media (min-width: 1180px) { .site-header__menu { display: none; } }

    /* ============================================================
       HERO
       ============================================================ */
    .hero {
      position: relative;
      isolation: isolate;
      min-height: 560px;
      display: flex;
      align-items: flex-end;
      color: var(--color-surface);
      overflow: hidden;
    }
    @media (min-width: 1024px) { .hero { min-height: 820px; } }

    .hero__photo {
      position: absolute;
      inset: 0;
      z-index: -2;
      overflow: hidden;
      background-color: var(--color-brand-navy-deep);
    }
    .hero__photo img,
    .hero__photo video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 22%;
      filter: saturate(0.92);
    }
    .hero__scrim {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(to top,
          color-mix(in oklab, var(--color-brand-navy-deep) 90%, transparent) 0%,
          color-mix(in oklab, var(--color-brand-navy-deep) 55%, transparent) 32%,
          color-mix(in oklab, var(--color-brand-navy-deep) 12%, transparent) 64%,
          transparent 100%),
        linear-gradient(to top right,
          color-mix(in oklab, var(--color-brand-navy-deep) 72%, transparent) 0%,
          color-mix(in oklab, var(--color-brand-navy-deep) 28%, transparent) 55%,
          color-mix(in oklab, var(--color-brand-navy-deep) 5%, transparent) 100%);
    }

    .hero__inner {
      width: 100%;
      padding: var(--space-9) 0 var(--space-9);
    }
    .hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-surface);
      font-weight: var(--weight-medium);
      margin-bottom: var(--space-5);
    }
    .hero__eyebrow::before {
      content: "";
      display: inline-block;
      width: 32px; height: 1px;
      background: currentColor;
      opacity: 0.6;
    }
    .hero__headline {
      font-size: clamp(2.35rem, 7.5vw, 4.6rem);
      color: var(--color-surface);
      max-width: 17ch;
      letter-spacing: var(--tracking-tight);
      line-height: 1.02;
      text-wrap: balance;
      font-weight: var(--weight-semibold);
    }
    .hero__headline span { color: var(--color-brand-orange); }
    .hero__lead {
      margin-top: var(--space-6);
      max-width: 64ch;
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--color-surface);
      font-weight: var(--weight-medium);
      opacity: 0.95;
    }
    .hero__cta {
      margin-top: var(--space-7);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-5);
    }
    .hero__promise {
      margin-top: var(--space-5);
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-4);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.85);
      font-weight: var(--weight-medium);
    }
    .hero__promise-item {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
    }
    .hero__promise-item::before {
      content: "";
      width: 15px; height: 15px;
      flex-shrink: 0;
      background: var(--color-brand-orange);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* ============================================================
       JUMP-TO BAND
       Slim anchor-nav band that sits between the trust strip and
       the first content section. Keeps the hero focused on the
       headline + CTAs while still giving phone-first ICP visitors
       a fast path to the section they want.
       ============================================================ */
    .jumpto-band {
      background: var(--color-surface);
      border-bottom: var(--border-thin);
      padding: var(--space-4) 0;
    }
    .jumpto-band__inner {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-3);
    }
    .jumpto-band__label {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-right: var(--space-2);
      font-weight: var(--weight-semibold);
    }
    .jumpto-band a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: transparent;
      border: 1px solid var(--color-hairline-strong);
      border-radius: var(--radius-pill);
      color: var(--color-text);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      text-decoration: none;
      transition:
        background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    }
    .jumpto-band a::after {
      content: "↓";
      font-size: 0.85em;
      color: var(--color-brand-orange);
      transition: transform var(--duration-fast) var(--ease-out);
      line-height: 1;
    }
    .jumpto-band a:hover {
      background: var(--color-surface-sunken);
      border-color: var(--color-brand-orange);
      color: var(--color-ink);
      transform: translateY(-1px);
    }
    .jumpto-band a:hover::after { transform: translateY(2px); }
    .jumpto-band a:focus-visible {
      outline: 2px solid var(--color-brand-orange);
      outline-offset: 3px;
    }

    /* Honest empty state for testimonials — awaiting verbatim quotes + permission. */
    .testimonials-empty {
      max-width: 64ch;
      padding: var(--space-6) var(--space-7);
      background: var(--color-surface-sunken);
      border: 1px dashed var(--color-hairline-strong);
      border-radius: var(--radius-md);
    }
    .testimonials-empty__lead {
      font-family: var(--font-serif);
      font-size: clamp(1.3rem, 2vw, 1.6rem);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin: 0 0 var(--space-4);
    }
    .testimonials-empty__body {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.6;
      margin: 0 0 var(--space-6);
      max-width: 58ch;
    }
    .testimonials-empty__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-4) var(--space-5);
    }

    /* Anchor scroll offset so the sticky header doesn't cover the target heading. */
    main section[id] { scroll-margin-top: 100px; }

    /* Fuse the Authority + Map into one continuous navy band (no double padding / seam) */
    .section--navy-deep.authority { padding-bottom: var(--space-8); }
    .map-band { border-top: none; padding-top: 0; }

    /* ============================================================
       BACK-TO-TOP BUTTON
       Appears once the visitor scrolls past the hero. Bottom-left
       to avoid the Tweaks FAB at bottom-right. Click → smooth-scroll
       back to the top of the page.
       ============================================================ */
    .back-to-top {
      position: fixed;
      bottom: 24px;
      left: 24px;
      z-index: var(--z-overlay);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px 10px 14px;
      background: var(--color-brand-navy-deep);
      color: var(--color-surface);
      border: 1px solid color-mix(in oklab, var(--color-brand-navy-deep) 50%, white);
      border-radius: var(--radius-pill);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.005em;
      box-shadow: var(--shadow-md);
      cursor: pointer;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition:
        opacity 220ms var(--ease-out),
        transform 220ms var(--ease-out),
        background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
    }
    .back-to-top[data-visible="true"] {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .back-to-top::before {
      content: "↑";
      color: var(--color-brand-orange);
      font-size: 1.05em;
      line-height: 1;
      transition: color var(--duration-fast) var(--ease-out);
    }
    .back-to-top:hover {
      background: var(--color-brand-orange);
      border-color: var(--color-brand-orange);
      color: #fff;
    }
    .back-to-top:hover::before { color: #fff; }
    .back-to-top:focus-visible {
      outline: 2px solid var(--color-brand-orange);
      outline-offset: 3px;
    }
    @media (max-width: 480px) {
      .back-to-top { bottom: 16px; left: 16px; padding: 8px 14px 8px 12px; font-size: var(--text-xs); }
    }

    @media (prefers-reduced-motion: no-preference) {
      .hero__eyebrow, .hero__headline, .hero__lead, .hero__cta {
        opacity: 0;
        transform: translateY(10px);
        animation: fadeUp var(--duration-slow) var(--ease-out) forwards;
      }
      .hero__headline { animation-delay: 80ms; }
      .hero__lead { animation-delay: 180ms; }
      .hero__cta { animation-delay: 280ms; }
      @keyframes fadeUp { to { opacity: 1; transform: none; } }
    }

    /* ============================================================
       TRUST STRIP
       ============================================================ */
    .trust-strip {
      background: var(--color-surface-sunken);
      border-bottom: var(--border-thin);
    }
    .trust-strip__inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-7);
      padding: var(--space-5) 0;
      justify-content: space-between;
    }
    .trust-strip__badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-7);
    }
    .trust-strip__badges img {
      height: 48px;
      width: auto;
      object-fit: contain;
      filter: grayscale(1) contrast(0.95);
      opacity: 0.78;
      transition: opacity var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out);
    }
    .trust-strip__badges a:hover img { filter: grayscale(0) contrast(1); opacity: 1; }
    .trust-strip__stats {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      font-weight: var(--weight-medium);
    }

    /* ============================================================
       SECTION SHELL
       ============================================================ */
    .section { padding: var(--section-y) 0; }
    .section--tight { padding: var(--section-y-tight) 0; }
    .section--sunken { background: var(--color-surface-sunken); }
    .section--navy { background: var(--color-brand-navy); color: var(--color-surface); }
    .section--navy-deep { background: var(--color-brand-navy-deep); color: var(--color-surface); }

    .section-head {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
      margin-bottom: var(--space-7);
      align-items: end;
    }
    @media (min-width: 1024px) {
      .section-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    }
    .section-head h2 {
      font-size: clamp(2rem, 3.4vw, var(--text-3xl));
      max-width: 22ch;
      text-wrap: balance;
    }
    .section-head__intro {
      font-size: var(--text-lg);
      color: var(--color-text-muted);
      max-width: 52ch;
      line-height: 1.55;
    }

    /* ============================================================
       DIRECT-ANSWER BLOCK
       ============================================================ */
    .direct-answer-wrap { max-width: 84ch; margin: 0 auto; }
    .direct-answer-wrap > .eyebrow { margin-bottom: var(--space-4); }

    /* ============================================================
       LIKE-KIND EQUIVALENCE BAND (image + editorial headline)
       ============================================================ */
    .equiv { background: var(--color-brand-navy-deep); color: var(--color-surface); }
    .equiv__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
    @media (min-width: 900px) { .equiv__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-9); } }
    .equiv__figure { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 905 / 495; }
    .equiv__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
    .equiv__badge {
      position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%);
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: 6px 14px; background: color-mix(in oklab, var(--color-brand-navy-deep) 65%, transparent);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-pill);
      font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: -0.005em; color: #fff; white-space: nowrap;
    }
    .equiv__eyebrow { color: var(--color-brand-orange); }
    .equiv h2 { color: var(--color-surface); font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: var(--tracking-tight); line-height: 1.08; text-wrap: balance; max-width: 18ch; }
    .equiv__lead { margin-top: var(--space-5); font-size: var(--text-lg); line-height: var(--leading-body); color: rgba(255,255,255,0.82); max-width: 54ch; }
    .equiv__lead strong { color: #fff; font-weight: var(--weight-semibold); }
    .equiv__cites { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .equiv__cite { font-family: var(--font-mono); font-size: var(--text-xs); padding: 4px 10px; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-pill); color: rgba(255,255,255,0.9); letter-spacing: -0.005em; }
    .direct-answer {
      background: var(--color-surface-sunken);
      border-left: 4px solid var(--color-brand-orange);
      border-radius: var(--radius-md);
      padding: var(--space-6) var(--space-5);
    }
    @media (min-width: 768px) {
      .direct-answer { padding: var(--space-7) var(--space-8); }
    }
    .direct-answer__lead {
      font-family: var(--font-sans);
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--color-text);
      font-weight: var(--weight-medium);
    }
    .direct-answer__lead strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
    .direct-answer__link { margin-top: var(--space-5); display: inline-flex; }

    /* ============================================================
       CALCULATOR PROMO BAND — navy full-bleed feature for the calc
       ============================================================ */
    .calc-promo {
      background: var(--color-brand-navy);
      color: var(--color-surface);
      padding: var(--section-y) 0;
      border-top: 1px solid color-mix(in oklab, var(--color-brand-navy-deep) 50%, white);
      border-bottom: 1px solid color-mix(in oklab, var(--color-brand-navy-deep) 50%, white);
      position: relative;
      overflow: hidden;
    }
    .calc-promo::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 50% at 80% 50%, color-mix(in oklab, var(--color-brand-orange) 12%, transparent) 0%, transparent 70%);
      pointer-events: none;
    }
    .calc-promo > .container { position: relative; z-index: 1; }
    .calc-promo__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
      align-items: center;
    }
    @media (min-width: 900px) {
      .calc-promo__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-9); }
    }
    .calc-promo h2 {
      color: var(--color-surface);
      font-size: clamp(1.8rem, 3.4vw, 2.6rem);
      letter-spacing: var(--tracking-tight);
      line-height: 1.1;
      text-wrap: balance;
      max-width: 22ch;
    }
    .calc-promo h2 .calc-promo__hl {
      color: var(--color-brand-orange);
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-weight: var(--weight-semibold);
      letter-spacing: -0.02em;
    }
    .calc-promo__lead {
      margin-top: var(--space-5);
      font-size: var(--text-lg);
      color: rgba(255,255,255,0.82);
      line-height: var(--leading-body);
      max-width: 52ch;
    }
    .calc-promo__cta {
      margin-top: var(--space-6);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-4) var(--space-5);
    }
    .calc-promo__hint {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.6);
      letter-spacing: -0.005em;
    }
    .calc-promo__visual {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--radius-md);
      padding: var(--space-6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .calc-promo__chart-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: var(--space-5);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      gap: var(--space-3);
      flex-wrap: wrap;
    }
    .calc-promo__chart-title { color: var(--color-brand-orange); font-weight: var(--weight-semibold); }
    .calc-promo__chart-horizon { color: rgba(255,255,255,0.6); }
    .calc-promo__bar-row {
      display: grid;
      grid-template-columns: 120px 1fr auto;
      gap: var(--space-3);
      align-items: center;
      margin-bottom: var(--space-3);
    }
    .calc-promo__bar-label { font-size: var(--text-sm); color: rgba(255,255,255,0.8); }
    .calc-promo__bar-track {
      background: rgba(255,255,255,0.08);
      border-radius: var(--radius-pill);
      height: 14px;
      overflow: hidden;
    }
    .calc-promo__bar {
      height: 100%;
      background: rgba(255,255,255,0.35);
      border-radius: var(--radius-pill);
      transition: width 900ms cubic-bezier(.2,.7,.2,1);
      transition-delay: 200ms;
    }
    .calc-promo__bar--with { background: var(--color-brand-orange); }
    .calc-promo__bar-value {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: #fff;
      min-width: 70px;
      text-align: right;
    }
    .calc-promo__delta {
      margin-top: var(--space-5);
      padding-top: var(--space-5);
      border-top: 1px solid rgba(255,255,255,0.12);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--space-3);
      flex-wrap: wrap;
    }
    .calc-promo__delta-label {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      font-weight: var(--weight-semibold);
    }
    .calc-promo__delta-value {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: var(--text-3xl);
      font-weight: var(--weight-semibold);
      color: var(--color-brand-orange);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    /* ============================================================
       BY THE NUMBERS — stat tiles after personas
       Pulls the heavy numeric copy out of the Authority section
       and gives it a confident dedicated band.
       ============================================================ */
    .numbers-band {
      background: var(--color-surface);
      padding: var(--section-y-tight) 0;
      border-top: var(--border-thin);
      border-bottom: var(--border-thin);
    }
    .numbers-band__head {
      margin-bottom: var(--space-6);
      max-width: 64ch;
    }
    .numbers-band__head h2 {
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      letter-spacing: var(--tracking-tight);
      color: var(--color-ink);
      text-wrap: balance;
      max-width: 22ch;
    }
    .numbers-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
      margin: 0;
      padding: 0;
    }
    @media (min-width: 640px) { .numbers-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .numbers-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
    .number-tile {
      padding: var(--space-6);
      background: var(--color-surface-elevated);
      border: var(--border-thin);
      border-radius: var(--radius-md);
      border-top: 3px solid var(--color-brand-orange);
      transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    }
    .number-tile:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .number-tile__value {
      font-family: var(--font-serif);
      font-variant-numeric: tabular-nums;
      font-size: clamp(2.6rem, 4.6vw, 3.4rem);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.025em;
      line-height: 1;
      margin: 0 0 var(--space-3);
    }
    .number-tile__unit {
      font-size: 0.55em;
      color: var(--color-text-muted);
      font-weight: var(--weight-medium);
      margin-left: 2px;
    }
    .number-tile__label {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.5;
      margin: 0;
    }

    /* ============================================================
       PERSONA ROUTING STRIP
       ============================================================ */
    .persona-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
    @media (min-width: 768px) { .persona-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .persona-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

    @media (max-width: 767px) {
      .persona-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: var(--space-5);
        padding-bottom: var(--space-4);
        margin: 0 calc(-1 * var(--space-5));
        padding-left: var(--space-5);
        padding-right: var(--space-5);
      }
      .persona-card { scroll-snap-align: start; }
    }

    .persona-card {
      display: flex;
      flex-direction: column;
      background: var(--color-surface-elevated);
      border: var(--border-thin);
      border-radius: var(--radius-md);
      text-decoration: none;
      color: inherit;
      overflow: hidden;
      transition: transform var(--duration-base) var(--ease-out),
                  border-color var(--duration-base) var(--ease-out),
                  box-shadow var(--duration-base) var(--ease-out);
      position: relative;
    }
    .persona-card:hover {
      transform: translateY(-2px);
      border-color: var(--color-hairline-strong);
      box-shadow: var(--shadow-md);
      color: inherit;
    }
    .persona-card__media {
      aspect-ratio: 16 / 10;
      background-size: cover;
      background-position: center;
      background-color: var(--color-surface-sunken);
      position: relative;
      overflow: hidden;
      transition: transform var(--duration-slow) var(--ease-out);
    }
    .persona-card__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(15,15,18,0.55) 0%, rgba(15,15,18,0.15) 45%, rgba(15,15,18,0) 80%);
    }
    .persona-card:hover .persona-card__media { transform: scale(1.04); }
    .persona-card__icon {
      position: absolute;
      top: var(--space-4);
      left: var(--space-4);
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: color-mix(in oklab, var(--color-brand-navy-deep) 80%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: var(--radius-sm);
      z-index: 1;
    }
    .persona-card__icon svg { width: 22px; height: 22px; }
    .persona-card__body {
      padding: var(--space-5) var(--space-6) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      flex: 1;
    }
    .persona-card__title {
      font-family: var(--font-serif);
      font-size: var(--text-xl);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .persona-card__desc {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.55;
      flex: 1;
    }
    .persona-card__link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-weight: var(--weight-medium);
      color: var(--color-brand-navy);
      font-size: var(--text-sm);
    }
    .persona-card__link svg { width: 13px; height: 13px; transition: transform var(--duration-fast) var(--ease-out); }
    .persona-card:hover .persona-card__link svg { transform: translateX(3px); }
    .persona-card:hover .persona-card__link { color: var(--color-brand-orange-deep); }

    /* ============================================================
       HOW IT WORKS
       ============================================================ */
    /* Redesign direction: unified centered header + airy card steps */
    .section-head--center {
      grid-template-columns: 1fr !important;
      justify-items: center;
      text-align: center;
      gap: var(--space-4);
      max-width: 62ch;
      margin: 0 auto var(--space-9);
    }
    .section-head--center > div { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
    .section-head--center h2 { max-width: 20ch; margin-inline: auto; }
    .section-head--center .section-head__intro { max-width: 54ch; margin-inline: auto; }

    .steps--cards { gap: var(--space-5) !important; }
    @media (min-width: 1024px) { .steps--cards { grid-template-columns: repeat(4, 1fr) !important; gap: var(--space-5) !important; } }
    .steps--cards .step {
      background: var(--color-surface-elevated);
      border: var(--border-thin);
      border-top: 3px solid var(--color-brand-orange);
      border-radius: var(--radius-md);
      padding: var(--space-6) !important;
    }
    @media (min-width: 1024px) {
      .steps--cards .step { padding: var(--space-6) !important; }
      .steps--cards .step + .step { border-left: var(--border-thin) !important; border-top: 3px solid var(--color-brand-orange) !important; padding-left: var(--space-6) !important; }
    }
    .steps {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
      list-style: none;
      padding: 0;
      margin: 0;
    }
    @media (min-width: 768px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); } }
    @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 0; } }

    .step {
      padding: var(--space-6) 0;
      position: relative;
    }
    @media (min-width: 1024px) {
      .step { padding: var(--space-6) var(--space-5) var(--space-6) 0; }
      .step + .step { border-left: var(--border-thin); padding-left: var(--space-6); }
    }
    .step__num {
      font-family: var(--font-mono);
      font-size: var(--text-2xl);
      font-weight: var(--weight-medium);
      color: var(--color-brand-orange-deep);
      letter-spacing: -0.02em;
      margin-bottom: var(--space-4);
      display: flex;
      align-items: baseline;
      gap: var(--space-3);
    }
    .step__num::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--color-hairline);
      align-self: center;
    }
    .step__title {
      font-family: var(--font-serif);
      font-size: var(--text-xl);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin-bottom: var(--space-3);
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      flex-wrap: wrap;
    }
    .step__tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange-deep);
      background: color-mix(in oklab, var(--color-brand-orange) 14%, transparent);
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      font-weight: var(--weight-semibold);
      vertical-align: 2px;
    }
    .step__body {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.55;
    }

    /* ============================================================
       VALUATION METHODOLOGY
       ============================================================ */
    .methodology {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
      align-items: start;
    }
    @media (min-width: 1024px) {
      .methodology { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); }
    }
    .methodology__lead {
      margin-top: var(--space-5);
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--color-text);
      max-width: 50ch;
    }
    .method-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 0;
      border-top: var(--border-thin);
    }
    .method-list > li {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: var(--space-5);
      padding: var(--space-5) 0;
      border-bottom: var(--border-thin);
      align-items: start;
    }
    .method-list__num {
      font-family: var(--font-sans);
      font-variant-numeric: tabular-nums;
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: var(--color-brand-orange-deep);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      padding-top: 4px;
    }
    .method-list__title {
      font-family: var(--font-serif);
      font-size: var(--text-xl);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      margin-bottom: var(--space-2);
      letter-spacing: -0.01em;
    }
    .method-list__body {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.55;
    }

    /* ============================================================
       REPLACEMENT TILES
       ============================================================ */
    .replacement-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);
    }
    @media (min-width: 1024px) { .replacement-grid { grid-template-columns: repeat(4, 1fr); } }

    .tile {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      border: var(--border-thin);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--color-surface-elevated);
      transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    }
    .tile:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      color: inherit;
    }
    .tile__media {
      aspect-ratio: 4 / 3;
      background-color: var(--color-surface-sunken);
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .tile__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(15,15,18,0.45), rgba(15,15,18,0) 55%);
    }
    .tile__label {
      position: absolute;
      top: var(--space-4);
      left: var(--space-4);
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-surface);
      background: color-mix(in oklab, var(--color-brand-navy-deep) 78%, transparent);
      padding: 6px 10px;
      border-radius: var(--radius-pill);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .tile__body {
      padding: var(--space-5);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      flex: 1;
    }
    .tile__title {
      font-family: var(--font-serif);
      font-size: var(--text-xl);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .tile__desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.5;
      flex: 1;
    }

    .replacement-cta {
      margin-top: var(--space-7);
      text-align: center;
    }

    /* ============================================================
       AUTHORITY
       ============================================================ */
    .authority-cols {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
      align-items: center;
      margin-bottom: 0;
    }
    @media (min-width: 1024px) {
      .authority-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-9); }
    }
    .authority h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      max-width: 16ch;
      text-wrap: balance;
    }
    .authority__paragraphs {
      display: grid;
      gap: var(--space-5);
      font-size: var(--text-lg);
      line-height: 1.6;
      color: var(--color-text);
      max-width: 54ch;
    }
    .authority__photo {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 4 / 5;
      background: var(--color-surface-sunken);
      box-shadow: 0 30px 60px -30px rgba(15, 15, 18, 0.35);
    }
    @media (min-width: 1024px) {
      .authority__photo { aspect-ratio: 5 / 6; }
    }
    .authority__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 28%;
      display: block;
      filter: saturate(0.95) contrast(1.02);
    }
    .authority__photo-cap {
      position: absolute;
      left: var(--space-5);
      bottom: var(--space-5);
      right: var(--space-5);
      padding: var(--space-4) var(--space-5);
      background: color-mix(in oklab, var(--color-brand-navy-deep) 82%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: var(--radius-sm);
      color: #fff;
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      line-height: 1.4;
      border-left: 3px solid var(--color-brand-orange);
    }
    .authority__photo-cap strong {
      display: block;
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange);
      font-weight: var(--weight-semibold);
      margin-bottom: 4px;
    }
    .authority__map {
      /* Legacy class kept for safety; the new full-bleed band replaces this presentation. */
      max-width: var(--content-wide);
      margin: 0 auto;
    }

    /* ============================================================
       MAP BAND — full-bleed navy editorial treatment
       ============================================================ */
    .map-band {
      position: relative;
      isolation: isolate;
      background: var(--color-brand-navy-deep);
      color: var(--color-surface);
      padding: var(--section-y) 0 var(--space-8);
      overflow: hidden;
      border-top: 1px solid color-mix(in oklab, var(--color-brand-navy-deep) 50%, white);
      border-bottom: 1px solid color-mix(in oklab, var(--color-brand-navy-deep) 50%, white);
    }
    .map-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(
          ellipse 80% 65% at 50% 50%,
          transparent 0%,
          rgba(0, 0, 0, 0.12) 100%
        );
      pointer-events: none;
      z-index: 0;
    }
    .map-band__inner {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 var(--space-5);
    }
    @media (min-width: 768px) { .map-band__inner { padding: 0 var(--space-7); } }
    .map-band__head {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--space-3);
      margin-bottom: var(--space-7);
    }
    .map-band__eyebrow {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange);
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
    }
    .map-band__eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--color-brand-orange);
    }
    .map-band__title {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: var(--weight-semibold);
      color: #fff;
      letter-spacing: -0.02em;
      line-height: 1.1;
      text-wrap: balance;
      max-width: 22ch;
    }
    .map-band__stat {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.7);
      letter-spacing: -0.005em;
    }
    .map-band__stat strong {
      color: #fff;
      font-weight: var(--weight-semibold);
    }
    .map-coverage { max-width: 780px; margin: var(--space-8) auto 0; text-align: center; }
    .map-coverage__lead {
      font-family: var(--font-serif);
      font-size: clamp(1.15rem, 1.8vw, 1.4rem);
      line-height: 1.55;
      color: rgba(255,255,255,0.88);
      text-wrap: balance;
      margin: 0;
    }
    .map-coverage__lead strong { color: #fff; font-weight: var(--weight-semibold); }
    .map-coverage__basins {
      list-style: none;
      margin: var(--space-8) auto 0;
      padding: 0;
      max-width: 640px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 var(--space-6);
    }
    @media (min-width: 768px) { .map-coverage__basins { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .map-coverage__basins li {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.85);
      letter-spacing: -0.005em;
      padding: var(--space-4) var(--space-2);
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    .map-coverage__basins li::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--color-brand-orange);
      flex-shrink: 0;
    }

    .map-band__media {
      position: relative;
      max-width: 920px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: var(--radius-md);
      cursor: zoom-in;
    }
    .map-band__media img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: var(--radius-md);
      filter: saturate(1.04);
      image-rendering: -webkit-optimize-contrast;
      transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 600ms cubic-bezier(.2,.7,.2,1);
      transform-origin: 50% 50%;
    }
    .map-band__media:hover img {
      transform: scale(1.04);
      filter: saturate(1.12);
    }
    @media (prefers-reduced-motion: reduce) {
      .map-band__media img,
      .map-band__media:hover img { transform: none !important; transition: none !important; }
    }
    .map-band__media::after {
      /* Subtle inner glow so the bitmap edges blend into the navy band instead of looking pasted on. */
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: var(--radius-md);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 30px 80px -20px rgba(0,0,0,0.55);
      pointer-events: none;
    }
    .map-band__legend {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-3) var(--space-4);
      margin-top: var(--space-5);
      padding-top: var(--space-5);
      border-top: 1px solid rgba(255,255,255,0.12);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.65);
    }
    .map-band__legend strong {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: #fff;
      font-weight: var(--weight-semibold);
      margin-right: var(--space-3);
    }
    .map-band__basin {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: -0.005em;
      color: rgba(255,255,255,0.85);
      padding: 4px 10px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--radius-pill);
      background: rgba(255,255,255,0.04);
      transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
      cursor: default;
    }
    .map-band__basin:hover {
      background: rgba(255,255,255,0.08);
      border-color: var(--color-brand-orange);
      color: #fff;
      transform: translateY(-1px);
    }
    .map-band__basin::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--color-brand-orange);
      opacity: 0.85;
      transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    }
    .map-band__basin:hover::before {
      opacity: 1;
      transform: scale(1.3);
    }

    /* ============================================================
       PILLAR GUIDE
       ============================================================ */
    .guide-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
      align-items: center;
    }
    @media (min-width: 900px) {
      .guide-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-9); }
    }
    .guide {
      max-width: var(--content-max);
      text-align: left;
    }
    .guide h2 {
      font-size: clamp(2rem, 3.6vw, var(--text-3xl));
      letter-spacing: var(--tracking-tight);
      line-height: 1.1;
      max-width: 22ch;
      text-wrap: balance;
    }
    .guide__lead {
      margin-top: var(--space-5);
      font-size: var(--text-lg);
      line-height: 1.6;
      color: var(--color-text);
    }
    .guide__visual {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 4 / 5;
      background: var(--color-brand-navy-deep);
      box-shadow: 0 30px 60px -30px rgba(15, 15, 18, 0.45);
    }
    @media (min-width: 900px) { .guide__visual { aspect-ratio: 5 / 6; } }
    .guide__visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(0.9) brightness(0.85);
    }
    .guide__visual-tag {
      position: absolute;
      top: var(--space-5);
      left: var(--space-5);
      padding: 6px 12px;
      background: color-mix(in oklab, var(--color-brand-orange) 92%, transparent);
      color: #fff;
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      border-radius: var(--radius-pill);
    }
    .guide__visual-meta {
      position: absolute;
      left: var(--space-5);
      right: var(--space-5);
      bottom: var(--space-5);
      color: #fff;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .guide__visual-meta strong {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange);
      font-weight: var(--weight-semibold);
    }
    .guide__visual-meta span {
      font-family: var(--font-serif);
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      font-weight: var(--weight-semibold);
      line-height: 1.2;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }
    .byline {
      margin-top: var(--space-7);
      padding-top: var(--space-5);
      border-top: var(--border-thin);
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }
    .byline__avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--color-surface-sunken);
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
      border: 1px solid var(--color-hairline);
    }
    .byline__text {
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.45;
    }
    .byline__text strong {
      display: block;
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
      font-size: var(--text-base);
      margin-bottom: 2px;
    }
    .byline__text em {
      display: inline-block;
      margin-top: 2px;
      font-style: italic;
      color: var(--color-brand-orange-deep);
    }
    .guide__cta { margin-top: var(--space-7); }

    /* ============================================================
       TEAM
       ============================================================ */
    .team-hero {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: var(--space-6);
      aspect-ratio: 21 / 9;
      background: var(--color-brand-navy-deep);
    }
    @media (max-width: 767px) { .team-hero { aspect-ratio: 4 / 3; } }
    .team-hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 15%;
      display: block;
      filter: saturate(0.6) contrast(1.03) brightness(0.95);
    }
    .team-hero__overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right,
          color-mix(in oklab, var(--color-brand-navy-deep) 80%, transparent) 0%,
          color-mix(in oklab, var(--color-brand-navy-deep) 50%, transparent) 45%,
          color-mix(in oklab, var(--color-brand-navy-deep) 30%, transparent) 100%),
        color-mix(in oklab, var(--color-brand-navy-deep) 30%, transparent);
    }
    .team-hero__caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: var(--space-7);
      color: #fff;
      display: grid;
      gap: var(--space-3);
      max-width: 38ch;
    }
    @media (min-width: 768px) { .team-hero__caption { padding: var(--space-8); } }
    .team-hero__eyebrow {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange);
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
    }
    .team-hero__eyebrow::before {
      content: "";
      width: 28px; height: 1px;
      background: var(--color-brand-orange);
    }
    .team-hero__title {
      font-family: var(--font-serif);
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: #fff;
      text-wrap: balance;
    }
    .team-hero__lead {
      font-size: var(--text-base);
      color: rgba(255,255,255,0.85);
      max-width: 42ch;
      line-height: 1.5;
    }

    .team {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
      align-items: start;
    }
    .team__intro h2 {
      font-size: clamp(1.6rem, 2.4vw, 2rem);
      letter-spacing: -0.02em;
      text-wrap: balance;
      max-width: 22ch;
    }
    .team__intro p {
      margin-top: var(--space-4);
      color: var(--color-text-muted);
      font-size: var(--text-base);
      line-height: 1.6;
      max-width: 60ch;
    }
    .team__intro-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-5);
      padding-bottom: var(--space-6);
      border-bottom: 1px solid var(--color-hairline);
      margin-bottom: var(--space-7);
    }
    .team__intro-bar .arrow-link { white-space: nowrap; }

    .team__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6) var(--space-5);
    }
    @media (min-width: 640px) { .team__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-5); } }
    @media (min-width: 1024px) { .team__list { grid-template-columns: repeat(6, 1fr); gap: var(--space-5) var(--space-4); } }

    /* Single-row team: each card fills row height; capital chip pinned to the bottom so the row's chips align */
    .person > div:not(.person__photo) { display: flex; flex-direction: column; flex: 1 1 auto; }
    @media (min-width: 1024px) {
      .person__photo { aspect-ratio: 1 / 1; }
      .person__name { font-size: var(--text-base); }
      .person__title { font-size: var(--text-xs); }
      .person__role { font-size: 0.66rem; }
    }

    .person {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      text-decoration: none;
      color: inherit;
      transition: transform var(--duration-base) var(--ease-out);
    }
    .person:hover { color: inherit; transform: translateY(-2px); }
    .person:hover .person__photo { filter: saturate(1) brightness(1.02); }
    .person:hover .person__name { color: var(--color-brand-orange-deep); }
    .person:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; border-radius: var(--radius-sm); }
    .person__photo {
      aspect-ratio: 4 / 5;
      background-size: cover;
      background-position: center 18%;
      border-radius: var(--radius-md);
      filter: saturate(0.9);
      background-color: var(--color-surface-sunken);
      transition: filter var(--duration-base) var(--ease-out);
    }
    .person__role {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange-deep);
      font-weight: var(--weight-semibold);
      margin-top: var(--space-2);
    }
    .person__name {
      font-family: var(--font-serif);
      font-size: var(--text-lg);
      transition: color var(--duration-fast) var(--ease-out);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      line-height: 1.15;
      margin-top: 2px;
    }
    .person__title {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      margin-top: 2px;
      line-height: 1.4;
    }
    .person__cred {
      font-size: var(--text-sm);
      color: var(--color-text);
      margin-top: var(--space-3);
      line-height: 1.5;
    }
    .capital-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      margin-top: var(--space-5);
      padding: 4px 10px;
      background: transparent;
      color: var(--color-brand-navy);
      border: 1px solid var(--color-hairline-strong);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: -0.005em;
      font-weight: var(--weight-semibold);
      width: max-content;
    }
    .capital-chip::before {
      content: "";
      display: inline-block;
      width: 5px; height: 5px;
      background: var(--color-brand-orange);
      border-radius: 50%;
    }

    /* ============================================================
       TESTIMONIALS
       ============================================================ */
    .testimonials {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
    }
    @media (min-width: 768px) {
      .testimonials { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    }
    .testimonial {
      padding-top: var(--space-5);
      border-top: 1px solid var(--color-hairline-strong);
    }
    .testimonial__quote {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(1.2rem, 1.8vw, 1.5rem);
      line-height: 1.45;
      color: var(--color-ink);
      letter-spacing: -0.005em;
      font-weight: var(--weight-regular);
    }
    .testimonial__quote::before {
      content: "\201C";
      display: inline;
      color: var(--color-brand-orange);
      font-family: var(--font-serif);
      font-style: normal;
      margin-right: 2px;
    }
    .testimonial__quote::after { content: "\201D"; color: var(--color-brand-orange); font-style: normal; }
    .testimonial__cite {
      margin-top: var(--space-5);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      align-items: baseline;
    }
    .testimonial__cite strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
    .testimonial__cite span:not(:last-child)::after {
      content: "·";
      margin-left: var(--space-2);
      color: var(--color-hairline-strong);
    }

    /* ============================================================
       CTA BANNER
       ============================================================ */
    .cta-banner {
      position: relative;
      isolation: isolate;
      background: var(--color-brand-navy);
      color: var(--color-surface);
      padding: var(--section-y) 0;
      overflow: hidden;
    }
    .cta-banner__bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      background-size: cover;
      background-position: center;
      filter: saturate(0.7) brightness(0.45);
    }
    .cta-banner__scrim {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(135deg,
          color-mix(in oklab, var(--color-brand-navy-deep) 88%, transparent) 0%,
          color-mix(in oklab, var(--color-brand-navy) 72%, transparent) 100%);
    }
    .cta-banner__inner {
      text-align: center;
      max-width: 56rem;
      margin: 0 auto;
    }
    .cta-banner h2 {
      color: var(--color-surface);
      font-size: clamp(2rem, 4vw, var(--text-3xl));
      letter-spacing: var(--tracking-tight);
      text-wrap: balance;
    }
    .cta-banner__lead {
      margin-top: var(--space-5);
      font-size: var(--text-lg);
      color: var(--color-surface);
      opacity: 0.85;
      max-width: 56ch;
      margin-left: auto;
      margin-right: auto;
    }
    .cta-banner__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      margin-top: var(--space-7);
      justify-content: center;
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .site-footer {
      background: var(--color-brand-navy-deep);
      color: var(--color-surface);
      padding: var(--section-y) 0 var(--space-6);
    }
    .site-footer a { color: rgba(250, 247, 242, 0.7); }
    .site-footer a:hover { color: var(--color-brand-orange); }

    .footer-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
      padding-bottom: var(--space-8);
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    @media (min-width: 1024px) {
      .footer-top { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: var(--space-7); }
    }
    .footer-brand img {
      height: 38px;
      width: auto;
      filter: brightness(0) invert(1);
    }
    .footer-brand p {
      margin-top: var(--space-5);
      color: rgba(250, 247, 242, 0.65);
      font-size: var(--text-sm);
      line-height: 1.55;
      max-width: 34ch;
    }
    .footer-col h5 {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-surface);
      font-weight: var(--weight-semibold);
      margin: 0 0 var(--space-4);
    }
    .footer-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: var(--space-3);
    }
    .footer-col li { font-size: var(--text-sm); }

    .footer-office {
      font-style: normal;
      font-size: var(--text-sm);
      color: rgba(250, 247, 242, 0.7);
      line-height: 1.55;
    }
    .footer-office + .footer-office { margin-top: var(--space-5); }
    .footer-office strong {
      display: block;
      color: var(--color-surface);
      font-weight: var(--weight-semibold);
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      margin-bottom: var(--space-2);
    }
    .footer-office a.tnum {
      display: inline-block;
      color: var(--color-surface);
      font-variant-numeric: tabular-nums;
      margin-top: var(--space-2);
      font-weight: var(--weight-medium);
    }
    .footer-direct {
      margin-top: var(--space-5);
      padding-top: var(--space-4);
      border-top: 1px solid rgba(255,255,255,0.1);
      font-size: var(--text-sm);
    }
    .footer-direct h6 {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-surface);
      font-weight: var(--weight-semibold);
      margin: 0 0 var(--space-3);
    }
    .footer-direct ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: var(--space-2);
    }
    .footer-direct li {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      color: rgba(250, 247, 242, 0.7);
    }
    .footer-direct a.tnum {
      color: var(--color-surface);
      font-variant-numeric: tabular-nums;
      font-weight: var(--weight-medium);
    }

    .footer-trust {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-6);
      padding: var(--space-6) 0;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .footer-trust img {
      height: 32px;
      width: auto;
      filter: grayscale(1) brightness(2);
      opacity: 0.55;
    }
    .footer-trust span {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: rgba(250, 247, 242, 0.5);
      margin-left: auto;
    }

    .footer-disclaimer {
      padding: var(--space-6) 0 var(--space-3);
      color: rgba(250, 247, 242, 0.55);
      font-size: var(--text-xs);
      line-height: 1.6;
      max-width: 84ch;
    }
    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-4);
      padding-top: var(--space-5);
      border-top: 1px solid rgba(255,255,255,0.08);
      font-size: var(--text-xs);
      color: rgba(250, 247, 242, 0.5);
    }
    .footer-bottom__links { display: flex; gap: var(--space-5); }

    /* ============================================================
       UTILS
       ============================================================ */
    .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0);
      white-space: nowrap; border: 0;
    }

    /* ============================================================
       AUTHORITY + MAP FUSION
       Recolor Authority to navy-deep so it visually merges with
       the map-band immediately below. No content moved.
       ============================================================ */
    .authority.section--navy-deep {
      padding-bottom: var(--space-7);
    }
    .authority.section--navy-deep .eyebrow { color: var(--color-brand-orange); }
    .authority.section--navy-deep h2 { color: #fff; }
    .authority.section--navy-deep .authority__paragraphs p { color: rgba(255,255,255,0.85); }
    .authority__stats {
      margin-top: var(--space-7);
      padding-top: var(--space-6);
      border-top: 1px solid rgba(255,255,255,0.14);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .authority__stats > div { display: flex; flex-direction: column; gap: 4px; }
    .authority__stats dt {
      font-family: var(--font-serif);
      font-variant-numeric: tabular-nums;
      font-size: clamp(1.9rem, 3vw, 2.4rem);
      font-weight: var(--weight-semibold);
      color: var(--color-brand-orange);
      letter-spacing: -0.025em;
      line-height: 1;
    }
    .authority__stats dd {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.72);
      line-height: 1.4;
    }
    @media (max-width: 560px) { .authority__stats { grid-template-columns: 1fr; gap: var(--space-4); } }

    /* Inline calculator callout (compact — lives inside How it works) */
    .calc-inline {
      margin-top: var(--space-8);
      padding: var(--space-6) var(--space-7);
      background: var(--color-surface-elevated);
      border: var(--border-thin);
      border-left: 3px solid var(--color-brand-orange);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
      flex-wrap: wrap;
    }
    .calc-inline__text { display: flex; flex-direction: column; gap: 4px; max-width: 60ch; }
    .calc-inline__text strong {
      font-family: var(--font-serif);
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
    }
    .calc-inline__text span { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }
    .calc-inline .btn { flex-shrink: 0; }

    .authority__byline {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      margin-top: var(--space-6);
    }
    .authority__byline-avatar {
      width: 52px; height: 52px;
      border-radius: 50%;
      background-size: cover;
      background-position: center 18%;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.28);
    }
    .authority__byline-text {
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.7);
      line-height: 1.45;
    }
    .authority__byline-text strong {
      display: block;
      color: #fff;
      font-weight: var(--weight-semibold);
      font-size: var(--text-base);
      margin-bottom: 2px;
      font-family: var(--font-sans);
    }
    .authority__byline-text a { color: var(--color-brand-orange); font-weight: var(--weight-medium); }
    .authority__byline-text a:hover { color: #fff; }
    .authority.section--navy-deep .authority__photo-cap {
      background: color-mix(in oklab, var(--color-brand-navy) 88%, transparent);
    }
    .authority.section--navy-deep + .map-band {
      border-top: none;
      padding-top: var(--space-6);
    }

    /* Shorter replacement tiles — keeps all photos + labels, just less tall. */
    .tile__media { aspect-ratio: 16 / 10; }
    @media (min-width: 1024px) { .tile__media { aspect-ratio: 5 / 4; } }

    /* Shorter pillar-guide side visual. */
    .guide__visual { aspect-ratio: 4 / 3; }
    @media (min-width: 900px) { .guide__visual { aspect-ratio: 4 / 3; } }

    /* ============================================================
       MOBILE OPTIMIZATION PASS  (home.html — mirrors site.css since
       this page carries its own inline shell). Desktop is untouched;
       every rule is scoped to small/medium screens.
       ============================================================ */
    html { overflow-x: clip; }

    @media (max-width: 1024px) {
      .site-header__inner { min-height: 64px; gap: var(--space-4); }
      .site-header__logo img { height: 34px; }
    }

    /* 2-up footer before the desktop 5-column layout */
    @media (min-width: 560px) and (max-width: 1023px) {
      .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); }
      .footer-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 640px) {
      /* Match the system's tighter mobile section rhythm. */
      :root { --section-y: 3.25rem; }

      /* Touch targets ≥44px */
      .arrow-link { min-height: 44px; }
      .jumpto-band a { padding: 11px 16px; min-height: 44px; }
      .footer-col li { font-size: var(--text-base); }
      .footer-col li a,
      .footer-direct li a:not(.tnum),
      .footer-bottom__links a {
        display: inline-flex; align-items: center; min-height: 44px;
      }
      .footer-direct li { min-height: 44px; align-items: center; }
      .footer-trust span { margin-left: 0; width: 100%; }
      .footer-bottom { gap: var(--space-3); }
      .footer-bottom__links { flex-wrap: wrap; gap: var(--space-4) var(--space-5); }

      /* ----------------------------------------------------------
         HERO - phone layout.
         Measured at 375x812 the hero came out 856px tall, so it
         overflowed the viewport entirely and nothing below it was
         discoverable. The lead alone was 330px (10 lines at 20px)
         and the headline was set to line-height 1.02, which reads
         as cramped once it wraps to three lines. Retuned below to
         land around 680px so the next section peeks above the fold.
         Body copy stays at --text-base (17px); the token scale
         deliberately bumped that up for older readers, so it is a
         floor, not a lever.
         ---------------------------------------------------------- */
      /* .hero__inner's `padding: X 0 Y` shorthand zeroes the gutter it
         inherits from .container. On desktop the inset comes from the
         container's max-width so it goes unnoticed, but on a phone the
         container is full-bleed and the copy ends up flush against both
         screen edges. Restore an explicit side gutter. */
      .hero__inner { padding: var(--space-8) var(--space-5) var(--space-7); }
      .hero__headline {
        font-size: clamp(1.85rem, 8vw, 2.4rem);
        line-height: 1.12;
        max-width: none;
        text-wrap: pretty;
      }
      .hero__eyebrow { margin-bottom: var(--space-4); }
      .hero__lead {
        margin-top: var(--space-4);
        font-size: var(--text-base);
        line-height: 1.55;
        max-width: none;
      }
      .hero__cta {
        margin-top: var(--space-5);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
      }
      .hero__cta .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
      }
      .hero__promise {
        margin-top: var(--space-4);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
      }
      .hero__photo img { object-position: 50% 28%; }
      .hero__scrim {
        background:
          linear-gradient(to top,
            color-mix(in oklab, var(--color-brand-navy-deep) 95%, transparent) 0%,
            color-mix(in oklab, var(--color-brand-navy-deep) 82%, transparent) 45%,
            color-mix(in oklab, var(--color-brand-navy-deep) 62%, transparent) 100%);
      }

      /* CTA banner actions full-width */
      .cta-banner__actions { flex-direction: column; align-items: stretch; }
      .cta-banner__actions .btn { width: 100%; }

      /* Calculator promo "chart": the 120px label column overflows a
         360px screen, so let the label sit on its own line above the
         bar + value. */
      .calc-promo__bar-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label label" "track value";
        gap: var(--space-2) var(--space-3);
      }
      .calc-promo__bar-label { grid-area: label; }
      .calc-promo__bar-track { grid-area: track; }
      .calc-promo__bar-value { grid-area: value; }

      /* Direct-answer + numbers tiles: tighten inner padding on phones. */
      .number-tile { padding: var(--space-5); }
    }

    @media (max-width: 420px) {
      .cta-banner__actions .btn { width: 100%; }
      /* Replacement tiles: 2-up gets cramped under ~380px — go single file. */
      .replacement-grid { grid-template-columns: 1fr; }
    }