/* ==========================================================================
   Loan Shepherd — site stylesheet
   Brand: Shepherd Navy #101D2E · Shepherd Lime #C0D72F
   Type:  Switzer (display) · Inter (text)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('../fonts/Switzer-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: 'Inter'; src: url('../fonts/Inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  /* Core palette */
  --navy:        #101D2E;
  --navy-90:     #273342;
  --navy-80:     #3E4956;
  --navy-70:     #57606C;
  --lime:        #C0D72F;
  --lime-85:     #C8DC4E;
  --lime-70:     #D2E26D;
  --slate:       #F7F6F0;
  --stone:       #A2ADB3;
  --mist:        #D7D7D5;
  --cloud:       #EFEBE5;
  --white:       #FFFFFF;

  /* Semantic */
  --bg:          var(--slate);
  --bg-alt:      var(--cloud);
  --surface:     var(--white);
  --ink:         var(--navy);
  --ink-muted:   #4A5563;
  --ink-subtle:  #616B78;
  --rule:        rgba(16, 29, 46, 0.12);
  --rule-strong: rgba(16, 29, 46, 0.22);

  /* On-navy */
  --on-navy:        rgba(255, 255, 255, 0.94);
  --on-navy-muted:  rgba(255, 255, 255, 0.68);
  --on-navy-rule:   rgba(255, 255, 255, 0.16);

  /* Type */
  --font-display: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Scale — fluid */
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.14vw, 1.08rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.32vw, 1.38rem);
  --step-2:  clamp(1.48rem, 1.34rem + 0.66vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.58rem + 1.24vw, 2.55rem);
  --step-4:  clamp(2.25rem, 1.78rem + 2.14vw, 3.45rem);
  --step-5:  clamp(2.70rem, 1.90rem + 3.60vw, 4.75rem);

  /* Space */
  --sp-1: 0.375rem; --sp-2: 0.625rem; --sp-3: 1rem;
  --sp-4: 1.5rem;   --sp-5: 2.25rem;  --sp-6: 3.25rem;
  --sp-7: 4.5rem;   --sp-8: 6.5rem;

  /* Radii + shadow */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,29,46,.06), 0 4px 12px -4px rgba(16,29,46,.08);
  --shadow-md: 0 2px 4px rgba(16,29,46,.05), 0 14px 32px -12px rgba(16,29,46,.16);
  --shadow-lg: 0 4px 8px rgba(16,29,46,.05), 0 32px 64px -20px rgba(16,29,46,.22);

  --measure: 66ch;
  --wrap: 1200px;
  --wrap-narrow: 780px;
}

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

/* `hidden` must win over any component display rule (flex/grid rows toggle it). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

/* Switzer ships no italic, so synthesised oblique must never appear.
   Emphasis uses the brand's Light-over-Extrabold contrast instead. */
h1 em, h2 em, h3 em, h4 em, blockquote em {
  font-style: normal;
  font-weight: 300;
}
.band-navy h1 em, .band-navy h2 em, .band-navy h3 em, .band-navy h4 em { color: var(--lime); }
p  { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-navy :focus-visible, .site-footer :focus-visible { outline-color: var(--lime); }

::selection { background: var(--lime); color: var(--navy); }

.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 200;
  background: var(--lime); color: var(--navy);
  padding: 0.7rem 1.2rem; border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: var(--sp-3); }

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

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 800px) { .wrap { padding-inline: var(--sp-5); } }
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-6); }
@media (min-width: 800px) { .section { padding-block: var(--sp-7); } }
.section-tight { padding-block: var(--sp-5); }

.band-navy  { background: var(--navy); color: var(--on-navy); }
.band-cloud { background: var(--bg-alt); }
.band-white { background: var(--surface); }

.band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4 { color: var(--white); }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 var(--sp-3);
}
.eyebrow::before {
  content: ''; width: 26px; height: 3px; border-radius: 2px;
  background: var(--lime); flex: none;
}
.band-navy .eyebrow { color: var(--lime); }

.calc-teaser .lede { font-size: var(--step-0); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: var(--measure);
  font-weight: 400;
}
.band-navy .lede { color: var(--on-navy-muted); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-5); }
.section-head h2 + .lede { margin-top: var(--sp-4); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--lime); --btn-fg: var(--navy); --btn-bd: var(--lime);
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  padding: 0.7rem 1.35rem;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-weight: 600; font-size: 0.94rem;
  letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(16,29,46,.28); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-solid:hover { background: var(--lime-85); border-color: var(--lime-85); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--rule-strong); }
.btn-outline:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

.on-navy .btn-outline, .band-navy .btn-outline { --btn-fg: var(--white); --btn-bd: var(--on-navy-rule); }
.on-navy .btn-outline:hover, .band-navy .btn-outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.btn-lg { padding: 1.05rem 1.9rem; font-size: var(--step-1); }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 600; text-decoration: none;
  color: var(--ink);
  border-bottom: 1.5px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: border-color .16s ease, gap .16s ease;
}
.link-arrow:hover { border-color: var(--navy); gap: 0.7em; }
.band-navy .link-arrow { color: var(--white); border-color: var(--on-navy-rule); }
.band-navy .link-arrow:hover { border-color: var(--lime); }

/* Pinned to the top of the document and out of flow, so it costs no layout.
   The header watches it to know whether the page is scrolled. */
#headerSentinel {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 12px;
  pointer-events: none;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 246, 240, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .25s ease;
}

