/* Home page v2 — page-scoped styles, prefix `hn2-`. Independent of css/home-new.css so home_new.html
   (and any other page) is unaffected. Builds on bundle.css tokens and layout utilities (.section /
   .container / .padding-6 / .caption / .paragraph …). The hero wrapper, modal, logo marquee,
   testimonial carousel and CTA keep their original bundle.css classes/markup for working IX2/Slick
   behaviour; only their inner content changes here. */

/* ---- shared ---- */
.hn2-intro { max-width: 44rem; }
.hn2-intro.hn2-intro-wide { max-width: 54rem; }
.hn2-caption { color: var(--brand-primary); }
.hn2-h2-lg { font-size: 3rem; line-height: 1.08; }
@media screen and (max-width: 767px) { .hn2-h2-lg { font-size: 2.25rem; } }

/* ============================================================
   HERO — equipment-centered visual
   ============================================================ */
/* The hero equipment visual is the focal point and must never be invisible on first paint.
   The wrapper reuses index.html's Webflow IX2 "scroll into view" reveal (20% offset) so the
   rest of the hero's load animation keeps working, but that trigger can race on above-the-fold
   content depending on viewport/timing — too risky for the one visual this redesign is built
   around, so it's forced visible here regardless of JS timing. */
.home-hero-image .scroll-into-image { opacity: 1 !important; transform: none !important; }

/* bundle.css floats the hero image above the copy below 992px (order: -9999, from index.html's
   illustration). Here that block is the unit plus 8 data cards, which would push the headline
   off a phone screen, so the copy leads instead. */
@media screen and (max-width: 991px) { #w-node-bc043763-5335-51a3-751d-421210b04297-be9d38bf { order: 1; } }

.hn2-hero-kicker { display: block; font-size: .8em; line-height: 1.15; letter-spacing: -2px; margin-bottom: .2em; }
.hn2-hero-title { display: block; font-size: 1.1em; font-weight: 700; line-height: 1.1; }
.hn2-hero-sub { color: var(--background-opacity-80); }

.hn2-equip-panel { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: .75rem; row-gap: 0; max-width: 34rem; margin: 0 auto; }
.hn2-equip-label { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .375rem; }
.hn2-equip-label.hn2-row-top { grid-row: 1; justify-content: flex-end; }
.hn2-equip-label.hn2-row-bottom { grid-row: 3; flex-direction: column-reverse; }
.hn2-equip-text { font-size: .8125rem; font-weight: 500; line-height: 1.1rem; color: var(--background-default); }
.hn2-equip-line { width: 1px; height: 1.25rem; background-color: var(--brand-primary); flex: none; }
.hn2-equip-stage { grid-row: 2; grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; padding: .25rem 0; position: relative; }
.hn2-equip-img { width: 100%; max-width: 26rem; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(6, 6, 6, .18)); }
.hn2-equip-cap { text-align: center; color: var(--contrast-tertiary-dark); font-size: .875rem; margin-top: .25rem; }

/* 1100px, not 991px: the equipment-label grid needs its column width squeezed a bit earlier
   than the rest of the hero, matching the nav's known 992-1100px overflow band on this site. */
@media screen and (max-width: 1100px) {
  .hn2-equip-panel { max-width: 28rem; column-gap: .5rem; }
  .hn2-equip-text { font-size: .75rem; line-height: 1rem; }
  .hn2-equip-line { height: 1rem; }
}
@media screen and (max-width: 767px) {
  /* an "orbit" of 8 tiny labels doesn't survive a phone width: reflow to a simple equipment
     image on top, all 8 categories as a readable 2-col card grid below */
  .hn2-equip-panel { display: block; max-width: 20rem; margin: 0 auto; }
  .hn2-equip-stage { padding: 0 0 1.5rem; }
  .hn2-equip-img { max-width: 16rem; }
  .hn2-equip-cards { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: .625rem; margin-top: 1rem; }
  .hn2-equip-cards .hn2-equip-img { grid-column: 1 / -1; max-width: 100%; margin: 0 auto .375rem; }
  .hn2-equip-card { background-color: var(--contrast-primary); border: 1px solid var(--contrast-divider-dark); border-radius: 1rem; padding: .75rem .875rem; font-size: .8125rem; font-weight: 500; line-height: 1.1rem; color: var(--background-default); }
  /* the desktop/tablet label rows are hidden on phone; the card grid (same copy) takes over */
  .hn2-equip-row-desktop { display: none; }
}
@media screen and (min-width: 768px) { .hn2-equip-cards { display: none; } }

