/* ============================================================================
   vitalitynhc.com — page-fixes.css                              2026-07-22

   ALL-WIDTH page-scoped fixes. This file is deliberately SEPARATE from
   responsive.css: responsive.css carries a hard invariant that it can never
   affect a desktop browser, and everything here is meant to apply at every
   width, desktop included. Keeping them apart means that invariant stays
   mechanically checkable (lint-responsive.css) and this file stays the one
   place to look for intentional desktop changes.

   Loaded after responsive.css by wds_enqueue_assets() in functions.php.
   Rollback: remove the 'wds-page-fixes' enqueue block, or delete this file's
   contents. Nothing else depends on it.

   CONTENTS
   1. Injectables treatment blocks -> match the microneedling styling.
   2. New Patients title banner -> match the height of the other title pages.
   3. Contact + Blog title text -> uppercase, matching the other banners.
   4. Blog banner -> stop the background tiling.
   5. Testimonials title banner -> adopt the shared banner pattern.
   6. Lyme banner -> mirror the photo so the subject reads left.
   7. Spa / skin quote bands -> the three cactus images, and legible type.
   8. Newsletter forms -> use the site typeface instead of the browser default.
   9. Blog/post banner -> desktop framing, so the room reads as a room.
  10. Microneedling -> retire the duplicate title banner above 1024px.
  11. The 1025-1199 dead band -> restore the content vc_hidden-md deletes.
  12. Desktop parallax banners -> stop the photo duplicating mid-scroll.
  13. Hero title pill -> no broken/overlapping pill on 13" laptop widths.
  --- 2026-09-03 round (owner's spacing brief) ---
  14. About 107 -> naturopathic copy matched to the doctor-bio typography.
  15. Acupuncture 37 -> drop the empty trailing column under "Understanding
      Acupuncture" (the cupping section is deliberately untouched).
  16. What To Expect separator -> pull it up under its heading (18, 37 x2).
  17. What To Expect timeline -> balance the dead space under the last card
      (20, 586, 617, 619, 24, 16, and ozone 30's bespoke component).
  18. Skin Analysis 62 + PDO Threads 55 -> close the gap above "Understanding"
      and below the "03 Pricing" card.
  19. Injectables 47 + Microneedling 49 -> raise the rule under the
      "<X> Treatments" heading.
  20. Skin Clinic 66 -> the Core Values cream band's floor.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. INJECTABLES (page-id-47) — match microneedling (page-id-49)

   Requested by the owner 2026-07-22, explicitly including desktop.

   Both pages use the same markup (.testing-section > .testing-row >
   .testing-block) and both inherit the theme's base sage card from style.css.
   The difference is that microneedling ships a block of page-level custom CSS
   in its WPBakery page settings and injectables ships none, so injectables
   fell back to: Sedona (#d3a794) button with white text, and left-aligned
   content. Verified identical at 1440 and 390 before changing anything, i.e.
   this was never a responsive issue.

   The rules below are ported verbatim from microneedling's page CSS so the two
   pages match exactly. The proper long-term home for this is the injectables
   page's own WPBakery custom-CSS box in wp-admin; if it is ever pasted there,
   delete this section.

   Scoped to .page-id-47 throughout, so no other page can be affected.
   -------------------------------------------------------------------------*/

/* Stack icon + content vertically, centred (microneedling's layout) */
.page-id-47 .testing-block {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-id-47 .testing-block .icon-circle {
  margin-bottom: 6px;
}

/* Centre the content column; keep the bullet list left-read inside it */
.page-id-47 .testing-content {
  width: 100%;
  text-align: center;
}

.page-id-47 .testing-content h3 {
  text-align: center;
}

.page-id-47 .testing-content ul {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
  max-width: 95%;
}

/* Default: WHITE button with sage text (injectables had Sedona + white text).
   !important matches microneedling's own declarations, which need it to beat
   the js_composer button styles. */
.page-id-47 .testing-section .vc_btn3.vc_btn3-size-lg.vc_btn3-shape-round-header.vc_btn3-style-book {
  background-color: #ffffff !important;
  color: #99b4ab !important;
  border: 2px solid #ffffff !important;
  border-radius: 30px !important;
  padding: 0.6rem 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
}

/* Hover on the card OR the button -> solid sage button, white text */
.page-id-47 .testing-section .testing-block:hover .vc_btn3.vc_btn3-size-lg.vc_btn3-shape-round-header.vc_btn3-style-book,
.page-id-47 .testing-section .vc_btn3.vc_btn3-size-lg.vc_btn3-shape-round-header.vc_btn3-style-book:hover {
  background-color: #99b4ab !important;
  color: #ffffff !important;
  border-color: #99b4ab !important;
  transform: translateY(-2px);
}

/* Card hover -> white card, Sedona outline, Agave text (the "inversion") */
.page-id-47 .testing-block:hover {
  background-color: #ffffff !important;
  border-color: #d3a794 !important;
  color: #738d94 !important;
  transform: translateY(-2px);
}

.page-id-47 .testing-block:hover .testing-content h3,
.page-id-47 .testing-block:hover .testing-content li {
  color: #738d94 !important;
}

.page-id-47 .testing-block:hover .testing-content li::before {
  background-color: #738d94;
}

/* Icon circle stays put on hover, exactly as on microneedling */
.page-id-47 .testing-block:hover .icon-circle {
  background-color: #ffffff;
  border-color: #99b4ab;
  box-shadow: 0 0 0 4px rgba(153, 180, 171, 0.25);
}

.page-id-47 .testing-block:hover .icon {
  color: #738d94;
}

/* ---------------------------------------------------------------------------
   2. NEW PATIENTS (page-id-113) — title banner height

   Requested by the owner 2026-08-19, explicitly desktop: "make the title image
   bigger top to bottom to match others".

   Measured at 1440x900, every title banner starts at y=223. The pages the
   owner is comparing against — about, lyme-disease, hair-restoration,
   injectables, skin-analysis, microneedling — all carry vc_row-o-full-height,
   so js_composer's JS writes an inline `min-height: 75.2205vh` on them and
   they render 677px tall. New Patients does not carry that class, gets no
   inline min-height, and is content-driven at 340px. Contact (324) and home
   (252) are the same shape but were not raised, so this stays page-scoped.

   Height is added through the row's two existing 100px vc_empty_space
   spacers rather than a min-height on the row. The row is block flow with
   three floated vc_col-sm-4 children and, unlike the 677px pages, has no
   vc_row-flex / vc_row-o-columns-middle to centre against, so a min-height
   would pool at the bottom and strand the title near the top. Growing both
   spacers by the same amount keeps the title optically centred for free.

   (100vh - 363px) / 2 tracks the window exactly as 75.2205vh does on the
   other pages: 363px is the row's fixed furniture (35px column-inner top
   padding + 70px pill + 35px pill margin) plus the 223px header offset. At a
   900px window that is 268.5px a side and the banner lands at 677px. The
   100px floor keeps it from collapsing on a short window.

   Desktop only. Below 1025px the mobile tiers own this banner, and the owner
   asked for no change there. The spacer heights are inline attributes, so
   !important is required.
   -------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
  .page-id-113 .vc_custom_1757604986742 .vc_empty_space {
    height: max(100px, calc((100vh - 363px) / 2)) !important;
  }
}

/* ---------------------------------------------------------------------------
   3. CONTACT (115) + BLOG — uppercase banner titles

   Owner 2026-08-19, both marked "overall/desktop version", so all widths.

   ABOUT US, NEW PATIENTS and LYME DISEASE are typed in caps in the page
   content; Contact ships "Contact Us" and the blog banner takes its text from
   wds_breadcrumb_title() in PHP. Doing it in CSS rather than editing content /
   the PHP string keeps the accessible name and the browser tab title in
   normal case, and survives anyone re-typing the heading in WPBakery.

   Blog is scoped to body.blog on purpose: .breadcrumb-title is the same h1
   used for single-post and category banners, and post titles must not be
   shouted.
   -------------------------------------------------------------------------*/
.page-id-115 .hero-heading h1 span {
  text-transform: uppercase;
  /* CORRECTION 2026-08-20. The uppercase above broke the pill on desktop and
     this is the other half of that change, not an optional extra.

     "CONTACT US" is wider than "Contact Us", and the title column is a
     vc_col-sm-4 giving the h1 380px. The capitalised line needs 385px, so it
     wrapped to two lines. The pill is painted on this span, which is
     display:inline with the default box-decoration-break: slice — so a wrapped
     span paints TWO background fragments, each carrying the full 56.25px side
     padding at one end only. That is the stepped, overlapping pair of white
     boxes the owner reported (measured: rects at y340 h90 and y394 h90, i.e.
     36px of overlap).

     nowrap is the fix rather than inline-block or box-decoration-break: clone.
     Measured all four candidates on the live page: inline-block keeps one box
     but grows the banner 324px -> 423px, and clone just stacks two pills.
     nowrap restores the banner to exactly 324px and the page to 2223px, which
     are the pre-uppercase numbers, and keeps the single-line pill that every
     other title page shows.

     Safe at every width: checked 320 / 360 / 390 / 768 / 1024 / 1440 — one
     line each time, never clipped, no horizontal page overflow. The mobile
     tiers already scale this title to 28px, where it fits easily. */
  white-space: nowrap;
}

body.blog .breadcrumb-title {
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   4. BLOG banner — background tiling

   style.css:1412 sets background-image/size/position on .breadcrumb-hero but
   never background-repeat, so it stays at the initial `repeat`. main.js's
   parallax then slides the y-position off zero and the top edge of the photo
   repeats into the foot of the 500px band. responsive.css already fixes this
   below 1025px; this is the desktop half. Harmless where cover already fills.
   -------------------------------------------------------------------------*/
.breadcrumb-hero {
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
   5. TESTIMONIALS (98) — bring the banner into the shared pattern

   Owner 2026-08-19, marked "overall/desktop version": "Make the title image
   layout match other title pages - this one was different than the others but
   she wants them all the same."

   Measured against about / contact / new-patients / lyme, this banner was the
   odd one out in five ways that a visitor can see:
     - title left-aligned, everything else centred
     - no white pill behind the title (its text column is not .hero-heading,
       which is the hook every per-page pill rule is written against, and the
       page ships no pill CSS of its own)
     - title in title case where the others are caps
     - 460px tall against 677px, because it lacks vc_row-o-full-height
     - a lead paragraph inside the banner, which no other page has

   The first four are corrected here. The paragraph is KEPT and centred rather
   than hidden — it is real copy the owner wrote, and hiding it is a one-line
   change if she would rather the banner carried the title alone.

   min-height is set directly instead of adding vc_row-o-full-height, because
   that class is load-bearing elsewhere: responsive.css:594 restores this
   page's vc_hidden-xs column with a `:not(.vc_row-o-full-height)` guard, and
   adding it would switch the column off at phone widths. calc(100vh - 223px)
   reproduces the 75.2205vh that js_composer writes inline on the other pages
   (223px is the header stack above the banner), so it tracks the window the
   same way rather than freezing at one window height.

   CORRECTED 2026-08-28. An earlier note here claimed the artwork carried a
   cream wash baked into its left half. It does not. Measured on the source
   file (What-To-Expect-3.jpg, 2400x1600): saturation runs 45/39/42/46 across
   the left half against 22/23/20 on the right, and contrast (stddev) 48-58
   left against 27-45 right -- both the opposite of what a cream wash does.
   The only hard vertical edges in the file (x=260 and x=704) are the window
   mullions. The photo is clean; every cream tone on this banner is CSS.
   -------------------------------------------------------------------------*/
/* Height is desktop-only. Below 1025px the mobile tiers already own this
   banner: the phone banner height is set there to the 62vh the other banners
   use. (The phone cream gradient that used to live in responsive.css's Tier 3
   was removed 2026-09-01 at the owner's request — see the note further down
   and the tombstone in responsive.css.) */
@media screen and (min-width: 1025px) {
  .page-id-98 #wpb-content-root > .vc_row:first-child {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 223px);
  }
}

/* Centre the whole stack. The h1 carries an inline text-align, hence the
   !important on that one declaration only. */
.page-id-98 .vc_custom_1757529346468 h1 {
  text-align: center !important;
}
.page-id-98 #wpb-content-root > .vc_row:first-child .wpb_text_column {
  text-align: center;
}

/* The shared pill, copied from the other pages' per-page CSS so the four
   banners are literally the same treatment. */
.page-id-98 .vc_custom_1757529346468 h1 span {
  display: inline-block;
  padding: 0.5em 1.25em;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-weight: 600;
  text-transform: uppercase;
}

/* No other banner carries a rule, and a left-aligned one under a centred
   title reads as a mistake. */
.page-id-98 #wpb-content-root > .vc_row:first-child .vc_separator {
  display: none;
}

