/* ═══════════════════════════════════════════════════════════════════
   Mobile layout (≤ 760px): keep the desktop composition and hierarchy —
   headline, logo art straight under it, compact service icons in a
   single band, 2-up cards, two-column footer — instead of one long
   single-column stack. Loaded last on every page.
═══════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  :root{--pad:18px}

  /* ───── home hero: headline then logo art, like the desktop's text + art pairing ───── */
  .hx-hero{padding:calc(var(--nav-h) + 22px) 0 40px;display:flex;flex-direction:column}
  .hx-hero .hx-grid,.hx-hero .hx-copy{display:contents}
  .hx-hero .hx-eyebrow,.hx-hero .hx-h1,.hx-hero .hx-lead,.hx-hero .hx-sub,.hx-hero .hx-cta,.hx-hero .hx-trust{position:relative;z-index:3;margin-inline:var(--pad)}
  .hx-hero .hx-eyebrow{order:1;margin-bottom:6px}
  .hx-hero .hx-h1{order:2;font-size:clamp(3rem,15.5vw,4.2rem);margin-bottom:0}
  .hx-hero .hx-media{order:3;position:relative;width:auto;height:clamp(250px,74vw,330px);margin:0 0 6px;right:auto}
  .hx-hero .hx-lead{order:4;margin-top:8px;font-size:1.02rem}
  .hx-hero .hx-sub{order:5}
  .hx-hero .hx-cta{order:6;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
  .hx-hero .hx-cta .pbtn{width:100%;justify-content:center;padding-inline:10px;font-size:.66rem;letter-spacing:.06em}
  .hx-hero .hx-trust{order:7;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px}
  .hx-plane .hx-logo-fallback{width:86%;max-height:92%}

  /* ───── services band: one compact block of icons (desktop = one row of icons) ───── */
  .hx-services{margin-top:-8px}
  .hx-svc-wrap{grid-template-columns:repeat(4,1fr);border-radius:20px}
  .hx-svc{padding:16px 2px 14px;gap:8px}
  .hx-svc svg{width:26px;height:26px}
  .hx-svc span{font-size:.66rem}
  .hx-svc+.hx-svc::before{display:block;top:26%;bottom:26%}
  .hx-svc:nth-child(4n+1)::before{display:none}

  /* ───── sections: tighter rhythm, bigger images, desktop-style headings ───── */
  .hx-feature,.hx-tech,.hx-cards-sec,.hx-global,.hx-about,.af,.gl,.tmark{padding:56px 0}
  .hx-h2{font-size:clamp(2rem,9.4vw,2.7rem)}
  .hx-frame{aspect-ratio:4/4.4}

  /* photo cards: 2-up like the desktop grid, not four tall full-width tiles */
  .hx-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .hx-card{aspect-ratio:3/4.3;border-radius:20px}
  .hx-card h3{font-size:1.02rem}
  .hx-card p{font-size:.72rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* technology showcase: devices full width, caption readable */
  .hx-devices{padding-bottom:56px}
  .hx-float.f1,.hx-float.f2{transform:scale(.86);transform-origin:left center}
  .hx-shot-note{font-size:.72rem}

  /* story: compact stacked steps with less dead space */
  .story-step{padding-block:0}

  /* maps */
  .af-layout,.gl-grid{gap:20px}
  .af-chip,.gl-dest{padding:8px 12px;font-size:.78rem}

  /* ───── footer: two columns + wordmark that fits ───── */
  .foot-mark{font-size:11.4vw;padding:40px 8px 0;letter-spacing:-.045em}
  .foot-live-in{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:.7rem}
  .foot-live-in .fl-emerg{grid-column:1/-1;margin:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 18px;padding-block:36px 30px}
  .foot-brand{grid-column:1/-1}
  .foot-col a{padding:7px 0}

  /* ───── floating buttons: smaller, tucked into the corner so they stop covering text ───── */
  .chat-fab{right:12px;bottom:72px;height:50px;padding:4px}
  .chat-fab .chat-fab-txt,.chat-fab-label{display:none}
  .chat-fab-ico{width:42px;height:42px}
  .totop{right:12px;bottom:14px;width:40px;height:40px}

  /* ───── inner pages ───── */
  .phero{padding:calc(var(--nav-h) + 40px) 0 44px}
  .phero h1{font-size:clamp(2.2rem,11vw,3rem)}
  .sv-grid{grid-template-columns:1fr 1fr;gap:12px}
  .sv{padding:20px 14px 16px}
  .sv-ico{width:42px;height:42px;margin-bottom:12px}
  .sv h3{font-size:.98rem}
  .sv p{font-size:.78rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .sv-cat{font-size:.6rem}
  .sv-go{font-size:.72rem}
  .ab-pillars,.ab-next-links{grid-template-columns:1fr 1fr;gap:12px}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr;gap:12px}
  .grid-2{grid-template-columns:1fr}
  .cf-layout{gap:28px}
  .team-grid{grid-template-columns:1fr 1fr!important;gap:12px}
}
@media (max-width:420px){
  .sv-grid,.hx-cards{gap:10px}
  .sv h3{font-size:.92rem}
  .grid-3,.grid-4{grid-template-columns:1fr}
}

@media (max-width:760px){
  .hx-hero .hx-cta{grid-template-columns:1fr;gap:10px}
  .hx-hero .hx-cta .pbtn{font-size:.72rem;letter-spacing:.08em;padding-block:15px}
  .story-step{margin-top:0;padding-top:28px}
  .chat-fab{height:46px;bottom:64px;right:10px}
  .chat-fab-ico{width:38px;height:38px}
}

@media (max-width:760px){
  .foot-live-in{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-block:14px}
  .foot-live-in span{white-space:normal;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
  .foot-live-in .fl-emerg{margin:4px 0 0}
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HOME = a short, punchy highlight reel (desktop keeps everything).
   Kept: hero + logo · services band · swipeable highlights · mining ·
   technology · globe · emergency · get-started.
   Hidden on phones only: story, logo section (hero already has it),
   Africa map, who-we-are, how-we-work, FAQ.
═══════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  body[data-page="index"] .story,
  body[data-page="index"] .tmark,
  body[data-page="index"] .af,
  body[data-page="index"] .hx-about,
  body[data-page="index"] #how,
  body[data-page="index"] #faq{display:none!important}

  /* tighter, bolder rhythm on every kept section */
  body[data-page="index"] .hx-feature,
  body[data-page="index"] .hx-tech,
  body[data-page="index"] .hx-cards-sec,
  body[data-page="index"] .gl{padding:40px 0}

  /* mining: headline + big image + button — drop the bullet list */
  body[data-page="index"] .hx-feature .hx-split{gap:22px}
  body[data-page="index"] .hx-feature .hx-p{font-size:.98rem}
  body[data-page="index"] .hx-ticks,
  body[data-page="index"] .hx-checks{display:none}
  body[data-page="index"] .hx-frame{order:0}

  /* technology: devices up front, headline, one button — no feature list */
  body[data-page="index"] .hx-tech .hx-split{display:flex;flex-direction:column;gap:22px}
  body[data-page="index"] .hx-tech .hx-split>div:nth-child(2){order:-1}
  body[data-page="index"] .tx-feats{display:none}
  body[data-page="index"] .hx-shot-note{display:none}

  /* swipeable highlight cards instead of a grid */
  body[data-page="index"] .hx-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 18px;scrollbar-width:none}
  body[data-page="index"] .hx-cards::-webkit-scrollbar{display:none}
  body[data-page="index"] .hx-card{flex:0 0 74%;scroll-snap-align:center;aspect-ratio:3/4.1}
  body[data-page="index"] .hx-card p{-webkit-line-clamp:4}

  /* globe: the star of the section — big, with a swipeable country row */
  body[data-page="index"] .gl-grid{display:flex;flex-direction:column;gap:14px}
  body[data-page="index"] .gl-stage{order:-1}
  body[data-page="index"] .gl-card{display:none}
  body[data-page="index"] .gl-dests{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--pad) * -1);padding:2px var(--pad) 10px;scrollbar-width:none;max-width:none}
  body[data-page="index"] .gl-dests::-webkit-scrollbar{display:none}
  body[data-page="index"] .gl-dest{flex:0 0 auto}
  body[data-page="index"] .gl-actions .gl-hint{display:none}
  body[data-page="index"] .gl .af-disclaimer{display:none}
  body[data-page="index"] .gl .hx-p{font-size:.98rem}

  /* emergency band: compact and punchy */
  body[data-page="index"] .emerg{padding:48px 0}
  body[data-page="index"] .emerg-stats{display:none}
  body[data-page="index"] .emerg .lead{font-size:1rem}

  /* get-started: short */
  body[data-page="index"] .cta{padding:48px 0}
  body[data-page="index"] .accred{display:none}

  /* chat button: a true circle, never an oval */
  .chat-fab{width:50px;height:50px;padding:4px;justify-content:center;border-radius:50%}
  .chat-fab-ico{width:40px;height:40px;flex:none}
  .totop{width:42px;height:42px;aspect-ratio:1}
}
@media (max-width:760px){
  body[data-page="index"] .cta-lines{display:none}
  body[data-page="index"] .hx-tech .tx-devices{margin-top:6px}
}

