/* ============================================================================
   KEEPSAKE LOANS — THEME STYLES (compiled from the original Astro components)
   Brand tokens are at the top; component styles follow, grouped by source.
   ============================================================================ */

/* ============================================================================
   KEEPSAKE LOANS — GLOBAL STYLES
   ----------------------------------------------------------------------------
   Brand tokens live at the top. Change a color or font here and it updates
   site-wide. Component-specific styles live inside each .astro file.
   ============================================================================ */

/* ---- Brand tokens ------------------------------------------------------- */
:root {
  /* Palette: brand navy #0f294a + gold #b39352 on warm paper. Adjust here to rebrand. */
  --navy-900: #071528;
  --navy-800: #0b1f38;
  --navy-700: #0f294a;   /* primary — brand blue */
  --navy-600: #1c3f6b;
  --navy-100: #e5e9f0;
  --gold-600: #8f7439;
  --gold-500: #b39352;   /* accent — brand gold */
  --gold-200: #e6d9b8;
  --gold-100: #f3ecdc;
  --paper: #ffffff;      /* card + header surfaces */
  --cream: #f8f6f1;      /* page background */
  --sand: #eeeae1;       /* alternate section background */
  --line: #d9d4c9;
  --ink: #1a2230;        /* body text */
  --ink-soft: #4a5261;
  --stone: #727a86;      /* muted text */
  --white: #ffffff;
  --error: #a83a2b;

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);

  /* Layout */
  --container: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 8vw, 7.5rem);
  --radius: 3px;
  --shadow: 0 1px 2px rgba(7, 21, 40, 0.06), 0 12px 32px -12px rgba(7, 21, 40, 0.2);

  /* Header height (used for anchor offsets) */
  --header-h: 4.75rem;

  color-scheme: light;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--navy-900); }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.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;
}
.skip-link {
  position: absolute; left: 1rem; top: -100%; z-index: 1000;
  background: var(--navy-900); color: var(--white); padding: 0.6rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* ---- Typography ------------------------------------------------------------ */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy-900);
  text-wrap: balance;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { text-wrap: pretty; }
.lede { font-size: var(--text-md); line-height: 1.65; color: var(--ink-soft); max-width: 60ch; }
.muted { color: var(--stone); }
.serif-em { font-style: italic; font-weight: 400; color: var(--gold-600); }

/* Small-caps eyebrow used above section headings */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-600);
}
.eyebrow::before { content: ''; width: 1.75rem; height: 1px; background: var(--gold-500); }
.eyebrow.no-rule::before { display: none; }

/* ---- Layout --------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 50rem; }
.container--wide { max-width: 88rem; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy-800); color: var(--navy-100); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy .eyebrow { color: var(--gold-200); }
.section--navy .eyebrow::before { background: var(--gold-200); }
.section--navy a { color: var(--white); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head > * + * { margin-top: 1rem; }
.section-head--split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; max-width: none; }
.section-head--split > div { max-width: 46rem; }
.section-head--split > div > * + * { margin-top: 1rem; }
.rule { border: 0; border-top: 1px solid var(--line); }
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.flow > * + * { margin-top: 1.25rem; }
.flow--tight > * + * { margin-top: 0.5rem; }

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.9rem 1.5rem; border-radius: var(--radius);
  font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.02em; line-height: 1;
  text-decoration: none; border: 1.5px solid transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.btn--primary:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.btn--gold { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
.btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: var(--white); }
.btn--outline { background: transparent; color: var(--navy-700); border-color: var(--navy-700); }
.btn--outline:hover { background: var(--navy-700); color: var(--white); }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn--outline-light:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.btn--sm { padding: 0.65rem 1.1rem; font-size: var(--text-xs); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--text-base); }
.btn .arrow { transition: transform 160ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: var(--text-sm); text-decoration: none; color: var(--navy-700);
}
.link-arrow .arrow { transition: transform 160ms ease; }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* ---- Forms ----------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--navy-900); }
.field .hint { font-size: var(--text-xs); color: var(--stone); }
.input, .select, .textarea {
  width: 100%; padding: 0.8rem 0.95rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(15, 41, 74, 0.12); }
.textarea { min-height: 8rem; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f294a' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; }

/* ---- Cards ----------------------------------------------------------------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---- Placeholder image treatment ------------------------------------------
   Used wherever a real photo has not been added yet. The label is intentionally
   visible so placeholders are easy to find before launch.                   */
