/* ==========================================================================
   Cline Insurance — Version 3 ("Layered World") + Agents page
   Rebuilt from the compiled Claude Design export into hand-maintainable CSS.
   Breakpoints mirror the original component's three-tier system:
     wide   : >= 1120px
     narrow : 700px – 1119px  (also called "mid" for hero-art sizing)
     phone  : < 700px
   ========================================================================== */

:root {
  --navy: #0b2b45;
  --navy-deep: #08203a;
  --navy-mid: #173857;
  --navy-mid-2: #0d3050;
  --navy-soft: #43536a;
  --cream: #f8f6f1;
  --stone: #efece5;
  --card-bg: #fdfaf4;
  --gold: #b08d57;
  --gold-deep: #8f6b33;
  --gold-pale: #d9c39a;
  --gold-line: rgba(176, 141, 87, 0.34);
  --border-gold-soft: rgba(176, 141, 87, 0.22);
  --border-gold-mid: rgba(176, 141, 87, 0.28);
  --ink-on-navy: #cfdce7;
  --ink-on-navy-soft: #a9bdd0;

  /* Agents page palette */
  --espresso: #091f34; /* preview: was #1c1408 (brown) - swapped to the old V2 header's blue, rgb(9,31,52) */
  --blush: #e5bfa5;
  --blush-ink: #2b1706;
  --amber: #8f5201;
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-400: #94a3b8;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label: 'Geist', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;

  --ease: cubic-bezier(.16, .84, .28, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
}
body {
  font-family: var(--font-body);
  color: var(--navy);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { color: var(--navy); }
button { font: inherit; }
*:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { color: #fff; opacity: .92; }
.btn-outline {
  border: 1px solid #c8cfd8;
  background: rgba(255, 255, 255, .6);
  color: var(--navy);
}
.btn-outline:hover { color: var(--navy); border-color: var(--gold); }
.btn-gold {
  background: linear-gradient(160deg, #d3b177, #b18f56);
  color: #231404;
  font-weight: 500;
}
.btn-gold:hover { color: #231404; opacity: .92; }
.btn-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  font-size: 12px;
}

/* ============ HEADER ============ */
.site-header {
  position: relative;
  z-index: 40;
  background: var(--navy);
  border-bottom: 1px solid var(--gold-line);
}
.site-header .wrap {
  padding: 22px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header .logo {
  height: 50px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
.logo-link { display: inline-flex; flex-shrink: 0; }
.site-header nav {
  display: flex;
  gap: 32px;
  align-items: center;
  margin: 0 auto;
}
.site-header nav a {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(232, 241, 248, .80);
  white-space: nowrap;
}
.site-header nav a:first-child { color: #fff; }
.site-header nav a:hover { color: #fff; }

.menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 16px;
  border: 1px solid rgba(176, 141, 87, .55);
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #f0e2c6;
  cursor: pointer;
}
.menu-btn .bars { display: grid; gap: 3px; }
.menu-btn .bars span { display: block; width: 16px; height: 1.5px; background: #d9c39a; }

.header-actions { display: flex; gap: 12px; align-items: center; margin-left: auto; flex-shrink: 0; }
.btn-for-agents {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(216, 189, 139, .55);
  background: transparent;
  border-radius: 6px;
  font-size: 14px;
  color: #f0e2c6;
  cursor: pointer;
}
.btn-for-agents:hover { color: #f0e2c6; border-color: var(--gold); }
.btn-talk-agent {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  background: var(--gold);
  color: #231404;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.btn-talk-agent:hover { color: #231404; opacity: .92; }
@media (max-width: 699px) {
  /* Logo + hamburger + this button no longer fit on one row below ~536px;
     the mobile menu's phone link covers the same "talk to an agent" intent. */
  .header-actions { display: none; }
}

/* ============ MOBILE FULLSCREEN MENU ============ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  animation: riseSoft .34s var(--ease) both;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(110% 70% at 92% -6%, rgba(176, 141, 87, .22), rgba(176, 141, 87, 0) 62%);
}
.mobile-menu-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 6vw, 32px);
  border-bottom: 1px solid rgba(176, 141, 87, .32);
}
.mobile-menu-head img { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: .94; }
.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
}
.mobile-menu nav {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(18px, 5vw, 28px) clamp(20px, 6vw, 32px) 20px;
  display: flex;
  flex-direction: column;
}
.mobile-menu nav a, .mobile-menu nav .menu-cta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 400;
  letter-spacing: -.01em;
  cursor: pointer;
}
.mobile-menu nav .menu-cta {
  color: rgba(255, 255, 255, .72);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.mobile-menu nav a .num { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; color: rgba(176, 141, 87, .95); }
.mobile-menu-foot {
  position: relative;
  padding: 18px clamp(20px, 6vw, 32px) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(176, 141, 87, .32);
  display: grid;
  gap: 12px;
}
.mobile-menu-foot a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 10px;
  font-weight: 700;
  font-size: 17px;
}
.mobile-menu-foot .hours { text-align: center; font-size: 13px; color: rgba(255, 255, 255, .55); }

/* ============ TALK TO AN AGENT MODAL ============ */
.talk-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.talk-modal[hidden] { display: none; }
.talk-modal-backdrop { position: absolute; inset: 0; background: rgba(9, 31, 52, .6); backdrop-filter: blur(2px); animation: fadeIn .25s var(--ease) both; }
.talk-modal-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: min(640px, 88vh);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(9, 31, 52, .45);
  animation: riseSoft .3s var(--ease) both;
  overflow: hidden;
}
.talk-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: rgba(11, 43, 69, .06); color: var(--navy);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.talk-modal-close:hover { background: rgba(11, 43, 69, .12); }
.talk-modal-tabs { display: flex; border-bottom: 1px solid var(--border-gold-soft); flex-shrink: 0; }
.talk-tab-btn {
  flex: 1 1 50%; border: 0; background: none; cursor: pointer;
  padding: 20px 16px 16px; font-family: var(--font-label); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--navy-soft); border-bottom: 2px solid transparent;
}
.talk-tab-btn.active { color: var(--navy); border-bottom-color: var(--gold); }
.talk-tab-panel { padding: 28px 28px 24px; overflow-y: auto; flex: 1 1 auto; }
.talk-tab-panel[hidden] { display: none; }

.talk-call-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; width: 100%; background: var(--navy); color: #fff;
  border-radius: 12px; font-weight: 600; font-size: 17px;
}
.talk-call-btn:hover { color: #fff; opacity: .92; }
.talk-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 13px; color: var(--slate-400); }
.talk-divider::before, .talk-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-gold-soft); }
.talk-callback-form { display: grid; gap: 14px; }
.talk-callback-form label { display: grid; gap: 6px; }
.talk-callback-form label span { font-size: 13px; font-weight: 600; color: var(--slate-700); }
.talk-callback-form input {
  min-height: 46px; padding: 0 14px; font-family: var(--font-body); font-size: 15px;
  border: 2px solid #dbe3ec; border-radius: 8px;
}
.talk-callback-submit {
  min-height: 48px; margin-top: 4px; background: var(--gold); color: #231404;
  border: 0; border-radius: 8px; font-weight: 600; font-size: 15px; cursor: pointer;
}
.talk-callback-submit:hover { opacity: .92; }
.talk-callback-submit:disabled { opacity: .6; cursor: default; }
.talk-callback-status { font-size: 14px; color: var(--gold-deep); font-weight: 600; }

.talk-chat-intro { font-size: 14px; color: var(--navy-soft); margin-bottom: 16px; }
.talk-chat-messages { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; margin-bottom: 12px; }
.talk-chat-bubble { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; max-width: 88%; }
.talk-chat-bubble-user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.talk-chat-bubble-assistant { align-self: flex-start; background: var(--stone); color: var(--navy); border-bottom-left-radius: 4px; }
.talk-chat-typing { opacity: .6; font-style: italic; }
.talk-chat-escalate {
  font-size: 13px; color: var(--slate-600); background: var(--stone); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px;
}
.talk-chat-escalate[hidden] { display: none; }
.talk-chat-escalate button {
  border: 0; background: none; color: var(--gold-deep); font-weight: 700; cursor: pointer; font-size: 13px; padding: 0;
}
.talk-chat-form { display: flex; gap: 8px; }
.talk-chat-form input {
  flex: 1 1 auto; min-height: 46px; padding: 0 14px; font-family: var(--font-body); font-size: 15px;
  border: 2px solid #dbe3ec; border-radius: 999px;
}
.talk-chat-form button {
  width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 18px; cursor: pointer;
}
.talk-chat-form button:hover { opacity: .92; }

@media (max-width: 699px) {
  .talk-modal-panel { max-width: 100%; }
  .talk-tab-panel { padding: 22px 18px 18px; }
}

/* ============ LEGAL PAGES (Terms / Privacy) ============ */
.legal-header { background: var(--navy); }
.legal-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 22px 40px; }
.legal-header .logo { height: 42px; width: auto; filter: brightness(0) invert(1); }
.legal-header a.phone { color: var(--gold-pale); font-weight: 600; font-size: 15px; }
.legal-content { max-width: 720px; margin: 0 auto; padding: 72px 40px 96px; }
.legal-content .eyebrow { font-family: var(--font-label); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 16px; }
.legal-content h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 44px); font-weight: 400; color: var(--navy); margin: 0 0 8px; }
.legal-content .updated { font-size: 14px; color: var(--slate-400); margin-bottom: 40px; }
.legal-content .draft-notice {
  background: var(--stone); border: 1px solid var(--border-gold-mid); border-radius: 12px;
  padding: 18px 22px; font-size: 15px; color: var(--navy-soft); margin-bottom: 44px;
}
.legal-content h2 { font-size: 20px; color: var(--navy); margin: 40px 0 12px; }
.legal-content p, .legal-content li { font-size: 16px; line-height: 1.75; color: var(--navy-soft); }
.legal-content ul { padding-left: 22px; }
@media (max-width: 699px) {
  .legal-header .wrap { padding: 18px 20px; }
  .legal-content { padding: 48px 20px 64px; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  background: var(--cream);
  padding: 104px 40px 20px;
  min-height: 1520px;
}
/* Clips only the oversized decorative art layer to the hero's own box —
   NOT applied to .hero directly, since overflow:hidden on an ancestor of
   .hero-copy would break its position:sticky. */
.hero-art-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-art {
  position: absolute;
  top: 96px;
  right: -625px;
  width: 700px;
  height: 700px;
  pointer-events: none;
  transform: scale(1.96);
  transform-origin: top right;
}
.hero-art .sphere {
  position: absolute;
  left: 259px;
  top: -76px;
  width: 145px;
  height: 144px;
  border-radius: 50%;
  background: linear-gradient(155deg, #e8d0a3 0%, #b08d57 55%, #8f6b33 100%);
  box-shadow: 0 12px 34px rgba(176, 141, 87, .28);
  will-change: transform;
}
.hero-art .rings { position: absolute; inset: 0; will-change: transform; }
.hero-art .rings i {
  position: absolute;
  border: 1px solid rgba(176, 141, 87, .42);
  border-radius: 50%;
  display: block;
}
.hero-art .rings i:nth-child(1) { inset: 0; }
.hero-art .rings i:nth-child(2) { inset: 26px; opacity: .92; }
.hero-art .rings i:nth-child(3) { inset: 52px; opacity: .83; }
.hero-art .rings i:nth-child(4) { inset: 78px; opacity: .75; }
.hero-art .rings i:nth-child(5) { inset: 104px; opacity: .67; }
.hero-art .rings i:nth-child(6) { inset: 130px; opacity: .58; }
.hero-art .rings i:nth-child(7) { inset: 156px; opacity: .5; }
.hero-art .rings i:nth-child(8) { inset: 182px; opacity: .42; }
.hero-art .photo {
  position: absolute;
  left: 74px;
  top: 74px;
  width: 512px;
  height: 512px;
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(9, 31, 52, .26);
  overflow: hidden;
  will-change: transform;
}
.hero-art .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%; }
.hero-art .photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(9, 31, 52, .80) 0%, rgba(13, 40, 66, .66) 40%, rgba(6, 24, 42, .88) 100%);
}
.hero-art .photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(176, 141, 87, .45);
}

