/* ═══════════════════════════════════════════════════
   The Clear Close — Shared Stylesheet
   Used by all sub-pages (service, company, contact)
═══════════════════════════════════════════════════ */

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

:root {
  --navy:      #1b263b;
  --tan:       #9a8c73;
  --tan-light: #c4b49a;
  --cream:     #f7f5f2;
  --off-white: #fdfdfd;
  --white:     #ffffff;
  --text:      #1c1c1c;
  --text-mid:  #4a4a4a;
  --text-muted:#787878;
  --border:    #e0dbd3;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--off-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* ─── BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .15s, background .15s, color .15s;
}
.btn-navy {
  padding: 10px 22px;
  font-size: .85rem;
  background: var(--navy);
  color: var(--white);
  letter-spacing: .01em;
}
.btn-navy:hover { opacity: .82; }

.btn-hero {
  padding: 15px 34px;
  font-size: .95rem;
  background: var(--white);
  color: var(--navy);
}
.btn-hero:hover { background: var(--cream); transform: translateY(-1px); }

.btn-ghost {
  padding: 14px 28px;
  font-size: .875rem;
  font-weight: 500;
  background: transparent;
  color: rgba(255,255,255,.6);
  border: 1.5px solid rgba(255,255,255,.2);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.5); color: var(--white); }

.btn-outline {
  padding: 12px 26px;
  font-size: .875rem;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-cta {
  padding: 15px 36px;
  font-size: .95rem;
  background: var(--white);
  color: var(--navy);
}
.btn-cta:hover { background: var(--cream); transform: translateY(-1px); }

/* ─── NAV ─────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 72px;
  background: rgba(253,253,253,.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

/* Phase 30.6 — on conversion pages (contact.html / real-estate-contact.html /
   booked.html), strip the nav to a thin brand-only bar. The Schedule Call CTA
   and the nav-links list are hidden so the form/widget has more vertical
   space, especially on mobile. The small "The Clear Close" logo stays so
   visitors know whose site they're on. */
body.tcc-minimal-chrome .nav {
  height: 56px;
}
body.tcc-minimal-chrome .nav .nav-links,
body.tcc-minimal-chrome .nav .btn-navy {
  display: none !important;
}
@media (max-width: 720px) {
  /* Phase 30.7 — on mobile conversion pages we hide the top nav entirely
     and replace it with a small bottom-left brand badge (see below).
     The wizard / calendar reclaims the full viewport. */
  body.tcc-minimal-chrome .nav { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
 * Phase 30.7 — mobile brand badge.
 *
 * A thin pill at the bottom-left of the viewport showing the logo and
 * "The Clear Close" — purely decorative. It's hidden on desktop and
 * surfaces only on mobile conversion pages where we strip the top nav.
 * The element is non-interactive (pointer-events:none, aria-hidden in
 * markup) so a tap can't accidentally drag the visitor out of the
 * wizard / calendar. The QC chat-bubble launcher sits bottom-RIGHT,
 * so this badge and the launcher coexist without overlap.
 * ────────────────────────────────────────────────────────────────── */
.tcc-mobile-brand-badge {
  display: none; /* default: only the mobile media query reveals it */
  align-items: center;
  gap: 8px;
  position: fixed;
  /* Phase 30.9 — drop badge to vertical centerline of the sticky
     step-nav buttons (Back / Continue). Back/Continue buttons sit at
     ~36px above the viewport bottom on mobile (button height ~45px,
     sticky nav padding-bottom ~14px + safe-area). 22px puts the badge
     midline aligned with the buttons so the row reads as a balanced
     trio instead of floating chrome above the CTA. The QC launcher
     mirrors this value at styles.css:.qc-launcher mobile. */
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  left:   calc(16px + env(safe-area-inset-left,   0px));
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
  z-index: 50;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 2px 8px rgba(28, 28, 28, 0.06);
}
.tcc-mobile-brand-badge img {
  width: 20px;
  height: 20px;
  display: block;
}
@media (max-width: 720px) {
  /* Reveal the badge only at mobile widths on conversion pages.
     body.tcc-minimal-chrome scopes it so it never paints on regular
     content pages — they keep their full nav. */
  body.tcc-minimal-chrome .tcc-mobile-brand-badge { display: inline-flex; }
}
@media print {
  /* Print: fixed-position chrome must never appear on every page. */
  .tcc-mobile-brand-badge { display: none !important; }
}
@media (forced-colors: active) {
  /* Windows high-contrast mode strips rgba backgrounds. Use system
     color keywords so the badge remains legible. */
  .tcc-mobile-brand-badge {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * Phase 30.7 — sticky step-nav for wizards on small-laptop widths.
 *
 * Phase 13c added a sticky-bottom .step-nav rule INLINE in contact.html
 * at max-width 720px so the Continue button stayed visible while the
 * mobile visitor scrolled. Two problems with that:
 *   1. real-estate-contact.html never got the same rule (drift)
 *   2. 720px misses standard laptops (1280×800) where the same
 *      "Continue scrolled off-screen" symptom appears on step 1 (8
 *      goal cards plus a tall card padding).
 * This rule promotes the inline-only behavior to a shared global rule
 * at max-width 880px so BOTH wizards inherit it AND the breakpoint
 * covers standard laptop heights. The inline rules in the HTML files
 * can stay (cascade picks the right one) — but new pages get the
 * behavior for free.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .funnel-card .step-nav {
    position: sticky;
    bottom: 0;
    background: var(--white);
    /* Soft top-edge fade so content scrolling underneath visibly
       slides past the sticky band instead of hard-clipping at the
       button row. */
    box-shadow: 0 -10px 16px -8px rgba(28, 28, 28, 0.06);
    padding-top: 16px;
    margin-top: 8px;
    /* iOS safe-area for home-bar gesture region. */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
  }
}

.nav-inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo img {
  height: 38px;
  width: auto;
  display: block;
}

.nav-logo-text {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-mid);
  transition: color .15s;
}
.nav-links a:hover { color: var(--navy); }

/* ─── PAGE HERO ───────────────────────────────────── */
.page-hero {
  background: var(--navy);
  padding: 88px 36px 80px;
  text-align: center;
}

.page-hero-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 20px;
}

.page-hero h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -.025em;
  max-width: 760px;
  margin: 0 auto 22px;
}

.page-hero h1 em { font-style: italic; color: rgba(255,255,255,.82); }

.page-hero-body {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,.55);
  max-width: 540px;
  margin: 0 auto 28px;
  line-height: 1.78;
}

