/* ==========================================================================
   St. Paul Chiropractic & Natural Medicine Center
   Palette and type taken from the live site's Elementor kit (elementor-kit-8):
     purple  #6A0DAD / accent #75479C   gold #A97228   forest #39473E
     ink     #2D2C2E                    lavender wash #F3EDF5 / #FCF9FF
   Type: body + headings Open Sans; hero display Playfair Display;
         buttons Montserrat; link hover falls to gold.
   ========================================================================== */

:root {
    --purple: #6a0dad;
    --purple-deep: #520a8a;
    --purple-accent: #75479c;
    --purple-soft: #f3edf5;
    --purple-mist: #fcf9ff;
    --gold: #a97228;
    --gold-light: #efca98;
    --forest: #39473e;
    --ink: #2d2c2e;
    --ink-soft: #555555;
    --line: #e5e5e5;
    --white: #ffffff;
    --off-white: #fefdff;
    /* Button hover text colour from the live kit. */
    --btn-hover-ink: #e8dada;

    --font-body: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* Headings inherit the body face on the live site — only the home hero
       switches to a display serif. */
    --font-head: var(--font-body);
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-ui: "Montserrat", var(--font-body);
    --font-nav: "Assistant", var(--font-body);

    --shell: 1400px;
    --radius: 10px;
    --radius-lg: 18px;
    --shadow-sm: 0 2px 10px rgba(45, 44, 46, .07);
    --shadow-md: 0 10px 30px rgba(45, 44, 46, .10);
    --shadow-lg: 0 24px 60px rgba(82, 10, 138, .16);
    --header-h: 110px;
}

*, *::before, *::after { box-sizing: border-box; }

/* `clip` rather than `hidden`: it stops the off-canvas nav drawer from
   widening the document on mobile without creating a scroll container, so the
   sticky header keeps working. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--white);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 .6em;
    font-weight: 500;
}

/* Desktop sizes match the live site's heading scale (2.5 / 2 / 1.75 / 1.5 /
   1.25rem); the clamps only shrink them on narrow viewports. */
