/* ═══════════════════════════════════════════════════════════
   RANGERS — full-bleed cinematic makeover
   Reverent / heroic. Edge-to-edge photography, scroll reveals,
   slow Ken-Burns, text over image. Site tokens.
   ═══════════════════════════════════════════════════════════ */
:root{ --rg-ink:#060907; }

/* shared full-bleed scene */
.rgc-scene{position:relative;min-height:100vh;overflow:hidden;background:var(--rg-ink);display:flex}
.rgc-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  transform:scale(1.1);animation:rgcDrift 19s ease-in-out infinite;will-change:transform}
@keyframes rgcDrift{0%,100%{transform:scale(1.1) translate(0,0)}25%{transform:scale(1.135) translate(-1.4%,0.9%)}
  50%{transform:scale(1.12) translate(1.1%,-1%)}75%{transform:scale(1.135) translate(1.3%,1%)}}
.rgc-scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.rgc-inner{position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;
  padding:clamp(2rem,6vw,6rem) clamp(1.5rem,5vw,5.5rem);display:flex;flex-direction:column;justify-content:flex-end}

/* entrance */
/* entrance — flicker / pop up, replays each time scene re-enters */
.rgc-rise{opacity:0}
.rgc-scene.in .rgc-rise{animation:rgcReveal 0.95s cubic-bezier(0.16,1,0.3,1) both}
.rgc-scene.in .rgc-rise.d1{animation-delay:0.12s}
.rgc-scene.in .rgc-rise.d2{animation-delay:0.26s}
.rgc-scene.in .rgc-rise.d3{animation-delay:0.4s}
@keyframes rgcReveal{0%{opacity:0;transform:translateY(34px)}100%{opacity:1;transform:translateY(0)}}
.rgc-type::after{content:'\2588';color:var(--lime);margin-left:1px}
.rgc-type.done::after{display:none}

/* ── HERO ── */
.rgc-hero{align-items:flex-end}
.rgc-hero .rgc-scrim{background:linear-gradient(to top,rgba(6,9,7,0.92) 2%,rgba(6,9,7,0.2) 42%,rgba(6,9,7,0.45) 100%)}
.rgc-hero .rgc-inner{padding-bottom:clamp(3rem,8vh,6rem)}
.rgc-kicker{font-family:var(--font-sub);font-size:0.78rem;font-weight:700;letter-spacing:0.34em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:0.9rem;margin-bottom:1.5rem}
.rgc-kicker::before{content:'';width:46px;height:2px;background:var(--lime)}
.rgc-h1{font-family:var(--font-head);font-weight:800;font-size:clamp(3.4rem,10vw,8.5rem);line-height:0.86;
  text-transform:uppercase;color:#fff;letter-spacing:-0.025em;margin:0 0 1.6rem;text-shadow:0 8px 50px rgba(0,0,0,0.5)}
.rgc-h1 .green{color:var(--lime)}
.rgc-hero-quote{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:clamp(1.2rem,2.1vw,1.9rem);
  line-height:1.5;color:rgba(238,244,232,0.92);max-width:40ch;border-left:2px solid var(--lime);padding-left:1.4rem;
  text-shadow:0 2px 22px rgba(0,0,0,0.6)}
.rgc-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;
  align-items:center;gap:0.5rem;color:rgba(255,255,255,0.7)}
.rgc-cue span{font-family:var(--font-sub);font-size:0.62rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase}
.rgc-cue i{width:20px;height:20px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);
  animation:rgcBob 1.7s ease-in-out infinite}
@keyframes rgcBob{0%,100%{transform:rotate(45deg) translate(0,0);opacity:0.4}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}

/* ── dark interstitial (toll / training intros) ── */
.rgc-intro{background:var(--rg-ink);padding:clamp(4rem,9vw,7.5rem) clamp(1.5rem,5vw,5.5rem);border-top:1px solid var(--border)}
.rgc-intro-in{max-width:1180px;margin:0 auto}
.rgc-eyebrow{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:0.8rem;margin-bottom:1.5rem}
.rgc-eyebrow::before{content:'';width:36px;height:2px;background:var(--alert)}
.rgc-head{font-family:var(--font-head);font-weight:800;font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:0.98;
  text-transform:uppercase;letter-spacing:-0.025em;color:#fff;max-width:18ch}
.rgc-head .green{color:var(--lime)}
.rgc-lead{font-family:var(--font-accent);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.55rem);
  color:rgba(238,244,232,0.72);max-width:48ch;margin-top:1.5rem;line-height:1.5}
.rgc-statline{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-top:clamp(2.2rem,4vw,3.2rem)}
.rgc-statline .cell{padding:clamp(1.8rem,3.5vw,2.8rem) clamp(1.2rem,2vw,2rem) clamp(1.8rem,3.5vw,2.8rem) 0}
.rgc-statline .cell + .cell{border-left:1px solid var(--border);padding-left:clamp(1.5rem,3vw,2.5rem)}
.rgc-statline .n{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(3rem,8vw,6.5rem);line-height:0.82;
  letter-spacing:-0.035em;color:var(--alert);font-variant-numeric:tabular-nums}
.rgc-statline .n.green{color:var(--lime)}
.rgc-statline .l{display:block;font-family:var(--font-body);font-weight:300;font-size:0.95rem;line-height:1.5;
  color:var(--text-body);margin-top:1rem;max-width:26ch}

