/* ==========================================================================
   Dr. Michelle Hardaway, M.D., F.A.C.S. — Homepage
   Aesthetic Plastic Surgery & Laser Center, Farmington Hills, MI
   Design width: 1440px  |  Every section aligns to the shared container grid
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Brand palette */
    --champagne:        #e9d6c2;
    --champagne-light:  #f4ebe1;
    --blush:            #e0cdc5;
    --terracotta:       #e0a493;
    --terracotta-deep:  #c98572;
    --warm-brown:       #5a3e20;
    --slate:            #2a3139;
    --charcoal:         #313131;
    --muted:            #6c7076;
    --white:            #ffffff;
    --off-white:        #f6f8fa;
    --line:             rgba(42, 49, 57, .12);

    /* Layout — 1440px design grid */
    --container-max:    1440px;
    --gutter:           60px;
    --content-max:      1320px;

    /* Spacing scale */
    --space-xs:  .25rem;
    --space-sm:  .5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 7.5rem;

    /* Section rhythm */
    --section-y:       120px;
    --section-y-tight: 88px;

    /* Typography */
    --font-sans:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;

    /* Radii + elevation */
    --radius-sm: 8px;
    --radius:    16px;
    --radius-lg: 20px;
    --radius-pill: 50px;
    --shadow-sm: 0 4px 20px rgba(42, 49, 57, .07);
    --shadow-md: 0 12px 40px rgba(42, 49, 57, .10);
    --shadow-lg: 0 24px 60px rgba(42, 49, 57, .16);

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Header offset used by scroll-padding + hero spacing */
    --header-h: 104px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--charcoal);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--terracotta-deep);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--warm-brown); }

button { font: inherit; color: inherit; }

ul { list-style: none; }

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

h1, h2, h3, h4 { font-weight: 400; }

em { font-style: italic; }

/* Screen-reader-only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-md);
    z-index: 2000;
    background: var(--warm-brown);
    color: var(--white);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: .875rem;
    font-weight: 600;
    transition: top var(--transition-base);
}
.skip-link:focus { top: 0; color: var(--white); }

/* ==========================================================================
   3. LAYOUT — the shared 1440px container every section aligns to
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

.section--champagne { background: var(--champagne-light); }
.section--offwhite  { background: var(--off-white); }
.section--blush     { background: var(--blush); }
.section--white     { background: var(--white); }

/* ==========================================================================
   4. TYPOGRAPHY BLOCKS
   ========================================================================== */
.section-cta {
    margin-top: var(--space-2xl);
    text-align: center;
}

.ba-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--champagne-light);
}

.section-header {
    max-width: 720px;
    margin: 0 auto var(--space-3xl);
    text-align: center;
}
.section-header--left {
    margin-inline: 0;
    text-align: left;
}

.section-eyebrow {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--terracotta-deep);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.section-title {
    margin-bottom: var(--space-md);
    color: var(--slate);
    font-size: clamp(2rem, 3vw, 2.875rem);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -.01em;
}
.section-title em {
    font-family: var(--font-serif);
    font-weight: 400;
}

.section-subtitle {
    color: var(--muted);
    font-size: 1.0625rem;
}
.section-header--left .section-subtitle { max-width: 46ch; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 1rem 2.25rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    /* A label never wraps: a button that breaks onto two lines reads as two
       controls and throws the header row out of alignment. */
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--primary {
    background: var(--warm-brown);
    border-color: var(--warm-brown);
    color: var(--white);
}
.btn--primary:hover {
    background: var(--slate);
    border-color: var(--slate);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(90, 62, 32, .3);
}

.btn--outline {
    background: transparent;
    border-color: var(--warm-brown);
    color: var(--warm-brown);
}
.btn--outline:hover {
    background: var(--warm-brown);
    color: var(--white);
    transform: translateY(-2px);
}

.btn--light {
    background: var(--champagne);
    border-color: var(--champagne);
    color: var(--slate);
}
.btn--light:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--slate);
    transform: translateY(-2px);
}