/* Phase 16c — trust strip above the CTA on /about. Credentials +
   verified-reviews link + multi-state licensure so visitors see the
   trust case before scrolling. */
.page-hero-trust {
  font-family: 'Figtree', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
  max-width: 720px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
.page-hero-trust a {
  color: rgba(255,255,255,.82);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-hero-trust a:hover { color: #fff; }
.page-hero-trust-sep { margin: 0 8px; color: rgba(255,255,255,.32); }

.page-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── SHARED SECTION ──────────────────────────────── */
.section { padding: 96px 36px; }

.section-inner {
  max-width: 1160px;
  margin: 0 auto;
}

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 14px;
}

.section-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  color: var(--navy);
  letter-spacing: -.022em;
  line-height: 1.18;
  margin-bottom: 16px;
}

.section-title em { font-style: italic; }

.section-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 540px;
  line-height: 1.7;
}

/* ─── PROSE ───────────────────────────────────────── */
.prose {
  max-width: 760px;
}

.prose h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--navy);
  letter-spacing: -.018em;
  line-height: 1.22;
  margin: 52px 0 16px;
}

.prose h2:first-child { margin-top: 0; }

.prose p {
  font-size: .95rem;
  color: var(--text-mid);
  line-height: 1.85;
  margin-bottom: 18px;
}

.prose ul {
  margin: 8px 0 18px 20px;
}

.prose ul li {
  font-size: .95rem;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 8px;
}

/* ─── TWO-COL LAYOUT ──────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.two-col-img {
  overflow: hidden;
}

.two-col-img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* ─── FEATURE LIST ────────────────────────────────── */
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tan);
  flex-shrink: 0;
  margin-top: 7px;
}

.feature-item-body h4 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.feature-item-body p {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* ─── STEPS ───────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 52px;
}

.step {
  background: var(--cream);
  padding: 44px 40px;
}

.step-num {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tan);
  margin-bottom: 16px;
}

.step h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--navy);
  letter-spacing: -.015em;
  margin-bottom: 10px;
}

.step p {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.72;
}

/* ─── FAQ ─────────────────────────────────────────── */
.faq-list {
  margin-top: 52px;
  border-top: 1px solid var(--border);
}

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

.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Figtree', sans-serif;
  font-size: .975rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  line-height: 1.4;
}
.faq-btn:hover { color: var(--text-mid); }

.faq-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--tan);
  flex-shrink: 0;
  transition: transform .22s;
  line-height: 1;
  font-weight: 300;
}
.faq-icon.open { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-answer.open { max-height: 500px; }

.faq-answer-text {
  padding-bottom: 26px;
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.78;
  max-width: 760px;
}

/* ─── CTA BAND ────────────────────────────────────── */
.cta-band {
  background: var(--navy);
  padding: 108px 36px;
  text-align: center;
}

.cta-band h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  color: var(--white);
  letter-spacing: -.025em;
  max-width: 660px;
  margin: 0 auto 18px;
  line-height: 1.1;
}

.cta-band h2 em { font-style: italic; }

.cta-band-body {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,.5);
  max-width: 520px;
  margin: 0 auto 48px;
  line-height: 1.78;
}

.cta-band-note {
  margin-top: 18px;
  font-size: .78rem;
  color: rgba(255,255,255,.28);
  letter-spacing: .025em;
}