/* ============================================================
   TRUST — logo marquee heading
   ============================================================ */
.hn2-trust-heading { font-size: 1.25rem; }

/* ============================================================
   PROBLEMS — "why HVAC data is a problem"
   ============================================================ */
.hn2-problems-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.hn2-problem { background-color: var(--contrast-primary); border: 1px solid var(--contrast-divider-dark); border-radius: 1.5rem; }
.hn2-problem[open] { border-color: var(--brand-primary); }
.hn2-problem-summary { list-style: none; cursor: pointer; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .875rem; }
.hn2-problem-summary::-webkit-details-marker { display: none; }
.hn2-problem-summary::marker { content: ""; }
.hn2-problem-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.hn2-problem-icon { width: 2.5rem; height: 2.5rem; flex: none; color: var(--brand-primary); }
.hn2-problem-icon svg { width: 100%; height: 100%; }
.hn2-problem-toggle { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--contrast-divider-dark); display: flex; align-items: center; justify-content: center; color: var(--contrast-tertiary-dark); transition: transform .2s, background-color .2s, color .2s; }
.hn2-problem-toggle svg { width: .75rem; height: .75rem; }
.hn2-problem[open] .hn2-problem-toggle { transform: rotate(45deg); background-color: var(--brand-primary); color: var(--contrast-primary); border-color: var(--brand-primary); }
.hn2-problem-summary h4 { color: var(--background-default); margin: 0; }
.hn2-problem-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s ease, opacity .2s ease; }
.hn2-problem-detail > div { overflow: hidden; }
.hn2-problem-detail p { margin: 0 1.5rem 1.75rem; color: var(--background-opacity-80); font-size: 1rem; line-height: 1.5rem; font-weight: 300; }
.hn2-problem[open] .hn2-problem-detail,
.hn2-problem:hover .hn2-problem-detail,
.hn2-problem:focus-within .hn2-problem-detail { grid-template-rows: 1fr; opacity: 1; }
@media (hover: none) {
  .hn2-problem:hover .hn2-problem-detail { grid-template-rows: 0fr; opacity: 0; }
  .hn2-problem[open]:hover .hn2-problem-detail { grid-template-rows: 1fr; opacity: 1; }
}

