/* ==========================================================================
   Daniel Ibanez — Mortgage Loan Officer
   Brand stylesheet. Tokens come straight from the brand board.
   Tailwind (CDN) handles utilities; this file owns brand primitives,
   components, and motion.
   ========================================================================== */

:root {
  /* --- Primary colorway ------------------------------------------------ */
  --charcoal:    #1F2124;
  --graphite:    #34373B;
  --slate-gray:  #6B7177;
  --stone:       #B9B2A8;
  --bone-white:  #F6F4F1;

  /* --- Alternate colorway ---------------------------------------------- */
  --espresso:    #2B2420;
  --ivory:       #FAF8F4;
  --taupe:       #A89F94;
  --warm-gray:   #736E66;
  --stone-alt:   #CFC7BB;

  /* --- Semantic tokens -------------------------------------------------- */
  --bg:            var(--bone-white);
  --bg-elevated:   #FFFFFF;
  --bg-inverse:    var(--charcoal);
  --text:          var(--graphite);   /* 10.9:1 on bone white */
  --text-strong:   var(--charcoal);
  --text-muted:    var(--slate-gray); /* 4.5:1 — use at 16px+ only */
  --text-inverse:  var(--bone-white);
  --rule:          rgba(31, 33, 36, 0.12);
  --rule-strong:   rgba(31, 33, 36, 0.24);
  --accent:        var(--stone);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Spacing scale (density 4/10 — generous, editorial) --------------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur-base:  280ms;
  --dur-slow:  420ms;

  --shadow-card:  0 1px 2px rgba(31,33,36,0.04), 0 8px 24px rgba(31,33,36,0.06);
  --shadow-float: 0 2px 8px rgba(31,33,36,0.08), 0 24px 48px rgba(31,33,36,0.12);

  --header-h: 84px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

/* Normalise the browser defaults that Tailwind's preflight used to cover.
   Tailwind was removed before launch (no utility classes were in use), so
   these have to be declared explicitly. */
figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; }
button { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }
textarea { resize: vertical; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-sm);
  z-index: 200;
  background: var(--charcoal);
  color: var(--bone-white);
  padding: var(--space-xs) var(--space-md);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { left: var(--space-sm); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}
@media (min-width: 768px)  { .shell { padding-inline: var(--space-lg); } }
@media (min-width: 1280px) { .shell { padding-inline: var(--space-xl); } }

.shell--narrow { max-width: 880px; }

/* Wider container for the header and hero so the lockup and headline sit
   closer to the left edge. Content sections keep the 1240px measure. */
.shell--wide { max-width: 1560px; }
@media (min-width: 1280px) { .shell--wide { padding-inline: var(--space-lg); } }

.section { padding-block: var(--space-2xl); }
@media (min-width: 1024px) { .section { padding-block: var(--space-3xl); } }

.section--tight { padding-block: var(--space-xl); }

.section--inverse {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
.section--inverse h2,
.section--inverse h3 { color: var(--bone-white); }

.section--alt { background: var(--ivory); }

/* ==========================================================================
   Section headers — the Signature Capital editorial signature:
   italic display eyebrow above a large centered serif headline.
   ========================================================================== */

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  color: var(--slate-gray);
  line-height: 1;
  margin-bottom: var(--space-2xs);
}
.section--inverse .eyebrow { color: var(--stone); }

.section-head {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.section-title {
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.012em;
}

.section-lede {
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: 1.0625rem;
}
.section--inverse .section-lede { color: var(--stone-alt); }

/* Thin rule flourish */
.rule-flourish {
  width: 64px;
  height: 1px;
  background: var(--rule-strong);
  margin: var(--space-md) auto 0;
  border: 0;
}
.section--inverse .rule-flourish { background: rgba(246,244,241,0.28); }

/* Small uppercase label */
.label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.985); }

.btn--primary {
  background: var(--charcoal);
  color: var(--bone-white);
  border-color: var(--charcoal);
}
.btn--primary:hover { background: var(--graphite); border-color: var(--graphite); }

.btn--outline {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--rule-strong);
}
.btn--outline:hover { border-color: var(--charcoal); background: rgba(31,33,36,0.04); }

