/*
Theme Name: mybh Dental Studio
Theme URI: https://example.com/
Author: mybh Dental Studio
Description: Premium modern dental practice WordPress theme inspired by the mybh Dental Studio landing page.
Version: 3.7.0
License: GPL-2.0-or-later
Text Domain: mybh-dental
*/
:root {
    --lav: #F6F1F8;
    --purple-light: #9B6FB5;
    --purple-dark: #4E2E63;
    --purple: #8E75A6;
    --plum: #16232E;
    --champ-light: #D9BE94;
    --champ-dark: #A97F49;
    --champ: var(--champ-light);
    --ivory: #FCF6EC;
    --char: #222E36;
    --line: #DEE6EA;
    --shadow: 0 24px 70px rgba(22, 35, 46, .12)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

[id] {
    scroll-margin-top: 90px;
}

/* A single seamless procedural marble tile (assets/img/marble-bg.jpg —
   generated in-house, not a licensed photo) is reused across every main
   section below. Each section layers its own solid color as a translucent
   tint on top of the same tile (linear-gradient(tint, tint), url(...)) so
   the whole site reads as marble while every section keeps its own
   distinct color identity. The hero (its own photo/video background) and
   the thin nav/topbar bars are left plain for legibility. */
body {
    margin: 0;
    background: linear-gradient(rgba(252, 246, 236, .86), rgba(252, 246, 236, .86)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
    color: var(--char);
    font-family: 'Roboto', sans-serif;
    line-height: 1.65;
    /* Safety net for the Hero Heading Card's user-adjustable Left/Right
       offset (see .hero-heading-overlap below) — a desktop-sized offset
       can push the card close to a narrow phone/tablet screen's edge, so
       this guarantees it can never force a horizontal scrollbar or leave
       the card looking cut off/half-visible, whatever the offset is set to. */
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit
}

.container {
    width: min(1160px, calc(100% - 40px));
    margin: auto
}

.topbar {
    background: linear-gradient(rgba(252, 246, 236, .86), rgba(252, 246, 236, .86)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
    color: var(--plum);
    padding: 9px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--line);
}

.topbar .container {
    display: flex;
    justify-content: space-between;
    gap: 20px
}

/* Outline only, not filled — a dark square border (same navy as the main
   nav bar below it) with transparent background, so it reads as a
   button without becoming a heavy solid block in the topbar. */
.topbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border: 1px solid var(--plum);
    border-radius: 0;
    background: transparent;
    color: var(--plum);
    font-weight: 700;
    transition: .15s ease;
}

.topbar-phone:hover,
.topbar-phone:focus-visible {
    /* Same gold fill as the footer's social icons on hover, instead of
       filling navy — keeps the hover treatment consistent sitewide. */
    background: var(--champ-dark);
    border-color: var(--champ-dark);
    color: #fff;
}

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--plum);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.navin {
    height: 78px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.logo {
    font-family: 'Roboto', sans-serif;
    font-size: 27px;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    max-height: 44px;
    width: auto;
    display: block;
    /* Forces the uploaded logo graphic to render pure white against the
       dark nav bar, the same treatment already used for this same image
       in the dark footer (see .footer .logo-img's inline style) — so the
       brand mark reads clearly against both dark backgrounds instead of
       showing its own original colors, which may not be visible here. */
    filter: brightness(0) invert(1);
}

.logo span {
    color: #fff
}

.links {
    display: flex;
    justify-content: center;
    gap: 28px;
    align-items: center;
    /* Editable (Customizer: Section: Site & Branding -> Navigation Menu
       Style) — independent of the sitewide body font, so changing this
       doesn't touch paragraph text elsewhere. The fallback matches the
       sitewide body font so there's no visible change until it's used. */
    font-family: var(--nav-font, 'Roboto', sans-serif);
    font-size: 13px;
    /* 500, not 600 — Roboto (the body/nav font) is only loaded in
       300/400/500/700/900, so a 600 here had no matching font file and the
       browser synthesized the nearest heavier weight (700, full bold)
       instead. That's why the nav read as "too bold" even though the CSS
       said 600. 500 is an actual loaded weight, so it renders as-drawn —
       a touch heavier than normal text, not faux-bold. */
    font-weight: 500
}

.links li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.links a:hover {
    color: var(--purple)
}

/* Dropdown sub-menus (Appearance > Menus — drag an item under a parent
   to nest it). Opens on CLICK, not hover (see assets/js/main.js), so it
   works the same on mobile as on desktop. menu-item-has-children and
   sub-menu are both standard WordPress nav-menu markup, not custom. */
.menu-item-has-children {
    position: relative;
}

.menu-item-has-children>a:after {
    content: '▾';
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    vertical-align: middle;
    transition: transform .2s ease;
}

.menu-item-has-children.submenu-open>a:after {
    transform: rotate(180deg);
}

.sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item-has-children.submenu-open>.sub-menu {
    display: block;
}

@media (min-width: 851px) {
    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        min-width: 210px;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: 6px 0;
        z-index: 30;
    }

    .sub-menu a {
        display: block;
        padding: 9px 18px;
        color: var(--plum);
        font-size: 13px;
        white-space: nowrap;
    }

    .sub-menu a:hover {
        background: var(--ivory);
        color: var(--purple);
    }
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 12px;
    transition: .25s ease;
    border: 1px solid transparent;
    cursor: pointer
}

.btn-primary {
    /* Purple-to-Gold Gradient — purple fading into champagne/gold on a
       diagonal, white text. The end stop was previously 115%, which
       pushed the gold past the visible edge of the button so it barely
       showed; stops are now 0%/100% so the full purple-to-gold blend is
       actually visible across the button. On hover the gradient
       lightens (lavender-to-champagne) and the text switches to plum
       for contrast, instead of staying white on a now-lighter
       background. */
    background: linear-gradient(135deg, var(--purple) 0%, var(--champ-dark) 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(169, 127, 73, .3)
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--purple-light) 0%, var(--champ-light) 100%);
    color: var(--plum)
}

.btn-outline {
    /* Gold outline for secondary actions, pairing with the gradient
       .btn-primary above. */
    border-color: var(--champ-dark);
    color: var(--champ-dark)
}

.btn-outline:hover {
    background: var(--champ-dark);
    color: #fff
}

