/* =============================================================================
   CashNowREI - page section blocks
   Design & development: Sohrab Khan - msoohrab.com

   Everything here is a SECTION, not a page. Blocks are named for what they do
   (hero, steps, compare, situations, founder, faq, final-cta) so the same
   block can be dropped onto Sell Your Home / About / FAQ / Contact without
   being rewritten. Tokens and components live in style.css.
   ============================================================================= */

/* =============================================================================
   HERO
   The only job of this screen is to get an address into the form. Everything
   above the fold is either the promise, the proof, or the field itself.
   ============================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(48px, 6vw, 82px);
  padding-bottom: clamp(110px, 12vw, 170px);   /* room for the lifted stat bar */
  background:
    radial-gradient(1100px 620px at 76% -18%, rgba(235,180,25,.20), transparent 60%),
    radial-gradient(800px 560px at -6% 106%, rgba(91,141,239,.16), transparent 62%),
    linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  color: #D9D9EA;
}

/* --- Hero photograph ------------------------------------------------------
   The photo is a real <img> inside a <picture>, not a CSS background-image.
   That buys three things a background cannot: fetchpriority="high" so it is
   requested with the stylesheet rather than after it, art direction (the phone
   gets a 3:4 crop framed on the house instead of a squeezed letterbox), and
   width/height so it reserves its space and never shifts the layout.

   The gradient in .hero underneath stays as the fallback ground: if the image
   is slow, blocked, or missing, the hero is still a finished navy panel rather
   than a white hole with text on it. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Framed low: the sky is the least interesting part of the plate and the
     text sits over the upper half. */
  object-position: 50% 64%;
  /* Pulls the photo toward the brand navy so it reads as part of the palette
     rather than as a stock photo dropped behind the type. Brightness stays at
     1 - the veil above does the darkening, and doing it twice turned the house
     into an unreadable smudge. */
  filter: saturate(.86) contrast(1.06);
}

/* The veil is what makes white text legible over a photograph. It is two
   gradients: one across, holding the left column dark where the headline sits,
   and one down, sealing the top under the header and the bottom into the navy
   the stat bar lifts out of. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(8,8,30,.94)  0%,
      rgba(11,11,36,.86) 28%,
      rgba(20,20,60,.58) 52%,
      rgba(23,23,71,.34) 100%),
    linear-gradient(180deg,
      rgba(8,8,30,.62) 0%,
      rgba(8,8,30,.06) 24%,
      rgba(8,8,30,.18) 58%,
      rgba(8,8,30,.90) 100%),
    radial-gradient(760px 460px at 78% 8%, rgba(235,180,25,.18), transparent 62%);
}

/* Desktop: promise and proof stack in the left column, the form holds the
   right one across both rows. Mobile reorders to promise -> form -> proof
   in the responsive block at the foot of this file. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  column-gap: clamp(34px, 5vw, 66px);
  row-gap: 28px;
  align-items: center;
  /* Row 2 absorbs the slack. The form spans both rows and is much the taller
     column, so with two auto rows the leftover height was split between them
     and opened a dead gap under the headline. */
  grid-template-rows: auto 1fr;
}
.hero-copy  { grid-column: 1; grid-row: 1; align-self: end; }
.hero-proof { grid-column: 1; grid-row: 2; align-self: start; }
.hero-form  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Everything the visitor reads sits above the photo and the veil. */
.hero > .container { position: relative; z-index: 2; }

/* --- Left column ---------------------------------------------------------- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-400);
  background: rgba(235,180,25,.1);
  border: 1px solid rgba(235,180,25,.3);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 22px;
}
.hero-badge svg { color: var(--gold-500); flex: none; }

.hero h1 { color: var(--white); margin-bottom: 20px; }
.hero h1 .gold { color: var(--gold-500); }

.hero-lede {
  font-size: clamp(1.03rem, 1.5vw, 1.18rem);
  line-height: 1.72;
  /* Measured at 4.73:1 over the brightest part of the photograph behind it -
     passing, but with no room to spare once the crop shifts at another
     viewport width. Lightened for headroom. */
  color: #C9C9E0;
  max-width: 46ch;
  margin-bottom: 26px;
}

.hero .chips { margin-bottom: 30px; }

/* Ticked promise list - the Sell Your Home variant of the hero's proof block.
   Set as a list rather than as pill chips because these lines are sentences,
   and sentences in pills wrap badly. */
.hero-list { list-style: none; display: grid; gap: 13px; }
.hero-list li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 12px;
  align-items: start;
  font-size: clamp(.95rem, 1.25vw, 1.02rem);
  line-height: 1.55;
  color: #DDDDEE;
}
.hero-list svg { color: var(--gold-500); margin-top: 4px; }

/* Founder line: a face and a name directly under the promise, because the
   single biggest objection on a cash-offer page is "who am I dealing with". */
