/* ==========================================================================
   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 svg { width: 1em; height: 1em; flex: none; }

.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;
}

/* While the mobile menu is open, pin the header with `fixed` instead of
   relying on `sticky`. Scrolling is locked behind it (see setNav in
   site.js), but a `sticky` element only stays put because it keeps
   re-evaluating its position against scroll -- with scroll frozen mid-page,
   some browsers stop re-evaluating and let it drift back to its natural
   in-flow position at the top of the DOCUMENT instead of the viewport,
   which is off-screen (and unreachable, since scrolling is locked) whenever
   the menu is opened after scrolling down. `fixed` has no such dependency.
   Visually identical to the stuck `sticky` state it replaces -- both render
   at the same spot -- so this introduces no jump. */
.site-header[data-nav-open='true'] { position: fixed; left: 0; right: 0; }

/* ---- At the very top, or with the mobile menu open, the bar goes solid
   navy instead of the frosted light bar ----
   Every page opens on a navy hero, so at the top the bar reads as part of
   it. With the mobile menu open it now matches the navy .mobile-nav panel
   sitting right below it (see that panel's own comment), so header + panel
   read as one continuous surface instead of a light sliver over a dark one.
   Both states share this treatment for that reason. */
.site-header[data-scrolled='false'],
.site-header[data-nav-open='true'] {
  background-color: var(--navy);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header[data-scrolled='false'] .nav a,
.site-header[data-nav-open='true'] .nav a { color: var(--on-navy-muted); }
.site-header[data-scrolled='false'] .nav a:hover,
.site-header[data-nav-open='true'] .nav a:hover { color: var(--white); background: rgba(255,255,255,.09); }
.site-header[data-scrolled='false'] .nav a[aria-current='page'],
.site-header[data-nav-open='true'] .nav a[aria-current='page'] { color: var(--white); background: rgba(255,255,255,.12); }
.site-header[data-scrolled='false'] .nav .nav-guides-toggle,
.site-header[data-nav-open='true'] .nav .nav-guides-toggle { color: var(--on-navy-muted); }
.site-header[data-scrolled='false'] .nav .nav-guides-toggle:hover,
.site-header[data-nav-open='true'] .nav .nav-guides-toggle:hover { color: var(--white); background: rgba(255,255,255,.09); }
.site-header[data-scrolled='false'] .nav-toggle,
.site-header[data-nav-open='true'] .nav-toggle { border-color: var(--on-navy-rule); }
.site-header[data-scrolled='false'] .nav-toggle:hover,
.site-header[data-nav-open='true'] .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,
.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(--white); }
.site-header[data-scrolled='false'] .nav-toggle[aria-expanded='true'] span,
.site-header[data-nav-open='true'] .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 shows whenever the bar is navy: at the top of the page,
   or with the mobile menu open. */
.brand-logo-light { opacity: 0; }
.site-header[data-scrolled='false'] .brand-logo-dark,
.site-header[data-nav-open='true'] .brand-logo-dark { opacity: 0; }
.site-header[data-scrolled='false'] .brand-logo-light,
.site-header[data-nav-open='true'] .brand-logo-light { opacity: 1; }

.nav { display: none; }
@media (min-width: 1050px) {
  .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: 1050px) {
  .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: 1050px) {
  .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); }
}
.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: 1050px) {
  .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: 1050px) { .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.
   Solid navy, matching the header above it while open (see the merged
   [data-nav-open] rules up top) so the two read as one surface rather than
   a light menu hanging off a dark bar. */
.mobile-nav {
  position: fixed; top: 76px; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--navy);
  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: 1050px) { .mobile-nav { display: none !important; } }

.mobile-nav-links { display: flex; flex-direction: column; gap: 0.15rem; padding-inline: var(--sp-4); }

/* Each row (a link, or the Guides toggle) fades and slides in slightly after
   the last, so the panel feels assembled rather than dumped on screen in one
   go. Scoped to direct children only -- the Guides submenu's own links sit
   two levels deeper and are handled by the accordion's max-height reveal
   instead, not this stagger. */
