/* ============================================
   Erik Bridges, Real Broker — Design System
   Theme: Forest Green + White
   ============================================ */

:root {
  --green-950: #0b241c;
  --green-900: #0d2b21;
  --green-800: #14382c;
  --green-700: #1f4d3d;
  --green-600: #2b654f;
  --green-500: #3c7d63;
  --sage: #7ba38c;
  --sage-light: #a9c9b8;
  --green-100: #e8f2ec;
  --green-50: #f4faf7;
  --white: #ffffff;
  --cream: #faf8f3;
  --text: #1b241f;
  --text-muted: #5b6b64;
  --border: #dfe9e3;

  --font-head: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body: "Jost", -apple-system, Segoe UI, sans-serif;
  /* Signature wordmark only (nav + footer "Erik Bridges"). Not for text. */
  --font-sign: "Allura", "Segoe Script", cursive;

  --container: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 20px 50px -20px rgba(13, 43, 33, 0.25);
  --shadow-sm: 0 8px 24px -12px rgba(13, 43, 33, 0.2);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
}

/* NOTE: CSS scroll-snap was removed here deliberately. Nearly every
   section on this site drives a scroll-scrubbed animation (the parallax
   background shapes, the per-step line/fade on the buyers page, the
   floating money symbols). Snapping repositions the scroll while those
   are mid-scrub, which read as the page yanking itself back up. The two
   features fundamentally conflict, so the animations win.
   scroll-margin-top is kept so in-page anchor links still clear the
   fixed header. */
.hero,
.page-hero,
.section,
.site-footer {
  scroll-margin-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--green-900);
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 600;
  /* Cinzel is an inscriptional-capitals-style serif — it's drawn with
     generous natural spacing, so tightening tracking (as we did for
     Fraunces) makes it look cramped. Open it up slightly instead. */
  letter-spacing: 0.015em;
}

h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

p { margin: 0 0 1em; color: var(--text-muted); }

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

.container {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 14px;
}

/* Per-letter flip-in. main.js splits the text into .flip-letter spans;
   the perspective here is what makes the rotateX read as a 3D flip
   rather than a flat vertical squash. Text stays visible if JS never
   runs — the letters are only hidden once the split has happened. */
[data-letter-flip] {
  perspective: 600px;
}
.flip-letter {
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.section {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 120px) 0;
}
.section--tint { background: var(--green-50); }
.section--dark { background: var(--green-900); color: var(--green-50); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: var(--sage-light); }

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green-700);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--green-900); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--green-800);
  border-color: var(--green-700);
}
.btn-outline:hover { background: var(--green-700); color: var(--white); transform: translateY(-2px); }

.btn-light {
  background: var(--white);
  color: var(--green-800);
}
.btn-light:hover { background: var(--green-100); transform: translateY(-2px); }

.btn-block { width: 100%; justify-content: center; }

/* ---------- Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 26px 0;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-family: var(--font-sign);
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
  /* Script ascenders sit high; nudge down so the name centres on the nav links. */
  padding-top: 0.08em;
  transition: color 0.3s ease;
}
/* Key-in-a-circle badge between the names, in the sage accent */
.brand-key {
  display: inline-block;
  width: 0.66em;
  height: 0.66em;
  /* Optically equal gaps: Allura's "k" tail overhangs its advance by ~0.14em,
     so the left margin compensates. */
  margin: 0 0.16em 0 0.315em;
  color: var(--sage-light);
  /* Sit low, with the ring's bottom just under the baseline. */
  vertical-align: -0.12em;
}

/* Header wordmark: full and slightly larger at the top of the page; once the
   header is scrolled (main.js adds .is-scrolled) it shrinks to normal size and
   abbreviates to "E·B", with the key badge dropping to a period on the baseline.
   "rik" / "ridges" collapse via max-width; main.js sets --rest-w to each span's
   natural width (in em) so the collapse runs at an even speed. */