/* ─── FOOTER ──────────────────────────────────────── */
footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 60px 36px 36px;
}

.footer-inner { max-width: 1160px; margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: 28px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 1180px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.footer-logo img {
  height: 32px;
  width: auto;
  margin-bottom: 16px;
  display: block;
}

.footer-desc {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.72;
  max-width: 300px;
  margin-bottom: 20px;
}

.footer-contact {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 2;
}

.footer-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}

.footer-link:hover {
  color: var(--tan-light);
  text-decoration: underline;
}

/* When a footer-col hosts multiple sections, every h4 after the first
   gets visual separation. Replaces the inline style="margin-top:24px"
   we used to ship on the Real Estate + 한국어 sub-headings. */
.footer-col h4 + ul + h4 { margin-top: 28px; }
.footer-col h4 + ul ~ h4 { margin-top: 28px; }

.footer-col h4 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-mid);
  margin-bottom: 18px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }

.footer-col a {
  font-size: .85rem;
  color: var(--text-muted);
  transition: color .15s;
}
.footer-col a:hover { color: var(--navy); }

.footer-legal {
  padding-top: 32px;
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.85;
}

.footer-license {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Phase 16e — verified-reviews social-proof link in shared footer. */
.footer-reviews {
  margin: 4px 0 14px;
  font-size: .82rem;
  font-weight: 600;
}
.footer-reviews a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-reviews a:hover { opacity: .8; }

.license-badge {
  font-weight: 700;
  color: var(--text-mid);
  font-size: .78rem;
}

/* ─── SOCIAL ICONS (footer) ───────────────────────── */
.footer-social {
  display: flex;
  gap: 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--off-white);
  color: var(--navy);
  text-decoration: none;
  flex-shrink: 0;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}

.social-icon-link svg { width: 17px; height: 17px; }

.social-icon-link:hover {
  color: var(--white);
  border-color: var(--navy);
  background: var(--navy);
  transform: translateY(-1px);
}

/* ─── REVIEW BADGE (near agent profiles) ─────────── */
.agent-review-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tan);
  text-decoration: none;
  letter-spacing: .01em;
  transition: color .15s;
}

.agent-review-link:hover { color: var(--navy); }

/* ─── YOUTUBE EMBED (shared) ──────────────────────── */
.yt-embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 36px;
  background: var(--navy);
}

.yt-embed-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

.yt-channel-link {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 14px;
  text-align: center;
}

.yt-channel-link a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.yt-channel-link a:hover { text-decoration: underline; }

/* ─── CROSS-PLATFORM CALLOUT (loan ↔ RE) ─────────── */
.crosslink-band {
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 36px;
}

.crosslink-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.crosslink-copy { flex: 1; min-width: 260px; }

.crosslink-copy .eyebrow { margin-bottom: 8px; }

.crosslink-copy h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--navy);
  letter-spacing: -.016em;
  line-height: 1.22;
  margin-bottom: 10px;
}

.crosslink-copy p {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.72;
  max-width: 500px;
}

.crosslink-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ─── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .crosslink-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .section { padding: 64px 24px; }
  .cta-band { padding: 72px 24px; }
  .page-hero { padding: 64px 24px 56px; }
  .crosslink-band { padding: 36px 24px; }
}

@media (max-width: 480px) {
  .page-hero-actions { flex-direction: column; align-items: center; }
  .page-hero-actions .btn { width: 100%; max-width: 320px; }
}

/* ═══════════════════════════════════════════════════
   CONVERSION COMPONENTS — case studies, calculator
   promo, what-happens-next, related pages, CTA
   microcopy. Reusable across the funnel.
═══════════════════════════════════════════════════ */

/* "Real client outcomes" — anonymized case-study cards */
.case-studies { background: var(--cream); }
.case-studies .section-inner { max-width: 1160px; }
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
@media (max-width: 980px) { .case-grid { grid-template-columns: 1fr; } }

.case-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.case-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 14px;
}

.case-headline {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}

.case-body {
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.74;
  margin-bottom: 18px;
}

.case-stats {
  display: flex;
  gap: 18px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.case-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.4rem;
  color: var(--navy);
  display: block;
  line-height: 1;
}

.case-stat-label {
  font-size: .7rem;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

.case-disclaimer {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 28px;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* "Run the numbers" calculator promo — drives traffic to /heloc-payoff-calculator */
.calc-promo {
  background: var(--navy);
  color: var(--white);
  padding: 56px 36px;
}
.calc-promo-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 820px) { .calc-promo-inner { grid-template-columns: 1fr; gap: 24px; } }

.calc-promo-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan-light);
  margin-bottom: 14px;
}
.calc-promo h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.018em;
  margin-bottom: 16px;
}
.calc-promo h2 em { font-style: italic; color: var(--tan-light); }
.calc-promo p {
  font-size: .98rem;
  color: rgba(255,255,255,.78);
  line-height: 1.76;
  margin-bottom: 24px;
}
.calc-promo .btn-cta { background: var(--white); color: var(--navy); }
.calc-promo .btn-cta:hover { background: var(--cream); }