/* Keep the lead paragraph to a readable measure now that it is centred. */
.page-id-98 #wpb-content-root > .vc_row:first-child .wpb_text_column:not(.vc_custom_1757529346468) {
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
}

/* ADDED 2026-08-19 (round B), owner: centre the lead paragraph at every width.
   The `text-align: center` above lands on the text COLUMN and the column does
   centre — but each of the four <p class="font-ttnorms"> inside it carries its
   own inline `style="text-align: left"`, and an inline declaration outranks any
   stylesheet rule of any specificity. So the block sat centred while its lines
   stayed left, which is exactly the "still doesn't match the other pages" the
   owner could see. Measured on the live page, not derived.

   Those inline declarations are NOT !important, so an author !important beats
   them; only an inline !important would have been unreachable (as it is on the
   spa quote attributions, which needed -webkit-text-fill-color instead).

   All widths on purpose: the banner is centred at every width after section 5,
   so leaving the phone out would just move the mismatch rather than fix it. */
.page-id-98 #wpb-content-root > .vc_row:first-child .wpb_text_column:not(.vc_custom_1757529346468) p {
  text-align: center !important;
}

/* REMOVED 2026-08-28 at the owner's request: the desktop cream gradient that
   used to paint on `.vc_parallax-inner::after` here (0 -> .78 alpha, left to
   right). It was written on the false premise recorded above -- the artwork
   carries NO baked wash -- so it was bleaching the walnut console, the
   succulent wall and the door out of the right half of the photo for nothing.
   Measured before removing: the render ramped 153 -> 234 in mean luminance
   across the row while the source file is flat (162 -> 182, no trend).
   Removing it is paint-only: banner height 677px and page height are byte
   identical at 1440/1180/1100/1025, and the title stays legible because it
   sits in its own rgba(255,255,255,.85) pill.
   UPDATE 2026-09-01: the SEPARATE phone gradient in responsive.css's ≤768
   tier, kept on 2026-08-28, is now removed too — the client reported still
   seeing it on the mobile version. Tombstone comment left in responsive.css
   where the rule lived. */

/* ADDED 2026-09-01, owner via client: make the signature names on this page
   smaller. The 11 names are `<p class="font-cookie text-agave">` with inline
   `font-size: 22px` — which has NEVER applied, because style.css's
   `p.font-cookie.text-agave { font-size: 50px !important }` outranks a
   non-important inline declaration. Measured 50px at phone and desktop.
   That style.css rule also signs the skin-clinic quote (66) and the service
   -page quotes, so it is not edited at source; the shrink is scoped to this
   page. (0,4,1)+!important beats style.css's (0,2,1)+!important on
   specificity. All widths on purpose — the request came alongside the
   desktop gradient change. 36px keeps the Cookie script legible while
   pulling the names below the quote copy in visual weight. */
.page-id-98 .entry-content p.font-cookie.text-agave {
  font-size: 36px !important;
}

