/* =============================================================
   CYVORE NOIR — RESPONSIVE / MOBILE LAYER
   Loaded LAST, after noir.css · noir-purple.css · office.css.
   Purely additive: adds a real mobile nav, gives the two
   string-board sections a stacked "case-file" fallback, tightens
   rhythm down to 360px, and lightens the heaviest ambient FX on
   phones. Nothing here is needed on desktop (>880px).
   ============================================================= */

/* never allow a horizontal pan from decorative bleed */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; }

/* =============================================================
   ARTICLE TAKEOVER — constrain images on all screen sizes.
   WordPress content can have inline width/height attributes that
   override CSS max-width. !important beats inline styles.
   ============================================================= */
.article-body img{
  max-width:100% !important;
  width:auto !important;
  height:auto !important;
}
.article-body table,
.article-body figure,
.article-body .wp-block-image{
  max-width:100% !important;
  overflow-x:auto;
}
/* full-article sheet: no horizontal overflow, correct padding on mobile */
.sheet-paper.full-article{
  overflow-x:hidden;
  word-break:break-word;
}
@media (max-width:560px){
  .takeover-sheet{ max-width:100% !important; }
  .sheet-paper.full-article{ padding:36px 20px 44px; }
  .article-body{ font-size:15px; }
  .article-body h2{ font-size:18px; }
}
/* the hero is a <header> with no position, so its overflow:hidden never
   clipped the absolutely-positioned sky/smoke/skyline scene — making it a
   containing block fixes the phantom horizontal scroll on every screen. */
.hero{ position:relative; }

/* =============================================================
   1 · MOBILE NAV — hamburger + slide-in case-file drawer
   ============================================================= */
