/* ==========================================================================
   Samuel Jeaniste — JD Lending Group
   Design system: Charcoal & Gold
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@1,400;1,500&display=swap');

:root {
  /* Palette — content sections are light (Jean Darius-style neutral
     white/near-white); the hero, page-header photo bands, and funnel
     pages stay hardcoded dark on purpose and don't read these vars. */
  --bg: #f7f7f8;
  --bg-raised: #eeeef0;
  --bg-card: #ffffff;
  --bg-alt: linear-gradient(180deg, #f2f2f3, #e8e9eb);
  --border: #e2e3e6;
  --border-strong: #cfd1d5;

  --ink: #15161a;
  --ink-soft: #3d3f44;
  --ink-muted: #6d6f75;
  --ink-faint: #96979c;

  --gold: #c6960f;
  --gold-light: #e3b53a;
  --gold-deep: #96700a;
  --gold-gradient: linear-gradient(135deg, var(--gold-light), var(--gold));

  --input-bg: #ffffff;
  --nav-bg: rgba(247,247,248,0.85);
  --shadow: rgba(15,15,20,0.1);
  --quote-mark: rgba(184,134,11,0.25);

  /* Type */
  --font-head: 'Bricolage Grotesque', 'Space Grotesk', 'Neue Montreal', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max: 1180px;
  --radius: 6px;
  --radius-lg: 14px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  width: 100%;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(212,175,55,0.09);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 999px;
  padding: 7px 16px;
}

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  margin-top: 14px;
}
.section-head p {
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.7;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

section { position: relative; padding: 110px 0; }
section.tight { padding: 90px 0; }

/* Alternating light/dark section bands — independent of the EN/KR + day/night
   toggle, which otherwise flips the whole page uniformly. */
.section-dark {
  --bg: #0e0f11;
  --bg-raised: #17181b;
  --bg-card: #1c1d21;
  --bg-alt: linear-gradient(180deg, #17181b, #0e0f11);
  --border: #2a2c31;
  --border-strong: #3a3d44;
  --ink: #f3ede1;
  --ink-soft: #d9d1bf;
  --ink-muted: #a8a196;
  --ink-faint: #767267;
  --gold: #d4af37;
  --gold-light: #e8c874;
  --gold-deep: #b8860b;
  --input-bg: #161616;
  --shadow: rgba(0,0,0,0.4);
  background: var(--bg);
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
}
.section-light {
  --bg: #faf7f1;
  --bg-raised: #f2ede3;
  --bg-card: #ffffff;
  --bg-alt: linear-gradient(180deg, #f5efe2, #efe7d8);
  --border: #e7e0d2;
  --border-strong: #d9cfba;
  --ink: #18140f;
  --ink-soft: #3a352d;
  --ink-muted: #6f6858;
  --ink-faint: #948c79;
  --gold: #b8860b;
  --gold-light: #a9760f;
  --gold-deep: #8f6a0a;
  --input-bg: #ffffff;
  --shadow: rgba(120,100,60,0.18);
  background: var(--bg);
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
}

/* ambient gold glow orbs, reused across sections */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212,175,55,0.14) 0%, rgba(0,0,0,0) 70%);
  z-index: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-sm { padding: 11px 22px; font-size: 12.5px; }
.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--gold-gradient);
  color: #161616;
  box-shadow: 0 8px 24px rgba(212,175,55,0.18);
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
.btn-primary:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(212,175,55,0.28); }
.btn-outline {
  color: var(--gold-light);
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.02);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(212,175,55,0.06); }
.btn-block { width: 100%; }

/* ==========================================================================
   Nav
   ========================================================================== */

/* Nav is always fully transparent — no bar, no scroll shadow. Every
   interactive element (logo, link group, icon buttons, hamburger) is its
   own translucent frosted-glass pill, hardcoded dark-on-glass so it stays
   legible and consistent over any section — light, dark, or photo — on
   every page. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: none;
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  gap: 16px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #e8c874;
  background: rgba(14,15,17,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 11px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.nav-logo span { display: inline-block; color: #f3ede1; font-style: italic; transform: skewX(-8deg); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  white-space: nowrap;
  background: rgba(14,15,17,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.nav-links a {
  padding: 9px 15px;
  border-radius: 999px;
  color: #d9d1bf;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-links a:hover { color: #f3ede1; background: rgba(255,255,255,0.1); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav .btn { padding: 11px 20px; font-size: 12.5px; }

.icon-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 42px;
  padding: 0 12px;
  background: rgba(14,15,17,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: #d9d1bf;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.icon-toggle:hover { border-color: var(--gold); color: var(--gold-light); }
.icon-sun { display: flex; }
.icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: flex; }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(14,15,17,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: #f3ede1;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin: 0 20px 16px;
  padding: 10px;
  background: rgba(14,15,17,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
}
.nav-mobile a {
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  color: #d9d1bf;
}
.nav-mobile a:hover { background: rgba(255,255,255,0.08); color: #f3ede1; }
.nav-mobile-phone { color: #e8c874 !important; font-weight: 600; }
.nav-mobile.is-open { display: flex; }

@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-right > .icon-toggle { display: none; }
}
.nav-mobile-toggles { display: flex; gap: 10px; padding: 16px 0 4px; }

/* Phone widths: logo pill + CTA button + hamburger were overflowing past
   the viewport edge — tighten padding/sizing so all three fit on one row. */
@media (max-width: 420px) {
  .nav .wrap { padding: 0 16px; }
  .nav-logo { padding: 9px 14px; font-size: 13.5px; }
  .nav-right { gap: 8px; }
  .nav .btn { padding: 10px 14px; font-size: 11.5px; }
  .nav-toggle { width: 38px; height: 38px; }
}

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

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 160px 0 90px;
  /* Always dark, regardless of the day/night toggle */
  --bg: #0e0f11;
  --bg-raised: #17181b;
  --bg-card: #1c1d21;
  --border: #2a2c31;
  --border-strong: #3a3d44;
  --ink: #f3ede1;
  --ink-soft: #d9d1bf;
  --ink-muted: #a8a196;
  --ink-faint: #767267;
  --gold: #d4af37;
  --gold-light: #e8c874;
  --gold-deep: #b8860b;
  color: var(--ink-soft);
}

/* Luxury South Florida home, slow Ken Burns pan (real photo) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/hero-luxury-home.jpg") center 32% / cover no-repeat;
  filter: brightness(0.95) saturate(1.05);
  transform: scale(1.15);
  will-change: transform;
  backface-visibility: hidden;
  animation: hero-ken-burns 28s ease-in-out infinite alternate;
}
@keyframes hero-ken-burns {
  from { transform: scale(1.15); }
  to { transform: scale(1.3); }
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(9,8,7,0.72) 0%, rgba(9,8,7,0.46) 45%, rgba(9,8,7,0.26) 100%),
    rgba(9,8,7,0.14);
  backdrop-filter: blur(4px) saturate(1.25);
  -webkit-backdrop-filter: blur(4px) saturate(1.25);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .eyebrow {
  margin-bottom: 26px;
  color: #fff;
  background: rgba(255,255,255,0.07);
  border-color: rgba(212,175,55,0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hero-fade-up 0.7s ease both;
}
.hero .eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px var(--gold-light);
  margin-right: 9px;
  animation: hero-pulse-dot 2s ease-in-out infinite;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.08;
  max-width: 17ch;
  color: #fff;
  animation: hero-fade-up 0.8s ease 0.08s both;
}
.hero h1 .italic-accent { font-style: italic; color: var(--gold-light); }
.hero .lede {
  margin-top: 22px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,0.82);
  max-width: 56ch;
  line-height: 1.65;
  animation: hero-fade-up 0.8s ease 0.16s both;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 34px;
  animation: hero-fade-up 0.8s ease 0.24s both;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 44px;
  margin-top: 48px;
  animation: hero-fade-up 0.8s ease 0.32s both;
}
.hero-stat { text-align: center; }
.hero-stat b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--gold-light);
}
.hero-stat span { font-size: 0.78rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.7); }
.hero-license {
  margin-top: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.02em;
  animation: hero-fade-up 0.8s ease 0.4s both;
}
.powered-by { display: inline-flex; align-items: center; gap: 12px; }
.powered-by .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.powered-by img { height: 44px; width: auto; display: block; }
.hero-license .sep { width: 1px; height: 22px; background: rgba(255,255,255,0.22); }
@media (max-width: 480px) {
  .hero-license .sep { display: none; }
  .hero-license { gap: 10px; }
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .hero .eyebrow, .hero h1, .hero .lede, .hero-actions, .hero-stats, .hero-license, .hero .eyebrow::before {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .hero { min-height: auto; padding: 150px 0 64px; }
  .hero h1 { font-size: clamp(2.15rem, 8.4vw, 2.7rem); max-width: 14ch; }
  .hero .lede { font-size: 0.98rem; }
  .hero-stats { gap: 12px 26px; margin-top: 38px; }
  .hero-stat b { font-size: 1.15rem; }
  .hero-stat span { font-size: 0.72rem; }
}

/* ==========================================================================
   Dedicated page header (Reviews / Areas Served / Partner Kit pages)
   ========================================================================== */