.brand-rest { display: inline-block; }
.site-header .brand {
  font-size: 2.8rem;
  transition: font-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.site-header .brand-rest {
  overflow: clip;
  overflow-clip-margin: 0.4em; /* keep script swashes and descenders unclipped */
  max-width: var(--rest-w, 6em);
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.site-header .brand-key {
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.5s cubic-bezier(0.22, 1, 0.36, 1), vertical-align 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-scrolled .brand { font-size: 2.3rem; }
.site-header.is-scrolled .brand-rest { max-width: 0; opacity: 0; }
.site-header.is-scrolled .brand-key {
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.1em 0 0.08em;
  vertical-align: 0;
}
/* Hovering (or keyboard-focusing) the "E·B" monogram reveals the full name again,
   at the scrolled size. Hover only where a real pointer exists, so a tap on a
   phone just follows the link instead of sticking open. */
@media (hover: hover) {
  .site-header.is-scrolled .brand:hover .brand-rest { max-width: var(--rest-w, 6em); opacity: 1; }
  .site-header.is-scrolled .brand:hover .brand-key {
    width: 0.66em;
    height: 0.66em;
    margin: 0 0.16em 0 0.315em;
    vertical-align: -0.12em;
  }
}
.site-header.is-scrolled .brand:focus-visible .brand-rest { max-width: var(--rest-w, 6em); opacity: 1; }
.site-header.is-scrolled .brand:focus-visible .brand-key {
  width: 0.66em;
  height: 0.66em;
  margin: 0 0.16em 0 0.315em;
  vertical-align: -0.12em;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand,
  .site-header .brand-rest,
  .site-header .brand-key { transition: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  border-radius: 100px;
  transition: color 0.3s ease, background 0.3s ease;
  position: relative;
}
.nav-links a:hover { background: rgba(255,255,255,0.12); }
.nav-links a { white-space: nowrap; }
/* Narrow desktops: keep six links plus the wordmark on one line. */
@media (min-width: 1001px) and (max-width: 1140px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding: 10px 12px; font-size: 0.9rem; }
}
.nav-links a.active { color: var(--white); font-weight: 600; }
.nav-links .nav-cta {
  background: var(--white);
  color: var(--green-800) !important;
  font-weight: 600;
  margin-left: 8px;
}
.nav-links .nav-cta:hover { background: var(--sage-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
}

/* Scrolled state (JS adds .is-scrolled) + non-hero pages (.site-header.solid) */
.site-header.is-scrolled,
.site-header.solid {
  background: rgba(13, 43, 33, 0.96);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.4);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--green-950) 0%, var(--green-800) 55%, var(--green-600) 130%);
  color: var(--white);
  overflow: hidden;
  padding-top: 110px;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.08), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(255,255,255,0.06), transparent 40%);
  pointer-events: none;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
  background: radial-gradient(circle at 30% 30%, rgba(169,201,184,0.5), rgba(169,201,184,0) 70%);
}
.hero-blob--1 { width: 520px; height: 520px; top: -120px; right: -140px; }
.hero-blob--2 { width: 360px; height: 360px; bottom: -100px; left: -120px; }

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: 22px;
}
.hero-eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: var(--sage-light);
}
.hero h1 { color: var(--white); }
.hero-lede {
  font-size: 1.15rem;
  color: var(--sage-light);
  max-width: 480px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 46px; }

.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-stat .num {
  font-family: var(--font-head);
  font-size: 2.1rem;
  color: var(--white);
  display: block;
}
.hero-stat .label {
  font-size: 0.8rem;
  color: var(--sage-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-portrait {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 380px;
}
.hero-portrait .frame {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.15);
}

/* Decorative motion beside the portrait — desktop only, see media query below */
.portrait-accent {
  display: none;
  position: absolute;
  top: 8%;
  right: -78px;
  width: 230px;
  height: 230px;
  z-index: 0;
  background: linear-gradient(135deg, var(--sage) 0%, var(--green-500) 55%, var(--green-800) 100%);
  opacity: 0.55;
  filter: blur(1px);
  pointer-events: none;
  animation: portraitBlobMorph 11s ease-in-out infinite, portraitBlobFloat 8s ease-in-out infinite;
}
.portrait-ring {
  display: none;
  position: absolute;
  bottom: -34px;
  right: -34px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px dashed var(--sage-light);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  animation: portraitRingSpin 26s linear infinite;
}
.portrait-ring::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--sage-light);
}

@keyframes portraitBlobMorph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
  33%      { border-radius: 62% 38% 30% 70% / 55% 65% 35% 45%; }
  66%      { border-radius: 35% 65% 55% 45% / 65% 35% 65% 35%; }
}
@keyframes portraitBlobFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-12px, 14px); }
}
@keyframes portraitRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Only show the portrait motion where the layout gives it room to breathe
   (hero-portrait sits beside the copy above the 980px stack breakpoint). */
@media (min-width: 981px) {
  .portrait-accent, .portrait-ring { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-accent, .portrait-ring { animation: none; }
}

.hero-portrait img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.hero-portrait .badge {
  position: absolute;
  z-index: 2;
  bottom: -18px; left: -18px;
  background: var(--white);
  color: var(--green-900);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.hero-portrait .badge strong { display: block; font-family: var(--font-head); font-size: 1rem; }
.hero-portrait .badge span { font-size: 0.78rem; color: var(--text-muted); }

/* Experience bubble: bottom-right, opposite the name badge. Its centre
   matches .portrait-ring's (130px box at -34px), so on desktop the dashed
   ring orbits it. */
.exp-bubble {
  position: absolute;
  z-index: 2;
  bottom: -25px; right: -25px;
  width: 112px;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--sage);
  background: var(--green-800);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.exp-num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--white);
}
.exp-label {
  color: var(--sage-light);
  font-size: 0.58rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scroll-cue {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--sage-light);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--sage-light), transparent); }

