/* =========================================================================
   Scroll-transformation hero — dated site wipes into the brand site.
   Pinned via position:sticky; progress driven by story.js (--wipe 0..1).
   Layout: story caption on top, transforming browser below (column).
   ========================================================================= */
.reveal-hero{position:relative;height:380vh;background:var(--navy)}
.rh-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:clamp(1rem,3vh,2rem);padding:clamp(5rem,13vh,6.5rem) 1rem clamp(2rem,6vh,3.2rem);
  background:radial-gradient(120% 90% at 70% 6%,#13243a,#0a1622 72%)}
.rh-grain{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 22px),
             repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 22px)}
.rh-hint{position:absolute;top:1.1rem;left:50%;translate:-50% 0;z-index:8;color:#8da0b3;font:600 .72rem/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;opacity:var(--hint,1);transition:opacity .3s}
.rh-hint::after{content:" \2193"}

/* caption (top) */
.rh-caption{position:relative;z-index:8;text-align:center;width:100%;max-width:62ch;pointer-events:none}
.rh-lines{position:relative;height:clamp(5rem,20vh,10rem)}
.rh-line{position:absolute;left:50%;top:0;translate:-50% 0;width:100%;margin:0;opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);color:#fff;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.02em}
.rh-line.sm{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.9rem);color:#fff;letter-spacing:-.02em;line-height:1.1}
.rh-line .accent{color:var(--accent)}.rh-line .warn{color:#ff7a66}
.rh-line.on{opacity:1;transform:none}
.rh-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;background:var(--accent);color:#04221c;
  font:700 1rem/1 var(--sans);padding:.9rem 1.5rem;border-radius:100px;pointer-events:auto;opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease) .12s,transform .5s var(--ease) .12s}
.rh-cta.on{opacity:1;transform:none}

