/* ============================================================
   Westpark LAYOUT fixes for the MediPlace theme (no color changes).
   Loaded after style.css. Reversible.
   ============================================================ */

/* ============================================================================
   PALETTE - the single source of truth for colour on this site.
   ----------------------------------------------------------------------------
   TO RESTYLE THE SITE, EDIT THE VALUES IN THIS BLOCK AND NOTHING ELSE.

   Two stylesheets paint this site and they now share these tokens:

     style.css            ~20,600 lines, the MediPlace theme. It was already
                          tokenised (--mediplace-base / --mediplace-black), so
                          the "theme bridge" at the bottom of this block
                          repoints the theme's own tokens at ours. That is what
                          makes a palette change reach the template's markup
                          instead of only ours.
     westpark-layout.css  this file. Every colour literal in it was replaced
                          with one of the tokens below.

   Load order is style.css -> westpark-layout.css -> responsive.css, and both
   :root blocks carry the same specificity, so the later one (ours) wins.
   responsive.css declares no colours and no tokens.

   Deliberately NOT tokenised, and deliberately so:
     - white. 164 uses, and it is not a palette decision.
     - the form-validation red and green families. They are state colours; they
       must not follow the brand when the brand changes.

   Every value here is byte-identical to the literal it replaced, so adding this
   block was a no-op visually. Verified element-by-element against the live
   staging DOM with Puppeteer/_wvd_palette_probe.js (~21,000 elements, 24
   page/viewport combinations, zero resolved-colour differences).

   NOTE for whoever picks the new palette: the brand gold the client asked for
   is still absent. --wvd-gold (#B8923F) is used three times, all on the
   /special-offers/ coupon. Their live site is gold-dominant (#c07d1d, 43 uses).
   See CLIENT-FEEDBACK-PLAN-2026-07-28.md.
   ========================================================================== */
:root {
  /* --- Brand ------------------------------------------------------------ */
  /* Extracted from westparkvillagedental.com with the Yoink extractor, by
     COMPUTED USAGE rather than by reading their stylesheet:

        text  rgb(0,0,0)        207 uses   <- body copy is pure black
        text  rgb(192,125,29)    71 uses   <- gold accent
        text  rgb(0,29,56)       12 uses   <- headings, near-black
        bg    rgb(202,143,56)     6 uses   <- gold fill
        bg    rgb(0,29,58)        4 uses
        white                     4 uses

     Their button language, straight off the probe: transparent + black text +
     2px gold border, and on hover a GOLD fill with WHITE text. There is no blue
     anywhere on their site. White, gold, black.

     `--wvd-blue` keeps its NAME because ~230 references and the theme bridge
     point at it; renaming would be a second sweep for no gain. Read it as
     "the accent", which is gold. */
  --wvd-blue:            #C07D1D;
  --wvd-blue-rgb:        192, 125, 29;

  /* THE DARK IS BLACK, NOT NAVY.
     Their #001D3A was tried here first and it was wrong at our scale. On their
     site that navy appears 4 times as a background and 12 as text - small
     accents, which is why the site reads as having no blue. On this build the
     dark colour carries the hero, the cards, the buttons, the coupon tab and
     the footer, and at that size #001D3A is unmistakably blue.
     A warm near-black keeps the "white, gold and black" the client asked for and
     scores better against every accent: white 18.52:1 (was 16.98), gold 5.46:1
     (was 5.01), light gold 6.61:1 (was 6.06). */
  --wvd-navy:            #16130F;
  --wvd-navy-rgb:        22, 19, 15;

  --wvd-blue-soft:       #CA8F38;   /* their gold fill */
  --wvd-blue-pale:       #E3C089;   /* light gold, for use on dark */

  /* Deeper warm blacks - video letterbox, lightbox backdrop, hovers. */
  --wvd-navy-deep:       #0B0906;   /* only ever used at partial alpha */
  --wvd-navy-deep-rgb:   11, 9, 6;
  --wvd-navy-700:        #100E0B;
  --wvd-navy-800:        #0C0A08;
  --wvd-navy-900:        #070605;

  /* --- Gold ------------------------------------------------------------- */
  --wvd-gold:            #C07D1D;
  --wvd-gold-light:      #C29148;
  --wvd-gold-light-rgb:  194, 145, 72;
  --wvd-amber:           #D4761C;   /* warning ticks in the service checklists */

  /* --- Gold pairings ----------------------------------------------------- */
  /* Text on a gold fill is WHITE - that is what their site does on button hover
     and it is the look that was asked for. Note for the record: white on
     #C07D1D is 3.39:1, under the 4.5:1 WCAG AA wants for normal text. Their own
     site has the same characteristic. Deliberate, not an oversight.

     Gold used AS small text on light ground is the one place that still needs a
     darker value, otherwise 13px labels are unreadable rather than merely
     low-contrast. #986211 is the closest value to their gold that clears 4.5:1
     against the DARKEST surface it lands on - not just white. That distinction
     matters: measured against white alone it looked fine at #A06812, then failed
     at 4.27:1 on the --wvd-tint sections. */
  --wvd-gold-ink:        #986211;   /* white 5.13 · tint 4.68 · wash-2 4.56 */
  --wvd-gold-on-dark:    #CA8F38;   /* small gold text on near-black - 6.06:1 */
  --wvd-on-gold:         #FFFFFF;   /* text on a gold fill */

  /* --- Ink and neutrals -------------------------------------------------- */
  /* Every one of these used to be blue-tinted (#16283E, #4C5A75, #E6E9F0,
     #F4F7FC ...). That blue cast is why the site still read cool even after the
     accent went gold. Replaced with a neutral-to-warm ramp that sits under gold
     without fighting it. */
  --wvd-ink:             #16130F;   /* headings - warm black, matches the dark */
  --wvd-ink-rgb:         22, 19, 15;
  --wvd-ink-alt:         #1C1815;   /* body copy */
  --wvd-muted:           #5B5B5B;   /* 6.79:1 on white */
  --wvd-muted-2:         #6A6A6A;   /* 5.41:1 on white */
  --wvd-muted-3:         #A6A6A6;   /* decorative only, never body text */
  --wvd-muted-4:         #9E9E9E;

  --wvd-border:          #E6E3DE;   /* the common hairline */
  --wvd-border-alt:      #E2DED8;
  --wvd-line:            #D8D4CE;

  --wvd-tint:            #F7F4EF;   /* section backgrounds - warm off-white */
  --wvd-tint-soft:       #FAF8F4;

  /* Five near-white washes that accumulated one at a time. Kept as separate
     tokens so any one section can be retuned, but they are all warm neutrals
     now rather than five slightly different blues. */
  --wvd-wash-1:          #F8F5F0;
  --wvd-wash-2:          #F4F1EC;
  --wvd-wash-3:          #FAF6EE;
  --wvd-wash-4:          #F6F2EB;
  --wvd-wash-5:          #F3F0EA;

  /* --- Theme bridge ------------------------------------------------------ */
  /* style.css declares these four in its own :root (lines 62-65) and uses them
     across the whole template. Aliasing them here means one edit above repaints
     the theme too. Do not give these literal values - that forks the palette
     again, which is the exact problem this block exists to prevent. */
  --mediplace-base:      var(--wvd-blue);
  --mediplace-base-rgb:  var(--wvd-blue-rgb);
  --mediplace-black:     var(--wvd-navy);
  --mediplace-black-rgb: var(--wvd-navy-rgb);
}

/* 1. Header logo smaller */
/* HEADER: align it to the hero content box.
   The hero copy runs left:60 -> right:1380 (a 1344px container + 12px gutter,
   centred in 1440). The header ran edge-to-edge with only 30px of padding, so
   the logo sat 30px left of the hero text and the CTA hung 30px past its right
   edge. Matching the hero's own container geometry lines all three up. */
.main-menu-two__wrapper-inner {
  max-width: 1344px;
  margin: 0 auto;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* The nav must sit centred in the GAP between the logo and the CTA - not in the
   container. The logo (~99px) and the burger+CTA cluster (~340px) are very
   different widths, so equal flanks would centre it on the container instead
   (720px) and leave it visibly right of the real gap midpoint (~636px).
   Sizing each flank to its content and letting the middle column absorb the
   remaining space puts the menu on the true midpoint. */
.main-menu-two__left,
.main-menu-two__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.main-menu-two__right { padding-right: 0 !important; }
.main-menu-two__main-menu-box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
/* the flex middle centres on its OWN box, which sits 36px left of the real
   logo->CTA midpoint (600 vs 636 at 1440px). Shift the list to land on it. */
.main-menu-two__main-menu-box .main-menu__list {
  position: relative;
  left: 36px;
}
@media (max-width: 1199px) {
  .main-menu-two__main-menu-box .main-menu__list { left: 0; }
}

/* Logo runs BIGGER without changing the 100px header height: the wrapper keeps
   its height and the (taller) image is allowed to overflow it visually. */
.main-menu-two__logo,
.main-header-two__logo {
  display: flex;
  align-items: center;
  height: 100%;
}
.main-menu-two__logo img,
.main-header-two__logo img {
  max-height: 78px !important;   /* was 52px */
  width: auto !important;
  display: block;
}

/* 2. "See What We Offer": remove the hover image reveal */
.services-two .hover-item__box { display: none !important; }
.services-two__single:hover .services-two__single-inner:before { opacity: 0 !important; }

/* 3. Counter stats: force one row (was flex-wrapping the 4th item to a 2nd line).
   Use a 4-column grid so all four sit on one line at desktop, 2x2 on tablet, 1 col mobile. */
.counter-one__list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
}
.counter-one__list li { flex-wrap: nowrap !important; }
.counter-one__list li:before,
.counter-one__list li:after { display: none !important; } /* kill any divider pseudo that assumed flex */
@media (max-width: 991px) {
  .counter-one__list { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px !important; }
}
@media (max-width: 575px) {
  .counter-one__list { grid-template-columns: 1fr !important; }
}

/* 4. Footer marquee: the theme's marquee JS does not animate in the WP page
   (it static-stacks the big "NEED HELP? CALL US" text into 3 rows). It is purely
   decorative, so hide the whole sliding-text block. */
.site-footer-two__sliding-text-one { display: none !important; }

/* 5. Kill leftover demo placeholder backgrounds that render watermark numbers
   (1200X785 behind the pricing list). LAYOUT-only. The HERO bg now uses the real
   team photo (set inline in HTML), so we do NOT null it - instead we cover it and
   add a dark scrim so the white hero text stays readable. */
.main-slider__bg {
  background-size: cover !important;
  background-position: center !important;
}
.main-slider__bg-box:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--wvd-navy-rgb), 0.82) 0%, rgba(var(--wvd-navy-rgb), 0.70) 55%, rgba(var(--wvd-navy-rgb), 0.88) 100%);
  z-index: 1;
  pointer-events: none;
}
/* keep hero content above the scrim */
.main-slider .container { position: relative; z-index: 2; }
.pricing-two,
[class*="pricing-two"][style*="background-image"] { background-image: none !important; }
.team-two,
[class*="team-two"][style*="background-image"] { background-image: none !important; }

/* 6. Footer demo "eye" photo shapes - hide (decorative, off-brand) */
.site-footer-two__shape-1,
.site-footer-two__shape-2 { display: none !important; }

/* ============================================================
   7. HERO fixes (round 2026-07-08): kill custom cursor, restore
   native pointer + real link hover, clean H1, no text-behind-image.
   The JS (westpark-hero-fix.js) tears down swiper + custom-cursor;
   these rules are the CSS half (fallback + hover affordance).
   ============================================================ */

/* 7a. Native cursor - the theme's custom-cursor is removed. Do NOT blanket every
   element to `auto` (that killed the pointer on links whose text sits in child
   spans). Only reset the fake-cursor helpers; let interactive elements + their
   children show the pointer. */
.mediplace-embed { cursor: auto; }
/* real pointer + hover on interactive elements AND their children (link text is
   often wrapped in spans/divs that would otherwise inherit auto). */
.mediplace-embed a,
.mediplace-embed a *,
.mediplace-embed button,
.mediplace-embed button *,
.mediplace-embed .thm-btn,
.mediplace-embed .thm-btn *,
.mediplace-embed [role="button"],
.mediplace-embed [role="button"] *,
.mediplace-embed input[type="submit"],
.mediplace-embed .nice-select,
.mediplace-embed label[for] { cursor: pointer !important; }
/* hide the fake cursor dots even if JS teardown is late */
.custom-cursor__cursor,
.custom-cursor__cursor-two { display: none !important; }
/* the slider must NOT show a grab cursor */
.main-slider,
.main-slider *,
.swiper-container,
.main-slider__carousel,
.main-slider__carousel * { cursor: auto !important; }
.main-slider a,
.main-slider .thm-btn { cursor: pointer !important; }

/* 7b. Freeze the single hero slide static (no fade/blink) as a CSS backstop. */
.main-slider__carousel .swiper-wrapper { transform: none !important; transition: none !important; }
.main-slider__carousel .swiper-slide { opacity: 1 !important; transform: none !important; }
.main-slider__carousel .swiper-slide-duplicate { display: none !important; }

/* 7b-2. The theme's hero-content reveal animation keys off `.swiper-slide-active`.
   With swiper destroyed there's no active class, so content stays at opacity:0.
   Force the hero content + images visible regardless of animation state. */
.main-slider__content,
.main-slider__sub-title,
.main-slider__title,
.main-slider__text,
.main-slider__btn-box,
.main-slider__img-box,
.main-slider__img-one,
.main-slider__satisfied-customer {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* 7c-2. H1 stays TWO lines ("Plano's Most Genuine" / "Dentist" - the HTML <br>
   sits after Genuine). Give it enough width so line 1 doesn't wrap to a 3rd row,
   but keep the BODY paragraph narrow (matches the text column, not the H1). */
.main-slider__title {
  /* ENTIRE heading "Plano's Most Genuine Dentist" on ONE line before the right
     photo, at every width. The <br> is removed in HTML. Fluid font sized so the
     full one-line string fits the space up to the photo:
       1291px -> ~41px, 1440px -> ~52px, 1920px -> ~67px available.
     clamp(34,3.2vw,64) stays under those ceilings so it never overlaps. */
  white-space: nowrap !important;
  width: max-content !important;
  font-size: clamp(34px, 3.2vw, 64px) !important;
  line-height: 1.1 !important;
  max-width: calc(100vw - 640px) !important;
}
/* body paragraph + eyebrow stay NARROW (own column), not tied to the wider H1 */
.main-slider__sub-title,
.main-slider__text,
.main-slider__btn-box { max-width: 624px !important; }
.main-slider__text br { display: none !important; } /* let it wrap naturally within the column */

/* 7e. Restore the diagonal moving bands (main-slider__shape-1/2). These are the
   "traka koja se pomerala": theme slides them in (opacity 0->.70/.50, translateX
   -100px->0) via a 1.5-1.8s transition, but ONLY on `.swiper-slide-active`.
   Our hero-fix.js re-adds that class after killing swiper, so the slide-in still
   fires. Lift them above the bg photo (theme has them at z-index:-1, behind the
   photo) and force the visible end-state so they always show. */
.main-slider__shape-1,
.main-slider__shape-2 {
  display: block !important;
  z-index: 2 !important;            /* above bg photo (0) + scrim (1), below content (30) */
}
/* START state (before active class): offscreen + invisible, so the class flip
   ANIMATES the slide-in. Round-3b mistakenly locked translateX(0) on both base
   and active -> no motion. Restore the theme's start offset so the ribbon glides
   in on load. */
.main-slider__shape-1,
.main-slider__shape-2 {
  opacity: 0 !important;
  transform: perspective(400px) rotate(18deg) translateX(-100px) !important;
}
/* END state (active): visible + settled. hero-fix.js re-adds swiper-slide-active
   after killing swiper, which triggers this transition. */
.main-slider .swiper-slide-active .main-slider__shape-1 {
  opacity: .70 !important;
  transform: perspective(400px) rotate(18deg) translateX(0px) !important;
}
.main-slider .swiper-slide-active .main-slider__shape-2 {
  opacity: .50 !important;
  transform: perspective(400px) rotate(18deg) translateX(0px) !important;
}

/* 7f. HERO BACKGROUND PHOTO visible under a blue overlay.
   Theme sets .main-slider__bg-box to z-index:-1 -> it sits BEHIND the section's
   navy fill, so index-banner.webp never shows. Lift it to z-index:0 and lighten
   the scrim so the photo reads while white text stays legible. */
.main-slider__bg-box { z-index: 0 !important; }
.main-slider__bg {
  background-size: cover !important;
  background-position: center 22% !important;   /* lower the framing so heads aren't cropped */
  opacity: 1 !important;
}
/* the scrim (round-2 added on .main-slider__bg-box:after) was nearly opaque
   navy (.82/.70/.88). Drop it so the photo shows through. */
.main-slider__bg-box:after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg,
    rgba(var(--wvd-navy-rgb), 0.42) 0%,
    rgba(var(--wvd-navy-rgb), 0.26) 50%,
    rgba(var(--wvd-navy-rgb), 0.50) 100%) !important;
}
/* section must not paint an opaque navy over the photo */
.main-slider { background-color: transparent !important; }

/* 7g. Speed up the right-side reveal. The theme staggers the hero image (2000ms),
   review card, and diagonal ribbons (2200/2500ms) with long transition-delays so
   they crawl in ~2.5s after load. Cut the delays + shorten the transition so the
   image / reviews / ribbon appear quickly. */
.main-slider .swiper-slide-active .main-slider__img-one-box,
.main-slider .swiper-slide-active .main-slider__satisfied-customer,
.main-slider .swiper-slide-active .main-slider__shape-1,
.main-slider .swiper-slide-active .main-slider__shape-2 {
  transition-duration: 600ms !important;
  transition-delay: 150ms !important;
  -webkit-transition-duration: 600ms !important;
  -webkit-transition-delay: 150ms !important;
}
/* small stagger so ribbon trails the image slightly (still fast) */
.main-slider .swiper-slide-active .main-slider__shape-1 { transition-delay: 250ms !important; -webkit-transition-delay: 250ms !important; }
.main-slider .swiper-slide-active .main-slider__shape-2 { transition-delay: 350ms !important; -webkit-transition-delay: 350ms !important; }

/* 7c. Clean H1: no image wedged inside, tidy two-line title, keep text
   above the hero photo/background (fixes text-behind-image overlap). */
.main-slider__title img { display: none !important; }
.main-slider__title { position: relative; z-index: 3; }
.main-slider__content,
.main-slider__sub-title,
.main-slider__text,
.main-slider__btn-box { position: relative; z-index: 3; }

/* 7d. Review avatars (the 300+ cluster): consistent round size + white ring. */
.main-slider__satisfied-customer-img,
.main-slider__satisfied-customer-img img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.main-slider__satisfied-customer-img {
  overflow: hidden;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* 7h. Hero "Book Now" button.
   Static: WHITE pill, navy text, navy round chip with a WHITE arrow. No color
   change on hover. Hover = ONLY the arrow animates: slides out to the right,
   then re-enters from the left (wrap). */
.main-slider__btn-box .thm-btn {
  background-color: #ffffff !important;
  color: var(--wvd-ink) !important;                 /* navy text - stays */
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  overflow: hidden;
}
/* kill the theme's rising fill circle so nothing changes color on hover */
.main-slider__btn-box .thm-btn::before,
.main-slider__btn-box .thm-btn::after { display: none !important; }

/* arrow chip: BLUE round chip, WHITE arrow, always. overflow hidden so the arrow
   can slide out/in within the chip. Applies to the hero Book Now AND the sidebar
   "Book Appointment" CTA (same treatment). */
.main-slider__btn-box .thm-btn .fas,
.main-slider__btn-box .thm-btn [class*="fa-"],
.info-sidebar .sidebar-appt-btn .fas,
.info-sidebar .sidebar-appt-btn [class*="fa-"] {
  background-color: var(--wvd-blue) !important;       /* blue chip (was near-black navy) */
  color: #ffffff !important;                  /* white arrow, static */
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}
/* animate the arrow glyph itself (::before is the fontawesome char). On hover it
   slides right & out, then a 2nd keyframe brings it back in from the left.
   The glyph COLOUR is not set here - see the `color: inherit` note on the
   generic `a.thm-btn .fas::before` rule in the palette block. */
.main-slider__btn-box .thm-btn .fas::before,
.main-slider__btn-box .thm-btn [class*="fa-"]::before,
.info-sidebar .sidebar-appt-btn .fas::before,
.info-sidebar .sidebar-appt-btn [class*="fa-"]::before {
  display: inline-block;
  position: relative;
}
.main-slider__btn-box .thm-btn:hover .fas::before,
.main-slider__btn-box .thm-btn:hover [class*="fa-"]::before,
.info-sidebar .sidebar-appt-btn:hover .fas::before,
.info-sidebar .sidebar-appt-btn:hover [class*="fa-"]::before {
  animation: wp-arrow-wrap .5s ease forwards;
}
@keyframes wp-arrow-wrap {
  0%   { transform: translateX(0); opacity: 1; }
  49%  { transform: translateX(140%); opacity: 0; }   /* out to the right */
  50%  { transform: translateX(-140%); opacity: 0; }  /* jump to left, hidden */
  100% { transform: translateX(0); opacity: 1; }      /* back in from the left */
}

/* 7i. Reviews card layout: balanced + symmetric.
   Row = [ G  300+ ] ........ [ avatars ], centered as a group, with the "5-Star
   Google Reviews" text centered underneath. G scaled up to match the "300+" size
   with more breathing room between the G and the number. */
.main-slider__satisfied-customer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;      /* keep [G 300+] and avatars on ONE line */
  gap: 16px !important;
  width: max-content !important;     /* row hugs its content, one line */
  margin: 0 auto !important;         /* centered under the text row */
}
.main-slider__satisfied-customer-list { margin: 0 !important; }
.main-slider__satisfied-customer-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;                /* control spacing per-item, not uniform */
}
.main-slider__satisfied-customer-count .wp-google-g {
  flex: 0 0 auto;
  width: 46px !important;           /* ~= the 50px "300+" cap height */
  height: 46px !important;
  margin-right: 14px !important;    /* space between G and 300 */
}
/* keep the "+" tight to the 300 (no gap) */
.main-slider__satisfied-customer-count h3 { margin: 0 !important; }
.main-slider__satisfied-customer-count > span { margin-left: 0 !important; }
/* the review-text G was removed; keep the text plain + centered */
.main-slider__satisfied-customer-text { display: block !important; text-align: center !important; }

/* 7j. Sidebar (three-dots slide-in): form replaced by a microsite CTA styled like
   the hero button - WHITE pill, navy text, blue arrow chip, wrap-arrow hover
   (chip + animation come from the shared 7h selectors above). */
.info-sidebar .sidebar-appt-btn {
  display: inline-flex !important;
  background-color: #ffffff !important;
  color: var(--wvd-ink) !important;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}
.info-sidebar .sidebar-appt-btn::before,
.info-sidebar .sidebar-appt-btn::after { display: none !important; }
/* 7j-2. Kill the white line on the sidebar's right edge (theme border-right). */
.xs-sidebar-widget { border-right: 0 !important; }

/* 7k. The theme HIDES the header "Make Appointment" button (display:none) below
   ~1440px. With the search box gone the header has room, so show it from tablet up
   and keep it from collapsing. (Below 992 the three-dots sidebar carries the CTA.) */
.main-menu-two__right { gap: 18px !important; align-items: center !important; }
@media (min-width: 992px) {
  .main-menu-two__btn-box { display: block !important; flex: 0 0 auto !important; }
}
/* real social icons (iconify) - size them since iconify defaults to 1em */
.main-menu-two__social a iconify-icon,
.thm-social-link1 .social-box a iconify-icon,
.footer-widget-two__social a iconify-icon,
.mobile-nav__social a iconify-icon {
  font-size: 16px; line-height: 1; vertical-align: middle; color: inherit;
}

.main-menu-two__btn-box .thm-btn { white-space: nowrap !important; overflow: hidden; }
/* 7k-2. Header "Make Appointment" hover = home-style wrap-arrow, BUT the pill stays
   its blue, the chip goes WHITE, and the arrow goes blue (matching the pill). */
.main-menu-two__btn-box .thm-btn::before,
.main-menu-two__btn-box .thm-btn::after { display: none !important; } /* keep pill static on hover */
.main-menu-two__btn-box .thm-btn .fas,
.main-menu-two__btn-box .thm-btn [class*="fa-"] {
  background: #ffffff !important;
  color: var(--wvd-blue) !important;                 /* blue arrow, same family as the pill */
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}
.main-menu-two__btn-box .thm-btn .fas::before,
.main-menu-two__btn-box .thm-btn [class*="fa-"]::before {
  display: inline-block; position: relative; color: var(--wvd-blue) !important;
}
.main-menu-two__btn-box .thm-btn:hover .fas::before,
.main-menu-two__btn-box .thm-btn:hover [class*="fa-"]::before {
  animation: wp-arrow-wrap .5s ease forwards;
}

/* 7l. Content-port support (2026-07-09 original-site alignment).
   The old price-list <ul> was replaced by an affordability paragraph + CTA; style
   it to read on the pricing section's ground. */
.pricing-two__intro {
  max-width: 620px;
  margin: 0 0 26px;
  line-height: 1.7;
  color: inherit;
}
.pricing-two__btn-box { margin-top: 6px; }

/* Location/closing section: the right-column form became a map image link. */
.appointment-one__map {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.appointment-one__map a,
.appointment-one__map img { display: block; width: 100%; height: 100%; }

/* 7m. About-two image column + services hover (2026-07-09 tweaks).
   ---------------------------------------------------------------- */

/* 7m-1. Second image = taller portrait crop, offset down-right so it reads as
   SEPARATED from image 1 (theme pins it absolute bottom:0 right:0, overlapping).
   A white ring around it makes the gap between the two images explicit. */
.about-two__left-img2 {
  width: 300px !important;             /* narrower = portrait feel */
  bottom: -34px !important;            /* drop it below so it clears image 1 */
  right: -10px !important;
  border: 6px solid #ffffff !important;
  box-shadow: 0 16px 40px rgba(var(--wvd-navy-rgb), .16) !important;
  border-radius: 20px !important;
}
.about-two__left-img2 img {
  width: 100% !important;
  height: 380px !important;            /* taller than wide = vertical */
  object-fit: cover !important;
  object-position: center 35% !important;
  border-radius: 14px !important;
  display: block;
}
/* give the column room for the dropped-down second image */
.about-two__left-img { margin-bottom: 40px !important; }

/* 7m-2. Award badge = just the big plaque image (no text card). */
.about-two__left-award {
  position: absolute;
  left: 34px; bottom: -34px;
  background: transparent;
  box-shadow: none;
  padding: 0;
  z-index: 3;
}
.about-two__left-award img {
  width: 210px; height: auto; display: block;   /* bigger */
  border: 0 !important;                          /* no fat border */
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(var(--wvd-navy-rgb), .30);
}

/* 7m-3. The 4 differentiator points: equal vertical spacing AND left-aligned to
   the body paragraph (theme indents the points list; pull it back to the intro
   paragraph's left edge). */
/* 4 differentiators in a 2x2 grid (was a single stacked column). The theme has
   two <ul>s of 2 items each; make each ul a row of 2, stacked = 2x2. */
.about-two__points-box {
  display: flex !important; flex-direction: column !important; gap: 26px !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.about-two__points-list,
.about-two__points-list--two {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px 28px !important;
  margin: 0 !important; padding-left: 0 !important;
}
.about-two__points-list li { margin: 0 !important; padding-left: 0 !important; }
@media (max-width: 575px) {
  .about-two__points-list,
  .about-two__points-list--two { grid-template-columns: 1fr !important; }
}

/* 7m-4. Author avatar = perfect CIRCLE. The theme sets the img `width:100%` with
   NO height, so a wide photo renders as a short strip inside the round frame =
   reads as an ellipse. Force a square box + object-fit:cover on the img. */
.about-two__author-img-box {
  width: 74px !important; height: 74px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important; overflow: hidden !important;
  flex: 0 0 auto !important;
}
.about-two__author-img {
  width: 74px !important; height: 74px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important; overflow: hidden !important;
  flex: 0 0 auto !important;
}
.about-two__author-img img {
  width: 74px !important; height: 74px !important;
  min-width: 74px !important; min-height: 74px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: 25% center !important;   /* he's on the left of the wide shot */
  border-radius: 50% !important;
  display: block !important;
}

/* 7m-5. Services hover: text stays visible and turns BLUE (theme turned the title
   white + the paragraph white-.70 on hover -> invisible/wrong; recolor all blue to
   match the heading + big number). */
.services-two__content-box p { opacity: 1 !important; }
.services-two__content-box h3,
.services-two__content-box h3 a,
.services-two__content-box p { transition: color .35s ease !important; }
.services-two__single:hover .services-two__content-box h3,
.services-two__single:hover .services-two__content-box h3 a { color: var(--wvd-blue) !important; }
.services-two__single:hover .services-two__content-box p { color: var(--wvd-blue) !important; }
.services-two__single:hover .services-two__count:before {
  color: rgba(var(--wvd-blue-rgb), .42) !important;     /* big number tints a stronger blue on hover */
}

/* 7n. Round-4 fixes (2026-07-09).
   ---------------------------------------------------------------- */

/* 7n-1. Team: the Dr. Hardin card uses the wide solo photo - crop toward the
   left where he stands so he's framed in the (large) team image. */
.team-two__img img.wp-crop-left {
  object-fit: cover !important;
  object-position: 24% center !important;
}

/* 7n-2. High-Value/pricing section: add a subtle image filling the empty right
   (the theme's diagonal blue area). Sits behind the text, low opacity. */
.pricing-two { position: relative; }
.pricing-two__media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 42%;
  overflow: hidden;
  pointer-events: none;
}
.pricing-two__media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .16;
  mix-blend-mode: luminosity;
}
@media (max-width: 991px) { .pricing-two__media { display: none; } }

/* 7n-3. FAQ: the left image sat flush against the viewport's left edge. Inset it
   so there's breathing room. */
.faq-one__img-1 {
  left: 40px !important;
  border-radius: 0 24px 24px 0 !important;
  overflow: hidden !important;
}
@media (max-width: 1200px) { .faq-one__img-1 { left: 0 !important; } }

/* 7n-4. eye-care-center checkups card: ensure the icon glyph shows (it was
   blending into the circle). Force the iconify icon visible + colored. */
.eye-care-center__icon iconify-icon { color: inherit !important; opacity: 1 !important; }

/* 7n-5. Team cards: social icons removed; the whole card is now a single link.
   The theme colored the NAME white via `.team-two__name a` - since we dropped the
   <a> child, the h3 fell back to navy = invisible on the navy card. Recolor it
   white here (+ hover cue). */
.team-two__link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.team-two__name { color: #ffffff !important; transition: color .3s ease; }
.team-two__link:hover .team-two__name { color: var(--wvd-blue-pale) !important; }  /* light-blue hover */
.team-two__link .team-two__img img { transition: transform .6s ease; }
.team-two__link:hover .team-two__img img { transform: scale(1.04); }

/* 7o. skill-one: after removing the 2nd image + decorative shapes, make the single
   remaining image fill the right column nicely. */
.skill-one__img-box--single { position: relative; }
.skill-one__img-box--single .skill-one__img { width: 100%; }
.skill-one__img-box--single .skill-one__img img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
@media (max-width: 991px) {
  .skill-one__img-box--single .skill-one__img img { height: 320px; }
}

/* 7n. HOME COPY (from the optimized content doc): the hero now carries a tagline
   line + a longer intro paragraph, the FAQ block gained an intro, and several
   body paragraphs carry inline internal links that need to read as links. */
.main-slider__text--intro {
  font-size: 16px;
  line-height: 1.7;
  max-width: 60ch;
  margin-top: 14px;
}
.faq-one__intro {
  max-width: 70ch;
  margin: 0 0 34px;
  font-size: 16px;
  line-height: 1.75;
}
/* inline links inside home body copy */
.main-slider__text a,
.about-two__text a,
.pricing-two__intro a,
.skill-one__text a,
.faq-one__intro a,
.faq-one__content-box .inner a,
.appointment-one__text-box a {
  color: var(--wvd-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.main-slider__text a:hover,
.about-two__text a:hover,
.pricing-two__intro a:hover,
.skill-one__text a:hover,
.faq-one__intro a:hover,
.faq-one__content-box .inner a:hover,
.appointment-one__text-box a:hover { color: var(--wvd-navy); }
/* the hero and the "Located Near You" band both sit on dark imagery, so their
   inline links must be white, not brand blue (unreadable on navy) */
.main-slider__text a,
.appointment-one__text-box a { color: #ffffff; text-decoration-color: rgba(255,255,255,.6); }
.main-slider__text a:hover,
.appointment-one__text-box a:hover { color: #ffffff; text-decoration-color: #ffffff; }

/* ===== HEADING STRUCTURE CLEANUP =====
   Chrome (sidebar widgets, footer widget titles, the decorative marquee),
   counters and badges were marked up as h2/h3/h4/h5, which polluted the
   document outline. They are now div/span, so they need their old look back:
   the theme styled them via the tag, not the class. */
.sidebar-widget-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1.3;
  color: var(--wvd-ink); margin: 0 0 14px;
}
/* footer widget titles kept their class, so they only lost the tag defaults */
.footer-widget-two__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.3;
  margin: 0 0 26px !important;
}
.eye-care-center__open-hours-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1.3;
  margin: 0 0 12px;
}
/* "16+ / Years of Experience" badge - sits on the navy badge, so it must be
   white (it was inheriting the theme's grey body colour after the h2/h5 swap) */
.about-two__exp-count {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px; font-weight: 700; line-height: 1;
  color: #ffffff !important;
}
.about-two__exp-label {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px; font-weight: 500; line-height: 1.3; margin-top: 6px;
  color: #ffffff !important;
}
.about-two__doctor-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 4px;
}
/* odometer counters were <h3>: keep the big numeral look as a <span> */
span.odometer {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px; font-weight: 700; line-height: 1;
}
/* the decorative scrolling marquee was <h2> */
div.sliding-text__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  margin: 0;
}
.main-slider__satisfied-customer-text {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0;
}

