/* ============================================================
   RESPONSIVE — global breakpoints. Section files carry their
   own tight tweaks; this handles the cross-cutting layout.
   ============================================================ */

@media(max-width:1040px){
  .dash{grid-template-columns:1fr}
}

/* The Employees team is a centred flex-wrap (js/components/services.js) so it
   reflows on its own — no explicit column breakpoints needed here. ASORA's lead
   card stacks its two halves once there isn't room for them side by side. */
@media(max-width:820px){
  .pillar-lead{grid-template-columns:1fr;gap:16px}
  .pillar-lead .p-out{max-width:none}
}

@media(max-width:980px){
  .nav-status .nav-cta,.nav-status .nav-book{display:none}
  .navlinks{display:none}
  .burger{display:flex}
  .win-body{grid-template-columns:1fr;gap:24px}
  .window.open{max-height:4600px}
  .build{grid-template-columns:1fr}
}

@media(max-width:760px){
  :root{--s-9:72px}
  .nav-status .status-pill{display:none}
  /* Hero responsive rules now live in css/sections/hero.css */
  /* Footer stacks here: logo over the brand line, both centred. (.foot-links
     was removed from the markup — those three section links duplicated the
     primary nav.) The tagline keeps its serif-italic scale from layout.css. */
  .foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
  .foot .brand{justify-self:center}
  .foot > p{justify-self:center;font-size:21px}
  .biz-stats{gap:22px}
  .rec-meta{grid-template-columns:1fr 1fr}
}

@media(max-width:560px){
  .sc-caps{grid-template-columns:1fr}
  .dash-head{flex-direction:column;align-items:flex-start}

  /* ============================================================
     PHONE OPTIMISATION — desktop/tablet untouched. ~90% of
     visitors are on phone, so keep the conversion spine and cut
     anything ambient, duplicated or oversized on small screens.
     Phone is a SHORTER story, not a narrower one: before this
     pass the page measured ~14.6 phone-screens of scroll, with
     the 9 stacked employee cards alone costing ~3,000px.
     ============================================================ */
  :root{--s-9:54px}                         /* tighter section rhythm */

  /* Dashboard: on phone, LEAD with the real numbers (clear, credible proof)
     and put the denser "ASORA's read" demo second — a phone user should get
     the point ("422 real conversations") before any technical readout. Drop
     every purely illustrative card so the section stays ~one screen. */
  /* Phone keeps the trade-tuned proof: the live notifications (trimmed to the
     two newest, still ticking) and "Most discussed this month" — both retune
     to the visitor's trade. Pipeline + follow-ups stay desktop-only. */
  #cardPipe,#cardAuto{display:none}
  #dashFeed .ev:nth-child(n+3){display:none}
  .dash-col:nth-child(2){order:-1}          /* real-numbers column first */
  .snap{grid-template-columns:1fr 1fr}

  /* Businesses (CWP): drop the mini live-conversation; keep the proof + CTA. */
  .biz-convo{display:none}

  /* Services: ASORA's lead card stays full-width up top; her seven team cards
     become a swipeable snap rail (same proven pattern as .biz-track) instead of
     a tall stack. The org-chart connector is hidden — it reads on desktop, not
     on a horizontal rail. Cards keep the full spec strip; the "Module ·
     Category" line goes. */
  .svc-team{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding:6px 2px 14px;margin:16px -2px 0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc-team::before,.svc-team::after{display:none}
  .svc-team::-webkit-scrollbar{display:none}
  .svc-team > .pillar{flex:none;width:min(300px,82vw);scroll-snap-align:center}
  .p-mod{display:none}

  /* Ecosystem: the orbital map is a hover experience — on touch it's a
     1,000px circle with tiny tap targets. Collapse it into a compact
     tap-to-focus grid; the auto-cycle + info panel still work as-is. */
  .eco-svg,.eco-center{display:none}
  .eco-stage{aspect-ratio:auto;max-width:none;display:grid;grid-template-columns:repeat(4,1fr);
    gap:6px 4px;padding:4px 0}
  .eco-node{position:static;transform:none;left:auto!important;top:auto!important}
  .eco-node .nb{animation:none}
  .eco-node .nb svg{width:24px;height:24px}
  .eco-node .nl{font-size:10px}
  .eco-hint{display:none}

  /* Opened service window stacks cleanly on phone (already trimmed to
     outcome + overview + how-ASORA + what-you-receive + CTA). */
  .win-body{gap:16px}
  .win-l,.win-r{gap:0}
}