/* browser frame (below) */
.rh-browser{position:relative;width:min(80vw,980px);aspect-ratio:16/8.6;border-radius:15px;background:#fff;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;flex:0 0 auto}
.rh-bar{height:40px;background:#e9edf2;display:flex;align-items:center;gap:.5rem;padding:0 1rem;border-bottom:1px solid #d7dee6;position:relative;z-index:5}
.rh-bar i{width:11px;height:11px;border-radius:50%;background:#c4ccd5;display:block}
.rh-bar i:nth-child(1){background:#ec6a5e}.rh-bar i:nth-child(2){background:#f4be4f}.rh-bar i:nth-child(3){background:#61c454}
.rh-url{margin-left:1rem;flex:1;height:22px;border-radius:6px;background:#fff;border:1px solid #d7dee6;display:flex;align-items:center;padding:0 .7rem;font:500 12px/1 var(--sans);color:#8a97a4}
.rh-url .lock{margin-right:.4rem;opacity:.6}
.rh-screen{position:absolute;inset:40px 0 0 0;overflow:hidden}

/* BEFORE */
.rh-before{position:absolute;inset:0;background:#eceae3;font-family:"Times New Roman",Times,serif;color:#222;display:flex;flex-direction:column;will-change:transform,filter}
.b-top{background:linear-gradient(#3a6ea5,#26507f);color:#fff;padding:.5rem 1rem;display:flex;justify-content:space-between;align-items:center}
.b-logo{font-weight:700;font-size:clamp(.85rem,1.5vw,1.15rem);letter-spacing:.5px;text-shadow:1px 1px 0 #00000055}
.b-nav{font-size:clamp(.58rem,1vw,.78rem)}
.b-nav a{color:#ffe;text-decoration:underline;margin-left:.7rem}
.b-hero{flex:1;display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;padding:clamp(.8rem,2vw,1.6rem);align-items:center}
.b-hero h3{font-family:inherit;font-weight:700;font-size:clamp(1rem,2.4vw,1.7rem);color:#274;margin:0 0 .5rem}
.b-hero p{font-size:clamp(.62rem,1.1vw,.86rem);color:#444;line-height:1.45;margin:0 0 .7rem}
.b-btn{display:inline-block;background:linear-gradient(#dfe3e8,#c4ccd5);border:1px solid #9aa6b2;border-radius:3px;padding:.3rem .8rem;font-size:.72rem;color:#222}
.b-img{aspect-ratio:4/3;background:repeating-conic-gradient(#cfcabb 0% 25%,#dcd8cc 0% 50%) 50%/18px 18px;border:2px ridge #b9b3a3;display:grid;place-items:center;color:#8a8474;font-style:italic;font-size:.7rem}
.b-strip{background:#fff6c8;border-top:1px solid #e6d98a;color:#7a6a1f;font-size:.6rem;padding:.3rem 1rem;text-align:center}
.b-foot{background:#26507f;color:#cdd8e6;font-size:.54rem;padding:.32rem 1rem;text-align:center}

/* AFTER (clip-path wipe) */
.rh-after{position:absolute;inset:0;background:var(--navy);color:#fff;overflow:hidden;
  background-image:radial-gradient(120% 90% at 78% 8%,#15314a,transparent 60%);
  clip-path:inset(0 calc((1 - var(--wipe,0)) * 100%) 0 0);will-change:clip-path}
.a-grain{position:absolute;inset:0;opacity:.5;background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 20px),repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 20px)}
.a-top{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.3rem;position:relative;z-index:2}
.a-logo{display:inline-block;font-family:var(--serif);font-weight:700;font-size:clamp(.85rem,1.4vw,1.05rem)}
.a-logo .bw-v{color:var(--accent)}
.a-nav{display:flex;align-items:center;gap:1rem;font:500 clamp(.6rem,1vw,.78rem)/1 var(--sans);color:#aebccb}
.a-cta{background:var(--accent);color:#04221c;border-radius:100px;padding:.4rem .85rem;font:700 clamp(.6rem,1vw,.76rem)/1 var(--sans)}
.a-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1rem,3vw,2.4rem);align-items:center;padding:clamp(1rem,3vw,2.2rem) clamp(1.3rem,4vw,3rem);position:relative;z-index:2}
.a-eyebrow{font:700 clamp(.55rem,.9vw,.72rem)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.a-hero h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,3.6vw,3rem);line-height:1.02;margin:0;letter-spacing:-.02em}
.a-hero h3 .accent{color:var(--accent)}
.a-hero .sub{font:clamp(.7rem,1.2vw,.95rem)/1.5 var(--sans);color:#aebccb;margin:.7rem 0 1rem;max-width:34ch}
.a-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.a-pills span{font:600 clamp(.55rem,.9vw,.72rem)/1 var(--sans);color:#aebccb;border:1px solid #274058;border-radius:100px;padding:.32rem .7rem}
.a-card{background:rgba(20,36,55,.8);border:1px solid #2d4660;border-radius:14px;padding:1rem 1.2rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.a-card .lab{font:clamp(.6rem,1vw,.76rem)/1 var(--sans);color:#8da0b3;margin:0 0 .35rem}
.a-card .big{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1;margin:0;color:#fff}
.a-card .up{color:var(--accent);font:600 clamp(.6rem,1vw,.78rem)/1 var(--sans);margin:.35rem 0 0;display:block}
.a-bars{display:flex;align-items:flex-end;gap:.4rem;height:clamp(40px,8vw,72px);margin-top:.9rem}
.a-bars i{flex:1;display:block;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent),#0e8f79)}
.a-bars i:last-child{background:linear-gradient(180deg,var(--gold),#cf9a1f)}

.rh-scan{position:absolute;top:40px;bottom:0;width:3px;background:linear-gradient(180deg,transparent,var(--accent),transparent);left:calc(var(--wipe,0) * 100%);transform:translateX(-1.5px);z-index:6;opacity:var(--scan,0);box-shadow:0 0 24px 4px rgba(19,184,156,.7);pointer-events:none}

.rh-progress{position:absolute;left:50%;translate:-50% 0;bottom:1rem;z-index:8;display:flex;gap:.4rem}
.rh-progress i{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}
.rh-progress i.on{background:var(--accent)}

@media (max-width:760px){
  .rh-browser{width:94vw;aspect-ratio:10/12}
  .a-hero,.b-hero{grid-template-columns:1fr}
  .a-card,.b-img{display:none}
  .rh-line{font-size:clamp(1.3rem,6vw,2rem)}
}
@media (prefers-reduced-motion:reduce),(scripting:none){
  .reveal-hero{height:auto}
  .rh-stage{position:static;height:auto;min-height:74vh}
  .rh-after{clip-path:none}
  .rh-before,.rh-scan,.rh-progress,.rh-hint{display:none}
  .rh-line{position:static;opacity:1;transform:none;translate:none;display:none}
  .rh-lines{height:auto}
  .rh-line.line-4{display:block}
  .rh-cta{opacity:1;transform:none}
}
html:not(.js) .reveal-hero{height:auto}
html:not(.js) .rh-stage{position:static;height:auto;min-height:74vh}
html:not(.js) .rh-after{clip-path:none}
html:not(.js) .rh-before,html:not(.js) .rh-scan,html:not(.js) .rh-progress,html:not(.js) .rh-hint{display:none}
html:not(.js) .rh-line{position:static;opacity:1;transform:none;translate:none;display:none}
html:not(.js) .rh-lines{height:auto}
html:not(.js) .rh-line.line-4{display:block}
html:not(.js) .rh-cta{opacity:1;transform:none}

.rh-caption{order:-1}