.calc-promo-stats {
  background: rgba(255,255,255,.07);
  border-left: 3px solid var(--tan);
  padding: 22px 26px;
}
.calc-promo-stat { margin-bottom: 16px; }
.calc-promo-stat:last-child { margin-bottom: 0; }
.calc-promo-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--white);
  display: block;
}
.calc-promo-stat-label {
  font-size: .78rem;
  color: rgba(255,255,255,.62);
  margin-top: 6px;
  display: block;
}

/* "What happens next" — 3-step preamble above CTAs */
.next-steps {
  background: var(--off-white);
  padding: 56px 36px;
  border-top: 1px solid var(--border);
}
.next-steps-inner { max-width: 1080px; margin: 0 auto; }
.next-steps .eyebrow { text-align: center; }
.next-steps-title {
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--navy);
  margin-bottom: 40px;
}
.next-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .next-steps-grid { grid-template-columns: 1fr; } }
.next-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.next-step-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.6rem;
  color: var(--tan);
  line-height: 1;
  flex-shrink: 0;
  width: 32px;
}
.next-step h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.next-step p {
  font-size: .88rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* Risk-reversal microcopy under CTAs */
.cta-microcopy {
  margin-top: 12px;
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
}
.cta-microcopy strong { color: var(--text-mid); font-weight: 600; }
.cta-band .cta-microcopy { color: rgba(255,255,255,.65); }
.cta-band .cta-microcopy strong { color: rgba(255,255,255,.85); }

/* Related-pages block at the bottom of funnel pages */
.related {
  background: var(--off-white);
  padding: 56px 36px 72px;
  border-top: 1px solid var(--border);
}
.related-inner { max-width: 1080px; margin: 0 auto; }
.related .eyebrow { text-align: center; }
.related-title {
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--navy);
  margin-bottom: 36px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 820px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 24px 24px 22px;
  transition: border-color .15s, transform .15s;
}
.related-card:hover { border-color: var(--navy); transform: translateY(-1px); }
.related-card-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 8px;
}
.related-card h4 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--navy);
  line-height: 1.22;
  margin-bottom: 8px;
}
.related-card p {
  font-size: .85rem;
  color: var(--text-mid);
  line-height: 1.6;
}

/* ────────────────────────────────────────────────────────────────────
 * Post-calc result CTA — appears right under the calculator output
 * on every calculator page. The visitor just got a number; this is
 * their highest-intent moment. Visually a navy banded card with one
 * clear Schedule Call button + risk-reversal microcopy.
 * ─────────────────────────────────────────────────────────────────── */
.calc-result-cta {
  background: var(--cream);
  padding: 40px 24px 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.calc-result-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  background: var(--navy);
  color: #fff;
  padding: 36px 36px 32px;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 8px 28px rgba(27, 38, 59, .12);
}
.calc-result-cta-eyebrow {
  font-family: 'Figtree', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .7rem;
  font-weight: 700;
  color: var(--tan-light);
  margin-bottom: 12px;
}
.calc-result-cta h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.22;
  margin-bottom: 14px;
}
.calc-result-cta h2 em { font-style: italic; color: var(--tan-light); }
.calc-result-cta p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .78);
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto 22px;
}
.calc-result-cta .btn-cta {
  background: #fff;
  color: var(--navy);
  padding: 14px 32px;
  font-size: .95rem;
  font-weight: 700;
}
.calc-result-cta .btn-cta:hover { background: var(--cream); }
.calc-result-cta .cta-microcopy {
  margin-top: 14px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .65);
}
.calc-result-cta .cta-microcopy strong { color: rgba(255, 255, 255, .85); font-weight: 600; }
/* Phase 16a — softer secondary CTA below the main "Schedule Call" button.
   Opens Quick Connect modal so visitors who aren't ready to commit to
   a 30-min call can still capture their numbers + leave an email. */