.btn--sm { padding: .625rem 1.5rem; font-size: .875rem; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--block { width: 100%; }

/* ==========================================================================
   6. HEADER + NAVIGATION
   ========================================================================== */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: 0 2px 20px rgba(42, 49, 57, .07);
    transition: box-shadow var(--transition-base), padding var(--transition-base);
}
.header.is-scrolled { box-shadow: 0 6px 30px rgba(42, 49, 57, .14); }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-block: var(--space-md);
}

.header__logo {
    flex-shrink: 0;          /* never let the nav compress the mark */
    line-height: 0;
}
.header__logo img {
    height: 74px;
    width: auto;
    transition: height var(--transition-base);
}
.header.is-scrolled .header__logo img { height: 62px; }

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
/* The menu is the only part of the row allowed to give up space. The phone
   number and the booking button keep their width. */
.nav-desktop > .header__phone,
.nav-desktop > .btn { flex-shrink: 0; }

/* Eight items plus the phone and button above 1440px: keep the spacing tight
   enough that the row never runs into the logo. */
.nav-menu {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.nav-item { position: relative; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) 0;
    color: var(--charcoal);
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition-fast);
    background: none;
    border: none;
    cursor: pointer;
}
.nav-link:hover,
.nav-item:hover > .nav-link { color: var(--terracotta-deep); }

.nav-desktop .nav-link[aria-current="page"] {
    color: var(--warm-brown);
    font-weight: 600;
}
.nav-desktop .nav-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--terracotta);
    border-radius: 2px;
}

.nav-link__caret {
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}
.nav-item:hover > .nav-link .nav-link__caret { transform: rotate(180deg); }

/* Dropdowns */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: var(--space-sm) 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility var(--transition-base);
    z-index: 100;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item { position: relative; }

.dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: .5rem 1.5rem;
    color: var(--charcoal);
    font-size: .875rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown-link::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-right: 1.5px solid var(--terracotta);
    border-bottom: 1.5px solid var(--terracotta);
    transform: rotate(-45deg);
}
.dropdown-link:hover {
    background: var(--champagne-light);
    color: var(--warm-brown);
}
.dropdown-link:hover::before { border-color: var(--warm-brown); }

/* Nested (third level) */
.dropdown .dropdown { top: -.5rem; left: 100%; }
.dropdown-item:hover > .dropdown,
.dropdown-item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-item--parent > .dropdown-link { padding-right: 2.25rem; }
.dropdown-item--parent > .dropdown-link::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
}

.header__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--slate);
    font-size: .9375rem;
    font-weight: 600;
    white-space: nowrap;
}
.header__phone svg {
    width: 18px;
    height: 18px;
    stroke: var(--terracotta-deep);
    fill: none;
    stroke-width: 2;
}
.header__phone:hover { color: var(--terracotta-deep); }

/* Mobile toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-sm);
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--charcoal);
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.mobile-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-toggle.is-active span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav panel */
.nav-mobile {
    display: none;
    max-height: calc(100vh - var(--header-h) - 24px);
    padding-bottom: var(--space-lg);
    overflow-y: auto;
    border-top: 1px solid var(--line);
}
.nav-mobile.is-open { display: block; }

.nav-mobile .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.nav-mobile .nav-item { width: 100%; }
.nav-mobile .nav-link {
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
}
.nav-mobile .dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
    background: var(--champagne-light);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nav-mobile .nav-item.is-open > .dropdown,
.nav-mobile .dropdown-item.is-open > .dropdown { display: block; }
.nav-mobile .nav-item.is-open > .nav-link .nav-link__caret { transform: rotate(180deg); }
.nav-mobile .dropdown-item--parent > .dropdown-link::after { transform: translateY(-50%) rotate(45deg); }
.nav-mobile__cta { padding-top: var(--space-lg); }
/* Mobile drawer footer: the drawer is part of the header, so it is shared by
   every page rather than living in the inner-page stylesheet. */
.nav-mobile__cta .btn { width: 100%; }
.nav-mobile__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-sm);
    padding: var(--space-md) 0;
    color: var(--slate);
    font-size: 1rem;
    font-weight: 600;
}
.nav-mobile__phone svg { width: 18px; height: 18px; stroke: var(--terracotta-deep); fill: none; stroke-width: 2; }


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.footer {
    background: var(--slate);
    color: var(--white);
    padding-top: var(--space-4xl);
}

.footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--space-3xl);
    padding-bottom: var(--space-4xl);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer__logo {
    height: 62px;
    width: auto;
    margin-bottom: var(--space-lg);
    filter: brightness(0) invert(1);
}

.footer__desc {
    margin-bottom: var(--space-xl);
    max-width: 42ch;
    color: rgba(255, 255, 255, .75);
    font-size: .9375rem;
    line-height: 1.7;
}

.footer__social { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: var(--white);
    transition: background var(--transition-base), transform var(--transition-base);
}
.social-link:hover {
    background: var(--terracotta);
    color: var(--white);
    transform: translateY(-3px);
}
.social-link svg { width: 18px; height: 18px; fill: currentColor; }

.footer__heading {
    margin-bottom: var(--space-lg);
    color: var(--white);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer__links li { margin-bottom: var(--space-sm); }
.footer__links a {
    color: rgba(255, 255, 255, .7);
    font-size: .9375rem;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer__links a:hover { color: var(--terracotta); padding-left: 4px; }

.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.footer__contact-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    stroke: var(--terracotta);
    fill: none;
    stroke-width: 1.5;
}
.footer__contact-item span,
.footer__contact-item a {
    color: rgba(255, 255, 255, .8);
    font-size: .9375rem;
    line-height: 1.5;
}
.footer__contact-item a:hover { color: var(--terracotta); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-xl);
}
.footer__copyright { color: rgba(255, 255, 255, .6); font-size: .875rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.footer__legal a { color: rgba(255, 255, 255, .6); font-size: .875rem; }
.footer__legal a:hover { color: var(--terracotta); }

.medical-disclaimer {
    padding-block: var(--space-lg);
    background: var(--charcoal);
}
.medical-disclaimer p {
    color: rgba(255, 255, 255, .55);
    font-size: .8125rem;
    line-height: 1.65;
    text-align: center;
}
.medical-disclaimer strong { color: rgba(255, 255, 255, .75); }

/* ==========================================================================
   19. BACK TO TOP
   ========================================================================== */
.to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--warm-brown);
    border: none;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    box-shadow: 0 10px 28px rgba(42, 49, 57, .3);
    transition: opacity var(--transition-base),
                visibility var(--transition-base),
                transform var(--transition-base),
                background var(--transition-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--slate); transform: translateY(-4px); }
.to-top svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
}

/* ==========================================================================
   20. SCROLL REVEAL (IntersectionObserver toggles .is-revealed)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-revealed { opacity: 1; transform: none; }

.reveal-child > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 600ms ease, transform 600ms ease;
}
.reveal-child.is-revealed > * { opacity: 1; transform: none; }
.reveal-child.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-child.is-revealed > *:nth-child(2) { transition-delay: 110ms; }
.reveal-child.is-revealed > *:nth-child(3) { transition-delay: 220ms; }
.reveal-child.is-revealed > *:nth-child(4) { transition-delay: 330ms; }

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

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
/* The primary menu carries eight top-level items. Below 1500px the phone
   number no longer fits beside them, and below 1280px neither does the menu,
   so the drawer takes over there rather than at 1024px. */
@media (max-width: 1499px) {
    .header__phone { display: none; }
}

@media (max-width: 1280px) {
    .nav-desktop { display: none; }
    .mobile-toggle { display: flex; }
}

@media (max-width: 1360px) {
    :root { --gutter: 40px; }
    .nav-menu { gap: var(--space-md); }
    .nav-desktop { gap: var(--space-lg); }
}

@media (max-width: 1180px) {
    :root { --section-y: 96px; --section-y-tight: 72px; }
    .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}

@media (max-width: 1024px) {
    :root { --gutter: 32px; --header-h: 92px; }

    .header__logo img { height: 60px; }
    .header.is-scrolled .header__logo img { height: 52px; }
}

/* The gallery drops to one column earlier than the other grids.
   Those grids hold one image per card, so the shared 1024px two-up rule suits
   them. A before/after card holds TWO images, and at 768px two-up that is a
   151px medical photo — smaller than the same card gets at 720px, which is the
   wrong way round. One column from 900px down keeps each photo above 300px. */
