/* Final phone layout overrides. Loaded after style.css. */
@media (max-width: 640px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  *, *::before, *::after { min-width: 0; box-sizing: border-box; }
  img, video, iframe, svg { max-width: 100%; }
  .container, .container-wide, .container-narrow,
  .design-v2 .container, .design-v2 .container-wide { width: calc(100% - 32px); max-width: none; margin-inline: auto; }

  .site-header, .site-header.is-scrolled { width: 100%; height: 66px; }
  .header-inner, .design-v2 .site-header:not(.is-scrolled) .header-inner { width: calc(100% - 24px); height: 100%; margin-inline: auto; padding: 0; }
  .brand { max-width: calc(100% - 54px); gap: 8px; }
  .brand-mark { width: 40px; height: 40px; flex: 0 0 40px; }
  .brand-copy { overflow: hidden; }
  .brand-copy strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .brand-copy small { font-size: 6px; white-space: nowrap; }
  .menu-toggle { width: 44px; height: 44px; flex: 0 0 44px; }
  .mobile-menu { position: fixed; inset: 0; width: 100%; height: 100svh; }
  .mobile-menu-inner { width: calc(100% - 32px); height: 100%; margin-inline: auto; padding: 90px 0 calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .mobile-menu nav a { font-size: 18px; line-height: 1.35; }

  .hero, .hero.hero-dynamic, .hero-v2 { min-height: 0; padding-top: 96px; overflow: hidden; }
  .hero-inner, .hero-v2-inner, .story-grid, .about-v2-layout, .business-v2-panel,
  .staff-showcase-heading, .pricing-heading, .booking-heading, .booking-shell,
  .store-layout, .shop-teaser-card, .space-card, .history-layout, .contact-grid,
  .access-grid, .footer-main { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-copy, .hero-v2-copy { width: 100%; max-width: none; }
  .hero h1, .hero-v2-copy h1 { font-size: clamp(38px, 12vw, 52px); overflow-wrap: anywhere; }
  .hero-v2-lead, .hero-lead { font-size: 13px; line-height: 1.8; }
  .hero-v2-actions, .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-v2-actions .button, .hero-actions .button { width: 100%; justify-content: center; }
  .hero-v2-visual, .hero-visual { width: 100%; min-height: 330px; }
  .hero-service-dock { width: calc(100% - 24px); }

  .section-heading h2, .booking-heading h2, .store-copy h2, .space-copy h2,
  .contact-heading h2, .access-info h2 { font-size: clamp(32px, 10vw, 42px); overflow-wrap: anywhere; }
  .story-stat-band, .story-principles, .business-showcase, .staff-grid,
  .price-card-grid, .pricing-notes, .booking-choice-grid, .booking-options,
  .booking-field-grid, .contact-direct, .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .story-stat-band > *, .staff-card:last-child, .contact-direct > * { grid-column: auto !important; }
  .staff-card:last-child { display: block; }
  .staff-card figure, .staff-card:last-child figure { height: auto; aspect-ratio: 4 / 3; }

  .booking-form { width: 100%; padding: 22px 14px 26px; }
  .booking-progress { width: 100%; gap: 0; }
  .booking-progress button { min-width: 0; flex: 0 0 auto; }
  .booking-progress button small { max-width: 48px; font-size: 7px; white-space: normal; }
  .booking-step-head h3 { font-size: 23px; }
  .booking-field input, .booking-field select, .booking-field textarea { width: 100%; max-width: 100%; font-size: 16px; }
  .booking-urgent-note { font-size: 12px; }
  .estimate-panel { width: 100%; }

  .contact-form { width: 100%; padding: 25px 16px; }
  .form-field input, .form-field select, .form-field textarea { width: 100%; max-width: 100%; font-size: 16px; }
  .contact-method { width: 100%; padding: 15px; }
  .contact-line-qr { align-items: center; flex-direction: column; text-align: center; }
  .contact-line-qr img { width: 120px; height: 120px; }
  .company-list dd, .footer-contact a { overflow-wrap: anywhere; }
  .map-wrap iframe { width: 100%; height: 360px; }

  .modal { padding: 10px; }
  .modal-dialog { width: 100%; max-height: calc(100svh - 20px); padding: 30px 16px 20px; border-radius: 18px; }
  .modal-summary { overflow-wrap: anywhere; white-space: pre-wrap; }
  .modal-actions { align-items: stretch; flex-direction: column; }
  .modal-actions .button { width: 100%; flex: none; }
  .mobile-cta { width: 100%; }
}

@media (max-width: 380px) {
  .container, .container-wide, .container-narrow,
  .design-v2 .container, .design-v2 .container-wide { width: calc(100% - 24px); }
  .brand-copy small { display: none; }
  .hero h1, .hero-v2-copy h1 { font-size: 36px; }
  .booking-form { padding-inline: 11px; }
  .booking-progress button > span { width: 28px; height: 28px; }
}