/* ========== Tokens ========== */
:root {
  --brand:#83C236;
  --text:#111;
  --muted:#6b7280;
  --bg:#fff;
  --bg-alt:#f6f7f9;
  --line:#e5e7eb;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Vertical rail */
body::before{
  content:""; position:fixed; top:0; bottom:0;
  left:max(24px, calc((100vw - 1140px)/2 - 24px)); width:1px;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0));
  pointer-events:none; z-index:0;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{line-height:1.2}
p{color:#202020}
.container{width:min(1140px,92%); margin-inline:auto}
.section{position:relative; padding:clamp(56px, 6vw, 96px) 0}
.section-title{font-size:clamp(28px,3.2vw,40px); font-weight:800; margin:0 0 16px}
.lead{font-size:clamp(16px,2vw,18px); color:#1a1a1a; max-width:68ch}
.grid-2{display:grid; gap:40px; grid-template-columns:1.05fr 1fr}
@media (max-width:960px){.grid-2{grid-template-columns:1fr}}

.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:700;
  border-radius:999px; padding:14px 20px; border:2px solid transparent;
  transition:.2s transform ease,.2s background ease,.2s border-color ease; cursor:pointer
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-brand{background:var(--brand); color:#0b1d00}
.btn-ghost{border-color:var(--line)}
.btn-outline{border-color:var(--brand); color:#0b1d00}
.btn-brand:hover{filter:brightness(.96)}
.btn-ghost:hover{background:var(--bg-alt)}
.btn-outline:hover{background:var(--brand)}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:8px 12px;border-radius:6px}
.skip-link:focus{left:8px;z-index:9999}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:inline-flex; align-items:center; gap:12px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand-text{font-weight:800; letter-spacing:.2px}

/* ===== Hero ===== */
.hero{padding-top:clamp(40px,5vw,80px)}
.hero-copy .eyebrow{font-weight:700;color:var(--brand);letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px;font-size:12px}
.hero h1{font-size:clamp(36px,5.4vw,64px); margin:0 0 16px}
.hero p{max-width:55ch}
.cta-row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.badges{display:flex;gap:14px;margin:22px 0 0;padding:0;list-style:none;flex-wrap:wrap;color:var(--muted)}
.badges i{color:var(--brand)}

.hero-art .hero-card{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background:
    url('https://i.ibb.co/5gcY6D6s/TPC-Blk-Col-PJ.png')
    center/contain no-repeat, #000;
}

/* full-watermark layered on top */
.hero-art .hero-card
  content: "";
  position: absolute; inset: 0;
  background:
    url('https://i.ibb.co/5gcY6D6s/TPC-Blk-Col-PJ.png')
    center/contain no-repeat;
  opacity: .08;           /* adjust 0.06–0.12 to taste */
  pointer-events: none;
}
.scroll-cue{display:grid; place-items:center; gap:6px; margin-top:18px; color:var(--muted); font-weight:600}
.scroll-cue i{font-size:14px}

/* ===== Philosophy ===== */
.philosophy{background:var(--bg-alt)}
.cards{display:grid; gap:20px; grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card,.program{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.card i{font-size:26px;color:var(--brand)}
.card h3{margin:12px 0 8px}
.cred-grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:18px}
@media (max-width:900px){.cred-grid{grid-template-columns:1fr}}
.cred{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px}
.cred i{color:var(--brand); margin-top:2px}

/* ===== Programs ===== */
.programs .program header{display:flex; align-items:center; gap:10px}
.programs .program header i{color:var(--brand); font-size:22px}
.programs .program .sub{color:var(--muted); margin:6px 0 14px}
.features{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px}
.features li{display:flex; gap:10px}
.features li::before{content:"•"; color:var(--brand); font-weight:900; margin-top:-2px}
.program.highlight{outline:2px solid var(--brand); transform:translateY(-2px)}

/* ===== Coach ===== */
.coach .coach-photo{
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background:
    url('https://i.ibb.co/FqNmKLyN/2024-ICN-SA-00543.jpg')
    center/cover no-repeat, #000;
  box-shadow: var(--shadow);
}

.coach .ticks{list-style:none; padding:0; display:grid; gap:8px; margin:16px 0 18px}
.coach .ticks i{color:var(--brand)}
.pull-quote{font-weight:800; font-size:clamp(18px,2.2vw,24px); margin:10px 0}

/* ===== Results ===== */
.results{background:var(--bg-alt)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){.stats{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow);display:grid;gap:4px}
.stat .num{font-size:32px; font-weight:800}
.stat .label{color:var(--muted); font-weight:600}
.ig-note{margin-top:16px; color:var(--muted)}

/* ===== Join (Form) ===== */
.form{margin-top:12px}
.grid-form{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.grid-form .span-2{grid-column:span 2}
label{display:grid; gap:8px; font-weight:600}
input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.checkbox{align-items:start;grid-auto-flow:column;grid-template-columns:24px 1fr}
.form-note{color:var(--muted);margin-top:10px}
.toast{margin-top:14px;font-weight:700;color:#0b1d00;display:none}
.toast.show{display:block}

/* ===== Footer ===== */
.footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:40px 0;position:relative}
.footer h3{margin:0 0 12px}
.footer .contact-list,.legal-list{list-style:none;padding:0;display:grid;gap:8px}
.footer .smallprint{color:var(--muted);margin-top:10px}
.to-top{position:absolute;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--brand);display:grid;place-items:center;box-shadow:var(--shadow)}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(16px);transition:.5s ease}
.reveal.visible{opacity:1;transform:none}

/* ===== Legal prose ===== */
.prose{max-width:80ch;margin:0 auto;display:grid;gap:14px}
.legal-meta{color:var(--muted);margin-bottom:8px}
.small{font-size:12px;color:var(--muted)}

/* ===== Modal ===== */
.modal{position:fixed; inset:0; display:none; z-index:200}
.modal.open{display:grid; place-items:center}
.modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.modal__dialog{
  position:relative; max-width:min(920px, 92vw); max-height:86vh; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 40px 80px rgba(0,0,0,.25);
  padding:24px 24px 28px;
}
.modal__dialog::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--brand);border-radius:16px 16px 0 0}
.modal__close{
  position:absolute; right:10px; top:10px; border:0; background:#f3f4f6; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; cursor:pointer
}
.modal__close:hover{background:#e5e7eb}

/* Prevent background scroll when modal open */
body.modal-open{overflow:hidden}

/* Mobile niceties */
@media (max-width:700px){
  .badges{gap:10px}
  .btn{width:100%;justify-content:center}
}
/* === OVERRIDES === */

/* HERO: show your full logo on WHITE (not black) */
.hero-art .hero-card{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Use your DIRECT full-logo URL below */
  background: #fff url('https://i.ibb.co/84TcGfDN/TPC-Wht-Col.png') center / 60% no-repeat !important;
}

/* Kill any previous watermark overlay */
.hero-art .hero-card::after { content: none !important; }

/* MEET YOUR COACH: pull the frame higher so your face stays in view */
.coach .coach-photo{
  /* Use your DIRECT coach image URL below */
  background-image: url('https://i.ibb.co/FqNmKLyN/2024-ICN-SA-00543.jpg') !important;
  background-size: cover !important;
  background-position: center 12% !important; /* tweak 0% (top) … 50% (center) */
}

/* Optional: if you want a wider cinematic crop instead of 4:3 */
@media (min-width: 768px){
  .coach .coach-photo{ aspect-ratio: 16 / 9; }
}

/* Make the logo a touch larger on smaller screens so it reads well */
@media (max-width: 960px){
  .hero-art .hero-card{ background-size: 70% !important; }
}
/* =========================
   OVERRIDES (place at end)
   ========================= */

/* 1) HERO — make the logo a bit larger so it balances the big headline */
#hero .hero-card{
  /* keep it as a free-standing logo, not a tile */
  height: clamp(320px, 48vw, 560px) !important; /* was ~380px; nudged up */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* 2) COACH — give the text more room and stop any crowding/cropping */
