/*
 * HVAC SEO Services.
 *
 * A heating-and-cooling page. Navy ink on an ice-blue ground, the brand blue
 * for "cool" and one ember orange for "heat"; the two meet in a single
 * thermostat gradient (--hv-therm) that is spent on a few moments only: the
 * 46% local-intent figure, the process dial, the featured pricing rim and the
 * closing band. (Round two: the hero's self-drawing arc and floating readouts
 * were cut - "looking weird" - for a plain ice stage behind the art.) Everything else is hairline
 * grids on white and ice — grilles, not floating cards.
 *
 * Everything is scoped under .hv-page. landing.css still loads (the button
 * set and the shared FAQ accordion), so a few rules exist to unpick a shared
 * default — each says so.
 *
 * Motion contract (same as the AIO page): [data-reveal] gets .is-in from
 * hvac-seo.js on first intersection and each child staggers off its own --i;
 * the reveal is an ANIMATION with backwards fill, never a transition, so it
 * cannot replace a component's own hover transition. Hero elements carry
 * .hv-rise and animate on load. Hiding is gated on .hv-js, added by the
 * script at parse time — no script, nothing hidden. Everything collapses to
 * "visible, still" under prefers-reduced-motion at the foot of this file.
 *
 * Order: tokens, type, buttons, motion, hero, awards, what (duct), facts,
 * provider, services (grille), strategies (tabs) + local band, grow + leads
 * band, pricing, process (dial), choose + found band, FAQ, responsive,
 * reduced motion.
 */
.hv-page {
  --hv-ink: #0c1a3a;
  --hv-ink-2: #12244d;
  --hv-ice: #eef4fb;
  --hv-ice-2: #e1eaf7;
  --hv-cool: #1a7cff;
  --hv-cool-2: #0f5fd6;
  --hv-heat: #ff6b35;
  --hv-therm: linear-gradient(90deg, #ff6b35 0%, #1a7cff 100%);
  --hv-therm-soft: linear-gradient(
    180deg,
    rgba(26, 124, 255, 0) 0%,
    rgba(26, 124, 255, 0.08) 60%,
    rgba(255, 107, 53, 0.1) 100%
  );
  --hv-muted: #5b6b86;
  --hv-line: rgba(12, 26, 58, 0.12);
  --hv-line-light: rgba(255, 255, 255, 0.14);

  --hv-num: "Poppins", var(--heading-font);
  --hv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hv-sec-y: clamp(64px, 8vw, 120px);
  --hv-top: clamp(96px, 9vw, 124px); /* the theme's header-clearing offset */
  --hv-radius: 28px;

  background: #fff;
  color: var(--hv-ink);
  overflow-x: clip; /* the hero arc and glows overhang; never scroll for them */
}

.hv-sec {
  position: relative;
  padding-block: var(--hv-sec-y);
}

.hv-ice {
  background: var(--hv-ice);
}

.hv-dark {
  background: var(--hv-ink);
  color: #fff;
}

/* A faint grille texture on the navy sections: fine horizontal vent lines. */
.hv-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 14px
  );
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%);
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6),
    transparent 70%
  );
}

/* ---------- Type ---------- */
.hv-page .hv-h2 {
  font-family: var(--heading-font);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}

.hv-page .hv-h3 {
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.hv-h2-center {
  text-align: center;
}

.hv-h2-light,
.hv-h3-light {
  color: #fff;
}

.hv-page .hv-accent {
  color: var(--hv-cool);
}

.hv-lead {
  margin: 18px 0 0;
  max-width: 58ch;
  color: var(--hv-muted);
  font-size: 16px;
  line-height: 1.8;
}

.hv-lead + .hv-lead {
  margin-top: 12px;
}

.hv-lead-center {
  margin-inline: auto;
  text-align: center;
  max-width: 64ch;
}

.hv-lead-light {
  color: rgba(255, 255, 255, 0.74);
}

.hv-head-note {
  margin-top: 0;
}

/* Heading left, its note right and low, so the pair reads as a spread. */
.hv-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(34px, 4.4vw, 60px);
}

.hv-head-center {
  margin-bottom: clamp(34px, 4.4vw, 60px);
}

