/* ============================================================
   HERO HOMEREACH PARTNERS — style.css
   Shared stylesheet for partners.herohomereach.com

   v4 (2026-07-07): Re-skinned to match the actual visual energy
   of the main site (main.css + who-we-serve.html) — glow-lit navy
   hero, alternating dark/light sections, pill tags, stat-grid
   callouts, divider banners, scroll fade-up motion — instead of
   a flat editorial/mockup-only treatment. Token values below are
   pulled directly from the live main.css for exact brand match.
   Real brand mark: /herohomereach_logo_web_logo_512px.png
   — never recreate it in CSS.
   ============================================================ */

/* ── Variables (matched to live main.css) ────────────────── */
:root {
  --navy: #0C2D5E;
  --mid-navy: #1A4A8A;
  --gold: #C9973A;
  --bright-gold: #EAB84A;
  --white: #F5F7FA;       /* "cool white" per brand board, used as a section bg */
  --near-black: #1C1C1E;
  --green: #1A6B4A;
  --warm-gray: #D3D1C7;
  --cream: #FFFCF4;
  --cream-alt: #F8F2ED;

  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --max-w: 1140px;
  --nav-h: 82px;
  --radius: 10px;
  --transition: all 0.24s ease;

  --shadow-soft: 0 4px 20px rgba(12,45,94,0.08);
  --shadow-lift: 0 18px 52px rgba(12,45,94,0.18);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--near-black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--navy); line-height: 1.15; }
h1 { font-size: clamp(34px, 4.8vw, 54px); }
h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 780px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
@media (max-width: 768px) { .container { padding: 0 20px; } .section { padding: 64px 0; } }

/* ── Section eyebrow ──────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: var(--gold); }
.eyebrow.white { color: rgba(255,255,255,0.6); }
.eyebrow.white::before { background: rgba(255,255,255,0.4); }
.eyebrow.on-navy { color: var(--bright-gold); }
.eyebrow.on-navy::before { background: var(--bright-gold); }
.lede { font-size: 18px; color: #555; max-width: 620px; }
.lede.white { color: rgba(255,255,255,0.72); }
.section-intro { max-width: 720px; margin-bottom: 44px; }
.section-intro p { margin-bottom: 14px; }
.emphasis-line { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 16px 32px; border-radius: var(--radius); transition: var(--transition);
  letter-spacing: 0.01em; white-space: nowrap; border: 2px solid transparent;
}
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 4px 20px rgba(201,151,58,0.35); }
.btn-gold:hover { background: var(--bright-gold); transform: translateY(-2px); box-shadow: 0 6px 28px rgba(201,151,58,0.45); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--mid-navy); transform: translateY(-2px); }
.btn-outline-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-sm { padding: 11px 22px; font-size: 13px; }
.btn-arrow::after { content: '\2192'; font-size: 18px; transition: transform 0.2s; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* ── Nav ──────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  height: var(--nav-h); display: flex; align-items: center; transition: var(--transition);
  background: rgba(12,45,94,0.97); border-bottom: 1px solid rgba(201,151,58,0.2);
}
#nav.scrolled { backdrop-filter: blur(12px); box-shadow: 0 2px 24px rgba(0,0,0,0.2); }
.nav-inner { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-logo img { width: 40px; height: 40px; object-fit: contain; background: var(--cream); border-radius: 50%; padding: 4px; }
.nav-wordmark { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #fff; line-height: 1; white-space: nowrap; }
.nav-wordmark span { color: var(--gold); }
.nav-cta .btn { padding: 10px 20px; font-size: 13px; }
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; padding: 0; margin: 0; border: none; background: none;
  cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.nav-hamburger:active { background: rgba(255,255,255,0.10); }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) { .nav-cta { display: none; } }
@media (max-width: 860px) { .nav-hamburger { display: flex; } }

/* ── Hero (glow-lit navy, matches page-hero pattern) ─────── */
#page-hero {
  background: var(--navy);
  padding: calc(var(--nav-h) + 36px) 0 56px;
  position: relative; overflow: hidden;
  border-bottom: 4px solid var(--gold);
}
#page-hero::before {
  content: ''; position: absolute; top: -120px; right: -100px; width: 560px; height: 560px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,151,58,0.16) 0%, transparent 70%);
}
#page-hero::after {
  content: ''; position: absolute; bottom: -160px; left: -120px; width: 460px; height: 460px;
  border-radius: 50%; background: radial-gradient(circle, rgba(26,74,138,0.35) 0%, transparent 70%);
}
.page-hero-inner { position: relative; z-index: 2; text-align: center; max-width: 800px; margin: 0 auto; }
.hero-mark { width: 84px; height: 84px; margin: 0 auto 24px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35)); }
.page-hero-inner h1 { color: #fff; margin-bottom: 20px; }
.page-hero-inner h1 span { color: var(--gold); font-style: italic; }
.page-hero-inner .lede { color: rgba(255,255,255,0.75); font-size: 19px; max-width: 620px; margin: 0 auto 14px; }
.hero-bold-line {
  font-family: var(--font-head); font-weight: 700; font-style: italic; color: var(--bright-gold);
  font-size: clamp(16px, 1.8vw, 19px); margin: 0 auto 36px; max-width: 560px;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.hero-trust { font-size: 13px; color: rgba(255,255,255,0.5); }

/* Quick-nav pill row beneath hero, echoes the audience-select pattern */
.quicknav { background: var(--white); padding: 40px 0; border-bottom: 1px solid var(--warm-gray); border-top: 4px solid var(--gold); }
.quicknav-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.quicknav-row a {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--warm-gray);
  border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 700; color: var(--navy); transition: var(--transition);
}
.quicknav-row a:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-soft); }