.hero-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-person img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-500);
  flex: none;
}
.hero-person-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
}
.hero-person-role {
  display: block;
  font-size: .84rem;
  color: #9C9CBE;
  line-height: 1.5;
}

/* --- Right column: the offer form card ------------------------------------ */
.hero-form {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-form::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400) 45%, var(--gold-500));
}
.hero-form-inner { padding: clamp(26px, 3.2vw, 38px); }

.form-head { text-align: center; margin-bottom: 24px; }
.form-head h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  margin-bottom: 8px;
}
.form-head p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

.form-note--spaced { margin-top: 14px; }

/* "or call" divider under the submit button. */
.form-alt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 16px;
  color: var(--ink-faint);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.form-alt::before, .form-alt::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.form-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .04em;
  color: var(--navy-800);
  padding: 12px;
  border: 2px solid var(--navy-100);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.form-call:hover { color: var(--navy-800); border-color: var(--gold-500); background: var(--gold-100); }
.form-call svg { color: var(--gold-700); }

.form-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  font-size: .78rem;
  color: var(--ink-faint);
}
.form-secure svg { color: var(--ok); flex: none; }

/* =============================================================================
   STAT BAR
   Lifted up over the foot of the hero so the fold ends on a promise, not on a
   flat edge. The lift is dropped on small screens where it only causes
   crowding.
   ============================================================================= */
.stats-lift { margin-top: clamp(-130px, -9vw, -80px); position: relative; z-index: 5; }

.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.stat {
  padding: clamp(22px, 2.8vw, 32px) clamp(16px, 2vw, 26px);
  text-align: center;
  border-right: 1px solid var(--line-soft);
}
.stat:last-child { border-right: 0; }
.stat-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--navy-800);
  margin-bottom: 9px;
}
.stat-num em { font-style: normal; color: var(--gold-600); }
.stat-label {
  display: block;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* =============================================================================
   STEPS - how it works
   ============================================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  position: relative;
}

/* The dashed rail that joins the three step numbers on desktop. */
.steps::before {
  content: "";
  position: absolute;
  top: 62px; left: 14%; right: 14%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--navy-200) 50%, transparent 0);
  background-size: 11px 2px;
  background-repeat: repeat-x;
  z-index: 0;
}

/* Four-beat variant (Sell Your Home). Same card, tighter rail. */
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps--4::before { left: 11%; right: 11%; }
.steps--4 .step { padding: clamp(22px, 2.4vw, 28px); }
.steps--4 .step::after { font-size: 6rem; top: -12px; }

.step {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  border-color: var(--gold-200);
  box-shadow: var(--shadow-md);
}

/* Oversized ghost numeral in the corner - texture, not decoration for its
   own sake: it keeps the three cards readable as a sequence at a glance. */
.step::after {
  content: attr(data-step);
  position: absolute;
  top: -18px; right: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 7.5rem;
  line-height: 1;
  color: var(--navy-800);
  opacity: .045;
  pointer-events: none;
}

.step-num {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--navy-800);
  color: var(--gold-500);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .02em;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(23,23,71,.22);
}
.step:hover .step-num { background: var(--gold-500); color: var(--navy-900); }
.step h3 { margin-bottom: 12px; }
.step p { color: var(--ink-soft); font-size: .97rem; }

/* =============================================================================
   COMPARE TABLE
   ============================================================================= */
.compare-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(.92rem, 1.2vw, 1rem);
}
.compare th, .compare td {
  padding: clamp(16px, 2vw, 22px) clamp(14px, 2vw, 26px);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

.compare thead th {
  background: var(--navy-800);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(.82rem, 1.15vw, .95rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 0;
  white-space: nowrap;
}
.compare thead th:first-child { background: var(--navy-900); }

/* The "us" column is tinted the whole way down and capped with the gold head,
   so the eye lands on it first without any row needing extra weight. */
.compare thead .col-us { background: var(--gold-500); color: var(--navy-900); }
.compare .col-us { background: var(--gold-100); }
.compare td.col-us { font-weight: 600; color: var(--navy-800); }

.compare tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy-800);
  background: var(--navy-50);
  width: 25%;
}
.compare td.col-them { color: var(--ink-soft); }

.cmp-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.cmp-mark svg { flex: none; margin-top: 1px; }
.cmp-yes svg { color: var(--ok); }
.cmp-no  svg { color: var(--danger); opacity: .8; }

.compare-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: clamp(20px, 2.4vw, 26px) clamp(16px, 2vw, 26px);
  background: var(--navy-50);
  border-top: 1px solid var(--line);
}
.compare-foot p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* =============================================================================
   SITUATIONS
   ============================================================================= */
.situations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.situation h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin-bottom: 10px; }
.situation p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* On dark grounds the cards invert rather than staying white, so a dark
   section never turns into a wall of white boxes. */