/* ---------------------------------------------------------------------------
   6. LYME DISEASE (617) — mirror the banner photo

   Owner 2026-08-19: "the title image for the Lyme page - can you mirror it so
   the lady is on the left? We are doing this in hopes that it will show more
   of the photo on the mobile version cause right now it just shows her elbow
   and half the basket."

   The description is exactly right — measured at 390 the visible slice is the
   middle 42% of the source (29%-71%), which is basket edge, plants and her
   upper arm. Her face sits at 75-92% and never enters frame.

   IMPORTANT: mirroring alone does NOT fix the phone. A mirror is symmetric
   about the centre and the crop is centred, so 29-71% maps onto itself and
   the same pixels come back, merely handed over. Verified by rendering it.
   So this is two changes:
     - here, at every width: flip the photo, which is what the owner asked for
       and what actually reads on desktop (subject left, basket right);
     - in responsive.css, phone/tablet only: background-position: right center,
       which is what brings her into frame at 390. Combined with the flip she
       lands on the LEFT, which is the composition the owner wanted.
   Desktop deliberately keeps its position: background-size is 100% there, so
   the x-offset is inert but the declaration would also replace the
   `center 80px` y-offset and visibly re-frame the band.

   Flip the .vc_parallax-inner, never the row: the title column is a sibling
   of the inner, so flipping the row renders "LYME DISEASE" backwards
   (rendered and confirmed). The inner is the element that paints the photo —
   js_composer gives it `background-image: inherit` from the row.

   Specificity: responsive.css Tier 1 sets `transform: none !important` on
   .entry-content .vc_parallax .vc_parallax-inner at (0,3,0). This chain is
   (0,5,0) and also !important, and page-fixes.css is enqueued after
   responsive.css, so it wins. Without both it is a silent no-op below 1025px.
   -------------------------------------------------------------------------*/
.page-id-617 .entry-content .vc_row.vc_custom_1762284114389 > .vc_parallax-inner {
  transform: scaleX(-1) !important;
}

/* ---------------------------------------------------------------------------
   7. SPA / SKIN QUOTE BANDS — the three cactus images

   Owner 2026-08-19: "since it's not appearing right on the mobile version,
   she would just like to change the quote images overall for the spa pages
   and about skin clinic page: the 3 cactus images we used for quotes on the
   home/about us/new patients pages - she would like you to alternate between
   the 3 to replace the quote images on the spa pages."

   Why the current ones fail: the spa artwork is the mirror image of the
   cactus design. Each has a solid deep-sage text plate on the LEFT ~48% and
   the still-life on the right, and the type is WHITE. That works at 1440. At
   390 the centred cover crop takes only the middle ~26-34%, which lands on
   the plate-to-photo fade, so white text ends up on pale pixels — worst on
   pdo-threads and subnovii, where several lines are close to invisible. The
   cactus images put their pale cream space on the left and carry NAVY type,
   which is why they survive the same crop on home / about / new-patients.

   Three mechanisms, so three selector shapes — one blanket rule cannot do it:
     A. row background-image, .vc_parallax-inner inherits it
        -> injectables, microneedling, pdo-threads, skin-analysis
     B. data-vc-parallax-image, js writes an INLINE background on the inner
        -> subnovii, hair-restoration. Needs `> .vc_parallax-inner` and
           !important to beat the inline style.
     C. no parallax inner at all, row background only
        -> about-our-skin-clinic
   Row hooks are unique per page except subnovii (no vc_custom class — matched
   on its parallax image attribute) and hair-restoration (.testimonial-hero,
   unique sitewide).

   Alternating 1-2-3 down the family so no two adjacent pages repeat.
   -------------------------------------------------------------------------*/

/* -- A + C: row background ------------------------------------------------ */
.page-id-66 .entry-content .vc_row.vc_custom_1757354665952 {                       /* cactus 1 */
  background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2025/10/Mold-Toxicity-Quote-Vitality-Wellness-Clinic.png") !important;
}
.page-id-47 .entry-content .vc_row.vc_custom_1776677008482 {                       /* cactus 2 */
  background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2026/06/Quote-About-Us.png") !important;
}
.page-id-49 .entry-content .vc_row.vc_custom_1777286622970 {                       /* cactus 3 */
  background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2026/07/Quote-New-patients-page-1.png") !important;
}
.page-id-55 .entry-content .vc_row.vc_custom_1776607211818 {                       /* cactus 1 */
  background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2025/10/Mold-Toxicity-Quote-Vitality-Wellness-Clinic.png") !important;
}
.page-id-62 .entry-content .vc_row.vc_custom_1777195899784 {                       /* cactus 2 */
  background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2026/06/Quote-About-Us.png") !important;
}

/* -- B: inline background on the parallax inner --------------------------- */
.page-id-53 .entry-content .vc_row[data-vc-parallax-image$="Skin-Tightening-Vitality-Wellness-Clinic-1.png"] > .vc_parallax-inner {
  background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2026/07/Quote-New-patients-page-1.png") !important;  /* cactus 3 */
}
.page-id-2839 .entry-content .vc_row.testimonial-hero > .vc_parallax-inner {
  background-image: url("https://vitalitywellnessclinic.com/wp-content/uploads/2025/10/Mold-Toxicity-Quote-Vitality-Wellness-Clinic.png") !important;  /* cactus 1 */
}

/* -- Type must go navy with the artwork ----------------------------------
   The six spa bands set their quote colour on an inline <span> inside
   h3.quote-crimson. White on cream artwork is unreadable, so they move to
   #3a4f61, the same navy the cactus bands already use on home / about /
   new-patients (about-our-skin-clinic is already navy and is not listed).

   The quote body carries a plain inline `color: #ffffff`, so specificity is
   enough. The "– Dr. Judy" attribution carries `color: #ffffff !important`
   INLINE, and an inline important declaration outranks every stylesheet rule
   in the cascade — it cannot be overridden with `color` at any specificity.
   -webkit-text-fill-color paints the glyphs and takes precedence over color,
   which is the one clean way to reach it from CSS. Supported in Chrome, Edge,
   Safari and Firefox. Both are set so either carrier is covered. ---------- */
.page-id-47 .entry-content .quote-crimson span,
.page-id-49 .entry-content .quote-crimson span,
.page-id-55 .entry-content .quote-crimson span,
.page-id-62 .entry-content .quote-crimson span,
.page-id-53 .entry-content .quote-crimson span,
.page-id-2839 .entry-content .quote-crimson span,
.page-id-47 .entry-content p.font-cookie span,
.page-id-49 .entry-content p.font-cookie span,
.page-id-55 .entry-content p.font-cookie span,
.page-id-62 .entry-content p.font-cookie span,
.page-id-53 .entry-content p.font-cookie span,
.page-id-2839 .entry-content p.font-cookie span {
  color: #3a4f61 !important;
  -webkit-text-fill-color: #3a4f61;
}

/* -- and so must the quote mark -------------------------------------------
   These bands use quote_icon-white.png; the navy bands use quote_icon.png,
   same 31x24 asset in the other colour. It is an <img>, not a background, so
   the source is swapped with `content` — the standard CSS way to replace a
   replaced element's contents, and the only route available without editing
   page content in wp-admin.

   Matched on the file name rather than on .quote-crimson: only
   about-our-skin-clinic puts the mark inside the h3 that carries that class.
   The other six sit in a bare `h3 > span`, so a .quote-crimson-scoped rule was
   a silent no-op there. Page-scoped so no other use of the white mark can be
   caught by it. ---------------------------------------------------------- */
.page-id-47 .entry-content img[src*="quote_icon-white"],
.page-id-49 .entry-content img[src*="quote_icon-white"],
.page-id-55 .entry-content img[src*="quote_icon-white"],
.page-id-62 .entry-content img[src*="quote_icon-white"],
.page-id-53 .entry-content img[src*="quote_icon-white"],
.page-id-2839 .entry-content img[src*="quote_icon-white"] {
  content: url("https://vitalitywellnessclinic.com/wp-content/uploads/2025/09/quote_icon.png");
}