@media (max-width: 900px) {

    /* single column, so the odd-one-out is no longer stranded and must not keep
       the half-width centring meant for the two-up grid */
    .gallery-grid > .gallery-item:last-child:nth-child(odd) {
        grid-column: auto;
        width: auto;
    }
}

@media (max-width: 720px) {
    :root {
        --gutter: 20px;
        --section-y: 72px;
        --section-y-tight: 56px;
        --header-h: 84px;
    }

    body { font-size: 15px; }
    .hero__actions .btn { width: 100%; }

    /* Section CTAs go full width too, so the longer labels never overflow. */
    .section-cta .btn,
    .card-cta .btn { width: 100%; justify-content: center; }

    /* One column left the band three-quarters empty on the right. The four
       labels are short enough to stay two-up almost all the way down. */
    .uvp-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }

    /* Smaller carousel arrows so they still clear the cards in a narrow gutter */
    .reviews-widget { padding-inline: 52px; }
    .reviews-widget .es-carousel-arrow-control-container,
    .reviews-widget .es-carousel-arrow-control { width: 36px !important; height: 36px !important; }
    .reviews-widget .es-carousel-arrow-control-container { flex-basis: 36px !important; }
    .reviews-widget .es-carousel-arrow-control-container[aria-label="Previous"] { margin-left: -30px !important; }
    .reviews-widget .es-carousel-arrow-control-container[aria-label="Next"]     { margin-right: -30px !important; }

    .footer__top { grid-template-columns: 1fr; gap: var(--space-2xl); text-align: center; }
    .footer__desc { margin-inline: auto; }
    .footer__social { justify-content: center; }
    .footer__contact-item { justify-content: center; text-align: left; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .footer__legal { justify-content: center; gap: var(--space-lg); }

    .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* A long label cannot wrap, so on the narrowest phones the button itself has
   to give: less padding and a smaller type size keep it inside the gutter. */
@media (max-width: 380px) {
    .btn { padding: .875rem 1.25rem; font-size: .875rem; }
    .btn--sm { padding: .5rem 1rem; font-size: .8125rem; }
}


@media (max-width: 400px) {
    .reviews-score__value { font-size: 3rem; }
}


/* ==========================================================================
   MOBILE CTA BAR
   Phone-portrait only. It parks the two actions people actually want within
   thumb reach, and steps aside once the footer arrives so it never sits on
   top of the contact details.
   ========================================================================== */
.mobile-cta { display: none; }

@media (max-width: 768px) and (orientation: portrait) {
    .mobile-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: flex;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--champagne);
        transition: transform var(--transition-base), opacity var(--transition-base);
    }
    .mobile-cta .btn {
        min-width: 0;
        padding: .75rem .75rem;
        /* The row has to hold a short label and a long one on a 320px phone,
           so the type is sized off the viewport rather than fixed. */
        font-size: clamp(.6875rem, 3.1vw, .8125rem);
        letter-spacing: -.005em;
        white-space: nowrap;
    }
    /* Equal halves cut the long label in two. The short one takes only the
       width it needs; the long one gets the rest of the row. */
    .mobile-cta .btn--outline { flex: 0 0 auto; gap: .4rem; }
    .mobile-cta .btn--primary { flex: 1 1 auto; }

    .mobile-cta .btn svg { width: 16px; height: 16px; }

    /* out of the way once the footer is on screen */
    .mobile-cta.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }

    /* The bar steps aside as the footer arrives, so the page needs no reserve
       at the very bottom — that only left a white strip under the footer. The
       clearance lives on the last dark band instead, where it reads as footer
       and still keeps the bar off the disclaimer if the observer never runs. */
    .medical-disclaimer { padding-bottom: calc(var(--space-lg) + 76px); }

    /* the back-to-top button would otherwise sit under the bar */
    .to-top { bottom: 88px; }
}

/* ==========================================================================
   MODAL
   Closed state is display:none rather than opacity/visibility. A descendant
   can re-assert its own pointer-events or visibility — a third-party form
   iframe does exactly that — but nothing can escape an ancestor's display:none,
   so the closed dialog cannot leave an invisible layer over the page.
   ========================================================================== */