.section--dark .card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.11);
  box-shadow: none;
}
.section--dark .card-hover:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(235,180,25,.4);
  box-shadow: 0 18px 40px rgba(8,8,30,.4);
}
.section--dark .icon-chip {
  background: rgba(235,180,25,.12);
  border-color: rgba(235,180,25,.28);
  color: var(--gold-500);
}
.section--dark .card-hover:hover .icon-chip { background: var(--gold-500); color: var(--navy-900); }
.section--dark .situation p { color: #AEAECB; }

/* =============================================================================
   FOUNDER
   ============================================================================= */
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
}

.founder-photo { position: relative; }
.founder-photo img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}
/* Offset gold frame behind the portrait. */
.founder-photo::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 3px solid var(--gold-500);
  border-radius: var(--radius-lg);
  z-index: 0;
}

/* Veteran-owned plaque sitting on the corner of the portrait. */
.founder-flag {
  position: absolute;
  left: -14px; bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius);
  padding: 13px 18px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.3;
}
.founder-flag svg { color: var(--gold-500); flex: none; }

.founder-copy p { color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.06rem); }
.section--dark .founder-copy p { color: #B6B6D0; }

.founder-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.section--dark .founder-sign { border-color: rgba(255,255,255,.14); }
.founder-sign-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.section--dark .founder-sign-name { color: var(--white); }
.founder-sign-role { display: block; font-size: .88rem; color: var(--ink-faint); }
.section--dark .founder-sign-role { color: #9C9CBE; }

.founder-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* =============================================================================
   FAQ (home teaser)
   ============================================================================= */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(30px, 4.5vw, 60px);
  align-items: start;
}
.faq-grid .sec-head { margin-bottom: 26px; }

.faq-aside-card {
  background: var(--navy-800);
  color: #C4C4DC;
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 28px);
  margin-top: 26px;
}
.faq-aside-card h4 { color: var(--white); margin-bottom: 10px; letter-spacing: .1em; }
.faq-aside-card p { font-size: .92rem; margin-bottom: 16px; }

.faq-more { margin: 22px 0 0; }
.legal-toc a { min-height: 24px; }

/* =============================================================================
   FINAL CTA
   ============================================================================= */
.final-cta { text-align: center; overflow: hidden; }
.final-cta .sec-head { margin-inline: auto; margin-bottom: 30px; }

/* Address + button on one line at desktop, stacked on a phone. */
/* Two fields side by side, then consent, then the button on its own row.
   The button cannot share the field row: the consent paragraph has to sit
   directly above it to count as knowingly given, and a full-width row item
   pushes anything after it onto the next line regardless. */
.cta-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}
.cta-form .btn {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: min(320px, 100%);
}
.cta-form .input { min-height: 62px; font-size: 1.02rem; }
.cta-form .btn { min-height: 62px; white-space: nowrap; }
.cta-form .field { margin-bottom: 0; }
.cta-form .form-note,
.cta-form .form-status,
.cta-form .consent { grid-column: 1 / -1; }
.cta-form .form-note { color: #9C9CBE; text-align: center; }
.cta-form .consent {
  margin: 0;
  text-align: center;
  color: #8C8CAE;
}
.cta-form .consent a { color: #B6B6D0; }
.cta-form .consent a:hover { color: var(--gold-500); }

.cta-phone {
  margin-top: 26px;
  font-size: 1.02rem;
  color: #B6B6D0;
}
.cta-phone a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.24rem;
  letter-spacing: .04em;
  color: var(--gold-500);
}
.cta-phone a:hover { color: var(--gold-400); }

/* =============================================================================
   OFFER MATH - "How We Come Up With Your Number"
   The copy describes an arithmetic (start with the fixed-up value, subtract
   repairs, subtract a margin), so the layout states it as one. The operators
   are typographic only - they add no claim the copy does not already make.
   ============================================================================= */
.math-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 18px);
}

/* Drawn rather than typed. A "&minus;" glyph in Oswald is a thin, narrow dash
   that reads as a stray hyphen at this size; a bar inside a gold disc reads as
   an operator at a glance, which is the whole point of the section. */
.math-op {
  align-self: center;
  justify-self: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold-500);
  display: grid;
  place-items: center;
  flex: none;
}
.math-op::before {
  content: "";
  width: 15px; height: 3px;
  border-radius: 2px;
  background: var(--navy-900);
}

.math-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.8vw, 32px);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
/* A gold edge on the first card and progressively cooler ones after it, so the
   three read left-to-right as a sequence rather than as equal siblings. */
.math-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gold-500);
}
/* Two states, not three shades: gold is the number we start from, navy is
   what comes off it. --navy-200 on the third card was so faint it read as a
   missing accent rather than as the end of a sequence. */