.page-header {
  padding: 150px 0 90px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-header .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-header p { margin-left: auto; margin-right: auto; }

/* Photo page header — same translucent recipe as the JD Lendings hero:
   a blurred photo layer reading the per-page --photo custom property,
   under a dark gradient scrim, with white text on top. */
.page-header-photo { border-bottom: none; background-color: #16130e; color: #fff; }
.page-header-photo::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: var(--photo-pos, center);
  transform: scale(1.05);
}
.page-header-photo::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(0deg, rgba(19,16,10,0.72) 0%, rgba(19,16,10,0.46) 45%, rgba(19,16,10,0.26) 100%),
    rgba(19,16,10,0.14);
  backdrop-filter: blur(4px) saturate(1.25);
  -webkit-backdrop-filter: blur(4px) saturate(1.25);
}
.page-header-photo .page-header-back { color: rgba(255,255,255,0.72); }
.page-header-photo .page-header-back:hover { color: var(--gold-light); }
.page-header-photo .eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.page-header-photo h1 { color: #fff; }
.page-header-photo p { color: rgba(255,255,255,0.82); }
.page-header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: 18px;
  transition: color 0.2s ease;
}
.page-header-back:hover { color: var(--gold-light); }
.page-header h1 { margin-top: 14px; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.page-header p { margin-top: 16px; color: var(--ink-muted); font-size: 16px; max-width: 560px; line-height: 1.7; }

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

.about-wrap { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 56px; align-items: start; }
.about-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  box-shadow: 0 24px 50px var(--shadow);
}
.about-visual img { width: 100%; display: block; }
.about-visual-badge {
  position: absolute;
  left: 16px; bottom: 16px;
  background: rgba(14,15,17,0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-visual-badge b { font-family: var(--font-head); font-size: 20px; color: #e8c874; font-weight: 600; }
.about-visual-badge span { font-size: 10.5px; color: #b5aea0; letter-spacing: 0.02em; }
.about-visual-badge .badge-nmls {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,0.14);
  color: #e8c874;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.social-icons { display: flex; gap: 12px; margin-top: 24px; }
.social-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.social-icon:hover {
  color: #18140f;
  border-color: var(--gold);
  background: var(--gold-gradient);
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 26px rgba(212,175,55,0.3);
}

.about-intro { max-width: 640px; }
.about-intro h2 { margin-top: 14px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; }
.about-intro p { margin-top: 18px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.about-credentials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.about-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-light);
  transition: gap 0.2s ease;
}
.about-read-more:hover { gap: 10px; }

@media (max-width: 900px) {
  .about-wrap { grid-template-columns: 1fr; }
  .about-visual { max-width: 380px; }
}
.credential {
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px var(--shadow);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.credential::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("assets/handshake.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mask-image: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, transparent 58%);
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, transparent 58%);
  pointer-events: none;
}
.credential > * { position: relative; z-index: 1; }
.credential:hover {
  border-color: rgba(212,175,55,0.4);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(212,175,55,0.12);
}
.credential .num { display: block; font-family: var(--font-head); color: var(--gold); font-weight: 600; font-size: 15px; margin-bottom: 16px; }
.credential h4 { font-size: 15px; margin-bottom: 8px; }
.credential p { font-size: 13.5px; color: var(--ink-faint); line-height: 1.6; }

@media (max-width: 900px) {
  .about-credentials { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tilt cards (JS adds inline transform on mousemove; CSS handles the rest)
   ========================================================================== */

.tilt-card { transform-style: preserve-3d; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .tilt-card { transition: none !important; }
}

/* ==========================================================================
   Generated background treatments (no external imagery — vector/CSS only)
   ========================================================================== */

.why-section { overflow: hidden; }

.bg-skyline {
  position: absolute;
  inset: auto 0 0 0;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='320' viewBox='0 0 900 320'%3E%3Cg fill='%23d4af37' fill-opacity='0.16'%3E%3Crect x='0' y='140' width='60' height='180'/%3E%3Crect x='70' y='90' width='44' height='230'/%3E%3Crect x='124' y='170' width='50' height='150'/%3E%3Crect x='184' y='60' width='38' height='260'/%3E%3Crect x='230' y='120' width='64' height='200'/%3E%3Crect x='302' y='40' width='34' height='280'/%3E%3Crect x='344' y='160' width='56' height='160'/%3E%3Crect x='408' y='100' width='42' height='220'/%3E%3Crect x='458' y='150' width='60' height='170'/%3E%3Crect x='526' y='70' width='36' height='250'/%3E%3Crect x='570' y='130' width='58' height='190'/%3E%3Crect x='636' y='30' width='40' height='290'/%3E%3Crect x='684' y='150' width='50' height='170'/%3E%3Crect x='742' y='95' width='44' height='225'/%3E%3Crect x='794' y='165' width='54' height='155'/%3E%3Crect x='856' y='110' width='44' height='210'/%3E%3C/g%3E%3Cg fill='%23e8c874' fill-opacity='0.5'%3E%3Crect x='14' y='160' width='6' height='8'/%3E%3Crect x='30' y='160' width='6' height='8'/%3E%3Crect x='84' y='115' width='6' height='8'/%3E%3Crect x='84' y='140' width='6' height='8'/%3E%3Crect x='198' y='90' width='6' height='8'/%3E%3Crect x='198' y='120' width='6' height='8'/%3E%3Crect x='316' y='70' width='6' height='8'/%3E%3Crect x='316' y='100' width='6' height='8'/%3E%3Crect x='422' y='130' width='6' height='8'/%3E%3Crect x='422' y='160' width='6' height='8'/%3E%3Crect x='540' y='100' width='6' height='8'/%3E%3Crect x='540' y='130' width='6' height='8'/%3E%3Crect x='650' y='60' width='6' height='8'/%3E%3Crect x='650' y='90' width='6' height='8'/%3E%3Crect x='756' y='125' width='6' height='8'/%3E%3Crect x='756' y='155' width='6' height='8'/%3E%3Crect x='870' y='140' width='6' height='8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 900px 320px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0.9) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0.9) 100%);
}
.bg-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  background:
    radial-gradient(600px circle at 12% 8%, rgba(212,175,55,0.10), transparent 55%),
    radial-gradient(500px circle at 88% 82%, rgba(212,175,55,0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-raised) 0%, var(--bg) 100%);
}
.areas-section .wrap, .why-section .wrap { position: relative; z-index: 1; }

/* ==========================================================================
   Stat strip (Why Work With Samuel — animated counters)
   ========================================================================== */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 56px;
}
.stat-cell {
  background: var(--bg-card);
  padding: 30px 20px;
  text-align: center;
  transition: background 0.25s ease;
}
.stat-cell:hover { background: var(--bg-raised); }
.stat-cell b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--gold-light);
}
.stat-cell span { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.01em; }

@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Loan Programs
   ========================================================================== */

.programs-section { overflow: hidden; }
.programs-section .wrap { position: relative; z-index: 1; }
.bg-keys {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/downtown-night.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.55;
}
/* Shared full-bleed dark scrim so any section photo (bg-keys, bg-handshake)
   stays legible behind text and gaps between cards. */
.section-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(14,15,17,0.7);
}

/* Expanding program panels — photo-backed glass strips; the active one
   grows to reveal its details (hover on desktop, tap/Enter elsewhere). */