#coach .container{
  /* image column narrower, text column wider */
  grid-template-columns: 0.88fr 1.12fr !important;
  align-items: start !important;   /* don’t vertically center; start at top */
}

.coach .coach-photo{
  /* keep your face in frame + slightly shallower crop so the text fits comfortably */
  background-position: center 30% !important; /* 0%=top, 50%=center */
  aspect-ratio: 16 / 10 !important;           /* a touch shorter than 16:9 */
}

/* Optional: on extra-wide screens, cap the image width so text never feels squeezed */
@media (min-width: 1400px){
  .coach .coach-photo{ max-width: 720px; }
}
/* HERO — logo on the page (no tile) */
#hero .hero-card{
  /* keep your current logo background; just strip the card look */
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;

  /* keep the larger size you liked */
  height: clamp(320px, 48vw, 560px) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* kill any watermark layer if present */
#hero .hero-card::before,
#hero .hero-card::after { content: none !important; }

/* =========================
   MOBILE OPTIMIZATION PACK
   ========================= */

/* Global spacing + type */
@media (max-width: 780px){
  .section{ padding: 40px 0; }
  .container{ width:min(100%, 92%); }
  .lead, .hero p{ font-size: 15.5px; }
}

/* Header: keep it compact; show only the mark */
@media (max-width: 480px){
  .brand-text{ display:none; }         /* more room in header */
  .header-inner{ padding: 10px 0; }
}

