/* ============================================================
   HOMEPAGE v5 — "Instrument"                     [17-Aug-2026]

   A full redesign of the homepage layout: new hero, new section
   shells, SVG infographics, and a scroll-motion system.

   Scoped to body.home-v5 so no other page on the site is touched.
   Loaded AFTER style.css, and every rule that matters is namespaced
   .hv5-* so it cannot collide with the existing component classes.

   SEO SAFETY: reveal states are gated on html.js-motion, set by
   js/home-v5.js as its first action. No JS -> nothing hidden.
   Only opacity/transform are ever used, never display/visibility.
   ============================================================ */

body.home-v5{
  --hv-ink:#070D1A;
  --hv-ink-2:#0B1424;
  --hv-surface:#101B2E;
  --hv-surface-2:#16233A;
  --hv-line:rgba(255,255,255,.09);
  --hv-line-2:rgba(255,255,255,.16);
  --hv-text:#EAF0FA;
  --hv-text-2:#A7B4C8;
  --hv-text-3:#6F7F98;

  --hv-brand:#E23A4E;          /* existing brand crimson */
  --hv-brand-2:#FF6A78;
  --hv-cyan:#3BC9F0;
  --hv-amber:#F5B93B;
  --hv-mint:#4FD1A5;

  --hv-r:14px;
  --hv-r-lg:22px;
  --hv-max:1200px;
  --hv-ease:cubic-bezier(.22,1,.36,1);
  --hv-spring:cubic-bezier(.34,1.4,.64,1);

  --hv-h1:clamp(2.6rem,6.2vw,4.6rem);
  --hv-h2:clamp(1.75rem,3.4vw,2.7rem);
  --hv-h3:clamp(1.05rem,1.6vw,1.28rem);

  background:var(--hv-ink);
  color:var(--hv-text);
}

/* ---------------- shell ---------------- */
body.home-v5 .hv5{ position:relative; overflow-x:clip }
body.home-v5 .hv5-wrap{ max-width:var(--hv-max); margin:0 auto; padding:0 24px }
/* Section rhythm.
   Was a single clamp(64px,9vw,124px) on every section, top and bottom. At a
   1280px viewport that is 115px each side, so 230px sat between every pair of
   sections regardless of how much content they held -- the stats strip carries
   197px of content inside a 428px box (54% empty) and the closing CTA 181px
   inside 413px (56%). Across the page that was 2,765px of padding, 18% of the
   document.

   Now there are three densities. Sections keep room to breathe; short ones stop
   looking abandoned. --hv-pad is a token so the rhythm is tuned in one place. */
body.home-v5{
  --hv-pad:clamp(48px,5.5vw,80px);      /* default section */
  --hv-pad-tight:clamp(36px,3.6vw,54px); /* short, single-idea sections */
}
body.home-v5 .hv5-sec{ position:relative; padding:var(--hv-pad) 0 }
body.home-v5 .hv5-sec + .hv5-sec{ border-top:1px solid var(--hv-line) }
body.home-v5 .hv5-sec.alt{ background:linear-gradient(180deg,var(--hv-ink-2),var(--hv-ink)) }
/* The stats strip and the closing CTA are one row of content each. */
body.home-v5 .hv5-sec.alt,
body.home-v5 .hv5-sec.hv5-cta{ padding:var(--hv-pad-tight) 0 }

body.home-v5 .hv5 h1,
body.home-v5 .hv5 h2,
body.home-v5 .hv5 h3,
body.home-v5 .hv5 h4{
  font-weight:800; letter-spacing:-.028em; line-height:1.1;
  text-wrap:balance; color:var(--hv-text); margin:0 0 .5em;
}
body.home-v5 .hv5 h2{ font-size:var(--hv-h2) }
body.home-v5 .hv5 h3{ font-size:var(--hv-h3); letter-spacing:-.015em; font-weight:700 }
body.home-v5 .hv5 p{ color:var(--hv-text-2); line-height:1.72; margin:0 0 1.1em; max-width:68ch }
body.home-v5 .hv5 a{ color:var(--hv-brand-2) }

/* eyebrow */
body.home-v5 .hv5-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hv-cyan); margin-bottom:18px;
}
body.home-v5 .hv5-eyebrow::before{
  content:""; width:22px; height:2px; background:var(--hv-cyan); border-radius:2px;
}

body.home-v5 .hv5-lede{ font-size:1.08rem; color:var(--hv-text-2); max-width:64ch }

/* ---------------- buttons ---------------- */
body.home-v5 .hv5-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:100px; font-weight:700; font-size:.95rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--hv-spring), box-shadow .3s var(--hv-ease), background .3s;
}
body.home-v5 .hv5-btn.primary{
  background:linear-gradient(135deg,var(--hv-brand),var(--hv-brand-2));
  color:#fff; box-shadow:0 10px 30px -10px rgba(226,58,78,.7);
}
body.home-v5 .hv5-btn.ghost{
  border-color:var(--hv-line-2); color:var(--hv-text); background:rgba(255,255,255,.03);
}
body.home-v5 .hv5-btn:hover{ transform:translateY(-2px) }
body.home-v5 .hv5-btn.primary:hover{ box-shadow:0 16px 40px -12px rgba(226,58,78,.85) }