.math-card:nth-of-type(2)::before,
.math-card:nth-of-type(3)::before { background: var(--navy-600); }

.math-step {
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.math-card h3 { margin-bottom: 12px; }
.math-card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

.math-note {
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--gold-100);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 26px);
}
.math-note svg { flex: none; color: var(--gold-700); margin-top: 3px; }
.math-note p { margin: 0; color: var(--navy-800); font-size: clamp(.97rem, 1.3vw, 1.04rem); }

/* =============================================================================
   TIMELINE - "What You Can Expect From Us"
   ============================================================================= */
.timeline {
  list-style: none;
  display: grid;
  gap: 0;
  position: relative;
  max-width: 860px;
}
.timeline li {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 26px) 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: relative;
}
.timeline li:last-child { border-bottom: 0; }

.tl-when {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-500);
  white-space: nowrap;
}
/* The dot and the rail that threads the four beats together. */
.tl-when::before {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 5px rgba(235,180,25,.18);
}
.timeline li::after {
  content: "";
  position: absolute;
  left: 6px; top: 50px; bottom: -6px;
  width: 1px;
  background: rgba(235,180,25,.35);
}
.timeline li:last-child::after { display: none; }

.tl-what { color: #BFBFD8; line-height: 1.72; }

/* =============================================================================
   TWO-WAY CTA - "Two Ways to Get Your Offer"
   ============================================================================= */
.two-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 20px);
  max-width: 720px;
  margin: 0 auto;
}
.way {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px) clamp(18px, 2.4vw, 26px);
  text-align: center;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
.way:hover { border-color: rgba(235,180,25,.45); background: rgba(255,255,255,.08); }
.way .icon-chip { margin-bottom: 2px; }
.way h3 { font-size: 1.1rem; }
.way p { color: #AEAECB; font-size: .93rem; margin: 0; }
.way .btn { width: 100%; margin-top: auto; }

/* =============================================================================
   MINI HERO - thank-you and 404
   Short pages with no supporting sections beneath them, so the block carries
   its own vertical weight rather than sitting as a stripe under the header.
   ============================================================================= */
.mini-hero { display: grid; align-items: center; min-height: 64vh; }

.mini-hero-mark {
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: rgba(235,180,25,.13);
  border: 2px solid var(--gold-500);
  color: var(--gold-500);
}

.mini-hero-code {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4.5rem, 13vw, 8.5rem);
  line-height: .9;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(235,180,25,.55);
  margin-bottom: 14px;
}

.next-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 8px auto 0;
  text-align: left;
}
.next-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: .96rem;
  line-height: 1.65;
}
.next-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--gold-500);
  color: var(--navy-900);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
}
.next-steps strong { color: var(--white); display: block; }

.notfound-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .94rem;
}
.notfound-links a { display: inline-block; padding-block: 4px; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1080px) {
  .hero { padding-bottom: clamp(100px, 14vw, 140px); }
  .hero-lede { max-width: 60ch; }

  /* One column: headline, then the form, then the reassurance. The form sits
     as high as it can without the seller having to read a field before they
     have been told what the page is for. */
  .hero-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .hero-copy  { grid-column: 1; grid-row: 1; }
  .hero-form  { grid-column: 1; grid-row: 2; max-width: 560px; }
  .hero-proof { grid-column: 1; grid-row: 3; }

  /* One column means the headline no longer sits in a dark left band, so the
     veil stops working sideways and works top-to-bottom instead. */
  .hero-veil {
    background:
      linear-gradient(180deg,
        rgba(8,8,30,.88) 0%,
        rgba(11,11,36,.74) 34%,
        rgba(8,8,30,.84) 68%,
        rgba(8,8,30,.96) 100%),
      radial-gradient(620px 380px at 70% 4%, rgba(235,180,25,.20), transparent 64%);
  }
  /* A hero this tall and this narrow crops the plate to a slim vertical strip,
     so the frame is pulled up to put the roofline and lit windows in the band
     that is actually visible above the form card. */
  .hero-bg img { object-position: 50% 46%; }

  .founder-grid { grid-template-columns: 1fr; gap: 44px; }
  .founder-photo { max-width: 420px; }
  .founder-photo::before { inset: 18px -18px -18px 18px; }

  .faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .faq-aside-card { margin-top: 0; }
}

@media (max-width: 1080px) {
  /* The four-step version of the process sits two-up before it stacks. */
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .steps--4::before { display: none; }
}

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .steps::before { display: none; }
  .step::after { font-size: 6rem; top: -10px; }
  .situations { grid-template-columns: repeat(2, 1fr); }

  /* The equation turns vertical, operators centred between the cards. */
  .math-grid { grid-template-columns: 1fr; }
  .math-op { justify-self: center; padding-block: 2px; }
}