.modal { display: none; }
.modal.is-open {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}
.modal__backdrop { position: absolute; inset: 0; background: rgba(42, 49, 57, .62); }

.modal__dialog {
    position: relative;
    width: min(600px, 100%);
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
    padding: var(--space-2xl);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: modal-in 280ms ease both;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.modal__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--champagne-light);
    border: none;
    border-radius: 50%;
    color: var(--warm-brown);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.modal__close:hover { background: var(--champagne); }

.modal__title {
    margin-bottom: var(--space-sm);
    padding-right: var(--space-2xl);
    color: var(--slate);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 300;
    line-height: 1.2;
}
.modal__title em { font-family: var(--font-serif); color: var(--warm-brown); }
.modal__intro { margin-bottom: var(--space-lg); color: var(--charcoal); font-size: .9375rem; }

/* the form card already has its own frame on the page; inside the dialog the
   dialog is the frame */
.modal .consult__form { padding: 0; background: none; border-radius: 0; box-shadow: none; }

@media (max-width: 560px) {
    .modal.is-open { padding: var(--space-sm); align-items: flex-end; }
    .modal__dialog { padding: var(--space-xl) var(--space-lg); max-height: calc(100dvh - 1rem); }
}

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

/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   content and pushes the column past the viewport on a narrow screen. Every
   direct child of the page's two-column grids opts out. */
.hero__content, .hero__media,
.about__card, .about__media,
.promo__card, .promo__media,
.faq__card, .faq__media { min-width: 0; }

/* ==========================================================================
   SHARED COMPONENTS
   Moved out of home.css: the inner pages render these too, and home.css only
   loads on the front page.
   ========================================================================== */

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.reviews-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

.reviews-badge__icon { width: 36px; height: 36px; flex-shrink: 0; }

.reviews-badge__body { display: flex; flex-direction: column; gap: 2px; }

.stars { display: flex; gap: 2px; }

.stars svg { width: 14px; height: 14px; fill: #f4b942; }

.reviews-badge__title {
    color: var(--slate);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
}

.reviews-badge__count { color: var(--muted); font-size: .75rem; }

/* Elfsight Google Reviews widget.
   Third-party markup rendered into the light DOM, so the carousel controls can be
   themed from here. Hooks are the vendor's stable `es-` prefixed classes; the hashed
   styled-component classes beside them change between widget releases and are avoided.
   The inline width/height/offsets the widget writes onto these nodes need !important. */
.reviews-widget {
    min-height: 320px;      /* reserves space so the widget cannot shift the page as it loads */
    padding-inline: 72px;   /* gutter the arrows live in, so they clear the review cards */
}
.reviews-widget > div { width: 100%; }

/* Carousel arrows — brand colour, larger hit area, clear of the cards */
.reviews-widget .es-carousel-arrow-control-container {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
}
.reviews-widget .es-carousel-arrow-control-container[aria-label="Previous"] { margin-left: -42px !important; }
.reviews-widget .es-carousel-arrow-control-container[aria-label="Next"]     { margin-right: -42px !important; }

.reviews-widget .es-carousel-arrow-control {
    width: 44px !important;
    height: 44px !important;
    background: var(--warm-brown) !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 22px rgba(42, 49, 57, .22);
    transition: background var(--transition-base), transform var(--transition-base);
}
.reviews-widget .es-carousel-arrow-control:hover {
    background: var(--terracotta-deep) !important;
    transform: scale(1.08);
}
.reviews-widget .es-carousel-arrow-control svg,
.reviews-widget .es-carousel-arrow-control [class*="IconContainer"] {
    color: var(--white) !important;
    fill: currentColor;
}

/* ==========================================================================
   8. UVP BAND
   ========================================================================== */
.uvp-band {
    background: var(--terracotta);
    padding-block: var(--space-lg);
}

.uvp-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.uvp-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--white);
}

.uvp-item svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    stroke: var(--white);
    fill: none;
    stroke-width: 1.5;
}

.uvp-item__text { display: flex; flex-direction: column; line-height: 1.25; }

.uvp-item__text strong { font-size: 1.25rem; font-weight: 700; }

.uvp-item__text span {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .92;
}