@media screen and (max-width: 991px) { .hn2-problems-grid { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 479px) { .hn2-problems-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SOLUTION — one cohesive, staged experience
   ============================================================ */
.hn2-dark { background-color: #0a2a7a; background-image: url('../images/dark-blue-bg-2.jpg'); background-position: 50% 50%; background-size: cover; color: var(--contrast-primary); }
.hn2-dark .hn2-caption { color: var(--contrast-secondary); }
.hn2-dark .paragraph { color: var(--contrast-secondary); }
.hn2-glass { background-color: rgba(6, 6, 6, .42); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

.hn2-stages { position: relative; }
.hn2-stage { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.5rem; padding-top: 4rem; }
.hn2-stage:first-child { padding-top: 0; }
.hn2-stage-rail { position: relative; display: flex; justify-content: center; }
.hn2-stage-num { width: 3rem; height: 3rem; border-radius: 50%; background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; font-family: "DM Mono", monospace; font-size: .9375rem; color: var(--contrast-primary); flex: none; z-index: 1; }
.hn2-stage-rail::before { content: ""; position: absolute; top: 3rem; bottom: -4rem; left: 50%; width: 1px; background-color: rgba(255, 255, 255, .18); transform: translateX(-50%); }
.hn2-stage:last-child .hn2-stage-rail::before { display: none; }
.hn2-stage-head h3 { margin: 0 0 .75rem; }
.hn2-stage-body { margin-top: 2rem; }

/* stage 1: data stream + stat proof points */
.hn2-stream { position: relative; height: 26rem; border-radius: 2rem; overflow: hidden; }
.hn2-stream canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hn2-stream-focus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%); width: 9rem; pointer-events: none; }
.hn2-stream-focus img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 0 28px rgba(0, 99, 242, .45)) drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); }
.hn2-stream-glow { position: absolute; inset: -.875rem; border-radius: 1.5rem; background-color: var(--background-opacity-80-brand); opacity: .4; filter: blur(16px); }
.hn2-stream-ring { position: absolute; inset: 0; border-radius: .875rem; border: 1px solid var(--background-hover-brand); opacity: 0; animation: hn2-pulse 3s ease-out infinite; }
.hn2-stream-ring.is-second { animation-delay: 1.5s; }
.hn2-stats { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.hn2-stat-n { font-size: 2.75rem; line-height: 1; letter-spacing: -1px; color: var(--contrast-primary); }
.hn2-stat-l { color: var(--contrast-tertiary); font-size: 1rem; line-height: 1.4rem; margin-top: .5rem; }

/* stage 2: full data by model number */
.hn2-model-wrap { display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
.hn2-model-image { position: relative; }
.hn2-model-image img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 24px rgba(0, 99, 242, .45)) drop-shadow(0 12px 24px rgba(0, 0, 0, .45)); }
.hn2-model-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hn2-model-item { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.hn2-model-item:last-child { border-bottom: 0; }
.hn2-model-summary { list-style: none; cursor: pointer; padding: 1rem .75rem; margin: 0 -.75rem; border-radius: .75rem; transition: background-color .25s; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hn2-model-summary::-webkit-details-marker { display: none; }
.hn2-model-summary strong { color: var(--contrast-primary); font-weight: 500; font-size: 1.125rem; }
.hn2-model-plus { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: flex; align-items: center; justify-content: center; color: var(--contrast-secondary); transition: transform .2s; }
.hn2-model-item[open] .hn2-model-plus { transform: rotate(45deg); }
.hn2-model-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .22s ease, opacity .18s ease; }
.hn2-model-detail > div { overflow: hidden; }
.hn2-model-detail p { margin: 0 0 1rem; color: var(--contrast-secondary); font-size: .9375rem; line-height: 1.4rem; font-weight: 300; max-width: 34rem; }
.hn2-model-item[open] .hn2-model-detail { grid-template-rows: 1fr; opacity: 1; }

/* stage 3: troubleshooting + diagnostics flow */
.hn2-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; margin-top: 2.5rem; }
.hn2-flow-step { background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 1.5rem; padding: 1.75rem; position: relative; }
.hn2-flow-step .hn2-stat-n { font-size: 1.875rem; }
.hn2-flow-step p { margin: .5rem 0 0; color: var(--contrast-secondary); font-size: .9375rem; line-height: 1.4rem; font-weight: 300; }
.hn2-flow-arrow { display: none; }
@media screen and (min-width: 768px) {
  .hn2-flow { grid-template-columns: 1fr auto 1fr auto 1fr; }
  .hn2-flow-arrow { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .35); }
  .hn2-flow-arrow svg { width: 1.5rem; height: 1.5rem; }
}

@media screen and (max-width: 991px) {
  .hn2-stage { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; }
  .hn2-stage-num { width: 2.25rem; height: 2.25rem; font-size: .8125rem; }
  .hn2-stage-rail::before { top: 2.25rem; }
  .hn2-stream { height: 24rem; }
  .hn2-stats { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  .hn2-model-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .hn2-model-image { max-width: 16rem; margin: 0 auto; }
}
@media screen and (max-width: 767px) {
  .hn2-stage { padding-top: 3rem; }
  .hn2-stats { grid-template-columns: 1fr 1fr; }
  .hn2-stat-n { font-size: 2rem; }
  .hn2-flow { grid-template-columns: 1fr; }
}
@media screen and (max-width: 479px) {
  .hn2-stream { height: 26rem; }
  .hn2-stream-focus { width: 7rem; top: 38%; }
}

@keyframes hn2-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hn2-stream-ring { animation: none; opacity: .35; } }