@media (max-width: 620px) {
  .timeline li { grid-template-columns: 1fr; gap: 10px; }
  .timeline li::after { display: none; }
  .two-ways { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .stats-lift { margin-top: 0; }
  .hero { padding-bottom: clamp(44px, 8vw, 64px); }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }

  .situations { grid-template-columns: 1fr; }
  .cta-form { grid-template-columns: 1fr; }

  /* --- Comparison table becomes stacked cards ---------------------------- */
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr {
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
  }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th {
    width: auto;
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .82rem;
    border-bottom: 0;
    padding-bottom: 6px;
  }
  .compare td {
    border-bottom: 0;
    padding-block: 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  /* Each cell grows its own column header, since the real one is hidden. */
  .compare td::before {
    content: attr(data-label);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .compare td.col-us::before { color: var(--gold-700); }
  .compare td.col-us {
    border-left: 4px solid var(--gold-500);
    padding-left: 14px;
    margin-inline: clamp(14px, 2vw, 26px) 0;
    margin-bottom: 8px;
  }
  .compare td.col-them { padding-left: clamp(14px, 2vw, 26px); }

  .compare-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .compare-foot .btn { width: 100%; }
}

@media (max-width: 520px) {
  .founder-photo::before { inset: 14px -14px -14px 14px; }
  .founder-flag { left: 0; bottom: 14px; font-size: .74rem; padding: 11px 14px; }
  .founder-actions .btn { width: 100%; }
  .hero-person { gap: 12px; }
  .form-call { font-size: 1.14rem; }
}

/* A headline made of two sentences breaks between them, not wherever the line
   happens to run out. Used on Sell Your Home. */
.hero h1 .h1-line { display: block; }

/* =============================================================================
   PAGE HERO - the compact interior header
   Deliberately NOT the photo hero. Photo heroes mark the two pages whose job is
   to take a lead (Home, Sell Your Home); the information pages get this, so the
   visitor can feel the difference between "we want your address" and "here is
   what you asked for" without reading a word.
   ============================================================================= */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(38px, 5vw, 62px) clamp(44px, 6vw, 76px);
  background:
    radial-gradient(900px 460px at 84% -30%, rgba(235,180,25,.20), transparent 62%),
    radial-gradient(620px 420px at -4% 120%, rgba(91,141,239,.15), transparent 62%),
    linear-gradient(162deg, var(--navy-800) 0%, var(--navy-900) 60%, var(--navy-950) 100%);
  color: #C9C9E0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); margin-bottom: 18px; }
.page-hero h1 .gold { color: var(--gold-500); }
.page-hero .eyebrow { color: var(--gold-500); }

.page-hero-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.74;
  color: #C4C4DC;
  max-width: 62ch;
  text-wrap: pretty;
}
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* --- Breadcrumb ----------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  margin-bottom: 20px;
  font-size: .82rem;
  color: #8E8EB0;
}
.breadcrumb a { color: #B9B9D4; display: inline-block; padding-block: 2px; }
.breadcrumb a:hover { color: var(--gold-500); }
.breadcrumb li { display: flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before {
  content: "/";
  color: rgba(255,255,255,.26);
}
.breadcrumb [aria-current="page"] { color: var(--gold-500); font-weight: 500; }

/* A page-hero already supplies the top of the page, so the section that follows
   it does not need the full section rhythm above it as well. */
.page-hero + .section { padding-top: clamp(36px, 4.5vw, 62px); }

/* =============================================================================
   VALUES - "Three Things We Won't Compromise"
   ============================================================================= */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.value h3 { margin-bottom: 12px; }
.value p { color: var(--ink-soft); font-size: .97rem; margin: 0; }

/* =============================================================================
   TEAM
   One card today. The grid is centred rather than left-aligned so a single
   member reads as deliberate instead of as a row with two people missing.
   ============================================================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: clamp(18px, 2.4vw, 28px);
  justify-content: center;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-200);
  box-shadow: var(--shadow-md);
}
.team-photo { position: relative; aspect-ratio: 4 / 5; background: var(--navy-50); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.team-flag {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(8,8,30,.86);
  backdrop-filter: blur(4px);
  color: var(--white);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.team-flag svg { color: var(--gold-500); flex: none; }

.team-body { padding: clamp(18px, 2.2vw, 24px); text-align: center; }
.team-body h3 { font-size: 1.18rem; margin-bottom: 6px; }
.team-role {
  display: block;
  font-size: .86rem;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.team-links { display: flex; justify-content: center; gap: 10px; }
.team-links a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  color: var(--navy-800);
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.team-links a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }

/* =============================================================================
   FAQ PAGE
   ============================================================================= */
/* Sticky category rail. Jumps rather than filters: filtering would hide
   questions from the page, and a hidden answer is an answer no crawler and no
   answer engine can quote. */
.faq-nav {
  position: sticky;
  top: calc(var(--header-h) + 12px);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  justify-content: center;
}
.faq-nav a {
  flex: 0 1 auto;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-800);
  padding: 11px 16px;
  border-radius: 999px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.faq-nav a:hover { background: var(--navy-50); color: var(--navy-800); }
.faq-nav a.is-current { background: var(--navy-800); color: var(--white); }

.faq-group { margin-bottom: clamp(34px, 4.5vw, 56px); }
.faq-group:last-of-type { margin-bottom: 0; }
.faq-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
}
.faq-group-head h2 {
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  margin: 0;
}
.faq-group-head .icon-chip { margin: 0; width: 44px; height: 44px; border-radius: 12px; }
.faq-group-head .icon-chip svg { width: 20px; height: 20px; }
.faq-count {
  margin-left: auto;
  font-size: .8rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* The question is a real heading wrapping the button - the W3C disclosure
   pattern. It means the question text is in the document outline for search
   and answer engines, not buried in a control. */
.acc-heading { margin: 0; }
.acc-heading .acc-trigger {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--navy-800);
  text-wrap: pretty;
}

/* =============================================================================
   CONTACT PAGE
   ============================================================================= */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 22px);
  margin-bottom: clamp(34px, 4.5vw, 54px);
}
.method {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow-xs);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.method:hover {
  transform: translateY(-4px);
  border-color: var(--gold-200);
  box-shadow: var(--shadow-md);
}
.method .icon-chip { margin-bottom: 6px; }
.method h3 { font-size: 1.05rem; margin: 0; }
.method-value {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: .02em;
  color: var(--navy-800);
  word-break: break-word;
}
a.method-value:hover { color: var(--gold-700); }
.method p { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.method .btn { margin-top: auto; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}

.contact-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.contact-panel::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400) 45%, var(--gold-500));
}
.contact-panel-inner { padding: clamp(24px, 3vw, 36px); }