/* ---- At the very top the header joins the navy band below it ----
   Every page opens on a navy hero or page-hero, so the bar reads as part of
   it. The bar is plain navy; the bands below fade in their lime wash from a
   solid navy top edge, so the join is invisible without matching gradients. */
.site-header[data-scrolled='false'] {
  background-color: var(--navy);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header[data-scrolled='false'] .nav a { color: var(--on-navy-muted); }
.site-header[data-scrolled='false'] .nav a:hover { color: var(--white); background: rgba(255,255,255,.09); }
.site-header[data-scrolled='false'] .nav a[aria-current='page'] { color: var(--white); background: rgba(255,255,255,.12); }
.site-header[data-scrolled='false'] .nav .nav-guides-toggle { color: var(--on-navy-muted); }
.site-header[data-scrolled='false'] .nav .nav-guides-toggle:hover { color: var(--white); background: rgba(255,255,255,.09); }
.site-header[data-scrolled='false'] .nav-toggle { border-color: var(--on-navy-rule); }
.site-header[data-scrolled='false'] .nav-toggle:hover { background: rgba(255,255,255,.09); }
.site-header[data-scrolled='false'] .nav-toggle span,
.site-header[data-scrolled='false'] .nav-toggle span::before,
.site-header[data-scrolled='false'] .nav-toggle span::after { background: var(--white); }
.site-header[data-scrolled='false'] .nav-toggle[aria-expanded='true'] span { background: transparent; }

.site-header[data-scrolled='true'] {
  border-bottom-color: var(--rule);
  box-shadow: 0 6px 24px -18px rgba(16,29,46,.5);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 76px;
}
.brand { display: grid; align-items: center; text-decoration: none; flex: none; }
.brand-logo { grid-area: 1 / 1; height: 34px; width: auto; transition: opacity .25s ease; }
@media (min-width: 700px) { .brand-logo { height: 38px; } }
/* The white wordmark only shows while the header sits on the navy band. */
.brand-logo-light { opacity: 0; }
.site-header[data-scrolled='false'] .brand-logo-dark { opacity: 0; }
.site-header[data-scrolled='false'] .brand-logo-light { opacity: 1; }

/* With the mobile menu open the bar sits on the light panel, not the hero, so
   it drops the navy treatment even at the top. Declared after the logo rules
   above so it wins on source order at equal specificity. */
.site-header[data-nav-open='true'] {
  background-color: rgba(247, 246, 240, 0.96);
  background-image: none;
}
.site-header[data-nav-open='true'] .brand-logo-dark { opacity: 1; }
.site-header[data-nav-open='true'] .brand-logo-light { opacity: 0; }
.site-header[data-nav-open='true'] .nav a { color: var(--ink-muted); }
.site-header[data-nav-open='true'] .nav a[aria-current='page'] { color: var(--navy); background: rgba(16,29,46,.06); }
.site-header[data-nav-open='true'] .nav-toggle { border-color: var(--rule-strong); }
.site-header[data-nav-open='true'] .nav-toggle span,
.site-header[data-nav-open='true'] .nav-toggle span::before,
.site-header[data-nav-open='true'] .nav-toggle span::after { background: var(--navy); }
.site-header[data-nav-open='true'] .nav-toggle[aria-expanded='true'] span { background: transparent; }

.nav { display: none; }
@media (min-width: 960px) {
  .nav { display: flex; align-items: center; gap: 0.35rem; }
  .nav a {
    text-decoration: none; font-weight: 500; font-size: 0.95rem;
    padding: 0.55rem 0.85rem; border-radius: var(--r-pill);
    color: var(--ink-muted);
    transition: color .25s ease, background-color .25s ease;
  }
  .nav a:hover { color: var(--navy); background: rgba(16,29,46,.05); }
  .nav a[aria-current='page'] { color: var(--navy); font-weight: 600; background: rgba(16,29,46,.06); }
}
.header-cta { display: none; }
@media (min-width: 960px) {
  .header-cta { display: inline-flex; padding: 0.62rem 1.2rem; font-size: 0.88rem; }
}

/* ---------- Guides nav dropdown ---------- */
.nav-guides { position: relative; }
.nav-guides-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
}
@media (min-width: 960px) {
  .nav-guides-toggle {
    font-weight: 500; font-size: 0.95rem;
    padding: 0.55rem 0.85rem; border-radius: var(--r-pill);
    color: var(--ink-muted);
    transition: color .25s ease, background-color .25s ease;
  }
  .nav-guides-toggle:hover { color: var(--navy); background: rgba(16,29,46,.05); }
  .site-header[data-nav-open='true'] .nav-guides-toggle { color: var(--ink-muted); }
}
.nav-caret { width: 10px; height: 7px; flex: none; transition: transform .18s ease; }
.nav-caret path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-guides[data-open='true'] .nav-caret { transform: rotate(180deg); }

