/* ============================================================
   mobile.css
   ------------------------------------------------------------
   Loaded AFTER each page's inline <style> block (see the <link>
   tag just before </head> in every HTML file). Because of source
   order, rules in here win against the page-specific inline
   styles on equal specificity — no !important needed.

   Desktop layout is preserved verbatim: nothing in here applies
   above 1100px. Two breakpoints below that:

     ≤ 1100px  Tablet / large phone. Multi-column layouts
               collapse to 1 column; oversized typography eases
               down; the site-header wraps onto two rows so the
               brand, nav, and call button each have room.

     ≤  640px  Phone. Padding tightens further, display fonts
               drop another notch, the topbar drops its tagline /
               review pill, and the brand subtitle hides so the
               brand name + crest + call button fit on one row.

   The selectors mirror the class names used across all 10 pages.
   ============================================================ */

@media (max-width: 1100px) {

  /* ---------- Top utility bar ---------- */
  .top-bar {
    padding: 8px 18px;
    font-size: 12px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    text-align: center;
  }
  .top-bar > span { flex-basis: 100%; text-align: center; }
  .top-bar .tb-right { gap: 16px; flex-wrap: wrap; justify-content: center; }

  /* ---------- Site header (the row with crest / nav / call) ---------- */
  .site-header {
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 14px;
    row-gap: 14px;
  }
  .brand-name { font-size: 20px; letter-spacing: 0.12em; }
  .brand-sub { font-size: 10px; margin-top: 4px; }
  .brand-crest { width: 44px; height: 44px; font-size: 22px; }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    gap: 22px;
    font-size: 14px;
    flex-wrap: wrap;
  }
  .header-call {
    padding: 9px 16px;
    font-size: 14px;
  }

  /* ---------- Home: hero ---------- */
  .hero { min-height: 0; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 70px 24px 70px;
  }
  .hero-h1 { font-size: 56px; }
  .hero-lead { font-size: 18px; margin-top: 24px; }
  .hero-img-wrap { min-height: 380px; }

  /* ---------- Trust strip ---------- */
  .trust {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 28px 24px;
  }
  .trust-text { font-size: 12.5px; }

  /* ---------- Generic grids (services, why, etc.) ---------- */
  .grid-3,
  .why-grid,
  .ws-grid,
  .how-grid,
  .values-grid,
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .why-section,
  .wellness-services,
  .how-section,
  .values-section,
  .reviews-section,
  .pillars,
  .specialty,
  .final-cta,
  .wellness-cta,
  .about-cta,
  .faq-section,
  .quote-section,
  .wellness-quote {
    padding: 70px 24px;
  }
  .section { padding: 70px 24px; }

  /* ---------- Home: contact CTA + form ---------- */
  .contact-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 70px 24px;
  }
  .contact-left {
    border-left: none;
    border-top: 3px solid var(--crimson);
    padding-left: 0;
    padding-top: 24px;
  }
  .phone-num { font-size: 44px; }

  /* ---------- Home: image strip ---------- */
  .image-strip { grid-template-columns: repeat(2, 1fr); }

  /* ---------- Journeys: tour sections ---------- */
  .tour,
  .tour-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 60px 24px;
  }
  .tour-img,
  .tour .tour-img { min-height: 360px; order: -1; }
  .tour-title { font-size: 44px; }
  .tour-meta { grid-template-columns: 1fr 1fr; gap: 18px; }
  .tour-img-corner {
    width: 90px;
    height: 90px;
    bottom: -16px;
    right: -16px;
    font-size: 11px;
  }

  /* ---------- Wellness: hero + specialty ---------- */
  .wh-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 70px 24px;
  }
  .wh-h1 { font-size: 52px; }
  .wh-img-wrap { min-height: 360px; }
  .specialty {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .specialty-img-wrap { min-height: 360px; }
  .specialty-title { font-size: 40px; }

  /* ---------- About: story ---------- */
  .story {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 70px 24px;
  }
  .story-img {
    position: static;
    min-height: 360px;
  }

  /* ---------- Contact page: spread + form fields ---------- */
  .contact-spread {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 70px 24px;
  }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-card-big { padding: 32px 24px; }

  /* ---------- Page heroes ---------- */
  .page-hero { padding: 70px 24px; }
  .page-hero h1 { font-size: 56px; }
  .page-hero-inner { padding: 0; }

  /* ---------- Anchor bar (journeys) ---------- */
  .anchor-bar {
    flex-wrap: wrap;
    padding: 14px 18px;
    gap: 14px 22px;
    font-size: 13px;
    justify-content: center;
  }

  /* ---------- Generic display typography ---------- */
  .section-title { font-size: 40px; }

  /* ---------- Footer ---------- */
  .site-footer { padding: 56px 24px 24px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 640px) {

  /* ---------- Top utility bar: only essentials ---------- */
  .top-bar > span,
  .top-bar .tb-right > span { display: none; }
  .top-bar { padding: 8px 14px; }

  /* ---------- Site header: keep crest + name + call on one row ---------- */
  .site-header { padding: 12px 14px; gap: 10px; }
  .brand-name { font-size: 16px; letter-spacing: 0.08em; }
  .brand-sub { display: none; }
  .brand-crest { width: 38px; height: 38px; font-size: 18px; }
  .header-call {
    font-size: 12px;
    padding: 7px 11px;
    letter-spacing: 0.04em;
  }
  .header-call .ph-icon { font-size: 14px; }
  .site-nav {
    gap: 16px;
    font-size: 12.5px;
    letter-spacing: 0.02em;
  }
  .site-nav a { padding: 6px 1px; }

  /* ---------- Hero typography ---------- */
  .hero-inner { padding: 52px 18px; gap: 32px; }
  .hero-h1 { font-size: 40px; line-height: 1.05; }
  .hero-lead { font-size: 16px; margin-top: 20px; }
  .hero-img-wrap { min-height: 280px; }
  .hero-seal { width: 88px; height: 88px; font-size: 11px; top: 16px; right: 16px; }

  /* ---------- Wellness hero typography ---------- */
  .wh-inner { padding: 52px 18px; gap: 32px; }
  .wh-h1 { font-size: 38px; }
  .wh-img-wrap { min-height: 280px; }

  /* ---------- Trust strip stacks fully ---------- */
  .trust { grid-template-columns: 1fr; padding: 22px 18px; gap: 14px; }

  /* ---------- Pillars: single column on phone ---------- */
  .pillars-grid { grid-template-columns: 1fr; }

  /* ---------- All section padding tighter ---------- */
  .section,
  .section-narrow,
  .why-section,
  .wellness-services,
  .how-section,
  .values-section,
  .reviews-section,
  .pillars,
  .specialty,
  .contact-section,
  .contact-spread,
  .story,
  .tour,
  .tour-inner,
  .page-hero,
  .quote-section,
  .wellness-quote,
  .final-cta,
  .wellness-cta,
  .about-cta,
  .faq-section,
  .office-strip {
    padding-left: 18px;
    padding-right: 18px;
  }
  .section,
  .why-section,
  .wellness-services,
  .how-section,
  .values-section,
  .reviews-section,
  .specialty,
  .contact-section,
  .contact-spread,
  .story,
  .page-hero,
  .final-cta,
  .wellness-cta,
  .about-cta,
  .faq-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .tour, .tour-inner { padding-top: 44px; padding-bottom: 44px; }

  /* ---------- Display fonts ---------- */
  .section-title { font-size: 30px; line-height: 1.15; }
  .page-hero h1 { font-size: 40px; }
  .tour-title { font-size: 32px; }
  .specialty-title { font-size: 30px; }
  .quote-text { font-size: 26px; }
  .phone-num { font-size: 36px; letter-spacing: 0; }
  .big-phone, .final-phone, .phone { font-size: 38px !important; letter-spacing: 0.02em !important; }

  /* ---------- Buttons fit narrow screens ---------- */
  .btn {
    padding: 14px 22px;
    font-size: 14px;
  }
  .hero-ctas .btn,
  .tour-ctas .btn { flex: 1 1 auto; justify-content: center; }

  /* ---------- Image min-heights smaller on phone ---------- */
  .tour-img,
  .wh-img-wrap,
  .specialty-img-wrap,
  .story-img { min-height: 260px; }
  .tour-img-corner {
    width: 70px;
    height: 70px;
    font-size: 10px;
    bottom: -10px;
    right: -10px;
  }

  /* ---------- Forms ---------- */
  .form-card,
  .form-card-big { padding: 24px 18px; }
  .form-input,
  .form-textarea,
  .form-select { font-size: 16px; } /* prevents iOS zoom-on-focus */

  /* ---------- Footer collapses ---------- */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer { padding: 44px 18px 20px; }
  .footer-tag { max-width: none; }
}