.prog-panels { display: flex; gap: 12px; height: 470px; }
.prog-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #16130e;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px var(--shadow);
  transition: flex-grow 0.6s cubic-bezier(.22,.9,.3,1), border-color 0.4s ease, box-shadow 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.prog-panel::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: var(--photo) center/cover no-repeat;
  transform: scale(1.02);
  transition: transform 0.9s cubic-bezier(.22,.9,.3,1);
}
.prog-panel::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(9,8,7,0.9) 0%, rgba(9,8,7,0.54) 50%, rgba(9,8,7,0.3) 100%),
    rgba(9,8,7,0.14);
  backdrop-filter: blur(3px) saturate(1.25);
  -webkit-backdrop-filter: blur(3px) saturate(1.25);
}
.prog-panel.is-active {
  flex-grow: 4.6;
  cursor: default;
  border-color: rgba(227,181,58,0.6);
  box-shadow: 0 30px 60px -22px rgba(212,175,55,0.45), 0 10px 28px var(--shadow);
}
.prog-panel.is-active::before { transform: scale(1.08); }
.prog-panel:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.prog-icon {
  position: absolute; top: 20px; left: 20px;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  color: #e8c874;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.prog-panel.is-active .prog-icon { background: var(--gold-gradient); background-origin: border-box; color: #161616; border-color: transparent; }
.prog-num {
  position: absolute; top: 74px; left: 20px;
  width: 42px; text-align: center;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  transition: color 0.35s ease;
}
.prog-panel.is-active .prog-num { color: #e8c874; }
.prog-label {
  position: absolute; left: 30px; bottom: 24px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.02em;
  transition: opacity 0.25s ease;
}
.prog-panel.is-active .prog-label { opacity: 0; }

.prog-body {
  position: absolute; left: 26px; bottom: 26px;
  width: min(440px, calc(47.9vw - 110px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.35s ease, visibility 0s linear 0.25s;
}
.prog-panel.is-active .prog-body {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s ease 0.25s, transform 0.5s cubic-bezier(.22,.9,.3,1) 0.25s, visibility 0s;
}
.prog-chip {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(227,181,58,0.16);
  border: 1px solid rgba(227,181,58,0.45);
  color: #f3d27a;
  font-family: var(--font-head);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.prog-body h3 { font-size: 24px; color: #fff; margin: 14px 0 8px; }
.prog-body p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.84); }
.prog-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; }
.prog-meta span { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.prog-meta b { font-size: 14px; font-weight: 600; color: #fff; }
.prog-cta { margin-top: 20px; padding: 12px 22px; font-size: 13px; }

.prog-foot {
  margin-top: 26px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 14.5px;
  color: var(--ink-muted);
  text-align: center;
}
.prog-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold-deep); transition: gap 0.2s ease, color 0.2s ease; }
.prog-foot a:hover { gap: 10px; color: var(--gold); }

/* Tablet/phone: the row becomes a tap-to-open accordion */
@media (max-width: 900px) {
  .prog-panels { flex-direction: column; height: auto; gap: 10px; }
  .prog-panel,
  .prog-panel.is-active {
    flex: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
  }
  .prog-icon, .prog-num, .prog-label { position: static; }
  .prog-num { width: auto; font-size: 13px; }
  .prog-label,
  .prog-panel.is-active .prog-label { writing-mode: horizontal-tb; transform: none; opacity: 1; font-size: 16px; }
  .prog-body,
  .prog-panel.is-active .prog-body {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    transform: none;
    display: grid;
  }
  .prog-body { grid-template-rows: 0fr; transition: grid-template-rows 0.45s ease, opacity 0.3s ease, visibility 0s linear 0.45s; }
  .prog-panel.is-active .prog-body { grid-template-rows: 1fr; transition: grid-template-rows 0.45s ease, opacity 0.4s ease 0.1s, visibility 0s; }
  .prog-body-inner { overflow: hidden; min-height: 0; }
  .prog-panel.is-active .prog-body-inner { padding-top: 18px; padding-bottom: 6px; }
  /* the strip label already shows the name — keep the h3 for screen readers only */
  .prog-body h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .prog-body p { margin-top: 12px; }
  /* the collapsing wrapper clips overflow, which would slice the button glow */
  .prog-cta { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .prog-panel, .prog-panel::before, .prog-body, .prog-panel.is-active .prog-body { transition-duration: 0.01s; transition-delay: 0s; }
}

/* ==========================================================================
   Our Process — scroll-driven timeline: the gold line fills as the section
   scrolls through the viewport and each step lights up as the line reaches it
   ========================================================================== */
.process-section { overflow: hidden; }
.process-track {
  --p: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.process-line {
  position: absolute; top: 27px; left: 10%; right: 10%;
  height: 2px;
  border-radius: 2px;
  background: var(--border-strong);
}
.process-line-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: calc(var(--p) * 100%);
  border-radius: inherit;
  background: var(--gold-gradient);
}
.process-line-fill::after {
  content: '';
  position: absolute; right: -5px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 4px rgba(227,181,58,0.25), 0 0 18px 4px rgba(227,181,58,0.6);
}
.process-step { position: relative; text-align: center; }
.process-node {
  position: relative; z-index: 1;
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--ink-faint);
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease;
}
@keyframes process-node-pulse {
  from { box-shadow: 0 0 0 0 rgba(212,175,55,0.5), 0 10px 24px -8px rgba(212,175,55,0.6); }
  to   { box-shadow: 0 0 0 18px rgba(212,175,55,0), 0 10px 24px -8px rgba(212,175,55,0.6); }
}
.process-step.is-on .process-node {
  background: var(--gold-gradient);
  background-origin: border-box;
  border-color: transparent;
  color: #161616;
  transform: scale(1.06);
  box-shadow: 0 10px 24px -8px rgba(212,175,55,0.6);
}
.process-track.js-ready .process-step.is-on .process-node { animation: process-node-pulse 0.8s ease-out; }
.process-copy {
  height: calc(100% - 76px);
  padding: 22px 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px var(--shadow);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.22,.9,.3,1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.process-track.js-ready .process-step:not(.is-on) .process-copy { opacity: 0.45; transform: translateY(10px); }
.process-step.is-on .process-copy { border-color: rgba(212,175,55,0.3); }
.process-step.is-on:hover .process-copy { transform: translateY(-4px); box-shadow: 0 20px 40px -14px rgba(212,175,55,0.28), 0 4px 16px var(--shadow); }
.process-kicker {
  display: block;
  font-family: var(--font-head);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.process-copy h3 { font-size: 16px; line-height: 1.3; margin-bottom: 10px; }
.process-copy p { font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }
.process-tag {
  display: inline-flex;
  margin-top: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.28);
  color: var(--gold-deep);
  font-size: 11.5px; font-weight: 600;
}
@media (max-width: 1000px) {
  .process-track { grid-template-columns: 1fr; gap: 18px; max-width: 560px; margin: 0 auto; }
  .process-line { top: 28px; bottom: 120px; left: 27px; right: auto; width: 2px; height: auto; }
  .process-line-fill { right: 0; bottom: auto; width: auto; height: calc(var(--p) * 100%); }
  .process-line-fill::after { right: auto; left: 50%; top: auto; bottom: -5px; margin: 0 0 0 -5px; }
  .process-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start; text-align: left; }
  .process-node { margin: 0; }
  .process-copy { height: auto; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-node, .process-copy { transition-duration: 0.01s; }
  .process-track.js-ready .process-step.is-on .process-node { animation: none; }
}

/* ==========================================================================
   Areas Served — photo carousel
   ========================================================================== */

.areas-carousel { position: relative; margin-top: 8px; }
.ac-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding: 44px calc(50% - clamp(238px, 74vw, 330px) / 2) 120px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.ac-track::-webkit-scrollbar { display: none; }
.ac-card {
  position: relative;
  flex: 0 0 clamp(238px, 74vw, 330px);
  aspect-ratio: 3/4;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: center;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px var(--shadow);
  opacity: 0.55;
  transform: scale(0.9);
  transition: opacity 0.55s cubic-bezier(.18,.9,.24,1), transform 0.55s cubic-bezier(.18,.9,.24,1), box-shadow 0.5s ease;
  cursor: pointer;
}
.ac-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,7,0.4) 0%, rgba(10,9,7,0.08) 26%, rgba(10,9,7,0.22) 52%, rgba(8,7,6,0.92) 100%);
  transition: background 0.4s ease;
}
.ac-card::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  /* No transition on the base state — resets instantly so leaving the
     card never plays a second (reverse) streak. */
  pointer-events: none;
  z-index: 2;
}
.ac-card.is-focus:hover::after { transition: left 0.8s ease; }
.ac-card.is-focus { opacity: 1; transform: scale(1); }
.ac-card.is-focus:hover { transform: scale(1.03) translateY(-8px); box-shadow: 0 44px 84px -32px rgba(212,175,55,0.5); }
.ac-card.is-focus:hover::after { left: 130%; }
.ac-card.is-focus:hover::before { background: linear-gradient(180deg, rgba(10,9,7,0.05) 0%, rgba(10,9,7,0.25) 42%, rgba(8,7,6,0.95) 100%); }
.ac-card-inner {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
}
.ac-idx {
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.04em;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 5px 12px;
}
.ac-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 8px; }
.ac-meta h3 { font-family: var(--font-head); font-size: 21px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.ac-meta p { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.5; }

.ac-nav { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
.ac-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.ac-arrow:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .ac-card { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Calculators hub (photo cards linking to each dedicated calculator)
   ========================================================================== */

.calc-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.calc-hub-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--photo, none) center/cover no-repeat, var(--bg-card);
  box-shadow: 0 18px 40px var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.calc-hub-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(9,8,7,0.72) 0%, rgba(9,8,7,0.46) 45%, rgba(9,8,7,0.26) 100%),
    rgba(9,8,7,0.14);
  backdrop-filter: blur(4px) saturate(1.25);
  -webkit-backdrop-filter: blur(4px) saturate(1.25);
  transition: background 0.3s ease;
}
.calc-hub-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212,175,55,0.4);
  box-shadow: 0 30px 60px -18px rgba(212,175,55,0.28);
}
.calc-hub-card > * { position: relative; z-index: 1; }
.calc-hub-card h3 { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.calc-hub-card p { font-size: 13.5px; color: rgba(255,255,255,0.82); line-height: 1.6; max-width: 40ch; }
.calc-hub-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: #e8c874;
  transition: gap 0.2s ease;
}
.calc-hub-card:hover .calc-hub-go { gap: 12px; }

