/* 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) {
  :root {
    --section-padding: 3.25rem;
    --container-padding: 1.1rem;
  }

  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 EDITORIAL (mobile) */
  .hero-ed { padding: 6rem 0 var(--space-12); min-height: 0; }
  .hero-ed__strap {
    gap: 4px;
    font-size: 0.5625rem;
    margin-bottom: var(--space-8);
  }
  .hero-ed__strap .dot-sep { display: inline; }
  .hero-ed__word {
    font-size: clamp(5rem, 36vw, 8rem);
  }
  .hero-ed__word-meta { margin-top: var(--space-2); }
  .hero-ed__specimen { max-width: 260px; margin-top: var(--space-6); }
  .hero-ed__index a {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    padding: var(--space-3) 0;
  }
  .hero-ed__index .num { font-size: 1rem; }
  .hero-ed__index .name { font-size: 0.9375rem; }
  .hero-ed__index .name em { display: block; margin-left: 0; margin-top: 2px; font-size: 0.8125rem; }
  .hero-ed__index .price { font-size: 1rem; }
  .hero-ed__caption {
    font-size: 1.25rem;
    padding-left: var(--space-3);
  }
  .hero-ed__ctas { gap: var(--space-2); }
  .hero-ed__ctas .btn { flex: 1 1 auto; }
  .hero-ed__tags { font-size: 0.5625rem; }

  /* HERO (legacy — unused but retained for safety) */
  .hero { padding-top: 6.5rem; padding-bottom: 3rem; }
  .hero__inner { gap: var(--space-8); }
  .hero__title {
    font-size: 2.5rem;
    line-height: 1.08;
    letter-spacing: -0.025em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .hero__lead { font-size: 1rem; max-width: none; }
  .hero__actions { gap: var(--space-2); }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__eyebrow { font-size: 0.6875rem; padding: var(--space-2) var(--space-3); }

  .hero__trust { gap: var(--space-4) var(--space-5); padding-top: var(--space-5); margin-top: var(--space-6); }
  .hero__trust-value { font-size: 1.375rem; }
  .hero__trust-label { font-size: 0.625rem; }

  .hero__visual {
    aspect-ratio: auto;
    min-height: 320px;
    max-width: 400px;
  }
  .hero__card--main { padding: var(--space-6); }
  .hero__card--main h3 { font-size: 1.5rem; }
  .hero__card--main p { font-size: 0.8125rem; }
  .hero__eye-mark { top: var(--space-5); left: var(--space-5); right: var(--space-5); }
  .hero__eye-mark svg { width: 28px; height: 28px; }
  .hero__eye-mark .tag { font-size: 0.5625rem; }
  .hero__card--price {
    top: var(--space-4);
    right: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transform: rotate(3deg);
  }
  .hero__card--price .price { font-size: 2rem; }
  .hero__card--price .label { font-size: 0.5625rem; }
  .hero__card--price .strike { font-size: 0.625rem; }
  .hero__card--chip {
    left: var(--space-3);
    bottom: calc(-1 * var(--space-3));
    padding: var(--space-2) var(--space-3);
    transform: rotate(-2deg);
    gap: var(--space-2);
  }
  .hero__card--chip .label { font-size: 0.5625rem; }
  .hero__card--chip .stars { font-size: 0.875rem; }

  /* 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 — wrap into rows instead of horizontal scroll on mobile.
     User wants ZERO left/right scrolling on phone view; credential
     strip lays out as centred multi-line chips instead. */
  .marquee {
    padding: var(--space-5) 0;
    overflow-x: hidden;
  }
  .marquee .container { padding: 0 var(--container-padding); }
  .marquee__row {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    padding: 0;
    font-size: 0.6875rem;
  }
  .marquee__row span { white-space: nowrap; }

  /* PILLAR GRID */
  .pillar-grid { gap: var(--space-4); }
  .pillar__body {
    /* Extra bottom padding clears the rounded corner from the price line */
    padding: var(--space-6) var(--space-6) var(--space-8);
  }
  .pillar__title { font-size: 1.25rem; }
  .pillar__from { padding-bottom: 2px; } /* italic descender room */

  /* 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; }
  .review-long { padding: var(--space-6); gap: var(--space-5); }
  .review-long__photo { width: 76px; height: 76px; font-size: 2rem; }
  .review-long__body blockquote { font-size: 1.25rem; }

  /* 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 h3, .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 */
  .page-head { padding: 6.5rem 0 3rem; }
  .page-head__title { font-size: 2.25rem; line-height: 1.1; }
  .page-head__lead { font-size: 1rem; }
  .page-head__zh { font-size: 1.25rem; }

  /* TREATMENT MENU */
  .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 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) 0;
  }
  .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;
  }
  .menu-item__price small {
    text-align: left;
    display: inline;
    margin-left: var(--space-2);
  }
  .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 { 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); }

  /* PROCESS */
  .process__step { padding: var(--space-6); }
  .process__step::before { font-size: 2rem; top: var(--space-3); right: var(--space-4); }

  /* STAT STRIP */
  .stat-strip { padding: var(--space-6); gap: var(--space-4); }
  .stat-strip__value { font-size: 3rem; }

  /* 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;
    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);
  }

  .float-whatsapp {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 52px;
    height: 52px;
  }
  .float-whatsapp svg { width: 24px; height: 24px; }

  /* Journal feature card */
  .article-card--feature { grid-template-columns: 1fr !important; }
  .article-card--feature .article-card__body { padding: var(--space-6); }
}

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

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