/* ============================================================
   LOAN LAB LENDING — "Instrument"
   Editorial laboratory. White paper, navy ink, instrument blue.
   Palette sampled from the live loanlablending.com Webflow build.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* House motion tokens — set BEFORE any effect (motion-library rule) */
  --wx-ease:      cubic-bezier(0.5, 0, 0, 1);
  --wx-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --wx-ease-in:   cubic-bezier(0.32, 0, 0.67, 0);
  --wx-dur:       0.9s;
  --wx-dur-exit:  0.45s;
  --wx-dur-micro: 0.2s;
  --wx-stagger:   90ms;

  /* Brand — sampled from live loanlablending.com
     navy #0D2342 · deep navy #061730 · mid blue #00509E
     bright blue #0F5CFA · tint #EEF4F8 · white · black       */
  --navy:       #0D2342;
  --navy-deep:  #061730;
  --blue:       #0F5CFA;
  --blue-mid:   #00509E;
  --blue-lift:  #6EA8FF;   /* accent legible ON navy */
  --blue-tint:  #EEF4F8;
  --blue-tint-2:#DCE6F0;

  /* Ground */
  --paper:    #FFFFFF;
  --paper-2:  var(--blue-tint);
  --paper-3:  var(--blue-tint-2);
  --ink:      var(--navy);
  --ink-2:    var(--navy-deep);
  --ink-3:    #16325C;

  /* Accent — instrument blue.
     Legacy --brass* names retained as aliases so the ~89
     existing accent rules cascade without a rename sweep. */
  --brass:      var(--blue);
  --brass-lit:  var(--blue-lift);
  --brass-deep: var(--blue-mid);

  /* Type colour */
  --tx-1: #0D2342;
  --tx-2: #48566E;
  --tx-3: #758696;
  --tx-inv-1: #FFFFFF;
  --tx-inv-2: #A8ACB5;
  --tx-inv-3: #758696;

  /* Rules */
  --rule:     rgba(13,35,66,.14);
  --rule-2:   rgba(13,35,66,.28);
  --rule-inv: rgba(255,255,255,.18);

  /* Fluid measure */
  --gut: clamp(20px, 5vw, 76px);
  --max: 1440px;

  /* Type */
  --f-disp: "Instrument Serif", Georgia, serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--tx-1);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- 3. Type scale ---------- */
/* d0 — the huge register. Used once per page, max. */
.d0 {
  font-family: var(--f-disp);
  font-size: clamp(2.9rem, 7.6vw, 6.4rem);
  line-height: .95;
  letter-spacing: -.025em;
  max-width: 15ch;
}
.d0 em, .d1 em { font-style: italic; color: var(--brass); }
/* d2s — the quiet register, for utility sections */
.d2s {
  font-family: var(--f-disp);
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.1; letter-spacing: -.012em;
}
/* d-mega — one scroll-stopping moment per page */
.d-mega {
  font-family: var(--f-disp);
  font-size: clamp(3.4rem, 12.5vw, 11rem);
  line-height: .86; letter-spacing: -.035em;
}

.d1 {
  font-family: var(--f-disp);
  font-size: clamp(2.05rem, 3.7vw, 3.15rem);
  line-height: .94;
  letter-spacing: -.022em;
}
.d2 {
  font-family: var(--f-disp);
  font-size: clamp(2.3rem, 4.9vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.018em;
}
.d3 {
  font-family: var(--f-disp);
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -.012em;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}
.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.58;
  color: var(--tx-2);
}
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; }
.small { font-size: 14px; line-height: 1.55; color: var(--tx-2); }

/* ---------- 4. Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 10vw, 150px); position: relative; }
/* keep anchor targets clear of the sticky nav */
.section[id], .hero { scroll-margin-top: 92px; }
.section--ink { background: var(--ink); color: var(--tx-inv-1); }
.section--ink .lede { color: var(--tx-inv-2); }
.section--ink .eyebrow { color: var(--brass-lit); }
.section--tint { background: var(--paper-2); }

/* Specimen head — numbered like a lab sample */
.shead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-bottom: 34px;
  margin-bottom: clamp(38px, 5vw, 64px);
  border-bottom: 1px solid var(--rule);
}
.section--ink .shead { border-color: var(--rule-inv); }
.shead__no {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--tx-3);
}
.section--ink .shead__no { color: var(--tx-inv-3); }
.shead__lede { max-width: 46ch; }
@media (min-width: 900px) {
  .shead {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
    gap: 48px;
  }
  .shead__lede { justify-self: end; }
}

/* ---------- 5. Texture ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hairgrid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px);
  background-size: 25% 100%;
  opacity: .8;
}
.section--ink .hairgrid { background-image: linear-gradient(to right, var(--rule-inv) 1px, transparent 1px); }

/* ---------- 6. Topbar ---------- */
.topbar {
  background: var(--ink);
  color: var(--tx-inv-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
}
.topbar__in {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding-block: 10px; flex-wrap: wrap;
}
.topbar a:hover { color: var(--brass-lit); }

/* ---------- 6b. Skip link ----------
   Off-screen until focused, then it lands over the topbar. Ten nav items
   on 118 pages is a lot of tabbing to reach the content otherwise
   (WCAG 2.4.1). Target is #ll-main, placed after the drawer by
   sync-shell.mjs. */
.skiplink {
  position: absolute; left: 8px; top: -60px; z-index: 400;
  padding: 14px 18px; background: var(--ink); color: var(--tx-inv-1);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; border-radius: 2px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: top var(--wx-dur-micro) var(--wx-ease);
}
.skiplink:focus { top: 8px; outline: 2px solid var(--brass-lit); outline-offset: 2px; }
#ll-main { scroll-margin-top: 90px; }
#ll-main:focus { outline: none; }

/* ---------- 7. Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding-block: 20px;
  transition: padding var(--wx-dur-micro) var(--wx-ease);
}
.nav.is-stuck .nav__in { padding-block: 12px; }
/* ---- Wordmark, rebuilt from the client mark ----
   Their supplied asset is a 1449x568 WhatsApp export with a baked-in white
   background and drop shadow, so it cannot sit on the dark sections. This
   reproduces the LOAN/LAB weight contrast as live text: crisp at any size,
   transparent, and legible on either ground. */
.logo { display: flex; flex-direction: column; gap: 3px; line-height: 1; }

/* Real wordmark, replacing the CSS-text version. The supplied PNG already
   contains "LENDING", so there is no separate tag line any more.
   Auto-cropped and downscaled from the 1563px squares the client sent —
   sizing by height keeps the nav and footer marks optically equal even
   though the white version is a hair taller from its glow. */
/* Sized by HEIGHT and fluid, so the mark grows with the viewport instead
   of sitting at one fixed size. Below 620px a <picture> swaps in the
   wordmark-only crop: "LENDING" is just 23% of the lockup's height, so
   at small sizes it rendered under 8px and read as grey mush. The
   wordmark alone can then be set larger and stays crisp. */
.logo__pic { display: block; }
.logo__img {
  display: block; width: auto;
  height: clamp(30px, 2.5vw, 38px);
  transition: opacity var(--wx-dur-micro) var(--wx-ease), height var(--wx-dur-micro) var(--wx-ease);
}
.logo:hover .logo__img { opacity: .78; }
.nav.is-stuck .logo__img { height: clamp(26px, 2.1vw, 32px); }
.logo--foot .logo__img { height: clamp(34px, 2.9vw, 44px); }
.drawer .logo__img { height: 30px; }

/* wordmark-only crop is ~2x wider per unit height, so it needs less of it */
@media (max-width: 619px) {
  .logo__img { height: 19px; }
  .nav.is-stuck .logo__img { height: 17px; }
  .logo--foot .logo__img { height: 22px; }
  .drawer .logo__img { height: 19px; }
}
.logo__wm {
  font-family: "Jost", var(--f-body);
  font-size: 25px; line-height: .96;
  letter-spacing: .01em;
  color: var(--tx-1);
  white-space: nowrap;
}
.logo__thin { font-weight: 300; }
.logo__bold { font-weight: 600; letter-spacing: -.005em; }
.logo__wm--inv { color: var(--tx-inv-1); }
.logo--foot { align-items: flex-start; }
.logo__tag {
  font-family: "Jost", var(--f-body); font-weight: 300; font-size: 9.5px;
  letter-spacing: .42em; text-transform: uppercase; color: var(--tx-3);
  padding-left: 2px;
}
.logo--foot .logo__tag, .drawer .logo__tag { color: var(--tx-inv-3); }
.logo__wm, .logo__tag { white-space: nowrap; }
.nav__links { display: none; gap: 30px; align-items: center; flex-wrap: nowrap; }
@media (min-width: 1040px) { .nav__links { display: flex; } }
.nav__links a {
  font-size: 14px; letter-spacing: .005em; position: relative;
  padding-block: 4px; white-space: nowrap;
}
/* eight items do not fit at 30px gaps below ~1400 — tighten rather than wrap */
@media (min-width: 1040px) and (max-width: 1399px) {
  .nav__links { gap: 19px; }
  .nav__links a { font-size: 13px; }
}
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__cta .btn { white-space: nowrap; }

/* Hide secondary CTA + logo tag on narrow screens so nothing wraps */
@media (max-width: 720px) {
  .logo__tag { display: none; }
  .nav__cta .btn--line { display: none; }
}

/* Burger */
.burger {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--rule-2); border-radius: 2px;
  transition: background var(--wx-dur-micro) var(--wx-ease),
              border-color var(--wx-dur-micro) var(--wx-ease);
}
.burger:hover { background: var(--ink); border-color: var(--ink); }
.burger:hover .burger__b { background: var(--tx-inv-1); }
.burger__ic { display: grid; gap: 5px; width: 18px; }
.burger__b { height: 1.5px; background: var(--ink); transition: background var(--wx-dur-micro) var(--wx-ease); }
@media (min-width: 1040px) { .burger { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 90vw); z-index: 500;
  background: var(--ink); color: var(--tx-inv-1);
  padding: 26px var(--gut) 40px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 42px; }