@media (max-width: 700px) {
  .calc-hub-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Calculator
   ========================================================================== */

.calc-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.calc-form { padding: 44px; }
.calc-result {
  padding: 44px;
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 500;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field input, .field select {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--font-body);
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.2s ease;
}
.field input:focus, .field select:focus { border-color: var(--gold); }

.result-label { font-size: 12.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.result-amount {
  font-family: var(--font-head);
  font-size: 46px;
  font-weight: 600;
  color: var(--ink);
  margin: 10px 0 4px;
}
.result-amount span { color: var(--gold-light); }
.result-sub { font-size: 13px; color: var(--ink-faint); margin-bottom: 28px; }
.result-breakdown { display: grid; gap: 12px; }
.result-row {
  display: flex; justify-content: space-between;
  font-size: 13.5px; color: var(--ink-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.result-row b { color: var(--ink-soft); font-weight: 500; }

@media (max-width: 900px) {
  .calc-panel { grid-template-columns: 1fr; }
  .calc-result { border-left: none; border-top: 1px solid var(--border); }
  .field-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Why Work With Samuel
   ========================================================================== */

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.why-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
  padding: 26px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px var(--shadow);
  transition: transform 0.25s ease, border-color 0.3s ease, box-shadow 0.35s ease;
}
/* Cursor-tracking gold spotlight: ::before paints only the 1px border ring
   (padding-box mask cut out of the full box) so a gold hotspot travels along
   the edge under the cursor; ::after is the soft inner glow behind the copy.
   Both are opacity-only on hover so leaving the card just fades them out. */
.why-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx) var(--my), var(--gold-light), rgba(212,175,55,0.35) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.why-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(212,175,55,0.16), rgba(212,175,55,0.05) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,175,55,0.22);
  box-shadow: 0 22px 44px -14px rgba(212,175,55,0.28), 0 4px 16px var(--shadow);
}
.why-card:hover::before,
.why-card:hover::after { opacity: 1; }
.why-card > * { position: relative; z-index: 1; }
.why-num {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid rgba(212,175,55,0.3);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
/* Number badge "ignites" into solid gold with a single expanding pulse ring */
@keyframes why-num-pulse {
  from { box-shadow: 0 0 0 0 rgba(212,175,55,0.45); }
  to   { box-shadow: 0 0 0 16px rgba(212,175,55,0); }
}
.why-card:hover .why-num {
  background: var(--gold-gradient);
  color: #161616;
  border-color: transparent;
  transform: scale(1.1);
}
@media (prefers-reduced-motion: no-preference) {
  .why-card:hover .why-num { animation: why-num-pulse 0.7s ease-out; }
}
.why-card h3 { font-size: 17px; margin-bottom: 10px; }
.why-card h3::after {
  content: '';
  display: block;
  width: 0; height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--gold-gradient);
  transition: width 0.4s cubic-bezier(.22,.9,.4,1);
}
.why-card:hover h3::after { width: 32px; }
/* Touch: no cursor, so light the whole card from its center on press */
@media (hover: none) {
  .why-card:active::before,
  .why-card:active::after { opacity: 1; transition-duration: 0.15s; }
  .why-card:active .why-num { background: var(--gold-gradient); color: #161616; border-color: transparent; }
  .why-card:active h3::after { width: 32px; }
}
.why-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.reviews-section {
  background: var(--bg-alt);
  transition: background 0.35s ease;
}
.reviews-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: reviews-marquee 46s linear infinite;
}
.reviews-viewport:hover .reviews-track,
.reviews-track.paused { animation-play-state: paused; }
@keyframes reviews-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; flex-wrap: wrap; width: 100%; }
}
.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  flex: 0 0 380px;
  width: 380px;
  box-shadow: 0 18px 40px var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.review-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212,175,55,0.35);
  box-shadow: 0 24px 48px var(--shadow), 0 0 32px rgba(212,175,55,0.1);
}

@media (max-width: 900px) {
  .review-card { flex-basis: 300px; width: 300px; }
}
.review-stars { color: var(--gold); font-size: 13px; letter-spacing: 0.14em; margin-bottom: 20px; }
.review-card p.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.75;
  flex-grow: 1;
}
.review-divider { width: 30px; height: 1px; background: var(--gold); opacity: 0.5; margin: 24px 0 14px; }
.review-who { display: flex; flex-direction: column; gap: 3px; }
.review-who b { font-size: 14px; color: var(--ink); font-weight: 600; }
.review-who span { font-size: 12.5px; color: var(--ink-faint); }


/* ==========================================================================
   Hot Leads CTA
   ========================================================================== */

.leads-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-raised));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
}
/* Photo variant — image lives inside the card itself, not the section */
.leads-panel.has-photo {
  background: var(--photo, none) center/cover no-repeat, linear-gradient(135deg, var(--bg-card), var(--bg-raised));
}
.leads-panel.has-photo::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(9,8,7,0.72) 0%, rgba(9,8,7,0.46) 45%, rgba(9,8,7,0.26) 100%),
    rgba(9,8,7,0.14);
  backdrop-filter: blur(4px) saturate(1.25);
  -webkit-backdrop-filter: blur(4px) saturate(1.25);
  z-index: 0;
}
/* Frosted glass edge — soft highlight so every photo card reads as tinted
   glass over the photo, not just a flat scrim. */