.nav-guides-menu { display: none; }
.nav-guides[data-open='true'] .nav-guides-menu { display: block; }
@media (min-width: 960px) {
  .nav-guides-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
    min-width: 240px; padding: var(--sp-2);
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  }
  /* The panel's own background is always light, regardless of the header's
     scrolled/open state — !important overrides the header's ambient
     "light text on navy" rules for <a> tags, which outrank this on
     specificity ([data-scrolled] / [data-nav-open] attribute selectors)
     but were never meant to reach into a light-background dropdown. */
  .nav-guides-menu a {
    display: block; text-decoration: none; font-size: 0.92rem; font-weight: 500;
    color: var(--ink-muted) !important; padding: 0.6rem 0.7rem; border-radius: var(--r-sm);
    transition: color .15s ease, background-color .15s ease;
  }
  .nav-guides-menu a:hover { color: var(--navy) !important; background: rgba(16,29,46,.05); }
}

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  background: transparent; border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-pill); cursor: pointer;
  transition: background-color .15s ease;
}
.nav-toggle { transition: background-color .15s ease, border-color .25s ease; }
.nav-toggle:hover { background: rgba(16,29,46,.05); }
@media (min-width: 960px) { .nav-toggle { display: none; } }
.nav-toggle span { position: relative; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s ease, background-color .25s ease; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .2s ease, background-color .25s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen panel rather than an in-flow dropdown: it now covers
   everything below the header and scrolls internally, with a fade + slight
   drop transition instead of an instant display:none/block snap. Visibility
   (not display) drives show/hide so the transition has something to
   animate; the delay on the closing transition keeps it interactive-free
   and off the tab order until the fade-out finishes. */
.mobile-nav {
  position: fixed; top: 76px; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--slate);
  padding: var(--sp-5) 0 var(--sp-6);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px -24px rgba(16,29,46,.4);
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.mobile-nav[data-open='true'] {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}
@media (min-width: 960px) { .mobile-nav { display: none !important; } }

.mobile-nav-links { display: flex; flex-direction: column; padding-inline: var(--sp-4); }
.mobile-nav-links > * { border-bottom: 1px solid var(--rule); }
.mobile-nav-links > *:last-child { border-bottom: none; }

.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none; font-weight: 500;
  font-size: var(--step-1); font-family: var(--font-display);
  padding: 1rem var(--sp-3); margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: background-color .15s ease, color .15s ease;
}
.mobile-nav a:active { background: rgba(16,29,46,.06); }
.mobile-nav a[aria-current='page'] {
  color: var(--navy); font-weight: 700;
  background: rgba(192,215,47,.22);
}

.mobile-nav .nav-guides-toggle {
  width: 100%; justify-content: space-between;
  font-size: var(--step-1); font-family: var(--font-display); font-weight: 500;
  padding: 1rem var(--sp-3); margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: color .2s ease, background-color .2s ease;
}
.mobile-nav .nav-guides[data-open='true'] .nav-guides-toggle {
  color: var(--navy); font-weight: 700; background: rgba(192,215,47,.12);
}
.mobile-nav .nav-caret { width: 12px; height: 8px; color: var(--stone); }
.mobile-nav .nav-guides[data-open='true'] .nav-caret { color: var(--lime); }

/* Animated accordion: always in flow (not display:none) so max-height can
   transition; a generous cap covers six links without needing JS to
   measure real content height. */
.mobile-nav .nav-guides-menu {
  display: block; max-height: 0; overflow: hidden;
  background: rgba(16,29,46,.035);
  border-radius: var(--r-md);
  transition: max-height .32s ease;
}
.mobile-nav .nav-guides[data-open='true'] .nav-guides-menu { max-height: 420px; margin-bottom: var(--sp-2); }
.mobile-nav .nav-guides-menu a {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem;
  font-size: 0.93rem; font-family: var(--font-text); font-weight: 500;
  padding: 0.65rem var(--sp-3); margin-inline: 0.4rem;
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
  transition: color .15s ease, background-color .15s ease;
}
.mobile-nav .nav-guides-menu a::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--lime);
}
.mobile-nav .nav-guides-menu a:last-child { border-bottom: none; }
.mobile-nav .nav-guides-menu a:active { color: var(--navy); background: rgba(16,29,46,.05); }

.mobile-nav-cta {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-4) 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.mobile-nav-cta .btn { width: 100%; justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--on-navy);
  padding-block: var(--sp-5) var(--sp-6);
  isolation: isolate;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--navy) 0, rgba(16,29,46,0) 130px),
    radial-gradient(120% 90% at 88% 8%, rgba(192,215,47,.13), transparent 62%),
    radial-gradient(80% 70% at 4% 100%, rgba(192,215,47,.07), transparent 60%);
}
.hero-grid { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1fr 0.92fr; gap: var(--sp-6); }
}
.hero h1 { font-size: var(--step-4); max-width: 18ch; }
.hero h1 em { font-style: normal; font-weight: 800; color: var(--lime); }
.hero .lede { margin-top: var(--sp-4); font-size: var(--step-1); }
.hero .btn-group { margin-top: var(--sp-5); }

.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 939px) { .hero-art { max-width: 560px; margin-inline: auto; } }

.trust-strip {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--on-navy-rule);
  display: grid; gap: var(--sp-4);
}
@media (min-width: 560px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust-strip { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }
.trust-item { display: flex; gap: 0.7rem; align-items: flex-start; }
.trust-item svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--lime); }
.trust-item strong {
  display: block; color: var(--white); font-weight: 600;
  font-family: var(--font-display); font-size: var(--step-0); letter-spacing: -0.01em;
}
.trust-item span { display: block; margin-top: 2px; font-size: 0.92rem; color: var(--on-navy-muted); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-2-max { max-width: 820px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card p { color: var(--ink-muted); }
.card-link { text-decoration: none; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
.card-link .link-arrow { margin-top: auto; align-self: flex-start; }

.band-navy .card {
  background: rgba(255,255,255,.045);
  border-color: var(--on-navy-rule);
}
.band-navy .card p { color: var(--on-navy-muted); }

.card-icon {
  width: 50px; height: 50px; flex: none;
  border-radius: var(--r-sm);
  background: var(--lime);
  color: var(--navy);
  display: grid; place-items: center;
}
.card-icon svg { width: 25px; height: 25px; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-4); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  counter-increment: step;
  position: relative;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--rule);
}
.step::before {
  content: 'Step 0' counter(step);
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-1); color: var(--lime);
  -webkit-text-stroke: 0;
  margin-bottom: var(--sp-2);
}
.band-navy .step { border-top-color: var(--on-navy-rule); }
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.step p { color: var(--ink-muted); font-size: 0.97rem; }
.band-navy .step p { color: var(--on-navy-muted); }

