/* ==========================================================================
   Variables, reset and base elements
   ========================================================================== */

:root {
    --color-navy: hsl(205.45deg 27.27% 23.73%);
    /* Lifted navy for hovers on navy surfaces (buttons). */
    --color-navy-hover: hsl(205.45deg 27.27% 30%);
    --color-gold: hsl(34.5deg 41.24% 50%);
    --color-gold-light: hsl(34.5deg 41.24% 70%);
    /* Lightness capped at 36% so gold text clears WCAG AA 4.5:1 on the cream
       background (--color-cream), not just on white. At 40% it was 4.21:1. */
    --color-gold-dark: hsl(34.5deg 41.24% 36%);
    --color-cream: #f5f0e8;
    --color-white: #ffffff;
    --color-text: #1a2e3f;
    --color-focus-bg: #005ea8;
    --color-map-bg: #dfe5e3;

    /* Channel lists, so one tone can be reused at several alphas.
       --shadow-rgb tints elevation, --line-rgb tints hairline borders. */
    --shadow-rgb: 26 46 63;
    --line-rgb: 29 58 77;

    /* Elevation scale — `card` for lifted panels, `soft` for flat ones. */
    --shadow-card: 0 10px 30px rgb(var(--shadow-rgb) / 0.08);
    --shadow-card-hover: 0 18px 40px rgb(var(--shadow-rgb) / 0.14);
    --shadow-soft: 0 6px 20px rgb(var(--shadow-rgb) / 0.06);
    --shadow-soft-hover: 0 14px 32px rgb(var(--shadow-rgb) / 0.12);

    /* Transition durations — color swaps are fast, movement is slower. */
    --transition-fast: 0.15s;
    --transition-base: 0.2s;
    --transition-slow: 0.25s;

    --font-secondary: "Lora", serif;
    --font-primary: "Catamaran", sans-serif;
    --wrapper-width: 1350px;
    --wrapper-text-width: 900px;
    --screen-offset: 20px;
    --section-padding-inline: 20px;
    --section-padding-block: 50px;
}

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

    html {
        font-size: 18px;
    }

    body {
        margin: 0;
        /* Off-screen third-level menu flyouts (positioned at left:100%) must not
           extend the page and create a horizontal scrollbar. `clip` contains the
           overflow without becoming a scroll container, so the sticky header and
           the downward/leftward flyouts keep working. */
        overflow-x: clip;
        font-family: var(--font-primary);
        line-height: 1.6;
        color: var(--color-text);
        overflow-wrap: break-word;
        background: var(--color-white);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        margin-block: 0;
    }

    input,
    textarea,
    button {
        font: inherit;
    }

    a {
        color: inherit;
    }
    a:has(img) {
        display: inline-block;
    }

    img {
        width: 100%;
        height: auto;
    }
}

/* Headings — fluid type scale (mobile → desktop) */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-text);
    text-transform: capitalize;
}

h1 {
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.15;
}

h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
}

h3 {
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.25;
}

h4 {
    font-size: clamp(24px, 2.2vw, 28px);
    line-height: 1.3;
}

h5 {
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.4;
}

h6 {
    font-size: clamp(18px, 1.4vw, 19px);
    line-height: 1.45;
}

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

.skip-link {
    top: -100px;
    left: 0;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    color: var(--color-white);
    background: var(--color-focus-bg);
}

.skip-link:focus {
    position: fixed;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

.full-w {
    --wrapper-width: 100%;
}

.narrow-w {
    --wrapper-width: var(--wrapper-text-width);
}

.wrapper {
    max-width: var(--wrapper-width);
    padding-inline: var(--section-padding-inline);
    margin-inline: auto;
}

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

.content-section :where(h2, h3, h4, h5, h6) {
    margin-bottom: 0.5em;
}

.content-section :where(p:not(:last-of-type)) {
    margin-bottom: 0.75em;
}

/* Stacks all direct children into the same cell so they layer on top of each
   other (background image, overlay, content) without absolute positioning. */
.pile {
    display: grid;
    grid-template-areas: "pile";
    place-items: center;
}

.pile > * {
    grid-area: pile;
}

.eyebrow {
    display: block;
    margin-bottom: 0.85em;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.pipe {
    display: block;
    width: 2px;
    height: 1em;
    background-color: currentColor;
    opacity: 0.6;
}

@media (min-width: 769px) {
    :root {
        --section-padding-block: 70px;
    }
    .full-w.wrapper {
        padding-inline: 0;
    }
}

@media (min-width: 1025px) {
    :root {
        --section-padding-block: 90px;
    }
}

/* ==========================================================================
   UI components
   ========================================================================== */

.btn {
    --btn-color: var(--color-white);
    --btn-bg: var(--color-navy);
    --btn-border: var(--color-navy);
    --btn-hover-color: var(--color-white);
    --btn-hover-bg: var(--color-navy-hover);

    display: inline-flex;
    gap: 0.65em;
    align-items: center;
    padding: 0.8em 1.25em;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--btn-color);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    cursor: pointer;
    background: var(--btn-bg);
    border: 2px solid var(--btn-border);
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base);
}

