/* ═══════════════════════════════════════════════════════════
   HERO v3

   Built as a split editorial frame rather than text-over-photo:

     · an oversized outlined numeral "45" — the statute that licenses the
       whole business — sitting behind the headline as a ghost layer
     · a tall photo column on the right, clipped and offset, with its own
       parallax, so the composition has two competing masses
     · a vertical statutory rail down the left edge
     · a live ECG trace tied to the brand mark
     · headline set in mixed weight/size, not one flat block
     · the client wall pinned to the lower edge

   v2 was one photo behind a 95% navy wash with a single-size headline —
   which is exactly why it read as a template.
   ═══════════════════════════════════════════════════════════ */

.hero2{
  position:relative;min-height:100svh;background:var(--navy-deep);color:#fff;
  display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
}

/* ── ambient field ────────────────────────────────────── */
.hero2__stage{position:absolute;inset:0;z-index:0}
.hplane{position:absolute;inset:0;opacity:0}
.hplane.on{opacity:1}
.hplane__img{position:absolute;inset:-8%;background-size:cover;background-position:center;
  /* Grade is baked into the plates by scripts/bake_hero_grade.py — running it
     as a CSS filter meant the GPU re-applied it to a full-bleed element on
     every frame of the crossfade, for both planes at once. */
  will-change:transform;transform:scale(1.06)}

/* the ambient layer is heavily darkened; the *framed* photo carries the detail */
.hero2__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(104deg,rgba(4,23,61,.93) 0%,rgba(4,23,61,.78) 40%,rgba(4,23,61,.30) 100%),
    linear-gradient(0deg,rgba(4,23,61,.94) 0%,rgba(4,23,61,.34) 24%,rgba(4,23,61,.06) 62%);
}
.hero2__grain{
  /* No mix-blend-mode. Any blend mode makes the compositor read back everything
     painted beneath this layer and re-blend it every frame — across the full
     viewport, while two hero images crossfade underneath. Measured: removing
     `overlay` here took the hero from 25fps to 50fps, a bigger win than every
     other change combined. Opacity is raised to keep the grain reading at the
     same strength now that it composites normally. */
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:140px 140px;
}
/* Radial gradient, not an inset box-shadow: a 240px shadow blur is re-rasterised
   on every frame of the crossfade, a gradient is painted once and composited. */
.hero2__vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 45%,transparent 42%,rgba(1,8,24,.5) 100%)}

/* faint engineering grid — reads as drawing paper, not decoration */
.hero2__grid-lines{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:clamp(64px,7vw,110px) clamp(64px,7vw,110px);
  -webkit-mask:radial-gradient(120% 90% at 22% 45%,#000 0%,transparent 72%);
  mask:radial-gradient(120% 90% at 22% 45%,#000 0%,transparent 72%);
}

/* ── ghost numeral: the statute the business runs on ──── */
.hero2__ghostnum{
  position:absolute;z-index:1;left:clamp(-30px,-2vw,0px);top:50%;
  transform:translateY(-52%);
  font-family:var(--ff-hero);font-weight:900;line-height:.72;
  font-size:clamp(280px,42vw,680px);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);
  pointer-events:none;user-select:none;white-space:nowrap;
}

/* ── ECG ──────────────────────────────────────────────── */
/* Sits low and stays ambient: at shorter viewport heights the trace passes
   through the stat/CTA band, so it reads as texture behind the composition
   rather than a graphic line competing with it. */
.hero2__ecg{position:absolute;left:0;right:0;top:auto;bottom:6%;z-index:2;height:140px;
  opacity:.62;pointer-events:none}
.hero2__ecg svg{width:100%;height:100%;display:block;overflow:visible}
.hero2__ecg path{fill:none;stroke:#FF3B30;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  /* One shadow, not two: stacked drop-shadows on a path this wide were the
     costliest single filter in the hero, and at .62 layer opacity the second
     pass is not visible anyway. */
  filter:drop-shadow(0 0 8px rgba(255,59,48,.5))}

/* ── statutory rail ───────────────────────────────────── */
.hero2__rail{
  position:absolute;left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:18px;
  writing-mode:vertical-rl;font-family:var(--ff-mono);font-size:9.5px;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42);
}
.hero2__rail::before,.hero2__rail::after{content:"";width:1px;height:clamp(40px,7vh,80px);
  background:linear-gradient(rgba(255,255,255,.32),transparent)}
.hero2__rail::after{background:linear-gradient(transparent,rgba(255,255,255,.32))}

/* ── body ─────────────────────────────────────────────── */
.hero2__body{position:relative;z-index:3;flex:1;display:flex;align-items:center;
  padding-top:clamp(80px,10vh,116px)}
.hero2__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,70px);align-items:center;width:100%}

.hero2__spec{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:clamp(18px,2.4vw,26px)}
.hero2__spec span{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.22);padding:6px 10px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.hero2__spec span.hot{border-color:rgba(255,59,48,.75);color:#FF8A84;
  box-shadow:inset 0 0 22px rgba(255,59,48,.18)}

/* mixed-scale headline — the flat one-size block was the templated tell */
.hero2__title{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  margin:0;line-height:.82;letter-spacing:-.02em}
.hero2__title .ln{display:block;overflow:hidden}
.hero2__title .ln > span{display:block;will-change:transform}
.hero2__l1{font-size:clamp(40px,6.4vw,86px);color:rgba(255,255,255,.92)}
.hero2__l2{font-size:clamp(58px,10.4vw,146px)}
.hero2__l3{font-size:clamp(58px,10.4vw,146px);color:#FF4438;
  text-shadow:0 0 44px rgba(255,59,48,.32)}

