/* ============================================================
   NRM - mobile & responsive layer
   Loaded LAST on every page so it overrides inline/page styles.
   Adds: hamburger nav, header sizing, grid collapses, type/space
   tuning for tablet (<=1080) and phone (<=600).
   ============================================================ */

/* ---------- prevent sideways scroll ---------- */
html,body{max-width:100%;overflow-x:hidden;}
img,video,canvas{max-width:100%;}

/* ---------- desktop-only forced line breaks ---------- */
/* <br class="br-wide"> keeps a deliberate break on wide screens but lets the
   sentence flow naturally on phones, where a hard break looks awkward. */
@media(max-width:600px){.br-wide{display:none;}}

/* ---------- Hamburger button (hidden on desktop) ---------- */
.nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:none;background:transparent;cursor:pointer;color:#0c1b2e;margin-left:auto;padding:0;flex:none;}
.nav-toggle .bars{position:relative;display:block;width:26px;height:2.5px;background:currentColor;border-radius:2px;}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:26px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .25s ease;}
.nav-toggle .bars::before{top:-8px;}
.nav-toggle .bars::after{top:8px;}
.nav-toggle.open .bars{background:transparent;}
.nav-toggle.open .bars::before{transform:translateY(8px) rotate(45deg);}
.nav-toggle.open .bars::after{transform:translateY(-8px) rotate(-45deg);}