/* ============================================================
   BUSINESS CASE — accordion rows (replaces tabs)
   ============================================================ */
.hn2-case-list { display: grid; gap: 1rem; }
.hn2-case { background-color: var(--contrast-primary); border: 1px solid var(--contrast-divider-dark); border-radius: 1.5rem; }
.hn2-case[open] { border-color: var(--brand-primary); }
.hn2-case-summary { list-style: none; cursor: pointer; padding: 1.5rem 2rem; display: flex; align-items: center; gap: 1.5rem; }
.hn2-case-summary::-webkit-details-marker { display: none; }
.hn2-case-tag { font-family: "DM Mono", monospace; font-size: .75rem; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--brand-primary); flex: none; width: 9rem; }
.hn2-case-head { flex: 1; min-width: 0; }
.hn2-case-head h3 { margin: 0; color: var(--background-default); }
.hn2-case-chevron { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--contrast-divider-dark); display: flex; align-items: center; justify-content: center; color: var(--background-opacity-80); transition: transform .2s; }
.hn2-case-chevron svg { width: .875rem; height: .875rem; }
.hn2-case[open] .hn2-case-chevron { transform: rotate(180deg); }
.hn2-case-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s ease, opacity .2s ease; }
.hn2-case-detail > div { overflow: hidden; }
.hn2-case[open] .hn2-case-detail { grid-template-rows: 1fr; opacity: 1; }
.hn2-case-body { padding: 0 2rem 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: start; }
.hn2-case-media { border-radius: 1rem; overflow: hidden; border: 1px solid var(--contrast-divider-dark); }
.hn2-case-media img { width: 100%; height: auto; display: block; }
.hn2-case-checks { display: grid; gap: .625rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.hn2-case-checks li { display: flex; gap: .625rem; align-items: flex-start; color: var(--background-default); font-size: 1rem; line-height: 1.5rem; }
.hn2-case-checks svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: var(--brand-primary); }

@media screen and (max-width: 767px) {
  .hn2-case-summary { padding: 1.25rem 1.25rem; gap: 1rem; flex-wrap: wrap; }
  .hn2-case-tag { width: auto; order: -1; flex-basis: 100%; }
  .hn2-case-body { grid-template-columns: 1fr; padding: 0 1.25rem 1.75rem; gap: 1.5rem; }
}

/* ============================================================
   BLUON VS. AI-DERIVED DATA — enlarged chart cards
   ============================================================ */