/* ==========================================================================
   11. BEFORE / AFTER GALLERY
   ========================================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
}

/* An odd number of pairs in a two-up grid leaves the last one stranded next to
   an empty half-row. Centre it at the same width as the others rather than
   letting it hang left. */
.gallery-grid > .gallery-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - var(--space-2xl) / 2);
    margin-inline: auto;
}

.gallery-item {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.gallery-item__caption {
    padding: var(--space-md) var(--space-lg);
    color: var(--slate);
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
}

.results-disclaimer {
    margin-top: var(--space-2xl);
    color: var(--muted);
    font-size: .8125rem;
    font-style: italic;
    text-align: center;
}

.faq-item { border-bottom: 1px solid var(--champagne); }

.faq-item:last-child { border-bottom: none; }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    width: 100%;
    padding: var(--space-lg) 0;
    background: none;
    border: none;
    color: var(--slate);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.faq-question:hover { color: var(--terracotta-deep); }

.faq-icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--warm-brown);
    transition: transform var(--transition-base);
}

.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }

.faq-icon::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }

.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Height-agnostic accordion — animated with grid rows, no runtime inline styles */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
}

.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

.faq-answer__inner { overflow: hidden; }

.faq-answer__inner p {
    padding-bottom: var(--space-lg);
    color: var(--charcoal);
    font-size: .9375rem;
    line-height: 1.7;
}

/* ==========================================================================
   16. BLOG
   ========================================================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.blog-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--champagne);
}

.blog-card__media a { display: block; height: 100%; }

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__media img { transform: scale(1.05); }

.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-xl);
}

.blog-category {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--terracotta-deep);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.blog-title {
    margin-bottom: var(--space-md);
    color: var(--slate);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

/* In WordPress the card title is a link; keep it reading as the heading it is
   rather than picking up the global link colour. */
.blog-title a { color: inherit; }

.blog-excerpt {
    margin-bottom: var(--space-lg);
    color: var(--muted);
    font-size: .9375rem;
}

.blog-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--terracotta-deep);
    font-size: .875rem;
    font-weight: 600;
}

.blog-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform var(--transition-fast);
}

.blog-link:hover svg { transform: translateX(4px); }

.map-card {
    width: 100%;
    max-width: 380px;
    padding: var(--space-2xl);
    background: var(--slate);
    border-radius: var(--radius);
    color: var(--white);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
}

.map-card__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    color: var(--terracotta);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.map-card__kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: var(--terracotta);
    border-radius: 50%;
}

.map-card__label {
    margin-bottom: var(--space-xs);
    color: rgba(255, 255, 255, .5);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.map-card__address {
    margin-bottom: var(--space-lg);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.35;
}

.map-card__phone {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    color: var(--white);
    font-size: 1rem;
}

.map-card__phone svg {
    width: 18px;
    height: 18px;
    stroke: var(--terracotta);
    fill: none;
    stroke-width: 2;
}

.map-card__phone:hover { color: var(--terracotta); }

.map-card .btn { margin-bottom: var(--space-lg); }

/* The credential band appears on every page, so its breakpoints sit with the
   band rather than in the front-page sheet. */

@media (max-width: 1024px) {
    .uvp-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
}

@media (max-width: 420px) {
    .uvp-row { grid-template-columns: 1fr; gap: var(--space-md); }
    .uvp-item { justify-content: center; }
}

/* ==========================================================================
   SHARED COMPONENT BREAKPOINTS
   These belong with the components moved above: the inner pages render them
   too, and home.css only loads on the front page.
   ========================================================================== */

@media (max-width: 1024px) {
    .map-card { max-width: 100%; }
}

@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .hero__actions { flex-direction: column; align-items: stretch; }
    .reviews-badge { padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
    .reviews-badge__icon { width: 28px; height: 28px; }
}

/* ==========================================================================
   SHARED COMPONENT BREAKPOINTS
   These belong with the components moved above: the inner pages render them
   too, and home.css only loads on the front page.
   ========================================================================== */

@media (max-width: 1024px) {
    .gallery-grid, .blog-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 720px) {
    .map-card {padding: var(--space-xl);}
    .gallery-grid, .blog-grid {grid-template-columns: 1fr;}
}