/* ---------------- hero ---------------- */
body.home-v5 .hv5-hero{
  /* The header above is sticky and 76px tall, so hero padding is additive to it.
     At 11vw (150px on a 1900px screen) the headline started 184px below the nav.
     Now it starts ~94px below, which still reads as a hero without the dead band. */
  position:relative; padding:clamp(40px,3.2vw,64px) 0 clamp(32px,3vw,48px);
  background:
    radial-gradient(900px 500px at 78% 8%, rgba(59,201,240,.16), transparent 62%),
    radial-gradient(760px 460px at 12% 22%, rgba(226,58,78,.16), transparent 60%),
    var(--hv-ink);
  overflow:hidden;
}
body.home-v5 .hv5-hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px);
  /* start, not center or stretch. Centering left dead space above and below the
     panel; stretching it to the row height was worse -- the card filled the row
     but its three groups spread 144px and 152px apart, which is what made the
     panel look broken. Top-aligned, the card sizes to its own content (300px)
     and its edge lines up with the headline. */
  align-items:start;
}
@media (max-width:940px){ body.home-v5 .hv5-hero-grid{ grid-template-columns:1fr } }

/* The first hero banner carries the page's only H1; the rotating
   siblings are H2 so the document keeps one top-level heading
   whichever slide is showing. Both take the same display size. */
body.home-v5 .hv5-hero h1,
body.home-v5 .hv5-hero .hv5-banner h2{ font-size:var(--hv-h1); margin-bottom:.42em }
body.home-v5 .hv5-hero h1 .hl{
  background:linear-gradient(120deg,var(--hv-brand-2),var(--hv-amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.home-v5 .hv5-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }

body.home-v5 .hv5-hero-badges{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:30px;
  padding-top:22px; border-top:1px solid var(--hv-line);
}
body.home-v5 .hv5-chip{
  font-size:.76rem; font-weight:600; color:var(--hv-text-2);
  border:1px solid var(--hv-line); border-radius:100px; padding:6px 13px;
  background:rgba(255,255,255,.03);
}

/* ---------------- panel / card ---------------- */
body.home-v5 .hv5-panel{
  background:linear-gradient(160deg,var(--hv-surface),var(--hv-ink-2));
  border:1px solid var(--hv-line); border-radius:var(--hv-r-lg);
  padding:clamp(18px,2.4vw,26px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
body.home-v5 .hv5-panel-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--hv-text-3); margin-bottom:16px;
}
body.home-v5 .hv5-live{ display:inline-flex; align-items:center; gap:6px; color:var(--hv-mint) }
body.home-v5 .hv5-live i{
  width:7px; height:7px; border-radius:50%; background:var(--hv-mint);
  box-shadow:0 0 0 0 rgba(79,209,165,.6); animation:hvPulse 2.2s infinite;
}
@keyframes hvPulse{ 70%{ box-shadow:0 0 0 9px rgba(79,209,165,0) } 100%{ box-shadow:0 0 0 0 rgba(79,209,165,0) } }

/* ---------------- stat rings ---------------- */
body.home-v5 .hv5-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px;
}
body.home-v5 .hv5-stat{
  background:var(--hv-surface); border:1px solid var(--hv-line);
  border-radius:var(--hv-r); padding:22px; text-align:center;
}
body.home-v5 .hv5-ring{ position:relative; width:112px; height:112px; margin:0 auto 12px }
body.home-v5 .hv5-ring svg{ transform:rotate(-90deg); overflow:visible }
body.home-v5 .hv5-ring circle{ fill:none; stroke-width:8; stroke-linecap:round }
body.home-v5 .hv5-ring .trk{ stroke:rgba(255,255,255,.08) }
body.home-v5 .hv5-ring .val{
  stroke:var(--hv-c,var(--hv-cyan));
  stroke-dasharray:var(--hv-len,314); stroke-dashoffset:var(--hv-len,314);
  transition:stroke-dashoffset 1.5s var(--hv-ease);
}
html.js-motion body.home-v5 .hv5-ring.m-in .val{ stroke-dashoffset:var(--hv-off,90) }
body.home-v5 .hv5-ring b{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
body.home-v5 .hv5-stat span{ font-size:.82rem; color:var(--hv-text-3); font-weight:600 }

/* ---------------- bento ---------------- */
body.home-v5 .hv5-bento{
  display:grid; grid-template-columns:repeat(12,1fr); gap:14px;
}
body.home-v5 .hv5-bento > *{ grid-column:span 4 }
body.home-v5 .hv5-bento > .w6{ grid-column:span 6 }
body.home-v5 .hv5-bento > .w8{ grid-column:span 8 }
body.home-v5 .hv5-bento > .w12{ grid-column:span 12 }
@media (max-width:900px){
  body.home-v5 .hv5-bento > *{ grid-column:span 6 }
  body.home-v5 .hv5-bento > .w8, body.home-v5 .hv5-bento > .w12{ grid-column:span 12 }
}
@media (max-width:560px){ body.home-v5 .hv5-bento > *{ grid-column:span 12 !important } }

body.home-v5 .hv5-tile{
  position:relative; background:var(--hv-surface); border:1px solid var(--hv-line);
  border-radius:var(--hv-r); padding:22px; text-decoration:none; display:block;
  transition:transform .38s var(--hv-spring), border-color .3s, background .3s;
  overflow:hidden;
}
body.home-v5 .hv5-tile::after{
  content:""; position:absolute; inset:auto auto 0 0; height:2px; width:0;
  background:linear-gradient(90deg,var(--hv-brand),var(--hv-amber));
  transition:width .45s var(--hv-ease);
}
body.home-v5 a.hv5-tile:hover{ transform:translateY(-5px); border-color:var(--hv-line-2); background:var(--hv-surface-2) }
body.home-v5 a.hv5-tile:hover::after{ width:100% }
body.home-v5 .hv5-tile .ic{ font-size:1.6rem; display:block; margin-bottom:10px }
body.home-v5 .hv5-tile h3{ margin-bottom:.35em }
body.home-v5 .hv5-tile p{ font-size:.9rem; margin:0; color:var(--hv-text-3) }

/* ---------------- bar chart infographic ---------------- */
body.home-v5 .hv5-bars{ display:flex; flex-direction:column; gap:14px }
body.home-v5 .hv5-bar-row{ display:grid; grid-template-columns:132px 1fr 54px; gap:12px; align-items:center }
body.home-v5 .hv5-bar-row .lbl{ font-size:.85rem; color:var(--hv-text-2); font-weight:600 }
body.home-v5 .hv5-bar{ height:10px; background:rgba(255,255,255,.07); border-radius:100px; overflow:hidden }
body.home-v5 .hv5-bar i{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg,var(--hv-c,var(--hv-cyan)),var(--hv-c2,var(--hv-brand)));
  transition:width 1.25s var(--hv-ease); transition-delay:var(--hv-d,0ms);
}
html.js-motion body.home-v5 .hv5-bars.m-in .hv5-bar i{ width:var(--hv-w,60%) }
body.home-v5 .hv5-bar-row .num{
  font-size:.85rem; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; color:var(--hv-text);
}
@media (max-width:560px){ body.home-v5 .hv5-bar-row{ grid-template-columns:100px 1fr 44px } }

/* ---------------- timeline ---------------- */
body.home-v5 .hv5-timeline{ position:relative; padding-left:28px }
body.home-v5 .hv5-timeline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:rgba(255,255,255,.10); border-radius:2px;
}
body.home-v5 .hv5-timeline::after{
  content:""; position:absolute; left:7px; top:6px; width:2px; border-radius:2px;
  height:var(--hv-progress,0%);
  background:linear-gradient(180deg,var(--hv-cyan),var(--hv-brand));
  transition:height .2s linear;
}
body.home-v5 .hv5-tl-item{ position:relative; padding:0 0 26px }
body.home-v5 .hv5-tl-item::before{
  content:""; position:absolute; left:-28px; top:7px; width:16px; height:16px;
  border-radius:50%; background:var(--hv-ink); border:2px solid var(--hv-line-2);
  transition:border-color .4s, box-shadow .4s;
}
html.js-motion body.home-v5 .hv5-tl-item.m-in::before{
  border-color:var(--hv-cyan); box-shadow:0 0 0 5px rgba(59,201,240,.14);
}
body.home-v5 .hv5-tl-item h3{ margin-bottom:.3em }
body.home-v5 .hv5-tl-item p{ font-size:.92rem; margin:0 }