/* Hero: stack content, larger free-standing logo, no tile */
@media (max-width: 960px){
  #hero .grid-2{ grid-template-columns: 1fr; }
  #hero .hero-card{
    height: clamp(260px, 52vw, 420px) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    margin-top: 8px;
  }
}

/* Cards/Grids collapse cleanly */
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr !important; }
  .stats{ grid-template-columns: 1fr; }
}

/* Coach: give copy breathing room; show image below or above as you like */
@media (max-width: 960px){
  #coach .container{ grid-template-columns: 1fr; align-items: start; }
  .coach .coach-photo{
    aspect-ratio: 16 / 10 !important;
    background-position: center 10% !important; /* keep face in frame */
    margin-top: 14px;
  }
}

/* Form: full-width controls and comfy taps */
@media (max-width: 700px){
  .grid-form{ grid-template-columns: 1fr; }
  .btn{ width:100%; justify-content:center; }
}

/* Footer stacks neatly */
@media (max-width: 780px){
  .footer .grid-2{ grid-template-columns: 1fr; gap: 24px; }
  .to-top{ right: 12px; bottom: 12px; }
}

/* Modals: mobile-friendly full-screen with safe area padding */
@media (max-width: 640px){
  .modal__dialog{
    width:100vw; height:100vh; max-width:none; max-height:none;
    border-radius:0; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .modal__close{ right:8px; top:8px; width:44px; height:44px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; transform:none; opacity:1; }
  .btn{ transition:none; }
}

/* Optional: slightly smaller hero h1 on tiny screens for perfect fit */
@media (max-width: 420px){
  .hero h1{ font-size: clamp(28px, 11vw, 40px); }
}
@media (max-width: 780px){
  .sticky-cta{
    position: fixed; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 90; background: var(--brand); color:#0b1d00;
    border-radius: 999px; padding: 14px 18px; text-align:center;
    font-weight: 700; box-shadow: var(--shadow);
    transition: .2s ease; will-change: transform, opacity;
  }
  .sticky-cta.hide{ opacity: 0; pointer-events: none; transform: translateY(8px); }
}
/* =========================
   MOBILE NO-H-SCROLL + JOIN FIX
   ========================= */

/* 1) Never allow horizontal scroll; bias touch to vertical */
html, body{
  max-width: 100%;
  overflow-x: hidden;           /* hide any stray 1–2px overflow */
  overscroll-behavior-x: none;  /* prevent side-swipe bounce */
  touch-action: pan-y;          /* vertical scroll only */
}

/* 2) Let grid children actually shrink (default min-width:auto can overflow) */
.grid-2 > *,
.cards > *,
.grid-form > * { min-width: 0; }

/* 3) Join section: ensure fields don't exceed container and wrap long text */
#join .grid-form{ grid-template-columns: 1fr; } /* extra safety for small phones */
#join input, #join select, #join textarea{
  width: 100%;
  max-width: 100%;
}
#join .checkbox span{
  display: block;
  overflow-wrap: anywhere;      /* wrap long policy text/links */
  word-break: break-word;
}