/* ---------------------------------------------------------------------------
   8. NEWSLETTER FORMS — use the site typeface

   Owner 2026-08-20, on the home "Get More Vitality" block: the SUBMIT button
   is not in the right font.

   Correct, and it is NOT something the 2026-08-19 round introduced. Verified
   by rendering the home page with the pre-change stylesheets routed back in:
   the button computes to Arial either way. Section C of responsive.css only
   released the button's width, never its font. What changed is that the button
   used to be a 351px full-bleed bar and is now 97px, so the letterforms sit
   next to the body copy at a readable size and the mismatch became visible.

   Cause: nothing in the theme sets font-family on these controls at all
   (whowins.js reports zero matching author rules), and form controls do not
   inherit type from their parent — they fall back to the browser's own default
   for widgets, which is Arial in Chrome on Windows.

   Scope is four controls, not one. Auditing every input, button, select and
   textarea across all 26 pages for a non-brand face, and discarding the
   icon-only ones where type is invisible (menu close, carousel arrows, dots),
   leaves exactly these: the home newsletter's field and button, and the blog
   sidebar newsletter's field and button. The field is included deliberately —
   fixing the button alone would leave "Email Address" sitting in Arial right
   beside it, which reads worse than leaving both wrong.

   The footer newsletter and the blog search box already inherit the stack
   correctly and are untouched, so these two forms are being brought into line
   with the rest of the site rather than given a new treatment. The stack is
   copied verbatim from what those working controls compute to.

   Weight and size are left exactly as they are. Only the family was wrong, and
   the owner signed off on the current sizing.
   -------------------------------------------------------------------------*/
.newsletter-wrapper .newsletter-form .newsletter-input,
.newsletter-wrapper .newsletter-form .newsletter-submit,
.blog-newsletter-form > input,
.blog-newsletter-form > button {
  font-family: "TT Norms Pro", Muli, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   9. BLOG / POST BANNER — desktop framing

   Owner 2026-08-20, on the new Dr Monson office photo: "size the parallax a
   bit more to have the office in".

   The photo is 1536x1024 painted with background-size: cover into a
   1440x500 band, so it scales to 1440x960 and only 52% of its height is ever
   on screen. The width is already fully visible — cover is width-fitting here
   — so nothing is gained by changing background-size. The two levers that
   actually show more room are the band's height and its vertical focus point.

   Both are moved:
     min-height  500px -> 620px   (65% of the photo's height now shows)
     focus         20% -> 50%     (the window drops off the ceiling and picks
                                   up the sofa, coffee table, rug and chair)

   Rendered all five combinations at 1440 before choosing (500/20, 500/45,
   500/65, 560/45, 620/50). At 500px the ceiling and the tops of the artwork
   eat the frame whatever the focus does; 620/50 is the first one where the
   seating group reads as a room.

   620px is also closer to the rest of the site than 500 was: every other title
   banner — about, new-patients, testimonials, lyme — renders at 677px, so this
   narrows a gap rather than making the blog an outlier.

   --breadcrumb-focus is read by the parallax loop in main.js. That loop writes
   background-position INLINE on every frame, and an inline declaration beats
   any stylesheet, so before this the framing could not be reached from CSS at
   all. background-position below is the pre-JS paint and is kept in step with
   the property so there is no first-frame jump.

   DESKTOP ONLY, deliberately. The phone and tablet banners are shorter (300px
   and 424px) with their own focus set in responsive.css, and both already show
   the whole room — the 2026-08-20 mobile screenshot confirms it. Below 1025px
   the property is undeclared and main.js falls back to its old 20%, so nothing
   changes there.
   -------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
  .breadcrumb-hero {
    --breadcrumb-focus: 50%;
    min-height: 620px;
    background-position: center 50%;
  }
}

/* ---------------------------------------------------------------------------
   10. MICRONEEDLING (49) — the duplicate title banner

   Owner 2026-08-20: "when you shrink it there is another background bleeding
   in ... i think its a bakery setting with a image background". Correct on
   both counts, and the mechanism is worth writing down because it is a trap
   that will catch anyone editing this site in WPBakery.

   The page ships TWO title rows: the real hero (vc_custom_1776517873693, the
   microneedling-title.png parallax) and an alternate (vc_custom_1765440589587)
   on a borrowed holistic-nutrition-title.jpg. The alternate's column is tagged
   vc_hidden-lg, which the author clearly read as "hide on large and up".

   It is not. In this js_composer build:
       .vc_hidden-lg  ->  @media (min-width:1200px) and (max-width:1399px)
       .vc_hidden-xl  ->  @media (min-width:1400px)
   lg is a BOUNDED band. The column needed vc_hidden-xl as well, so from
   1400px up — which is most desktop screens, and is why the owner saw it —
   the alternate comes back and the page shows two stacked banners.

   Measured on a mouse browser, before this rule:
       1025-1199  hero title HIDDEN (vc_hidden-md), alternate 124px  -> the
                  alternate is the only band carrying a title
       1200-1399  hero title visible, alternate 0px                  -> correct
       1400+      hero title visible, alternate 124px                -> two bands
   Below 1025 responsive.css already retires the alternate, so it is right at
   phone and tablet widths and is not touched here.

   Fix is in two parts. Retire the alternate at every width — harmless below
   1025 where responsive.css has already done it. Then, in the 1025-1199 band
   only, give the real hero its title column back, because that column is
   vc_hidden-md and removing the alternate would otherwise leave the page with
   an untitled banner. Above 1200 the hero title is already visible, so no
   rule is needed there.

   Specificity: js_composer's .vc_hidden-lg / .vc_hidden-md are (0,1,0) with
   !important. These chains are far above that and also !important.

   A site-wide audit found exactly ONE element carrying vc_hidden-lg without
   vc_hidden-xl — this one — so the fix is deliberately scoped to it rather
   than globally extending vc_hidden-lg into the xl band.
   -------------------------------------------------------------------------*/
.page-id-49 .entry-content .vc_row.Parallax-Effect.vc_custom_1765440589587 {
  display: none !important;
}

@media screen and (min-width: 1025px) and (max-width: 1199px) {
  .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;
  }
}

