/* ============================================================
   THE BINARY HOLDINGS — MOBILE TIGHTENING LAYER  (v2, sharp)
   Goal: kill the never-ending scroll. Match desktop, shrunk well.
   No new components, no rails, no marquees, no extra cards.
   Just the desktop design with the dead vertical space removed.
   Scoped to <=720px. Desktop is byte-identical.
   Append after the existing <style> block, or link last.
   ============================================================ */

@media (max-width:720px){

  /* THE FIX — section padding is up to 280px top+bottom on mobile.
     That empty black space IS the never-ending scroll. Cut it to a
     tight, consistent rhythm and the whole page halves in length.
     NOTE: override only top/bottom — never the padding shorthand, or
     it wipes .wrap's left/right gutter and text kisses the edge. */
  section{padding-top:clamp(64px,15vw,88px) !important;padding-bottom:clamp(64px,15vw,88px) !important;scroll-margin-top:80px}
  .divider{padding-top:clamp(24px,6vw,36px) !important}
  .sec-head{margin-bottom:clamp(30px,7vw,42px);gap:14px}
  .posn{padding-top:clamp(40px,9vw,56px) !important;padding-bottom:clamp(40px,9vw,56px) !important}
  .ticker{margin-top:clamp(28px,6vw,48px)}
  footer.foot{padding-top:clamp(40px,7vw,56px) !important;padding-bottom:32px !important}
  .cta{padding-bottom:clamp(72px,16vw,104px) !important}

  /* extra dead space lives between the flywheel diagram and its strata
     rails, and below the flywheel caption — pull those in */
  .flywheel-stage{margin-bottom:40px}
  .loop-grid{gap:32px}
  .strata-flow{padding:12px 0}

  /* PROOF METRICS — desktop already drops to a grid; at <=440px it goes
     1-col = 8 tall rows = scroll. Hold it at 2-col on phones so the
     eight metrics read as one compact block, like desktop's 2-col view.
     No rails, no swiping. */
  .proof-grid{grid-template-columns:repeat(2,1fr) !important}
  .proof-grid .proof-cell{border-bottom:1px solid var(--hairline) !important}
  .proof-grid .proof-cell:nth-child(2n){border-right:none !important}
  .proof-grid .proof-cell:nth-child(2n+1){border-right:1px solid var(--hairline) !important}
  .proof-grid .proof-cell:nth-last-child(-n+2){border-bottom:none !important}
  .proof-cell{padding:22px clamp(16px,4vw,24px) !important}

  /* HERO — one clean screen. Slightly larger headline, full-width
     stacked buttons. Nothing added. */
  .hero{min-height:90svh;padding-top:24px;padding-bottom:56px}
  .hero h1{letter-spacing:-.035em;margin-bottom:24px}
  .hero-actions{flex-direction:column;gap:10px;width:100%}
  .hero-actions .btn{width:100%;justify-content:space-between}

  /* keep the grid backdrop crisp at phone scale */
  .bg-grid{background-size:44px 44px}

  /* HEADER — declutter. The brand tagline crowds the bar next to the
     hamburger on a narrow screen; drop it and keep the name on one
     line. Cleaner, sharper top bar. */
  .brand-tag{display:none}
  .brand-name{font-size:15px;letter-spacing:-.01em;white-space:nowrap}
  .brand-mark{width:34px;height:34px}
  .nav-inner{gap:14px}

  /* SIDE GUTTERS — give content room to breathe off the screen edges.
     Lift the gutter floor so nothing kisses the corner. This --pad
     drives every .wrap section (hero, loop, stack, map, partners,
     outcome, cta) plus the explicit full-bleed cells below. */
  :root{--pad:clamp(24px,6vw,64px) !important}
  .proof-cell{padding-left:clamp(24px,6vw,28px) !important;padding-right:clamp(24px,6vw,28px) !important}
  .posn-cell{padding-left:clamp(24px,6vw,28px) !important;padding-right:clamp(24px,6vw,28px) !important}
  /* the swipe-free proof grid uses cell borders for column lines; keep
     the outer cells from sitting flush to the frame */
  .map-legend{padding-left:clamp(22px,6vw,28px);padding-right:clamp(22px,6vw,28px)}

  /* CLOSED INTELLIGENCE LOOP — on mobile the spinning flywheel SVG
     stacks ABOVE the L0–L3 list and animates on its own with a caption
     that keeps changing, so it reads as noise disconnected from the
     explanation. Hide the animated diagram on phones and let the flow
     read clearly top-to-bottom: Foundation models → L0→L3 loop →
     Host apps, with the down/up arrows framing it as a closed loop. */
  .flywheel-stage{display:none !important}
  .loop-grid > div:first-child{display:none !important}
  .loop-grid{display:block !important;gap:0 !important}
  /* the L0–L3 items become the loop, clearly numbered and readable */
  .loop-copy .lc-item{padding:16px 0;gap:14px}
  .loop-copy .lc-item .n{width:30px;font-size:13px;color:var(--white)}
  .loop-copy .lc-item .t b{font-size:1.05rem}
  .loop-copy .lc-item .t span{font-size:13.5px;margin-top:5px}
  .loop-copy .lc-note{margin-top:22px;padding-top:20px;border-top:1px solid var(--hairline);font-size:14.5px}
  /* tighten the above/below framing bars and the flow arrows */
  .strata{padding:18px 20px;gap:6px}
  .strata .st-name{font-size:1.15rem}
  .strata-flow{padding:14px 0;font-size:10.5px;gap:10px}
  .strata-flow .sf-arrow{font-size:16px}

  /* FOUR-LAYER STACK — on mobile the big iso-diagram (700×760 SVG) is
     forced above the accordion and floats disconnected from the four
     clickable rows; it's also a hover/active visual that doesn't suit
     touch. Hide the decorative diagram and let the accordion BE the
     stack — tap a layer to expand it. That's the real interaction. */
  .stack2{grid-template-columns:1fr !important;gap:0 !important}
  .stack2-iso{display:none !important}
  .acc-item{padding:20px 0}
  .acc-title{font-size:1.15rem}
  .acc-body p,.acc-meta{padding-left:34px}
  .acc-item.open .acc-body{max-height:340px}

  /* LIVE PARTNERS — the logo grid collapses to 1 column on small
     phones = a long scroll of 16 cards. Hold it at 2 columns so each
     category reads as a compact block, matching the desktop grid feel. */
  .plogos{grid-template-columns:repeat(2,1fr) !important}
  .plogo{min-height:108px;padding:18px clamp(14px,4vw,18px)}
  .pl-mark{width:40px;height:40px;font-size:15px}
  .pgroup{margin-bottom:clamp(28px,7vw,40px)}

  /* FOOTER — keep a tidy 2-column block instead of one tall stacked
     scroll of every link. Brand spans the full width on top.
     Explicit side padding so columns never touch the screen edge. */
  footer.foot{padding-left:clamp(24px,6vw,64px);padding-right:clamp(24px,6vw,64px)}
  .foot-grid{grid-template-columns:1fr 1fr !important;gap:32px 24px;margin-bottom:40px}
  .foot-brand{grid-column:1 / -1}
  .foot-brand p{max-width:42ch}
  .foot-col h4{margin-bottom:14px}
  .foot-col a{padding:5px 0}
  .foot-bottom{flex-direction:column;gap:10px;align-items:flex-start}

  /* ============================================================
     PAGE-SPECIFIC — about / team / press / contact
     Shared nav, footer, proof, plogos, hero and section spacing are
     already handled above and apply to every page. These cover the
     layouts unique to each inner page. All still ≤720px, desktop safe.
     ============================================================ */

  /* ABOUT — big-number metrics, timeline, architecture rows */
  .about-meta{gap:1px !important}
  .am{padding:20px clamp(20px,5vw,24px)}
  .amv{font-size:15px} /* this is label text (e.g. "DIFC Innovation Hub"), keep small */
  .ab-k{font-size:clamp(2rem,9vw,2.6rem)} /* the actual headline number */
  .about-block p{font-size:15px}
  .tl-item{grid-template-columns:1fr !important;gap:8px !important;padding:20px 0}
  .tl-year{font-size:13px;color:var(--white)}
  .tl-h{font-size:1.1rem}
  .arc{padding:18px 0;gap:12px}

  /* TEAM — people grid (already 1-col at 680) + network grid */
  .person{padding:24px clamp(20px,5vw,24px) !important}
  .p-name{font-size:1.25rem}
  .net-grid{gap:1px}
  .ncard{padding:20px clamp(18px,5vw,22px)}
  .nc-name{font-size:1.05rem}

  /* PRESS — release rows (already 1-col at 768) + press cards */
  .press-card{padding:24px clamp(20px,5vw,24px)}
  .pc-t{font-size:1.15rem}
  .rel{padding:20px 0}
  .rel-title{font-size:1.05rem;line-height:1.3}
  .rel-date{font-size:12px}

  /* CONTACT — form + the routing lane cards */
  .cform{gap:18px}
  .cform .btn-primary{align-self:stretch !important;width:100%;justify-content:center;min-height:54px}
  .frow input,.frow select,.frow textarea{font-size:16px} /* 16px stops iOS zoom-on-focus */
  .lanes-grid{gap:12px}
  .lane{padding:22px clamp(20px,5vw,24px)}
  .lane-t{font-size:1.15rem}
}

/* small phones: still no 1-col metric stack — keep it 2 wide,
   just let the values shrink a touch */
@media (max-width:380px){
  .proof-cell .pv{font-size:1.7rem}
  .hero h1{font-size:2.8rem}
}