/* ============================================================================
   US LENDING & COMPANY — new.uslendingco.com
   Design system.

   Direction: the site is built like the document the business actually issues.
   Bond-paper ground, engraved guilloche fields, hairline foil rules, a foil
   seal, and figures set in a monospace face so columns of numbers line up the
   way they do on a term sheet. Palette is sampled straight from the company
   logo: #860233 maroon, #D57F1D gold.
   ========================================================================== */

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

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* ground */
  --paper:        #faf6ef;
  --paper-2:      #f3ebdd;
  --paper-3:      #ece0cd;
  --card:         #fffdf9;

  /* brand, sampled from the logo */
  --maroon:       #860233;
  --maroon-deep:  #6b0129;
  /* Published figures on cards. Identical to --maroon in light; lifted in the
     dark themes, where --maroon on a dark card measures only 2.48:1. */
  --figure:       #860233;
  --oxblood:      #3a0818;
  --oxblood-2:    #4d0f22;

  --foil:         #d57f1d;
  --foil-deep:    #a85f12;
  --foil-hi:      #f0c271;
  --foil-text:    #91530c;

  /* ink */
  --ink:          #1c1013;
  --ink-2:        #48343a;
  --ink-soft:     #6b564c;
  --on-dark:      #f7ede2;
  --on-dark-soft: #cbb2ad;

  /* lines */
  --rule:         rgba(28, 16, 19, 0.14);
  --rule-strong:  rgba(28, 16, 19, 0.28);
  --rule-foil:    rgba(213, 127, 29, 0.42);
  --rule-dark:    rgba(247, 237, 226, 0.16);

  /* state */
  --ok:           #2f6b46;
  --warn:         #9a5b12;

  --shadow-sm:  0 1px 2px rgba(28,16,19,.05), 0 4px 14px rgba(58,8,24,.07);
  --shadow-md:  0 2px 6px rgba(28,16,19,.06), 0 14px 38px rgba(58,8,24,.11);
  --shadow-lg:  0 4px 12px rgba(28,16,19,.08), 0 30px 70px rgba(58,8,24,.16);

  /* type */
  --display: "Fraunces", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --body:    "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* metrics */
  --container: 1200px;
  --measure: 66ch;
  --gutter: clamp(20px, 5vw, 56px);
  --r-lg: 4px;
  --r-md: 3px;
  --r-sm: 2px;

  --header-h: 78px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #17090e;
    --paper-2:      #200c14;
    --paper-3:      #2a1019;
    --card:         #220d15;

    --maroon:       #9e2549;
    --maroon-deep:  #7a1839;
    --figure:       #cf6f8f;
    --oxblood:      #12060a;
    --oxblood-2:    #1e0a11;

    --foil:         #e29a3c;
    --foil-deep:    #c07d24;
    --foil-hi:      #f3d197;
    --foil-text:    #e8a94f;

    --ink:          #f6e9dd;
    --ink-2:        #d9c2b8;
    --ink-soft:     #b49c93;
    --on-dark:      #f7ede2;
    --on-dark-soft: #c4aaa4;

    --rule:         rgba(246, 233, 221, 0.14);
    --rule-strong:  rgba(246, 233, 221, 0.26);
    --rule-foil:    rgba(226, 154, 60, 0.42);
    --rule-dark:    rgba(246, 233, 221, 0.14);

    --ok:           #6cc08e;
    --warn:         #e0a24f;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34);
    --shadow-md:  0 2px 6px rgba(0,0,0,.44), 0 14px 38px rgba(0,0,0,.4);
    --shadow-lg:  0 4px 12px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.5);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #17090e;
  --paper-2:      #200c14;
  --paper-3:      #2a1019;
  --card:         #220d15;

  --maroon:       #9e2549;
  --maroon-deep:  #7a1839;
  --figure:       #cf6f8f;
  --oxblood:      #12060a;
  --oxblood-2:    #1e0a11;

  --foil:         #e29a3c;
  --foil-deep:    #c07d24;
  --foil-hi:      #f3d197;
  --foil-text:    #e8a94f;

  --ink:          #f6e9dd;
  --ink-2:        #d9c2b8;
  --ink-soft:     #b49c93;
  --on-dark:      #f7ede2;
  --on-dark-soft: #c4aaa4;

  --rule:         rgba(246, 233, 221, 0.14);
  --rule-strong:  rgba(246, 233, 221, 0.26);
  --rule-foil:    rgba(226, 154, 60, 0.42);
  --rule-dark:    rgba(246, 233, 221, 0.14);

  --ok:           #6cc08e;
  --warn:         #e0a24f;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34);
  --shadow-md:  0 2px 6px rgba(0,0,0,.44), 0 14px 38px rgba(0,0,0,.4);
  --shadow-lg:  0 4px 12px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base -- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.35rem, 1.35rem + 3.5vw, 4.15rem); font-weight: 600; }
h2 { font-size: clamp(1.85rem, 1.15rem + 2.3vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.02rem + 0.65vw, 1.55rem); letter-spacing: -0.012em; }
h4 { font-size: 1.05rem; letter-spacing: -0.006em; }

p { margin: 0 0 1.05em; }
a { color: var(--maroon); text-decoration-color: var(--rule-foil); text-underline-offset: 3px; }
a:hover { color: var(--foil-text); }

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

::selection { background: rgba(213,127,29,.26); color: var(--ink); }

.tnum { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--maroon); color: #fff; padding: 10px 16px;
  font-family: var(--body); font-weight: 700; font-size: .85rem;
  border-radius: var(--r-md); transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* -------------------------------------------------------------- layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 840px; }

section { position: relative; }
.sec { padding-block: clamp(64px, 8vw, 118px); }
.sec-sm { padding-block: clamp(46px, 5.5vw, 76px); }