.btn:hover,
.btn:focus {
    color: var(--btn-hover-color);
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-bg);
}

.btn.primary {
    --btn-bg: var(--color-navy);
    --btn-border: var(--color-navy);
    --btn-hover-bg: var(--color-navy-hover);
}

.btn.secondary {
    --btn-color: var(--color-navy);
    --btn-bg: var(--color-gold-light);
    --btn-border: var(--color-gold-light);
    --btn-hover-color: var(--color-white);
    --btn-hover-bg: var(--color-gold-dark);
}

.btn.outline {
    --btn-color: var(--color-navy);
    --btn-bg: var(--color-white);
    --btn-border: var(--color-navy);
    --btn-hover-color: var(--color-white);
    --btn-hover-bg: var(--color-navy);
}

.btn.secondary.outline {
    --btn-color: var(--color-gold-dark);
    --btn-border: var(--color-gold-dark);
    --btn-hover-bg: var(--color-gold-dark);
}

.btn svg {
    width: 1.4em;
    height: auto;
}

.btn .btn-text {
    margin-top: 0.1em;
}

@media (max-width: 480px) {
    .btn {
        font-size: 14px;
    }
}

/* ==========================================================================
   Header
   ========================================================================== */

/* ── Sticky header ────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1001;
    transition: transform 0.35s ease;
}

/* Offset the sticky header below the WordPress admin bar for logged-in users
   so it doesn't hide behind it. */
.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* Topbar slides out of view on scroll down; branding stays pinned to top.
   --topbar-h is measured and set by JS. */
.site-header.topbar-hidden {
    transform: translateY(calc(var(--topbar-h, 0px) * -1));
}

/* ── Topbar ───────────────────────────────────────── */

.header-topbar {
    padding-block: calc(var(--screen-offset) / 2);
    color: var(--color-white);
    background-color: var(--color-navy);
}

.header-topbar__inner {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
}

.header-topbar__left {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    align-items: center;
    font-size: 18px;
}