.placeholder {
  position: relative; overflow: hidden; width: 100%; height: 100%;
  background-color: var(--sand);
  background-image: repeating-linear-gradient(135deg, rgba(15,41,74,0.05) 0 1px, transparent 1px 12px);
  display: grid; place-items: center; color: var(--stone);
}
.placeholder__label {
  position: absolute; inset: auto 0.75rem 0.75rem auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; letter-spacing: 0.02em;
  background: rgba(255,253,249,0.9); border: 1px solid var(--line); padding: 0.25rem 0.5rem; border-radius: 2px;
  max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.placeholder svg { width: 38%; max-width: 160px; opacity: 0.35; }

/* ---- Utilities --------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy-700); background: var(--navy-100); padding: 0.3rem 0.6rem; border-radius: 2px;
}
.tag--gold { color: var(--gold-600); background: var(--gold-100); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; letter-spacing: 0.02em; }

/* Checklist */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 0.45em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--navy-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%230f294a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;
}
.checklist--dash li::before { background: none; border-radius: 0; height: 1px; width: 0.85rem; top: 0.8em; background-color: var(--gold-500); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ---- layouts/BaseLayout.astro ---- */
body { display: flex; flex-direction: column; min-height: 100dvh; }
  main { flex: 1; }


/* ---- components/CtaBand.astro ---- */
.cta-band { background: var(--navy-800); color: var(--navy-100); padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; overflow: hidden; }
  .cta-band::after { content: ''; position: absolute; right: -6rem; top: -6rem; width: 26rem; height: 26rem; border-radius: 50%; border: 1px solid rgba(233,220,191,0.18); pointer-events: none; }
  .cta-band__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; position: relative; }
  .cta-band h2 { color: var(--white); }
  .cta-band p { margin-top: 0.75rem; max-width: 48ch; color: var(--gold-200); font-size: var(--text-md); }


/* ---- components/Faq.astro ---- */
.faq { border-top: 1px solid var(--line); }
  .faq__item { border-bottom: 1px solid var(--line); }
  .faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--text-md); color: var(--navy-900); }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__icon { position: relative; flex: none; width: 1.2rem; height: 1.2rem; }
  .faq__icon::before, .faq__icon::after { content: ''; position: absolute; inset: 50% auto auto 50%; background: var(--gold-600); transform: translate(-50%, -50%); transition: transform 160ms ease; }
  .faq__icon::before { width: 100%; height: 1.5px; }
  .faq__icon::after { width: 1.5px; height: 100%; }
  details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
  .faq__a { padding: 0 0 1.35rem; max-width: 65ch; color: var(--ink-soft); }


/* ---- components/Footer.astro ---- */
.footer { background: var(--navy-900); color: var(--navy-100); padding-block: clamp(3rem, 6vw, 5rem) 2rem; margin-top: auto; }
  .footer a { color: var(--white); text-decoration: none; }
  .footer a:hover { text-decoration: underline; text-decoration-color: var(--gold-500); }
  .footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
  @media (min-width: 720px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
  .footer__tagline { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--gold-200); margin-top: 1.25rem; max-width: 24ch; }
  .footer__address { font-style: normal; margin-top: 1.25rem; line-height: 1.7; font-size: var(--text-sm); }
  .footer__hours { margin-top: 0.75rem; font-size: var(--text-sm); opacity: 0.8; }
  .footer__social { display: flex; gap: 1rem; margin-top: 1rem; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
  .footer__heading { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-200); margin-bottom: 1rem; }
  .footer__links { display: grid; gap: 0.55rem; font-size: var(--text-sm); }
  .footer__legal { padding-top: 2rem; font-size: var(--text-xs); line-height: 1.6; color: rgba(227,235,229,0.75); display: grid; gap: 0.75rem; max-width: 70rem; }
  .footer__eho { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--navy-100); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .footer__eho svg { width: 1.6rem; height: 1.6rem; }
  .footer__copy { margin-top: 0.5rem; }


