/* =============================================================
   HOME.CSS — Citizens Reverse Mortgage Home page only.
   Conditionally enqueued via is_front_page(). Modern, layered
   treatment of the 9 wireframe sections.
   ============================================================= */

/* ── SECTION 02 — HERO ───────────────────────────────────── */
.hero {
  position: relative;
  background: var(--grad-hero);
  color: #fff;
  padding-block: clamp(72px, 9vw, 132px);
  overflow: hidden;
}
/* Layered atmosphere: gold glow + faint dot grid */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px circle at 78% 18%, rgba(184, 148, 58, 0.30), transparent 60%),
    radial-gradient(500px circle at 8% 92%, rgba(61, 122, 138, 0.28), transparent 60%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}
.hero__eyebrow { color: var(--gold-soft); }
.hero h1 { color: #fff; margin-bottom: var(--space-md); }
.hero h1 em { font-style: italic; color: var(--gold-soft); font-weight: 600; }
.hero__sub {
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.6;
  color: #D8E0F2;
  max-width: 52ch;
  margin-bottom: var(--space-lg);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .04em; color: #9FB0D0;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(184,148,58,.8); }

/* Hero image with offset gold ring */
.hero__media { position: relative; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid rgba(212, 169, 79, 0.55);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.hero__media .media-frame { position: relative; z-index: 1; }
.hero__media .media-frame img { min-height: 440px; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__sub { max-width: none; }
  .hero__media::before { inset: 12px -12px -12px 12px; }
  .hero__media .media-frame img { min-height: 320px; }
}

/* ── SECTION 04 — HOW IT WORKS (stepped connector) ───────── */
.steps { position: relative; }
.steps::before {
  content: "";
  position: absolute;
  top: 32px; left: 16%; right: 16%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(184,148,58,.55) 0 10px, transparent 10px 20px);
  z-index: 0;
}
.steps .step { position: relative; text-align: center; padding: 0 var(--space-sm); z-index: 1; }
.steps .step__num { margin-inline: auto; }
.step__title { margin-bottom: 10px; }
@media (max-width: 600px) { .steps::before { display: none; } }

/* ── SECTION 05 — JEFF INTRODUCTION ──────────────────────── */
.jeff__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}
.jeff__media { position: relative; }
.jeff__media::before {
  content: "";
  position: absolute;
  inset: -20px 20px 20px -20px;
  background: var(--grad-gold);
  opacity: .14;
  border-radius: var(--radius-lg);
  z-index: 0;
}
.jeff__media .media-frame { position: relative; z-index: 1; }
.jeff__media .media-frame img { min-height: 380px; }
.jeff__cred {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--text-mid);
  margin-top: var(--space-sm);
  margin-bottom: 0;
}
.jeff__ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-md); margin-top: var(--space-lg);
}

/* ── SECTION 04b — TRUST (Copy Pass) ─────────────────────── */
.home-trust .section-head p {
  font-size: clamp(20px, 1.6vw, 23px);
  color: var(--text-body);
}

/* ── SECTION 05b — A FEW THINGS TO CONSIDER (Copy Pass) ──── */
.consider-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 860px;
  display: grid;
  gap: var(--space-sm);
}
.consider-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.consider-list li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.consider-list li i {
  color: var(--gold);
  font-size: 20px;
  line-height: 1.5;
  flex-shrink: 0;
}
.consider-list li span {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-body);
}
.home-consider__foot {
  text-align: center;
  margin-top: var(--space-lg);
}
@media (max-width: 900px) {
  .jeff__inner { grid-template-columns: 1fr; }
  .jeff__media::before { inset: -12px 12px 12px -12px; }
}

/* ── SECTION 06 — TESTIMONIALS ───────────────────────────── */
.testimonials { background: var(--warm-mist); }
.review-card { padding-top: var(--space-xl); }
.review-card::before {
  content: "\201C";
  position: absolute;
  top: 8px; left: 26px;
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: rgba(184, 148, 58, 0.28);
}
.review-card .stars { margin-bottom: var(--space-sm); }
.review-card__meta { font-weight: 700; color: var(--text-dark); margin-bottom: 0; }

/* ── SECTION 08 — ORANGE COUNTY ROOTS ────────────────────── */
.roots { position: relative; overflow: hidden; }
.roots::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,122,138,0.10), transparent 70%);
  pointer-events: none;
}
.roots__inner { position: relative; }
.roots__content { max-width: 760px; margin-inline: auto; text-align: center; }
.roots__content .btn { margin-top: var(--space-sm); }

/* ── SECTION 09 — FINAL CTA ──────────────────────────────── */
.final-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(184, 148, 58, 0.28), transparent 56%),
    var(--grad-navy);
}
.final-cta::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.final-cta p { font-size: clamp(21px, 1.9vw, 25px); color: #DCE3F2; }
.final-cta__ctas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-md);
}
.final-cta__note {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .04em;
  color: #9FB0D0;
  margin-bottom: 0;
}