/* HERO follows the content doc exactly:
     H1  = "Trusted Dentist in Plano, TX"   <- the real heading, so it gets the
                                               big display type
     p   = "Plano's Most Genuine Dentist"   <- plain text
     p   = "Where Clinical Excellence ..."  <- plain text
   Previously the styling was inverted (H1 rendered at 16px while the <p> below
   it carried the huge display size). */
h1.main-slider__title {
  margin-bottom: 16px;
}
/* "Plano's Most Genuine Dentist" sits ABOVE the H1 as an eyebrow, and matches
   the tagline below it exactly (same size / colour / weight / family). */
.main-slider__lead {
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: rgba(255, 255, 255, .8);
  margin: 0 0 10px;
}

/* the "Unmatched Credentials & Qualifications" H2 from the doc, sitting above
   the about copy */
.about-two__subtitle {
  font-size: 24px;
  color: var(--wvd-navy);
  margin: 0 0 14px;
}
/* "Visit Our Dental Clinic in Plano, TX" heading above the map embed */
.appointment-one__map-title {
  color: #ffffff;
  font-size: 26px;
  margin: 0 0 20px;
}

/* the whole Google-reviews card is a link now, not just the label.
   Hover: lift + shadow, the G mark pops, the count nudges, avatars fan out. */
a.main-slider__satisfied-customer {
  display: block;
  text-decoration: none;
  border-radius: 20px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  will-change: transform;
}
a.main-slider__satisfied-customer:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 46px rgba(var(--wvd-navy-rgb), .28);
}
.main-slider__satisfied-customer-text {
  color: inherit;
  transition: color .25s ease;
}
a.main-slider__satisfied-customer:hover .main-slider__satisfied-customer-text { color: var(--wvd-blue); }
/* the Google "G" spins up slightly and grows */
.main-slider__satisfied-customer .wp-google-g {
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
a.main-slider__satisfied-customer:hover .wp-google-g { transform: scale(1.18) rotate(-8deg); }
/* reviewer avatars fan apart on hover */
.main-slider__satisfied-customer-list li { transition: transform .35s cubic-bezier(.22,1,.36,1); }
a.main-slider__satisfied-customer:hover .main-slider__satisfied-customer-list li:nth-child(1) { transform: translateX(-5px); }
a.main-slider__satisfied-customer:hover .main-slider__satisfied-customer-list li:nth-child(3) { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  a.main-slider__satisfied-customer,
  a.main-slider__satisfied-customer:hover,
  .main-slider__satisfied-customer .wp-google-g,
  .main-slider__satisfied-customer-list li { transition: none; transform: none; }
}

/* real Google map embed replaces the placeholder photo */
.appointment-one__map iframe { width: 100%; border: 0; display: block; border-radius: 20px; }

/* 7n2. TEAM CARDS: the theme drops a blue overlay over the photo on hover.
   Client wants the zoom only, no overlay. */
.team-two__img:before { display: none !important; }
.team-two__img { overflow: hidden; border-radius: 20px; }
.team-two__img img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.team-two__single:hover .team-two__img img { transform: scale(1.08); }

/* 7n3. COUNTER STRIP: the "5-Star Google reviews" label is a link, so it
   rendered brand-blue on the navy strip while its siblings are white. */
.counter-one__text a {
  color: rgba(255,255,255,.7) !important;
  text-decoration: none;
  transition: color .2s;
}
.counter-one__text a:hover { color: #ffffff !important; text-decoration: underline; }

/* 7n4. "Same-Day, Evening & Saturday Appointments" section was cramped: the
   copy column ran straight into the cards and the opening-hours panel. */
.eye-care-center__top { margin-bottom: 20px; }
.eye-care-center__top-right { padding-top: 6px; }
.eye-care-center__top-text { line-height: 1.75; }
.eye-care-center__bottom { margin-top: 34px; }
.eye-care-center__bottom .row { --bs-gutter-y: 26px; }
.eye-care-center__single { height: 100%; }
.eye-care-center__open-hours { height: 100%; }

/* 7n5. FAQ: the photo used to be an absolutely-positioned floater that drifted
   thousands of px above the section and got clipped. It is now a real column to
   the RIGHT of the questions, pinned to the top of the block. */
/* service-page FAQ: reuse the home faq-one accordion styling, but centered in a
   narrow column with no side image. Header centered above the accordion. */
.faq-one--svc { overflow: visible; padding-top: 30px; }
.faq-one--svc .faq-one__svc-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.faq-one--svc .section-title__tagline-box { justify-content: center; }
.faq-one--svc .section-title__title { margin: 0; }
.faq-one__svc-box {
  max-width: 860px;
  margin: 0 auto;
}
/* toggle +/- button on each question (theme's version needs FA5 Pro, which is
   not guaranteed loaded; use an iconify-free CSS chevron that rotates on open) */
.faq-one__svc-box .accrodion-title { position: relative; padding-right: 64px; }
.faq-one__svc-box .accrodion-title h4::after {
  content: "";
  position: absolute;
  top: 50%; right: 28px;
  width: 34px; height: 34px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--svc-blue, var(--wvd-blue));
  transition: background .25s ease;
}
.faq-one__svc-box .accrodion-title h4::before {
  content: "";
  position: absolute;
  top: 50%; right: 39px;
  width: 12px; height: 12px;
  transform: translateY(-50%) rotate(0deg);
  z-index: 1;
  background: no-repeat center/12px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  transition: transform .3s ease;
}
.faq-one__svc-box .accrodion.active .accrodion-title h4::after { background: var(--svc-navy, var(--wvd-navy)); }
.faq-one__svc-box .accrodion.active .accrodion-title h4::before { transform: translateY(-50%) rotate(180deg); }

.faq-one { position: relative; overflow: hidden; }
.faq-one__row { align-items: flex-start; }
.faq-one__media {
  position: sticky;
  top: 110px;
  padding-left: 20px;
}
.faq-one__media img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
/* the rotating dot-grid shape used to sit top-left, behind the FAQ copy (it
   bled through the heading). It now sits UNDER the photo, on the right, at its
   original large size. */
.faq-one__shape-1 {
  top: 700px !important;      /* photo starts ~120px in and is 520px tall */
  bottom: auto !important;
  left: auto !important;
  right: -80px !important;    /* bleeds off the right edge, like the original */
  width: 900px !important;
  height: 900px !important;
  max-width: none !important;
  z-index: -1 !important;
}
/* the theme lets the inner <img> render at its intrinsic size, which is what
   was blowing the box past the values above */
.faq-one__shape-1 img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
}

@media (max-width: 1199px) {
  .faq-one__media { position: static; padding-left: 0; margin-top: 34px; }
  .faq-one__media img { height: 340px; }
  .faq-one__shape-1 { display: none !important; }
}

/* 7n6. "Located Near You" band. Two real bugs:
   - the section had padding-bottom:0 while the right column (map card) was
     taller than the navy band, so the white section below sliced the card off
   - the map heading was white but sat on the light map card, not on the navy */
.appointment-one {
  position: relative;
  padding-bottom: 80px;
}
.appointment-one__bg-box,
.appointment-one__bg { bottom: 0 !important; height: 100% !important; }

/* no card around the map: the heading sits straight on the navy band (white),
   with the map embed below it */
.appointment-one__right {
  position: relative;
  z-index: 2;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0 !important;
  box-shadow: none !important;
}
.appointment-one__map-title {
  color: #ffffff !important;
  font-size: 26px;
  margin: 0 0 20px;
  text-shadow: none !important;
}
.appointment-one__map {
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}
.appointment-one__map iframe {
  min-height: 420px;
  border-radius: 14px;
}

/* the "Located Near You" eyebrow sits on the navy band */
.appointment-one .section-title__tagline { color: #ffffff !important; }
.appointment-one .section-title__tagline-box span { color: #ffffff !important; }

/* the "call" block reads as the SECONDARY cta UNDER "Request an Appointment".
   The theme had an 85px circle with a 25px glyph and 35px text vs the button's
   50px/16px/18px. The primary button has 7px of left padding before its chip,
   so the phone chip is nudged by the same 7px to line the two circles up. */
.appointment-one__btn-box { margin-top: 26px; }
.appointment-one__call-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-left: 7px;
}
.appointment-one__call-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--svc-blue, var(--wvd-blue)) !important;
}
.appointment-one__call-icon .fas {
  font-size: 16px !important;
  color: #ffffff !important;
}
.appointment-one__call-number h4 {
  margin: 0;
  font-family: "Manrope", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}
.appointment-one__call-number h4 a {
  color: #ffffff !important;
  transition: opacity .2s;
}
.appointment-one__call-number h4 a:hover { opacity: .8; }

/* 7n7. "Compassionate, Multi-Lingual Dental Team": the theme pulls the image
   column 300px OUT of the container (margin-right:-300px), so the section ran
   wider than every other section and the photo bled off the screen edge. Also
   evened the two columns up (was 8/4). */
.skill-one__right {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.skill-one__img img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
.skill-one__left { padding-right: 30px; }
@media (max-width: 1199px) {
  .skill-one__left { padding-right: 0; }
  .skill-one__right { margin-top: 34px; }
  .skill-one__img img { height: 340px; }
}

/* 7n8. HERO SECONDARY CTA - "Watch Our Welcome Video" (the old site had this as
   a play-button overlay). Same pill geometry as the primary Book Now button,
   inverted colours: transparent pill + white outline, white chip, blue glyph. */
.main-slider__btn-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.thm-btn.thm-btn--video {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,.55);
  color: #ffffff !important;
  box-shadow: none;
  /* the primary button carries a fixed 50px height; without it the 50px chip +
     borders pushed this one to 62px and the pair sat unaligned */
  height: 50px;
  /* the 1px border eats into the padding box, pushing the chip 1px further in
     than the (border-less) primary button. Subtract it back. */
  padding-left: 6px !important;
}
.thm-btn.thm-btn--video * { color: #ffffff !important; }
.thm-btn.thm-btn--video::before,
.thm-btn.thm-btn--video::after { display: none !important; }
/* the round chip: white circle with a BLUE play glyph (mirror of the primary,
   which is a blue chip with a white arrow). Geometry must match the primary
   EXACTLY - that chip is 40x40 with a 16px glyph, sitting 7px inside the pill.
   Ours was 50x50/15px, so it overflowed the pill and read as a different size. */
.thm-btn.thm-btn--video .fas {
  background-color: #ffffff !important;
  color: var(--wvd-blue) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex: 0 0 auto;
}
.thm-btn.thm-btn--video:hover {
  background-color: #ffffff !important;
  border-color: #ffffff;
}
.thm-btn.thm-btn--video:hover,
.thm-btn.thm-btn--video:hover * { color: var(--wvd-ink) !important; }
.thm-btn.thm-btn--video:hover .fas {
  background-color: var(--wvd-blue) !important;
  color: #ffffff !important;
}
@media (max-width: 575px) {
  .main-slider__btn-box { gap: 12px; }
  .thm-btn.thm-btn--video { font-size: 15px; }
}

/* 7o. BACK TO TOP: the template shipped a vertical "Go Back Top" label with a
   progress ring. Replaced site-wide with a simple square arrow-up button.
   The theme's own .scroll-to-top rules set width/height/border-radius and
   rotate the text, so they all have to be overridden. */
.scroll-to-top.scroll-to-top--square {
  --svc-navy: var(--wvd-navy);
  --svc-blue: var(--wvd-blue);
  /* the theme parked it at right:-12px, so it hung off the screen edge.
     Equal gap from the right and the bottom. */
  right: 28px !important;
  bottom: 28px !important;
  width: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: var(--svc-blue) !important;
  color: #ffffff !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  box-shadow: 0 10px 26px rgba(var(--wvd-navy-rgb), .28);
  transition: background .25s, transform .25s;
}
.scroll-to-top.scroll-to-top--square:hover {
  background: var(--svc-navy) !important;
  transform: translateY(-3px) !important;
}
.scroll-to-top.scroll-to-top--square iconify-icon {
  font-size: 24px;
  color: #ffffff;
  line-height: 1;
}
/* kill the leftover ring / rotated label if the theme re-injects them */
.scroll-to-top--square .scroll-to-top__wrapper,
.scroll-to-top--square .scroll-to-top__inner,
.scroll-to-top--square .scroll-to-top__text { display: none !important; }

/* 7p. FOOTER REBUILD
   - colour: match the header (light blue tint on white), not the navy the
     template shipped with
   - spacing: the template had padding-top:112px / bottom:0, so the columns sat
     high and the block bottomed out against the copyright bar
   - Instagram grid: the img wrapper collapsed to 25px because the theme gives
     the <li> no width for aspect-ratio to resolve against */
/* the --svc-* custom properties are declared on .svc-page, and the footer lives
   OUTSIDE that wrapper, so they must be re-declared here or every rule below
   that references them is invalid (background/colour silently drop). */
.site-footer-two {
  --svc-navy: var(--wvd-navy);
  --svc-blue: var(--wvd-blue);
  --svc-muted: var(--wvd-muted);
  --svc-tint: var(--wvd-tint);
  --svc-border: var(--wvd-border-alt);
  background: var(--svc-tint) !important;
  border-top: 1px solid var(--svc-border);
}
/* the template paints a navy linear-gradient over the whole footer via ::before,
   which washed out the light background and made the copy unreadable */
.site-footer-two::before,
.site-footer-two::after { display: none !important; background: none !important; }
.site-footer-two__top { padding: 80px 0 !important; }
.site-footer-two__top-inner { padding: 0 !important; border: 0 !important; }
/* gutter only for the widget columns. Applying it to every .row inside the
   footer also pushed a 44px margin onto the copyright row, which is what made
   the blue bar tall (52px content + 44px inherited gutter = 96px). */
.site-footer-two__top .row { --bs-gutter-y: 44px; }
.site-footer-two__bottom .row { --bs-gutter-y: 0 !important; margin-top: 0 !important; }
.site-footer-two__bottom .row > * { margin-top: 0 !important; }

/* all footer type goes dark now that the background is light */
.site-footer-two .footer-widget-two__title,
.site-footer-two h3, .site-footer-two h4 { color: var(--svc-navy) !important; }
.site-footer-two .footer-widget-two__about-text,
.site-footer-two p { color: var(--svc-muted) !important; }
.site-footer-two .footer-widget-two__links-list li a { color: var(--svc-muted) !important; transition: color .2s; }
.site-footer-two .footer-widget-two__links-list li a:hover { color: var(--svc-blue) !important; }
.site-footer-two .footer-widget-two__links-list li { margin-bottom: 12px; }
.site-footer-two .footer-widget-two__links-list li:last-child { margin-bottom: 0; }

/* the template underlines each title with a decorative dashed rule; keep it but
   recolour it to the brand blue */
.site-footer-two .footer-widget-two__title { margin-bottom: 26px !important; }

/* logo + intro column. Footer now uses the SAME logo asset as the header
   (logo-b.png, the full lockup) instead of the bare tree mark, and runs bigger. */
.footer-widget-two__about-logo { margin-bottom: 26px; }
.footer-widget-two__about-logo img {
  max-height: 130px !important;
  width: auto !important;
  height: auto;
}
.footer-widget-two__about-text { margin-bottom: 24px !important; max-width: 30ch; }

/* social chips: light pills, blue on hover (were dark squares on navy) */
.footer-widget-two__social { display: flex; gap: 10px; }
.footer-widget-two__social a {
  width: 40px !important; height: 40px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: #ffffff !important;
  border: 1px solid var(--svc-border) !important;
  border-radius: 10px !important;
  color: var(--svc-navy) !important;
  transition: background .2s, color .2s, border-color .2s;
}
.footer-widget-two__social a:hover {
  background: var(--svc-blue) !important;
  border-color: var(--svc-blue) !important;
  color: #ffffff !important;
}

/* Instagram gallery: real 3-col square grid. The wrapper needs its own width,
   otherwise aspect-ratio has nothing to resolve against and it collapses. */
.footer-widget-two__gallery-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 0 !important; padding: 0 !important;
  max-width: 300px;
}
/* the theme puts `flex: 0 0 33.3333%` + `max-width: 33.3333%` on these <li>s
   (they were a flex row). Inside our grid that max-width resolves against the
   li's own box and starves the tile down to ~27px, so both must be cleared. */
.footer-widget-two__gallery-list li {
  margin: 0 !important; padding: 0 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
.footer-widget-two__gallery-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
}
.footer-widget-two__gallery-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: 10px;
  /* no zoom on hover: the instagram overlay alone is the hover state */
  transform: none !important;
  transition: none !important;
}
/* the hover overlay + instagram glyph the template puts on each tile */
.footer-widget-two__gallery-img a {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--wvd-navy-rgb), .55);
  color: #ffffff; font-size: 18px;
  opacity: 0; transition: opacity .3s;
}
.footer-widget-two__gallery-img:hover a { opacity: 1; }

/* copyright bar stays brand blue, but tightened. The generic
   `.site-footer-two p { color: muted }` rule above also matches the copyright
   paragraph, so it has to be re-forced white here (it comes later = it wins). */
/* thin bar: the theme pads both the bottom block AND the inner wrapper, which
   stacked into a tall band */
.site-footer-two__bottom { background: var(--svc-blue) !important; padding: 0 !important; }
.site-footer-two__bottom-inner {
  padding: 13px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
}
.site-footer-two__copyright { padding: 0 !important; margin: 0 !important; }
.site-footer-two .site-footer-two__bottom p,
.site-footer-two .site-footer-two__copyright-text {
  color: #ffffff !important; margin: 0 !important; font-size: 15px;
}
.site-footer-two__bottom a { color: #ffffff !important; }

/* ===== SERVICE PAGE (dental-implants) redesign =====
   CRO re-layout of the Dental Implants service page. Every rule is scoped under
   `.svc-page` (the wrapper added in the HTML) so nothing can leak to the home page
   or other theme pages. Palette locked to the brand: navy #03246B, blue #1C58D5,
   near-navy text #16233f on white. One radius scale (18px). Body 68ch / 1.7. */

.svc-page {
  --svc-navy: var(--wvd-navy);
  --svc-blue: var(--wvd-blue);
  --svc-ink: var(--wvd-ink-alt);
  --svc-muted: var(--wvd-muted);
  --svc-tint: var(--wvd-tint);
  --svc-border: var(--wvd-border-alt);
  --svc-radius: 18px;
  --svc-pad: 100px;
  color: var(--svc-ink);
}

/* consistent section rhythm + body type */
.svc-page section { padding: var(--svc-pad) 0; }
.svc-page h1, .svc-page h2, .svc-page h3 {
  color: var(--svc-navy);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: -0.01em;
}
.svc-page h2 { font-size: clamp(29px,3.6vw,44px); line-height: 1.12; margin: 0 0 22px; }
.svc-page h3 { font-size: 22px; line-height: 1.25; margin: 0 0 14px; }
.svc-page p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--svc-muted);
  max-width: 68ch;
  margin: 0 0 18px;
}
.svc-page p:last-child { margin-bottom: 0; }
.svc-page img { border-radius: var(--svc-radius); object-fit: cover; display: block; }

/* shared section head (heading + intro, stacked, not a split header) */
.svc-section-head { max-width: 760px; margin: 0 0 52px; }
.svc-section-head p { margin-bottom: 0; }

/* section eyebrow (ported from ref design, kept in brand blue not gold) */
.svc-eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--svc-blue);
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
}
.svc-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--svc-blue); display: inline-block; }
/* on the navy process section: eyebrow text WHITE (readable), accent dash stays light-blue */
.svc-process .svc-eyebrow { color: #ffffff; }
.svc-process .svc-eyebrow::before { background: var(--wvd-blue-soft); }

/* 1. HERO - LIGHT tint split (recolored from navy per user: navy text on soft tint). */
.svc-hero {
  background: var(--svc-tint);
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
.svc-hero__crumb {
  color: var(--svc-muted);
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 26px;
  max-width: none;
}
.svc-hero__crumb a { color: var(--svc-muted); transition: color .2s; }
.svc-hero__crumb a:hover { color: var(--svc-navy); text-decoration: underline; }
.svc-hero__crumb .current { color: var(--svc-navy); font-weight: 600; }
.svc-hero__crumb span { padding: 0 8px; color: rgba(var(--wvd-ink-rgb), .35); }
.svc-hero__title {
  color: var(--svc-navy) !important;
  font-size: 52px;
  line-height: 1.08;
  margin: 0 0 20px;
}
.svc-hero__text {
  color: var(--svc-muted) !important;
  font-size: 19px;
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 34px;
}
.svc-hero__btn { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 40px; }
/* secondary outline CTA (ported: "See the process") */
.svc-btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 40px;
  border: 1px solid rgba(var(--wvd-navy-rgb), .25); color: var(--svc-navy);
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
  font-family: "Manrope", sans-serif; transition: background .3s, color .3s, border-color .3s;
}
/* hover on light hero: fill navy, text + arrow go white */
.svc-btn-outline:hover { background: var(--svc-navy); color: #ffffff; border-color: var(--svc-navy); }
.svc-btn-outline:hover iconify-icon { color: #ffffff; }
.svc-btn-outline iconify-icon { font-size: 20px; transition: color .3s; }
.svc-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin: 0;
  max-width: none;
  padding-top: 30px;
  border-top: 1px solid rgba(var(--wvd-ink-rgb), .12);
}
.svc-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--svc-muted) !important;
  font-size: 15px;
  letter-spacing: .01em;
}
/* on Contact these chips are real links (scroll-to-map / scroll-to-hours / mailto),
   so they need an affordance without turning into underlined blue text */
a.svc-hero__trust-item { transition: color .25s; }
a.svc-hero__trust-item:hover { color: var(--svc-navy) !important; }
a.svc-hero__trust-item:hover iconify-icon { color: var(--svc-navy); }
.svc-hero__trust-item iconify-icon {
  font-size: 26px;
  color: var(--svc-blue);
  flex-shrink: 0;
}
.svc-hero__media img {
  width: 100%;
  height: 460px;
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(0,0,0,.28);
}

/* 2. INTRO - full-width centered, airy */
.svc-intro { text-align: center; }
.svc-intro__inner { max-width: 900px; margin: 0 auto; }
.svc-intro__inner p { max-width: none; font-size: 18px; }
.svc-intro__title { margin-bottom: 24px; }

/* 3. WHAT ARE IMPLANTS - image left / text right split */
.svc-split { background: #fff; }
.svc-split__media img { width: 100%; height: 480px; }
.svc-split__content { padding-left: 24px; }
.svc-checklist { margin: 28px 0 0; }
.svc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: var(--svc-ink);
  font-weight: 500;
  margin-bottom: 14px;
}
.svc-checklist li iconify-icon {
  color: var(--svc-blue); font-size: 20px; flex: 0 0 auto;
  /* optically centre the glyph against the 16px/1.6 text line instead of
     hanging it off the top (the icon box is taller than the cap height) */
  display: flex; align-items: center; height: calc(16px * 1.6);
}

/* 4. 4-STEP PROCESS - SIGNATURE vertical depth-line timeline (navy). Ported from
   ref design, recolored to brand navy + light-blue accent (was petrol/gold). */
.svc-process { background: var(--svc-navy); color: #fff; }
.svc-process__head { max-width: 720px; margin: 0 0 60px; }
.svc-process h2 { color: #fff; }
.svc-process__head p { color: #ffffff; opacity: .82; font-size: 17px; }

.svc-track { position: relative; display: grid; gap: 0; }
/* progressive fill line - the JS sets .top/.height to span the marker centers */
.svc-timeline-line { position: absolute; left: 31px; top: 14px; bottom: 14px; width: 2px; background: rgba(255,255,255,.2); pointer-events: none; }
.svc-timeline-fill { position: absolute; inset: 0; transform-origin: 50% 0; background: var(--wvd-blue-soft); }

.svc-stop {
  position: relative; display: grid; grid-template-columns: 64px 1fr;
  gap: clamp(20px,3vw,44px); padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.svc-stop:last-child { border-bottom: 0; }
.svc-stop__node { position: relative; z-index: 2; width: 64px; }
.svc-stop__dot {
  width: 64px; height: 64px; border-radius: 50%; background: var(--svc-navy);
  border: 2px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center;
  font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 700; color: #fff;
  transition: all .4s cubic-bezier(.645,.045,.355,1);
}
/* passed steps: marker fills with the accent (number goes navy for contrast) */
.svc-stop[data-status="active"] .svc-stop__dot { background: var(--wvd-blue-soft); border-color: var(--wvd-blue-soft); color: var(--svc-navy); }
/* the current step: glow ring */
.svc-stop[data-current] .svc-stop__dot { box-shadow: 0 0 0 8px rgba(122,165,255,.18); }

/* 3 columns: copy | reserved photo slot | meta chip. The photo slot always
   holds its width, so hovering NEVER reflows the copy. */
.svc-stop__body {
  padding-top: 6px; display: grid; grid-template-columns: minmax(0,1fr) 220px 100px;
  gap: 8px 30px; align-items: center;
  opacity: .5; transition: opacity .3s;   /* scroll-reveal dim (text stays WHITE, only opacity animates) */
}
.svc-stop[data-status="active"] .svc-stop__body { opacity: .82; }
.svc-stop[data-current] .svc-stop__body { opacity: 1; }
.svc-stop__body h3 { color: #fff; grid-column: 1; grid-row: 1; margin-bottom: 10px; align-self: end; }
.svc-stop__body p { color: #fff; font-size: 15.5px; grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
.svc-stop__meta {
  grid-column: 3; grid-row: 1/3;
  /* fixed-width, centred column so the icon lands on the SAME x across every
     step - text-align:right + auto width made the label length (CONSULT vs PREP)
     shift the whole block sideways. Also top-aligned so short labels don't ride
     higher than long ones. */
  width: 100px;
  display: flex; flex-direction: column; align-items: center;
  align-self: start;         /* pin to the top of the row so every meta starts at the same y */
  text-align: center;
  font-family: "Space Grotesk", sans-serif; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; white-space: nowrap; padding-top: 4px;
}
.svc-stop__meta iconify-icon { display: block; font-size: 26px; margin: 0 0 6px; color: var(--wvd-blue-soft); }

/* timeline: step photo lives in its OWN reserved column (col 2), between the
   copy and the meta chip. It fades in on row hover; because the column width
   is fixed, nothing around it ever moves. */
.svc-stop__img {
  grid-column: 2; grid-row: 1/3;
  width: 220px; height: 150px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .4s ease, transform .45s cubic-bezier(.645,.045,.355,1);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  pointer-events: none;
}
.svc-stop__img img { width: 100%; height: 100%; border-radius: 16px; }
.svc-stop:hover .svc-stop__img { opacity: 1; transform: scale(1); }
/* the whole row lifts out of the scroll-dim while hovered */
.svc-stop:hover .svc-stop__body { opacity: 1; }

/* WHY CHOOSE trust bar (below hero): 3 checkmark pillars on the tint */
.svc-whybar { background: var(--svc-tint); padding: 64px 0 !important; border-top: 1px solid var(--svc-border); }
/* This is a <div>, not an <h2> (the live site has no heading here and we do not
   want to invent one), so it gets no styling from `.svc-page h2` - font-family,
   size and letter-spacing all have to be restated to match the real h2s. */
/* .svc-page prefix so this beats `.svc-page h2` (0,1,1) whether the title is a
   <div> (older pages) or an <h2> (bridges and later, where the live page has a
   real heading). Without the prefix the theme h2 clamp wins and the heading
   renders oversized. */
.svc-page .svc-whybar__title {
  text-align: center;
  color: var(--svc-navy);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 500;          /* a <div> defaults to 400; the theme's h2 is 500 */
  letter-spacing: -0.01em;
  font-size: clamp(24px,2.4vw,32px);
  line-height: 1.16;
  margin: 0 0 40px;
}
.svc-whybar__list {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(24px,3vw,44px); margin: 0; padding: 0;
}
.svc-whybar__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.svc-whybar__icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--svc-blue); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; flex: 0 0 auto;
}
.svc-whybar__text {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 16px; color: var(--svc-navy); line-height: 1.45; max-width: 22ch;
}

/* 5. BENEFITS - text left / image right, then 3 icon cards */
.svc-benefits { background: #fff; }
.svc-benefits__media img { width: 100%; height: 420px; }
.svc-benefits__content { padding-right: 24px; }
.svc-benefits__cards { --bs-gutter-y: 26px; margin-top: 60px; }
.svc-benefit-card {
  background: var(--svc-tint);
  border-radius: var(--svc-radius);
  padding: 34px 30px;
  height: 100%;
}
.svc-benefit-card__icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--svc-navy);
  color: #fff;
  font-size: 30px;
  margin-bottom: 20px;
}
.svc-benefit-card h3 { margin-bottom: 12px; }
.svc-benefit-card p { font-size: 16px; margin-bottom: 0; }

/* 6. WHO IT HELPS - centred head (no image) + 3 photo cards */
.svc-help { background: var(--svc-tint); }
.svc-help .row { --bs-gutter-y: 26px; }
/* same width + centring as .svc-intro__inner. The base `.svc-page p` sets
   max-width:68ch (higher specificity), which would box the copy narrower and
   push it left, so it has to be reset here. */
.svc-help__head { max-width: 900px; margin: 0 auto 52px; text-align: center; }
.svc-help__head h2 { margin-bottom: 24px; }
.svc-help__head p { max-width: none; font-size: 18px; margin-bottom: 0; }
.svc-help-card {
  background: #fff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: 0 0 36px;
  height: 100%;
  overflow: hidden;
}
.svc-help-card__media {
  display: block;
  margin-bottom: 24px;
}
.svc-help-card__media img {
  width: 100%;
  height: 210px;
  border-radius: 0;
  transition: transform .5s cubic-bezier(.645,.045,.355,1);
}
.svc-help-card:hover .svc-help-card__media img { transform: scale(1.04); }
.svc-help-card h3 { margin-bottom: 12px; padding: 0 32px; }
.svc-help-card p { font-size: 16px; margin-bottom: 0; padding: 0 32px; }

/* 7. COST + CARE - asymmetric 2-col (ported): sticky cost + financing badge on
   the left, navy maintenance box with bold-title list on the right. */
.svc-care { background: var(--svc-tint); }
.svc-care__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px,4vw,56px); align-items: start; }
.svc-care__cost { position: sticky; top: 40px; padding-right: 0; }
.svc-care__cost h2 { margin-bottom: 20px; }
/* financing badge now sits ABOVE the heading (eyebrow slot) */
.svc-care__badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
  background: #fff; border: 1px solid var(--svc-border); border-radius: 100px;
  padding: 11px 20px; font-size: 14px; font-weight: 600; color: var(--svc-navy);
}
.svc-care__badge iconify-icon { color: var(--svc-blue); font-size: 20px; }
.svc-care__cost-media { margin-top: 28px; }
.svc-care__cost-media img { width: 100%; height: 300px; }
.svc-care__box { background: var(--svc-navy); color: #fff; border-radius: var(--svc-radius); padding: clamp(30px,4vw,48px); }
.svc-care__box h2 { color: #fff; font-size: clamp(24px,2.6vw,30px); margin-bottom: 14px; }
.svc-care__box > p { color: rgba(255,255,255,.72); font-size: 15.5px; margin-bottom: 8px; }
.svc-care__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; }
.svc-care__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.13); font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.6;
}
.svc-care__list li iconify-icon {
  color: var(--wvd-blue-soft); font-size: 20px;
  /* align the glyph with the bold subheading line, not the top of the box */
  display: flex; align-items: center; height: calc(16px * 1.5);
}
.svc-care__list strong { display: block; color: #fff; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 3px; }

/* care list: image reveals on hover of each subheading row */
.svc-care__item { position: relative; cursor: default; transition: background .3s; }
.svc-care__item:hover { background: rgba(255,255,255,.04); }
.svc-care__hover-img {
  position: absolute; top: 50%; right: 0; z-index: 5;
  width: 150px; height: 104px;
  transform: translate(14px, -50%) scale(.94);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.645,.045,.355,1), visibility .35s;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.16);
}
.svc-care__hover-img img { width: 100%; height: 100%; border-radius: 12px; }
.svc-care__item:hover .svc-care__hover-img {
  opacity: 1; visibility: visible; transform: translate(0, -50%) scale(1);
}
/* reserve room up-front so the copy never reflows AND never sits under the photo */
@media (min-width: 992px) {
  .svc-care__item > span:not(.svc-care__hover-img) { padding-right: 170px; }
}

/* 8. FAQ - clean full-width accordion, comfortable spacing */
.svc-faq { background: var(--svc-tint); }
.svc-faq__box { max-width: 860px; margin: 0 auto; }
.svc-faq .svc-section-head { text-align: center; margin-left: auto; margin-right: auto; }
.svc-faq__box .accrodion {
  background: #fff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.svc-faq__box .accrodion:last-child { margin-bottom: 0; }
.svc-faq__box .accrodion-title { padding: 22px 28px; cursor: pointer; }
.svc-faq__box .accrodion-title h4 { margin: 0; color: var(--svc-navy); font-size: 19px; }
.svc-faq__box .accrodion.active { border-color: var(--svc-blue); }
.svc-faq__box .accrodion-content .inner { padding: 0 28px 24px; }
.svc-faq__box .accrodion-content p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; }
.svc-faq__box .accrodion-content p:last-child { margin-bottom: 0; }