.drawer__x { font-size: 26px; line-height: 1; color: var(--tx-inv-2); padding: 6px; }
.drawer__x:hover { color: var(--brass-lit); }
.drawer nav { display: grid; }
.drawer nav a {
  font-family: var(--f-disp); font-size: 2rem; letter-spacing: -.015em;
  padding-block: 15px; border-bottom: 1px solid var(--rule-inv);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  transition: color var(--wx-dur-micro) var(--wx-ease);
}
.drawer nav a:hover { color: var(--brass-lit); }
.drawer nav a .n {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; color: var(--tx-inv-3);
}
.drawer__foot { margin-top: 38px; display: grid; gap: 11px; }
.drawer__foot .btn { justify-content: center; }
.drawer__meta {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule-inv);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  color: var(--tx-inv-3); line-height: 2;
}

/* ---------- 8. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 26px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background var(--wx-dur-micro) var(--wx-ease),
              color var(--wx-dur-micro) var(--wx-ease),
              border-color var(--wx-dur-micro) var(--wx-ease),
              transform var(--wx-dur-micro) var(--wx-ease-out);
}
.btn--solid { background: var(--ink); color: var(--tx-inv-1); }
.btn--solid:hover { background: var(--brass); }
.btn--line { border-color: var(--rule-2); color: var(--tx-1); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: var(--tx-inv-1); }
.btn--brass { background: var(--brass); color: #fff; }
.btn--brass:hover { background: var(--brass-deep); }
.btn--inv { border: 1px solid var(--rule-inv); color: var(--tx-inv-1); }
.btn--inv:hover { background: var(--tx-inv-1); color: var(--ink); border-color: var(--tx-inv-1); }
.btn--sm { padding: 11px 18px; font-size: 13px; }
.btn__ar { transition: transform var(--wx-dur-micro) var(--wx-ease-out); }
.btn:hover .btn__ar { transform: translateX(4px); }

/* Text + arrow CTA with hairline (card standard) */
.tlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  padding-top: 16px; margin-top: 20px;
  border-top: 1px solid var(--rule);
  width: 100%;
  color: var(--tx-1);
  transition: color var(--wx-dur-micro) var(--wx-ease);
}
.tlink:hover { color: var(--brass); }
.tlink span { transition: transform var(--wx-dur-micro) var(--wx-ease-out); }
.tlink:hover span { transform: translateX(5px); }

/* ---------- 9. Hero ---------- */
.hero { position: relative; padding-block: clamp(64px, 9vw, 128px) clamp(56px, 7vw, 104px); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.28fr .72fr; align-items: end; } }
.hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero__eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 180px; }
.hero h1 { margin-bottom: 30px; }
.hero h1 em { font-style: italic; color: var(--brass); }
.hero__sub { max-width: 50ch; margin-bottom: 38px; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sequenced readout — the hero "calculation" */
.seq {
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  border-radius: 3px;
  padding: clamp(22px,2.4vw,30px);
}
.seq__t {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tx-3);
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.seq__st { color: var(--brass); }
#seq-stamp { transition: opacity var(--wx-dur-exit) var(--wx-ease); }
.seq.is-done #seq-stamp { color: var(--tx-1); }
.seq.is-done .seq__st { color: var(--tx-3); }

.seq__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding-block: 13px; border-bottom: 1px solid var(--rule);
}
.seq__k { font-size: 14px; color: var(--tx-2); }
.seq__v {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .04em;
  text-align: right; color: var(--tx-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--wx-dur-exit) var(--wx-ease);
}
.seq__row.is-rolling .seq__v { color: var(--brass); }
.seq__row.is-set .seq__v { color: var(--tx-1); }

.seq__rule { height: 1px; background: var(--rule); margin-block: 18px 4px; overflow: hidden; }
.seq__rule span {
  display: block; height: 100%; width: 0;
  background: var(--brass);
  transition: width .85s var(--wx-ease);
}

.seq__out { padding-top: 10px; position: relative; }

/* the stamp — hits like a rubber stamp on a lab report */
.seq__stampmark {
  position: absolute; right: 2px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px;
  border: 1.5px solid var(--brass);
  border-radius: 2px;
  color: var(--brass);
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .22em; text-transform: uppercase;
  background: rgba(169,118,46,.05);
  opacity: 0;
  transform: rotate(-7deg) scale(1.55);
  pointer-events: none;
}
.seq__stampmark svg { width: 15px; height: 15px; flex: none; }
.seq.is-stamped .seq__stampmark {
  animation: stamp-hit .42s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes stamp-hit {
  0%   { opacity: 0;   transform: rotate(-14deg) scale(1.55); }
  55%  { opacity: 1;   transform: rotate(-7deg)  scale(.94);  }
  100% { opacity: 1;   transform: rotate(-7deg)  scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .seq.is-stamped .seq__stampmark { animation: none; opacity: 1; transform: rotate(-7deg); }
}
@media (max-width: 460px) {
  .seq__stampmark { position: static; margin-top: 14px; transform: none; }
  .seq.is-stamped .seq__stampmark { animation: none; opacity: 1; transform: none; }
}
.seq__out-l {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: 8px;
}
.seq__out-n {
  font-family: var(--f-disp);
  font-size: clamp(2.6rem,4.4vw,3.6rem); line-height: 1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.seq__out-n .cur { color: var(--brass); }

/* the unlock beat */
.seq__unlock {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.5; color: var(--tx-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--wx-dur) var(--wx-ease) .1s,
              transform var(--wx-dur) var(--wx-ease) .1s;
}
.seq__unlock em {
  font-family: var(--f-disp); font-style: italic;
  font-size: 1.16em; color: var(--tx-1);
}
.seq.is-done .seq__unlock { opacity: 1; transform: none; }

.seq__fine {
  margin-top: 14px; font-size: 11px; line-height: 1.6; color: var(--tx-3);
  opacity: 0; transition: opacity var(--wx-dur) var(--wx-ease) .3s;
}
.seq.is-done .seq__fine { opacity: 1; }

/* ---------- 10. Marquee strip ---------- */
.strip {
  border-block: 1px solid var(--rule);
  background: var(--paper-2);
  padding-block: 17px;
  overflow: hidden;
}
.strip__item {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3);
  padding-inline: 34px;
  display: inline-flex; align-items: center; gap: 34px;
}
.strip__item::after { content: "◆"; color: var(--brass); font-size: 7px; }

/* ---------- 11. Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4,1fr); } }
.stat { background: var(--paper); padding: clamp(24px,3vw,38px); }
.stat__n {
  font-family: var(--f-disp);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1; letter-spacing: -.02em; margin-bottom: 10px;
}
.stat__l { font-family: var(--f-mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--tx-3); }

/* ---------- 12. Program cards ---------- */
.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px)  { .cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3,1fr); } }
.card {
  background: var(--paper);
  padding: clamp(26px,3vw,38px);
  display: flex; flex-direction: column;
  transition: background var(--wx-dur-micro) var(--wx-ease);
}
.card:hover { background: var(--paper-2); }
.card__no { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; color: var(--brass); margin-bottom: 22px; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--tx-2); font-size: 15px; flex: 1; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px;
}
.tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3);
  border: 1px solid var(--rule-2); border-radius: 2px;
  padding: 4px 9px;
}

/* ---------- 11b. PROGRAM PANELS (expandrow) ---------- */
.paths { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 1000px) { .paths { flex-direction: row; height: 430px; } }

.path .path__plot {
  position: absolute; left: 0; right: 0; top: 34%; height: 34%;
  width: 100%; opacity: .3;
  transition: opacity var(--wx-dur) var(--wx-ease), transform var(--wx-dur) var(--wx-ease);
}
.path__plot path { fill: none; stroke: var(--brass); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.path:hover .path__plot { opacity: .12; transform: translateY(-8px); }
.path .path__cap {
  position: absolute; left: clamp(22px,2.4vw,30px); right: clamp(22px,2.4vw,30px);
  top: calc(34% + 34% + 14px);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
  transition: opacity var(--wx-dur-exit) var(--wx-ease);
}
.path:hover .path__cap { opacity: 0; }
@media (max-width: 999px) {
  .path__plot, .path__cap { display: none; }
}

.path {
  position: relative; overflow: hidden;
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px,2.4vw,30px);
  min-height: 128px;
  transition: background var(--wx-dur) var(--wx-ease);
}
.path::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--paper-2), var(--paper-3));
  opacity: 0; transition: opacity var(--wx-dur) var(--wx-ease);
}
.path:hover::before { opacity: 1; }
.path > * { position: relative; z-index: 1; }

.path .path__no {
  position: absolute; top: clamp(22px,2.4vw,30px); left: clamp(22px,2.4vw,30px);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; color: var(--brass);
}
.path__ttl {
  font-family: var(--f-disp); font-size: clamp(1.35rem,1.7vw,1.72rem);
  line-height: 1.08; letter-spacing: -.012em; margin-bottom: 10px;
}
.path__body {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--wx-dur) var(--wx-ease),
              opacity var(--wx-dur-exit) var(--wx-ease);
}
.path:hover .path__body { max-height: 260px; opacity: 1; }
.path__body p { font-size: 14.5px; color: var(--tx-2); margin-bottom: 14px; }
.path__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.path__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass);
}
.path__go span { transition: transform var(--wx-dur-micro) var(--wx-ease-out); }
.path:hover .path__go span { transform: translateX(5px); }
/* on mobile every panel is open — no hover to reveal with */
@media (max-width: 999px) {
  .path__body { max-height: none; opacity: 1; }
  /* Reserve room for the absolutely-positioned 01/02 marker. Needs BOTH
     classes: .hrun__card sets the `padding` shorthand further down this
     file, and at equal specificity the later rule wins and resets this
     back to 22px — which drops the title straight onto the marker. */
  .path, .path.hrun__card { padding-top: 54px; }
}