.header-topbar__tagline {
    font-family: var(--font-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.header-topbar__locations-list {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.header-topbar__locations-list li + li::before {
    margin: 0 0.8em;
    color: var(--color-gold-light);
    content: "•";
}

.header-topbar__locations-list a {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Brightens to white on hover. --color-gold is only 3.38:1 on navy, which would
   make the link harder to read on hover than at rest. */
.header-topbar__locations-list a:hover,
.header-topbar__locations-list a:focus {
    color: var(--color-white);
}

/* ── Branding row ─────────────────────────────────── */

.header-branding {
    padding: calc(var(--screen-offset) / 2) 0;
    background-color: var(--color-cream);
    border-bottom: 2px solid var(--color-gold);
}

.header-branding__inner {
    display: flex;
    gap: 1.5em;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--screen-offset) / 2) var(--section-padding-inline);
}

.header-branding__logo-group {
    display: flex;
    gap: 1em;
    align-items: center;
}

.header-branding__logo-group .custom-logo-link {
    display: flex;
}

.header-branding__logo-group .custom-logo {
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* ── Primary navigation (inline in branding row) ─── */

.primary-navigation ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.primary-navigation .menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.primary-navigation .menu-item a {
    display: block;
    padding: 0.5em 0.85em;
    font-size: 0.875em;
    font-weight: 700;
    color: var(--color-navy);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition:
        border-color var(--transition-base),
        color var(--transition-base);
}

.primary-navigation .menu > .menu-item:hover > a,
.primary-navigation .menu > .menu-item:focus-within > a,
.primary-navigation .menu > .menu-item.current-menu-item > a,
.primary-navigation .menu > .menu-item.current-menu-ancestor > a,
.primary-navigation .menu > .menu-item.current_page_ancestor > a {
    color: var(--color-gold-dark);
    border-bottom-color: var(--color-gold);
}

/* ── Dropdown sub-menu ────────────────────────────── */

.menu-item-has-children {
    position: relative;
}

/* Sub-menu toggle button (injected by main.js) — mobile only; on desktop the
   dropdowns open on hover, so it stays hidden. */
.submenu-toggle {
    display: none;
}

.menu-item-has-children > a::after {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-bottom: 2px;
    margin-left: 0.5em;
    vertical-align: middle;
    content: "";
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--transition-base) ease;
}

.menu-item-has-children:hover > a::after,
.menu-item-has-children:focus-within > a::after {
    transform: rotate(45deg);
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    visibility: hidden;
    min-width: 210px;
    padding: 0.4em 0;
    margin: 0;
    list-style: none;
    background: var(--color-white);
    border-bottom: 2px solid var(--color-gold);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        visibility var(--transition-base);
}

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.sub-menu .menu-item a {
    display: block;
    padding: 0.6em 1.1em;
    font-size: 0.875em;
    font-weight: 700;
    color: var(--color-navy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: none;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.sub-menu .menu-item:hover > a,
.sub-menu .menu-item > a:focus {
    color: var(--color-gold-dark);
    background: var(--color-cream);
    border-bottom-color: transparent;
}

/* Active (current) page — gold text on the same cream background as hover. */
.sub-menu .menu-item.current-menu-item > a,
.sub-menu .menu-item.current-menu-item > a:hover {
    color: var(--color-gold-dark);
    background: var(--color-cream);
}

/* Ancestors of the current page — gold text, highlighting the trail down to it. */
.sub-menu .menu-item.current-menu-ancestor > a,
.sub-menu .menu-item.current_page_ancestor > a {
    color: var(--color-gold-dark);
}

/* ── Third-level flyout (desktop): a sub-menu inside a sub-menu opens to the
   right of its parent item instead of dropping down over it. ─── */
@media (min-width: 1043px) {
    .sub-menu .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Indicator points down when idle, right on hover (the flyout opens aside). */
    .sub-menu .menu-item-has-children > a::after {
        margin-bottom: 0;
        margin-left: 0.6em;
        transform: rotate(-45deg);
    }

    .sub-menu .menu-item-has-children:hover > a::after,
    .sub-menu .menu-item-has-children:focus-within > a::after {
        transform: rotate(-135deg);
    }

    .sub-menu .sub-menu {
        top: -0.4em;
        left: 100%;
        transform: translateX(-6px);
    }

    .sub-menu .menu-item-has-children:hover > .sub-menu,
    .sub-menu .menu-item-has-children:focus-within > .sub-menu {
        transform: translateX(0);
    }

    /* Near the right edge, main.js adds .is-flip so the flyout opens to the
       left of its parent item instead of overflowing the viewport. */
    .sub-menu .sub-menu.is-flip {
        right: 100%;
        left: auto;
        transform: translateX(6px);
    }

    .sub-menu .menu-item-has-children:hover > .sub-menu.is-flip,
    .sub-menu .menu-item-has-children:focus-within > .sub-menu.is-flip {
        transform: translateX(0);
    }

    /* When the flyout opens to the left (edge case), point the indicator left. */
    .sub-menu .menu-item-has-children.is-flip-parent > a::after {
        transform: rotate(45deg);
    }
}

/* ── Branding actions (register + mobile toggle) ─── */

.header-branding__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.75em;
    align-items: center;
}

/* ── Mobile nav panel (transparent wrapper on desktop) */

.mobile-nav-panel {
    display: contents;
}

.mobile-nav-panel__actions,
.mobile-nav-panel__close,
.nav-overlay {
    display: none;
}

/* ── Mobile menu toggle ───────────────────────────── */

.menu-toggle {
    display: none;
    flex-shrink: 0;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    background: none;
    border: 1px solid var(--color-navy);
}

.menu-toggle-bar,
.menu-toggle-bar::before,
.menu-toggle-bar::after {
    display: block;
    width: 30px;
    height: 5px;
    margin: 0 auto;
    content: "";
    background: var(--color-navy);
    border-radius: 3px;
}

.menu-toggle-bar::before {
    transform: translateY(-8px);
}

.menu-toggle-bar::after {
    transform: translateY(3px);
}

/* ── Mobile ───────────────────────────────────────── */

@media (max-width: 1042px) {
    .header-topbar__left {
        justify-content: center;
        font-size: 17px;
    }
    .menu-toggle {
        display: flex;
    }

    /* Slide-out panel */
    .mobile-nav-panel {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        display: flex;
        flex-direction: column;
        width: 90vw;
        max-width: 400px;
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--color-white);
        border-right: 1px solid rgb(var(--line-rgb) / 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .mobile-nav-panel.is-open {
        transform: translateX(0);
    }

    /* Close button — top-right corner of the panel */
    .mobile-nav-panel__close {
        position: absolute;
        top: 0.6em;
        right: 0.6em;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        font-size: 1.4rem;
        line-height: 1;
        color: var(--color-navy);
        cursor: pointer;
        background: none;
        border: 1px solid rgb(var(--line-rgb) / 0.15);
        transition:
            background-color var(--transition-fast),
            color var(--transition-fast);
    }

    .mobile-nav-panel__close:hover,
    .mobile-nav-panel__close:focus {
        color: var(--color-gold-dark);
        background-color: var(--color-cream);
    }

    /* Nav always visible inside the panel */
    .mobile-nav-panel .primary-navigation {
        display: block;
        flex: 1;
        padding-top: 20px;
        overflow-x: visible;
    }

    .primary-navigation .menu {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .primary-navigation .menu-item a {
        padding: 0.85em 1.25em;
        white-space: normal;
        border-bottom: 1px solid rgb(var(--line-rgb) / 0.08);
        border-left: 3px solid transparent;
    }

    .primary-navigation .menu-item a:hover,
    .primary-navigation .menu-item.current-menu-item > a,
    .primary-navigation .menu-item.current-menu-ancestor > a,
    .primary-navigation .menu-item.current_page_ancestor > a {
        border-left-color: var(--color-gold);
    }

    /* Actions at the bottom of the panel */
    .mobile-nav-panel__actions {
        display: flex;
        flex-direction: column;
        gap: 0.65em;
        padding: 1.25em 1em;
        border-top: 1px solid rgb(var(--line-rgb) / 0.1);
    }

    .mobile-nav-panel__actions .btn {
        justify-content: center;
        width: 100%;
    }

    /* Darkened overlay behind the panel */
    .nav-overlay {
        position: fixed;
        inset: 0;
        z-index: 199;
        display: block;
        visibility: hidden;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition:
            opacity 0.3s,
            visibility 0.3s;
    }

    .nav-overlay.is-visible {
        visibility: visible;
        opacity: 1;
    }

    /* Hide topbar CTAs — duplicated inside slide-out panel */
    .header-topbar .header-branding__actions {
        display: none;
    }

    .menu > .menu-item > a {
        border-bottom: none !important;
    }

    /* Sub-menu: collapsed by default, toggled by JS */
    .primary-navigation .menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .primary-navigation .menu-item-has-children > a {
        flex: 1;
    }

    /* The link itself navigates; a separate button toggles its sub-menu. Hide
       the link's own chevron on mobile so only the toggle shows one. */
    .menu-item-has-children > a::after {
        display: none;
    }

    .submenu-toggle {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        align-self: stretch;
        justify-content: center;
        width: 3.4em;
        color: var(--color-navy);
        cursor: pointer;
        background: none;
        border: 0;
    }

    .submenu-toggle::after {
        width: 0.5em;
        height: 0.5em;
        margin-top: -0.15em;
        content: "";
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transition: transform var(--transition-base) ease;
    }

    .sub-menu-open > .submenu-toggle {
        color: var(--color-gold-dark);
    }

    .sub-menu-open > .submenu-toggle::after {
        margin-top: 0.15em;
        transform: rotate(45deg);
    }

    .sub-menu {
        position: static;
        display: none;
        visibility: visible;
        width: 100%;
        padding: 0;
        margin-left: 0;
        background: transparent;
        border-top: none;
        border-left: 3px solid var(--color-gold-light);
        box-shadow: none;
        opacity: 1;
        transform: none;
    }

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

    .sub-menu .menu-item a {
        padding: 0.55em 1.25em;
        border-bottom: 1px solid rgb(var(--line-rgb) / 0.06);
        border-left: none;
    }

    /* Chevron is visible on mobile — rotation handled by .sub-menu-open above */
}

@media (max-width: 768px) {
    .header-topbar__inner {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-topbar__locations-list {
        gap: 15px;
        font-size: 14px;
    }
    .header-topbar__locations-list li + li::before {
        content: none;
    }
}

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

/* While the menu is open, keep the header untransformed: a transform on the
   header would make the fixed overlay/panel resolve against the header box
   instead of the viewport, clipping the full-screen dim. */
body.menu-is-open .site-header {
    transform: none;
}

/* ==========================================================================
   Locations section (sits above the footer)
   ========================================================================== */
.locations {
    padding-block: 5em;
    color: var(--color-text);
    background-color: var(--color-cream);
}

.locations__top {
    display: flex;
    gap: 50px 20px;
    align-items: center;
    margin-bottom: 40px;
}

.locations__intro {
    width: 80%;
}

.locations__logo {
    max-width: 400px;
}

.locations__title {
    margin: 0.5em 0 0;
}

.locations__intro-text {
    margin: 0.75em 0 0;
}

/* Map mockup */
.locations__map {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 380px;
    overflow: hidden;
    background-color: var(--color-map-bg);
    background-image:
        linear-gradient(rgb(255 255 255 / 0.6) 2px, transparent 2px),
        linear-gradient(90deg, rgb(255 255 255 / 0.6) 2px, transparent 2px);
    background-size: 48px 48px;
}

.locations__map-pin {
    width: 28px;
    height: 28px;
    background-color: var(--color-gold);
    border: 4px solid var(--color-white);
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 6px 14px rgb(0 0 0 / 0.2);
    transform: rotate(-45deg);
}

.locations__map-badge {
    padding: 0.5em 1.25em;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-navy);
}

/* Once Leaflet takes over the container, drop the mockup grid + flex centering
   so tiles fill it edge to edge. */
.locations__map.leaflet-container {
    display: block;
    background: none;
}

/* Branded teardrop marker (Leaflet divIcon). */
.map-pin {
    display: block;
    width: 22px;
    height: 22px;
    background-color: var(--color-gold);
    border: 3px solid var(--color-white);
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 4px 10px rgb(0 0 0 / 0.3);
    transform: rotate(-45deg);
}

/* Popup — square corners to match the clinical look. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    border-radius: 0;
}

.leaflet-popup-content {
    margin: 14px 16px;
}

.map-popup {
    display: grid;
    gap: 4px;
    font-family: var(--font-primary);
}

.map-popup__name {
    font-size: 20px;
    color: var(--color-navy);
}

.map-popup__address {
    font-size: 16px;
    color: var(--color-text);
}

.map-popup .map-popup__link {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gold-dark);
    text-decoration: none;
}

.map-popup__link:hover,
.map-popup__link:focus-visible {
    text-decoration: underline;
}

/* Location cards grid */
.locations__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5em;
    padding-inline: var(--screen-offset);
}

.location-card {
    display: flex;
    flex-direction: column;
    padding: 1.5em;
    font-size: 20px;
    background-color: var(--color-white);
    border: 1px solid rgb(0 0 0 / 0.06);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.05);
}

.location-card__name {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.5em;
}

.location-card__doctors {
    margin: 0.5em 0 0;
    font-size: 1em;
    color: var(--color-gold-dark);
}

.location-card__phone {
    align-self: flex-start;
    margin-top: 0.75em;
    font-size: 1em;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.location-card__fax {
    margin: 0.25em 0 0;
    font-size: 1em;
    color: var(--color-text);
}

.location-card__address {
    font-size: 1em;
}

.location-card__phone:hover,
.location-card__phone:focus-visible {
    color: var(--color-gold-dark);
}

.location-card__hours {
    display: grid;
    gap: 0.5em;
    padding: 1.25em 0;
    margin: 1.25em 0 0;
    list-style: none;
    border-top: 1px solid rgb(0 0 0 / 0.08);
}

.location-card__hours li {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    font-size: 15px;
}

.location-card__hours span:first-child {
    font-weight: 600;
}

.location-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    align-items: center;
    margin-top: auto;
}

.location-card__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-navy);
    text-decoration: none;
    border: 1px solid rgb(0 0 0 / 0.15);
    transition:
        color var(--transition-base) ease,
        background-color var(--transition-base) ease,
        border-color var(--transition-base) ease;
}

.location-card__social:hover,
.location-card__social:focus-visible {
    color: var(--color-white);
    background-color: var(--color-navy);
    border-color: var(--color-navy);
}

.location-card__social-icon {
    width: 18px;
    height: 18px;
}

.location-card__directions {
    margin-left: auto;
}

@media (max-width: 960px) {
    .locations__top {
        flex-direction: column;
    }

    .locations__intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Call Us popup
   Site-wide dialog listing each office phone number; opened by the header
   "Call Us" buttons ([aria-controls="call-popup"]).
   ========================================================================== */
.call-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.call-popup[hidden] {
    display: none;
}

.call-popup__overlay {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.55);
}

.call-popup__dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 32px;
    background-color: var(--color-white);
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.25);
}