/* 9. FINAL CTA - navy band */
.svc-cta { background: var(--svc-navy); text-align: center; }
.svc-cta__inner { max-width: 720px; margin: 0 auto; }
.svc-cta h2 { color: #fff; font-size: 40px; margin-bottom: 18px; }
.svc-cta p { color: #ffffff; opacity: .9; font-size: 18px; margin: 0 auto 32px; }

/* CTA buttons (hero + final CTA) - match the HOME hero button:
   WHITE pill / navy text / BLUE round arrow chip / wrap-arrow hover animation.
   Reuses @keyframes wp-arrow-wrap defined in block 7h above. */
.svc-hero__btn .thm-btn,
.svc-cta__inner .thm-btn {
  background-color: #ffffff !important;
  color: var(--wvd-ink) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  overflow: hidden;
}
.svc-hero__btn .thm-btn *,
.svc-cta__inner .thm-btn * { color: var(--wvd-ink) !important; }
/* kill the theme's rising fill circle so nothing changes color on hover */
.svc-hero__btn .thm-btn::before,
.svc-hero__btn .thm-btn::after,
.svc-cta__inner .thm-btn::before,
.svc-cta__inner .thm-btn::after { display: none !important; }
/* arrow chip: BLUE round chip, WHITE arrow, overflow hidden for the wrap */
.svc-hero__btn .thm-btn .fas,
.svc-hero__btn .thm-btn [class*="fa-"],
.svc-cta__inner .thm-btn .fas,
.svc-cta__inner .thm-btn [class*="fa-"] {
  background-color: var(--wvd-blue) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}
.svc-hero__btn .thm-btn .fas::before,
.svc-hero__btn .thm-btn [class*="fa-"]::before,
.svc-cta__inner .thm-btn .fas::before,
.svc-cta__inner .thm-btn [class*="fa-"]::before {
  display: inline-block;
  position: relative;
  color: #ffffff !important;
}
.svc-hero__btn .thm-btn:hover .fas::before,
.svc-hero__btn .thm-btn:hover [class*="fa-"]::before,
.svc-cta__inner .thm-btn:hover .fas::before,
.svc-cta__inner .thm-btn:hover [class*="fa-"]::before {
  animation: wp-arrow-wrap .5s ease forwards;
}
/* HERO now sits on a LIGHT tint, so its primary CTA can't be a white pill.
   Override just the hero button: BLUE pill / white text / WHITE chip / blue arrow.
   (The final CTA button keeps the white pill - it's still on navy.) */
.svc-hero__btn .thm-btn { background-color: var(--svc-blue) !important; color: #ffffff !important; box-shadow: 0 8px 22px rgba(var(--wvd-blue-rgb), .28); }
.svc-hero__btn .thm-btn * { color: #ffffff !important; }
.svc-hero__btn .thm-btn .fas,
.svc-hero__btn .thm-btn [class*="fa-"] { background-color: #ffffff !important; color: var(--svc-blue) !important; }
.svc-hero__btn .thm-btn .fas::before,
.svc-hero__btn .thm-btn [class*="fa-"]::before { color: var(--svc-blue) !important; }

/* ===== SERVICES HUB PAGE (slug: services) ===== */
/* centered LIGHT hero (tint bg from .svc-hero, no media column) */
.svc-hub-hero { text-align: center; }
.svc-hub-hero .container { max-width: 900px; }
.svc-hub-hero .svc-eyebrow { justify-content: center; }
/* hub crumb: much smaller + truly centered (base .svc-page p forces max-width:68ch,
   which left-boxes the crumb; override to full width + auto margins). */
.svc-hub-hero .svc-hero__crumb { font-size: 17px; letter-spacing: .04em; margin: 0 auto 18px; max-width: none; text-align: center; }
.svc-hub-hero .svc-hero__title,
.svc-hub-hero .svc-hero__text { max-width: 720px; margin-left: auto; margin-right: auto; }
.svc-hub-hero .svc-hero__text { font-size: 19px; }
.svc-hub-hero .svc-hero__btn { justify-content: center; margin-bottom: 0; }

/* BLOG-ARCHIVE grid: 3-col cards with a real photo on top (per user). */
.svc-hub { background: #fff; }
.svc-hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.svc-hub-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--svc-border); border-radius: var(--svc-radius);
  overflow: hidden; height: 100%;
  color: var(--svc-ink);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.svc-hub-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(var(--wvd-navy-rgb), .14); border-color: transparent; }
.svc-hub-card__media { display: block; overflow: hidden; }
.svc-hub-card__media img {
  width: 100%; height: 200px; object-fit: cover; display: block;
  border-radius: 0; transition: transform .55s ease;
}
.svc-hub-card:hover .svc-hub-card__media img { transform: scale(1.05); }
.svc-hub-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 30px; }
.svc-hub-card__cat {
  font-family: "Space Grotesk", sans-serif; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--svc-blue); margin-bottom: 12px;
}
.svc-hub-card h3 { margin-bottom: 10px; font-size: 21px; }
.svc-hub-card p { font-size: 15px; margin-bottom: 22px; }
.svc-hub-card__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--svc-blue); font-weight: 600; font-size: 15px; font-family: "Space Grotesk", sans-serif;
}
.svc-hub-card__more iconify-icon { font-size: 18px; transition: transform .3s; }
.svc-hub-card:hover .svc-hub-card__more iconify-icon { transform: translateX(4px); }
@media (max-width: 991px) { .svc-hub__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .svc-hub__grid { grid-template-columns: 1fr; } .svc-hub-card__media img { height: 220px; } }

/* ---- Mobile collapse: every 2-col split stacks to a single column ---- */
@media (max-width: 991px) {
  .svc-page { --svc-pad: 56px; }
  .svc-hero { padding-top: 64px !important; padding-bottom: 64px !important; }
  .svc-hero__title { font-size: 38px; }
  .svc-hero__media { margin-top: 34px; }
  .svc-hero__media img { height: 340px; }
  .svc-split__content { padding-left: 0; margin-top: 30px; }
  .svc-benefits__content { padding-right: 0; }
  .svc-benefits__media { margin-top: 30px; }   /* text-first on mobile: image drops below */
  .svc-split__media img,
  .svc-benefits__media img { height: 300px; }
  /* timeline: single column, meta + photo drop below the copy */
  .svc-stop__body { grid-template-columns: 1fr; }
  .svc-stop__meta { grid-column: 1; grid-row: auto; text-align: left; margin-top: 10px; }
  .svc-stop__meta iconify-icon { margin: 0 0 6px 0; }
  /* no hover on touch: step photo always visible, full width under the copy */
  .svc-stop__img {
    grid-column: 1; grid-row: auto;
    opacity: 1; transform: none;
    width: 100%; height: 200px; margin-top: 18px; box-shadow: none;
  }
  /* care: stack, un-stick */
  .svc-care__grid { grid-template-columns: 1fr; }
  .svc-care__cost { position: static; margin-bottom: 30px; }
  .svc-care__cost-media img { height: 240px; }
  /* no hover on touch: care photo renders inline under the row copy */
  .svc-care__item { grid-template-columns: auto 1fr; }
  .svc-care__hover-img {
    position: static; opacity: 1; visibility: visible; transform: none;
    grid-column: 2; width: 100%; height: 170px; margin-top: 14px; box-shadow: none;
  }
  /* trust bar: stack the 3 pillars */
  .svc-whybar__list { grid-template-columns: 1fr; gap: 30px; }
  .svc-whybar__text { max-width: none; }
  .svc-cta h2 { font-size: 30px; }
}
@media (max-width: 575px) {
  .svc-hero__title { font-size: 32px; }
  .svc-stop { grid-template-columns: 48px 1fr; gap: 18px; }
  .svc-stop__node { width: 48px; }
  .svc-stop__dot { width: 48px; height: 48px; font-size: 19px; }
  /* the progress line is a real element (.svc-timeline-line), NOT .svc-track::before,
     so the old rule here never applied and the line kept its desktop offset
     (left:31px, centred for the 64px dot) while the dot shrank to 48px.
     48/2 - 2/2 = 23px puts it back on the dot's centre. */
  .svc-timeline-line { left: 23px; }
}

/* ===== MOBILE POLISH (service pages) ===== */
@media (max-width: 767px) {
  /* breadcrumb: smaller than the desktop 17px */
  .svc-hero__crumb,
  .svc-hub-hero .svc-hero__crumb { font-size: 12px !important; }

  /* left-align everything on mobile: centred type is hard to read on a narrow
     column. The trust bar below the hero is the ONE exception (stays centred). */
  .svc-page,
  .svc-intro,
  .svc-intro__inner,
  .svc-intro__title,
  .svc-intro__inner p,
  .svc-section-head,
  .svc-help__head,
  .svc-help__head h2,
  .svc-help__head p,
  .svc-faq .svc-section-head,
  .svc-cta,
  .svc-cta__inner,
  .svc-cta h2,
  .svc-cta p,
  .svc-hub-hero,
  .svc-hub-hero .svc-hero__crumb,
  .svc-hub-hero .svc-hero__title,
  .svc-hub-hero .svc-hero__text {
    text-align: left !important;
  }
  .svc-intro__inner p,
  .svc-help__head p,
  .svc-cta p,
  .svc-hub-hero .svc-hero__title,
  .svc-hub-hero .svc-hero__text { margin-left: 0 !important; margin-right: 0 !important; }
  .svc-hub-hero .svc-hero__btn,
  .svc-cta__inner .thm-btn { justify-content: flex-start !important; }

  /* the trust bar keeps its centred layout */
  .svc-whybar,
  .svc-whybar__title,
  .svc-whybar__item,
  .svc-whybar__text { text-align: center !important; }
  .svc-whybar__item { align-items: center !important; }
}

/* footer Instagram grid: equal left/right gutter on mobile. The 300px max-width
   left a big empty column on the right inside the full-width container. */
@media (max-width: 991px) {
  .footer-widget-two__gallery-list { max-width: none !important; }
}

/* =========================================================================
   SERVICE STEPS - plain numbered cards.
   Used on service pages whose process is a short, linear sequence (2-3 visits)
   where the scroll-timeline would be overkill. NOT every service page gets this
   or the timeline - the section is chosen per page to match the actual content.
   ========================================================================= */
.svc-steps { background: var(--svc-tint); }
.svc-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.svc-step-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: 36px 32px 34px;
  overflow: hidden;
}
/* oversized ghost number in the corner, plus the real numbered chip */
.svc-step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--svc-navy);
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 22px;
}
.svc-step-card h3 { margin-bottom: 12px; }
.svc-step-card p { font-size: 16px; margin-bottom: 0; }
@media (max-width: 991px) {
  .svc-steps__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   REVIEWS + VIDEO TESTIMONIALS
   ========================================================================= */

/* ---- the two platform links: a centred pair, not full-bleed rows -------
   At the container's full 1320px each card was 650px wide for ~25 characters of
   label - mostly empty. Cap the pair and centre it.
   Doubled-up class needed: the base `.svc-forms__grid` rule (4 columns) is
   declared LATER in this file, so a single-class modifier loses on source
   order despite being the more specific intent. */
.svc-forms__grid.svc-forms__grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin: 0 auto;
}
.svc-form-card.svc-form-card--wide {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 28px 26px;
}
.svc-form-card--wide .svc-form-card__label { padding-right: 30px; font-size: 18px; }
/* the platform marks (Google G / Facebook f) want to read as brand logos, so
   they get a light plate rather than the navy squircle the form tiles use */
.svc-form-card--wide .svc-form-card__icon {
  background: #ffffff;
  border: 1px solid var(--svc-border);
  color: var(--svc-navy);
  font-size: 26px;
  flex: 0 0 48px;
}

/* ---- Google reviews widget slot ---------------------------------------
   Holds the Trustindex free widget ([trustindex no-registration=google],
   layout 5 / light-background). Trustindex ships its own stylesheet, pulled
   client-side off the mount div's data-css-url, so everything here is a
   deliberate override on top of it - see the TRUSTINDEX WIDGET block near the
   end of this file. */
.svc-reviews { background: var(--svc-tint); }
/* centred head, same measure as the rest of the page's centred sections */
.svc-reviews .svc-section-head {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* The widget renders on user activity, not on load (loader.js waits for a
   mousemove/scroll), so the slot reserves its height to stop the page below
   from jumping when it finally appears. */
.svc-reviews__embed { min-height: 240px; }

/* ---- video testimonial cards (YouTube facade) -------------------------- */
.svc-videos { background: #ffffff; }
.svc-videos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.svc-video-card {
  background: var(--svc-tint);
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  overflow: hidden;
}
/* the clickable poster. It is a <button>, so the theme's button resets have to
   be undone before it can behave like a media tile. */
.svc-video-card__player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--wvd-navy-800);      /* fills the letterbox while the thumb decodes */
  cursor: pointer;
  overflow: hidden;
}
.svc-video-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .3s;
}
.svc-video-card__player:hover .svc-video-card__thumb {
  transform: scale(1.04);
  opacity: .82;
}
.svc-video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  color: var(--svc-navy);
  font-size: 30px;
  box-shadow: 0 10px 30px rgba(var(--wvd-navy-rgb), .28);
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .3s, color .3s;
}
.svc-video-card__player:hover .svc-video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--svc-blue);
  color: #ffffff;
}
/* the injected iframe takes the poster's exact box */
.svc-video-card__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.svc-video-card__body { padding: 24px 26px 26px; }
.svc-video-card__body h3 { margin: 0; }

@media (max-width: 991px) {
  .svc-videos__grid { grid-template-columns: 1fr; gap: 24px; }
  .svc-forms__grid--two { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .svc-form-card--wide { flex-direction: row; padding: 22px 20px; }
  .svc-form-card--wide .svc-form-card__label { font-size: 16px; }
  .svc-video-card__play { width: 60px; height: 60px; font-size: 25px; }
  .svc-videos .svc-section-head,
  .svc-reviews .svc-section-head { text-align: left !important; }
}

/* =========================================================================
   PRELOADER - brand logo reveal (replaces the theme's three bouncing dots)
   A dimmed logo sits under a clipped copy of itself; the copy wipes in from
   the left while a hairline bar fills along the bottom. Panel then slides up.
   Motion is CSS transitions driven by westpark-loader.js - no GSAP needed.
   ========================================================================= */

/* the theme's dot markup is gone, but its .loader shell rules still apply -
   neutralise the flex centering we do not want and take over the panel */
.wvd-loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .75s cubic-bezier(.65,.01,.05,.99);
  will-change: transform;
}
/* the exit: the whole panel lifts off the top of the viewport */
.wvd-loader.is-leaving { transform: translateY(-101%); }

.wvd-loader__logo {
  position: relative;
  /* Native size. The client's only logo asset is 190x150 and there is no vector
     source, so any render above this is an upscale - on a retina screen even the
     240px version left the tree's thin branches soft. Small and crisp beats big
     and mushy. (The img still points at the 570px copy so DPR>1 has pixels to
     downscale from.) */
  width: 190px;
  height: 150px;
}
.wvd-loader__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* the base copy is the "unfilled" state. At .16 the logo was so faint the wipe
   had nothing to travel across; .30 keeps it clearly secondary but visible. */
.wvd-loader__logo img.is-base { opacity: .30; }
/* the top copy is revealed left-to-right by shrinking its right inset.
   Starts fully clipped; the JS animates the inset toward 0%. */
.wvd-loader__logo img.is-top {
  clip-path: inset(0% 100% 0% 0%);
  transition: clip-path .35s cubic-bezier(.65,.01,.05,.99);
}

/* Progress bar sits UNDER the logo rather than pinned to the viewport floor -
   at the bottom of a 700px panel it was so far from the mark that the two read
   as unrelated. Width is tied to the logo so they scan as one unit.
   The track is the faint rule; the fill is the ::after that scales up. */
.wvd-loader__bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(50% - 128px);      /* just below the 150px-tall logo block */
  width: 180px;
  height: 3px;
  border-radius: 3px;
  background: rgba(var(--wvd-navy-rgb), .12);
  overflow: hidden;
}
.wvd-loader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--svc-blue, var(--wvd-blue));
  transform: scaleX(var(--wvd-progress, 0));
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.65,.01,.05,.99);
}

/* respect a user's reduced-motion setting: show the finished state, skip the
   wipe and the slide, and let the JS timeout hide it */
@media (prefers-reduced-motion: reduce) {
  .wvd-loader,
  .wvd-loader__logo img.is-top,
  .wvd-loader__bar { transition: none !important; }
  .wvd-loader__logo img.is-top { clip-path: inset(0) !important; }
}

/* =========================================================================
   ABOUT + CONTACT pages. Same scoped `.svc-page` system, same palette,
   same 18px radius, same 100px section rhythm. New components only.
   ========================================================================= */

/* ---- split, image-on-the-RIGHT variant (Bootstrap order-* handles the swap;
        this only mirrors the padding so the gutter lands on the correct side) ---- */
.svc-split--reverse .svc-split__content--left { padding-left: 0; padding-right: 24px; }

/* ---- TEAM cards (About) ------------------------------------------------ */
.svc-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.svc-team-card {
  background: #fff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-team-card__media img {
  width: 100%;
  /* the portraits are 900x900 squares (same shoot as the Dr Hardin card), so
     cover-cropping into a landscape box would take the tops of their heads off.
     Tall box + top anchor keeps the whole face in frame. */
  height: 400px;
  object-position: center top;
  border-radius: 0;          /* the card already clips the corners */
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
/* Tiffaine's source is a tall portrait (900x1125 after resize) rather than a
   square, so `cover` leaves ~330px of vertical slack in the 400px card box.
   She sits small and low in frame, so: scale her up 5% and pull the crop window
   DOWN the source (higher %), which moves her UP inside the card.
   The scale has to sit on a wrapper transform, not object-position - the latter
   only slides the existing crop, it cannot zoom. */
/* Tiffaine's card was rendering 460px tall while the other two were 400px:
   the img is a grid/flex item, so `scale()` grew its layout box and stretched
   the media strip with it. Pin the height on the WRAPPER (which the scale can't
   touch) and let the image overflow inside it. Now her box matches the others
   and object-position actually shifts the visible crop. */
.svc-team-card__media--lower { height: 400px; }
.svc-team-card__media--lower img {
  height: 100%;
  object-position: center 68%;
  transform: scale(1.15);
  transform-origin: center 45%;
}
/* keep the hover zoom relative to the new resting scale (base 1.06 would read
   as a zoom-OUT against 1.15) */
.svc-team-card:hover .svc-team-card__media--lower img { transform: scale(1.21); }
/* zoom only, no colour overlay (matches the home-page team hover) */
.svc-team-card:hover .svc-team-card__media img { transform: scale(1.06); }
.svc-team-card__media { overflow: hidden; }
.svc-team-card__body { padding: 30px 28px 34px; }
.svc-team-card__body h3 { margin-bottom: 4px; }
.svc-team-card__role {
  color: var(--svc-blue) !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 16px !important;
}
.svc-team-card__body p { font-size: 16px; }
.svc-team-card__fun {
  margin-bottom: 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--svc-border);
  font-size: 15px;
  color: var(--svc-muted);
}

/* ---- CONTACT: cards + hours ------------------------------------------- */
.svc-contact { background: #fff; }
.svc-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.svc-contact__cards { display: flex; flex-direction: column; gap: 20px; }
.svc-contact-card {
  display: grid;
  grid-template-columns: 60px 1fr;   /* icon plate + copy; fixed so rows align */
  gap: 22px;
  align-items: start;
  background: var(--svc-tint);
  border: 1px solid transparent;
  border-radius: var(--svc-radius);
  padding: 30px 28px;
  transition: border-color .3s, background .3s, transform .3s;
}
.svc-contact-card:hover {
  background: #fff;
  border-color: var(--svc-blue);
  transform: translateY(-3px);
}
.svc-contact-card__icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--svc-navy);
  color: #fff;
  font-size: 30px;
}
.svc-contact-card__body h3 { margin-bottom: 6px; }
.svc-contact-card__body p { font-size: 16px; margin-bottom: 6px; }
.svc-contact-card__meta {
  color: var(--svc-blue) !important;
  font-weight: 600;
  font-size: 15px !important;
}
.svc-contact-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  color: var(--svc-blue);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px;
}
.svc-contact-card__more iconify-icon { font-size: 18px; transition: transform .3s; }
.svc-contact-card:hover .svc-contact-card__more iconify-icon { transform: translateX(4px); }

.svc-hours {
  background: var(--svc-navy);
  border-radius: var(--svc-radius);
  padding: 44px 40px;
}
.svc-hours__title { color: #ffffff !important; font-size: 30px !important; margin-bottom: 26px !important; }
.svc-hours__list { margin: 0 0 18px; }
.svc-hours__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
}
.svc-hours__list li:last-child { border-bottom: 0; }
.svc-hours__day { color: #ffffff; font-weight: 600; }
.svc-hours__time { color: rgba(255,255,255,.78); }
.svc-hours__list li.is-closed .svc-hours__time { color: rgba(255,255,255,.45); }
.svc-hours__note {
  color: rgba(255,255,255,.6) !important;
  font-size: 14px !important;
  margin-bottom: 26px !important;
}
/* the navy panel needs the WHITE pill treatment (same as the hero CTA) */
.svc-hours .thm-btn { background-color: #ffffff !important; color: var(--svc-navy) !important; }
.svc-hours .thm-btn .fas { background-color: var(--svc-navy) !important; color: #ffffff !important; }

/* ---- CONTACT: map ------------------------------------------------------ */
.svc-map { background: var(--svc-tint); }
.svc-map__frame {
  border-radius: var(--svc-radius);
  overflow: hidden;
  line-height: 0;              /* kills the inline-frame descender gap */
}
.svc-map__frame iframe { display: block; width: 100%; border: 0; }

/* =========================================================================
   CONTACT v2 - built for ACTION, not reading.
   Everything a visitor needs to actually reach the office sits in one band:
   map on the left, address + phone + email + hours + CTA on the right.
   ========================================================================= */

/* ---- FIND US: map + details, one row ----------------------------------
   No top padding: the hero already ends on a tint band, so a gap here would
   read as dead space. Content starts flush at the section's top edge. */
.svc-findus { background: var(--svc-tint); padding-top: 0 !important; }
.svc-findus__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;   /* map slightly wider than the panel */
  gap: 30px;
  align-items: stretch;                /* the map matches the panel's height */
}
.svc-findus__map {
  border-radius: var(--svc-radius);
  overflow: hidden;
  line-height: 0;
  min-height: 560px;
}
.svc-findus__map iframe { display: block; width: 100%; height: 100%; border: 0; }

.svc-findus__panel {
  background: var(--svc-navy);
  border-radius: var(--svc-radius);
  padding: 46px 42px;
  display: flex;
  flex-direction: column;
}
.svc-findus__panel h2 {
  color: #ffffff !important;
  font-size: 30px !important;
  margin-bottom: 6px !important;
}
/* these two are <h3> so the outline matches the live site, but they must keep
   their label look - `.svc-page h3` would otherwise make them big and navy */
.svc-findus__doctor {
  color: var(--wvd-blue-soft) !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: .04em;
  margin-bottom: 30px !important;
}
.svc-findus__contacts { margin: 0 0 30px; }
.svc-findus__contacts li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.svc-findus__contacts li:first-child { padding-top: 0; }
.svc-findus__contacts li:last-child { border-bottom: 0; }
.svc-findus__icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(255,255,255,.1);
  color: #ffffff;
  font-size: 21px;
}
.svc-findus__contacts a {
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  transition: color .25s;
}
.svc-findus__contacts a:hover { color: var(--wvd-blue-soft); }

.svc-findus__hours { margin-bottom: 30px; }
.svc-findus__hours-label {
  color: rgba(255,255,255,.55) !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}
/* the hours list is shared with the old .svc-hours block, so only the deltas */
.svc-findus__hours .svc-hours__list li { padding: 11px 0; font-size: 15px; }
.svc-findus__hours .svc-hours__note { margin-bottom: 0 !important; }
/* CTA sits at the bottom of the panel regardless of content height.
   Hover = the ARROW GLYPH wraps (slides out right, returns from the left), same
   as the header / hero CTAs. The button itself does NOT change colour, so the
   theme's rising radial fills have to be killed - they would repaint the pill. */
.svc-findus__panel .thm-btn,
.svc-pay-card--feature .thm-btn {
  margin-top: auto;
  align-self: flex-start;
  background-color: #ffffff !important;
  color: var(--svc-navy) !important;
  overflow: hidden !important;
  position: relative !important;
}
.svc-findus__panel .thm-btn::before,
.svc-findus__panel .thm-btn::after,
.svc-pay-card--feature .thm-btn::before,
.svc-pay-card--feature .thm-btn::after { display: none !important; }
.svc-findus__panel .thm-btn:hover,
.svc-pay-card--feature .thm-btn:hover {
  background-color: #ffffff !important;
  color: var(--svc-navy) !important;
}
.svc-findus__panel .thm-btn .fas,
.svc-pay-card--feature .thm-btn .fas {
  background-color: var(--svc-navy) !important;
  color: #ffffff !important;
  overflow: hidden;
}
/* chip keeps its colours; only the arrow inside it animates */
.svc-findus__panel .thm-btn:hover .fas,
.svc-pay-card--feature .thm-btn:hover .fas {
  background-color: var(--svc-navy) !important;
  color: #ffffff !important;
}
.svc-findus__panel .thm-btn .fas::before,
.svc-pay-card--feature .thm-btn .fas::before {
  display: inline-block;
  position: relative;
}
.svc-findus__panel .thm-btn:hover .fas::before,
.svc-pay-card--feature .thm-btn:hover .fas::before {
  animation: wp-arrow-wrap .5s ease forwards;
}

/* ---- PATIENT FORMS: 4 quick-action tiles ------------------------------ */
.svc-forms { background: #ffffff; padding-top: 0 !important; }
/* centred head, same measure as the hero (the default .svc-section-head is a
   left-aligned 760px column, which reads narrow and off-axis under a centred hero) */
.svc-forms .svc-section-head,
.svc-pay .svc-section-head,
.svc-faq .svc-section-head {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.svc-forms .svc-section-head p,
.svc-pay .svc-section-head p,
.svc-faq .svc-section-head p {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.svc-forms__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* the out-link arrow is pinned to the top-right corner (it is a corner affordance,
   not a row item), so the card only needs icon + label stacked - hence shorter. */
.svc-form-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--svc-tint);
  border: 1px solid transparent;
  border-radius: var(--svc-radius);
  padding: 24px 22px;
  transition: border-color .3s, background .3s, transform .3s;
}
.svc-form-card:hover {
  background: #ffffff;
  border-color: var(--svc-blue);
  transform: translateY(-3px);
}
.svc-form-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--svc-navy);
  color: #ffffff;
  font-size: 24px;
}
.svc-form-card__label {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--svc-navy);
  padding-right: 22px;      /* keep the label clear of the corner arrow */
}
.svc-form-card__more {
  position: absolute;
  top: 20px; right: 20px;
  color: var(--svc-blue);
  font-size: 19px;
  line-height: 1;
  transition: transform .3s;
}
.svc-form-card:hover .svc-form-card__more { transform: translate(3px, -3px); }

/* ---- INSURANCE + FINANCING -------------------------------------------- */
.svc-pay { background: var(--svc-tint); }
.svc-pay__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.svc-pay-card {
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: 36px 32px;
  height: 100%;
}
.svc-pay-card__icon {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--svc-navy);
  color: #ffffff;
  font-size: 28px;
  margin-bottom: 22px;
}
.svc-pay-card h3 { margin-bottom: 14px; }
.svc-pay-card p { font-size: 16px; }

/* the membership plan is the offer we actually want them to take */
.svc-pay-card--feature {
  background: var(--svc-navy);
  border-color: var(--svc-navy);
  position: relative;
  display: flex;
  flex-direction: column;
}
.svc-pay-card--feature h3,
.svc-pay-card--feature p { color: #ffffff !important; }
.svc-pay-card--feature p { color: rgba(255,255,255,.75) !important; }
.svc-pay-card__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--svc-blue);
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.svc-pay-card__price {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 18px;
}
.svc-pay-card__price span {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  margin-left: 4px;
}
.svc-pay-card__list { margin: 24px 0 28px; }
.svc-pay-card__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  color: rgba(255,255,255,.88);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.svc-pay-card__list iconify-icon { color: var(--wvd-blue-soft); font-size: 20px; margin-top: 1px; }
/* (the white-pill hover treatment for this button lives with the findus panel
   rule above - both are white pills on navy and share it) */

.svc-pay-card__links { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.svc-pay-card__links a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--svc-blue);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: gap .25s;
}
.svc-pay-card__links a:hover { gap: 12px; }
.svc-pay-card__links iconify-icon { font-size: 17px; }

/* the FAQ closes the page, so it does not need a top gap either - the pay
   section above already ends on its own padding */
.svc-page .svc-faq { padding-top: 0 !important; }

/* highlight pulse: when a hero chip scrolls you to the map or the hours, the
   target flashes a blue ring so it is obvious what you were sent to. */
@keyframes wvdPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--wvd-blue-rgb), .55); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--wvd-blue-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--wvd-blue-rgb), 0); }
}
.wvd-flash {
  animation: wvdPulse 1.4s ease-out 2;
  border-radius: var(--svc-radius);
}

/* in-house financing: a wide footnote under the three cards */
.svc-pay__note {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: 34px 32px;
  margin-top: 24px;
}
.svc-pay__note-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: var(--svc-tint);
  color: var(--svc-blue);
  font-size: 32px;
}
.svc-pay__note-body h3 { margin-bottom: 10px; }
.svc-pay__note-body p { margin-bottom: 0; font-size: 16px; max-width: none; }

/* ---- ABOUT: Dr Hardin portrait in the credentials split ----------------
   The source file is a 1254x1254 SQUARE. In the shared 648x480 landscape box
   `object-fit: cover` crops top and bottom evenly, which took the top of his
   head off. Give it a taller box and anchor the crop to the top of the frame. */
.svc-split__media--portrait img {
  height: 560px;
  object-position: center top;
}

/* ---- ABOUT: centred hero (no photo, no lead paragraph) ----------------
   Heading + crumb + CTAs + trust chips, all on the centre axis. The base
   `.svc-hero__*` rules are left-aligned and width-capped, so each has to be
   re-centred and un-capped explicitly. */
.svc-hero--centered { text-align: center; padding: 110px 0 96px !important; }
/* wide enough for the H1 to hold ONE line at 52px (it measured 860px and wrapped) */
.svc-hero--centered .svc-hero__content { max-width: 1100px; margin: 0 auto; }
/* `.svc-page p` sets max-width:68ch at a HIGHER specificity (0,1,1) than the
   crumb class (0,1,0), so the crumb was boxed narrower than its parent and read
   as off-centre. Reset it and let the centred text-align do the work. */
.svc-hero--centered .svc-hero__crumb {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.svc-hero--centered .svc-hero__title {
  font-size: 52px;
  line-height: 1.1;
  white-space: nowrap;   /* one line - the title is short enough at this width */
  margin-bottom: 36px;
}
.svc-hero--centered .svc-hero__btn {
  justify-content: center;
  margin-bottom: 44px;
}
.svc-hero--centered .svc-hero__trust {
  justify-content: center;
  gap: 14px 34px;
}

/* Headings that the LIVE site does not have are rendered as div/span so we do
   not invent outline entries the client never had. They still need the h2/h3
   look, which the theme applied via the tag. */
.svc-page .svc-sub-title {
  color: var(--svc-navy);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 500;          /* a <div> defaults to 400; the theme's h2 is 500 */
  letter-spacing: -0.01em;
  font-size: clamp(29px,3.6vw,44px);
  line-height: 1.12;
  margin: 0 0 22px;
}
.svc-page .svc-cta__title {
  color: #ffffff;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: -0.01em;
  font-size: clamp(29px,3.6vw,40px);
  line-height: 1.12;
  margin: 0 0 16px;
}
.svc-section-head .svc-sub-title { margin-bottom: 22px; }

/* ---- ABOUT: trust bar as 3 cards (instead of the flat centred icon row) */
.svc-whybar--cards { background: #ffffff; padding: 90px 0 !important; }
.svc-whybar--cards .svc-whybar__title {
  text-align: center;
  margin-bottom: 44px;
}
.svc-whybar--cards .svc-whybar__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.svc-whybar--cards .svc-whybar__item {
  /* icon left, copy right - a card, not a stacked centred column */
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: center;
  text-align: left;
  background: var(--svc-tint);
  border: 1px solid transparent;
  border-radius: var(--svc-radius);
  padding: 28px 26px;
  transition: border-color .3s, background .3s, transform .3s;
}
.svc-whybar--cards .svc-whybar__item:hover {
  background: #ffffff;
  border-color: var(--svc-blue);
  transform: translateY(-3px);
}
.svc-whybar--cards .svc-whybar__icon {
  width: 58px; height: 58px;
  border-radius: 14px;        /* squircle, matching the other icon plates */
  background: var(--svc-navy);
  font-size: 28px;
}
.svc-whybar--cards .svc-whybar__text {
  max-width: none;
  text-align: left;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--svc-navy);
}

/* ---- Lightbox (magnific): lock the image, no scrollbars ---------------
   The theme opens `.img-popup` as a magnific IMAGE gallery. Without a size
   cap the raw file can exceed the viewport, and magnific then lets the figure
   scroll in both axes. Cap it to the viewport instead. */
.mfp-wrap,
.mfp-container { overflow: hidden !important; }
/* the theme's backdrop is too light - the page reads through it */
.mfp-bg { background: var(--wvd-navy-900) !important; opacity: .92 !important; }
.mfp-figure figure { margin: 0; }
img.mfp-img {
  max-width: 92vw !important;
  max-height: 84vh !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 14px;
}
.mfp-figure::after { display: none; }   /* the theme's drop-shadow box misfits a capped img */
.mfp-bottom-bar { margin-top: -30px; }
.mfp-counter { color: rgba(255,255,255,.7); }
/* gallery arrows: make them visible on a photo background */
.mfp-arrow { opacity: .85; }
.mfp-arrow:hover { opacity: 1; }

/* ---- ABOUT: counter strip (theme's counter-one, reskinned) -------------
   The theme section is a navy band with 4 odometer counters. Its own rules
   already handle the odometer; these only fix the icon (we swapped the theme's
   icon-font <span> for an iconify-icon, which has no size of its own) and pin
   the band to the brand navy. */
.wvd-counter { background: var(--svc-navy) !important; padding: 72px 0 !important; }
.wvd-counter .counter-one__inner { background: none !important; padding: 0 !important; }
.wvd-counter .counter-one__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 0;
}
.wvd-counter .counter-one__list li {
  display: flex; align-items: center; gap: 18px;
  border-right: 1px solid rgba(255,255,255,.14);
  padding-right: 24px;
}
.wvd-counter .counter-one__list li:last-child { border-right: 0; }
.wvd-counter .counter-one__icon {
  width: 64px; height: 64px; flex: 0 0 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: rgba(255,255,255,.1);
  color: #ffffff;
  font-size: 34px;
}
/* the icon is a web component, so it has no intrinsic size - it has to be told */
.wvd-counter .counter-one__icon iconify-icon { font-size: inherit; color: inherit; }
.wvd-counter .counter-one__count { display: flex; align-items: baseline; gap: 2px; }
.wvd-counter .counter-one__count h3,
.wvd-counter .counter-one__count .odometer,
.wvd-counter .counter-one__count span {
  color: #ffffff !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 38px !important;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.wvd-counter .counter-one__text {
  color: rgba(255,255,255,.72) !important;
  font-size: 15px !important;
  line-height: 1.4;
  margin: 6px 0 0 !important;
  max-width: none;
}

