/* ═══════════════════════════════════════════
   RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════ */

/* Desktop nav */
@media (min-width: 960px) {
  .nav__menu { display: flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none; }
}

/* ═══════════════════════════════════════════
   TABLET (<= 900px)
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  :root {
    --section-padding: clamp(3rem, 8vw, 6rem);
  }
  h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); }
  h2 { font-size: clamp(1.875rem, 5.5vw, 2.75rem); }
}

/* ═══════════════════════════════════════════
   MOBILE (<= 640px)
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Tighter spacing globally */
  :root {
    --section-padding: 3.25rem;
    --container-padding: 1.1rem;
  }

  /* Type scale tightens */
  h1 { font-size: 2.25rem; letter-spacing: -0.02em; line-height: 1.1; }
  h2 { font-size: 1.875rem; line-height: 1.15; }
  h3 { font-size: 1.375rem; }
  p  { font-size: 0.9375rem; }

  /* ── HERO ── */
  /* Generous top padding + spacing so the first viewport shows mainly
     the headline + lead + 2 CTAs. Trust stats and image sit below fold. */
  .hero { padding-top: 7rem; padding-bottom: 3rem; }
  /* Big gap pushes the photo below the fold — first viewport stays
     focused on headline + lead + 2 CTAs. A tiny peek of the photo
     hints "more below". */
  .hero__inner { gap: 16rem; }
  .hero__title {
    font-size: 2.5rem;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-top: var(--space-5);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .hero__lead {
    font-size: 1rem;
    max-width: none;
    margin-top: var(--space-5);
  }
  .hero__actions {
    margin-top: var(--space-10);
    gap: var(--space-2);
    flex-direction: column;
  }
  .hero__actions .btn { width: 100%; }
  .hero__eyebrow { font-size: 0.6875rem; padding: var(--space-2) var(--space-3); }

  /* Trust stats hidden on mobile — same info already lives in the
     marquee strip below the hero and the visit section.
     Keeps the first viewport focused on headline + CTAs. */
  .hero__trust { display: none; }

  /* Hero visual — clean photo card, no floating chips on mobile */
  .hero__visual {
    aspect-ratio: 16 / 11;
    min-height: 0;
    max-width: 100%;
    border-radius: var(--radius-2xl);
    overflow: hidden;
  }
  .hero__card--main {
    padding: var(--space-5);
    border-radius: var(--radius-2xl);
  }
  .hero__card--main h3 {
    font-size: 1.5rem;
    line-height: 1.15;
  }
  .hero__card--main p {
    font-size: 0.8125rem;
    margin-top: 4px;
  }
  /* Hide floating decorative chips on mobile — the same info already
     lives in the "Book the $58 Signature" CTA above */
  .hero__card--price,
  .hero__card--chip {
    display: none;
  }

  /* ── NAV ── */
  .nav { padding: var(--space-3) 0; }
  .nav__inner { gap: var(--space-3); }
  .nav__actions { gap: var(--space-2); }
  .nav__actions .btn--sm { padding: var(--space-2) var(--space-3); font-size: 0.75rem; }

  /* ── MARQUEE — horizontal scroll instead of wrapping ── */
  .marquee {
    padding: var(--space-5) 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee .container { padding: 0; }
  .marquee__row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-6);
    padding: 0 var(--container-padding);
    font-size: 0.6875rem;
  }
  .marquee__row span { white-space: nowrap; flex-shrink: 0; }

  /* ── PILLAR GRID — compact 2-col on mobile (all 6 in ~1 viewport) ── */
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .pillar { border-radius: var(--radius-xl); }
  .pillar__media { aspect-ratio: 4 / 3; }
  .pillar__body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .pillar__title { font-size: 1rem; line-height: 1.15; }
  .pillar__badge {
    margin-top: 4px;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
  }
  /* Hide description and bullet list on mobile — keep title + badge only.
     Full info lives on /services. */
  .pillar__desc,
  .pillar__list { display: none; }

  /* ── SECTION HEADS ── */
  .section__head { margin-bottom: var(--space-10); }
  .section__title { font-size: 1.875rem; }
  .section__lead { font-size: 1rem; }

  /* ── OFFER CARD ── */
  .offer-card {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-2xl);
    gap: var(--space-6);
  }
  .offer-card h2 { font-size: 1.75rem; }
  .offer-card p { font-size: 0.9375rem; }
  .offer-card__price-col { padding: var(--space-6) var(--space-5); }
  .offer-card__price-col .big { font-size: 4.5rem; }
  .offer-card__benefits { margin-top: var(--space-4); gap: var(--space-2); }
  .offer-card__benefits li { font-size: 0.8125rem; }

  /* ── STORY VISUAL ── */
  .story-visual { aspect-ratio: 4 / 4; max-width: 360px; margin: 0 auto; }
  .story-visual__chip { padding: var(--space-4); }
  .story-visual__chip strong { font-size: 1rem; }
  .story__list { gap: var(--space-4); margin-top: var(--space-6); }

  /* ── TESTIMONIALS ── */
  .testimonial { padding: var(--space-6); }
  .testimonial__quote { font-size: 1rem; }

  /* ── VISIT CARD ── */
  .visit { padding: var(--space-6) !important; gap: var(--space-6); border-radius: var(--radius-2xl); }
  .visit__block { gap: var(--space-4); }
  .visit__row svg { width: 18px; height: 18px; }
  .visit__row h4 { font-size: 0.6875rem; }
  .visit__row p { font-size: 0.9375rem; }
  .visit__map { aspect-ratio: 16 / 10; }
  .visit__map-pin { width: 44px; height: 44px; }
  .visit__map-pin svg { width: 20px; height: 20px; }
  .visit__map-addr { font-size: 1rem; }

  /* ── CTA BANNER ── */
  .cta-banner h2 { font-size: 1.875rem; }
  .cta-banner p { font-size: 0.9375rem; }
  .cta-banner__actions { gap: var(--space-2); }
  .cta-banner__actions .btn { flex: 1 1 calc(50% - 4px); min-width: 0; }

  /* ── PAGE HEAD (services / contact) ── */
  .page-head { padding: 6.5rem 0 3rem; }
  .page-head__title { font-size: 2.25rem; line-height: 1.1; }
  .page-head__lead { font-size: 1rem; }

  /* ── TREATMENT MENU (services page) ── */
  .menu-section { padding-bottom: var(--space-10); }
  .menu-head { padding: var(--space-6) 0; gap: var(--space-3); }
  .menu-head h2 { font-size: 2rem; }
  .menu-head__zh { display: block; margin-left: 0; margin-top: var(--space-2); font-size: 1.125rem; }
  .menu-head p { font-size: 1rem; }
  .menu-head__tag { font-size: 0.6875rem; }

  .menu-item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4) calc(var(--space-3) + 22px) var(--space-4) var(--space-3);
    margin: 0 calc(-1 * var(--space-3));
  }
  .menu-item[data-bookable]::after {
    /* Keep arrow visible on mobile (no hover state on touch) */
    opacity: 0.55;
    transform: translateX(0);
    top: var(--space-4);
    right: var(--space-2);
    width: 20px;
    height: 20px;
    background-size: 12px 12px;
  }
  .menu-item__name { font-size: 1.25rem; }
  .menu-item__desc { font-size: 0.875rem; max-width: none; }
  .menu-item__price {
    grid-row: auto;
    grid-column: auto;
    font-size: 1.5rem;
    text-align: left;
    align-items: flex-start;
    gap: 6px;
  }
  .menu-item__price small {
    text-align: left;
    margin-top: 0;
  }
  .menu-item--signature {
    margin: 0 calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .menu-item--signature .menu-item__name::after {
    display: block;
    margin: var(--space-2) 0 0;
    width: fit-content;
  }

  /* Category pills wrap cleanly */
  .category-pills { gap: var(--space-2); margin-top: var(--space-6); }
  .category-pills a { padding: var(--space-2) var(--space-4); font-size: 0.8125rem; }

  /* ── FAQ ── */
  .faq__question { font-size: 1.0625rem; padding: var(--space-5) 0; gap: var(--space-3); }
  .faq__question .toggle { width: 30px; height: 30px; flex-shrink: 0; }
  .faq__question .toggle svg { width: 12px; height: 12px; }
  .faq__answer-inner { font-size: 0.9375rem; padding-bottom: var(--space-5); }

  /* ── BOOKING FORM ── */
  .book-form { padding: var(--space-6); }
  .form-row { gap: var(--space-4); }
  .form-field input, .form-field select, .form-field textarea {
    font-size: 16px; /* prevent iOS zoom-on-focus */
    padding: var(--space-3);
  }

  /* ── FOOTER ── */
  .footer { padding: var(--space-12) 0 var(--space-6); }
  .footer__grid { gap: var(--space-8); }
  .footer__tagline { font-size: 0.875rem; max-width: none; }
  .footer__bottom {
    margin-top: var(--space-10);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Floating WA — tighter */
  .float-whatsapp {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 52px;
    height: 52px;
  }
  .float-whatsapp svg { width: 24px; height: 24px; }
}

/* Very small phones (<= 380px) */
@media (max-width: 380px) {
  .hero__title { font-size: 2.125rem; }
  .page-head__title { font-size: 2rem; }
  .nav__logo-img { height: 48px; }
  .nav.scrolled .nav__logo-img { height: 42px; }
  .nav__actions .btn--sm { padding: var(--space-2); font-size: 0.6875rem; }
  .hero__visual { min-height: 260px; }
}

/* Print styles */
@media print {
  .nav, .float-whatsapp, .cta-banner { display: none; }
  body { background: white; color: black; }
}