.calc-cta-secondary {
  display: block;
  margin: 14px auto 0;
  padding: 8px 14px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  border: none;
  font-family: 'Figtree', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color .15s;
}
.calc-cta-secondary:hover { color: #fff; }

/* Mobile — 36px padding on the inner navy card was squishing the
   content on iPhone widths and forcing the buttons to wrap into ugly
   shapes. Tighter padding gives the headline + CTA room to breathe. */
@media (max-width: 720px) {
  .calc-result-cta { padding: 28px 16px 36px; }
  .calc-result-cta-inner { padding: 28px 22px 24px; }
  .calc-result-cta h2 { font-size: clamp(1.2rem, 4.4vw, 1.45rem); line-height: 1.28; }
  .calc-result-cta p { font-size: .88rem; }
  .calc-result-cta .btn-cta { padding: 12px 22px; font-size: .9rem; }
}

/* ────────────────────────────────────────────────────────────────────
 * Quick Connect — chat-bubble launcher + modal overlay.
 *
 * Two visual components:
 *   .qc-launcher : a floating button in the bottom-right corner.
 *                  Always visible on every non-contact page.
 *   .qc-modal    : a fixed-position dialog that opens when the
 *                  launcher is clicked. Hosts the 4-field intake.
 * ─────────────────────────────────────────────────────────────────── */

/* Floating launcher — chat-bubble icon + label.
   Sits above the sticky-cta on mobile (z-index higher) so it stays
   accessible even when the bottom CTA bar is showing. */
.qc-launcher {
  position: fixed;
  /* iPhone home-indicator safe area — without env() the launcher sits
     underneath the bottom bar on notched iPhones. The 0px fallback
     keeps non-notch viewports unchanged. */
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  /* Phase 18b — start invisible. JS adds .is-armed when the visitor
     scrolls to the .text-us-hint paragraph (contact funnels) OR
     immediately on every other page. */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s, transform .25s, box-shadow .15s;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(27, 38, 59, .28), 0 2px 6px rgba(27, 38, 59, .18);
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.qc-launcher.is-armed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.qc-launcher.is-armed:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(27, 38, 59, .32), 0 2px 6px rgba(27, 38, 59, .2);
}
.qc-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(27, 38, 59, .32), 0 2px 6px rgba(27, 38, 59, .2);
}
.qc-launcher-bubble {
  font-size: 1.15rem;
  line-height: 1;
}
@media (max-width: 820px) {
  /* On mobile move slightly higher to clear the sticky-cta bar. Also
     respect the iPhone home-indicator safe area so the launcher never
     hides underneath it. */
  /* Phase 30.9 — align the launcher with the brand badge AND the
     sticky step-nav button row. See .tcc-mobile-brand-badge for the
     22px rationale. Was 80px; the gap above the buttons made the
     launcher feel like floating chrome instead of a paired control. */
  .qc-launcher { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); right: 16px; padding: 12px 18px 12px 14px; font-size: .88rem; }
}

/* Phase 45 — suppress pre-capture chrome (.qc-launcher floating button
   + .text-us-hint paragraph below the form) when a post-submit panel is
   active.

   Pre-submit, the launcher + hint are legitimate (Phase 9b / 18b) — a
   capture surface for visitors who don't want to fill the long form.
   Post-submit, they're noise. The success / cooldown panels each carry
   their own primary CTA (sms: deeplink to the carrier-whitelist
   number); pointing the visitor BACK to the Quick Connect bubble
   undermines that CTA and risks them submitting twice or missing the
   carrier-whitelist signal entirely.

   Founder Lens connection (Phase 43): the lived-experience layer was
   wrong while the test layer was green. Codified as Phase 45 test
   contract so the next time someone adds a fourth post-submit panel
   and forgets to register it here, the suite snaps.

   Panel registry:
     #step-cooldown          — real-estate-contact.html cooldown welcome-back
     #step-success-referral  — real-estate-contact.html non-CA success
     #step-success           — contact.html HELOC post-submit

   Uses :has() — universally supported in 2026. If a panel is added,
   register it here. */