.hv-actions {
  margin-top: 30px;
}

.hv-actions-center {
  display: flex;
  justify-content: center;
}

/* ---------- Buttons ---------- */
/* The theme's .btn-strategy pill in the page's blue. style.css animates the
   label padding and the disc position on hover (transition: all), so every
   property named here transitions on the same curve. */
.hv-page .btn-strategy.hv-btn {
  background-color: var(--hv-cool);
  border-color: var(--hv-cool);
  transition:
    padding 0.42s var(--hv-ease),
    background-color 0.42s var(--hv-ease),
    border-color 0.42s var(--hv-ease),
    box-shadow 0.42s var(--hv-ease),
    transform 0.42s var(--hv-ease);
}

.hv-page .btn-strategy.hv-btn:hover {
  background-color: var(--hv-ink);
  border-color: var(--hv-ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(26, 124, 255, 0.3);
}

.hv-page .btn-strategy.hv-btn .icon-circle {
  background: #fff;
  transition:
    right 0.42s var(--hv-ease),
    background-color 0.42s var(--hv-ease);
}

.hv-page .btn-strategy.hv-btn .icon-circle svg path {
  fill: var(--hv-cool);
}

.hv-page .btn-strategy.hv-btn:hover .icon-circle svg path {
  fill: var(--hv-ink);
}

/* White pill for the navy and gradient bands. */
.hv-page .btn-strategy.hv-btn-light {
  background-color: #fff;
  border-color: #fff;
}

.hv-page .btn-strategy.hv-btn-light .btn-text {
  color: var(--hv-ink);
  transition: color 0.42s var(--hv-ease);
}

.hv-page .btn-strategy.hv-btn-light:hover {
  background-color: var(--hv-ink);
  border-color: var(--hv-ink);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.hv-page .btn-strategy.hv-btn-light:hover .btn-text {
  color: #fff;
}

.hv-page .btn-strategy.hv-btn-light .icon-circle {
  background: var(--hv-cool);
}

.hv-page .btn-strategy.hv-btn-light .icon-circle svg path {
  fill: #fff;
}

.hv-page .btn-strategy.hv-btn-light:hover .icon-circle {
  background: #fff;
}

/* Outline pill for the two unfeatured pricing columns. */
.hv-page .btn-strategy.hv-btn-ghost {
  background-color: transparent;
  border-color: var(--hv-line);
}

.hv-page .btn-strategy.hv-btn-ghost .btn-text {
  color: var(--hv-ink);
  transition: color 0.42s var(--hv-ease);
}

.hv-page .btn-strategy.hv-btn-ghost .icon-circle {
  background: var(--hv-ice-2);
}

.hv-page .btn-strategy.hv-btn-ghost .icon-circle svg path {
  fill: var(--hv-ink);
}

.hv-page .btn-strategy.hv-btn-ghost:hover {
  background-color: var(--hv-ink);
  border-color: var(--hv-ink);
  box-shadow: 0 16px 32px rgba(12, 26, 58, 0.25);
}

.hv-page .btn-strategy.hv-btn-ghost:hover .btn-text {
  color: #fff;
}

.hv-page .btn-strategy.hv-btn-ghost:hover .icon-circle {
  background: #fff;
}

/* ---------- Motion primitives ---------- */
.hv-page.hv-js [data-reveal] > *,
.hv-page.hv-js [data-reveal] > ul > li,
.hv-page.hv-js [data-reveal] > ol > li {
  opacity: 0;
}

.hv-page [data-reveal].is-in > *,
.hv-page [data-reveal].is-in > ul > li,
.hv-page [data-reveal].is-in > ol > li {
  opacity: 1;
  animation: hv-reveal 0.8s var(--hv-ease) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes hv-reveal {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

.hv-page.hv-js .hv-rise {
  opacity: 0;
  transform: translateY(30px);
  animation: hv-rise 0.9s var(--hv-ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}

@keyframes hv-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Hero ---------- */
.hv-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--hv-top) clamp(48px, 6vw, 96px);
  background:
    radial-gradient(
      60% 50% at 80% 10%,
      rgba(26, 124, 255, 0.1),
      transparent 70%
    ),
    linear-gradient(180deg, #fff 0%, var(--hv-ice) 100%);
}

/* Two soft glows, warm low-left and cool high-right — the page's two
   temperatures, first seen here. Decoration only. */
.hv-hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.35;
}

.hv-hero-glow-warm {
  width: 420px;
  height: 420px;
  left: -140px;
  bottom: -160px;
  background: var(--hv-heat);
}

.hv-hero-glow-cool {
  width: 520px;
  height: 520px;
  right: -160px;
  top: -120px;
  background: var(--hv-cool);
}

.hv-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(16px, 3vw, 40px);
}

.hv-hero-title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hv-hero-text {
  margin: 24px 0 0;
  max-width: 54ch;
  color: var(--hv-muted);
  font-size: 17px;
  line-height: 1.75;
}

.hv-hero-actions {
  margin-top: 34px;
}

/* The art: the image alone, hovering. The wrapper drifts toward the pointer
   (--tx/--ty from data-tilt), the image floats on its own slow loop, and a
   pool of blue light sits under it so the hover reads as height. */
.hv-hero-art {
  position: relative;
  padding: 6% 2% 4%;
  /* the standalone property: .hv-rise's animation owns `transform` here */
  translate: var(--tx, 0) var(--ty, 0);
  transition: translate 0.6s var(--hv-ease);
}

.hv-hero-art > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  animation: hv-float 7s ease-in-out infinite;
}

@keyframes hv-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

/* The pool: the shadow the floating laptop casts on the ground - a blurred
   navy ellipse that shrinks and fades as the image rises, grows back as it
   settles, so the loop reads as height rather than as a wobble. */
.hv-hero-pool {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 2%;
  height: 10%;
  border-radius: 50%;
  background: rgba(12, 26, 58, 0.42);
  filter: blur(14px);
  animation: hv-pool 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hv-pool {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.9;
  }

  50% {
    transform: scaleX(0.82);
    opacity: 0.5;
  }
}

/* ---------- Awards ---------- */
/* The front page's awards shape (home.css 2026-09-16): split head with a
   gradient rule that draws in, an edge-masked shell, soft tiles whose badges
   sit grey until hovered. style.css owns .marquee's keyframes and pause. */
.hv-head-rule-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  margin-bottom: 0;
}

