/* ============================================================
   HOME HERO: Night to Dawn · approved by Marc Sep 25, 2026 (comp: hero-final-2, The Voice)
   Copy: Honor your effort. / Effort is a gateway habit. /
   Your financial habits shape your credit score. / Your physical effort deserves a score of its own. (Sep 26) /
   How high can you go? / Get Your Number
   Law kept: no content hidden without JS (all beats visible by default),
   13px floor, #9E9E9E floor, gold = earned value, Signal Yellow = pulse only.
   Production copy of the comp CSS; the unused Comp B (Pulse) rules are removed.
   ============================================================ */

.btn.big{font-size:18px;padding:20px 38px;}
.h25-qual{font-size:13px;color:var(--floor);letter-spacing:.02em;line-height:1.5;}

/* ================= NIGHT TO DAWN ================= */
.h25a{position:relative;background:#000;}
.h25a-stage{position:relative;min-height:calc(100vh - 76px);overflow:hidden;display:flex;align-items:flex-end;}
.h25a-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* first frame under the films (Sep 27): same box and fit as the video, so the still and the film line up exactly */
.h25a-stage .h25a-first img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.h25a-stage .v-dawn{opacity:.0;}
.h25a-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 38%,rgba(0,0,0,.25) 62%,rgba(0,0,0,.55) 100%);}
.h25a-beats{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto;padding:120px 40px 150px;display:flex;flex-direction:column;gap:34px;}
.h25a h1{font-size:clamp(56px,8.4vw,132px);line-height:.98;letter-spacing:-0.025em;font-weight:200;color:#fff;}
.h25a h1 sup{font-size:.25em;vertical-align:super;letter-spacing:0;}
.h25a .gate-line{font-size:clamp(24px,3.1vw,44px);font-weight:200;color:var(--steel);letter-spacing:-0.01em;}
/* credit-score couplet (Marc, Sep 26): line 1 = context in the gate-line voice (200, steel);
   line 2 = the claim, same size, white, 300. The steel-to-white step is the turn; keep it that small. */
.h25a .cs-line{font-size:clamp(24px,3.1vw,44px);letter-spacing:-0.01em;}
.h25a .cs1{font-weight:200;color:var(--steel);}
.h25a .cs2{font-weight:300;color:#fff;margin-top:.5em;}
.h25a .ask{font-size:clamp(22px,2.4vw,34px);font-weight:300;color:#fff;margin-bottom:10px;}
.h25a .num{font-size:clamp(110px,15vw,220px);}
.h25a .num-row{display:flex;align-items:flex-end;gap:34px;flex-wrap:wrap;}
.h25a .rail{width:min(360px,60vw);padding-bottom:30px;}
.h25a .rail-track{height:1px;background:rgba(255,255,255,.22);position:relative;}
.h25a .rail-fill{height:1px;background:var(--gold);position:absolute;left:0;top:0;width:90.3%;box-shadow:0 0 12px rgba(255,212,0,.55);}
.h25a .rail-cap{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.24em;color:var(--floor);margin-top:10px;font-weight:400;text-transform:uppercase;}
.h25a .ctarow{position:relative;z-index:3;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.h25a .cue{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);font-size:13px;letter-spacing:.3em;color:var(--floor);text-transform:uppercase;display:none;}
.h25a .cue::after{content:"";display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(var(--gold),transparent);animation:cueDrop 1.8s ease-in-out infinite;}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* dark pocket behind the number so it reads over any frame */
.h25a .b3::before{content:"";position:absolute;left:50%;top:50%;width:140%;height:190%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 38%,transparent 70%);}
.h25a .beat{position:relative;}
/* scroll choreography: only when JS switches it on */
.h25a.scrolly{height:487vh;} /* v3 Sep 26: +47vh = couplet only (line 1 hold +26vh, line 2 fade +21vh) */
.h25a.scrolly .h25a-stage{position:sticky;top:76px;height:calc(100vh - 76px);min-height:0;align-items:center;}
.h25a.scrolly .h25a-beats{position:absolute;inset:0;padding:0 40px;max-width:none;display:block;}
.h25a.scrolly .beat{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(1280px,calc(100% - 80px));text-align:center;will-change:opacity,transform;}
.h25a.scrolly .beat.b3{top:53%;}
/* before home-hero.js takes over, only the first beat shows (it sets each beat's opacity on every frame) */
.h25a.scrolly .beat.b2,.h25a.scrolly .beat.b2c,.h25a.scrolly .beat.b3{opacity:0;}
@media (max-width:760px){.h25a.scrolly .beat.b3{top:56%;}}
.h25a.scrolly .num-row{justify-content:center;flex-direction:column;align-items:center;gap:6px;}
.h25a.scrolly .rail{padding-bottom:0;}
.h25a.scrolly .ctarow{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);justify-content:center;text-align:center;flex-direction:column;gap:12px;}
.h25a.scrolly .cue{display:none;}
@media (max-width:760px){
  .h25a-beats{padding:90px 22px 120px;}
  .h25a.scrolly .beat{width:calc(100% - 44px);}
  .h25a.scrolly .ctarow{bottom:70px;width:calc(100% - 44px);}
  .h25a.scrolly .cue{display:none;}
  .btn.big{font-size:17px;padding:18px 30px;}
}

/* FINAL: scroll invitation rides under the headline, all screen sizes */
.h25a .scrollme{display:none;}
.h25a.scrolly .scrollme{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px;
  font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:400;}
.h25a.scrolly .scrollme i{display:block;width:14px;height:14px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);animation:nudge 1.6s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateY(0) rotate(45deg);opacity:.55}50%{transform:translateY(9px) rotate(45deg);opacity:1}}
/* dawn is brighter: the shade lifts as the light comes */
.h25a .h25a-shade{transition:none;}
.h25a .num.peak{filter:drop-shadow(0 0 34px rgba(255,212,0,.45));}