/* ---------- 11c. QUICK LEAD FORM ---------- */
.quick { display: grid; gap: clamp(30px,4vw,58px); align-items: start; }
@media (min-width: 980px) { .quick { grid-template-columns: 1fr 1fr; } }
.why { display: grid; gap: 0; }
.why__row {
  display: grid; grid-template-columns: 46px 1fr; gap: 20px;
  padding-block: 22px; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.why__row:first-child { border-top: 1px solid var(--rule); }
.why__n {
  font-family: var(--f-disp); font-size: 1.7rem; line-height: 1;
  color: var(--brass); letter-spacing: -.02em;
}
.why__t { font-family: var(--f-disp); font-size: 1.2rem; margin-bottom: 5px; letter-spacing: -.01em; }
.why__d { font-size: 14.5px; color: var(--tx-2); }

.qform {
  border: 1px solid var(--rule-2); background: var(--paper-2);
  border-radius: 3px; padding: clamp(24px,2.8vw,34px);
}
.qform__t {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tx-3);
  padding-bottom: 15px; margin-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.qf { margin-bottom: 17px; }
.qf label {
  display: block; font-size: 12.5px; color: var(--tx-2); margin-bottom: 7px;
}
.qf input, .qf select {
  width: 100%; padding: 13px 14px;
  font-family: var(--f-body); font-size: 15px; color: var(--tx-1);
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 2px;
  transition: border-color var(--wx-dur-micro) var(--wx-ease),
              background var(--wx-dur-micro) var(--wx-ease);
}
.qf input:focus, .qf select:focus { outline: none; border-color: var(--brass); background: #fff; }
.qf__two { display: grid; gap: 13px; }
@media (min-width: 520px) { .qf__two { grid-template-columns: 1fr 1fr; } }
.qform .btn { width: 100%; justify-content: center; margin-top: 6px; }
.qform__note { margin-top: 15px; font-size: 11.5px; line-height: 1.7; color: var(--tx-3); }

/* ---------- 11d. HERO SPECIMEN STRIP ----------
   Rocket's finding: domestic detail beats transaction imagery. No keys, no
   handshake, no sold sign. Works empty as tonal tiles; better with real photos. */
.hero { padding-bottom: 0; }
.hero__plot {
  position: absolute; inset: auto 0 8% 0; height: 62%; width: 100%;
  pointer-events: none; opacity: .16; z-index: 0;
}
.hero__plot path {
  fill: none; stroke: var(--brass); stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: d 1.6s var(--wx-ease);
}
.hero .wrap { position: relative; z-index: 1; }

.hero__strip { margin-top: clamp(40px,5vw,72px); position: relative; z-index: 1; }
.hero__strip-lbl {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tx-3);
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.spec-tiles {
  display: grid; gap: clamp(10px,1.2vw,18px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .spec-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .spec-tiles { grid-template-columns: repeat(6, 1fr); } }

.spec-tile { margin: 0; }
.spec-tile__img {
  aspect-ratio: 4/5; overflow: hidden; border-radius: 2px;
  background: linear-gradient(150deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--rule);
  transition: transform var(--wx-dur) var(--wx-ease),
              border-color var(--wx-dur) var(--wx-ease);
}
.spec-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.spec-tile:hover .spec-tile__img { transform: translateY(-5px); border-color: var(--rule-2); }
.spec-tile figcaption {
  display: block; margin-top: 11px;
  font-size: 12px; line-height: 1.45; color: var(--tx-3);
}
.spec-tile figcaption b {
  display: block; font-weight: 500; color: var(--tx-1); font-size: 13px; margin-bottom: 2px;
}
.spec-tile__p {
  display: block; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass);
}
.spec-tile__n {
  display: block; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .2em; color: var(--brass); margin-bottom: 4px;
}
/* every other tile drops slightly — breaks the rectangle grid */
@media (min-width: 1000px) {
  .spec-tile:nth-child(even) { transform: translateY(26px); }
}

/* ---------- 11e. TEASER (condensed section + link out) ---------- */
.teaser { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 760px) { .teaser { grid-template-columns: repeat(3,1fr); } }
.section--ink .teaser { background: var(--rule-inv); border-color: var(--rule-inv); }
.tz { background: var(--paper); padding: clamp(22px,2.6vw,32px); }
.section--ink .tz { background: var(--ink); }
.tz__n { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; color: var(--brass); margin-bottom: 16px; }
.section--ink .tz__n { color: var(--brass-lit); }
.tz h3 { font-family: var(--f-disp); font-size: 1.32rem; letter-spacing: -.012em; margin-bottom: 8px; }
.tz p { font-size: 14.5px; color: var(--tx-2); }
.section--ink .tz p { color: var(--tx-inv-2); }

/* ---------- 12a. MARKET RATE STRIP ----------
   Third-party survey data inside the Payment Lab. Deliberately
   quieter than the estimator it sits above: this is context, not
   an offer, and it must never read as a headline rate. Generated
   by build-rates.mjs — see that file's compliance contract. */
.mkt {
  margin-bottom: clamp(28px,3.4vw,44px);
  padding: clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  border: 1px solid var(--rule-inv);
  background: rgba(255,255,255,.03);
  border-radius: 3px;
}
.mkt__h {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule-inv);
}
.mkt__eyebrow, .mkt__date {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase;
}
.mkt__eyebrow { color: var(--brass-lit); }
.mkt__date { color: var(--tx-inv-3); }
/* the rule lives here, not on .mkt__note — the note is width-capped for
   readability, so a border on it stops short of the panel edge */
.mkt__rows {
  display: grid; gap: 0 clamp(24px,4vw,64px);
  padding-block: 16px 14px;
  border-bottom: 1px solid var(--rule-inv);
}
@media (min-width: 640px) { .mkt__rows { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.mkt__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding-block: 9px;
}
@media (max-width: 639px) { .mkt__row + .mkt__row { border-top: 1px solid var(--rule-inv); } }
.mkt__k {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-inv-2);
}
.mkt__v {
  font-family: var(--f-disp); font-size: clamp(1.6rem,2.2vw,2.05rem);
  line-height: 1; letter-spacing: -.02em; color: var(--tx-inv-1);
}
.mkt__pct { font-size: .52em; margin-left: 2px; color: var(--tx-inv-2); }
.mkt__note {
  margin-top: 14px;
  font-size: 12px; line-height: 1.6; color: var(--tx-inv-3); max-width: 78ch;
}
.mkt__note strong { color: var(--tx-inv-2); font-weight: 600; }
.mkt__note a { color: var(--brass-lit); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 12b. THE PAYMENT LAB ---------- */
.lab { display: grid; gap: clamp(28px,3.4vw,52px); align-items: start; }
@media (min-width: 1000px) { .lab { grid-template-columns: .92fr 1.08fr; } }

.lab__panel {
  border: 1px solid var(--rule-inv);
  background: rgba(255,255,255,.022);
  border-radius: 3px; padding: clamp(22px,2.6vw,32px);
}
.lab__t {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tx-inv-3);
  padding-bottom: 15px; margin-bottom: 22px; border-bottom: 1px solid var(--rule-inv);
  display: flex; justify-content: space-between; align-items: center;
}
.lab__t .live {
  display: inline-flex; align-items: center; gap: 7px; color: var(--brass-lit);
}
.lab__t .live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass-lit); animation: pulse 2.2s var(--wx-ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Field */
.fld { margin-bottom: 22px; }
.fld__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.fld__l { font-size: 13.5px; color: var(--tx-inv-2); }
.fld__v {
  font-family: var(--f-mono); font-size: 14px; letter-spacing: .03em;
  color: var(--tx-inv-1);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; background: var(--rule-inv);
  border-radius: 2px; outline: none; margin: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brass-lit); cursor: grab;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1px var(--brass-lit);
  transition: transform var(--wx-dur-micro) var(--wx-ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.28); }
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--ink);
  background: var(--brass-lit); cursor: grab; box-shadow: 0 0 0 1px var(--brass-lit);
}
.fld__in {
  font-family: var(--f-mono); font-size: 14px; letter-spacing: .03em;
  color: var(--tx-inv-1); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-inv);
  width: 8ch; text-align: right; padding: 2px 3px;
  transition: border-color var(--wx-dur-micro) var(--wx-ease);
}
.fld__in--sm { width: 5ch; }
.fld__in:focus { outline: none; border-bottom-color: var(--brass-lit); }
.fld__in::-webkit-outer-spin-button, .fld__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fld__scale {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--tx-inv-3);
}

/* Segmented term picker — 100ms sliding indicator (stolen, tuned) */
.seg { position: relative; display: flex; border: 1px solid var(--rule-inv); border-radius: 2px; overflow: hidden; }
.seg__ind {
  position: absolute; top: 0; bottom: 0; left: 0; width: 33.333%;
  background: var(--brass); z-index: 0;
  transition: left .1s ease-out, width .1s ease-out;
}
.seg button {
  position: relative; z-index: 1; flex: 1; padding: 11px 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--tx-inv-2); transition: color .1s;
}
.seg button[aria-pressed="true"] { color: #fff; }

/* Readout */
.readout { text-align: left; margin-bottom: 26px; }
.readout__l {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tx-inv-3); margin-bottom: 10px;
}
.readout__n {
  font-family: var(--f-disp);
  font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: .92;
  letter-spacing: -.025em; color: var(--tx-inv-1);
  font-variant-numeric: tabular-nums;
}
.readout__n .cur { color: var(--brass-lit); }
.readout__sub { font-size: 13.5px; color: var(--tx-inv-3); margin-top: 12px; }