.hero2__rule{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,2.4vw,26px)}
.hero2__rule::before{content:"";height:1px;flex:1;max-width:74px;
  background:linear-gradient(90deg,#FF3B30,rgba(255,59,48,0))}
.hero2__rule span{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}

.hero2__sub{margin:clamp(14px,1.8vw,20px) 0 0;max-width:44ch;
  font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.7;color:rgba(255,255,255,.72)}

.hero2__actions{display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
  margin-top:clamp(24px,3vw,34px)}
.hero2__cta{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  /* Brand red, not the brighter accent: white on #FF3B30 measures 3.55:1,
     under the 4.5:1 minimum for body-size text — and this is the site's
     primary call to action. #C80818 is the brand's own bright red and
     measures 5.99:1. The accent red stays for the ECG trace and the
     reticle, where it is decoration rather than text on a fill. */
  padding:16px 30px;background:var(--red-bright);color:#fff;text-decoration:none;
  font-weight:600;font-size:15px;overflow:hidden;
}
.hero2__cta span{position:relative;z-index:1}
.hero2__cta::before{content:"";position:absolute;inset:0;background:#fff;
  transform:translateY(101%);transition:transform .42s var(--ease)}
.hero2__cta:hover::before{transform:translateY(0)}
.hero2__cta:hover{color:var(--navy-deep)}
.hero2__ghost{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;
  font-size:14px;font-weight:500;padding-bottom:5px;min-height:26px;
  border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .25s}
.hero2__ghost:hover{border-bottom-color:#FF3B30}

/* ── framed photo column ──────────────────────────────── */
.hero2__frame{position:relative;height:clamp(340px,58vh,560px);
  clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);overflow:hidden;background:#02101f}
.hero2__frame .fr{position:absolute;inset:0;opacity:0}
.hero2__frame .fr.on{opacity:1}
.hero2__frame .fr__img{position:absolute;inset:-10%;background-size:cover;
  background-position:center;will-change:transform}
.hero2__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,23,61,.66),rgba(4,23,61,0) 55%)}

.hero2__framecap{
  position:absolute;left:14%;bottom:16px;z-index:2;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
  display:flex;align-items:center;gap:8px;
}
.hero2__framecap::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#FF3B30;box-shadow:0 0 10px rgba(255,59,48,.9)}

/* counters sit under the frame as a spec strip */
.hero2__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.h2s{padding:14px 12px 0}
.h2s + .h2s{border-left:1px solid rgba(255,255,255,.14)}
.h2s__n{display:flex;align-items:flex-end;font-family:var(--ff-hero);font-weight:900;
  font-size:clamp(26px,2.8vw,38px);line-height:.86}
.h2s__n .odo{height:1em}
.h2s__suf{color:#FF7A70;margin-left:.04em}
.h2s__l{margin-top:6px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.5}

/* ── client wall ──────────────────────────────────────── */
.hero2__proof{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.14);
  background:rgba(2,14,38,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero2__proof-in{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);padding:15px 0}
.hero2__proof-lbl{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;flex:none}
.hero2__marquee{overflow:hidden;flex:1;min-width:0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hero2__track{display:flex;width:max-content;align-items:center;will-change:transform}
.h2chip{
  flex:none;display:grid;place-items:center;
  height:38px;width:clamp(84px,8vw,112px);
  margin:0 clamp(9px,1vw,14px);padding:0 12px;border-radius:3px;
  background:#fff;opacity:.9;transition:opacity .3s ease,transform .3s ease;
}
.h2chip:hover{opacity:1;transform:translateY(-2px)}
.hero2__track img{max-height:22px;max-width:100%;width:auto;object-fit:contain;display:block}

/* ── scroll cue + reticle ─────────────────────────────── */
.hero2__cue{position:absolute;right:clamp(16px,2.6vw,34px);bottom:clamp(84px,11vh,112px);z-index:4;
  writing-mode:vertical-rl;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:10px}
.hero2__cue::after{content:"";width:1px;height:44px;
  background:linear-gradient(rgba(255,255,255,.5),transparent)}
.hero2__ret{position:absolute;z-index:2;width:40px;height:40px;pointer-events:none;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;opacity:0}
.hero2__ret::before,.hero2__ret::after{content:"";position:absolute;background:#FF3B30}
.hero2__ret::before{left:50%;top:-8px;width:1px;height:8px;transform:translateX(-50%)}
.hero2__ret::after{left:50%;bottom:-8px;width:1px;height:8px;transform:translateX(-50%)}

/* ── responsive ───────────────────────────────────────── */
@media(max-width:1050px){
  .hero2__grid{grid-template-columns:1fr;gap:28px}
  .hero2__frame{height:clamp(240px,34vh,340px);clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
  .hero2__ghostnum{font-size:clamp(240px,58vw,420px)}
  .hero2__rail,.hero2__cue{display:none}
}
@media(max-width:640px){
  .hero2__stats{grid-template-columns:1fr}
  .h2s + .h2s{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .hero2__proof-lbl{display:none}
  .hero2__ecg{height:120px}
  .hero2__frame{clip-path:none}
}
@media(prefers-reduced-motion:reduce){
  .hplane,.hero2__frame .fr{opacity:1}
  .hero2__ecg{display:none}
}