.grid { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-hero { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: clamp(30px, 4vw, 62px); }
.g-split { grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 60px); align-items: start; }

@media (max-width: 1020px) {
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-hero, .g-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .g2, .g3 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .g4 { grid-template-columns: 1fr; }
}

.prose { max-width: var(--measure); }
.prose p { color: var(--ink-2); }
.prose > :last-child { margin-bottom: 0; }
.lead {
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
}

/* ------------------------------------------------------- engraved fields -- */
/* A guilloche field, the security pattern printed on bonds and certificates.
   Drawn once to a canvas by site.js and tiled here. */
.engraved { position: relative; isolation: isolate; }
.engraved > * { position: relative; z-index: 1; }
.engraved::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--guilloche, none);
  background-size: 520px 520px;
  opacity: .5;
  pointer-events: none;
}

.band-dark {
  background: var(--oxblood);
  color: var(--on-dark);
}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: #fff; }
/* Footer column headings are h3 for document structure but keep the small
   uppercase treatment; the level is what screen readers use, not the size. */
.band-dark p { color: var(--on-dark-soft); }
.band-dark a { color: var(--foil-hi); }
.band-dark::before { opacity: .34; }

.band-paper { background: var(--paper-2); }

.band-dark + .band-dark { border-top: 1px solid var(--rule-dark); }

/* foil hairline used as a section divider */
.foil-rule {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--foil-deep) 12%, var(--foil-hi) 50%, var(--foil-deep) 88%, transparent 100%);
  opacity: .8;
}

/* ------------------------------------------------------------- eyebrows --- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--foil-text);
}
/* Same cascade miss as the breadcrumbs: the page masthead is a dark ground but
   is not .band-dark, so its eyebrow kept the light-theme gold at 2.81:1. */
.band-dark .eyebrow, .page-head .eyebrow { color: var(--foil-hi); }
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .65;
}
.eyebrow.no-rule::before { display: none; }