.call-popup__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 28px;
    line-height: 1;
    color: var(--color-navy);
    cursor: pointer;
    background: none;
    border: 0;
}

.call-popup__title {
    margin: 0 0 20px;
    font-size: 24px;
    color: var(--color-navy);
}

.call-popup__list {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.call-popup__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgb(0 0 0 / 0.1);
}

.call-popup__name {
    font-weight: 600;
    color: var(--color-navy);
}

.call-popup__phone {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-gold-dark);
    text-decoration: none;
}

.call-popup__phone:hover,
.call-popup__phone:focus-visible {
    text-decoration: underline;
}

.call-popup__icon {
    flex: none;
    width: 20px;
    height: 20px;
}

body.call-popup-open {
    overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    padding-block: 4em 2em;
    color: var(--color-white);
    background-color: var(--color-navy);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 3.5em;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer__block {
    text-align: center;
}

/* Block titles */
.site-footer__title {
    display: inline-flex;
    gap: 1em;
    align-items: center;
    margin: 0 0 1.5em;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.site-footer__title::before,
.site-footer__title::after {
    width: 2.5em;
    height: 1px;
    content: "";
    background-color: rgb(255 255 255 / 0.2);
}

/* Serving cities */
.site-footer__cities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 1.5em;
    align-items: center;
    justify-content: center;
    max-width: 60em;
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.site-footer__cities li {
    position: relative;
    color: rgb(255 255 255 / 0.8);
}

.site-footer__cities li + li::before {
    position: absolute;
    top: 50%;
    left: -0.85em;
    width: 4px;
    height: 4px;
    content: "";
    background-color: var(--color-gold);
    border-radius: 50%;
    transform: translateY(-50%);
}

/* Quick links */
.site-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 1.75em;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-footer__list a {
    color: rgb(255 255 255 / 0.85);
    transition: color var(--transition-base) ease;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
    color: var(--color-gold-light);
}

/* Bottom */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    align-items: center;
    justify-content: space-between;
    margin-top: 4em;
    text-align: center;
}

.site-footer__copyright {
    margin: 0;
    font-size: 16px;
}

.site-footer__legal {
    display: flex;
    gap: 1em;
    align-items: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    list-style: none;
}

.site-footer__legal li {
    display: flex;
    gap: 1em;
    align-items: center;
}

.site-footer__legal li + li::before {
    content: "•";
}

.site-footer__legal a {
    transition: color var(--transition-base) ease;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
    color: var(--color-gold-light);
}

@media (max-width: 600px) {
    .site-footer {
        padding-block: 3em 1.5em;
    }

    .site-footer__bottom {
        justify-content: center;
    }
}

/* ---- CTA (site-wide, above the footer) ----------------------------------- */
.cta {
    position: relative;
    color: var(--color-white);
    text-align: center;
    background-color: var(--color-navy);
}

/* Background photo — pulled out of flow so the section height is driven by the
   text content, not the image's intrinsic size. It just fills whatever height
   the content defines. */
.cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark overlay — middle layer, keeps white text readable over the photo. */
.cta__overlay {
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--shadow-rgb) / 0.78);
}