/* min-height (not height:100%) matches .hero's own tiered min-height values
   explicitly below — a child's height:100% isn't reliably resolved when the
   parent is only sized by min-height (height:auto), so this mirrors the
   values directly instead of relying on that percentage behavior. This is
   what gives .hero-copy's position:sticky the right release point. */
.hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding-bottom: 0; min-height: 1520px; }
.hero-copy { position: sticky; top: 96px; max-width: min(580px, 44%); padding-bottom: 80px; }
.hero-kicker { font-family: var(--font-label); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 30px; }
.hero h1 {
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: pretty;
}
/* inline-block (not plain inline) so the wipe animation's clip-path/transform
   apply to one unified box — on a plain inline element, clip-path fragments
   per line-box when the text wraps, and browsers can leave a wrapped line
   permanently invisible even after the animation reports fully complete. */
.hero h1 em { display: inline-block; font-style: italic; color: var(--gold-deep); }
.hero-rule { width: 64px; height: 2px; background: var(--gold); margin: 38px 0 30px; }
.hero p.lede { margin: 0 0 38px; max-width: 500px; font-size: 17px; line-height: 1.75; color: var(--navy-soft); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* footstep trail — decorative, simplified from the original scroll-linked path animation.
   Sits as a direct child of .hero (not nested in .hero-inner), so its positioning is
   independent of .hero-copy's sticky container and always relative to the stable,
   tier-matched .hero box.
   Two separate full-size paths, not one path scaled down: a scale/transform approach
   was tried first, but shrinking the same 960x1020 box just made the footprints
   smaller without fixing the real problem (it still needs to fit a narrower
   viewport). Instead .foot-trail-wide (>=1700px, the original 960x1020 box
   starting at left:540/top:550, clear of the hero-copy column — see FOOT_POSITIONS
   in site.js) and .foot-trail-narrow (1120-1699px, a tighter 700x950 box starting
   at left:40/top:420 — see FOOT_POSITIONS_NARROW in site.js) are two independent,
   full-size footprint sets; exactly one is shown at a time via the media queries
   below. The narrow path runs close enough to the hero copy that it can cross
   through the headline/lede text at this width — accepted tradeoff so the trail
   stays visible and full-size rather than legible-but-shrunk or clipped. Hidden
   entirely below 1120px (the hero switches to the stacked/narrow layout and
   neither fixed-pixel path applies). */
.foot-trail { position: absolute; z-index: 3; inset: 0; pointer-events: none; display: none; }
.foot-trail-wide .field { position: absolute; left: 540px; top: 550px; width: 960px; height: 1020px; }
.foot-trail-narrow .field { position: absolute; left: 40px; top: 420px; width: 700px; height: 950px; }
@media (min-width: 1700px) {
  .foot-trail-wide { display: block; }
}
@media (min-width: 1120px) and (max-width: 1699px) {
  .foot-trail-narrow { display: block; }
}
.footprint {
  position: absolute;
  width: 22px;
  height: 38px;
  opacity: 0;
  transition: opacity 1s ease;
}
.footprint.is-in { opacity: .55; }
.footprint span { position: absolute; border-radius: 50%; background: rgba(168, 129, 74, .5); display: block; }
.footprint .heel { left: 6px; top: 0; width: 11px; height: 13px; }
.footprint .ball { left: 2px; top: 17px; width: 18px; height: 14px; border-radius: 56% 44% 44% 56% / 58% 58% 42% 42%; }
.footprint .t1 { left: 1px; bottom: 0; width: 6.5px; height: 6.5px; }
.footprint .t2 { left: 8.5px; bottom: 1px; width: 5px; height: 5px; }
.footprint .t3 { left: 14.5px; bottom: 2.5px; width: 4px; height: 4px; }

/* ============ PHILOSOPHY ============ */
.philosophy {
  position: relative;
  background: radial-gradient(120% 90% at 22% 18%, #163b5c 0%, #0e2c47 48%, #08203a 100%);
  overflow: hidden;
  min-height: 560px;
}
.phil-photo { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.phil-photo .frame { position: absolute; right: 0; top: 0; bottom: 0; width: 54%; overflow: hidden; }
.phil-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 45%; }
.phil-photo .frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(255deg, rgba(239, 236, 229, 0) 34%, rgba(14, 44, 71, .34) 100%);
}
.phil-blob {
  position: absolute;
  left: 40px;
  top: -40px;
  bottom: -40px;
  width: 83%;
  height: 647px;
  pointer-events: none;
  will-change: transform;
}
.phil-blob-fill {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 22% 18%, #163b5c 0%, #0e2c47 48%, #08203a 100%);
  clip-path: url(#philBlobClip);
  box-shadow: 0 40px 100px rgba(8, 32, 58, .32);
  width: calc(83% - 60px);
  height: 647px;
}
.phil-gold-line {
  position: absolute;
  left: 6%;
  right: 14%;
  bottom: 74px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 141, 87, .55) 30%, rgba(176, 141, 87, .15));
}
.philosophy .inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 108px 40px 118px; }
.philosophy .copy { max-width: min(600px, 52%); }
.philosophy .eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; color: var(--gold); }
.philosophy .eyebrow::after { content: ''; width: 46px; height: 1px; background: rgba(176, 141, 87, .6); }
.philosophy h2 { font-size: 40px; line-height: 1.18; letter-spacing: -.015em; margin: 0 0 52px; color: #fff; }
.phil-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.phil-values .icon { width: 22px; height: 18px; border: 1.5px solid var(--gold); border-radius: 4px 4px 4px 0; margin-bottom: 20px; }
.phil-values > div:nth-child(2) .icon { width: 20px; height: 20px; border-radius: 50% 50% 4px 50%; transform: rotate(45deg); }
.phil-values > div:nth-child(3) .icon { width: 20px; height: 20px; border-radius: 50%; }
.phil-values .title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.phil-values p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-on-navy-soft); }
.phil-mobile-photo { display: none; margin-top: 48px; height: 300px; border-radius: 20px; overflow: hidden; position: relative; }
.phil-mobile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; box-shadow: inset 0 0 0 1px rgba(176, 141, 87, .35); border-radius: 20px; }