.sec-head { max-width: 760px; margin-bottom: clamp(30px, 3.6vw, 52px); }
.sec-head h2 { margin-top: 12px; }
.sec-head p { margin-top: 14px; color: var(--ink-soft); font-size: 1.06rem; }
.band-dark .sec-head p { color: var(--on-dark-soft); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: .93rem;
  letter-spacing: .01em;
  padding: 14px 24px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { color: #fff; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.24); }

.btn-foil {
  background: linear-gradient(180deg, var(--foil-hi) 0%, var(--foil) 46%, var(--foil-deep) 100%);
  color: #24140a;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.42);
}
.btn-foil:hover { color: #24140a; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.5); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--foil); color: var(--foil-text); background: rgba(213,127,29,.07); }
.band-dark .btn-ghost { color: #fff; border-color: rgba(247,237,226,.34); }
.band-dark .btn-ghost:hover { border-color: var(--foil-hi); color: var(--foil-hi); background: rgba(213,127,29,.14); }

.btn-lg { padding: 17px 30px; font-size: 1rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .9rem; text-decoration: none;
  color: var(--maroon);
  white-space: nowrap;
}
.link-arrow svg { width: 15px; height: 15px; flex: none; }
.crumbs svg { width: 13px; height: 13px; flex: none; }
.band-dark .link-arrow { color: var(--foil-hi); }
.link-arrow span.a { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.link-arrow:hover span.a { transform: translateX(5px); }

/* ---------------------------------------------------------------- header -- */
.utility {
  background: var(--oxblood);
  color: var(--on-dark-soft);
  font-size: .78rem;
  border-bottom: 1px solid rgba(213,127,29,.28);
}
.utility .container {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 40px; padding-block: 7px; flex-wrap: wrap;
}
.utility a { color: var(--on-dark); text-decoration: none; font-weight: 600; }
.utility a:hover { color: var(--foil-hi); }
.utility .u-left, .utility .u-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.utility a { display: inline-flex; align-items: center; gap: 6px; }
.utility svg { width: 14px; height: 14px; flex: none; color: var(--foil-hi); }
.utility .dot { color: var(--foil); opacity: .8; }
.utility .lic { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; }
@media (max-width: 780px) { .utility .u-right { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-header.stuck { box-shadow: var(--shadow-sm); background: color-mix(in srgb, var(--paper) 95%, transparent); }
.header-row {
  display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px);
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 54px; width: auto; }
@media (max-width: 620px) { .brand img { height: 42px; } }

.nav-primary {
  display: flex; align-items: center; gap: clamp(0px, 0.35vw, 6px);
  margin-inline-start: auto;
}
.nav-primary > a, .nav-item > button {
  font-family: var(--body); font-size: .98rem; font-weight: 700;
  color: var(--ink-2); text-decoration: none;
  padding: 11px 9px; border-radius: var(--r-md);
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}
.nav-primary > a:hover, .nav-item > button:hover { color: var(--maroon); background: rgba(134,2,51,.06); }
.nav-primary > a[aria-current="page"] { color: var(--maroon); }
.nav-primary > a[aria-current="page"]::after {
  content: ""; display: block; position: absolute;
}
.nav-primary > a.is-current {
  color: var(--maroon);
  box-shadow: inset 0 -2px 0 var(--foil);
}

/* dropdown for loan programs */
.nav-item { position: relative; }
.nav-item > button svg { width: 12px; height: 12px; transition: transform .2s ease; opacity: .7; }
.nav-item[data-open="true"] > button svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 290px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--foil);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.3,1), visibility .18s;
}
.nav-item[data-open="true"] .nav-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-menu a {
  display: block; padding: 11px 13px; border-radius: var(--r-md);
  text-decoration: none; color: var(--ink);
  transition: background-color .15s ease;
}
.nav-menu a:hover { background: var(--paper-2); color: var(--ink); }
.nav-menu .t { font-weight: 700; font-size: .9rem; display: block; }
.nav-menu .d { font-size: .78rem; color: var(--ink-soft); display: block; margin-top: 2px; }

.header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.header-actions .btn-primary {
  padding: 16px 26px;
  font-size: 1.02rem;
  background: linear-gradient(180deg, var(--foil-hi) 0%, var(--foil) 46%, var(--foil-deep) 100%);
  color: #24140a;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.42);
}
.header-actions .btn-primary:hover {
  color: #24140a;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.5);
}

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.icon-btn:hover { border-color: var(--foil); color: var(--foil-text); background: rgba(213,127,29,.07); }
.icon-btn svg { width: 19px; height: 19px; }

.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  overflow: hidden; flex: none;
}
.lang-switch a {
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  padding: 10px 11px; text-decoration: none; color: var(--ink-soft);
  transition: background-color .16s ease, color .16s ease;
}
.lang-switch a[aria-current="true"] { background: var(--maroon); color: #fff; }
.lang-switch a:not([aria-current="true"]):hover { background: var(--paper-2); color: var(--ink); }

.nav-toggle { display: none; }
/* The tab bar needs ~1300px (English) / ~1500px (Spanish) of content width, so the
   header and the utility bar above it use the screen's width (to 1680px) rather than
   the 1200px page column. Logo and top bar share the same edges. */
.site-header .header-row, .utility .container { max-width: min(1680px, 100%); padding-inline: clamp(16px, 2.2vw, 40px); }
/* Phone shortcut: lives in the sticky header wherever the menu button does, so it is
   always one tap away and never floats over page content. On desktop the number is
   already in the top bar. */
.header-call { display: none; }
.header-call svg { width: 18px; height: 18px; }

/* The drawer takes over as soon as the horizontal bar stops fitting — and the
   width at which that happens depends on the language. Spanish labels run about
   19% wider than English ("Referencias y Brókers" against "Referrals &
   Brokers"), so one breakpoint tuned on English put every Spanish page into
   horizontal scroll and clipped the Apply button. Each threshold below is the
   measured width at which that language's header row stops fitting, plus
   clearance. Re-measure both languages if a nav label, nav size or the Apply
   button size ever changes (last measured with the enlarged nav, the 61px Apply
   button and the full-width header: the full bar fits from 1295px in English and
   1510px in Spanish; the thresholds below add clearance). */
@media (max-width: 1319px) {
  .nav-primary { display: none; }
  .nav-toggle, .header-call { display: grid; }
  .header-actions { margin-inline-start: auto; }
}
@media (max-width: 1529px) {
  html:lang(es) .nav-primary { display: none; }
  html:lang(es) .nav-toggle, html:lang(es) .header-call { display: grid; }
  html:lang(es) .header-actions { margin-inline-start: auto; }
}
/* Between phone and tablet the header also carries the phone button, so the Apply
   button is compacted rather than dropped; below 431px it moves to the hero and the
   drawer, as before. Re-measure if any header control changes size. */
@media (max-width: 560px) {
  .header-actions .btn-primary { padding: 12px 14px; font-size: .86rem; }
  .header-actions { gap: 4px; }
  .lang-switch a { padding: 10px 8px; }
}
@media (max-width: 430px) {
  .header-actions .btn { display: none; }
}
/* "Solicitar en Línea" is wider than "Apply Online": it needs to step aside sooner. */
@media (max-width: 480px) {
  html:lang(es) .header-actions .btn { display: none; }
}
@media (max-width: 340px) {
  .brand img { height: 36px; }
  .lang-switch a { padding: 10px 6px; }
  .header-row { gap: 6px; }
}

/* ---------------------------------------------------------------- drawer -- */
.drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer .scrim {
  position: absolute; inset: 0; background: rgba(28,10,16,.55);
  opacity: 0; transition: opacity .28s ease;
  backdrop-filter: blur(3px);
}
.drawer[data-open="true"] .scrim { opacity: 1; }
.drawer .panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(400px, 88vw);
  background: var(--paper);
  border-inline-start: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.24,.8,.28,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 20px 22px 32px;
}
.drawer[data-open="true"] .panel { transform: translateX(0); }
.drawer .d-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: 13px 2px; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem;
}
.drawer nav a.sub { padding-inline-start: 18px; font-size: .92rem; font-weight: 500; color: var(--ink-2); }
.drawer nav a:hover { color: var(--maroon); }
.drawer .d-foot { margin-top: 22px; display: grid; gap: 10px; }

/* ----------------------------------------------------------- trust strip -- */
.marquee {
  /* pinned to the logo's own maroon in both themes — it is a brand element */
  background: #860233;
  color: #fff;
  overflow: hidden;
  border-block: 1px solid rgba(0,0,0,.15);
  --marquee-duration: 46s;
}
.marquee .track {
  display: flex; align-items: center; gap: 0;
  width: max-content;
  animation: none;   /* only runs once the script has measured and filled the track */
}
.marquee .track.is-running { animation: marquee var(--marquee-duration) linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 26px;
  font-family: var(--mono); font-size: .715rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  white-space: nowrap;
  border-inline-end: 1px solid rgba(255,255,255,.16);
}
.marquee .item svg { width: 15px; height: 15px; opacity: .9; color: var(--foil-hi); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(var(--marquee-shift) * -1)); } }
@media (prefers-reduced-motion: reduce) {
  /* Stopping the animation alone would strand every item past the first screen
     permanently out of view — the ticker only reaches them by scrolling. Let it
     wrap onto as many rows as it needs instead, so the same content is readable
     without motion. */
  .marquee .track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee .item:last-child { border-inline-end: 0; }
}