.mobile-nav-links > * { opacity: 0; transform: translateX(-8px); }
.mobile-nav[data-open='true'] .mobile-nav-links > * { animation: navRowIn .3s ease forwards; }
.mobile-nav-links > *:nth-child(1) { animation-delay: .02s; }
.mobile-nav-links > *:nth-child(2) { animation-delay: .06s; }
.mobile-nav-links > *:nth-child(3) { animation-delay: .10s; }
.mobile-nav-links > *:nth-child(4) { animation-delay: .14s; }
.mobile-nav-links > *:nth-child(5) { animation-delay: .18s; }
@keyframes navRowIn { to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-links > * { opacity: 1; transform: none; animation: none; }
}

.mobile-nav-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.mobile-nav-icon {
  width: 38px; height: 38px; padding: 9px; flex: none;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  color: var(--lime);
  transition: background-color .15s ease, color .15s ease;
}
.mobile-nav-chevron { width: 7px; height: 12px; flex: none; color: var(--on-navy-muted); transition: transform .15s ease, color .15s ease; }
.mobile-nav-chevron path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  text-decoration: none; font-weight: 600;
  font-size: var(--step-1); font-family: var(--font-display);
  padding: 0.8rem var(--sp-3);
  border-radius: var(--r-md);
  color: var(--on-navy);
  transition: background-color .15s ease, color .15s ease;
}
.mobile-nav a:hover, .mobile-nav a:active { background: rgba(255,255,255,.07); }
.mobile-nav a:hover .mobile-nav-chevron, .mobile-nav a:active .mobile-nav-chevron { transform: translateX(2px); color: var(--on-navy); }
.mobile-nav a[aria-current='page'] { color: var(--navy); background: var(--lime); }
.mobile-nav a[aria-current='page'] .mobile-nav-icon { background: rgba(16,29,46,.12); color: var(--navy); }
.mobile-nav a[aria-current='page'] .mobile-nav-chevron { color: var(--navy); }

.mobile-nav .nav-guides-toggle {
  width: 100%; justify-content: space-between;
  font-size: var(--step-1); font-family: var(--font-display); font-weight: 600;
  padding: 0.8rem var(--sp-3);
  border-radius: var(--r-md);
  color: var(--on-navy);
  transition: color .2s ease, background-color .2s ease;
}
.mobile-nav .nav-guides-toggle:hover { background: rgba(255,255,255,.07); }
.mobile-nav .nav-guides[data-open='true'] .nav-guides-toggle {
  color: var(--lime); font-weight: 700; background: rgba(192,215,47,.1);
}
.mobile-nav .nav-guides[data-open='true'] .nav-guides-toggle .mobile-nav-icon { color: var(--lime); background: rgba(192,215,47,.16); }
.mobile-nav .nav-caret { width: 12px; height: 8px; color: var(--on-navy-muted); }
.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(255,255,255,.04);
  border-radius: var(--r-md);
  transition: max-height .32s ease;
}
.mobile-nav .nav-guides[data-open='true'] .nav-guides-menu { max-height: 420px; margin: 0.15rem 0 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(--on-navy-rule);
  color: var(--on-navy-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:hover, .mobile-nav .nav-guides-menu a:active { color: var(--white); background: rgba(255,255,255,.06); }

.mobile-nav-cta {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-4) 0;
  border-top: 1px solid var(--on-navy-rule);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.mobile-nav-cta .btn { width: 100%; justify-content: center; }
/* .btn-outline defaults to navy text on a transparent background -- fine on
   the site's usual light surfaces, invisible on this navy one. */
.mobile-nav-cta .btn-outline { --btn-fg: var(--white); --btn-bd: var(--on-navy-rule); }
.mobile-nav-cta .btn-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: var(--white); }

/* ---------- 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)); }
/* Explicit 2 columns rather than grid-4's auto-fit -- with exactly 4 team
   members, auto-fit's 220px minimum leaves room for all 4 across on most
   desktop widths, when a fixed 2x2 was what was actually wanted. */
.team-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .team-grid { grid-template-columns: repeat(2, 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); }
/* Direct lines: some people have just an email, others phone + email + a
   credit-rep disclosure line, so cards in the same row can end up very
   different heights. Grid already stretches every card's box to match the
   tallest in its row -- centering each card's own content vertically
   inside that box (rather than leaving it pinned to the top with empty
   space below) is what actually makes short and tall cards read as a
   matched pair instead of one looking sparse. */
.direct-line-card { justify-content: center; }
.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 ' 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; text-align: justify; hyphens: auto; }
.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's default align-items:center vertically centers each column
   against the row's tallest one -- fine when both sides are similar
   height, but on the Contact page the Calendly widget (a fixed 650px) is
   far taller than the info list beside it, so centering pushed "Get in
   touch" down well below "Or pick a time" instead of level with it. */
.split-top { align-items: start; }
.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-avatar-photo { object-fit: cover; flex: none; }
.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); }
.credit-rep-note { margin-top: var(--sp-2); color: var(--ink-subtle); font-size: var(--step--1); }

