/* Mobile UX and motion layer for the regional guide page */
:root { --motion-ease: cubic-bezier(.22, .61, .36, 1); }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
a, button { transition: transform .2s var(--motion-ease), box-shadow .2s var(--motion-ease), background-color .2s ease, color .2s ease; }
a:hover, button:hover { transform: translateY(-2px); }
:where(.card, article, section, .faq, [class*="card"]) { animation: rise-in .65s var(--motion-ease) both; }
.motion-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--motion-ease), transform .7s var(--motion-ease); }
.motion-reveal.is-visible { opacity: 1; transform: none; }
.motion-pulse { animation: soft-pulse 2.4s ease-in-out infinite; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes soft-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,.16); } 50% { box-shadow: 0 0 0 9px rgba(37,99,235,0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .motion-reveal { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.7; }
  .container { width: min(100% - 32px, 680px); margin-inline: auto; }
  h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.2; letter-spacing: -.04em; }
  h2 { font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 1.3; }
  h3 { font-size: 1.15rem; line-height: 1.45; }
  p { word-break: keep-all; }
  nav ul, .nav-links, [role="navigation"] ul { gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  nav ul::-webkit-scrollbar, .nav-links::-webkit-scrollbar { display: none; }
  a, button { min-height: 44px; }
  .hero, [class*="hero"] { padding-block: 48px 40px; }
  .grid, .cards, [class*="grid"] { grid-template-columns: 1fr !important; gap: 16px; }
  .sticky-cta { position: fixed; z-index: 20; inset: auto 16px 16px; width: auto; box-shadow: 0 10px 30px rgba(15,23,42,.18); }\n  .contact-float { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); gap: 7px; }\n  .contact-float-item { min-width: 0; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 15px; }\n  .contact-float-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n  .contact-float-icon { width: 38px; height: 38px; background: transparent; }
  dialog { width: calc(100% - 24px); max-width: 520px; border-radius: 20px; padding: 24px; }
  summary { cursor: pointer; padding: 16px 0; }
}