/* Same reasoning at very large text sizes: once the items no longer fit, wrap
   rather than clip. */
@media (min-width: 0px) {
  .marquee .track { max-width: none; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(134,2,51,.10), transparent 62%),
    radial-gradient(880px 480px at 96% 6%, rgba(213,127,29,.13), transparent 60%),
    var(--paper);
  padding-block: clamp(52px, 6.5vw, 104px) clamp(56px, 7vw, 108px);
  overflow: hidden;
}
.hero h1 { margin-top: 16px; }
.hero .lead { margin-top: 20px; max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note {
  margin-top: 18px; font-size: .855rem; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.hero-note svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

.hero-badges {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px;
  padding-top: 22px; border-top: 1px solid var(--rule);
}
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .69rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 100px;
  padding: 6px 13px;
  background: var(--card);
}
.badge svg { width: 13px; height: 13px; color: var(--foil); flex: none; }

/* the term sheet — the hero's centrepiece */
.termsheet {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--maroon);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.termsheet::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--foil-deep), var(--foil-hi), var(--foil-deep));
}
.ts-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  padding: 17px 22px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--paper-2), transparent);
}
.ts-head .t {
  font-family: var(--mono); font-size: .69rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase; color: var(--ink-soft);
}
.ts-head .s {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  color: var(--foil-text); text-transform: uppercase;
}
.ts-rows { padding: 6px 22px 14px; }
.ts-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--rule);
}
.ts-row:last-child { border-bottom: 0; }
.ts-row .k {
  font-size: .84rem; color: var(--ink-soft); font-weight: 600;
  letter-spacing: .01em;
}
.ts-row .v {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  color: var(--figure); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.ts-foot {
  padding: 15px 22px 20px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.ts-foot p { margin: 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.5; }
.ts-seal {
  position: absolute; top: 50%; right: 14px;
  transform: translateY(-50%);
  width: 132px; height: 132px; opacity: .06; pointer-events: none;
}

/* ----------------------------------------------------------- stat strip --- */
.stats {
  background: var(--oxblood);
  color: var(--on-dark);
  border-block: 1px solid rgba(213,127,29,.3);
}
.stats .row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(247,237,226,.13);
}
.stat {
  background: var(--oxblood);
  padding: clamp(26px, 3.4vw, 42px) clamp(14px, 2vw, 26px);
  text-align: center;
}
.stat .v {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(1.75rem, 1.1rem + 2.3vw, 3rem);
  color: var(--foil-hi);
  letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .k {
  margin-top: 11px;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
@media (max-width: 760px) { .stats .row { grid-template-columns: repeat(2, 1fr); } }

/* The homepage strip carries three figures. The grid above was built for four, so
   the empty fourth cell showed the row's pale divider colour as a solid block.
   Three columns on desktop; on phones the odd third figure spans the full row. */
section.stats .row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  section.stats .row { grid-template-columns: repeat(2, 1fr); }
  section.stats .row .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Stacked figure panel (the referral block). In one column, each value sits
   directly above its own label but only just above the NEXT cell's value, and
   the hairline between cells was too faint to settle the grouping — "Broker
   Commissions" read as though it belonged to the "0%" beneath it. Tighter
   value-to-label, clearer rule between cells. Same figures, same wording. */
.stats-stack .row { background: rgba(247,237,226,.32); }
.stats-stack .stat { padding-block: clamp(22px, 2.6vw, 30px); }
.stats-stack .stat .k { margin-top: 7px; }

/* ----------------------------------------------------------------- cards -- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 30px);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
  position: relative;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--ink-soft); font-size: .945rem; margin-bottom: 0; }

.card-num {
  display: flex; align-items: flex-start; gap: 16px;
}
.card-num .n {
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  color: var(--foil-text); letter-spacing: .1em;
  padding-top: 4px; flex: none;
}

.icon-tile {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(160deg, rgba(134,2,51,.12), rgba(213,127,29,.14));
  border: 1px solid var(--rule);
  color: var(--maroon);
}
.icon-tile svg { width: 21px; height: 21px; }
.band-dark .icon-tile { background: rgba(213,127,29,.16); border-color: rgba(247,237,226,.2); color: var(--foil-hi); }

/* ------------------------------------------------- programs slider (#7) --- */
.slider { position: relative; }
.slider-viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
}
.slider-track {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  transition: transform .62s cubic-bezier(.22,.75,.24,1);
  will-change: transform;
}
.slide {
  flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 26px)) / 3);
  min-width: 0;
}
@media (max-width: 1020px) { .slide { flex-basis: calc((100% - clamp(16px,2vw,26px)) / 2); } }
@media (max-width: 680px)  { .slide { flex-basis: 100%; } }