.leads-panel.has-photo {
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 30px 60px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.14);
}
.leads-panel .eyebrow { position: relative; z-index: 1; }
.leads-panel h2 {
  position: relative; z-index: 1;
  margin-top: 16px;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.leads-panel p {
  position: relative; z-index: 1;
  color: var(--ink-muted);
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.75;
  max-width: 560px;
  margin-left: auto; margin-right: auto;
}
.leads-panel.has-photo h2 { color: #fff; }
.leads-panel.has-photo p { color: rgba(255,255,255,0.82); }
.leads-panel.has-photo .leads-pill { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }
.leads-pills {
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.leads-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.leads-pill svg { color: var(--gold-light); flex-shrink: 0; }
.leads-panel .btn { position: relative; z-index: 1; margin-top: 34px; }
.btn-lg { padding: 19px 38px; font-size: 14.5px; }

@media (max-width: 700px) {
  .leads-panel { padding: 44px 26px; }
}

/* ==========================================================================
   How It Works (Realtor Partner page) — full photo cards
   ========================================================================== */

.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: 150px 22px 30px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.how-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--photo) center/cover no-repeat;
  transition: transform 0.6s ease;
}
.how-card::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,9,7,0.72) 0%, rgba(10,9,7,0.46) 45%, rgba(10,9,7,0.26) 100%),
    rgba(10,9,7,0.14);
  backdrop-filter: blur(4px) saturate(1.25);
  -webkit-backdrop-filter: blur(4px) saturate(1.25);
}
.how-card > * { position: relative; z-index: 1; }
.how-card:hover {
  border-color: rgba(212,175,55,0.4);
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -20px rgba(212,175,55,0.35);
}
.how-card:hover::before { transform: scale(1.06); }
.how-card .step-num {
  font-family: var(--font-head);
  font-size: 38px;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1.5px #e8c874;
  margin-bottom: 14px;
}
.how-card h3 { font-size: 17px; margin-bottom: 10px; color: #fff; }
.how-card p { font-size: 13.5px; color: rgba(255,255,255,0.78); max-width: 280px; margin: 0 auto; line-height: 1.6; }

@media (max-width: 700px) {
  .how-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   Referral
   ========================================================================== */

/* Spinning conic-gradient ring border, reused from the funnel-adjacent
   "glow card" pattern — a single panel instead of separate boxes. */
@property --ring-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes referral-ring-spin { to { --ring-angle: 360deg; } }

.referral-section { overflow: hidden; }
.referral-panel {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 52px 48px 48px;
  border: 2px solid transparent;
  background:
    linear-gradient(160deg, var(--bg-card), var(--bg-raised)) padding-box,
    conic-gradient(from var(--ring-angle), var(--border), #b8860b 25%, #e8c874 45%, var(--border) 65%) border-box;
  animation: referral-ring-spin 5s linear infinite;
}
.referral-panel::before {
  content: '';
  position: absolute; top: -140px; right: -110px; z-index: 0;
  width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(212,175,55,0.14) 0%, rgba(0,0,0,0) 72%);
}
.referral-panel::after {
  content: '';
  position: absolute; bottom: -160px; left: -120px; z-index: 0;
  width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, rgba(0,0,0,0) 72%);
}
.referral-panel > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .referral-panel { animation: none; } }

.referral-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.referral-step { text-align: center; padding: 4px; }
.referral-step-icon {
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  color: #e8c874;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--photo, none) center/cover no-repeat, var(--bg-raised);
  transition: transform 0.4s cubic-bezier(.22,.9,.4,1.2), box-shadow 0.35s ease, border-color 0.35s ease;
}
.referral-step-icon::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(8,7,6,0.6);
}
.referral-step-icon svg { position: relative; z-index: 1; }
.referral-step:hover .referral-step-icon {
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 14px 30px -10px rgba(212,175,55,0.5);
  border-color: rgba(212,175,55,0.5);
}
.referral-step .step-num { font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 10px; }
.referral-step h3 { font-size: 16px; margin-bottom: 10px; }
.referral-step p { font-size: 14px; color: var(--ink-muted); max-width: 250px; margin: 0 auto; line-height: 1.6; }

@media (max-width: 700px) {
  .referral-grid { grid-template-columns: 1fr; gap: 36px; }
}

.referral-divider { height: 1px; background: var(--border); margin: 44px 0 34px; }

.referral-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #3a2c0f, #1a1408);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 18px;
  padding: 30px 34px;
}
.referral-cta-left { display: flex; gap: 16px; align-items: flex-start; max-width: 480px; }
.referral-cta-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: #e8c874;
  display: flex; align-items: center; justify-content: center;
}
.referral-cta-left strong { display: block; font-family: var(--font-head); font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.referral-cta-left p { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.6; }
.referral-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.referral-cta .btn-outline { border-color: rgba(255,255,255,0.35); color: #fff; background: rgba(255,255,255,0.04); }
.referral-cta .btn-outline:hover { border-color: #e8c874; color: #e8c874; }
.btn-sm { padding: 12px 20px; font-size: 13px; }

@media (max-width: 700px) {
  .referral-panel { padding: 40px 26px; }
  .referral-cta { align-items: flex-start; }
}

@media (max-width: 700px) {
  .referral-cta-top { align-items: flex-start; }
  .referral-cta-buttons { width: 100%; }
  .referral-cta-buttons .btn { flex: 1; }
}
@media (max-width: 480px) {
  .referral-cta-buttons { flex-direction: column; }
  .referral-cta-buttons .btn { width: 100%; }
}

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

#contact .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: stretch; }
.contact-info { display: grid; gap: 22px; align-content: start; margin-top: 32px; }
.contact-map {
  position: relative;
  margin-top: 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 24px 50px var(--shadow);
  aspect-ratio: 4/3;
  min-height: 260px;
  transition: transform 0.4s cubic-bezier(.22,.9,.4,1.2), box-shadow 0.35s ease, border-color 0.35s ease;
}
.contact-map:hover {
  border-color: rgba(212,175,55,0.35);
  box-shadow: 0 30px 60px -12px rgba(212,175,55,0.25);
}
/* Transparent veil over the iframe: an iframe is its own browsing context,
   so mousemove never bubbles out of it, which is what made the tilt-card
   freeze/stutter while the cursor sat over the map. This plain div sits on
   top, catches the mousemove for the tilt JS, and doubles as a click-through
   to Google Maps (the embed isn't meant to be panned/zoomed in place). */
.contact-map-veil { position: absolute; inset: 0; z-index: 1; cursor: pointer; }

/* Clean contact layout: just the office address + a large map, no repeated
   copy — the funnel embed alongside it carries the rest of the section. */
.contact-info-col-map { display: flex; flex-direction: column; }
.office-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.office-badge-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
}
.office-badge-text { flex: 1; min-width: 0; }
.office-badge-text span {
  display: block;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.office-badge-text p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; }
.office-badge-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--gold-light);
  white-space: nowrap;
  transition: gap 0.2s ease, color 0.2s ease;
}
.office-badge-link:hover { gap: 10px; color: var(--gold); }
@media (max-width: 560px) {
  .office-badge { flex-wrap: wrap; row-gap: 14px; }
  .office-badge-text { flex-basis: 100%; order: 2; }
  .office-badge-link { order: 3; margin-left: 60px; }
}
.contact-map-full {
  flex: 1;
  margin-top: 24px;
  aspect-ratio: auto;
  min-height: 360px;
}
@media (max-width: 900px) {
  .contact-map-full { min-height: 300px; }
}
.contact-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.contact-row h4 { font-size: 14.5px; margin-bottom: 4px; }
.contact-row p, .contact-row a { font-size: 14px; color: var(--ink-muted); }
.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.contact-form-fields { display: grid; gap: 18px; align-content: start; }
.contact-form-message { display: flex; flex-direction: column; }
.field-message { flex-grow: 1; display: flex; flex-direction: column; }
.field-message textarea { flex-grow: 1; }
.contact-form textarea {
  width: 100%; min-height: 140px; resize: vertical;
  background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--ink); font-family: var(--font-body); font-size: 15px; padding: 13px 14px; outline: none;
}
.contact-form textarea:focus { border-color: var(--gold); }
.contact-form-message .btn { margin-top: 16px; }