/* ---- components/Header.astro ---- */
.header { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 1px 0 var(--line); }

  /* Utility bar */
  .utility { background: var(--navy-900); color: var(--navy-100); font-size: var(--text-xs); letter-spacing: 0.02em; }
  .utility__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 2.25rem; }
  .utility__item { display: inline-flex; align-items: center; gap: 0.45rem; color: inherit; text-decoration: none; white-space: nowrap; }
  .utility__item svg { width: 0.9rem; height: 0.9rem; color: var(--gold-200); }
  a.utility__item:hover { color: var(--white); text-decoration: underline; }
  .utility__spacer { flex: 1; }
  .utility__nmls { opacity: 0.8; }
  .utility__label { font-weight: 600; color: var(--gold-200); margin-right: 0.15rem; }
  @media (max-width: 640px) {
    .utility__inner { justify-content: space-between; }
    .utility__inner > a:first-child, .utility__nmls, .utility__spacer { display: none; }
    .utility__inner { justify-content: center; }
  }

  /* Main bar */
  .main__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
  .nav { display: none; }
  .nav__list { display: flex; gap: clamp(1rem, 2vw, 1.9rem); }
  .nav__link {
    position: relative; display: inline-block; padding: 0.5rem 0; font-size: var(--text-sm); font-weight: 500;
    color: var(--ink); text-decoration: none; letter-spacing: 0.01em; white-space: nowrap;
  }
  .nav__link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-500);
    transform: scaleX(0); transform-origin: left; transition: transform 180ms ease;
  }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
  .nav__link.is-active { color: var(--navy-900); font-weight: 600; }
  .main__actions { display: flex; align-items: center; gap: 0.75rem; }
  .main__actions .btn { display: none; }

  /* Hamburger */
  .menu-toggle { position: relative; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
  .menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after {
    display: block; width: 1.2rem; height: 2px; background: var(--navy-900); transition: transform 180ms ease, opacity 180ms ease;
  }
  .menu-toggle__bar { position: relative; }
  .menu-toggle__bar::before, .menu-toggle__bar::after { content: ''; position: absolute; left: 0; }
  .menu-toggle__bar::before { top: -6px; } .menu-toggle__bar::after { top: 6px; }
  .header.is-open .menu-toggle__bar { background: transparent; }
  .header.is-open .menu-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
  .header.is-open .menu-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

  /* Mobile panel */
  .mobile { background: var(--paper); border-top: 1px solid var(--line); max-height: calc(100dvh - var(--header-h) - 2.25rem); overflow: auto; }
  .mobile__list { padding: 0.5rem var(--gutter); }
  .mobile__link { display: block; padding: 0.95rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.35rem; color: var(--navy-900); text-decoration: none; }
  .mobile__link.is-active { color: var(--gold-600); }
  .mobile__foot { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem var(--gutter) 2rem; }
  .mobile__foot .btn { width: 100%; }
  .mobile__phone { font-weight: 600; text-decoration: none; text-align: center; }

  @media (min-width: 1024px) {
    .nav { display: block; }
    .main__actions .btn { display: inline-flex; }
    .menu-toggle { display: none; }
    .mobile { display: none !important; }
  }


/* ---- components/LoanCard.astro ---- */
.loan-card {
    display: flex; flex-direction: column; gap: 0.85rem; height: 100%;
    padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--paper);
    border: 1px solid var(--line); border-top: 3px solid var(--navy-700); border-radius: var(--radius);
    text-decoration: none; color: inherit; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }
  .loan-card:hover { border-top-color: var(--gold-500); transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
  .loan-card__num { color: var(--gold-600); font-size: var(--text-xs); }
  .loan-card__title { font-size: var(--text-lg); }
  .loan-card__summary { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; flex: 1; }
  .loan-card__fit { font-size: var(--text-sm); border-top: 1px solid var(--line); padding-top: 0.85rem; }
  .loan-card__fit span { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.2rem; }


/* ---- components/Logo.astro ---- */
.
 */
interface Props { light?: boolean; class?: string }
const { light = false, class: className = '' } = Astro.props;
const mark = light ? '/images/logo-mark-cream.png' : '/images/logo-mark.png';
const word = light ? '/images/logo-keepsake-cream.png' : '/images/logo-keepsake-navy.png';
---
<a href="/" class:list={['logo', { 'logo--light': light }, className]} aria-label="Keepsake Loans — home">
  <img class="logo__mark" src={mark} alt="" width="320" height="380" decoding="async" />
  <span class="logo__word">
    <img class="logo__keepsake" src={word} alt="Keepsake" width="1740" height="175" decoding="async" />
    <img class="logo__loans" src="/images/logo-loans-gold.png" alt="Loans" width="790" height="100" decoding="async" />
  </span>
</a>

<style>
  .logo { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
  /* Mark height ≈ 2.2× the KEEPSAKE cap height — the proportion of the supplied logo. */
  .logo__mark { height: 2.1rem; width: auto; flex: none; }
  .logo__word { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 9.5rem; }
  .logo__keepsake { width: 100%; height: auto; }
  .logo__loans { width: 78%; height: auto; }
  @media (min-width: 1200px) {
    .logo__mark { height: 2.4rem; }
    .logo__word { width: 11rem; gap: 0.35rem; }
  }
  .logo--light .logo__mark { height: 2.6rem; }
  .logo--light .logo__word { width: 11.5rem; }


/* ---- components/PageHero.astro ---- */
.page-hero { background: var(--sand); padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--line); }
  .page-hero h1 { max-width: 20ch; margin-top: 1rem; }
  .page-hero .lede { margin-top: 1.25rem; }


/* ---- components/Placeholder.astro ---- */
.img-slot { position: relative; overflow: hidden; background: var(--sand); }
  .img-slot img { width: 100%; height: 100%; object-fit: cover; }
  .placeholder__message { position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--stone); }