.program-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.program-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--rule-foil); }
.program-art {
  aspect-ratio: 16 / 10;
  background: var(--oxblood);
  position: relative; overflow: hidden;
  border-bottom: 2px solid var(--foil);
}
.program-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.program-art .tag {
  position: absolute; left: 14px; top: 13px; z-index: 2;
  font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oxblood); background: var(--foil-hi);
  padding: 5px 10px; border-radius: 100px;
}
.program-body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.program-body h3 { margin-bottom: 8px; }
.program-body p { font-size: .92rem; color: var(--ink-soft); flex: 1; }
.program-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: 14px 0 18px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.program-meta div { min-width: 0; }
.program-meta .k {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.program-meta .v {
  font-family: var(--mono); font-weight: 600; font-size: .96rem;
  /* Same published-figure treatment as the term sheet, and the same dark-mode
     lift — these are the rate and funding numbers on the program cards. */
  color: var(--figure); font-variant-numeric: tabular-nums;
}

.slider-nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.slider-dots { display: flex; gap: 7px; margin-inline-start: auto; }
.slider-dots button {
  width: 26px; height: 4px; border: 0; padding: 0; cursor: pointer;
  background: var(--rule-strong); border-radius: 2px;
  transition: background-color .22s ease, width .22s ease;
}
.slider-dots button[aria-selected="true"] { background: var(--foil); width: 40px; }

/* --------------------------------------------------------------- feature -- */
.feature-list { display: grid; gap: 2px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.feature-row {
  background: var(--card);
  padding: 20px clamp(18px, 2vw, 26px);
  display: flex; gap: 16px; align-items: flex-start;
  transition: background-color .2s ease;
}
.feature-row:hover { background: var(--paper-2); }
.feature-row .ic { color: var(--foil); flex: none; margin-top: 2px; }
.feature-row .ic svg { width: 19px; height: 19px; }
.feature-row h3 { margin-bottom: 4px; }
.feature-row p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* checklist */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; color: var(--ink-2); }
.checks svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 3px; }
.band-dark .checks li { color: var(--on-dark-soft); }
.band-dark .checks svg { color: var(--foil-hi); }

/* -------------------------------------------------------------- quotes ---- */
.pullquote {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.95rem);
  line-height: 1.32; letter-spacing: -.015em;
  color: var(--maroon);
  border-inline-start: 3px solid var(--foil);
  padding-inline-start: clamp(18px, 2.2vw, 30px);
  margin: 30px 0;
  font-style: italic;
}
.band-dark .pullquote { color: var(--foil-hi); }

/* -------------------------------------------------------------- accordion - */
.accordion { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-btn {
  width: 100%; text-align: start; background: none; border: 0; cursor: pointer;
  padding: 22px 44px 22px 0; position: relative;
  font-family: var(--display); font-size: clamp(1.02rem, .96rem + .3vw, 1.22rem);
  font-weight: 600; color: var(--ink); letter-spacing: -.01em;
  transition: color .18s ease;
}
.acc-btn:hover { color: var(--maroon); }
.acc-btn .pm {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; color: var(--foil);
}
.acc-btn .pm::before, .acc-btn .pm::after {
  content: ""; position: absolute; background: currentColor; border-radius: 1px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
.acc-btn .pm::before { inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; }
.acc-btn .pm::after  { inset-block: 0; left: 50%; width: 2px; margin-left: -1px; }
.acc-item[data-open="true"] .pm::after { transform: rotate(90deg); opacity: 0; }
.acc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.2,.7,.3,1);
}
.acc-item[data-open="true"] .acc-panel { grid-template-rows: 1fr; }
/* A collapsed panel must leave the accessibility tree and the tab order, or
   aria-expanded="false" is a lie: a screen reader reads every answer regardless
   of state, and links inside stay tabbable while invisible. `visibility` does
   both, and the delayed transition lets the collapse animation finish first. */
.acc-panel > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .34s;
}
.acc-item[data-open="true"] .acc-panel > div {
  visibility: visible;
  transition: visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .acc-panel { transition: none; }
  .acc-panel > div { transition: none; }
}
.acc-panel p { padding-bottom: 22px; margin: 0; color: var(--ink-soft); max-width: 68ch; }

/* ----------------------------------------------------------------- forms -- */
.form-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--maroon);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.8vw, 36px);
  box-shadow: var(--shadow-md);
}
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label {
  font-size: .81rem; font-weight: 700; color: var(--ink-2);
  letter-spacing: .01em;
}
.field label .req { color: var(--maroon); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: .96rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--foil);
  box-shadow: 0 0 0 3px rgba(213,127,29,.18);
  background: var(--card);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.consent {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .82rem; color: var(--ink-soft); line-height: 1.5;
  margin: 4px 0 18px;
}
.consent input { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--maroon); }

.disclaimer {
  font-size: .76rem; color: var(--ink-soft); line-height: 1.55;
  border-inline-start: 2px solid var(--rule-foil);
  padding-inline-start: 13px;
  margin-top: 16px;
}

.form-status {
  margin-top: 14px; padding: 12px 15px; border-radius: var(--r-md);
  font-size: .875rem; font-weight: 600;
  background: rgba(47,107,70,.1); color: var(--ok);
  border: 1px solid rgba(47,107,70,.3);
  display: none;
}
.form-status.show { display: block; }

/* A field the visitor has actually left invalid — :user-invalid, not :invalid,
   so an untouched required field is never marked red on page load. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--maroon);
  background: rgba(134, 2, 51, .035);
}

/* Honeypot. Hidden from sighted users AND from assistive technology, but still
   submitted — so `display:none` is fine here and `.sr-only` would be wrong. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Per-field error, placed inside the field so it sits next to the control it
   describes and is reached by aria-describedby. */
.field-error {
  margin: 6px 0 0; font-size: .82rem; font-weight: 600;
  color: var(--maroon);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--maroon);
  background: rgba(134, 2, 51, .035);
}

/* Form-level failure. role="alert", so it must not exist on the page until
   there is something to announce. */
.form-error {
  margin-top: 14px; padding: 12px 15px; border-radius: var(--r-md);
  font-size: .875rem; font-weight: 600;
  background: rgba(134, 2, 51, .09);
  color: var(--maroon-deep);
  border: 1px solid rgba(134, 2, 51, .34);
}
:root[data-theme="dark"] .form-error,
:root:not([data-theme="light"]) .form-error { color: var(--figure); }
.form-status.bad {
  background: rgba(134, 2, 51, .09);
  color: var(--maroon-deep);
  border-color: rgba(134, 2, 51, .34);
}
:root[data-theme="dark"] .form-status.bad,
:root:not([data-theme="light"]) .form-status.bad { color: var(--figure); }