.btn--light {
  background: var(--bone-white);
  color: var(--charcoal);
  border-color: var(--bone-white);
}
.btn--light:hover { background: #FFFFFF; }

.btn--ghost-light {
  background: transparent;
  color: var(--bone-white);
  border-color: rgba(246,244,241,0.4);
}
.btn--ghost-light:hover { border-color: var(--bone-white); background: rgba(246,244,241,0.08); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(246, 244, 241, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}

/* Wordmark lockup — mirrors the horizontal logo on the brand board.
   Swap the .brand-mark block for your real logo file when it lands. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-shrink: 0;
}
/* Compass mark from the brand board */
.brand-logo {
  height: 52px;
  width: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-divider {
  width: 1px;
  height: 40px;
  background: var(--rule-strong);
  flex-shrink: 0;
}

/* Stacked lockup: name over role, matching the horizontal header lockup
   on the brand board. Both must be block-level or they render inline. */
.brand-text { display: block; }

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--charcoal);
  line-height: 1.1;
  white-space: nowrap;
}
.brand-role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate-gray);
  line-height: 1.1;
  margin-top: 4px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .brand-logo { height: 42px; width: 42px; }
  .brand-name { font-size: 0.9375rem; letter-spacing: 0.12em; }
  .brand-role { font-size: 0.5rem; letter-spacing: 0.18em; }
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: var(--space-lg);
}

/* Spanish labels run longer than the English ones and pushed the Apply Now
   button past the viewport edge. Drop "Sobre mí" from the top nav (it stays
   in the mobile drawer and the footer) and tighten the spacing. */
html[lang="es"] .nav-hide-es { display: none; }
html[lang="es"] .nav-desktop { gap: 2rem; }
@media (min-width: 1024px) { .nav-desktop { display: flex; } }

.nav-link {
  position: relative;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-block: 0.5rem;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--charcoal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--charcoal); }
.nav-link:hover::after,
.nav-link[aria-current="true"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-actions .btn { display: none; }
@media (min-width: 1024px) { .nav-actions .btn { display: inline-flex; } }

/* Language toggle (EN / ES) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}
.lang-btn {
  background: transparent;
  border: 0;
  padding: 0.25rem 0.125rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--slate-gray);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.lang-btn:hover { color: var(--charcoal); }
.lang-btn.is-active { color: var(--charcoal); }
.lang-sep { width: 1px; height: 12px; background: var(--rule-strong); }

.lang-toggle--drawer {
  align-self: flex-start;
  margin-top: var(--space-md);
  padding: 0.5rem 0.875rem;
}
.lang-toggle--drawer .lang-btn { font-size: 0.8125rem; letter-spacing: 0.08em; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--charcoal);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Mobile drawer */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bone-white);
  padding: calc(var(--header-h) + var(--space-lg)) var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  overflow-y: auto;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-mobile a:not(.btn) {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--charcoal);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}
.nav-mobile .btn { margin-top: var(--space-md); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 92vh;
  min-height: 92dvh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}

/* Placeholder atmosphere. Drop a real photograph in as .hero-photo and
   this gradient becomes the fallback layer beneath it. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 18%, #FFFDF9 0%, rgba(255,253,249,0) 55%),
    radial-gradient(90% 80% at 88% 72%, var(--taupe) 0%, rgba(168,159,148,0) 62%),
    linear-gradient(168deg, var(--ivory) 0%, #F3EEE5 46%, var(--stone-alt) 100%);
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* Scrim keeps headline contrast safe over any photograph */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(250,246,238,0.62) 0%,
    rgba(249,244,235,0.50) 34%,
    rgba(244,236,222,0.22) 62%,
    rgba(184,166,142,0.06) 100%);
}

/* Wide enough to keep "Moves You Forward." on one line at desktop sizes */
.hero-content { max-width: 46rem; padding-block: var(--space-2xl); }

.hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--slate-gray);
  line-height: 1;
  margin-bottom: var(--space-2xs);
}