/* ---------- Stats ---------- */
.stats { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.stat dt { font-size: var(--step--1); color: var(--ink-subtle); font-weight: 500; letter-spacing: .02em; }
.stat dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-3); letter-spacing: -0.03em;
  line-height: 1;
}
.band-navy .stat dt { color: var(--on-navy-muted); }
.band-navy .stat dd { color: var(--white); }

/* ---------- Split feature ---------- */
.split { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
.split-media {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--navy);
  padding: var(--sp-4);
}
.split-reverse > :first-child { order: 2; }
@media (max-width: 899px) { .split-reverse > :first-child { order: 0; } }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.checklist li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--ink-muted); }
.checklist svg { width: 21px; height: 21px; flex: none; margin-top: 3px; color: var(--navy); }
.band-navy .checklist li { color: var(--on-navy-muted); }
.band-navy .checklist svg { color: var(--lime); }

/* ---------- Team ---------- */
.person { text-align: left; }
.person-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--navy); color: var(--lime);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.7rem; letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.person h3 { font-size: var(--step-1); }
.person .role { color: var(--ink-subtle); font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: var(--sp-1); }
.person p { margin-top: var(--sp-3); color: var(--ink-muted); font-size: 0.97rem; }
.person-contact { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.93rem; }
.person-contact a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--rule); width: fit-content; }
.person-contact a:hover { color: var(--navy); border-color: var(--navy); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.faq-column { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-4) 3rem var(--sp-4) 0;
  position: relative;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); letter-spacing: -0.012em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0.4rem; top: 50%;
  width: 13px; height: 13px; margin-top: -8px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -4px; }
.faq summary:hover { color: var(--navy-80); }
.faq .faq-body { padding: 0 var(--sp-5) var(--sp-5) 0; max-width: var(--measure); }
.faq .faq-body p + p { margin-top: var(--sp-3); }
.faq .faq-body { color: var(--ink-muted); }

/* ---------- Quote ---------- */
.quote {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--step-2); line-height: 1.34; letter-spacing: -0.015em; }
.quote figcaption { font-size: var(--step--1); color: var(--ink-subtle); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 700px) { .form-card { padding: var(--sp-5); } }
.field-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .field-grid-2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.94rem; }
.field .hint { font-size: 0.86rem; color: var(--ink-subtle); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--slate);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.95rem;
  width: 100%;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23616B78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; padding-right: 2.6rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--rule-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--white);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(192,215,47,.4);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'], .field select[aria-invalid='true'] { border-color: #B4322B; }
.field .error { font-size: 0.86rem; color: #A32A24; font-weight: 500; min-height: 0; }
.consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-muted); }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--navy); }
.form-status { border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-weight: 500; font-size: 0.95rem; }
.form-status[data-kind='ok']  { background: rgba(192,215,47,.22); border: 1px solid rgba(16,29,46,.14); color: var(--navy); }
.form-status[data-kind='err'] { background: #FBEBE9; border: 1px solid #E4B5B0; color: #8A231E; }

/* ---------- Contact rows ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.contact-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contact-list .ci {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-sm);
  background: rgba(192,215,47,.2); color: var(--navy);
  display: grid; place-items: center;
}
.band-navy .contact-list .ci { background: rgba(192,215,47,.16); color: var(--lime); }
.contact-list .ci svg { width: 17px; height: 17px; }
.contact-list dt { font-size: var(--step--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.band-navy .contact-list dt { color: var(--on-navy-muted); }
.contact-list dd { margin: 2px 0 0; font-size: var(--step-0); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.contact-list dd a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact-list dd a:hover { border-color: currentColor; }
.band-navy .contact-list dd a { border-color: var(--on-navy-rule); }

.inline-ico {
  width: 15px; height: 15px;
  display: inline-block; vertical-align: -3px;
  margin-right: 0.4rem;
}
.social-line { display: inline-flex; align-items: center; }

.calendly-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  overflow: hidden;
}
.calendly-panel .eyebrow { margin: 0 0 var(--sp-2) var(--sp-2); }
.calendly-panel .calendly-inline-widget { border-radius: var(--r-sm); }
.calendly-panel noscript p { margin: var(--sp-3); color: var(--ink-muted); }

/* ---------- CTA band ---------- */
.cta-band { padding-block: var(--sp-5); }

/* The "bubble": a big rounded photo card rather than a flat colour strip.
   The gradient darkens the left/bottom where the text sits and fades out
   toward the right so the photo itself stays visible. */
.cta-bubble {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl);
  background: var(--navy) var(--cta-photo, url('../img/get-started.jpg')) center/cover no-repeat;
  min-height: 380px;
  display: flex; align-items: center;
}
.cta-bubble::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(16,29,46,.95) 0%, rgba(16,29,46,.88) 34%, rgba(16,29,46,.4) 64%, rgba(16,29,46,.08) 88%);
}
@media (max-width: 720px) {
  .cta-bubble { min-height: 460px; align-items: flex-end; }
  .cta-bubble::before { background: linear-gradient(180deg, rgba(16,29,46,.15) 0%, rgba(16,29,46,.92) 50%, rgba(16,29,46,.97) 100%); }
}
.cta-bubble-content {
  position: relative; z-index: 1; padding: var(--sp-6); max-width: 560px;
  color: var(--on-navy);
}
@media (max-width: 720px) { .cta-bubble-content { padding: var(--sp-5) var(--sp-4); max-width: none; } }
.cta-bubble-content .eyebrow { color: var(--lime); }
.cta-bubble-content h2 { color: var(--white); font-size: var(--step-2); }
.cta-bubble-content .lede { color: var(--on-navy-muted); font-size: var(--step-0); }
.cta-bubble-content .btn-group { gap: var(--sp-2); margin-top: var(--sp-4); }
.cta-bubble-content .btn { padding: 0.6rem 1.15rem; font-size: 0.85rem; }
.cta-bubble-content .btn-outline { --btn-fg: var(--white); --btn-bd: var(--on-navy-rule); }
.cta-bubble-content .btn-outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-navy-muted); padding-block: var(--sp-5) var(--sp-4); font-size: 0.88rem; border-top: 3px solid var(--lime); }
.site-footer a { color: var(--on-navy-muted); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 760px) {
  /* Flex, not grid columns: Guides/Pages/Social sit at their natural width
     with one even gap between every column, brand included. */
  .footer-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); }
  .footer-brand { flex: 0 1 300px; }
  .footer-col { flex: 0 0 190px; }
}
.footer-brand img { height: 52px; width: auto; margin-bottom: var(--sp-3); }
.footer-brand p { max-width: 34ch; line-height: 1.55; }
.footer-tagline-body { margin-top: 0.35rem; }
.footer-col h3 {
  font-family: var(--font-text); font-size: 0.76rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--lime);
  margin-bottom: var(--sp-2);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }

/* Six links as 3 rows x 2 columns: the first three stay left, the last
   three flow into a second column on the right — CSS columns fill top to
   bottom before wrapping across, which is exactly that split. The extra
   specificity beats ".footer-col ul"'s display:grid, which would otherwise
   win and make column-count a no-op. */
.footer-col .footer-col-split {
  display: block; column-count: 2; column-gap: var(--sp-3);
}
.footer-col-split li { break-inside: avoid; margin-bottom: 0.4rem; }

/* The licensing and general-advice text has to stay, so it is set small and
   quiet rather than trimmed. */
.footer-legal {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--on-navy-rule);
  display: grid; gap: var(--sp-2);
  font-size: 0.76rem; line-height: 1.55;
  color: rgba(255,255,255,.52);
}
.footer-legal p { max-width: none; }
.footer-legal strong { color: rgba(255,255,255,.8); font-weight: 600; }
.footer-copyright { color: rgba(255,255,255,.7); }
.footer-tagline { color: var(--lime); font-weight: 700; margin: 0; }

/* ---------- Page hero (interior) ---------- */
.page-hero { background: var(--navy); color: var(--on-navy); padding-block: var(--sp-5) var(--sp-6); position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--navy) 0, rgba(16,29,46,0) 130px),
    radial-gradient(100% 100% at 92% 0%, rgba(192,215,47,.12), transparent 58%);
}
.page-hero h1 { font-size: var(--step-4); max-width: 22ch; }
.page-hero .lede { margin-top: var(--sp-4); }
.breadcrumbs { font-size: 0.87rem; color: var(--on-navy-muted); margin-bottom: var(--sp-4); }
.breadcrumbs a { text-decoration: none; border-bottom: 1px solid var(--on-navy-rule); }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs span { padding-inline: 0.45rem; opacity: .6; }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-6); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); }
.prose > *:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-top: var(--sp-3); color: var(--ink-muted); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- Reveal animation ----------
   Gated on the .js-reveal class that site.js adds, so content is always
   visible if scripting is unavailable or the script fails to load. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1); }
  html.js-reveal .reveal[data-visible='true'] { opacity: 1; transform: none; }
}

/* ---------- Journey illustration (from the brand artwork) ----------
   The line art is expanded outlines, not strokes, so it cannot be traced with
   stroke-dashoffset. Instead the solid shapes are revealed by a left-to-right
   wipe, then each dash of the path fades in along its own order. */
.journey-art { width: 100%; height: auto; display: block; overflow: visible; }
.journey-solid, .journey-dashes { fill: var(--lime); }

@media (prefers-reduced-motion: no-preference) {
  .journey-wipe {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    animation: journey-wipe 1.7s cubic-bezier(.33, 0, .18, 1) .25s forwards;
  }
  @keyframes journey-wipe { to { transform: scaleX(1); } }

  .journey-dashes path {
    opacity: 0;
    animation: journey-dot .38s ease-out forwards;
    /* Starts as the wipe finishes, then steps along the path dash by dash. */
    animation-delay: calc(1.75s + var(--i) * 34ms);
  }
  @keyframes journey-dot { to { opacity: 1; } }
}

/* No animation: the whole illustration is simply present. */
@media (prefers-reduced-motion: reduce) {
  .journey-wipe { transform: none; }
  .journey-dashes path { opacity: 1; }
}