/* ---------- Page header (non-home pages) ---------- */
.page-hero {
  padding: 190px 0 90px;
  background: linear-gradient(160deg, var(--green-950), var(--green-700));
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; max-width: 760px; }
.page-hero h1 { color: var(--white); }
.page-hero p { color: var(--sage-light); font-size: 1.1rem; max-width: 560px; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); border-color: transparent; }
.card .icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--green-100);
  color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.card .icon svg { width: 24px; height: 24px; }
.card a.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--green-700); font-weight: 600; font-size: 0.92rem;
  margin-top: 8px;
}
.card a.card-link .arrow { transition: transform 0.25s ease; }
.card:hover a.card-link .arrow { transform: translateX(4px); }

/* ---------- Process steps ---------- */
.steps-wrap {
  position: relative;
  /* Extra room at the bottom for the line to descend to the big key
     reveal after looping past the last step, and a little at the top so
     the first loop's radius doesn't get clipped by the section's
     overflow:hidden. */
  padding-top: 20px;
  padding-bottom: 160px;
}
.steps-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* Above .steps (z-index 1 below) so the line renders in front of the
     numbers instead of being hidden behind them. */
  z-index: 2;
}
.steps-path path {
  fill: none;
  stroke: var(--green-600);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.steps-key {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  /* left is set in main.js — it has to line up with the path's spineX,
     which depends on the loop radius, so it's computed, not fixed. */
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.steps-key svg { width: 50px; height: 50px; }
.steps-key-caption {
  position: absolute;
  z-index: 3;
  max-width: 250px;
  pointer-events: none;
}
.steps-key-caption strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: 4px;
}
.steps-key-caption span {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}
@media (max-width: 760px) {
  .steps-wrap { padding-top: 12px; }
  .steps-path { width: 56px; }
  .steps-key { width: 76px; height: 76px; }
  .steps-key svg { width: 36px; height: 36px; }
  .steps-key-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .steps-path path { stroke-dashoffset: 0 !important; }
  .steps-key { opacity: 1 !important; transform: scale(1) !important; }
  .steps-key-caption { opacity: 1 !important; transform: translate(0, -50%) !important; }
}

.steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
}
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: none; }
.step .step-num {
  font-family: var(--font-head);
  font-size: 2.6rem;
  color: var(--sage);
  line-height: 1;
  text-align: center;
  /* Without this, the number stretches to the full grid-row height (to
     match the taller heading+paragraph column) and sits at the top of
     that tall invisible box — throwing off any calculation of its
     vertical center, like the loop path in main.js. */
  align-self: start;
}
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; max-width: 560px; }


/* ---------- Scroll-driven background shapes ----------
   Soft blurred circles placed before .container in the markup so they
   paint behind it (see .container's position:relative). main.js scrubs
   their transform to scroll progress through the parent section, so the
   background keeps shifting continuously as the page scrolls, rather
   than a one-time reveal. Transform/opacity only — no layout cost. */
.bg-drift {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;
}
.bg-drift--sage   { background: radial-gradient(circle, var(--sage) 0%, transparent 72%); opacity: 0.4; }
.bg-drift--green  { background: radial-gradient(circle, var(--green-500) 0%, transparent 72%); opacity: 0.32; }
.bg-drift--light  { background: radial-gradient(circle, rgba(244,250,247,0.9) 0%, transparent 72%); opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .bg-drift { display: none; }
}
/* ---------- Guide download ---------- */
.guide-panel {
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
  border-radius: 24px;
  padding: clamp(36px, 5vw, 64px);
  color: var(--white);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.guide-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,0.12), transparent 50%);
  pointer-events: none;
}
.guide-panel h2 { color: var(--white); }
.guide-panel p { color: var(--sage-light); }
.guide-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.guide-form small { color: var(--sage-light); font-size: 0.76rem; }
.guide-form small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-field .consent-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; font-weight: 400; line-height: 1.5; color: var(--text-muted); cursor: pointer; }
.form-field .consent-check input { flex: none; width: 18px; height: 18px; padding: 0; margin: 2px 0 0; accent-color: var(--green-700); }