.contact-form.funnel-embed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.funnel-embed .eyebrow { white-space: nowrap; }
.funnel-embed h3 { margin-top: 16px; font-size: 23px; line-height: 1.3; color: var(--ink); }
.funnel-embed > p { margin-top: 10px; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.funnel-embed .field { width: 100%; margin-top: 26px; margin-bottom: 0; }
.funnel-embed .field input { text-align: left; }
.funnel-embed .btn { width: 100%; margin-top: 16px; }
.funnel-embed-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

@media (max-width: 480px) {
  .funnel-embed .eyebrow { font-size: 9.5px; letter-spacing: 0.05em; padding: 6px 12px; }
}

@media (max-width: 900px) {
  #contact .wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .contact-form { grid-template-columns: 1fr; }
}

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

.site-footer { border-top: 1px solid var(--border); padding: 56px 0 36px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.footer-brand .nav-logo { margin-bottom: 12px; }
.footer-brand p { font-size: 13.5px; color: var(--ink-faint); max-width: 320px; line-height: 1.7; }
.footer-links { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13.5px; color: var(--ink-muted); margin-bottom: 10px; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-faint); line-height: 1.7;
}
.footer-bottom .legal { max-width: 640px; }

@media (max-width: 700px) {
  .footer-bottom { flex-direction: column; }
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

/* .reveal is visible by default (no-JS / crawlers / IntersectionObserver
   unsupported all see full content); script.js opts elements into the
   hidden→fade-in treatment by adding .pre-reveal once it can observe them. */
.reveal.pre-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.pre-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered card entrance — cards fade/rise in one after another once their
   section becomes visible (same pre-reveal safety pattern as above). */
.reveal.pre-reveal .program-card,
.reveal.pre-reveal .why-card,
.reveal.pre-reveal .credential,
.reveal.pre-reveal .referral-step,
.reveal.pre-reveal .area-cell {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.pre-reveal.is-visible .program-card,
.reveal.pre-reveal.is-visible .why-card,
.reveal.pre-reveal.is-visible .credential,
.reveal.pre-reveal.is-visible .referral-step,
.reveal.pre-reveal.is-visible .area-cell {
  opacity: 1;
  transform: translateY(0);
}
.programs-grid > :nth-child(1), .why-grid > :nth-child(1), .about-credentials > :nth-child(1), .referral-grid > :nth-child(1), .areas-grid > :nth-child(1) { transition-delay: 0.05s; }
.programs-grid > :nth-child(2), .why-grid > :nth-child(2), .about-credentials > :nth-child(2), .referral-grid > :nth-child(2), .areas-grid > :nth-child(2) { transition-delay: 0.12s; }
.programs-grid > :nth-child(3), .why-grid > :nth-child(3), .about-credentials > :nth-child(3), .referral-grid > :nth-child(3), .areas-grid > :nth-child(3) { transition-delay: 0.19s; }
.programs-grid > :nth-child(4), .why-grid > :nth-child(4), .areas-grid > :nth-child(4) { transition-delay: 0.26s; }
.programs-grid > :nth-child(5), .areas-grid > :nth-child(5) { transition-delay: 0.33s; }
.programs-grid > :nth-child(6) { transition-delay: 0.4s; }

/* Why cards keep their hover transitions after the entrance: the stagger
   delay only applies to the opacity/transform entrance, never to the
   border/shadow hover response (a single transition-delay would lag those). */
.why-grid > :nth-child(1) { --stagger: 0.05s; }
.why-grid > :nth-child(2) { --stagger: 0.12s; }
.why-grid > :nth-child(3) { --stagger: 0.19s; }
.why-grid > :nth-child(4) { --stagger: 0.26s; }
.reveal.pre-reveal.is-visible .why-card {
  transition: opacity 0.55s ease, transform 0.35s ease, border-color 0.3s ease, box-shadow 0.35s ease;
  transition-delay: var(--stagger, 0s), var(--stagger, 0s), 0s, 0s;
}

/* ==========================================================================
   AI Assistant Chat Widget
   ========================================================================== */
.cw { position: fixed; right: 22px; bottom: 22px; z-index: 500; font-family: var(--font-body); }
.cw-launcher { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--gold); background: var(--gold-gradient); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 32px rgba(0,0,0,0.45); transition: transform 0.2s ease; }
.cw-launcher:hover { transform: scale(1.06); }
.cw-launcher-icon { color: #18140f; }
.cw-panel { position: absolute; right: 0; bottom: 74px; width: 360px; max-width: calc(100vw - 32px); max-height: min(560px, 70vh); background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 14px 32px rgba(0,0,0,0.45); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; }
.cw.open .cw-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cw-head { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); }
.cw-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--gold-gradient); color: #18140f; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: 13px; }
.cw-head-text { flex: 1; min-width: 0; }
.cw-head-text strong { display: block; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cw-status { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.cw-dot { width: 6px; height: 6px; border-radius: 50%; background: #3fae6a; display: inline-block; }
.cw-close { background: none; border: none; color: var(--ink-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }
.cw-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.cw-msg { display: flex; }
.cw-msg-bot { justify-content: flex-start; }
.cw-msg-user { justify-content: flex-end; }
.cw-bubble { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.cw-msg-bot .cw-bubble { background: var(--bg-raised); color: var(--ink); border-bottom-left-radius: 4px; }
.cw-msg-user .cw-bubble { background: var(--gold-gradient); color: #18140f; border-bottom-right-radius: 4px; }
.cw-typing { display: flex; gap: 4px; padding: 10px 13px; background: var(--bg-raised); border-radius: 14px; border-bottom-left-radius: 4px; width: fit-content; }
.cw-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); opacity: 0.5; animation: cwTyping 1s infinite ease-in-out; }
.cw-typing span:nth-child(2) { animation-delay: 0.15s; }
.cw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cwTyping { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cw-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; }
.cw-chip { background: var(--bg-raised); border: 1px solid var(--border); color: var(--ink-soft); font-size: 12px; padding: 7px 11px; border-radius: 100px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; font-family: var(--font-body); }
.cw-chip:hover { background: var(--gold); color: #18140f; border-color: var(--gold); }
.cw-inputrow { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.cw-input { flex: 1; border: 1px solid var(--border); background: var(--input-bg); color: var(--ink); border-radius: 100px; padding: 10px 14px; font-size: 13.5px; font-family: var(--font-body); outline: none; }
.cw-input:focus { border-color: var(--gold); }
.cw-send { width: 38px; height: 38px; border-radius: 50%; border: none; flex: none; cursor: pointer; background: var(--gold-gradient); color: #18140f; display: flex; align-items: center; justify-content: center; }
.cw-foot { padding: 11px 16px; border-top: 1px solid var(--border); text-align: center; }
.cw-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 560px) {
  .cw { right: 14px; bottom: 14px; }
  .cw-panel {
    position: fixed; right: 10px; left: 10px; bottom: 86px; width: auto;
    max-height: min(72vh, 560px);
    max-height: min(72dvh, 560px);
  }
  /* When the on-screen keyboard is open (chat.js adds this via the
     visualViewport API), pin the panel to the visible area above the
     keyboard instead of the old fixed bottom offset. */
  .cw.kb-open .cw-panel { bottom: var(--kb-offset, 86px); max-height: var(--kb-max-height, 60vh); }
}

/* ==========================================================================
   Partner Qualification Funnel
   ========================================================================== */

.funnel-body {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background: #0e0f11;
  color: #d9d1bf;
}
/* Blurred full-page photo behind the funnel (per-page --photo inline var),
   under the drifting gold glows. */
.funnel-bg-photo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  filter: blur(6px) saturate(1.05);
  transform: scale(1.06);
}
.funnel-bg-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,17,12,0.88) 0%, rgba(19,17,12,0.82) 50%, rgba(15,13,9,0.94) 100%);
}
.funnel-bg-glow {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212,175,55,0.16) 0%, rgba(0,0,0,0) 70%);
}
.funnel-bg-glow-1 { top: -220px; left: -180px; width: 520px; height: 520px; animation: funnel-drift-1 19s ease-in-out infinite; }
.funnel-bg-glow-2 { bottom: -240px; right: -200px; width: 580px; height: 580px; background: radial-gradient(circle, rgba(212,175,55,0.12) 0%, rgba(0,0,0,0) 70%); animation: funnel-drift-2 23s ease-in-out infinite; }
.funnel-bg-glow-3 { top: 45%; left: 50%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, rgba(0,0,0,0) 70%); animation: funnel-drift-3 27s ease-in-out infinite; }
@keyframes funnel-drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(70px, 50px); } }
@keyframes funnel-drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, -40px); } }
@keyframes funnel-drift-3 { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, -50px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .funnel-bg-glow-1, .funnel-bg-glow-2, .funnel-bg-glow-3 { animation: none; }
}
.funnel-nav, .funnel-wrap { position: relative; z-index: 1; }
.funnel-nav {
  padding: 22px 0;
  border-bottom: 1px solid #2a2a2a;
}
.funnel-nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.funnel-exit {
  font-size: 13px;
  color: #a8a196;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.funnel-exit:hover { color: #e8c874; }

.funnel-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 48px 24px 100px;
}
.funnel-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #2a2a2a;
  overflow: hidden;
  margin-bottom: 14px;
}
.funnel-progress-bar {
  height: 100%;
  width: 16.66%;
  background: linear-gradient(90deg, #b8860b, #e8c874);
  transition: width 0.4s ease;
}
.funnel-step-label {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #767267;
  margin-bottom: 36px;
  text-align: center;
}

.funnel-card {
  position: relative;
  min-height: 360px;
  background: rgba(21,19,15,0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 44px 38px;
  box-shadow: 0 34px 80px -24px rgba(0,0,0,0.65);
}
@media (max-width: 560px) {
  .funnel-card { padding: 32px 20px; }
}
.funnel-step {
  display: none;
  text-align: center;
  animation: funnel-step-in 0.45s ease;
}
.funnel-step.is-active { display: block; }
@keyframes funnel-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .funnel-step { animation: none; }
}

.funnel-step .eyebrow {
  display: inline-flex;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8c874;
  background: rgba(212,175,55,0.09);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 18px;
}
.funnel-step h2 {
  font-family: var(--font-head);
  font-weight: 600;
  color: #f3ede1;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
}
.funnel-sub { margin-top: 12px; color: #a8a196; font-size: 15px; line-height: 1.6; }

.funnel-step .field { margin-top: 24px; }
.funnel-step .field label {
  display: block;
  font-size: 12.5px;
  color: #767267;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 500;
}
.funnel-step .field input {
  width: 100%;
  background: #161616;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  color: #f3ede1;
  font-size: 16px;
  font-family: var(--font-body);
  padding: 15px 16px;
  outline: none;
  text-align: center;
  transition: border-color 0.2s ease;
}
.funnel-step .field input:focus { border-color: #d4af37; }
.funnel-step .btn { margin-top: 28px; }

.funnel-choices { display: grid; gap: 12px; margin-top: 28px; }
.funnel-choice {
  text-align: center;
  padding: 18px 20px;
  background: rgba(31,31,31,0.75);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: #d9d1bf;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.funnel-choice:hover { border-color: rgba(212,175,55,0.4); transform: translateX(2px); }
.funnel-choice.is-selected { border-color: #d4af37; background: rgba(212,175,55,0.1); color: #f3ede1; }

.funnel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.funnel-chip {
  padding: 11px 18px;
  background: #1f1f1f;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  color: #d9d1bf;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.funnel-chip:hover { border-color: rgba(212,175,55,0.4); }
.funnel-chip.is-selected { border-color: #d4af37; background: linear-gradient(90deg, #b8860b, #e8c874); color: #18140f; }

.funnel-back {
  display: inline-block;
  margin-top: 20px;
  background: none;
  border: none;
  color: #767267;
  font-size: 13.5px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.2s ease;
}
.funnel-back:hover { color: #d9d1bf; }

.funnel-step-final { text-align: center; }
.funnel-success { max-width: 480px; margin: 0 auto 32px; }
.funnel-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8c874, #b8860b);
  color: #18140f;
}
.funnel-step-final .funnel-sub { max-width: 420px; margin-left: auto; margin-right: auto; }
.calendly-inline-widget { border-radius: 12px; overflow: hidden; background: #1a1a1a; }
.funnel-note { margin-top: 20px; font-size: 13px; color: #767267; }
.funnel-note a { color: #e8c874; }

@media (max-width: 560px) {
  .funnel-wrap { padding: 32px 18px 80px; }
  .funnel-choice { padding: 16px 18px; font-size: 15px; }
}

/* ==========================================================================
   Touch tap feedback — hover-only effects (tilt, shine sweeps, lift) never
   fire on touch devices since there is no cursor, which can make taps feel
   inert. This gives every interactive surface an instant, snappy press
   state on touch so tapping still reads as alive.
   ========================================================================== */
@media (hover: none) {
  .btn:active { transform: scale(0.97); transition: transform 0.1s ease; }
  .tilt-card:active,
  .program-card:active,
  .why-card:active,
  .credential:active,
  .review-card:active,
  .referral-step:active,
  .how-card:active,
  .calc-hub-card:active,
  .stat-cell:active,
  .area-cell:active,
  .ac-card:active,
  .funnel-choice:active,
  .funnel-chip:active,
  .social-icon:active,
  .icon-toggle:active,
  .ac-arrow:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
    opacity: 0.92;
  }
}

/* ==========================================================================
   HELOC — homepage teaser panel, landing page (heloc.html), estimator
   ========================================================================== */

/* Full-width variant of the photo leads-panel, with a two-button row */
.leads-panel.heloc-panel { max-width: none; padding: 76px 56px; }
.heloc-panel .hero-actions { position: relative; z-index: 1; margin-top: 34px; animation: none; }
.heloc-panel .hero-actions .btn { margin-top: 0; }
.btn-ghost-light { color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.08); }
.btn-ghost-light:hover { border-color: var(--gold-light); background: rgba(227,181,58,0.16); }
@media (max-width: 700px) {
  .leads-panel.heloc-panel { padding: 48px 24px; }
}

/* Landing-page hero — the shared full-screen .hero, laid out in two columns */
.heloc-hero { text-align: left; }
.heloc-hero .hero-inner { max-width: var(--max); width: 100%; align-items: stretch; }
.heloc-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.heloc-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.heloc-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.7rem); max-width: 14ch; }
.heloc-hero .hero-actions { justify-content: flex-start; }
.heloc-hero .hero-actions .btn-outline { color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); }
.heloc-hero .hero-actions .btn-outline:hover { border-color: var(--gold-light); background: rgba(227,181,58,0.16); }
.heloc-hero__trust {
  list-style: none;
  margin: 28px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 16px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.82);
  animation: hero-fade-up 0.8s ease 0.32s both;
}
.heloc-hero__trust li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* desktop: the three checks sit on one line, flush with the headline */
@media (min-width: 1100px) { .heloc-hero__trust { flex-wrap: nowrap; } }
.heloc-hero__trust svg { color: #e8c874; flex-shrink: 0; }
.heloc-hero__card {
  /* light island inside the always-dark hero */
  --ink: #15161a; --ink-soft: #3d3f44; --ink-muted: #6d6f75; --ink-faint: #96979c;
  --input-bg: #ffffff; --border: #e2e3e6; --border-strong: #cfd1d5;
  --gold: #c6960f; --gold-light: #e3b53a; --gold-deep: #96700a;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 36px 32px 30px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55);
  color: var(--ink);
  animation: hero-fade-up 0.8s ease 0.2s both;
}
.heloc-hero__card-label {
  display: inline-flex;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.32);
  color: var(--gold-deep);
  font-family: var(--font-head);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.heloc-hero__card h2 { font-size: 24px; line-height: 1.2; margin: 18px 0 8px; color: var(--ink); }
.heloc-hero__card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); margin-bottom: 20px; }
.heloc-hero__card .field { width: 100%; margin-bottom: 14px; }
.heloc-hero__card-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }
.heloc-hero .hero-license { margin-top: 44px; }
@media (max-width: 900px) {
  .heloc-hero { text-align: center; }
  .heloc-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .heloc-hero__copy { align-items: center; }
  .heloc-hero h1 { max-width: none; }
  .heloc-hero .hero-actions, .heloc-hero__trust { justify-content: center; }
  .heloc-hero__card { width: 100%; max-width: 440px; margin: 0 auto; }
}

/* Three-up variant of the Why cards (icons instead of numbers) */
.why-grid.heloc-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .why-grid.heloc-grid-3 { grid-template-columns: 1fr; gap: 16px; } }

/* Equity estimator */
.heloc-est {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 20px 50px var(--shadow);
  overflow: hidden;
}
.heloc-est__controls { padding: 48px 44px; }
.heloc-est__controls h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; margin: 16px 0 10px; }
.heloc-est__controls > p { color: var(--ink-muted); font-size: 15px; line-height: 1.65; margin-bottom: 8px; }
.heloc-range { display: block; margin-top: 26px; }
.heloc-range__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink-muted); margin-bottom: 8px; }
.heloc-range__top b { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.heloc-range input[type="range"] { width: 100%; height: 30px; accent-color: var(--gold); cursor: pointer; }
.heloc-est__result {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 40px;
  color: #fff;
  background:
    radial-gradient(420px circle at 85% 0%, rgba(227,181,58,0.28), transparent 60%),
    #16130e;
}
.heloc-est__label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.heloc-est__amount {
  font-family: var(--font-head);
  font-size: clamp(40px, 5vw, 58px); font-weight: 600; line-height: 1.1;
  color: #e8c874;
  margin: 10px 0 22px;
  font-variant-numeric: tabular-nums;
}
.heloc-est__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.12); }
.heloc-est__bar span { display: block; height: 100%; transition: width 0.25s ease; }
#helocBarOwed { background: rgba(255,255,255,0.4); }
#helocBarAvail { background: var(--gold-gradient); }
.heloc-est__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,0.72); }
.heloc-est__legend > span { display: inline-flex; align-items: center; gap: 7px; }
.heloc-est__legend i { width: 8px; height: 8px; border-radius: 50%; }
.heloc-est__legend i.owed { background: rgba(255,255,255,0.4); }
.heloc-est__legend i.avail { background: #e3b53a; }
.heloc-est__legend i.kept { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); }
.heloc-est__result .btn { margin-top: 26px; }
.heloc-est__fine { margin-top: 16px; font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,0.5); }
@media (max-width: 900px) {
  .heloc-est { grid-template-columns: 1fr; }
  .heloc-est__controls, .heloc-est__result { padding: 36px 24px; }
}