body:has(#step-cooldown.active) .qc-launcher,
body:has(#step-success-referral.active) .qc-launcher,
body:has(#step-success.active) .qc-launcher,
body:has(#step-cooldown.active) .text-us-hint,
body:has(#step-success-referral.active) .text-us-hint,
body:has(#step-success.active) .text-us-hint {
  display: none !important;
}

/* ───────────────────────────────────────────────────────────────────
 * Phase 60b — mobile/desktop split for the contact-page text-us hint.
 *
 * Problem (owner observation, 2026-05-25): at 375px on contact pages,
 * the floating .qc-launcher (bottom-right, z:95, navy) visually
 * competes with the form's sticky .step-nav Continue button — both
 * sit in the thumb zone, both are navy, both read as "the next
 * action."
 *
 * Solution:
 *   1. At ≤720px on contact pages (body.tcc-minimal-chrome), hide the
 *      floating .qc-launcher entirely. The thumb-zone collision goes
 *      away.
 *   2. Replace the "tap the bubble in the corner" hint paragraph
 *      with an inline `Tap here to open the text form →` link that
 *      fires window.quickConnect.open() — same modal, same CRM
 *      capture path, just promoted to first-class on mobile.
 *
 * Desktop is unaffected — sms: deeplinks don't work there, no
 * thumb-zone conflict, the floating bubble + the "tap the bubble"
 * paragraph stay as-is.
 *
 * Markup contract: contact.html + real-estate-contact.html each
 * render TWO .text-us-hint paragraphs — one with --mobile modifier,
 * one with --desktop modifier. The CSS below shows ONE of them
 * per viewport.
 * ───────────────────────────────────────────────────────────────── */
.text-us-hint--mobile { display: none; }
.text-us-hint--desktop { display: block; }
.text-us-hint__link {
  display: inline-block;
  margin-top: 4px;
  color: var(--navy, #142841);
  font-weight: 600;
  text-decoration: underline;
}
.text-us-hint__link:hover { opacity: 0.85; }

@media (max-width: 720px) {
  .text-us-hint--mobile { display: block; }
  .text-us-hint--desktop { display: none; }
  /* Hide the floating Text Us bubble ONLY on contact pages
     (tcc-minimal-chrome scopes it correctly — landing pages still
     get the bubble at mobile, where it's their only persistent
     capture surface). */
  body.tcc-minimal-chrome .qc-launcher { display: none !important; }
}

/* Modal overlay + card */
.qc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.qc-modal[hidden] { display: none; }
.qc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 38, 59, .58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: qc-fade-in .15s ease-out;
}
.qc-modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  border-radius: 8px;
  padding: 32px 32px 28px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .32);
  animation: qc-slide-up .2s ease-out;
}
@keyframes qc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes qc-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qc-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.qc-modal-close:hover { background: rgba(0,0,0,.05); color: var(--navy); }

/* Lock body scroll while modal is open */
body.qc-modal-locked { overflow: hidden; }

@media (max-width: 540px) {
  .qc-modal { padding: 12px; align-items: flex-end; }
  .qc-modal-card { max-width: none; border-radius: 12px 12px 0 0; padding: 24px 20px 20px; }
}

/* The inner content shares typography with the old inline widget,
   but now scoped inside .qc-modal-card. The .quick-connect-* rules
   below still apply — the form/inputs structure is identical. */
.qc-modal-card .quick-connect-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.quick-connect-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(154, 140, 115, .14);
  font-size: 1.4rem;
  line-height: 1;
}
.quick-connect-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: var(--navy);
  line-height: 1.22;
  margin-bottom: 6px;
}
.quick-connect-title em { font-style: italic; color: var(--tan); }
.quick-connect-sub {
  font-size: .88rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.quick-connect-form { display: flex; flex-direction: column; gap: 12px; }
/* Phase 34.B — CSS specificity fix. The browser's user-agent
   `[hidden] { display: none }` rule has the same specificity as
   our `.quick-connect-form { display: flex }` above, but ours wins
   by source order — which means `form.hidden = true` in JS does
   nothing for this element. Result: after submit, the form stayed
   visible alongside the success state. Higher-specificity override
   below fixes it. Same defensive guard on .qc-success in case any
   future rule adds an explicit `display:` there. */
.quick-connect-form[hidden],
.qc-success[hidden] { display: none !important; }
.qc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qc-row.qc-row-stack { grid-template-columns: 1fr; }
@media (max-width: 540px) {
  .qc-row { grid-template-columns: 1fr; }
}
.qc-row input {
  width: 100%;
  padding: 12px 14px;
  font-size: .95rem;
  font-family: 'Figtree', sans-serif;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--off-white);
  color: var(--text);
}
.qc-row input:focus { outline: none; border-color: var(--navy); }
/* Phase 30.4 — Cloudflare Turnstile widget inside the Quick Connect
   modal. The widget renders itself; we just give it room to breathe
   above the submit button. In Managed mode the widget is usually a
   short spinner row that collapses on success — no fixed height. */
#qc-turnstile {
  margin-top: 6px;
  min-height: 60px;
}
.qc-submit {
  margin-top: 4px;
  padding: 14px 24px;
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.qc-submit:hover { opacity: .9; transform: translateY(-1px); }
.qc-fineprint {
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 14px;
}
.qc-success {
  text-align: center;
  padding: 20px 0;
}
.qc-success h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.qc-success p {
  font-size: .88rem;
  color: var(--text-mid);
  line-height: 1.65;
}
.qc-success a { color: var(--navy); text-decoration: underline; font-weight: 600; }

/* Phase 34.1c — desktop QR fallback in the Quick Connect success state.
   The sms: deeplink in the success paragraph above doesn't work on
   most desktop browsers. For desktop visitors who just submitted,
   the QR is how they actually complete the carrier-whitelist signal
   that the nurture sequence depends on. Hidden on touch devices. */
.qc-success-qr {
  display: none;
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  .qc-success-qr { display: block; }
}
.qc-success-qr-eyebrow {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 4px 0 !important;
}
.qc-success-qr-sub {
  font-size: 13px !important;
  line-height: 1.5;
  color: var(--text-mid);
  margin: 0 0 12px 0 !important;
}
.qc-success-qr img {
  width: 132px;
  height: 132px;
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--white);
  padding: 4px;
}
.qc-success-qr-fallback {
  font-size: 13px !important;
  color: var(--text-mid);
  margin: 12px 0 0 0 !important;
}
.qc-success-qr-fallback strong { color: var(--navy); }

/* Phase 34.B — small fineprint-style retry link visible to both
   mobile (where it's the genuine retry path if Messages didn't open)
   and desktop (where it sits below the QR as a tertiary fallback). */