/* ---------------------------------------------------------------------------
   11. THE 1025-1199 DEAD BAND — restore the content vc_hidden-md deletes

   Found 2026-08-20 while auditing every page after the microneedling banner
   fix. This is the most serious thing on the site and it is PRE-EXISTING —
   nothing in this project caused it, and nothing in this project could have
   fixed it, because responsive.css is barred from this band by design.

   THE BAND. responsive.css may only reach `max-width: 1024px`, or 1199px when
   also gated on `(pointer: coarse)`. A mouse browser reports `pointer: fine`
   at every width. js_composer's md tier is `(min-width:992px) and
   (max-width:1199px)`. So a MOUSE browser between 1025 and 1199 is reached by
   neither: responsive.css has stopped, and vc_hidden-md is still deleting
   content. Touch devices in the same band are fine — responsive.css's coarse
   branch covers them. That is why this survived every previous round.

   WHAT IT LOOKED LIKE. The pages were built with "hide on tablet" ticked in
   WPBakery and no alternate content, so whole sections simply vanish. Measured
   on hormone-health at 1100 on a mouse: 19 elements at display:none, 84 words
   of body copy against 650 at both 1024 and 1200, page 2013px against 6212.
   The banner rendered with no title, its photo tiling, and "Key Health
   Benefits" sat above the footer with nothing under it. 18 of the 26 pages
   were affected; the worst lost 50-70% of their height.

   THE FIX. Undo vc_hidden-md for page content inside this band only. Columns
   need `flex` rather than `block` because js_composer lays out .vc_row-flex
   children as flex items; giving them `block` would break the grid.

   Scoped to .entry-content on purpose, so nothing in the header, navigation
   or footer is touched. Bounded at 1025 so it can never overlap
   responsive.css, and at 1199 so it can never reach the design the owner
   signed off on at 1200 and above.

   VERIFIED on all 26 pages: body word count at 1100 now equals the 1200
   reference exactly on every page, exactly one title banner per page, and no
   horizontal overflow anywhere. Checked specifically for the reverse failure —
   unhiding a mobile alternate so that two versions of a section show at once,
   which is what section 10 above had to fix on microneedling — and there are
   none.
   -------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) and (max-width: 1199px) {
  .entry-content .vc_hidden-md {
    display: block !important;
  }
  .entry-content .vc_row-flex > .wpb_column.vc_hidden-md,
  .entry-content .vc_row-o-full-height > .wpb_column.vc_hidden-md {
    display: flex !important;
  }
}

/* ---------------------------------------------------------------------------
   12. DESKTOP PARALLAX BANNERS — stop the photo duplicating mid-scroll

   Owner 2026-08-31 ("when you move the browser to smaller it creates a
   duplicate image it shouldnt"), reported from a 13" MacBook. Diagnosed
   2026-08-28: js_composer sizes .vc_parallax-inner to 130-180% of the row and
   slides it with skrollr, and 18 pages override its `cover` with per-page
   `background-size: 100% !important` (0,2,0). 100% = fit the width, so every
   landscape photo paints shorter than the strip, nothing sets
   background-repeat, and the initial `repeat` fills the gap with a second
   copy whose seam slides through the row as you scroll. The narrower the
   window, the shorter the width-fit image, so a 13" laptop sees it worst.

   THE FIX: let `cover` apply again on the affected row families. cover always
   fills the strip, so no seam can exist at any width; the cost is the small
   documented zoom (1.06-1.27x on most pages). Position is re-centred because
   the authored offsets (center 0/30/80/220/320px) were tuned for width-fit
   sizing, and under `cover` a px offset can expose an unpainted band when the
   height is the binding dimension. `.testimonial-hero` is hair-restoration's
   quote band, which declared no-repeat and letterboxed instead (390px of an
   889px strip showed the page behind it) — cover heals it the same way.

   Deliberate designs left alone: `.custom-parallax-zoomout` (a skin-clinic
   art treatment that exists only in page CSS text, no live element) is not
   matched. Three pages carry a family class on a strip that was NEVER
   100%-sized — enumerated from the 2026-08-31 pre-fix scan — and are
   excluded so this rule cannot re-crop a banner that was already correct:
   lab-testing (16, authors cover with a tuned `center 60%`), and
   vitamin-infusion-therapy (82) + vitamin-injections (2436), whose markup
   says `Parallax-Effect` but whose 100% rules were authored lowercase and so
   never applied — their heroes rendered cover|50% 0 all along. Bounded at
   min-width 1025: below that responsive.css already pins the strip (its
   0,3,0 rule), and in the 1025-1199 touch overlap both files compute the
   identical cover/center/no-repeat values. (`.gut-health-row` matches no
   live element either — the arm is kept as a guard in case the builder ever
   attaches the class the page CSS already expects.)

   Selectors carry !important at higher specificity than the per-page
   (0,2,0) !important rules, so they win no matter that page CSS prints last.
   -------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
  body:not(.page-id-16):not(.page-id-82):not(.page-id-2436) .entry-content .parallax-effect .vc_parallax-inner,
  body:not(.page-id-16):not(.page-id-82):not(.page-id-2436) .entry-content .Parallax-Effect .vc_parallax-inner,
  body:not(.page-id-16):not(.page-id-82):not(.page-id-2436) .entry-content .parallax-sizing .vc_parallax-inner,
  body:not(.page-id-16):not(.page-id-82):not(.page-id-2436) .entry-content .gut-health-row .vc_parallax-inner,
  body:not(.page-id-16):not(.page-id-82):not(.page-id-2436) .entry-content .testimonial-hero .vc_parallax-inner {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* ---------------------------------------------------------------------------
   13. HERO TITLE PILL — no broken/overlapping pill on 13" laptop widths

   Owner 2026-08-31, from a 13" MacBook: "Environmental header is broken",
   "Sauna red light header is broken" (screenshots at a ~1268px window).
   The hero title pill is an inline span (`.hero-heading span`, translucent
   white, 0.5em/1.25em padding). display:inline means box-decoration-break
   defaults to `slice`, so the moment the title wraps, the pill paints as two
   offset fragments that overlap by ~0.95em on the h1's 1.2 line rhythm —
   the corners cut into each other and the 0.85-alpha whites compound. This
   is the same trap responsive.css already fixed below 1025 (its
   `.hero-heading span { display: inline-block }`); a 13" Mac at 1100-1300px
   with a mouse was reached by neither that fix nor any wrap prevention.

   13a generalises the atomic-pill fix upward: if a title must wrap, it wraps
   INSIDE one rounded box. NOT a full no-op on one-line titles — inline-block
   makes the span's 0.5em vertical padding count in layout, which grows a
   content-driven banner row by ~45px and shifts a flex-centred pill a few
   px. Two consequences, both measured 2026-08-31 and bounded away:
   capped at max-width 1439 so the signed-off >=1440 desktop keeps its exact
   pre-fix geometry (nothing can wrap at >=1440 anyway — every title fits at
   45px there, and a zoomed browser lands inside the band where the cap and
   13b still apply); and contact (page-id-115) is excluded because its pill
   is white-space:nowrap (section 3) so it can never fragment, while its
   banner row is the one content-driven hero on the site — 13a there only
   grew the band 324->369px for zero benefit.

   13b keeps the one-line titles one line. Measured 2026-08-31 across all 24
   hero pages at 9 widths: every title fits its container at 45px down to
   ~1250px; below that the tightest fluid-container title is sauna's
   "SAUNA + RED LIGHT THERAPY" (natural 743px at 45px in a container that is
   ~0.9*viewport - 330px), whose exact-fit curve is 5.45vw - 20px. The
   coefficient below bakes in a ~7% margin for cross-platform font metrics,
   so it passes through 45px at ~1251px and tracks safely under every page's
   fit curve down to 1025 (worst constraints: sauna 35.9px and
   enviromental-detox 40.7px at 1025 — formula gives 33.5px). Above ~1251px
   the min() caps at the authored 45px: zero change to the signed-off
   desktop. Browser zoom shifts the effective CSS viewport, which simply
   lands on the same curve — so a zoomed 13" MacBook is covered too.
   Mouse-gated (pointer: fine) so it can never fight responsive.css's touch
   typography in the 1025-1199 overlap; touch devices there keep the
   clean-wrap behaviour instead. Excludes nothing: contact keeps its
   section-3 nowrap and merely loses its 5-25px pill overhang in the band;
   new-patients' pill hangs on the block-level .hero-heading itself, in a
   fixed 340px column, so it wraps as one clean box regardless (a vw formula
   cannot track a fixed-px container, and shrinking every other page's title
   to 34px at 1280 just for it would be the tail wagging the dog).
   -------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) and (max-width: 1439px) {
  body:not(.page-id-115) .entry-content .hero-heading span {
    display: inline-block;
  }
}

@media screen and (min-width: 1025px) and (pointer: fine) {
  .entry-content .hero-heading h1.h1-hero {
    font-size: min(45px, calc(5.09vw - 18.7px));
  }
}

/* ---------------------------------------------------------------------------
   14. ABOUT (107) — "What Is Naturopathic Medicine?" copy matched to the bios

   Owner 2026-09-03: "for the 'what is naturopathic medicine' paragraph text
   she would like the font size / paragraph spacing to be the same as the bio
   sections on this page."

   The bio paragraphs (Dr Judy row 6, Dr Carly row 12) are
   <p class="font-ttnorms text-agave">: 18px / 1.6 (28.8px), and because each
   sits in its own .wpb_text_column with margin-bottom:35px, consecutive bio
   paragraphs are separated by exactly 35.0px at 1440, 820 AND 390.

   The naturopathic block carries no typography class. Its <p> inherits the
   16px body base (whowins.js: ZERO author rules match it for font-size or
   line-height) and the visible copy is sized by an INLINE
   style="color:#738d94; font-size:20px" on the inner <span>. An inline
   declaration without !important loses to an !important declaration in a
   stylesheet — that is why these need !important.

   Spacing: the source uses literal <p>&nbsp;</p> spacer paragraphs, so the
   real-paragraph gap is  margin-bottom + spacer line box + margin-bottom
   = 16 + 25.6 + 16 = 57.6px. The winning margin rule is
   .entry-content .wpb_text_column p{margin-bottom:1em!important} at (0,2,1),
   which functions.php re-prints LAST inside <style id="wds-service-component-
   overrides"> — after this file — so beating it needs !important AND more
   specificity. The .page-id-107 prefix takes this chain to (0,4,1).
   At 18px the spacer's line box is 28.8px, so the two collapsed margins must
   supply 35.0 - 28.8 = 6.2px, i.e. 3.1px each (adjacent siblings collapse to
   max(3.1, 0) since margin-top is 0). Measured result: 35.0px between real
   paragraphs at d, t and m — identical to the bios. The trailing 3.1px still
   collapses into .wpb_text_column{margin-bottom:35px} exactly as the old 16px
   did, so the row's bottom gap is unchanged (38px -> 39px at 1440).

   All widths on purpose: the mismatch is identical at 1440, 820 and 390, so
   it is a content-typography error, not a responsive artefact.
   .vc_col-sm-9 occurs exactly ONCE in the rendered /about/ markup and
   .page-id-107 confines it to this page. The section heading
   (h1.font-crimson-bold.h1-hero, 45px Crimson Text) is deliberately NOT
   matched and measured identical before/after.
   -------------------------------------------------------------------------*/