/* ---------- Slide-in mobile menu ---------- */
.mnav{position:fixed;inset:0;z-index:1000;background:rgba(4,13,28,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s ease;overflow:hidden;}
.mnav.open{opacity:1;visibility:visible;}
.mnav-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,350px);background:#fff;box-shadow:-22px 0 54px rgba(0,0,0,.28);display:flex;flex-direction:column;padding:22px 22px 32px;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.mnav.open .mnav-panel{transform:none;}
.mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mnav-head img{height:50px;width:auto;display:block;}
.mnav-close{border:none;background:#eef3f1;width:42px;height:42px;border-radius:50%;font-size:24px;line-height:1;color:#0c1b2e;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.mnav a{display:block;padding:15px 4px;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#16263a;border-bottom:1px solid #eef1f2;}
.mnav a:active{color:#0a6b62;}
.mnav a.active{color:#0a6b62;}
.mnav a.sub{padding-left:18px;font-size:14px;color:#5d6b78;text-transform:none;letter-spacing:0;font-weight:500;}
.mnav-group{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#9aa8b0;padding:18px 4px 4px;}
.mnav .mnav-cta{margin-top:20px;text-align:center;background:#0c6b61;color:#fff;border-radius:13px;padding:16px;border-bottom:none;box-shadow:0 10px 24px rgba(10,90,80,.26);}
body.mnav-lock{overflow:hidden;}

@media(min-width:1081px){.nav-toggle,.mnav{display:none !important;}}

/* ============================================================
   <=1080  - tablet: hamburger on, header compact, nav hidden
   ============================================================ */
@media(max-width:1080px){
  .nav{display:none !important;}
  .nav-toggle{display:inline-flex;}
  .hdr-in{height:auto !important;padding:16px 20px 0 !important;gap:14px !important;align-items:center !important;}
  .hdr-in > .btn-accord{display:none !important;}
  .logo{height:58px !important;width:auto !important;}
  .hdr::before{height:104px;}

  /* index hero - text, then photo, then CTA buttons */
  .hero{display:flex !important;flex-direction:column !important;}
  .hero-grid{display:contents !important;}
  .hero-left{display:contents !important;}
  .hero-slides{order:0 !important;padding:96px 20px 0 !important;}
  .hero-photo-wrap{order:1 !important;position:relative !important;width:100% !important;min-height:0 !important;height:clamp(300px,54vw,460px) !important;border-radius:0 !important;overflow:hidden !important;margin:14px 0 0 !important;}
  .hero-cta{order:3 !important;padding:0 20px !important;margin-top:22px !important;}
  .hero-watch{order:2 !important;margin:18px 20px 0 !important;}
  .hero-dots{order:4 !important;padding:0 20px !important;margin-top:22px !important;margin-bottom:8px !important;}
  .hero-photo-wrap .hp-slide{position:absolute !important;inset:0 !important;display:none !important;opacity:1 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:65% 22% !important;transform:none !important;-webkit-mask-image:none !important;mask-image:none !important;}
  .hero-photo-wrap .hp-slide.is-active{display:block !important;}
  .statsbar{margin-top:0 !important;margin-bottom:0 !important;padding:26px 20px !important;}
  .statsbar-card{grid-template-columns:repeat(2,1fr) !important;gap:24px 8px !important;padding:28px 18px !important;}
  .crisis{padding:64px 0 56px !important;}
  .crisis-row{grid-template-columns:repeat(3,1fr) !important;}
  .why-cards{grid-template-columns:repeat(3,1fr) !important;}
  .why-banner{grid-template-columns:1fr !important;}
  .why-intro{padding-right:0 !important;}
  .why-col{border-left:none !important;border-top:1px solid var(--line);padding:20px 0 !important;}
  .ndash-body{grid-template-columns:1fr !important;}
  .ndstats{grid-template-columns:repeat(2,1fr) !important;}

  /* inner pages (.ahero): photo first, then text */
  .ahero{display:flex !important;flex-direction:column !important;padding-top:80px !important;}
  .ahero-photo{order:-1 !important;position:relative !important;width:100% !important;height:auto !important;}
  .ahero-photo img{width:100% !important;height:auto !important;}
  .ahero-grid{order:0 !important;}
  .ahero-left{padding-top:30px !important;}
}

/* ============================================================
   <=760  - large phone: heroes, type, two-col grids
   ============================================================ */
@media(max-width:760px){
  .wrap{padding:0 18px !important;}

  /* index hero text (beats inline 52px spans) */
  .hero-slides{padding:96px 18px 0 !important;}
  .hero-cta,.hero-dots{padding-left:18px !important;padding-right:18px !important;}
  .hero h1{font-size:30px !important;line-height:1.12 !important;}
  .hero h1 span{font-size:1em !important;}
  .hero-sub{font-size:15px !important;}
  .hero-cta{flex-wrap:wrap !important;gap:10px !important;}
  .hero-cta .hbtn{flex:1 1 100% !important;}
  /* hero photo band height handled in the <=1080 reflow block (cover, clamped) */

  /* inner-page (.ahero) hero */
  .ahero-left{padding:28px 18px 44px !important;}
  .ahero h1{font-size:32px !important;}
  .ahero p{font-size:16px !important;}
  .ahero-cta{flex-wrap:wrap !important;}
  .ahero-cta .hbtn{flex:1 1 100% !important;}
  .ahero-photo{height:230px !important;}
  .ahero-photo img{height:100% !important;object-fit:cover !important;object-position:center top !important;}

  /* section heading sizes */
  .crisis-head,.reset-title{font-size:23px !important;}
  .why-intro h2,.cta-copy h2,.join-head h2,.support-head h2,.who-head h2,.awhy h2,.diff-head h2,.trust-head h2,.vision-head h2,.safe-head h2,.commit-copy h2,.principles-head h2,.roadmap-head h2,.sign-aside h2,.pillars-head h2,.opps-head h2,.impact-head h2,.sources-head h2{font-size:28px !important;}

  /* footer stacks */
  .footer-in{flex-direction:column;align-items:flex-start !important;gap:18px !important;}
  .foot-social,.foot-links,.foot-copy{margin-left:0 !important;}
  .foot-links{flex-wrap:wrap;gap:12px 20px !important;}
  .foot-mark{height:64px !important;}

  /* two-up grids that were still wide */
  .why-cards{grid-template-columns:repeat(2,1fr) !important;}
  .ndstats{grid-template-columns:repeat(2,1fr) !important;}

  /* big section vertical padding trims */
  .why,.reset,.join,.signup,.commit,.awhy,.signsec{padding-top:60px !important;padding-bottom:60px !important;}
  .signup-in{padding:34px 22px !important;}
}

/* ============================================================
   <=600  - phone: everything single column
   ============================================================ */
@media(max-width:600px){
  .statsbar-card{grid-template-columns:1fr !important;gap:18px !important;}
  .stat{padding:0 6px !important;}
  .stat+.stat::before{display:none !important;}
  .crisis-row{grid-template-columns:repeat(2,1fr) !important;}
  .why-cards{grid-template-columns:1fr 1fr !important;}

  /* collapse all remaining multi-column content grids */
  .pillars,.vision-grid,.diff-grid,.trust-grid,.safe-grid,.why-grid,
  .opps-grid,.pillars-grid,.impact-grid,.support-grid,.news-grid,
  .src-grid,.join-grid,.counter-metrics,.pgrid,.rm-track,
  .signup-in,.commit-in,.sign-grid,.awhy-in,.feat,
  .field-row,.fgrid,.fgrid.three,.part-grid,.fs-actions,
  .share-channels,.commit-list,.avail,.give-amounts{
    grid-template-columns:1fr !important;
  }
  .pcard,.pcard:nth-child(4),.pcard:nth-child(5){grid-column:auto !important;}

  /* headings a touch smaller on the smallest screens */
  .hero h1,.ahero h1{font-size:27px !important;}
  .crisis-head,.reset-title{font-size:20px !important;}

  /* form niceties */
  .field input,.field select,.vfield input,.vfield select{font-size:16px !important;} /* avoid iOS zoom */
}

/* ============================================================
   index.html - last sections: How-the-Reset + Live Dashboard, CTA
   ============================================================ */
@media(max-width:1080px){
  .reset .rsteps{grid-template-columns:1fr !important;}
  .reset .rstep{padding:18px 0 !important;text-align:center !important;}
  .reset .rstep:first-child{padding-left:0 !important;}
  .reset .rstep+.rstep{border-left:none !important;border-top:1px solid rgba(120,180,170,.14) !important;}
  .reset .rstep-head{margin-left:auto !important;margin-right:auto !important;}
  .reset .rstep p{max-width:none !important;margin-left:auto !important;margin-right:auto !important;}
  .reset .rconn{display:none !important;}
  .heat-legend{flex-wrap:wrap !important;white-space:normal !important;justify-content:center;}
  .cta-in{gap:22px !important;padding:32px 20px !important;}
}
@media(max-width:760px){
  .reset{padding:54px 0 58px !important;}
  .reset-title{font-size:19px !important;letter-spacing:.1em !important;gap:12px !important;}
  .reset-title .rt-dash{width:22px !important;}
  .ndash{padding:22px 18px !important;}
  .ndash-title{font-size:20px !important;}
  .heat-map img{height:auto !important;}
  .cta-copy h2{font-size:24px !important;white-space:normal !important;}
  .cta-in{flex-direction:column !important;align-items:stretch !important;gap:16px !important;}
  .cta-copy{flex:1 1 100% !important;width:100% !important;}
  .cta-btns{width:100% !important;justify-content:flex-start !important;}
  .cta-btns{gap:10px !important;width:100% !important;}
  .cta-btns .hbtn{flex:1 1 100% !important;}
}
@media(max-width:600px){
  .ndstats{grid-template-columns:1fr !important;}
}