/* ============================================================
   MOBILE OPTIMIZATION LAYER  ·  2026-08-09
   loaded LAST in <head> so it wins the cascade over both
   styles.css and each page's inline <style>.
   Scope: only ≤980 / ≤620 — desktop layout untouched.
   ============================================================ */

.burger{display:none}
.m-cta{display:none}

/* ---------- tablet & phone (≤980) ---------- */
@media(max-width:980px){
  .wrap{padding:0 24px}
  section{padding:74px 0}
  nav{height:64px}

  /* --- hamburger button --- */
  .nav-r{gap:0}
  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:12px;
    background:var(--glass);backdrop-filter:blur(8px);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
    transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
  .burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.on span:nth-child(2){opacity:0}
  .burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* --- menu becomes a full-width dropdown drawer --- */
  .menu{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;
    background:rgba(9,20,42,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);padding:6px 0 12px;
    box-shadow:0 30px 60px -22px rgba(0,0,0,.75);
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s,visibility .28s}
  .menu.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .menu li{width:100%}
  .menu a{display:block;padding:15px 24px;font-size:16px;color:#dbe6f6}
  .menu a.active{color:#fff}
  .menu a.active::after{display:none}
  .m-cta{display:block;padding:12px 24px 2px}
  .m-cta .btn{display:inline-flex;width:100%;justify-content:center}

  /* --- tighten gaps on the now-stacked two-column sections --- */
  .hero-in,.boards,.plat,.about-home,.split,.split.rev,.contact-grid{gap:34px}
  .cards3,.pgrid,.pgrid.cols3,.stats,.steps,.mx-grid{gap:16px}

  /* --- hero --- */
  .hero{padding:52px 0 60px}
  .hv{height:340px}
  .h-stats{margin-top:44px}

  /* --- inner-page hero --- */
  .phero{padding:70px 0 52px}
  .phero p{font-size:16.5px}

  /* --- shrink desktop-sized fixed heights --- */
  .split .ph,.about-home .ph{height:340px}
  .bcard{min-height:340px;padding:34px}
  .banner{height:280px}
  .pharma-hero-ph{height:250px}
}

/* ---------- phone (≤620) ---------- */
@media(max-width:620px){
  .wrap{padding:0 18px}
  section{padding:58px 0}

  /* logo a touch smaller to sit beside the burger */
  .logo{font-size:17px}
  .logo img{height:26px}

  /* typography — one notch down for narrow screens */
  h1.hero-h{font-size:33px;letter-spacing:-.5px}
  .phero h1{font-size:30px;letter-spacing:-.4px}
  .s-title{font-size:26px}
  .s-sub,.phero p,.hero p.lead{font-size:15.5px}
  .cta-w h2{font-size:26px}
  .cta-w{padding:52px 22px}
  .bcard h3{font-size:23px}
  .stat b{font-size:31px}

  /* keep stats 2-up (nicer than one tall column) */
  .stats{grid-template-columns:1fr 1fr}

  /* full-width primary buttons for comfy tap targets */
  .hero-cta{gap:12px}
  .hero-cta .btn{width:100%;justify-content:center}

  /* smaller hero visual; hide floaty overlay chips to avoid clutter/overflow */
  .hv{height:270px}
  .glass-card.gc1,.glass-card.gc2{display:none}

  .split .ph,.about-home .ph{height:260px}
  .bcard{min-height:300px;padding:26px}
  .banner{height:210px}
  .pharma-hero-ph{height:190px}

  /* marquee tiles a touch smaller */
  .marq .brand{height:56px;width:150px}
  .marq .brand img{height:26px;max-width:108px}

  /* contact number not oversized */
  .fcon b{font-size:22px}
  .cta-w p{font-size:15.5px}
}