.page-id-107 .entry-content .vc_col-sm-9 .wpb_text_column p,
.page-id-107 .entry-content .vc_col-sm-9 .wpb_text_column p span {
  font-size: 18px !important;
  line-height: 1.6 !important;
}
.page-id-107 .entry-content .vc_col-sm-9 .wpb_text_column p {
  margin: 0 0 3.1px !important;
}


/* ---------------------------------------------------------------------------
   15. ACUPUNCTURE + CUPPING (37) — "Understanding Acupuncture" bottom spacing

   Owner 2026-09-03, listed with Infusion Therapy and Injection Therapy:
   "it's the spacing at the bottom of the 'understanding xxx' section" —
   explicitly the ACUPUNCTURE section only, "good on the cupping part".

   MEASURED CAUSE: row 2 (.vc_custom_1760041977711) ships FOUR columns —
     [1] .vc_col-sm-12 .vc_hidden-md .vc_hidden-sm .vc_hidden-xs
         (h1 "ACUPUNCTURE THERAPY" + a 16px spacer)
     [2] .vc_col-sm-2/5   image
     [3] .vc_col-sm-3/5   heading + separator + copy
     [4] .vc_col-sm-12 .vc_hidden-md .vc_hidden-sm .vc_hidden-xs
         — EMPTY, one 16px .vc_empty_space and nothing else
   Column [4] paints nothing yet takes the theme's 35px .vc_column-inner
   padding-top plus its 16px spacer = 51px of dead box below the last ink.

   Why it measures 51px at EVERY width — three different reasons; do NOT read
   this as "vc_hidden-* is inert", it is not (see sections 10 and 11 above):
     >= 1200px      vc_hidden-md is (min-width:992px) and (max-width:1199px),
                    so it simply never applies.
     1025 - 1199px  section 11 above deliberately un-hides it
                    (.entry-content .vc_hidden-md{display:block!important}).
     <= 1024px      responsive.css restores it for the touch/narrow tiers.
   Measured column height: 51px at 1440, 1200, 1100, 820 and 390 alike.

   SPECIFICITY: this chain is (0,6,0) + !important, so it beats section 11's
   (0,3,0) + !important un-hide. Verified at 1100px on a MOUSE (pointer:fine —
   the dead band neither responsive.css nor d/t/m testing reaches): column [4]
   goes block h=51 -> none h=0 while column [1], the h1 column section 11
   restores, is UNCHANGED at h=140.

   :nth-child(4) is deliberate and load-bearing. The row's FIRST child carries
   the SAME .vc_col-sm-12.vc_hidden-md.vc_hidden-sm.vc_hidden-xs class set and
   holds the "ACUPUNCTURE THERAPY" heading, so :last-child alone would be the
   only guard against hiding real copy. Pinning the position means that if
   anyone adds a 5th block to this row in WPBakery the rule stops firing (the
   51px spacer comes back) instead of silently hiding the new block live.

   RESULT — row 2 height -51px at every width, nothing else on the page moves
   (every other box is a pure -51px translation):
     1440  TOP/BOT 55/86 (h723) -> 55/35 (h672)
     1100                (h704) ->       (h653)
      820         55/130 (h831) -> 55/79 (h780)
      390         53/118 (h1344)-> 53/67 (h1293)
   This does not make row 2 symmetric — it lands its BOTTOM gap exactly on the
   sibling the owner approved, row 12 "Understanding Cupping Therapy"
   (.vc_custom_1762198497474), whose bottom gap is 35/79/67px at 1440/820/390.
   Row 12 is matched by neither hook and is verified byte-identical after this
   change (h=688/812/1325, gaps 71/35, 71/79, 69/67) — only its y origin moves
   up by the same 51px.
   -------------------------------------------------------------------------*/
.page-id-37 .entry-content .vc_row.vc_custom_1760041977711 > .wpb_column.vc_column_container.vc_col-sm-12:nth-child(4):last-child {
  display: none !important;
}


/* ---------------------------------------------------------------------------
   16. "WHAT TO EXPECT" SEPARATOR — pull the rule up under its heading

   Owner 2026-09-03: "move 'What to expect' orange line up" on holistic
   nutrition (18) and on BOTH What To Expect sections of acupuncture +
   cupping (37).

   The element is the standard WPBakery .vc_separator (1px holder carrying a
   5px sedona .vc_sep_line), not anything inside the raw-HTML timeline.
   Measured heading-box-bottom -> painted-line-top, identical at 1440/820/390
   (an all-width authoring inconsistency, not a responsive one):

     hormone-health (20)   17px   <- reference, not complained about
     gut-health (586)      17px   <- reference, not complained about
     holistic-nutrition    33px
     acupuncture WTE #1    36px
     acupuncture WTE #2    31px

   The reference pages are: heading text-column margin-bottom 16px, then the
   separator (+1px for its own holder box). The three complained-about
   sections each add to that:

   16a holistic (18): an extra 16px .vc_empty_space sits BETWEEN the heading
       text column and the separator (WPBakery prints its height inline, hence
       !important). vc_custom_1779804083171 is the What To Expect heading text
       column and is unique on the page, so the adjacent-sibling selector hits
       exactly one element — the row's other vc_empty_space (the 32px one
       above the heading) and the "Why Holistic Nutrition Matters" separator
       in row 4 are both untouched.

   16b acupuncture (37): no spacer; the heading text column simply carries a
       larger bottom margin — 35px on the first section (no vc_custom class at
       all, so it takes js_composer's .wpb_content_element{margin-bottom:35px})
       and 30px on the second (vc_custom_1780494905009, !important). Both What
       To Expect rows and ONLY those two carry vc_custom_1762200247099, and
       each holds exactly one .wpb_text_column, so one rule fixes both.
       (0,4,0) + !important clears both the (0,1,0) vc_custom rule that prints
       after this file and js_composer's (0,1,0) default.

   Everything below the line shifts up by the same amount; the line-to-timeline
   gap is unchanged and the section simply loses 16/19/14px of height. That is
   exactly how the reference pages are built.
   -------------------------------------------------------------------------*/
.page-id-18 .vc_custom_1779804083171 + .vc_empty_space {
  height: 0 !important;
}

.page-id-37 .vc_custom_1762200247099 .wpb_wrapper > .wpb_text_column {
  margin-bottom: 16px !important;
}


/* ---------------------------------------------------------------------------
   17. "WHAT TO EXPECT" TIMELINE — balance the dead space under the last card

   Owner 2026-09-03: "spacing is too big at bottom after last 'what to expect'
   box" on hormone health (20), gut health (586), lyme disease (617),
   mold + mycotoxins (619), environmental detox (24), ozone therapy (30) and
   lab testing (16).

   It is too big on DESKTOP too, so this is an all-width fix and lives here
   rather than in responsive.css. Measured at 1440 / 820 / 390 — the numbers
   do not vary with width because nothing in the chain is viewport-dependent:

     TOP-GAP  71 / 71 / 69 px  = 35px column-inner padding-top
                               + 32px leading vc_empty_space
                               + ~4px h1 half-leading
     BOT-GAP 137 / 137 / 137   = 70px section padding-bottom
       (20,586,617,619,24,16)  + 35px .wpb_raw_code margin-bottom
                               + 32px trailing vc_empty_space
     BOT-GAP 147 / 147 / 147   = 80 + 35 + 32
       (30, ozone)
   i.e. the bottom carries 66-76px more dead space than the top.

   Only ONE lever is touched: the component's own padding-bottom. At 4px the
   remaining 4 + 35 + 32 = 71px lands exactly on the 71px above the heading.
   The 35px .wpb_raw_code margin and the 32px vc_empty_space are WPBakery
   chrome shared with other blocks on these pages and are deliberately left
   alone. If either is ever deleted in WPBakery this rule must be re-measured
   — the bottom would fall to 35px and become too tight.

   CASCADE: .expect-steps-timeline{padding:24px 32px 70px!important} is
   printed by functions.php's #wds-service-component-overrides at wp_head
   priority 999, i.e. AFTER this file, at (0,1,0)!important — so the
   .page-id-NN prefix (0,2,0) plus !important is what takes it, and it is also
   what keeps the change off the other pages that use this component. Ozone's
   80px comes from its own page-level inline <style> at (0,1,0) with no
   !important; the prefix alone out-specifies it, and !important is kept for
   symmetry and to survive a future page re-save.

   PAGE-SCOPED ON PURPOSE: the other pages shipping .expect-steps-timeline are
   untouched — verified on holistic-nutrition (18) and weight-management (32),
   whose row geometry and TOP/BOT gaps are identical before and after. Sauna
   (39) keeps its own responsive.css padding-bottom:28px rule.
   -------------------------------------------------------------------------*/
