/* ============================================================
   BROWARD IMPACT — WAVE 2
   1) Line-draw icons   2) Anatomy scroll   3) Multi-step form
   4) Approximate coverage map (privacy-safe, randomized pins)
   ============================================================ */
:root{ --w2-ease:cubic-bezier(.16,1,.3,1); }

/* ---------- 1. Animated line-draw icons ---------- */
.icon-draw{ stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-draw [pathLength]{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s var(--w2-ease); }
.icon-draw.is-drawn [pathLength]{ stroke-dashoffset:0; }
.icon-draw [pathLength]:nth-child(2){ transition-delay:.18s; }
.icon-draw [pathLength]:nth-child(3){ transition-delay:.34s; }
.icon-draw [pathLength]:nth-child(4){ transition-delay:.5s; }

.benefit-card__icon .icon-draw{ color:#C8102E; width:32px; height:32px; }
.nav__logo-mark svg{ overflow:visible; }

/* ---------- 2. Anatomy of an impact window ---------- */
.anat{ position:relative; }
.anat__sticky{ position:sticky; top:0; height:100vh; display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:30px; overflow:hidden; padding:0 max(24px,6vw);
  max-width:1280px; margin:0 auto; }
.anat__stage{ position:relative; height:64vh; perspective:1400px; display:flex; align-items:center; justify-content:center; }
.anat__layers{ position:relative; width:300px; height:360px; transform-style:preserve-3d;
  transform:rotateX(52deg) rotateZ(-32deg); }
.anat__layer{ position:absolute; left:50%; top:50%; width:240px; height:240px; margin:-120px 0 0 -120px;
  border-radius:12px; opacity:0; will-change:transform,opacity;
  box-shadow:0 12px 40px rgba(0,0,0,.35); border:1.5px solid rgba(255,255,255,.5); }
.anat__layer b{ position:absolute; right:-8px; bottom:-8px; font:700 11px 'Inter',sans-serif; color:#fff;
  background:var(--mo-red,#c8102e); padding:3px 8px; border-radius:6px; transform:rotateZ(32deg) rotateX(-52deg); white-space:nowrap; }
.anat__glass{ background:linear-gradient(135deg,rgba(150,200,235,.55),rgba(90,140,180,.25)); }
.anat__film{ background:linear-gradient(135deg,rgba(200,16,46,.5),rgba(200,16,46,.2)); }
.anat__frame{ background:linear-gradient(135deg,rgba(190,200,212,.85),rgba(120,130,145,.7)); }

.anat__copy{ padding:0 6px; }
.anat__step{ opacity:.25; transition:opacity .4s ease,transform .4s ease; transform:translateX(-8px); padding:10px 0; }
.anat__step.is-active{ opacity:1; transform:none; }
.anat__step .n{ font:800 13px 'Montserrat'; color:var(--mo-red,#c8102e); letter-spacing:.1em; }
.anat__step h3{ font:800 clamp(20px,2.4vw,28px) 'Montserrat'; margin:4px 0 6px; }
.anat__step p{ font-size:15px; line-height:1.55; opacity:.85; margin:0; max-width:420px; }
.anat__hint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); font:600 11px 'Inter';
  letter-spacing:.2em; text-transform:uppercase; opacity:.5; }
@media (max-width:860px){
  .anat__sticky{ grid-template-columns:1fr; height:auto; min-height:100vh; padding:80px 0 40px; }
  .anat__stage{ height:42vh; }
  .anat__layers{ width:220px; height:240px; transform:rotateX(50deg) rotateZ(-30deg) scale(.8); }
}

/* ---------- 3. Multi-step quote form ---------- */
.msf{ text-align:left; }
.msf__bar{ display:flex; gap:6px; margin-bottom:8px; }
.msf__bar span{ flex:1; height:5px; border-radius:999px; background:rgba(0,0,0,.12); overflow:hidden; }
.msf__bar span i{ display:block; height:100%; width:0; background:var(--mo-red,#c8102e); transition:width .4s var(--w2-ease); }
.msf__bar span.done i{ width:100%; }
.msf__count{ font:600 12px 'Inter'; opacity:.6; margin-bottom:16px; }
.msf__step{ display:none; animation:msf-in .45s var(--w2-ease); }
.msf__step.is-active{ display:block; }
@keyframes msf-in{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
.msf__q{ font:800 19px 'Montserrat'; margin:0 0 14px; color:inherit; }
.msf__opts{ display:grid; gap:10px; }
.msf__opt{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:2px solid rgba(0,0,0,.12);
  border-radius:12px; cursor:pointer; transition:border-color .2s,background .2s; font-weight:600; }
.msf__opt:hover{ border-color:var(--mo-red,#c8102e); }
.msf__opt input{ accent-color:var(--mo-red,#c8102e); width:18px; height:18px; }
.msf__opt.is-sel{ border-color:var(--mo-red,#c8102e); background:rgba(200,16,46,.06); }
.msf__field{ margin-bottom:12px; }
.msf__field label{ display:block; font:600 13px 'Inter'; margin-bottom:6px; }
.msf__field input{ width:100%; padding:13px 14px; border:2px solid rgba(0,0,0,.14); border-radius:10px; font-size:15px; }
.msf__field input:focus{ outline:none; border-color:var(--mo-red,#c8102e); }
.msf__err{ color:var(--mo-red,#c8102e); font:600 13px 'Inter'; min-height:18px; margin:2px 0 8px; }
.msf__nav{ display:flex; gap:10px; margin-top:18px; }
.msf__nav .btn{ flex:1; justify-content:center; }
.msf__back{ background:transparent; border:2px solid rgba(0,0,0,.15); color:inherit; }
.msf__success{ display:none; text-align:center; padding:20px 0; }
.msf__success.is-on{ display:block; animation:msf-in .5s var(--w2-ease); }
.msf__success .chk{ width:64px; height:64px; margin:0 auto 14px; color:#1faa59; }

/* ---------- 4. Coverage map ---------- */
.bmap-wrap{ max-width:1000px; margin:0 auto; }
.bmap{ position:relative; width:100%; aspect-ratio:5/4; border-radius:18px; overflow:hidden;
  background:linear-gradient(120deg,#0c1f38,#0a1a2f); box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08); }
.bmap__ocean{ position:absolute; inset:0 0 0 64%; background:linear-gradient(120deg,#0e2c4a,#103a5e);
  opacity:.55; }
.bmap__land{ position:absolute; inset:0; }
.bmap__grid{ position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px; }
.bmap__pin{ position:absolute; transform:translate(-50%,-50%); cursor:default; }
.bmap__dot{ width:13px; height:13px; border-radius:50%; background:var(--mo-red,#c8102e);
  box-shadow:0 0 0 4px rgba(200,16,46,.25); position:relative; }
.bmap__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--mo-red,#c8102e);
  animation:bmap-pulse 2.4s ease-out infinite; }
@keyframes bmap-pulse{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(3.4); opacity:0 } }
.bmap__label{ position:absolute; left:50%; top:16px; transform:translateX(-50%); white-space:nowrap;
  font:700 11px 'Inter'; color:#fff; background:rgba(10,26,47,.8); padding:3px 8px; border-radius:6px;
  opacity:0; transition:opacity .2s; pointer-events:none; }
.bmap__pin:hover .bmap__label,.bmap__pin:focus-within .bmap__label{ opacity:1; }
.bmap__pin.is-near .bmap__dot{ background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.3); }
.bmap__legend{ position:absolute; left:18px; bottom:16px; right:18px; display:flex; justify-content:space-between;
  align-items:flex-end; gap:12px; }
.bmap__stat{ color:#fff; font:900 clamp(26px,3.4vw,40px) 'Montserrat'; line-height:1; }
.bmap__stat small{ display:block; font:600 12px 'Inter'; letter-spacing:.06em; opacity:.7; margin-top:6px; }
.bmap__note{ color:rgba(255,255,255,.6); font:500 12px 'Inter'; max-width:260px; text-align:right; line-height:1.5; }
.bmap__you{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
.bmap__you span{ display:block; width:18px; height:18px; border-radius:50%; border:3px solid #fff;
  background:rgba(255,255,255,.25); box-shadow:0 0 18px rgba(255,255,255,.6); }
.bmap__you b{ position:absolute; left:50%; top:-26px; transform:translateX(-50%); white-space:nowrap;
  font:700 11px 'Inter'; color:#0a1a2f; background:#fff; padding:3px 9px; border-radius:6px; }

/* ---------- 5. Exit-intent popup ---------- */
.exi{ position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,26,47,.62); backdrop-filter:blur(4px); opacity:0; pointer-events:none;
  transition:opacity .35s; }
.exi.is-on{ opacity:1; pointer-events:auto; }
.exi__card{ position:relative; background:#fff; color:#0d1b2a; border-radius:18px; max-width:440px; width:100%;
  padding:38px 32px 30px; text-align:center; box-shadow:0 40px 90px -20px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.96); transition:transform .45s var(--w2-ease); }
.exi.is-on .exi__card{ transform:none; }
.exi__close{ position:absolute; top:12px; right:15px; background:transparent; border:none; font-size:26px;
  line-height:1; color:#9aa4b2; cursor:pointer; }
.exi__close:hover{ color:#0d1b2a; }
.exi__eyebrow{ display:inline-block; font:700 12px 'Inter'; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mo-red,#c8102e); margin-bottom:12px; }
.exi h3{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(22px,4vw,28px); line-height:1.12; margin:0 0 12px; }
.exi p{ font-size:15px; line-height:1.55; opacity:.82; margin:0 0 22px; }
.exi__btns{ display:flex; flex-direction:column; gap:10px; }
.exi__btns .btn{ justify-content:center; }
.exi__fine{ font-size:11.5px; color:#9aa4b2; margin:14px 0 0; }

@media (prefers-reduced-motion:reduce){
  .icon-draw [pathLength]{ stroke-dashoffset:0 !important; transition:none; }
  .bmap__dot::after{ animation:none; }
  .exi,.exi__card{ transition:none; }
}