.hv-head-rule {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--hv-cool) 0%, var(--hv-heat) 100%);
  transform-origin: right center;
  margin-bottom: 14px;
  opacity: 0.85;
}

.hv-page.hv-js [data-reveal] .hv-head-rule {
  transform: scaleX(0);
  transition: transform 0.9s var(--hv-ease) 0.2s;
}

.hv-page.hv-js [data-reveal].is-in .hv-head-rule {
  transform: scaleX(1);
}

.hv-marquee-shell {
  margin-top: clamp(30px, 3.6vw, 48px);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}

/* unpicks style.css's .marquee top margin; the padding keeps the hover lift
   and the tile shadow inside .marquee's overflow: hidden box */
.hv-page .marquee {
  margin-top: 0;
  padding-block: 18px 26px;
}

.hv-page .award-row {
  gap: 16px;
  padding-right: 16px;
}

.hv-page .award {
  width: 166px;
  padding: 20px 14px 18px;
  border: 1px solid var(--hv-line);
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 2px 4px rgba(12, 26, 58, 0.04),
    0 12px 32px rgba(12, 26, 58, 0.06);
  gap: 12px;
  transition:
    transform 0.45s var(--hv-ease),
    box-shadow 0.45s var(--hv-ease);
}

.hv-page .award:hover {
  transform: translateY(-5px);
  box-shadow:
    0 8px 18px rgba(12, 26, 58, 0.06),
    0 34px 70px rgba(12, 26, 58, 0.12);
}

.hv-page .award-badge {
  height: 88px;
  margin: 0;
  display: grid;
  place-items: center;
  filter: grayscale(1);
  opacity: 0.55;
  transition:
    filter 0.45s var(--hv-ease),
    opacity 0.45s var(--hv-ease);
}

