/* ============================================================================
   vitalitynhc.com — responsive.css
   Synthesized from 8 viewport audits (iPhone 390 / iPad portrait 768 /
   iPad landscape 1024) of every live page, 2026-07-21.

   PURPOSE
   Fix tablet/phone layout: restore content columns the page builder hid below
   1200px (vc_hidden-md/sm/xs with no mobile alternates), restore the banner
   hero title sitewide and paint parallax rows as static cover images, extend
   the hamburger nav to tablet, stack WPBakery columns in the exact-768 hybrid
   zone, and normalize the phone spacing/type scale.

   DESKTOP-SAFETY INVARIANT
   Every rule lives inside a screen-only @media block that is either capped at
   max-width 1024px, or capped at max-width 1199px AND gated on a touch primary
   pointer (pointer: coarse). A mouse-driven desktop browser reports
   pointer: fine at every window width, so it can never match the wider branch.
   Precisely: no rule here can reach a mouse-driven browser ABOVE 1024px, which
   is what "desktop is final" means. A desktop window narrowed to <= 1024px does
   match the tiers — that is intended (it is a tablet-sized viewport). Do not
   read the invariant as "width does not matter" and raise a cap on a branch
   that is not pointer-gated; the 1199px cap is legal ONLY because of the
   (pointer: coarse) gate beside it.
   (Blocks are screen-only so printing from desktop keeps the desktop layout.)

   WHY THE TOUCH BRANCH EXISTS
   Most modern iPads in landscape are wider than 1024 CSS px — iPad mini 1133,
   iPad Air / 10th-gen 1180, iPad Pro 11" 1194 — and WPBakery hides vc_hidden-md
   columns all the way to 1199px. Width-only tiers therefore left real iPads
   showing the amputated desktop layout (verified: gut-health at 1180px rendered
   2366px tall with all 16 hidden columns still invisible). iPad Pro 12.9"
   landscape (1366px) needs nothing: WPBakery shows md content at >= 1200px.

   TIER MAP (file order; later tiers override earlier at equal specificity)
     1. <= 1024px, or <= 1199px on touch                  — all mobile/tablet
     2. 769-1024px, or 769-1199px on touch                — tablet only
     3. @media (max-width: 768px)                         — phone + 768 hybrid
     4. @media (max-width: 480px)                         — small phones

   SPACING SCALE  tablet section padding 40px / phone 28px (spacers 12px in
   compact CTA strips). TYPE SCALE (phone) follows the existing style.css ramp
   (h1-hero 38/28, h3-medium 24/20) and adds the steps style.css skipped:
   quote-crimson 30px @768 / 26px @480.

   !important is used only where required: js_composer vc_hidden-* rules and
   WPBakery vc_custom_* rules are !important; per-page component CSS and
   menu.css print after theme styles; inline style="" attributes.
   ========================================================================= */

/* ==========================================================================
   TIER 1 — ALL MOBILE + TABLET (<= 1024px, or <= 1199px on a touch device)
   ========================================================================= */