.qc-success-mobile-retry {
  font-size: .82rem !important;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 16px !important;
}
.qc-success-mobile-retry a {
  color: var(--navy);
  text-decoration: underline;
  font-weight: 600;
}

/* Phase 34.2b — "Prefer to talk?" callout inside the Quick Connect
   modal form (below the submit button). For the visitor who would
   otherwise just close the modal and call us anyway — gives them
   the dial number explicitly without breaking the SMS-first
   strategy (SMS is still the primary path; this is the explicit
   secondary). */
.qc-call-fallback {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
  text-align: center;
}
.qc-call-fallback strong { color: var(--navy); }
.qc-call-fallback a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid var(--tan);
}

/* ────────────────────────────────────────────────────────────────────
 * Calc-band — homepage 3-up grid of the three calculators. Equal
 * visual weight at the funnel entry point so visitors can self-route
 * to the right tool for their question (buy / refi / debt).
 * ─────────────────────────────────────────────────────────────────── */
.calc-band {
  background: var(--navy);
  color: #fff;
  padding: 72px 36px 80px;
}
.calc-band-inner { max-width: 1180px; margin: 0 auto; }
.calc-band-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.calc-band-eyebrow {
  font-family: 'Figtree', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--tan);
  margin-bottom: 16px;
}
.calc-band-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.calc-band-title em { font-style: italic; color: var(--tan); }
.calc-band-lede {
  color: rgba(255, 255, 255, .72);
  font-size: 1.02rem;
  line-height: 1.65;
}
.calc-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.calc-band-grid.four-up { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  .calc-band-grid.four-up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .calc-band-grid,
  .calc-band-grid.four-up { grid-template-columns: 1fr; }
}
.calc-band-card {
  display: block;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 28px 26px 24px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s, transform .15s;
}
.calc-band-card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--tan);
  transform: translateY(-1px);
}
.calc-band-card-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 12px;
}
.calc-band-card h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: #fff;
  line-height: 1.18;
  margin-bottom: 10px;
}
.calc-band-card p {
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.6;
  margin-bottom: 18px;
}
.calc-band-card-cta {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tan);
}

/* ────────────────────────────────────────────────────────────────────
 * Sticky mobile CTA — appears only on viewports ≤820px. Floats at the
 * bottom of every page that loads /components.js. Two buttons: primary
 * "Schedule Call" (utm_content=sticky-cta) and secondary calculator
 * link. Hidden by default to keep the desktop unobstructed.
 * ─────────────────────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(27, 38, 59, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
}
.sticky-cta a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 14px;
  font-weight: 600;
  font-size: .9rem;
  border-radius: 3px;
  letter-spacing: .01em;
  text-decoration: none;
  transition: opacity .15s, background .15s, color .15s;
}
.sticky-cta .sticky-cta-primary {
  background: var(--tan);
  color: #fff;
}
.sticky-cta .sticky-cta-primary:hover { opacity: .92; }
.sticky-cta .sticky-cta-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}
.sticky-cta .sticky-cta-secondary:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .55);
}
@media (max-width: 820px) {
  .sticky-cta { display: flex; }
  /* Pad page bottom so the floating bar never covers footer content */
  body { padding-bottom: 72px; }
}

/* ───────────────────────────────────────────────────────────────────
 * Phase 59b — reassurance band (near-CTA validity strip).
 *
 * A compact pill row that sits NEAR a primary CTA on conversion pages
 * to answer the unconscious "are these guys real?" question before
 * the visitor clicks. Three signal types, ordered by what cold Google
 * traffic actually weighs:
 *
 *   - state coverage  ("Licensed in California + 40 states")
 *   - umbrella entity ("Backed by West Capital Lending — $175M+ funded")
 *   - public licensure (NMLS / DRE numbers, equal-housing badge)
 *
 * Render-time per page — NOT auto-injected from components.js.
 * The RE funnel gets a Jason-only / CA-only variant because Jason
 * is the sole RE-licensed LO (FOUNDER-PRIORITIES #1 — Peter never
 * appears on RE surfaces).
 *
 * Visual: subtle cream/border container with badge pills. Tight on
 * mobile (stacks), wider on desktop (wraps to 2 rows max). Designed
 * to NOT compete with the CTA — it's reassurance, not decoration.
 * ───────────────────────────────────────────────────────────────── */