/* ---------------- coverage dot grid ---------------- */
body.home-v5 .hv5-dots{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(13px,1fr));
  gap:5px; margin-top:6px;
}
body.home-v5 .hv5-dots i{
  aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.10);
  transform:scale(.4); opacity:0;
  transition:transform .5s var(--hv-spring), opacity .5s var(--hv-ease), background .5s;
  transition-delay:var(--hv-d,0ms);
}
html.js-motion body.home-v5 .hv5-dots.m-in i{ transform:scale(1); opacity:1 }
body.home-v5 .hv5-dots i.on{ background:var(--hv-cyan); box-shadow:0 0 9px rgba(59,201,240,.55) }
body.home-v5 .hv5-dots i.hot{ background:var(--hv-brand); box-shadow:0 0 11px rgba(226,58,78,.65) }

/* ---------------- editorial prose (the long-form SEO copy) ---------------- */
body.home-v5 .hv5-prose{ max-width:74ch; margin:0 auto }
body.home-v5 .hv5-prose h2{
  font-size:clamp(1.35rem,2.3vw,1.9rem); margin-top:2.2em; padding-top:1.1em;
  border-top:1px solid var(--hv-line);
}
body.home-v5 .hv5-prose > h2:first-child{ margin-top:0; border-top:0; padding-top:0 }
body.home-v5 .hv5-prose h3{ margin-top:1.7em; color:var(--hv-text) }
body.home-v5 .hv5-prose p{ font-size:1.02rem }
body.home-v5 .hv5-prose ul,
body.home-v5 .hv5-prose ol{ color:var(--hv-text-2); line-height:1.7; padding-left:1.2em; max-width:68ch }
body.home-v5 .hv5-prose li{ margin-bottom:.5em }
body.home-v5 .hv5-prose li::marker{ color:var(--hv-brand) }
body.home-v5 .hv5-prose a{ color:var(--hv-cyan); text-underline-offset:3px }

/* district / tag link clouds inside prose */
body.home-v5 .hv5-prose .district-list,
body.home-v5 .hv5-linkcloud{
  display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; max-width:none;
}
body.home-v5 .hv5-prose .district-list__link,
body.home-v5 .hv5-linkcloud a{
  font-size:.82rem; padding:7px 13px; border-radius:100px;
  border:1px solid var(--hv-line); background:rgba(255,255,255,.03);
  color:var(--hv-text-2); text-decoration:none; transition:all .28s var(--hv-ease);
}
body.home-v5 .hv5-prose .district-list__link:hover,
body.home-v5 .hv5-linkcloud a:hover{
  border-color:var(--hv-brand); color:#fff; background:rgba(226,58,78,.14);
}

/* ---------------- CTA ---------------- */
body.home-v5 .hv5-cta{
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(226,58,78,.22), transparent 65%),
    var(--hv-ink-2);
  border-top:1px solid var(--hv-line); text-align:center;
}
body.home-v5 .hv5-cta h2{ font-size:clamp(1.9rem,4vw,3rem) }

/* ---------------- motion primitives ---------------- */
/* whileInView */
html.js-motion body.home-v5 [data-inview]{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .8s var(--hv-ease), transform .8s var(--hv-ease);
  transition-delay:var(--hv-d,0ms);
  will-change:opacity,transform;
}
html.js-motion body.home-v5 [data-inview="left"]{ transform:translate3d(-30px,0,0) }
html.js-motion body.home-v5 [data-inview="right"]{ transform:translate3d(30px,0,0) }
html.js-motion body.home-v5 [data-inview="scale"]{ transform:scale(.93) }
html.js-motion body.home-v5 [data-inview].m-in{ opacity:1; transform:none }