/* ============ START HERE ============ */
.start-here { background: var(--cream); padding: 96px 40px; }
.start-here h2 { font-size: 40px; line-height: 1.18; letter-spacing: -.015em; margin: 0 0 44px; color: var(--navy); }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.start-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border-gold-soft);
  border-radius: 18px;
  padding: clamp(24px, 5.5vw, 36px) clamp(20px, 5vw, 32px);
  color: var(--navy);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .35s ease, background-color .55s ease;
}
.start-card:hover {
  color: var(--navy);
  border-color: rgba(176, 141, 87, .9);
  background-color: #fffdf9;
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(176, 141, 87, .35), 0 10px 24px -6px rgba(11, 43, 69, .14), 0 26px 60px -18px rgba(143, 107, 51, .28);
}
.start-card .title { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--navy); margin-bottom: 14px; }
.start-card p { margin: 0 0 22px; font-size: 16px; line-height: 1.7; color: var(--navy-soft); }
.start-card .link { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }

/* ============ COVERAGE CHECK ============ */
.coverage-check {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.coverage-check .geo {
  position: absolute;
  left: 0; right: 0; top: -30%; height: 160%;
  pointer-events: none;
}
.coverage-check .geo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 88px);
}
.coverage-check .geo-shard-1 {
  position: absolute; left: -8%; top: -6%; width: 52%; height: 104%;
  background: linear-gradient(118deg, rgba(176, 141, 87, .30) 0%, rgba(176, 141, 87, .08) 44%, rgba(176, 141, 87, 0) 74%);
  clip-path: polygon(0 24%, 60% 0, 100% 36%, 44% 100%, 0 76%);
}
.coverage-check .geo-shard-2 {
  position: absolute; right: -6%; top: -18%; width: 46%; height: 120%;
  border: 1px solid rgba(176, 141, 87, .26);
  clip-path: polygon(34% 0, 100% 26%, 74% 100%, 0 62%);
}
.coverage-check .geo-ring {
  position: absolute; right: 8%; top: -10%; width: 280px; height: 280px;
  border-radius: 50%; border: 1px solid rgba(176, 141, 87, .20);
}
.coverage-check .inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.coverage-check h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 12px; color: #fdfaf4; }
.coverage-check p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-on-navy); }
.state-check-form { display: flex; gap: 12px; flex-wrap: wrap; }
.state-check-form select {
  flex: 1;
  min-width: 220px;
  min-height: 54px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--navy);
  background: var(--card-bg);
  border: 1px solid rgba(176, 141, 87, .75);
  border-radius: 8px;
}
.state-check-form button {
  min-height: 54px;
  padding: 0 28px;
  background: var(--gold);
  color: #231404;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.state-check-form button:hover { opacity: .92; }
.state-message { margin-top: 14px; font-size: 16px; color: #e0cfaa; min-height: 26px; }
.state-message a { color: var(--gold); font-weight: 600; }
.state-browse-all-link { display: inline-block; margin-top: 10px; font-size: 14px; color: #b9c9da; }
.state-browse-all-link:hover { color: var(--gold); }

.state-link {
  display: block;
  padding: 14px 18px;
  background: var(--cream);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}
.state-link:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ============ COVERAGE / PRODUCTS ============ */
.coverage {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-top: 1px solid var(--border-gold-mid);
  padding: 96px 40px;
}
.coverage h2 { font-size: 40px; line-height: 1.18; letter-spacing: -.015em; margin: 0 0 44px; color: var(--navy); }
/* coverage footstep trail — only shown on wide monitors (original: viewport >= 1400px),
   same footprint shape as the hero trail, percentage-positioned down the section. */
.coverage-trail { position: absolute; inset: 0; pointer-events: none; z-index: 0; display: none; }
.coverage-trail .field { position: absolute; inset: 0; }
@media (min-width: 1400px) { .coverage-trail { display: block; } }
.coverage .wrap { position: relative; z-index: 1; }
.product-card {
  background: #fff;
  border: 1px solid var(--border-gold-soft);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 43, 69, .04);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .35s ease;
}
/* .product-card.product-card:hover (class doubled): [data-reveal].is-in sets
   transform too, at equal specificity but later in the file, so it would
   otherwise win and cancel this lift once the card has been revealed -
   which is always, by the time it can be hovered. */
.product-card.product-card:hover {
  border-color: rgba(176, 141, 87, .9);
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(176, 141, 87, .35), 0 10px 24px -6px rgba(11, 43, 69, .14), 0 26px 60px -18px rgba(143, 107, 51, .28);
}
.product-card .head {
  position: relative;
  padding: 20px clamp(18px, 5vw, 28px);
  min-height: 70px;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--navy-mid-2), var(--navy));
  border-bottom: 2px solid rgba(176, 141, 87, .9);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.product-card:nth-child(2) .head { background: linear-gradient(180deg, #1a3f61, #173857); }
.product-card:nth-child(3) .head { background: linear-gradient(180deg, #123a5c, #0f3253); }
.product-card .head .n { font-family: var(--font-display); font-size: 13px; font-style: italic; color: rgba(176, 141, 87, .95); letter-spacing: .02em; }
.product-card .head .divider { width: 1px; height: 11px; background: rgba(255, 255, 255, .22); }
.product-card .head .label { font-family: var(--font-label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .94); }
.product-card .body { padding: 10px clamp(18px, 5vw, 28px) 24px; }
.product-card .item-row { border-bottom: 1px solid rgba(176, 141, 87, .18); }
.product-card .item-row:last-of-type { border-bottom: 0; }
.product-card .item {
  display: block;
  width: 100%;
  position: relative;
  padding: 17px 30px 17px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: transform .45s var(--ease), color .3s ease;
}
.product-card .item:hover { transform: translateX(8px); color: var(--gold-deep); }
.product-card .item .desc { font-size: 14px; font-weight: 400; color: var(--navy-soft); margin-top: 4px; }
.product-card .item-toggle {
  position: absolute; right: 0; top: 17px; font-size: 20px; font-weight: 400; line-height: 1;
  color: var(--gold-deep); transition: transform .3s ease;
}
.product-card .item[aria-expanded="true"] .item-toggle { transform: rotate(45deg); }
.product-card .item-detail { padding: 0 0 22px; }
.product-card .item-detail p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--navy-soft); }
.product-card .item-benefits { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.product-card .item-benefits li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--navy-soft); }
.product-card .item-benefits li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--gold-deep); font-weight: 600; }