/* Content — top layer. */
.cta__inner {
    z-index: 2;
    padding-block: calc(var(--section-padding-block) * 1.25);
}

.cta .eyebrow {
    color: var(--color-gold-light);
}

.cta__title {
    margin-bottom: 0.75em;
    color: var(--color-white);
}

/* ==========================================================================
   Service / content section patterns (shared across service & content pages)
   Namespaced `svc-`. Used by the dental-implants, about-us and other inner
   pages, so they live here globally rather than in any one page stylesheet.
   ========================================================================== */

/* ---- Split: reusable two-column text + media layout ---------------------- *
   Equal columns on desktop, stacked on mobile (media on top). Add the
   `svc-split--reverse` modifier to move the media into the left column.      */
.svc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px clamp(32px, 5vw, 56px);
    align-items: center;
}

.svc-split--reverse .svc-split__media {
    order: -1;
}

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

    .svc-split .svc-split__media {
        order: -1;
    }
}

/* ---- Hero ---------------------------------------------------------------- */
.svc-hero {
    display: flex;
    min-height: 65vh;
}

.svc-hero__content {
    align-self: center;
    padding: calc(var(--section-padding-block) / 2);
}

.svc-hero__title {
    margin: 0 0 0.4em;
    color: var(--color-navy);
}