/* ---------- Header actions ---------- */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* ---------- Section foot link ---------- */
.section-foot { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Quote panel ---------- */
.panel-quote {
  background: var(--navy); color: var(--on-navy);
  border-radius: var(--r-xl); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: relative; overflow: hidden; isolation: isolate;
}
@media (min-width: 700px) { .panel-quote { padding: var(--sp-5); } }
.panel-quote::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 90% at 100% 0%, rgba(192,215,47,.16), transparent 62%);
}
.panel-quote .eyebrow { color: var(--lime); margin: 0; }
.panel-quote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.018em;
  color: var(--white);
}
.panel-quote .checklist { margin-top: 0; }
.panel-quote .checklist li { color: var(--on-navy-muted); }
.panel-quote .checklist svg { color: var(--lime); }
.panel-quote-foot { font-size: var(--step--1); color: var(--on-navy-muted); }
.panel-quote-values { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.panel-quote-values span {
  font-size: 0.82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); background: var(--lime);
  padding: 0.34rem 0.8rem; border-radius: var(--r-pill);
}

/* ---------- Service detail rows ---------- */
.detail-rows {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: var(--sp-2) var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.band-cloud .detail-rows, .band-white .detail-rows { background: var(--surface); }
.detail-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.detail-row:last-child { border-bottom: 0; }
.detail-row h3 {
  font-size: var(--step-1); display: flex; align-items: baseline; gap: 0.6rem;
}
.detail-row h3::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); flex: none; transform: translateY(-2px);
}
.detail-row p { margin-top: var(--sp-2); color: var(--ink-muted); }

/* ---------- Service list (odd counts, no grid holes) ---------- */
.svc-list {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.svc-row {
  display: grid; gap: var(--sp-2) var(--sp-4);
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.svc-row:last-child { border-bottom: 0; }
.svc-row h3 { font-size: var(--step-1); }
.svc-row p { color: var(--ink-muted); grid-column: 2; font-size: 0.97rem; }
.svc-row .card-icon { grid-row: span 2; align-self: start; }
@media (min-width: 860px) {
  .svc-row { grid-template-columns: auto minmax(210px, 15rem) 1fr; align-items: center; }
  .svc-row .card-icon { grid-row: auto; align-self: center; }
  .svc-row p { grid-column: 3; margin: 0; }
}

/* ---------- Values grid ---------- */
.values-grid .card { gap: var(--sp-2); }
.value-index {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-1); color: var(--lime); letter-spacing: -0.02em;
}

/* ---------- Hero art ---------- */
.hero-art-svg { width: 100%; height: auto; }

/* ---------- Draft notice ---------- */
.notice {
  background: rgba(192,215,47,.22);
  border: 1px solid rgba(16,29,46,.16);
  border-left: 4px solid var(--navy);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.notice strong { display: block; font-weight: 600; color: var(--navy); }
.notice p { margin-top: var(--sp-2); color: var(--ink-muted); font-size: 0.94rem; }

/* ---------- TBC placeholder ---------- */
.tbc {
  display: inline-block;
  background: rgba(180, 50, 43, .1);
  border-bottom: 1.5px dashed #B4322B;
  color: #8A231E;
  font-family: var(--font-text);
  font-weight: 600; font-size: 0.9em;
  padding: 0 0.25em; border-radius: 3px;
  white-space: normal;
}
.site-footer .tbc { background: rgba(255,255,255,.1); border-bottom-color: rgba(255,255,255,.5); color: rgba(255,255,255,.82); }

.prose-meta { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--ink-subtle); }

/* ---------- Contact list is a <dl> containing <li> wrappers ---------- */
dl.contact-list { display: grid; gap: var(--sp-3); }
dl.contact-list > li { list-style: none; }

/* ---------- Home: what we help with ---------- */
.help-grid { display: grid; gap: var(--sp-4) var(--sp-5); }
@media (min-width: 680px)  { .help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .help-grid { grid-template-columns: repeat(3, 1fr); } }
.help-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.help-item .card-icon { width: 42px; height: 42px; border-radius: var(--r-sm); }
.help-item .card-icon svg { width: 21px; height: 21px; }
.help-item h3 { font-size: var(--step-0); font-weight: 700; letter-spacing: -0.008em; }
.help-item p { margin-top: 4px; color: var(--ink-muted); font-size: 0.94rem; line-height: 1.55; }

/* ---------- Lender carousel ----------
   Two identical rows inside one track; the track slides exactly half its own
   width, so the loop is seamless. Movement is opt-in: it stops on hover, on
   keyboard focus, via the pause button, and entirely under reduced motion. */
.lenders { margin-top: var(--sp-7); }
.lenders-head { max-width: 640px; margin-bottom: var(--sp-5); }
.lenders-head h3 { margin: 0 0 var(--sp-2); }
.lenders-head p { color: var(--ink-muted); margin: 0; }

.lenders-strip {
  overflow: hidden;
  padding-block: var(--sp-4);
  /* Fade the ends so wordmarks do not pop in and out at the edges. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.lenders-track { display: flex; width: max-content; }
.lenders-row {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.lenders-row li { flex: none; padding-inline: var(--sp-5); }
.lenders-row span {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; letter-spacing: -0.01em;
  color: var(--ink-muted); white-space: nowrap;
  transition: color .15s ease;
}
.lenders-row li:hover span { color: var(--navy); }

/* Logo cells. A fixed height plus object-fit means screenshots of any size or
   aspect ratio sit on one optical baseline, and nothing reflows while they
   load. The strip is on white, so white-background screenshots need no
   transparency. */
.lenders-row img {
  height: 44px; width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .lenders-track { animation: lenders-scroll 90s linear infinite; }
  @keyframes lenders-scroll { to { transform: translateX(-50%); } }
  .lenders-strip:hover .lenders-track,
  .lenders-strip:focus-within .lenders-track { animation-play-state: paused; }
}

/* No animation: wrap into a static block instead of a single long row. */
@media (prefers-reduced-motion: reduce) {
  .lenders-strip { -webkit-mask-image: none; mask-image: none; }
  .lenders-track { width: auto; }
  .lenders-row { flex-wrap: wrap; gap: var(--sp-2) 0; }
  .lenders-row[aria-hidden='true'] { display: none; }
}

/* ---------- Home: calculator links ---------- */
.calc-links { display: grid; gap: var(--sp-2); }
.calc-link {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  text-decoration: none; font-weight: 600; font-family: var(--font-display);
  font-size: var(--step-0); letter-spacing: -0.01em;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.calc-link svg:first-child { width: 22px; height: 22px; flex: none; color: var(--navy); }
.calc-link span:not(.arrow) { flex: 1; }
.calc-link .arrow { color: var(--navy); transition: transform .18s ease; }
.calc-link:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); border-color: var(--rule-strong); }
.calc-link:hover .arrow { transform: translateX(3px); }

/* ---------- Calculators: tabs ---------- */
.calc-tabs {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: thin;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-5);
  -webkit-overflow-scrolling: touch;
}
.calc-tab {
  display: inline-flex; align-items: center; gap: 0.55rem;
  flex: none; cursor: pointer;
  background: var(--surface); color: var(--ink-muted);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-text); font-weight: 600; font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.calc-tab svg { width: 19px; height: 19px; flex: none; }