.hv-page .award-badge img {
  max-height: 88px;
  width: auto;
  object-fit: contain;
}

.hv-page .award:hover .award-badge {
  filter: none;
  opacity: 1;
}

.hv-page .award-name {
  font-family: var(--heading-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: #8a93a6;
  transition: color 0.35s var(--hv-ease);
}

.hv-page .award:hover .award-name {
  color: var(--hv-ink);
}

/* ---------- Per-step colour ---------- */
/* Where a step sits on the blue-to-ember run: --p is set inline on each li
   (0% first, 100% last) and resolves to the rail's colour beside it, so a
   glow or a fill matches the line it hangs off. Declared ON the li, not on
   .hv-page - a custom property's var()s resolve where it is declared, so on
   the page it would read --p as unset and every step would come out blue. */
.hv-duct-step,
.hv-step {
  --hv-step-c: color-mix(in srgb, var(--hv-heat) var(--p, 0%), var(--hv-cool));
}

/* ---------- What — the duct ---------- */
.hv-what-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.hv-what-copy {
  position: sticky;
  top: var(--hv-top);
}

/* heads the steps column, centred over the duct */
.hv-what-sub {
  margin: 0 0 30px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--hv-line-light);
  font-family: var(--heading-font);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
}

/* One line down the left that fills ember-to-blue as the visitor scrolls;
   --hv-fill is set by the script, 0% without it. */
.hv-duct {
  position: relative;
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;
}

.hv-duct::before,
.hv-duct::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  border-radius: 2px;
}

.hv-duct::before {
  background: var(--hv-line-light);
}

.hv-duct::after {
  background: linear-gradient(180deg, var(--hv-cool), var(--hv-heat));
  bottom: auto;
  height: calc((100% - 56px) * var(--hv-fill, 0));
  transition: height 0.15s linear;
}

.hv-duct-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 18px 0;
}

.hv-duct-step + .hv-duct-step {
  border-top: 1px solid var(--hv-line-light);
}

.hv-duct-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-left: -41px;
  border-radius: 50%;
  background: var(--hv-ink);
  border: 1px solid var(--hv-line-light);
  color: #fff;
  transition:
    border-color 0.4s var(--hv-ease),
    box-shadow 0.4s var(--hv-ease),
    background-color 0.4s var(--hv-ease);
}

.hv-duct-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.hv-duct-step.is-lit .hv-duct-icon {
  background: var(--hv-ink-2);
  border-color: var(--hv-step-c);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--hv-step-c) 18%, transparent),
    0 0 28px color-mix(in srgb, var(--hv-step-c) 40%, transparent);
}

.hv-duct-body p {
  margin: 8px 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.7;
}

.hv-duct-step .hv-h3 {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.4s var(--hv-ease);
}

.hv-duct-step.is-lit .hv-h3 {
  color: #fff;
}

/* ---------- Facts ---------- */
.hv-facts {
  background:
    radial-gradient(
      70% 90% at 100% 100%,
      rgba(255, 107, 53, 0.28),
      transparent 60%
    ),
    linear-gradient(120deg, var(--hv-cool-2) 0%, var(--hv-cool) 100%);
  color: #fff;
}

.hv-facts-head {
  max-width: 820px;
  margin-bottom: clamp(36px, 5vw, 72px);
}

.hv-facts-head .hv-lead-light {
  color: rgba(255, 255, 255, 0.82);
}

.hv-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hv-fact {
  padding: 8px clamp(20px, 3vw, 48px);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.hv-fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.hv-fact-icon {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.hv-fact-num {
  margin: 18px 0 8px;
  font-family: var(--hv-num);
  font-size: clamp(64px, 7.5vw, 112px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hv-fact-text {
  margin: 0;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- Provider ---------- */
.hv-provider-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.hv-provider-frame {
  position: relative;
  border-radius: var(--hv-radius);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(12, 26, 58, 0.18);
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform 0.5s var(--hv-ease);
}

.hv-provider-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.hv-provider-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 36px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--hv-line);
}

.hv-provider-stat dt {
  font-family: var(--hv-num);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hv-ink);
}

.hv-provider-stat dd {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hv-muted);
}

/* ---------- Services — the grille ---------- */
.hv-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hv-line);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  overflow: hidden;
}