.hero {
    position: relative;
    overflow: hidden;
    background-color: #0F1720;
    background-image: linear-gradient(135deg, #17242F, #0B131A);
    background-size: cover;
    /* Hero Photo Position (Hero Layout) — read through custom properties
       (set inline from front-page.php) rather than a plain "center", so
       the focal point can be moved instead of always cropping the photo
       dead-center. --hero-photo-x-mobile/-y-mobile only exist at all once
       "Use a Different Photo Position on Phones" is turned on; until then
       the phone breakpoint below just keeps reading the same x/y as every
       other screen size. */
    background-position: var(--hero-photo-x, 50%) var(--hero-photo-y, 50%);
    padding: 55px 0 65px;
    color: #fff;
    /* Minimum Height (Customizer: Hero Layout) is a floor, not a fixed
       height — set via the --hero-min-h custom property so the banner
       still grows taller than it if the content needs more room. .hero
       is a single-child flex column purely so Content Vertical Position
       (Hero Layout) can distribute any extra height above/below/around
       that content instead of it always sitting glued to the top. */
    display: flex;
    flex-direction: column;
    min-height: var(--hero-min-h, auto);
}

@media (max-width: 850px) {
    .hero {
        /* Whatever Minimum Height is set to, don't let it force a
           banner taller than this on tablet-sized screens. */
        min-height: min(var(--hero-min-h, auto), 480px);
    }
}

/* Laptop screens are WIDE enough to skip the 850px rule above, but many
   common laptops (especially 1366x768 ones, still very common) have much
   LESS vertical room than their width suggests, especially once the
   browser's own address bar/tabs are subtracted. A tall Hero Minimum
   Height (Customizer: Hero -> Layout) that looks fine on a big external
   monitor can easily push the bottom of the hero off-screen on a laptop,
   forcing a scroll just to see the rest of the banner. This caps the
   hero at a comfortable height specifically when the BROWSER WINDOW
   itself is short (not just narrow) — taller external monitors/windows
   are unaffected and still get the full Hero Minimum Height value. */
@media (min-width: 851px) and (max-height: 820px) {
    .hero {
        min-height: min(var(--hero-min-h, auto), 560px);
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: min(var(--hero-min-h, auto), 420px);
        /* Falls back to the regular x/y above when no phone-specific
           position has been set, so this rule is harmless even when "Use a
           Different Photo Position on Phones" is off. */
        background-position: var(--hero-photo-x-mobile, var(--hero-photo-x, 50%)) var(--hero-photo-y-mobile, var(--hero-photo-y, 50%));
    }

    /* The "✦ Patient-first care ✦ Modern technology ✦ ..." strip right
       under the hero — on a phone-width screen it wraps onto several
       cramped lines, so it's hidden below this breakpoint entirely. */
    .trust {
        display: none;
    }
}

.hero:before {
    content: '';
    position: absolute;
    inset: 0;
    /* Strength is a single 0-1 knob (Customizer: Hero Layout > Hero Photo
       Darkness, default .6) — the three stops keep their original relative
       shading to each other (darkest-to-lightest) but all scale together,
       so turning the slider down doesn't just fade one edge of the photo.
       A plain color overlay alone can't be relied on for contrast on every
       possible photo, so the text itself also gets a shadow below
       (h1/p/eyebrow/hero-note) regardless of where this is set. */
    background: linear-gradient(100deg,
        rgba(12, 18, 24, var(--hero-overlay-strength, .6)) 0%,
        rgba(16, 24, 32, calc(var(--hero-overlay-strength, .6) * .795)) 45%,
        rgba(24, 34, 44, calc(var(--hero-overlay-strength, .6) * .487)) 100%);
    z-index: 1;
}

/* Hero Background Video (optional, Customizer: Hero Photo section) — sits
   behind the .hero:before darkening overlay (z-index 1) and the content
   grid (z-index 2), so the same photo-darkness tint and text shadows work
   identically whether the hero is showing the still photo or the video.
   The Hero Background Photo is still set as .hero's own background-image
   (front-page.php), so it's what shows through while the video loads and
   as the fallback if the video fails to play.
   Deliberately z-index: 0 here, never negative — a negative z-index was
   used originally, but some browsers' internal "is this actually visible"
   check (which gates whether autoplay is even attempted) can misfire on
   an element stacked behind its own containing block via a negative
   z-index. Every layer in this stack now uses only 0-or-higher z-index
   values, in source order, which is the safer, more standard way to put
   a video behind other content. */
.hero-video {
    /* Deliberately NOT using inset:0 + width/height:100% + object-fit:cover
       here. That's the modern way to do this, but iOS Safari has had
       real, well-documented quirks where object-fit on an absolutely
       positioned autoplaying video can prevent it from ever actually
       starting playback, even though the exact same file plays fine as
       a plain, normally-sized <video> elsewhere on the same page (which
       is exactly what testing showed here). This is the older,
       more battle-tested technique for a full-bleed background video:
       center the video on the container, then oversize it in whichever
       dimension is needed (min-width/min-height: 100%) so it always
       covers the box, instead of asking object-fit to do the cropping.
       It's been the standard "CSS background video" trick since long
       before object-fit was reliable, specifically because it avoids
       this class of bug. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

.hero-grid {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
}

/* Headline, buttons, and badge (Customizer: Hero Layout) are each placed
   by an exact left/top percent set from PHP, rather than flowing in
   normal document order — that's what makes them individually
   draggable to any spot, PowerPoint/Publisher style, instead of locked
   to a left/center/right + top/center/bottom preset. The percent is the
   CENTER point of the block (this transform re-centers it on that
   point), so it never spills further off one edge than the other as
   it's moved around. Scoped to above the tablet breakpoint — see the
   850px media query further down, where free placement is turned off
   in favor of a safe, predictable stacked layout. */
.hero-draggable {
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
}

/* The site-wide scroll-reveal fade (.reveal / .reveal.show, further down
   this file) also animates via the transform property — its default
   translateY(18px) / none values would otherwise cancel the center-
   anchoring transform above the moment an element is revealed. These
   higher-specificity overrides fold both effects into one transform so
   dragged elements keep their exact position through the reveal
   animation instead of snapping to a top-left anchor. */
.hero-draggable.reveal {
    transform: translate(-50%, calc(-50% + 18px));
}

.hero-draggable.reveal.show {
    transform: translate(-50%, -50%);
}

/* Wraps the two hero buttons purely for grouping — display:contents
   makes the wrapper itself invisible to layout, so on desktop each
   button is still absolutely positioned directly against .hero-grid
   (its own data-hero-pos left/top), fully independent of the other.
   The 850px media query further down turns this into a real flex row
   so the two stay side by side in the safe stacked mobile layout. */
.hero-buttons-group {
    display: contents;
}

/* Customizer-preview-only affordance (added by hero-position-preview.js,
   which is enqueued solely inside the live-preview iframe) — never
   appears on the live public site. */
body.mybh-hero-editing .hero-draggable {
    cursor: move;
    outline: 1px dashed transparent;
    border-radius: 0;
    transition: outline-color .15s;
}

body.mybh-hero-editing .hero-draggable:hover {
    outline-color: rgba(255, 255, 255, .65);
}

body.mybh-hero-editing .hero-draggable.mybh-hero-dragging {
    outline: 1px solid #fff;
    z-index: 5;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--purple);
    /* Cursive accent for every section's small label line (For Patients,
       Meet your dentist, etc.). Uppercase + wide letter-spacing worked for
       the old all-caps sans-serif label, but both actively fight a script
       typeface — uppercase script letters don't connect the way the font
       is drawn, and tracking the letters apart breaks those connections
       entirely — so both are turned off here, and the size is bumped up
       since a script face reads smaller than a sans-serif at the same
       font-size. */
    /* Font + size are editable (Customizer: Section: Site & Branding ->
       Eyebrow Style) — the values here are just the fallback shown before
       either control is touched. */
    font-family: var(--eyebrow-font, 'Dancing Script', cursive);
    font-weight: 700;
    font-size: var(--eyebrow-size, 22px);
    letter-spacing: normal;
    text-transform: none
}

/* The small accent line used to sit only before the eyebrow label
   (COMPREHENSIVE CARE —); it's now mirrored after it too so every
   section eyebrow site-wide reads as — LABEL — flanked on both sides,
   not just on the left. */
.eyebrow:before,
.eyebrow:after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--champ)
}