.tcc-reassurance-band {
  max-width: 760px;
  margin: 16px auto 0;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: center;
  background: var(--cream, #f7f3ec);
  border: 1px solid var(--border, #e6e0d2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-mid, #4d4a44);
  line-height: 1.4;
}
.tcc-reassurance-band__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tcc-reassurance-band__item strong {
  color: var(--navy, #142841);
  font-weight: 700;
}
.tcc-reassurance-band__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tan, #b89858);
  display: inline-block;
  opacity: 0.6;
}
.tcc-reassurance-band__disclaimer {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--ink-mid, #4d4a44);
  opacity: 0.78;
  margin-top: 2px;
}
@media (max-width: 540px) {
  .tcc-reassurance-band {
    padding: 10px 12px;
    font-size: 11.5px;
    gap: 6px 10px;
  }
  .tcc-reassurance-band__item {
    white-space: normal;
  }
}

/* ───────────────────────────────────────────────────────────────────
 * Phase 59c — strategist block (face + name + license near the CTA).
 *
 * Adds a small "your strategist" card so cold traffic sees a real
 * person + verifiable NMLS before they commit to a call. Render-time
 * per page — never auto-injected. The RE variant is hard-locked to
 * Jason; the mortgage variant uses [data-strategist="jason|peter"]
 * for opt-in.
 *
 * Visual: photo (52px circle), name + role + NMLS as small text, all
 * on a calm off-white card with a thin tan accent bar.
 * ───────────────────────────────────────────────────────────────── */
.tcc-strategist-block {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e6e0d2);
  border-left: 3px solid var(--tan, #b89858);
  border-radius: 4px;
  text-align: left;
}
.tcc-strategist-block__photo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream, #f7f3ec);
  display: block;
}
.tcc-strategist-block__body {
  flex: 1 1 auto;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-mid, #4d4a44);
}
.tcc-strategist-block__name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--navy, #142841);
  margin: 0 0 2px 0;
  line-height: 1.25;
}
.tcc-strategist-block__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tan, #b89858);
  margin: 0 0 4px 0;
}
.tcc-strategist-block__credentials {
  font-size: 12px;
  color: var(--ink-mid, #4d4a44);
  margin: 0;
  opacity: 0.85;
}
.tcc-strategist-block__credentials strong {
  color: var(--navy, #142841);
  font-weight: 700;
}
/* ── --with-quote modifier — vertical-rhythm tweaks for the longer
   voice variant on contact + RE-contact. Pull quote uses serif italic
   to match the team-card pattern on index.html; pitch para sits in the
   sans body color so it reads as Jason's narration rather than a
   designed flourish. Routing line is the smallest, most muted text —
   it's the "fine print" of the state-routing behavior. */
.tcc-strategist-block__quote {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--navy, #142841);
  line-height: 1.45;
  margin: 6px 0 8px 0;
  padding: 0;
  border: 0;
}
.tcc-strategist-block__pitch {
  font-size: 13.5px;
  color: var(--ink-mid, #4d4a44);
  line-height: 1.5;
  margin: 4px 0 8px 0;
}
.tcc-strategist-block__pitch strong {
  color: var(--navy, #142841);
  font-weight: 700;
}
.tcc-strategist-block__routing {
  font-size: 11.5px;
  color: var(--ink-mid, #4d4a44);
  opacity: 0.72;
  margin: 6px 0 0 0;
  line-height: 1.45;
}
/* ───────────────────────────────────────────────────────────────────
 * Phase 59d — anti-bot microline (contact-page-only trust signal).
 *
 * Replaces the full strategist + reassurance blocks on contact.html +
 * real-estate-contact.html. Owner-correct insight (2026-05-25):
 * conversion pages = REMOVE FRICTION, not SELL. A visitor who reached
 * /contact has already decided to engage; adding bio/quote/photo blocks
 * reintroduces cognitive load right when they should be tabbing through
 * the form. The microline keeps the ONLY job that still made sense on
 * the contact page: defusing the "is this a bot?" nurture-campaign
 * objection by naming a real human up-front.
 *
 * Selling work (full strategist block + reassurance band) lives on the
 * landing/funnel pages now (Phase 59e+).
 * ───────────────────────────────────────────────────────────────── */
.tcc-contact-microline {
  max-width: 720px;
  margin: 12px auto 0;
  padding: 0 24px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mid, #4d4a44);
  text-align: center;
  opacity: 0.92;
}
.tcc-contact-microline strong {
  color: var(--navy, #142841);
  font-weight: 700;
}
.tcc-contact-microline a {
  color: inherit;
  text-decoration: underline;
}
@media (max-width: 540px) {
  .tcc-contact-microline {
    font-size: 11.5px;
    padding: 0 16px;
  }
}

.tcc-strategist-block--with-quote {
  align-items: flex-start;
  padding: 18px 22px;
}
.tcc-strategist-block--with-quote .tcc-strategist-block__photo {
  width: 64px;
  height: 64px;
  margin-top: 2px;
}
@media (max-width: 540px) {
  .tcc-strategist-block {
    padding: 14px 16px;
    gap: 12px;
  }
  .tcc-strategist-block__photo {
    width: 48px;
    height: 48px;
  }
  .tcc-strategist-block--with-quote {
    padding: 16px 16px;
  }
  .tcc-strategist-block--with-quote .tcc-strategist-block__photo {
    width: 52px;
    height: 52px;
  }
  .tcc-strategist-block__quote {
    font-size: 14px;
  }
  .tcc-strategist-block__pitch {
    font-size: 13px;
  }
}