/* soft round pocket for the single gateway line (no hard band) */
.h25a .b2::before,.h25a .b2c::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120%);height:340px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.62) 0%,rgba(0,0,0,.38) 45%,transparent 100%);}
@media (max-width:760px){.h25a .b2::before,.h25a .b2c::before{height:240px;width:130%;}}

/* FINAL 2: carried over from the original hero */
.h25a .score-name{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);font-weight:400;margin-top:4px;}
.h25a .def{font-size:clamp(16px,1.5vw,20px);color:var(--gold);font-weight:300;margin-top:22px;line-height:1.5;}
.h25a.scrolly .def{opacity:0;transition:opacity .6s ease;}
.h25a.scrolly .def.on{opacity:1;}
.h25a.scrolly .beat.b3{top:47%;}
.h25a.scrolly .ctarow .h25-qual{text-align:center;}
@media (max-width:760px){.h25a.scrolly .beat.b3{top:50%;} .h25a .score-name{font-size:13px;letter-spacing:.18em;} .h25a .def{font-size:16px;margin-top:14px;}}

/* HERO BUTTON, Comp E (Marc DIRECT Sep 26, 2026: "E is the answer."). Hero button only; every other .btn on the site,
   including the top-nav "Get Your Number", keeps styles.css exactly as it is.
   While the scroll story runs: transparent body (the film shows through), 1px #FFC600 hairline on the full PLANE
   silhouette, gold label and arrow. The hairline is ::before, a gold plane clipped to the PLANE outline with a hole
   (evenodd: outer silhouette, then the same silhouette inset 1px perpendicular to every edge, nose and notch included;
   inner offsets computed for the hero button heights, 61.6px desktop and 56.4px phone).
   .filled (set by home-hero.js when the number reaches 902) = solid #FFC600, black label; removed below 902.
   Hover = solid #FFC600 (never #ffd540), black label, arrow slide from styles.css.
   No JS / reduced motion: .scrolly is never set, so the button stays solid gold. */
.h25a .ctarow .btn.big:hover{background:#FFC600;}
.h25a .ctarow .btn.big .lbl,.h25a .ctarow .btn.big::after{position:relative;z-index:1;}
.h25a.scrolly .ctarow .btn.big{background:transparent;color:#FFC600;transition:background .6s ease,color .6s ease;}
.h25a.scrolly .ctarow .btn.big::before{content:"";position:absolute;inset:0;background:#FFC600;pointer-events:none;
  clip-path:polygon(evenodd,
    0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,12px 50%,0 0,
    1.49px 1px,13.08px 50%,1.49px calc(100% - 1px),calc(100% - 18.56px) calc(100% - 1px),calc(100% - 1.17px) 50%,calc(100% - 18.56px) 1px,1.49px 1px);}
.h25a.scrolly .ctarow .btn.big.filled{background:#FFC600;color:#000;}
.h25a.scrolly .ctarow .btn.big:hover{background:#FFC600;color:#000;transition:background .25s ease,color .25s ease;}