/* --------------------------------------------------------------- offices -- */
.office {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.office-body { padding: clamp(20px, 2.2vw, 28px); }
.office-body h3 { margin: 10px 0 6px; }
.office .addr { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.office .rows { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); display: grid; gap: 9px; }
.office .rows div { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; }
.office .rows .k { color: var(--ink-soft); }
.office .rows .v { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.office-map { aspect-ratio: 16 / 9; background: var(--paper-3); border-top: 1px solid var(--rule); }
.office-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.86) contrast(1.02); }
:root[data-theme="dark"] .office-map iframe,
:root:not([data-theme="light"]) .office-map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.7) contrast(.92); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .office-map iframe { filter: saturate(.86) contrast(1.02); }
}

/* ----------------------------------------------------------------- table -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); }
table.doc { width: 100%; border-collapse: collapse; min-width: 560px; }
table.doc th, table.doc td { padding: 15px 18px; text-align: start; border-bottom: 1px solid var(--rule); }
table.doc th {
  font-family: var(--mono); font-size: .67rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--paper-2);
}
table.doc tr:last-child td { border-bottom: 0; }
table.doc tbody tr { transition: background-color .16s ease; }
table.doc tbody tr:hover { background: var(--paper-2); }
table.doc .size { font-family: var(--mono); font-size: .84rem; color: var(--ink-soft); white-space: nowrap; }
table.doc .dl { white-space: nowrap; font-weight: 700; font-size: .86rem; text-decoration: none; }

/* --------------------------------------------------------------- process -- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 62px 1fr; gap: clamp(14px, 2vw, 26px);
  padding: 24px 0; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.step:last-child { border-bottom: 0; }
.step .n {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
  color: var(--foil); line-height: 1;
  border-inline-end: 1px solid var(--rule-foil);
  padding-inline-end: 14px; text-align: end;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 5px; }
.step p { margin: 0; font-size: .93rem; color: var(--ink-soft); }


/* ------------------------------------------------ accreditation seals ----- */
/* Certification marks are brand assets and must not be recoloured, so each
   sits on its own light plaque rather than fighting the oxblood ground. */