/* Real carrier logos (homepage card expansion + product landing pages).
   Logos sit on their own white chip so they read cleanly regardless of the
   section's background. The source files have a lot of built-in white
   margin around the actual mark, so the box clips an oversized, centered
   copy of the image instead of just fitting the whole (mostly blank) frame -
   that's what actually makes the logo fill the box. */
.carrier-logos { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.carrier-logo-box {
  position: relative; width: 170px; height: 68px; overflow: hidden; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border-gold-soft); border-radius: 10px;
}
.carrier-logo-box img {
  position: absolute; top: 50%; left: 50%; width: 210%; height: 210%;
  transform: translate(-50%, -50%); object-fit: contain;
}
.carrier-text-list { margin-top: 10px; font-size: 13px; color: var(--slate-400); }
.product-step .carrier-logos { margin-top: 22px; }
.product-step .carrier-logo-box { width: 210px; height: 84px; }
.product-step .carrier-text-list { font-size: 14px; color: var(--navy-soft); }
.product-card .item-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.product-card .item-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px;
  background: var(--navy); color: #fff; border: 0; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.product-card .item-cta:hover { color: #fff; opacity: .9; }
.product-card .item-learn-more { font-size: 14px; font-weight: 600; color: var(--gold-deep); }
.product-card .item-learn-more:hover { color: var(--navy); }
.product-card .item-disclaimer { font-size: 12px; font-style: italic; color: var(--slate-400); margin: 0; }
.product-card .note {
  margin-top: 18px;
  padding: 20px;
  background: var(--stone);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--navy-soft);
}
.coverage-loading, .coverage-empty { grid-column: 1 / -1; color: var(--navy-soft); font-size: 15px; padding: 24px 0; }

/* ============ TESTIMONIALS ============ */
.testimonials { position: relative; overflow: hidden; background: var(--stone); padding: 300px 40px 96px; }
.testimonials-photo {
  position: absolute;
  right: 0;
  top: 0;
  width: min(1160px, 76vw);
  aspect-ratio: 2752 / 1536;
  pointer-events: none;
}
.testimonials-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  mask-image: radial-gradient(48% 47% at 51% 44%, #000 50%, rgba(0, 0, 0, .97) 68%, rgba(0, 0, 0, .6) 82%, rgba(0, 0, 0, .2) 93%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: radial-gradient(48% 47% at 51% 44%, #000 50%, rgba(0, 0, 0, .97) 68%, rgba(0, 0, 0, .6) 82%, rgba(0, 0, 0, .2) 93%, rgba(0, 0, 0, 0) 100%);
}
.testimonials .inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.testimonials h2 { font-size: 40px; line-height: 1.18; letter-spacing: -.015em; margin: 0 0 44px; color: var(--navy); max-width: 9.5em; }
.quote-card {
  margin: 0; padding: clamp(26px, 5.5vw, 36px) clamp(20px, 5vw, 32px); background: #fff;
  border-radius: 18px; border: 1px solid var(--border-gold-soft);
  box-shadow: 0 1px 2px rgba(11, 43, 69, .04);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s ease;
}
/* Doubled class for the same reason as .product-card.product-card:hover
   above - beats [data-reveal].is-in's transform at equal specificity. */
.quote-card.quote-card:hover {
  transform: translateY(-6px);
  border-color: rgba(176, 141, 87, .9);
  box-shadow: 0 1px 0 rgba(176, 141, 87, .35), 0 10px 24px -6px rgba(11, 43, 69, .14), 0 26px 60px -18px rgba(143, 107, 51, .28);
}
.quote-card .mark { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--gold); margin-bottom: 14px; }
.quote-card blockquote { margin: 0 0 24px; font-size: 17px; line-height: 1.7; color: var(--navy); }
.quote-card figcaption { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.testimonials-more { margin-top: 32px; }
.testimonials-more a { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }

/* ============ TRUST STRIP ============ */
.trust-strip { position: relative; z-index: 3; background: var(--cream); padding: 40px 0; }
.trust-strip .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 40px 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.trust-item { display: flex; align-items: center; gap: 18px; }
.trust-item + .trust-item { border-left: 1px solid rgba(11, 43, 69, .12); padding-left: 40px; }
.trust-item .icon-circle {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--navy-mid);
}
.trust-item .icon-circle i { display: block; border: 1.5px solid var(--gold-deep); }
.trust-item:nth-child(1) .icon-circle i { width: 16px; height: 19px; border-radius: 3px 3px 8px 8px; }
.trust-item:nth-child(2) .icon-circle i { width: 15px; height: 15px; border-radius: 50% 4px 50% 50%; }
.trust-item:nth-child(3) .icon-circle i { width: 20px; height: 12px; border-radius: 10px 10px 3px 3px; }
.trust-item .copy { font-size: 15px; line-height: 1.55; color: var(--navy-soft); }
.trust-item .copy a { color: var(--navy); }

/* ============ TEAM ============ */
.team { background: var(--cream); padding-bottom: 40px; }
.team .inner { max-width: 1240px; margin: 0 auto; padding: 40px 40px; }
.team-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.team-head h2 { font-size: 40px; line-height: 1.18; letter-spacing: -.015em; color: var(--navy); }
.team-head p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--navy-soft); }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.team-card { text-align: center; }
.team-card .photo {
  position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1 / 1;
  background: var(--stone); box-shadow: inset 0 0 0 1px rgba(176, 141, 87, .30);
}
.team-card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.team-card .name { margin-top: 16px; font-family: var(--font-display); font-size: 18px; color: var(--navy); }
.team-card .role { font-size: 13px; color: var(--navy-soft); margin-top: 2px; }
.team-empty { grid-column: 1 / -1; color: var(--navy-soft); font-size: 15px; }