.svc-hero__text {
    max-width: 40em;
}

.svc-hero__actions {
    display: flex;
    gap: 15px;
    margin-top: 36px;
}

.svc-hero__media {
    height: 100%;
}

.svc-hero__media img {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .svc-hero {
        padding-block: var(--section-padding-block);
        padding-inline: var(--section-padding-inline);
    }

    .svc-hero__content {
        padding: 0;
    }

    .svc-hero__text {
        max-width: none;
    }
}

/* ---- Intro (lead section beneath the hero) ------------------------------- */
.svc-intro {
    background-color: var(--color-cream);
}

.svc-intro__title {
    margin: 0 0 0.6em;
    color: var(--color-navy);
}

.svc-intro__content p {
    margin: 0 0 1em;
    color: var(--color-text);
}

.svc-intro__content p:last-child {
    margin-bottom: 0;
}

.svc-intro__media {
    height: 100%;
}

.svc-points--cream {
    background-color: var(--color-cream);
}

/* ---- Related / resource cards ------------------------------------------- *
   Card grid linking to child pages (sub-services, patient resources, etc.).
   `.svc-card` is reusable across service and content pages.                  */
.svc-related {
    background-color: var(--color-cream);
}

.svc-related__intro {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 56px;
    text-align: center;
}

.svc-related__title {
    margin: 0;
    color: var(--color-navy);
}