.seal-strip {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 3px solid var(--foil);
  padding-block: clamp(22px, 2.6vw, 34px);
}
.seal-strip .inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3vw, 44px);
  flex-wrap: wrap;
}
.seal-strip .lede {
  font-family: var(--mono); font-size: .69rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-inline-end: 4px;
}
.seals { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); flex-wrap: wrap; }
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 12px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.seal:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.seal img { display: block; width: auto; }
.seal-flexclose img { height: 72px; }
.seal-bbb img { height: 56px; }
@media (max-width: 560px) {
  .seal-strip .lede { flex-basis: 100%; text-align: center; margin: 0 0 4px; }
  .seal-flexclose img { height: 52px; }
  .seal-bbb img { height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .seal:hover { transform: none; } }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--oxblood);
  color: var(--on-dark-soft);
  border-top: 3px solid var(--foil);
}
.footer-top { padding-block: clamp(46px, 5.5vw, 78px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.05fr;
  gap: clamp(26px, 3vw, 46px);
}
@media (max-width: 1020px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { width: 190px; margin-bottom: 18px; }
.footer-brand p { font-size: .92rem; line-height: 1.65; max-width: 42ch; color: var(--on-dark-soft); }
.site-footer h2 {
  font-family: var(--mono); font-size: .69rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--foil-hi); margin-bottom: 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ------------------------------------------------- heading level vs. size --
   Heading LEVEL is document structure — it is what a screen reader navigates
   by, and skipping one reads as missing content. Heading SIZE is design. These
   rules keep the sizes exactly as drawn while the levels below them were
   corrected, so nothing moved on screen. Never "fix" a level by changing the
   size, or the reverse. */
.feature-row h3, .step h3 { font-size: 1.05rem; letter-spacing: -.006em; }
.icon-tile ~ h2, .card > h2 { font-size: clamp(1.2rem, 1.02rem + .65vw, 1.55rem); letter-spacing: -.012em; }
.post-item h2 { font-size: clamp(1.2rem, 1.02rem + .65vw, 1.55rem); letter-spacing: -.012em; margin-bottom: 8px; }
.post-item h2 a { text-decoration: none; color: var(--ink); }
.post-item h2 a:hover { color: var(--maroon); }
h2.h3-size { font-size: clamp(1.2rem, 1.02rem + .65vw, 1.55rem); letter-spacing: -.012em; }
.site-footer ul a, .site-footer .fline {
  color: var(--on-dark-soft); text-decoration: none; font-size: .92rem;
  transition: color .16s ease;
}
.site-footer ul a:hover { color: var(--foil-hi); }

.eho { display: flex; gap: 11px; align-items: center; margin-top: 20px; font-size: .8rem; color: var(--on-dark-soft); }
.eho svg { width: 30px; height: 30px; flex: none; color: var(--foil-hi); }
/* The Equal Housing Lender link sits on the dark footer: use the footer's own light
   link colour (the global maroon link colour was close to invisible here). */
.badge a { color: var(--figure); text-underline-offset: 3px; }   /* --figure lifts the maroon in dark mode */
.eho a { color: var(--foil-hi); text-decoration: underline; text-underline-offset: 3px; }
.eho a:hover { color: #fff; }

.social { display: flex; gap: 8px; margin-top: 20px; }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(247,237,226,.2); border-radius: var(--r-md);
  color: var(--on-dark); transition: all .18s ease;
}
.social a:hover { border-color: var(--foil); color: var(--foil-hi); background: rgba(213,127,29,.14); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }

.footer-bottom {
  border-top: 1px solid rgba(247,237,226,.14);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  align-items: center; justify-content: center; text-align: center;
  font-size: .82rem;
}
.footer-bottom a { color: var(--on-dark-soft); text-decoration: none; }
.footer-bottom a:hover { color: var(--foil-hi); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; }
.footer-bottom .footer-credit { order: 2; flex: 0 0 100%; padding-top: 16px; border-top: 1px solid rgba(247,237,226,.09); }
.footer-credit a { color: var(--foil-hi); text-decoration: none; font-weight: 600; }
.footer-credit a:hover { text-decoration: underline; }

/* Accessibility Statement link — the international symbol of access, sized to
   read as an icon rather than another word in the legal row. Deliberately a
   link to a real page, not an overlay widget: overlays inject a guessing layer
   that fights the assistive software people have already configured. */
.a11y-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.a11y-link svg { width: 17px; height: 17px; flex: none; color: var(--foil-hi); }
.a11y-link:hover { border-color: var(--foil); background: rgba(213,127,29,.12); }

/* the discreet insights entry point — a foil lozenge, no label (req. #8) */
.insights-key {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: rgba(247,237,226,.34);
  border: 1px solid rgba(247,237,226,.2);
  text-decoration: none;
  transition: all .2s ease;
  font-size: 9px; line-height: 1;
}
.insights-key:hover { color: var(--oxblood); background: var(--foil-hi); border-color: var(--foil-hi); }

/* ------------------------------------------------------------ call float -- */
/* ------------------------------------------------------------ breadcrumb -- */
.crumbs {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--foil-text); }
.crumbs .sep { color: var(--foil); }
/* Both dark grounds, not just .band-dark. The page masthead is a separate
   class, so breadcrumbs there kept the light-theme ink and sat on oxblood at
   2.49:1 — unreadable, on every interior page. */
.band-dark .crumbs, .band-dark .crumbs a,
.page-head .crumbs, .page-head .crumbs a { color: var(--on-dark-soft); }
.page-head .crumbs .sep { color: var(--foil-hi); }
.page-head .crumbs a:hover { color: var(--on-dark); }

/* --------------------------------------------------------- page masthead -- */
.page-head {
  background:
    radial-gradient(760px 380px at 82% -20%, rgba(213,127,29,.16), transparent 62%),
    var(--oxblood);
  color: var(--on-dark);
  padding-block: clamp(46px, 5.6vw, 88px);
  border-bottom: 3px solid var(--foil);
  overflow: hidden;
}
.page-head h1 { color: #fff; margin-top: 14px; max-width: 20ch; }
.page-head .lead { color: var(--on-dark-soft); margin-top: 18px; max-width: 58ch; }
.page-head .crumbs { margin-bottom: 20px; }

/* -------------------------------------------------------------- insights -- */
.post-list { display: grid; gap: 2px; background: var(--rule); border-block: 1px solid var(--rule); }
.post-item {
  background: var(--paper);
  padding: clamp(22px, 2.6vw, 32px) 0;
  display: grid; grid-template-columns: 130px 1fr; gap: clamp(16px, 2.4vw, 34px);
  transition: background-color .2s ease;
}
.post-item:hover { background: var(--paper-2); }
.post-item .meta {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); padding-top: 6px;
}
.post-item h2 { margin-bottom: 8px; }
.post-item h2 a { text-decoration: none; color: var(--ink); }
.post-item h2 a:hover { color: var(--maroon); }
.post-item p { font-size: .94rem; color: var(--ink-soft); margin-bottom: 10px; max-width: 68ch; }
@media (max-width: 680px) { .post-item { grid-template-columns: 1fr; gap: 8px; } }

.article { max-width: 720px; margin-inline: auto; }
.article h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); margin: 44px 0 14px; }
.article h3 { margin: 30px 0 10px; }
.article p, .article li { color: var(--ink-2); font-size: 1.045rem; line-height: 1.72; }
.article ul, .article ol { padding-inline-start: 22px; margin: 0 0 1.05em; }
.article li { margin-bottom: 8px; }
.article .key-take {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--foil);
  border-radius: var(--r-md);
  padding: 20px 24px; margin: 30px 0;
}
.article .key-take h2, .article .key-take h3 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--foil-text); margin-bottom: 10px;
}
.article .key-take p:last-child, .article .key-take ul:last-child { margin-bottom: 0; }
.article-foot {
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------- animation -- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .72s cubic-bezier(.2,.7,.3,1), transform .72s cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .card:hover, .program-card:hover { transform: none; }
  .slider-track { transition: none; }
}