/* ───── mobile-only punchy mining block ───── */
.mx{display:none}
@media (max-width:760px){
  body[data-page="index"] #mining{display:none!important}
  body[data-page="index"] .mx{display:block;padding:34px 0 30px}
  .mx-card{position:relative;margin:0 var(--pad);border-radius:26px;overflow:hidden;aspect-ratio:4/5;background:#0b1f3a;box-shadow:0 30px 50px -28px rgba(11,31,58,.6)}
  .mx-card picture,.mx-card img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:60% 30%}
  .mx-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,58,0) 28%,rgba(11,31,58,.55) 58%,rgba(8,20,40,.94) 100%)}
  .mx-copy{position:absolute;left:0;right:0;bottom:0;padding:0 20px 22px}
  .mx-kick{margin:0 0 8px;font:700 .68rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:#9ED0FF}
  .mx-h{margin:0 0 16px;font-family:var(--disp);font-weight:900;font-size:clamp(2.1rem,10.5vw,2.8rem);line-height:.96;letter-spacing:-.035em;color:#fff}
  .mx-h em{font-style:normal;color:#5DB0FF}
  .mx-cta{width:100%;justify-content:center}
  .mx-chips{list-style:none;margin:14px var(--pad) 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .mx-chips li{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:14px 8px 12px;text-align:center;box-shadow:0 12px 26px -20px rgba(11,60,130,.5)}
  .mx-chips svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 8px;display:block}
  .mx-chips b{display:block;font:700 .74rem/1.2 var(--disp);color:var(--navy)}
  .mx-chips i{display:block;font:normal 500 .62rem/1.3 var(--ui);color:var(--navy-soft);margin-top:3px}
}
@media (max-width:760px){
  body[data-page="index"] .hx-tech .hx-split>div{width:100%;min-width:0}
  body[data-page="index"] .hx-tech .tx-devices{width:100%;max-width:420px;margin-inline:auto;padding-bottom:40px}
  body[data-page="index"] .hx-tech .hx-float.f1{display:none}
}
.fb-links{display:flex;flex-wrap:wrap;gap:0 18px}
.fb-links a{display:inline-flex;align-items:center;min-height:44px}