.hn2-charts { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.5rem; }
.hn2-chart-card { background-color: var(--contrast-primary); border: 1px solid var(--contrast-divider-dark); border-radius: 1.5rem; padding: 2.25rem; display: flex; flex-direction: column; }
.hn2-chart-sub { color: var(--contrast-tertiary-dark); font-size: 1rem; line-height: 1.4rem; margin-top: .25rem; }
.hn2-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .9375rem; color: var(--background-opacity-80); }
.hn2-legend-item { display: inline-flex; align-items: center; gap: .5rem; }
.hn2-key { width: 1.25rem; height: .75rem; border-radius: 2px; display: inline-block; position: relative; }
.hn2-key::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background-color: var(--hn2-c); border-radius: 1px; }
.hn2-key::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background-color: var(--hn2-c); box-shadow: 0 0 0 2px var(--contrast-primary); }
.hn2-key-bluon { --hn2-c: var(--brand-primary); }
.hn2-key-ai { --hn2-c: #b45309; }
.hn2-legend-logos { display: inline-flex; gap: .375rem; margin-left: .25rem; }
.hn2-legend-logos img { width: 1.125rem; height: 1.125rem; display: block; }
.hn2-chart { position: relative; margin-top: 1.25rem; height: 18rem; flex: 1 0 auto; }
.hn2-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hn2-chart text { font-family: "DM Sans", sans-serif; font-size: 12px; fill: var(--contrast-tertiary-dark); }
.hn2-chart svg.is-narrow text { font-size: 11px; }
.hn2-chart .hn2-axis-title { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.hn2-chart .hn2-val { font-size: 13px; font-weight: 500; fill: var(--background-default); }
.hn2-chart .hn2-grid { stroke: var(--background-hover); stroke-width: 1; }
.hn2-chart .hn2-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hn2-chart .hn2-dot { stroke: var(--contrast-primary); stroke-width: 2; }
.hn2-chart .hn2-col { rx: 4; }
.hn2-chart .hn2-cross { stroke: var(--contrast-divider-dark); stroke-width: 1; pointer-events: none; }
.hn2-chart .hn2-hit { fill: transparent; cursor: default; }
.hn2-tip { position: absolute; z-index: 2; pointer-events: none; background-color: var(--contrast-primary); border: 1px solid var(--contrast-divider-dark); border-radius: .75rem; padding: .625rem .75rem; box-shadow: 0 .5rem 1.5rem rgba(6, 6, 6, .12); font-size: .8125rem; line-height: 1.25rem; color: var(--background-default); white-space: nowrap; opacity: 0; transition: opacity .12s; }
.hn2-tip.is-on { opacity: 1; }
.hn2-tip strong { display: block; font-weight: 500; margin-bottom: .125rem; }
.hn2-tip-row { display: flex; align-items: center; gap: .5rem; }
.hn2-tip-row i { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.hn2-footnote { color: var(--contrast-tertiary-dark); font-size: 1rem; line-height: 1.5rem; margin-top: 1.25rem; }
.hn2-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* a table ignores width:1px and keeps its content width; anchor it inside the card so it can't widen the page */
.hn2-chart-card { position: relative; overflow: hidden; }

@media screen and (max-width: 991px) { .hn2-charts { grid-template-columns: 1fr; } }
@media screen and (max-width: 767px) { .hn2-chart-card { padding: 1.5rem; } .hn2-chart { height: 17rem; } }

/* ============================================================
   CTA — minor spacing (same .cta-wrapper design)
   ============================================================ */
.hn2-cta-grid { justify-content: space-between; }
.hn2-cta-grid .paragraph { color: var(--contrast-secondary); }
.hn2-cta-grid .cta-button-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; flex: none; }
.hn2-cta-grid .transparent-button.cta { text-decoration: none; }
@media screen and (max-width: 991px) {
  .hn2-cta-grid { flex-direction: column; align-items: flex-start; }
  .hn2-cta-grid .cta-button-wrapper { align-self: center; }
}

/* ============================================================
   INTERACTION LAYER — scroll reveals, hover fills, live states.
   Everything here is progressive: content is fully visible and
   usable without JS, and js/home-new-v2.js only adds `hn2-ready`
   (which enables the hidden-until-scrolled state) when motion is OK.
   ============================================================ */
html { scroll-behavior: smooth; }
#hn2-solution { scroll-margin-top: 4rem; }

/* scroll reveal */
.hn2-ready [data-reveal] { transition: opacity .7s ease var(--hn2-d, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--hn2-d, 0s), border-color .25s, background-color .25s; }
.hn2-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(1.5rem); }

/* shared scan sweep, masked to the equipment's own silhouette */
.hn2-scan-wrap { position: relative; display: block; width: 100%; max-width: 26rem; }
.hn2-scan-wrap .hn2-equip-img { max-width: 100%; }
.hn2-scan { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: url('../images/hvac-assets-1.png') center / 100% 100% no-repeat; mask: url('../images/hvac-assets-1.png') center / 100% 100% no-repeat; }
.hn2-scan::before { content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; background-image: linear-gradient(90deg, transparent, rgba(0, 99, 242, .28) 70%, rgba(127, 180, 255, .9) 98%, transparent); animation: hn2-scan 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }

/* hero: data labels are links into the solution; one lights up at a time */
.hn2-equip-stage .hn2-scan-wrap { transform: translate3d(var(--hn2-px, 0), var(--hn2-py, 0), 0); transition: transform .4s ease-out; }
.hn2-equip-text { padding: .25rem .5rem; border-radius: .75rem; transition: background-color .25s, color .25s; }
.hn2-equip-line { transition: background-color .25s, box-shadow .25s; }
.hn2-equip-label:hover .hn2-equip-text, .hn2-equip-label:focus-visible .hn2-equip-text, .hn2-equip-label.is-lit .hn2-equip-text { background-color: var(--brand-primary); color: var(--contrast-primary); }
.hn2-equip-label:hover .hn2-equip-line, .hn2-equip-label:focus-visible .hn2-equip-line, .hn2-equip-label.is-lit .hn2-equip-line { box-shadow: 0 0 0 1px var(--brand-primary), 0 0 10px rgba(0, 99, 242, .6); }
.hn2-equip-label:focus-visible, .hn2-equip-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: .75rem; }
.hn2-equip-card { display: block; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s; }
.hn2-equip-cards .hn2-equip-card:hover, .hn2-equip-cards .hn2-equip-card.is-lit { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--contrast-primary); }