.svc-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.svc-card {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 32px);
    color: var(--color-text);
    text-decoration: none;
    background-color: var(--color-white);
    border-top: 3px solid var(--color-gold);
    box-shadow: var(--shadow-soft);
    transition:
        transform var(--transition-base) ease,
        box-shadow var(--transition-base) ease;
}

.svc-card:hover,
.svc-card:focus-visible {
    box-shadow: var(--shadow-soft-hover);
    transform: translateY(-4px);
}

.svc-card:focus-visible {
    outline: 3px solid var(--color-gold-dark);
    outline-offset: 3px;
}

.svc-card__title {
    margin: 0;
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--color-navy);
    transition: color var(--transition-base) ease;
}

.svc-card:hover .svc-card__title,
.svc-card:focus-visible .svc-card__title {
    color: var(--color-gold-dark);
}

.svc-card__arrow {
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 12px;
    transition: transform var(--transition-base) ease;
}

.svc-card__arrow::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: var(--color-gold-dark);
    transform: translateY(-50%);
}

.svc-card__arrow::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    content: "";
    border-top: 2px solid var(--color-gold-dark);
    border-right: 2px solid var(--color-gold-dark);
    transform: translateY(-50%) rotate(45deg);
}

.svc-card:hover .svc-card__arrow,
.svc-card:focus-visible .svc-card__arrow {
    transform: translateX(5px);
}

@media (max-width: 900px) {
    .svc-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ---- Responsive video frame (16:9 embed for iframes) -------------------- */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--color-navy);
}

.video-frame__embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- Breadcrumbs (nested pages only; mirrors the BreadcrumbList schema) --- */
.breadcrumbs {
    padding-block: 14px;
    font-size: 14px;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-cream);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 0.75em;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.breadcrumbs__item {
    display: flex;
    gap: 0.75em;
    align-items: center;
}

/* Separator between crumbs, drawn before every item except the first. */
.breadcrumbs__item + .breadcrumbs__item::before {
    color: var(--color-text);
    content: "/";
    opacity: 0.5;
}

