/* ════════════════════════════════════════════
   RESPONSIVE  ·  Embtel Virtual Assistance
   980px  ·  860px  ·  640px  ·  420px
════════════════════════════════════════════ */

/* ── Tablet landscape ≤980px ────────────────── */
@media(max-width:980px){
  /* Hero */
  .hero{padding:76px 0 64px}
  .hero-grid{grid-template-columns:1fr}
  .deskcard{max-width:480px;margin-top:2rem}

  /* Index grids → 2 col */
  .svc-grid,.layered,.steps,.price-grid,.guar,.tgrid{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .careband{grid-template-columns:1fr 1fr}

  /* About */
  .values{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}

  /* Real estate */
  .pain{grid-template-columns:1fr 1fr}
  .rolegrid{grid-template-columns:1fr 1fr}

  /* Footer */
  .fgrid{grid-template-columns:1fr 1fr}
}

/* ── Mobile nav + tablet portrait ≤860px ────── */
@media(max-width:860px){
  /* Navigation */
  .nav-links{
    display:none;position:absolute;top:70px;left:0;right:0;
    background:var(--paper);flex-direction:column;
    padding:1.2rem 24px 1.8rem;border-bottom:1px solid var(--line);
    gap:1rem;align-items:flex-start;z-index:49
  }
  .nav-links.open{display:flex}
  .menu-btn{display:block}

  /* Page layouts → single column */
  .story,.contact-grid,.night{grid-template-columns:1fr}
  .desk-grid{grid-template-columns:1fr}
  .sidecards{margin-top:1.2rem}
  .tasklist{columns:1}

  /* Spacing */
  .hero{padding:60px 0 48px}
  .page-hero{padding:56px 0 44px}
  .section{padding:60px 0}
  .desk{padding:52px 0}

  /* About */
  .story .aside{margin-top:0}
  .orgrow{flex-wrap:wrap;gap:.4rem}

  /* Services anchors */
  .anchor-chips{gap:.4rem}
}

/* ── Mobile ≤640px ──────────────────────────── */
@media(max-width:640px){
  /* Global */
  .wrap{padding-left:18px;padding-right:18px}
  .section{padding:48px 0}
  .page-hero{padding:44px 0 36px}
  .hero{padding:52px 0 40px}
  .desk{padding:44px 0}
  .cta{padding:60px 0}

  /* All grids → 1 column */
  .svc-grid,.layered,.steps,.price-grid,.guar,.tgrid,
  .careband,.clockrow,.values,.pain,.rolegrid,.night,
  .why-grid,.story{grid-template-columns:1fr}

  /* Stats stays 2-col (short content) */
  .stats .wrap{grid-template-columns:1fr 1fr;gap:1rem}
  .stat{padding-left:.7rem}
  .stat b{font-size:1.2rem}

  /* Hero */
  .hero-ctas{flex-direction:column;gap:.6rem}
  .hero-ctas .btn{width:100%;text-align:center;justify-content:center}
  .hero-note{text-align:center}
  .deskcard{max-width:100%}

  /* Section head */
  .section-head{margin-bottom:1.8rem}
  .section-head h2{font-size:clamp(1.6rem,5vw,2.2rem)}

  /* Pricing */
  .plan{padding:1.5rem 1.2rem}

  /* Services page */
  .desk-grid{grid-template-columns:1fr}
  .tasklist{columns:1}
  .anchor-chips a{font-size:.7rem;padding:.38rem .75rem}

  /* Contact */
  .contact-grid{grid-template-columns:1fr}
  .formcard{padding:1.4rem}

  /* About */
  .values{grid-template-columns:1fr 1fr}
  .orgrow{flex-direction:column;gap:.2rem}
  .orgrow b{min-width:unset;font-size:.95rem}

  /* Real estate */
  .night{grid-template-columns:1fr}

  /* Footer */
  .fgrid{grid-template-columns:1fr 1fr}
  .fbot{flex-direction:column;align-items:flex-start;gap:.4rem;text-align:left}

  /* CTA buttons in hero/sections */
  .cta .btn{width:100%;max-width:320px}

  /* Testimonials */
  .tgrid{grid-template-columns:1fr}
}

/* ── Small phone ≤420px ─────────────────────── */
@media(max-width:420px){
  .wrap{padding-left:14px;padding-right:14px}

  /* Everything 1 column */
  .fgrid{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}

  /* Typography */
  .section-head h2{font-size:1.5rem}
  .plan .price{font-size:1.8rem}

  /* Spacing */
  .section{padding:40px 0}
  .formcard{padding:1rem}
  .plan{padding:1.2rem 1rem}

  /* Footer bar */
  .fbot{font-size:.66rem}
}