/* ============================================================
   IONCORES — Mobile responsive layer  (phones · ≤640px)
   ------------------------------------------------------------
   Loads AFTER ic-base / ic-home / ic-compact, so its rules win
   on phones. EVERYTHING of consequence here is gated behind a
   media query — desktop and tablet rendering is left exactly as
   it was. Nothing outside the query changes an existing layout;
   the two ungated rules below only hide brand-new elements
   (the sticky CTA and swipe hints) so they never appear on
   larger screens.

   Mirrors the "Ioncores V2 Mobile" design reference:
     • swipe carousels for Packages and Selected Work
     • denser 2-col grids (disciplines, partners)
     • a 2×2 stat line
     • a persistent bottom "Book a call" CTA
     • touch + iOS safe-area polish
   The header keeps the existing hamburger dropdown (no drawer).
   ============================================================ */

/* New elements — hidden everywhere by default; the phone query
   below switches them on. Keeps desktop/tablet untouched. */
.sticky-cta{ display:none; }
.rail-hint{ display:none; }

@media (max-width:640px){

  :root{ --gutter:20px; }

  /* Long section eyebrows ("Every discipline, in one accountable
     team", "Signature platforms…") carry white-space:nowrap in the
     base sheet, which forces the page wider than a phone. Let the
     label wrap so nothing overflows the viewport horizontally. */
  .eyebrow{ flex-wrap:wrap; }
  .eyebrow .kicker{ white-space:normal; }

  /* Reserve space so the fixed bottom CTA never covers content. */
  body{ padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

  /* Section anchors clear the sticky header when jumped to. */
  section[id]{ scroll-margin-top:72px; }

  /* ---------- HERO ---------- */
  .hero .wrap{ padding-top:24px; padding-bottom:38px; gap:30px; }
  .hero h1{ font-size:clamp(30px,8.6vw,38px); }
  .hero .lead{ max-width:none; }
  .hero .cta-row{ gap:10px; }
  .hero .cta-row .btn{ flex:1 1 auto; justify-content:center; }
  .hero .assure{ gap:10px 16px; }
  .dvis{ max-width:100%; width:100%; margin-inline:auto; }
  .dash .chartrow{ grid-template-columns:1fr auto; gap:14px; }
  .float.f2{ right:10px; bottom:-30px; }

  /* ---------- STAT LINE → 2 × 2 ---------- */
  .statline{ grid-template-columns:repeat(2,1fr); }
  .statline .s{ border-right:1px solid var(--border-2); border-bottom:1px solid var(--border-2); padding:16px; }
  .statline .s:nth-child(2n){ border-right:0; }
  .statline .s:nth-last-child(-n+2){ border-bottom:0; }
  .statline .v{ font-size:26px; }
  .statline .l{ font-size:12px; }

  /* ---------- ABOUT — disciplines 2-col ---------- */
  .disc{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .sn-card{ padding:15px 14px; }

  /* ---------- SERVICES ---------- */
  .pcard{ padding:22px 20px; }
  .modes .mode{ padding:20px; }

  /* ---------- PACKAGES — horizontal snap carousel ---------- */
  .pkgs{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory;
    gap:12px; margin-inline:calc(var(--gutter) * -1);
    padding:4px var(--gutter) 8px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pkgs::-webkit-scrollbar{ display:none; }
  .pkg{ scroll-snap-align:start; flex:0 0 80%; min-width:80%; }
  .pkg .tag{ white-space:nowrap; }
  .signature{ grid-template-columns:1fr; gap:12px; }

  /* ---------- SELECTED WORK — horizontal snap carousel ---------- */
  .wkgrid{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; margin-inline:calc(var(--gutter) * -1);
    padding:2px var(--gutter) 8px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .wkgrid::-webkit-scrollbar{ display:none; }
  .wkcard{ scroll-snap-align:start; flex:0 0 84%; min-width:84%; }
  .worksec .whead{ flex-direction:column; align-items:flex-start; gap:10px; }
  .worksec .wsub{ max-width:none; }

  /* swipe hint shown under each carousel */
  .rail-hint{
    display:flex; align-items:center; gap:7px; margin-top:14px;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--slate-2);
  }
  .rail-hint svg{ width:15px; height:15px; }

  /* ---------- TRUST / WORKING-WITH-US — 1 col ---------- */
  .guar{ grid-template-columns:1fr; gap:10px; }

  /* ---------- PARTNERS — 2-col + full-width tabs ---------- */
  .partner-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .partner{ padding:16px 15px; }
  .ptabs{ display:flex; width:100%; }
  .ptabs button{ flex:1; padding:10px 12px; font-size:13px; }

  /* ---------- CONTACT ---------- */
  .cform{ grid-template-columns:1fr; }
  .cform .full{ grid-column:1 / -1; }

  /* ---------- FOOTER — brand full width, links 2-col ---------- */
  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px 20px; }
  .foot-grid > div:first-child{ grid-column:1 / -1; }

  /* ---------- Touch polish ---------- */
  .btn{ min-height:44px; }

  /* ---------- STICKY BOTTOM CTA ---------- */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    display:flex; align-items:center; gap:10px;
    padding:11px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 11px);
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(150%) blur(16px);
    backdrop-filter:saturate(150%) blur(16px);
    border-top:1px solid var(--border-2);
    transform:translateY(0);
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .sticky-cta .cta-note{ flex:1; min-width:0; }
  .sticky-cta .cta-note b{ display:block; font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--navy); letter-spacing:-.01em; }
  .sticky-cta .cta-note span{ display:block; font-size:11.5px; color:var(--slate-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sticky-cta .btn{ flex:0 0 auto; padding:13px 18px; min-height:0; }
  .sticky-cta.hide{ transform:translateY(140%); }

  /* Midnight-hero variant keeps the bottom bar legible (parity
     with the reference; harmless when the attribute is absent). */
  :root[data-hero="midnight"] .sticky-cta{ background:rgba(11,18,32,.86); border-top-color:var(--on-deep-line); }
  :root[data-hero="midnight"] .sticky-cta .cta-note b{ color:#fff; }
}

@media (max-width:640px) and (prefers-reduced-motion: no-preference){
  .sticky-cta{ will-change:transform; }
}