/* ---------- My Promise ---------- */
.promise-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.promise {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.promise-num {
  display: block;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--sage);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.promise h3 { font-size: 1.15rem; margin-bottom: 10px; }
a.promise { transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
a.promise:hover { border-color: var(--sage); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.promise p { margin: 0; }

/* ---------- About / split ---------- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.split-media {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* height:auto is required, not optional: the img carries width/height
   attributes (for CLS), and those act as presentation hints. Without an
   explicit height here the attribute's 1200px would win and aspect-ratio
   would be ignored, stretching the frame to 1200px tall. */
.split-media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }

/* Decorative money symbols drifting upward in the About section's
   top-right corner. Rather than squeezing into the narrow gutter beside
   the centered .container (which vanishes on smaller screens), this sits
   in the open band ABOVE the copy — the right column is vertically
   centered against the much taller portrait, so there is real empty space
   there. Its height is capped in JS to whatever that band actually
   measures, so it never reaches down into the text. */
.money-float {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: min(340px, 42%);
  height: 200px;
  pointer-events: none;
  overflow: hidden;
}
.money-float span {
  position: absolute;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--sage);
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
}
/* Once the layout stacks there is no clear band left, so drop them. */
@media (max-width: 980px) {
  .money-float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .money-float { display: none; }
}

/* ---------- Forms (Book Appointment) ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(28px, 4vw, 48px);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-900);
}
.form-field label .req { color: #b3543f; }
.form-field label .opt { color: var(--text-muted); font-weight: 400; }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--green-50);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green-600);
  background: var(--white);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field .error-msg {
  display: none;
  font-size: 0.78rem;
  color: #b3543f;
}
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea {
  border-color: #b3543f;
}
.form-field.invalid .error-msg { display: block; }

.radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.radio-pill {
  position: relative;
}
.radio-pill input { position: absolute; opacity: 0; }
.radio-pill span {
  display: inline-flex;
  padding: 11px 20px;
  border-radius: 100px;
  border: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--green-50);
}
.radio-pill input:checked + span {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--white);
}

.appt-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.appt-success .icon-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
/* Entrance is CSS rather than a GSAP tween — it was the only thing on
   book-appointment.html that needed the library. */
.appt-success.is-visible {
  display: block;
  animation: apptSuccessIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes apptSuccessIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .appt-success.is-visible { animation: none; }
}
.form-card.is-hidden { display: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-950);
  color: var(--sage-light);
  padding: 70px 0 30px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand { color: var(--white); }
.footer-top p { color: var(--sage-light); max-width: 280px; }
.footer-col h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--sage-light); font-size: 0.92rem; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--white); }
.footer-logo img { height: 34px; width: auto; margin-bottom: 14px; }
/* Brokerage disclosure: Georgia advertising rules want the firm's name and phone shown. */
.footer-broker { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: var(--sage-light); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.footer-bottom a:hover { color: var(--white); }
.eho { display: inline-flex; align-items: center; gap: 8px; }
/* Equal Housing mark links to fair-housing.html: no leading margin, underline only on hover. */
.footer-bottom a.eho { margin-left: 0; text-decoration: none; }
.footer-bottom a.eho:hover { text-decoration: underline; }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.35rem; margin: 44px 0 14px; }
.legal p, .legal li { color: var(--text-muted); line-height: 1.75; }
.legal ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.legal a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { font-size: 0.85rem; letter-spacing: 0.04em; }