/* HELOC vs cash-out comparison */
.heloc-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; }
.heloc-compare__card {
  position: relative;
  padding: 34px 30px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.heloc-compare__card.is-featured { border-color: rgba(212,175,55,0.5); box-shadow: 0 24px 50px -18px rgba(212,175,55,0.35), 0 4px 16px var(--shadow); }
.heloc-compare__tag {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.28);
  color: var(--gold-deep);
  font-size: 11.5px; font-weight: 600;
}
.heloc-compare__card h3 { font-size: 26px; margin: 16px 0 8px; }
.heloc-compare__card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.heloc-compare__card dl { margin-top: 20px; }
.heloc-compare__card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.heloc-compare__card dt { font-size: 13.5px; color: var(--ink-muted); }
.heloc-compare__card dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; }
@media (max-width: 700px) { .heloc-compare { grid-template-columns: 1fr; } }

/* FAQ */
.heloc-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.heloc-faq details {
  padding: 0 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px var(--shadow);
  transition: border-color 0.3s ease;
}
.heloc-faq details[open] { border-color: rgba(212,175,55,0.4); }
.heloc-faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 16.5px; font-weight: 600;
}
.heloc-faq summary::-webkit-details-marker { display: none; }
.heloc-faq summary::after { content: '+'; flex-shrink: 0; font-size: 22px; font-weight: 400; color: var(--gold); transition: transform 0.25s ease; }
.heloc-faq details[open] summary::after { transform: rotate(45deg); }
.heloc-faq details p { padding-bottom: 22px; font-size: 14.5px; line-height: 1.7; color: var(--ink-muted); }

