/* =====================================================================
   The Morphic Field — Pro Theme / responsive.css
   Breakpoint-specific overrides. Most responsive behaviour is already
   handled inline via clamp() + @media rules in style/components/content.
   ===================================================================== */

/* ---------- Tablet-down ---------- */
@media (max-width: 900px){
  .split{ gap: var(--space-6); }
  .hero__field svg,
  .resonance-field svg{ opacity: .25; }
  .testimonial-slider,
  .advanced-participant-testimonials{ gap: 1.25rem; }
  .pricing-card--featured::before,
  .card--service-featured::before{ font-size: .6rem; padding: .3rem .55rem; }
  .transition-note__grid{ gap: 1.75rem; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px){
  :root{
    --section-y: clamp(3rem, 8vw, 4.5rem);
    --grid-gap: 1.25rem;
    --container-pad: 1.1rem;
  }
  h1{ font-size: clamp(2.1rem, 8vw, 3rem); }
  h2{ font-size: clamp(1.7rem, 5.5vw, 2.2rem); }
  h3{ font-size: clamp(1.3rem, 4.5vw, 1.6rem); }

  .btn{ padding: .8rem 1.3rem; font-size: .78rem; }
  .btn--lg{ padding: .95rem 1.6rem; font-size: .82rem; }

  .site-header__inner{ min-height: 60px; }
  body{ padding-top: 60px; }

  .nav-item--cta{ display: none; }

  .sticky-book,
  .back-to-top{ display: none; }

  .footer-bottom .container{ flex-direction: column; text-align: center; gap: .6rem; }

  .marquee__track{ font-size: 1rem; gap: 1.75rem; }

  .hero h1{ max-width: none; }
  .hero__actions,
  .hero-actions,
  .hero-cta-group{ margin-top: 1.75rem; }

  .pricing-card,
  .card--service,
  .card--blog,
  .practice-card,
  .card{ padding: 1.5rem; }
}

/* ---------- Very small ---------- */
@media (max-width: 380px){
  :root{ --container-pad: 1rem; }
  h1{ font-size: 2rem; }
}

/* ---------- Wide screens ---------- */
@media (min-width: 1440px){
  :root{ --col-max: 1280px; }
}

/* ---------- Print ---------- */
@media print{
  .site-header,
  .site-footer,
  .sticky-book,
  .back-to-top,
  .nav-overlay,
  .marquee,
  .breadcrumb,
  .announce{ display: none !important; }
  body{
    background: #fff;
    color: #111;
    padding-top: 0;
  }
  a{ color: #111; text-decoration: underline; }
  .section{ padding-top: 1.5rem; padding-bottom: 1.5rem; page-break-inside: avoid; }
  .card, .pricing-card, .card--service, .card--blog{
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #999;
  }
}