.hero .eyebrow {
    /* Color and glow are both editable (Customizer: Hero Layout — Eyebrow
       Text Color / Eyebrow Glow), set as CSS custom properties on this
       element in front-page.php. The fallbacks here (black text + a light
       halo) match what shows before either control is touched. */
    color: var(--hero-eyebrow-color, #000);
    text-shadow: var(--hero-eyebrow-shadow, 0 1px 10px rgba(255, 255, 255, .55), 0 1px 2px rgba(255, 255, 255, .7));
}

.hero .eyebrow:before,
.hero .eyebrow:after {
    /* The accent line either side of the eyebrow label needs the same
       protection as the text itself against a busy photo. */
    box-shadow: var(--hero-eyebrow-line-shadow, 0 1px 6px rgba(255, 255, 255, .5));
}

h1,
h2,
h3 {
    /* Editable (Customizer: Section: Site & Branding -> Heading Font) —
       applies to every heading site-wide EXCEPT the hero's own heading
       card, which keeps its own separate Hero Heading Font control. The
       fallback (Poppins) matches the sitewide default, a deliberate
       two-font system (Poppins headings / Roboto body) so headings stand
       apart from paragraph text instead of reading as "bigger body
       text" — so there's no visible change here until this is used. */
    font-family: var(--heading-font, 'Poppins', sans-serif);
    /* 600, not 700 — still a real loaded Poppins weight (not synthesized),
       just a notch lighter so headings read as confident rather than
       heavy/shouty. */
    font-weight: 600;
    color: var(--plum);
    line-height: 1.15;
    margin: 0 0 20px
}

.hero h1 {
    color: #fff;
    /* The site-wide h1 size below is tuned for a full hero banner; even
       so, the hero's own heading is capped a bit smaller than that so the
       hero itself doesn't take up the whole screen on a laptop/desktop. */
    font-size: clamp(28px, 3.6vw, 44px);
    /* Keeps the headline legible over any part of a background photo —
       a light wall, a window, a bright reflection — not just the darkest
       corner the overlay above happens to shade. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .6);
}

h1 {
    font-size: clamp(40px, 5vw, 64px);
    letter-spacing: -.03em
}

/* h2/h3 previously had no custom size at all here — they were quietly
   falling back to the browser's plain default heading sizes, which is
   why every section title ("Current Specials", "What makes us
   different.", etc.) read smaller and flatter than the rest of this
   otherwise fully custom design. These give them their own proper place
   in the scale, between the hero h1 and body text. */
h2 {
    font-size: clamp(24px, 2.8vw, 34px);
    letter-spacing: -.015em
}

h3 {
    font-size: clamp(18px, 1.8vw, 21px);
    letter-spacing: -.01em
}

.hero p {
    font-size: 17px;
    max-width: 580px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .55)
}

.hero .btn-outline {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
    background: rgba(20, 13, 24, .25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.hero .btn-outline:hover {
    background: #fff;
    color: var(--plum);
}

.hero-note {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    /* Slightly darker + more opaque glass than before, so the card reads
       as a distinct panel (and its text stays legible) even when it lands
       over a light or busy patch of the background photo. */
    background: rgba(20, 13, 24, .38);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0;
    max-width: 420px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.hero-note b {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    color: #fff;
    margin-bottom: 2px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

.hero-note span {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.hero-note-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--champ);
    color: var(--plum);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.hero-photo-notice {
    /* Every other hero element is individually absolute-positioned now
       (Hero Layout), so this admin-only helper text — shown only when no
       Hero Background Photo is set — is pinned to the bottom of the
       banner instead of flowing in normal document order, where it
       would otherwise land at the very top and overlap the headline. */
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255, .55);
}

/* The Hero Heading no longer lives inside the photo (it used to be one of
   the freely-draggable Hero Layout lines like the eyebrow/description) —
   it now sits just below the hero as its own card, pulled up with a
   negative margin so it straddles the photo's bottom edge. Because it's
   on its own card rather than on top of the photo, it's always legible no
   matter what the background photo looks like, and it's no longer boxed
   in by the photo's own height.
   Position (Left/Right, Up/Down), size (font size + card max-width),
   background (color and/or an uploaded image), font, and text color are
   all set from the Customizer (Hero Heading Card) as inline styles in
   front-page.php — this stylesheet only supplies the structural/decorative
   properties that aren't editable there (padding, rounding, shadow). */
.hero-heading-overlap {
    position: relative;
    z-index: 2;
    margin-top: -56px;
    padding: 0 20px;
    text-align: center;
    /* Position — Left/Right, Up/Down (Customizer: Hero Heading Card) is a
       desktop-scale pixel offset (sliders go up to +/-400px / +/-300px),
       set as these two custom properties from front-page.php rather than
       a raw inline transform. Reading them through clamp() here — and
       scaling them down further at the tablet/phone breakpoints below —
       means an offset dialed in by eye on a wide desktop screen degrades
       gracefully on a narrow one instead of shoving the card toward, or
       past, the edge of the screen. */
    --hero-heading-x: 0px;
    --hero-heading-y: 0px;
    transform: translate(clamp(-380px, var(--hero-heading-x), 380px), clamp(-280px, var(--hero-heading-y), 280px));
}

.hero-heading-overlap h1 {
    display: inline-block;
    margin: 0;
    padding: 26px 42px;
    border-radius: 0;
    box-shadow: 0 20px 44px rgba(43, 29, 49, .2);
    line-height: 1.15;
    /* Read through min()/clamp() rather than used directly, so a very wide
       or very large Customizer setting (--hero-heading-w / -fs, set inline
       from front-page.php) still gets capped safely on a phone screen
       instead of forcing horizontal scroll or an oversized headline. */
    max-width: min(var(--hero-heading-w, 720px), 92vw);
    font-size: min(var(--hero-heading-fs, 34px), 11vw);
    background-color: var(--ivory);
    color: var(--plum);
}

/* Tablet: same base card as desktop, but the Left/Right offset is scaled
   down to roughly half — a screen this much narrower has that much less
   spare room on either side of the card before a sideways offset pushes
   it toward the edge (horizontal scroll would otherwise be possible;
   Up/Down has no such risk, so it keeps nearly its full range). The font
   size is also scaled down from whatever size is set for desktop — the
   vw cap alone only kicks in once a very large size is chosen, which
   read as "the desktop size" showing on tablet/phone even when that
   wasn't the intent. */
@media (max-width: 850px) {
    .hero-heading-overlap {
        margin-top: -44px;
        padding: 0 18px;
        transform: translate(clamp(-160px, calc(var(--hero-heading-x) * .55), 160px), clamp(-260px, var(--hero-heading-y), 260px));
    }

    .hero-heading-overlap h1 {
        padding: 22px 30px;
        font-size: min(calc(var(--hero-heading-fs, 34px) * .82), 10vw);
    }
}

@media (max-width: 560px) {
    .hero-heading-overlap {
        margin-top: -30px;
        padding: 0 14px;
        /* Scaled down further still — on a phone-width screen the card
           itself (max-width: 92vw) already fills nearly the full width, so
           even a modest unscaled sideways offset would push part of it
           off-screen. Up/Down again keeps nearly its full range. */
        transform: translate(clamp(-90px, calc(var(--hero-heading-x) * .3), 90px), clamp(-220px, var(--hero-heading-y), 220px));
    }

    .hero-heading-overlap h1 {
        padding: 18px 22px;
        border-radius: 0;
        box-shadow: 0 12px 28px rgba(43, 29, 49, .18);
        max-width: min(var(--hero-heading-w, 720px), 92vw);
        font-size: min(calc(var(--hero-heading-fs, 34px) * .62), 9vw);
    }
}

.trust {
    padding: 22px 0;
    background: linear-gradient(rgba(252, 246, 236, .86), rgba(252, 246, 236, .86)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
    border-bottom: 1px solid var(--line)
}

.trustin {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #5C6A72
}

.trust strong {
    color: var(--plum)
}

section {
    padding: 64px 0
}

.center {
    text-align: center
}

.center p.lead {
    margin: 0 auto 36px;
    max-width: 650px
}

.lead {
    color: #5C6A72
}

.services {
    background: linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.cards-6 {
    grid-template-columns: repeat(3, 1fr);
}

.card {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    transition: .25s
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow)
}

/* Icon + title now sit side by side on one row (card-head) instead of the
   icon stacked above the title on its own line. */
.card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.icon {
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: var(--lav);
    display: grid;
    place-items: center;
    color: var(--purple);
    font-size: 16px;
    flex-shrink: 0;
}

.card h3 {
    font-size: 17px
}

.card-head h3 {
    margin: 0;
}

/* The category title is now a link to its own page — same hover color
   shift as the service links just below it, no underline, so it keeps
   looking like a heading until you mouse over it. */
.card-head h3 a:hover {
    color: var(--purple);
}

/* The divider line now sits BEFORE the description (separating it from
   the icon/title row above), instead of after it (which used to sit
   between the description and the services list below). */
.card p {
    color: #5C6A72;
    font-size: 13.5px;
    margin-bottom: 10px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.card-services {
    list-style: none;
    margin: 0;
    padding: 6px 0 0;
}

.card-services li {
    margin: 0;
    padding: 0;
}

.card-services a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    line-height: 1.35;
    font-size: var(--card-services-size, 14px);
    /* 500, not 600 — same Roboto-has-no-600 issue as the nav; see .links
       above. */
    font-weight: 500;
    color: var(--card-services-color, var(--plum));
}

.card-services a:before {
    content: '→';
    color: var(--champ);
    font-weight: 700;
}

.card-services a:hover {
    color: var(--purple);
}

.specials {
    background: linear-gradient(rgba(246, 241, 248, .86), rgba(246, 241, 248, .86)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
}

.specials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.special-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    text-align: center;
    transition: .25s;
    overflow: hidden;
    cursor: pointer;
}

.special-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

/* The offer photo sits inside the card's description area, AFTER the
   descriptive text (not before it, and not as a banner across the very
   top of the card) — but it's a real, prominent photo that fills the
   full width of the card, not a small thumbnail. Its height is a CSS
   custom property set inline per-card from the "Photo Size" slider
   (Appearance > Customize > Current Specials) — see front-page.php — so
   it's resizable with no code edit; --special-img-height falls back to
   the 170px default if that inline style is ever missing. Only rendered
   at all once a photo is actually uploaded (see mybh_get_specials() /
   front-page.php); nothing shows in its place when left blank. */
.special-image {
    position: relative;
    width: 100%;
    height: var(--special-img-height, 140px);
    margin: 10px 0 0;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
}

/* object-fit:contain (not cover) so an uploaded photo is resized DOWN to
   fit inside the box when needed, instead of being cropped to fill it —
   the whole photo always stays visible, whatever its original
   proportions. The box's own background (matching the card) shows
   through any letterboxing so it still looks intentional, not like a
   gap. */
.special-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Font, size, text color, and background are all CSS custom properties
   set inline from the "Badge Style" controls (Appearance > Customize >
   Current Specials) — see front-page.php. Padding is in em (not px) so
   the whole pill scales up/down together with --special-badge-size,
   instead of just the text growing inside a fixed-size shape. */
.special-badge {
    display: inline-block;
    align-self: center;
    background: var(--special-badge-bg, var(--champ));
    color: var(--special-badge-color, var(--plum));
    font-family: var(--special-badge-font, 'Roboto', sans-serif);
    font-weight: 700;
    font-size: var(--special-badge-size, 13px);
    padding: 0.4em 1.6em;
    border-radius: 0;
    margin-bottom: 12px;
}

/* Font size and color are CSS custom properties set inline from the
   "Title Style" controls (Appearance > Customize > Current Specials) —
   see front-page.php — so both are editable with no code edit;
   --special-title-size/--special-title-color fall back to the original
   26px/plum defaults if that inline style is ever missing. */
.special-card h3 {
    font-size: var(--special-title-size, 22px);
    color: var(--special-title-color, var(--plum));
    margin-bottom: 8px;
}

/* A plain straight divider line separates the title from the
   description text below it, instead of the two just running together. */
.special-description {
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.special-card p {
    color: #5C6A72;
    font-size: 13.5px;
    margin-bottom: 12px;
}

/* The clickable text at the bottom of each Special card — plain text,
   not a button. It's a <span>, not its own <a> (the whole card above is
   already one link — see front-page.php — and a link can't be nested
   inside another link). "margin-top:auto" + "align-self:center" is what
   pins it to the bottom of the card and keeps it centered, no matter how
   short or long that card's description/photo are, so all 3 line up
   evenly across the row instead of trailing right after whatever text
   happens to be above them. */
.special-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: center;
    margin-top: auto;
    padding-top: 10px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--purple);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: .2s ease;
}

.special-card:hover .special-link {
    text-decoration-color: currentColor;
}

.specials-more {
    text-align: center;
    margin-top: 40px;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

/*
 * .photo-frame wraps .feature-art for the About and Doctor photos. It
 * exists so the offset accent block (:before) and the certification
 * badge can sit OUTSIDE .feature-art's own overflow:hidden (needed to
 * crop the photo itself) without either of them getting clipped.
 */
.photo-frame {
    position: relative;
}

.photo-frame:before {
    content: '';
    position: absolute;
    inset: 24px -24px -24px 24px;
    background: var(--champ);
    border-radius: 0;
    z-index: 0;
}

/* On the plum Doctor section a solid champagne block reads heavier than
   on the light About section, so it's a soft translucent white instead —
   still a visible offset accent, just tuned for a dark background. */
.photo-frame-dark:before {
    background: rgba(255, 255, 255, .16);
}

.photo-frame .feature-art {
    position: relative;
    z-index: 1;
    /* Sharp, square corners — same plain-rectangle treatment as the
       .shape placeholder already used before a photo is uploaded, so a
       real photo and the placeholder feel like the same design language. */
    border-radius: 0;
}

.photo-badge {
    position: absolute;
    z-index: 2;
    left: -26px;
    bottom: -26px;
    /* Size is a CSS custom property (set inline per-badge from the
       Customizer's "Doctor Badge Size" slider — see front-page.php) so
       it's resizable with no code edit; --badge-size falls back to the
       original 108px default if that inline style is ever missing. */
    width: var(--badge-size, 108px);
    height: var(--badge-size, 108px);
    border-radius: 50%;
    /* Light purple/lavender by default (the same --lav tone used behind
       the Services section icons) instead of plain white, but a real CSS
       custom property set inline from the "Doctor Badge Background
       Color" color picker (Appearance > Customize > Homepage Photos), so
       it can be changed to anything, not locked to one color. This only
       shows around the image as a ring when --badge-img-scale below is
       less than 100% (see the "Doctor Badge Image Fill" slider); at 100%
       the image covers it completely. */
    background: var(--badge-color, var(--lav));
    box-shadow: 0 14px 34px rgba(22, 35, 46, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* The badge is always a clickable link now (see front-page.php) — a
   slight lift on hover/focus makes that obvious. */
a.photo-badge:hover,
a.photo-badge:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 18px 40px rgba(22, 35, 46, .4);
}

.photo-badge img {
    /* Also a CSS custom property (the "Doctor Badge Image Fill" slider) —
       centered by the flex rules above, so shrinking it below 100% keeps
       it centered in the circle with the --lav background showing evenly
       around it as a ring, instead of floating off to one side. */
    width: var(--badge-img-scale, 82%);
    height: var(--badge-img-scale, 82%);
    border-radius: 50%;
    object-fit: cover;
}

.feature-art {
    min-height: 470px;
    background: var(--lav);
    border-radius: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(22, 35, 46, .16), inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* Belt-and-suspenders on top of the .about-slider-track fix above: this
   box sits in a grid with "align-items:center" (see .split), so it's
   NEVER stretched to a row height by its grid parent — its only real
   height is whatever min-height gives it. Giving the slider variant an
   actual "height" (not just min-height) removes any remaining doubt
   about that box having a real, unambiguous size for its photos to fill. */
.feature-art.about-slider {
    height: 470px;
}

.feature-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Biased toward the top third rather than dead-center: a portrait or
       headshot almost always has the face in the upper part of the frame,
       and centering a crop like that tends to cut off the top of the
       head. This keeps faces in frame for most photos people upload,
       whatever the original photo's aspect ratio. */
    object-fit: cover;
    object-position: 50% 18%;
}

.feature-art .shape {
    position: absolute;
    width: 330px;
    height: 430px;
    background: #fff;
    border-radius: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    box-shadow: var(--shadow)
}

.feature-art .shape:after {
    content: 'SMILE';
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    letter-spacing: .12em;
    color: var(--champ)
}

/* About section photo slider — shown whenever 2+ About Section Photos
   are uploaded (Homepage Photos; see mybh_get_about_photos() /
   front-page.php). A single photo just renders as a plain image (no
   slider chrome at all); this only applies once there's something to
   actually slide between.
 *
 * The track lays every photo out side by side in a flex row and shows
 * one at a time by translateX-ing the whole row — a real left/right
 * slide, not a cross-fade — advanced by the auto-play timer, the dots,
 * the arrow buttons, or a drag/swipe directly on the photo (see the
 * data-about-slider handling in assets/js/main.js, which uses Pointer
 * Events so the same code handles a finger on a phone and a mouse drag
 * on desktop). .feature-art.about-slider has an explicit height (not
 * just min-height) a bit further down, which is what lets this track
 * sit in normal flow instead of needing position:absolute the way an
 * earlier, cross-fade version of this slider had to. */
.about-slider-track {
    position: absolute;
    inset: 0;
    display: flex;
    height: 100%;
    cursor: grab;
    /* Lets the browser still handle vertical page scrolling on a touch
       device while this element's own JS takes over horizontal drags —
       without it, a swipe here can get fought over with the page scroll. */
    touch-action: pan-y;
    transition: transform .45s ease;
}

.about-slider-track.is-dragging {
    transition: none;
    cursor: grabbing;
}

.about-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.about-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(22, 35, 46, .45);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease;
}

/* Hidden until hover/focus on desktop (where a drag isn't as obvious at
   a glance); always shown on touch devices — see the mobile breakpoint
   further down, where there's no hover to reveal them otherwise. */
.feature-art.about-slider:hover .about-slider-arrow,
.feature-art.about-slider:focus-within .about-slider-arrow {
    opacity: 1;
}

.about-slider-arrow:hover {
    background: rgba(22, 35, 46, .7);
}

.about-slider-arrow.prev {
    left: 12px;
}

.about-slider-arrow.next {
    right: 12px;
}

.about-slider-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}

.about-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 8px;
}

.about-slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.about-slider-dot:hover {
    background: rgba(255, 255, 255, .8);
}

.about-slider-dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

/* Reusable "matted" photo frame — crops any image to a perfect square
   and surrounds it with a light-purple mat, sharp square corners, and
   the same soft shadow used everywhere else on the site (Hero/About/
   Doctor photos). Not tied to the homepage template — use it on any page.
   Works with TWO different core blocks, because each one exposes
   "Additional CSS Class(es)" on a different element:
     - Image block: the class lands directly on the <img>, so the plain
       rule right below does everything.
     - Media & Text block (photo + text side by side): the class lands
       on the OUTER wrapper div instead — there's no way to put a class
       on just the image in that block — so the second half of this rule
       reaches into its inner figure/img instead. Deliberately does NOT
       touch the wrapper's own display/grid rules, so the two-column
       layout (text staying right next to the photo) is left alone;
       only the photo itself is framed. */
img.mybh-framed-photo {
    display: block;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* Biased toward the top, same as every other photo frame in this
       theme — keeps faces in frame instead of centering the crop. */
    object-position: center 20%;
    margin: 0 auto;
    padding: 14px;
    background: var(--lav);
    border-radius: 0;
    box-shadow: var(--shadow);
}

/* Media & Text block: add "mybh-framed-photo" to the BLOCK's own
   Additional CSS Class(es) field (select the block itself — the outer
   frame around both the photo and the text — then Advanced in its
   settings sidebar, not the image). !important throughout this half of
   the rule, on both the figure and the image, since there's no way to
   know in advance what else (WordPress core, theme.json global styles,
   another plugin) might otherwise out-specificity a plain rule here. */
.mybh-framed-photo .wp-block-media-text__media {
    position: relative !important;
    /* A true square sized to whatever width this column actually
       renders at (its grid column is 50% of the block by default), so
       it stays square through the block's own "stack on mobile"
       breakpoint too, instead of a fixed pixel size that would look too
       small once the column goes full-width on a phone. */
    aspect-ratio: 1 / 1 !important;
    background: var(--lav) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
}

.mybh-framed-photo .wp-block-media-text__media img,
.mybh-framed-photo .wp-block-media-text__media video {
    /* !important because WordPress's own core CSS for this block sets
       width/height directly on the image (and, if "Crop image to fill
       entire column" is turned on in the block's own settings, also
       position:absolute + height:100%) — this needs to win over either
       version so the photo reliably fills the square mat above instead
       of keeping its natural rectangular shape. */
    position: absolute !important;
    inset: 14px !important;
    width: auto !important;
    height: auto !important;
    max-width: unset !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 0 !important;
}

/* Spacing between team-member rows when this same block is duplicated
   for more members — no need for an empty Spacer block in between,
   this applies automatically to every block carrying the class. Also
   fine (harmless extra whitespace) on the very last one. */
.mybh-framed-photo {
    margin-bottom: 40px;
}

/* Team Members ([mybh_team] shortcode — see functions.php). --mybh-team-
   photo-size and --mybh-team-radius come from Appearance > Customize >
   Team Section (a size slider and a Rounded Corners checkbox), printed
   as CSS variables in <head> by mybh_team_section_css(); the values
   here are just the fallback used before that Customizer section is
   ever touched. Every row reads the same two variables, so they can
   never end up mismatched the way separately hand-edited HTML/CSS
   could. Plain photo, no colored frame/shade around it — just a square
   (or rounded square) crop. */
.mybh-team-row {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 40px;
}

.mybh-team-photo-frame {
    flex: 0 0 var(--mybh-team-photo-size, 220px);
    width: var(--mybh-team-photo-size, 220px);
    height: var(--mybh-team-photo-size, 220px);
    box-sizing: border-box;
    border-radius: var(--mybh-team-radius, 0px);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.mybh-team-photo-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .35s ease;
}

.mybh-team-photo-frame:hover img {
    transform: scale(1.05);
}

.mybh-team-info h3 {
    margin: 0 0 2px;
}

.mybh-team-info .mybh-team-role {
    font-weight: 700;
    margin: 0 0 10px;
}

.mybh-team-info p {
    margin: 0 0 8px;
    line-height: 1.6;
}

.mybh-team-info p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .mybh-team-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .mybh-team-photo-frame {
        --mybh-team-photo-size: 180px;
    }
}

.check {
    display: flex;
    gap: 12px;
    margin: 18px 0;
    font-size: 15px
}

.check span {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--champ);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex: none
}

.doctor {
    background: linear-gradient(rgba(22, 35, 46, .92), rgba(22, 35, 46, .92)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
    color: #fff
}

.doctor h2 {
    color: #fff
}

.doctor p {
    color: #E4ECEF
}

.doctor .eyebrow:before {
    background: var(--champ)
}

.quote {
    /* Font and size are now set inline from the Customizer (Section:
       Dentist → Quote Style) — see front-page.php — so they're no longer
       hardcoded here. line-height stays general-purpose since it's a
       ratio, not a fixed size. */
    line-height: 1.35
}

.comfort {
    background: linear-gradient(rgba(246, 241, 248, .86), rgba(246, 241, 248, .86)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
}

.comfort-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px
}

/* The Patients section no longer has a second-column promo box, so its
   grid collapses to one column instead of leaving an empty gap where
   that box used to be. */
.comfort-solo .comfort-grid {
    grid-template-columns: 1fr;
}

.comfort-solo .comfort-grid > .reveal {
    max-width: 900px;
    margin: 0 auto;
}

.comfort-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.comfort-item {
    background: #fff;
    padding: 16px;
    border-radius: 0;
    border: 1px solid var(--line)
}

.comfort-item h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.comfort-item p {
    font-size: 13.5px;
    color: #5C6A72;
    margin: 0;
}

/* Plain clickable text, not a button — same "just text" treatment as
   .special-link in the Current Specials section below. */
.comfort-item .card-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    font-size: 13px;
    color: var(--purple);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: .2s ease;
}

.comfort-item .card-link:hover {
    text-decoration-color: currentColor;
}

.faq {
    background: linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
}

.faqgrid {
    max-width: 820px;
    margin: auto
}

.faqitem {
    border-bottom: 1px solid var(--line);
    padding: 14px 0
}

.faqq {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-weight: 700;
    color: var(--plum);
    cursor: pointer
}

.faqa {
    display: none;
    color: #5C6A72;
    padding-top: 8px;
    font-size: 14px
}

.faqitem.open .faqa {
    display: block
}

.reviews {
    /* Sits between the white FAQ section and the lavender Contact
       section — ivory (the page's own background) keeps the alternating
       rhythm instead of repeating either neighbor. */
    background: linear-gradient(rgba(252, 246, 236, .86), rgba(252, 246, 236, .86)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.review-card {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(22, 35, 46, .05);
}

.review-stars {
    color: var(--champ);
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 8px
}

.review-text {
    font-size: 13.5px;
    color: var(--char);
    margin-bottom: 12px
}

.review-meta {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #66747C
}

.review-meta strong {
    color: var(--plum)
}

.reviews-empty {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

.reviews-empty p {
    color: #5C6A72;
    margin-bottom: 20px;
}

.reviews-more {
    text-align: center;
    margin-top: 40px;
}

.reviews-widget {
    max-width: 1100px;
    margin: 0 auto;
}

/* Associations & Memberships (Appearance > Customize > Associations &
   Memberships — up to 10 logos, [mybh_get_association_logos()] in
   functions.php). White, matching Services, to keep the same
   alternating white/ivory/lavender rhythm between sections. */
.associations {
    background: linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
}

/* With 5+ logos (.is-sliding) the track is rendered TWICE back-to-back
   in front-page.php and this animates it exactly one copy's width to
   the left, then jumps back to 0 — since the two copies are identical,
   that jump is invisible and the strip appears to scroll forever. The
   edge mask just fades logos in/out at the very edge of the strip
   instead of having them appear/disappear abruptly. With fewer than 5
   logos (.is-static) they simply sit centered with no animation. */
.logos-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logos-marquee.is-static {
    -webkit-mask-image: none;
    mask-image: none;
}

.logos-track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
}

.logos-marquee.is-sliding .logos-track {
    animation: mybh-logos-scroll 28s linear infinite;
}

/* Pause on hover so a logo can actually be read/clicked — restricted to
   devices that have a real mouse (hover: hover). Without this guard,
   phones/tablets apply :hover the moment someone taps or scrolls past
   the strip and then never clear it (there's no mouse to "leave" with),
   which permanently freezes the animation on touch devices — this is
   why sliding worked on desktop but appeared stuck on phone. */
@media (hover: hover) and (pointer: fine) {
    .logos-marquee.is-sliding:hover .logos-track {
        animation-play-state: paused;
    }
}

.logos-marquee.is-static .logos-track {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.logo-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}

.logo-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Without an explicit height here, this <a> (wrapping any logo that
       has a Link set) sizes to its own content instead of the 64px
       .logo-item box around it — and a percentage max-height on the
       <img> inside can't resolve against an "auto"-height parent, so it
       renders at full size and gets clipped top-and-bottom by the strip's
       overflow:hidden. This is exactly why only SOME logos (the ones
       with a link) looked cropped, while plain unlinked ones didn't. */
    height: 100%;
}

.logo-item img {
    display: block;
    max-height: 100%;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    transition: transform .2s ease;
}

.logo-item:hover img,
.logo-item a:focus-visible img {
    transform: translateY(-2px);
}

@keyframes mybh-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .logos-marquee.is-sliding .logos-track {
        animation: none;
    }
}

@media (max-width: 600px) {
    .logo-item {
        height: 48px;
    }

    .logo-item img {
        max-width: 110px;
    }

    .logos-track {
        gap: 36px;
    }
}

/* Small insurance-logo row inside the "Insurance" card of the homepage's
   For Patients section (#patients) — the same .logos-marquee/.logo-item
   markup as Associations & Memberships, just sized to fit a narrow card
   instead of the full section width. See mybh_render_insurance_logos()
   and [mybh_insurance] in functions.php. */
.mybh-insurance-strip {
    margin-top: 14px;
}

.mybh-insurance-logos-compact .logos-track {
    gap: 16px;
    justify-content: flex-start;
}

/* Size defaults to a shared setting (Appearance > Customize > Section:
   Patient Info > Insurance Providers > Default Logo Size), since
   uploaded logos come in whatever size the provider's own artwork
   happens to be — some look small, some look oversized, at a fixed
   height. The --mybh-insurance-logo-size custom property is written to
   :root by mybh_patient_logo_size_css() in functions.php; 32px here is
   just the fallback if that never runs. Any ONE logo can still override
   this individually — mybh_render_insurance_logos() writes a
   --mybh-logo-h custom property inline on that one .logo-item when its
   own "Size Override" is set above 0, which var()'s first argument below
   picks up before ever falling back to the shared default. Max-width
   scales proportionally with whichever height wins (roughly the old
   68/32 ratio) so a wider logo still has room to grow, instead of
   getting capped back down to 68px. */
.mybh-insurance-logos-compact .logo-item {
    height: var(--mybh-logo-h, var(--mybh-insurance-logo-size, 32px));
}

.mybh-insurance-logos-compact .logo-item img {
    max-width: calc(var(--mybh-logo-h, var(--mybh-insurance-logo-size, 32px)) * 2.2);
}

/* Small payment-provider logo row inside the "Payment Options" card,
   right next to it in the same #patients section — same compact sizing
   as the insurance logos above. See mybh_render_payment_logos() in
   functions.php. */
.mybh-payment-strip {
    margin-top: 14px;
}

.mybh-payment-logos .logos-track {
    gap: 16px;
    justify-content: flex-start;
}

/* Same adjustable-size approach as the insurance logos above (shared
   default + optional per-logo --mybh-logo-h override), its own
   independent default setting (Section: Patient Info > Payment
   Providers > Default Logo Size) since these are a different set of
   logos that may need a different size. */
.mybh-payment-logos .logo-item {
    height: var(--mybh-logo-h, var(--mybh-payment-logo-size, 32px));
}

.mybh-payment-logos .logo-item img {
    max-width: calc(var(--mybh-logo-h, var(--mybh-payment-logo-size, 32px)) * 2.2);
}

.contact {
    background: var(--lav)
}

/* The section eyebrow/heading/lead now sit in their own centered intro
   block above the grid (.center.reveal, same pattern as every other
   homepage section — Services, Specials, Reviews, etc.) instead of
   crammed into the left grid column, so the business-info/map card and
   the form below can be sized to actually balance each other instead of
   the left column towering over the form. */
.contact-grid {
    display: grid;
    /* Form column and the contact-info/map card column are equal width. */
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch
}

/* Business info (phone/address/hours + directions) and the map are now
   one visually connected card — an info section on top and the map
   flush against its bottom edge — instead of two separate floating white
   boxes with a gap between them. Laid out as a flex column (matching
   .form below) so the two grid columns stretch to an even height and the
   map (the one element with no fixed content height) absorbs any extra
   space instead of leaving a gap under a shorter card. */
.contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.contact-card-body {
    padding: 18px 24px
}

.form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.info-row {
    margin: 10px 0
}

/* The card's own top padding already creates space above the first row,
   so the row's own top margin on top of that was extra/redundant. */
.contact-card-body .info-row:first-child {
    margin-top: 0;
}

.info-row small {
    display: block;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--purple);
    font-weight: 700;
    font-size: 11px
}