.hv-grille-cell {
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  background: #fff;
  isolation: isolate;
}

/* The warm wash rises from the foot of a cell on hover. */
.hv-grille-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hv-therm-soft);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--hv-ease);
}

.hv-grille-cell:hover::before {
  transform: scaleY(1);
}

.hv-grille-icon {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin-bottom: 22px;
  transition: transform 0.5s var(--hv-ease);
}

.hv-grille-cell:hover .hv-grille-icon {
  transform: translateY(-6px);
}

.hv-grille-cell p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--hv-muted);
}

/* ---------- Strategies — tabs ---------- */
.hv-tabs {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  --hv-tab-ms: 5000ms;
}

.hv-tab-list {
  display: grid;
  border-left: 2px solid var(--hv-line);
}

.hv-tab {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 16px 18px;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hv-muted);
  cursor: pointer;
  transition:
    color 0.35s var(--hv-ease),
    background-color 0.35s var(--hv-ease);
}

.hv-tab:hover {
  color: var(--hv-ink);
  background: rgba(26, 124, 255, 0.05);
}

.hv-tab:focus-visible {
  outline: 2px solid var(--hv-cool);
  outline-offset: -2px;
  border-radius: 8px;
}

.hv-tab.is-active {
  color: var(--hv-ink);
}

.hv-tab-num {
  font-family: var(--hv-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--hv-cool);
}

/* The bar on the active tab fills over the autoplay interval, so the visitor
   can see when it will move on. Paused while the block is hovered or has
   focus; the script pauses the timer at the same moments. */
.hv-tab-bar {
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--hv-therm);
  background: linear-gradient(180deg, var(--hv-heat), var(--hv-cool));
}

.hv-tab.is-active .hv-tab-bar {
  height: 100%;
}

.hv-tabs.is-playing .hv-tab.is-active .hv-tab-bar {
  animation: hv-tab-progress var(--hv-tab-ms) linear forwards;
}

.hv-tabs.is-playing:hover .hv-tab.is-active .hv-tab-bar,
.hv-tabs.is-playing:focus-within .hv-tab.is-active .hv-tab-bar {
  animation-play-state: paused;
}

@keyframes hv-tab-progress {
  from {
    height: 0;
  }
}

.hv-tab-panels {
  position: relative;
  display: grid;
}

.hv-tab-panel {
  grid-area: 1 / 1;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--hv-radius);
  background: var(--hv-ice);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.45s var(--hv-ease),
    transform 0.45s var(--hv-ease),
    visibility 0s linear 0.45s;
}

.hv-tab-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* No script: the panels stack as a plain list. */
.hv-page:not(.hv-js) .hv-tab-panel {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hv-page:not(.hv-js) .hv-tab-panels {
  gap: 16px;
}

.hv-tab-icon {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-bottom: 24px;
}

.hv-page .hv-tab-title {
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.02em;
}

.hv-tab-panel p {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--hv-muted);
}

/* The 46% band. The one place the figure is gradient-clipped. */
.hv-local {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 96px);
  padding: clamp(32px, 4vw, 64px);
  border-radius: var(--hv-radius);
  background: var(--hv-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hv-local-glow,
.hv-band-glow,
.hv-found-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    360px circle at var(--mx, 30%) var(--my, 50%),
    rgba(26, 124, 255, 0.35),
    transparent 60%
  );
  transition: opacity 0.4s var(--hv-ease);
}

.hv-local-num {
  margin: 0;
  font-family: var(--hv-num);
  font-size: clamp(88px, 13vw, 190px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(
    90deg,
    #ff7a45 0%,
    #ff9a6b 30%,
    #62a9ff 70%,
    #1a7cff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--hv-cool);
}

.hv-local-copy .hv-h2 {
  font-size: clamp(26px, 2.8vw, 38px);
}

/* ---------- Grow ---------- */
.hv-grow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hv-grow-item {
  position: relative;
  padding: 8px clamp(18px, 2.6vw, 36px) 8px;
  border-left: 1px solid var(--hv-line);
}

.hv-grow-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.hv-grow-num {
  display: block;
  font-family: var(--hv-num);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--hv-cool);
}

.hv-grow-icon {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-top: 22px;
  filter: brightness(0) saturate(100%) invert(48%) sepia(93%) saturate(2440%)
    hue-rotate(346deg) brightness(103%) contrast(101%);
}

.hv-grow-item p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--hv-muted);
}