/* ---- components/ProcessSteps.astro ---- */
.steps { display: grid; gap: 0; counter-reset: step; }
  .step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; position: relative; padding-bottom: 2.25rem; }
  .step:last-child { padding-bottom: 0; }
  .step::before { content: ''; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 1px; background: var(--line); }
  .step:last-child::before { display: none; }
  .step__marker { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy-700); color: var(--white); font-size: var(--text-xs); position: relative; z-index: 1; }
  .step__body { display: grid; gap: 0.6rem; align-content: start; padding-top: 0.55rem; }
  .step__body .tag { justify-self: start; }
  .step__title { font-size: var(--text-lg); }
  .step__summary { color: var(--ink-soft); max-width: 58ch; }
  .step__detail { max-width: 62ch; color: var(--ink); }

  /* Compact horizontal layout on wide screens when not showing full detail */
  @media (min-width: 900px) {
    .steps:not(.steps--full) { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
    .steps:not(.steps--full) .step { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 0; }
    .steps:not(.steps--full) .step::before { left: 3rem; right: -1.5rem; top: 1.5rem; bottom: auto; height: 1px; width: auto; }
    .steps:not(.steps--full) .step__body { padding-top: 0; }
    .steps:not(.steps--full) .step__title { font-size: var(--text-md); }
    .steps:not(.steps--full) .step__summary { font-size: var(--text-sm); }
  }


/* ---- components/ReviewCard.astro ---- */
.review { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); height: 100%; }
  .review__quote { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; color: var(--navy-900); flex: 1; font-variation-settings: 'opsz' 36; }
  .review__quote::before { content: '“'; color: var(--gold-500); }
  .review__quote::after { content: '”'; color: var(--gold-500); }
  .review__by { display: flex; flex-direction: column; font-size: var(--text-sm); border-top: 1px solid var(--line); padding-top: 0.9rem; }
  .review__by span { color: var(--stone); }


/* ---- components/Stars.astro ---- */
.stars { display: inline-flex; gap: 2px; color: var(--gold-500); }
  .stars svg { width: 1rem; height: 1rem; }
  .stars svg.dim { opacity: 0.25; }