/* ── Section background rhythm ────────────────────────── */
.bg-cream { background: var(--cream); }
.bg-white { background: var(--white); }
.bg-navy { background: var(--navy); position: relative; overflow: hidden; }
.bg-navy::before {
  content: ''; position: absolute; top: -100px; right: -80px; width: 460px; height: 460px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,151,58,0.10) 0%, transparent 70%); pointer-events: none;
}
.on-navy-text { color: #fff; }

/* ── Divider banner (rhythm break) ───────────────────────── */
.divider-banner { background: var(--gold); padding: 20px 0; text-align: center; }
.divider-banner p { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: 0.02em; }

/* ── Pill tags ────────────────────────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.pill {
  display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--warm-gray);
  border-radius: 20px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--navy);
  box-shadow: 0 1px 4px rgba(12,45,94,0.06);
}
.pill::before { content: '\2713'; color: var(--green); font-weight: 800; }
.pill.dark { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.88); }
.pill.dark::before { color: var(--bright-gold); }

/* ── "Common question" pull-quote ────────────────────────
   Matches the who-we-serve pattern exactly: gold left border,
   tinted gold background, italic quote, plain sub-line. */
.common-q {
  position: relative; padding: 20px 22px 20px 28px; border-left: 4px solid var(--gold);
  background: rgba(201,151,58,0.07); border-radius: 0 8px 8px 0;
  font-size: 15.5px; font-style: italic; color: var(--near-black); line-height: 1.6; margin: 24px 0;
}
.common-q .cq-sub { font-style: normal; font-size: 13px; color: #888; margin-top: 8px; font-weight: 600; }
.common-q.dark { background: rgba(201,151,58,0.09); color: rgba(255,255,255,0.88); }
.common-q.dark .cq-sub { color: rgba(255,255,255,0.45); }

/* ── Stat grid callout ────────────────────────────────────
   2x4 (desktop) navy card with backdrop blur — the visual
   anchor of the proof section. */
.stat-card { background: rgba(12,45,94,0.72); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-lift); backdrop-filter: blur(4px); }
.stat-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
.stat-num { font-family: var(--font-head); font-size: 34px; font-weight: 900; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.stat-label { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.stat-disclaimer { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.65; }
@media (max-width: 900px) { .stat-card-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Two-column audience-style grid (used for thesis + scenarios) ── */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-grid.reverse { direction: rtl; }
.split-grid.reverse > * { direction: ltr; }
@media (max-width: 900px) { .split-grid, .split-grid.reverse { grid-template-columns: 1fr; direction: ltr; gap: 36px; } }

/* ── Question list (Difference section) ──────────────── */
.question-list { margin: 24px 0; max-width: 640px; display: grid; gap: 12px; }
.question-list li {
  position: relative; padding-left: 28px; font-size: 16px; color: #333; line-height: 1.5;
  font-family: var(--font-head); font-weight: 600;
}
.question-list li::before { content: '\201C'; position: absolute; left: 0; top: -6px; color: var(--gold); font-size: 28px; font-weight: 900; font-family: Georgia, serif; }

/* ── Three-way comparison ─────────────────────────────── */
.comparison-3 { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.comparison-3__card { background: #fff; border: 1px solid var(--warm-gray); border-radius: 14px; padding: 28px 24px; }
.comparison-3__label { font-family: var(--font-head); font-weight: 700; color: #8a7a5c; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }
.comparison-3__card p { font-size: 14.5px; color: #5c5c5c; line-height: 1.6; }
.comparison-3__card--highlight { background: var(--navy); border-color: var(--navy); box-shadow: var(--shadow-lift); }
.comparison-3__card--highlight .comparison-3__label { color: var(--bright-gold); }
.comparison-3__card--highlight p { color: rgba(255,255,255,0.85); }
@media (max-width: 900px) { .comparison-3 { grid-template-columns: 1fr 1fr; } .comparison-3__card--highlight { grid-column: 1 / -1; } }
@media (max-width: 620px) { .comparison-3 { grid-template-columns: 1fr; } }

/* ── Value / mockup cards (Partnership Value section) ──── */
.value-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { background: #fff; border: 1px solid var(--warm-gray); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition); display: flex; flex-direction: column; }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.value-card__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8B6020; background: rgba(201,151,58,0.12); padding: 9px 16px; border-bottom: 1px solid rgba(201,151,58,0.18); }
.value-card__tag { color: #9a9a9a; font-weight: 600; }
.value-card__media { aspect-ratio: 4/5; background: var(--white); display: flex; align-items: center; justify-content: center; padding: 18px; }
.value-card__body { padding: 20px 22px 24px; }
.value-card__body h3 { font-size: 17px; margin-bottom: 8px; color: var(--navy); }
.value-card__body p { font-size: 13.5px; color: #5c5c5c; line-height: 1.6; }
@media (max-width: 960px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; } }

/* ── Value grid: 6th "pop" CTA card (2026-07-10) ──
   Balances the 5-card grid to a clean 3x2 layout and gives the
   section its own mid-page off-ramp. Reuses .value-card so it
   inherits the same border-radius/shadow/hover lift, but swaps
   to a solid navy fill so it visually pops against the five
   white info cards next to it instead of reading as a sixth
   near-duplicate. */
.value-card--cta { background: var(--navy); border-color: var(--navy); }
.value-card--cta .value-card__label--cta {
  background: rgba(255,255,255,0.08); color: var(--bright-gold);
  border-bottom-color: rgba(255,255,255,0.14);
}
.value-card--cta .value-card__body--cta {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.value-card--cta .value-card__body--cta h3 { color: #fff; margin-bottom: 0; }
.value-card--cta .value-card__body--cta p { color: rgba(255,255,255,0.75); margin-bottom: 6px; }
.value-card--cta .value-card__body--cta .btn { white-space: normal; text-align: center; justify-content: center; align-self: flex-start; }

/* ═══════════════════════════════════════════════════════
   CAMPAIGN MOCKUP COMPONENTS (unchanged from prior build —
   pure CSS/HTML, Hero HomeReach-owned, no partner branding)
   ═══════════════════════════════════════════════════════ */
.asset-mockup-frame { background: #fff; border-radius: 14px; padding: 20px; min-height: 210px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 32px rgba(12,45,94,0.10); border: 1px solid var(--warm-gray); position: relative; overflow: hidden; }
.asset-mockup-frame--navy { background: var(--navy); border-color: var(--navy); }
.mockup-phone { width: 132px; background: var(--navy); border-radius: 20px; padding: 10px; box-shadow: 0 14px 30px rgba(0,0,0,0.28); }
.mockup-phone-screen { background: #fff; border-radius: 12px; padding: 10px 9px; }
.mp-avatar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.mp-avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.mp-name { font-size: 7px; font-weight: 700; color: #222; }
.mp-headline { font-family: var(--font-head); font-weight: 700; font-size: 9.5px; color: var(--navy); line-height: 1.25; margin-bottom: 6px; }
.mp-body { font-size: 6.5px; color: #666; line-height: 1.4; margin-bottom: 8px; }
.mp-cta { background: var(--gold); color: var(--navy); font-size: 7px; font-weight: 700; text-align: center; border-radius: 5px; padding: 5px; }
.mockup-carousel { position: relative; height: 170px; width: 100%; }
.mc-card { position: absolute; top: 18px; width: 108px; height: 130px; border-radius: 10px; padding: 12px 10px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.mc-card:nth-child(1) { left: 6%; transform: rotate(-7deg); background: linear-gradient(135deg,var(--mid-navy),var(--navy)); z-index: 1; }
.mc-card:nth-child(2) { left: 33%; transform: rotate(0deg); background: linear-gradient(135deg,var(--navy),#08203f); z-index: 2; }
.mc-card:nth-child(3) { left: 60%; transform: rotate(7deg); background: linear-gradient(135deg,#8B6020,var(--navy)); z-index: 1; }
.mc-title { font-family: var(--font-head); font-weight: 700; font-size: 10.5px; margin-bottom: 3px; }
.mc-sub { font-size: 7px; color: rgba(255,255,255,0.75); line-height: 1.3; }
.mockup-browser { width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.18); }
.mb-chrome { background: #e9ecf2; padding: 5px 8px; display: flex; align-items: center; gap: 6px; }
.mb-dots { display: flex; gap: 3px; }
.mb-dots span { width: 5px; height: 5px; border-radius: 50%; background: #c3c8d4; }
.mb-url { flex: 1; background: #fff; border-radius: 3px; padding: 2px 8px; font-size: 7px; color: #778; }
.mb-hero { background: var(--navy); padding: 14px 12px 10px; text-align: center; }
.mb-headline { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 10px; line-height: 1.25; margin-bottom: 8px; }
.mb-field { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; font-size: 6.5px; color: rgba(255,255,255,0.6); padding: 4px 6px; margin-bottom: 4px; text-align: left; }
.mb-cta { background: var(--gold); color: var(--navy); font-weight: 700; font-size: 7.5px; border-radius: 5px; padding: 5px; margin-top: 6px; }
.mockup-guide { position: relative; width: 112px; height: 152px; }
.mg-shadow1, .mg-shadow2 { position: absolute; inset: 0; border-radius: 8px; background: var(--warm-gray); }
.mg-shadow1 { transform: rotate(-6deg) translate(4px, 3px); opacity: 0.5; }
.mg-shadow2 { transform: rotate(4deg) translate(-3px, 2px); opacity: 0.5; }
.mg-cover { position: relative; width: 100%; height: 100%; border-radius: 8px; background: linear-gradient(160deg, var(--navy), #08203f); border-left: 5px solid var(--gold); padding: 16px 12px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 14px 30px rgba(0,0,0,0.25); }
.mg-title { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 10.5px; line-height: 1.3; margin-bottom: 6px; }
.mg-sub { font-size: 7px; color: rgba(255,255,255,0.65); line-height: 1.4; }
.mockup-email { width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.14); border: 1px solid #e6e9ef; }
.me-topbar { background: var(--navy); color: var(--bright-gold); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; }
.me-msg { padding: 10px; border-bottom: 1px solid #eee; background: #fff; }
.me-msg:last-child { border-bottom: none; }
.me-subject { font-size: 9.5px; font-weight: 700; color: var(--navy); margin-bottom: 3px; line-height: 1.3; }
.me-snippet { font-size: 7.5px; color: #777; line-height: 1.4; }
.mockup-handoff { background: linear-gradient(150deg, var(--navy), #08203f); border-radius: 12px; padding: 18px 16px; text-align: center; width: 100%; box-shadow: 0 14px 30px rgba(0,0,0,0.22); }
.mh-title { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 12px; margin-bottom: 6px; line-height: 1.3; }
.mh-sub { font-size: 8px; color: rgba(255,255,255,0.65); line-height: 1.4; margin-bottom: 12px; }
.mh-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.mh-tag { background: rgba(201,151,58,0.18); border: 1px solid rgba(201,151,58,0.4); color: var(--bright-gold); font-size: 7px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }

/* ── Buyer education path track ──────────────────────── */
.path-track { margin-top: 44px; }
.path-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.path-row::before { content: ''; position: absolute; top: 22px; left: calc(16.67% + 4px); right: calc(16.67% + 4px); height: 2px; background-image: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 6px, transparent 6px, transparent 13px); z-index: 0; }
.path-row-connector { display: flex; justify-content: center; align-items: center; height: 48px; color: var(--gold); font-size: 20px; font-weight: 700; }
.path-node { position: relative; z-index: 1; display: flex; flex-direction: column; }
.path-marker { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); border: 3px solid var(--gold); color: var(--gold); font-family: var(--font-head); font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 4px 16px rgba(12,45,94,0.18); }
.path-marker--handoff { background: var(--gold); border-color: var(--navy); color: var(--navy); }
.path-label { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--navy); margin-top: 18px; }
.path-caption { text-align: center; font-size: 12.5px; color: #6a6a6a; line-height: 1.55; margin-top: 6px; padding: 0 6px; }
@media (max-width: 960px) { .path-row { grid-template-columns: 1fr 1fr; } .path-row::before { display: none; } .path-row-connector { display: none; } }
@media (max-width: 640px) { .path-row { grid-template-columns: 1fr; gap: 40px; } }

/* ── Sample Concepts (navy, glow) ─────────────────────── */
.concepts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.concept-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.34); transition: var(--transition); display: flex; flex-direction: column; }
.concept-card:hover { transform: translateY(-6px); }
.concept-card__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8B6020; background: rgba(201,151,58,0.12); padding: 9px 18px; border-bottom: 1px solid rgba(201,151,58,0.18); }
.concept-card__media { aspect-ratio: 4/5; background: var(--navy); display: flex; align-items: center; justify-content: center; padding: 20px; }
.concept-card__footer { padding: 16px 18px; background: var(--white); border-top: 1px solid #e6e9ef; text-align: center; }
.concept-card__headline { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.concept-card__caption { padding: 16px 18px 20px; font-size: 12.5px; color: #6a6a6a; line-height: 1.6; }
@media (max-width: 960px) { .concepts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .concepts-grid { grid-template-columns: 1fr; } }

/* ── Fit gate ─────────────────────────────────────────── */
.fit-columns { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 28px; margin-top: 32px; align-items: start; }
.fit-column { border-radius: 14px; padding: 26px 26px 22px; }
.fit-column:not(.fit-column--no) {
  background: linear-gradient(180deg, #ffffff, #FFFBF1);
  border: 1.5px solid rgba(201,151,58,0.55);
  box-shadow: 0 16px 36px rgba(201,151,58,0.16), 0 4px 14px rgba(12,45,94,0.06);
}
.fit-column--no {
  background: rgba(211,209,199,0.20);
  border: 1px dashed rgba(106,106,106,0.28);
  box-shadow: none;
  padding-top: 22px;
}
.fit-column-label { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 16px; }
.fit-column:not(.fit-column--no) .fit-column-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; }
.fit-column:not(.fit-column--no) .fit-column-label::before { content: '\2605'; color: var(--gold); font-size: 13px; }
.fit-column--no .fit-column-label { color: #8a8a8a; font-weight: 600; font-size: 13.5px; }
.fit-list { display: grid; gap: 12px; list-style: none; }
.fit-list li { position: relative; padding-left: 30px; font-size: 14.5px; color: #333; line-height: 1.55; }
.fit-list--yes li { font-size: 15px; }
.fit-list--yes li::before { content: '\2713'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(26,107,74,0.14); color: var(--green); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.fit-list--no li { color: #8a8a8a; font-size: 13.5px; }
.fit-list--no li::before { content: '\2013'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(12,45,94,0.06); color: #9a9a9a; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 820px) { .fit-columns { grid-template-columns: 1fr; gap: 24px; } }

/* ── Final CTA (glow) ─────────────────────────────────── */
#final-cta { background: var(--navy); padding: 96px 0; position: relative; overflow: hidden; text-align: center; }
#final-cta::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(201,151,58,0.12) 0%, transparent 70%); }
.final-cta-inner { position: relative; z-index: 2; }
.final-cta-inner h2 { color: #fff; margin-bottom: 16px; }
.final-cta-inner h2 span { color: var(--gold); font-style: italic; }
.final-cta-inner p { color: rgba(255,255,255,0.7); font-size: 18px; max-width: 520px; margin: 0 auto 36px; }

/* ── Footer ───────────────────────────────────────────── */
#footer { background: #080f1c; padding: 56px 0 32px; border-top: 1px solid rgba(201,151,58,0.15); }
.footer-top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.footer-top img { width: 30px; height: 30px; background: var(--cream); border-radius: 50%; padding: 4px; }
.footer-top span { font-family: var(--font-head); color: #fff; font-weight: 700; font-size: 17px; }
.footer-disclaimer { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.45); max-width: 900px; margin-bottom: 24px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: rgba(255,255,255,0.35); }
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: var(--bright-gold); }

/* ── Scroll fade-up motion (matches main-site convention) ── */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════════════════
   v5 (2026-07-07) — ROOT HOMEPAGE ADDITIONS
   Everything below supports index.html (the partner gateway
   homepage) without touching any rule /lenders/ depends on.
   ═══════════════════════════════════════════════════════ */

/* ── Nav link list (shared pattern, used on both pages) ── */
.nav-links { display: flex; align-items: center; gap: 26px; margin-right: 24px; }
.nav-links a {
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.75);
  transition: color 0.2s; position: relative; white-space: nowrap;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: var(--bright-gold); }
.nav-links span.soon {
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.32);
  cursor: default; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.nav-links span.soon::after {
  content: 'Soon'; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(201,151,58,0.55); border: 1px solid rgba(201,151,58,0.3); border-radius: 10px; padding: 1px 6px;
}
.nav-links a.soon-link {
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.55);
  transition: color 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.nav-links a.soon-link:hover { color: rgba(255,255,255,0.85); }
.nav-links a.soon-link .soon-badge {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(201,151,58,0.55); border: 1px solid rgba(201,151,58,0.3); border-radius: 10px; padding: 1px 6px;
}
@media (max-width: 860px) {
  .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); margin: 0; padding: 10px 24px 22px;
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .25s ease;
    box-shadow: 0 18px 32px rgba(0,0,0,0.28);
  }
  .nav-links.open { max-height: 420px; opacity: 1; pointer-events: auto; }
  .nav-links a, .nav-links span.soon, .nav-links a.soon-link { padding: 12px 0; width: 100%; }
  .nav-links .nav-mobile-cta { display: inline-flex; margin: 10px 0 4px; }
}
@media (min-width: 861px) { .nav-mobile-cta { display: none !important; } }

/* ── Vertical divider (hero split, print-collateral feel) ── */
.v-divider { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, rgba(201,151,58,0.4) 20%, rgba(201,151,58,0.4) 80%, transparent); }

/* ── Diagonal gold corner accent (echoes the shield's band) ── */
.corner-accent { position: relative; }
.corner-accent::before {
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 34px 34px 0; border-color: transparent var(--gold) transparent transparent;
  z-index: 1;
}
.corner-accent--navy::before { border-color: transparent var(--navy) transparent transparent; }

/* ── Homepage hero: split with campaign-system board ────── */
.home-hero-grid { display: grid; grid-template-columns: 1.05fr auto 0.95fr; gap: 48px; align-items: start; }
@media (max-width: 980px) { .home-hero-grid { grid-template-columns: 1fr; } .home-hero-grid .v-divider { display: none; } }
.home-hero-content .hero-mark { width: 60px; height: 60px; margin: 0 0 16px; }
.home-hero-content { text-align: left; }
.home-hero-content h1 { color: #fff; margin-bottom: 18px; text-align: left; }
.home-hero-content h1 span { color: var(--gold); font-style: italic; }
.home-hero-content .lede { text-align: left; margin: 0 0 14px; }
.home-hero-content .hero-bold-line { text-align: left; margin: 0 0 22px; }
.home-hero-content .hero-ctas { justify-content: flex-start; }
.home-hero-content .hero-trust { text-align: left; }

/* Hero visual — single real campaign image (replaced the CSS mockup
   cluster). Responsive, natural aspect ratio, no cropping/stretching. */
.hero-visual-col { margin-top: 4px; }
.hero-visual { display: flex; align-items: center; justify-content: center; }
.hero-visual__img {
  width: 100%; height: auto; max-width: 540px; border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.34); border: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 980px) { .hero-visual__img { max-width: 440px; margin: 0 auto; } }

/* Compact "campaign system includes" mini-panel under the hero image */
.hero-system-panel {
  max-width: 540px; margin: 18px auto 0; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,151,58,0.22); border-radius: 12px; padding: 16px 18px;
}
.hero-system-panel__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bright-gold); margin-bottom: 10px;
}
.hero-system-panel__item {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-system-panel__item:first-of-type { border-top: none; }
.hero-system-panel__num {
  width: 18px; height: 18px; border-radius: 50%; background: rgba(201,151,58,0.22); color: var(--bright-gold);
  font-family: var(--font-head); font-weight: 800; font-size: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.hero-system-panel__item div { display: flex; flex-direction: column; gap: 1px; }
.hero-system-panel__item strong { font-size: 12.5px; color: #fff; font-weight: 700; }
.hero-system-panel__item span { font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.4; }
@media (max-width: 980px) { .hero-system-panel { max-width: 440px; } }

/* Reporting-signal mockup (new component) */
.mockup-report { width: 100%; padding: 6px 2px; }
.mr-label { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.mr-row { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; }
.mr-row:last-child { border-bottom: none; }
.mr-metric { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--navy); }
.mr-desc { font-size: 7px; color: #888; max-width: 100px; text-align: right; line-height: 1.4; }

/* ── Partner path tiles ───────────────────────────────── */
.tiles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.tile {
  background: #fff; border: 1.5px solid var(--warm-gray); border-radius: 4px; padding: 30px 26px 26px;
  position: relative; overflow: hidden; transition: var(--transition); display: flex; flex-direction: column;
}
.tile::after { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: var(--warm-gray); }
.tile--active { border-color: var(--gold); box-shadow: var(--shadow-lift); }
.tile--active::after { background: var(--gold); }
.tile--active:hover { transform: translateY(-6px); }
.tile--soon { opacity: 0.72; }
.tile-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.tile--soon .tile-label { color: #999; }
.tile h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.3; }
.tile-headline { font-size: 13.5px; font-weight: 700; color: var(--mid-navy); line-height: 1.4; margin-bottom: 10px; }
.tile p { font-size: 13.5px; color: #5c5c5c; line-height: 1.6; margin-bottom: 20px; flex: 1; }
.tile p.tile-headline { margin-bottom: 10px; flex: none; }
.tile-cta { font-size: 12.5px; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.tile-cta.muted { color: #999; }
@media (max-width: 980px) { .tiles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tiles-grid { grid-template-columns: 1fr; } }

/* ── How Trust Moves: path ribbon (road motif from the shield) ── */
.ribbon-track { position: relative; margin-top: 56px; padding: 0 4px; }
.ribbon-line {
  position: absolute; top: 26px; left: 4%; right: 4%; height: 4px; border-radius: 4px; z-index: 0;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 78%, var(--green) 100%);
  opacity: 0.85;
}
.ribbon-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.ribbon-step { text-align: center; }
.ribbon-marker {
  width: 52px; height: 52px; border-radius: 50%; background: var(--navy); border: 3px solid var(--gold);
  color: #fff; font-family: var(--font-head); font-weight: 900; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: var(--shadow-soft);
}
.ribbon-step:last-child .ribbon-marker { border-color: var(--green); }
.ribbon-step p { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.4; padding: 0 4px; }
@media (max-width: 860px) {
  .ribbon-steps { grid-template-columns: 1fr; gap: 28px; }
  .ribbon-line { display: none; }
  .ribbon-step { display: flex; align-items: center; gap: 16px; text-align: left; }
  .ribbon-step p { padding: 0; }
  .ribbon-marker { margin: 0; flex-shrink: 0; }
}

/* ── Education-layer callout (Campaign System section) ───
   Premium navy callout distinguishing the education system
   from a simple ad/media-buying pitch. */
.callout-navy {
  background: var(--navy); border-radius: var(--radius); padding: 40px 44px;
  box-shadow: var(--shadow-lift); margin: 28px 0 8px; position: relative; overflow: hidden;
}
.callout-navy::before {
  content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,151,58,0.14) 0%, transparent 70%); pointer-events: none;
}
.callout-navy__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bright-gold); margin-bottom: 12px; position: relative;
}
.callout-navy__eyebrow::before { content: ''; display: inline-block; width: 22px; height: 2px; background: var(--bright-gold); }
.callout-navy h3 { color: #fff; font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 12px; position: relative; }
.callout-navy p { color: rgba(255,255,255,0.82); font-size: 15.5px; line-height: 1.7; max-width: 720px; position: relative; }

/* ── Value card breakdown (Hero HomeReach builds / buyer experiences / partner receives) ──
   Used inside .value-card__body to make each campaign-system
   card read as a step in a pathway, not a generic feature tile. */
.value-card__breakdown { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--warm-gray); display: flex; flex-direction: column; gap: 12px; }
.vcb-row { padding-left: 13px; border-left: 2px solid rgba(201,151,58,0.45); }
.vcb-label { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8B6020; margin-bottom: 3px; }
.vcb-row p { font-size: 12.5px; color: #5c5c5c; line-height: 1.55; margin: 0; }

/* ── Campaign System board image (2026-07-08) ───────────
   Replaces the old 5-card mockup row in the homepage
   Campaign System section with a single real graphic. */
.campaign-system-board { margin: 40px auto 8px; width: 100%; }
.campaign-system-board img {
  display: block; width: 100%; height: auto;
  border-radius: 24px; box-shadow: 0 24px 70px rgba(12,45,94,0.14);
  border: 1px solid rgba(201,151,58,0.22);
}
@media (max-width: 768px) {
  .campaign-system-board { margin: 28px auto 4px; }
  .campaign-system-board img { border-radius: 16px; }
}

/* ── System steps (5-step supporting copy under the board image) ── */
.system-steps { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.system-step { background: #fff; border: 1px solid var(--warm-gray); border-radius: 14px; padding: 22px 18px 20px; box-shadow: var(--shadow-soft); }
.system-step__num {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--navy); color: var(--bright-gold);
  font-family: var(--font-head); font-weight: 800; font-size: 13px; margin-bottom: 12px;
}
.system-step h3 { font-size: 15px; margin-bottom: 6px; color: var(--navy); line-height: 1.3; }
.system-step p { font-size: 12.5px; color: #5c5c5c; line-height: 1.55; margin: 0; }
@media (max-width: 1024px) { .system-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .system-steps { grid-template-columns: 1fr; } }

/* ── Lenders hero: left-aligned, Programs-page hierarchy (2026-07-08) ──
   Reuses the existing glow-lit navy #page-hero background (no photo
   asset yet). Borrows the text-left + stat-row structure from the
   main site's Programs page hero without duplicating its photo trick.
   Scoped to .lender-hero-content so the shared centered .page-hero-inner
   default (still used by future pages) is untouched. */
.lender-hero-content { text-align: left; max-width: 760px; margin: 0; }
.lender-hero-content .hero-mark { margin: 0 0 20px; }
.lender-hero-content .eyebrow.white { justify-content: flex-start; }
.lender-hero-content .lede { margin: 0 0 14px; }
.lender-hero-content .hero-bold-line { margin: 0 0 32px; }
.lender-hero-content .hero-ctas { justify-content: flex-start; }
.lender-hero-content .hero-trust { text-align: left; }

.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 28px; margin-top: 28px; border-top: 1px solid rgba(255,255,255,0.14); }
.hero-stat-num { font-family: var(--font-head); font-size: 32px; font-weight: 900; color: var(--gold); line-height: 1; }
.hero-stat-label { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 4px; line-height: 1.4; max-width: 170px; }
@media (max-width: 640px) { .hero-stats { gap: 24px; } }

/* ── Buyer path: 2-item row modifier (2026-07-08, trimmed to 5 nodes) ── */
.path-row--2 { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 40px; }
.path-row--2::before { display: none; }
@media (max-width: 640px) { .path-row--2 { grid-template-columns: 1fr; } }

/* ── Question list on navy background (2026-07-08, lenders hero) ── */
.question-list.on-navy { gap: 14px; margin: 28px 0; }
.question-list.on-navy li {
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(201,151,58,0.30);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 16px 20px 16px 50px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: var(--transition);
}
.question-list.on-navy li:hover {
  background: rgba(255,255,255,0.11);
  transform: translateX(4px);
  border-left-color: var(--bright-gold);
}
.question-list.on-navy li::before { left: 18px; top: 15px; font-size: 22px; }

/* ── Difference-section question list: same card language, light-bg version ── */
#not-lead-source .question-list { gap: 14px; margin: 24px 0; }
#not-lead-source .question-list li {
  background: #fff;
  border: 1px solid rgba(201,151,58,0.25);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 14px 18px 14px 44px;
  box-shadow: 0 6px 16px rgba(12,45,94,0.06);
  transition: var(--transition);
}
#not-lead-source .question-list li:hover {
  box-shadow: 0 10px 22px rgba(12,45,94,0.10);
  transform: translateX(3px);
  border-left-color: var(--bright-gold);
}
#not-lead-source .question-list li::before { left: 16px; top: 13px; font-size: 20px; }

/* ── Lenders hero: real photo background (2026-07-08) ──
   Scoped to #page-hero.hero-with-photo so the shared #page-hero
   solid-navy + radial-bloom background (still used by the homepage
   hero) is untouched. Same fading-gradient technique as the main
   site's Programs page hero: photo on the right, text-safe navy on
   the left, no grid/columns needed. */
#page-hero.hero-with-photo {
  background-color: var(--navy);
  background-image: url('../../lenders/lender-page-header-bg-2400x1020.webp');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
#page-hero.hero-with-photo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    rgba(12,45,94,0.97) 0%,
    rgba(12,45,94,0.95) 40%,
    rgba(12,45,94,0.75) 58%,
    rgba(12,45,94,0.35) 78%,
    rgba(12,45,94,0.10) 100%
  );
}
#page-hero.hero-with-photo::after { display: none; }

/* ── Lenders hero photo: mobile-only crop fix (2026-07-08) ──
   Desktop uses background-size:100% auto so the full photo shows
   uncropped, letterboxed to navy below. On narrow mobile widths that
   full-image approach compresses the photo into a very thin band
   (~166px on a 390px phone) — thin enough that the fixed nav bar can
   overlap most of it, leaving only the lower portion (hands, mug,
   papers on the desk) visible instead of the couple's faces, which
   sit in the top ~20-40% of the source image. Fix: on mobile only,
   scale the image up (220% of viewport width) and crop horizontally
   toward the people (78% from left) while keeping vertical position
   pinned to the top of the image, so the visible band is taller
   (~365px on a 390px phone) and actually shows the conversation
   instead of just the tabletop. Tune the 78%/220% pair below if the
   crop still isn't centered right on an actual device. */
@media (max-width: 640px) {
  #page-hero.hero-with-photo {
    background-size: 220% auto;
    background-position: 78% top;
  }
}

/* ── Agents hero: real photo background (2026-07-10) ──
   Same technique as the lenders hero above, scoped to the
   .hero-with-photo--agents modifier so it doesn't override the
   lenders page's own image. Source file lives in the repo root
   (agents-page-header-bg.webp, 2400x1020) alongside the other
   shared images, not inside /agents/, so the path below climbs
   two levels from assets/css/ to the repo root. */
#page-hero.hero-with-photo--agents {
  background-image: url('../../agents-page-header-bg.webp');
}
/* ── Agents hero photo: mobile-only crop fix (2026-07-10) ──
   Same thin-band problem as the lenders photo: at the default
   100% auto size, a 2400x1020 image compresses to roughly a
   166px band on a 390px phone, and the fixed nav can eat most
   of that. This image's subject (buyer couple, agent and the
   screen they're reviewing) sits center-right in the frame, with
   a text-safe cream fade on the left third. On mobile, scale up
   and shift right to keep the people and the screen in view
   instead of the empty fade or the far-right window/mountain
   view. Tune the 80%/210% pair below if the crop isn't centered
   right on an actual device. */
@media (max-width: 640px) {
  #page-hero.hero-with-photo--agents {
    background-size: 210% auto;
    background-position: 80% top;
  }
}

/* ── Campaign Path: alternating image/text rows (2026-07-08, round 3) ──
   Reuses .split-grid / .split-grid.reverse (already used elsewhere)
   for the alternating layout. Image <div> always comes first in the
   DOM on every row so mobile (which collapses to one column) always
   shows image-above-copy regardless of which side it's on at desktop
   width — .split-grid.reverse only swaps the desktop column order. */
.campaign-row { margin-bottom: 64px; }
.campaign-row:last-child { margin-bottom: 0; }
.campaign-row__media img {
  display: block; width: 100%; height: auto;
  border-radius: 16px; box-shadow: 0 14px 40px rgba(12,45,94,0.14);
  border: 1px solid var(--warm-gray);
}
.campaign-row__num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.campaign-row__content h3 { font-size: 22px; margin-bottom: 12px; color: var(--navy); }
.campaign-row__content p { font-size: 15px; color: #5c5c5c; line-height: 1.65; }

/* ── Partner Review Modal (2026-07-08, round 5) ──────────────────────
   Custom-styled, matches site's navy/gold/cream system. No dependency
   on any external form library — vanilla HTML/CSS/JS. Submission is
   wired to a placeholder function (see the JS in lenders/index.html)
   until a real endpoint (HubSpot/MailerLite/Formspree/Netlify Forms)
   is connected. */
.btn { cursor: pointer; }
button.btn { font: inherit; }

.pm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(12,45,94,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pm-overlay[hidden] { display: none; }

.pm-modal {
  position: relative;
  background: var(--cream);
  width: 100%; max-width: 640px;
  max-height: 90vh;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(12,45,94,0.45);
  border: 1px solid var(--warm-gray);
  overflow: hidden;
}
.pm-modal__scroll {
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 40px 32px;
}

.pm-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(12,45,94,0.06); border: none;
  color: var(--navy); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition);
}
.pm-close:hover { background: var(--gold); color: #fff; transform: rotate(90deg); }

.pm-modal__header { margin-bottom: 26px; padding-right: 30px; }
.pm-modal__header h2 { font-size: clamp(24px, 3vw, 30px); margin: 6px 0 12px; }
.pm-intro { font-size: 15.5px; color: #555; line-height: 1.6; max-width: 520px; }

.pm-form { display: flex; flex-direction: column; gap: 18px; }
.pm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pm-field { display: flex; flex-direction: column; gap: 6px; }

.pm-label { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--navy); }
.pm-req { color: var(--gold); }
.pm-optional { font-weight: 400; color: #888; font-size: 12.5px; }

.pm-input {
  font-family: var(--font-body); font-size: 15px; color: var(--navy);
  background: #fff; border: 1.5px solid var(--warm-gray); border-radius: 10px;
  padding: 12px 14px; transition: var(--transition); width: 100%;
}
.pm-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,151,58,0.15); }
.pm-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%230C2D5E' d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.pm-textarea { resize: vertical; min-height: 84px; font-family: var(--font-body); }

.pm-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; }
.pm-checkbox-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #444; cursor: pointer; font-weight: 400;
}
.pm-checkbox-item input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }

.pm-submit { width: 100%; justify-content: center; margin-top: 6px; }
.pm-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.pm-microcopy { font-size: 12.5px; color: #888; text-align: center; margin-top: 12px; line-height: 1.5; }

.pm-success { text-align: center; padding: 30px 10px 10px; }
.pm-success__icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--gold); color: #fff; font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pm-success__text { font-size: 16px; color: var(--navy); line-height: 1.6; max-width: 440px; margin: 0 auto; }
.pm-success:focus { outline: none; }

@media (max-width: 640px) {
  .pm-modal__scroll { padding: 32px 22px 26px; }
  .pm-field-row { grid-template-columns: 1fr; gap: 18px; }
  .pm-overlay { padding: 12px; align-items: flex-end; }
  .pm-modal { max-height: 92vh; border-radius: 18px 18px 0 0; }
  .pm-modal__scroll { max-height: 92vh; }
}