/* 4) Small aesthetic tweak: keep shadows visible but not cause scroll */
.container{ overflow: visible; }     /* (don’t clip shadows) */

/* Optional: if any element still nudges the viewport, uncomment next line
   to softly clip at the section level instead of whole page. */
/* .section { overflow-x: clip; } */
/* =========================
   LUX PACK — DARK SECTIONS,
   SPICIER REVEALS, PROGRESS RAIL
   ========================= */

/* Smooth anchor scroll */
html { scroll-behavior: smooth; }

/* Left rail progress overlay (reuses your rail position) */
:root { --scroll: 0; } /* set by JS */
body::after{
  content:""; position:fixed; top:0;
  left:max(24px, calc((100vw - 1140px)/2 - 24px));
  width:2px; height: calc(var(--scroll) * 100vh);
  background: var(--brand);
  border-radius: 2px;
  z-index: 1; pointer-events:none;
  transition: height .15s linear;
}

/* ---------- DARK SECTION ---------- */
.section--dark{
  --bg: #0c0c0e;
  --bg-alt: #0c0c0e;
  --text: #f6f7f9;
  --muted: #c1c4cc;
  --line: #21222a;
  color: var(--text);
  background: var(--bg);
}

/* Inheritables inside dark blocks */
.section--dark .section-title { color: var(--text); }
.section--dark p, 
.section--dark .lead { color: var(--text); opacity: .92; }
.section--dark .ig-note { color: var(--muted); }

/* Cards on dark: luxe soft surfaces */
.section--dark .card,
.section--dark .program,
.section--dark .plan {
  background: #111216;
  border-color: #1f2128;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.section--dark .program.highlight { outline-color: var(--brand); }
.section--dark .features li::before { color: var(--brand); }
.section--dark .ticks i,
.section--dark .card i,
.section--dark .program header i { color: var(--brand); }

/* Buttons on dark */
.section--dark .btn-ghost { border-color: #2b2d36; color: var(--text); }
.section--dark .btn-ghost:hover { background:#151720; }
.section--dark .btn-outline { border-color: var(--brand); color: #0b1d00; }

/* Footer dark opt-in (if you ever add class) */
.footer.section--dark { border-top-color: #1f2128; }

/* ---------- SPICY REVEALS ---------- */
/* Use: add data-reveal to any element: up | right | scale | fade (default up)
   Optional data-delay="100..900" for staggering; data-reveal-blur for a luxe blur-in */
[data-reveal]{
  opacity: 0;
  transform: translateY(16px);
  filter: none;
  transition:
    opacity .7s cubic-bezier(.2,.65,.2,1),
    transform .7s cubic-bezier(.2,.65,.2,1),
    filter .7s cubic-bezier(.2,.65,.2,1);
  will-change: transform, opacity, filter;
}
[data-reveal].visible{
  opacity: 1;
  transform: none;
  filter: none;
}

/* Variants */
[data-reveal="up"]{ transform: translateY(18px); }
[data-reveal="right"]{ transform: translateX(-18px); }
[data-reveal="scale"]{ transform: scale(.96); }
[data-reveal="fade"]{ transform: none; }

[data-reveal-blur]{ filter: blur(8px); }
[data-reveal-blur].visible{ filter: blur(0); }

/* Simple stagger: apply to a parent to auto-delay children */
[data-stagger] > * { opacity: 0; transform: translateY(16px); }
[data-stagger].visible > *{
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.65,.2,1), transform .6s cubic-bezier(.2,.65,.2,1);
}
[data-stagger].visible > *:nth-child(1){ transition-delay:.05s }
[data-stagger].visible > *:nth-child(2){ transition-delay:.12s }
[data-stagger].visible > *:nth-child(3){ transition-delay:.19s }
[data-stagger].visible > *:nth-child(4){ transition-delay:.26s }
[data-stagger].visible > *:nth-child(5){ transition-delay:.33s }
[data-stagger].visible > *:nth-child(6){ transition-delay:.40s }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-stagger] > * { transition:none !important; transform:none !important; opacity:1 !important; filter:none !important; }
}
/* =========================
   HERO — add small rectangle logo under main logo
   ========================= */

#hero .hero-card{
  position: relative;                 /* ensure we can absolutely position the badge */
  background-repeat: no-repeat !important;
  background-size: contain !important;/* your main hero logo stays as-is */
  background-position: center 44% !important; /* nudge main logo slightly up to make room */
  height: clamp(320px, 48vw, 560px) !important;
  box-shadow: none !important; border-radius: 0 !important; background-color: transparent !important;
}

/* re-enable ::after (we previously disabled it) and draw the rectangle badge */
#hero .hero-card::after{
  content: "" !important;
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(12px, 3vw, 22px);
  width: clamp(120px, 28vw, 240px);
  height: clamp(28px, 7vw, 64px);
  background: url('https://i.ibb.co/RkJJVB3t/NRN-Logo-T-bluewhite.png') center / contain no-repeat;
  pointer-events: none;
  opacity: 0.95;                      /* tweak 0.8–1.0 to taste */
}