/* scroll progress rail */
body.home-v5 .hv5-progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:9999; pointer-events:none }
body.home-v5 .hv5-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--hv-brand),var(--hv-amber),var(--hv-cyan));
  box-shadow:0 0 14px rgba(226,58,78,.5);
}

/* ---------------- reduced motion & print ---------------- */
@media (prefers-reduced-motion: reduce){
  html.js-motion body.home-v5 [data-inview],
  html.js-motion body.home-v5 .hv5-dots i{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  html.js-motion body.home-v5 .hv5-ring .val{ stroke-dashoffset:var(--hv-off,90) !important; transition:none !important }
  html.js-motion body.home-v5 .hv5-bars .hv5-bar i{ width:var(--hv-w,60%) !important; transition:none !important }
  body.home-v5 .hv5-progress{ display:none }
  body.home-v5 .hv5-live i{ animation:none }
}
@media print{
  html.js-motion body.home-v5 [data-inview],
  html.js-motion body.home-v5 .hv5-dots i{ opacity:1 !important; transform:none !important }
  body.home-v5 .hv5-progress{ display:none }
}

/* ============================================================
   LEGACY RE-SKIN
   The long-form sections keep their original markup (so not a
   single word or link is lost). These rules restyle that markup
   inside body.home-v5 only, so the rest of the site is unaffected.
   ============================================================ */

body.home-v5 .hv5 .container{ max-width:var(--hv-max); margin:0 auto; padding:0 24px }

/* section headers */
body.home-v5 .hv5 .section-heading{ margin-bottom:38px; max-width:70ch }
body.home-v5 .hv5 .section-heading h2{ font-size:var(--hv-h2) }
body.home-v5 .hv5 .section-heading p{ font-size:1.03rem; color:var(--hv-text-2) }
body.home-v5 .hv5 .section-heading__rule{
  width:56px; height:3px; border-radius:3px; margin:14px 0 18px;
  background:linear-gradient(90deg,var(--hv-brand),var(--hv-amber));
}

/* service cards -> bento tiles */
body.home-v5 .hv5 .service-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:14px;
}
body.home-v5 .hv5 .service-card{
  position:relative; background:var(--hv-surface); border:1px solid var(--hv-line);
  border-radius:var(--hv-r); padding:24px; overflow:hidden;
  transition:transform .38s var(--hv-spring), border-color .3s, background .3s;
}
body.home-v5 .hv5 .service-card::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--hv-brand),var(--hv-amber));
  transition:width .45s var(--hv-ease);
}
body.home-v5 .hv5 .service-card:hover{ transform:translateY(-5px); border-color:var(--hv-line-2); background:var(--hv-surface-2) }
body.home-v5 .hv5 .service-card:hover::after{ width:100% }
body.home-v5 .hv5 .service-card__icon{ font-size:1.7rem; margin-bottom:12px; display:block }
body.home-v5 .hv5 .service-card h3{ font-size:1.06rem; margin-bottom:.4em }
body.home-v5 .hv5 .service-card p{ font-size:.9rem; color:var(--hv-text-3); margin-bottom:1em }
body.home-v5 .hv5 .card__link{
  font-size:.85rem; font-weight:700; color:var(--hv-cyan); text-decoration:none;
}
body.home-v5 .hv5 .card__link:hover{ color:var(--hv-brand-2) }

/* long-form content boxes -> editorial prose */
body.home-v5 .hv5 .content-box{
  background:transparent; border:0; padding:0; margin:0 0 2.2em; box-shadow:none;
  max-width:74ch;
}
body.home-v5 .hv5 .content-box h2{
  font-size:clamp(1.35rem,2.3vw,1.9rem); margin-top:1.6em;
  padding-top:1.05em; border-top:1px solid var(--hv-line);
}
body.home-v5 .hv5 .content-box:first-of-type h2:first-child{ margin-top:0; border-top:0; padding-top:0 }
body.home-v5 .hv5 .content-box h3{ font-size:1.1rem; margin-top:1.6em }
body.home-v5 .hv5 .content-box p{ font-size:1.02rem; color:var(--hv-text-2) }
body.home-v5 .hv5 .content-box a{ color:var(--hv-cyan) }
body.home-v5 .hv5 .text-acc-bold{ color:var(--hv-brand-2); font-weight:700 }

/* blog cards */
body.home-v5 .hv5 .blog-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;
}
body.home-v5 .hv5 .blog-card{
  background:var(--hv-surface); border:1px solid var(--hv-line);
  border-radius:var(--hv-r); overflow:hidden; text-decoration:none; display:block;
  transition:transform .38s var(--hv-spring), border-color .3s;
}
body.home-v5 .hv5 .blog-card:hover{ transform:translateY(-5px); border-color:var(--hv-line-2) }
body.home-v5 .hv5 .blog-card__image, body.home-v5 .hv5 .blog-card__image--placeholder{
  height:132px; background:linear-gradient(135deg,var(--hv-surface-2),var(--hv-ink-2));
  display:grid; place-items:center; font-size:2rem;
}
body.home-v5 .hv5 .blog-card__body{ padding:18px }
body.home-v5 .hv5 .blog-card__badge{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--hv-cyan); margin-bottom:8px;
}
body.home-v5 .hv5 .blog-card__more{ font-size:.82rem; color:var(--hv-text-3) }