/* print */
@media print {
  .site-header, .utility, .marquee, .drawer, .site-footer .social { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Equal Housing Lender link inside the dark ticker: inherit the ticker's light
   text rather than the global maroon link colour (was invisible on oxblood). */
.marquee .item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.marquee .item a:hover { color: var(--foil-hi); }
/* Approval / Funding rows: the label carries "in as little as" on a second line
   in exactly the label's own type; the figure ("24 hours", "7 days") sits on the
   right like every other term-sheet value. */
.ts-row-2 { align-items: center; }
.ts-row .k .k-sub { display: block; font: inherit; color: inherit; letter-spacing: inherit; margin-top: 2px; }
.ts-row-2 .v { white-space: nowrap; }

/* A clear gap between the rates-and-terms disclaimer and its "*Subject to terms and
   conditions." footnote (the .ts-foot paragraph reset would otherwise close it up). */
p.terms-footnote, .ts-foot p.terms-footnote { margin-top: 14px; }

/* Easy Loan Application + thank-you page */
.easy-sec{padding-block:clamp(40px,5vw,72px)}
.easy-grid{align-items:start;gap:clamp(24px,4vw,56px)}
@media(min-width:900px){.easy-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr)}.easy-intro{position:sticky;top:110px}}
.easy-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.easy-list li{padding-inline-start:26px;position:relative;font-weight:600}
.easy-list li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:12px;height:2px;background:var(--gold,#b8892b)}
.easy-list a,.form-email a{color:var(--maroon)}
.form-group{display:flex;align-items:center;gap:12px;font-size:1.05rem;margin:26px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line,rgba(0,0,0,.12))}
.form-group:first-of-type{margin-top:0}
.form-group .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--maroon);color:#fff;font:700 .85rem/1 var(--mono,monospace)}
.form-fine,.form-email{margin:14px 0 0;font-size:.9rem;color:var(--ink-soft);text-align:center}
.form-email{margin-top:6px}
.consent a{color:var(--maroon);text-decoration:underline}
.role-field{border:0;padding:0;margin:0 0 16px;min-width:0}
.role-field legend{padding:0;margin-bottom:7px;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.role-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-opt{position:relative;display:block;cursor:pointer}
.role-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.role-opt span{display:block;text-align:center;padding:12px 10px;border:1px solid var(--line,rgba(0,0,0,.25));border-radius:8px;background:var(--paper,#faf6ef);font-weight:600}
.role-opt input:checked+span{border-color:var(--maroon);background:var(--maroon);color:#fff}
.role-opt input:focus-visible+span{outline:3px solid var(--gold,#b8892b);outline-offset:2px}
.broker-only{display:none}
.easy-form:has(#easy_role_broker:checked) .broker-only{display:grid}
.thanks-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.thanks-steps{margin:14px 0 0;padding-inline-start:22px;display:grid;gap:10px}


/* ---- Section print: the header's security-print pattern carried down the page (medium strength) ---- */
main > section:not(.hero):not(.page-head):not(.stats) { position: relative; isolation: isolate; }
main > section:not(.hero):not(.page-head):not(.stats):not(.engraved)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--guilloche, none); background-size: 520px 520px; opacity: .65;
}
main > section.engraved:not(.page-head):not(.hero)::before { opacity: .65; }

/* ===== brief 2026-09-30: static trust row + no-JS safety ===== */
.trustrow { background: #860233; color: #fff; border-block: 1px solid rgba(0,0,0,.15); }
.trustrow .container { max-width: none; padding-inline: 12px; }
.trustrow .tr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.trustrow li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border-inline-end: 1px solid rgba(255,255,255,.16); }
.trustrow li:last-child { border-inline-end: 0; }
.trustrow li svg { width: 15px; height: 15px; flex: none; color: var(--foil-hi); }
.trustrow li a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .trustrow .tr-list { display: grid; grid-template-columns: 1fr 1fr; }
  .trustrow li { padding: 9px 12px; letter-spacing: .08em; font-size: .66rem; border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.12); line-height: 1.25; }
}
@media (max-width: 360px) { .trustrow li { padding: 8px 8px; letter-spacing: .05em; font-size: .6rem; gap: 6px; } .trustrow li svg { width: 13px; height: 13px; } }
@media print { .trustrow { display: none !important; } }
/* content is visible by default; hiding is an enhancement that only applies when scripts run */
.reveal { opacity: 1; transform: none; }
html.js .reveal:not(.in) { opacity: 0; transform: translateY(22px); animation: rv-failsafe .01s linear 3.5s forwards; }
@keyframes rv-failsafe { to { opacity: 1; transform: none; } }
html:not(.js) .acc-panel { grid-template-rows: 1fr; }
html:not(.js) .acc-panel > div { visibility: visible; }
html:not(.js) .acc-btn .pm { display: none; }
html:not(.js) .nav-toggle, html:not(.js) .header-call { display: none !important; }
html:not(.js) .header-row { flex-wrap: wrap; justify-content: center; padding-block: 8px; }
html:not(.js) .nav-primary, html:lang(es):not(.js) .nav-primary { display: flex !important; flex-wrap: wrap; justify-content: center; order: 5; width: 100%; margin: 0; }
html:not(.js) #theme-toggle, html:not(.js) [data-slider-prev], html:not(.js) [data-slider-next] { display: none; }
html:not(.js) .nav-item { display: contents; }
html:not(.js) .nav-item > button { display: none; }
html:not(.js) .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; display: contents; box-shadow: none; border: 0; background: none; }
html:not(.js) .nav-menu a { padding: 11px 9px; }
html:not(.js) .nav-menu .d { display: none; }
/* ===== task 8: engraved pattern only on the top banner (hero / page head); reading, form and dark bands stay quiet ===== */
main > section:not(.hero):not(.page-head)::before { display: none !important; }
/* ===== task 9: gold as fine accents - flat fills, hairline rules, no decorative seal ===== */
.btn-foil, .header-actions .btn-primary { background: var(--foil); box-shadow: var(--shadow-sm); }
.btn-foil, .band-dark a.btn-foil, .band-dark a.btn-foil:hover { color: #24140a; }
.btn-foil:hover, .header-actions .btn-primary:hover { background: var(--foil-hi); box-shadow: var(--shadow-sm); }
.foil-rule { height: 1px; background: var(--rule-foil); opacity: 1; }
.termsheet::after { height: 1px; background: var(--foil); }
.ts-seal { display: none; }
.icon-tile { background: rgba(134,2,51,.06); }
.band-dark .icon-tile { background: rgba(247,237,226,.08); }
.seal-strip { border-bottom-width: 1px; }
.site-footer { border-top-width: 1px; }
.step .n { color: var(--foil-text); }