/* "What Happens Next" - an ordered promise, so it is an <ol>. */
.next-list {
  list-style: none;
  counter-reset: nxt;
  display: grid;
  gap: 14px;
}
.next-list li {
  counter-increment: nxt;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  line-height: 1.7;
  color: var(--ink-soft);
}
.next-list li::before {
  content: counter(nxt);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--navy-800);
  color: var(--gold-500);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
}
.next-list strong { color: var(--navy-800); }

.office-card {
  background: var(--navy-800);
  color: #C4C4DC;
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 28px);
  margin-top: clamp(20px, 2.6vw, 28px);
}
.office-card h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 14px; }
.office-card address {
  font-style: normal;
  line-height: 1.75;
  margin-bottom: 16px;
}
.office-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .84rem;
  line-height: 1.6;
  color: #A2A2C2;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.office-note svg { flex: none; color: var(--gold-500); margin-top: 3px; }

/* =============================================================================
   LEGAL PAGES
   ============================================================================= */
.legal-grid {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.legal-toc h2 {
  font-size: .82rem;
  letter-spacing: .18em;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 3px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: block;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  padding: 7px 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.legal-toc a:hover { background: var(--white); color: var(--navy-800); }
.legal-toc a.is-current {
  background: var(--white);
  border-left-color: var(--gold-500);
  color: var(--navy-800);
  font-weight: 600;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 14px 18px;
  margin-bottom: clamp(26px, 3vw, 36px);
  background: var(--gold-100);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--navy-800);
}
.legal-meta svg { flex: none; color: var(--gold-700); }

/* Long-form prose. Measure is capped at ~72ch because legal text is read in
   full or not at all, and a 1100px line is read not at all. */
.legal-body { max-width: 72ch; }
.legal-body section { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-body section + section { margin-top: clamp(30px, 4vw, 46px); }
.legal-body h2 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.legal-body h3 {
  font-size: 1rem;
  margin: 22px 0 10px;
  color: var(--navy-700);
}
.legal-body p { color: var(--ink-soft); line-height: 1.8; }
.legal-body ul { list-style: none; display: grid; gap: 9px; margin: 0 0 1.05em; }
.legal-body ul li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--ink-soft);
  line-height: 1.75;
}
.legal-body ul li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--gold-500);
}
.legal-body strong { color: var(--navy-800); }
.legal-body a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--gold-700); }

.legal-callout {
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-left: 4px solid var(--navy-800);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 20px 0;
}
.legal-callout p { margin: 0; color: var(--navy-800); }