/* problems: icon tile fills on hover/open */
.hn2-problem-icon { width: 3rem; height: 3rem; border-radius: .875rem; background-color: rgba(0, 99, 242, .08); display: flex; align-items: center; justify-content: center; transition: background-color .25s, color .25s; }
.hn2-problem-icon svg { width: 1.5rem; height: 1.5rem; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.hn2-problem:hover, .hn2-problem:focus-within { border-color: var(--brand-primary); }
.hn2-problem:hover .hn2-problem-icon, .hn2-problem:focus-within .hn2-problem-icon, .hn2-problem[open] .hn2-problem-icon { background-color: var(--brand-primary); color: var(--contrast-primary); }
.hn2-problem:hover .hn2-problem-icon svg { transform: rotate(-8deg) scale(1.12); }
.hn2-problem:hover .hn2-problem-toggle { border-color: var(--brand-primary); color: var(--brand-primary); }
.hn2-problem-summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; border-radius: 1.5rem; }

/* problems -> solution bridge */
.hn2-bridge { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: max-content; max-width: 100%; margin: 4.5rem auto 0; text-decoration: none; color: var(--background-default); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.5px; text-align: center; }
.hn2-bridge-arrow { width: 3.25rem; height: 3.25rem; border-radius: 50%; background-color: var(--brand-primary); color: var(--contrast-primary); display: flex; align-items: center; justify-content: center; transition: background-color .25s; animation: hn2-bob 2.2s ease-in-out infinite; }
.hn2-bridge-arrow svg { width: 1.25rem; height: 1.25rem; }
.hn2-bridge:hover .hn2-bridge-arrow, .hn2-bridge:focus-visible .hn2-bridge-arrow { background-color: var(--background-default); }

/* solution rail: fills as you scroll; the stage you're in lights up */
.hn2-stage-rail::after { content: ""; position: absolute; top: 3rem; bottom: -4rem; left: 50%; width: 2px; margin-left: -1px; background-image: linear-gradient(rgba(127, 180, 255, 1), var(--contrast-primary)); transform-origin: top; transform: scaleY(var(--hn2-fill, 0)); }
.hn2-stage:last-child .hn2-stage-rail::after { display: none; }
.hn2-stage-num { transition: background-color .4s, border-color .4s, box-shadow .4s; }
.hn2-stage.is-active .hn2-stage-num { background-color: var(--brand-primary); border-color: rgba(127, 180, 255, .9); box-shadow: 0 0 0 6px rgba(0, 99, 242, .3); }
@media screen and (max-width: 991px) { .hn2-stage-rail::after { top: 2.25rem; } }

/* stats */
.is-in .hn2-stat-pop, .hn2-stat-pop.is-in { animation: hn2-pop .9s cubic-bezier(.3, 1.5, .5, 1) .5s both; }