@media screen and (max-width: 1024px),
       screen and (max-width: 1199px) and (pointer: coarse) {

  /* --- Page shell: nothing may scroll sideways on a touch device ---------
     REGRESSION. Every page became horizontally scrollable at mobile/tablet
     widths (document width vs viewport: new-patients 722/390, 1421/768,
     1323/1024, 1528/1180 — the worst; about-our-skin-clinic 571/390 up to
     1598/1180; home, holistic-nutrition, hormone-health and weight-management
     show it too). Neither the before set nor round 1 has a single page wider
     than its viewport. Below the first screenful the exposed strip paints
     nothing, so the overflowing box could not be named from the artefacts and
     this is a defensive clip, not a targeted fix — identify the real culprit
     on the live page with
     [...document.querySelectorAll('*')].filter(e => e.getBoundingClientRect().right > innerWidth + 1)
     and this block can then be replaced.
     Safe here: no rule in style.css or menu.css uses position:sticky
     (grepped, zero hits sitewide), js_composer full-width rows are sized to
     exactly the viewport width so they are not cut, and the parked off-canvas
     .mobile-menu is position:fixed, which html/body overflow does not clip. */
  html,
  body {
    overflow-x: hidden;
  }

  /* --- Content restore: wellness / service template families -------------
     These pages hide their main content columns with vc_hidden-md/sm/xs and
     ship no mobile alternates. Restore every hidden column except those in
     banner rows (all banner rows carry vc_row-o-full-height). Page-scoped:
     microneedling (real vc_hidden-lg/xs pairs) must NOT be unhidden.
     Pages: enviromental-detox 24, gut-health 586, holistic-nutrition 18,
     hormone-health 20, lyme 617, mold 619, weight-mgmt 32, lab-testing 16,
     ozone 30, acupuncture-cupping 37, sauna-red-light 39, family-wellness 14 */
  :is(.page-id-24, .page-id-586, .page-id-18, .page-id-20,
      .page-id-617, .page-id-619, .page-id-32, .page-id-16, .page-id-30,
      .page-id-37, .page-id-39, .page-id-14)
    .wpb-content-wrapper
    .vc_row:not(.vc_row-o-full-height)
    > .wpb_column:is(.vc_hidden-md, .vc_hidden-sm, .vc_hidden-xs) {
    display: block !important;
    opacity: 1 !important; /* columns carry wpb_animate_when_almost_visible */
  }

  /* --- Banner hero: title column restore -------------------------------
     On every service page the banner row's only column carries
     vc_hidden-md/sm/xs, so the page-title H1 (the cream pill) vanishes below
     1200px and the hero reads as an anonymous photo band. There is no mobile
     alternate: wds_render_parallax_breadcrumb() (functions.php:367) returns
     early unless is_singular('post') || is_home() || is_category() ||
     is_tag() || is_tax(), so pages never get a breadcrumb strip and this H1
     is the only title markup that exists. Every page already ships its own
     `.hero-heading span` pill CSS, so the restored title is styled exactly as
     on desktop. Verified against the identical markup on gut-health 586,
     lyme 617, acupuncture 37, enviromental-detox 24, hormone-health 20,
     ozone 30, lab-testing 16, sauna 39, weight-mgmt 32, mold 619,
     holistic-nutrition 18, injectables 47, skin-analysis 62, pdo-threads 55,
     subnovii 53, hair-restoration 2839, vitamin-infusion 82,
     vitamin-injections 2436 and about 107 (xs only).
     page-id-49 (microneedling) is the one exclusion: it is the only page with
     a second, vc_hidden-lg banner row, and from 769 to 1199 that row does
     already supply the mobile title, so unhiding here would print
     "MICRONEEDLING" twice. Do NOT remove the :not() guard.
     The guard's premise never actually held: it assumed 49's vc_hidden-lg
     alternate row was an acceptable stand-in from 769 to 1199, but that row
     carries a borrowed holistic-nutrition-title.jpg — a photo of vegetables in
     mesh grocery bags, on a skin-clinic page — and it does not replace the
     real hero, it stacks BELOW it, so 1024 and 1180 rendered two full banner
     bands, the first of them anonymous. It also stops holding outright at
     <= 768: BOTH microneedling banner rows carry `Parallax-Effect`, so its own
     inline `@media (max-width:767px){ .Parallax-Effect{display:none !important} }`
     deletes the alternate row too and this exclusion would leave the page with
     no hero and no H1 at all. The page-49 block below resolves both cases
     locally — it unhides this very column on 49 only and drops the alternate
     row across the whole restored range — so exactly one title prints at 390,
     768, 1024 and 1180, on the page's own artwork, and the :not() guard on the
     generic rule can stay exactly as it is. Do NOT remove the :not() guard.
     family-wellness 14 and lab-testing 16 never hid their column and are the
     design reference for the restored result. ---------------------------- */
  body:not(.page-id-49) .entry-content .vc_row.vc_row-o-full-height
    > .wpb_column:is(.vc_hidden-md, .vc_hidden-sm, .vc_hidden-xs) {
    display: flex !important; /* matches js_composer .vc_row-flex > .wpb_column */
    opacity: 1 !important;    /* banner columns carry wpb_animate_when_almost_visible */
  }

  /* --- Banner hero, microneedling 49: the two-banner exception ------------
     49 is the only page with two banner rows and both carry `Parallax-Effect`:
       vc_custom_1776517873693 — vc_row-o-full-height, the real hero
         (microneedling-title.png), title column vc_hidden-md/sm/xs;
       vc_custom_1765440589587 — the vc_hidden-lg alternate, on the borrowed
         holistic-nutrition-title.jpg background.
     Unhide the real hero's column and retire the alternate everywhere this
     file reaches. (0,7,0) and (0,5,0) respectively, both over !important page
     and js_composer rules of (0,1,0). At <= 768 the page's own inline CSS has
     already deleted both rows; the Tier 3 restore brings the full-height one
     back and these two rules then apply to it unchanged. ----------------- */
  .page-id-49 .entry-content .vc_row.vc_row-o-full-height.Parallax-Effect
    > .wpb_column:is(.vc_hidden-md, .vc_hidden-sm, .vc_hidden-xs) {
    display: flex !important; /* matches js_composer .vc_row-flex > .wpb_column */
    opacity: 1 !important;
  }
  .page-id-49 .entry-content .vc_row.Parallax-Effect.vc_custom_1765440589587 {
    display: none !important;
  }

  /* --- Banner hero: 180px vc_custom side padding is unusable below 1025px.
         Eight title columns set padding:180px on all four sides (gut-health
         1762458546992, lyme 1762284082196, hormone-health 1762881906770,
         ozone 1762885313879, enviromental-detox 1762886678053, mold
         1762280961446, sauna 1768205639185, lab-testing 1758557104027),
         which leaves 408px of title width at 768. Ships with the unhide.
         Tier 3 tightens this to the 20px phone gutter ---------------------- */
  .entry-content .vc_row.vc_row-o-full-height > .wpb_column > .vc_column-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* --- Restored "Why X Matters" bands: tablet section padding (40px) ----- */
  .entry-content .wpb_column[class*="vc_col-sm-2/5"] > .vc_column-inner,
  .entry-content .wpb_column[class*="vc_col-sm-3/5"] > .vc_column-inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* --- Page-title pill: make the cream pill one box instead of per-line
         fragments ---------------------------------------------------------
     All 23 hero pages ship the identical markup (`.hero-heading` >
     `h1.font-crimson-bold.h1-hero` > a single `<span>`) and the identical pill
     CSS (`.hero-heading span { background: rgba(255,255,255,.85);
     padding: 0.5em 1.25em; border-radius: 12px }`). The span is inline, so
     its vertical padding does not expand the line box: on `.h1-hero`, whose
     line-height is 1.2 (style.css:621), each fragment paints ~2.15em tall on a
     1.2em rhythm. A title that wraps therefore stacks fragments that overlap by
     roughly 0.95em — the 12px corners cut into each other and the 0.85-alpha
     whites compound to near-opaque in the overlap. `box-decoration-break:
     clone` only ever fixed the horizontal half of that (full padding and
     rounding on both fragments); it cannot move them apart vertically.
     `display: inline-block` removes the fragmentation itself: the pill becomes
     one atomic shrink-to-fit box whose height includes its padding, the text
     wraps inside it at the authored 1.2 rhythm, and all four corners round
     once. It is what enviromental-detox's own author already did below 767
     (pages-css/enviromental-detox-inline.css:357) — this generalises that to
     every hero at every width the titles can wrap, which is the whole restored
     range, not just phones: at 769 the content box is ~690px and
     "SAUNA + RED LIGHT THERAPY" needs ~700px at the 45px h1-hero step.
     Preferred over bumping line-height, which would have to be ~2.3 to clear
     the pill and would then blow the same gap between the lines *inside*
     detox's already-inline-block pill.
     Titles that wrap inside the 350px phone content box: sauna-red-light 39
     (and it is text-align:left, so the ragged overlap was most obvious there),
     vitamin-infusion 82, vitamin-injections 2436, enviromental-detox 24, and
     borderline weight-management 32 / hair-restoration 2839.
     Longest unbreakable word sitewide is "ENVIRONMENTAL": ~296px with padding
     at the 28px step, so the box never overflows the 350px gutter. Only
     new-patients 113 puts the pill on `.hero-heading` itself rather than the
     span; there this rule is a visual no-op. -------------------------------- */
  .hero-heading span {
    display: inline-block;
  }

  /* --- Blog/breadcrumb banner: 18%-width panel collapses to a sliver;
         let it shrink-to-fit with a sane cap ------------------------------ */
  .breadcrumb-hero .breadcrumb-title-panel {
    width: auto;
    max-width: min(92%, 600px);
    min-width: 180px;
    padding: 20px 28px 18px;
  }
  /* style.css:1419 declares cover, but the office photo still tiles at tablet
     (a repeat of its top edge fills the last ~15px of the hero). This
     <section> is emitted by wds_render_parallax_breadcrumb() OUTSIDE
     .entry-content, so the sitewide parallax rule below cannot reach it.
     On the single-post template the same markup also collapses to a ~80px
     sliver at every viewport (measured first non-white run at x=5: 92px at
     1024, 79px at 1180, 77px at 768, 79px at 390) and the title panel falls
     out of it onto plain white, while the identical section on the blog
     listing gives a correct 380px band at 1024. style.css:1412 already
     declares min-height:500px / display:flex / align-items:center on this
     exact selector, so something is beating it — an author !important
     declaration outranks a normal inline style, so re-asserting the band with
     !important holds whatever that is. background-image is restated from the
     same custom property style.css:1418 uses; the property is set inline on
     every instance the renderer emits, so it can never resolve to none.
     NOTE: the Tier 2 min-height:380px is !important for the same reason —
     without it tablets would drop back to the 300px pinned here. */
  section.breadcrumb-hero {
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
    background-image: var(--breadcrumb-bg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 30% !important;
  }
  section.breadcrumb-hero .breadcrumb-hero-inner {
    width: 100%;
  }

  /* --- Fixed-height Vimeo embeds (injectables, microneedling) letterbox on
         narrow screens; keep the player proportional. Scoped to raw-HTML
         embeds only: the skin-clinic video is a wpb_video_wrapper
         intrinsic-ratio embed (absolutely-positioned iframe) that this rule
         would break out of its wrapper ------------------------------------ */
  .wpb_raw_html iframe[src*="player.vimeo.com"] {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  /* --- Parallax rows paint as a static cover image at touch widths -------
     js_composer sizes .vc_parallax-inner to 130-180% of the row (from
     data-vc-parallax) and translates it with skrollr. At desktop 1440 the
     width-fit height happens to land within a few px of the row height, which
     is why this survived; below 1025 the inner paints only image-width/aspect
     pixels and the remainder shows either the row's own vc_custom background
     at a DIFFERENT scale (hard duplicate seam: lyme y~705/y~660, acupuncture
     y~555, injectables y~735) or nothing at all (injectables' dead white band
     — vc_custom_1776609654474 sets no background-image). Pinning the inner to
     the row box and dropping the translate yields exactly the authored cover
     crop; parallax motion is jank on touch anyway.
     0,3,0 beats every page-inline `.parallax-effect .vc_parallax-inner
     {background-size:100%!important}` (0,2,0) on the nine pages that ship one,
     and !important beats skrollr's inline transform/top. This also supersedes
     the old hair-restoration-only rule for .testimonial-hero, whose page CSS
     forced background-size:100% auto and left white-on-white text. --------- */
  .entry-content .vc_parallax .vc_parallax-inner {
    top: 0 !important;
    height: 100% !important;
    transform: none !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  /* Belt and braces: the row's own vc_custom background, which is what shows
     on the pages where the photo comes from the row rather than
     data-vc-parallax-image (several set background-repeat:-repeat, an invalid
     value, so the declaration is dropped by the parser). */
  .entry-content .vc_row.vc_row-o-full-height {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* --- Rows where the normalization above does not resolve: paint the row,
         retire the inner --------------------------------------------------
     Five rows still do not produce a deterministic band. skrollr's injected
     .vc_parallax-inner lands at roughly 40% of the row (hormone-health hero
     and its Dr. Judy quote band at 1024 — hero photo cut at y525 with the pill
     straddling the edge, quote artwork cut at y528 with the attribution
     stranded on white), at ~70px (skin-clinic hero from 768 to 1180, white
     outright at 1180), or paints nothing at all (holistic-nutrition, one of
     only two banner rows sitewide with NO data-vc-parallax-image, so
     js_composer builds an empty inner: at 1180 the whole ~590px band is white
     with the title pill floating in it, at 768 the photo stops at y635 and the
     pill sits below it). Taking the JS-sized element out of the equation is
     the reliable fix: paint the authored photo on the row itself at cover and
     drop the inner. The url is restated because three of these rows declare no
     background-image of their own (the photo exists only as
     data-vc-parallax-image); it is the same asset the page CSS references.
     Contact 1782066693457 KEEPS its inner — that band is correct at 1024 and
     390 and only needs the row background as a backstop for the short inner at
     1180, where the photo stopped at y=448 and the "Contact Us" pill ran to
     y~461, visibly hanging off the bottom edge. It is not
     .vc_row-o-full-height, so the belt-and-braces rule above never reached it.
     Row selectors are (0,4,0) over the vc_custom rules' (0,1,0); the inner
     selectors are (0,5,0) over the page-inline `.parallax-effect
     .vc_parallax-inner {background-size:100% !important}` at (0,2,0). ------ */
  .page-id-18 .entry-content .vc_row.vc_custom_1768136001305,
  .page-id-20 .entry-content .vc_row.vc_custom_1768139323095,
  .page-id-20 .entry-content .vc_row.vc_custom_1779557023957,
  .page-id-66 .entry-content .vc_row.vc_custom_1773868603745,
  .entry-content .vc_row.vc_custom_1782066693457 {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  .page-id-18 .entry-content .vc_row.vc_custom_1768136001305 {
    background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2025/12/holistic-nutrition-title.jpg") !important;
  }
  .page-id-20 .entry-content .vc_row.vc_custom_1768139323095 {
    background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2025/10/hormone-health-title.jpg") !important;
  }
  .page-id-20 .entry-content .vc_row.vc_custom_1779557023957 {
    background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2026/05/Quote-Hormone-Health.png") !important;
  }
  .page-id-66 .entry-content .vc_row.vc_custom_1773868603745 {
    background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2025/09/About-Our-Skin-Clinic-Background-Vitality-Wellness-Clinic1.png") !important;
  }
  .entry-content .vc_row.vc_custom_1782066693457 {
    background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2025/09/Contact-Us-Office-Vitality-Wellness-Clinic.png") !important;
  }
  .page-id-18 .entry-content .vc_row.vc_custom_1768136001305 > .vc_parallax-inner,
  .page-id-20 .entry-content .vc_row.vc_custom_1768139323095 > .vc_parallax-inner,
  .page-id-20 .entry-content .vc_row.vc_custom_1779557023957 > .vc_parallax-inner,
  .page-id-66 .entry-content .vc_row.vc_custom_1773868603745 > .vc_parallax-inner {
    display: none !important;
  }

  /* --- ozone-therapy Dr. Judy quote band: the restored column renders dark
         navy text over the dark rubber-plant leaf. The photo was composed for
         the wide desktop crop (text on the light left third); below 1025 the
         cover crop pushes the leaf behind the words. Give the column its own
         cream wash rather than tinting the whole photo.
         REGRESSION FIX: the round-2 selector was `.wpb_column > .vc_column-inner`,
         which reached BOTH of the row's vc_col-sm-6 columns — and the second
         one is empty. It therefore painted a second gradient, opening at 0.92
         alpha, straight across the middle of the rubber-plant photo: a
         translucent rectangle with a hard vertical edge and an 8px corner that
         read as a render artifact at 1024 and 1180, and as a banded rectangle
         over the leaves at 390. Scoped to the column that actually holds the
         quote by its own vc_custom class (0,4,0) rather than by position:
         js_composer injects .vc_parallax-inner as a sibling of the columns at
         runtime, so :first-child / :last-child depend on whether it prepends
         or appends, while the inner's vc_custom id does not. It occurs exactly
         once in the markup (verified). ------------------------------------ */
  /* SUPERSEDED 2026-07-22 — removed at the owner's request.
     The owner rejected the cream wash: a 0.92-alpha panel with a hard edge and
     an 8px corner reads as a box pasted onto the photo. */

  /* --- ozone-therapy "What To Expect" journey cards: the 345px min-height
         was sized for four narrow 235px desktop columns. In the 2x2 tablet
         layout (and the single column at 768) each card is about twice as
         wide, the copy fills ~150px, and every card carries 180-200px of
         empty white below its last bullet. The page's own stylesheet already
         releases this (min-height:0) but only inside @media (max-width:600px),
         which is why 390 is right and 601-1199 was never covered. The grid's
         align-items:stretch keeps each row of cards equal without it -------- */
  .page-id-30 .vnhc-ozone-journey .vnhc-ozone-content {
    min-height: 0 !important; /* page CSS is 0,2,0; this is 0,3,0 */
  }

  /* --- acupuncture-cupping Dr. Judy quote band: white quote type sits on the
         bright sand half of the parallax photo. Tint the photo in brand Agave
         (#738d94) so the type keeps contrast wherever the column lands. The
         pseudo lives inside .vc_parallax-inner (js_composer pins it to
         z-index 0) so the columns (z-index 1) still paint above it -------- */
  /* SUPERSEDED 2026-07-22 — removed at the owner's request, see the note below:
     tinting the whole photo hid the artwork. The glow is keyed to this band's
     own sampled hue instead. */

  /* QUOTE BANDS — INTENTIONALLY UNTREATED (owner decision, 2026-07-22)
     Every overlay on the quote bands has been removed at the owner's request:
     the cream/graded scrims (they read as boxes pasted on the photo), the white
     text halos, and the hue-matched glow that briefly replaced them ("looks
     messy"). Quotes now render exactly as authored, straight over the artwork,
     at every width.

     Do not reintroduce a scrim, wash, halo or glow here without asking. If a
     specific band is ever hard to read on a phone, the fix the owner has not
     ruled out is a different crop or a different photo, not an overlay. ---- */
}

/* ==========================================================================
   TIER 2 — TABLET ONLY (>768-1024px, or >768-1199px on a touch device)
   The lower bound is 768.02px, not 769px: browsers evaluate media widths
   fractionally, and display scaling (125%/150%) or zoom routinely yields a
   non-integer viewport. A 769px floor against Tier 3's 768px ceiling left the
   open interval (768, 769) matching neither tier — a viewport landing there
   would have shown the desktop hover nav with no column stacking.
   ========================================================================= */
@media screen and (min-width: 768.02px) and (max-width: 1024px),
       screen and (min-width: 768.02px) and (max-width: 1199px) and (pointer: coarse) {

  /* --- Navigation: hover dropdowns are unusable on iPad; extend the
         hamburger (menu.css only activates it <= 768). !important because
         menu.css enqueues after style.css and load order is not guaranteed */
  .nav-toggle {
    display: block !important;
    position: relative;
    z-index: 10001;
  }
  .site-nav.luxury-nav {
    display: none !important;
  }
  /* Wider, more padded slide-in panel at tablet (phone keeps 80%/350px) */
  .mobile-menu {
    width: 420px !important;
    max-width: 60vw !important;
    padding: 2.5rem 2rem !important;
  }

  /* --- Banner hero: give the short full-height rows a floor ---------------
     REGRESSION. At 1024x768 js_composer's full-height sizing lands the banner
     row at ~109px on lyme-disease and ~297px on lab-testing, while the title
     column carries 180px of vc_custom padding top and bottom (~412px of
     content) and simply overflows it. Before the project the parallax inner
     painted at 150% of the row and accidentally covered the shortfall (with
     the documented duplicate seam); Tier 1's `.vc_parallax-inner{height:100%}`
     pin removed that overshoot and exposed the bare row, so 1024 now opens on
     a ~110px sliver of photo with the cream title pill orphaned on white
     below it. The phone tier already solves this with the same 62vh floor,
     which is why 768 and 390 are correct.
     Applied sitewide, mirroring the Tier 3 floor, because the same short-row
     misrender turned up on four more families in the same shot set: at 1024
     injectables 47 opens on an ~80px sliver with the pill orphaned on white;
     at 1180 sauna 39 (278px band, pill straddling the bottom edge), hair-
     restoration 2839 (174px band, pill fully on white) and vitamin-injections
     2436 (pill's bottom ~10px on white). Those are short rows, not short
     parallax inners — the pill is only visible at 1180 because the Tier 1
     vc_hidden-md restore is live, so Tier 1's
     `.vc_parallax-inner{height:100%}` pin is painting the photo at cover over
     the whole row in the same capture. js_composer's full-height JS just hands
     these rows a bad height at some page/width combinations.
     Unscoping is safe: min-height can only raise a box, so it is inert wherever
     the full-height JS measures correctly (verified — every
     .vc_row-o-full-height sitewide has exactly one column, and lyme, detox,
     gut-health, mold, ozone and weight-management already render >= 536px at
     1024 and >= 588px at 1180). ------------------------------------------ */
  .entry-content .vc_row.vc_row-o-full-height {
    min-height: 62vh !important;
  }

  /* --- Breadcrumb banner: trim desktop 500px hero to tablet proportions.
         !important is required: Tier 1 now pins min-height:300px !important on
         the same selector to hold the band against whatever was collapsing it
         to ~80px, and a normal declaration here would lose to it ----------- */
  section.breadcrumb-hero {
    min-height: 380px !important;
  }
  .breadcrumb-hero .breadcrumb-hero-inner {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .breadcrumb-hero .breadcrumb-title {
    font-size: 38px;
  }

  /* --- Blog listing: drop the 300px sidebar below content at 981-1024 too
         (values mirror the existing <= 980 rules in style.css) ------------ */
  body.blog .blog-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  body.blog .blog-sidebar {
    /* 360px left ~330px of empty gutter either side once stacked on a 1024
       canvas, making the Get More Vitality / CATEGORIES cards read as
       undersized. Phone keeps the style.css <= 980 behaviour. */
    max-width: 560px;
    margin: 0 auto;
  }
  /* REGRESSION: widening the card to 560px left the signup intro clamped to
     the 220px measure style.css:2181 authored for the 300px desktop sidebar,
     so "Sign up here to get tips and vital information to get healthy and live
     a vibrant life!" broke into five short ragged lines floating in a card
     more than twice that wide. 420px gives three lines at 1024 and 1180 and is
     inert at 1440 and 390, where the sidebar is not widened. (0,3,2) beats
     style.css's (0,2,1). */
  body.blog .blog-sidebar .blog-newsletter-widget p {
    max-width: 420px;
  }

  /* --- Contact banner: widen the middle title column so "Contact Us"
         stays on one line (side columns are empty spacers) ---------------- */
  .vc_custom_1782066693457 > .wpb_column.vc_col-sm-4:has(.hero-heading) {
    width: 50%;
  }
  .vc_custom_1782066693457 > .wpb_column.vc_col-sm-4:not(:has(.hero-heading)) {
    width: 25%;
  }

  /* --- IV pages: 5-item icon grids collapse to 2 columns at <= 1024,
         orphaning the 5th item; center it across both columns.
         (.vwc-unique-grid on infusion, .vwc-benefits-rep on injections;
         both inline CSS blocks are !important-heavy)
         NESTED @media (max-width: 1024px) is load-bearing, do not flatten it:
         the pages only go 2-up inside their own `@media (max-width: 1024px)`
         (pages-css/vitamin-infusion-therapy-inline.css:3126 and
         pages-css/vitamin-injections-inline.css:1721). Tier 2's second branch
         runs to 1199px on touch, and across 1025-1199 (iPad mini 1133, iPad
         Air 1180, iPad Pro 11" 1194) the base
         `grid-template-columns: repeat(5, minmax(0, 1fr)) !important` is still
         in force with exactly 5 items in it — no orphan to fix. Applying
         `grid-column: 1 / -1` there would instead CREATE one: 4 cards plus an
         empty 5th cell on row 1, and a lone 360px card on a second row that
         `.vwc-unique-item { min-height: 300px !important }` (also still live
         above 1024) blows up to 300px tall. Combined with Tier 2's
         min-width:769px this nested block resolves to 769-1024 exactly. ---- */
  @media (max-width: 1024px) {
    .vwc-unique-grid > .vwc-unique-item:nth-child(5),
    .vwc-benefits-rep > .vwc-benefits-rep-card:nth-child(5) {
      grid-column: 1 / -1 !important;
      justify-self: center !important;
      max-width: 360px !important;
    }
  }

  /* --- ozone-therapy "What To Expect" journey: the page deliberately keeps
         all four steps inline below 1100px behind a 1040px min-width track
         with overflow-x:auto, so at 1024 the AFTERCARE card is clipped with
         no scroll affordance. Go 2x2 and drop the connector line (it only
         reads across a single row). The page's <style> prints after this file
         and uses !important on grid-template-columns, so every declaration
         needs !important plus the .page-id-30 prefix to out-specify
         `.vnhc-ozone-journey .vnhc-ozone-grid` (0,2,0) ------------------- */
  .page-id-30 .vnhc-ozone-journey {
    overflow-x: visible !important;
  }
  .page-id-30 .vnhc-ozone-journey .vnhc-ozone-track {
    min-width: 0 !important;
  }
  .page-id-30 .vnhc-ozone-journey .vnhc-ozone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 48px !important;
  }
  .page-id-30 .vnhc-ozone-line {
    display: none !important;
  }

  /* --- Home: testimonial carousel arrows are absolutely positioned at
         left/right -60px against a near-full-bleed carousel, so at 1024 they
         graze the viewport edges and clip outright once a scrollbar is
         visible. Pad the carousel and pull them inside. (<= 768 the Tier 3
         rule hides them and grows the dots instead.)
         REGRESSION FIX: round 2 padded .testimonial-carousel, but .carousel-btn
         is position:absolute against .carousel-container — the in-body <style>
         gives that child `display:flex; position:relative` — and left/right:0
         resolve against THAT element's padding box, i.e. the card edge, not
         the new gutter. The chevrons landed on top of the first and third
         testimonials and struck through their copy (live rects at 1024: prev
         x=107.2 w=50 over card1 at x=107.2; at 1180: prev x=115 over card1 at
         x=115), which is strictly worse than the pre-project x=15 / x=1009.
         Moving the padding onto .carousel-container puts left/right:0 inside
         the gutter, where the arrows belong. --------------------------- */
  .testimonial-carousel .carousel-container {
    padding-left: 56px;
    padding-right: 56px;
  }
  .testimonial-carousel .carousel-btn.prev {
    left: 0 !important; /* in-body <style> prints after stylesheets */
  }
  .testimonial-carousel .carousel-btn.next {
    right: 0 !important;
  }
}

/* ==========================================================================
   TIER 3 — PHONE + EXACT-768 HYBRID ZONE (<= 768px)
   ========================================================================= */
@media screen and (max-width: 768px) {

  /* --- Content restore: phone-only amputations (vc_hidden-xs on content
         columns). Banner rows excluded via vc_row-o-full-height guard.
         Pages: about 107, about-our-skin-clinic 66, new-patients 113,
         testimonials 98, home 8 ------------------------------------------ */
  :is(.page-id-107, .page-id-66, .page-id-113, .page-id-98, .page-id-8)
    .wpb-content-wrapper
    .vc_row:not(.vc_row-o-full-height)
    > .wpb_column.vc_hidden-xs {
    display: block !important;
    opacity: 1 !important;
  }

  /* --- Banner hero: restore the row the page CSS deletes below 767px ------
     Sixteen pages both ship `@media (max-width:767px){ .parallax-effect
     {display:none !important} }` in their own inline <style> AND carry the
     matching class, on the banner row and nowhere else. They do NOT agree on
     how that class is spelled:
       lowercase `.parallax-effect` in both the stylesheet and the class
         attribute — lyme, enviromental-detox, hormone-health,
         weight-management, lab-testing, ozone, sauna, acupuncture
         (mold-toxicity is the same case with `.parallax-sizing`);
       capitalised `.Parallax-Effect` in both — hair-restoration 2839,
         holistic-nutrition 18, injectables 47, microneedling 49,
         pdo-threads 55, skin-analysis 62, subnovii 53.
     Class selectors are case-sensitive in standards-mode documents and every
     page is <!DOCTYPE html>, so the capitalised spelling needs its own branch:
     a lowercase-only restore never matches those seven, their banners stay
     display:none at phone, and the Tier 1 title unhide is a silent no-op there
     because the whole row is gone. Result without both branches: at 390 the
     hero band and the page title are both absent and the page opens straight
     into body copy under the nav. The page guard is max-width:767, so 768
     still shows the banner — restoring the row is what makes every family
     match at 1024 / 768 / 390.
     Already fine, and unchanged by this rule: gut-health 586 and
     family-wellness 14 ship a hide rule keyed to a class that is on no element
     (`.gut-health-row` at pages-css/gut-health-inline.css:329 and
     pages-css/lab-testing-inline.css:417; `.parallax-sizing` at
     pages-css/family-wellness-inline.css:59), so their banners already survive
     and are the 390 design reference. vitamin-infusion 82 and
     vitamin-injections 2436 carry `Parallax-Effect` in markup but hide
     `.parallax-effect` — the other half of the same typo — so they survive
     too; the added branch reaches them but is inert, since min-height cannot
     shrink a row js_composer has already sized to the viewport.
     `.entry-content .vc_row.vc_row-o-full-height.parallax-effect` = (0,4,0)
     vs the page rule's `.parallax-effect` = (0,1,0); both are !important.
     Scoped to .vc_row-o-full-height so the class cannot catch anything else,
     and the breadcrumb-hero <section> (also .parallax-effect) is emitted
     outside .entry-content so it is untouched. Exactly one element carries the
     class per page everywhere except microneedling, which has two — see the
     page-49 block below.
     min-height is pinned because js_composer's full-height JS reads
     offset().top of a display:none row as 0 and would hand the restored row a
     full 100vh; 62vh reproduces the 521-524px band gut-health and
     family-wellness already get at 390. ---------------------------------- */
  .entry-content .vc_row.vc_row-o-full-height.parallax-effect,
  .entry-content .vc_row.vc_row-o-full-height.Parallax-Effect,
  .entry-content .vc_row.vc_row-o-full-height.parallax-sizing {
    display: flex !important;
    opacity: 1 !important;
    min-height: 62vh !important;
  }

  /* --- Banner hero, microneedling 49: the two-banner exception ------------
     49 is the only page with two banner rows and both carry `Parallax-Effect`,
     so pages-css/microneedling-inline.css:477 deletes both below 768. The row
     restore above brings back only the full-height one (the vc_hidden-lg
     alternate is not .vc_row-o-full-height); the pair of rules that unhide its
     title column and retire the alternate used to live here and now sit in
     Tier 1, because 1024 and 1180 need exactly the same treatment — they were
     rendering both bands stacked, the real hero anonymous and the alternate
     carrying the title on a borrowed vegetables photo. Nothing is needed here
     any more. ------------------------------------------------------------ */

  /* --- Banner hero: phone padding scale. Companion to the Tier 1 side-
         padding reset — 28px vertical rhythm and a 20px gutter so a two-line
         wrapped title ("VITAMIN INFUSION THERAPY" at the 28px h1-hero step)
         never overflows the 62vh band ------------------------------------ */
  .entry-content .vc_row.vc_row-o-full-height > .wpb_column > .vc_column-inner {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Hybrid-zone stacking: WPBakery keeps vc_col-sm-* side-by-side at
         exactly 768px while the mobile menu is already active. Extend the
         native <= 767 full-width stacking by one pixel, sitewide.
         EXCLUSION: about's 9-card "Meet The Vitality Team" grid is the one
         place where stacking is wrong — it turns a ~600px section into
         ~4,000px of scrolling at exactly 768. `.vc_col-sm-4.vc_hidden-xs`
         occurs only on about.html (9 hits, verified across pages/<slug>.html), and
         below 767 the exclusion is a no-op because WPBakery's vc_col-sm-*
         widths only exist inside @media (min-width:768px) -----------------  */
  .entry-content .wpb_column[class*="vc_col-sm-"]:not(.vc_col-sm-4.vc_hidden-xs) {
    float: none;
    width: 100%;
  }
  /* The exclusion above was justified on the premise that 768 stays readable,
     and it does not: the team grid ships 3-up there, each vc_col-sm-4 is 256px
     wide, and the 513px source artwork scales to a 226px image. The names and
     roles are baked into the PNGs, so "Lead Registered Nurse" / "Medical
     Assistant Clinic Manager" render at roughly 9px — unreadable on a real
     iPad in portrait (the same caption measures ~13.6px at 1180). Let the
     three card rows wrap instead of stacking: flex-basis 320px means <= 767
     still grows a single card to 100%, exactly what ships today, while 768
     wraps to 2-up at ~345px and puts the captions back around 14px. (0,5,0)
     over js_composer's (0,1,0), so no !important is needed. */
  .page-id-107 .entry-content .vc_row:has(> .wpb_column.vc_col-sm-4.vc_hidden-xs) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* The 360px cap is load-bearing, not a safety net. Each of the three rows
     holds 3 cards; at 768 the ~750px track fits two 320px bases per line, so
     every row wraps 2 + 1. With `flex-grow: 1` and an uncapped `max-width:
     100%` the lone card on the second line absorbs ALL the remaining free
     space and stretches to the full ~750px track, at which point its 513px
     source PNG paints at its natural 513px next to two ~360px siblings — three
     rows of two small cards above one oversized one, and the
     `justify-content: center` above is inert because nothing is ever left
     over. min(100%, 360px) makes all three cards 360px and gives the centring
     something to do; at 390 the content box is 351px so 100% still wins and
     the card fills the width exactly as it ships today. */
  .page-id-107 .entry-content .vc_row > .wpb_column.vc_col-sm-4.vc_hidden-xs {
    float: none;
    width: auto;
    flex: 1 1 320px;
    max-width: min(100%, 360px);
  }

  /* --- family-wellness 14: the second "Family Wellness Services" list is
         duplicated in the page content — the row carries an inner vc_row whose
         two vc_col-sm-6 columns hold byte-identical <ul class="agave-bullets">
         blocks (verified in pages/family-wellness.html). Side by side on
         desktop that reads as a deliberate two-column list; once stacked at
         <= 768 the six items simply print twice, back to back, which a client
         will read as a content bug. Suppress the copy.
         SCOPED to vc_custom_1758047408065 and must NOT be generalised: the
         first services row holds two DIFFERENT halves (Well Child Care /
         Sports Physical / EKG vs Well Women Exams / Preventative Care /
         Annual Routine Physicals). This is a stopgap — it suppresses content —
         and the correct fix is to delete the duplicate text block in the
         WPBakery builder, after which this rule can go. ------------------- */
  .page-id-14 .entry-content .vc_custom_1758047408065 .vc_row.vc_inner
    > .wpb_column.vc_col-sm-6 + .wpb_column.vc_col-sm-6 {
    display: none;
  }

  /* --- Restored benefit items: cap line length when stacked full-width --- */
  .entry-content .benefit {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Stacked image columns: once the column is 100% wide, a left- or
         right-aligned figure hugs a gutter with up to ~350px of dead space
         beside it (Dr. Judy's portrait on home, the naturopathic-medicine
         circle on about, the lobby/consultation photos on new-patients).
         The old rule only matched .vc_align_right inside 2/5 columns, so
         every vc_align_left figure was missed — broadened to both alignments
         and to any vc_col-sm-* column, which also absorbs the wellness CTA
         icon rule that used to live in the block below. Only 8 vc_align_left
         and 14 vc_align_right figures exist sitewide, all in stacked columns.
         js_composer's opposing rule is 0,2,0; this is 0,3,0 --------------- */
  .entry-content .wpb_column[class*="vc_col-sm-"] .wpb_single_image.vc_align_left,
  .entry-content .wpb_column[class*="vc_col-sm-"] .wpb_single_image.vc_align_right {
    text-align: center;
  }
  /* Phone section padding (28px scale) on the stacked 2/5 + 3/5 pair. */
  .entry-content .wpb_column[class*="vc_col-sm-2/5"] > .vc_column-inner,
  .entry-content .wpb_column[class*="vc_col-sm-3/5"] > .vc_column-inner {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  /* Where a 2/5 and a 3/5 sit in the same row, the seam carries 56px of our
     padding on top of WPBakery's 35px element margin and the row's own
     spacers (~166px of white between the portrait and the intro copy on
     home). Drop the top half at the seam only. */
  .entry-content .wpb_column[class*="vc_col-sm-2/5"] + .wpb_column[class*="vc_col-sm-3/5"] > .vc_column-inner,
  .entry-content .wpb_column[class*="vc_col-sm-3/5"] + .wpb_column[class*="vc_col-sm-2/5"] > .vc_column-inner {
    padding-top: 0;
  }

  /* --- Phone type scale: quote-crimson was skipped by the style.css ramp - */
  h3.quote-crimson {
    font-size: 30px;
    line-height: 1.4;
  }
  /* Line-length cap for the parallax pull-quotes. The hybrid-stacking rule
     above widens the quote's vc_col-sm-6 to the full row, so at 768 the quote
     runs across the background photograph and the tail of each line lands on
     mortar / monstera / eucalyptus at ~2:1 contrast (about, new-patients,
     about-our-skin-clinic — the worst case on the site). 380px keeps the copy
     inside the light half the artwork was composed around and is a no-op at
     390, where the content box is only 351px. Every quote block on the site
     is `h3.quote-crimson` + a single `p.font-cookie` attribution, so `~ p`
     cannot reach body copy. */
  .entry-content .wpb_text_column h3.quote-crimson,
  .entry-content .wpb_text_column h3.quote-crimson ~ p {
    max-width: 380px;
  }

  /* --- Closing phone-icon CTA strip: shrink the 200px icon (it eats ~250px
         of vertical space at phone), tighten the 48px inline spacer, and drop
         the inline 28px span to callout scale. The IV pages (infusion 82,
         injections 2436) ship the identical component and were missing from
         the list, so the same icon rendered full size there — added for
         sitewide consistency. Their CTA icon is already vc_align_center and
         their sibling spacer is 40px on a different column, so only the icon
         rule extends; the old vc_align_right centering rule that lived here
         is now covered by the broadened image-alignment rule above -------- */
  /* Match the closing call-CTA icon by its own image instead of a page-id list
     (2026-07-22): the skin-clinic service pages were never in that list, so
     their phone icon still rendered at 200px while every wellness page showed
     120px. Every page uses the same asset, so one selector keeps them in sync
     — and it cannot touch about-our-skin-clinic's 11 vc_col-sm-2 icon-strip
     columns, which use vitality_spa_icons-*.png. */
  .entry-content img[src*="phone-icon-Small-VWC"] {
    width: 120px;
    height: auto;
  }
  /* --- Same treatment for the strip's SPACERS (2026-08-02, owner: "the phone
         contact area has too much space, above, below and on sides"). The old
         rule below keyed off a hand-maintained page-id list of 11 pages, but 19
         ship this row: hair-restoration 2839, injectables 47, microneedling 49,
         subnovii 53, pdo-threads 55, skin-analysis 62, vitamin-infusion 82 and
         vitamin-injections 2436 were all missing, so their spacers stayed at
         40px. Keying off the row that CONTAINS the phone icon fixes those eight
         and also reaches the row's other spacers — the leading and trailing
         vc_col-sm-12 ones (32px and 16-32px inline) that the sm-10-only
         selector never touched, and which are most of the dead space above and
         below the icon. Inline heights per page measured today: sm-10 spacer is
         20/25/32/40/48px depending on the page; all collapse to 12px here.
         :has() is already relied on elsewhere in this file (Tier 3 seam rule) */
  .vc_row:has(img[src*="phone-icon-Small-VWC"]) .vc_empty_space {
    height: 12px !important; /* beats inline style="height: 20-48px" */
  }
  /* The icon's own figure still carries WPBakery's 35px .wpb_content_element
     bottom margin — the remaining gap directly under the icon. */
  .vc_row:has(img[src*="phone-icon-Small-VWC"]) .wpb_single_image {
    margin-bottom: 10px;
  }
  /* The spacers turned out to be the smaller half of the problem. Measured on
     hormone-health at 390px, the row is built from four stacked columns and
     EVERY .vc_column-inner carries `padding-top: 35px` — 140px of dead space in
     a 473px block, before the text column's own 35px bottom margin. That is
     what actually reads as "too much space above and below"; the inline
     spacers only accounted for ~60px of it. Trimming the inner padding to 8px
     and the text margin to 10px takes the block from 522px to ~340px while
     keeping clear separation between icon, sentence and the section below.
     Sides: the same columns keep the full desktop gutter, so the sentence sat
     well inside the screen edge — the outer container padding still keeps the
     copy off the glass once this is reclaimed.
     The 35px comes from js_composer's
     `.vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container >
      .vc_column-inner` (and its three siblings) — a 0,5,0 chain that adds top
     padding to any row following a filled row. That out-specifies this 0,3,0
     selector, so padding-top needs !important; the left/right values win on
     their own and are left plain. */
  .vc_row:has(img[src*="phone-icon-Small-VWC"]) > .wpb_column > .vc_column-inner {
    padding-top: 8px !important;
    padding-left: 6px;
    padding-right: 6px;
  }
  /* !important because gut-health (586) puts vc_custom_1764875798428 on this
     very element with `margin-bottom: 20px !important` — without it that one
     page keeps 20px while the other eighteen get 10px. */
  .vc_row:has(img[src*="phone-icon-Small-VWC"]) .wpb_text_column {
    margin-bottom: 10px !important;
  }
  .wpb_text_column p.font-muli span[style*="font-size: 28px"] {
    font-size: 22px !important; /* beats inline span style */
    line-height: 1.5;
  }

  /* --- Parallax quote rows (about, new-patients, skin clinic): trim the
         55px inline spacers to the 28px phone scale. On skin-clinic (66) the
         quote row (vc_custom_1757354665952) has no vc_parallax class, so it
         needs its own row-scoped selector --------------------------------- */
  :is(.page-id-107, .page-id-113) .vc_parallax .vc_empty_space,
  .page-id-66 .vc_custom_1757354665952 .vc_empty_space {
    height: 28px !important; /* beats inline style="height: 55px" */
  }

  /* --- holistic-nutrition quote band: the image's white gradient sits
         left-of-center and is cropped away by background-size:cover on narrow
         portrait viewports, dropping the restored #3a4f61 quote onto the
         mid-brown wood grain. WPBakery renders the photo into the
         absolutely-positioned .vc_parallax-inner, so an ::after there sits
         above the image and below the row content ------------------------ */
  /* SUPERSEDED 2026-07-22 — removed at the owner's request (see Tier 1 note): a flat 55% cream
     film over the whole photo, replaced by a hue-matched glow behind the type. */

  /* --- hormone-health quote band: the restored column's inner
         (vc_custom_1768140933962) sets margins only, so once the stretched
         row spans the viewport the quote runs to within ~5px of the right
         edge while the left keeps ~18px. No horizontal padding to override,
         so a plain rule wins ---------------------------------------------- */
  .page-id-20 .vc_custom_1779557023957 .vc_column-inner {
    padding-left: 20px;
    padding-right: 28px;
  }

  /* --- Skin-clinic family: raw-HTML "The Benefits" flex row never stacks
         (inline styles); stack it and let the photo go full width.
         align-self is the missing half: three of the six pages author
         `align-items: flex-start` on the row-reverse container
         (hair-restoration 2839, injectables 47, skin-analysis 62), so once the
         flip to column makes horizontal the cross axis, the 45% image wrapper
         shrink-to-fits and cross-aligns to the start — the photo hugs the left
         gutter at x~44-455 with ~275px of dead space beside it and a
         full-width bullet list underneath, and `justify-content: center` below
         has nothing to centre inside. Stretching the wrapper gives that
         centring something to work with. Inert on the three pages that already
         author `align-items: stretch` (microneedling 49, pdo-threads 55,
         subnovii 53 — the design reference), and a no-op at 390 where the
         image already fills the 351px box. ------------------------------- */
  .wpb_raw_html > .wpb_wrapper > div[style*="row-reverse"] {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .wpb_raw_html > .wpb_wrapper > div[style*="row-reverse"] > div[style*="45%"] {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-content: center !important;
  }
  .wpb_raw_html > .wpb_wrapper > div[style*="row-reverse"] > div[style*="45%"] img {
    width: 100% !important;
    max-width: 420px;
  }

  /* --- FAQ accordion (skin-clinic family): lift answer text to 16px ------ */
  .faq-section .faq-answer p {
    font-size: 1rem;
  }

  /* --- Skin-clinic about: hero copy sits on the busiest part of the flatlay.
         The band is newly on show at 390 (the before set opened straight into
         the icon strip) and, with the Tier 1 row-background fix above, at 768
         too: "Naturopathic Medicine" crosses the dark bottle and the white
         bowl, and the intro sentence runs over the pale-green cream and the
         tan sponge at roughly 2:1. The column is full width at these widths so
         a crop shift cannot help; a cream wash on the column inner (the ozone
         quote-band technique) keeps the artwork visible and puts the type back
         on a solid ground. This row has a single vc_col-sm-12 column, so the
         wash cannot land on an empty half the way ozone's did -------------- */
  .page-id-66 .entry-content .vc_row.vc_custom_1773868603745 > .wpb_column > .vc_column-inner {
    background: linear-gradient(180deg,
                rgba(252, 242, 235, 0.90) 0%,
                rgba(252, 242, 235, 0.78) 100%);
    border-radius: 8px;
  }

  /* --- Skin-clinic about: un-cap the 75%-width video widget. Page-scoped
         to out-specify the page's vc_custom-css (.vnhc-video-small at
         0,1,0 !important), which prints after this file and would otherwise
         win the equal-specificity tie ------------------------------------- */
  .page-id-66 .vnhc-video-small {
    width: 100% !important;   /* page CSS sets 75% !important */
    max-width: 100% !important;
  }
  /* The un-cap only half landed: a second 75% sits on the intermediate
     .wpb_wrapper, which neither the page CSS (.vnhc-video-small
     .wpb_video_wrapper, the innermost div) nor the rule above targets, so the
     player measured 0.75 x 0.75 before and exactly 75% after — a 2.35:1
     player only ~112px tall on a 390 screen. */
  .page-id-66 .vnhc-video-small > .wpb_wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Home: entrance photo band eats a full viewport; make it a band ---- */
  .vc_custom_1763926050518.vc_row-o-full-height {
    min-height: 42vh !important;
  }
  .vc_custom_1763926050518 .vc_custom_1756124302357 {
    margin-top: 90px !important;    /* vc_custom rule is 220px !important */
    margin-bottom: 90px !important;
  }

  /* --- Home: restored Dr. Judy quote column padding (28px phone scale), and
         cap the column itself so the 30px serif quote does not run the full
         690px at 768 and land its right-hand words on the mid-tone agave leaf
         in the parallax photo (the 380px h3 cap above handles the copy; this
         keeps the column box itself off the leaf) ------------------------- */
  .vc_custom_1783254699480 > .wpb_column.vc_col-sm-6 {
    max-width: 560px;
  }
  .vc_custom_1783254699480 .vc_custom_1783254714252 {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* --- Home: New Patients / Natural Healing green band — center text to
         match the buttons once stacked, and bring the two white line-icons
         with it. The page's desktop rule (pages-css/home-inline.css:34
         `.img-no1{max-width:60%!important; display:block; margin-left:auto;
         margin-right:0}`) was written to shove each icon toward its caption
         column in the wide layout; once the vc_col-sm-3 columns stack it
         parks the icon hard against the right edge of a full-width column
         while its caption and pill button are centred (measured icon centre
         522 vs column centre 384 at 768; 265 vs 195 at 390). The broadened
         image-alignment rule above misses them because these figures are
         .vc_align_center, not left/right. Only max-width carries !important in
         the page rule, so the margins fall to specificity: (0,3,0) here vs the
         page's (0,1,0), despite its <style> printing after this file ------- */
  .vc_custom_1783970205831 .wpb_text_column {
    text-align: center;
  }
  .vc_custom_1783970205831 .wpb_single_image {
    margin-bottom: 6px;
  }
  .vc_custom_1783970205831 .wpb_single_image.img-no1 {
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Home: testimonial carousel arrows sit at -60px outside the viewport;
         hide them and grow the dots into the nav affordance --------------- */
  .testimonial-carousel .carousel-btn {
    display: none !important; /* in-body <style> prints after stylesheets */
  }
  .testimonial-carousel .carousel-dots button {
    width: 14px;
    height: 14px;
  }

  /* --- vitamin-infusion-therapy coverflow carousel: fixed-height viewport
         overflows, burying dots and painting arrows over card text. Convert
         the track to a single-cell grid stack so the viewport auto-sizes to
         the tallest card (pure-CSS version of the height-sync JS the
         vitamin-injections copy has). Scoped to .page-id-82 — the injections
         carousel (page-id-2436) works and must not be touched -------------- */
  .page-id-82 .vnhc-iv-carousel {
    min-height: 0 !important;
  }
  .page-id-82 .vnhc-iv-viewport {
    height: auto !important;
  }
  .page-id-82 .vnhc-iv-track {
    display: grid !important;
    justify-items: center !important;
  }
  .page-id-82 .vnhc-iv-section {
    padding-bottom: 96px !important; /* room for bottom-anchored nav/dots */
  }
  .page-id-82 .vnhc-iv-slide,
  .page-id-82 .vnhc-iv-slide.is-active,
  .page-id-82 .vnhc-iv-slide.is-near,
  .page-id-82 .vnhc-iv-slide.is-far,
  .page-id-82 .vnhc-iv-slide.is-before,
  .page-id-82 .vnhc-iv-slide.is-after {
    position: static !important;
    grid-area: 1 / 1 !important;
    transform: translateX(var(--stack-x, 0px)) translateY(var(--stack-y, 0px))
      translateZ(var(--stack-z, 0px)) rotateY(var(--stack-rotate, 0deg))
      scale(var(--stack-scale, 1)) !important;
  }
  .page-id-82 .vnhc-iv-section.is-sliding .vnhc-iv-track .vnhc-iv-slide {
    transform: translateX(var(--stack-x, 0px))
      translateY(calc(var(--stack-y, 0px) + var(--stack-dip-y, 0px)))
      translateZ(calc(var(--stack-z, 0px) + var(--stack-dip-z, 0px)))
      rotateY(var(--stack-rotate, 0deg)) scale(var(--stack-scale, 1)) !important;
  }

  /* --- ozone-therapy "What To Expect" journey: the page's own stacking rule
         only starts at <= 600, so from 601-768 the four-inline scroller
         persists — at 768 only ~2.5 steps are visible, SESSION LENGTH is half
         cut and AFTERCARE is hidden behind an unlabelled horizontal scroll.
         Extend the single-column stack to 768; the values mirror the page's
         own 600px block so 390 is unchanged. Same load-order/specificity
         reason as the Tier 2 rule: !important plus the .page-id-30 prefix -- */
  .page-id-30 .vnhc-ozone-journey {
    overflow-x: visible !important;
  }
  .page-id-30 .vnhc-ozone-journey .vnhc-ozone-track {
    min-width: 0 !important;
  }
  .page-id-30 .vnhc-ozone-journey .vnhc-ozone-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .page-id-30 .vnhc-ozone-journey .vnhc-ozone-step {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
  }
  .page-id-30 .vnhc-ozone-line {
    display: none !important;
  }

  /* --- "What To Expect" step titles + circles, ozone (30) and acupuncture (37)
         (2026-08-02, owner: "titles of each area bigger and circle bigger like
         the other pages. Is currently too small in phone version").

         Root cause, measured across all 27 pages: three different components
         render this section. Counted from the live markup — 17 pages use .est-*
         (3 steps each, except sauna 39 which runs two 3-step timelines);
         acupuncture 37 alone uses .estb-* (two 4-step timelines); ozone 30
         alone uses .vnhc-ozone-* (one 4-step timeline). Each ships
         its own phone type scale in an in-body <style>:
             .est-card h3          1.6rem !important  = 25.6px at every width
             .estb-card h3         0.95rem !important = 15.2px at <= 480
             .vnhc-ozone-content h3   1rem !important = 16px    at <= 600
         So the two 4-step pages render their titles at roughly 60% of the size
         every other page uses.

         The circles are undersized too, and reading the component's own CSS is
         not enough to see it. Each page's inline block steps .est-circle down
         to 140px (<=900) and 120px (<=480) — but a LATER block,
         <style id="wds-service-component-overrides">, then sets
         `.expect-steps-timeline .est-circle { width: 190px !important }` with
         NO media query at all. (0,2,0) + !important beats every one of those
         media rules, so the reference circle is 190px at EVERY width, phone
         included — confirmed by measuring the live pages at 390px. The two
         bespoke timelines have no such override, so they sit at 140px against
         the reference 190px. Both are brought to 190px here. Neither
         .estb-circle nor .vnhc-ozone-photo carries !important anywhere, so a
         page-id prefix plus !important wins comfortably.

         Both page rules are !important, so parity needs !important plus the
         page-id prefix — (0,3,1) out-specifies their (0,2,1). Media queries add
         no specificity, so this single Tier 3 rule also wins inside their own
         <=480 / <=600 blocks and no Tier 4 duplicate is needed ------------- */
  .page-id-37 .estb-card h3,
  .page-id-30 .vnhc-ozone-content h3 {
    font-size: 1.6rem !important; /* = 25.6px, matches .est-card h3 exactly */
    line-height: 1.2 !important;
  }
  .page-id-37 .estb-circle,
  .page-id-30 .vnhc-ozone-photo {
    width: 190px !important;  /* = .expect-steps-timeline .est-circle */
    height: 190px !important;
  }

  /* --- "What To Expect" timeline -> CTA strip seam (acupuncture-cupping 37,
         sauna-red-light 39): ~230-240px of empty background stacks between
         the last AFTERCARE card and the CTA phone icon — the timeline's
         80px/70px bottom padding plus the wpb_content_element margin plus two
         inline 32px spacers, none of them scaled for phones. Newly on show
         because the restore made this region visible below 1025. Page-scoped
         to out-specify the in-body <style> that prints after this file; sauna
         sets its padding with !important so the override needs it too. The
         CTA row is identified by its lone vc_col-sm-2 icon column (the
         wellness strip's vc_col-sm-10 spacer is handled above) ------------ */
  /* --- Step-card headings overflow their card on phones (2026-07-22, owner
         report: "interpretation is far right on mobile"). The headings are set
         at 25.6px with 1.54px letter-spacing, and "INTERPRETATION" is a single
         unbreakable 243px word inside a 215px content box at 390px, so it
         spills past the right edge instead of centring. Measured overflow:
         +28px at 390, +41px at 375, +91px at 320 (and the other two cards
         overflow at 320/375 too, so this is card-wide, not one heading).
         Scale the type down and take the letter-spacing off the longest word;
         overflow-wrap is the belt-and-braces so no width can ever spill. ---- */
  /* --- CORRECTION 2026-08-02: the font-size and letter-spacing below have
         NEVER taken effect. The page's own in-body <style> sets
         `.est-card h3 { font-size: 1.6rem !important; letter-spacing: 0.06em
         !important }`, and !important beats a normal declaration whatever the
         specificity or order — so these headings have always rendered at
         25.6px, not 21px. Only `overflow-wrap` and `hyphens` ever applied,
         which is why the overflow was contained but the type never shrank.
         The declarations are left in place (inert, harmless) so the intent
         survives if that page CSS ever drops its !important.

         `hyphens: auto` was the actual bug the owner reported today: it breaks
         mid-word to fill a line, so "ONGOING GUIDANCE" came out as
         "ONGOING GUID-" / "ANCE". Switching to `manual` makes it wrap at the
         space instead — ONGOING on line 1, GUIDANCE on line 2, as asked.
         `text-wrap: balance` then evens the line lengths so multi-line
         headings cascade instead of stranding one short word (older iOS just
         ignores it). `overflow-wrap` stays as the last-resort guard so no
         word can ever spill the card.

         Audited every est-card heading sitewide: exactly one has a word long
         enough to need hyphenation — "Results & Interpretation" on lab-testing
         (16), whose INTERPRETATION is ~243px inside a 215px box at 25.6px.
         That one page keeps `auto`; everything else wraps cleanly without it.
         Extended to the two bespoke timelines (.estb-* acupuncture 37,
         .vnhc-ozone-* ozone 30) since their titles are enlarged to match
         below and can now wrap too ---------------------------------------- */
  .est-card h3,
  .est-card h3.testing-heading--lg,
  .estb-card h3,
  .vnhc-ozone-content h3 {
    font-size: 21px;      /* inert — see note above */
    letter-spacing: 0.02em; /* inert — see note above */
    overflow-wrap: break-word;
    hyphens: manual;
    text-wrap: balance;
  }
  .page-id-16 .est-card h3 {
    hyphens: auto;   /* only heading sitewide with a word too long to fit */
    text-wrap: wrap; /* This is the one page that still relies on automatic
                        hyphenation, and balance + auto-hyphens is an
                        interaction worth not taking on trust, so lab-testing
                        keeps exactly the greedy wrap it renders today. Both
                        headings measured 2 lines / 59px before and after. */
  }

  .page-id-37 .expect-steps-timeline-b {
    padding-bottom: 28px;
  }
  .page-id-39 .expect-steps-timeline {
    padding-bottom: 28px !important; /* page CSS sets 70px !important */
  }
  :is(.page-id-37, .page-id-39) .vc_row:has(> .wpb_column.vc_col-sm-2)
    > .wpb_column.vc_col-sm-12 .vc_empty_space {
    height: 12px !important; /* beats inline style="height: 32px" */
  }

  /* --- testimonials: REMOVED 2026-09-01 — the phone legibility gradient that
         used to paint here on `.page-id-98 … .vc_parallax-inner::after`
         (rgba(253,245,240) .94 -> .55, left to right). It was added for the
         hero intro copy, kept on 2026-08-28 when the owner had the DESKTOP
         gradient removed (page-fixes.css section 5's note), and the client
         then reported still seeing it on mobile — so it goes at every width
         now. The h1 keeps its own rgba(255,255,255,.85) pill (page-fixes
         section 5, all widths), which is what carries title legibility on
         desktop without a gradient; the intro copy sits on the same photo
         crop it does there. Do not re-add for legibility without the owner
         asking. ----------------------------------------------------------- */

  /* --- testimonials: each raw-HTML card is an inline-styled flex row with
         align-items:center and a 40px leaf icon. At phone the quote blocks
         are 300-800px tall, so the icon floats stranded mid-paragraph, and
         the 40px icon + 20px gap eats 26% of the 351px content box. Top-align
         it with the star row and give the copy ~10px per line back.
         Inline styles mean !important is required ------------------------- */
  .wpb_raw_html > .wpb_wrapper > div.font-ttnorms[style*="align-items: center"] {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* --- Header chrome: center the top bar to match the centered header ---- */
  .top-bar .top-bar-inner {
    align-items: center;
    text-align: center;
  }
  .top-bar .top-left {
    text-align: center;
  }

  /* --- Header Book Now button: keep full-width behavior on phones but cap
         the pill so it is not ~690px wide at tablet portrait -------------- */
  .vc_btn_cream .vc_btn3 {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- BOOK NOW pills inside the sage service cards (2026-08-02, owner: "make
         the book now button with less white space on each side"). The button
         itself is already width:100% of its column (style.css sets that for
         mobile) and capped at 360px above, so the gutter is not the button —
         it is .testing-block's `padding: 30px 42px 28px`, a desktop value that
         was never scaled for phones. At 390px the card is ~360px wide, so 42px
         each side spends 23% of the card on empty margin and squeezes the pill
         to ~276px. Dropping to 20px gives the button ~320px and moves the
         bullet list out with it. 30px stays at tablet, where the cards sit
         2-up and the wider inset still reads correctly.
         Five pages ship these cards (18 in total): hair-restoration 2839,
         injectables 47, lab-testing 16, microneedling 49, ozone-therapy 30.
         The other two BOOK NOW variants need no change — the standalone
         raw-HTML CTA (pdo-threads 55, skin-analysis 62, subnovii 53) uses the
         same pill and gets the same treatment. The IV carousel button
         (.vnhc-iv-button on vitamin-infusion 82 / vitamin-injections 2436) is a
         separate component sized inside its slide and is left alone.

         MEASURED FIRST, and it changed the fix: the card's side padding is
         already 20px on phones and the pill already spans 267px of the 271px
         content box — so there was almost no space OUTSIDE the button to
         reclaim. The white space the owner is pointing at is INSIDE the pill:
         a 267px-wide button wrapped around an ~85px "BOOK NOW" label leaves
         ~90px of blank white either side of the text. style.css stretches it
         with `width: 100%` for mobile; letting it shrink to its content puts
         the pill at ~173px, so the label sits in a button that fits it.
         Scoped away from the header pill, which is deliberately full-width.
         The pill also measured only 41px tall, under the 44px minimum tap
         target. js_composer's own .vc_btn3-size-lg padding (9.6px/28px) has
         more specificity than this rule, so that one declaration needs
         !important; `width` does not, which is why it is left plain --------- */
  .testing-block .vc_btn_cream .vc_btn3,
  .wpb_raw_code .vc_btn_cream .vc_btn3 {
    width: auto;
    max-width: 100%;
    padding: 14px 34px !important;
  }

  /* --- Banner-hero title centring, sauna-red-light-therapy 39 (2026-08-02,
         owner: "center the title of this page"). The three hero H1s on this
         page carry an inline `style="text-align: left"` from the page builder,
         so centring needs !important. Audited all 27 pages: every page centres
         its h1-hero except sauna (3), acupuncture-cupping (2 — ACUPUNCTURE
         THERAPY / CUPPING THERAPY), testimonials (1) and about-our-skin-clinic
         (4, a deliberately stacked left-aligned composition). Only the page the
         owner pointed at is changed here; the other three are reported rather
         than assumed. text-wrap:balance stops the two-line wrap stranding a
         single word. Mobile only — desktop keeps its left-aligned hero ----- */
  .page-id-39 h1.h1-hero {
    text-align: center !important;
    text-wrap: balance;
  }
}

/* ==========================================================================
   TIER 4 — SMALL PHONES (<= 480px)
   ========================================================================= */
@media screen and (max-width: 480px) {

  /* --- Type scale: final quote step ------------------------------------- */
  h3.quote-crimson {
    font-size: 26px;
  }

  /* --- Step cards: at 375 the content box is 202px and at 320 only 152px,
         so 21px still leaves "INTERPRETATION" wider than the card. Drop one
         more step and reclaim width from the card's 36px side padding ----- */
  .est-card h3,
  .est-card h3.testing-heading--lg {
    font-size: 18px;
  }
  .est-card {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* --- Parallax pull-quotes, small phones: the background photo fills the
         whole viewport so the copy sits directly on the artwork, and the
         380px cap from Tier 3 is a no-op here (content box is 351px). A soft
         white halo restores legibility without changing the composition.
         Scoped to the three dark-type quote rows (about 107, new-patients
         113, about-our-skin-clinic 66): the ozone / acupuncture /
         holistic-nutrition quotes get a painted scrim instead, and a white
         halo would be invisible-to-ugly under the white type on
         acupuncture and hair-restoration ---------------------------------- */
  /* SUPERSEDED 2026-07-22 — removed at the owner's request (see Tier 1 note): the halo made the
     serif look furred at 390. The glow sits behind the type instead of on it. */

  /* --- hormone-health Dr. Judy quote band: the cover crop pushes the
         artwork's cream gradient off-screen at 390 and drops the #3a4f61
         serif onto the sunlit forest — "within is the" on the blown-out trunk
         highlight, "healthy aging." on bright foliage, both around 1.5:1.
         This is the only Dr. Judy band on the wellness pages with no scrim
         (holistic-nutrition has a cream ::after wash, ozone and acupuncture
         have painted scrims), and the white halo above is scoped to the three
         dark-type quotes on 107/113/66 — it would be invisible against these
         highlights anyway. The wash goes on the column inner, so it is
         independent of the Tier 1 fix that retires this row's parallax inner.
         Scoped to the quote column's own vc_custom id (it occurs exactly once
         in the markup): the row has two vc_col-sm-6 columns and the second is
         EMPTY, exactly like ozone's, where washing both painted a hard-edged
         rectangle across the middle of the photo — and a positional selector
         is not safe, because js_composer injects .vc_parallax-inner as a
         sibling of the columns at runtime ---------------------------------- */
  /* SUPERSEDED 2026-07-22 — removed at the owner's request (see Tier 1 note). This is the box
     the owner called out first: a cream panel with a hard right edge sitting on
     the forest photo. */

  /* --- sauna-red-light Dr. Judy pull-quote band: at 390 the cover crop puts
         the eucalyptus photo's blown-out highlight directly under the white
         type — the background behind "and renew." measures rgb(224,229,223),
         about 1.3:1 against #ffffff, so the words are effectively invisible;
         the tail of line 1 is around 2:1. Correct at 768, 1024 and 1180, where
         the crop keeps the whole text block on the dark navy left third, which
         is why the Tier 1 acupuncture-style scrim was never triggered here.
         Newly on show: the quote column carries vc_hidden-md/sm/xs and was
         absent below 1200 in the before set. Tint in the band's own navy
         (sampled rgb(58,79,97)) so white type keeps contrast wherever the crop
         lands; the ::after lives inside .vc_parallax-inner, which js_composer
         pins at z-index 0 below the columns, and this row keeps its inner --- */
  /* SUPERSEDED 2026-07-22 — removed at the owner's request (see Tier 1 note), which paints a
     dark hue-matched glow behind this band's white type instead of tinting the
     whole eucalyptus photo. */

  /* --- Top bar: the address wraps into ragged lines with an orphaned "|";
         suppress the bare text nodes, keep a centered tappable phone link - */
  .top-bar .top-left span {
    font-size: 0;
    line-height: 0;
  }
  .top-bar .top-left span a.top-phone {
    font-size: 15px;
    line-height: 1.5;
    display: inline-block;
    padding: 5px 14px;
  }
  .top-bar .top-left {
    width: 100%;
    text-align: center;
  }

  /* --- Header: compact the chrome stack (~46% of first viewport today) --- */
  header.site-header {
    padding: 0.75rem 0;
  }
  .site-header .logo img.custom-logo {
    max-width: 230px;
    height: auto;
  }
  .site-header .header-right {
    margin-top: 0.5rem;
    gap: 0.6rem;
  }
  .header-right .header-text br {
    display: none; /* let the consult line wrap naturally */
  }
  .header-right .header-text {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Skin-clinic about: 48px inline script tagline is oversized.
         Scoped by inline-style attribute (same technique as line 766) because
         page 66 carries a SECOND .font-cookie element: the Dr. Judy
         attribution on the "skin communicates" quote row,
         `<p class="font-cookie text-agave" style="font-size: 50px !important">
          <span style="color: #3a4f61; font-size: 28px;">- Dr. Judy</span></p>`.
         A bare `.font-cookie span` would beat that span's non-important inline
         28px and GROW the attribution to 36px — the opposite of the intent, on
         the very row re-cropped 10 lines below. -------------------------- */
  .page-id-66 .font-cookie span[style*="font-size: 48px"] {
    font-size: 36px !important; /* beats inline span style */
  }

  /* --- Skin-clinic "The skin communicates..." quote row: the monstera leaf
         covers the right ~25% of the viewport and swallows the tail of two
         lines. Shift the crop left so the pale/pink part of the artwork sits
         under the text. The row's background comes from the
         vc_shortcodes-custom-css block with !important ---------------------*/
  .page-id-66 .vc_custom_1757354665952 {
    background-position: 22% center !important;
  }
}

/* ==========================================================================
   2026-08-19 — OWNER ROUND (mobile pass 3)

   Appended as one block so it reads as a unit and can be lifted out whole.
   Later in the file than every tier above, so at equal specificity these win;
   that is deliberate for the top-bar rule, which supersedes the 2026-07-21
   "suppress the address" hack in Tier 4.

   Same desktop-safety invariant as the rest of the file: every rule sits in a
   screen-only @media capped at 1024px, or capped at 1199px AND gated on
   (pointer: coarse). Verified by lint-responsive.js.

   CONTENTS
     A. Top bar — restore the street address beside the phone (all pages)
     B. Back-to-top control (all pages; element injected by main.js)
     C. Buttons — stop the four full-bleed pills spanning the viewport
     D. Home 8 — Dr. Judy portrait -> intro copy gap
     E. Home 8 — New Patients / Natural Healing band, whole-band tightening
     F. Home 8 — "Treatments Offered" -> its standfirst sentence
   ========================================================================= */

@media screen and (max-width: 1024px),
       screen and (max-width: 1199px) and (pointer: coarse) {

  /* --- B. Back-to-top control -------------------------------------------
     main.js appends button.wds-to-top to <body> only when this same media
     query matches, so a mouse browser never receives the element at all and
     no desktop rule is needed to hide it.

     position: fixed, NOT sticky. Tier 1 above sets overflow-x: hidden on
     html and body, which makes both scroll containers; a sticky nav bar
     measured at top:-1231px after a 1500px scroll, i.e. it does not pin.
     Fixed is unaffected by ancestor overflow, and nothing in the page has a
     transform/filter/perspective that would re-root the containing block
     (checked across body and its children). z-index sits below the slide-in
     menu (10000) and its overlay (9998) so the panel always covers it. ---- */
  .wds-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #d3a794;              /* Sedona */
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(58, 79, 97, 0.28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .wds-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .wds-to-top svg {
    display: block;
    width: 22px;
    height: 22px;
  }
  .wds-to-top:hover,
  .wds-to-top:focus-visible {
    background: #738d94;              /* Agave, matching the header pill hover */
  }
  /* Never float it over the open slide-in menu. */
  body.mobile-menu-open .wds-to-top {
    opacity: 0;
    visibility: hidden;
  }

  /* --- C. Buttons: "shorter side to side" -------------------------------
     Owner, this round: "Book Now buttons, Submit buttons, Learn More buttons
     etc - these should all be shorter side to side like you adjusted for the
     other pages", i.e. the treatment already given to the sage service-card
     pills in Tier 3 (`.testing-block .vc_btn_cream .vc_btn3`).

     Inventoried every button-like control on all 26 pages at 390px first.
     Only four render full-bleed; everything else is already content-sized
     (service-card pills 167px, raw-HTML CTA 162px, orbit/aes/IV carousel
     buttons 122-229px, blog search 96px) and is left alone:

       .header-right pill  351x48   26 pages   width:100% then capped at 360
       footer Submit       351x44   26 pages   flex column + align-items:stretch
       home SUBMIT         351x38    1 page    display:block, width:100%
       blog sidebar Submit 303x46    1 page    display:block, width:100%

     Each is stretched by its own container, so each needs its own release
     rather than one blanket rule. Minimum 44px tap height is preserved (the
     home input was 38px and is brought up to 44). ------------------------- */

  /* Header pill: the wrapper is already display:flex; justify-content:center,
     so releasing the width is enough to centre it. Supersedes the 360px cap
     set in Tier 1 above (same file, later wins). */
  .header-right .vc_btn_cream .vc_btn3 {
    width: auto;
    max-width: 100%;
  }

  /* Footer newsletter: the form is a column flexbox with align-items:stretch. */
  .site-footer .footer-info .newsletter-form button.vc_btn3 {
    align-self: center;
    width: auto;
    min-width: 0;
    padding-right: 34px;
    padding-left: 34px;
  }

  /* Home newsletter: a block-level <input>, so width has to be released too. */
  .newsletter-wrapper .newsletter-form input.newsletter-submit {
    align-self: center;
    width: auto;
    min-height: 44px;
    padding: 10px 34px;
  }

  /* Blog sidebar newsletter. */
  .blog-sidebar .blog-newsletter-form button {
    align-self: center;
    width: auto;
    padding-right: 34px;
    padding-left: 34px;
  }
}

@media screen and (max-width: 768px) {

  /* --- A. Top bar: put the street address back beside the phone ---------
     Owner: "The header only shows the phone number, she would like it to also
     show the address like it does on our current website."

     It was in the markup all along. Tier 4 (2026-07-21) set
     `.top-bar .top-left span { font-size: 0 }` to kill the bare text nodes,
     because the address + " | " + phone ran as one inline run and wrapped
     into ragged lines with an orphaned "|" hanging at the end.

     Fixed at the source instead: header.php now wraps the address in
     span.top-address and the divider in span.top-sep, so the two facts can be
     laid out as separate lines and the divider simply dropped. That removes
     the orphan by construction rather than hiding the content. Reference is
     vitalitywellnessclinic.com's own mobile top bar, which shows address and
     phone together, centred.

     Font-size on the wrapper span resets Tier 4's 0 (equal specificity, later
     in the file). ------------------------------------------------------- */
  .top-bar {
    padding: 0.45rem 0;
  }
  .top-bar .top-left {
    width: 100%;
    text-align: center;
  }
  .top-bar .top-left span {
    font-size: 13px;
    line-height: 1.45;
  }
  .top-bar .top-left .top-address {
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.01em;
  }
  .top-bar .top-left .top-sep {
    display: none;      /* the divider only makes sense on one line */
  }
  .top-bar .top-left span a.top-phone {
    display: inline-block;
    margin-top: 1px;
    padding: 2px 14px;
    font-size: 15px;
    line-height: 1.5;
  }

  /* --- D. Home 8: Dr. Judy portrait -> intro copy -----------------------
     Owner: "Remove spacing gap under dr Judys picture before the paragraph."

     Desktop is unaffected: the portrait (vc_col-sm-2/5) and the copy
     (vc_col-sm-3/5) sit side by side there, so there is no gap to remove.
     It only appears once Tier 3 stacks the columns.

     Measured at 390px: portrait ends y=1759, copy starts y=1838 = 79px, made
     of the figure's 35px .wpb_content_element margin-bottom, 28px of
     .vc_column-inner bottom padding on the portrait column, and a 16px
     vc_empty_space at the top of the copy column. The first two go; the
     16px spacer is kept as the single deliberate gap.

     Anchored with :has() on the portrait's own filename because this row
     carries no vc_custom_ class of its own. Only the FIRST column's bottom
     padding is released — the second column's is what separates this row
     from the green band below it. ---------------------------------------- */
  .page-id-8 .vc_row:has(img[src*="Dr-Judy-Main-Large"]) .wpb_single_image {
    margin-bottom: 0;
  }
  .page-id-8 .vc_row:has(img[src*="Dr-Judy-Main-Large"]) > .wpb_column:first-child > .vc_column-inner {
    padding-bottom: 0;
  }

  /* --- E. Home 8: New Patients / Natural Healing green band -------------
     Owner: "Less spacing all around/between new patient & natural healing
     icons."

     The band is six sibling columns that stack at this width: a 20px spacer,
     icon, caption+pill, icon, caption+pill, 20px spacer. Every one of the six
     .vc_column-inner boxes carries js_composer's 35px top padding
     (.vc_row-has-fill ... > .vc_column_container > .vc_column-inner, a 0,5,0
     chain), so 210px of the band's measured 1091px height is that padding
     alone, and it is invisible dead space between an icon and its own caption.

     Rebuilt as an explicit rhythm: 24px band inset, 16px icon -> caption,
     8px caption -> standfirst (already), 16px standfirst -> pill, 44px
     between the two groups. Lands at ~770px, a ~30% cut, without shrinking
     the icons themselves (the owner asked for smaller icons on page 66, not
     here). vc_empty_space needs !important — WPBakery prints its height as an
     inline style. --------------------------------------------------------- */
  .page-id-8 .vc_custom_1783970205831 > .wpb_column > .vc_column-inner {
    padding-top: 0;
    padding-bottom: 0;
  }
  .page-id-8 .vc_custom_1783970205831 .vc_empty_space {
    height: 24px !important;
  }
  .page-id-8 .vc_custom_1783970205831 .wpb_single_image {
    margin-bottom: 16px;
  }
  /* !important: each caption carries its own vc_custom_* class
     (…794895 / …789488) and WPBakery prints those with !important, so a plain
     declaration loses regardless of specificity. */
  .page-id-8 .vc_custom_1783970205831 .wpb_text_column {
    margin-bottom: 14px !important;
  }
  /* The pill sits in a raw-HTML block carrying .testing-section's 4px/24px
     padding plus the stock 35px .wpb_content_element bottom margin — 63px of
     dead space around a 50px button, and the largest single contributor left
     after the column padding above. */
  .page-id-8 .vc_custom_1783970205831 .wpb_raw_code {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .page-id-8 .vc_custom_1783970205831 .vc_btn_cream {
    margin-top: 0;
  }
  /* Separate the New Patients group from the Natural Healing group. Column 3
     is the first caption+pill column; column 5 is the second, and the closing
     spacer column handles the band's bottom inset. */
  .page-id-8 .vc_custom_1783970205831 > .wpb_column:nth-child(3) > .vc_column-inner {
    padding-bottom: 44px;
  }

  /* --- F. Home 8: "Treatments Offered" -> its standfirst sentence -------
     Owner: "Remove spacing gap between 'treatments offered' and the sentence
     below it."

     Same stacking artefact as D. Measured 73px: 35px margin-bottom on the
     heading's .wpb_text_column plus 28px .vc_column-inner bottom padding,
     against the sentence's own 10px top margin, which is kept. The row has no
     vc_custom_ class, so it is anchored on the sentence's unique one. ----- */
  .page-id-8 .vc_row:has(.vc_custom_1763926284339) > .wpb_column:first-child > .vc_column-inner {
    padding-bottom: 0;
  }
  .page-id-8 .vc_row:has(.vc_custom_1763926284339) > .wpb_column:first-child .wpb_text_column {
    margin-bottom: 0;
  }

  /* --- G. About 107: gap under each doctor portrait ---------------------
     Owner: "Remove spacing gap below dr Judys picture and dr monsons picture."

     Both rows measure exactly 63px between the portrait's bottom edge and the
     first line of copy, and both are built the same way: 35px of
     .wpb_content_element bottom margin (js_composer) plus 28px of
     .vc_column-inner bottom padding from this file's own sitewide 2/5-column
     rule. There is no vc_empty_space and the following column's top padding is
     already zero, so those two are the whole gap.

     Desktop is untouched: there the portrait and the copy are side-by-side
     columns and .vc_column-inner padding is 0, so no gap exists to remove.

     Neither row carries a vc_custom_ class, so each is anchored on its own
     portrait filename. 12px is left behind deliberately — at zero the copy
     collides with the photo edge. --------------------------------------- */
  .page-id-107 .vc_row:has(img[src*="Dr-Judy-Main-Large-New-Style-tall-About"]) .wpb_single_image,
  .page-id-107 .vc_row:has(img[src*="Dr-Carly-Monson-Main-Tall"]) .wpb_single_image {
    margin-bottom: 12px;
  }
  .page-id-107 .vc_row:has(img[src*="Dr-Judy-Main-Large-New-Style-tall-About"]) > .wpb_column[class*="vc_col-sm-2/5"] > .vc_column-inner,
  .page-id-107 .vc_row:has(img[src*="Dr-Carly-Monson-Main-Tall"]) > .wpb_column[class*="vc_col-sm-2/5"] > .vc_column-inner {
    padding-bottom: 0;
  }

  /* --- H1. New Patients 113: the title's white block runs the full width --
     Owner: "Shorten the white block behind title to match other pages (looks
     fine on desktop but it is longer on mobile)."

     Not a sizing difference — a selector difference. Every other hero page
     (about, contact, lyme-disease) hangs the pill on `.hero-heading span`,
     which is inline-block and therefore shrink-to-fit. This page's own
     WPBakery custom CSS hangs the identical declarations on `.hero-heading`
     itself, a block-level div, so the pill fills 100% of the column: 351px
     wide around ~205px of text, i.e. ~73px of white each side against the
     35px the other pages show. Its 0.5em/1.25em padding also resolves against
     the div's 16px font rather than the h1's, giving 8px/20px instead of
     14px/35px.

     Moving the pill onto the span reproduces the other pages exactly rather
     than inventing a third treatment. The page block prints after every theme
     stylesheet, so (0,2,0) is required to beat its (0,1,0). ---------------- */
  .page-id-113 .hero-heading {
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .page-id-113 .hero-heading span {
    display: inline-block;
    padding: 14px 35px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: #2b454c;
    font-weight: 600;
  }

  /* --- H2. New Patients 113: "Your First Visit" photo before the copy ----
     Owner: "the 'your first visit' paragraph needs the photo to appear before
     it not below it."

     The row is plain block flow at this width (float:none; width:100% from
     the stacking rule above), so `order` is inert until the row becomes a
     flex container. Three children, not two — a bare column-reverse would
     also drag the 32px spacer column from the top to the bottom, so the two
     content columns are reordered explicitly and the spacer is pinned first.

     .vc_row's clearfix pseudo-elements would otherwise become flex items and
     add stray boxes to the column, hence the display:none.

     The photo column keeps the 28px .vc_column-inner top padding it already
     had, which now reads as the gap between the spacer and the photo; the
     copy column follows immediately after it. ---------------------------- */
  .page-id-113 .vc_row:has(img[src*="Your-First-Visit-Vitality-Clinic"]) {
    display: flex;
    flex-direction: column;
  }
  .page-id-113 .vc_row:has(img[src*="Your-First-Visit-Vitality-Clinic"])::before,
  .page-id-113 .vc_row:has(img[src*="Your-First-Visit-Vitality-Clinic"])::after {
    display: none;
  }
  .page-id-113 .vc_row:has(img[src*="Your-First-Visit-Vitality-Clinic"]) > .wpb_column:nth-child(1) {
    order: 0;                 /* 32px spacer stays at the top */
  }
  .page-id-113 .vc_row:has(img[src*="Your-First-Visit-Vitality-Clinic"]) > .wpb_column:nth-child(3) {
    order: 1;                 /* photo */
  }
  .page-id-113 .vc_row:has(img[src*="Your-First-Visit-Vitality-Clinic"]) > .wpb_column:nth-child(2) {
    order: 2;                 /* heading + copy + CONTACT US button */
  }
  /* Photo now sits above the copy, so its bottom margin is the seam. */
  .page-id-113 .vc_row:has(img[src*="Your-First-Visit-Vitality-Clinic"]) .wpb_single_image {
    margin-bottom: 12px;
  }
  .page-id-113 .vc_row:has(img[src*="Your-First-Visit-Vitality-Clinic"]) > .wpb_column[class*="vc_col-sm-2/5"] > .vc_column-inner {
    padding-bottom: 0;
  }

  /* --- I1. Skin clinic 66: the four value icons are oversized on a phone --
     Owner: "Make the 4 icons smaller."

     They render at exactly 150x150 here, straight from the img width/height
     attributes: the page's `.squeezed-img { width: 60% }` sizes the WRAPPER,
     and 60% of the 351px column is 210px, wider than the image, so it never
     bites below 769px. (Above 769px the four sit across one row and that same
     60% does bite, taking them down to 54-105px — which is why this rule is
     capped at 768px and the tablet/desktop sizes are left exactly as they
     are.) 150px is 38% of a 390px viewport for a decorative icon; 96px keeps
     it clearly legible and takes ~55px off each of the four stacked rows.

     Sized on the image rather than the wrapper so the wrapper's centring and
     the caption's own box are untouched. ---------------------------------- */
  .page-id-66 .squeezed-img img {
    width: 96px;
    height: auto;
  }

  /* --- I2. Skin clinic 66: photo before the copy in the two feature rows --
     Owner: "The picture needs to come first for the paragraph sections:
     'Radiant skin begins...' and 'bridging the gap...'"

     Both rows are built identically: four columns in DOM order as
     spacer / copy / photo / spacer, plain block flow at this width. Same
     treatment as H2 — flex the row, pin the two spacers at the ends, and swap
     only the middle pair, so the trailing spacer does not migrate.

     "Bridging the gap" also carries the BOOK YOUR SKIN ANALYIS button inside
     its copy column, which correctly stays with the copy, below it.

     Row 1 has a vc_custom class of its own; row 2 has none and is anchored on
     its photo's filename. ------------------------------------------------- */
  .page-id-66 .vc_custom_1773865073056,
  .page-id-66 .vc_row:has(img[src*="Body-Intelligent"]) {
    display: flex;
    flex-direction: column;
  }
  .page-id-66 .vc_custom_1773865073056::before,
  .page-id-66 .vc_custom_1773865073056::after,
  .page-id-66 .vc_row:has(img[src*="Body-Intelligent"])::before,
  .page-id-66 .vc_row:has(img[src*="Body-Intelligent"])::after {
    display: none;
  }
  .page-id-66 .vc_custom_1773865073056 > .wpb_column:nth-child(1),
  .page-id-66 .vc_row:has(img[src*="Body-Intelligent"]) > .wpb_column:nth-child(1) {
    order: 0;                 /* leading spacer */
  }
  .page-id-66 .vc_custom_1773865073056 > .wpb_column:nth-child(3),
  .page-id-66 .vc_row:has(img[src*="Body-Intelligent"]) > .wpb_column:nth-child(3) {
    order: 1;                 /* photo */
  }
  .page-id-66 .vc_custom_1773865073056 > .wpb_column:nth-child(2),
  .page-id-66 .vc_row:has(img[src*="Body-Intelligent"]) > .wpb_column:nth-child(2) {
    order: 2;                 /* heading + rule + copy (+ button on row 2) */
  }
  .page-id-66 .vc_custom_1773865073056 > .wpb_column:nth-child(4),
  .page-id-66 .vc_row:has(img[src*="Body-Intelligent"]) > .wpb_column:nth-child(4) {
    order: 3;                 /* trailing spacer */
  }
  /* The photo's 35px bottom margin is now the seam to the heading. */
  .page-id-66 .vc_custom_1773865073056 .wpb_single_image,
  .page-id-66 .vc_row:has(img[src*="Body-Intelligent"]) .wpb_single_image {
    margin-bottom: 16px;
  }

  /* --- I3. Skin clinic 66: three gaps the owner called out ---------------
     Owner: "Remove spacing gap above 'led by our .. expert' title as well as
     below dr monsons photo and again below 'treatments offered...' info
     sentence."

     (a) Above "Led by Our Health & Skin Care Expert" — 99px of white between
         the bottom of the cream Core Values band and the title: 35px of
         .vc_column-inner top padding that js_composer applies purely because
         this row follows a .vc_row-has-fill row, plus a 64px vc_empty_space.
         The 44px + 35px above that sit INSIDE the cream band and are its own
         bottom inset, so they are left alone. Row has no vc_custom class;
         anchored on the heading text column's unique one. -> 24px.
     (b) Below Dr. Monson's photo — 63px: 35px .wpb_single_image bottom margin
         + 28px .vc_column-inner bottom padding, same shape as About. Note the
         source PNG carries 25 transparent pixel rows at its foot, so ~25px of
         apparent gap survives whatever CSS does; taking the CSS to 0 lands
         the perceived gap at about 25px.
     (c) Below the "Combining advanced aesthetic treatments..." sentence —
         131px to the first carousel circle: 18px paragraph margin (forced by
         wds-service-component-overrides), 28px column bottom padding, 35px of
         the same js_composer has-fill top padding, then 34px of the
         carousel's own padding and 16px of card padding. The first three go
         and the carousel's top padding is halved. -> ~52px.
     .vc_empty_space heights are inline, hence !important.

     SPECIFICITY NOTE for (a) and (c): js_composer.min.css is enqueued AFTER
     responsive.css, so its 35px rule
     `.vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container >
      .vc_column-inner` — a 0,5,0 chain — beats an equal 0,5,0 here on source
     order. `.entry-content` is in the chain purely to carry these to 0,6,0.
     Same reason the 28px bottom padding below needs 0,5,0 to clear this
     file's own 0,4,0 sitewide 2/5-column rule. */

  /* (a) */
  .page-id-66 .entry-content .vc_row:has(.vc_custom_1773939551730) > .wpb_column > .vc_column-inner {
    padding-top: 0;
  }
  .page-id-66 .vc_row:has(.vc_custom_1773939551730) .vc_empty_space {
    height: 24px !important;
  }

  /* (b) */
  .page-id-66 .vc_row:has(img[src*="Dr-Carly-Monson-Skin-Clinic-Director"]) .wpb_single_image {
    margin-bottom: 0;
  }
  .page-id-66 .vc_row:has(img[src*="Dr-Carly-Monson-Skin-Clinic-Director"]) > .wpb_column[class*="vc_col-sm-2/5"] > .vc_column-inner {
    padding-bottom: 0;
  }

  /* (c) */
  .page-id-66 .entry-content .wpb_column > .vc_column-inner.vc_custom_1783705793445 {
    padding-bottom: 0;
  }
  .page-id-66 .entry-content .vc_row:has(.vnhc-aes-carousel) > .wpb_column > .vc_column-inner {
    padding-top: 0;
  }
  .page-id-66 .vnhc-aes-carousel {
    padding-top: 16px;
  }

  /* --- J. Testimonial signature names ------------------------------------
     Owner: "Unbold testimonial signature names."

     Checked both places testimonials appear. On the Testimonials page the 11
     signatures are already font-weight 400 — they are set in the Cookie script
     face at 50px, which reads heavy but is not bold, and their inline style
     already declares 400. Nothing to change there.

     The bold names are in the HOME page testimonial carousel: <h4> at
     font-weight 700, 22px Georgia — PATRICIA, DR. EMILY, ANGELA, MICHAEL.
     Those are the signature names, so those are what this unbolds.

     Left at the owner's stated default of mobile-only. Say the word and the
     same declaration moves to page-fixes.css to cover desktop as well; it is
     the kind of typographic choice that usually wants to match at every width.

     Separately, and NOT changed here: nine of the eleven quotes on the
     Testimonials page open with a bold sentence and two do not, which is the
     only other bold on that page. Flagged rather than touched — it looks like
     deliberate pull-quote emphasis, and six of them carry inline
     font-weight:600 that would need !important to beat. ------------------- */

  /* CORRECTION 2026-08-19 (same day): the declaration below shipped without
     !important and was therefore a silent no-op — the names stayed at 700.
     The home page prints an inline <style> carrying `.testimonial h4 {
     font-weight: bold }`, which matches the very same element at an EQUAL
     (0,1,1) specificity and, being an inline block in the document, is
     ordered after every theme stylesheet. Equal specificity is decided by
     source order, so it won. Measured with whowins.js, not derived.
     That rule is not !important, so a plain !important here settles it
     without needing a page-id prefix. ------------------------------------ */
  .testimonial-carousel h4 {
    font-weight: 400 !important;
  }

  /* --- K. Testimonials 98: banner height at phone/tablet -----------------
     Companion to the desktop half in page-fixes.css section 5. The other
     banners get 62vh here (responsive.css:644), which this row misses because
     it is not .vc_row-o-full-height — that class cannot simply be added,
     see the note in page-fixes.css. Same number, applied directly, so the
     banner matches its siblings at these widths too. ---------------------- */
  .page-id-98 #wpb-content-root > .vc_row:first-child {
    display: flex;
    align-items: center;
    min-height: 62vh;
  }

  /* --- L. Lyme 617: bring the subject into the phone crop ----------------
     The phone half of the banner change; page-fixes.css section 6 has the
     mirror and the full reasoning. The flip alone changes nothing here — the
     crop is centred, so mirroring maps the same 29%-71% slice onto itself.
     Moving the origin to the right edge is what actually reframes it: the
     window becomes 58%-100% of the source, which is where her head, hand and
     torso are. Mirrored, she then reads on the LEFT, as asked.

     Deliberately NOT in page-fixes.css: at desktop the inner is sized 100%
     (page-inline style), so the x-offset would be inert while the y-offset
     silently replaced `center 80px` and re-cropped the desktop band.

     (0,5,0) + !important to clear Tier 1's own
     `background-position: center center !important` at (0,3,0). ---------- */
  .page-id-617 .entry-content .vc_row.vc_custom_1762284114389 > .vc_parallax-inner {
    background-position: right center !important;
  }

  /* --- M. Skin clinic 66 quote band: restore the centred crop ------------
     Tier 4 pins this band to `background-position: 22% center` — a 2026-08-02
     fix that shifted the old artwork left so its monstera leaf stopped
     covering the type. With the cactus image in place (page-fixes.css
     section 7) that offset now shows nothing but flat cream, and the reason
     for it is gone: the new artwork keeps its pale space on the left and its
     type is navy, so it takes the same centred crop the identical image
     already takes on home, about and new-patients. Later in the file than
     Tier 4 at equal specificity, so this wins. ---------------------------- */
  .page-id-66 .vc_custom_1757354665952 {
    background-position: center center !important;
  }

  /* --- N. Home 8: tighten the stacked hero/newsletter row ----------------
     Owner 2026-09-01 (client screenshot, phone): "make this spacing smaller
     on the MOBILE home page", circling the band between the headline and
     "Get More Vitality" and the band under the SUBMIT button.

     Measured at 390 before changing (row .vc_custom_1756124000292, columns
     vc_col-sm-3/5 headline + vc_col-sm-2/5 newsletter, stacked):
       headline -> heading = 79px  (headline text column margin-bottom 35
         from js_composer's .wpb_content_element + column-inner
         padding-bottom 28 from the 2/5+3/5 pair rule in Tier 3 + the
         16px inline empty_space that offsets the heading);
       SUBMIT -> photo row = 63px  (newsletter raw block margin-bottom 35
         + column-inner padding-bottom 28; the photo row starts flush).
     The row is NOT height-pinned (min-height computes 0, display block,
     not .vc_row-o-full-height), so cutting the boxes genuinely shrinks it.

     Results: 79 -> 38 and 63 -> 22. The 16px spacer is left as the
     heading's own offset. padding-TOP stays 28 — the space above the
     headline was not in the brief. The column-inner rule out-specifies
     Tier 3's pair rule (0,5,0 vs 0,4,0); the margin rules beat
     js_composer's later-loaded (0,1,0) defaults on specificity alone. -- */
  .entry-content .vc_row.vc_custom_1756124000292 > .wpb_column > .vc_column-inner {
    padding-bottom: 12px;
  }
  .entry-content .vc_row.vc_custom_1756124000292 .wpb_text_column.vc_custom_1756754530421 {
    margin-bottom: 10px;
  }
  .entry-content .vc_row.vc_custom_1756124000292 .wpb_raw_html {
    margin-bottom: 10px;
  }
}

/* ===========================================================================
   2026-09-03 ROUND — sections O, P, Q. Everything below is inside a
   screen-only @media capped at max-width:1024px, or at max-width:1199px AND
   gated on (pointer: coarse), so the desktop-safety invariant holds and
   lint-responsive.js passes. Anything from this round that had to reach a
   mouse desktop went into page-fixes.css sections 14-20 instead.
   ======================================================================== */

@media screen and (max-width: 1024px),
       screen and (max-width: 1199px) and (pointer: coarse) {

  /* --- O. "Why ... Matters" split rows: balance the bottom of the copy
         column against the top of the row -------------------------------
     Owner 2026-09-03: "'Why it matters' section — too much space at bottom"
     on hormone health (20), holistic nutrition (18), gut health (586), lyme
     disease (617), mold + mycotoxins (619), environmental detox (24),
     weight management (32) and lab testing (16).

     Same row shape on all eight: a vc_col-sm-12 spacer column, a 2/5 image
     column, a 3/5 copy column, and an identical trailing vc_col-sm-12 spacer.
     The two spacers are SYMMETRIC (51px, 67px on holistic/weight) and are NOT
     the problem.

     Measured TOP-GAP / BOT-GAP of the row, pristine CSS
     (order: hormone, holistic, gut, lyme | mold, detox, lab, weight):
       d 1440   86/90  102/102  86/86  86/86  |  86/90  86/86  86/90  102/102
       t  820   91/130 107/142  91/130 91/126 |  91/130 91/130 91/130 107/142
       m  390   79/118  95/130  79/118 79/114 |  79/118 79/118 79/118  95/130

     DESKTOP IS ALREADY BALANCED at 1440 and is deliberately excluded — at
     that width the trailing 35px margin is the only bottom whitespace in the
     column and it already matches the 35px column-inner padding above it.
     Applying these same rules at all widths was tested and takes hormone to
     86/55 and lyme to 86/51 at 1440, i.e. it would unbalance the signed-off
     desktop the other way. Hence responsive.css, not page-fixes.css.

     Below 1025 the copy column's .vc_column-inner padding is symmetric (40/40
     at tablet, 28/28 at phone), so the whole imbalance is the trailing 35px
     .wpb_content_element margin on the last .wpb_text_column PLUS the 18px
     (1em) margin on its final <p>, which margin-collapses out through
     .wpb_wrapper. Zeroing only the text column recovers 17px, not 35 —
     measured, twice, on both groups — because the collapse then resolves to
     max(0, 18). So both have to go.

     SPECIFICITY: the outer rule beats js_composer's later-loaded (0,1,0)
     .wpb_content_element on specificity alone, no !important. The inner rule
     needs !important: .entry-content .wpb_text_column p{margin-bottom:1em
     !important} at (0,2,1) is printed by style.css AND again by the
     #wds-service-component-overrides <style> functions.php emits last.
     `> :last-child` is written without the universal selector on purpose —
     Chrome's CSSOM serialises `*:last-child` as `:last-child`, which makes
     cssvalidate.js report a phantom dropped rule.

     REACH: each selector matches exactly ONE element per page (counted with
     querySelectorAll on all eight pages) — the body-copy text column of the
     Why row and its final paragraph. Nothing else on those pages, nothing at
     all on the other 18 (page-id scoped). Today that final element is a <p>
     on all eight; if copy is ever edited to end in a list or a button its
     bottom margin is zeroed too, which is the intended behaviour.

     RESULTS (measured with this exact CSS):
       t  91/95  107/107  91/95  91/91  |  91/95  91/95  91/95  107/107
       m  79/83   95/95   79/83  79/79  |  79/83  79/83  79/83   95/95
     The residual 4px on six of them is the line-box descender of the <span>
     inside the final <p> — leading, not removable margin. --------------- */

  /* group A — anchored structurally on the 3/5 copy column */
  .page-id-20 .vc_row-has-fill .wpb_column[class~="vc_col-sm-3/5"] > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child,
  .page-id-18 .vc_row-has-fill .wpb_column[class~="vc_col-sm-3/5"] > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child,
  .page-id-586 .vc_row-has-fill .wpb_column[class~="vc_col-sm-3/5"] > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child,
  .page-id-617 .vc_row-has-fill .wpb_column[class~="vc_col-sm-3/5"] > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child {
    margin-bottom: 0;
  }
  .page-id-20 .vc_row-has-fill .wpb_column[class~="vc_col-sm-3/5"] > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child > .wpb_wrapper > :last-child,
  .page-id-18 .vc_row-has-fill .wpb_column[class~="vc_col-sm-3/5"] > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child > .wpb_wrapper > :last-child,
  .page-id-586 .vc_row-has-fill .wpb_column[class~="vc_col-sm-3/5"] > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child > .wpb_wrapper > :last-child,
  .page-id-617 .vc_row-has-fill .wpb_column[class~="vc_col-sm-3/5"] > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child > .wpb_wrapper > :last-child {
    margin-bottom: 0 !important;
  }

  /* group B — anchored on the row's own WPBakery custom class. Note that
     vc_custom_1760041977711 is shared by seven pages and vc_custom_1765441642445
     by four, so the .page-id- prefixes are the guard, not decoration: do not
     drop them. */
  .page-id-619 .vc_custom_1760041977711 .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child,
  .page-id-24 .vc_custom_1760041977711 .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child,
  .page-id-16 .vc_custom_1760041977711 .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child,
  .page-id-32 .vc_custom_1765441642445 .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child {
    margin-bottom: 0;
  }
  .page-id-619 .vc_custom_1760041977711 .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child > .wpb_wrapper > :last-child,
  .page-id-24 .vc_custom_1760041977711 .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child > .wpb_wrapper > :last-child,
  .page-id-16 .vc_custom_1760041977711 .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child > .wpb_wrapper > :last-child,
  .page-id-32 .vc_custom_1765441642445 .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child > .wpb_wrapper > :last-child {
    margin-bottom: 0 !important;
  }


  /* --- P. "Understanding Infusion Therapy" (82) and "Understanding Injection
         Therapy" (2436): bottom of the section ---------------------------
     Owner 2026-09-03, same brief line as the acupuncture one handled in
     page-fixes.css section 15. These two are a DIFFERENT cause and a
     different tier.

     DESKTOP IS ALREADY BALANCED — TOP-GAP 102px / BOT-GAP 102px at 1440 on
     both pages (top = 67px spacer column + 35px column-inner padding-top;
     bottom = 35px text-block margin + 67px spacer column). Re-measured with
     this file routed in: h=747 and h=676, identical to pristine. So this fix
     is scoped to the touch/narrow tiers and page-fixes.css is not involved.

     MEASURED CAUSE below 1025px: this file's own generic pair rule
       .entry-content .wpb_column[class*="vc_col-sm-3/5"] > .vc_column-inner
         { padding-bottom: 40px }   (28px under 768px)   spec (0,4,0)
     lands on the text column ONLY (the image column is vc_col-sm-2/5), so it
     is added to the bottom of the row and to nothing at the top:
       820 -> BOT-GAP 142 vs TOP-GAP 102   (+40)
       390 -> BOT-GAP 130 vs TOP-GAP 102   (+28)
     Zeroing it for just this row restores 102 / 102 at both widths. The
     (0,7,0) page-id chain beats the (0,4,0) generic rule at every tier,
     including the 768px one, so no second block is needed.

     Both pages share vc_custom_1765441642445 (it is the same duplicated row),
     and so do holistic-nutrition and weight-management — hence the explicit
     page-id prefixes. -------------------------------------------------- */
  .page-id-82 .entry-content .vc_row.vc_custom_1765441642445 .wpb_column[class*="vc_col-sm-3/5"] > .vc_column-inner,
  .page-id-2436 .entry-content .vc_row.vc_custom_1765441642445 .wpb_column[class*="vc_col-sm-3/5"] > .vc_column-inner {
    padding-bottom: 0;
  }


  /* --- Q. SKIN CLINIC 66: the white around "Led by Our Skin Care Expert"
         (the top half of the owner's screenshot A) -----------------------
     This also RE-LANDS section I3(a) from the 2026-08-19 round, which has
     been a DEAD SELECTOR ever since the client re-saved that block: it is
     anchored on .vc_custom_1773939551730 and that class no longer exists
     anywhere in the live HTML (0 hits). The heading's text column now carries
     .vc_custom_1788295079195 and its vc_empty_space is 14px, not 64px, so
     only the 35px of js_composer padding was left to re-take. Anchored twice
     below so a future re-save cannot kill it silently: the exact vc_custom
     class, plus the structural fact that this is the only top-level row on
     the page carrying an h1 and no vc_custom class of its own.

     Measured at 390 BEFORE (820 identical):
       cream band bottom -> heading ink = 51px
         35px .vc_column-inner padding-top that js_composer applies purely
         because this row follows a .vc_row-has-fill row, + a 14px
         vc_empty_space + 2px of leading.
     AFTER: 51 -> 28px.  (The cream band's OWN bottom inset, the third piece
     of screenshot A, is lopsided on desktop as well and is handled at all
     widths in page-fixes.css section 20.)

     .entry-content is in the chain purely to carry it past (0,5,0):
     js_composer.min.css is enqueued AFTER this file, so its
     .vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container >
     .vc_column-inner would otherwise win on source order at equal weight.

     Row 13 is a single full-width column at every width, so nothing can fall
     out of alignment with it — this one is safe across the whole tier. ---- */
  .page-id-66 .entry-content .vc_row:has(.vc_custom_1788295079195) > .wpb_column > .vc_column-inner,
  .page-id-66 .entry-content .vc_row:not([class*="vc_custom_"]):has(h1) > .wpb_column > .vc_column-inner {
    padding-top: 12px;
  }
}


/* --- Q2. SKIN CLINIC 66: the empty spacer COLUMNS that queue up once the
       feature rows STACK, plus the Dr Monson portrait column's top padding
       (the owner's screenshots B and C, and the second half of A) --------

   CAPPED AT 768px, NOT 1024px, and that cap is load-bearing on two counts:

   1. Bands B and C are almost entirely empty spacer COLUMNS, which only queue
      up once the row stacks. At 820 the rows do NOT stack and the same probe
      reads row[5] 107 top / 126 bottom and row[7] 134 / 142 — already
      balanced. The tablet is deliberately left exactly as it is.
   2. The Dr Monson rule below strips 40px of top padding from the PORTRAIT
      column only. Below 769px that column is stacked, so the padding is pure
      dead height and removing it is exactly what the owner asked for. From
      769 to 1024 the two columns are SIDE BY SIDE, and removing the padding
      from one of them lifts the portrait 40px above the first line of the
      paragraph beside it. Measured imgTop - textTop: 0px live, -40px with a
      1024 cap, at 769 / 820 / 900 / 1024. That would have been a visible
      regression on every iPad, in the page's most portrait-forward moment,
      which the owner never complained about. Measured stacking boundary:
      stacked at 768, side-by-side at 769.

   Measured at 390 BEFORE, with gapprobe.js:

   (B) after "...radiant skin and confidence that shines from the inside out."
       — row[5], the cream "Radiant Skin Begins with Inner Healing" band.
       248px from the last line of copy to the top of the next photo:
          63px  copy column — 35px .wpb_text_column margin-bottom (collapsed
                with the paragraph's own 18px) + 28px .vc_column-inner
                padding-bottom
          51px  row[5]'s 4th column: a vc_col-sm-12 holding nothing but a 16px
                vc_empty_space, on 35px of the .vc_column-inner padding
                js_composer gives stacked has-fill columns
          99px  row[7]'s 1st column: same shape, 64px spacer + the same 35px
          35px  the photo column's own .vc_column-inner padding-top
       against a 67px inset above that same band's first ink.

   (C) after "...supports whole-body balance, healing and lasting vitality."
       — row[7], the "Uncovering Root Cause" photo row. 162px from the last
       line to the next photo:
          63px  the same copy-column pair
          67px  row[7]'s 4th column (32px vc_empty_space + the same 35px)
          32px  row[9]'s leading spacer — KEPT: it is the only separation left
                between the two sections and it carries no padding

   (A2) orange rule under "Led by Our Skin Care Expert" -> Dr Monson photo,
       65px at 390 = 5px separator line + 10px .vc_custom_1758050090453
       margin-bottom + the 32px spacer row + 28px .vc_column-inner padding-top
       on the 2/5 photo column. (At 820 the same measurement is 77px and the
       column padding is 40px, not 28px — that is the tablet value, and it is
       deliberately left alone per point 2 above.) AFTER at 390: 37px.

   Every column hidden below was verified in the live DOM to contain a single
   .vc_empty_space and no other node. Hiding the column removes both the
   spacer and js_composer's 35px stacked-column padding in one declaration,
   with no cascade fight over .vc_column-inner.

   Rows are anchored on their photo filenames rather than on vc_custom_NNN
   classes: WPBakery regenerates those on every re-save, which is what
   silently killed section I3(a) above. Each anchor image occurs exactly once
   on this page (Room1 -> row[5], Acupuncture-Women-Results -> row[7],
   Dr-Carly-Monson -> row[15]); /about/ also carries a Dr-Carly-Monson-Main-Tall
   image, which is why .page-id-66 is not optional.

   AFTER at 390: (B) 248 -> 98px, (C) 162 -> 95px, (A2) 65 -> 37px.
   ------------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

  /* the two TRAILING spacer columns of the feature rows (bands B and C) */
  .page-id-66 .vc_row:has(img[src*="Vitality-Wellness-Skin-Clinic-Room1"]) > .wpb_column:nth-child(4),
  .page-id-66 .vc_row:has(img[src*="Acupuncture-Women-Results"]) > .wpb_column:nth-child(4) {
    display: none;
  }

  /* row[7]'s LEADING spacer is a different problem: the page author already
     marked it vc_hidden-xs ("hide me on a phone") and the content-restore
     block earlier in this file — the :is(.page-id-107, .page-id-66, ...)
     .wpb-content-wrapper .vc_row:not(.vc_row-o-full-height) >
     .wpb_column.vc_hidden-xs rule, display:block !important — un-hides it
     along with the real content columns that rule was written for. That is
     (0,6,0) + !important, so this has to be !important AND more specific;
     with .wpb-content-wrapper and .vc_hidden-xs in the chain it is (0,7,1).
     Measured, not derived: a first attempt at (0,5,1) + !important was a
     silent no-op and the 99px did not move.

     row[5]'s leading spacer is also vc_hidden-xs and is deliberately NOT
     touched — its 67px is the top inset this whole section is balanced
     against, and without it the photo would butt into the cream edge. */
  .page-id-66 .wpb-content-wrapper
    .vc_row:has(img[src*="Acupuncture-Women-Results"])
    > .wpb_column.vc_hidden-xs:nth-child(1) {
    display: none !important;
  }

  /* the Dr Monson portrait column's top padding — only while it is STACKED */
  .page-id-66 .entry-content .vc_row:has(img[src*="Dr-Carly-Monson"]) > .wpb_column[class*="vc_col-sm-2/5"] > .vc_column-inner {
    padding-top: 0;
  }
}