/* =========================================================================
   Sections tagged .wvd-flush start at their own top edge - the section above
   already closes with its own bottom padding, so a top gap doubles the rhythm.
   It is an opt-in class (not a type selector) because `.svc-page` lives in the
   shared chrome: styling `.svc-page .svc-split` would also hit Contact's
   "Your First Visit", which DOES need its top padding.
   ========================================================================= */
.svc-page .wvd-flush { padding-top: 0 !important; }

/* The About intro sits directly under the 3-card trust row, so it should share
   that row's measure (the full 1320px container), not the narrower 900px column
   the service pages use. `.svc-page p { max-width: 68ch }` outranks the class,
   so the paragraph needs its own reset. */
.svc-intro.wvd-flush .svc-intro__inner { max-width: none; }
.svc-intro.wvd-flush .svc-intro__inner p { max-width: none; }

/* ---- ABOUT: office tour gallery --------------------------------------- */
.svc-tour { background: #ffffff; }
/* centred head at the hero's measure (default .svc-section-head is a
   left-aligned 760px column, which reads narrow under a centred hero) */
.svc-tour .svc-section-head {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.svc-tour .svc-section-head p {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
/* 4-col mosaic: two tiles span 2 columns so the grid does not read as a plain
   uniform strip. Rows are fixed so every tile keeps the same height. */
.svc-tour__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 18px;
}
.svc-tour__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--svc-radius);
}
.svc-tour__item--wide { grid-column: span 2; }
.svc-tour__item img {
  width: 100%; height: 100%;
  border-radius: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.svc-tour__item:hover img { transform: scale(1.07); }
.svc-tour__zoom {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--wvd-navy-rgb), .55);
  color: #ffffff;
  font-size: 34px;
  opacity: 0;
  transition: opacity .35s ease;
}
.svc-tour__item:hover .svc-tour__zoom { opacity: 1; }

/* ---- ABOUT: community involvement ------------------------------------- */
.svc-community { background: var(--svc-tint); }
/* NOT sticky: the column is now tall (copy + a 460px portrait), so pinning it
   would leave it hanging mid-scroll instead of tracking the list beside it. */
.svc-community__head { position: static; }
.svc-community__head p { margin-bottom: 30px; }
/* the Plano street shot is a 2:3 portrait - a 260px landscape box would crop
   it to a strip. Let it stand tall next to the (long) involvement list. */
.svc-community__media img { width: 100%; height: 460px; object-position: center 40%; }
.svc-community__list { margin: 0; padding-left: 30px; }
.svc-community__list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--svc-border);
}
.svc-community__list li:first-child { padding-top: 0; }
.svc-community__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-community__icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  color: var(--svc-blue);
  font-size: 24px;
}
.svc-community__list p { margin: 0; font-size: 16px; max-width: none; }
.svc-community__list p b { color: var(--svc-navy); font-weight: 700; }
.svc-community__list p a { color: var(--svc-blue); text-decoration: underline; }

/* ---- ABOUT + CONTACT mobile ------------------------------------------- */
@media (max-width: 1199px) {
  .wvd-counter .counter-one__list { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .wvd-counter .counter-one__list li:nth-child(2n) { border-right: 0; }
}
@media (max-width: 991px) {
  .svc-team__grid { grid-template-columns: 1fr; }
  .svc-team-card__media img { height: 300px; }
  .svc-contact__grid { grid-template-columns: 1fr; }
  .svc-split--reverse .svc-split__content--left { padding-right: 0; margin-top: 30px; }
  /* tour: 2-col, no spans */
  .svc-tour__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .svc-tour__item--wide { grid-column: span 2; }
  /* community: un-stick, image full width, drop the left indent */
  .svc-community__head { position: static; margin-bottom: 36px; }
  .svc-community__list { padding-left: 0; }
  /* centred hero + card trust bar collapse */
  .svc-hero--centered { padding: 70px 0 64px !important; }
  /* the desktop rule pins the H1 to one line; below 1100px it no longer fits,
     so it has to be allowed to wrap again or it overflows the viewport */
  .svc-hero--centered .svc-hero__title { font-size: 40px; white-space: normal; }
  .svc-whybar--cards { padding: 64px 0 !important; }
  .svc-whybar--cards .svc-whybar__list { grid-template-columns: 1fr; gap: 16px; }
  .svc-split__media--portrait img { height: 480px; }

  /* CONTACT v2: map stacks above the details panel; tiles + plans go 2-up */
  .svc-findus__grid { grid-template-columns: 1fr; }
  .svc-findus__map { min-height: 320px; }
  .svc-findus__panel { padding: 36px 28px; }
  .svc-forms__grid { grid-template-columns: repeat(2, 1fr); }
  .svc-pay__grid { grid-template-columns: 1fr; }
  /* image-right variant: on mobile the copy must still come FIRST, so undo
     the Bootstrap order swap (order-lg-* only applies >=992px, but the DOM
     order here is media-then-copy, so pin it explicitly) */
  .svc-split--reverse .order-lg-2 { order: 2; }
  .svc-split--reverse .order-lg-1 { order: 1; }
  .svc-hours { padding: 36px 28px; }
  .svc-hours__title { font-size: 26px !important; }
  .svc-map__frame iframe { height: 360px !important; }
}
@media (max-width: 767px) {
  /* left-align the About/Contact heads too (same rule set as the service pages) */
  .svc-map .svc-section-head,
  .svc-map .svc-section-head h2,
  .svc-map .svc-section-head p,
  .svc-tour .svc-section-head,
  .svc-tour .svc-section-head h2,
  .svc-tour .svc-section-head p { text-align: left !important; }
  .svc-contact-card { grid-template-columns: 52px 1fr; gap: 16px; padding: 24px 20px; }
  .svc-contact-card__icon { width: 52px; height: 52px; font-size: 26px; }
  /* counter: one per row, otherwise the 38px numbers wrap */
  .wvd-counter { padding: 52px 0 !important; }
  .wvd-counter .counter-one__list { grid-template-columns: 1fr; gap: 26px; }
  .wvd-counter .counter-one__list li { border-right: 0; padding-right: 0; }
  .svc-tour__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .svc-tour__item--wide { grid-column: span 1; }
  .svc-community__list li { grid-template-columns: 40px 1fr; gap: 14px; }
  .svc-community__icon { width: 40px; height: 40px; font-size: 21px; }
  /* CONTACT v2 mobile */
  .svc-forms__grid { grid-template-columns: 1fr; }
  .svc-form-card { grid-template-rows: auto auto auto; }
  .svc-pay-card { padding: 30px 24px; }
  .svc-pay__note { grid-template-columns: 1fr; gap: 16px; padding: 28px 24px; }
  .svc-pay-card__price { font-size: 38px; }
  .svc-forms .svc-section-head,
  .svc-forms .svc-section-head h2,
  .svc-forms .svc-section-head p,
  .svc-pay .svc-section-head,
  .svc-pay .svc-section-head h2,
  .svc-pay .svc-section-head p { text-align: left !important; }

  /* the About hero is deliberately centred, so it opts OUT of the global
     mobile left-align rule above (which targets `.svc-page` and cascades in) */
  .svc-hero--centered,
  .svc-hero--centered .svc-hero__crumb,
  .svc-hero--centered .svc-hero__title,
  .svc-whybar--cards .svc-whybar__title { text-align: center !important; }
  .svc-hero--centered .svc-hero__btn,
  .svc-hero--centered .svc-hero__trust { justify-content: center !important; }
  .svc-hero--centered .svc-hero__title { font-size: 34px; }
  /* but the CARDS inside the bar stay left-aligned (they are cards, not a row) */
  .svc-whybar--cards .svc-whybar__item,
  .svc-whybar--cards .svc-whybar__text { text-align: left !important; }
  .svc-whybar--cards .svc-whybar__item { align-items: center !important; }
}

/* ============================================================================
   HERO APPOINTMENT FORM  (/home-form/ page)
   Racquel task: replace the Adit "Book Now" CTA in the hero with a real
   appointment form. Left column keeps the copy + Watch-Video button; right
   column is this white card. Backend = custom REST endpoint (see functions
   snippet); Mailgun send is a TODO until the sending domain is verified.
   ========================================================================== */
/* --wvd-navy / --wvd-blue used to be declared here; they now live in the single
   palette block at the top of this file. */

/* The form REPLACES the image+reviews cluster only. The original hero layout is
   untouched: .main-slider__content keeps its 177/180 padding and the 65px H1;
   .main-slider__img-box stays position:absolute right of the copy. We just swap
   its contents (image -> form card) and pin the card to the image's footprint. */
/* Symmetric gap around the form: the space above it (header bottom -> form top)
   equals the space below it (form bottom -> hero bottom). The theme's content
   padding-top (~177px) sets the top gap; match the bottom gap to it so the hero
   ends the same distance under the form. The form is pinned to that top gap and
   the content's min-height guarantees the hero contains it + the equal bottom
   gap. Card height ~606; gap 57 -> min-height 57+606+57 = 720. */
.main-slider--form .main-slider__content {
  position: relative;
  padding-bottom: 80px !important;   /* bottom gap, a little more than the top */
  /* The card is position:absolute, so it does NOT push this box taller. The
     floor has to be maintained by hand whenever the card's contents change.
     2026-08-11: the Cloudflare Turnstile widget added ~65px to the card, which
     took it past the old 720 and left the submit button clipped by the hero's
     bottom edge.
       57 (top gap) + ~671 (card, incl. Turnstile) + 80 (bottom gap) = 808
     Rounded up for headroom. If a field is ever added or removed here, this
     number moves with it. */
  min-height: 830px;
}
@media (max-width: 1199px) {
  /* Below the desktop breakpoint the card returns to normal flow and sizes
     itself, so the hand-set floor would only add dead space. */
  .main-slider--form .main-slider__content { min-height: 0; }
}
.main-slider__img-box--form {
  width: 430px;
  right: -40px;             /* push toward the right edge (image sat at -120px) */
  top: 57px !important;      /* gap from content top == gap below the card */
  bottom: auto !important;
  transform: none !important;
  align-items: stretch;
}

/* the form occupies the right ~430px of the hero. Keep the copy (H1 etc.) from
   running under it: cap the text column so "TRUSTED DENTIST IN PLANO, TX" ends
   before the card instead of sliding behind it. */
.main-slider--form .main-slider__content > *:not(.main-slider__img-box--form) {
  max-width: calc(100% - 470px);
}

/* Google-reviews badge moved ABOVE the "Plano's Most Genuine Dentist" lead.
   Original pill look but COMPACT - the theme sizes are hero-scale (50px count,
   65px avatars, 24px text) which is gigantic for a small trust chip. Shrink the
   whole cluster and hug its content so it barely nudges the hero down. */
.main-slider__satisfied-customer--top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  width: auto !important;
  max-width: 100%;
  padding: 10px 16px !important;
  margin: 0 0 16px !important;
  border-radius: 12px !important;
}
.main-slider__satisfied-customer--top .main-slider__satisfied-customer-inner {
  margin: 0 !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
}
/* the big "300+" number + plus sign */
.main-slider__satisfied-customer--top .main-slider__satisfied-customer-count span:not(.odometer),
.main-slider__satisfied-customer--top .odometer {
  font-size: 22px !important;
  line-height: 1 !important;
}
.main-slider__satisfied-customer--top .wp-google-g { width: 22px !important; height: 22px !important; }
/* avatars: 65px -> 26px */
.main-slider__satisfied-customer--top .main-slider__satisfied-customer-img {
  width: 26px !important;
  height: 26px !important;
  border-width: 2px !important;
}
.main-slider__satisfied-customer--top .main-slider__satisfied-customer-text {
  font-size: 16px !important;          /* match the hero body copy size */
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;                /* sit close to the "300+" */
  color: var(--wvd-navy) !important;   /* match the "300+" navy, not the blue link */
  text-align: left !important;
  white-space: nowrap;
}
.main-slider__img-box--form .wvd-form-card { width: 100%; }

/* the card itself: white, floats on the navy hero, subtle lift */
.wvd-form-card {
  background: #fff;
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 24px 60px rgba(var(--wvd-navy-rgb), .28);
  color: var(--wvd-ink);
}
.wvd-form-card__head { margin: 0 0 18px; }
.wvd-form-card__title {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wvd-navy);
  margin: 0 0 6px;
}
.wvd-form-card__sub {
  font-size: 14px;
  line-height: 1.4;
  color: var(--wvd-muted-2);
  margin: 0;
}

.wvd-field { margin: 0 0 13px; }
.wvd-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--wvd-navy);
  margin: 0 0 6px;
}
.wvd-field label .wvd-req { color: var(--wvd-blue); margin-left: 2px; }

.wvd-field input[type="text"],
.wvd-field input[type="tel"],
.wvd-field input[type="email"],
.wvd-field select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--wvd-line);
  border-radius: 10px;
  background: var(--wvd-tint-soft);
  font-size: 15px;
  color: var(--wvd-ink);
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  appearance: none;
  -webkit-appearance: none;
}
.wvd-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2303246B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.wvd-field input:focus,
.wvd-field select:focus {
  outline: none;
  border-color: var(--wvd-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--wvd-blue-rgb), .14);
}
.wvd-field input::placeholder { color: var(--wvd-muted-4); }

/* day + time on one row */
.wvd-field--row {
  display: flex;
  gap: 14px;
}
.wvd-field--row .wvd-field { flex: 1 1 0; margin: 0; }

/* AM/PM segmented radio */
.wvd-timeseg {
  display: flex;
  gap: 8px;
}
.wvd-timeseg input { position: absolute; opacity: 0; pointer-events: none; }
.wvd-timeseg label {
  flex: 1 1 0;
  margin: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--wvd-line);
  border-radius: 10px;
  background: var(--wvd-tint-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wvd-muted-2);
  cursor: pointer;
  transition: all .16s ease;
}
.wvd-timeseg input:checked + label {
  border-color: var(--wvd-blue);
  background: var(--wvd-blue);
  color: #fff;
}
.wvd-timeseg input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(var(--wvd-blue-rgb), .18);
}
/* PM gets disabled when Saturday is picked (Sat = AM only). JS toggles this */
.wvd-timeseg input:disabled + label {
  opacity: .4;
  cursor: not-allowed;
  background: var(--wvd-wash-5);
}
.wvd-timeseg__note {
  font-size: 12px;
  color: var(--wvd-muted-2);
  margin: 0;
  min-height: 0;
}
.wvd-timeseg__note:not(:empty) { margin: 6px 0 0; }

/* honeypot - visually gone, still in the DOM for bots */
.wvd-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* submit button: same WHITE-pill / navy-text / blue-arrow-chip language as the
   theme thm-btn, but full width and navy-filled so it reads as the primary
   action inside a white card. Arrow uses the shared wp-arrow-wrap keyframe. */
.wvd-submit {
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border: none;
  border-radius: 12px;
  background: var(--wvd-navy);
  color: #fff;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: background .2s ease;
}
.wvd-submit:hover { background: var(--wvd-navy-700); }
.wvd-submit__arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--wvd-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wvd-submit__arrow iconify-icon { font-size: 16px; color: #fff; }
.wvd-submit:hover .wvd-submit__arrow iconify-icon {
  animation: wp-arrow-wrap .5s ease forwards;
}
.wvd-submit:disabled { opacity: .6; cursor: wait; }

/* per-field + form-level messages */
.wvd-field.is-invalid input,
.wvd-field.is-invalid select { border-color: #d64545; background: #fff5f5; }
.wvd-field__err {
  display: none;
  font-size: 12px;
  color: #d64545;
  margin: 5px 0 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.wvd-field.is-invalid .wvd-field__err { display: block; }

.wvd-form-msg {
  display: none;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.wvd-form-msg--ok  { display: block; background: #e8f6ee; color: #1c7a44; border: 1px solid #b7e3c8; }
.wvd-form-msg--err { display: block; background: #fdeaea; color: #b13030; border: 1px solid #f2c4c4; }

/* success state: swap the whole card body for a confirmation */
.wvd-form-card.is-sent .wvd-form-body { display: none; }
.wvd-form-sent {
  display: none;
  text-align: center;
  padding: 20px 6px;
}
.wvd-form-card.is-sent .wvd-form-sent { display: block; }
.wvd-form-sent__icon {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #e8f6ee;
  display: flex; align-items: center; justify-content: center;
}
.wvd-form-sent__icon iconify-icon { font-size: 34px; color: #1c7a44; }
.wvd-form-sent h3 {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600; font-size: 22px; color: var(--wvd-navy); margin: 0 0 8px;
}
.wvd-form-sent p { font-size: 15px; color: var(--wvd-muted-2); margin: 0; }

/* the theme's responsive.css hides .main-slider__img-box below desktop; the FORM
   variant must stay visible - drop it back into normal flow, full width, under
   the copy. Higher specificity + !important beats the theme's display:none. */
@media (max-width: 1199px) {
  .main-slider__img-box.main-slider__img-box--form {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 520px;
    right: auto !important;
    top: auto !important;
    margin: 34px 0 0 !important;
  }
}
@media (max-width: 991px) {
  .wvd-form-card { padding: 26px 22px 24px; }
}

/* ============================================================================
   TEETH WHITENING - variety elements so the page is not 9 stacked splits
   ========================================================================== */

/* how-it-works: centered intro heading + copy, then just the two method cards
   (no oversized side image, max two images in this whole section) */
.svc-methods__head {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}
.svc-methods__head h2 { margin: 0 0 16px; }
.svc-methods__head p { color: var(--wvd-muted-2); margin: 0; }

/* two "method" cards (Take-Home / In-Office): image on top, copy below */
.svc-methods { margin-top: 0; }
.svc-method-card {
  height: 100%;
  text-align: left;
  padding: 0 0 26px;
  overflow: hidden;
}
.svc-method-card__media {
  margin: 0 0 22px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.svc-method-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-method-card h3 { margin: 0 22px 12px; }
.svc-method-card p { margin: 0 22px; }

/* price cards - the 4 whitening cost tiers as a tidy grid */
.svc-cost-types { margin-top: 56px; }
.svc-cost-types > h3 { text-align: center; margin: 0 0 28px; }
.svc-cost-types__grid { row-gap: 24px; }
.svc-price-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--svc-border, var(--wvd-border));
  border-radius: 16px;
  padding: 26px 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(var(--wvd-navy-rgb), .12);
}
.svc-price-card__amount {
  display: block;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  color: var(--svc-blue, var(--wvd-blue));
  margin: 0 0 8px;
}
.svc-price-card h4 {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--svc-navy, var(--wvd-navy));
  margin: 0 0 12px;
}
.svc-price-card p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--wvd-muted-2); }

/* closing paragraph under a benefits grid: centered, roomy top gap */
.svc-benefits__foot {
  max-width: 900px !important;
  margin: 44px auto 0 !important;
  padding-top: 4px;
  text-align: center;
  color: var(--wvd-muted-2);
  line-height: 1.7;
}

/* cost intro: balanced two-column, image no longer full-width below the text */
.svc-cost-intro__media {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.svc-cost-intro__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-cost-intro__copy .svc-care__badge { margin-bottom: 18px; }

/* one split for "Factors" (keeps a single image break, not four) */
.svc-cost__split { margin-top: 56px; }

/* ---- Fast VS Inexpensive: real two-column comparison ---- */
.svc-vs { margin-top: 64px; }
/* Pinned to the h2 scale, and prefixed with .svc-page to beat `.svc-page h2`
   (0,1,1), for the same reason .svc-whybar__title is: the tag varies by page.
   This section title is an <h2> on /tooth-extractions/ but an <h3> on
   /teeth-whitening/, so with no size of its own it fell through to the theme's
   tag defaults and rendered 22px on one page and 44px on the other - the same
   component, half the size, on pages nobody compares side by side.
   Found by Tools/Puppeteer/_wvd_class_collisions.js. The heading LEVELS are
   left alone: changing them would rewrite the document outline, which is the
   SEO team's call, not a styling fix. */
.svc-page .svc-vs__title {
  text-align: center;
  margin: 0 0 14px;
  font-size: clamp(29px,3.6vw,44px);
  line-height: 1.12;
}
/* `.svc-page p` forces max-width:68ch + margin:0 at higher specificity, which
   pins these paragraphs left. Override so they truly center on the section axis. */
.svc-vs .svc-vs__lede {
  max-width: 900px !important;
  margin: 0 auto 36px !important;
  text-align: center;
  color: var(--wvd-muted-2);
  line-height: 1.65;
}
/* gap wide enough to seat the VS pill BETWEEN the cards, not over them */
.svc-vs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  position: relative;
  align-items: stretch;
}
.svc-vs__grid::before {
  content: "VS";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--svc-navy, var(--wvd-navy));
  border: 2px solid var(--svc-navy, var(--wvd-navy));
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
  box-shadow: 0 10px 26px rgba(var(--wvd-navy-rgb), .18);
}
.svc-vs__card {
  border-radius: 18px;
  padding: 34px 32px;
  border: 1px solid var(--svc-border, var(--wvd-border));
  height: 100%;
}
.svc-vs__card--pro {
  background: var(--svc-navy, var(--wvd-navy));
  color: #fff;
  border-color: transparent;
}
.svc-vs .svc-vs__card--pro p { color: rgba(255,255,255,.92) !important; }
.svc-vs__card--diy { background: #fff; }
.svc-vs__head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.svc-vs__icon {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 24px;
}
.svc-vs__card--pro .svc-vs__icon { background: rgba(255,255,255,.14); color: #fff; }
.svc-vs__card--diy .svc-vs__icon { background: var(--wvd-wash-4); color: var(--svc-blue, var(--wvd-blue)); }
.svc-vs__head h4 { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 19px; }
.svc-vs__card--pro .svc-vs__head h4 { color: #fff; }
.svc-vs__card--diy .svc-vs__head h4 { color: var(--svc-navy, var(--wvd-navy)); }
.svc-vs__card p { margin: 0; line-height: 1.6; }
.svc-vs .svc-vs__foot {
  max-width: 900px !important;
  margin: 56px auto 0 !important;
  padding-top: 8px;
  text-align: center;
  color: var(--wvd-muted-2);
  line-height: 1.65;
}

/* ---- Financing: two cards on a navy panel, edge to edge ---- */
.svc-finance {
  margin-top: 64px;
  background: var(--svc-navy, var(--wvd-navy));
  border-radius: 24px;
  padding: 48px 48px 56px;
  color: #fff;
}
/* Same tag-varies-by-page problem as .svc-vs__title above - <h2> on
   /tooth-extractions/ and /root-canal-therapy/, <h3> on /teeth-whitening/. */
.svc-page .svc-finance__title {
  color: #fff !important;
  margin: 0 0 16px;
  text-align: center;
  font-size: clamp(29px,3.6vw,44px);
  line-height: 1.12;
}
.svc-finance .svc-finance__lede { color: rgba(255,255,255,.95) !important; max-width: 860px !important; margin: 0 auto 38px !important; line-height: 1.65; font-size: 16px; text-align: center; }
.svc-finance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 30px;
}
.svc-finance__card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 28px 26px;
}
.svc-finance__icon {
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--svc-blue, var(--wvd-blue));
  color: #fff; font-size: 26px;
  margin: 0 0 18px;
}
.svc-finance__card h4 {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 18px;
  color: #fff; margin: 0 0 12px;
}
.svc-finance .svc-finance__card p { color: rgba(255,255,255,.88) !important; margin: 0; line-height: 1.6; font-size: 14.5px; }
.svc-finance .svc-finance__card h4 { color: #fff !important; }
.svc-finance .svc-finance__foot { color: rgba(255,255,255,.95) !important; max-width: 860px !important; margin: 40px auto 0 !important; padding-top: 4px; line-height: 1.65; text-align: center; }

@media (max-width: 991px) {
  .svc-method-card__media { aspect-ratio: 16 / 9; }
  .svc-vs__grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-vs__grid::before { top: 50%; }
  .svc-finance { padding: 34px 26px 30px; }
  .svc-finance__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   SERVICE-PAGE POLISH PASS (2026-07-22, user review round)
   Applies to EVERY service page (base selectors, no per-page markup change).
   1) Secondary hero CTA (phone): icon before number, not after.
   2) Trust bar (.svc-whybar): carded, icon-left, hover lift - not the bland
      centred-column version.
   3) FAQ (.faq-one--svc): kill the theme's margin-top:-150px that pulled the
      FAQ up into the section above (50px overlap on bridges/benefits).
   4) White-background sections (.svc-intro / .svc-split / .svc-benefits and
      the methods block, which is .svc-benefits): cut the 100px section
      rhythm to 50px top+bottom. Tint (.svc-whybar/.svc-care) and navy
      (.svc-cta/.svc-process) sections keep the full 100px.
   ===================================================================== */

/* 1) Secondary CTA: icon first, phone number second. DOM order stays
   "(number) <icon>" (untouched in markup); row-reverse flips it visually. */
.svc-btn-outline { flex-direction: row-reverse; }

/* 2) Trust bar redesign - fold the carded look into the base class so it
   applies on every page with no rebuild. Bordered card, navy squircle icon
   on the left, copy on the right, subtle lift on hover. */
.svc-whybar__list {
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.svc-whybar__item {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 18px;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: 26px 24px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.svc-whybar__item:hover {
  border-color: var(--svc-blue);
  box-shadow: 0 18px 38px -22px rgba(var(--wvd-navy-rgb), .35);
  transform: translateY(-3px);
}
.svc-whybar__icon {
  width: 54px; height: 54px;
  border-radius: 14px;              /* squircle to match the other icon plates */
  background: var(--svc-navy);
  font-size: 26px;
  flex: 0 0 auto;
}
.svc-whybar__text {
  text-align: left;
  max-width: none;
  font-size: 17px;
  line-height: 1.4;
}

/* 3) FAQ overlap fix: the bought theme sets .faq-one { margin-top:-150px }
   to tuck it under a hero on the home page. On service pages that yanks the
   FAQ band up into the preceding section's last paragraph. Neutralise it and
   give the service FAQ a little breathing room above. */
.faq-one--svc { margin-top: 0 !important; padding-top: 56px; }

/* 4) Halve the vertical rhythm on the white-background sections only. The
   generic rule is `.svc-page section { padding: var(--svc-pad) 0 }` = 100px;
   these override to 50px. .svc-benefits also covers the methods block
   (`.svc-benefits.svc-methods-section`). */
.svc-page .svc-intro,
.svc-page .svc-split,
.svc-page .svc-benefits {
  padding-top: 50px;
  padding-bottom: 50px;
}

@media (max-width: 991px) {
  /* stack the trust-bar cards; keep icon-left within each card */
  .svc-whybar__list { grid-template-columns: 1fr; gap: 16px; }
  .svc-whybar__item { flex-direction: row; align-items: center; text-align: left !important; }
  .svc-whybar__text { text-align: left !important; }
}

/* 5) FAQ head: the theme tagline (e.g. "DENTAL BRIDGES FAQS" / "ASK THE DENTAL
   EXPERTS FAQ") carries an underline decoration that sat too close to the
   heading below it. Add breathing room between the tagline box and the title.
   Scoped to `.faq-one` (covers BOTH the home FAQ and every service-page
   `.faq-one--svc`, since those also carry `.faq-one`); each FAQ section has a
   single tagline-box, so this never shifts other section headers. Any future
   FAQ built on the .faq-one markup inherits it automatically. */
.faq-one .section-title__tagline-box { margin-bottom: 20px; }

/* 6) Checkups page: the "Importance of Six-Month Visits" block is a centred
   callout on the tint panel instead of a third identical left/right split.
   `.svc-page p` (0,1,1) forces max-width:68ch and margin:0, so the centred
   paragraph needs !important on both to actually centre and fill the panel. */
.svc-checkups__callout {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(32px,4vw,56px) clamp(24px,4vw,60px);
}
/* badge is inline-flex, so the parent's text-align centres it; it also needs a
   tint fill because the callout itself is white (white-on-white would vanish) */
.svc-checkups__callout .svc-care__badge {
  margin: 0 0 18px;
  background: var(--svc-tint);
}
.svc-checkups__callout h2 { margin: 0 0 18px; }
.svc-checkups__callout p {
  max-width: 760px !important;
  margin: 0 auto !important;
  line-height: 1.7;
}

/* 7) Crowns "Caring for Your Crown Long-Term" block. `.svc-cost__callout` had
   NO styling at all, so `.svc-page p` (max-width:68ch; margin:0) pinned its
   three paragraphs hard left and left ~615px of dead space on a 1320px row.
   Same treatment as the checkups callout: a centred card. The paragraphs stay
   left-aligned inside it - three long paragraphs set centred are hard to read -
   but the block itself is centred, so there is no one-sided dead space. */
.svc-cost__callout {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(30px,3.6vw,48px) clamp(24px,3.4vw,52px);
}
.svc-cost__callout > h3,
.svc-cost__callout > h2 { text-align: center; margin: 0 0 20px; }
.svc-cost__callout p {
  max-width: none !important;
  margin: 0 0 18px !important;
  line-height: 1.7;
}
.svc-cost__callout p:last-child { margin-bottom: 0 !important; }

/* 8) Section heads with MORE THAN ONE paragraph (dentures "Types of Dentures").
   `.svc-methods__head p` sets margin:0, so consecutive paragraphs butted
   together into one wall of text with a 0px gap. Space only the subsequent
   ones, leaving the single-paragraph heads (bridges, whitening) untouched. */
.svc-methods__head p + p { margin-top: 16px !important; }

/* 9) Two-column prose block. Text-only sections with exactly two paragraphs
   (tooth extractions has several) would otherwise be a narrow 68ch column
   pinned left with half the row empty - the dead-space pattern. One paragraph
   per column fills the row instead. `.svc-page p` needs overriding on both
   max-width and margin. */
.svc-prose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px,3vw,48px);
  max-width: 1100px;
  margin: 0 auto;
}
.svc-prose-grid p {
  max-width: none !important;
  margin: 0 !important;
  line-height: 1.7;
}
/* the same block, but presented as a card */
.svc-prose-card {
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(28px,3.4vw,44px) clamp(24px,3.2vw,48px);
}
.svc-prose-card > h2 { text-align: center; margin: 0 0 22px; }
/* a bare paragraph directly inside the card (single long block of copy) still
   needs the `.svc-page p` 68ch cap lifted, or it is pinned left inside the card */
.svc-prose-card > p {
  max-width: none !important;
  margin: 0 0 16px !important;
  line-height: 1.75;
}
.svc-prose-card > p:last-child { margin-bottom: 0 !important; }
/* labelled checklist items ("Severe Tooth Decay: ...") */
/* Labelled checklist ("Severe Tooth Decay: ..."). `.svc-checklist li` is a flex
   row, which turns the <strong> label into its own flex item and squeezes it
   into a narrow wrapping column. Switch to a block row with the icon hanging in
   the gutter so label + description read as one continuous sentence. */
.svc-checklist--labelled li {
  display: block;
  position: relative;
  padding-left: 32px;
  line-height: 1.6;
}
.svc-checklist--labelled li iconify-icon {
  position: absolute;
  left: 0;
  top: 3px;
}
.svc-checklist--labelled strong { color: var(--svc-navy); }

/* 11) Whitening hero framing. Originally added on the server as an inline
   <style> after an image swap; moved here so it survives a full redeploy
   (a redeploy rewrites post_content raw and would drop anything added
   server-side). Scoped to the whitening hero so other service heroes keep
   the default centre crop. */
.svc-hero--whitening .svc-hero__media img { object-position: center 25%; }

/* Bridges image framing - same story: added server-side as an inline <style>
   (id="wvd-bridges-portrait-position") after an image swap, moved here so a
   redeploy cannot drop it. The hero rule is scoped by class; the benefits rule
   is already page-specific through the filename. */
.svc-hero--bridges .svc-hero__media img { object-position: center 20%; }
.svc-benefits__media img[src$="bridges-5.webp"] { object-position: center 20%; }

/* Meet Dr. Hardin hero - portrait sits high-left in frame; pull the crop up-left
   so his face is centred, not cut at the top. */
.svc-hero--hardin .svc-hero__media img { object-fit: cover; object-position: 32% 18%; }

/* 10) Icon card - a benefit card with an icon plate instead of a photo, for the
   card grids that have no image (orthodontics "why choose", extraction reasons). */
.svc-icon-card {
  background: var(--svc-tint);
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: 30px 28px;
  height: 100%;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.svc-icon-card:hover {
  border-color: var(--svc-blue);
  box-shadow: 0 18px 38px -22px rgba(var(--wvd-navy-rgb), .35);
  transform: translateY(-3px);
}
.svc-icon-card__icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--svc-navy);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}
.svc-icon-card h3 { margin: 0 0 10px; font-size: 20px; }
.svc-icon-card p { margin: 0 !important; max-width: none !important; font-size: 15.5px; }