.page-id-20 .expect-steps-timeline,
.page-id-586 .expect-steps-timeline,
.page-id-617 .expect-steps-timeline,
.page-id-619 .expect-steps-timeline,
.page-id-24 .expect-steps-timeline,
.page-id-16 .expect-steps-timeline,
.page-id-30 .vnhc-ozone-journey {
  padding-bottom: 4px !important;
}


/* ---------------------------------------------------------------------------
   18. SKIN ANALYSIS (62) + PDO THREADS (55) — the two gaps the owner named:
       "remove spacing gap above understanding section and below pricing
       section at bottom".

   ALL WIDTHS on purpose. Measured live before touching anything, and the two
   gaps are within 2px of each other at 1440 / 820 / 390 — desktop is exactly
   as lopsided as the phone:

     gap ABOVE "Understanding …"   62: 106 / 106 / 104   55: 106 / 106 / 104
     gap BELOW the pricing card    62: 137 / 137 / 137   55: 165 / 165 / 165
     (the same What To Expect row OPENS with a 55 / 55 / 53 top inset)

   The "pricing section" is the third card of the What To Expect timeline
   ("03 Pricing"), so this is the bottom of that row.

   (a) Above Understanding — 106px, none of it authored for this boundary:
       35px of .vc_column-inner top padding js_composer applies to EVERY column
       of the row purely because the row follows the cream .vc_row-has-fill
       intro band (the row has THREE columns: a lone 32px spacer, the content,
       and a mirror spacer), plus that 32px vc_empty_space, plus ~4px of h1
       half-leading. The spacer column's 35px and half its empty space go; the
       CONTENT column keeps its 35px so the row's internal rhythm is untouched.
       -> 55px, exactly the What To Expect row's top inset, so every section on
       the page now opens on the same step.

   (a2) …and the same treatment on the row's mirror-image THIRD column, or the
       section would close with 102px against a 55px open — the fix would have
       turned a balanced 106/102 into a 47px imbalance the other way, in the
       very section the client pointed at. -> 55/51 at d, 55/51 at t, 53/51 at m.

   (b) Below the pricing card — 137px on 62, 165px on 55:
         70px  section.expect-steps-timeline padding-bottom
         35px  .wpb_content_element margin-bottom on the raw-HTML wrapper
         32px  a trailing vc_empty_space, last child of the row wrapper (62)
         60px  an entire extra spacer ROW after the What To Expect row (55)
       The 70px is cut to 24px — the section's OWN authored top padding, so the
       timeline is symmetric in itself — the page-specific 32px and 60px are
       removed, and the 35px WPBakery margin is left alone. Both pages land at
       59-60px against the 55px top inset: the section closes with the same air
       it opens with, and 78px (62) / 105px (55) of dead white is gone.
       These pages therefore close tighter than the sibling service pages
       fixed in section 17 (71px) — that is the direct consequence of the
       client asking to "remove" here and "reduce" there, and each section is
       balanced against its OWN top inset.

   SPECIFICITY (measured with whowins.js, not derived):
   - 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 35px chain — a (0,5,0) — beats an equal (0,5,0) here on
     source order. .entry-content is in the (a) chains purely to clear it.
   - .expect-steps-timeline{padding:24px 32px 70px!important} is printed by
     #wds-service-component-overrides LAST, so (b) needs the page-id prefix
     AND !important.
   - vc_empty_space heights are inline (style="height: 32px"), hence !important.

   The 62 and 55 selectors are deliberately NOT bundled into one list wherever
   one of them uses :has(): a CSS selector list is invalid as a WHOLE if any
   selector in it is invalid, so pairing them would take page 55's fix down
   with it on an engine without :has() (Safari/iOS < 15.4, Firefox < 121).

   WARNING: page 62's Understanding row carries no vc_custom class of its own
   (its classes are exactly "vc_row wpb_row vc_row-fluid"), so the Observ
   photo's filename is the only handle available. If that image is ever
   re-uploaded under a different name this rule silently stops applying and the
   106px gap returns — re-point the src match, do not re-diagnose.

   ISOLATION: every selector counted on the live DOM — exactly 1 match on its
   own page, 0 on its twin, 0 on microneedling (49) and sauna (39), the control
   pages using the same What To Expect component (microneedling document height
   and timeline padding byte-identical with and without this block).
   -------------------------------------------------------------------------*/

/* (a) above "Understanding …" — 106px -> 55px */
.page-id-62 .entry-content .vc_row:has(img[src*="Skin-Analysis-Vitality-Clinic"]) > .wpb_column:first-child > .vc_column-inner {
  padding-top: 0;
}
.page-id-55 .entry-content .vc_row.vc_custom_1775557488269 > .wpb_column:first-child > .vc_column-inner {
  padding-top: 0;
}
.page-id-62 .vc_row:has(img[src*="Skin-Analysis-Vitality-Clinic"]) > .wpb_column:first-child .vc_empty_space {
  height: 16px !important;
}
.page-id-55 .vc_row.vc_custom_1775557488269 > .wpb_column:first-child .vc_empty_space {
  height: 16px !important;
}

/* (a2) …and balance the CLOSE of that same Understanding section */
.page-id-62 .entry-content .vc_row:has(img[src*="Skin-Analysis-Vitality-Clinic"]) > .wpb_column:last-child > .vc_column-inner {
  padding-top: 0;
}
.page-id-55 .entry-content .vc_row.vc_custom_1775557488269 > .wpb_column:last-child > .vc_column-inner {
  padding-top: 0;
}
.page-id-62 .vc_row:has(img[src*="Skin-Analysis-Vitality-Clinic"]) > .wpb_column:last-child .vc_empty_space {
  height: 16px !important;
}
.page-id-55 .vc_row.vc_custom_1775557488269 > .wpb_column:last-child .vc_empty_space {
  height: 16px !important;
}

/* (b) below the What To Expect pricing card — 137/165px -> 59/60px */
.page-id-62 .expect-steps-timeline,
.page-id-55 .expect-steps-timeline {
  padding-bottom: 24px !important;
}

/* (b1) skin analysis: the trailing 32px spacer inside the What To Expect row */
.page-id-62 .vc_row:has(.vc_custom_1779807264059) .wpb_wrapper > .vc_empty_space:last-child {
  height: 0 !important;
}

/* (b2) pdo threads: the whole 60px spacer ROW between What To Expect and the
        FAQ band (an empty raw-HTML block + a 25px vc_empty_space + the same
        35px column-inner top padding) */