.hv-grow-item strong {
  color: var(--hv-ink);
}

/* The navy band (leads). */
.hv-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 96px);
  padding: clamp(32px, 4vw, 64px);
  border-radius: var(--hv-radius);
  background: var(--hv-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hv-band-copy .hv-h2 {
  font-size: clamp(26px, 2.8vw, 38px);
}

/* ---------- Pricing ---------- */
.hv-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.hv-plan {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  background: #fff;
  transition:
    transform 0.5s var(--hv-ease),
    box-shadow 0.5s var(--hv-ease);
}

.hv-plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(12, 26, 58, 0.1);
}

/* The featured column wears the thermostat gradient as its rim. */
.hv-plan.is-featured {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--hv-therm) border-box;
  box-shadow: 0 30px 60px rgba(26, 124, 255, 0.14);
}

.hv-plan-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hv-line);
}

.hv-plan-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--hv-ice);
  flex: none;
}

.hv-plan-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.hv-plan-list {
  flex: 1;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.hv-plan-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hv-muted);
}

.hv-plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hv-cool)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}

.hv-plan-actions {
  margin-top: 30px;
}

.hv-plan-actions .btn-strategy {
  width: 100%;
  justify-content: flex-start;
}

/* ---------- Process — the dial ---------- */
.hv-process-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

/* The column is the sticky thing: a grid item with align-self: start keeps
   its own height, so it travels the full height of the steps beside it. */
.hv-dial-col {
  position: sticky;
  top: var(--hv-top);
  align-self: start;
}

.hv-dial {
  display: grid;
}

.hv-dial svg {
  grid-area: 1 / 1;
  width: min(100%, 380px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.hv-dial-track,
.hv-dial-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(135deg);
  transform-origin: 50% 50%;
  /* 270° of a 140-radius circle: 879.6 around, 659.7 drawn. */
  stroke-dasharray: 659.7 879.6;
}

.hv-dial-track {
  stroke: rgba(255, 255, 255, 0.1);
}

.hv-dial-fill {
  stroke: url(#hv-dial-grad);
  stroke-dashoffset: calc(659.7 * (1 - var(--hv-dial, 0.1667)));
  transition: stroke-dashoffset 0.7s var(--hv-ease);
}

.hv-dial-ticks line {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2;
  stroke-linecap: round;
}

.hv-dial-needle {
  transform: rotate(var(--hv-angle, -90deg));
  transform-origin: 160px 160px;
  transition: transform 0.7s var(--hv-ease);
}

.hv-dial-needle line {
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

.hv-dial-needle circle {
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

.hv-dial-read {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  text-align: center;
  padding-top: 26px;
  pointer-events: none;
}

.hv-dial-num {
  font-family: var(--hv-num);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hv-dial-of {
  margin-top: 4px;
  font-family: var(--hv-num);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.hv-dial-label {
  margin-top: 10px;
  max-width: 14ch;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.hv-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hv-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--hv-line-light);
}

.hv-step:last-child {
  border-bottom: 1px solid var(--hv-line-light);
}

/* Dimmed on the children, not the li: the reveal owns the li's opacity. */
.hv-step > * {
  opacity: 0.5;
  transition: opacity 0.5s var(--hv-ease);
}

.hv-step.is-current > *,
.hv-step.is-past > * {
  opacity: 1;
}

.hv-step-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--hv-line-light);
  font-family: var(--hv-num);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  transition:
    background-color 0.5s var(--hv-ease),
    border-color 0.5s var(--hv-ease),
    box-shadow 0.5s var(--hv-ease);
}

/* Past and current numbers take the dial's colour at their own position on
   the blue-to-ember rim (--p per step, see the token). */
.hv-step.is-past .hv-step-num {
  border-color: var(--hv-step-c);
  color: var(--hv-step-c);
}

.hv-step.is-current .hv-step-num {
  background: var(--hv-step-c);
  border-color: var(--hv-step-c);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--hv-step-c) 20%, transparent),
    0 0 24px color-mix(in srgb, var(--hv-step-c) 45%, transparent);
}

.hv-step-body p {
  margin: 10px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
}

.hv-step .hv-h3 {
  font-size: 22px;
}

/* ---------- Choose ---------- */
.hv-reasons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hv-reason {
  padding: 8px clamp(18px, 2.6vw, 36px) 8px;
  border-left: 1px solid var(--hv-line);
}

.hv-reason:first-child {
  padding-left: 0;
  border-left: 0;
}

.hv-reason-icon {
  display: block;
  width: 92px;
  height: 82px;
  object-fit: contain;
  object-position: left;
  margin-bottom: 22px;
  transition: transform 0.5s var(--hv-ease);
}

.hv-reason:hover .hv-reason-icon {
  transform: translateY(-6px) rotate(-3deg);
}

.hv-reason p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--hv-muted);
}