/* video facade used inline beside copy (orthodontics) */
.svc-video-card--inline { width: 100%; }
.svc-video-card--inline .svc-video-card__player {
  width: 100%; border: 0; padding: 0; background: none; cursor: pointer;
  position: relative; display: block;
  border-radius: var(--svc-radius); overflow: hidden;
}
.svc-video-card--inline .svc-video-card__thumb {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

/* navy emphasis panels that hold a two-column prose block: the grid paragraphs
   must be readable on navy (`.svc-page p` otherwise forces the muted grey) */
.svc-emergency .svc-prose-grid p,
.svc-risks .svc-prose-grid p { color: rgba(255,255,255,.92) !important; }
.svc-emergency .svc-prose-grid,
.svc-risks .svc-prose-grid { max-width: none; }
.svc-risks .svc-finance__foot { text-align: left; max-width: none !important; }

/* warning-flavoured checklist (extraction warning signs) */
.svc-checklist--warn li iconify-icon { color: var(--wvd-amber); }

/* orthodontics cost detail blocks: h3 heading instead of h2, tighter stack */
.svc-cost-detail { margin-top: 26px; }
.svc-cost-detail > h3 { text-align: center; margin: 0 0 16px; }
.svc-cost-detail > p { max-width: none !important; margin: 0 0 14px !important; }
.svc-cost-pair { align-items: start; margin-top: 0; }
.svc-cost-pair .svc-prose-card { margin: 26px 0 0; height: 100%; }

/* checklist presented inside a centred card (extraction reasons / aftercare) */
.svc-list-card {
  max-width: 900px;
  margin: 28px auto 0;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(26px,3vw,38px) clamp(24px,3vw,40px);
}
.svc-list-card .svc-checklist { margin: 0; }

@media (max-width: 767px) {
  .svc-prose-grid { grid-template-columns: 1fr; }
}

/* ---- Hub / category-page additions (restorative + siblings, 2026-07-23) ---- */
/* Split CTA button wrapper: gives the "Learn More" thm-btn breathing room under
   the split paragraph. Matches the hero btn spacing so it doesn't hug the text. */
.svc-split__btn { margin-top: 26px; }

/* Sub-hub grid: same card system as the Services hub, used on a category page to
   list the child service pages. White bg + standard section rhythm. */
.svc-hub--sub { background: #fff; }
.svc-hub--sub .svc-section-head { margin-left: auto; margin-right: auto; text-align: center; }
.svc-hub--sub .svc-section-head p { margin-left: auto; margin-right: auto; }

/* ---- More to Explore: cross-hub navigation ------------------------------
   A photo card per care area, on the tinted .svc-care band so it reads as a
   distinct "jump elsewhere" zone. Modelled on the related-services section of
   uniquelyuniqueconstruction.

   It replaced a wrapping row of six pills, which could not be made symmetric:
   five care areas plus "View Our Services" is six items that break 4 + 2 at
   every desktop width. The sixth was never a peer of the other five - it is
   their parent - so it moved into the section header as a text link, and the
   five that are left form an actual row.

   .svc-explore__btn below is NOT dead: /for-patients/ still uses the pill
   inside .svc-form-links. Do not delete it with this section's old markup. */
.svc-explore__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.svc-explore__head-copy { max-width: 640px; }
.svc-explore__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wvd-gold-ink);        /* 13px gold on a light band needs the dark gold */
  margin-bottom: 12px;
}
.svc-explore__head h2 { margin: 0; }
.svc-explore__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--wvd-blue);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--svc-navy, var(--wvd-navy));
  transition: gap .3s ease;
}
.svc-explore__all:hover { gap: 15px; color: var(--svc-navy, var(--wvd-navy)); }
.svc-explore__all iconify-icon { font-size: 18px; color: var(--wvd-gold-ink); }

.svc-explore__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.svc-explore__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3 / 4;
  /* DARK, not tint. This holds the box while the photo loads, and the label is
     burned on in white - on a cream placeholder that label is genuinely
     invisible until the image arrives, which _wvd_invisible.js correctly
     flagged at 1.1:1. The photo covers this within a frame either way. */
  background: var(--wvd-navy);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.svc-explore__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(var(--wvd-navy-rgb), .18);
}
.svc-explore__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.svc-explore__card:hover img { transform: scale(1.06); }
/* The veil is what makes the label legible on ANY photo - these five are client
   photographs with no reserved dead space, so a plain drop shadow is not enough.
   Measured: white label over this gradient runs 10.0-13.1:1 across the five,
   and 1.2-3.8:1 with the veil switched off. _wvd_explore_qa.js screenshots each
   label and measures the pixels actually behind it - re-run it if any of these
   photos is ever swapped, and do not deepen the gradient by eye: it is already
   three times what AA asks for, and every extra point of alpha is photograph
   the visitor cannot see. */
.svc-explore__card-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(var(--wvd-navy-rgb), .88) 0%,
    rgba(var(--wvd-navy-rgb), .34) 52%,
    rgba(var(--wvd-navy-rgb), 0) 100%);
  pointer-events: none;
}
.svc-explore__card-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 17px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #ffffff;
}
/* "You are here" - the five care-area pages carry this section too, and a card
   linking to the page you are already on is otherwise a dead end. */
.svc-explore__card--current { outline: 2px solid var(--wvd-blue); outline-offset: -2px; }
.svc-explore__card--current::before {
  content: 'You are here';
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wvd-blue);
  color: var(--wvd-on-gold);
  font-family: "Space Grotesk", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* FIVE CARDS DO NOT DIVIDE. Below the 5-up row every column count leaves an
   orphan on the last line - 3 + 2 on tablet, 2 + 2 + 1 on a phone - which is
   exactly the ragged look this section was rebuilt to get rid of. So the last
   row is always made to fill: on tablet the grid is really 6 columns, 3 cards
   of 2 then 2 cards of 3; on a phone the fifth card spans both columns.
   _wvd_explore_qa.js asserts it, by checking every row fills the grid width. */
@media (max-width: 1199px) {
  .svc-explore__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-explore__card { grid-column: span 2; }
  .svc-explore__card:nth-child(4),
  .svc-explore__card:nth-child(5) { grid-column: span 3; aspect-ratio: 16 / 11; }
}
@media (max-width: 767px) {
  .svc-explore__head { gap: 20px; margin-bottom: 26px; }
  .svc-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc-explore__card { aspect-ratio: 4 / 5; grid-column: auto; }
  .svc-explore__card:nth-child(4) { grid-column: auto; aspect-ratio: 4 / 5; }
  .svc-explore__card:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .svc-explore__card-label { font-size: 15px; left: 14px; right: 14px; bottom: 14px; }
}
/* Single column only on genuinely tiny screens. A common 390-430px phone keeps
   two columns: five stacked cards is a 2,000px scroll through a section whose
   whole job is "here is everything else, pick one". */
@media (max-width: 359px) {
  .svc-explore__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-explore__card { aspect-ratio: 16 / 9; }
}

/* ---- the pill row: still used by .svc-form-links on /for-patients/ -------- */
.svc-explore .svc-section-head { margin: 0 auto 40px; text-align: center; max-width: 760px; }
.svc-explore .svc-section-head p { margin-left: auto; margin-right: auto; }
.svc-explore__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.svc-explore__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid var(--svc-border, var(--wvd-border));
  border-radius: 14px;
  background: #ffffff;
  color: var(--svc-navy, var(--wvd-navy));
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s, color .25s;
}
.svc-explore__btn iconify-icon { font-size: 21px; color: var(--svc-blue, var(--wvd-blue)); transition: color .25s; }
.svc-explore__btn:hover {
  transform: translateY(-3px);
  border-color: var(--svc-navy, var(--wvd-navy));
  box-shadow: 0 18px 36px rgba(var(--wvd-navy-rgb), .14);
  color: var(--svc-navy, var(--wvd-navy));
}
.svc-explore__btn--alt {
  background: var(--svc-navy, var(--wvd-navy));
  border-color: var(--svc-navy, var(--wvd-navy));
  color: #ffffff;
}
.svc-explore__btn--alt iconify-icon { color: #ffffff; }
.svc-explore__btn--alt:hover { background: var(--svc-blue, var(--wvd-blue)); border-color: var(--svc-blue, var(--wvd-blue)); color: #ffffff; }
@media (max-width: 575px) {
  .svc-explore__row { flex-direction: column; }
  .svc-explore__btn { justify-content: center; width: 100%; }
}

/* ---- Nested Services flyout carets (hub parents, 2026-07-23) ---- */
/* The theme only draws a down-caret on TOP-level li.dropdown. Second-level hub
   parents (Restorative, Missing Teeth, ...) open a rightward flyout on hover
   (theme CSS: .main-menu__list > li > ul > li > ul { left:100% }). Add a right
   chevron so the flyout is discoverable. FontAwesome 5 Pro is already loaded. */
/* CARET POLICY: only menu items that HAVE a child submenu show a caret, and that
   single caret animates on hover. Everything else = no caret, text hover only.

   The theme fought this two ways, both killed below:
   (a) it draws a `\f105` right-chevron `::before` on EVERY sub-menu <li> (leaf items
       included) that scales in on hover - that is the stray "appears on hover" caret.
   (b) on our hub items (class="dropdown svc-flyout") that theme ::before stacked on
       top of our own ::after chevron = the double caret. */

/* (a) kill the theme's hover-scale ::before chevron on ALL submenu items */
.main-menu .main-menu__list > li > ul > li > a::before,
.main-menu .main-menu__list > li > ul > li > ul > li > a::before,
.stricky-header .main-menu__list > li > ul > li > a::before,
.stricky-header .main-menu__list > li > ul > li > ul > li > a::before {
  content: none !important;
}

/* the ONE caret on a flyout hub (item WITH children) - static, animates on hover */
.main-menu__list li ul li.svc-flyout > a { position: relative; padding-right: 26px; }
.main-menu__list li ul li.svc-flyout > a::after {
  content: "\f105"; /* fa angle-right */
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  transition: transform .3s ease;
}
.main-menu__list li ul li.svc-flyout:hover > a::after { transform: translateY(-50%) translateX(4px); }

/* Top-level dropdown caret (v) - single caret (theme draws it only on li.dropdown =
   items that HAVE a child ul, so Home/Contact never get one); animate on hover.
   Theme base transform: top:60% + translateY(-50%). Nudge down on hover. */
.main-menu .main-menu__list > li.dropdown > a::after,
.stricky-header .main-menu__list > li.dropdown > a::after { transition: transform .3s ease, color 500ms ease; }
.main-menu .main-menu__list > li.dropdown:hover > a::after,
.stricky-header .main-menu__list > li.dropdown:hover > a::after {
  transform: translateY(-50%) translateY(3px);
}

/* ================= Emergency Dentistry hub (2026-07-23) ================= */
/* "Most Common Dental Emergencies" click grid + accessible modal. Modal JS =
   westpark-emergency.js (no leanModal). Cards are buttons; each opens its modal. */

/* --- the emergencies grid --- */
.emerg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.emerg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: center;
  padding: 30px 20px;
  border: 1px solid var(--svc-border, var(--wvd-border));
  border-radius: 16px;
  background: #ffffff;
  color: var(--svc-navy, var(--wvd-navy));
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.emerg-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(var(--wvd-blue-rgb), .09);
  color: var(--svc-blue, var(--wvd-blue));
  font-size: 30px;
  transition: background .25s, color .25s;
}
.emerg-card:hover {
  transform: translateY(-4px);
  border-color: var(--svc-navy, var(--wvd-navy));
  box-shadow: 0 18px 40px rgba(var(--wvd-navy-rgb), .13);
}
.emerg-card:hover .emerg-card__icon { background: var(--svc-navy, var(--wvd-navy)); color: #ffffff; }
.emerg-card__hint {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--svc-blue, var(--wvd-blue));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}
@media (max-width: 991px) { .emerg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .emerg-grid { grid-template-columns: repeat(2, 1fr); } .emerg-card { padding: 24px 14px; font-size: 15px; } }

/* --- modal + backdrop --- */
.emerg-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--wvd-navy-deep-rgb), .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 12000;
}
.emerg-backdrop.is-open { opacity: 1; }
body.emerg-lock { overflow: hidden; }

.emerg-modal {
  position: fixed;
  inset: 0;
  z-index: 12001;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.emerg-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 44px 44px 40px;
  box-shadow: 0 40px 90px rgba(var(--wvd-navy-deep-rgb), .35);
  transform: translateY(24px) scale(.98);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.emerg-modal.is-open .emerg-modal__dialog { transform: translateY(0) scale(1); opacity: 1; }
.emerg-modal__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-right: 40px;
}
.emerg-modal__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(var(--wvd-blue-rgb), .1);
  color: var(--svc-blue, var(--wvd-blue));
  font-size: 27px;
}
.emerg-modal__dialog h3 { margin: 0; font-size: 26px; }
.emerg-modal__body p { margin-bottom: 16px; }
.emerg-modal__body p:last-of-type { margin-bottom: 0; }
.emerg-modal__body p strong { color: var(--svc-navy, var(--wvd-navy)); }
.emerg-modal__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--svc-border, var(--wvd-border));
}
.emerg-modal__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--svc-navy, var(--wvd-navy));
  color: #ffffff !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 14px;
  transition: background .25s, transform .25s;
}
.emerg-modal__btn iconify-icon { font-size: 17px; }
.emerg-modal__btn:hover { background: var(--svc-blue, var(--wvd-blue)); transform: translateY(-2px); color: #ffffff !important; }
.emerg-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--wvd-wash-2);
  color: var(--svc-navy, var(--wvd-navy));
  font-size: 22px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.emerg-modal__close:hover { background: var(--svc-navy, var(--wvd-navy)); color: #ffffff; }
@media (max-width: 575px) {
  .emerg-modal__dialog { padding: 40px 22px 30px; border-radius: 16px; }
  .emerg-modal__dialog h3 { font-size: 22px; }
}

/* --- emergency intro callout (navy urgency panel reusing finance styling) --- */
.svc-emergency-note {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.svc-emergency-note a { font-weight: 700; }

/* --- special offers: coupon / voucher card --- */
.svc-offers .svc-section-head { margin-bottom: 40px; }
.svc-offer-wrap { display: flex; justify-content: center; }
.svc-offer-wrap--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .svc-offer-wrap--grid { grid-template-columns: 1fr; max-width: 460px; }
}
.svc-offer-wrap--grid .svc-coupon { max-width: none; }
.svc-coupon {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--svc-border, var(--wvd-border));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(var(--wvd-navy-rgb), .12);
}
.svc-coupon__body {
  flex: 1 1 auto;
  padding: 44px 46px;
  text-align: center;
}
.svc-coupon__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--svc-blue, var(--wvd-blue));
  background: rgba(var(--wvd-blue-rgb), .08);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 22px;
}
.svc-coupon__tag iconify-icon { font-size: 16px; }
.svc-coupon__amount {
  display: block;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 700;
  font-size: 78px;
  line-height: 1;
  color: var(--svc-navy, var(--wvd-navy));
  letter-spacing: -.02em;
  margin: 0 0 4px;
}
.svc-coupon__title {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--svc-blue, var(--wvd-blue));
  margin: 0 0 18px;
}
/* Was scoped to .svc-page, which is the service-page wrapper. The coupon now
   also appears on the home page, which has no such wrapper, so the note rendered
   unstyled there. The class is unique enough not to need the scope. */
.svc-coupon__note {
  max-width: 460px !important;
  margin: 0 auto 30px !important;
  color: var(--svc-muted, var(--wvd-muted)) !important;
  line-height: 1.65;
}
.svc-coupon__side {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 18px;
  background: var(--svc-navy, var(--wvd-navy));
  color: #fff;
  position: relative;
}
/* perforated divider between body and stub */
.svc-coupon__side::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  border-left: 2px dashed rgba(255, 255, 255, .45);
}
.svc-coupon__side iconify-icon { font-size: 52px; color: #fff; }
.svc-coupon__side-label {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.35;
  color: rgba(255, 255, 255, .95);
}
@media (max-width: 575px) {
  .svc-coupon { flex-direction: column-reverse; max-width: 420px; }
  .svc-coupon__body { padding: 34px 26px; }
  .svc-coupon__side { flex-basis: auto; flex-direction: row; padding: 18px; gap: 12px; }
  .svc-coupon__side::before { left: 12px; right: 12px; top: 0; bottom: auto; border-left: 0; border-top: 2px dashed rgba(255,255,255,.45); }
  .svc-coupon__side iconify-icon { font-size: 34px; }
  .svc-coupon__amount { font-size: 60px; }
  .svc-coupon__title { font-size: 22px; }
}
/* two-up grid: slightly smaller amount so both cards balance */
.svc-offer-wrap--grid .svc-coupon__amount { font-size: 66px; }
.svc-offer-wrap--grid .svc-coupon__body { padding: 40px 34px; }
.svc-offer-wrap--grid .svc-coupon__side { flex-basis: 132px; }
/* CandidPro gold variant */
.svc-coupon__date {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--wvd-gold);
  margin: 0 0 14px !important;
}
.svc-coupon--gold .svc-coupon__tag { color: var(--wvd-gold); background: rgba(var(--wvd-gold-light-rgb), .14); }
.svc-coupon--gold .svc-coupon__title { color: var(--wvd-gold); }
.svc-coupon--gold .svc-coupon__side { background: var(--wvd-gold-light); }
.svc-coupon--gold .svc-coupon__side::before { border-left-color: rgba(255, 255, 255, .55); }
@media (max-width: 575px) {
  .svc-coupon--gold .svc-coupon__side::before { border-top-color: rgba(255,255,255,.55); }
}

/* --- form / apply link stacks (for-patients, financing) --- */
.svc-form-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
.svc-form-links .svc-explore__btn { margin: 0; }

/* --- photo gallery grid (tour, community) --- */
.svc-gallery-sec .svc-section-head { margin-bottom: 40px; }
.svc-gallery {
  columns: 4 240px;
  column-gap: 18px;
}
.svc-gallery__item {
  margin: 0 0 18px;
  break-inside: avoid;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--svc-border, var(--wvd-border));
  background: #fff;
  box-shadow: 0 10px 26px rgba(var(--wvd-navy-rgb), .07);
}
.svc-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease;
}
.svc-gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 991px) { .svc-gallery { columns: 3 200px; } }
@media (max-width: 575px) { .svc-gallery { columns: 2 140px; column-gap: 12px; } .svc-gallery__item { margin-bottom: 12px; } }

/* --- community "where we give back" list ---
   SCOPED TO `ul` ON PURPOSE. `.svc-community` is used by two different
   components: `<ul class="svc-community">` here (community-involvement) and
   `<section class="svc-community">` on about-us. Unscoped, this block capped
   the about-us SECTION at 900px and turned it into a grid, squeezing its two
   columns to 375/525 inside a site that lays out at 1344. */
ul.svc-community {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.svc-community__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--svc-border, var(--wvd-border));
  border-radius: 14px;
  padding: 20px 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-community__item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(var(--wvd-navy-rgb), .1); }
/* scoped for the same reason - about-us has its own .svc-community__icon at 46px */
ul.svc-community .svc-community__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--svc-navy, var(--wvd-navy));
  color: #fff;
  font-size: 22px;
}
.svc-page .svc-community__item p {
  margin: 0 !important;
  max-width: none !important;
  line-height: 1.6;
  color: var(--svc-muted, var(--wvd-muted));
  align-self: center;
}
.svc-community__item p a { color: var(--svc-navy, var(--wvd-navy)); }
.svc-community__item p a strong { color: var(--svc-navy, var(--wvd-navy)); }
.svc-community__item p a:hover strong { color: var(--svc-blue, var(--wvd-blue)); }

/* white-bg variant of the explore row (used on gallery pages after a white section) */
.svc-explore--white { background: #fff; }

/* ============================================================
   LEGAL / POLICY PAGE  (privacy-policy)
   Long-form legal prose in a single centred card. `.svc-page p`
   is (0,1,1) and sets max-width:68ch + margin:0, so every
   paragraph inside the card must lift both or it stays pinned
   left at 68ch inside a 1100px card.
   ============================================================ */
.svc-legal__card {
  max-width: 1040px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(30px,3.6vw,56px) clamp(24px,3.4vw,56px);
}
.svc-page .svc-legal__head {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(19px,1.5vw,22px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--svc-navy, var(--wvd-navy));
  margin: 38px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--svc-border);
}
.svc-legal__card > .svc-legal__head:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.svc-page .svc-legal__card p {
  max-width: none !important;
  margin: 0 0 16px !important;
  line-height: 1.75;
}
.svc-page .svc-legal__card p:last-of-type { margin-bottom: 0 !important; }
.svc-legal__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.svc-legal__list > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.7;
  color: var(--svc-muted, var(--wvd-muted));
}
.svc-legal__list > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--svc-blue, var(--wvd-blue));
}
.svc-legal__list > li:last-child { margin-bottom: 0; }
.svc-legal__list a {
  color: var(--svc-blue, var(--wvd-blue));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.svc-legal__list a:hover { color: var(--svc-navy, var(--wvd-navy)); }
/* nested opt-out sub-points: lighter marker, indented rail */
.svc-legal__sublist {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 4px;
  border-left: 2px solid var(--svc-border);
}
.svc-legal__sublist > li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.7;
  color: var(--svc-muted, var(--wvd-muted));
}
.svc-legal__sublist > li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 6px;
  height: 1px;
  background: var(--wvd-muted-3);
}
.svc-legal__sublist > li:last-child { margin-bottom: 0; }
/* contact-our-office footer inside the card */
.svc-legal__foot {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--svc-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.svc-page .svc-legal__foot p {
  margin: 0 !important;
  max-width: none !important;
  color: var(--svc-navy, var(--wvd-navy));
  font-weight: 500;
}
.svc-legal__foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--svc-navy, var(--wvd-navy));
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  transition: background .25s ease, transform .25s ease;
}
.svc-legal__foot-btn:hover {
  background: var(--svc-blue, var(--wvd-blue));
  color: #fff;
  transform: translateY(-2px);
}
.svc-legal__foot-btn iconify-icon { font-size: 19px; }
@media (max-width: 575px) {
  .svc-legal__foot { flex-direction: column; align-items: flex-start; }
  .svc-legal__foot-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   HTML SITEMAP PAGE
   Two-column link index. Mirrors the live sitemap.html grouping.
   ============================================================ */
/* Two explicit columns. CSS column-count was tried first and refused to
   balance (it put the single tall Our Services card alone at 714px against
   985px of stacked small cards), so the split is authored in the markup:
   col 1 = Our Services, col 2 = the four smaller groups. */
.svc-sitemap__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px,2.6vw,40px);
  align-items: start;
}
.svc-sitemap__col {
  display: flex;
  flex-direction: column;
  gap: clamp(18px,1.8vw,24px);
}
.svc-sitemap__group {
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(22px,2.2vw,30px) clamp(20px,2.2vw,30px);
}
.svc-sitemap__parent {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(17px,1.3vw,19px);
  font-weight: 500;
  color: var(--svc-navy, var(--wvd-navy));
  padding-bottom: 14px;
  border-bottom: 1px solid var(--svc-border);
  transition: color .25s ease;
}
.svc-sitemap__parent:hover { color: var(--svc-blue, var(--wvd-blue)); }
.svc-sitemap__parent iconify-icon {
  font-size: 21px;
  color: var(--svc-blue, var(--wvd-blue));
  flex: none;
}
/* service-category row inside the Our Services card */
.svc-sitemap__sub {
  display: block;
  margin-top: 20px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--svc-navy, var(--wvd-navy));
  transition: color .25s ease;
}
.svc-sitemap__sub:hover { color: var(--svc-blue, var(--wvd-blue)); }
.svc-sitemap__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.svc-sitemap__list li { margin-bottom: 9px; }
.svc-sitemap__list li:last-child { margin-bottom: 0; }
.svc-sitemap__list a {
  position: relative;
  display: block;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--svc-muted, var(--wvd-muted));
  transition: color .25s ease, transform .25s ease;
}
.svc-sitemap__list a::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--wvd-muted-3);
  transition: background .25s ease, width .25s ease;
}
.svc-sitemap__list a:hover {
  color: var(--svc-blue, var(--wvd-blue));
  transform: translateX(3px);
}
.svc-sitemap__list a:hover::before {
  background: var(--svc-blue, var(--wvd-blue));
  width: 12px;
}
/* a category with sub-links gets the list tucked under it */
.svc-sitemap__sub + .svc-sitemap__list { margin-top: 10px; padding-left: 2px; }
.svc-sitemap__foot { margin-top: clamp(24px,2.4vw,34px); text-align: center; }
.svc-sitemap__xml {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  border: 1px solid var(--svc-border);
  border-radius: 999px;
  background: #fff;
  color: var(--svc-navy, var(--wvd-navy));
  font-weight: 500;
  font-size: 15px;
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.svc-sitemap__xml:hover {
  border-color: var(--svc-blue, var(--wvd-blue));
  color: var(--svc-blue, var(--wvd-blue));
  transform: translateY(-2px);
}
.svc-sitemap__xml iconify-icon { font-size: 19px; }
@media (max-width: 991px) {
  .svc-sitemap__grid { grid-template-columns: 1fr; }
}
/* Home banner row above the sitemap grid (a single-link card in a column
   left a half-empty box, so Home became a full-width lead row instead) */
.svc-sitemap__home {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(20px,2vw,26px) clamp(22px,2.4vw,32px);
  margin-bottom: clamp(20px,2.2vw,28px);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.svc-sitemap__home:hover {
  border-color: var(--svc-blue, var(--wvd-blue));
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(var(--wvd-navy-rgb), .07);
}
.svc-sitemap__home-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--svc-navy, var(--wvd-navy));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}
.svc-sitemap__home-body { display: flex; flex-direction: column; gap: 3px; }
.svc-sitemap__home-body strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(17px,1.3vw,19px);
  font-weight: 500;
  color: var(--svc-navy, var(--wvd-navy));
}
.svc-sitemap__home-body span {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--svc-muted, var(--wvd-muted));
}
.svc-sitemap__home-arrow {
  margin-left: auto;
  font-size: 22px;
  color: var(--svc-blue, var(--wvd-blue));
  flex: none;
  transition: transform .25s ease;
}
.svc-sitemap__home:hover .svc-sitemap__home-arrow { transform: translateX(4px); }
@media (max-width: 575px) {
  .svc-sitemap__home-arrow { display: none; }
}

/* ============================================================
   404 PAGE
   The MediPlace template ships a cartoon-robot illustration here;
   dropped per client - a plain oversized 404 numeral reads better
   and cannot look off-brand. Everything is centred: `.svc-page p`
   is (0,1,1) and forces max-width:68ch + margin:0, so the copy
   needs its own scoped override or it pins left on a wide row.
   ============================================================ */
.wvd-404 { padding: clamp(70px,7vw,120px) 0; }
.wvd-404__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
/* `.svc-page p` is (0,1,1) and sets font-size/max-width/margin - it beat the
   plain .wvd-404__code class and rendered the numeral at 17px. Scope it. */
.svc-page .wvd-404__code,
.wvd-404__code {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(110px,17vw,220px) !important;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  margin: 0 auto 10px !important;
  max-width: none !important;
  background: linear-gradient(180deg, var(--svc-blue, var(--wvd-blue)) 0%, var(--svc-navy, var(--wvd-navy)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.svc-page .wvd-404__title,
.wvd-404__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(26px,3vw,40px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--svc-navy, var(--wvd-navy));
  margin: 0 0 14px;
  text-align: center;
}
.svc-page .wvd-404__text,
.wvd-404__text {
  max-width: 520px !important;
  margin: 0 auto 30px !important;
  line-height: 1.7;
  color: var(--svc-muted, var(--wvd-muted));
  text-align: center;
}
.wvd-404__btn { display: flex; justify-content: center; }

/* ============================================================
   NAV DROPDOWN SIZING + FLYOUT ALIGNMENT (2026-07-27)
   The live-parity menu uses long symptom-based labels
   ("I Need a Checkup & Cleaning"), which wrapped to 2-3 lines
   inside the theme's 280px dropdown (280 - 2x30px padding =
   220px of text width). Widen the Services dropdown so every
   label sits on ONE line, and make the child flyout start
   exactly at the parent's right edge instead of overlapping it.
   ============================================================ */

/* 1. Wider dropdown so the long labels never wrap.
   Scoped to the Services menu so the other dropdowns (short
   labels) keep the theme's tighter 280px. */
.main-menu .main-menu__list > li.dropdown > ul,
.stricky-header .main-menu__list > li.dropdown > ul {
  min-width: 300px;
}
.main-menu .main-menu__list > li.dropdown.wvd-menu--wide > ul,
.stricky-header .main-menu__list > li.dropdown.wvd-menu--wide > ul {
  /* 360, not 340: at 340 the longest label ("I Have a Cavity or Broken Tooth")
     ran right into its flyout caret with no breathing room. */
  min-width: 360px;
}
/* keep every submenu label on one line */
.main-menu .main-menu__list > li > ul > li > a,
.main-menu .main-menu__list > li > ul > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > ul > li > a {
  white-space: nowrap;
}

/* 2. Flyout flush with the parent's right edge.
   The theme sets left:220px, but the parent ul is 280px wide with
   30px padding, so the child opened 32px INSIDE the parent instead
   of at its edge. left:100% resolves against the parent ul's border
   box = its true right edge, whatever width it ends up. */
/* The flyout is positioned against the ROW (li.svc-flyout), not the parent ul.
   Anchoring to the ul meant `left:100%` resolved against its content box and the
   offset had to be hand-corrected for padding - and because each flyout sizes to
   its own content, one fixed correction could never suit them all (the gap drifted
   from -4px to -29px across the six rows). The row spans the parent's full inner
   width, so `left:calc(100% + 30px)` off the ROW lands on the parent's outer edge
   every time, whatever the flyout's width. */
.main-menu .main-menu__list > li > ul > li.svc-flyout,
.stricky-header .main-menu__list > li > ul > li.svc-flyout {
  position: relative;
}
.main-menu .main-menu__list > li > ul > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul {
  left: calc(100% + 30px);
  top: 0;
  margin-left: 0;
  /* theme rounds submenus on the bottom only; round the top to match */
  border-top-left-radius: var(--mediplace-bdr-radius);
  border-top-right-radius: var(--mediplace-bdr-radius);
}
/* top-level dropdowns get the same treatment (theme: bottom corners only) */
.main-menu .main-menu__list > li > ul,
.stricky-header .main-menu__list > li > ul {
  border-top-left-radius: var(--mediplace-bdr-radius);
  border-top-right-radius: var(--mediplace-bdr-radius);
}

/* HOVER BRIDGE - the flyout sits flush against the parent's edge, but the mouse
   still crosses a hairline seam on the way over and the submenu closed. Widen the
   hoverable area with a transparent pad that spans the seam. It is drawn behind
   the panel (z-index:-1) so it cannot swallow clicks on the row itself. */
.main-menu .main-menu__list > li > ul > li.svc-flyout > ul::before,
.stricky-header .main-menu__list > li > ul > li.svc-flyout > ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: -32px;
  width: 32px;
  height: 100%;
  z-index: -1;
}
/* keep the whole parent row hoverable while the pointer travels down/across it */
.main-menu .main-menu__list > li > ul > li,
.stricky-header .main-menu__list > li > ul > li {
  position: relative;
}

/* ============================================================
   OFF-CANVAS SIDEBAR - white headings on the navy panel
   The theme's `.sidebar-widget-title` is rgb(22,40,62) (near
   black) which the navy panel renders as unreadable. Body copy,
   address and phone were already white; only the three headings
   were wrong.
   ============================================================ */
.xs-sidebar-group .sidebar-widget-title,
.info-sidebar .sidebar-widget-title,
.sidebar-info-contents .sidebar-widget-title {
  color: #ffffff !important;
}

/* Top-level: the theme's li has 35px vertical padding so the pointer normally
   stays inside it on the way down to the dropdown, but the dropdown itself sits
   at top:100% with no overlap. Bridge that seam too. */
.main-menu .main-menu__list > li.dropdown > ul::before,
.stricky-header .main-menu__list > li.dropdown > ul::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  z-index: -1;
}

/* DEAD ZONE FIX: the panel has 30px side padding, so a flyout row stopped 30px
   short of the panel edge. Travelling right from the caret toward the flyout the
   pointer crossed that strip - on neither the row nor the flyout - and the submenu
   closed. Stretch every submenu row across the padding with negative margins and
   give the padding back to the link, so the hit area reaches the panel edge while
   the text stays exactly where it was. */
.main-menu .main-menu__list > li > ul > li,
.stricky-header .main-menu__list > li > ul > li,
.main-menu .main-menu__list > li > ul > li > ul > li,
.stricky-header .main-menu__list > li > ul > li > ul > li {
  /* negative margins alone SHRANK the row (its width was already resolved), so
     widen it back by the same 60px and re-inset the text with padding. */
  margin-left: -30px;
  margin-right: -30px;
  width: calc(100% + 60px);
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}
/* the row now spans the padding, so its flyout anchors at the panel edge directly */
.main-menu .main-menu__list > li > ul > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul {
  left: 100%;
}
/* Widening the row pushed its divider out to the panel edges. Move the border
   onto the LINK instead, which is still inset with the text, so the hit area
   stays full-bleed while the rule lines up with the copy as before. */
.main-menu .main-menu__list > li > ul > li + li,
.stricky-header .main-menu__list > li > ul > li + li,
.main-menu .main-menu__list > li > ul > li > ul > li + li,
.stricky-header .main-menu__list > li > ul > li > ul > li + li {
  border-top: 0 !important;
}
.main-menu .main-menu__list > li > ul > li + li > a,
.stricky-header .main-menu__list > li > ul > li + li > a,
.main-menu .main-menu__list > li > ul > li > ul > li + li > a,
.stricky-header .main-menu__list > li > ul > li > ul > li + li > a {
  border-top: 1px solid rgba(var(--mediplace-black-rgb), 0.10);
}

/* FLYOUT ROW ALIGNMENT: the panel's own 25px padding-top pushed the flyout's
   first item 23px below the row that opened it. Pull the flyout up by that
   padding so item 1 sits on the same baseline as its parent row; both lists use
   50px rows, so every following item lines up with the parent row beneath it. */
.main-menu .main-menu__list > li > ul > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul {
  top: -25px;
}
/* NOTE: flyout rows already match the parent's 49/50px - verified with
   offsetHeight. An earlier "fix" here was chasing a measurement artefact:
   getBoundingClientRect() returns the TRANSFORMED box, and the submenu still
   carries the theme's rotatex(-20deg) open/close transform, which foreshortens
   it (rows read 43/41/39 and looked like a cascading drift). Measure nav
   geometry with offsetHeight/offsetTop, never getBoundingClientRect. */

/* ============================================================
   BLOG (2026-07-27) - consolidated from the separate /blog/ WP
   MediPlace ships .blog-one / .blog-details / .sidebar styling,
   so this block only covers what the template needs on top:
   the post body (migrated Gutenberg markup), pagination, and
   the sidebar CTA. Scoped so none of it leaks onto the 33
   static pages, which never load these classes.
   ============================================================ */

