/* ════════════════════════════════════════════════════════════
   SITEWIDE MOBILE REFINEMENTS — applies to every page, every
   language (EN / TR / AR). Loaded after styles-v2.css so it can
   fine-tune spacing without duplicating the base responsive rules
   already handled there (nav, grids, forms, lightbox, etc.).
   ════════════════════════════════════════════════════════════ */

/* ---- 1) Header responsiveness is handled sitewide in styles-v2.css
      (logo, language toggle, theme toggle, and "Start a Project" all stay
      visible and never collide with the burger menu, down to ~320px). ---- */



/* ---- 2) Tighter, less cavernous spacing between sections ---- */
@media (max-width: 760px) {
  .section { padding: clamp(40px, 6vh, 64px) 0; }
  .manifesto,
  .eco,
  .services,
  .work,
  .process,
  .industries,
  #insights,
  .engage { padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(40px, 6vh, 64px); }
  .page-hero, .hero { min-height: min(78vh, 620px); }
}

/* ---- 3) Shorter footer: two link columns instead of one long stack ---- */
@media (max-width: 700px) {
  .f2-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px; }
  .f2-grid > div:first-child { grid-column: 1 / -1; }
}

/* ---- 4) Global small-screen safety net ---- */
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  h1, h2, h3 { word-break: break-word; overflow-wrap: break-word; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  .btn, .nav-cta, .btn-solid, .btn-ghost { min-height: 44px; } /* comfortable tap target */
}

/* ---- 5) Extra-small phones ---- */
@media (max-width: 400px) {
  .hero-h1 { font-size: clamp(30px, 10vw, 44px) !important; }
  .h2 { font-size: clamp(24px, 8vw, 34px) !important; }
}

/* ---- 6) RTL (Arabic) mobile parity — nav, drawer & hero mirror correctly ---- */
@media (max-width: 680px) {
  html[dir="rtl"] .nav { padding: 0 16px; }
  html[dir="rtl"] .nav-left { right: 0; left: auto; }
  html[dir="rtl"] .nav-right { left: 0; right: auto; }
  html[dir="rtl"] .nav-drawer a { flex-direction: row-reverse; }
  html[dir="rtl"] .lang-menu { right: 0; left: auto; }
}
@media (max-width: 380px) {
  html[dir="rtl"] .nav-right .nav-cta::after { content: "ابدأ \2190"; }
}