/* Four-step variant of the scroll timeline */
.process-track.is-4 { grid-template-columns: repeat(4, 1fr); }
.process-track.is-4 .process-line { left: 12.5%; right: 12.5%; }
@media (max-width: 1000px) {
  .process-track.is-4 { grid-template-columns: 1fr; }
  .process-track.is-4 .process-line { left: 27px; right: auto; }
}

/* ==========================================================================
   Light funnel variant (HELOC) — the photo stays visible behind the same
   translucent veil the heroes use, and the card is white frosted glass.
   ========================================================================== */
.funnel-body.funnel-light { background: #16130e; }
.funnel-light .funnel-bg-photo { filter: blur(4px) saturate(1.25); }
.funnel-light .funnel-bg-photo::after {
  background:
    linear-gradient(0deg, rgba(9,8,7,0.72) 0%, rgba(9,8,7,0.46) 45%, rgba(9,8,7,0.26) 100%),
    rgba(9,8,7,0.14);
}
.funnel-light .funnel-bg-glow { display: none; }
.funnel-light .funnel-nav { border-bottom-color: rgba(255,255,255,0.18); }
.funnel-light .funnel-exit { color: rgba(255,255,255,0.85); }
.funnel-light .funnel-exit:hover { color: #fff; }
.funnel-light .funnel-progress { background: rgba(255,255,255,0.28); }
.funnel-light .funnel-step-label { color: rgba(255,255,255,0.85); }
.funnel-light .funnel-card {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 34px 80px -24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
}
.funnel-light .funnel-step .eyebrow { color: #96700a; background: rgba(212,175,55,0.14); border-color: rgba(198,150,15,0.4); }
.funnel-light .funnel-step h2 { color: #15161a; }
.funnel-light .funnel-sub { color: #55575d; }
.funnel-light .funnel-step .field label { color: #6d6f75; }
.funnel-light .funnel-step .field input { background: rgba(255,255,255,0.92); border-color: #cfd1d5; color: #15161a; }
.funnel-light .funnel-step .field input::placeholder { color: #96979c; }
.funnel-light .funnel-step .field input:focus { border-color: #c6960f; }
.funnel-light .funnel-choice { background: rgba(255,255,255,0.72); border-color: rgba(21,22,26,0.12); color: #2a2c31; }
.funnel-light .funnel-choice:hover { border-color: rgba(198,150,15,0.55); background: rgba(255,255,255,0.92); }
.funnel-light .funnel-choice.is-selected { border-color: #c6960f; background: rgba(227,181,58,0.22); color: #15161a; }
.funnel-light .funnel-chip { background: rgba(255,255,255,0.72); border-color: rgba(21,22,26,0.12); color: #2a2c31; }
.funnel-light .funnel-chip:hover { border-color: rgba(198,150,15,0.55); }
.funnel-light .funnel-chip.is-selected { border-color: #c6960f; background: linear-gradient(135deg, #e3b53a, #c6960f); color: #161616; }
.funnel-light .funnel-back { color: #6d6f75; }
.funnel-light .funnel-back:hover { color: #15161a; }
.funnel-light .funnel-note { color: #6d6f75; }
.funnel-light .funnel-note a { color: #96700a; font-weight: 600; }
.funnel-light .calendly-inline-widget { background: #fff; }

/* ==========================================================================
   About credentials — one sleek spec bar: three cells split by hairlines,
   icon chip + ghost numeral, gold rule that draws across on hover
   ========================================================================== */
.about-credentials {
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px var(--shadow);
  overflow: hidden;
}
.credential {
  padding: 28px 24px 26px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.credential:first-child { border-left: 0; }
.credential::before {
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gold-gradient);
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.22,.9,.3,1);
}
.credential:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(212,175,55,0.08), transparent 75%);
}
.credential:hover::before { transform: scaleX(1); }
.credential .num {
  position: absolute; top: 20px; right: 20px;
  margin: 0;
  font-size: 34px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198,150,15,0.32);
  transition: -webkit-text-stroke-color 0.3s ease;
}
.credential:hover .num { -webkit-text-stroke-color: rgba(198,150,15,0.85); }
.credential-icon {
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--gold-deep);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.credential:hover .credential-icon {
  background: var(--gold-gradient);
  background-origin: border-box;
  border-color: transparent;
  color: #161616;
  transform: translateY(-3px);
}
.credential h4 { font-size: 15.5px; }
.credential p { color: var(--ink-muted); }
@media (max-width: 900px) {
  .credential { border-left: 0; border-top: 1px solid var(--border); }
  .credential:first-child { border-top: 0; }
}
@media (hover: none) {
  .credential:active::before { transform: scaleX(1); }
  .credential:active .credential-icon { background: var(--gold-gradient); color: #161616; border-color: transparent; }
}

/* Inline first funnel question (homepage Get In Touch) — choice buttons */
.funnel-embed-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; margin-top: 24px; }
.funnel-embed-choice {
  padding: 16px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.funnel-embed-choice:hover { border-color: var(--gold); background: rgba(212,175,55,0.08); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(212,175,55,0.5); }
.funnel-embed-choice.is-selected { border-color: transparent; background: var(--gold-gradient); background-origin: border-box; color: #161616; }
@media (max-width: 420px) { .funnel-embed-choices { grid-template-columns: 1fr; } }