/* Call/Visit/Hours text sized down a touch from the default bold/full-size
   look (applies to all 3 rows, not just the phone link) so the whole
   info block above the map takes up less room, leaving more of the card
   for the map itself. */
.info-row strong {
    font-size: 15px;
    font-weight: 500;
}

.directions-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--purple);
}

/* Sits flush at the bottom of .contact-card (no border/radius/margin of
   its own) — the card's own overflow:hidden clips the map's square
   corners to match the card's rounded bottom edge. flex:1 lets it grow
   to fill any leftover height once .contact-grid stretches this card to
   match the (usually taller) form column. */
.map-embed {
    line-height: 0;
    flex: 1;
    display: flex;
}

.map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    flex: 1;
}

.formgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.field.full {
    grid-column: 1/-1
}

.field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--plum)
}

input,
textarea,
select {
    font: inherit;
    border: 1px solid var(--line);
    background: var(--ivory);
    padding: 10px 12px;
    border-radius: 0;
    outline: none;
    width: 100%
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--purple)
}

textarea {
    min-height: 82px;
    resize: vertical
}

.footer {
    background: linear-gradient(rgba(16, 25, 34, .94), rgba(16, 25, 34, .94)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
    color: #C9D6DC;
    /* Tightened from 36px 0 18px — a footer shouldn't take up this much
       vertical space. */
    padding: 18px 0 10px;
    /* A thin champagne accent line across the very top, tying the footer
       back into the same accent color used for every section's eyebrow
       elsewhere on the site, instead of a plain flat color block. */
    border-top: 3px solid var(--champ);
}

.footergrid {
    display: grid;
    /* 3 columns — Contact/logo/description/social icons share the first
       column, Explore is the short 4-link middle column, and Services
       gets the most width since it has by far the most content.
       First column narrowed again (1.2fr -> .9fr) with that width
       going to Services (2.5fr -> 2.8fr). */
    grid-template-columns: .9fr .5fr 2.8fr;
    gap: 24px
}

/* Contact now comes first in its shared column, with the logo/
   description/social icons below it, so the top margin that used to
   separate Contact from the icons above it moves onto the logo block
   instead. */
.footer-logo-group {
    margin-top: 10px;
}

/* Just the 6 category names now (the individual service links that used
   to be listed under each one were removed from the footer) — a short,
   even list, so 3 columns of 2 reads better than the old 5-column spread
   that was tuned for a much taller list of sub-links. */
.footer-services-cols {
    column-count: 3;
    column-gap: 12px;
}

.footer-service-group {
    break-inside: avoid;
    margin-bottom: 4px;
}

.footer-service-group-title {
    display: block;
    /* Editable (Customizer: Section: Footer -> Footer Font & Text ->
       Service Group Title Font) — just these group names (e.g.
       "Preventive & Diagnostic Care"), not the sub-service links listed
       under each one. */
    font-family: var(--footer-service-group-font, 'Roboto', sans-serif);
    /* Same purple as every .eyebrow on the site (was a lighter lavender,
       then --purple-light — now matched exactly to the eyebrow color). */
    color: var(--purple) !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .02em;
    margin: 0 0 1px !important;
}

.footer-service-group a:not(.footer-service-group-title) {
    font-size: 12px;
    margin: 0 0 3px !important;
    line-height: 1.3;
}

.footer .logo {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.footer p {
    /* Editable (Customizer: Section: Footer -> Footer Font & Text ->
       Footer Description Text / Footer Description Font). Was hardcoded
       with no way to edit the text or change its font. */
    font-family: var(--footer-desc-font, 'Roboto', sans-serif);
    font-size: 12px;
    line-height: 1.3;
    margin: 0 0 6px;
    max-width: 390px
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

/* .footer a already sets display:block/margin on every link — these
   selectors are scoped a step more specific so the icon links keep their
   own circular layout instead of stacking like the text links above.
   Bigger circle with a soft lavender-to-white-to-gold tinted glass
   background (mixing in the site's purple + a touch of white alongside
   the gold, instead of gold alone), a gold border matching the buttons,
   and a crisp white icon that stays legible against all three tints. */
.footer a.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(155, 111, 181, .28) 0%, rgba(255, 255, 255, .16) 50%, rgba(169, 127, 73, .22) 100%);
    border: 1px solid var(--champ-dark);
    color: #fff;
    transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}

.footer a.social-icon:hover,
.footer a.social-icon:focus-visible {
    background: var(--champ-dark);
    border-color: var(--champ-dark);
    color: #fff;
    transform: translateY(-2px);
}

.social-icon svg {
    width: 12px;
    height: 12px;
}

/* Uppercase, letter-spaced, lavender-colored, flanked by a short
   champagne/gold accent line on each side — the same "— LABEL —" accent
   treatment used by every section's .eyebrow elsewhere on the site,
   instead of the old plain underline, so the footer actually ties back
   into the site's gold accent instead of reading as flat white text. */
.footer h4 {
    /* Editable (Customizer: Section: Footer -> Footer Font & Text) —
       just these 3 title headers ("Explore", "Services", "Contact").
       Everything under them (links, address, copyright) is NOT affected
       and stays on the sitewide body font. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--footer-font, 'Roboto', sans-serif);
    /* Same exact purple as every other section's .eyebrow (was
       --purple-light, a close but different shade that read as off/
       darker against the dark footer background). */
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 4px;
}

.footer h4:before,
.footer h4:after {
    content: '';
    width: 8px;
    height: 1px;
    background: var(--champ);
}

.footer a {
    display: block;
    /* Same size for every link under both "Explore" and "Contact", with
       a small gap between consecutive lines so they're easier to read
       and tap individually instead of running together. */
    font-size: 12px;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #C9D6DC;
    transition: color .15s ease;
}

/* Every plain footer link (Explore, Contact, the category names under
   Services) now actually shows something on hover — previously only the
   round social icons had a hover state, so every other link just sat
   there with no feedback. Champagne/gold, the same accent already used
   for the footer's top border and the "EXPLORE"/"SERVICES" heading
   accents, so it reads as this site's color rather than a generic one. */
.footer a:hover,
.footer a:focus-visible {
    color: var(--champ);
}

/* The category titles set their own purple with !important (so it reads
   consistently regardless of any other rule), so the hover override
   needs the same weight to actually take effect. */
.footer-service-group-title:hover,
.footer-service-group-title:focus-visible {
    color: var(--champ) !important;
}

.footer li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 8px;
    padding-top: 5px;
    font-size: 11px;
    display: flex;
    justify-content: space-between
}