/* Donut + legend */
.split-viz { display: grid; gap: 26px; align-items: center; }
@media (min-width: 560px) { .split-viz { grid-template-columns: 168px 1fr; } }
.donut { position: relative; width: 168px; height: 168px; }
.donut svg { transform: rotate(-90deg); overflow: visible; }
.donut circle { fill: none; stroke-width: 13; stroke-linecap: butt; transition: stroke-dasharray .5s var(--wx-ease); }
.donut__mid {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.donut__mid b { font-family: var(--f-disp); font-size: 1.5rem; color: var(--tx-inv-1); display: block; line-height: 1; }
.donut__mid span { font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; color: var(--tx-inv-3); }
.leg { display: grid; gap: 12px; }
.leg__row {
  display: grid; grid-template-columns: 11px 1fr auto; gap: 12px; align-items: center;
  padding-bottom: 11px; border-bottom: 1px solid var(--rule-inv);
}
.leg__row:last-child { border-bottom: 0; }
.leg__sw { width: 11px; height: 11px; border-radius: 2px; }
.leg__k { font-size: 13.5px; color: var(--tx-inv-2); }
.leg__v { font-family: var(--f-mono); font-size: 13px; color: var(--tx-inv-1); font-variant-numeric: tabular-nums; }

/* Payoff curve */
.curve { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule-inv); }
.curve__t {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx-inv-3);
}
.curve svg { width: 100%; height: 108px; overflow: visible; }
.curve .ln { fill: none; stroke-width: 1.6; }
.curve .ar { stroke: none; }

.lab__note {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule-inv);
  font-size: 11.5px; line-height: 1.75; color: var(--tx-inv-3);
}

/* ---------- 12c. Instrument accents ---------- */
.plot { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.plot path { fill: none; stroke: var(--brass); stroke-width: 1.1; }

.ticker {
  display: inline-flex; font-variant-numeric: tabular-nums;
}

/* Process progress rail */
.proc { position: relative; }
.proc__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--rule-inv); display: none;
}
@media (min-width: 880px) { .proc__rail { display: block; } }
.proc__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(to bottom, var(--brass-lit), var(--brass));
}
.step { position: relative; }
.step__dot {
  position: absolute; left: -39px; top: calc(clamp(28px,3.4vw,42px) + 4px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--rule-inv);
  display: none;
  transition: background var(--wx-dur) var(--wx-ease),
              border-color var(--wx-dur) var(--wx-ease),
              transform var(--wx-dur) var(--wx-ease-out);
}
@media (min-width: 880px) { .step__dot { display: block; } }
.step.is-lit .step__dot { background: var(--brass-lit); border-color: var(--brass-lit); transform: scale(1.25); }
.step.is-lit .step__no { color: #fff; }
@media (min-width: 880px) { .proc { padding-left: 34px; } }

/* ---------- 13. Process rail ---------- */
.proc { display: grid; gap: 0; margin-top: -18px; }
.step {
  display: grid; gap: 16px;
  padding-block: clamp(28px,3.4vw,42px);
  border-top: 1px solid var(--rule-inv);
  align-items: start;
}
.step:first-child { border-top: 0; }
.step:last-child { border-bottom: 1px solid var(--rule-inv); }
@media (min-width: 880px) { .step { grid-template-columns: 92px 1fr 1.05fr; gap: 44px; } }
.step__no {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em;
  color: var(--brass-lit);
  display: flex; align-items: center; gap: 12px;
}
.step__no::after { content: ""; flex: 1; height: 1px; background: var(--rule-inv); }
@media (min-width: 880px) { .step__no::after { display: none; } }
.step h3 { color: var(--tx-inv-1); }
.step p { color: var(--tx-inv-2); font-size: 15px; }
.step__when {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tx-inv-3); margin-top: 10px;
}

/* ---------- 14. Myth / Fact ---------- */
.myths { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 900px) { .myths { grid-template-columns: repeat(2,1fr); } }
.myth { background: var(--paper); padding: clamp(26px,3vw,40px); }
.myth__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: #A33B2A; margin-bottom: 16px;
}
.myth__tag::before { content: ""; width: 16px; height: 1px; background: #A33B2A; }
.myth h3 { margin-bottom: 18px; }
.myth__fact {
  border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 4px;
}
.myth__fact .lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 10px;
}
.myth__fact .lbl::before { content: ""; width: 16px; height: 1px; background: var(--brass); }
.myth__fact p { color: var(--tx-2); font-size: 15px; }

/* ---------- 15. Team ---------- */
.team { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px)  { .team { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .team { grid-template-columns: repeat(4,1fr); } }
.lo { background: var(--paper); overflow: hidden; }
.lo__ph {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  background: linear-gradient(150deg, var(--paper-2), var(--paper-3));
}
.lo__ph img { width: 100%; height: 100%; object-fit: cover; }
.lo__ph::after {
  content: attr(data-init);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-disp); font-size: 2.4rem; color: var(--tx-3);
  opacity: .42;
}
.lo__body { padding: 22px; }
.lo__name { font-family: var(--f-disp); font-size: 1.35rem; letter-spacing: -.01em; margin-bottom: 3px; }
.lo__role { font-size: 13px; color: var(--tx-2); margin-bottom: 12px; }
.lo__nmls {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--tx-3); padding-top: 12px; border-top: 1px solid var(--rule);
}

/* ---- awaiting-headshot placeholder ----
   Same box as a real photo so the grid never reflows when a headshot
   lands. Initials in the display face, on the pale brand tint. */
.lo__ph--tbd {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--paper-2), var(--paper-3));
}
.lo__ph--tbd span {
  font-family: var(--f-disp); font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  letter-spacing: .02em; color: var(--tx-3); opacity: .55;
}
.team--sm .lo__ph--tbd span { font-size: clamp(1.4rem, 3vw, 1.9rem); }

/* ---- click-to-call on each officer card ----
   Routes to the main office line; see build-team.mjs. Sized to the 44px
   tap target on touch, same as the other card links. */
.lo__call { margin-top: 10px; }
.lo__call a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass);
}
.lo__call a::before {
  content: ""; width: 11px; height: 11px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.4 11.4 0 00.57 3.6 1 1 0 01-.25 1z'/%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'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.4 11.4 0 00.57 3.6 1 1 0 01-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.team--sm .lo__call { margin-top: 8px; }
.team--sm .lo__call a { font-size: 9px; }
@media (max-width: 1024px) { .lo__call a { min-height: 44px; } }

/* ---- production stat line (RETR feed, opt-in per rep) ----
   Only rendered by build-team.mjs when the rep opted in AND the
   figures came from a dated RETR export. See RETR-INTEGRATION.md. */
.lo__prod { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--rule); }
.lo__prodv {
  display: block; font-family: var(--f-disp); font-size: 1.42rem;
  line-height: 1.04; letter-spacing: -.015em; color: var(--blue);
}
.lo__prodl {
  display: block; margin-top: 2px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-2);
}
.lo__prodm {
  display: block; margin-top: 7px;
  font-size: 10px; line-height: 1.42; color: var(--tx-3);
}
.team--sm .lo__prod { margin-top: 9px; padding-top: 8px; }
.team--sm .lo__prodv { font-size: 1.12rem; }
.team--sm .lo__prodm { display: none; }

/* ---- brokers lead the section; the shead rule is enough ---- */
.rost--brokers { margin-top: 0; padding-top: 0; border-top: 0; }

/* Squares off the short final row of the broker grid. See build-team.mjs. */
/* One column: no filler ever, or it makes an empty row.
   Two columns: only the fillers marked data-f2.
   Four columns: all of them. See fillers() in build-team.mjs. */
.lo--fill { display: none; }
@media (min-width: 640px)  { .lo--fill[data-f2] { display: block; } }
@media (min-width: 1040px) { .lo--fill { display: block; } }

/* The leadership grid runs 2-up below 640 and 4-up above — a different
   ladder from the broker grid's 1 / 2 / 4 — so its fillers appear one
   breakpoint earlier at each step. */
.rost--lead .lo--fill[data-f2] { display: block; }
@media (min-width: 640px) { .rost--lead .lo--fill { display: block; } }

/* ---- ownership & leadership — closes the team section ----
   Deliberately smaller than the broker grid above it: the reps
   are the product, ownership is the signature at the bottom. */
.rost--lead { margin-top: 46px; }
/* 4-across from tablet up so the 4 owners fill exactly one row — the
   inherited 3-col rule left a bare grey cell hanging off the end. */
@media (min-width: 640px)  { .rost--lead .team--sm { grid-template-columns: repeat(4,1fr); } }
@media (min-width: 1040px) { .rost--lead .team--sm { max-width: 740px; } }