/* stage 2: the equipment "reads out" whichever category is lit */
.hn2-model-chip { position: absolute; left: 0; top: 0; background-color: var(--brand-primary); color: var(--contrast-primary); font-size: .875rem; font-weight: 500; line-height: 1.25rem; padding: .375rem .875rem; border-radius: 1.5rem; white-space: nowrap; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3); pointer-events: none; }
.hn2-model-chip.is-swap { animation: hn2-chip .35s ease both; }
.hn2-model-item { position: relative; scroll-margin-top: 8rem; }
.hn2-model-item::before { content: ""; position: absolute; left: -.75rem; top: 1.1rem; width: 3px; height: 1.5rem; border-radius: 2px; background-color: rgba(127, 180, 255, 1); opacity: 0; transition: opacity .25s; }
.hn2-model-item.is-lit::before, .hn2-model-item:has(details[open])::before { opacity: 1; }
.hn2-model-summary:hover, .hn2-model-item.is-lit .hn2-model-summary { background-color: rgba(255, 255, 255, .07); }
.hn2-model-summary:hover .hn2-model-plus, .hn2-model-item.is-lit .hn2-model-plus { border-color: var(--contrast-primary); color: var(--contrast-primary); }
.hn2-model-summary:focus-visible { outline: 2px solid var(--contrast-primary); outline-offset: -2px; }
.hn2-model-item.is-flash .hn2-model-summary { animation: hn2-flash 1.4s ease; }
@media screen and (min-width: 992px) { .hn2-model-image { position: sticky; top: 8rem; } }

/* stage 3 flow */
.hn2-flow-step { transition: border-color .25s, background-color .25s; }
.hn2-flow-step:hover { border-color: rgba(255, 255, 255, .4); background-color: rgba(255, 255, 255, .1); }
.hn2-flow-arrow svg { animation: hn2-nudge 1.8s ease-in-out infinite; }

/* business case rows */
.hn2-case:hover { border-color: var(--brand-primary); }
.hn2-case-chevron { transition: transform .25s, background-color .25s, color .25s, border-color .25s; }
.hn2-case:hover .hn2-case-chevron, .hn2-case[open] .hn2-case-chevron { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--contrast-primary); }
.hn2-case-summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; border-radius: 1.5rem; }
.hn2-case-media img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hn2-case-media:hover img { transform: scale(1.03); }
.hn2-case[open] .hn2-case-body > * { animation: hn2-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.hn2-case[open] .hn2-case-body > *:last-child { animation-delay: .08s; }

/* charts draw themselves when scrolled into view */
.hn2-chart .hn2-line { stroke-dasharray: var(--hn2-len, 0); stroke-dashoffset: var(--hn2-len, 0); transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1); }
.hn2-chart .hn2-dot, .hn2-chart .hn2-val { opacity: 0; transition: opacity .4s ease var(--hn2-d, 0s); }
.hn2-chart .hn2-col, .hn2-chart .hn2-col-base { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1) var(--hn2-d, 0s); }
.hn2-chart.is-drawn .hn2-line { stroke-dashoffset: 0; }
.hn2-chart.is-drawn .hn2-dot, .hn2-chart.is-drawn .hn2-val { opacity: 1; }
.hn2-chart.is-drawn .hn2-col, .hn2-chart.is-drawn .hn2-col-base { transform: scaleY(1); }

@keyframes hn2-scan { 0% { transform: translateX(0); } 100% { transform: translateX(390%); } }
@keyframes hn2-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.375rem); } }
@keyframes hn2-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.25rem); } }
@keyframes hn2-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hn2-chip { 0% { opacity: 0; transform: translateY(.375rem); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes hn2-rise { 0% { opacity: 0; transform: translateY(1rem); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes hn2-flash { 0%, 60% { background-color: rgba(127, 180, 255, .3); } 100% { background-color: rgba(255, 255, 255, .07); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hn2-scan, .hn2-flow-arrow svg, .hn2-bridge-arrow, .is-in .hn2-stat-pop, .hn2-stat-pop.is-in, .hn2-model-chip.is-swap, .hn2-case[open] .hn2-case-body > *, .hn2-model-item.is-flash .hn2-model-summary { animation: none; }
  .hn2-scan { display: none; }
  .hn2-equip-stage .hn2-scan-wrap, .hn2-case-media img, .hn2-problem-icon svg { transition: none; transform: none; }
}