/* --- migrated post body ---------------------------------------------------
   The content is stock Gutenberg from the old install. Two things need taming
   (both logged in SEO-TEAM-FLAGS.md as content issues we deliberately did NOT
   edit): runs of up to four <br> used as spacing, and legacy images carrying
   inline width + alignleft floats. Handled here in CSS rather than by editing
   70 posts. */
.wvd-post-body { font-size: 17px; line-height: 1.8; color: var(--svc-muted, var(--wvd-muted)); }
.wvd-post-body > * + * { margin-top: 20px; }
.wvd-post-body h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--svc-navy, var(--wvd-navy));
  margin-top: 38px;
}
.wvd-post-body h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--svc-navy, var(--wvd-navy));
  margin-top: 30px;
}
.wvd-post-body p { max-width: none; margin-left: 0; margin-right: 0; }
.wvd-post-body a { color: var(--svc-blue, var(--wvd-blue)); text-decoration: underline; text-underline-offset: 3px; }
.wvd-post-body ul,
.wvd-post-body ol { padding-left: 22px; }
.wvd-post-body li + li { margin-top: 8px; }
.wvd-post-body blockquote {
  margin: 28px 0;
  padding: 22px 26px;
  background: var(--wvd-wash-1);
  border-left: 3px solid var(--svc-blue, var(--wvd-blue));
  border-radius: 0 12px 12px 0;
}
.wvd-post-body blockquote p { margin: 0; font-style: italic; }
.wvd-post-body hr { margin: 34px 0; border: 0; border-top: 1px solid var(--svc-border, var(--wvd-border)); }

/* images: neutralise the legacy inline width + float so they behave responsively */
.wvd-post-body img {
  max-width: 100% !important;
  height: auto !important;
  width: auto;
  border-radius: 14px;
}
.wvd-post-body figure { margin: 26px 0; }
.wvd-post-body figure.alignleft,
.wvd-post-body figure.alignright,
.wvd-post-body .wp-block-image .alignleft,
.wvd-post-body .wp-block-image .alignright { float: none; margin: 26px 0; }
.wvd-post-body figcaption {
  font-size: 14px;
  color: var(--svc-muted, var(--wvd-muted));
  margin-top: 8px;
  text-align: center;
}

/* collapse the <br> runs used as spacing in the legacy content */
.wvd-post-body br + br { display: none; }

/* core block layouts used by a handful of posts */
.wvd-post-body .wp-block-columns { display: flex; gap: 26px; flex-wrap: wrap; }
.wvd-post-body .wp-block-column { flex: 1 1 260px; }
.wvd-post-body .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
}
@media (max-width: 767px) {
  .wvd-post-body .wp-block-media-text { grid-template-columns: 1fr; }
}

/* --- pagination ----------------------------------------------------------- */
.wvd-pagination { margin-top: 50px; }
.wvd-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.wvd-pagination a,
.wvd-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--svc-border, var(--wvd-border));
  border-radius: 999px;
  background: #fff;
  color: var(--svc-navy, var(--wvd-navy));
  font-weight: 500;
  text-decoration: none;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.wvd-pagination a:hover {
  background: var(--svc-blue, var(--wvd-blue));
  border-color: var(--svc-blue, var(--wvd-blue));
  color: #fff;
}
.wvd-pagination .current {
  background: var(--svc-navy, var(--wvd-navy));
  border-color: var(--svc-navy, var(--wvd-navy));
  color: #fff;
}

/* --- sidebar CTA ---------------------------------------------------------- */
.sidebar__cta {
  background: var(--svc-navy, var(--wvd-navy));
  border-radius: var(--svc-radius, 20px);
  padding: 30px;
}
.sidebar__cta .sidebar__title { color: #fff; }
.sidebar__cta p {
  color: rgba(255, 255, 255, .92) !important;
  max-width: none !important;
  margin: 0 0 20px !important;
}

/* --- search form ---------------------------------------------------------- */
.sidebar__search-form { display: flex; gap: 8px; }
.sidebar__search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--svc-border, var(--wvd-border));
  border-radius: 999px;
  font-size: 15px;
}
.sidebar__search-form button {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 0;
  border-radius: 50%;
  background: var(--svc-blue, var(--wvd-blue));
  color: #fff;
  cursor: pointer;
}

/* --- empty state ---------------------------------------------------------- */
.wvd-noposts { text-align: center; max-width: 560px; margin: 0 auto; padding: 40px 0; }
.wvd-noposts p { max-width: none !important; margin: 0 auto 26px !important; }

/* --- blog page-header banner ------------------------------------------------
   The theme styles `.page-header__inner h3` only (65px white) and pads the block
   160px/167px for a full-bleed hero with a background image. Our blog banner has
   no bg image and uses an <h1>, so without this it rendered as a ~620px navy slab
   with an unstyled, invisible heading. Match the site's heading scale and cut the
   padding to something proportionate. */
/* `.svc-page section { padding: var(--svc-pad) 0 }` (100px) was stacking on top of
   the banner's own inner padding: 100 + 273 + 100 = a 473px slab. The inner block
   owns the spacing here. */
.svc-page section.page-header { padding: 0; }

/* same specificity as the theme rule, so scope it up rather than rely on load order */
.svc-page .page-header .page-header__inner,
.mediplace-embed .page-header .page-header__inner {
  padding: clamp(56px, 7vw, 92px) 0 clamp(52px, 6.5vw, 84px);
}
.svc-page .page-header__inner h1,
.page-header__inner h1,
.page-header__inner .page-header__h1-alt {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.18;
  color: #fff;
  margin: 0 0 14px;
}
.page-header .thm-breadcrumb li,
.page-header .thm-breadcrumb li a {
  color: rgba(255, 255, 255, .92);
}
/* the body h1 on those pages is the real page heading - give it heading weight */
.wvd-post-body > h1:first-child {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--svc-navy, var(--wvd-navy));
  margin: 0 0 18px;
}

/* ===========================================================================
   MOBILE PASS - 2026-07-27
   The site was built and signed off at 1440px only. These blocks fix what that
   missed. Nothing here touches desktop: every rule is inside a max-width query
   at or below the breakpoint where the layout has already changed shape.
   ========================================================================= */

/* --- Hero: the copy column collapses to zero width below 991px -------------
   `.main-slider--form .main-slider__content > *` reserves 470px of the row for
   the form card (see the rule near line 3013). That is correct while the card
   is absolutely positioned, but the theme drops it to `position: static` at
   991px and stacks it below the copy. The reservation stays, so from 991px down
   the H1/lead/badge boxes shrink - 351px, then 128px, then literally 0 - while
   the H1's own `white-space: nowrap` keeps its text at full length. At 390px the
   heading renders 500px wide inside a 0px box and is cut off mid-word.

   It never showed up in automated checks because an ancestor clips it: the page
   itself never scrolls horizontally, so a scrollWidth-vs-viewport test passes
   while the heading is visibly chopped in half. Only a screenshot catches it. */
@media (max-width: 991px) {
  .main-slider--form .main-slider__content > *:not(.main-slider__img-box--form) {
    max-width: 100%;
  }

  /* The card is in normal flow here, so the hero no longer needs to reserve
     height for an absolutely positioned child. */
  .main-slider--form .main-slider__content {
    min-height: 0;
    padding-bottom: 32px !important;
  }

  .main-slider__img-box--form {
    width: 100%;
    right: auto;
    top: auto !important;
  }

  /* Let the heading wrap. The desktop rule pins it to one line at a fluid size
     chosen against the space left of the photo - neither applies once the photo
     is gone and the column is full width. */
  h1.main-slider__title,
  .main-slider__title {
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  .main-slider__lead {
    max-width: 100%;
  }

  /* The trust chip is inline-flex and inherited the same zero-width cap, which
     squashed the "300+" odometer into a vertical stack one digit per line. */
  .main-slider__satisfied-customer,
  .main-slider__satisfied-customer--top {
    max-width: 100% !important;
    width: auto !important;
  }
  .main-slider__satisfied-customer-count,
  .main-slider__satisfied-customer-count .odometer {
    white-space: nowrap !important;
  }
}

/* --- Utility bar: 299px of mostly empty space above every page ------------
   The bar keeps its desktop paddings when it stacks, so on a 390px screen it
   eats a third of the first viewport before the logo appears, the phone number
   breaks across three lines mid-digits, and the email sits 2px from the edge.
   Content is not removed - only the spacing is made to fit. */
@media (max-width: 767px) {
  .main-menu-two__top-inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    text-align: center;
  }

  .main-menu-two__social-and-text,
  .main-menu-two__working-hours-and-contact {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
  }

  .main-menu-two__working-hours,
  .main-menu-two__contact-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    width: 100%;
    margin: 0;
  }

  /* A phone number split as "(972)/964-/8989" is unreadable and untappable. */
  .main-menu-two__contact-list a[href^="tel:"] {
    white-space: nowrap;
  }

  /* The email is the longest string in the chrome; let it shrink rather than
     run to the very edge of the screen. */
  .main-menu-two__contact-list a[href^="mailto:"] {
    font-size: 13px;
    word-break: break-word;
  }

  /* The separator between phone and email only reads as one in a row. */
  .main-menu-two__contact-list li + li::before {
    display: none;
  }
}

/* --- Reviews page: the two-up form grid never collapsed on mobile ----------
   `.svc-forms__grid--two` at line ~2018 tries to drop this to one column under
   991px, but it loses on specificity to the two-class desktop rule
   `.svc-forms__grid.svc-forms__grid--two` (0,2,0 beats 0,1,0 - a media query
   adds none). So the grid stayed at `214px 227px` = 441px inside a 366px
   column and the second card ran 83px off the right edge of the screen.

   This is the same trap the comment above that desktop rule already warns
   about; the mobile override just did not follow its own advice. Doubling the
   class here fixes it without touching the desktop rule. */
@media (max-width: 991px) {
  .svc-forms__grid.svc-forms__grid--two {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* ===========================================================================
   BLOG REVISION 2026-07-28 (Marko's review pass)
   ========================================================================= */

/* --- date eyebrow (replaces the author + date meta row) -------------------
   The author byline is gone from the templates entirely. What is left is the
   date, styled as a small caps eyebrow. The old row put the icon and the text
   flush against each other; this is a flex row with a real gap. */
.svc-page .wvd-eyebrow-date,
.wvd-eyebrow-date {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  /* same recipe as .svc-eyebrow, which is the site's eyebrow everywhere else */
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* !important because `.svc-page p` (0,2,0) sets the muted body colour and a
     single class here loses to it.
     gold-ink rather than the bright accent: this is 12.5px on white, where
     #C07D1D is only 3.39:1. */
  color: var(--wvd-gold-ink) !important;
}
.wvd-eyebrow-date .fas { font-size: 14px; line-height: 1; color: inherit; }
.blog-details__content .wvd-eyebrow-date { margin-bottom: 18px; }

/* --- blog buttons: the site's two button recipes, nothing new -------------
   READ MORE and the sidebar CTA were rendering as the theme's default dark
   pill. Reuse what the rest of the site already uses:
     on light ground  -> BLUE pill / white text / WHITE chip / blue arrow  (the
                         header's MAKE APPOINTMENT button)
     on navy ground   -> WHITE pill / navy text / BLUE chip / white arrow  (the
                         hero + final-CTA button)
   Both get the wrap-arrow hover from @keyframes wp-arrow-wrap (block 7h). */
.blog-one__btn .thm-btn,
.wvd-noposts .thm-btn,
.sidebar__cta .thm-btn {
  overflow: hidden;
  box-shadow: none;
}
.blog-one__btn .thm-btn::before,
.blog-one__btn .thm-btn::after,
.wvd-noposts .thm-btn::before,
.wvd-noposts .thm-btn::after,
.sidebar__cta .thm-btn::before,
.sidebar__cta .thm-btn::after { display: none !important; }

/* shared chip geometry */
.blog-one__btn .thm-btn .fas,
.blog-one__btn .thm-btn [class*="fa-"],
.wvd-noposts .thm-btn .fas,
.wvd-noposts .thm-btn [class*="fa-"],
.sidebar__cta .thm-btn .fas,
.sidebar__cta .thm-btn [class*="fa-"] {
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}
.blog-one__btn .thm-btn .fas::before,
.blog-one__btn .thm-btn [class*="fa-"]::before,
.wvd-noposts .thm-btn .fas::before,
.wvd-noposts .thm-btn [class*="fa-"]::before,
.sidebar__cta .thm-btn .fas::before,
.sidebar__cta .thm-btn [class*="fa-"]::before { display: inline-block; position: relative; }
.blog-one__btn .thm-btn:hover .fas::before,
.blog-one__btn .thm-btn:hover [class*="fa-"]::before,
.wvd-noposts .thm-btn:hover .fas::before,
.wvd-noposts .thm-btn:hover [class*="fa-"]::before,
.sidebar__cta .thm-btn:hover .fas::before,
.sidebar__cta .thm-btn:hover [class*="fa-"]::before { animation: wp-arrow-wrap .5s ease forwards; }

/* on light ground: blue pill, white chip */
.blog-one__btn .thm-btn,
.wvd-noposts .thm-btn {
  background-color: var(--svc-blue, var(--wvd-blue)) !important;
  color: #ffffff !important;
}
.blog-one__btn .thm-btn *,
.wvd-noposts .thm-btn * { color: #ffffff !important; }
.blog-one__btn .thm-btn .fas,
.blog-one__btn .thm-btn [class*="fa-"],
.wvd-noposts .thm-btn .fas,
.wvd-noposts .thm-btn [class*="fa-"] {
  background-color: #ffffff !important;
  color: var(--svc-blue, var(--wvd-blue)) !important;
}
.blog-one__btn .thm-btn .fas::before,
.blog-one__btn .thm-btn [class*="fa-"]::before,
.wvd-noposts .thm-btn .fas::before,
.wvd-noposts .thm-btn [class*="fa-"]::before { color: var(--svc-blue, var(--wvd-blue)) !important; }
.blog-one__btn .thm-btn:hover,
.wvd-noposts .thm-btn:hover { background-color: var(--svc-navy, var(--wvd-navy)) !important; }

/* on the navy sidebar card: white pill, blue chip */
.sidebar__cta .thm-btn {
  background-color: #ffffff !important;
  color: var(--svc-navy, var(--wvd-navy)) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.sidebar__cta .thm-btn * { color: var(--svc-navy, var(--wvd-navy)) !important; }
.sidebar__cta .thm-btn .fas,
.sidebar__cta .thm-btn [class*="fa-"] {
  background-color: var(--svc-blue, var(--wvd-blue)) !important;
  color: #ffffff !important;
}
.sidebar__cta .thm-btn .fas::before,
.sidebar__cta .thm-btn [class*="fa-"]::before { color: #ffffff !important; }

/* --- pagination ----------------------------------------------------------
   The old rule was `.wvd-pagination a, .wvd-pagination span`, which also
   matched the <span class="fas"> INSIDE the next/prev anchor. The icon then
   got its own 46px white pill with a border, nested inside the link's pill -
   the "button within a button" in the screenshot. Scope to the direct child
   and explicitly strip the chip styling back off anything nested. */
.wvd-pagination > ul > li > a,
.wvd-pagination > ul > li > span {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
}
.wvd-pagination a *,
.wvd-pagination span * {
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  display: inline-flex !important;
  align-items: center;
  font-size: 16px;
  line-height: 1;
}
.wvd-pagination .dots {
  border-color: transparent !important;
  background: none !important;
  letter-spacing: 2px;
}
.wvd-pagination .next,
.wvd-pagination .prev { padding: 0 !important; }

/* --- list bullets --------------------------------------------------------
   MediPlace resets `ul { list-style: none }` globally, so every migrated
   bulleted list rendered as flat lines of text with no marker. The post body
   is editorial content and needs real markers back. */
.wvd-post-body ul { list-style: disc outside !important; padding-left: 24px !important; }
.wvd-post-body ol { list-style: decimal outside !important; padding-left: 24px !important; }
.wvd-post-body ul ul { list-style: circle outside !important; }
.wvd-post-body li { display: list-item !important; }
.wvd-post-body li::marker { color: var(--svc-blue, var(--wvd-blue)); }
/* the card grids below are <a>s, not list items - keep them clean */
.wvd-post-body .wvd-linkcards ul { list-style: none !important; padding-left: 0 !important; }

/* --- Gutenberg spacer blocks ---------------------------------------------
   The geo pages are built almost entirely out of 70px and 30px spacer blocks
   between paragraphs, with the height set inline. At the migrated font size
   that reads as a gap the length of a paragraph. Cap them instead of editing
   28 pages of content (the inline height needs !important to override). */
.wvd-post-body .wp-block-spacer { height: 26px !important; }
.wvd-post-body .wp-block-spacer + .wp-block-spacer { display: none; }

/* --- link cards (Areas We Serve / Services We Offer) ----------------------
   Built by wvd_linklists_to_cards() from the original <ul> of links. Same
   design language as .svc-benefit-card / .svc-hub-card: tint ground, navy
   icon chip, hover lift. auto-fill keeps the rows symmetric at any count. */
.wvd-linkcards { margin: 44px 0; }
.wvd-linkcards__title {
  font-size: 26px;
  margin: 0 0 22px;
  color: var(--svc-navy, var(--wvd-navy));
}
.wvd-linkcards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}
.wvd-linkcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--svc-border, var(--wvd-border));
  border-radius: var(--svc-radius, 18px);
  color: var(--svc-navy, var(--wvd-navy)) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wvd-linkcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(var(--wvd-navy-rgb), .12);
  border-color: transparent;
  color: var(--svc-navy, var(--wvd-navy)) !important;
}
.wvd-linkcard__icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--svc-tint, var(--wvd-wash-3));
  color: var(--svc-blue, var(--wvd-blue));
  font-size: 22px;
  transition: background .25s ease, color .25s ease;
}
.wvd-linkcard:hover .wvd-linkcard__icon {
  background: var(--svc-blue, var(--wvd-blue));
  color: #fff;
}
.wvd-linkcard__label { flex: 1 1 auto; }
.wvd-linkcard__go {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--svc-blue, var(--wvd-blue));
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.wvd-linkcard:hover .wvd-linkcard__go { opacity: 1; transform: translateX(0); }

@media (max-width: 575px) {
  .wvd-linkcards__grid { grid-template-columns: 1fr; }
  .wvd-linkcards__title { font-size: 22px; }
}

/* --- Mobile header + off-canvas panel (2026-07-28) ------------------------
   Three things wrong below the 992px breakpoint, all measured rather than
   guessed:

   1. The logo filled the header bar exactly - 78px tall image in a 78px bar,
      top edge to bottom edge. Nothing clipped it, but "DENTAL CARE" sat
      flush on the boundary with the navy hero below, so it read as cut off.
   2. The burger sat at x=236 in a 390px viewport, because its flex parent
      centres its contents. It belongs in the corner.
   3. The panel logo is footer-logo.png, a 55x55 source, rendered at 150x150 -
      upscaled almost 3x, which is why it looked both oversized and soft.

   responsive.css loads AFTER this file, so the properties it also sets need
   !important to survive.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {

  /* --- header bar --- */
  .main-menu-two__wrapper-inner {
    align-items: center !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .main-menu-two__left,
  .main-menu-two__logo { height: auto !important; align-items: center !important; }

  /* height-capped and auto-width, so the wordmark keeps its aspect and gets
     real breathing room above and below instead of touching both edges */
  .main-menu-two__logo img {
    width: auto !important;
    height: auto !important;
    max-height: 52px !important;
    max-width: 62vw !important;
    object-fit: contain !important;
  }

  /* --- burger to the right corner --- */
  .main-menu-two__main-menu-box {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }
  /* scoped to the header: the SAME class is on the panel's close button, and
     margin-left:auto there would shove the X across the panel */
  .main-menu-two__main-menu-box .mobile-nav__toggler {
    margin-left: auto !important;
    /* 18x26 was well under a comfortable tap target; pad it out to ~44px
       without moving the glyph off the edge */
    padding: 9px 0 9px 16px !important;
    box-sizing: content-box;
  }

  /* --- open off-canvas panel --- */
  /* Left-aligned, flush with the menu items below it - .logo-box is a flex row
     and the nav links share the same left edge, so the mark lines up with
     "Home" instead of floating on its own axis. */
  .mobile-nav__content .logo-box {
    height: auto !important;
    margin: 4px 0 26px !important;
  }
  .mobile-nav__content .logo-box img {
    display: block;
    width: 76px !important;
    height: auto !important;
    max-width: 76px !important;
  }
  /* the divider under the logo was doing the spacing work; keep it tidy */
  .mobile-nav__content .logo-box + .mobile-nav__container { padding-top: 4px; }
}

/* ============================================================================
   MEMBERSHIP PLAN MODAL  +  EMPTY-OFFERS STATE
   Client feedback round 1, item 5: an in-house plan pop-up, like the one on
   comaldental.com. Markup and copy come from the WVD Special Offers mu-plugin
   (wp-admin > Settings > Membership Plan), so the practice can edit it.

   Every colour here is a token from the palette block at the top of this file -
   nothing hardcoded, so this component follows the palette when it changes.
   ========================================================================== */

body.wvd-modal-open { overflow: hidden; }

/* ---- corner prompt ------------------------------------------------------
   The "No dental insurance?" card, bottom-right on desktop and a bottom sheet
   on a phone. Markup + copy from the WVD Membership plan corner prompt
   mu-plugin (same settings screen as the modal below).

   The reference (comaldental.com) is a flat 320x192 PNG. This is real text, so
   it has to hold up at any font size and in any language the practice types -
   hence a max-width and wrapping copy rather than a fixed 320px box.

   z-index sits UNDER .wvd-modal (9999): clicking the prompt opens that modal,
   and the prompt must not paint over the dialog it just launched. */
.wvd-prompt {
  position: fixed;
  z-index: 9990;
  right: 22px;
  bottom: 22px;
  max-width: 340px;
}
.wvd-prompt[hidden] { display: none; }

.wvd-prompt__card {
  position: relative;
  padding: 20px 22px 22px;
  border-radius: 16px;
  background: var(--wvd-navy);
  color: #ffffff;
  box-shadow: 0 18px 48px rgba(var(--wvd-navy-rgb), .34);
  /* start state for the slide-in; .is-open is added a frame after unhiding */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
.wvd-prompt.is-open .wvd-prompt__card { opacity: 1; transform: none; }

.wvd-prompt__title {
  margin: 0 0 4px;
  padding-right: 34px;      /* clear of the 40px close button */
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: #ffffff;
}
.wvd-prompt__text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,255,255,.86);
}
.wvd-prompt__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--wvd-blue);
  color: var(--wvd-on-gold) !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wvd-prompt__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(var(--wvd-navy-rgb), .3);
  color: var(--wvd-on-gold) !important;
}
/* 40px, not the 30 it started at: this is the only way to get rid of the card
   and it sits at the edge of the screen on a phone. _wvd_mobile_qa.js flags
   anything under 40. */
.wvd-prompt__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,.7);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.wvd-prompt__close:hover { color: #ffffff; background: rgba(255,255,255,.12); }

/* ---- minimised state ----------------------------------------------------
   The X collapses the card to this tab rather than dismissing it, so the offer
   stays permanently one click away. Both live in the same fixed container and
   swap, which keeps the corner position identical between the two states. */
.wvd-prompt__tab {
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;          /* hugs the right edge of the fixed container */
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--wvd-navy);
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(var(--wvd-navy-rgb), .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wvd-prompt__tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(var(--wvd-navy-rgb), .38);
}
.wvd-prompt__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wvd-blue);
  color: var(--wvd-on-gold);
  font-size: 13px;
  line-height: 1;
}
.wvd-prompt.is-min { display: flex; justify-content: flex-end; }
.wvd-prompt.is-min .wvd-prompt__card { display: none; }
.wvd-prompt.is-min .wvd-prompt__tab { display: inline-flex; }

@media (max-width: 575px) {
  /* Bottom sheet. A 340px card in the corner of a phone covers a third of the
     screen and sits over the content the visitor is trying to read. */
  .wvd-prompt { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  .wvd-prompt__card { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 16px 18px; }
  .wvd-prompt__title { font-size: 17px; flex: 1 1 100%; }
  .wvd-prompt__text { flex: 1 1 100%; margin-bottom: 12px; font-size: 14px; }
  .wvd-prompt__cta { width: 100%; }
  /* the tab stays a small pill on the right, not a full-width bar */
  .wvd-prompt.is-min { left: auto; right: 12px; }
}
/* The back-to-top button lives in the same corner, so it has to move clear
   while the prompt is up. Driven by a class on <body> and a custom property
   holding the card's measured height - a sibling selector cannot do it (the
   prompt is appended last, after .scroll-to-top) and the height is not a
   constant, because the practice can type as much copy as it likes.

   The !important is not decoration either: the square back-to-top restyle
   further up this file sets `bottom: 28px !important`, so a plain value here
   loses no matter how late it appears. */
body.wvd-prompt-open .scroll-to-top,
body.wvd-prompt-open .scroll-to-top.scroll-to-top--square {
  bottom: calc(var(--wvd-prompt-h, 160px) + 46px) !important;
  transition: bottom .26s ease;
}

@media (prefers-reduced-motion: reduce) {
  .wvd-prompt__card { transition: none; }
}

.wvd-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wvd-modal[hidden] { display: none; }

.wvd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--wvd-navy-rgb), 0.82);
  cursor: pointer;
}

.wvd-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 40px 36px 36px;
  box-shadow: 0 30px 80px rgba(var(--wvd-navy-rgb), 0.35);
}

.wvd-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--wvd-tint);
  color: var(--wvd-navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.wvd-modal__close:hover {
  background: var(--wvd-navy);
  color: #FFFFFF;
}
/* The dialog moves focus to this button when it opens, so Chrome painted its
   default focus ring on it - a 1px rgb(0,95,204) blue halo, on a site with no
   blue in it. It read as a styling bug because it looked like one.

   `:focus-visible` rather than killing the outline outright: a mouse user who
   clicked a link to open the dialog gets no ring, a keyboard user tabbing
   through still gets one, and it is now gold instead of Chrome blue. */
.wvd-modal__close:focus { outline: none; }
.wvd-modal__close:focus-visible,
.wvd-modal__cta:focus-visible,
.wvd-prompt__close:focus-visible,
.wvd-prompt__cta:focus-visible {
  outline: 2px solid var(--wvd-blue);
  outline-offset: 2px;
}
.wvd-prompt__close:focus { outline: none; }

.wvd-modal__title {
  margin: 0 40px 14px 0;
  color: var(--wvd-navy);
  font-size: 26px;
  line-height: 1.25;
}

/* The price is the thing she is selling, so it gets the weight. */
.wvd-modal__price {
  margin: 0 0 18px;
  color: var(--wvd-blue);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}
.wvd-modal__price span {
  display: block;
  margin-top: 6px;
  color: var(--wvd-muted);
  font-size: 14px;
  font-weight: 500;
}

.wvd-modal__intro {
  margin: 0 0 20px;
  color: var(--wvd-muted);
  font-size: 15px;
  line-height: 1.7;
}

.wvd-modal__list {
  margin: 0 0 26px;
  padding: 22px 0 0;
  border-top: 1px solid var(--wvd-border);
  list-style: none;
}
.wvd-modal__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--wvd-ink);
  font-size: 15px;
  line-height: 1.5;
}
.wvd-modal__list li:last-child { margin-bottom: 0; }
.wvd-modal__list iconify-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--wvd-blue);
  font-size: 20px;
}

/* Match the header's "Make Appointment" button exactly: the chip sits flush at
   the left edge of the pill, not centred with the label as a group. The header
   button hugs its content, so its 7px left padding puts the chip on the edge;
   this one was stretched to width:100% with justify-content:center, which
   floated the chip 62px in and made it read as a different component.
   Chip size is matched too - it was 50px here against the header's 40px. */
.wvd-modal__cta {
  width: auto;
  justify-content: flex-start;
}
.wvd-modal__cta .fas,
.wvd-modal__cta [class*="fa-"] {
  width: 40px !important;
  height: 40px !important;
}

@media (max-width: 575px) {
  .wvd-modal { padding: 12px; }
  .wvd-modal__dialog { padding: 34px 22px 26px; border-radius: 14px; }
  .wvd-modal__title { font-size: 22px; }
  .wvd-modal__price { font-size: 36px; }
}

/* Between promos the offers grid is legitimately empty. Say so, rather than
   leaving a headed section with a hole under it. */
.svc-offer-empty {
  padding: 34px 30px;
  border: 1px dashed var(--wvd-border);
  border-radius: 18px;
  background: var(--wvd-tint);
  text-align: center;
}
.svc-offer-empty p {
  margin: 0;
  color: var(--wvd-muted);
  font-size: 16px;
}
.svc-offer-empty a {
  color: var(--wvd-blue);
  font-weight: 600;
}

/* The plan's entry points: a button under the checklist on /for-patients/, and
   a one-line prompt under the offers grid on /special-offers/. */
.wvd-plan-trigger { margin-top: 22px; }

.svc-offer-plan-note {
  margin: 26px 0 0;
  color: var(--wvd-muted);
  font-size: 16px;
  text-align: center;
}
.svc-offer-plan-note a {
  color: var(--wvd-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.svc-offer-plan-note a:hover { color: var(--wvd-navy); }

/* The offers grid was written for exactly two hand-written coupons. The count is
   editable now, so an odd number would leave a lone card stranded in the left
   column with a hole beside it. Centre a trailing odd card instead - this covers
   1, 3, 5 offers without any layout special-casing per count. */
.svc-offer-wrap--grid > .svc-coupon:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 466px;
  justify-self: center;
}
@media (max-width: 767px) {
  /* single column already; the span would otherwise cap the card at 466px */
  .svc-offer-wrap--grid > .svc-coupon:last-child:nth-child(odd) { max-width: none; }
}

/* ============================================================================
   HOME PAGE SPECIAL OFFER
   The old live site carried a "$1,000 OFF Clear Aligners" band between the hero
   and "What Makes Us the Right Place to Smile" (live markup: <section
   id="specials">). This restores that slot, but driven by the editable offer
   post type rather than static markup - so the practice can swap which offer
   appears there by ticking "Show on the home page".
   ========================================================================== */
.wvd-home-offer {
  padding: 70px 0 20px;
  background: var(--wvd-tint);
}
.wvd-home-offer .svc-offer-wrap--grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 620px;
}
/* the grid centres a lone odd card at 466px; on home it should use the width */
.wvd-home-offer .svc-offer-wrap--grid > .svc-coupon:last-child:nth-child(odd) {
  max-width: none;
}
@media (max-width: 767px) {
  .wvd-home-offer { padding: 48px 0 8px; }
}

/* ============================================================================
   TRUSTINDEX GOOGLE REVIEWS
   The free Trustindex widget, on /reviews/ (inside .svc-reviews__embed) and on
   the home page (its own .wvd-home-reviews section, directly under the offer
   band). Two things worth knowing before touching any of this:

   1. The widget's own stylesheet is fetched by loader.js off the mount div's
      data-css-url and appended to <head> AFTER this file, so plain overrides
      lose on source order. Everything here is scoped through an ancestor
      (.wvd-home-reviews / .svc-reviews) which outweighs Trustindex's own
      single-class selectors.
   2. Nothing renders until the visitor moves the mouse or scrolls - loader.js
      queues the widget on tiElementToWaitForActivity and only drains it on
      keydown/mousemove/wheel/touchmove/touchstart. A headless check that only
      calls window.scrollTo() sees an empty slot and it is NOT a bug. See
      Tools/Puppeteer/_wvd_trustindex_qa.js.
   ========================================================================== */
/* WHITE, and it has to stay white. The offer band directly above is an
   edge-to-edge #F7F5F0 cream band, one unit off --wvd-tint (#F7F4EF) - close
   enough that with both on the tint the promo and the reviews read as a single
   700px slab with a heading floating in the middle of it. White gives the
   promo band a hard bottom edge, which is what it was designed to have. */
.wvd-home-reviews {
  padding: 64px 0 90px;
  background: #ffffff;
}
.wvd-home-reviews .section-title { margin-bottom: 44px; }

/* Review cards: white on both tinted sections, so they read as cards rather
   than as a slightly darker patch of the same background - and because
   Trustindex's own #f4f4f4 is a NEUTRAL grey that goes visibly cold against
   this site's warm #F7F4EF (the same cool-cast problem _cool.js exists to
   catch).

   The !important is not decoration: Trustindex ships
   `background-color:#f4f4f4 !important` and `border-*-width:0 !important` on
   `.ti-widget.ti-goog .ti-review-item>.ti-inner`, so a plain override loses
   even though this selector is longer. The `>` is copied from theirs for the
   same reason. */
.wvd-home-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner,
.svc-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner {
  background-color: #ffffff !important;
  border-width: 1px !important;
  border-color: var(--wvd-border-alt) !important;
  border-radius: 12px !important;
}
/* On /reviews/ the section is tinted and a white card reads on its own. On the
   home page the section is white (see the note on .wvd-home-reviews), so the
   cards need a shadow or they dissolve into the background. */
.wvd-home-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner {
  box-shadow: 0 4px 18px rgba(var(--wvd-ink-rgb), .07) !important;
}
/* Trustindex sets the reviewer name and body copy in its own stack; match the
   site's so the block does not look pasted in. */
.wvd-home-reviews .ti-widget,
.svc-reviews .ti-widget {
  font-family: inherit;
}
.wvd-home-reviews .ti-name,
.svc-reviews .ti-name {
  color: var(--wvd-ink);
}
/* The "EXCELLENT / Based on N reviews" rail sits left of the slider on desktop
   and above it on mobile; centre it in both so it lines up with the heading. */
.wvd-home-reviews .ti-footer,
.svc-reviews .ti-footer { text-align: center; }