.legal-contact {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.legal-contact address { font-style: normal; line-height: 1.8; color: var(--ink-soft); }
.legal-contact strong { display: block; color: var(--navy-800); margin-bottom: 4px; }

/* =============================================================================
   RESPONSIVE - new blocks
   ============================================================================= */
@media (max-width: 980px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc ol { grid-template-columns: repeat(2, 1fr); display: grid; }
  .legal-body { max-width: none; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .values { grid-template-columns: 1fr; }
  .contact-methods { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .legal-toc ol { grid-template-columns: 1fr; }
  .faq-nav {
    border-radius: var(--radius-lg);
    gap: 6px;
    padding: 8px;
  }
  .faq-nav a { flex: 1 1 44%; font-size: .76rem; padding: 10px 8px; }
  .faq-group-head { flex-wrap: wrap; gap: 10px; }
  .faq-count { margin-left: 0; width: 100%; }
  .page-hero-actions .btn { width: 100%; }
}

/* =============================================================================
   PAGE HERO - photographic variant
   The information pages get the Arizona landscape where the conversion pages
   get a house. It is the same veil technique as .hero, retuned for a band that
   is a third of the height: the vertical gradient does most of the work,
   because at this height there is no room for a left-to-right one to resolve.
   ============================================================================= */
.page-hero .container { z-index: 2; }

.page-hero .hero-bg img {
  object-position: 50% 52%;
  filter: saturate(.78) contrast(1.05);
}

.page-hero .hero-veil {
  background:
    linear-gradient(92deg,
      rgba(8,8,30,.93)  0%,
      rgba(11,11,36,.84) 34%,
      rgba(20,20,60,.62) 64%,
      rgba(23,23,71,.46) 100%),
    linear-gradient(180deg,
      rgba(8,8,30,.72) 0%,
      rgba(8,8,30,.34) 38%,
      rgba(8,8,30,.60) 78%,
      rgba(8,8,30,.92) 100%),
    radial-gradient(600px 300px at 82% 0%, rgba(235,180,25,.20), transparent 64%);
}

/* A hairline of brand gold where the hero meets the page. Small, but it is the
   thing that stops a photo band reading as a stock image pasted on top. */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg,
    var(--gold-500) 0%, var(--gold-400) 22%, rgba(235,180,25,.15) 60%, transparent 100%);
}

@media (max-width: 700px) {
  .page-hero .hero-bg img { object-position: 50% 46%; }
  .page-hero .hero-veil {
    background:
      linear-gradient(180deg,
        rgba(8,8,30,.84) 0%,
        rgba(11,11,36,.72) 34%,
        rgba(8,8,30,.82) 72%,
        rgba(8,8,30,.95) 100%),
      radial-gradient(480px 260px at 74% 2%, rgba(235,180,25,.20), transparent 64%);
  }
}

/* The stat band under a page-hero sits flush rather than lifting, because a
   page-hero has no deep padding under it to lift out of. */
.stats-lift--flat { margin-top: clamp(-34px, -3vw, -22px); }
.stats-lift--flat + .section { padding-top: clamp(34px, 4vw, 54px); }

@media (max-width: 760px) {
  .stats-lift--flat { margin-top: 0; }
}

/* When a stat band lifts over the foot of a page-hero it cuts the gold hairline
   in half, which reads as a rendering fault rather than as a detail. The band
   is the stronger edge, so the hairline stands down. */
.page-hero:has(+ .stats-lift)::after { display: none; }

/* =============================================================================
   SITUATION PAGES
   Foreclosure, inherited, tired landlord, divorce, as-is, relocating. One
   template, six sets of the client's copy. Everything here is additive - the
   pages otherwise reuse .hero, .steps, .situations, .accordion and .final-cta
   exactly as the rest of the site does.
   ========================================================================== */

/* The situation heroes carry no photograph, so they also don't need the deep
   bottom padding the home hero uses to clear its lifted stat bar. */
.hero--plain { padding-bottom: clamp(56px, 7vw, 92px); }

/* The home and Sell Your Home plates are framed low on purpose - their sky is
   the least interesting part. The situation plates put their subject in the
   middle of the frame instead, so framing them at 64% shows the lawn and hides
   the house. */
.hero--plain .hero-bg img { object-position: 50% 44%; }

/* The client's copy pairs most cards with a closing line that does real work -
   "You'll never hear: ..." on the stages, "Best if: ..." on the options. It is
   an aside to the card, not more body copy, so it reads as a rule off the
   left edge rather than another paragraph. */
.step-note,
.card-note {
  margin: 14px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--gold-500);
  font-size: .87rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.section--dark .step-note,
.section--dark .card-note { color: #9C9CBE; }

/* Four options with a paragraph each read better two-up than four-across;
   the min-width keeps the 760px stack below in charge on phones. */
@media (min-width: 761px) {
  .situations--pair { grid-template-columns: repeat(2, 1fr); }
}

/* Sits under the per-page FAQ and points at the full one. */
.faq-more {
  margin: 28px 0 0;
  text-align: center;
  font-size: .95rem;
  color: var(--ink-soft);
}
.faq-more a {
  color: var(--gold-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The foreclosure and probate pages close with a "we are not lawyers" note.
   Deliberately quiet - it is a disclaimer, not a sales line. */
.legal-note {
  max-width: 62ch;
  margin: 22px auto 0;
  font-size: .78rem;
  line-height: 1.66;
  text-align: center;
  color: #8C8CAE;
}
.legal-note a { color: #B6B6D0; text-decoration: underline; }

/* The homepage situation cards are now doorways into the six situation pages.
   The heading carries the link so the accessible name is the situation itself,
   and its ::after stretches over the card so the whole tile is the target. */
.situation { position: relative; }
.situation h3 a {
  color: inherit;
  text-decoration: none;
}
.situation h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card-hover:hover h3 a,
.situation h3 a:focus-visible { color: var(--gold-700); }
.section--dark .card-hover:hover h3 a { color: var(--gold-500); }
/* The stretched ::after swallows the outline, so the card shows the ring. */
.situation:focus-within { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.situation h3 a:focus-visible { outline: none; }

/* =============================================================================
   GROWTH PAGES
   areas-we-serve / how-we-calculate-your-offer / cash-offer-vs-agent.
   ========================================================================== */

/* --- Town lists ------------------------------------------------------------
   A plain list of place names. Wrapping columns rather than a fixed grid, so a
   short list doesn't leave a row of holes and a long one doesn't need a
   breakpoint of its own. */
.town-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.town-grid li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: .93rem;
  font-weight: 500;
  color: var(--navy-800);
}
.town-grid li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}
.section--tint .town-grid li { background: #fff; }

/* --- Offer arithmetic table ------------------------------------------------ */
.calc {
  max-width: 700px;
  margin-inline: auto;
}
.calc-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.calc-table caption {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.calc-table th,
.calc-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.calc-table th {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}
/* The hint under each label - what the line actually covers. */
.calc-table th span {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  font-weight: 400;
  color: var(--ink-faint);
}
.calc-table th span:empty { display: none; }
.calc-table td {
  width: 1%;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}
/* Indented rows are the components of the repair total below them. */
.calc-table .is-sub th { padding-left: 34px; font-weight: 400; color: var(--ink-soft); }
.calc-table .is-sub td { font-weight: 500; color: var(--ink-soft); }
.calc-table tfoot th,
.calc-table tfoot td {
  border-bottom: 0;
  padding-block: 18px;
  background: var(--navy-800);
  color: #fff;
  font-size: 1.14rem;
}
.calc-table tfoot td { color: var(--gold-500); }
.calc-note {
  margin: 16px 0 0;
  font-size: .78rem;
  line-height: 1.68;
  color: var(--ink-faint);
}
.calc-note a { color: var(--gold-700); text-decoration: underline; }
.calc-aside {
  max-width: 700px;
  margin: 26px auto 0;
  font-size: .97rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.calc-aside strong { color: var(--navy-800); }
.calc-aside a { color: var(--gold-700); font-weight: 600; text-decoration: underline; }

/* --- Net-proceeds comparison ----------------------------------------------- */
.vs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
}
.vs-card { padding: clamp(22px, 2.6vw, 30px); }
.vs-card h3 {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
}
/* Ours is the one being argued for, so it carries the brand edge. */
.vs-card--us { border-color: var(--gold-500); box-shadow: var(--shadow-md); }
.vs-card--us h3 { border-bottom-color: var(--gold-200, var(--gold-500)); }

.vs-list { list-style: none; margin: 0; padding: 0; }
.vs-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: .9rem;
}
.vs-list span { color: var(--ink-soft); }
.vs-list b {
  flex: none;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
}
.vs-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 2px solid var(--navy-800);
}
.vs-total span {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vs-total b {
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  color: var(--navy-800);
}
.vs-card--us .vs-total b { color: var(--gold-700); }
.vs-meta {
  margin: 12px 0 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

@media (max-width: 760px) {
  .vs-grid { grid-template-columns: 1fr; }
  .calc-table th,
  .calc-table td { padding: 12px 13px; }
  .calc-table .is-sub th { padding-left: 24px; }
}

/* The homepage situation cards carry the photo from the page they open, which
   is what turns a row of icons into six doorways. The picture bleeds to the
   card edge, so it cancels the card's own padding on three sides. */
.situation-media {
  display: block;
  margin: calc(clamp(24px, 3vw, 32px) * -1) calc(clamp(24px, 3vw, 32px) * -1) 20px;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  overflow: hidden;
  background: var(--navy-50);
}
.situation-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 460;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.card-hover:hover .situation-media img { transform: scale(1.04); }

/* The chip sat under the heading before; with a photo above it, it rides the
   seam between the two. */
.situation-media + .icon-chip {
  margin-top: -46px;
  margin-bottom: 14px;
  position: relative;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(8, 8, 30, .18);
}

@media (prefers-reduced-motion: reduce) {
  .situation-media img,
  .card-hover:hover .situation-media img { transition: none; transform: none; }
}