/* ---------- Utility ---------- */
/* Scroll reveals are plain CSS transitions toggled by an
   IntersectionObserver in main.js (see "Scroll reveals"). They used to be
   GSAP tweens with a ScrollTrigger each; moving them to the compositor
   cut a large chunk of main-thread work, and it means they no longer
   depend on GSAP being loaded at all. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}
/* The stagger itself — delay each child a little more than the last. */
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 0.12s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 0.24s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 0.36s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 0.48s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 0.6s; }
[data-stagger].is-in > *:nth-child(n+7) { transition-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.center-cta { text-align: center; margin-top: 48px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-portrait { max-width: 300px; }
  .split { grid-template-columns: 1fr; }
  .split-media { order: -1; max-width: 420px; }
  .grid-3, .promise-track { grid-template-columns: repeat(2, 1fr); }
  .guide-panel { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* The menu collapses to the drawer earlier than the rest of the layout: six links
   plus the signature wordmark no longer fit on one line below ~1000px. */
@media (max-width: 1000px) {
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 78%;
    max-width: 320px;
    background: var(--green-950);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 40px;
    gap: 6px;
    transform: translateX(100%);
    transition: transform 0.4s ease;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a { width: 100%; padding: 14px 18px; }
  .nav-toggle { display: flex; }
}

@media (max-width: 760px) {
  .brand { font-size: 2rem; }
  .site-header .brand { font-size: 2.4rem; }
  .site-header.is-scrolled .brand { font-size: 2rem; }
  .grid-3, .grid-2, .promise-track { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .step { grid-template-columns: 56px 1fr; }
  .step .step-num { font-size: 1.8rem; }
}

/* ============================================================
   Ported from ../first-time-buyer-guide-landing (compiled from its
   src/tailwind.css to plain CSS, class names unchanged): the lead
   form's error alert, the phone step cards, the post-guide
   qualifier, and the affordability calculator. Keep these in step
   with the landing page so both sites look and behave the same.
   ============================================================ */

/* Form-level alert (server rejected the submission, or the network
     request itself failed) — distinct from the per-field .error-msg
     pattern above, which is only for client-side field validation. */

.form-alert {
  margin-bottom: 1.25rem;
  border-radius: 8px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  background: #fbeae5;
  border: 1px solid #e2b6a8;
  color: #8a3c2b;
}

/* ---------- Post-guide qualifier ----------
     Sits as its own .form-card sibling right after #guideSuccess (see
     index.html), shown/hidden the same way (.is-visible, matching
     .appt-success) at the same moment the success panel appears. Its own
     three internal states (prompt / step-through / done) are plain
     [hidden] toggles driven by js/main.js — no animation library, same
     philosophy as the rest of the page. See README.md's "Qualifier
     delivery architecture" section for the js/main.js and Cloudflare
     Function pieces this markup is wired to. */

.qualifier {
  /* Bug found 2026-09-08: this card was missing the hidden-by-default
       half of the .is-visible pattern that #guideSuccess (.appt-success)
       already has, so it rendered open on every page load, before the
       guide form was ever submitted, instead of only appearing once
       js/main.js's qualifierOpen() adds .is-visible right after a
       successful submission. Fixed by mirroring .appt-success exactly:
       hidden here, shown (with the same entrance animation) only when
       .is-visible is present. */
  display: none;
  text-align: center;
}

.qualifier.is-visible {
  display: block;
}


.qualifier.is-visible {
  animation: apptSuccessIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .qualifier.is-visible {
    animation: none;
  }
}

.qualifier-prompt-title {
  margin-bottom: 0.5rem;
}

.qualifier-prompt-text {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  max-width: 440px;
  font-size: 0.92rem;
  --tw-text-opacity: 1;
  color: rgb(91 107 100 / var(--tw-text-opacity, 1));
}

.qualifier-prompt-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.qualifier-skip {
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  font-size: 0.85rem;
  --tw-text-opacity: 1;
  color: rgb(91 107 100 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: #dfe9e3;
  text-underline-offset: 4px;
}

.qualifier-skip:hover {
  --tw-text-opacity: 1;
  color: rgb(27 36 31 / var(--tw-text-opacity, 1));
}

/* Step-through state */

.qualifier-run {
  text-align: left;
}

.qualifier-progress {
  margin-bottom: 0.75rem;
  height: 0.25rem;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(223 233 227 / var(--tw-bg-opacity, 1));
}

/* Fill is full width and scaled with transform (compositor-friendly),
     clipped to a rounded track by .qualifier-progress's overflow. */

.qualifier-progress-fill {
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(43 101 79 / var(--tw-bg-opacity, 1));
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qualifier-step-label {
  margin-bottom: 1.5rem;
  font-family: Jost, -apple-system, Segoe UI, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(91 107 100 / var(--tw-text-opacity, 1));
}

.qualifier-step-prompt {
  margin-bottom: 0.25rem;
  font-family: Cinzel, Georgia, Times New Roman, serif;
  font-size: 1.35rem;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(13 43 33 / var(--tw-text-opacity, 1));
}

.qualifier-step-sub {
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  --tw-text-opacity: 1;
  color: rgb(91 107 100 / var(--tw-text-opacity, 1));
}

.option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option-btn {
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(223 233 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-family: Jost, -apple-system, Segoe UI, sans-serif;
  font-size: 0.9rem;
  --tw-text-opacity: 1;
  color: rgb(27 36 31 / var(--tw-text-opacity, 1));
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.option-btn:hover {
  --tw-border-opacity: 1;
  border-color: rgb(60 125 99 / var(--tw-border-opacity, 1));
}

.option-btn[aria-pressed="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(31 77 61 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(31 77 61 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.qualifier-note {
  margin-top: 1.25rem;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(223 233 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 250 247 / var(--tw-bg-opacity, 1));
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.qualifier-note p {
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  --tw-text-opacity: 1;
  color: rgb(27 36 31 / var(--tw-text-opacity, 1));
}

.qualifier-nav {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qualifier-back {
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  font-size: 0.85rem;
  --tw-text-opacity: 1;
  color: rgb(91 107 100 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: #dfe9e3;
  text-underline-offset: 4px;
}

.qualifier-back:hover {
  --tw-text-opacity: 1;
  color: rgb(27 36 31 / var(--tw-text-opacity, 1));
}

.qualifier-next {
  margin-left: auto;
}

/* Done state — same visual language as .appt-success */

.qualifier-done {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}

.qualifier-done .icon-circle {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  display: flex;
  height: 56px;
  width: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(232 242 236 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(31 77 61 / var(--tw-text-opacity, 1));
}

.qualifier-done p {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  max-width: 380px;
  font-size: 0.95rem;
}

/* ---------- Affordability calculator (js/main.js "Affordability calculator") ---------- */

.calc {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0px;
  overflow: hidden;
  border-radius: 14px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(223 233 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 8px 24px -12px rgba(13, 43, 33, 0.2);
  --tw-shadow-colored: 0 8px 24px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  grid-template-columns: 1.15fr 1fr;
}

.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(24px, 4vw, 44px);
}

.calc-field {
  margin: 0px;
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.5rem;
  border-width: 0px;
  padding: 0px;
}

.calc-field label,
  .calc-field legend {
  padding: 0px;
  font-size: 0.85rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(13 43 33 / var(--tw-text-opacity, 1));
}

.calc-field legend {
  margin-bottom: 0.5rem;
}

.calc-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.calc-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr 1fr;
}

/* Text inputs with a "$" prefix or "%" suffix inside the same box */

.calc-money,
  .calc-pct {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(223 233 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 250 247 / var(--tw-bg-opacity, 1));
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 14px;
  padding-right: 14px;
  --tw-text-opacity: 1;
  color: rgb(27 36 31 / var(--tw-text-opacity, 1));
  transition: border-color 0.2s ease, background 0.2s ease;
}

.calc-money:focus-within,
  .calc-pct:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(43 101 79 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.calc-money span,
  .calc-pct span {
  font-size: 0.95rem;
  --tw-text-opacity: 1;
  color: rgb(91 107 100 / var(--tw-text-opacity, 1));
}

.calc-money input,
  .calc-pct input {
  width: 100%;
  min-width: 0px;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-family: Jost, -apple-system, Segoe UI, sans-serif;
  font-size: 0.95rem;
  --tw-text-opacity: 1;
  color: rgb(27 36 31 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  line-height: normal;
}

.calc-label-row .calc-money,
  .calc-label-row .calc-pct {
  width: 150px;
  flex-shrink: 0;
}

.calc-label-row .calc-pct {
  width: 100px;
}

.calc-field input[type="range"] {
  width: 100%;
  cursor: pointer;
  accent-color: var(--green-700);
}

.calc-hint {
  margin: 0px;
  min-height: 1.2em;
  font-size: 0.8rem;
}

/* Loan type: radios styled as a segmented control; the real radio stays
     in the DOM (visually hidden) so keyboard and screen readers work. */

.calc-seg {
  display: grid;
  gap: 0.25rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(223 233 227 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 250 247 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
  grid-template-columns: repeat(3, 1fr);
}

.calc-seg label {
  position: relative;
  cursor: pointer;
}

.calc-seg input {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
}

.calc-seg span {
  display: block;
  border-radius: 9999px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(31 77 61 / var(--tw-text-opacity, 1));
  transition: background 0.2s ease, color 0.2s ease;
}

.calc-seg input:checked + span {
  --tw-bg-opacity: 1;
  background-color: rgb(31 77 61 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.calc-seg input:focus-visible + span {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.calc-results {
  display: flex;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(13 43 33 / var(--tw-bg-opacity, 1));
  padding: clamp(24px, 4vw, 44px);
  --tw-text-opacity: 1;
  color: rgb(244 250 247 / var(--tw-text-opacity, 1));
}

.calc-intro {
  margin: 0px;
  margin-bottom: -0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(43 101 79 / var(--tw-text-opacity, 1));
}

.calc-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* "Updates live" marker; the dot pulses (opacity only) unless reduced motion */

.calc-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.1);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  --tw-text-opacity: 1;
  color: rgb(244 250 247 / var(--tw-text-opacity, 1));
}

.calc-live i {
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: #7fd6a4;
  animation: calc-live-pulse 1.8s ease-in-out infinite;
}

@keyframes calc-live-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* The total flashes briefly each time it changes */

.calc-total.is-updated {
  animation: calc-total-flash 0.6s ease-out;
}

@keyframes calc-total-flash {
  0% {
    color: #7fd6a4;
  }

  100% {
    color: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-live i,
    .calc-total.is-updated {
    animation: none;
  }
}

.calc-sticky {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(13 43 33 / var(--tw-bg-opacity, 1));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.9rem;
  --tw-text-opacity: 1;
  color: rgb(244 250 247 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px) * 0.5);
}

.calc-sticky[hidden] {
  display: none;
}

.calc-sticky > span:first-child {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  white-space: nowrap;
}

.calc-sticky i {
  margin-right: 0.125rem;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  align-self: center;
  border-radius: 9999px;
  background: #7fd6a4;
  animation: calc-live-pulse 1.8s ease-in-out infinite;
}

.calc-sticky strong {
  font-family: Cinzel, Georgia, Times New Roman, serif;
  font-size: 1.15rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  font-variant-numeric: tabular-nums;
}

.calc-sticky small {
  font-size: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-sticky-link {
  white-space: nowrap;
  font-size: 0.8rem;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .calc-sticky i {
    animation: none;
  }
}

.calc-results-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-total {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  display: block;
  font-family: Cinzel, Georgia, Times New Roman, serif;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1.1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  font-variant-numeric: tabular-nums;
}

.calc-total small {
  font-family: Jost, -apple-system, Segoe UI, sans-serif;
  font-size: 0.4em;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-estimate-note {
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-disclaimer strong {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(13 43 33 / var(--tw-text-opacity, 1));
}

.calc-bar {
  margin-bottom: 1.25rem;
  display: flex;
  height: 0.75rem;
  overflow: hidden;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.1);
}

.calc-bar span {
  display: block;
  height: 100%;
}

.calc-bar-pi {
  background: var(--sage-light);
}

.calc-bar-mi {
  background: var(--sage);
}

.calc-bar-tax {
  background: var(--green-500);
}

.calc-bar-ins {
  background: var(--green-100);
}

.calc-bar-hoa {
  background: #c9b98f;
}

.calc-dot {
  margin-right: 0.625rem;
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
  vertical-align: 0.05em;
}

.calc-breakdown,
  .calc-extra {
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.calc-breakdown div,
  .calc-extra div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.calc-breakdown dt,
  .calc-extra dt {
  font-size: 0.9rem;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-breakdown dd,
  .calc-extra dd {
  margin: 0px;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  font-variant-numeric: tabular-nums;
}

.calc-breakdown div.is-zero {
  opacity: 0.5;
}

.calc-extra {
  margin-bottom: 1.75rem;
}

/* Cash to close: a <details> whose summary matches the rows below it and
     opens into the itemized closing costs */

.calc-cc {
  margin-top: 1.25rem;
  border-bottom-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
}

.calc-cc summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.calc-cc summary::-webkit-details-marker {
  display: none;
}

.calc-cc summary:focus-visible {
  outline: 2px solid var(--sage-light);
  outline-offset: 2px;
}

.calc-cc-label {
  font-size: 0.9rem;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-cc-label small {
  display: block;
  font-size: 0.76rem;
  --tw-text-opacity: 1;
  color: rgb(123 163 140 / var(--tw-text-opacity, 1));
  opacity: 0.9;
}

.calc-cc-toggle {
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.calc-cc[open] .calc-cc-toggle {
  text-decoration-line: none;
}

.calc-cc summary strong {
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  font-variant-numeric: tabular-nums;
}

.calc-cc-list {
  margin: 0px;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background-color: rgb(255 255 255 / 0.05);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.calc-cc-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 5px;
  padding-bottom: 5px;
}

.calc-cc-list div[hidden] {
  display: none;
}

.calc-cc-list dt {
  font-size: 0.82rem;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-cc-list dt small {
  display: block;
  font-size: 0.72rem;
  --tw-text-opacity: 1;
  color: rgb(123 163 140 / var(--tw-text-opacity, 1));
}

.calc-cc-list dd {
  margin: 0px;
  white-space: nowrap;
  font-size: 0.85rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  font-variant-numeric: tabular-nums;
}

.calc-cc-list .cc-sub {
  margin-top: 0.25rem;
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  padding-top: 0.5rem;
}

.calc-cc-list .cc-sub dt,
  .calc-cc-list .cc-sub dd {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.calc-cc-list .cc-credit dd {
  color: var(--sage-light);
}

.calc-cc-note {
  margin-top: 0px;
  margin-bottom: 0.75rem;
  font-size: 0.74rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(123 163 140 / var(--tw-text-opacity, 1));
}

.calc-extra dt small {
  display: block;
  font-size: 0.76rem;
  --tw-text-opacity: 1;
  color: rgb(123 163 140 / var(--tw-text-opacity, 1));
  opacity: 0.9;
}

/* Light button on the dark results panel (the standard green one
     disappears against green-900) */

.calc-results .btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(244 250 247 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(13 43 33 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.calc-results .btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* "Email me these numbers" (on the dark results panel) */

.calc-email {
  margin-bottom: 1rem;
}

.calc-email[hidden] {
  display: none;
}

.calc-email-toggle {
  display: inline-flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.3);
  background-color: transparent;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-family: Jost, -apple-system, Segoe UI, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition: background 0.2s ease, border-color 0.2s ease;
}

.calc-email-toggle:hover {
  border-color: rgb(255 255 255 / 0.5);
  background-color: rgb(255 255 255 / 0.1);
}

.calc-email-toggle:focus-visible {
  outline: 2px solid var(--sage-light);
  outline-offset: 2px;
}

.calc-email-toggle[aria-expanded="true"] {
  display: none;
}

.calc-email-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  padding: 1rem;
}

.calc-email-form[hidden] {
  display: none;
}

.calc-email-lede {
  margin: 0px;
  font-size: 0.85rem;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-email-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.calc-email-row label {
  font-size: 0.8rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(244 250 247 / var(--tw-text-opacity, 1));
}

.calc-email-row input {
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.2);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: Jost, -apple-system, Segoe UI, sans-serif;
  font-size: 0.95rem;
  --tw-text-opacity: 1;
  color: rgb(27 36 31 / var(--tw-text-opacity, 1));
  line-height: normal;
}

.calc-email-row input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(169 201 184 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(169, 201, 184, 0.45);
}

.calc-email-consent {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.78rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-email-consent input {
  flex-shrink: 0;
  margin: 3px 0 0;
  accent-color: var(--sage);
}

.calc-email-consent a {
  --tw-text-opacity: 1;
  color: rgb(244 250 247 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.calc-email-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.calc-email-turnstile {
  min-height: 65px;
  min-width: 0px;
}

.calc-email-status {
  margin: 0px;
  min-height: 1.2em;
  font-size: 0.82rem;
  --tw-text-opacity: 1;
  color: rgb(169 201 184 / var(--tw-text-opacity, 1));
}

.calc-email-status.is-error {
  color: #f2b8a8;
}

.calc-email-form .btn-primary:disabled {
  opacity: 0.6;
}

.calc-email-done {
  margin: 0px;
  border-radius: 8px;
  background-color: rgb(255 255 255 / 0.1);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.9rem;
  --tw-text-opacity: 1;
  color: rgb(244 250 247 / var(--tw-text-opacity, 1));
}

.calc-disclaimer {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.25rem;
  margin-bottom: 0px;
  max-width: 880px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
}

.btn-ghost {
  background: transparent;
  color: var(--green-700);
  border-color: var(--line, #d7e3db);
}

.btn-ghost:hover {
  background: var(--green-50);
}

.step-progress {
  margin-bottom: 22px;
}

.step-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
}

.step-progress-label span:last-child {
  color: var(--text-muted);
  font-weight: 600;
}

.step-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--green-100);
  overflow: hidden;
}

.step-progress-bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0.3333);
  transform-origin: left center;
  background: var(--green-700);
  transition: transform 0.35s ease;
}

.step-nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.step-nav .btn {
  flex: 1;
  justify-content: center;
}

.step-nav[hidden],
.step-nav .btn[hidden] {
  display: none;
}

/* Step 1 has only Continue; last step has only Back (under the submit button) */

.form-card.is-stepped:not(.is-last-step) .form-submit {
  display: none;
}

.form-card.is-stepped .form-grid > [data-step]:not(.is-active-step) {
  display: none;
}

/* Keep Turnstile mounted (and solving in the background) while off-step. */

.form-card.is-stepped .form-grid > .turnstile-field:not(.is-active-step) {
  display: flex;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Card-style slide: Continue brings the next card in from the right, Back from the left. */

.form-card.is-stepped .form-grid.step-dir-next {
  animation: stepInNext 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-card.is-stepped .form-grid.step-dir-back {
  animation: stepInBack 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .form-card.is-stepped .form-grid.step-dir-next,
  .form-card.is-stepped .form-grid.step-dir-back {
    animation: none;
  }

  .step-progress-bar span {
    transition: none;
  }
}

@keyframes stepInNext {
  from {
    opacity: 0;
    transform: translateX(44px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stepInBack {
  from {
    opacity: 0;
    transform: translateX(-44px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Honeypot fields: off-screen for real visitors, still in the form for bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* Calculator breakpoints (same as the landing page) */
@media (max-width: 980px) {
  .calc { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .calc-row { grid-template-columns: 1fr; }
  .calc-label-row .calc-money { width: 130px; }
  /* The long CTA label must wrap on phones instead of overflowing */
  .calc-results .btn { white-space: normal; text-align: center; }
}
@media (max-width: 380px) {
  /* Pinned calculator bar: just the arrow on the narrowest phones */
  .calc-sticky-more { display: none; }
}