@media (max-width: 767px) {
  /* 80px, not the 12px this started with. The 12 was correct only while the
     section shared the offer band's tint and the two read as one block - once
     it went white it became a section in its own right, and its eyebrow sat
     5px under the band above it while every other section on the page opens
     with 80px (about-two, services-two, team-two, faq-one, skill-one and
     appointment-one all measure exactly that at 390). */
  .wvd-home-reviews { padding: 80px 0 64px; }
  .wvd-home-reviews .section-title { margin-bottom: 28px; }
}

/* ============================================================================
   PALETTE ACCESSIBILITY PASS
   Everything here exists because #C07D1D is 3.39:1 on white. See the
   --wvd-gold-ink / --wvd-gold-on-dark / --wvd-on-gold note in the palette block.
   Nothing below changes a FILL - the brand gold stays exactly #C07D1D wherever
   it is a background. Only small text moves, and which way it moves depends on
   what it sits on.
   ========================================================================== */

/* --- 1. small gold text on a LIGHT background -> darker gold -------------- */
/* Theme eyebrows. `.appointment-one` is excluded: its tagline sits on a dark
   photo and the theme correctly keeps it white. */
section:not(.appointment-one) .section-title__tagline { color: var(--wvd-gold-ink) !important; }

/* Body links in light sections. Large display text is left alone - it already
   clears the 3:1 that AA-large asks for. */
.svc-page p a,
.about-two__text a,
p a:not(.thm-btn):not(.svc-explore__btn) { color: var(--wvd-gold-ink); }

/* Required-field asterisks in the appointment form */
.wvd-req { color: var(--wvd-gold-ink) !important; }

/* The coupon eyebrow is 13px, well under the large-text threshold */
.svc-coupon__tag { color: var(--wvd-gold-ink); }

/* Current page in the desktop nav - 18px/600, just under AA-large. The theme
   sets this with high specificity, hence !important. */
.main-menu-two__main-menu-box .main-menu__list > li.current > a,
.main-menu-two__main-menu-box .main-menu__list > li:hover > a { color: var(--wvd-gold-ink) !important; }

/* --- 2. small gold text on a DARK background -> lighter gold -------------- */
/* Hero intro links sit on the navy slider. gold-ink would be 3.43:1 there. */
.main-slider__text a,
.main-slider__content p a { color: var(--wvd-gold-on-dark) !important; }

/* The mobile nav panel is WHITE, so its current-page item needs the dark gold.
   This rule used to say "the panel is navy" and used --wvd-gold-on-dark. The
   panel was later forced to #FFFFFF further down this file and this colour was
   never revisited, which left the current page sitting at 2.8:1. The two rules
   had been contradicting each other in the same stylesheet. */
.mobile-nav__content .main-menu__list > li.current > a,
.mobile-nav__container .main-menu__list > li.current > a { color: var(--wvd-gold-ink) !important; }

/* --- 3. text sitting ON a gold fill -> navy ------------------------------- */
/* Navy on gold is 5.01:1 and is the stronger pairing anyway. */
.main-menu-two__top-inner,
.main-menu-two__top-inner p,
.main-menu-two__top-inner a,
.main-menu-two__top-inner span,
.main-menu-two__top-inner iconify-icon,
.site-footer-two__bottom-inner .site-footer-two__copyright-text,
.site-footer-two__bottom-inner .site-footer-two__copyright-text a {
  color: var(--wvd-on-gold) !important;
}

/* The footer's copyright bar is also gold. The theme colours this with enough
   specificity that the grouped rule above loses, so it gets its own. */
footer.site-footer-two .site-footer-two__bottom p.site-footer-two__copyright-text,
footer.site-footer-two .site-footer-two__bottom p.site-footer-two__copyright-text a {
  color: var(--wvd-on-gold) !important;
}

/* --- 4. gold-fill buttons and small gold labels --------------------------- */
/* These keep their gold fill with white text - that is their site's own button
   hover (gold #C07D1D + white) and the look that was asked for. */
.svc-hero__btn .thm-btn,
.blog-one__btn .thm-btn,
.wvd-noposts .thm-btn,
.svc-hero__btn .thm-btn *,
.blog-one__btn .thm-btn *,
.wvd-noposts .thm-btn * { color: var(--wvd-on-gold) !important; }

/* "Most popular" badge on the payment cards - gold fill, white text */
.svc-pay-card__badge { color: var(--wvd-on-gold) !important; }

/* Small gold labels on white. All are well under the large-text threshold. */
.emerg-card__hint,
.svc-hub-card__cat,
.svc-hub-card__more,
.svc-team-card__role,
.svc-pay-card a { color: var(--wvd-gold-ink) !important; }
/* blog dates are handled at source, on .wvd-eyebrow-date - a bare `time` rule
   loses to that class anyway, and blanket-styling an element is worse. */

/* ============================================================================
   LIGHT MODE  (2026-07-31)
   ----------------------------------------------------------------------------
   Black is for TEXT and small elements, not for surfaces. The MediPlace template
   painted whole bands dark and the palette work inherited that, so the site read
   as a dark theme wearing gold.

   The dark surfaces were found by MEASUREMENT, not by reading the stylesheet -
   `_wvd_dark_surfaces.js` ranks every dark-painted element by rendered area, so
   what gets flipped here is what actually dominates the page.

   `--wvd-navy` is NOT redefined. It is still the ink, and the theme uses it for
   heading text as well as fills - flipping the token would make text invisible.
   Only the specific surfaces move.
   ========================================================================== */

/* --- Bands that were solid dark ------------------------------------------ */
.svc-cta,
.svc-process,
.svc-care__box,
.svc-findus__panel,
.page-header,
.counter-one,
.counter-one__inner,
.svc-pay-card--feature,
.team-two__content {
  background: var(--wvd-tint) !important;
}

/* Their text was hardcoded #fff against the old dark ground. */
.svc-cta h2, .svc-cta p, .svc-cta .svc-cta__title,
.svc-page .svc-cta__title,
.svc-process h2, .svc-process h3, .svc-process p, .svc-process li,
.svc-care__box h2, .svc-care__box h3, .svc-care__box p, .svc-care__box li,
.svc-findus__panel h2, .svc-findus__panel h3, .svc-findus__panel p, .svc-findus__panel li,
.svc-findus__panel a:not(.thm-btn),
.page-header h1, .page-header h2, .page-header p, .page-header a,
.counter-one h2, .counter-one h3, .counter-one p, .counter-one span,
.counter-one__inner h2, .counter-one__inner h3, .counter-one__inner p, .counter-one__inner span,
.svc-pay-card--feature h3, .svc-pay-card--feature p, .svc-pay-card--feature li,
.team-two__content h3, .team-two__content p {
  color: var(--wvd-ink) !important;
}
/* secondary copy in those bands reads better muted than full black */
.svc-cta p,
.svc-process p,
.svc-care__box p,
.svc-findus__panel p,
.counter-one p,
.counter-one__inner p { color: var(--wvd-muted) !important; }

/* --- Primary buttons: gold fill, white text ------------------------------ */
/* Their own site's button hover is exactly this. */
a.thm-btn,
button.thm-btn,
button.wvd-submit,
a.svc-explore__btn--alt,
.svc-hero__btn .thm-btn,
.svc-cta__inner .thm-btn,
.blog-one__btn .thm-btn,
.wvd-noposts .thm-btn {
  background-color: var(--wvd-blue) !important;
}
a.thm-btn, a.thm-btn *,
button.thm-btn, button.thm-btn *,
button.wvd-submit, button.wvd-submit *,
a.svc-explore__btn--alt, a.svc-explore__btn--alt *,
.svc-hero__btn .thm-btn, .svc-hero__btn .thm-btn *,
.svc-cta__inner .thm-btn, .svc-cta__inner .thm-btn *,
.blog-one__btn .thm-btn, .blog-one__btn .thm-btn * {
  color: var(--wvd-on-gold) !important;
}
/* the round chip inside a gold button goes white, with a gold glyph */
a.thm-btn .fas, a.thm-btn [class*="fa-"],
button.wvd-submit .fas, button.wvd-submit [class*="fa-"],
.svc-hero__btn .thm-btn .fas, .svc-cta__inner .thm-btn .fas,
.blog-one__btn .thm-btn .fas {
  background-color: #FFFFFF !important;
  color: var(--wvd-blue) !important;
}
/* The glyph follows its own chip, it does not get a colour of its own.
   `a.thm-btn *` above paints every child of a gold button white, which on a
   white chip would erase the glyph - hence a ::before rule here to put it back.
   It used to hardcode var(--wvd-blue), and that quietly broke two buttons the
   moment --wvd-blue was re-pointed at the brand gold in the palette pass: the
   site-wide sidebar "Book Appointment" CTA and the hero video button's hover
   state both paint a GOLD chip and expect a white glyph, so they ended up gold
   on gold with an invisible arrow - and an arrow nobody can see also makes the
   hover animation look like a dead button.

   `inherit` takes the colour off the span instead, and every per-button rule
   already sets that span correctly (white glyph on a gold chip, gold glyph on a
   white one), static and hover. Tools/Puppeteer/_wvd_btn_audit.js fails on any
   icon whose glyph colour equals its own chip colour, in either state. */
a.thm-btn .fas::before, a.thm-btn [class*="fa-"]::before,
button.wvd-submit .fas::before,
.svc-hero__btn .thm-btn .fas::before, .svc-cta__inner .thm-btn .fas::before,
.blog-one__btn .thm-btn .fas::before { color: inherit !important; }

/* --- Small elements that stay solid, but gold rather than black ---------- */
.svc-coupon__side,
.about-two__left-experience,
.eye-care-center__icon,
.svc-benefit-card__icon,
.svc-stop__dot { background: var(--wvd-blue) !important; }
.svc-coupon__side,
.svc-coupon__side iconify-icon,
.svc-coupon__side-label,
.about-two__left-experience,
.about-two__left-experience *,
.eye-care-center__icon iconify-icon,
.svc-benefit-card__icon iconify-icon { color: #FFFFFF !important; }

/* --- Mobile nav panel -----------------------------------------------------
   The panel is white here; the theme built it dark. Its own rule is

     .mobile-nav__content .main-menu__list > li > a,
     .mobile-nav__content .main-menu__list > li > ul > li > a,
     .mobile-nav__content .main-menu__list > li > ul > li > ul > li > a
       { color: #ffffff; }

   i.e. it whitens ALL THREE levels. The override below originally answered only
   the first, so every submenu link was WHITE ON WHITE - measured at 1:1, not
   estimated. Top level looked right, which is exactly why it survived: you have
   to open the burger AND expand a dropdown to see it.

   Match the theme's three levels one for one. Children take the muted ink
   rather than full ink, so the hierarchy still reads once the colour works;
   #5B5B5B is 6.79:1 on white.

   `_wvd_invisible.js` did not catch this and still will not: it never opens the
   off-canvas menu, so those links are display:none when it looks. */
.mobile-nav__content { background: #FFFFFF !important; }
.mobile-nav__content .main-menu__list > li > a,
.mobile-nav__content .mobile-nav__contact li a,
.mobile-nav__content .mobile-nav__contact li i,
.mobile-nav__close { color: var(--wvd-ink) !important; }
.mobile-nav__content .main-menu__list > li > ul > li > a,
.mobile-nav__content .main-menu__list > li > ul > li > ul > li > a,
.mobile-nav__container .main-menu__list > li > ul > li > a,
.mobile-nav__container .main-menu__list > li > ul > li > ul > li > a { color: var(--wvd-muted) !important; }
/* the dropdown toggle arrow sits inside the <a>, so it inherits the same colour */
.mobile-nav__content .main-menu__list li > a > button,
.mobile-nav__container .main-menu__list li > a > button { color: inherit !important; }
.mobile-nav__content .main-menu__list > li { border-color: var(--wvd-border) !important; }

/* --- Hero ---------------------------------------------------------------- */
/* THE HERO IS LIGHT, AND THE TYPE IS DARK.
   ---------------------------------------------------------------------------
   The real scrim was never `:after`. `.main-slider__bg-box::before` was
   rgba(22,19,15, 0.9) - a 90% black sheet over the whole 1440x720 hero. An
   earlier pass only stripped `:after`, sampled "the bare photo" while that 0.9
   layer was still stacked on it, and concluded the photograph was simply dark.
   It is not. Bare, it is bright: p90 luminance 0.650.

   That reframes the problem. It is not a scrim VALUE, it is the text colour:

     dark scrim + white type -> needs 0.75 before the 18px copy passes. The hero
                                stays black. That is what was on the page.
     light scrim + dark type -> passes from 0.25. The hero goes light and the
                                photograph stays visible.

   Light mode means the second. 0.35 is used for headroom: the darkest patches
   under the copy (p10 0.039) then carry the ink at ~7.5:1, and the photo still
   reads at roughly two-thirds strength.

   Re-run `_wvd_hero_light.js` after any hero image swap - it evaluates both
   options against the worst-case patch for each. */
.main-slider__bg-box:before {
  /* DARK scrim + WHITE type.
     Measured: on the brightest patches behind the copy (p90 luminance 0.650)
     white needs about 0.75 before the 18px body copy clears 4.5:1. The 46px
     headline is large text and clears 3:1 far earlier.

     Weighted rather than flat, for the same reason the light version was: the
     copy sits in the left half, so the scrim is heavy there and fades off to
     keep the right-hand side of the photograph visible. A flat 0.75 across the
     whole hero is the near-black band this build started with. */
  background: linear-gradient(90deg,
    rgba(var(--wvd-navy-rgb), 0.78) 0%,
    rgba(var(--wvd-navy-rgb), 0.72) 42%,
    rgba(var(--wvd-navy-rgb), 0.38) 64%,
    rgba(var(--wvd-navy-rgb), 0.14) 100%) !important;
}

/* Below the two-column breakpoint the copy runs full width, so the horizontal
   fade would leave type on a bright, unscrimmed face. Even coverage instead. */
/* The breakpoint has to be 1199, not 991. The horizontal fade only works while
   the copy occupies the left half. Measured, copy right edge as a % of viewport:
       1440px -> 56%      1199px -> 63%      992px -> 66%      768px -> 86%
   By 1199 the copy already runs past where the gradient has fallen to ~0.36,
   which is why 992 measured 3.91:1 while 1440 measured 5.46:1. Below 1200 the
   form stacks and the copy is full width, so the scrim is even instead. */
@media (max-width: 1199px) {
  .main-slider__bg-box:before {
    background: rgba(var(--wvd-navy-rgb), 0.82) !important;
  }
}

.main-slider__bg-box:after {
  background: none !important;
}

/* Hero copy is WHITE, on the dark scrim above. */
/* Two things live inside .main-slider__content that are NOT hero copy and must
   keep their own colours: the white Google review pill, and the appointment form
   card. Both are light surfaces - flipping their text to white empties them. */
.main-slider__content :is(h1,h2,h3,p,span,strong,b,div):not(.thm-btn):not(.thm-btn *):not(.fas):not([class*="fa-"]):not(.main-slider__satisfied-customer--top):not(.main-slider__satisfied-customer--top *):not(.main-slider__img-box--form):not(.main-slider__img-box--form *),
.main-slider__title,
.main-slider__sub-title,
.main-slider__lead,
.main-slider__text,
.main-slider__tagline {
  color: #FFFFFF !important;
  text-shadow: none !important;
}
.main-slider__text { color: rgba(255, 255, 255, 0.92) !important; }
/* links use the light gold - 6.06:1 on the scrimmed ground, where the darker
   --wvd-gold-ink would be unreadable */
.main-slider__text a,
.main-slider__content p a {
  color: var(--wvd-gold-on-dark) !important;
  text-decoration-color: var(--wvd-gold-on-dark) !important;
}
.thm-btn.thm-btn--video,
.thm-btn.thm-btn--video * {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}

/* Text inside the flipped bands that was hardcoded white. Scoped to the flipped
   containers and excluding buttons, whose gold fill keeps white type. The
   off-canvas info sidebar is deliberately NOT in this list - it is still a dark
   panel and its white text is correct. */
.svc-cta :is(h2,h3,h4,p,li,strong,b,em,small,span,div,a):not(.thm-btn):not(.thm-btn *):not(.fas):not([class*="fa-"]),
.svc-process :is(h2,h3,h4,p,li,strong,b,em,small,span,div,a):not(.thm-btn):not(.thm-btn *):not(.fas):not([class*="fa-"]),
.svc-care__box :is(h2,h3,h4,p,li,strong,b,em,small,span,div,a):not(.thm-btn):not(.thm-btn *):not(.fas):not([class*="fa-"]),
.svc-findus__panel :is(h2,h3,h4,p,li,strong,b,em,small,span,div,a):not(.thm-btn):not(.thm-btn *):not(.fas):not([class*="fa-"]),
.page-header :is(h1,h2,h3,p,li,span,a):not(.thm-btn):not(.thm-btn *),
.counter-one :is(h2,h3,h4,p,li,strong,span,div,a):not(.thm-btn):not(.thm-btn *),
.counter-one__inner :is(h2,h3,h4,p,li,strong,span,div,a):not(.thm-btn):not(.thm-btn *),
.svc-pay-card--feature :is(h3,h4,p,li,strong,span,div):not(.thm-btn):not(.thm-btn *),
.team-two__content :is(h3,h4,p,span,a):not(.thm-btn):not(.thm-btn *) {
  color: var(--wvd-ink) !important;
}
/* secondary lines in those bands read better muted than solid black */
.svc-cta p,
.svc-process p,
.svc-care__box p,
.svc-findus__panel p,
.svc-findus__panel .svc-hours__time,
.counter-one p, .counter-one__text,
.counter-one__inner p,
.svc-stop__meta,
.svc-pay-card--feature .svc-pay-card__price span { color: var(--wvd-muted) !important; }

/* ============================================================================
   THEME COOL-TINT LAYER
   ----------------------------------------------------------------------------
   The MediPlace theme paints several large sections with pale-blue GRADIENTS,
   hardcoded in style.css rather than driven by --mediplace-*:

       #E9EFFD  #F5FDFC  #E8F4F8  #D0E8F2  #BDE8FC

   The palette tokens could never reach these, and neither could the blue scan -
   it read `background-color`, and a gradient lives in `background-image`. On the
   home page alone `.faq-one` is 3.27M px² and `.services-two` 2.18M px² of pale
   blue. This is the layer that kept the site reading cool.
   ========================================================================== */

.faq-one,
.eye-care-center__open-hours,
.shop-one__rating {
  background: linear-gradient(90deg, var(--wvd-tint) 0%, var(--wvd-tint-soft) 100%) !important;
}
.services-two {
  background: linear-gradient(270deg, var(--wvd-tint) 0%, var(--wvd-tint-soft) 100%) !important;
}
.services-two--instyle2,
.services-three,
.service-page-three {
  background: linear-gradient(180deg, var(--wvd-tint) 0%, var(--wvd-tint-soft) 100%) !important;
}
.cta-one {
  background: linear-gradient(90deg, var(--wvd-tint) 0%, var(--wvd-tint-soft) 100%) !important;
}
.pricing-two {
  background: linear-gradient(190deg, var(--wvd-tint) 0%, var(--wvd-tint-soft) 100%) !important;
}
.team-one,
.appointment-three__gradient-bg,
.quick-contact-one__single,
.quick-contact-one__location,
.main-contact-form__inner,
.google-map-one__inner,
.appointment-page__form {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--wvd-tint-soft) 50%, var(--wvd-tint) 100%) !important;
}
.about-three__content-box,
.newsletter-three { background-color: var(--wvd-tint-soft) !important; }
.main-menu__logo:before,
.faq-one__right--instyle2-call,
.services-one,
.appointment-three__form { background-color: var(--wvd-tint) !important; }
.doctor-visiting-timetable-box thead th,
.doctor-visiting-timetable-box tbody tr:nth-child(2),
.doctor-visiting-timetable-box tbody tr:nth-child(4),
.doctor-visiting-timetable-box tbody tr:nth-child(6) { background: var(--wvd-tint) !important; }

/* --- The two photo bands ------------------------------------------------- */
/* `.appointment-one` and `.team-two` are a photo laid over a solid box at low
   opacity. With the box black they were two more large dark bands - 966k and
   871k px². Light box + slightly stronger photo keeps the photograph readable
   and puts them in the same light family as everything else. */
.appointment-one__bg-box,
.team-two__bg-box { background-color: var(--wvd-tint) !important; }
.appointment-one__bg,
.team-two__bg { opacity: .16 !important; }

/* The eyebrow is excluded rather than fought on specificity: this rule is
   (0,5,1) and any short override loses to it regardless of source order. The
   tagline, its icon, its underline and the travelling dash are all gold, set
   further down. */
.appointment-one :is(h2,h3,h4,p,li,span,a,strong,div):not(.thm-btn):not(.thm-btn *):not(.fas):not([class*="fa-"]):not(.section-title__tagline):not(.section-title__tagline-box):not(.section-title__tagline-box *),
.appointment-one__text-box a,
.appointment-one__map-title,
.team-two :is(h2,h3,h4,p,li,span,a,strong):not(.thm-btn):not(.thm-btn *):not(.fas):not([class*="fa-"]):not(.section-title__tagline):not(.section-title__tagline-box):not(.section-title__tagline-box *) {
  color: var(--wvd-ink) !important;
}
.appointment-one p,
.team-two p { color: var(--wvd-muted) !important; }
.appointment-one .section-title__tagline,
.team-two .section-title__tagline { color: var(--wvd-gold-ink) !important; }
.appointment-one__text-box a { text-decoration-color: var(--wvd-blue) !important; }

/* The slide's fallback colour, seen only if the hero photograph fails to load.
   The hero type is white again, so this must be DARK - a light fallback would
   render an invisible hero. It tracks the type colour; do not flip one without
   the other. */
.main-slider .swiper-slide,
.main-slider__bg-box { background-color: var(--wvd-navy) !important; }



/* ============================================================================
   HERO APPOINTMENT FORM - translucent
   The card sat as solid white on the photograph. Letting the team show through
   keeps the hero feeling like one image rather than a panel bolted onto it.

   0.88 with a backdrop blur, not lower: the form's own labels and placeholder
   text are the lightest type on the card, and below ~0.85 they start reading
   against whatever face happens to sit behind them. The blur also stops busy
   photo detail from showing through the input boxes.
   `backdrop-filter` degrades gracefully - browsers without it simply get the
   0.88 white, which is still legible.
   ========================================================================== */
.wvd-form-card {
  background: rgba(255, 255, 255, 0.88) !important;
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  box-shadow: 0 24px 60px rgba(var(--wvd-ink-rgb), .22) !important;
}
/* inputs need to stay clearly readable against the translucent card */
.wvd-form-card input,
.wvd-form-card select,
.wvd-form-card textarea,
.wvd-form-card .wvd-seg__btn {
  background-color: rgba(255, 255, 255, 0.92) !important;
}


/* The Google reviews badge is a WHITE pill sitting on the hero, so its own text
   is ink regardless of what the surrounding hero copy does. The blanket
   hero-copy colour rule swallowed it when the type flipped to white and left an
   empty pill with just the G mark showing. */
.main-slider__satisfied-customer--top,
.main-slider__satisfied-customer--top *,
.main-slider__satisfied-customer--top .main-slider__satisfied-customer-count,
.main-slider__satisfied-customer--top .odometer,
.main-slider__satisfied-customer--top .main-slider__satisfied-customer-text {
  color: var(--wvd-ink) !important;
}

/* ============================================================================
   HERO GOLD WEDGES vs THE COPY
   `.main-slider__shape-1/2` are z-index 2. The scrim lives on
   `.main-slider__bg-box`, which is z-index 0 - so the scrim never darkens the
   wedges, and white type sitting on raw #C07D1D is only 3.39:1.

   Measured wedge span against the copy span:
       1440px   wedge 487->1098   copy 60->684    tail overlap only
        992px   wedge -57->651    copy 28->652    covers the WHOLE copy
        390px   wedge -538->148   copy 12->378    covers the first 40%

   That, not the scrim value, is why every width below 1200 measured ~4.0:1 no
   matter how far the scrim was raised. Below 1200 the wedges sit under the copy,
   so they are dimmed to where the type is safe on them.
   ========================================================================== */
@media (max-width: 1199px) {
  .main-slider__shape-1 { opacity: .16 !important; }
  .main-slider__shape-2 { opacity: .12 !important; }
}

/* ============================================================================
   MOBILE HERO  (<= 767px only - desktop and tablet are untouched)
   ----------------------------------------------------------------------------
   On a 390px viewport the photo was `cover` on a 2.37:1 source, which scales by
   HEIGHT and zooms into a single face - you got one man's head behind the whole
   copy. The fix is to stop cropping: at 390px wide the full 1400x590 photo is
   390 / 2.37 = 165px tall, so a band of about that height shows ALL EIGHT people
   with no horizontal crop at all.

   So on mobile the hero stops being an overlay:
     1. photo becomes a band at the top, whole team visible
     2. copy sits below it on cream, in ink - no scrim, nothing to tune
     3. the form is its own block underneath with a solid background
   ========================================================================== */
@media (max-width: 767px) {

  /* 1. the photo, cropped to a portrait ----------------------------------- */
  /* Absolute again, but only down as far as the form - NOT inset:0. Height is
     what picks the crop: `cover` on a 1400x590 source at 390 wide shows
     390 / (H/590) pixels of the original, so
        H=560  ->  411px of 1400  ->  Dr. Hardin plus one colleague each side
     Letting it run the full 1474px hero would show 156px, which is less than
     one person - that is the trap the old band layout was avoiding. */
  .main-slider .swiper-slide .main-slider__bg-box {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 520px !important;
    z-index: 0 !important;
    /* .main-slider__bg is sized for the desktop hero and runs past this box.
       Without clipping, the part below the scrim shows as a bright band across
       the copy exactly where the gradient has already gone to solid. */
    overflow: hidden !important;
  }
  /* 52% because Dr. Hardin is not quite centred in the source: his scrubs
     ("Jordan H") sit at roughly x=725 of 1400. */
  .main-slider__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: 52% center !important;
  }
  /* Scrim for the white copy, plus a fade into the solid colour underneath so
     the bottom of the photo is a gradient rather than a cut line. */
  .main-slider__bg-box:before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(var(--wvd-navy-rgb), .58) 0%,
      rgba(var(--wvd-navy-rgb), .62) 55%,
      rgba(var(--wvd-navy-rgb), .92) 86%,
      var(--wvd-navy) 100%
    ) !important;
    z-index: 1 !important;
  }
  .main-slider__bg-box:after { background: none !important; }
  /* the gold wedges are sized for a full-height desktop hero and land straight
     across the copy at this width */
  .main-slider__shape-1,
  .main-slider__shape-2 { display: none !important; }

  /* the slide carries the dark below the photo, so copy that runs past 560px
     still has something to sit on */
  .main-slider .swiper-slide { background-color: var(--wvd-navy) !important; }
  .main-slider__bg-box { background-color: var(--wvd-navy) !important; }

  /* 2. copy in white, over the photo -------------------------------------- */
  /* The copy sits ON the photo, same as desktop - it does not wait for the
     faces to end. That costs no extra hero height, and the scrim below is
     tuned to carry white type straight over the faces. */
  .main-slider__content {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 34px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
  }
  /* This has to repeat the desktop selector EXACTLY. That rule carries a long
     :is() plus eight :not() arguments, so its specificity is far higher than a
     plain `.main-slider__title` - a shorter selector loses no matter how much
     later it appears, media query or not. Media queries add no specificity.
     Identical selector + later in the file = this one wins. */
  .main-slider__content :is(h1,h2,h3,p,span,strong,b,div):not(.thm-btn):not(.thm-btn *):not(.fas):not([class*="fa-"]):not(.main-slider__satisfied-customer--top):not(.main-slider__satisfied-customer--top *):not(.main-slider__img-box--form):not(.main-slider__img-box--form *),
  .main-slider__title,
  .main-slider__sub-title,
  .main-slider__lead,
  .main-slider__tagline { color: #FFFFFF !important; }
  .main-slider__content .main-slider__text,
  .main-slider__content .main-slider__text--intro { color: rgba(255,255,255,.88) !important; }
  /* links have to lift off a dark ground - the dark gold used on cream is
     3.0:1 here, the on-dark gold is 6.06:1 (see the palette block) */
  .main-slider__text a,
  .main-slider__content p a {
    color: var(--wvd-gold-on-dark) !important;
    text-decoration-color: var(--wvd-gold-on-dark) !important;
  }
  .thm-btn.thm-btn--video,
  .thm-btn.thm-btn--video * {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,.55) !important;
  }

  /* 3. the form as its own solid block ------------------------------------ */
  .main-slider__img-box--form {
    margin-top: 26px;
  }
  .wvd-form-card {
    background: #FFFFFF !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 10px 34px rgba(var(--wvd-ink-rgb), .12) !important;
  }
  .wvd-form-card input,
  .wvd-form-card select,
  .wvd-form-card textarea,
  .wvd-form-card .wvd-seg__btn { background-color: #FFFFFF !important; }
}

/* ============================================================================
   ROUND-3 FEEDBACK (2026-08-03)
   ========================================================================== */

/* --- 1. "Watch our welcome video": only the play glyph changes on hover ----
   The play mark was vanishing on hover. Cause was mine: an !important rule kept
   the chip WHITE while a later `--video *` rule turned every descendant white
   too - white glyph on a white chip. The whole-button inversion (background to
   white, text to ink) is dropped as well; hover now does one thing. */
.thm-btn.thm-btn--video:hover {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}
.thm-btn.thm-btn--video:hover,
.thm-btn.thm-btn--video:hover * { color: #FFFFFF !important; }
/* chip fills gold so a white glyph has something to read against */
.thm-btn.thm-btn--video:hover .fas,
.thm-btn.thm-btn--video:hover [class*="fa-"] {
  background-color: var(--wvd-blue) !important;
}
.thm-btn.thm-btn--video:hover .fas::before,
.thm-btn.thm-btn--video:hover [class*="fa-"]::before { color: #FFFFFF !important; }
/* mobile: the hero is light there, so the label stays ink */
@media (max-width: 767px) {
  .thm-btn.thm-btn--video:hover,
  .thm-btn.thm-btn--video:hover * { color: var(--wvd-ink) !important; }
  .thm-btn.thm-btn--video:hover { border-color: var(--wvd-ink) !important; }
  .thm-btn.thm-btn--video:hover .fas::before,
  .thm-btn.thm-btn--video:hover [class*="fa-"]::before { color: #FFFFFF !important; }
}

/* --- 2. The offer band runs full width ------------------------------------ */
.wvd-home-offer .container { max-width: 100% !important; padding-left: 0; padding-right: 0; }
.wvd-home-offer .svc-offer-wrap--grid { max-width: none; padding: 0 40px; }
.wvd-home-offer .svc-offer-wrap--grid > .svc-coupon { width: 100%; }
@media (max-width: 767px) {
  .wvd-home-offer .svc-offer-wrap--grid { padding: 0 16px; }
}

/* --- 3. Header arrow animation on the remaining CTAs ----------------------
   Same recipe as the header button: the pill clips, and on hover the arrow
   glyph runs out to the right and returns from the left.
   Reuses @keyframes wp-arrow-wrap from block 7h. */
.about-two .thm-btn,
.services-two .thm-btn,
.appointment-one .thm-btn { overflow: hidden; }
.about-two .thm-btn .fas::before,
.about-two .thm-btn [class*="fa-"]::before,
.services-two .thm-btn .fas::before,
.services-two .thm-btn [class*="fa-"]::before,
.appointment-one .thm-btn .fas::before,
.appointment-one .thm-btn [class*="fa-"]::before {
  display: inline-block;
  position: relative;
}
.about-two .thm-btn:hover .fas::before,
.about-two .thm-btn:hover [class*="fa-"]::before,
.services-two .thm-btn:hover .fas::before,
.services-two .thm-btn:hover [class*="fa-"]::before,
.appointment-one .thm-btn:hover .fas::before,
.appointment-one .thm-btn:hover [class*="fa-"]::before {
  animation: wp-arrow-wrap .5s ease forwards;
}

/* --- 4 + 5. The moving eyebrow rule is GOLD, not white --------------------
   The theme hardcodes white here for `.team-two`, `.appointment-one` and
   `.discount-one__top-title-box` because those sections used to be dark bands.
   They are light now, so the tagline, its underline and the animated dash that
   travels along it (`l-r-zump`) all read as gold. */
.team-two .section-title__tagline-box span,
.appointment-one .section-title__tagline-box span,
.discount-one__top-title-box .section-title__tagline-box span {
  color: var(--wvd-blue) !important;
}
.team-two .section-title__tagline-box:before,
.appointment-one .section-title__tagline-box:before,
.discount-one__top-title-box .section-title__tagline-box:before {
  background: var(--wvd-blue) !important;
}
.team-two .section-title__tagline-box::after,
.appointment-one .section-title__tagline-box::after,
.discount-one__top-title-box .section-title__tagline-box::after {
  background-color: var(--wvd-blue) !important;
}

/* The two sections whose bands were flipped from dark to light kept ink
   eyebrows, because the broad "everything in this section is ink" rule caught
   them. Every other section renders the eyebrow gold-ink with a gold icon -
   these two now match. */
.team-two .section-title__tagline,
.appointment-one .section-title__tagline {
  color: var(--wvd-gold-ink) !important;
}
.team-two .section-title__tagline-box span,
.team-two .section-title__tagline-box span *,
.appointment-one .section-title__tagline-box span,
.appointment-one .section-title__tagline-box span * {
  color: var(--wvd-blue) !important;
}

/* ============================================================================
   1. HOME OFFER AS A REAL BANNER
   Stretching the coupon to full width just made a very wide card with a small
   block of centred text floating in it. Laid out as a banner instead: the
   amount anchors the left, the copy sits beside it, the CTA sits at the right,
   all on one line.

   The children are fixed in DOM order (tag, amount, title, note, button), so
   they are placed explicitly on a grid rather than reordered in markup.
   ========================================================================== */
.wvd-home-offer .svc-coupon {
  flex-direction: row;
  align-items: stretch;
  max-width: 1344px;
  margin: 0 auto;
}
.wvd-home-offer .svc-coupon__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 40px;
  row-gap: 6px;
  text-align: left;
  padding: 38px 44px;
  width: 100%;
}
.wvd-home-offer .svc-coupon__amount {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  font-size: 76px !important;
  line-height: 1;
  margin: 0;
}
.wvd-home-offer .svc-coupon__tag   { grid-column: 2; grid-row: 1; justify-self: start; margin: 0 0 4px; }
.wvd-home-offer .svc-coupon__title { grid-column: 2; grid-row: 2; margin: 0; }
.wvd-home-offer .svc-coupon__note  {
  grid-column: 2; grid-row: 3;
  margin: 6px 0 0 !important;
  max-width: 60ch !important;
  text-align: left;
}
.wvd-home-offer .svc-coupon .thm-btn {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  white-space: nowrap;
}
/* the vertical tab stays as the brand accent, just narrower on a wide band */
.wvd-home-offer .svc-coupon__side { flex-basis: 148px; }

@media (max-width: 991px) {
  /* back to the stacked coupon - a three-column banner has nowhere to go.
     The base component already stacks below 767 via column-reverse; the banner
     rule above forced `row` at every width and overrode it, which left the gold
     tab eating 40% of a phone screen and pushed the CTA outside the card. */
  .wvd-home-offer .svc-coupon {
    flex-direction: column-reverse;
    max-width: 460px;
  }
  .wvd-home-offer .svc-coupon__side {
    flex-basis: auto;
    flex-direction: row;
    padding: 16px;
    gap: 12px;
  }
  .wvd-home-offer .svc-coupon__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    text-align: center;
    padding: 32px 26px;
    row-gap: 10px;
  }
  .wvd-home-offer .svc-coupon__amount,
  .wvd-home-offer .svc-coupon__tag,
  .wvd-home-offer .svc-coupon__title,
  .wvd-home-offer .svc-coupon__note,
  .wvd-home-offer .svc-coupon .thm-btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }
  .wvd-home-offer .svc-coupon__amount { font-size: 60px !important; }
  .wvd-home-offer .svc-coupon__note { text-align: center; margin: 0 auto !important; }
}