/* FAQ accordion */
body.home-v5 .hv5 .faq__item{
  border:1px solid var(--hv-line); border-radius:var(--hv-r);
  background:var(--hv-surface); margin-bottom:10px; overflow:hidden;
}
body.home-v5 .hv5 .faq__question{
  padding:16px 20px; font-weight:700; cursor:pointer; color:var(--hv-text);
  display:flex; justify-content:space-between; gap:12px; align-items:center;
}
body.home-v5 .hv5 .faq__question::after{ content:"+"; color:var(--hv-brand); font-size:1.3rem; line-height:1 }
body.home-v5 .hv5 .faq__item.open .faq__question::after{ content:"\2212" }
/* the original accordion works on max-height; keep that mechanic or the
   answer leaks a sliver under every question */
body.home-v5 .hv5 .faq__answer{
  padding:0 20px; max-height:0; overflow:hidden;
  color:var(--hv-text-2); font-size:.95rem;
  transition:max-height .4s var(--hv-ease), padding .4s var(--hv-ease);
}
body.home-v5 .hv5 .faq__item.open .faq__answer{ max-height:600px; padding:0 20px 18px }
body.home-v5 .hv5 .faq__answer p{ color:var(--hv-text-2); margin:0 0 .6em }

/* stats (legacy markup) */
body.home-v5 .hv5 .stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px;
}
body.home-v5 .hv5 .stat-item{
  background:var(--hv-surface); border:1px solid var(--hv-line);
  border-radius:var(--hv-r); padding:24px; text-align:center;
}
body.home-v5 .hv5 .sc{ font-size:2.2rem; font-weight:800; color:var(--hv-text) }

/* audit tool panel */
body.home-v5 .hv5 .audit{
  background:var(--hv-surface); border:1px solid var(--hv-line);
  border-radius:var(--hv-r-lg); padding:clamp(18px,2.5vw,28px);
}

/* buttons inside preserved markup */
body.home-v5 .hv5 .btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 24px;
  border-radius:100px; font-weight:700; text-decoration:none; border:1px solid transparent;
  transition:transform .3s var(--hv-spring);
}
body.home-v5 .hv5 .btn:hover{ transform:translateY(-2px) }
body.home-v5 .hv5 .btn--primary{
  background:linear-gradient(135deg,var(--hv-brand),var(--hv-brand-2)); color:#fff;
  box-shadow:0 10px 30px -12px rgba(226,58,78,.7);
}
body.home-v5 .hv5 .btn--outline{ border-color:var(--hv-line-2); color:var(--hv-text) }

/* the old hero slider is replaced by the new hero - hide leftovers if present */
body.home-v5 .hv5 .hero-dots{ display:none }