/* ---------- 16. Split feature ---------- */
.split { display: grid; gap: clamp(36px,5vw,72px); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } }
.split--flip .split__media { order: -1; }
.split__media {
  aspect-ratio: 5/4; background: var(--ink-2);
  border-radius: 3px; overflow: hidden; position: relative;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.checks { display: grid; gap: 14px; margin-top: 30px; }
.check { display: flex; gap: 14px; align-items: baseline; }
.check__m { color: var(--brass); font-family: var(--f-mono); font-size: 11px; flex: none; }
.check p { font-size: 15px; color: var(--tx-2); }
.section--ink .check p { color: var(--tx-inv-2); }
.section--ink .check__m { color: var(--brass-lit); }

/* ---------- 17. Coverage index ---------- */
.cov { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px)  { .cov { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .cov { grid-template-columns: repeat(4,1fr); } }
.cov__col { background: var(--paper); padding: clamp(22px,2.6vw,32px); }
.cov__h {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.cov__col li { padding-block: 7px; }
.cov__col a {
  font-size: 14.5px; color: var(--tx-2);
  transition: color var(--wx-dur-micro) var(--wx-ease);
}
.cov__col a:hover { color: var(--brass); }

/* ---------- 18. CTA band ---------- */
.band { background: var(--brass); color: #fff; }
.band .d2 { max-width: 20ch; }
.band__in { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .band__in { grid-template-columns: 1.2fr .8fr; } }
.band .btn--inv { border-color: rgba(255,255,255,.42); color: #fff; }
.band .btn--inv:hover { background: #fff; color: var(--brass-deep); border-color: #fff; }

/* ---------- 19. Footer ---------- */
.foot { background: var(--ink); color: var(--tx-inv-2); padding-block: clamp(56px,7vw,88px) 34px; }
.foot__grid { display: grid; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid var(--rule-inv); }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot h4 {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tx-inv-3); margin-bottom: 18px;
}
.foot li { padding-block: 6px; }
.foot a { font-size: 14px; transition: color var(--wx-dur-micro) var(--wx-ease); }
.foot a:hover { color: var(--brass-lit); }
.foot .logo__mark { color: var(--tx-inv-1); }
.legal { padding-top: 28px; font-size: 12px; line-height: 1.7; color: var(--tx-inv-3); }
.legal p + p { margin-top: 12px; }
.legal__marks { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.ehl {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tx-inv-2);
}
.ehl svg { flex: none; }

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ============================================================
   INTERIOR PAGES
   ============================================================ */
.pg-intro { padding-block: clamp(52px,6.5vw,104px) clamp(30px,3.4vw,50px); }
.pg-intro .d0 { margin-bottom: 28px; }
.pg-intro__lede { max-width: 58ch; }
.pg-intro__acts { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* fact row */
.facts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 620px)  { .facts { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4,1fr); } }
.fact { background: var(--paper-2); padding: clamp(20px,2.2vw,28px); }
.fact__k {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 10px;
}
.fact__v { font-family: var(--f-disp); font-size: clamp(1.1rem,1.5vw,1.4rem); letter-spacing: -.01em; }

/* long-form prose */
.prose { max-width: 72ch; }
.prose h2 { margin-top: clamp(34px,4vw,56px); margin-bottom: 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--tx-2); font-size: 16.5px; line-height: 1.72; }

.shead--sm { padding-bottom: 22px; margin-bottom: 30px; }
.shead--sm .shead__no { color: var(--brass); }

/* teaser cards are links on interior pages */
a.tz { transition: background var(--wx-dur-micro) var(--wx-ease); }
a.tz:hover { background: var(--paper-2); }

/* ---------- FAQ accordion ----------
   Native <details>/<summary>, so it opens with JS disabled. */
.faq { border-top: 1px solid var(--rule); }
.faq__i { border-bottom: 1px solid var(--rule); }
.faq__i summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--f-disp); font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  letter-spacing: -.012em; color: var(--tx-1); line-height: 1.32;
  transition: color var(--wx-dur-micro) var(--wx-ease);
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--brass); }
.faq__i summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* the +/− mark */
.faq__x { position: relative; flex: 0 0 14px; width: 14px; height: 14px; margin-top: 7px; }
.faq__x::before, .faq__x::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px;
  background: var(--brass); transform: translateY(-50%);
  transition: transform var(--wx-dur-micro) var(--wx-ease), opacity var(--wx-dur-micro) var(--wx-ease);
}
.faq__x::after { transform: translateY(-50%) rotate(90deg); }
.faq__i[open] .faq__x::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq__i .wx-acc-body { overflow: hidden; }
.faq__a {
  padding: 0 clamp(0px, 4vw, 54px) 24px 0;
  max-width: 74ch; color: var(--tx-2);
  font-size: 15.5px; line-height: 1.74;
}

/* geo directory — city / ZIP / county cross-links */
/* Borders live on the cells, not on a 1px-gap backdrop — a partial last row
   would otherwise show the backdrop through the empty cells. */
.geolist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .geolist { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .geolist { grid-template-columns: repeat(5, 1fr); } }
.geolist li {
  background: var(--paper);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.geolist a {
  display: block; padding: 14px 16px;
  font-size: 14px; color: var(--tx-2);
  transition: background var(--wx-dur-micro) var(--wx-ease),
              color var(--wx-dur-micro) var(--wx-ease);
}
.geolist a:hover { background: var(--paper-2); color: var(--tx-1); }

/* ZIP directory — data rows, not links (each ZIP redirects here by anchor) */
.geolist--zip li { padding: 13px 16px; }
.geolist--zip li:target { background: var(--paper-2); box-shadow: inset 2px 0 0 var(--brass); }
.geolist--zip b {
  display: block; font-family: var(--f-mono); font-size: 13px;
  letter-spacing: .06em; color: var(--tx-1); font-weight: 500;
}
.geolist--zip span { display: block; font-size: 11.5px; color: var(--tx-3); margin-top: 3px; }

.geoblock { margin-bottom: 34px; }
.geoblock:last-child { margin-bottom: 0; }
.geoblock__h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.geoblock__h a {
  font-family: var(--f-disp); font-size: 1.22rem; letter-spacing: -.012em;
  color: var(--tx-1);
}
.geoblock__h a:hover { color: var(--brass); }
.geoblock__h span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-3);
}

/* ============================================================
   COMPOSITION — break the template
   ============================================================ */
/* centred head variant */
.shead--mid {
  grid-template-columns: 1fr !important;
  text-align: center; justify-items: center;
}
.shead--mid .shead__lede { justify-self: center; max-width: 52ch; }

/* full-bleed section — escapes the 1440 container */
.section--bleed > .wrap { max-width: none; }

/* mid-page brass band */
.section--brass { background: var(--brass); color: #fff; }
.section--brass .lede,
.section--brass .shead__no { color: rgba(255,255,255,.82); }
.section--brass .shead { border-color: rgba(255,255,255,.28); }
.section--brass .eyebrow { color: rgba(255,255,255,.8); }

/* the one scroll-stopping stat */
.mega { text-align: center; }
.mega__n { color: #fff; }
.mega__c {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.78);
  margin-top: 20px;
}
.mega__sub { max-width: 46ch; margin: 22px auto 0; color: rgba(255,255,255,.9); }

/* coverage folded into the footer */
.foot__cov { padding-block: 34px 0; }
.foot__cov h4 { margin-bottom: 14px; }
.foot__cov h4 a { color: var(--brass-lit); }
.foot__cov h4 a:hover { color: var(--tx-inv-1); }
.foot__cov-grid { display: grid; gap: 22px 34px; grid-template-columns: repeat(2,1fr); }
@media (min-width: 760px) { .foot__cov-grid { grid-template-columns: repeat(4,1fr); } }
.foot__cov-grid div > span {
  display: block; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass-lit);
  margin-bottom: 9px;
}
.foot__cov-grid li { padding-block: 3px; }
.foot__cov-grid a { font-size: 13px; color: var(--tx-inv-2); }


/* ============================================================
   PINNED HORIZONTAL PROGRAM RUN
   ============================================================ */
.hrun { padding-block: 0; overflow: hidden; }

/* Scroll viewport around the track.
   RESTING STATE is a real horizontal scroller, so the panels stay
   reachable when the pinned sweep doesn't run — Reduce Motion (common
   on macOS), GSAP unavailable, or a init throw. motion.js adds
   .wx-pinned to the section only once the pin is genuinely live, and
   only then do we hand scrolling over to the tween. */
.hrun__vp {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.hrun__vp .hrun__card { scroll-snap-align: start; }
.hrun.wx-pinned .hrun__vp {
  overflow: hidden;
  scroll-snap-type: none;
}
/* Slim rail so the fallback is discoverable rather than invisible. */
.hrun__vp::-webkit-scrollbar { height: 6px; }
.hrun__vp::-webkit-scrollbar-track { background: transparent; }
.hrun__vp::-webkit-scrollbar-thumb {
  background: var(--rule-2); border-radius: 99px;
}
.hrun.wx-pinned .hrun__vp::-webkit-scrollbar { height: 0; }

.hrun__head {
  padding-top: clamp(56px,7vw,104px);
  padding-bottom: clamp(24px,3vw,40px);
}
.hrun__head .shead__no {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em;
  color: var(--brass); margin-bottom: 14px;
}
.hrun__head .lede { margin-top: 12px; }
.hrun__track {
  display: flex; gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-bottom: clamp(48px,6vw,88px);
  width: max-content;
}
.hrun__card {
  position: relative; flex: 0 0 min(78vw, 420px);
  background: var(--paper);
  min-height: clamp(340px, 52vh, 480px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px,2.4vw,32px);
  overflow: hidden;
  transition: background var(--wx-dur) var(--wx-ease);
}
.hrun__card:hover { background: var(--paper-2); }
/* horizontal cards show their body at rest — there's no hover on touch */
.hrun__card .path__body { max-height: none; opacity: 1; }
.hrun__card .path__cap { display: none; }
.hrun__card .path__plot { opacity: .26; top: 26%; height: 30%; }

/* Below the pin breakpoint the track STAYS horizontal and becomes a
   normal swipeable scroller — no pinning, no scroll-jacking, and the
   "Scroll sideways" instruction is finally true on a phone.
   motion.js gates the pinned sweep to >=1000px to match. */
@media (max-width: 999px) {
  .hrun { overflow: hidden; }
  .hrun__vp {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gut);
  }
  .hrun__track {
    flex-direction: row;
    width: max-content;
    padding-bottom: clamp(28px,4vw,44px);
    /* gutter so the first and last card aren't flush to the screen edge */
    padding-inline: var(--gut);
    background: transparent;
    border-top: 0; border-bottom: 0;
    gap: 12px;
  }
  .hrun__card {
    flex: 0 0 min(78vw, 340px);
    min-height: 0;
    scroll-snap-align: start;
    border: 1px solid var(--rule);
  }
  .hrun__card .path__plot { display: none; }
}

/* full-bleed section keeps inner padding but drops the max-width */
.section--bleed > .wrap { padding-inline: clamp(20px,4vw,56px); }