/* ============================================================================
   2. EVERY CTA GETS THE SAME HOVER
   The arrow slide was only on the header and three sections. Applied to all
   .thm-btn buttons so the interaction is identical everywhere.
   `--video` is excluded deliberately: its icon is a play mark, not an arrow,
   and its hover is a colour change only.
   ========================================================================== */
.thm-btn:not(.thm-btn--video) { overflow: hidden; }
.thm-btn:not(.thm-btn--video) .fas::before,
.thm-btn:not(.thm-btn--video) [class*="fa-"]::before {
  display: inline-block;
  position: relative;
}
.thm-btn:not(.thm-btn--video):hover .fas::before,
.thm-btn:not(.thm-btn--video):hover [class*="fa-"]::before {
  animation: wp-arrow-wrap .5s ease forwards;
}

/* ============================================================================
   HOME OFFER: CREAM BAND, EDGE TO EDGE
   The band IS the section - no cream gutter around it, no card inset, no
   radius. The coupon's own chrome (white card, shadow, rounded corners) is
   unwound so nothing reads as a box sitting inside a container.

   Background is #F7F5F0. On a light band the type goes back to dark, and the
   gold does the work it does everywhere else on the site: the title, the CTA
   fill and the side tab.
   ========================================================================== */
.wvd-home-offer {
  padding: 0 !important;
  background: transparent !important;
}
.wvd-home-offer .container { max-width: 100% !important; padding: 0 !important; }
.wvd-home-offer .svc-offer-wrap,
.wvd-home-offer .svc-offer-wrap--grid {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
.wvd-home-offer .svc-coupon {
  max-width: none !important;
  margin: 0 !important;
  background: #F7F5F0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
/* LEFT PADDING TRACKS THE HERO, RIGHT STAYS PUT.
   The band is edge-to-edge, so a fixed left padding only lines up with the hero
   copy at one viewport width. It was 56px, which happens to sit 4px off the
   hero at 1440 and 244px off at 1920 - the "$1,000" drifted away from the
   headline above it as the window grew.

   The hero copy sits inside a Bootstrap .container: half the leftover space,
   plus the container's own 12px gutter. Reproducing that here keeps the two
   aligned at every width instead of one. Container widths are Bootstrap's, and
   the measured hero-title offsets they produce are in the comments.

   The RIGHT side is deliberately left alone - the gold tab runs to the edge. */
.wvd-home-offer .svc-coupon__body {
  padding: 40px 56px !important;
  background: transparent !important;
}
/* Only from 992 up. Below that the band is a deliberately CENTRED single
   column (see the max-width:991 block above), so there is no left-aligned
   copy to line the hero up with - forcing a left inset there would just pull
   the centred content off its own axis. */
@media (min-width: 992px)  { .wvd-home-offer .svc-coupon__body { padding-left: calc((100% - 960px)  / 2 + 12px) !important; } }  /* hero title 44 @1024 */
@media (min-width: 1200px) { .wvd-home-offer .svc-coupon__body { padding-left: calc((100% - 1140px) / 2 + 12px) !important; } }  /* hero title 82 @1280 */
@media (min-width: 1400px) { .wvd-home-offer .svc-coupon__body { padding-left: calc((100% - 1344px) / 2 + 12px) !important; } }  /* hero title 60 @1440, 300 @1920 */

/* type on the cream band */
.wvd-home-offer .svc-coupon__amount { color: var(--wvd-ink) !important; }
.wvd-home-offer .svc-coupon__title,
.wvd-home-offer .svc-coupon__date { color: var(--wvd-blue) !important; }
.wvd-home-offer .svc-coupon__note { color: var(--wvd-muted) !important; }

/* eyebrow: pale gold chip, gold-ink label - 13px, so it needs the darker gold */
.wvd-home-offer .svc-coupon__tag {
  background: rgba(var(--wvd-blue-rgb), 0.12) !important;
  color: var(--wvd-gold-ink) !important;
}
.wvd-home-offer .svc-coupon__tag iconify-icon { color: var(--wvd-gold-ink) !important; }

/* CTA is the standard gold pill with a white chip, same as everywhere else */
.wvd-home-offer .svc-coupon .thm-btn { background-color: var(--wvd-blue) !important; }
.wvd-home-offer .svc-coupon .thm-btn,
.wvd-home-offer .svc-coupon .thm-btn * { color: #FFFFFF !important; }
.wvd-home-offer .svc-coupon .thm-btn .fas,
.wvd-home-offer .svc-coupon .thm-btn [class*="fa-"] {
  background-color: #FFFFFF !important;
}
.wvd-home-offer .svc-coupon .thm-btn .fas::before,
.wvd-home-offer .svc-coupon .thm-btn [class*="fa-"]::before { color: var(--wvd-blue) !important; }

/* side tab stays gold - it is the one block of colour on the band */
.wvd-home-offer .svc-coupon__side {
  background: var(--wvd-blue) !important;
  flex-basis: 168px;
}
.wvd-home-offer .svc-coupon__side,
.wvd-home-offer .svc-coupon__side iconify-icon,
.wvd-home-offer .svc-coupon__side-label { color: #FFFFFF !important; }
.wvd-home-offer .svc-coupon__side::before { border-left-color: rgba(255, 255, 255, 0.5) !important; }

@media (max-width: 991px) {
  .wvd-home-offer .svc-coupon { max-width: none !important; }
  .wvd-home-offer .svc-coupon__body { padding: 32px 22px !important; }
  /* stacked, the side tab became a ~340px slab holding one icon. The title
     already reads "Off Clear Aligners", so it carries no information here. */
  .wvd-home-offer .svc-coupon__side { display: none !important; }
}

/* ============================================================================
   ABOUT US: stats band stops overlapping the photo above it
   `.about-page-counter` carried margin-top:-80px, which deliberately pulled the
   band up over the image. It reads as a collision rather than an overlap, so it
   sits below now.
   ========================================================================== */
.counter-one.about-page-counter {
  margin-top: 0 !important;
}

/* ============================================================================
   COMMUNITY INVOLVEMENT: "Where We Give Back"
   The list was capped at 900px and centred inside a 1344 container while the
   section heading sat at the container's left edge - so the heading started at
   x=60 and the cards at x=270. Aligned to the same measure as everything else,
   and the icon chips go gold instead of black.
   ========================================================================== */
ul.svc-community {
  max-width: none !important;
  margin: 0 !important;
}
ul.svc-community .svc-community__icon {
  background: var(--wvd-blue) !important;
  color: #FFFFFF !important;
}
ul.svc-community .svc-community__icon iconify-icon { color: #FFFFFF !important; }
ul.svc-community .svc-community__item {
  border-color: var(--wvd-border) !important;
}

/* ============================================================================
   FAQs + SPECIAL OFFERS: centred, image-free hero
   Both pages were running the two-column service-page hero with
   `whitening-1.webp` in the right slot - a teeth-whitening photo illustrating
   neither FAQs nor offers. The copy centres on the full measure instead, so the
   hero leads with the headline.

   The media column itself is GONE from post_content as of 2026-08-03
   (_drop-hidden-hero-media.php) - hiding it in CSS still made the browser fetch
   the image on every load. The display:none below is kept only so the layout
   holds if the column is ever pasted back in from an old payload; the rules
   that actually do the work now are the col-lg-7 and centring ones under it.
   /teeth-whitening/ uses the same photo as its real hero and is untouched.
   ========================================================================== */
.svc-hero--faqs .svc-hero__media,
.svc-hero--offers .svc-hero__media,
.svc-hero--faqs .col-lg-5,
.svc-hero--offers .col-lg-5 { display: none !important; }

.svc-hero--faqs .col-lg-7,
.svc-hero--offers .col-lg-7 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.svc-hero--faqs .svc-hero__content,
.svc-hero--offers .svc-hero__content {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
/* the breadcrumb, eyebrow rule and CTA row all have to follow the centring */
.svc-hero--faqs .svc-hero__crumb,
.svc-hero--offers .svc-hero__crumb { justify-content: center; }
.svc-hero--faqs .svc-hero__btn,
.svc-hero--offers .svc-hero__btn {
  justify-content: center;
  flex-wrap: wrap;
}
.svc-hero--faqs .svc-hero__title,
.svc-hero--offers .svc-hero__title,
.svc-hero--faqs .svc-hero__text,
.svc-hero--offers .svc-hero__text {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.svc-hero--faqs .svc-hero__meta,
.svc-hero--offers .svc-hero__meta { justify-content: center; }

/* ============================================================================
   /special-offers/ - symmetrical offers grid
   The grid was locked to two 466px columns inside a 960px measure, so three
   offers rendered as 2 + 1: two cards 548px tall on the first row and a third,
   461px tall, floating centred underneath.

   `auto-fit` with a sensible minimum instead: three offers now sit in one row
   at equal width AND equal height. The count is editable in wp-admin, so this
   has to survive any number - four offers fall to 3 + 1 and the trailing-odd
   rule still centres the last card rather than stranding it left.
   ========================================================================== */
.svc-offers .svc-offer-wrap--grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  max-width: 1344px;
  align-items: stretch;
}
/* equal height regardless of how much copy each offer carries */
.svc-offers .svc-offer-wrap--grid > .svc-coupon { height: 100%; }
.svc-offers .svc-offer-wrap--grid > .svc-coupon .svc-coupon__body {
  display: flex;
  flex-direction: column;
}
/* push the CTA to the bottom so the buttons line up across the row */
.svc-offers .svc-offer-wrap--grid > .svc-coupon .thm-btn { margin-top: auto; }
/* narrower tab at three-up */
.svc-offers .svc-coupon__side { flex-basis: 124px; }

@media (max-width: 1199px) {
  .svc-offers .svc-offer-wrap--grid { max-width: 960px; }
}
@media (max-width: 767px) {
  .svc-offers .svc-offer-wrap--grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
  }
  .svc-offers .svc-coupon__side { flex-basis: auto; }
}

/* The generic "centre a lone trailing card" rule was still forcing the third
   offer onto its own row at 466px. It exists for 1- and 5-offer cases; with an
   auto-fit row of three it is the thing breaking the symmetry, so it is undone
   here and only reinstated below the three-up breakpoint. */
.svc-offers .svc-offer-wrap--grid > .svc-coupon:last-child:nth-child(odd) {
  grid-column: auto;
  max-width: none;
  justify-self: stretch;
}

/* Below the three-up width the row falls to 2 + 1, so the lone trailing card
   gets its centring back - stretched, it hangs against the left edge with a
   card-sized hole beside it, which is exactly the look being fixed. */
@media (max-width: 1199px) and (min-width: 768px) {
  .svc-offers .svc-offer-wrap--grid > .svc-coupon:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 466px;
    justify-self: center;
  }
}

/* ============================================================================
   WHITE BUTTONS LEFT OVER FROM THE DARK BANDS
   `.svc-findus` and `.svc-pay` used to be dark sections, so their CTAs were
   white pills with ink labels. Both bands are light now, which left a white
   button on a near-white ground - measured bg #FFFFFF on #F7F4EF.
   They take the standard header treatment: gold pill, white label, white chip
   with a gold arrow.
   ========================================================================== */
.svc-findus .thm-btn,
.svc-pay .thm-btn,
.svc-pay-card .thm-btn,
.svc-findus__panel .thm-btn {
  background-color: var(--wvd-blue) !important;
  border-color: var(--wvd-blue) !important;
}
.svc-findus .thm-btn,
.svc-findus .thm-btn *,
.svc-pay .thm-btn,
.svc-pay .thm-btn *,
.svc-pay-card .thm-btn,
.svc-pay-card .thm-btn *,
.svc-findus__panel .thm-btn,
.svc-findus__panel .thm-btn * { color: #FFFFFF !important; }

.svc-findus .thm-btn .fas,
.svc-findus .thm-btn [class*="fa-"],
.svc-pay .thm-btn .fas,
.svc-pay .thm-btn [class*="fa-"],
.svc-pay-card .thm-btn .fas,
.svc-pay-card .thm-btn [class*="fa-"] {
  background-color: #FFFFFF !important;
}
.svc-findus .thm-btn .fas::before,
.svc-findus .thm-btn [class*="fa-"]::before,
.svc-pay .thm-btn .fas::before,
.svc-pay .thm-btn [class*="fa-"]::before,
.svc-pay-card .thm-btn .fas::before,
.svc-pay-card .thm-btn [class*="fa-"]::before { color: var(--wvd-blue) !important; }

/* ============================================================================
   /request-an-appointment/ - form lives in the hero now
   The form card moved out of its own full-width section into the hero's right
   column. Two consequences handled here.
   ========================================================================== */
/* the card was styled for a 430px hero slot; this column is 560px */
.svc-hero--request .svc-hero__form-slot .wvd-form-card { width: 100%; }
.svc-hero--request .row { align-items: center; }

/* "Jump to Form" scrolled to a section that is now the hero itself, so the
   button pointed at the thing already on screen. */
.svc-hero--request .svc-hero__btn a[href="#request"]:not(.thm-btn) { display: none; }

/* ============================================================================
   CREDENTIALS BAND  +  FEATURED SERVICES CAROUSEL   (2026-08-04)
   ----------------------------------------------------------------------------
   The last two structural things comaldental.com does that this build did not.
   Reference screenshots: Puppeteer/comal/sec-01.png (their circular badges),
   sec-05.png (carousel), captured by Puppeteer/_comal_recon.js.

   Both are CONVERSIONS, not additions. Nothing new is claimed and no copy is
   written: the band holds the four points that already sat in a 2x2 icon list
   inside .about-two, and the carousel holds the same four service cards that
   were a stack of four full-width rows. That matters twice over - the client's
   no-invented-claims rule, and page length, which is the open complaint the
   client has not seen a fix for yet. The stack was 1,511px for four items.
   ========================================================================== */

/* ---- 1. The credentials band ---------------------------------------------
   WHAT THIS REPLACED, AND WHY IT DID NOT WORK.

   The first pass copied Comal literally: four big concentric circles, hairline
   ring outside a filled dark disc, label centred inside. It was rejected on
   sight and it deserved to be. Comal's circles hold about eight words each, so
   the type fills the disc. Ours hold three to five, so each disc was a ~280px
   black void with a small label floating in the middle, the ring was a grey
   circle with no job, and the 32px icon read as a speck. Four equal black blobs
   in a row, 387px tall, on a page whose open complaint is that it is too long.

   The lesson is the shape was never the point - the content that fills it was.
   So: same four claims, same icons, same order, but as ONE dark band with four
   hairline-separated columns. It is 170px instead of 387px, it gives a page
   that is cream from top to bottom a piece of real contrast, and there is no
   empty space left to explain.

   It is its OWN section, not a child of .about-two. A full-bleed band inside
   that container would need the 100vw margin trick, which needs a clipping
   ancestor, and .about-two cannot clip: its award plaque deliberately hangs off
   the left edge of the container. A section spans the document width with no
   vw math and no scrollbar overshoot. */
.wvd-credbar {
  background: var(--wvd-navy);
}
.wvd-credbar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 46px 0;
}
/* Size and colour the ICON on the item. Every <iconify-icon> on this site
   carries an inline `style="font-size:inherit;color:inherit"`, and inline beats
   any rule aimed at the icon itself - setting font-size on the icon renders it
   at the inherited body size. The label sets its own size and colour back. */
.wvd-credbar__item {
  padding: 2px 34px;
  border-left: 1px solid rgba(255, 255, 255, .13);
  font-size: 30px;
  color: var(--wvd-gold-on-dark);   /* 6.06:1 on the near-black */
}
.wvd-credbar__item:first-child { border-left: 0; padding-left: 0; }
.wvd-credbar__item:last-child { padding-right: 0; }
.wvd-credbar__item iconify-icon { display: block; margin-bottom: 16px; }
.wvd-credbar__label {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.42;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #ffffff;                   /* 18.5:1 on --wvd-navy */
}

@media (max-width: 991px) and (min-width: 768px) {
  .wvd-credbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .wvd-credbar__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .wvd-credbar__item:nth-child(even) { padding-right: 0; }
}
/* On a phone four columns of five-line labels is worse than four rows. The
   divider turns horizontal and the icon moves beside the label, so each claim
   is one glance instead of a paragraph. */
@media (max-width: 767px) {
  .wvd-credbar__grid { grid-template-columns: minmax(0, 1fr); padding: 30px 0; }
  .wvd-credbar__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
    font-size: 26px;
  }
  .wvd-credbar__item:first-child { border-top: 0; padding-top: 0; }
  .wvd-credbar__item:last-child { padding-bottom: 0; }
  .wvd-credbar__item iconify-icon { margin-bottom: 0; flex: 0 0 auto; }
  .wvd-credbar__label { font-size: 14px; }
}

/* ---- 2. The carousel -----------------------------------------------------
   Swiper 5.4.5, which this page already loads (swiper.min.js is in the theme's
   script set and nothing on the home page was using it). No new library.

   THE VIEWPORT IS FULL-BLEED ON PURPOSE. The peek - cards continuing past the
   right edge of the text column - is the whole point of the pattern: it is what
   tells you there is more without a label saying so. A viewport clipped to the
   container cannot do it.

   100vw includes the scrollbar, so the bleed runs ~7px past the content box on
   each side. .services-two clips it, so that costs nothing and no horizontal
   page scrollbar appears. Do not "fix" it with 100% - that removes the bleed. */
.services-two { overflow: hidden; }

.wvd-carousel__viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 8px 0 10px;          /* room for the card lift-on-hover shadow */
  /* Fallback while Swiper has not initialised (or if script.js throws before
     our init runs): a plain snap-scroller. The section stays usable either way,
     and Swiper turns this off by adding its own class. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.wvd-carousel__viewport.swiper-container-initialized {
  overflow-x: hidden;
  scroll-snap-type: none;
}
.wvd-carousel__viewport .swiper-wrapper { align-items: stretch; }

.wvd-card {
  width: min(380px, 82vw);
  height: auto;                 /* swiper-slide defaults would collapse this */
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 32px 30px;
  background: #ffffff;
  border: 1px solid var(--wvd-border);
  border-radius: 24px;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .35s ease;
}
.wvd-card:not(:last-child) { margin-right: 24px; }   /* fallback gap; Swiper sets its own */
.wvd-card:hover {
  transform: translateY(-6px);
  border-color: var(--wvd-blue);
  box-shadow: 0 22px 48px rgba(var(--wvd-navy-rgb), .14);
}
/* Bottom-right, not top-right. The titles are two lines on every card at every
   width, so a top-right watermark sits directly behind the second line and
   reads as a collision. Down here it shares a row with "Learn More", which is
   left-aligned, so nothing overlaps at any card width. */
.wvd-card__num {
  position: absolute;
  bottom: 14px;
  right: 26px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: rgba(var(--wvd-navy-rgb), .07);
  transition: color .35s ease;
  pointer-events: none;
}
.wvd-card:hover .wvd-card__num { color: rgba(var(--wvd-blue-rgb), .22); }
.wvd-card h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.wvd-card h3 a { color: var(--wvd-ink); transition: color .35s ease; }
.wvd-card:hover h3 a { color: var(--wvd-blue); }
.wvd-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--wvd-muted);
}
.wvd-card__more {
  margin-top: auto;             /* pins the link to the bottom on every card */
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--wvd-gold-ink);   /* 5.13:1 on white; --wvd-gold would be 3.4 */
  transition: gap .3s ease, color .3s ease;
}
.wvd-card__more:hover { gap: 15px; color: var(--wvd-gold-ink); }
.wvd-card__more iconify-icon { font-size: 17px; }

/* ---- the arrows + dots, under the section's existing CTA ----------------- */
.wvd-carousel__nav {
  display: none;                /* shown only once Swiper is driving it */
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 6px;
  border: 1px solid var(--wvd-line);
  border-radius: 999px;
}
.wvd-carousel__nav.is-ready { display: inline-flex; }
.wvd-carousel__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wvd-ink);
  font-size: 18px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, opacity .3s ease;
}
.wvd-carousel__arrow:hover { background: var(--wvd-navy); color: #ffffff; }
.wvd-carousel__arrow.swiper-button-disabled { opacity: .3; cursor: default; }
.wvd-carousel__arrow.swiper-button-disabled:hover { background: transparent; color: var(--wvd-ink); }
/* Swiper 5 paints its own bullets; these are ours. */
.wvd-carousel__dots { display: flex; align-items: center; gap: 8px; }
.wvd-carousel__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  opacity: 1;
  background: var(--wvd-line);
  transition: width .35s ease, background .35s ease;
}
.wvd-carousel__dots .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 999px;
  background: var(--wvd-blue);
}

/* The section header is a two-column row: title left, CTA + nav right. On a
   phone the theme already stacks it, and the nav goes with the button. */
.services-two__top-btn-box { display: flex; flex-direction: column; align-items: flex-end; }

@media (max-width: 1199px) {
  .wvd-card { width: min(330px, 84vw); padding: 30px 28px 26px; }
  .wvd-card h3 { font-size: 23px; }
}
@media (max-width: 767px) {
  .wvd-card { width: 78vw; }
  .wvd-card__num { font-size: 52px; bottom: 12px; right: 20px; }
  .services-two__top-btn-box { align-items: flex-start; }
}

/* ============================================================================
   FONT AWESOME: the nav chevrons that "intermittently render as a box"
   ----------------------------------------------------------------------------
   THE OLD DIAGNOSIS WAS WRONG and is worth correcting, because it sent the last
   two people looking in the wrong place. It was written down as "the theme asks
   for Font Awesome 5 Pro and ships Free". It does not: `fa-regular-400.woff2` in
   the theme is 145 KB, and Free Regular is about 13 KB with 151 icons. All three
   weights are present and all three return 200. Measured in the browser once
   fonts have settled, `document.fonts.check('400 14px "Font Awesome 5 Pro"')` is
   true and the 400 face reports `loaded`.

   What is actually happening is a COLD-CACHE RACE. At domcontentloaded on a
   fresh cache that same check is false, and none of the theme's @font-face
   blocks set `font-display`, so the default applies. The dropdown arrow is a
   CSS `content: "\f107"` on `li.dropdown > a:after` at weight 400, i.e. it is
   painted before its font can possibly be there.

   Re-declaring the three faces we use with `font-display: block` fixes the
   symptom without touching vendor CSS: the glyph stays INVISIBLE until the font
   arrives instead of falling back to a system font that has no \f107 and draws
   the tofu box. `block` rather than `swap` on purpose - for an icon font a
   fallback glyph is never the right answer, and the block period is short.

   Same family, weight and style as the theme's own declarations, declared later,
   so these win. Paths are relative to this file (assets/css -> assets/fonts). */
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-regular-400.woff2") format("woff2"),
       url("../fonts/fa-regular-400.woff") format("woff");
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/fa-solid-900.woff2") format("woff2"),
       url("../fonts/fa-solid-900.woff") format("woff");
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../fonts/fa-light-300.woff2") format("woff2"),
       url("../fonts/fa-light-300.woff") format("woff");
}

/* The service-hub category chip is 11px, which is the ONLY thing keeping
   /our-services/ and /restorative-dentistry/ on _wvd_mobile_qa.js's list. The
   check's floor is 12px and it is a reasonable floor: this is uppercase text at
   .14em tracking on a phone. Desktop keeps 11px, where the chip sits in a
   roomier card and reads fine. */
@media (max-width: 767px) {
  .svc-hub-card__cat { font-size: 12px; }
}

/* ─── Contact Form 7 wiring (2026-08-06) ──────────────────────────────────────
   The appointment form is rendered by Contact Form 7 now. CF7 wraps every
   control in markup the hand-written form did not have, so rather than restyle
   the card from scratch, the wrappers are made layout-transparent and the
   original .wvd-* rules above keep applying unchanged. */

.wvd-form-card .wpcf7 { margin: 0; }
.wvd-field > .wpcf7-form-control-wrap { display: block; }

/* AM/PM segmented control. CF7 nests each radio as
   .wpcf7-form-control-wrap > .wpcf7-radio > .wpcf7-list-item > label > input,
   so display:contents lets the original flex row and the original label styles
   see straight through to the <label>. The input now sits INSIDE the label
   instead of beside it, which is why the checked/disabled states are matched
   with :has() rather than the sibling selectors used above. */
.wvd-timeseg .wpcf7-form-control-wrap,
.wvd-timeseg .wpcf7-radio,
.wvd-timeseg .wpcf7-list-item { display: contents; }
.wvd-timeseg .wpcf7-list-item-label { pointer-events: none; }

.wvd-timeseg label:has(input:checked) {
  border-color: var(--wvd-blue);
  background: var(--wvd-blue);
  color: #fff;
}
.wvd-timeseg label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(var(--wvd-blue-rgb), .18);
}
/* PM gets disabled when Saturday is picked (Sat = AM only). JS toggles this. */
.wvd-timeseg label:has(input:disabled) {
  opacity: .4;
  cursor: not-allowed;
  background: var(--wvd-wash-5);
}

/* The card prints its own .wvd-field__err line per field, driven by the
   .is-invalid class westpark-cf7.js mirrors off CF7's .wpcf7-not-valid. CF7's
   own tip would be a second error message in a different style, so it is
   hidden. The red input state is kept, keyed off CF7's class. */
.wvd-form-body .wpcf7-not-valid-tip { display: none; }
.wvd-form-body .wpcf7-spinner { display: none; }
.wvd-field input.wpcf7-not-valid,
.wvd-field select.wpcf7-not-valid { border-color: #d64545; background: #fff5f5; }

/* CF7's response box reuses the .wvd-form-msg look. CF7 puts the submission
   status on the form as a class, so no JS is needed for this part. */
.wvd-form-body .wpcf7-response-output {
  display: none;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.4;
}
.wvd-form-body.invalid .wpcf7-response-output,
.wvd-form-body.unaccepted .wpcf7-response-output,
.wvd-form-body.spam .wpcf7-response-output,
.wvd-form-body.aborted .wpcf7-response-output,
.wvd-form-body.failed .wpcf7-response-output {
  display: block;
  background: #fdeaea;
  color: #b13030;
  border-color: #f2c4c4;
}
.wvd-form-body.sent .wpcf7-response-output {
  display: block;
  background: #e8f6ee;
  color: #1c7a44;
  border-color: #b7e3c8;
}

/* CF7 prints a visually hidden live region before the form. Keep it out of the
   card's flow so the first field still sits directly under the title. */
.wvd-form-card .screen-reader-response { position: absolute; left: -9999px; }

/* ─── Financing banner (2026-08-06) ───────────────────────────────────────────
   Slim strip above the footer on the home page, pointing at the #financing
   section on /for-patients/. Gold fill with white text is the palette's own
   sanctioned pairing (--wvd-on-gold), so it reads as a deliberate accent next
   to the near-black sections rather than a third colour. */

.wvd-fin-banner { padding: 0 0 70px; }

.wvd-fin-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  border-radius: 16px;
  background: var(--wvd-blue);          /* the brand gold, see palette note */
  color: var(--wvd-on-gold);
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(var(--wvd-navy-rgb), .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wvd-fin-banner__inner:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(var(--wvd-navy-rgb), .26);
  color: var(--wvd-on-gold);
}

.wvd-fin-banner__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wvd-fin-banner__icon iconify-icon { font-size: 24px; color: #fff; }

.wvd-fin-banner__text { flex: 1 1 auto; display: block; }
.wvd-fin-banner__text strong {
  display: block;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 3px;
}
.wvd-fin-banner__text span {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  opacity: .92;
}

.wvd-fin-banner__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--wvd-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.wvd-fin-banner__cta iconify-icon { font-size: 16px; transition: transform .18s ease; }
.wvd-fin-banner__inner:hover .wvd-fin-banner__cta iconify-icon { transform: translateX(3px); }

@media (max-width: 767px) {
  .wvd-fin-banner { padding-bottom: 46px; }
  .wvd-fin-banner__inner {
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px;
  }
  .wvd-fin-banner__text { flex: 1 1 100%; order: 2; }
  .wvd-fin-banner__cta { order: 3; width: 100%; justify-content: center; }
}

/* ─── Family dentistry page (2026-08-06) ──────────────────────────────────────
   Three small additions the existing service-page components did not cover. */

/* Trust bar with FOUR reasons. The base .svc-whybar__list is a hard 3-up grid,
   so a fourth card lands alone on a second row. Two across keeps it balanced and
   leaves each card room for a full sentence, which four across does not. */
.svc-whybar__list--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 991px) {
  .svc-whybar__list--4 { grid-template-columns: 1fr; }
}

/* Q&A prose cards. The card's own rule only styles a direct <h2>; these headings
   are questions sitting under a section <h2>, so they are <h3> and need the same
   centred treatment at the smaller size. */
.svc-prose-card > h3 {
  text-align: center;
  margin: 0 0 18px;
}

/* The closing "Schedule your family's next appointment" head sits above a
   two-column map/panel grid. Left-aligned at 760px it leaves the right half of
   the row empty, so it is centred the same way the FAQ head above it is. */
.svc-findus .svc-section-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.svc-findus .svc-section-head p { margin-left: auto; margin-right: auto; }

/* ─── Cosmetic dentistry revamp (2026-08-06) ──────────────────────────────── */

/* Trust bar with FIVE reasons. The base grid is a hard 3-up, which drops the
   last two hard against the left edge. Six tracks with two-track items puts
   three on the first row and centres the remaining two under them. */
.svc-whybar__list--5 { grid-template-columns: repeat(6, 1fr); }
.svc-whybar__list--5 > .svc-whybar__item { grid-column: span 2; }
.svc-whybar__list--5 > .svc-whybar__item:nth-child(4) { grid-column: 2 / span 2; }
.svc-whybar__list--5 > .svc-whybar__item:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 991px) {
  .svc-whybar__list--5 { grid-template-columns: 1fr; }
  .svc-whybar__list--5 > .svc-whybar__item,
  .svc-whybar__list--5 > .svc-whybar__item:nth-child(4),
  .svc-whybar__list--5 > .svc-whybar__item:nth-child(5) { grid-column: auto; }
}

/* Closing note under the trust bar. */
.svc-whybar__note {
  max-width: 820px !important;
  margin: 34px auto 0 !important;
  text-align: center;
}

/* Two CTAs side by side in the navy closing band. The band centres its content,
   so the pair needs its own flex row rather than inheriting the single-button
   layout. */
.svc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* Service cards carry a "more about X" link under the copy; push it to the
   bottom so the links line up across a row of uneven cards. */
.svc-method-card { display: flex; flex-direction: column; }
.svc-method-card > p { flex: 1 1 auto; }
.svc-method-card > .svc-explore__btn { align-self: flex-start; margin-top: 18px; }

/* ─── Home: special offers slider (2026-08-06) ────────────────────────────────
   Three live offers used to stack as three full-width banners, which is most of
   why the mobile page ran long. One at a time now, paged with the same nav
   component the Featured Services carousel uses.

   The viewport is deliberately NOT width-constrained. `.wvd-home-offer` styles
   the coupon as a full-bleed three-column banner up to 1344px (amount | copy |
   button); boxing the slider at 820px collapsed that grid and squeezed the note
   into one word per line. The gutters below mirror what .svc-offer-wrap--grid
   carried before. Mobile needs nothing extra: the banner already stacks itself
   under 991px. */

/* The gutter lives on the wrapper, not the viewport: `overflow: hidden` clips at
   the border box, so padding on the viewport would let the next slide show
   through the gutter instead of ending cleanly at it. */
.wvd-offer-slider { padding: 0 40px; text-align: center; }
.wvd-offer-slider__viewport {
  text-align: left;
  /* Without Swiper this stays a scroll-snap row so the offers are still
     reachable; Swiper own init class turns that off once it takes over. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.wvd-offer-slider__viewport.swiper-container-initialized { overflow: hidden; }
.wvd-offer-slider__viewport .swiper-wrapper { display: flex; }
.wvd-offer-slider__viewport .swiper-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
  height: auto;
}
/* The nav is an inline-flex pill, so it is centred by the wrapper's text-align
   rather than by justify-content on itself. */
.wvd-offer-slider__nav { margin-top: 26px; }

@media (max-width: 767px) {
  .wvd-offer-slider { padding: 0 16px; }
}

/* ─── Home: featured services intro ─────────────────────────────────────────
   Short lead under the section heading, sitting in the left text column with
   the h2 rather than above the full-bleed carousel. */
.services-two__intro {
  max-width: 60ch;
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--svc-muted, var(--wvd-muted));
}