/* tiny mobile adjustment so the two logos don’t crowd */
@media (max-width: 520px){
  #hero .hero-card{ background-position: center 40% !important; }
  #hero .hero-card::after{ width: clamp(110px, 38vw, 180px); bottom: clamp(10px, 3vw, 18px); }
}
/* =========================
   1) HERO — bigger NRN badge
   ========================= */

/* If you're using the ::after badge we added earlier */
#hero .hero-card{
  /* lift main logo a touch so both breathe when the badge grows */
  background-position: center 42% !important;
}
#hero .hero-card::after{
  /* bump size up a notch */
  width: clamp(160px, 34vw, 300px) !important;   /* was ~120–240px */
  height: clamp(36px, 8.8vw, 84px) !important;   /* keeps aspect tidy */
  bottom: clamp(14px, 3.2vw, 26px) !important;   /* a smidge more padding */
  /* image URL stays the same (NRN logo) */
}

/* If you used the double-background method instead (no ::after),
   just scale the second background size up a bit:
#hero .hero-card{
  background-size: 64% auto, 260px auto !important;
}
@media (max-width:520px){
  #hero .hero-card{ background-size: 70% auto, 190px auto !important; }
}
*/

/* =========================
   2) FOOTER — white on black
   ========================= */
.footer{
  background: #0c0c0e !important;    /* deep charcoal */
  color: #f6f7f9 !important;
  border-top: 1px solid #1f2128 !important;
}
.footer h3{ color:#ffffff !important; }
.footer .smallprint{ color:#c1c4cc !important; }

.footer a{
  color:#f6f7f9 !important;
  text-decoration: none;
  outline-offset: 2px;
}
.footer a:hover{ color: var(--brand) !important; }
.footer a:focus-visible{
  outline: 2px solid var(--brand);
  border-radius: 4px;
}

/* Icons in contact list */
.footer .contact-list i{ color: var(--brand); }

/* Back-to-top button stays brandy and legible on dark */
.to-top{
  background: var(--brand) !important;
  color:#0b1d00 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}
/* =========================================
   MOBILE POLISH: Programs buttons, rails,
   hero centering, coach stacking
   ========================================= */

/* 1) Programs: show CTAs on touch devices (keep hover-reveal on desktop) */
@media (hover:hover) and (pointer:fine){
  /* desktop/laptop: reveal on hover */
  .program .btn{
    opacity: 0; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .program:hover .btn{
    opacity: 1; transform: none; pointer-events: auto;
  }
}
@media (hover:none), (pointer:coarse){
  /* phones/tablets: always visible */
  .program .btn{
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  }
}

/* 2) Hide the left-side rails on mobile (that green progress line) */
@media (max-width: 820px){
  body::after{ display: none !important; }  /* progress rail (brand green) */
  body::before{ display: none !important; } /* subtle grey rail */
}

/* 3) Hero: keep main logo + NRN badge perfectly centered on mobile */
@media (max-width: 820px){
  #hero .hero-card{
    background-position: center !important;   /* main logo center */
    background-size: contain !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
  }
  #hero .hero-card::after{
    left: 50% !important; transform: translateX(-50%) !important;  /* center NRN badge */
    bottom: clamp(12px, 3vw, 22px) !important;
    /* keep badge size responsive and centered */
    width: clamp(160px, 38vw, 280px) !important;
    height: clamp(36px, 9vw, 84px) !important;
  }
}

/* 4) Coach: stack image above text on mobile and give both room */
@media (max-width: 960px){
  #coach .container{
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .coach .coach-photo{
    order: -1;                 /* image first */
    width: 100%; max-width: none;
    margin: 0 0 14px 0;
    aspect-ratio: 16 / 10 !important;
    background-position: center 10% !important; /* keep face visible */
    background-size: cover !important;
  }
}

/* Safety: prevent any child from forcing horizontal scroll on small screens */
.grid-2 > *, .cards > *, .grid-form > * { min-width: 0; }
html, body { overflow-x: hidden; touch-action: pan-y; }
/* Programs: make all "Enquire" buttons brand-green (text + border) */
.programs .program .btn{
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  background: transparent !important;     /* no fill by default */
}

/* Nice hover/focus: fill with green, readable text */
.programs .program .btn:hover,
.programs .program .btn:focus-visible{
  background: var(--brand) !important;
  color: #0b1d00 !important;
  outline: none;
}

/* Keep mobile/touch behavior (buttons always visible) – from earlier patch */
@media (hover:none), (pointer:coarse){
  .programs .program .btn{
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  }
}
/* =========================================
   PATCH: rail hide, hero centering, coach focus
   ========================================= */

/* 1) Robustly hide the left rails on touch devices (stops the "pop-up" at bottom) */
@media (hover:none), (pointer:coarse){
  body::after, body::before { display: none !important; }
}
/* JS will also add .no-rail as a belt-and-braces backup */
.no-rail::after, .no-rail::before { display: none !important; }

/* 2) HERO — hard-center main logo + NRN badge on mobile/tablet */
#hero .hero-card::after{
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* mobile/tablet layout centering */
@media (max-width: 820px){
  .hero-art{ display: grid; justify-items: center; }
  #hero .hero-card{
    margin-inline: auto !important;
    width: min(680px, 100%) !important;
    background-position: center !important;   /* main logo dead center */
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  #hero .hero-card::after{
    width: clamp(170px, 40vw, 300px) !important;
    height: clamp(38px, 9.2vw, 86px) !important;
    bottom: clamp(12px, 3.2vw, 24px) !important;
  }
}

/* 3) COACH — lower the focus a bit so less empty headroom, more torso */
.coach .coach-photo{
  background-position: center 18% !important; /* was ~10% */
}
/* Slightly lower again on small screens */
@media (max-width: 960px){
  .coach .coach-photo{
    background-position: center 22% !important;
    aspect-ratio: 16 / 10 !important; /* keep the nicer, shallower crop */
  }
}

/* Safety: prevent any child from forcing horizontal overflow */
.grid-2 > *, .cards > *, .grid-form > * { min-width: 0; }
html, body { overflow-x: hidden; touch-action: pan-y; }
/* =========================================
   PATCH: rail hide, hero centering, coach focus
   ========================================= */

/* 1) Robustly hide the left rails on touch devices (stops the "pop-up" at bottom) */
@media (hover:none), (pointer:coarse){
  body::after, body::before { display: none !important; }
}
/* JS will also add .no-rail as a belt-and-braces backup */
.no-rail::after, .no-rail::before { display: none !important; }

/* 2) HERO — hard-center main logo + NRN badge on mobile/tablet */
#hero .hero-card::after{
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* mobile/tablet layout centering */
@media (max-width: 820px){
  .hero-art{ display: grid; justify-items: center; }
  #hero .hero-card{
    margin-inline: auto !important;
    width: min(680px, 100%) !important;
    background-position: center !important;   /* main logo dead center */
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  #hero .hero-card::after{
    width: clamp(170px, 40vw, 300px) !important;
    height: clamp(38px, 9.2vw, 86px) !important;
    bottom: clamp(12px, 3.2vw, 24px) !important;
  }
}