.calc-tab:hover { color: var(--navy); border-color: var(--rule-strong); }
.calc-tab[aria-selected='true'] {
  background: var(--navy); color: var(--white); border-color: var(--navy);
}
.calc-panel:focus { outline: none; }
.calc-panel:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; border-radius: var(--r-md); }

.calc-head { margin-bottom: var(--sp-5); max-width: 60ch; }
.calc-head h2 { font-size: var(--step-3); }
.calc-head p { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--step-1); line-height: 1.5; }

/* ---------- Calculators: layout ---------- */
.calc-grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 940px) { .calc-grid { grid-template-columns: 1fr 0.85fr; gap: var(--sp-6); } }

.calc-inputs {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: var(--sp-4);
  display: grid; gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 620px) { .calc-inputs { grid-template-columns: 1fr 1fr; } }
.calc-inputs > .field:last-child:nth-child(odd),
.calc-inputs > div[id$='-row'] { grid-column: 1 / -1; }
@media (min-width: 620px) { .calc-inputs > div[id$='-row'] { grid-column: auto; } }
.calc-inputs .field-check { grid-column: 1 / -1; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .affix {
  position: absolute;
  font-weight: 600; color: var(--ink-subtle); font-size: 1rem;
  pointer-events: none;
}
.input-wrap .affix-prefix { left: 0.95rem; }
.input-wrap .affix-suffix { right: 1rem; }
.input-wrap input.has-affix-prefix { padding-left: 2.1rem; }
.input-wrap input.has-affix-suffix { padding-right: 2.4rem; }
.field input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
.field input[type='number']::-webkit-outer-spin-button,
.field input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Calculators: result panel ---------- */
.calc-result {
  border-radius: var(--r-xl); padding: var(--sp-4);
  position: relative; overflow: hidden; isolation: isolate;
  position: sticky; top: calc(76px + var(--sp-4));
}
@media (max-width: 939px) { .calc-result { position: static; } }
.calc-result::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(95% 90% at 100% 0%, rgba(192,215,47,.16), transparent 62%);
}
.calc-result .eyebrow { color: var(--lime); margin-bottom: var(--sp-2); }
.calc-figure {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1; letter-spacing: -0.035em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.rp-rows {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--on-navy-rule);
  display: grid; gap: 0;
}
.rp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.rp-row:last-child { border-bottom: 0; }
.rp-row dt { color: var(--on-navy-muted); font-size: 0.92rem; }
.rp-row dd {
  margin: 0; color: var(--white); font-weight: 600;
  font-size: 1rem; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.calc-note {
  margin-top: var(--sp-4);
  color: var(--on-navy-muted); font-size: 0.9rem; line-height: 1.6;
}
.calc-note:empty { display: none; }
.calc-note ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.45rem; }
.calc-note li::marker { color: var(--lime); }
.calc-foot {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--on-navy-rule);
  color: rgba(255,255,255,.6); font-size: 0.82rem; line-height: 1.6;
}

.notice-plain { background: var(--bg-alt); border-color: var(--rule); }

/* ---------- Article / topic pages ---------- */
/* One column width shared by every child — key points, contents, headings,
   cards and callouts all align to the same left and right edge. */
.wrap-article { max-width: 1060px; }
.article-layout { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1060px) {
  .article-layout {
    grid-template-columns: minmax(0, 640px) 300px;
    justify-content: space-between;
    gap: var(--sp-6);
  }
}
.article-main { min-width: 0; }