/* ---- components/TeamCard.astro ---- */
.team-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; }
  .team-card__photo { display: block; }
  .team-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.35rem 1.5rem; flex: 1; }
  .team-card__name { font-size: var(--text-lg); }
  .team-card__name a { text-decoration: none; color: var(--navy-900); }
  .team-card__name a:hover { color: var(--gold-600); }
  .team-card__title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-600); }
  .team-card__nmls { font-size: var(--text-xs); color: var(--stone); }
  .team-card__intro { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 0.35rem; flex: 1; }
  .team-card__contact { font-size: var(--text-sm); display: grid; gap: 0.25rem; margin-top: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
  .team-card__contact a { text-decoration: none; word-break: break-all; }
  .team-card__contact a:hover { text-decoration: underline; }
  .team-card .link-arrow { margin-top: 0.75rem; }


/* ---- pages/about.astro ---- */
.about-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
  .about-hero__title { margin-top: 1rem; max-width: 18ch; }
  .about-hero__lede { margin-top: 1.5rem; max-width: 62ch; font-size: var(--text-lg); }
  .story { display: grid; gap: 2.5rem; align-items: center; }
  @media (min-width: 900px) { .story { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); } }
  .values { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .value { display: grid; gap: 0.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
  .value__num { color: var(--gold-600); font-size: var(--text-xs); }
  .value p { color: var(--ink-soft); max-width: 60ch; }
  @media (min-width: 800px) { .value { grid-template-columns: 4rem 14rem 1fr; gap: 2rem; align-items: start; } .value h3 { font-size: var(--text-lg); } }
  .licensing { display: grid; gap: 2.5rem; }
  @media (min-width: 900px) { .licensing { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
  .states { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.5rem; font-size: var(--text-sm); }
  .states li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  @media (min-width: 560px) { .states { grid-template-columns: repeat(3, 1fr); } }


/* ---- pages/apply.astro ---- */
.officer { display: grid; grid-template-columns: 6rem 1fr; gap: 1.25rem; padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
  .officer__photo { border-radius: 50%; overflow: hidden; align-self: start; }
  .officer__photo .placeholder__label { display: none; }
  .officer__body { display: grid; gap: 0.6rem; align-content: start; }
  .officer__name { font-size: var(--text-lg); }
  .officer__meta { font-size: var(--text-xs); color: var(--stone); letter-spacing: 0.04em; text-transform: uppercase; }
  .officer__body .btn { justify-self: start; margin-top: 0.25rem; }
  .officer__note { font-size: var(--text-xs); }
  .officer__profile { font-size: var(--text-sm); }
  .apply { display: grid; gap: 2.5rem; }
  @media (min-width: 900px) { .apply { grid-template-columns: 1.2fr 0.8fr; gap: 5rem; align-items: start; } }
  .apply__steps { counter-reset: s; list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 1.25rem; }
  .apply__steps li { counter-increment: s; position: relative; padding-left: 3.25rem; font-size: var(--text-md); }
  .apply__steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0.1rem; font-family: ui-monospace, Menlo, monospace; font-size: var(--text-xs); color: var(--gold-600); width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }


/* ---- pages/calculator.astro ---- */
.calc { display: grid; gap: 2rem; }
  @media (min-width: 900px) { .calc { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } }
  .calc__form { display: grid; gap: 1.25rem; }
  .calc__row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
  .calc__input { position: relative; display: flex; align-items: center; }
  .calc__input span { position: absolute; color: var(--stone); font-size: var(--text-sm); pointer-events: none; }
  .calc__input span:first-child { left: 0.85rem; }
  .calc__input span:last-child { right: 0.85rem; }
  .calc__input span:first-child + .input { padding-left: 1.7rem; }
  .calc__input .input + span { right: 0.85rem; }
  .calc__more summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); color: var(--navy-700); }
  .calc__result { background: var(--navy-800); color: var(--navy-100); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); display: grid; gap: 1.25rem; position: sticky; top: calc(var(--header-h) + 2rem); }
  .calc__result .eyebrow { color: var(--gold-200); }
  .calc__total { font-size: var(--text-3xl); color: var(--white); line-height: 1; }
  .calc__per { font-size: 0.35em; color: var(--gold-200); margin-left: 0.3em; font-family: var(--font-body); }
  .calc__bar { display: flex; height: 0.6rem; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.12); }
  .calc__bar span { display: block; flex-basis: 0; transition: flex-grow 200ms ease; }
  [data-k="pi"] { background: var(--gold-500); }
  [data-k="tax"] { background: #4a6a94; }
  [data-k="ins"] { background: #a9b9cf; }
  [data-k="hoa"] { background: #e6d9b8; }
  [data-k="pmi"] { background: #c9a96a; }
  .calc__breakdown, .calc__meta { display: grid; gap: 0.5rem; font-size: var(--text-sm); }
  .calc__breakdown div, .calc__meta div { display: flex; justify-content: space-between; gap: 1rem; }
  .calc__breakdown dt { display: inline-flex; align-items: center; gap: 0.5rem; }
  .calc__breakdown i { width: 0.6rem; height: 0.6rem; border-radius: 2px; display: inline-block; }
  .calc__breakdown dd, .calc__meta dd { font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; }
  .calc__meta { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12); }
  .calc__note { font-size: var(--text-xs); color: rgba(227,235,229,0.7); }
  .calc__result .btn { justify-self: start; }


/* ---- pages/contact.astro ---- */
.contact { display: grid; gap: 3rem; }
  @media (min-width: 960px) { .contact { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } }
  .contact__dl { display: grid; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .contact__dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; }
  .contact__dl dt { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); padding-top: 0.2rem; }
  .contact__dl dd a { text-decoration: none; }
  .contact__dl dd a:hover { text-decoration: underline; }
  .contact__side { display: grid; gap: 1.5rem; }
  .advisors { display: grid; margin-top: 1rem; }
  .advisor { display: flex; gap: 1rem; align-items: center; padding: 0.85rem 0; border-top: 1px solid var(--line); }
  .advisor__photo { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex: none; }
  .advisor__initials { display: grid; place-items: center; background: var(--navy-100); color: var(--navy-700); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.05em; }
  .advisor div { display: grid; gap: 0.1rem; font-size: var(--text-sm); }
  .advisor__name { font-family: var(--font-display); font-size: var(--text-md); text-decoration: none; color: var(--navy-900); }
  .advisor__title { font-size: var(--text-xs); color: var(--stone); letter-spacing: 0.04em; text-transform: uppercase; }
  .advisor__links a { text-decoration: none; }
  .contact__map { border: 1px solid var(--line); }


/* ---- pages/index.astro ---- */
/* Hero */
  .hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
  .hero__inner { display: grid; gap: 3rem; align-items: center; }
  .hero__title { margin-top: 1.25rem; max-width: 14ch; }
  .hero__copy .lede { margin-top: 1.5rem; }
  .hero__actions { margin-top: 2rem; }
  .hero__trust { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink-soft); }
  .hero__trust li { display: inline-flex; align-items: center; gap: 0.6rem; }
  .hero__trust strong { color: var(--navy-900); }
  .hero__figure { position: relative; max-width: 34rem; width: 100%; margin-inline: auto; }
  .hero__figure .hero__img { border-top-left-radius: 14rem; border-top-right-radius: 14rem; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
  .hero__figure figcaption { margin-top: 1rem; font-family: var(--font-display); font-style: italic; color: var(--stone); font-size: var(--text-md); }
  .hero__figure::before { content: ''; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--gold-200); border-top-left-radius: 14rem; border-top-right-radius: 14rem; z-index: -1; }
  @media (min-width: 900px) {
    .hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 6vw, 6rem); }
  }

  /* Stats */
  .stats { background: var(--navy-800); color: var(--navy-100); }
  .stats__list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 1.75rem 1rem; display: grid; gap: 0.35rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .stat__value { font-size: var(--text-2xl); color: var(--white); line-height: 1; }
  .stat__suffix { color: var(--gold-200); font-size: 0.6em; margin-left: 0.15em; }
  .stat__label { font-size: var(--text-sm); color: var(--gold-200); }
  @media (min-width: 720px) {
    .stats__list { grid-template-columns: repeat(4, 1fr); }
    .stat { border-bottom: 0; border-left: 1px solid rgba(255,255,255,0.1); padding: 2.25rem 1.75rem; }
    .stat:first-child { border-left: 0; padding-left: 0; }
  }

  /* Intro */
  .intro { display: grid; gap: 2.5rem; align-items: center; }
  .intro__copy h2 { max-width: 20ch; }
  @media (min-width: 900px) { .intro { grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); } }

  /* Loan program index */
  .loan-index { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .loan-item { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 1rem; align-items: center; padding: 1.25rem 0.25rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background-color 160ms ease; }
  .loan-item:hover { background: var(--paper); color: inherit; }
  .loan-item:hover .loan-item__title { color: var(--gold-600); }
  .loan-item:hover .loan-item__arrow { transform: translateX(4px); }
  .loan-item__num { color: var(--gold-600); font-size: var(--text-xs); }
  .loan-item__body { display: grid; gap: 0.2rem; }
  .loan-item__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--navy-900); line-height: 1.15; transition: color 160ms ease; }
  .loan-item__fit { font-size: var(--text-sm); color: var(--ink-soft); }
  .loan-item__arrow { color: var(--navy-700); font-size: 1.1rem; transition: transform 160ms ease; }
  @media (min-width: 800px) {
    .loan-index { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
    .loan-item { padding: 1.4rem 0.5rem; }
  }

  /* Reviews summary */
  .reviews-summary { display: flex; align-items: center; gap: 1rem; }
  .reviews-summary__num { font-size: var(--text-2xl); line-height: 1; }
  .reviews-summary > div { display: grid; gap: 0.2rem; font-size: var(--text-sm); }


/* ---- pages/resources.astro ---- */
.resource { display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform 160ms ease, box-shadow 160ms ease; }
  .resource:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
  .resource__title { font-size: var(--text-lg); }
  .resource__body { color: var(--ink-soft); font-size: var(--text-sm); flex: 1; }


/* ---- pages/reviews.astro ---- */
.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
  .summary__num { font-size: var(--text-2xl); line-height: 1; }
  .summary p { font-size: var(--text-sm); margin-top: 0.2rem; }


/* ---- pages/loans/[slug].astro ---- */
.program { display: grid; gap: 3rem; }
  .program__fit { font-size: var(--text-md); display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
  .program__disclaimer { font-size: var(--text-xs); padding-top: 1.5rem; border-top: 1px solid var(--line); margin-top: 3rem; }
  .sticky { position: sticky; top: calc(var(--header-h) + 3.25rem); }
  @media (min-width: 960px) { .program { grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; } }


/* ---- pages/loans/index.astro ---- */
.loan-index-page { border-top: 1px solid var(--line); }
  .loan-row { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); align-items: start; }
  .loan-row__num { color: var(--gold-600); font-size: var(--text-sm); padding-top: 0.5rem; }
  .loan-row__title { font-size: var(--text-xl); }
  .loan-row__title a { text-decoration: none; color: var(--navy-900); }
  .loan-row__title a:hover { color: var(--gold-600); }
  .loan-row__summary { margin-top: 0.6rem; color: var(--ink-soft); max-width: 62ch; }
  .loan-row__fit { margin-top: 0.6rem; font-size: var(--text-sm); }
  .loan-row__cta { grid-column: 2; justify-self: start; }
  @media (min-width: 800px) {
    .loan-row { grid-template-columns: 4rem 1fr auto; }
    .loan-row__cta { grid-column: auto; align-self: center; }
  }


/* ---- pages/team/[slug].astro ---- */
.profile__grid { display: grid; gap: 2.5rem; }
  .sticky { position: sticky; top: calc(var(--header-h) + 3.25rem); }
  .profile__contact { margin-top: 1rem; }
  .profile__dl { display: grid; gap: 0.6rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: var(--text-sm); }
  .profile__dl div { display: grid; grid-template-columns: 5rem 1fr; gap: 0.5rem; }
  .profile__dl dt { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.15rem; }
  .profile__dl dd a { text-decoration: none; word-break: break-all; }
  .profile__title { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-600); }
  .profile__intro { border-left: 3px solid var(--gold-500); padding-left: 1.25rem; }
  .profile__bio { font-size: var(--text-md); line-height: 1.7; max-width: 62ch; }
  .profile__licensed { padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .profile__licensed ul { margin-top: 0.75rem; }
  .eyebrow a { text-decoration: none; color: inherit; }
  @media (min-width: 900px) { .profile__grid { grid-template-columns: 20rem minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } }


/* ---- pages/team/index.astro ---- */
.team-group + .team-group { border-top: 1px solid var(--line); }
  .team-group__head { display: grid; gap: 0.5rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
  .team-group__head h2 { font-size: var(--text-xl); }
  @media (min-width: 800px) { .team-group__head { grid-template-columns: 20rem 1fr; align-items: end; gap: 2rem; } }

/* ---- WordPress-specific additions ---- */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
.logo__custom { height: 3.25rem; width: auto; }
.contact__map iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.contact__form .wpcf7-form label, .contact__form .wpforms-form label { font-size: var(--text-sm); font-weight: 600; color: var(--navy-900); }
.contact__form input:not([type=submit]), .contact__form textarea, .contact__form select { width: 100%; padding: 0.8rem 0.95rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.contact__form input[type=submit], .contact__form button[type=submit] { display: inline-flex; padding: 0.9rem 1.5rem; border-radius: var(--radius); font-weight: 600; font-size: var(--text-sm); background: var(--navy-700); color: var(--white); border: 1.5px solid var(--navy-700); cursor: pointer; }
.entry h2 { margin-top: 1.5rem; } .entry ul, .entry ol { padding-left: 1.4rem; } .entry img { border-radius: var(--radius); }
.mobile__list a.is-active { color: var(--gold-600); }