/* ============================================================
   odNOVA — responsive.css
   Breakpoints transcribed 1:1 from v15.
   - 1121px+  : mobile menu can never show
   - <=1120px : nav collapses to hamburger, hero scales down
   - <=860px  : single-column layout, tighter section padding
   The !important flags are kept from the source to guarantee
   these override the base declarations regardless of order.
   ============================================================ */

@media (min-width: 1121px) {
  #mobileMenu { display: none !important; }
}

@media (max-width: 1120px) {
  .reviews-ghost { font-size: 180px; right: 24px; } /* proportional — full mark visible */
  #navLinks { display: none; }
  #hamburger { display: flex; }
  #credsDesktop { display: none !important; }
  #credsMobile { display: block !important; }
  #heroInner { padding: 30px 26px 44px !important; }
  #heroNav { padding: 20px 26px !important; }
  #announce { font-size: 11.5px !important; letter-spacing: 0.14em !important; }
  #annFull { display: none; }
  #annShort { display: inline; }
  #ctaRow { flex-direction: column; align-items: stretch !important; gap: 18px !important; }
  #primaryCta { text-align: center; }
  #credWrap { margin-top: 40px !important; padding-top: 22px !important; }
}

@media (max-width: 860px) {
  .od-sec { padding: 74px 0; min-height: auto; display: block; }
  .reviews.od-sec { padding: 84px 0; }
  .reviews-ghost { display: none; }
  .reviews-label { letter-spacing: 0.2em; }
  .approach.od-sec { padding: 84px 0; }
  .approach-grid { gap: 44px !important; }
  .approach-signature { max-width: 320px; }
  .tools-rail { grid-template-columns: 1fr; }
  .tools-rail-right { display: none; } /* left header carries the logic on mobile */
  .contact-cards { grid-template-columns: 1fr !important; }
  a.contact-value { overflow-wrap: anywhere; }
  .od-wrap { padding: 0 24px; }
  .od-grid-3 { grid-template-columns: 1fr !important; gap: 30px !important; }
  .journal-list { grid-template-columns: 1fr; gap: 0; }
  .journal-entry { padding: 24px 0 18px; }
  .journal-sign { margin-top: 26px; }
  .consult-side .consult-includes-label { margin-top: 34px; }
  .clinician-vmark { font-size: 44px; top: 14px; }
  .ci-rule { margin: 22px auto 26px; }
  .od-grid-2 { grid-template-columns: 1fr !important; }
  .od-h2 { font-size: 32px !important; }
  .od-close-h { font-size: 40px !important; }
  .od-foot { grid-template-columns: 1fr 1fr !important; }
  .od-tool-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 16px 0 !important; }
  .od-tool-row p { max-width: none !important; font-size: 15px !important; line-height: 1.55 !important; }
  .principles-quad { grid-template-columns: 1fr; gap: 10px; }
  .principle-block { min-height: 0; padding: 30px 26px 34px; }
  .pillars-foot { margin-top: 34px; }
  .men.od-sec { padding: 74px 0 !important; }
  /* reviews: manual horizontal scroll-snap on phones — no autoplay, keyboard reachable */
  .reviews-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px !important; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
  .reviews-grid .review { flex: 0 0 84%; scroll-snap-align: start; }
  .hero-word { width: 82vw; }
  .hero-phi-note, .hero-phi-eq { display: none; } /* mobile hero is tight — remove annotations to avoid crowding */
  .hg-ghost { font-size: 160px; }
  .clinician-ghost { font-size: 88px; opacity: 0.8; }
  .notes-grid { grid-template-columns: 1fr; gap: 30px; }
  .notes.od-sec { padding: 84px 0; min-height: auto; display: block; }
  .men.od-sec { padding: 92px 0 !important; }
  .clinician.od-sec { padding: 92px 0; }
  .reflection.od-sec { padding: 90px 0 !important; }
  .reflection-body { margin-top: 32px; }
  .reflection-phi { right: -320px; bottom: -360px; width: 520px; height: 520px; }
  .reviews.od-sec { padding: 96px 0 !important; min-height: auto; display: block; }
  .reviews-head { margin-bottom: 52px; }
  .signup-panel { width: 94vw; padding: 34px 26px 30px; }
  .signup-brand { font-size: 32px; }
  .signup-title { font-size: 24px; }
  .approach-portrait { height: 300px; width: 58%; }
  .su-fields { grid-template-columns: 1fr; gap: 14px; }
  #stickyBook { top: 13px; right: 14px; padding: 9px 16px; font-size: 11.5px; }
  /* ---- mobile-first typography + forms (13/10 readability) ---- */
  .form-input, .form-select, .form-area { font-size: 16px !important; padding: 14px !important; } /* 16px prevents iOS zoom */
  .form-label { font-size: 14px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .od-tool-row p { font-size: 17px !important; }
  .footer-brand p { font-size: 16px !important; }
  .footer-col a, .footer-col span { font-size: 14.5px !important; }
  .footer-col-label { font-size: 12px !important; }
  .menu-link { font-size: 27px !important; padding: 17px 0 !important; }
  .menu-num { font-size: 11px !important; }
  .consult-p, .principles-lede, .clinician-p, .men-p, .notes-p, .enquiry-p, .results-aside p { font-size: 18.5px !important; line-height: 1.62 !important; }
  .approach-p { font-size: 19px !important; line-height: 1.62 !important; }
  .reflection-p { font-size: 18.5px !important; line-height: 1.65 !important; }
  .review p { font-size: 21px !important; line-height: 1.5 !important; }
  /* titles without the od-h2 cap need their own mobile ceiling to avoid overflow */
  .reflection-title { font-size: 33px !important; }
  .notes-title { font-size: 30px !important; }
  .enquiry-title { font-size: 30px !important; }
}

/* ---- Compact mobile footer type (approved 2026-07-26) ----
   Must live here, AFTER the 860px block, because that block's !important
   font-size rules would otherwise win over layout.css. Spacing/padding for the
   same compaction is in layout.css section 16c. <=600px only; the 601-860px
   tablet tier keeps its existing sizes. Does not touch .od-prov. */
@media (max-width: 600px) {
  .footer-brand p { font-size: 14.5px !important; line-height: 1.5 !important; }
  .footer-col a, .footer-col span { font-size: 13.5px !important; }
  .footer-col-label { font-size: 11px !important; }
}

/* Compact-footer type, pass 2 (2026-07-27). Must live here, after the 860px
   block, for the same !important-ordering reason as the block above.
   Smaller but legible: no nav link below 13px, no label below 10.5px, and the
   colours are unchanged so the audited 6.79-6.87:1 contrast is preserved. */
@media (max-width: 600px) {
  .footer-brand p { font-size: 13px !important; line-height: 1.45 !important; }
  .footer-col a, .footer-col span { font-size: 13px !important; }
  .footer-col-label { font-size: 10.5px !important; }
  .footer-tag { font-size: 10px !important; }
}