/* 3) COACH — lower the focus a bit so less empty headroom, more torso */
.coach .coach-photo{
  background-position: center 18% !important; /* was ~10% */
}
/* Slightly lower again on small screens */
@media (max-width: 960px){
  .coach .coach-photo{
    background-position: center 22% !important;
    aspect-ratio: 16 / 10 !important; /* keep the nicer, shallower crop */
  }
}

/* Safety: prevent any child from forcing horizontal overflow */
.grid-2 > *, .cards > *, .grid-form > * { min-width: 0; }
html, body { overflow-x: hidden; touch-action: pan-y; }
/* ================================
   HERO — bulletproof mobile centering
   ================================ */

/* Center the art wrapper itself */
@media (max-width: 820px){
  .hero-art{
    display: flex !important;
    justify-content: center !important;
  }
  /* Make the hero art a full-bleed element that's mathematically centered,
     but without causing horizontal scroll. */
  #hero .hero-card{
    position: relative !important;
    width: calc(100vw - 24px) !important;        /* gentle gutter so no h-scroll */
    max-width: 720px !important;                  /* don’t get comically large */
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* logo layer */
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;       /* hard center */
    box-shadow: none !important;
    border-radius: 0 !important;

    /* keep the taller, balanced height you liked */
    height: clamp(320px, 48vw, 560px) !important;
  }

  /* Center the NRN badge perfectly, too */
  #hero .hero-card::after{
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: clamp(12px, 3.2vw, 24px) !important;
    width: clamp(170px, 40vw, 300px) !important;
    height: clamp(38px, 9.2vw, 86px) !important;
  }
}