/* ---------- 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: 12px; 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: 16px; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.4rem; }
.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); }

.copy-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--ink-subtle); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.copy-btn:hover { background: rgba(16,29,46,.06); color: var(--navy); }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn .check-icon { display: none; color: var(--lime); }
.copy-btn.copied .copy-icon { display: none; }
.copy-btn.copied .check-icon { display: inline-flex; }
.band-navy .copy-btn { color: var(--on-navy-muted); }
.band-navy .copy-btn:hover { background: rgba(255,255,255,.09); color: var(--white); }

.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); }
/* Grid with fr-unit columns rather than fixed pixel widths -- it scales to
   whatever width the container actually has instead of needing hand-tuned
   breakpoints for each tier (a previous version of this footer needed three
   of those, each found by trial and error in-browser). Guides/Pages/Social
   are now short single-column lists (Guides' longest label just wraps onto
   a second line at narrow widths like Social already did, rather than
   needing to stay on one line), so there's no wrap-avoidance to design
   around this time either. */
.footer-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1050px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-4); }
}
.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; }

/* 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-credit-line { font-size: 0.68rem; }
.footer-legal strong { color: rgba(255,255,255,.8); font-weight: 600; }
.footer-disclaimer { font-size: 10px; }
.footer-bottom-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-3);
}
.footer-legal-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
}
.footer-legal-links a { color: rgba(255,255,255,.7); }
.footer-legal-links a:hover { color: var(--white); }
.footer-copyright { color: rgba(255,255,255,.7); margin: 0; }
.footer-tagline { color: var(--lime); font-weight: 700; margin: 0; }
.social-line svg { color: var(--lime); }

/* ---------- 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 ---------- */
/* Three across, sitting below the intro text + photo split rather than
   stacked in a bordered card beside the text (the photo took that spot). */
.detail-rows {
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .detail-rows { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.detail-row h3 {
  font-size: var(--step-1); display: flex; align-items: center; gap: 0.55rem;
}
/* Plain glyph, no badge -- matches how .checklist/.trust-item already use
   the check icon elsewhere, rather than inventing a new badge style here. */
.detail-row-check { width: 17px; height: 17px; flex: none; color: var(--lime); }
.detail-row-check path { stroke-width: 2.4; }
.detail-row p { margin-top: var(--sp-2); color: var(--ink-muted); }

/* ---------- Detail photo placeholder ---------- */
.detail-photo {
  aspect-ratio: 1 / 1; border-radius: var(--r-xl);
  background: var(--cloud); color: var(--stone);
  position: relative; overflow: hidden;
  width: 100%; max-width: 75%; margin: 0 auto;
}
.detail-photo svg {
  width: 15%; height: 15%;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.detail-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 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 180s 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.65em;
  width: 8px; height: 8px; border-radius: 50%; 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; }
}

/* ---------- Enquiry form (Contact page) ---------- */
.enquiry-panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  max-width: 700px; margin: 0 auto;
}
.enquiry-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.field-grid-2 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-grid-2 { grid-template-columns: 1fr 1fr; } }
.hint-inline { font-weight: 400; color: var(--ink-subtle); }

/* Honeypot: off-screen, not display:none — some bots skip hidden fields but
   still probe layout, so this stays a real, positioned element. */
.hp-field {
  position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden;
}

.form-privacy-note { font-size: var(--step--1); color: var(--ink-subtle); margin: 0; }

.form-status {
  padding: var(--sp-3); border-radius: var(--r-md); font-size: 0.94rem; font-weight: 500;
}
.form-status[data-state='success'] { background: #EAF3D6; color: #3B5A1E; }
.form-status[data-state='error'] { background: #F7E4E2; color: #8A2A22; }

.cf-turnstile { margin-top: -0.5rem; }

/* Without this the submit button stretches to the full grid-item width like
   any other .enquiry-form child, turning it into an odd, oversized bar. */
.enquiry-form button[type='submit'] {
  justify-self: start; padding: 0.62rem 1.5rem; font-size: 0.88rem;
}