.nav-burger{
  display:none;
  position:relative; width:44px; height:44px; flex:none;
  border:1px solid var(--hair); border-radius:9px;
  background:rgba(139,92,255,.05);
  cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
  align-items:center; justify-content:center;
  transition:border-color .2s, background .2s;
}
.nav-burger:hover{ border-color:var(--purple); }
.nav-burger span{
  position:absolute; left:50%; top:50%; width:20px; height:2px; border-radius:2px;
  background:var(--ink); transform:translate(-50%,-50%);
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-burger span:nth-child(1){ transform:translate(-50%,-7px); }
.nav-burger span:nth-child(3){ transform:translate(-50%,5px); }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

/* drawer shell */
.m-menu{
  position:fixed; inset:0; z-index:8500;
  pointer-events:none;   /* closed: scrim transparent + panel off-screen */
  overflow:hidden;       /* clip the off-screen panel so it never widens the page */
}
.m-menu.open{ pointer-events:auto; }
.m-menu-scrim{
  position:absolute; inset:0; background:rgba(4,3,8,.72);
  /* no backdrop-filter — blur is GPU-expensive on Chrome Android and causes
     frame drops during the panel slide animation */
  opacity:0; transition:opacity .18s ease-out;
}
.m-menu.open .m-menu-scrim{ opacity:1; }
.m-menu-panel{
  position:absolute; top:0; left:0; bottom:0; width:min(86vw, 360px);
  background:#0c0b12; border-right:1px solid var(--hair-soft);
  box-shadow:30px 0 80px -20px rgba(0,0,0,.8);
  padding:22px 26px calc(32px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  transform:translateX(-110%);
  transition:transform .18s ease-out;
  will-change:transform;
  background-image:radial-gradient(120% 60% at 0% 0, rgba(139,92,255,.12), transparent 55%);
  overflow-y:auto;
}
.m-menu.open .m-menu-panel{ transform:translateX(0); }
.m-menu-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:22px; margin-bottom:14px; border-bottom:1px solid var(--hair-soft);
}
.m-menu-eyebrow{
  font-family:var(--f-type); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--purple-bright);
}
.m-menu-close{
  width:40px; height:40px; flex:none; border:1px solid var(--hair); border-radius:8px;
  background:transparent; color:var(--ink-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s, border-color .2s;
}
.m-menu-close:hover{ color:var(--ink); border-color:var(--purple); }
.m-menu-close svg{ width:20px; height:20px; }
.m-menu-links{ display:flex; flex-direction:column; }
.m-menu-links a{
  display:flex; align-items:center; gap:16px;
  padding:18px 4px; border-bottom:1px solid var(--hair-soft);
  font-family:var(--f-display); font-weight:400; font-size:26px; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; text-transform:uppercase;
  transition:color .15s, padding-left .2s var(--ease);
}
.m-menu-links a:hover{ color:var(--purple-bright); padding-left:10px; }
.m-menu-links .mm-no{
  font-family:var(--f-type); font-size:12px; font-weight:400; letter-spacing:.06em;
  color:var(--purple-bright); text-transform:none; flex:none;
}
.m-menu-cta{
  margin-top:auto; justify-content:center; width:100%; padding:16px; font-size:15px;
}

/* swap desktop links for the hamburger below the nav breakpoint */
@media (max-width:880px){
  .nav-links{ display:none !important; }
  .nav-burger{ display:flex; }
}

/* =============================================================
   2 · THE STRING BOARDS — scale-based responsive layout
   Both boards (.board inside .board-outer) use transform:scale()
   to shrink uniformly at any viewport width. The JS in noir.js /
   office.js computes --bscale = outerWidth / 1176 and applies it.
   The board canvas stays at its fixed design size (1176×772px or
   1176×625px) and the outer wrapper maintains the correct
   aspect-ratio — no per-breakpoint position overrides needed.
   ============================================================= */

/* =============================================================
   3 · HERO — tighten + keep copy readable over the scene
   ============================================================= */
@media (max-width:880px){
  /* the detective backdrop shouldn't fight the headline on phones */
  .hero .hero-textscrim{
    width:100%;
    background:linear-gradient(to right, rgba(7,6,11,.82) 0%, rgba(7,6,11,.55) 52%, rgba(7,6,11,.18) 100%);
  }
}
@media (max-width:760px){
  .band{ padding:84px 0; }
  .agents{ padding:84px 0; }
  .board-sec{ padding:84px 0 90px; }
  .flow{ padding:84px 0; }
  .channels{ padding:72px 0; }
  .tv-sec{ padding:84px 0; }
  .dispatch{ padding:84px 0; }
  .cta{ padding:90px 0; }
  .hero{ padding:120px 0 64px; min-height:auto; }
  .hero-kick{ margin-bottom:22px; }
  .hero-sub{ margin:24px 0 32px; }
  .hero-meta{ margin-top:42px; gap:24px 30px; padding-top:22px; }
  .hero-meta .stat .n{ font-size:32px; }
  .agents-head{ margin-bottom:40px; }
}

/* =============================================================
   4 · PHONES — reclaim gutters, calm the spacing
   ============================================================= */
@media (max-width:560px){
  .wrap{ padding:0 22px; }
  .nav-inner{ padding:15px 22px; }
  .band{ padding:64px 0; }
  .agents{ padding:64px 0; }
  .board-sec{ padding:64px 0 70px; }
  .flow{ padding:64px 0; }
  .channels{ padding:60px 0; }
  .tv-sec{ padding:64px 0; }
  .dispatch{ padding:64px 0; }
  .cta{ padding:76px 0; }
  .hero{ padding:104px 0 52px; }

  /* full-width primary actions read better than centered pills */
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
  .cta .hero-cta .btn{ flex:1 1 auto; }

  /* news masthead stacks its dateline */
  .news-masthead{ flex-direction:column; align-items:flex-start; gap:6px; }

  /* channels read as a tidy column of chips */
  .chan{ padding:12px 18px; font-size:13.5px; }

  /* footer becomes a clean stack */
  .foot{ padding:40px 0; }
  .foot-inner{ flex-direction:column; align-items:flex-start; gap:20px; }
  .foot-links{ flex-wrap:wrap; gap:14px 22px; }

  /* org-roles wrap comfortably */
  .org-roles{ gap:16px 22px; }
}

/* footer link row should never overflow, even on tablet */
.foot-links{ flex-wrap:wrap; }

/* =============================================================
   5 · MODALS / SHEETS — safe padding on small screens
   ============================================================= */
@media (max-width:560px){
  .demo-modal{ padding:16px; }
  .demo-modal-close,
  .takeover-close{ top:12px; right:12px; }
  .demo-modal-content{ margin-top:8px; }
  .demo-req-modal{ padding:14px; align-items:flex-start; overflow-y:auto; }
  .demo-req-sheet{ padding:40px 22px 44px; margin:auto; }
  .takeover{ padding:56px 14px 48px; }
  .sheet-paper{ padding:36px 22px 40px; }
}

/* =============================================================
   6 · LIGHTEN HEAVY AMBIENT FX ON PHONES
   Keep the noir look; drop the continuously-animating, GPU-heavy
   layers that read as almost nothing at phone size.
   ============================================================= */
@media (max-width:760px){
  .beam{ display:none; }            /* searchlight sweep — barely visible, costly */
  .smoke{ animation:none !important; opacity:.4; }  /* keep the haze, stop the drift */
  .film .scan{ opacity:.22; }       /* ease the scanlines on dense phone pixels */
  .hero-detective{ opacity:.4; }    /* let the headline win on small screens */
}
@media (prefers-reduced-motion: reduce){
  .beam, .smoke, .scanbar{ animation:none !important; }
}

/* =============================================================
   7 · LEGAL PAGES (Privacy / Terms) — match the home gutters
   The doc layout already collapses its TOC sidebar at <=900px;
   here we just tighten the desk padding and side gutters so the
   paper sheet doesn't crowd the phone edges.
   ============================================================= */
@media (max-width:760px){
  .case-desk{ padding:96px 0 72px; }
}
@media (max-width:560px){
  .case-desk{ padding:88px 0 64px; }
  .doc-wrap{ padding:0 18px; gap:22px; }
  .doc-switch{ padding:0 18px; }
  .report{ padding:44px 22px 52px; }
  .report::before{ display:none; }      /* punch-holes crowd the narrow margin */
  .to-top{ right:16px; bottom:16px; }
}