/* ---- broker roster strip ---- */
.rost { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 26px; }
.rost__h {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 18px;
}
.rost__list { display: grid; gap: 0 34px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .rost__list { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .rost__list { grid-template-columns: repeat(3,1fr); } }
.rost__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-block: 11px; border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.rost__id {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--tx-3); white-space: nowrap;
}

/* ---- aggregate proof strip (hero) ---- */
.proof {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 26px; padding: 10px 14px;
  border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color var(--wx-dur-micro) var(--wx-ease),
              background var(--wx-dur-micro) var(--wx-ease);
}
.proof:hover { border-color: var(--rule-2); background: var(--paper-2); }
.proof__stars { color: var(--brass); font-size: 13px; letter-spacing: .1em; }
.proof__n { font-family: var(--f-disp); font-size: 1.24rem; line-height: 1; }
.proof__t {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
}

/* ---- reviews ---- */
.revs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px)  { .revs { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px) { .revs { grid-template-columns: repeat(3,1fr); } }
.rev {
  background: var(--paper); margin: 0;
  padding: clamp(24px,2.6vw,32px);
  display: flex; flex-direction: column;
}
.rev__s { color: var(--brass); font-size: 12px; letter-spacing: .16em; margin-bottom: 16px; }
.rev p {
  font-family: var(--f-disp); font-size: clamp(1.02rem,1.3vw,1.18rem);
  line-height: 1.42; letter-spacing: -.008em; color: var(--tx-1); flex: 1;
}
.rev footer {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule);
  display: grid; gap: 3px;
}
.rev footer b { font-size: 14px; font-weight: 500; }
.rev footer span {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-3);
}
.rev--all {
  background: var(--ink); color: var(--tx-inv-1);
  justify-content: center; align-items: flex-start; gap: 10px;
  transition: background var(--wx-dur-micro) var(--wx-ease);
}
.rev--all:hover { background: var(--ink-2); }
.rev__agg { font-family: var(--f-disp); font-size: 3.4rem; line-height: 1; letter-spacing: -.03em; }
.rev__aggt {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx-inv-2); line-height: 1.9;
}
.rev--all .path__go { color: var(--brass-lit); margin-top: 8px; }

/* ============================================================
   THE ROUTER — content, not wallpaper. Full contrast.
   ============================================================ */
.rtwrap {
  background: var(--ink); color: var(--tx-inv-1);
  padding-block: clamp(52px,6.5vw,92px);
}

.rt { color: var(--tx-inv-1); }
.rt svg { width: 100%; height: auto; display: block; overflow: visible; }

.rt__cap text {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .2em;
  text-transform: uppercase; fill: var(--tx-inv-3);
}
.rt__rule { color: var(--rule-inv); }

/* resting state — present, readable, not hidden */
.rt__row text { fill: var(--tx-inv-2); }
.rt__sit   { font-family: var(--f-body); font-size: 13px; }
.rt__basis { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; }
.rt__prog  { font-family: var(--f-disp); font-size: 17px; letter-spacing: -.01em; fill: var(--tx-inv-1) !important; }
.rt__note  { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .12em;
             text-transform: uppercase; fill: var(--tx-inv-3) !important; }

.rt__wire { stroke: var(--rule-inv); }
.rt__dot  { fill: var(--ink); stroke: var(--rule-inv); stroke-width: 1; }

.rt__row,
.rt__row text, .rt__wire, .rt__dot {
  transition: fill var(--wx-dur) var(--wx-ease),
              stroke var(--wx-dur) var(--wx-ease),
              opacity var(--wx-dur) var(--wx-ease);
}

/* once the cycle is driving it, unselected rows recede */
.rt.is-live .rt__row { opacity: .34; }
.rt.is-live .rt__row.is-on { opacity: 1; }

/* the live path */
.rt__row.is-on .rt__wire { stroke: var(--brass-lit); stroke-width: 1.5; }
.rt__row.is-on .rt__dot  { fill: var(--brass-lit); stroke: var(--brass-lit); }
.rt__row.is-on .rt__sit,
.rt__row.is-on .rt__basis { fill: var(--tx-inv-1); }
.rt__row.is-on .rt__prog  { fill: var(--brass-lit) !important; }
.rt__row.is-on .rt__note  { fill: var(--tx-inv-2) !important; }

/* a pulse travelling the wire on the active row */
.rt__row.is-on .rt__wire {
  stroke-dasharray: 7 340; stroke-dashoffset: 347;
  animation: rt-run 1.5s var(--wx-ease) forwards;
}
.rt__row.is-on .rt__wire--2 { animation-delay: .28s; }
@keyframes rt-run { to { stroke-dashoffset: 0; stroke-dasharray: 347 0; } }

.rt__foot text {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; fill: var(--brass-lit);
}