/* ── TOLL facts (full-bleed, text lower-left, giant number) ── */
.rgc-fact .rgc-scrim{background:linear-gradient(to top,rgba(6,9,7,0.94) 4%,rgba(6,9,7,0.25) 55%,rgba(6,9,7,0.55) 100%)}
.rgc-fact .rgc-inner{max-width:1320px}
.rgc-fact-num{font-family:var(--font-head);font-weight:800;font-size:clamp(5rem,16vw,15rem);line-height:0.74;letter-spacing:-0.05em;
  color:transparent;-webkit-text-stroke:1.6px rgba(186,222,158,0.5);text-stroke:1.6px rgba(186,222,158,0.5);
  font-variant-numeric:tabular-nums;margin-bottom:0.4rem}
.rgc-fact-label{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--lime);margin-bottom:1rem;display:block}
.rgc-fact-text{font-family:var(--font-head);font-weight:300;font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:1.18;
  letter-spacing:-0.015em;color:#fff;max-width:24ch;text-wrap:pretty;text-shadow:0 4px 30px rgba(0,0,0,0.5)}
.rgc-fact-text strong{font-weight:700;color:var(--lime)}

/* ── BOND (centered, quiet) ── */
.rgc-bond{align-items:center;text-align:center}
.rgc-bond .rgc-scrim{background:radial-gradient(120% 100% at 50% 50%,rgba(6,9,7,0.5),rgba(6,9,7,0.86))}
.rgc-bond .rgc-inner{align-items:center;justify-content:center}
.rgc-bond .rgc-eyebrow{justify-content:center}
.rgc-bond-line{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:clamp(1.6rem,3.4vw,3rem);
  line-height:1.32;color:#fff;max-width:24ch;text-shadow:0 4px 30px rgba(0,0,0,0.6)}
.rgc-bond-line .green{color:var(--lime);font-style:normal;font-family:var(--font-head);font-weight:800;text-transform:uppercase}

/* ── TRAINING steps (full-bleed, step chip top-left) ── */
.rgc-step .rgc-scrim{background:linear-gradient(to top,rgba(6,9,7,0.92) 3%,rgba(6,9,7,0.25) 50%,rgba(6,9,7,0.5) 100%)}
.rgc-step .rgc-inner{max-width:1320px}
.rgc-step-chip{display:inline-flex;align-items:center;gap:0.8rem;margin-bottom:1.2rem}
.rgc-step-chip .num{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:rgba(6,9,7,0.5);border:2px solid var(--lime);font-family:var(--font-head);font-weight:800;font-size:0.95rem;
  color:var(--lime);font-variant-numeric:tabular-nums;backdrop-filter:blur(4px)}
.rgc-step-chip .of{font-family:var(--font-sub);font-size:0.68rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.65)}
.rgc-step-title{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:0.9;
  text-transform:uppercase;color:#fff;letter-spacing:-0.025em;margin:0 0 1rem;text-shadow:0 4px 30px rgba(0,0,0,0.5)}
.rgc-step-title .green{color:var(--lime)}
.rgc-step-text{font-family:var(--font-head);font-weight:300;font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.35;
  color:rgba(238,244,232,0.92);max-width:34ch;text-shadow:0 2px 20px rgba(0,0,0,0.5)}
.rgc-step-text small{display:block;margin-top:0.7rem;font-family:var(--font-sub);font-size:0.66rem;font-weight:500;
  letter-spacing:0.06em;text-transform:uppercase;color:rgba(186,222,158,0.7)}

/* ── strategy panel ── */
.rgc-strategy{background:var(--rg-ink);padding:clamp(4rem,9vw,7rem) clamp(1.5rem,5vw,5.5rem);border-top:1px solid var(--border)}
.rgc-strategy p{max-width:34ch;margin:0 auto;font-family:var(--font-head);font-weight:300;font-size:clamp(1.5rem,3vw,2.6rem);
  line-height:1.3;color:rgba(238,244,232,0.85);text-align:center}
.rgc-strategy em{font-style:normal;color:#fff;font-weight:600}
.rgc-strategy .green{color:var(--lime)}

/* ── CLOSING ── */
.rgc-close{align-items:center;text-align:center}
.rgc-close .rgc-scrim{background:linear-gradient(to top,rgba(6,9,7,0.9),rgba(6,9,7,0.5) 45%,rgba(6,9,7,0.72))}
.rgc-close .rgc-inner{align-items:center;justify-content:center}
.rgc-close-h{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:0.9;
  text-transform:uppercase;color:#fff;letter-spacing:-0.025em;margin:0 0 0.8rem;text-shadow:0 6px 40px rgba(0,0,0,0.6)}
.rgc-close-h .green{color:var(--lime)}
.rgc-close-sub{font-family:var(--font-accent);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:rgba(238,244,232,0.85);max-width:40ch;margin:0 auto 2rem}
.rgc-close .btn-red{font-size:0.8rem}

@media(prefers-reduced-motion:reduce){
  .rgc-bg{animation:none}.rgc-rise{opacity:1}.rgc-scene.in .rgc-rise{animation:none;opacity:1;transform:none}
  .rgc-cue i{animation:none}.rgc-type::after{display:none}
}
@media(max-width:760px){
  .rgc-scene{min-height:88vh}
  .rgc-statline{grid-template-columns:1fr}
  .rgc-statline .cell + .cell{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:1.6rem}
}