.hero-title {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.hero-lede {
  margin-top: var(--space-md);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: var(--graphite);
  max-width: 32rem;
}

.hero-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.hero-meta {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.hero-meta dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-gray);
}
/* Inter with lining + tabular figures. Playfair's old-style numerals sit at
   varying heights, which reads as uneven for IDs and phone numbers. */
.hero-meta dd {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--charcoal);
  line-height: 1.2;
}
.hero-meta dd a { transition: color var(--dur-fast) var(--ease-out); }
.hero-meta dd a:hover { color: var(--slate-gray); }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-gray);
}
@media (min-width: 1024px) { .scroll-cue { display: flex; } }
.scroll-cue span {
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.scroll-cue svg { animation: nudge 2.4s var(--ease-out) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* ==========================================================================
   Pillars — the four brand-board value props
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 640px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  background: var(--bg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: background var(--dur-base) var(--ease-out);
}
.pillar:hover { background: var(--ivory); }
.pillar svg { margin-inline: auto; color: var(--charcoal); }
.pillar h3 {
  margin-top: var(--space-sm);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pillar p {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ==========================================================================
   About
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 0.85fr 1fr; gap: var(--space-2xl); }
}

.portrait-frame { position: relative; }
.portrait-frame::after {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--rule-strong);
  z-index: -1;
}
.portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;          /* matches the 1122×1402 source exactly */
  object-fit: cover;
  object-position: center top;
  /* Shows while the photo loads, so the frame never collapses */
  background:
    radial-gradient(70% 55% at 50% 32%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(170deg, var(--ivory) 0%, var(--stone-alt) 100%);
}

.about-body p + p { margin-top: var(--space-sm); }
.about-body .section-title { text-align: left; }

.credentials {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  align-items: start;
}
@media (min-width: 760px) { .credentials { grid-template-columns: repeat(4, 1fr); } }
.credentials dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-gray);
}
.credentials dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--charcoal);
}

/* Company NMLS sits under the company name — required disclosure, kept
   visually secondary so it doesn't compete with the name itself. */
.cred-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ==========================================================================
   Loan Programs — ONE section, each program its own sub-section inside
   ========================================================================== */

.program {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-xl);
}
.program:last-of-type { border-bottom: 1px solid var(--rule); }

.program-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 900px) {
  .program-grid {
    grid-template-columns: auto 1fr 1.1fr;
    gap: var(--space-xl);
    align-items: start;
  }
}

.program-index {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--stone);
  letter-spacing: 0.08em;
  padding-top: 0.4rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.program-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.01em;
}
.program-for {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-gray);
}
.program-desc { margin-top: var(--space-sm); color: var(--text); }

/* ---- Program accordions -------------------------------------------------
   Every program is a collapsed row: number, name, tag line and a one-line
   summary stay visible, details live behind the toggle. Groups (Investor,
   Construction) use the same shell but hold several sub-programs.
   ---------------------------------------------------------------------- */

.program--accordion { padding-block: 0; }

.program-group-heading { margin: 0; font-family: var(--font-body); }

.program-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (min-width: 900px) {
  .program-toggle { grid-template-columns: auto 1fr auto; gap: var(--space-xl); }
}
.program-toggle:hover { opacity: 0.68; }
.program-toggle .program-index { padding-top: 0; }

/* These are spans inside the button, so they need to be block-level to stack */
.program-toggle-text { display: block; }
.program-toggle-text .program-title,
.program-toggle-text .program-for { display: block; }
.program-toggle .program-for { margin-top: 0.35rem; }

.program-icon {
  color: var(--slate-gray);
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.program-toggle[aria-expanded="true"] .program-icon { transform: rotate(45deg); }

.program-panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-base) var(--ease-out);
}
.program-panel-inner { padding-bottom: var(--space-lg); }

/* Single-program detail: description left, checklist right on wide screens */
.program-detail { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 900px) {
  .program-detail { grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); }
}
.program-detail .program-desc { margin-top: 0; }

/* Lives inside the toggle button so it reads before anyone expands, and
   stays aligned with the title rather than the section edge. */