.nav-cta {
    display: flex;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: .7s ease
}

.reveal.show {
    opacity: 1;
    transform: none
}

.wp-block-button__link {
    border-radius: 0
}

@media(max-width:850px) {
    /* Below this width the topbar's two pieces (message + phone) no
       longer have room to sit at opposite ends of the full-width bar the
       way they do on desktop — centered as a single group reads better
       once there's a lot of empty space between them at tablet width. */
    .topbar .container {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* .navin is a 3-column grid on desktop (logo / menu / actions) so the
       actions land on the right. Below this width .links (the menu) is
       taken out of that grid entirely (position:absolute, right below) —
       with nothing left to fill the middle column, the grid collapsed to
       just its two outer auto-sized columns sitting side by side at the
       LEFT edge, dragging "Book an Appointment" + the menu icon right up
       against the logo instead of the right edge. Switching to a plain
       flex row with space-between puts the logo and the actions back at
       opposite ends of the bar, same as the 3-column grid did on desktop. */
    .navin {
        display: flex;
        justify-content: space-between;
    }

    .links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ivory);
        /* The nav bar itself is now dark (see .nav), but this dropdown
           panel keeps its own light background regardless of screen size
           — without resetting the color here it would inherit the dark
           nav's white text, which disappears against this light panel. */
        color: var(--char);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        box-shadow: var(--shadow);
        padding: 10px 0;
        max-height: calc(100vh - 78px);
        overflow-y: auto;
    }

    .links.is-open {
        display: flex;
        justify-content: flex-start;
    }

    /* The dropdown panel spans the full viewport width (left:0; right:0
       above), but each link was only left-aligned inside it — centering
       the text reads much better against that full-width panel, and
       matches the centered logo/nav layout above it. */
    .links a {
        padding: 14px 24px;
        text-align: center;
    }

    /* Sub-menu items stack inside the mobile panel itself (static, not
       the absolutely-positioned desktop dropdown above), indented so
       they still read as children of the item above them. */
    .sub-menu {
        background: rgba(0, 0, 0, .035);
    }

    .sub-menu a {
        padding: 12px 24px 12px 40px;
        font-size: 13px;
        color: var(--char);
    }

    .nav-toggle {
        display: flex;
    }

    /* "Book an Appointment" used to be swapped out for a bare "Book" button
       below this breakpoint — kept full text visible everywhere instead,
       just tightened up so it still fits neatly beside the menu icon. */
    .nav-cta .btn {
        padding: 7px 12px;
        font-size: 11.5px;
    }

    .hero-grid,
    .split,
    .comfort-grid,
    .contact-grid {
        grid-template-columns: 1fr
    }

    .hero-grid {
        padding: 40px 0
    }

    .hero {
        padding: 45px 0 55px;
    }

    /* The offset accent block behind the About/Doctor photo (sized for
       desktop's wider two-column layout) was still using the full
       desktop inset here even though .split above has already dropped
       to a single column — on a tablet-width screen that let it push
       past the photo's edge instead of sitting neatly behind it. This
       gives tablet its own smaller value instead of inheriting
       desktop's; the ≤560px phone rule further down tightens it again. */
    .photo-frame:before {
        inset: 18px -16px -16px 18px;
    }

    /* Free-form dragging (Hero Layout) is a desktop/wide-tablet feature —
       a layout tuned by eye on a wide screen can easily overlap once the
       banner narrows, and there's no reflow safety net the way normal
       flowing content has. Below this width, drop the exact percent
       placement and fall back to a simple, predictable, centered stack
       instead: headline, then buttons, then badge (align-items: center
       does the centering here rather than margin:auto, since that
       reliably centers a flex/inline-flex box the way a plain margin
       trick doesn't). */
    .hero-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* !important on transform here because .hero-draggable.reveal.show
       (further up this file) is a higher-specificity rule that would
       otherwise win this tie and re-apply the desktop centering
       transform even though position is static below. */
    .hero-draggable {
        position: static;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 480px;
        margin: 0 0 20px;
    }

    /* Gap Between Eyebrow 1 & 2 on Tablet/Phone (Customizer: Hero Layout)
       — higher specificity than the plain .hero-draggable rule above (an
       attribute selector beats a lone class regardless of source order),
       so this overrides just its margin-top, tightening the space between
       the two eyebrow lines specifically without touching the standard
       20px gap every other stacked hero line still uses below it. */
    .hero-draggable[data-hero-pos="eyebrow2"] {
        margin-top: var(--hero-eyebrow2-mobile-gap, 6px);
    }

    /* The two buttons are grouped (.hero-buttons-group, display:contents
       on desktop) so they stay side by side here instead of each taking
       the full stacked width above — higher specificity than the plain
       .hero-draggable rule above, so it wins regardless of source order. */
    .hero-buttons-group {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
        margin: 0 0 20px;
    }

    .hero-buttons-group .hero-draggable {
        width: auto;
        max-width: none;
        margin: 0;
    }

    /* Also drop out of the stack's flow into it — otherwise, pinned to
       the bottom of the now-tall stacked .hero-grid, it lands on top of
       the badge instead of below it. */
    .hero-photo-notice {
        position: static;
        transform: none;
        margin-top: 4px;
    }

    .hero-note {
        margin: 0;
    }

    .cards,
    .specials-grid,
    .comfort-list,
    .reviews-grid {
        grid-template-columns: 1fr 1fr
    }

    .footergrid {
        grid-template-columns: 1fr 1fr
    }

    /* The services column is now sharing a half-width slot instead of
       its own wide column at this width, so 3 columns of text would be
       cramped — drop to 2 until the single-column mobile layout below. */
    .footer-services-cols {
        column-count: 2;
    }
}