/* Key points — the short version, read before anything else */
.key-points {
  background: var(--navy); color: var(--on-navy);
  border-radius: var(--r-xl); padding: var(--sp-4);
  position: relative; overflow: hidden; isolation: isolate;
  margin-bottom: var(--sp-5);
}
@media (min-width: 700px) { .key-points { padding: var(--sp-5); } }
.key-points::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 100% at 100% 0%, rgba(192,215,47,.16), transparent 62%);
}
.key-points .eyebrow { color: var(--lime); margin-bottom: var(--sp-4); }
.key-points ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.key-points li {
  position: relative; padding-left: 2rem;
  color: var(--white); font-size: 1.05rem; line-height: 1.7;
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.008em;
}
.key-points li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 14px; height: 3px; border-radius: 2px; background: var(--lime);
}

/* Inline table of contents — shown only when the sidebar is stacked away */
.toc-inline {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--sp-4); margin-bottom: var(--sp-6);
  background: var(--surface);
}
@media (min-width: 1060px) { .toc-inline { display: none; } }
.toc-label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-subtle); margin-bottom: var(--sp-3);
}
.toc-inline ol, .toc-aside ol {
  list-style: none; margin: 0; padding: 0;
  counter-reset: toc; display: grid; gap: 0.55rem;
}
.toc-inline li, .toc-aside li { counter-increment: toc; }
.toc-inline a, .toc-aside a {
  display: flex; gap: 0.6rem; text-decoration: none;
  color: var(--ink-muted); font-size: 0.95rem; line-height: 1.45;
}
.toc-inline a::before, .toc-aside a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--stone); font-weight: 600; font-size: 0.82rem;
  flex: none; padding-top: 2px;
}
.toc-inline a:hover, .toc-aside a:hover { color: var(--navy); }

/* Article body — generous measure and rhythm */
.article { counter-reset: ablock; }
.article-block + .article-block { margin-top: 4.5rem; }

/* Each section opens on a hairline with a short lime bar sitting on it, and a
   number that matches the contents list. The anchor target is the section, so
   the sticky-header offset lives here rather than on the heading. */
.article-block {
  counter-increment: ablock;
  scroll-margin-top: 104px;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-strong);
  background-image: linear-gradient(var(--lime), var(--lime));
  background-size: 44px 3px;
  background-position: left top;
  background-repeat: no-repeat;
}
.article-block h2 { font-size: var(--step-2); line-height: 1.18; }
.article-block h2::before {
  content: counter(ablock, decimal-leading-zero);
  display: block;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}
.article-block > p, .article-block > ul, .article-block > ol { color: var(--ink-muted); }
.article-block > p {
  margin-top: 2.5rem;
  font-size: 1.05rem; line-height: 1.9;
}
.article-lead {
  margin-top: 2.25rem !important;
  font-size: var(--step-1) !important;
  line-height: 1.62 !important;
  color: var(--ink) !important;
  font-weight: 400;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.article-block strong { color: var(--ink); font-weight: 600; }

/* Bulleted lists */
.article-list {
  padding-left: 0; list-style: none;
  display: grid; gap: var(--sp-5);
  margin-top: var(--sp-6) !important;
}
.article-list li {
  position: relative; padding-left: 2rem;
  font-size: 1.02rem; line-height: 1.8;
}
.article-list li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lime);
}

/* Numbered steps */
.article-steps {
  list-style: none; padding: 0; counter-reset: astep;
  margin-top: var(--sp-6);
  display: grid; gap: var(--sp-4);
}
.article-steps li {
  counter-increment: astep;
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem var(--sp-4);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.article-steps li::before {
  content: counter(astep, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-1); color: var(--lime);
  line-height: 1;
}
.step-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em;
}
.step-text { color: var(--ink-muted); font-size: 0.98rem; line-height: 1.8; }
@media (max-width: 520px) {
  .article-steps li { grid-template-columns: 1fr; }
  .article-steps li::before { grid-row: auto; }
}

/* Callout — the one thing to take away from a section */
.callout {
  margin-top: var(--sp-6);
  background: rgba(192, 215, 47, 0.16);
  border: 0;
  border-left: 3px solid var(--lime);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4);
}
.callout-title {
  margin: 0 !important;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--ink) !important;
  letter-spacing: -0.01em;
}
.callout-body {
  margin-top: 0.75rem !important;
  font-size: 0.98rem !important; line-height: 1.8 !important;
  color: var(--ink-muted) !important;
}

/* Two- and three-up comparison cards inside an article */
/* Always a single column. The article column is capped at 640px, so a 2-up
   grid here would leave each card about 28 characters wide and read badly. */
.mini-cards {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.mini-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.mini-card h3 {
  font-size: 1.05rem; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.mini-card h3::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); flex: none; transform: translateY(-2px);
}
.mini-card p { margin-top: 0.7rem; color: var(--ink-muted); font-size: 0.97rem; line-height: 1.8; }

/* Sidebar */
.article-aside { display: grid; gap: var(--sp-4); }
@media (min-width: 1060px) {
  .article-aside { position: sticky; top: calc(76px + var(--sp-4)); }
}
.toc-aside { display: none; }
@media (min-width: 1060px) { .toc-aside { display: block; } }
.aside-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.aside-card .eyebrow { margin-bottom: var(--sp-3); }
.aside-card .calc-links { gap: var(--sp-2); }
.aside-card .calc-link { background: var(--bg); font-size: 0.95rem; padding: var(--sp-3); }

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-nav, .cta-band, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .band-navy, .hero, .page-hero, .site-footer { background: #fff !important; color: #000 !important; }
}