.page-id-55 .entry-content .vc_row:has(.vc_custom_1779807303215) + .vc_row > .wpb_column > .vc_column-inner {
  padding-top: 0;
  padding-bottom: 0;
}
.page-id-55 .vc_row:has(.vc_custom_1779807303215) + .vc_row .vc_empty_space {
  height: 0 !important;
}
.page-id-55 .vc_row:has(.vc_custom_1779807303215) + .vc_row .wpb_content_element {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   19. INJECTABLES (47) + MICRONEEDLING (49) — raise the rule under the
       "<X> Treatments" heading

   Owner 2026-09-03: "move orange line up from 'treatments' section".

   Both pages carry TWO identical heading + separator pairs — same shortcode,
   same h1.font-crimson-bold.h1-hero.text-minty, same
   .vc_separator.vc_sep_border_width_5 painting a 240px 5px #d3a794 rule:
   "<X> Treatments" and "What To Expect". The only difference is that the What
   To Expect text column ships a per-page WPBakery custom class
   (vc_custom_1779807482107 on 47, vc_custom_1779807572574 on 49) whose
   vc_custom-css block overrides js_composer's stock
   .wpb_content_element{margin-bottom:35px} down to 16px !important. The
   treatments column ships no vc_custom class at all, so it keeps the 35px.
   That single authoring omission is the whole complaint.

   Measured live, heading BOX bottom -> painted line top / heading INK bottom
   -> painted line top:
                        treatments        What To Expect (reference)
       1440 (d)         36px / 41px        17px / 22px
        820 (t)         36px / 41px        17px / 22px
        390 (m)         36px / 40px        17px / 21px

   Identical at every width, so this is an all-width authoring inconsistency,
   not a responsive one. 16px reproduces the page's own reference pair exactly
   rather than inventing a number; the same 17px/22px pair is what pdo-threads,
   subnovii, skin-analysis and vitamin-infusion-therapy already show.

   Anchored on the row that actually contains the treatments card grid
   (.testing-section) AND on "text column immediately followed by a separator",
   so it cannot reach the title banner, the Understanding block, the
   testimonial or the SEO footer column. Verified: exactly ONE match per page.
   The What To Expect column is in a different row and is untouched (still
   17px/22px after the change).

   js_composer.min.css loads after this file but its .wpb_content_element rule
   is (0,1,0) and not !important, so no !important is needed. Composes with
   section 1 above, which touches only .testing-block / .testing-content / the
   vc_btn3 and no vertical margins in this row. Both selectors depend on
   :has(), so on an engine without it the rule is simply inert — it degrades to
   today's spacing, never to a half-applied state.
   -------------------------------------------------------------------------*/
.page-id-47 .vc_row:has(.testing-section) .wpb_text_column:has(+ .vc_separator),
.page-id-49 .vc_row:has(.testing-section) .wpb_text_column:has(+ .vc_separator) {
  margin-bottom: 16px;
}


/* ---------------------------------------------------------------------------
   20. SKIN CLINIC (66) — Core Values cream band: the bottom inset is twice
       the top inset AT EVERY WIDTH

   Part of the owner's 2026-09-03 phone screenshot (A), but this half is
   measurably lopsided on the signed-off desktop too, so it is corrected here
   rather than in responsive.css. Measured at 1440, and identical at 820 and
   390 because every contributor is a fixed px value (hand-measured row-top ->
   heading ink and last-card text -> row bottom; gapprobe's BOT-GAP reads 35px
   here because the cream section's own background box counts as ink):

     row .vc_custom_1773947794904 (cream #FCF2EB, raw-HTML .vnhc-about-values)
       top inset    = 35-39px  row top -> "Skin Clinic's Core Values" ink
       bottom inset = 79px     last value-card text -> row bottom, being
                      44px     section.vnhc-about-values padding-bottom
                    + 35px     js_composer's .wpb_content_element margin-bottom
                               on the raw-HTML block wrapping that section

   The 44px is the section's own inset and is symmetric by design (44px top AND
   bottom); the extra 35px is WPBakery's generic element margin doing nothing
   but dropping the cream floor 35px past the last card. Removing it lands 44px
   against the ~39px top — balanced — and takes 35px out of the band the client
   circled, at every viewport.

   (0,3,0) beats js_composer's (0,1,0) .wpb_content_element, which matters
   because js_composer.min.css is enqueued AFTER this file. Two SEPARATE rules,
   not one selector list: a list is all-or-nothing, so bundling the :has()
   anchor with the plain-class anchor would drop the fallback too on an engine
   without :has(). The :has() form is the durable one — WPBakery regenerates
   vc_custom_NNN whenever the block is re-saved, which is exactly what silently
   killed responsive.css section I3(a).

   The second .wpb_raw_html on this page has neither .vnhc-about-values nor
   that vc_custom class, so its own 35px margin is untouched (verified).
   -------------------------------------------------------------------------*/
.page-id-66 .wpb_raw_html.vc_custom_1783973451061 {
  margin-bottom: 0;
}
.page-id-66 .wpb_raw_html:has(.vnhc-about-values) {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   21. VITAMIN INFUSION THERAPY (82) + VITAMIN INJECTIONS (2436) —
       "Understanding <X> Therapy" bottom spacing

   Owner 2026-09-06: "For these 2 pages, it's the spacing at the bottom of the
   'understanding xxx' section: Infusion Therapy, Injection Therapy."

   These are the other two pages from the SAME 2026-09-03 sentence that
   produced section 15 above (acupuncture + cupping 37). Only acupuncture was
   fixed in that round; these two were missed. Same defect, same lever, same
   resulting bottom gap (35px), so all three "Understanding …" sections now
   close identically.

   MEASURED CAUSE: both pages carry the SAME copy-pasted row
   (.vc_custom_1765441642445 — one row per page, verified 1 match each) with
   FOUR columns:
     [1] .vc_col-sm-12   EMPTY — one 32px .vc_empty_space and nothing else
     [2] .vc_col-sm-2/5  image (Infusion-… / Injection-Therapy-Vitality-…)
     [3] .vc_col-sm-3/5  h1 "Understanding …" + separator + two paragraphs
     [4] .vc_col-sm-12   EMPTY — one 32px .vc_empty_space and nothing else
   Column [4] paints nothing yet occupies 35px of .vc_column-inner padding-top
   plus its 32px spacer = 67px of dead cream below the last line of copy.
   Unlike section 15 these columns carry NO vc_hidden-* classes, so the 67px
   is present at every width — measured 1440 / 820 / 390 alike.

   WHY THE TOP IS DELIBERATELY LEFT AT 102px. The row is a filled cream band
   (#fcf2eb) butted straight onto the parallax hero above it, so its opening
   inset is the only separation from the banner and reads as intentional. What
   the owner is looking at is INK-TO-INK space, and that was lopsided:

                       above the content   below the content
     before   d/t        102px               173px   (67 dead + 35 wpb margin
                                                      + 71 next row top inset)
     before   m          102px               171px
     after    d/t        102px               106px
     after    m          102px               104px

   i.e. the section now closes with the same air it opens with, at every
   viewport, without touching the band's top padding.

   ROW HEIGHT: -67px exactly at 1440 (747->680, 676->609), 820 (919->852,
   849->782) and 390 (1379->1312, 1337->1270) on the two pages — a pure
   removal; every box below is a straight -67px translation.

   :nth-child(4):last-child is load-bearing, exactly as in section 15: the
   row's FIRST child carries the same .vc_col-sm-12 class set, so :last-child
   alone would be the only guard. Pinning the position means that if anyone
   adds a 5th block to this row in WPBakery the rule stops firing (the 67px
   comes back) instead of silently hiding the new block on the live site.

   CASCADE: (0,6,0) + !important. js_composer.min.css is enqueued AFTER this
   file and it is js_composer's own
   .vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container >
   .vc_column-inner {padding-top:35px} — a (0,5,0) — that supplies 35 of the
   67px (measured with whowins.js, not derived).

   ISOLATION: page-id scoped. .vc_custom_1765441642445 happens to be shared by
   BOTH pages (the row was copy-pasted between them) and by neither of the
   control pages; each selector matches exactly 1 element on its own page.

   WARNING: WPBakery regenerates vc_custom_NNN whenever the row is re-saved in
   the editor, which is what silently killed responsive.css section I3(a). If
   the 67px ever returns, re-point the class — do not re-diagnose. The image
   filenames (Infusion-Vitality-Wellness-Clinic.png /
   Injection-Therapy-Vitality-Wellness-Clinic.png) are the durable handles.
   -------------------------------------------------------------------------*/
.page-id-82 .entry-content .vc_row.vc_custom_1765441642445 > .wpb_column.vc_column_container.vc_col-sm-12:nth-child(4):last-child,
.page-id-2436 .entry-content .vc_row.vc_custom_1765441642445 > .wpb_column.vc_column_container.vc_col-sm-12:nth-child(4):last-child {
  display: none !important;
}