@media(max-width:560px) {
    .container {
        width: min(100% - 28px, 1160px)
    }

    /* One more notch down for the narrowest phones, so "Book an
       Appointment" + the menu icon never crowd the logo. */
    .nav-cta .btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .nav-right {
        gap: 8px;
    }

    h1 {
        font-size: 40px
    }

    .hero {
        padding: 40px 0 50px;
    }

    .hero-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cards,
    .specials-grid,
    .comfort-list,
    .reviews-grid,
    .formgrid,
    .footergrid {
        grid-template-columns: 1fr
    }

    .footer-services-cols {
        column-count: 1;
    }

    /* Extra breathing room between footer link lines specifically on
       phone — single-column stacking means every link in Explore,
       Contact, and Services runs down one long list, so each line
       needs a bit more room than on desktop/tablet to read cleanly and
       be tapped without hitting the line above/below it. */
    .footer a {
        margin: 0 0 10px;
    }

    .footer-service-group a:not(.footer-service-group-title) {
        margin: 0 0 6px !important;
    }

    .footer-service-group {
        margin-bottom: 10px;
    }

    /* On phone the footer stacks into one column — reorder so Contact
       ends up last overall instead of first. The brand column (logo/
       description/social/Contact) moves after Explore and Services,
       and Contact itself moves to the bottom within that column (it
       sits first on desktop/tablet, above the logo). */
    .footer-explore-col {
        order: 1;
    }

    .footer-services {
        order: 2;
    }

    .footer-brand-col {
        order: 3;
        display: flex;
        flex-direction: column;
    }

    .footer-logo-group {
        order: 1;
        /* Was 10px to separate it from Contact above it on desktop —
           it's first in the stack here instead, so no top gap needed. */
        margin-top: 0;
    }

    /* Logo graphic hidden on phone — the "mybh." (or whatever Logo Text
       is set to) text label next to it still shows, this just drops the
       image icon itself at this width. Scoped to the footer specifically
       (.logo-img is reused by the header logo too, which should stay
       visible on phone). */
    .footer-logo-group .logo-img {
        display: none;
    }

    .footer-brand-col > p {
        order: 2;
    }

    .social-links {
        order: 3;
    }

    .footer-contact-group {
        order: 4;
        margin-top: 10px;
    }

    .split {
        gap: 35px
    }

    .feature-art {
        min-height: 360px
    }

    .feature-art.about-slider {
        height: 360px;
    }

    /* No hover on a touch screen to reveal these, so keep them visible
       (at a slightly lower opacity than the desktop hover state, so they
       don't fight with the photo for attention). */
    .about-slider-arrow {
        opacity: 1;
        background: rgba(22, 35, 46, .35);
    }

    /* The offset accent block and badge use negative insets/positions
       sized for desktop's wider gutters — shrunk here so neither one
       pushes past the edge of a narrow screen and causes side-scroll. */
    .photo-frame:before {
        inset: 14px -12px -12px 14px;
    }

    .photo-badge {
        width: 76px;
        height: 76px;
        left: -14px;
        bottom: -14px;
    }

    .copyright {
        flex-direction: column;
        gap: 8px
    }

    .navin {
        height: 68px
    }
}