/* heading levels preserved from the original outline, sized for their new role */
body.home-v5 .hv5 .hv5-tile-h{ font-size:var(--hv-h3); font-weight:700; letter-spacing:-.015em; margin-bottom:.4em }
body.home-v5 .hv5 .hv5-ring-n{
  position:absolute; inset:0; display:grid; place-items:center; margin:0;
  font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

/* ============================================================
   LIGHT SECTIONS  — alternating white bands
   ============================================================ */
body.home-v5 .hv5-sec.light{
  --hv-text:#0E1726;
  --hv-text-2:#41506A;
  --hv-text-3:#6B7B95;
  --hv-surface:#FFFFFF;
  --hv-surface-2:#F4F7FB;
  --hv-line:rgba(14,23,38,.10);
  --hv-line-2:rgba(14,23,38,.20);
  background:#FFFFFF;
  color:var(--hv-text);
}
body.home-v5 .hv5-sec.light.tint{ background:linear-gradient(180deg,#FFFFFF,#F4F7FB) }
body.home-v5 .hv5-sec.light h1,
body.home-v5 .hv5-sec.light h2,
body.home-v5 .hv5-sec.light h3,
body.home-v5 .hv5-sec.light h4{ color:var(--hv-text) }
body.home-v5 .hv5-sec.light p,
body.home-v5 .hv5-sec.light li{ color:var(--hv-text-2) }
body.home-v5 .hv5-sec.light .hv5-eyebrow{ color:#0E7C8B }
body.home-v5 .hv5-sec.light .hv5-eyebrow::before{ background:#0E7C8B }
body.home-v5 .hv5-sec.light .hv5-tile,
body.home-v5 .hv5-sec.light .service-card,
body.home-v5 .hv5-sec.light .blog-card,
body.home-v5 .hv5-sec.light .faq__item,
body.home-v5 .hv5-sec.light .stat-item,
body.home-v5 .hv5-sec.light .audit,
body.home-v5 .hv5-sec.light .hv5-stat{
  background:#FFFFFF; border-color:var(--hv-line);
  box-shadow:0 1px 2px rgba(14,23,38,.05), 0 12px 28px -20px rgba(14,23,38,.35);
}
body.home-v5 .hv5-sec.light .hv5-tile:hover,
body.home-v5 .hv5-sec.light .service-card:hover{ background:var(--hv-surface-2) }
body.home-v5 .hv5-sec.light .hv5-panel{
  background:linear-gradient(160deg,#FFFFFF,#F4F7FB); border-color:var(--hv-line);
  box-shadow:0 20px 50px -34px rgba(14,23,38,.5);
}
body.home-v5 .hv5-sec.light .hv5-chip,
body.home-v5 .hv5-sec.light .district-list__link,
body.home-v5 .hv5-sec.light .hv5-linkcloud a{
  background:#FFFFFF; border-color:var(--hv-line); color:var(--hv-text-2);
}
body.home-v5 .hv5-sec.light .hv5-prose a,
body.home-v5 .hv5-sec.light .content-box a,
body.home-v5 .hv5-sec.light .card__link,
body.home-v5 .hv5-sec.light .blog-card__badge{ color:#0E7C8B }
body.home-v5 .hv5-sec.light .hv5-btn.ghost{ border-color:var(--hv-line-2); color:var(--hv-text); background:#fff }
body.home-v5 .hv5-sec.light .hv5-ring .trk{ stroke:rgba(14,23,38,.10) }
body.home-v5 .hv5-sec.light .hv5-bar{ background:rgba(14,23,38,.08) }
body.home-v5 .hv5-sec.light .hv5-timeline::before{ background:rgba(14,23,38,.12) }
body.home-v5 .hv5-sec.light .hv5-tl-item::before{ background:#fff; border-color:var(--hv-line-2) }
body.home-v5 .hv5-sec.light .hv5-dots i{ background:rgba(14,23,38,.10) }
body.home-v5 .hv5-sec.light .hv5-live{ color:#0F9D77 }

/* ============================================================
   FRAME-WISE CONTENT  — word-by-word reveal
   ============================================================ */
html.js-motion body.home-v5 .hv5-frame .fw{
  display:inline-block; overflow:hidden; vertical-align:top;
}
html.js-motion body.home-v5 .hv5-frame .fw > i{
  display:inline-block; font-style:inherit;
  transform:translate3d(0,110%,0);
  transition:transform .6s var(--hv-ease);
  transition-delay:var(--hv-d,0ms);
}
html.js-motion body.home-v5 .hv5-frame.m-in .fw > i{ transform:none }

/* frame-by-frame blocks: each child panel arrives as its own "frame" */
html.js-motion body.home-v5 .hv5-frames > *{
  opacity:0; transform:translate3d(0,30px,0) scale(.985);
  transition:opacity .75s var(--hv-ease), transform .75s var(--hv-ease);
  transition-delay:var(--hv-d,0ms);
}
html.js-motion body.home-v5 .hv5-frames.m-in > *{ opacity:1; transform:none }

/* ============================================================
   LOCAL / KOLKATA BLOCK
   ============================================================ */
body.home-v5 .hv5-local{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,52px); align-items:start;
}
@media (max-width:900px){ body.home-v5 .hv5-local{ grid-template-columns:1fr } }
body.home-v5 .hv5-areas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px }
body.home-v5 .hv5-areas span{
  font-size:.8rem; padding:7px 13px; border-radius:100px;
  border:1px solid var(--hv-line); background:var(--hv-surface); color:var(--hv-text-2);
}
body.home-v5 .hv5-kv{ display:grid; gap:10px; margin-top:6px }
body.home-v5 .hv5-kv div{
  display:flex; justify-content:space-between; gap:14px; padding:12px 0;
  border-bottom:1px dashed var(--hv-line); font-size:.92rem;
}
body.home-v5 .hv5-kv div:last-child{ border-bottom:0 }
body.home-v5 .hv5-kv b{ color:var(--hv-text); font-weight:700 }
body.home-v5 .hv5-kv span{ color:var(--hv-text-3) }

@media (prefers-reduced-motion: reduce){
  html.js-motion body.home-v5 .hv5-frame .fw > i{ transform:none !important; transition:none !important }
  html.js-motion body.home-v5 .hv5-frames > *{ opacity:1 !important; transform:none !important; transition:none !important }
}
@media print{
  html.js-motion body.home-v5 .hv5-frame .fw > i{ transform:none !important }
  html.js-motion body.home-v5 .hv5-frames > *{ opacity:1 !important; transform:none !important }
}

/* ============================================================
   CONTRAST HARDENING
   style.css ships [data-theme="dark"] rules that force near-white
   text on .service-card/.district-list__link/.faq__question. Inside a white band that
   makes the text invisible. These win explicitly.
   ============================================================ */
body.home-v5 .hv5-sec.light .service-card h3,
body.home-v5 .hv5-sec.light .service-card h4,
body.home-v5 .hv5-sec.light .blog-card h3,
body.home-v5 .hv5-sec.light .faq__question,
body.home-v5 .hv5-sec.light .sidebar__box h4,
body.home-v5 .hv5-sec.light .content-box h2,
body.home-v5 .hv5-sec.light .content-box h3,
body.home-v5 .hv5-sec.light .hv5-tile h2,
body.home-v5 .hv5-sec.light .hv5-tile h3{ color:#0E1726 !important }

body.home-v5 .hv5-sec.light .service-card p,
body.home-v5 .hv5-sec.light .blog-card p,
body.home-v5 .hv5-sec.light .faq__answer,
body.home-v5 .hv5-sec.light .faq__answer p,
body.home-v5 .hv5-sec.light .content-box p,
body.home-v5 .hv5-sec.light .hv5-tile p,
body.home-v5 .hv5-sec.light .blog-card__more{ color:#41506A !important }

body.home-v5 .hv5-sec.light .district-list__link{ color:#41506A !important }
body.home-v5 .hv5-sec.light .card__link{ color:#0E7C8B !important }

/* and the mirror case: keep dark bands readable */
body.home-v5 .hv5-sec:not(.light) .service-card h3,
body.home-v5 .hv5-sec:not(.light) .blog-card h3,
body.home-v5 .hv5-sec:not(.light) .faq__question,
body.home-v5 .hv5-sec:not(.light) .content-box h2,
body.home-v5 .hv5-sec:not(.light) .content-box h3{ color:#EAF0FA }
body.home-v5 .hv5-sec:not(.light) .service-card p,
body.home-v5 .hv5-sec:not(.light) .content-box p,
body.home-v5 .hv5-sec:not(.light) .faq__answer{ color:#A7B4C8 }

/* ============================================================
   HERO BANNER ROTATOR  (5 banners)
   ============================================================ */
/* Hero carousel slides share one grid cell.
   Previously the inactive slides were position:absolute and only the active one
   was relative, so the container took the height of whichever slide was showing.
   The five slides differ in height, which made the hero jump 54px on every
   rotation -- a visible jolt and a Cumulative Layout Shift penalty.
   Stacking them in a single grid cell sizes the container to the TALLEST slide
   once, so rotation changes nothing about the layout. The crossfade still runs
   on opacity and transform. */
body.home-v5 .hv5-banners{ position:relative; display:grid; min-height:1px }
body.home-v5 .hv5-banner{
  /* every slide occupies the same grid cell (see .hv5-banners above) */
  grid-area:1/1; pointer-events:none; opacity:0; visibility:hidden;
  transform:translate3d(0,14px,0);
  transition:opacity .6s var(--hv-ease), transform .6s var(--hv-ease), visibility 0s .6s;
}
body.home-v5 .hv5-banner.on{
  pointer-events:auto; opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
/* no JS: show the first banner, stack the rest normally so nothing is lost.
   The container must drop back to block here -- with the grid stacking above,
   five visible slides would all land in the same cell and overlap. */
html:not(.js-motion) body.home-v5 .hv5-banners{ display:block }
html:not(.js-motion) body.home-v5 .hv5-banner{
  position:relative; opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
body.home-v5 .hv5-dotnav{ display:flex; gap:8px; margin-top:26px }
body.home-v5 .hv5-dotnav button{
  width:30px; height:4px; border-radius:100px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.20); transition:background .3s, width .3s;
}
body.home-v5 .hv5-dotnav button[aria-current="true"]{ background:var(--hv-brand); width:46px }
body.home-v5 .hv5-dotnav button:focus-visible{ outline:2px solid var(--hv-cyan); outline-offset:3px }

/* clickable local-area chips */
body.home-v5 .hv5-areas a{
  font-size:.8rem; padding:7px 13px; border-radius:100px; text-decoration:none;
  border:1px solid var(--hv-line); background:var(--hv-surface); color:var(--hv-text-2);
  transition:all .28s var(--hv-ease);
}
body.home-v5 .hv5-areas a:hover{ border-color:var(--hv-brand); color:#fff; background:rgba(226,58,78,.16) }
body.home-v5 .hv5-sec.light .hv5-areas a{ background:#fff; color:#41506A }
body.home-v5 .hv5-sec.light .hv5-areas a:hover{ color:#0E1726; background:#F4F7FB }

/* chips that are links */
body.home-v5 a.hv5-chip{
  text-decoration:none; display:inline-block;
  transition:border-color .28s var(--hv-ease), background .28s var(--hv-ease), color .28s var(--hv-ease);
}
body.home-v5 a.hv5-chip:hover{ border-color:var(--hv-brand); color:#fff; background:rgba(226,58,78,.16) }
body.home-v5 .hv5-sec.light a.hv5-chip:hover{ color:#0E1726; background:#F4F7FB; border-color:var(--hv-line-2) }
body.home-v5 a.hv5-chip:focus-visible{ outline:2px solid var(--hv-cyan); outline-offset:3px }


/* ============================================================
   Homepage card and hero overrides

   Blog card grid, plus the homepage's own hover polish on service cards
   and the gradient hero that replaced a heavy photo for a faster LCP.

   Moved out of an inline <style> block in the page body
   (20-Aug-2026). It stays in this sheet rather than a shared one
   because these rules deliberately override the shared component
   styles for the homepage only.
   ============================================================ */

.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid #eef0f5;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 6px 24px rgba(13,27,42,.06);transition:transform .25s ease,box-shadow .25s ease}
.blog-card:hover{transform:translateY(-7px);box-shadow:0 18px 44px rgba(13,27,42,.14)}
.blog-card .blog-card__image{height:176px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:2.8rem}
.blog-card .blog-card__image--placeholder{background:linear-gradient(135deg,#0C1D3A,#173B73);color:#fff}
.blog-card .blog-card__body{padding:20px 22px;display:flex;flex-direction:column;flex:1}
.blog-card .blog-card__badge{align-self:flex-start;background:#fde8ec;color:#c0143c;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:4px 12px;border-radius:50px;margin-bottom:12px}
.blog-card h3{font-size:18px;line-height:1.35;margin:0 0 10px;color:#122A52}
.blog-card p{color:#5c6470;font-size:14.5px;line-height:1.6;margin:0 0 14px;flex:1}
.blog-card .blog-card__meta{font-size:12.5px;color:#5c6470;margin-bottom:8px}
.blog-card .blog-card__more{color:#c0143c;font-weight:700;font-size:14px}
/* premium hover polish for all homepage cards (services, trends, why-us, etc.) */
.service-card{transition:transform .25s ease,box-shadow .25s ease;border-radius:16px}
.service-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(13,27,42,.12)}
.service-card__icon{transition:transform .25s ease}
.service-card:hover .service-card__icon{transform:scale(1.12)}
/* accessibility: darker accent for small text links so contrast passes WCAG AA (4.5:1 on white) */
.text-acc-bold{color:#c0143c}
/* performance: gradient hero instead of a heavy photo -> instant LCP on mobile */
.hero-bg-1{background:linear-gradient(135deg,#0C1D3A 0%,#173B73 55%,#122A52 100%)!important;background-image:none!important}
.hero-slide::before{background:linear-gradient(135deg,rgba(13,27,42,.35),rgba(15,52,96,.25))!important}
/* accessibility: hero dots need 24px tap targets (visual dot stays small via ::after) */
.hero-dots{gap:12px}
.hero-dot{width:24px!important;height:24px!important;background:transparent!important;border:none;padding:0;position:relative}
.hero-dot::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%);transition:all .3s}
.hero-dot.active::after{background:#F4B63F;transform:translate(-50%,-50%) scale(1.25)}

/* ---------------- coverage map (hero) ----------------
   MapChart-style: each state is a real SVG shape that fills on hover and links
   to its page. The SVG is injected by js/coverage.js. The chip list below is
   the no-JS fallback, the keyboard path, and the home for the three states this
   base map does not draw (Andaman & Nicobar, Ladakh, Lakshadweep). */
body.home-v5 .hv5-map{ display:flex; flex-direction:column; gap:11px }

body.home-v5 .hv5-map__stage{ position:relative; min-height:190px }
/* placeholder while the map is in flight, so the panel does not jump */
body.home-v5 .hv5-map__stage::after{
  content:"Loading coverage map..."; position:absolute; inset:0;
  display:grid; place-items:center; font-size:.72rem; color:var(--hv-text-3);
}
body.home-v5 .hv5-map__stage.is-ready{ min-height:0 }
body.home-v5 .hv5-map__stage.is-ready::after{ content:none }
body.home-v5 .hv5-map__svg svg{
  width:100%; height:auto; max-height:clamp(260px,38vh,360px); display:block; margin:0 auto;
}

/* State shapes are targeted by [data-slug], not by a class: the base map's paths
   already carry their own class attribute, so a second one is dropped by the
   parser. data-slug is added at build time and cannot collide. !important beats
   the per-path inline fill that ships in the source file. */
/* Contrast, measured not guessed: the first pass filled states #1E3050 on a
   #070D1A panel and stroked them with the panel colour -- 1.47:1 both ways, so
   the map rendered at full size but was invisible. #2B4A7A reads 2.19:1 against
   the panel, and a light stroke gives 2.58:1 between neighbouring states, which
   is what makes it read as a map rather than a silhouette. */
body.home-v5 .hv5-map__svg [data-slug],
body.home-v5 .hv5-map__svg [data-slug] path{
  fill:#2B4A7A !important; stroke:rgba(255,255,255,.35) !important; stroke-width:1;
  transition:fill .18s var(--hv-ease); cursor:pointer;
}
/* the extra .hv5-map on the front lifts specificity above the base rule above --
   both carry !important, so specificity is what decides which fill wins */
body.home-v5 .hv5-map .hv5-map__svg [data-slug]:hover,
body.home-v5 .hv5-map .hv5-map__svg [data-slug]:hover path,
body.home-v5 .hv5-map .hv5-map__svg [data-slug].is-on,
body.home-v5 .hv5-map .hv5-map__svg [data-slug].is-on path{ fill:var(--hv-brand) !important }
/* everything that is not a tagged state (borders, neighbours, hatching) stays quiet */
body.home-v5 .hv5-map__svg svg > *:not([data-slug]){ opacity:.45 }

body.home-v5 .hv5-map__out{ min-height:88px; border-top:1px solid var(--hv-line); padding-top:10px }
body.home-v5 .hv5-map__hint{ margin:0; font-size:.75rem; color:var(--hv-text-3) }
body.home-v5 .hv5-map__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px }
body.home-v5 .hv5-map__head a{ font-weight:700; font-size:.85rem; color:var(--hv-text); text-decoration:none }
body.home-v5 .hv5-map__head a:hover{ color:var(--hv-cyan) }
body.home-v5 .hv5-map__head span{
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--hv-text-3);
  font-variant-numeric:tabular-nums; flex:none;
}
body.home-v5 .hv5-map__districts{
  display:flex; flex-wrap:wrap; gap:5px; max-height:60px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--hv-line-2) transparent;
}
body.home-v5 .hv5-map__districts::-webkit-scrollbar{ width:6px }
body.home-v5 .hv5-map__districts::-webkit-scrollbar-thumb{ background:var(--hv-line-2); border-radius:6px }
body.home-v5 .hv5-map__districts a{
  font-size:.66rem; padding:3px 8px; border-radius:100px; text-decoration:none;
  border:1px solid var(--hv-line); color:var(--hv-text-2); background:rgba(255,255,255,.02);
}
body.home-v5 .hv5-map__districts a:hover{ color:var(--hv-cyan); border-color:var(--hv-cyan) }

/* chip list: crawlable links, keyboard access, and the three off-map states */
body.home-v5 .hv5-map__chips{
  display:flex; flex-wrap:wrap; gap:4px; max-height:66px; overflow-y:auto;
  padding-top:9px; border-top:1px solid var(--hv-line);
  scrollbar-width:thin; scrollbar-color:var(--hv-line-2) transparent;
}
body.home-v5 .hv5-map__chips::-webkit-scrollbar{ width:6px }
body.home-v5 .hv5-map__chips::-webkit-scrollbar-thumb{ background:var(--hv-line-2); border-radius:6px }
body.home-v5 .hv5-map__chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:100px;
  font-size:.64rem; text-decoration:none; color:var(--hv-text-3);
  border:1px solid var(--hv-line); background:rgba(255,255,255,.02);
}
body.home-v5 .hv5-map__chip b{ color:var(--hv-text-3); opacity:.7; font-variant-numeric:tabular-nums }
body.home-v5 .hv5-map__chip:hover,
body.home-v5 .hv5-map__chip:focus-visible{ color:var(--hv-text); border-color:var(--hv-cyan) }
body.home-v5 .hv5-map__chip:focus-visible{ outline:2px solid var(--hv-cyan); outline-offset:2px }
/* states the base map does not draw get a subtle marker so the gap is visible */
body.home-v5 .hv5-map__chip.is-offmap{ border-style:dashed }

body.home-v5 .hv5-map__credit{ margin:0; font-size:.58rem; color:var(--hv-text-3); opacity:.7 }
body.home-v5 .hv5-map__credit a{ color:inherit; text-decoration:underline }