/* Safety: never allow horizontal scroll */
html, body { overflow-x: hidden; }

/* If the progress rail ever reappears on touch, ensure it's off */
@media (hover:none), (pointer:coarse){
  body::before, body::after { display: none !important; }
}
/* Slightly lower framing */
.coach .coach-photo{ background-position: center 26% !important; }
@media (max-width: 960px){
  .coach .coach-photo{ background-position: center 28% !important; }
}
.coach .coach-photo{
  background-color:#0e0e10; /* soft dark placeholder */
}
/* Disable both left rails site-wide (grey guide + green progress) */
body::before,
body::after { display: none !important; }
/* HERO visual using <img> instead of CSS backgrounds */
.hero-visual{
  position: relative;
  width: min(720px, calc(100vw - 24px));
  margin-inline: auto;
}
.hero-logo{ display:block; width:100%; height:auto; }
.hero-badge{
  position: absolute; left: 50%;
  bottom: clamp(12px, 3.2vw, 24px);
  transform: translateX(-50%);
  width: clamp(170px, 40vw, 300px);
  height: auto;
}

/* Hide the old background-based card if it still exists anywhere */
.hero-card{ display:none; }
/* Coach photo using <img> with cover-style framing */
.coach .coach-photo{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 10;
  background: none; /* kill previous background image */
}
.coach .coach-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%; /* matches your top-biased focus */
  display: block;
}