@media (max-width: 860px) {
  .rt svg { min-width: 600px; }
  .rt { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) {
  .rt__row.is-on .rt__wire { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ============================================================
   MOBILE AUDIT FIXES
   Tap targets to 44px (WCAG 2.5.5), legal copy up off 11px,
   and range sliders made grabbable on touch.
   ============================================================ */

/* 1. Range sliders: 2px track was the tap target. Pad the hit area
      and enlarge the thumb on touch without changing the visual line. */
input[type="range"] {
  height: 44px;                     /* hit area */
  background: transparent;          /* draw the track ourselves */
  position: relative;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--rule-inv); border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  height: 2px; background: var(--rule-inv); border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb { margin-top: -7px; }
@media (pointer: coarse) {
  input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
  input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
}

/* 2. Header + drawer controls to a full 44px */
.burger { width: 44px; height: 44px; }
.drawer__x { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; }

/* 3. Inline numeric fields in the Payment Lab */
.fld__in { padding: 10px 4px; min-height: 40px; }
@media (pointer: coarse) { .fld__in { min-height: 44px; width: 9ch; } }

/* 4. Small text links get a real hit box on touch */
@media (pointer: coarse) {
  .foot a, .legal a, .foot__cov-grid a, .topbar a, .proof {
    display: inline-block; padding-block: 11px; min-height: 44px;
  }
  .foot__cov-grid li { padding-block: 0; }
  .rost__list li { padding-block: 14px; }
  .nav__links a { padding-block: 11px; }
  .logo { padding-block: 10px; }
}
.proof { min-height: 44px; }

/* 5. Legal / fine print was 11px. Floor it at 12.5px on small screens. */
@media (max-width: 900px) {
  .legal        { font-size: 12.5px; line-height: 1.75; }
  .qform__note  { font-size: 12.5px; }
  .lab__note    { font-size: 12.5px; }
  .seq__fine    { font-size: 12.5px; }
  .rev footer span { font-size: 10.5px; }
}

/* 6. The router scrolls horizontally on mobile — say so, don't leave it hidden */
@media (max-width: 860px) {
  .rt { position: relative; }
  .rt::after {
    content: "Scroll 92";
    position: sticky; left: 0; display: block; margin-top: 10px;
    font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--brass-lit);
  }
}

/* ---- mobile audit, round 2 ---- */
/* segmented term picker was 40px */
.seg button { min-height: 44px; }

/* apply touch sizing by width too, so tablets get it regardless of pointer type */
@media (max-width: 1024px) {
  .foot a, .legal a, .foot__cov-grid a, .topbar a {
    display: inline-block; padding-block: 11px; min-height: 44px;
  }
  .foot__cov-grid li { padding-block: 0; }
  .nav__links a { padding-block: 11px; }
  .logo { padding-block: 11px; }
  .tlink, .path__go { min-height: 44px; align-items: center; }
  .fld__in { min-height: 44px; }
  /* geo cross-links: county/city headings and the metro list were 31-32px.
     inline-flex + min-height gives a 44px hit box without moving the text,
     and the parent keeps its baseline alignment for the adjacent label. */
  .geoblock__h a, .d2s a, .drawer nav a,
  .lo__nmls a { display: inline-flex; align-items: center; min-height: 44px; }

  /* NOT fixed, deliberately: links inside a sentence. WCAG 2.2 target-size
     (2.5.8) exempts targets "in a sentence or constrained by the
     line-height of non-target text" — forcing 44px on a prose link
     wrecks the paragraph's leading to satisfy a rule it is exempt from. */
}

/* legal copy up to 13px */
@media (max-width: 900px) {
  .legal, .qform__note, .lab__note, .seq__fine { font-size: 13px; }
}

/* ---- LENGTH: the homepage stacks to ~24 screens on a phone.
        Trim duplication rather than content. Reversible. ---- */
@media (max-width: 760px) {
  /* 5 reviews -> 3 + the aggregate tile */
  .revs .rev:nth-of-type(4),
  .revs .rev:nth-of-type(5) { display: none; }

  /* roster: show 6, reveal the rest */
  .rost__list { max-height: 340px; overflow: hidden; position: relative; }
  .rost.is-open .rost__list { max-height: none; }
  .rost__more {
    display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
    margin-top: 16px; font-family: var(--f-mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--brass);
  }
  /* tighten the biggest vertical offenders */
  .section { padding-block: clamp(52px, 8vw, 96px); }
}
@media (min-width: 761px) { .rost__more { display: none; } }

/* last small target: the inline "skip the form" link in the quick form note */
.qform__note a { display: inline-block; padding-block: 12px; min-height: 44px; }

/* ============================================================
   AGENT REFERRAL — cross-sell to Sprout Realty
   ============================================================ */
.agentx__grid { display: grid; gap: clamp(32px,4vw,64px); align-items: start; }
@media (min-width: 980px) { .agentx__grid { grid-template-columns: 1fr 1fr; } }

.agentx__panel {
  border: 1px solid var(--rule-2); background: var(--paper);
  border-radius: 3px; padding: clamp(22px,2.6vw,32px);
}
.agentx__t {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tx-3);
  padding-bottom: 15px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.agentx__opts { display: grid; gap: 10px; }
.agentx__opt {
  display: grid; gap: 5px; text-align: left; width: 100%;
  padding: 15px 16px; min-height: 44px;
  border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--paper);
  transition: border-color var(--wx-dur-micro) var(--wx-ease),
              background var(--wx-dur-micro) var(--wx-ease);
}
.agentx__opt:hover { border-color: var(--ink); }
.agentx__opt.is-on { border-color: var(--brass); background: rgba(169,118,46,.06); }
.agentx__k { font-size: 15px; font-weight: 500; }
.agentx__d { font-size: 13px; color: var(--tx-2); }
.agentx__opt.is-on .agentx__k { color: var(--brass-deep); }

.agentx__out {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.agentx__out p { font-size: 15px; line-height: 1.6; color: var(--tx-1); margin-bottom: 16px; }
.agentx__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.agentx__acts .btn { flex: 1 1 auto; justify-content: center; }
.agentx__fine {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 12px; line-height: 1.65; color: var(--tx-3);
}
@media (max-width: 900px) { .agentx__fine { font-size: 13px; } }

/* ============================================================
   FIX: motion library ships .wx-mask as inline-block, so the
   <br>-separated segments of a `lines` heading reflow as inline
   content — they butt together ("A mortgage isa system") on wider
   phones, and innerText concatenates without spaces, so screen
   readers and crawlers read it wrong too. Each segment is meant to
   be its own line; make it one.
   ============================================================ */
[data-wx="lines"] .wx-mask { display: block; }
[data-wx="lines"] .wx-line { display: inline-block; }

/* ============================================================
   THE CREDIT JOURNEY — hero subject
   ============================================================ */
/* Reserve the chart's box BEFORE credit.js injects the SVG. The div is
   empty in the HTML, so without this it is 0px tall and everything below
   it drops ~600px the moment the chart renders — measured CLS 0.136 on
   desktop, over the 0.1 Core Web Vitals threshold.
   Ratios mirror the viewBox in credit.js (520x415 / 360x392) and its
   isMob() breakpoint of 1000px. Change them together. */
.cj { aspect-ratio: 520 / 415; }
@media (max-width: 999px) { .cj { aspect-ratio: 360 / 392; } }

.cj { position: relative; z-index: 1; opacity: 0; transition: opacity 1s var(--wx-ease); }
.cj.is-in { opacity: 1; }
.cj svg { width: 100%; height: auto; overflow: visible; display: block; }

.cj__note {
  margin-top: 10px; max-width: 46ch;
  font-family: var(--f-mono); font-size: 9.5px; line-height: 1.5;
  letter-spacing: .06em; color: var(--tx-3);
}
.cj__cap { fill: var(--tx-3); font-family: var(--f-mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.cj__tick path { stroke: var(--rule); stroke-width: .4; }
.cj__tick text { fill: var(--tx-3); font-family: var(--f-mono); font-size: 7.6px; }
.cj__area { fill: var(--brass); opacity: .08; }
.cj__line { stroke: var(--brass); stroke-width: 2.1; fill: none; stroke-linecap: round; }
.cj__head { fill: var(--brass); }

.cj__gline { stroke: var(--ink); stroke-width: .4; stroke-dasharray: 2 2.4; opacity: .2;
  transition: opacity .5s var(--wx-ease), stroke .5s var(--wx-ease); }
.cj__gline.is-on { opacity: .45; }

/* chips are HUD — fixed, and latch on when the score crosses */
.cj__chip rect { fill: var(--paper); stroke: var(--rule); stroke-width: .5; }
.cj__chip text { fill: var(--tx-3); font-family: var(--f-mono); font-size: 8.4px; letter-spacing: .08em; }
.cj__lock { stroke: var(--tx-3); stroke-width: .7; fill: none; }
.cj__chip { opacity: .34; transition: opacity .45s var(--wx-ease); }
.cj__chip.is-on { opacity: 1; }
.cj__chip.is-on rect { stroke: var(--rule-2); }
.cj__chip.is-on text { fill: var(--tx-2); }
.cj__chip.is-main.is-on rect { fill: var(--brass); stroke: var(--brass); }
.cj__chip.is-main.is-on text { fill: #fff; }
.cj__chip.is-main.is-on .cj__lock { stroke: #fff; }
.cj__gline.is-on.is-main { stroke: var(--brass); opacity: .55; }

.cj__clock { fill: var(--tx-3); font-family: var(--f-mono); font-size: 7.6px; letter-spacing: .16em; text-transform: uppercase; }

.cj__ev { opacity: 0; }
.cj__evd { fill: var(--paper); stroke: var(--brass); stroke-width: 1; }
.cj__evl { stroke: var(--rule-2); stroke-width: .45; }
.cj__evv { fill: var(--brass); font-family: var(--f-mono); font-size: 9.2px; letter-spacing: .04em; }
.cj__evt { fill: var(--tx-3); font-family: var(--f-mono); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.cj__ev.is-neg .cj__evd { stroke: #A33B2A; }
.cj__ev.is-neg .cj__evv { fill: #A33B2A; }

.cj__head { fill: var(--brass); }
.cj__line { stroke: var(--brass); stroke-width: 2.1; fill: none; stroke-linecap: round; }

/* the hero right column is now the chart — give it room */
/* hero: copy left, the journey top-right, all of it above the fold */
.hero__grid { display: grid; gap: clamp(26px,3vw,56px); align-items: start; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: .78fr 1.22fr; }
}
.hero__copy h1 { max-width: 12ch; margin-bottom: 18px; }
.hero__copy .hero__sub { margin-bottom: 20px; max-width: 38ch; font-size: .92rem; line-height: 1.55; }
.hero__copy .proof { margin-top: 16px; }
.cj-wrap { align-self: start; }
.hero { padding-block: clamp(20px,2.2vw,36px) clamp(12px,1.4vw,24px); }

/* the reading now introduces the router */
.rtgrid { display: grid; gap: clamp(28px,3.4vw,56px); align-items: start; }
@media (min-width: 1000px) { .rtgrid { grid-template-columns: .92fr 1.08fr; align-items: center; } }
.rtseq { margin-bottom: 0; }
.rtseq .seq {
  background: rgba(255,255,255,.04); border-color: var(--rule-inv);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  max-width: none;
}
.rtseq .seq__t, .rtseq .seq__k, .rtseq .seq__out-l, .rtseq .seq__fine { color: var(--tx-inv-3); }
.rtseq .seq__t { border-color: var(--rule-inv); }
.rtseq .seq__row { border-color: var(--rule-inv); }
.rtseq .seq__k { color: var(--tx-inv-2); }
.rtseq .seq__v { color: var(--tx-inv-3); }
.rtseq .seq__row.is-set .seq__v { color: var(--tx-inv-1); }
.rtseq .seq__rule { background: var(--rule-inv); }
.rtseq .seq__out-n { color: var(--tx-inv-1); }
.rtseq .seq__unlock { border-color: var(--rule-inv); color: var(--tx-inv-2); }
.rtseq .seq__unlock em { color: var(--tx-inv-1); }
.rtseq .seq__stampmark { background: rgba(15,92,250,.08); border-color: var(--brass-lit); color: var(--brass-lit); }


@media (max-width: 999px) {
  .cj { margin-top: 34px; }
}

/* ---- the celebration ---- */
.cj__cel { opacity: 0; pointer-events: none; }
.cj__celbx { fill: none; stroke: var(--brass); stroke-width: 2.2; }
.cj__celbx--in { stroke-width: .8; opacity: .6; }
.cj__celt {
  fill: var(--brass); font-family: var(--f-mono); font-weight: 500;
  font-size: 17px; letter-spacing: .14em;
}
.cj__cels {
  fill: var(--brass); font-family: var(--f-mono); font-size: 6.6px;
  letter-spacing: .22em; opacity: .78;
}
.cj.is-won .cj__cel { animation: cj-stamp .5s cubic-bezier(.2,1.5,.35,1) forwards; }
@keyframes cj-stamp {
  0%   { opacity: 0; transform: translate(var(--cx,360px), var(--cy,119px)) rotate(-16deg) scale(1.9); }
  60%  { opacity: 1; transform: translate(var(--cx,360px), var(--cy,119px)) rotate(-7deg) scale(.95); }
  100% { opacity: 1; transform: translate(var(--cx,360px), var(--cy,119px)) rotate(-7deg) scale(1); }
}
/* the whole plot brightens on the win */
.cj.is-won .cj__line { stroke-width: 2.6; }
.cj.is-won .cj__area { opacity: .13; }
@media (prefers-reduced-motion: reduce) {
  .cj.is-won .cj__cel { animation: none; opacity: 1; }
}

/* mobile viewBox is ~1:1, so these are near their true pixel size */
@media (max-width: 999px) {
  .cj__cap   { font-size: 10.5px; }
  .cj__clock { font-size: 10px; }
  .cj__tick text { font-size: 10px; }
  .cj__chip text { font-size: 11.5px; }
  .cj__evv   { font-size: 12.5px; }
  .cj__evt   { font-size: 9.5px; }
  .cj__celt  { font-size: 22px; }
  .cj__cels  { font-size: 8.5px; }
  .cj__line  { stroke-width: 2.6; }
}

@media (max-width: 1024px) { .logo { min-height: 44px; display: flex; flex-direction: column; justify-content: center; } }

/* condensed router list */
.rt__sit   { font-family: var(--f-body); font-size: 13.5px; }
.rt__basis { font-family: var(--f-mono); font-size: 9.4px; letter-spacing: .08em; fill: var(--tx-inv-3); }
.rt__prog  { font-family: var(--f-disp); font-size: 18px; letter-spacing: -.01em; fill: var(--tx-inv-1) !important; }
.rt__note  { font-family: var(--f-mono); font-size: 8.4px; letter-spacing: .1em; text-transform: uppercase; fill: var(--tx-inv-3) !important; }
.rt__sep   { stroke: var(--rule-inv); opacity: .5; }
.rt__foot text { font-size: 8.6px; }
@media (max-width: 999px) {
  .rt { overflow: visible; }
  .rt svg { min-width: 0; }
  .rt::after { content: none; }
  .rt__sit { font-size: 15px; }
  .rt__basis { font-size: 10.5px; }
  .rt__prog { font-size: 20px; }
  .rt__note { font-size: 9.4px; }
}

/* ============================================================
   SIZE PASS — sections that ran past one screen.
   Measured with audit-size.mjs; targets are "fits one viewport".
   ============================================================ */

/* ---- Payment Lab: was 1331px against 776px usable ---- */
#lab .shead { padding-bottom: 20px; margin-bottom: 24px; }
#lab { padding-block: clamp(40px,4.4vw,64px); }
.lab { gap: clamp(20px,2.4vw,34px); }
.lab__panel { padding: clamp(18px,1.9vw,24px); }
.lab__t { padding-bottom: 11px; margin-bottom: 14px; }
.fld { margin-bottom: 12px; }
.fld__top { margin-bottom: 5px; }
.fld__scale { margin-top: 3px; }
input[type="range"] { height: 30px; }
@media (pointer: coarse) { input[type="range"] { height: 44px; } }
.readout { margin-bottom: 16px; }
.readout__l { margin-bottom: 6px; }
.readout__n { font-size: clamp(2.3rem, 4.2vw, 3.3rem); }
.readout__sub { margin-top: 8px; font-size: 12.5px; }
.split-viz { gap: 18px; }
@media (min-width: 560px) { .split-viz { grid-template-columns: 124px 1fr; } }
.donut { width: 124px; height: 124px; }
.donut circle { stroke-width: 11; }
.donut__mid b { font-size: 1.15rem; }
.leg { gap: 8px; }
.leg__row { padding-bottom: 7px; }
.leg__k { font-size: 12.5px; }
.leg__v { font-size: 12px; }
.curve { margin-top: 16px; padding-top: 14px; }
.curve__t { margin-bottom: 9px; }
.curve svg { height: 66px; }
.lab__note { margin-top: 14px; padding-top: 12px; font-size: 10.5px; line-height: 1.6; }
.seg button { min-height: 38px; padding: 8px 6px; }
@media (pointer: coarse) { .seg button { min-height: 44px; } }

/* ---- brass band: 176px type was enormous ---- */
.d-mega { font-size: clamp(2.4rem, 7vw, 6.2rem); line-height: .9; }
.section--brass { padding-block: clamp(48px,5.5vw,84px) !important; }
.mega__sub { margin-top: 16px; }
.mega__c { margin-top: 14px; }

/* ---- Team: 4 tall tiles + a 15-row roster ---- */
#team { padding-block: clamp(44px,5vw,76px); }
.lo__ph { aspect-ratio: 5/4; }
.lo__body { padding: 15px; }
.lo__name { font-size: 1.18rem; }
.lo__role { font-size: 12px; margin-bottom: 8px; }
.lo__nmls { padding-top: 9px; }
.rost { margin-top: 24px; padding-top: 20px; }
.rost__h { margin-bottom: 12px; }
.rost__list li { padding-block: 8px; font-size: 14px; }

/* ---- Reviews ---- */
#reviews { padding-block: clamp(44px,5vw,76px); }
.rev { padding: clamp(18px,2vw,24px); }
.rev p { font-size: clamp(.95rem,1.1vw,1.05rem); line-height: 1.38; }
.rev__s { margin-bottom: 11px; }
.rev footer { margin-top: 14px; padding-top: 11px; }
.rev__agg { font-size: 2.6rem; }

/* ---- long-form guide sections ---- */
.step { padding-block: clamp(20px,2.4vw,30px); }
.step p { font-size: 14.5px; }
.myth { padding: clamp(20px,2.2vw,28px); }
.myth h3 { margin-bottom: 13px; }
.myth__fact { padding-top: 13px; }
.myth__fact p { font-size: 14px; }
.prose h2 { margin-top: clamp(26px,2.8vw,38px); }
.prose p { font-size: 15.5px; line-height: 1.66; }

/* ---- Why / lead form ---- */
#start { padding-block: clamp(44px,5vw,76px); }
.why__row { padding-block: 15px; }
.why__d { font-size: 13.5px; }
.qf { margin-bottom: 12px; }
.qf input, .qf select { padding: 10px 12px; font-size: 14.5px; }
.qform { padding: clamp(18px,2vw,26px); }
.qform__t { padding-bottom: 11px; margin-bottom: 15px; }

/* ---- size pass, round 2: remaining desktop/laptop offenders ---- */

/* myths: 6 cards in 2 columns was 3 rows deep — go 3-wide on desktop */
@media (min-width: 1080px) { .myths { grid-template-columns: repeat(3,1fr); } }
.myth__tag { margin-bottom: 11px; }
.myth h3 { font-size: clamp(1.25rem,1.7vw,1.6rem); }

/* process: six stages */
.step { padding-block: clamp(16px,1.9vw,24px); }
.step h3 { font-size: clamp(1.3rem,1.8vw,1.75rem); }
.step__when { margin-top: 6px; }
#process .shead, .pg-intro + section .shead { padding-bottom: 18px; margin-bottom: 22px; }

/* team */
#team .shead { padding-bottom: 18px; margin-bottom: 22px; }
.lo__ph { aspect-ratio: 16/11; }
.team { gap: 1px; }

/* router */
.rtwrap { padding-block: clamp(40px,4.4vw,68px); }
.rtwrap .shead { padding-bottom: 18px; margin-bottom: 24px; }

/* careers / prose pages */
.prose h2 { margin-top: clamp(20px,2.2vw,30px); margin-bottom: 10px; }
.prose p { font-size: 15px; line-height: 1.62; }
.pg-intro { padding-block: clamp(36px,4vw,64px) clamp(18px,2vw,30px); }
.facts { }
.fact { padding: clamp(14px,1.6vw,20px); }

/* section heads generally — they were eating 80-100px each */
.shead { padding-bottom: 22px; margin-bottom: clamp(26px,3vw,40px); }
.section { padding-block: clamp(44px,5.6vw,96px); }

/* ---- size pass, round 3: the last two over-height sections ---- */
.rtseq .seq { padding: clamp(16px,1.7vw,22px); }
.rtseq .seq__row { padding-block: 9px; }
.rtseq .seq__t { padding-bottom: 11px; }
.rtseq .seq__rule { margin-block: 13px 3px; }
.rtseq .seq__out { padding-top: 7px; }
.rtseq .seq__out-n { font-size: clamp(2rem,3.4vw,2.7rem); }
.rtseq .seq__unlock { margin-top: 13px; padding-top: 12px; font-size: 14px; }
.rtseq .seq__fine { margin-top: 10px; font-size: 10.5px; }

#lab .lede, .rtwrap .lede { font-size: 1rem; }
#lab .shead, .rtwrap .shead { margin-bottom: 20px; }
.lab__panel { padding: clamp(16px,1.7vw,21px); }
.readout__n { font-size: clamp(2.1rem, 3.6vw, 2.9rem); }
.curve svg { height: 58px; }
.donut { width: 112px; height: 112px; }
@media (min-width: 560px) { .split-viz { grid-template-columns: 112px 1fr; } }

/* Payment Lab: single-line head so the input panel clears the fold */
.lab__head {
  display: grid; gap: 10px; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-inv);
}
@media (min-width: 1000px) { .lab__head { grid-template-columns: auto 1fr; gap: 40px; } }
.lab__head .shead__no {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass-lit); margin-bottom: 6px;
}
.lab__head h2 { color: var(--tx-inv-1); }
.lab__head .lede { color: var(--tx-inv-2); font-size: .95rem; max-width: 62ch; }
#lab { padding-block: clamp(32px,3.6vw,52px); }

/* ---- consent + agent capture form ---- */
.qf__consent {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px;
  align-items: start; margin: 4px 0 14px;
  font-size: 12.5px; line-height: 1.6; color: var(--tx-2);
}
.qf__consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brass); }
@media (pointer: coarse) { .qf__consent input { width: 22px; height: 22px; } }
.agentx__form { margin-top: 4px; }
.agentx__form .qf label { font-size: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- real team photos ---- */
.lo__ph { aspect-ratio: 1/1; background: var(--paper-3); }
.lo__ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--wx-dur) var(--wx-ease); }
.lo:hover .lo__ph img { transform: scale(1.035); }
.lo__ph::after { content: none; }
.lo__nmls { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lo__nmls a { color: var(--brass); font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; }
.lo__nmls a:hover { text-decoration: underline; }
.team--sm { grid-template-columns: repeat(2,1fr); }
@media (min-width: 640px)  { .team--sm { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1040px) { .team--sm { grid-template-columns: repeat(5,1fr); } }
.team--sm .lo__body { padding: 12px; }
.team--sm .lo__name { font-size: 1rem; }
.team--sm .lo__role { font-size: 11px; margin-bottom: 7px; }
.team--sm .lo__nmls { font-size: 9px; padding-top: 8px; }
.team--sm .lo__nmls a { font-size: 9px; }

@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } }

/* ---------- Mobile: legal fine print ----------
   Disclaimers were rendering at 9.5-10.5px on a phone. These carry the
   "not a quote, not a commitment to lend" language and the calculator's
   stated assumptions — the text a regulator would expect a borrower to
   actually be able to read. Design labels (.eyebrow, .shead__no,
   .rost__h) stay small on purpose; those are labels, not prose. */
@media (max-width: 619px) {
  .cj__note  { font-size: 11px; line-height: 1.55; }
  .lab__note { font-size: 11.5px; line-height: 1.6; }
  .mkt__note { font-size: 11.5px; line-height: 1.6; }
  /* `.rtseq .seq__fine` further up is two classes, so a single-class
     rule here loses to it regardless of order. Match the specificity
     rather than escalating to !important. */
  .seq__fine, .rtseq .seq__fine { font-size: 11.5px; line-height: 1.6; }
}