.breadcrumbs__link {
    color: var(--color-navy);
    text-decoration: none;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus {
    color: var(--color-gold-dark);
    text-decoration: underline;
}

.breadcrumbs__current {
    color: var(--color-text);
}

/* ---- Interior page hero (text-only, dark so it stands apart from the header).
   Universal across content pages; page-specific tweaks stay in the page CSS. */
.page-hero {
    padding-block: clamp(48px, 7vw, 90px);
    color: var(--color-white);
    text-align: center;
    background-color: var(--color-navy);
}

.page-hero__inner {
    max-width: 820px;
}

.page-hero .eyebrow {
    color: var(--color-gold-light);
}

.page-hero__title {
    margin: 0 0 0.3em;
    color: var(--color-white);
}

.page-hero__text {
    margin: 0;
    font-size: 18px;
    color: rgb(255 255 255 / 0.85);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--reveal-i, 0) * 80ms);
    }

    /* Scoped to the pre-reveal state only: once the element has animated in,
       the hint is dropped so the browser can discard its compositor layer
       instead of holding one per reveal element for the life of the page. */
    .reveal:not(.is-visible) {
        will-change: opacity, transform;
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    @keyframes hero-reveal {
        from {
            opacity: 0;
            transform: translateY(28px);
        }
    }

    .svc-hero__content > *,
    .svc-hero__media,
    .hero__content > *,
    .hero__media {
        animation: hero-reveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    }

    .svc-hero__content > *:nth-child(1),
    .hero__content > *:nth-child(1) {
        animation-delay: 0.35s;
    }

    .svc-hero__content > *:nth-child(2),
    .hero__content > *:nth-child(2) {
        animation-delay: 0.5s;
    }

    .svc-hero__content > *:nth-child(3),
    .hero__content > *:nth-child(3) {
        animation-delay: 0.65s;
    }

    .svc-hero__content > *:nth-child(4),
    .hero__content > *:nth-child(4) {
        animation-delay: 0.8s;
    }

    .svc-hero__media,
    .hero__media {
        animation-delay: 0.55s;
    }
}

/* ==========================================================================
   Testimonial slider (reusable component — home + testimonials pages)
   Side arrows flank a horizontally sliding track; driven by main.js
   ([data-testimonial-slider]). Section wrappers stay in each page's stylesheet.
   ========================================================================== */
.testimonial-slider {
    position: relative;
    padding-inline: 50px; /* gutters reserved for the side arrows */
    margin-bottom: 1.5em;
}

/* Large decorative quote mark behind the slides */
.testimonial-slider__mark {
    position: absolute;
    top: -0.35em;
    right: 0;
    z-index: 0;
    font-family: var(--font-secondary);
    font-size: 140px;
    line-height: 1;
    color: var(--color-gold);
    pointer-events: none;
    opacity: 0.18;
}

.testimonial-slider__viewport {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Slides sit in a row; the track translates to reveal one at a time. */
.testimonial-slider__track {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    transition: transform 0.5s ease;
}

.testimonial-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.testimonial-slide__quote {
    margin: 0 0 0.8em;
}

.testimonial-slide__quote p {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: clamp(20px, 2.2vw, 26px);
    font-style: italic;
    line-height: 1.5;
    color: var(--color-text);
}

.testimonial-slide__author {
    margin: 0;
    font-weight: 700;
    color: var(--color-navy);
}

/* Subtle side arrows — just the icon, low opacity, gold on hover */
.testimonial-slider__btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-navy);
    cursor: pointer;
    background: transparent;
    border: 0;
    opacity: 0.4;
    transform: translateY(-50%);
    transition:
        opacity var(--transition-base) ease,
        color var(--transition-base) ease;
}

.testimonial-slider__btn:hover,
.testimonial-slider__btn:focus-visible {
    color: var(--color-gold-dark);
    opacity: 1;
}

.testimonial-slider__btn--prev {
    left: 0;
}

.testimonial-slider__btn--next {
    right: 0;
}

.testimonial-slider__icon {
    width: 100%;
    height: auto;
}

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

/* ==========================================================================
   Utilities (must stay last)
   ========================================================================== */

/*
 * Spacing utilities — Tailwind-style margin & padding helpers, em-based so
 * spacing scales with the element's font-size (scale step = 0.25em).
 *
 * Only the steps the markup actually uses are shipped. Need another one? Add
 * that single class here following the same naming:
 *   m / mt / mr / mb / ml / mx / my  — margin
 *   p / pt / pr / pb / pl / px / py  — padding
 */

.mt-5 {
    margin-top: 1.25em;
}
.mt-8 {
    margin-top: 2em;
}