.program-intro {
  display: block;
  max-width: 52ch;
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.subprogram {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}
.subprogram:first-of-type { border-top: 0; padding-top: 0; }
.subprogram + .subprogram { margin-top: var(--space-lg); }

.subprogram-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.15;
  margin: 0;
}
.subprogram .program-for { margin-top: 0.35rem; }
.subprogram .program-desc { margin-top: var(--space-sm); max-width: 68ch; }
.subprogram .program-points { margin-top: var(--space-md); }

.program-note {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 68ch;
}

.program-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.program-points li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
}
.program-points svg { flex-shrink: 0; margin-top: 4px; color: var(--slate-gray); }

/* ==========================================================================
   Calculator — Build State's floating card treatment
   ========================================================================== */

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 1024px) {
  .calc-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xl); }
}

.calc-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .calc-panel { padding: var(--space-lg); } }

/* Estimate warning above the calculator inputs */
.calc-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--ivory);
  border-left: 2px solid var(--stone);
  border-radius: 2px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--graphite);
}
.calc-notice svg { flex-shrink: 0; margin-top: 3px; color: var(--slate-gray); }
.calc-notice a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

.calc-disclaimer a {
  color: var(--bone-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.calc-disclaimer strong { color: var(--bone-white); }

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) { .field-grid { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

.input-wrap { position: relative; display: flex; align-items: center; }
.input-affix {
  position: absolute;
  font-size: 0.9375rem;
  color: var(--slate-gray);
  pointer-events: none;
}
.input-affix--pre  { left: 0.875rem; }
.input-affix--post { right: 0.875rem; }

.input,
.select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  font-family: var(--font-body);
  font-size: 1rem;              /* 16px — prevents iOS zoom on focus */
  font-variant-numeric: tabular-nums;
  color: var(--charcoal);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus,
.select:focus {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(31,33,36,0.08);
}
.input--pre  { padding-left: 1.75rem; }
.input--post { padding-right: 2.5rem; }

.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' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7177' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.field-help {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Result card — floats over the section edge on desktop */
.calc-result {
  background: var(--charcoal);
  color: var(--bone-white);
  border-radius: 4px;
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-float);
  position: sticky;
  top: calc(var(--header-h) + var(--space-md));
}
@media (min-width: 768px) { .calc-result { padding: var(--space-lg); } }

.calc-result .label { color: var(--stone); }

.calc-total {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  margin-top: 0.5rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--bone-white);
}
.calc-total-note {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--stone-alt);
}

.calc-breakdown {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(246,244,241,0.18);
  display: grid;
  gap: 0.75rem;
}
.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.9375rem;
}
.calc-row dt { color: var(--stone-alt); display: flex; align-items: center; gap: 0.5rem; }
.calc-row dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bone-white);
}
.calc-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.calc-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: var(--space-md);
  background: rgba(246,244,241,0.14);
}
.calc-bar span { height: 100%; transition: width var(--dur-slow) var(--ease-out); }

.calc-disclaimer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(246,244,241,0.18);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--stone-alt);
}

/* ==========================================================================
   Process timeline
   ========================================================================== */

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  counter-reset: step;
}
@media (min-width: 700px)  { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .timeline { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); } }

.step { position: relative; padding-top: var(--space-md); }
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--rule-strong);
}
.step::after {
  content: '';
  position: absolute;
  top: -3px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--charcoal);
}
.step-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--slate-gray);
}
.step h3 {
  margin-top: 0.5rem;
  font-size: 1.1875rem;
  letter-spacing: 0.02em;
}
.step p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px)  { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.stars { display: flex; gap: 3px; color: var(--charcoal); }

.testimonial blockquote {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--graphite);
  flex: 1;
}

.testimonial figcaption {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  background: var(--stone-alt);
  color: var(--espresso);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
}

.testimonial cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--charcoal);
  display: block;
}
.testimonial .testimonial-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--rule); }

.faq-item { border-bottom: 1px solid var(--rule); }

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--charcoal);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-trigger:hover { color: var(--slate-gray); }

.faq-icon {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--slate-gray);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }

.faq-panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-base) var(--ease-out);
}
.faq-panel-inner {
  padding-bottom: var(--space-md);
  padding-right: var(--space-lg);
  color: var(--text);
  max-width: 60ch;
}