/* The closing band on the thermostat gradient. */
.hv-found {
  position: relative;
  margin-top: clamp(48px, 6vw, 96px);
  padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 64px);
  border-radius: var(--hv-radius);
  background: linear-gradient(115deg, #ff6b35 0%, #4a4ad6 48%, #1a7cff 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hv-found-glow {
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.28),
    transparent 60%
  );
}

.hv-found .hv-lead-light {
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- FAQ ---------- */
.hv-faq.section {
  padding-block: var(--hv-sec-y);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .hv-grille,
  .hv-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hv-plan.is-featured {
    transform: none;
  }

  .hv-grow-grid,
  .hv-reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .hv-grow-item:nth-child(odd),
  .hv-reason:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 991px) {
  .hv-hero-inner,
  .hv-what-inner,
  .hv-provider-inner,
  .hv-tabs,
  .hv-process-inner,
  .hv-head-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .hv-head-rule {
    display: none;
  }

  .hv-hero-art {
    max-width: 640px;
    margin-inline: auto;
  }

  .hv-what-copy,
  .hv-dial-col {
    position: static;
  }

  .hv-dial svg {
    width: min(100%, 300px);
  }

  .hv-provider-art {
    max-width: 480px;
  }

  .hv-facts-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .hv-fact {
    padding: 0;
    border-left: 0;
  }

  .hv-local,
  .hv-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .hv-tab-panels {
    order: -1;
  }

  .hv-tab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 0;
    border-top: 2px solid var(--hv-line);
  }

  .hv-tab {
    padding: 14px 4px 14px 0;
  }

  .hv-tab-bar {
    left: 0;
    top: -2px;
    width: 0;
    height: 2px !important;
  }

  .hv-tab.is-active .hv-tab-bar {
    width: 100%;
  }

  .hv-tabs.is-playing .hv-tab.is-active .hv-tab-bar {
    animation-name: hv-tab-progress-x;
  }

  @keyframes hv-tab-progress-x {
    from {
      width: 0;
    }
  }
}

@media (max-width: 767px) {
  .hv-grille,
  .hv-plans,
  .hv-grow-grid,
  .hv-reasons,
  .hv-tab-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .hv-grow-item,
  .hv-reason {
    padding-inline: 0;
    border-left: 0;
  }

  .hv-hero {
    padding-top: calc(var(--hv-top) + 20px);
  }

  .hv-provider-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .hv-duct-step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
  }

  .hv-duct {
    padding-left: 28px;
  }

  .hv-duct::before,
  .hv-duct::after {
    left: 21px;
  }

  .hv-duct-icon {
    width: 44px;
    height: 44px;
    margin-left: -29px;
  }

  .hv-duct-icon img {
    width: 22px;
    height: 22px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hv-page [data-reveal] > *,
  .hv-page [data-reveal] > ul > li,
  .hv-page [data-reveal] > ol > li,
  .hv-page .hv-rise {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hv-page *,
  .hv-page *::before,
  .hv-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}