/* =========================================================
 * PAGE HEADER (all WordPress Pages — page.php)
 * ---------------------------------------------------------
 * The site's global h1 rule is sized for the homepage hero
 * (clamp(48px, 6vw, 76px)), which made every Page's title look
 * oversized and out of place. This gives Pages their own header band —
 * a soft-tint banner with a small breadcrumb and a properly scaled
 * heading — instead of a bare, huge h1 sitting at the top of the page.
 * ========================================================= */

.page-header {
    background: linear-gradient(180deg, var(--lav) 0%, var(--ivory) 100%);
    border-bottom: 1px solid var(--line);
    padding: 40px 0 32px;
    text-align: center;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--purple);
}

.breadcrumb a {
    color: var(--purple);
    opacity: .8;
}

.breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
}

.breadcrumb-sep {
    opacity: .5;
}

.breadcrumb-current {
    color: var(--plum);
    font-weight: 500;
}

.page-title {
    font-size: clamp(30px, 3.4vw, 44px);
    color: var(--plum);
    margin: 0;
    letter-spacing: -.02em;
}

.page-content {
    padding: 40px 0 56px;
    min-height: 40vh;
}

.page-body {
    max-width: 850px;
    margin: 0 auto;
}

.page-body p {
    margin-bottom: 20px;
}