/* ==========================================================================
   CTA band
   ========================================================================== */

/* Compact statement band. No buttons — the contact section sits directly
   below it, so this reads as a lead-in rather than a competing call to
   action. Scaled down accordingly. */
.cta-band {
  text-align: center;
  padding-block: var(--space-lg);
}
.cta-band .eyebrow      { font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
.cta-band .section-title { font-size: clamp(1.375rem, 3vw, 2rem); }
.cta-band .section-lede  {
  font-size: 0.9375rem;
  margin-top: var(--space-xs);
  max-width: 46ch;
  margin-inline: auto;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: 0.8fr 1fr; gap: var(--space-2xl); }
}

.contact-list { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.contact-item { display: flex; gap: 0.875rem; align-items: flex-start; }
.contact-item svg { flex-shrink: 0; margin-top: 3px; color: var(--slate-gray); }
.contact-item dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-gray);
}
.contact-item dd { margin: 2px 0 0; font-size: 1rem; color: var(--charcoal); }
.contact-item a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Secondary line under a contact value (satellite offices, weekend hours) */
.contact-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.form-status {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 2px;
  font-size: 0.9375rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--error { background: #FDECEC; color: #8B1E1E; border: 1px solid #F3C9C9; }

.field-error {
  font-size: 0.8125rem;
  color: #8B1E1E;
  display: none;
}
.field-error.is-visible { display: block; }
.input[aria-invalid="true"] { border-color: #8B1E1E; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--charcoal);
  color: var(--stone-alt);
  padding-block: var(--space-xl) var(--space-lg);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(246,244,241,0.14);
}
@media (min-width: 800px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); }
}

.site-footer .brand-name { color: var(--bone-white); }
.site-footer .brand-role { color: var(--stone); }
.site-footer .brand-mark { color: var(--bone-white); }
.site-footer .brand-divider { background: rgba(246,244,241,0.3); }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--space-sm);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.footer-col a {
  font-size: 0.9375rem;
  color: var(--stone-alt);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--bone-white); }

.footer-legal {
  padding-top: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--warm-gray);
}
.footer-legal strong { color: var(--stone-alt); font-weight: 600; }

.footer-badges {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.ehl-badge {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--stone-alt);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  max-width: 15rem;
}
.ehl-badge svg { flex-shrink: 0; }

.footer-bottom {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(246,244,241,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--warm-gray);
}

/* ==========================================================================
   Legal pages (privacy, terms, accessibility)
   ========================================================================== */

.legal-header {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-md);
  background: var(--bg);
}
.legal-header .header-inner { align-items: center; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.back-link:hover { color: var(--charcoal); }
.back-link svg { flex-shrink: 0; }

.legal-hero {
  padding-block: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--rule);
}
.legal-hero .section-title { text-align: left; }
.legal-updated {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.legal-body { padding-block: var(--space-xl) var(--space-2xl); }

.legal-content { max-width: 68ch; }
.legal-content h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.01em;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: var(--space-md);
  margin-bottom: 0.35rem;
  color: var(--charcoal);
}
.legal-content p { margin-bottom: var(--space-sm); }
.legal-content ul {
  list-style: disc;
  margin: 0 0 var(--space-sm);
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
}
.legal-content li { padding-left: 0.25rem; }
.legal-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.legal-content strong { color: var(--charcoal); font-weight: 600; }

.legal-callout {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  background: var(--ivory);
  border-left: 2px solid var(--stone);
  border-radius: 2px;
  font-size: 0.9375rem;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-toc {
  margin: var(--space-lg) 0 var(--space-xl);
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.legal-toc h2 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
}
.legal-toc ol {
  list-style: decimal;
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* Scoped under .js so the page is fully visible if JavaScript never runs.
   Without this, a blocked or failed script leaves the body blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Reduced motion — honour the OS setting everywhere
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .scroll-cue svg { animation: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .nav-mobile, .scroll-cue, .cta-band, .calc-panel { display: none; }
  body { background: #fff; color: #000; }
}