/* ============ AGENT STRIP ============ */
.agent-strip { background-color: var(--navy-mid); }
.agent-strip .inner {
  max-width: 1240px; margin: 0 auto; padding: 52px 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.agent-strip .title { font-size: 26px; color: #fff; margin-bottom: 6px; }
.agent-strip p { margin: 0; font-size: 16px; color: #c2d3e2; }
.agent-strip button { min-height: 54px; padding: 0 30px; border-radius: 8px; font-size: 16px; }

/* ============ LANDSCAPE ============ */
.landscape { position: relative; background: var(--cream); overflow: hidden; }
.landscape .intro { position: relative; z-index: 3; max-width: 820px; margin: 0 auto; padding: 96px 40px 0; text-align: center; }
.landscape h2 { font-size: 40px; line-height: 1.2; letter-spacing: -.015em; color: var(--navy); }
.landscape .rule { width: 64px; height: 2px; background: var(--gold); margin: 34px auto; }
.landscape p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--navy-soft); }
.landscape-scene { position: relative; height: 470px; margin-top: 56px; }
.land-rings {
  position: absolute; left: 50%; bottom: 44%; width: 230px; height: 230px; margin-left: -115px; pointer-events: none;
}
.land-rings i { position: absolute; border: 1px solid rgba(176, 141, 87, .30); border-radius: 50%; display: block; }
.land-rings i:nth-child(1) { inset: 0; }
.land-rings i:nth-child(2) { inset: 16px; opacity: .87; }
.land-rings i:nth-child(3) { inset: 32px; opacity: .73; }
.land-rings i:nth-child(4) { inset: 48px; opacity: .6; }
.land-sun {
  position: absolute; left: 50%; bottom: 42%; width: 154px; height: 154px; margin-left: -77px; border-radius: 50%;
  background: linear-gradient(160deg, #f0dcb4 0%, #d9b681 60%, #c19a63 100%); pointer-events: none;
}
.mtn-far { position: absolute; left: -8%; right: -8%; bottom: 22%; height: 132px; background: linear-gradient(180deg, #b9c6d4, #a3b3c5); border-radius: 56% 44% 0 0 / 100% 100% 0 0; pointer-events: none; }
.mtn-mid-l { position: absolute; left: -16%; right: 34%; bottom: 11%; height: 148px; background: linear-gradient(180deg, #7f93a9, #5f7590); border-radius: 0 62% 0 0 / 0 100% 0 0; pointer-events: none; }
.mtn-mid-r { position: absolute; left: 40%; right: -14%; bottom: 9%; height: 168px; background: linear-gradient(180deg, #4b6483, #2d4664); border-radius: 52% 0 0 0 / 100% 0 0 0; pointer-events: none; }
.mtn-near-l { position: absolute; left: -18%; right: 30%; bottom: -44px; height: 230px; background: linear-gradient(178deg, #1e4568 0%, #0d2a45 100%); border-radius: 0 74% 0 0 / 0 100% 0 0; pointer-events: none; }
.mtn-near-r { position: absolute; left: 56%; right: -22%; bottom: -44px; height: 176px; background: linear-gradient(178deg, #22496c 0%, #102e4a 100%); border-radius: 58% 0 0 0 / 100% 0 0 0; pointer-events: none; }

/* ============ FINAL CTA ============ */
.final-cta { position: relative; background: var(--navy-mid); }
.final-cta .inner { max-width: 820px; margin: 0 auto; padding: 80px 40px 96px; text-align: center; }
.final-cta h2 { font-size: 38px; margin: 0 0 14px; color: #fff; }
.final-cta p { margin: 0 0 34px; font-size: 16px; color: #c2d3e2; }
.final-cta button { min-height: 56px; padding: 0 34px; border-radius: 8px; font-size: 16px; }
.final-cta .btn-icon-circle { width: 26px; height: 26px; border-radius: 6px; border-color: rgba(35, 20, 4, .35); font-size: 13px; }
.product-page-disclaimer { margin: 22px 0 0; font-size: 13px; font-style: italic; color: #a9bdd0; }

/* ============ PRODUCT LANDING PAGE (product.html) ============ */
.product-crumb { background: var(--cream); border-bottom: 1px solid var(--gold-line); }
.product-crumb .inner { max-width: 1240px; margin: 0 auto; padding: 16px 40px; font-size: 13px; color: var(--navy-soft); display: flex; align-items: center; gap: 10px; }
.product-crumb a { color: var(--navy-soft); }
.product-crumb a:hover { color: var(--gold-deep); }
.product-crumb .sep { color: var(--gold); }
.product-crumb #crumb-current { color: var(--navy); font-weight: 600; }

.product-hero { position: relative; background: var(--cream); padding: 72px 40px 64px; overflow: hidden; }
.foot-trail-mini { position: relative; display: inline-flex; height: 40px; margin-bottom: 18px; }
.foot-trail-mini .footprint { position: absolute; }
/* right-side hero photo, same gradient-into-background technique as .phil-photo —
   sits behind .inner (which is position:relative, so it stacks above by default
   DOM order) and doesn't touch .foot-trail-mini in the opposite corner. */
.product-hero-photo { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: 0; pointer-events: none; }
.product-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-hero-photo img[src$="medicare-enrollment-periods-hero.jpg"] { object-position: 90% center; }
.product-hero-photo img[src$="medicare-advantage-vs-supplement-hero.jpg"] { object-position: 90% center; }
.product-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(250, 247, 240, 0) 45%);
}
.product-hero .inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.product-hero .eyebrow { font-family: var(--font-label); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 18px; }
.product-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 20px; color: var(--navy); }
.product-hero .lede { margin: 0 0 32px; font-size: 18px; line-height: 1.7; color: var(--navy-soft); }
.product-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.product-walkthrough { background: #fff; padding: 88px 40px; }
.product-walkthrough .inner { max-width: 760px; margin: 0 auto; }
.product-step { display: flex; gap: 28px; }
.product-step[hidden] { display: none; }
.product-step .step-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.product-step .step-n {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--gold-pale); font-family: var(--font-mono); font-size: 13px; flex-shrink: 0;
}
.product-step .step-line { width: 1px; flex: 1 1 auto; background: var(--gold-line); margin: 6px 0; min-height: 24px; }
.product-step .step-body { padding-bottom: 56px; }
.product-step:last-of-type .step-body { padding-bottom: 0; }
.product-step h2 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 0 0 14px; color: var(--navy); }
.product-step p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--navy-soft); }
.product-benefits { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.product-benefits li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--navy-soft); }
.product-benefits li::before { content: '\2713'; position: absolute; left: 0; top: 1px; color: var(--gold-deep); font-weight: 600; }

.related-products { background: var(--cream); padding: 80px 40px; }
.related-products .inner { max-width: 1240px; margin: 0 auto; }
.related-products .eyebrow { font-family: var(--font-label); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 16px; }
.related-products h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 34px); margin: 0 0 36px; color: var(--navy); max-width: 20em; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.related-card { display: block; padding: 26px; background: #fff; border: 1px solid var(--border-gold-soft); border-radius: 14px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(11, 43, 69, .08); }
.related-title { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.related-desc { font-size: 14px; color: var(--navy-soft); }

/* ============ GUIDE BODY (education articles) ============ */
.guide-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; margin: 36px 0 12px; color: var(--navy); }
.guide-body h3:first-child { margin-top: 0; }
.guide-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: var(--navy-soft); }
.guide-body ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.guide-body ul li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--navy-soft); }
.guide-body ul li::before { content: '\2192'; position: absolute; left: 0; color: var(--gold-deep); font-weight: 600; }

/* ============ GUIDES HUB GRID SECTION ============ */
/* Deliberately its own section (not .product-walkthrough, which caps at
   760px for the narrow single-column guide *body* text) — a 3-up card
   grid needs the same wide column .related-products/.feature-grid use,
   or the cards end up squeezed to ~230px each. */
.guides-hub-section { background: #fff; padding: 88px 40px; }
.guides-hub-section .inner { max-width: 1240px; margin: 0 auto; }

/* ============ GUIDE CARD (guides.html hub grid, reuses .feature-card) ============ */
.guide-card { display: block; text-align: left; }
.guide-card-category {
  display: inline-block; font-family: var(--font-label); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); background: rgba(176, 141, 87, .1); border-radius: 999px;
  padding: 4px 10px; margin-bottom: 12px;
}
.guide-card .title { font-weight: 600; font-size: 20px; color: var(--navy); margin-bottom: 10px; }
.guide-card p { margin: 0 0 16px; font-size: 15px; color: var(--slate-600); }
.guide-card-link { font-size: 14px; font-weight: 600; color: var(--gold-deep); }
.guide-card:hover .guide-card-link { color: var(--navy); }

@media (max-width: 699px) {
  .product-hero { padding: 56px 20px 48px; }
  .product-walkthrough { padding: 64px 20px; }
  .guides-hub-section { padding: 56px 20px; }
  .product-step { gap: 18px; }
  .related-products { padding: 56px 20px; }
}

/* ============ FOOTER (consumer) ============ */
.site-footer { background: var(--navy); color: var(--ink-on-navy-soft); border-top: 1px solid rgba(255, 255, 255, .10); }
.site-footer .inner {
  max-width: 1240px; margin: 0 auto; padding: clamp(32px, 6vw, 44px) clamp(20px, 5vw, 40px);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; line-height: 1.7;
}
.site-footer .disclaimer { max-width: 640px; color: #89a2ba; }

/* ==========================================================================
   AGENTS PAGE
   ========================================================================== */
.agents-page { background: #fff; }
.agent-topbar {
  position: relative; z-index: 40; background: rgba(23, 56, 87, .80); /* preview: was rgba(61,43,26,.80) brown */
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #f2e4d6; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.agent-topbar .inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.agent-topbar .links { display: flex; gap: 24px; align-items: center; }
.agent-topbar a { color: #fff; }
.agent-topbar .spark { color: #f0d5bb; font-family: var(--font-label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

/* Same nav layout/typography as .site-header, but colored to blend with this
   page's own espresso hero (it sits directly on top of .agent-hero via the
   hero's negative margin) rather than importing the consumer navy bar. The
   "Consumer site" button is the one deliberate blue accent — an anchor back
   to the other side of the site. (Preview: the whole agent palette is
   temporarily blue below, so this button no longer stands out distinctly -
   worth revisiting if this color direction is kept.) */
.agent-header { position: sticky; top: 0; z-index: 50; background: rgba(9, 31, 52, .82); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(229, 191, 165, .18); padding: 0; }
.agent-header .pill {
  max-width: 1240px; margin: 0 auto; padding: 14px 40px;
  display: flex; align-items: center; gap: 24px; flex-wrap: nowrap;
}
.agent-header .logo { height: 42px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.agent-header nav { display: flex; gap: 24px; align-items: center; flex: 1 1 auto; min-width: 0; }
.agent-header nav a { font-size: 15px; color: rgba(229, 191, 165, .75); padding: 12px 0; white-space: nowrap; }
.agent-header nav a:first-child { color: #fff; font-weight: 500; }
.agent-header nav a:hover { color: #fff; }
.agent-header .actions { display: flex; gap: 14px; align-items: center; flex-shrink: 0; margin-left: auto; }
/* Deliberately navy (not the warm agent palette) — a visual anchor back to
   the consumer side, echoing .site-header's own color. */
.btn-consumer-site {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--navy-mid); background: var(--navy);
  border-radius: 6px; font-size: 14px; color: #fff; cursor: pointer;
}
.btn-consumer-site:hover { color: #fff; background: var(--navy-mid); }
.btn-agent-help {
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(229, 191, 165, .4); background: transparent;
  border-radius: 6px; font-size: 14px; color: var(--blush); cursor: pointer;
}
.btn-agent-help:hover { color: var(--blush); border-color: var(--blush); }
.btn-start-contract {
  display: flex; align-items: center; min-height: 44px; padding: 0 24px; background: var(--amber);
  color: #fff; border-radius: 8px; font-weight: 600; font-size: 15px;
}
.btn-start-contract:hover { color: #fff; opacity: .92; }
@media (max-width: 699px) {
  /* Three buttons plus the logo/hamburger badly overflow below ~709px;
     the shared mobile menu's phone link covers the same intent. */
  .agent-header .actions { display: none; }
}

.agent-hero { position: relative; margin-top: -103px; background: var(--espresso); overflow: hidden; }
/* A real photo of the team, pushed to monochrome brown via filter and faded
   into the espresso background with a gradient — reads as texture emerging
   from the dark ground rather than a distinct inserted image. */
.agent-hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.agent-hero-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: grayscale(1) sepia(.55) brightness(.4) contrast(1.25);
  opacity: .6;
}
/* Radial vignette: subdued (not fully clear) over the center so it stays
   readable as background texture behind the headline, darkening out to the
   edges and resolving fully into the espresso background at the corners. */
.agent-hero-art::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 65% at 50% 44%, rgba(9, 31, 52, .65) 0%, rgba(9, 31, 52, .78) 40%, rgba(9, 31, 52, .9) 68%, var(--espresso) 100%);
}
.agent-hero .inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 191px 40px 96px; }
.agent-hero .eyebrow { font-family: var(--font-label); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--blush); margin-bottom: 28px; }
.agent-hero h1 { font-weight: 300; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 48px; color: #fff; max-width: 16em; }
.agent-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 44px; }
.agent-value-card {
  padding: 40px; background: rgba(229, 191, 165, .10); border: 1px solid rgba(229, 191, 165, .28); border-radius: 18px;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .35s ease;
}
/* Doubled class: [data-reveal].is-in sets transform too, at equal
   specificity but later in the file — beats it the same way
   .product-card.product-card:hover does. */
.agent-value-card.agent-value-card:hover {
  border-color: rgba(229, 191, 165, .75);
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(229, 191, 165, .2), 0 10px 24px -6px rgba(0, 0, 0, .25), 0 26px 60px -18px rgba(229, 191, 165, .18);
}
.agent-value-card .n { font-family: var(--font-mono); font-size: 13px; color: var(--blush); margin-bottom: 18px; }
.agent-value-card .title { font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; color: #fff; margin-bottom: 16px; }
.agent-value-card p { margin: 0; font-size: 18px; color: #d6c3b0; }
.agent-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.agent-hero-ctas .btn-start {
  display: flex; align-items: center; min-height: 56px; padding: 0 34px; background: var(--blush);
  color: var(--blush-ink); border-radius: 10px; font-weight: 700; font-size: 17px;
}
.agent-hero-ctas .btn-start:hover { color: var(--blush-ink); opacity: .92; }
.agent-hero-ctas .btn-phe {
  display: flex; align-items: center; min-height: 56px; padding: 0 34px; border: 2px solid rgba(229, 191, 165, .4);
  color: var(--blush); border-radius: 10px; font-weight: 600; font-size: 17px;
}
.agent-hero-ctas .btn-phe:hover { color: var(--blush); border-color: var(--blush); }
.agent-hero-ctas .hint { font-size: 16px; color: #a08d7c; }

.agent-section { background: #fff; padding: 88px 40px; }
.agent-section.alt { background: var(--stone); }
.agent-section .eyebrow { font-family: var(--font-label); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.agent-section h2 { font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 48px; color: var(--navy); max-width: 18em; }
.agent-section .inner { max-width: 1240px; margin: 0 auto; }

.mechanics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.mechanics-col .title { font-weight: 600; font-size: 24px; color: var(--navy); margin-bottom: 20px; }
.mechanics-list { display: grid; gap: 16px; font-size: 18px; color: var(--slate-700); }
.mechanics-list .row { display: grid; grid-template-columns: 26px 1fr; gap: 14px; }
.mechanics-list .row .arrow { color: var(--amber); font-weight: 700; }
.mechanics-note { margin-top: 24px; padding: 20px 24px; background: #fdf8f3; border-left: 3px solid var(--blush); border-radius: 0 10px 10px 0; font-size: 16px; color: #5c412d; }

/* Agent resource hub (/agent-resources) — one card per carrier, reusing
   .feature-card's box treatment as a base; clicking opens .talk-modal
   (shared with the Talk-to-Agent modal) via #resource-modal. */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.resource-card {
  background: #fff; border: 1px solid #dbe3ec; border-radius: 16px; padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(11, 43, 69, .04);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  cursor: pointer; font-family: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.resource-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgba(11, 43, 69, .18); border-color: var(--gold); }
.resource-card-logo { width: 100%; max-width: 140px; height: 48px; object-fit: contain; }
.resource-card-initial {
  width: 48px; height: 48px; border-radius: 50%; background: var(--stone); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.resource-card-name { font-weight: 600; font-size: 16px; color: var(--navy); }
.resource-card-cta { font-family: var(--font-label); font-size: 12px; letter-spacing: .08em; color: var(--amber); }

.resource-modal-panel { max-width: 420px; }
.resource-modal-body { padding: 40px 28px 28px; }
.resource-modal-title { margin: 0 0 8px; font-size: 22px; font-weight: 600; color: var(--navy); }
.resource-modal-desc { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--slate-600); }
.resource-modal-links { display: grid; gap: 12px; }
.resource-modal-phone, .resource-modal-docs {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 12px; font-weight: 600; font-size: 15px;
  border: 1px solid #dbe3ec; color: var(--navy);
}
.resource-modal-phone:hover, .resource-modal-docs:hover { background: var(--stone); }

/* Password gate (/agent-resources) — client-side deterrent only, not a
   real security boundary; see the code-level warning in site.js. */
.resource-gate { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.resource-gate[hidden] { display: none; }
.resource-gate-panel { max-width: 380px; width: 100%; text-align: center; }
.resource-gate-panel h2 { margin: 8px 0 12px; font-size: 28px; font-weight: 300; color: var(--navy); }
.resource-gate-panel p { margin: 0 0 24px; color: var(--slate-600); }
.resource-gate-panel form { display: flex; flex-direction: column; gap: 12px; }
.resource-gate-panel input {
  height: 48px; padding: 0 16px; border: 1px solid #dbe3ec; border-radius: 10px; font-size: 16px;
}
.resource-gate-error { margin-top: 16px; font-size: 14px; color: #a8442f; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
  background: #fff; border: 1px solid #dbe3ec; border-radius: 16px; padding: 32px;
  box-shadow: 0 1px 2px rgba(11, 43, 69, .04);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .35s ease;
}
/* Doubled class for the same reason as .product-card.product-card:hover. */
.feature-card.feature-card:hover {
  border-color: rgba(143, 82, 1, .55);
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(143, 82, 1, .2), 0 10px 24px -6px rgba(11, 43, 69, .14), 0 26px 60px -18px rgba(143, 82, 1, .2);
}
.feature-card .title { font-weight: 600; font-size: 20px; color: var(--navy); margin-bottom: 12px; }
.feature-card p { margin: 0; font-size: 17px; color: var(--slate-600); }

.agent-quotes-intro { margin: 0 0 40px; font-size: 17px; color: var(--slate-400); }
.agent-quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.agent-quote-card {
  padding: 36px 32px; background: #fdf8f3; border-radius: 16px; border-left: 3px solid var(--blush);
  box-shadow: 0 1px 2px rgba(11, 43, 69, .04);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s ease;
}
/* Doubled class for the same reason as .product-card.product-card:hover. */
.agent-quote-card.agent-quote-card:hover {
  border-left-color: var(--amber);
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(229, 191, 165, .35), 0 10px 24px -6px rgba(11, 43, 69, .14), 0 26px 60px -18px rgba(143, 82, 1, .2);
}

/* ============ SPARK CALLOUT (agent page, links to spark-tools.html) ============ */
.spark-callout-box {
  background: var(--espresso); border-radius: 20px; padding: clamp(32px, 5vw, 56px);
  box-shadow: 0 1px 2px rgba(11, 43, 69, .04);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.spark-callout-box.spark-callout-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(229, 191, 165, .2), 0 10px 24px -6px rgba(0, 0, 0, .25), 0 26px 60px -18px rgba(229, 191, 165, .18);
}
.spark-callout-copy { max-width: 640px; }
.spark-callout-box .eyebrow { font-family: var(--font-label); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--blush); margin-bottom: 16px; }
.spark-callout-box h2 { font-weight: 300; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: 0 0 28px; }
.spark-callout-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.spark-callout-list li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.5; color: #d6c3b0; }
.spark-callout-list li::before { content: '\2192'; position: absolute; left: 0; color: var(--blush); font-weight: 700; }
.spark-callout-stat { margin: 0 0 28px; font-size: 17px; color: #a08d7c; }
.spark-callout-stat strong { color: var(--blush); font-weight: 700; }
.spark-callout-cta {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; background: var(--blush);
  color: var(--blush-ink); border-radius: 10px; font-weight: 700; font-size: 16px;
}
.spark-callout-cta:hover { color: var(--blush-ink); opacity: .92; }

/* ============ SPARK LANDING PAGE ============ */
.spark-hero-lede { margin: 0 0 40px; max-width: 620px; font-size: 19px; line-height: 1.7; color: #d6c3b0; }

.spark-arcade-embed { max-width: 960px; margin: 0 auto; }
.spark-arcade-frame {
  position: relative; width: 100%; height: 0; padding-bottom: calc(56.53% + 41px);
  border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 43, 69, .04), 0 26px 60px -18px rgba(11, 43, 69, .2);
}

.spark-intro { max-width: 760px; }
.spark-intro-text { margin: 0; font-size: 22px; line-height: 1.6; font-weight: 300; color: var(--navy); }

.spark-feature-list { display: grid; gap: 24px; }
.spark-feature-card {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start;
  background: #fff; border: 1px solid #dbe3ec; border-radius: 16px; padding: 32px clamp(24px, 4vw, 40px);
  box-shadow: 0 1px 2px rgba(11, 43, 69, .04);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .35s ease;
}
/* Doubled class for the same reason as .product-card.product-card:hover. */
.spark-feature-card.spark-feature-card:hover {
  border-color: rgba(143, 82, 1, .55);
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(143, 82, 1, .2), 0 10px 24px -6px rgba(11, 43, 69, .14), 0 26px 60px -18px rgba(143, 82, 1, .2);
}
.spark-feature-n { font-family: var(--font-display); font-size: 28px; font-style: italic; color: var(--amber); line-height: 1; }
.spark-feature-body h3 { margin: 0 0 12px; font-weight: 600; font-size: 22px; color: var(--navy); }
.spark-feature-what { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--slate-600); }
.spark-feature-feel {
  margin: 0; padding: 16px 20px; background: #fdf8f3; border-left: 3px solid var(--blush);
  border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.6; font-style: italic; color: #5c412d;
}

.spark-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.spark-stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 5vw, 52px); color: var(--amber); line-height: 1; margin-bottom: 12px; }
.spark-stat-label { font-family: var(--font-label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-600); }

/* Reuses .agent-hero for visual continuity, but this section sits mid-page
   (not under the sticky header) — cancel the negative top margin and huge
   header-clearance padding .agent-hero normally needs. */
.spark-closing.agent-hero { margin-top: 0; }
.spark-closing .inner { padding: 96px 40px; text-align: center; }
.spark-closing-h2 {
  font-weight: 300; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.25; letter-spacing: -.02em;
  color: #fff; max-width: 26em; margin: 0 auto 40px;
}
.spark-closing .agent-hero-ctas { justify-content: center; }

@media (max-width: 1119px) {
  .spark-stat-row { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 699px) {
  .spark-feature-card { grid-template-columns: 1fr; gap: 12px; }
}
.agent-quote-card .mark { font-family: var(--font-display); font-size: 28px; color: var(--blush); margin-bottom: 10px; line-height: 1; }
.agent-quote-card blockquote { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: #4a3323; }
.agent-quote-card figcaption { font-family: var(--font-label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.agent-quotes-empty { grid-column: 1 / -1; color: var(--slate-400); font-size: 15px; }

.apply-section { background: var(--espresso); }
.apply-section .inner { max-width: 900px; margin: 0 auto; padding: 88px 32px 104px; }
.apply-section .eyebrow { font-family: var(--font-label); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--blush); margin-bottom: 16px; }
.apply-section h2 { font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; color: #fff; }
.apply-section .lede { margin: 0 0 36px; font-size: 18px; color: #a08d7c; }
.apply-progress { display: flex; gap: 10px; align-items: center; margin-bottom: 36px; }
.apply-progress .bar { flex: 1; height: 5px; background: rgba(229, 191, 165, .22); border-radius: 3px; }
.apply-progress .bar.active { background: var(--blush); }
.apply-card { background: #fff; border-radius: 18px; padding: 44px; }
.apply-card .title { font-weight: 600; font-size: 24px; color: var(--navy); margin-bottom: 28px; }
.apply-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.apply-fields label, .apply-card > label { display: grid; gap: 8px; }
.apply-fields label span, .apply-card > label > span:first-child { font-size: 15px; font-weight: 600; color: var(--slate-700); }
.apply-fields input, .apply-card input[type="text"] {
  min-height: 52px; padding: 0 16px; font-family: var(--font-body); font-size: 17px; border: 2px solid #dbe3ec; border-radius: 10px;
}
.apply-npn { margin-bottom: 20px; }
.apply-consent {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 28px; font-size: 15px; color: var(--slate-600); line-height: 1.5;
}
.apply-consent input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }
.apply-submit-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.apply-submit-row button {
  min-height: 56px; padding: 0 34px; background: var(--amber); color: #fff; border: 0; border-radius: 10px;
  font-weight: 600; font-size: 17px; cursor: pointer;
}
.apply-submit-row button:hover { opacity: .92; }
.apply-submit-row .hint { font-size: 15px; color: var(--slate-400); }

.agents-footer { background: var(--navy); color: #b8d4e8; }
.agents-footer .top {
  max-width: 1240px; margin: 0 auto; padding: clamp(34px, 6vw, 48px) clamp(20px, 5vw, 40px);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center;
}
.agents-footer .top .call { font-size: 16px; color: #9dc8e6; }
.agents-footer .top .call a { color: #fff; font-weight: 600; }
.agents-footer .top .links { display: flex; gap: 24px; font-size: 14px; }
.agents-footer .top .links a { color: #8fb4cd; }
.agents-footer .bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
.agents-footer .bottom .inner { max-width: 1240px; margin: 0 auto; padding: 24px clamp(20px, 5vw, 40px) 40px; font-size: 14px; color: #8fb4cd; }

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
}
[data-reveal="2"] { transition-delay: .09s; }
[data-reveal="3"] { transition-delay: .16s; transform: translate3d(0, 24px, 0); }
[data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

[data-anim="fade"] { opacity: 0; animation: fadeIn 1.5s ease-out .16s both; }
[data-anim="rise"] { opacity: 0; animation: rise 1.05s var(--ease) .24s both; }
[data-anim="wipe"] { opacity: 0; animation: wipe 1.15s var(--ease) .5s both; }
[data-anim="rule"] { animation: ruleGrow .9s var(--ease) .82s both; transform-origin: left center; }
[data-anim="rise-delay-1"] { opacity: 0; animation: rise 1s var(--ease) .92s both; }
[data-anim="rise-delay-2"] { opacity: 0; animation: rise .95s var(--ease) 1.04s both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes riseSoft { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes wipe { from { opacity: 0; transform: translate3d(-18px, 0, 0); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); } }
@keyframes ruleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-anim] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   RESPONSIVE — narrow (700–1119px) and phone (<700px)
   ========================================================================== */
@media (max-width: 1119px) {
  .site-header nav { display: none; }
  .menu-btn { display: flex; }
  .header-actions .btn-for-agents { display: none; }

  .hero { padding: 72px 28px 20px; }
  .hero-copy { position: static; max-width: 460px; padding-bottom: 40px; }
  .hero h1 { font-size: 42px; }

  .philosophy { min-height: auto; }
  .philosophy .inner { padding: 84px 28px 96px; }
  .philosophy .copy { max-width: 100%; }
  .philosophy h2 { font-size: 31px; }
  .phil-values { grid-template-columns: 1fr; }
  .phil-photo, .phil-blob, .phil-gold-line { display: none; }
  .phil-mobile-photo { display: block; }

  .product-hero-photo { display: none; }

  .start-here { padding: 68px 20px; }
  .start-here h2 { font-size: 31px; }
  .card-grid-3 { grid-template-columns: 1fr; }

  .coverage-check .geo { display: none; }
  .coverage-check .inner { grid-template-columns: 1fr; padding: 64px 28px; }
  .coverage-check h2 { font-size: 26px; }

  .coverage { padding: 68px 20px; }
  .coverage h2 { font-size: 31px; }
  .product-card .head, .product-card .body { padding-left: 20px; padding-right: 20px; }

  .testimonials-photo { display: none; }
  .testimonials { padding: 72px 28px 80px; }
  .testimonials h2 { font-size: 31px; max-width: none; }
  .testimonials .inner .quote-grid { grid-template-columns: 1fr; }

  .trust-strip .inner { grid-template-columns: 1fr; gap: 22px; padding: 34px 28px 54px; }
  .trust-item + .trust-item { border-left: 0; padding-left: 0; }

  .team-head { grid-template-columns: 1fr; gap: 18px; }
  .team-head h2 { font-size: 31px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  .landscape-scene { height: 360px; }

  .final-cta h2 { font-size: 31px; }

  .agent-header nav { display: none; }
  .agent-header .menu-btn { display: flex; }
  .agent-hero .inner { padding: 191px 28px 96px; }
  .agent-value-grid { grid-template-columns: 1fr; }
  .agent-section { padding: 64px 28px; }
  .mechanics-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid { grid-template-columns: 1fr; }
  .agent-quote-grid { grid-template-columns: 1fr; }
}

/* Hero art has its own 4-tier responsive scale, independent of the
   wide/narrow/phone content breakpoints above (matches the original's
   art === "wide"/"mid"/"small" viewport-width tiers). */
@media (max-width: 1119px) and (min-width: 880px) {
  .hero, .hero-inner { min-height: 1420px; }
  .hero-art { right: -412px; top: 76px; width: 700px; height: 700px; transform: scale(1.294); }
}
@media (max-width: 879px) and (min-width: 700px) {
  .hero, .hero-inner { min-height: auto; }
  .hero-art { position: relative; right: auto; top: auto; left: auto; width: 100%; height: 620px; margin: 4px 0 0; transform: scale(.862); }
}

@media (max-width: 699px) {
  .hero { padding: 278px 20px 16px; min-height: auto; }
  .hero-inner { min-height: auto; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .hero-art { position: absolute; width: 700px; height: 250px; transform: scale(.343); right: 0; top: 14px; margin: 0; }

  .apply-fields { grid-template-columns: 1fr; }
  .apply-card { padding: 28px; }

  .agent-hero .inner { padding: 191px 20px 76px; }
}

/* Grid helpers for two-column sections at narrow widths */
@media (max-width: 1119px) {
  .team .inner, .coverage-check .inner { row-gap: 24px; }
}