h1 { font-size: clamp(1.95rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Live site: links are accent purple and warm to gold on hover. */
a { color: var(--purple-accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--gold); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25rem; }
li { margin-bottom: .45em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

:focus-visible { outline: 3px solid var(--purple-accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--purple); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1.25rem; }
.shell--narrow { max-width: 860px; }

/* The live site runs an 80px block rhythm on nearly every section. */
.section { padding: 80px 0; }
.section--tight { padding: 60px 0; }
@media (max-width: 767px) {
    .section { padding: 48px 0; }
    .section--tight { padding: 36px 0; }
}
.section--mist { background: var(--purple-mist); }
.section--soft { background: var(--purple-soft); }
.section--ink { background: var(--ink); color: #efeaf1; }
.section--ink h2, .section--ink h3 { color: #fff; }

.section-head { max-width: 780px; margin: 0 0 2.75rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.kicker {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .85rem;
}
.kicker--purple { color: var(--purple-accent); }

/* Section eyebrows on the live site are plain h5-scale headings in ink, not
   small gold capitals. Card-level kickers keep the compact treatment above. */
.section-head .kicker {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    margin-bottom: .35rem;
}

.lead { font-size: 1.13rem; color: var(--ink-soft); }

/* Small h6-scale subhead sitting under a section h2, as on the live site. */
.subhead { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 1.4rem; }

/* Purple text-link row used in place of buttons in some sections. */
.inline-links { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.inline-links span { color: var(--purple-accent); opacity: .6; }
.section--ink .lead { color: #cdc5d6; }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 80px;
    align-items: center;
}
/* Column gaps vary by section on the live site. */
.split--tight { gap: 10px; }
.split--wide { gap: 55px; align-items: stretch; }
@media (max-width: 767px) { .split { gap: 40px; } }

/* ---------- Buttons --------------------------------------------------- */

/* Live kit: Montserrat 16px/600, accent-purple fill, 3px corners, no lift and
   no glow — the hover only shifts the label to a warm off-white. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-ui);
    font-size: 1rem; font-weight: 600; line-height: 1.2;
    padding: 12px 24px;
    border-radius: 3px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--purple-accent); color: #fff; }
.btn--primary:hover { background: var(--purple-deep); color: var(--btn-hover-ink); }

/* The home hero's CTA is forest green on the live site, purple on hover. */
.btn--forest { background: var(--forest); color: #fff; }
.btn--forest:hover { background: var(--purple-accent); color: var(--btn-hover-ink); }

.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #8f5f1f; color: var(--btn-hover-ink); }

.btn--outline { border-color: var(--purple-accent); color: var(--purple-accent); background: transparent; }
.btn--outline:hover { background: var(--purple-accent); color: #fff; }

.btn--light { background: #fff; color: var(--purple-accent); }
.btn--light:hover { background: var(--purple-soft); color: var(--purple-deep); }

.btn--ghost-light { border-color: rgba(255, 255, 255, .65); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--purple); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.btn-row--center { justify-content: center; }

.link-arrow { font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Top bar + header ------------------------------------------ */

/* Live site: full-bleed purple bar, 17px sentence case, no badge dot. */
.topbar {
    background: var(--purple-deep);
    color: #fff;
    font-size: 17px;
}
.topbar .shell {
    max-width: none;
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    align-items: center; justify-content: space-between;
    min-height: 40px; padding-block: .35rem;
}
.topbar a { color: #fff; font-weight: 600; }
.topbar__badge { display: inline-flex; align-items: center; }
.topbar__right { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
}
/* backdrop-filter makes the header a containing block for fixed-position
   descendants, which traps the off-canvas nav drawer inside the header box.
   Only apply it above the breakpoint where that drawer exists. */
@media (min-width: 1081px) {
    .site-header { backdrop-filter: saturate(160%) blur(8px); }
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header .shell {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark { flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
    font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--purple-deep);
    letter-spacing: -.2px;
}
.brand__sub { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); font-weight: 700; }

/* ---------- Navigation ------------------------------------------------ */

.nav-toggle {
    display: none;
    background: var(--purple); border: 0; color: #fff;
    width: 46px; height: 42px; border-radius: var(--radius);
    align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; align-items: center; gap: .25rem; }
.main-nav li { margin: 0; }

/* Live kit: nav links are Assistant 17px/500 in accent purple. */
.main-nav > ul > li > a,
.main-nav > ul > li > .nav-parent {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .6rem .9rem;
    font-family: var(--font-nav);
    font-size: 17px; font-weight: 500; color: var(--purple-accent);
    background: none; border: 0; cursor: pointer;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > .nav-parent:hover,
.main-nav > ul > li.is-open > .nav-parent {
    color: var(--purple); background: var(--purple-soft); text-decoration: none;
}
.main-nav a.is-active { color: var(--purple); }
.main-nav a.is-active::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .25rem; height: 2px; background: var(--purple);
}
.main-nav > ul > li { position: relative; }

.nav-parent__caret { width: 9px; height: 9px; transition: transform .2s ease; }
.main-nav li.is-open .nav-parent__caret { transform: rotate(180deg); }

.submenu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.main-nav li.is-open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
    display: block; padding: .55rem .75rem; border-radius: 6px;
    font-size: .9rem; color: var(--ink); text-decoration: none;
}
.submenu a:hover { background: var(--purple-soft); color: var(--purple); text-decoration: none; }

.nav-cta { display: inline-flex; }

@media (max-width: 1080px) {
    .nav-toggle { display: inline-flex; }
    .nav-cta { display: none; }
    .main-nav {
        position: fixed; inset: calc(var(--header-h) + 42px) 0 0 auto;
        width: min(360px, 88vw);
        background: #fff;
        border-left: 1px solid var(--line);
        box-shadow: -12px 0 40px rgba(45, 44, 46, .18);
        padding: 1.25rem;
        overflow-y: auto;
        transform: translateX(102%);
        transition: transform .26s ease;
        z-index: 70;
    }
    .main-nav.is-open { transform: translateX(0); }
    .main-nav > ul { flex-direction: column; align-items: stretch; gap: .15rem; }
    .main-nav > ul > li > a,
    .main-nav > ul > li > .nav-parent { width: 100%; justify-content: space-between; padding: .8rem .65rem; font-size: 1rem; }
    .submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-left: 2px solid var(--purple-soft);
        border-radius: 0; margin: 0 0 .4rem .65rem; padding: 0 0 0 .5rem;
        display: none;
    }
    .main-nav li.is-open > .submenu { display: block; }
    .nav-scrim {
        position: fixed; inset: 0; background: rgba(45, 44, 46, .45);
        /* Must sit BELOW .site-header (z-index 60). The header's sticky z-index
           makes it a stacking context, so the drawer's own z-index only counts
           inside the header; a scrim above 60 would cover the drawer and
           swallow every tap on it. */
        opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s; z-index: 55;
    }
    .nav-scrim.is-open { opacity: 1; visibility: visible; }
}

/* ---------- Hero ------------------------------------------------------ */

.hero {
    position: relative;
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(169, 114, 40, .22), transparent 62%),
        linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 48%, var(--purple-accent) 100%);
    color: #fff;
    overflow: hidden;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .5; pointer-events: none;
}
.hero .shell { position: relative; z-index: 1; }
.hero h1, .hero h2 { color: #fff; }

/* Home hero: full-height clinic photograph under a 37% ink wash, with a
   translucent white card resting on the bottom-left — as on the live site. */
.hero--home {
    min-height: min(100vh, 820px);
    display: flex;
    align-items: flex-end;
    padding: 0;
    color: var(--ink);
    background:
        linear-gradient(rgba(45, 44, 46, .37), rgba(45, 44, 46, .37)),
        url("../images/home/25-years.webp") bottom center / cover no-repeat;
}
.hero--home::after { content: none; }
.hero--home .shell { padding: 100px 100px 200px; }

.hero__card {
    width: min(655px, 100%);
    background: rgba(255, 255, 255, .7);
    padding: 50px;
    box-shadow: 28px 11px 34px rgba(0, 0, 0, .22);
    text-align: left;
}

@media (max-width: 1024px) {
    .hero--home .shell { padding: 60px 35px 120px; }
    .hero__card { width: min(100%, 655px); padding: 40px; }
}
@media (max-width: 767px) {
    .hero--home .shell { padding: 40px 20px 64px; }
    .hero__card { padding: 24px; }
}
.hero--home h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -1.5px;
    color: var(--ink);
    margin-bottom: .35rem;
}
.hero__sub {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: -1.8px;
    color: var(--ink);
    margin-bottom: .9rem;
}
.hero--home .hero__lead { color: var(--ink); max-width: none; font-size: 17px; }
.hero--home .btn-row { justify-content: flex-start; }

.hero__tagline {
    font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
    font-weight: 700; color: var(--gold-light); margin-bottom: 1rem;
}
.hero__lead { font-size: 1.16rem; color: #ece4f4; max-width: 46ch; }
.hero .btn-row { margin-top: 2rem; }

/* Inner-page hero: a lavender band carrying a charcoal panel of white text —
   the live site's page-title template, not the purple gradient. */
.hero--page {
    background: var(--purple-soft);
    color: var(--ink);
    padding: 60px 30px;
}
.hero--page::after { content: none; }
.hero--page .shell { max-width: 1440px; }
.hero--page .hero__inner {
    width: 45%;
    min-width: min(630px, 100%);
    max-width: 630px;
    background: var(--ink);
    color: #efeaf1;
    padding: 75px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero--page h1 { font-size: 40px; color: #fffeff; }
.hero--page .hero__lead { max-width: 62ch; }
/* Optional photo filling the space to the right of the charcoal panel. */
.hero--with-media .shell { display: flex; align-items: center; gap: 48px; }
.hero--with-media .hero__media { flex: 1; min-width: 0; }
/* Uncropped photo: kept at its own shape, capped to the panel's height. */
.hero__media--natural { display: flex; justify-content: center; }
.hero__media--natural img {
    width: auto; max-width: 100%; height: auto; max-height: 460px; display: block;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
/* Flush: the photo meets the panel edge and matches its height. */
.hero--flush .shell { gap: 0; align-items: stretch; }
.hero--flush .hero__media { border-radius: 0; box-shadow: none; }
.hero--flush .hero__media img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 25%; }
@media (max-width: 1099px) {
    .hero--flush .hero__media img { height: auto; aspect-ratio: 16 / 9; }
    .hero--with-media .shell { flex-direction: column; align-items: stretch; gap: 32px; }
    .hero--with-media .hero__inner { width: 100%; max-width: none; }
}
@media (max-width: 767px) {
    .hero--page { padding: 32px 0; }
    .hero--page .hero__inner { padding: 40px 24px; min-width: 0; max-width: none; width: 100%; }
    .hero--page h1 { font-size: clamp(1.9rem, 7vw, 40px); }
}

.breadcrumbs {
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
    list-style: none; margin: 0 0 1.1rem; padding: 0;
    font-size: .84rem; color: #d8cbe8;
}
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
.breadcrumbs a { color: #fff; text-decoration: none; opacity: .9; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--gold-light); }

.hero-card {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    backdrop-filter: blur(6px);
}
.hero-card h3 { color: #fff; font-size: 1.15rem; }
.hero-card dl { margin: 0; display: grid; gap: .5rem; }
.hero-card .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.hero-card .row dt { color: #d9cce9; margin: 0; }
.hero-card .row dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Cards ----------------------------------------------------- */

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.9rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d9c8e6; }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }
.card .link-arrow { margin-top: auto; padding-top: 1.1rem; }
.card--flat:hover { transform: none; }

.card__icon {
    width: 54px; height: 54px; border-radius: 14px;
    background: var(--purple-soft); color: var(--purple);
    display: grid; place-items: center;
    margin-bottom: 1.1rem;
}
.card__icon svg { width: 28px; height: 28px; }
.card__icon--gold { background: #f8efe1; color: var(--gold); }

.card--numbered { position: relative; padding-top: 2.4rem; }
.card__num {
    position: absolute; top: 1.4rem; right: 1.6rem;
    font-family: var(--font-head); font-size: 2.6rem; font-weight: 700;
    color: var(--purple-soft); line-height: 1;
}

/* ---------- Stats ----------------------------------------------------- */

.stat { text-align: center; padding: 1.5rem 1rem; }
.stat__value {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1;
    color: var(--purple); display: block;
}
.stat__suffix { color: var(--gold); }
.stat__label {
    display: block; margin-top: .35rem;
    font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.stat p { margin-top: .9rem; font-size: .95rem; color: var(--ink-soft); }

/* ---------- Media placeholders (no third-party imagery) --------------- */

.media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(160deg, var(--purple-soft), #fff);
}
.media svg, .media img { width: 100%; height: auto; display: block; }
.media--flat { box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
/* Crop to a consistent shape when source photos have mixed aspect ratios. */
.media--crop img { aspect-ratio: 4 / 3; object-fit: cover; }
.media--portrait img { aspect-ratio: 3 / 4; object-fit: cover; }
.media--wide img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Photo strip across the top of a card. */
.card__media {
    margin: -1.9rem -1.9rem 1.4rem;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--purple-soft);
}
.card__media img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.card:hover .card__media img { transform: scale(1.04); }

.portrait {
    width: 128px; height: 128px; border-radius: 50%;
    display: grid; place-items: center;
    overflow: hidden;
    background: linear-gradient(150deg, var(--purple) 0%, var(--purple-accent) 100%);
    color: #fff;
    font-family: var(--font-head); font-size: 2.2rem; font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 1.2rem;
    box-shadow: 0 12px 28px rgba(106, 13, 173, .25);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.portrait--lg { width: 190px; height: 190px; font-size: 3.2rem; }
.portrait--gold { background: linear-gradient(150deg, var(--gold) 0%, var(--gold-light) 100%); }

/* ---------- Video (click-to-load YouTube facade) ---------------------- */

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}
.video iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
.video__poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    padding: 0; border: 0; cursor: pointer;
    background: #000;
    display: block;
}
.video__poster img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: opacity .25s ease, transform .4s ease;
}
.video__poster:hover img { opacity: .82; transform: scale(1.03); }

.video__play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 48px;
    pointer-events: none;
}
.video__play svg { width: 100%; height: 100%; display: block; }
.video__play-bg { fill: #2d2c2e; fill-opacity: .82; transition: fill .2s ease, fill-opacity .2s ease; }
.video__poster:hover .video__play-bg { fill: var(--purple); fill-opacity: 1; }
.video__poster:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* Video inside a card: sit flush with the card's top edge. */
.card__media--video { background: #000; }
.card__media--video .video { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.video-card h3 { margin-bottom: .5rem; }

.video-strip { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Gallery grid */
.gallery { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gallery figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; border: 1px solid var(--line); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption { padding: .9rem 1.15rem; font-size: .9rem; color: var(--ink-soft); }

/* Brand logo in the header */
/* Live site renders the full wordmark at 300x89. */
.brand__logo { width: 300px; max-width: 100%; height: auto; display: block; }
@media (max-width: 767px) { .brand__logo { width: 220px; } }

/* Staff list: portrait beside name, role and an accordion bio. */
.staff-list { display: grid; gap: 40px; }
.staff-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: start; }
.staff-row__photo { width: 300px; max-width: 100%; height: auto; display: block; }
.staff-row__body h3 { margin-bottom: .15rem; }
.staff-row__body .accordion { margin: 1rem 0; }
.staff-row__body .accordion__trigger { padding-left: 0; }
.staff-row__body .accordion__panel { padding-left: 0; }
@media (max-width: 767px) { .staff-row { grid-template-columns: 1fr; } }
.staff-row__photo { border-radius: var(--radius-lg); }
.staff-row__body .role { color: var(--purple); font-weight: 600; margin-bottom: .5rem; }
.staff-row__body h4 { margin-top: 1.5rem; }
.staff-more { margin-top: 1rem; }
.staff-more > summary {
    display: inline-block; cursor: pointer; list-style: none; font-weight: 700; color: var(--purple);
    padding: .5rem 1.1rem; border: 1px solid var(--purple); border-radius: 999px; margin-bottom: 1rem;
}
.staff-more > summary::-webkit-details-marker { display: none; }
.staff-more[open] > summary { background: var(--purple); color: #fff; }
.staff-more[open] > summary::after { content: " \2013"; }

.team-card { text-align: center; align-items: center; }
.team-card .portrait { margin-inline: auto; }
.team-card h3 { margin-bottom: .2rem; }
.team-card .role {
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; color: var(--gold); margin-bottom: .9rem;
}

/* ---------- Quote / testimonials -------------------------------------- */

.quote {
    border-left: 4px solid var(--gold);
    background: var(--purple-mist);
    padding: 1.5rem 1.75rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--ink);
}
.quote cite { display: block; margin-top: .75rem; font-style: normal; font-weight: 700; font-size: .9rem; color: var(--purple); }

.carrier-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
@media (max-width: 640px) { .carrier-list { grid-template-columns: 1fr; } }
.content-actions { margin: 1rem 0 2rem; }

/* Request Appointment: slim title bar so the scheduler sits near the top of the screen. */
.booking-bar { background: var(--purple-soft); padding: 22px 0; }
.booking-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.booking-bar .kicker { margin: 0 0 .25rem; }
.booking-bar h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 .35rem; }
.booking-bar__lead { margin: 0; max-width: 70ch; color: var(--ink-soft); }
.booking-bar__call { white-space: nowrap; }
.booking-section { padding-top: 24px; }
.content-video { clear: both; margin: 1.5rem 0 2rem; max-width: 820px; }

/* Boxed CTA panel and patient story cards, restyled from the WordPress spc-* blocks. */
.callout-box {
    clear: both; margin: 2.5rem 0; padding: 32px 28px; text-align: center;
    background: #FCF9FF; border: 3px solid var(--purple); border-radius: 12px;
    box-shadow: 0 10px 20px rgba(106, 13, 173, .1);
}
.prose .callout-box__headline { margin: 0 0 .75rem; color: var(--purple); font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.3; }
.prose .callout-box p { color: #75479C; font-size: 1.08rem; }
.callout-box .content-actions { justify-content: center; margin: 1.25rem 0 0; }
.callout-box .content-actions .btn--primary { background: var(--gold, #A97228); border-color: var(--gold, #A97228); color: #fff; }
/* Click-to-open FAQ items (native details/summary). */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item > summary {
    list-style: none; cursor: pointer; position: relative; padding: 1rem 2.5rem 1rem 0;
    font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--purple); }
.faq-item[open] > summary { color: var(--purple); }
.faq-item[open] > summary::after { content: "\2013"; }
.faq-item__body { padding: 0 0 1rem; }

/* Testimonial wall (srt-video-testimonials): masonry-style columns of video and review cards. */
.testimonial-wall { column-count: 3; column-gap: 1.5rem; }
@media (max-width: 1024px) { .testimonial-wall { column-count: 2; } }
@media (max-width: 640px) { .testimonial-wall { column-count: 1; } }
.wall-card {
    break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1.5rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 14px 14px 18px;
}
.wall-card .video { border-radius: var(--radius); overflow: hidden; margin-bottom: .9rem; }
.wall-card blockquote { margin: 0 .35rem; font-size: .96rem; font-style: italic; color: var(--ink); }
.wall-card blockquote p { margin: 0 0 .6rem; }
.wall-card__footer { display: flex; flex-direction: column; gap: .15rem; margin: .75rem .35rem 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.wall-card__name { font-weight: 700; color: var(--purple); }
.wall-card__title { margin: 0 .35rem; font-weight: 600; font-size: .95rem; color: var(--ink); }
.wall-card__footer .stars { margin: 0; font-size: .95rem; }
.wall-card:not(:has(.video)) { padding-top: 22px; }
.review-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.review-link { text-decoration: none; color: inherit; }
.review-link h3 { font-size: 1.1rem; color: var(--purple); margin-bottom: .25rem; }
.review-link p { margin: 0; font-size: .92rem; }

/* "Explore More" info grid closing several service/condition pages. */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; }
.explore-grid h3 { font-size: 1.15rem; margin-bottom: .75rem; }
.explore-grid p { font-size: .94rem; }
.explore-links { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.explore-note { color: var(--purple); font-weight: 600; margin-bottom: .5rem; }
.explore-grid .hours-table { font-size: .85rem; }
.explore-grid .hours-table tr { display: block; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.explore-grid .hours-table tr:last-child { border-bottom: 0; }
.explore-grid .hours-table th, .explore-grid .hours-table td { display: block; padding: 0; border: 0; white-space: normal; }
.explore-grid__cta .btn { margin-top: .5rem; }

.nap-block { clear: both; margin: 2.5rem 0; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.prose .nap-block p { margin: 0 0 1rem; line-height: 1.7; color: var(--ink); }
.prose .nap-block__tagline { color: var(--purple); }
.story-grid { clear: both; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 2rem; }
.prose .story-card {
    margin: 0; padding: 20px 24px; font-style: normal; font-size: 1rem; color: var(--ink);
    background: linear-gradient(135deg, #fdfaff 0%, #f3ebf9 100%);
    border-left: 5px solid var(--purple); border-radius: 0 12px 12px 0;
    box-shadow: 2px 2px 10px rgba(106, 13, 173, .05);
}
.step-label { display: inline-block; margin: 2.75rem 0 .25rem; padding: .2rem .75rem; border-radius: 999px; background: var(--purple); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prose p.step-label, .prose > p.step-label:first-of-type { color: #fff; font-size: .8rem; line-height: 1.4; }
.prose .step-label + h3 { margin-top: .4rem; }
.note { background: var(--purple-mist); border-left: 4px solid var(--gold); padding: .9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; }

/* Two-column reference tables (credentials, phases, events). Rows stack on phones. */
.data-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 0; font-size: .97rem; background: #fff; }
.data-table caption { text-align: left; font-weight: 700; color: var(--purple); padding-bottom: .6rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.data-table thead th { background: var(--purple-mist); color: var(--ink); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.data-table tbody th { width: 34%; font-weight: 700; color: var(--ink); }
.data-table tbody th small { display: block; font-weight: 600; color: var(--purple); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.data-table td { color: var(--ink-soft); }
.data-table--3 tbody th { width: 30%; }
.data-table--3 td.data-table__when { width: 18%; white-space: nowrap; color: var(--purple); font-weight: 600; }
@media (max-width: 767px) {
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100% !important; }
    .data-table tr { border-bottom: 1px solid var(--line); padding: .75rem 0; }
    .data-table th, .data-table td { border: 0; padding: .2rem .25rem; }
    .data-table--3 td.data-table__when { white-space: normal; }
}

.testimonial {
    background: #fff; border-radius: var(--radius-lg); padding: 1.9rem;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; height: 100%;
}
.stars { color: var(--gold); letter-spacing: .15em; margin-bottom: .85rem; font-size: 1.05rem; }
.testimonial blockquote { margin: 0 0 1.1rem; font-size: 1rem; color: var(--ink); }
.testimonial footer { margin-top: auto; font-weight: 700; color: var(--purple); font-size: .93rem; }

/* ---------- Accordion (FAQ) ------------------------------------------- */

/* Live site strips accordions of all chrome: no border, no fill, 17px/400
   titles at 10px 20px. The +/- marker carries the affordance. */
.accordion { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.accordion__trigger {
    width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 17px; font-weight: 400; color: #1f2124;
    padding: 10px 44px 10px 20px; position: relative; line-height: 1.5;
}
.accordion__trigger:hover { color: var(--purple-accent); }
.accordion__trigger::after {
    content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-size: 1.35rem; font-weight: 400; color: var(--purple-accent); line-height: 1;
}
.accordion__trigger[aria-expanded="true"]::after { content: "\2013"; }
.accordion__trigger[aria-expanded="true"] { color: var(--purple-accent); }
.accordion__panel { padding: 0 20px 14px; color: var(--ink-soft); }
.accordion__panel[hidden] { display: none; }

/* ---------- Checklist ------------------------------------------------- */

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.checklist li { position: relative; padding-left: 2rem; margin: 0; color: var(--ink-soft); }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: .45em;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--purple-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236a0dad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.checklist--gold li::before {
    background-color: #f8efe1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a97228' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}

/* ---------- CTA bands ------------------------------------------------- */

/* Live site: flat charcoal band, lavender 32px heading, white copy. */
.cta-band {
    background: var(--ink);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.cta-band h2 { color: var(--purple-soft); font-size: 32px; }
.cta-band p { color: #fff; max-width: 62ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: 1.9rem; }

.cta-inline {
    background: var(--purple-soft);
    border-left: 4px solid var(--purple);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.5rem 1.75rem;
    margin: 2.25rem 0;
}
.cta-inline p { margin-bottom: 1rem; font-weight: 600; }

/* ---------- Prose ----------------------------------------------------- */

.prose h2 { margin-top: 2.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose p, .prose li { color: #3e3c41; }
.prose > p:first-of-type { font-size: 1.08rem; }

.article-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
    font-size: .88rem; color: #d8cbe8;
}

/* ---------- Forms ----------------------------------------------------- */

.form-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}
.form-card--on-dark { border-color: transparent; }

.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .4rem; color: var(--ink); }
.field .req { color: #b3261e; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--off-white);
    border: 1px solid #d9d4de;
    border-radius: var(--radius);
    padding: .8rem .95rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--purple-accent); box-shadow: 0 0 0 3px rgba(117, 71, 156, .18);
}
.field input.input-validation-error,
.field textarea.input-validation-error,
.field select.input-validation-error { border-color: #b3261e; background: #fff6f5; }

.field-check { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: 1.15rem; }
.field-check input { margin-top: .35rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--purple); }
.field-check label { font-size: .88rem; font-weight: 400; color: var(--ink-soft); line-height: 1.55; }

.field-validation-error, .validation-summary-errors {
    color: #b3261e; font-size: .85rem; font-weight: 600; display: block; margin-top: .35rem;
}
.validation-summary-errors {
    background: #fff6f5; border: 1px solid #f3c9c5; border-radius: var(--radius);
    padding: .9rem 1.1rem; margin-bottom: 1.25rem;
}
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.validation-summary-valid { display: none; }

.fine-print { font-size: .78rem; line-height: 1.6; color: #6d6873; }

.alert-success {
    background: #eef8f1; border: 1px solid #bde0c8; border-left: 4px solid #2e7d4f;
    border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.75rem;
}
.alert-success h3 { color: #1f5c39; margin-bottom: .35rem; font-size: 1.1rem; }
.alert-success p { color: #2f5c42; margin: 0; }

/* ---------- Info blocks ----------------------------------------------- */

.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; }
.info-list svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--purple); margin-top: .2rem; }
.info-list strong { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

.hours-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours-table th, .hours-table td { text-align: left; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.hours-table th { font-weight: 600; color: var(--ink); white-space: nowrap; padding-right: 1.25rem; }
.hours-table td { color: var(--ink-soft); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }

.pill-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.pill-row li { margin: 0; }
.pill {
    display: inline-block; padding: .4rem .9rem; border-radius: 999px;
    background: var(--purple-soft); color: var(--purple-deep);
    font-size: .84rem; font-weight: 600; text-decoration: none;
}
a.pill:hover { background: var(--purple); color: #fff; text-decoration: none; }

/* ---------- Footer ---------------------------------------------------- */

/* Live site's footer is light with centred columns; only the bottom bar is
   dark (pure black). */
.site-footer { background: #fff; color: var(--ink); padding: 60px 0 0; font-size: .95rem; }
.site-footer h2, .site-footer h3 { color: var(--ink); }
.site-footer a { color: var(--purple-accent); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }

.footer-lede { text-align: center; max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.footer-lede h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.footer-lede p { color: var(--ink-soft); letter-spacing: normal; text-transform: none; font-size: 1rem; font-weight: 400; }

.footer-grid {
    display: grid; gap: 2.25rem;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    padding-bottom: 2.75rem;
    text-align: center;
}
.footer-col h3 {
    font-size: 24px; font-weight: 500; letter-spacing: normal; text-transform: none;
    color: var(--ink);
    margin-bottom: 1.1rem;
}
.footer-logo { width: 260px; max-width: 100%; margin: 0 auto 1.1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .55rem; }
.footer-col address { font-style: normal; line-height: 1.8; }

.footer-hours { display: grid; gap: .3rem; font-size: .88rem; }
.footer-hours div { display: flex; justify-content: space-between; gap: .75rem; }
.footer-hours dt { color: var(--ink); margin: 0; font-weight: 600; }
.footer-hours dd { margin: 0; text-align: right; color: var(--ink-soft); }
/* Long hour strings wrap badly in two columns on a phone. */
@media (max-width: 767px) {
    .footer-hours div { flex-direction: column; align-items: center; gap: 0; margin-bottom: .35rem; }
    .footer-hours dd { text-align: center; }
}

.social-row { display: flex; gap: .6rem; margin-top: 1.1rem; justify-content: center; }
.social-row a {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--purple-soft);
    display: grid; place-items: center; color: var(--purple-accent);
    transition: background-color .18s ease, color .18s ease;
}
.social-row a:hover { background: var(--purple-accent); color: #fff; }
.social-row svg { width: 17px; height: 17px; }

/* Pure-black bar closes the page on the live site. */
.footer-bar-wrap { background: #000; margin-top: 1rem; }
.footer-bar {
    padding: 1.35rem 0;
    display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
    align-items: center; justify-content: center; text-align: center;
    font-size: .86rem; color: #cfcbd4;
}
.footer-bar a { color: #fff; }
.footer-bar a:hover { color: var(--gold-light); }
.footer-bar ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-bar li { margin: 0; }

.to-top {
    /* Bottom-left: the ReviewWave chat launcher owns the bottom-right corner. */
    position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 50;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--purple); color: #fff; border: 0; cursor: pointer;
    display: grid; place-items: center;
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, visibility .2s, transform .2s ease, background-color .18s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--purple-deep); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- Blog index: search + paging -------------------------------- */

.blog-search { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.blog-search input[type="search"] {
    flex: 1 1 280px;
    font-family: inherit; font-size: 1rem; color: var(--ink);
    background: var(--off-white);
    border: 1px solid #d9d4de; border-radius: 999px;
    padding: .8rem 1.25rem;
}
.blog-search input[type="search"]:focus {
    outline: none; border-color: var(--purple-accent); box-shadow: 0 0 0 3px rgba(117, 71, 156, .18);
}
.blog-count { color: var(--ink-soft); font-size: .92rem; margin-bottom: 2rem; }

.pager {
    display: flex; flex-wrap: wrap; gap: .4rem;
    align-items: center; justify-content: center;
    margin-top: 3rem;
}
.pager a, .pager__current, .pager__gap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 .75rem;
    border-radius: var(--radius);
    font-size: .93rem; font-weight: 600; text-decoration: none;
}
.pager a { color: var(--purple); border: 1px solid var(--line); background: #fff; }
.pager a:hover { background: var(--purple-soft); border-color: #d9c8e6; text-decoration: none; }
.pager__current { background: var(--purple); color: #fff; }
.pager__gap { color: var(--ink-soft); border: 0; min-width: 26px; padding: 0; }
.pager__step { font-weight: 700; }

/* ---------- Imported WordPress post bodies ---------------------------- */

.post-body { font-size: 1.03rem; }
.post-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 2.5rem 0 .9rem; }
.post-body h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin: 2rem 0 .75rem; }
.post-body h4 { font-size: 1.08rem; margin: 1.75rem 0 .6rem; }
.post-body p { margin: 0 0 1.15em; color: #3e3c41; }
.post-body ul, .post-body ol { margin: 0 0 1.3em; padding-left: 1.35rem; }
.post-body li { margin-bottom: .5em; color: #3e3c41; }
.post-body img {
    max-width: 100%; height: auto;
    border-radius: var(--radius); margin: 1.75rem 0;
    box-shadow: var(--shadow-sm);
}
.post-body figure { margin: 1.75rem 0; }
.post-body figcaption { font-size: .87rem; color: var(--ink-soft); margin-top: .6rem; text-align: center; }
.post-body blockquote {
    margin: 1.75rem 0; padding: 1.25rem 1.6rem;
    border-left: 4px solid var(--gold);
    background: var(--purple-mist);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.post-body table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: .95rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; }
.post-body th { background: var(--purple-soft); font-weight: 700; }
.post-body hr { margin: 2.5rem 0; }
.post-body br + br { display: none; }

/* ==========================================================================
   Homepage section geometry, transcribed from the live site's Elementor
   containers. Numbers here are the live values, not approximations.
   ========================================================================== */

/* Faint brand watermark behind several sections (3–5% opacity on the live
   site). Rendered as one large centred mark rather than a tile. */
.section--watermark { position: relative; overflow: hidden; }
.section--watermark::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: url("../images/brand/favicon-bw.png") left -24% bottom -4% / min(620px, 55%) no-repeat;
    opacity: .07;
}
.section--watermark > * { position: relative; }

/* --- Meet the doctor: portrait sits on a lavender panel ---------------- */
.doctor-panel {
    background: var(--purple-soft);
    display: grid;
    place-items: center;
    padding: 40px 0;
}
.doctor-panel img {
    width: 90%;
    box-shadow: 10px 14px 45px rgba(0, 0, 0, .19);
}

/* --- Benefit + team grids: circular art at 40% of the card ------------- */
.round-grid { display: grid; gap: 5px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .round-grid { grid-template-columns: 1fr; } }
.round-grid > * { padding: 30px; text-align: center; }
.round-card__art {
    width: 40%; height: auto;
    border-radius: 100px;
    margin: 0 auto 15px;
}
/* "Meet Molly" style buttons are white with accent-purple text. */
.btn--onlight { background: #fff; color: var(--purple-accent); font-weight: 500; }
.btn--onlight:hover { background: var(--purple-soft); color: var(--purple-deep); }

/* --- Treatment approach: charcoal top 44%, lavender-white below -------- */
.approach {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    background: linear-gradient(180deg, var(--ink) 44%, var(--purple-mist) 44%);
}
.approach::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: url("../images/brand/logo-purple.png") center top / 100% auto no-repeat;
    opacity: .05;
}
.approach > * { position: relative; }
.approach .section-head { margin-bottom: 60px; }
.approach .section-head .kicker { color: #fff; }
.approach .section-head h2 { color: var(--purple-soft); }
.approach .section-head .lead { color: var(--purple-soft); }

.approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 0 20px;
    align-items: start;
}
@media (max-width: 1024px) { .approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-item img { width: 98%; margin-bottom: 1rem; }
.approach-item h3 { margin-bottom: .35rem; }
.approach-item .kicker { color: var(--purple-accent); }
/* Items 2 and 4 ride 100px lower, giving the row its zigzag. */
@media (min-width: 1025px) {
    .approach-item:nth-child(even) { margin-top: 100px; }
}

/* --- Approach closer: lavender band, 410px logo, 576px copy ------------ */
.approach-closer {
    background: var(--purple-soft);
    padding: 60px 0;
    text-align: center;
}
.approach-closer img { width: 410px; max-width: 100%; margin: 0 auto 15px; }
.approach-closer h3 { color: var(--ink); margin-bottom: 15px; }
.approach-closer .lead { width: 576px; max-width: 100%; margin: 0 auto 15px; color: var(--ink); }

/* --- Stats: oversized numerals ---------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 35px; }
.stat__value { font-size: 6em; letter-spacing: -5px; }

/* --- Living Well: two stacked photos, one tall photo, then the copy ---- */
.livingwell { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 55px; align-items: stretch; }
.livingwell__pair { display: grid; gap: 55px; align-content: center; }
.livingwell__pair img:first-child { width: 90%; margin-left: auto; box-shadow: 8px 10px 44px rgba(0, 0, 0, .25); }
.livingwell__pair img:last-child { width: 100%; box-shadow: 1px 13px 50px rgba(0, 0, 0, .23); }
.livingwell__tall { display: grid; align-content: center; }
.livingwell__tall img { width: 100%; box-shadow: 15px 9px 40px rgba(0, 0, 0, .2); }

/* --- Detail pages: content column + 318px sidebar --------------------- */
/* Copy fills the width the sidebar leaves, so no empty gutter between them. */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 318px;
    gap: 56px;
    align-items: start;
}
.detail-main { min-width: 0; }
/* Condition sidebar: a plain booking card at the top of the column; it scrolls with the page. */
.condition-side { align-self: start; }
@media (max-width: 1024px) { .condition-side { margin-top: 40px; } }
.condition-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.booking-card__actions { display: grid; gap: .6rem; margin: 1rem 0 1.5rem; }
.booking-card__actions .btn { width: 100%; justify-content: center; text-align: center; }
.booking-card h4 { font-size: 1rem; margin: 0 0 .4rem; }
.booking-card .hours-table { font-size: .88rem; }
.booking-card .hours-table tr { display: block; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.booking-card .hours-table tr:last-child { border-bottom: 0; }
.booking-card .hours-table th, .booking-card .hours-table td { display: block; padding: 0; border: 0; white-space: normal; }
/* Taller than the screen, so it pins by its bottom edge: it scrolls with the
   page until its last card is in view, then follows, leaving no empty column. */
.detail-side { display: flex; flex-direction: column; gap: 25px; position: sticky; bottom: 24px; align-self: end; }
.side-card { padding: 30px; border-radius: 10px; }
.side-card h3 { font-size: 24px; font-weight: 500; margin-bottom: .9rem; }
.side-card p { font-size: .97rem; }
.side-card ul { list-style: none; margin: 0; padding: 0; }
.side-card li { margin-bottom: .55rem; }
.side-card .btn { margin-top: 1rem; }

.side-card--dark { background: var(--ink); color: #cdc5d6; }
.side-card--dark h3 { color: #fff; }
.side-card--dark a { color: #fff; }
.side-card--plain { background: transparent; padding-inline: 0; }
.side-card--soft { background: var(--purple-soft); }
.side-card--purple { background: var(--purple-accent); color: #fff; }
.side-card--purple h3 { color: #fff; }

/* Lead image and benefit list inside the content column. Images render at
   natural size, capped to the column — several sources are small diagrams
   that look poor upscaled. */
.detail-lead, .detail-main img {
    max-width: 100%; width: auto; height: auto;
    display: block; margin: 0 auto 2rem;
}
/* Section images: beside the copy, or across the column for labelled diagrams. */
.prose .figure { margin: 0 0 1.5rem; }
.prose .figure img, .prose .figure video {
    display: block; width: 100%; height: auto; margin: 0;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.prose .figure figcaption { margin-top: .6rem; font-size: .88rem; color: var(--muted, #6b686e); }
.prose .figure--side { float: right; width: min(44%, 420px); margin: .35rem 0 1.25rem 2rem; }
.prose .figure--wide { clear: both; }
.prose .gallery--section { clear: both; margin: 2rem 0; }
.prose .gallery--section img { width: 100%; margin: 0; }
.prose .gallery--section figcaption { padding: .6rem .9rem; font-size: .92rem; font-weight: 600; }
.prose .cta-inline { clear: both; }
.split--top { align-items: start; }
.video-strip:has(> :only-child) { max-width: 640px; margin-inline: auto; }
@media (max-width: 767px) {
    .prose .figure--side { float: none; width: 100%; margin: 0 0 1.5rem; }
}
.benefit-list { margin: 1.5rem 0; padding-left: 1.25rem; }
.benefit-list li { margin-bottom: .6rem; color: #3e3c41; }
.benefit-list strong { color: var(--ink); }

.side-links li { display: flex; align-items: center; gap: .6rem; }
.side-links svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--purple-accent); }
.side-hours { margin: 0; display: grid; gap: .3rem; font-size: .88rem; }
.side-hours div { display: flex; justify-content: space-between; gap: .75rem; }
.side-hours dt, .side-hours dd { margin: 0; }
.side-hours dd { text-align: right; opacity: .85; }

@media (max-width: 1024px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-side { padding-left: 0; margin-top: 40px; position: static; }
}

/* --- Service / listing cards: no chrome, image over copy --------------- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-bottom: 50px;
}
.service-card { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.service-card img { width: 100%; aspect-ratio: 250 / 175; object-fit: cover; display: block; }
.service-card h3 { font-size: 24px; font-weight: 500; margin: 0; }
.service-card p { margin: 0; color: var(--ink); }
.service-card__link {
    font-family: var(--font-nav);
    font-size: 17px; font-weight: 400;
    color: var(--purple-accent);
    margin-top: auto;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr; } }

/* --- Start Healing: charcoal band, map left, CTA right ----------------- */
.starthealing { background: var(--ink); color: #cdc5d6; padding: 80px 40px; }
.starthealing .shell { max-width: 1440px; }
.starthealing__layout {
    display: grid;
    grid-template-columns: 682px minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}
.starthealing__copy { text-align: center; }
.starthealing h2 { color: #fff; }
.starthealing .lead { color: #cdc5d6; }
.starthealing__cta { display: block; width: 100%; margin-top: 1.75rem; }
.starthealing__contact {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    justify-content: center; margin-top: 2rem;
}
.starthealing__contact li { margin: 0; }
.starthealing__contact svg { color: var(--gold-light); }
.starthealing__contact a { color: #fff; }

.map { position: relative; aspect-ratio: 682 / 373; background: #3a383c; overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1024px) {
    .starthealing { padding: 48px 20px; }
    .starthealing__layout { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Testimonials: photo + overlapping lavender panel on a skyline ----- */
.tstm {
    background: url("../images/home/testimonials-skyline.jpg") center / cover no-repeat;
    padding: 0;
}
/* 1440 max keeps the inner track at the live site's 1400px. */
.tstm .shell { max-width: 1440px; padding-block: 80px; }
.tstm__layout {
    display: grid;
    grid-template-columns: 630px minmax(0, 770px);
    align-items: center;
}
.tstm__photo img { width: 600px; max-width: 100%; height: auto; display: block; }
.tstm__panel {
    background: var(--purple-soft);
    width: 750px;
    max-width: 100%;
    padding: 75px;
    margin-left: -84px;
    box-shadow: -10px 3px 22px rgba(0, 0, 0, .5);
}
.tstm__panel h2 { font-size: 20px; font-weight: 500; color: var(--ink); margin-bottom: 1.25rem; }
.tstm__slide { margin: 0; }
.tstm__slide[hidden] { display: none; }
.tstm__author { font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
.tstm__slide blockquote { margin: 0; color: var(--ink); }
.tstm__dots { display: flex; gap: .5rem; margin: 1.5rem 0; }
.tstm__dots button {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: #c7bcd0; cursor: pointer;
}
.tstm__dots button[aria-selected="true"] { background: var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; color: var(--btn-hover-ink); }

@media (max-width: 1024px) {
    /* minmax(0,1fr) so the track can shrink below the panel's fixed width,
       and the panel drops its 750px so it can actually reflow. */
    .tstm__layout { grid-template-columns: minmax(0, 1fr); }
    .tstm__photo { display: none; }
    .tstm__panel { width: auto; margin-left: 0; padding: 40px; }
}
@media (max-width: 767px) {
    .tstm__panel { padding: 28px 20px; }
}

/* --- Conditions: lavender cards, Playfair titles, 50px icons ----------- */
.condition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 1024px) { .condition-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .condition-grid { grid-template-columns: 1fr; } }
.condition-card {
    background: var(--purple-soft);
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 25px rgba(0, 0, 0, .12);
    gap: 15px;
    padding: 30px;
}
.condition-card:hover { transform: none; box-shadow: 0 0 25px rgba(0, 0, 0, .12); }
.condition-card h3 {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: -1.8px;
    margin-bottom: 0;
}
.condition-card .card__icon {
    width: 50px; height: 50px; border-radius: 0;
    background: none; color: var(--purple-accent);
    margin-bottom: 0;
}
.condition-card .card__icon svg { width: 50px; height: 50px; }

/* ---------- Motion / print -------------------------------------------- */

/* .reveal content is visible by default. site.js arms it (.reveal-armed) only
   after the visitor first scrolls, and only for blocks still below the viewport.
   Crawlers never scroll, so Googlebot and Screaming Frog always render it. Hiding
   every .reveal up front left blank bands in their screenshots. */
.reveal-armed { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal-armed.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .reveal-armed { opacity: 1; transform: none; }
}

@media print {
    .topbar, .site-header, .cta-band, .to-top, .site-footer, form { display: none !important; }
    body { color: #000; font-size: 12pt; }
    .hero { background: none !important; color: #000; }
    .hero h1, .hero h2 { color: #000; }
}