/* =========================================================
 * CONTACT FORM POPUP (success/error toast)
 * ---------------------------------------------------------
 * Floats over the corner of the screen instead of sitting inline in the
 * page — fades in, stays for ~7s, fades itself out via CSS animation
 * (no JS needed for that part), and can be dismissed early with the close
 * button (assets/js/main.js wires that click).
 * ========================================================= */
.mybh-toast {
    position: fixed;
    top: 110px;
    right: 24px;
    z-index: 999;
    max-width: 380px;
    padding: 16px 42px 16px 18px;
    border-radius: 0;
    box-shadow: 0 18px 40px rgba(22, 35, 46, .22);
    font-size: 14px;
    line-height: 1.55;
    animation: mybh-toast-in .35s ease-out both, mybh-toast-out .4s ease-in 7s forwards;
}

.mybh-toast-success {
    background: #eaf6ec;
    border: 1px solid #bfe4c6;
    color: #1e6b30;
}

.mybh-toast-error {
    background: #fbeaea;
    border: 1px solid #f0bcbc;
    color: #8a2222;
}

.mybh-toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .6;
}

.mybh-toast-close:hover,
.mybh-toast-close:focus-visible {
    opacity: 1;
}

@keyframes mybh-toast-in {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mybh-toast-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media (max-width: 560px) {
    .mybh-toast {
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 14px;
        max-width: none;
    }
}

/* Before & After ([mybh_before_after] shortcode — see functions.php).
   Size comes from Appearance > Customize > Before & After Photos (one
   slider, applies to every pair on the site) — never edit the number
   below by hand, it's just the fallback used before that's touched. */
.mybh-before-after {
    max-width: var(--mybh-ba-max-width, 400px);
    margin: 30px auto;
}

.mybh-ba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mybh-ba-item {
    margin: 0;
    text-align: center;
}

.mybh-ba-photo {
    aspect-ratio: 4 / 3;
    /* Square corners, no rounding. */
    border-radius: 0;
    overflow: hidden;
    background: var(--lav);
    box-shadow: var(--shadow);
}

.mybh-ba-photo img {
    display: block;
    width: 100%;
    height: 100%;
    /* "contain" instead of "cover" — the whole photo always shows,
       nothing gets cropped out of the middle. */
    object-fit: contain;
}

/* Sits above the photo, outside it — not overlapping the picture. */
.mybh-ba-badge {
    display: inline-block;
    margin: 0 0 3px;
    background: rgba(22, 35, 46, .85);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 0;
    white-space: nowrap;
}

.mybh-ba-badge-after {
    background: var(--purple);
}

.mybh-ba-caption {
    text-align: center;
    margin: 14px 0 0;
    color: var(--char);
    font-size: 15px;
}

@media (max-width: 520px) {
    .mybh-ba-grid {
        gap: 8px;
    }

    .mybh-ba-badge {
        font-size: 9px;
        padding: 2px 8px;
        margin-bottom: 2px;
    }
}


/* Extra Content Block ([Appearance > Customize > Extra Content Block] —
   see front-page.php / functions.php). Renders whatever the chosen Page
   contains via the normal block editor, so this just brings its look
   in line with the rest of the homepage (fonts, colors, spacing);
   WordPress's own block-library styles handle the actual layout. */
.mybh-extra-content .container {
    max-width: 780px;
}

.mybh-extra-content h1,
.mybh-extra-content h2,
.mybh-extra-content h3,
.mybh-extra-content h4 {
    font-family: 'Roboto', sans-serif;
    color: var(--plum);
}

.mybh-extra-content p {
    color: var(--char);
    line-height: 1.7;
}

.mybh-extra-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

.mybh-extra-content .wp-block-button__link {
    background: var(--purple);
    border-radius: 0;
    font-weight: 500;
}

.mybh-extra-content .wp-block-columns,
.mybh-extra-content .wp-block-gallery {
    max-width: 100%;
}

/* City / Service Area Page template (page-city.php) — the "Now
   Welcoming Patients From This Area" eyebrow sits directly above the
   page title in the plain page header, which doesn't otherwise add
   spacing between an eyebrow and what follows it. */
.page-header .eyebrow {
    margin: 6px 0 14px;
}

/* City / Service Area Page template (page-city.php) — the closing
   "Call Now" / "Get in Touch" prompt, replacing a second full contact
   form on every city page. */
.city-cta {
    background: linear-gradient(180deg, var(--ivory) 0%, var(--lav) 100%);
    border-top: 1px solid var(--line);
}

.city-cta h2 {
    margin-bottom: 10px;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

@media (max-width: 520px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Removes the offset accent block behind the About section photo (the
   second "frame" peeking out from the corner) — the photo itself still
   shows in its plain rounded frame. Scoped to #about only, so the
   Doctor section's matching accent block is untouched. */
#about .photo-frame:before {
    display: none;
}

/* =========================================================
 * OFFICE GALLERY (Customizer: Section: Office Gallery)
 * ---------------------------------------------------------
 * A sliding strip of office/facility photo cards, between About and
 * Dentist. Same no-JS marquee technique as Associations & Memberships
 * (.logos-marquee/.logos-track) — the track is rendered twice back-to-
 * back when sliding so the loop is seamless — just with bigger photo
 * cards instead of small logos.
 * ========================================================= */
.office-gallery {
    background: linear-gradient(rgba(246, 241, 248, .86), rgba(246, 241, 248, .86)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
}

.office-gallery-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.office-gallery-marquee.is-static {
    -webkit-mask-image: none;
    mask-image: none;
}

.office-gallery-track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
}

.office-gallery-marquee.is-sliding .office-gallery-track {
    animation: mybh-office-gallery-scroll 34s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
    .office-gallery-marquee.is-sliding:hover .office-gallery-track {
        animation-play-state: paused;
    }
}

.office-gallery-marquee.is-static .office-gallery-track {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.office-gallery-item {
    flex: 0 0 auto;
    width: 300px;
    height: 210px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.office-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes mybh-office-gallery-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .office-gallery-marquee.is-sliding .office-gallery-track {
        animation: none;
    }
}

@media (max-width: 600px) {
    .office-gallery-item {
        width: 220px;
        height: 160px;
    }

    .office-gallery-track {
        gap: 16px;
    }
}

/* =========================================================
 * WHY CHOOSE US (Customizer: Section: Why Choose Us)
 * ---------------------------------------------------------
 * A simple 4-item grid of practice differentiators, between Services and
 * Current Specials — icon, title, and one line of supporting text each.
 * ========================================================= */
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 44px;
}

.why-us-item {
    text-align: center;
    padding: 4px;
}

.why-us-icon {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 16px;
}

.why-us-item h3 {
    margin: 0 0 8px;
    font-size: 17px;
    color: var(--plum);
}

.why-us-item p {
    margin: 0;
    color: var(--char);
    font-size: 14.5px;
}

@media (max-width: 850px) {
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .why-us-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* =========================================================
 * CLOSING CTA (Customizer: Section: Closing CTA)
 * ---------------------------------------------------------
 * A short, high-contrast closing banner right before the Contact
 * section's form — deliberately simple (no photo option) so it reads as
 * a clean visual break/"last chance" nudge toward booking.
 * ========================================================= */
.closing-cta {
    background: linear-gradient(rgba(22, 35, 46, .92), rgba(22, 35, 46, .92)), url('assets/img/marble-bg.jpg');
    background-repeat: repeat;
    color: #fff;
    text-align: center;
}

.closing-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}

.closing-cta h2 {
    color: #fff;
    margin: 0 0 12px;
}

.closing-cta p {
    color: var(--champ);
    margin: 0 0 28px;
    font-size: 16px;
}