/* ==========================================================================
   Osler Dental Professionals — main stylesheet
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
    font-family: 'Jost';
    src: url('../font/jost-variable-latin.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../font/cormorant-garamond-variable-latin.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../font/cormorant-garamond-italic-variable-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
    --color-cream: #f5f2ed;
    --color-sand: #ebe6de;
    --color-line: #ddd6cb;
    --color-ink: #2e2f31;
    --color-body: #55534f;
    --color-muted: #6b6862;
    --color-charcoal: #2a2b2d;
    --color-charcoal-2: #35373a;
    --color-black: #1f2022;
    --color-footer: #232426;
    --color-gold: #c9a979;
    --color-gold-dark: #8a6c45;
    --color-bronze: #8b7a63;
    --color-white: #fff;

    --font-sans: 'Jost', Helvetica, Arial, sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, serif;

    --radius: 4px;
    --radius-pill: 999px;
    --shadow-soft: 0 30px 60px rgba(40, 35, 30, .12);
    --shadow-strong: 0 30px 60px rgba(0, 0, 0, .25);
    --stripes-light: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 14px, transparent 14px 28px);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

/* Default paragraph size site-wide (lists inside long-form text match).
   Small UI labels (card captions, consent line, etc.) keep their own sizes. */
p,
.legal_content li,
.faq_answer li,
.check_list li,
.data_table {
    font-size: 18px;
}

@media (max-width: 767px) {
    p,
    .legal_content li,
    .faq_answer li,
    .check_list li,
    .data_table {
        font-size: 16px;
    }
}

a {
    color: var(--color-ink);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

a:hover {
    color: var(--color-gold-dark);
}

p a[href^="tel:"] {
    display: inline-block;
}

h1, h2, h3, p, figure, ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

address {
    margin: 0;
    font-style: normal;
}

input,
select,
textarea,
button {
    font-family: var(--font-sans);
}

em {
    font-style: italic;
}

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

/* ---------- Layout ---------- */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
}

.section_padding {
    padding: 100px 0;
}

.bg_sand {
    background: var(--color-sand);
}

.split_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 64px;
    align-items: center;
}

/* Image + text rows: once the two columns stack (container narrower than 2 x 380px + 48px gap),
   the photo always goes on top and the text below, whichever side it sits on at desktop. */
.split_grid {
    container: split / inline-size;
}

@container split (max-width: 807px) {
    .split_grid > .media_frame {
        order: -1;
    }

    /* the pinned photo only makes sense beside the text; stacked, it scrolls normally */
    .split_grid > .media_frame_sticky {
        position: static;
    }
}

.content_stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.centered_stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.img_fluid {
    width: 100%;
    height: auto;
}

/* ---------- Typography ---------- */
.eyebrow {
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-gold-dark);
}

.eyebrow_light {
    color: var(--color-gold);
}

.section_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.1;
}

.text_body {
    line-height: 1.75;
    color: var(--color-body);
    text-wrap: pretty;
}

.text_narrow {
    max-width: 620px;
}

.text_nowrap {
    white-space: nowrap;
}

.text_link {
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.btn_sm {
    padding: 12px 21px;
}

.btn_lg {
    padding: 14px 26px;
}

.btn_block {
    display: block;
    width: 100%;
}

/* :focus keeps the colours after a click (the blog theme makes focused buttons transparent) */
.btn_gold,
.btn_gold:focus {
    background: var(--color-gold);
    color: var(--color-black);
}

.btn_gold:hover {
    background: #b8976a;
    color: var(--color-black);
}

.btn_dark,
.btn_dark:focus {
    background: var(--color-ink);
    color: var(--color-white);
}

.btn_dark:hover {
    background: var(--color-gold-dark);
    color: var(--color-white);
}

.btn_outline_light {
    border-color: rgba(255, 255, 255, .55);
    color: var(--color-white);
}

.btn_outline_light:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-black);
}

.btn_outline_dark {
    border-color: var(--color-ink);
    color: var(--color-ink);
}

.btn_outline_dark:hover {
    background: var(--color-ink);
    color: var(--color-white);
}

.btn_group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn_group_center {
    justify-content: center;
}

/* ---------- Utility bar ---------- */
.utility_bar {
    background: var(--color-black);
    color: #d9d4cb;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 9px 0;
}

.utility_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    text-align: center;
}

.utility_inner > * {
    white-space: nowrap;
}

.utility_inner a {
    color: #d9d4cb;
}

.utility_inner a:hover,
.utility_inner .utility_highlight {
    color: var(--color-gold);
}

.phone_short {
    display: none;
}

/* ---------- Header ---------- */
/* Top bar + header stay pinned at the top while scrolling (sticky keeps their space, so nothing jumps) */
.site_top {
    position: sticky;
    top: 0;
    z-index: 50;
}

.header_area {
    position: relative;
    z-index: 20;
}

.site_header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 0;
    transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease;
}

/* Once the page scrolls past the header (class added by JS), the header turns into a
   compact dark bar under the top bar. */
.site_header.is_sticky {
    padding: 12px 0;
    background: rgba(31, 32, 34, .96);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.site_logo img {
    transition: width .3s ease;
}

.site_header.is_sticky .site_logo img {
    width: 150px;
}

.header_inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
}

.site_logo {
    display: flex;
    flex-shrink: 0;
}

.site_logo img {
    width: 178px;
}

.header_menu {
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
}

.main_nav {
    margin: 0 auto;
}

/* Nav items fill the header height so hover menus open without a gap */
.nav_list {
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 22px;
}

.nav_item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav_item.has_mega {
    position: static;
}

.nav_link,
.submenu_toggle {
    color: var(--color-white);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
}

.nav_link {
    padding: 10px 0;
}

.nav_link:hover,
.submenu_toggle:hover {
    color: var(--color-gold);
}

.submenu_toggle {
    padding: 10px 0 10px 5px;
    background: none;
    border: 0;
    cursor: pointer;
    letter-spacing: 0;
}

/* Only the arrow rotates, so it stays in place when the menu opens */
.submenu_icon {
    display: inline-block;
    transition: transform .2s ease;
}

.header_actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dropdowns */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -26px;
    padding-top: 14px;
    z-index: 30;
}

.dropdown_panel {
    min-width: 260px;
    padding: 22px 26px;
    background: var(--color-cream);
    border-radius: 6px;
    box-shadow: var(--shadow-strong);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dropdown_panel a {
    font-size: 15px;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown_panel a:hover {
    color: var(--color-gold-dark);
}

.dropdown_panel .is_child {
    padding-left: 16px;
}

/* Sub-menu inside a dropdown (About > Meet the Doctors > doctors): flies out to the right.
   The wrapper starts at the item's edge and pads across the panel's side padding, so the
   pointer can move into the sub-menu without it closing. */
.has_flyout {
    position: relative;
}

.has_flyout > a {
    justify-content: space-between;
}

.flyout_icon {
    font-size: 10px;
    color: var(--color-gold-dark);
    transition: transform .2s ease;
}

.flyout {
    display: none;
    position: absolute;
    top: -22px;
    left: 100%;
    padding-left: 34px;
    z-index: 31;
}

@media (min-width: 1200px) {
    .has_flyout:hover > a,
    .has_flyout:focus-within > a {
        color: var(--color-gold-dark);
    }

    .has_flyout:hover > .flyout,
    .has_flyout:focus-within > .flyout {
        display: block;
    }

    .has_flyout:hover .flyout_icon {
        transform: translateX(3px);
    }
}

.dropdown_mega {
    left: 0;
    right: 0;
}

.mega_panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
    padding: 32px 36px;
}

.mega_col {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dropdown_panel .mega_title {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-gold-dark);
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-line);
}

.badge_new {
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
    white-space: nowrap;
}

.has_dropdown.is_open > .dropdown {
    display: block;
}

@media (min-width: 1200px) {
    .has_dropdown:hover > .dropdown,
    .has_dropdown:focus-within > .dropdown {
        display: block;
    }
}

/* Mobile menu toggle */
.menu_toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.menu_toggle span {
    display: block;
    width: 18px;
    height: 1px;
    background: var(--color-white);
    transition: transform .2s ease, opacity .2s ease;
}

.menu_toggle.is_active span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.menu_toggle.is_active span:nth-child(2) {
    opacity: 0;
}

.menu_toggle.is_active span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* ---------- Page banner (common to every page: include/banner.php) ---------- */
.page_banner {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: flex-end;
    padding: 240px 0 110px;
    background: url('../images/banner-image.png') center / cover no-repeat var(--color-charcoal);
}

/* 404: centered text */
.page_banner_center {
    align-items: center;
    padding: 200px 0 100px;
}

.page_banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(20, 20, 22, .8), rgba(20, 20, 22, .28));
}

/* Centered text needs an even overlay across the photo */
.page_banner_center::before {
    background: rgba(20, 20, 22, .72);
}

/* Background video: covers the banner like background-size: cover (16:9 Vimeo embed).
   Hidden until it is actually playing, so the banner photo shows while it loads. */
.banner_video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
}

.banner_video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, calc(100cqh * 16 / 9));
    height: max(100cqh, calc(100cqw * 9 / 16));
    border: 0;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .8s ease;
}

.banner_video.is_playing iframe {
    opacity: 1;
}

.page_banner_inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.page_banner_content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--color-white);
}

.page_banner_home .page_banner_content {
    gap: 22px;
}

/* Home headline keeps its narrow measure; the button row may run wider (3 buttons) */
.page_banner_home .banner_headline {
    max-width: 620px;
}

.page_banner_center .page_banner_content {
    max-width: 640px;
    margin: 0 auto;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.page_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
}

.banner_headline {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.02;
}

.page_subtitle {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.page_banner_text {
    max-width: 560px;
    line-height: 1.7;
    color: #e4dfd7;
}

.page_banner_cta {
    padding-top: 8px;
}

.breadcrumb ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.breadcrumb li + li::before {
    content: '/';
    margin-right: 10px;
    color: rgba(255, 255, 255, .4);
}

.breadcrumb a {
    color: var(--color-gold);
}

.breadcrumb a:hover {
    color: var(--color-white);
}

/* ---------- Highlights ---------- */
.highlights {
    background: var(--color-sand);
    padding: 44px 0;
}

.highlight_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.diamond {
    width: 8px;
    height: 8px;
    background: #a8875c;
    transform: rotate(45deg);
}

.highlight_title {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
}

.highlight_text {
    font-size: 14px;
    color: var(--color-muted);
}

/* ---------- Media frame (The Practice) ---------- */
.media_frame img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

/* Photo beside long text: keeps its natural proportions and stays in view (sticky, below the
   pinned header) while the text scrolls past. When the columns stack it has nothing to stick to. */
.media_frame_sticky {
    position: sticky;
    top: 150px;
    align-self: start;
}

/* ---------- Services ---------- */
.section_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.section_head .content_stack {
    gap: 14px;
}

.services_grid {
    display: grid;
    gap: 16px;
}

.services_grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    margin-bottom: 16px;
}

/* Three cards: one row of 3 on tablet/desktop, stacked on phones (never 2 + 1) */

.service_stack {
    display: grid;
    gap: 16px;
}

.service_card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 32px;
    border-radius: var(--radius);
    color: var(--color-white);
}

.service_card:hover {
    color: var(--color-white);
}

.service_card_feature {
    position: relative;
    isolation: isolate; /* keeps the watermark behind the text but above the card background */
    overflow: hidden;
    min-height: 420px;
    justify-content: flex-end;
    gap: 14px;
    padding: 36px;
    background: var(--color-charcoal);
}

/* Faint Osler logo watermark in the top-right corner (width only, height stays auto) */
.service_card_watermark {
    position: absolute;
    top: 36px;
    right: 36px;
    z-index: -1;
    width: min(300px, 55%);
    height: auto;
    opacity: .3;
    pointer-events: none;
    transition: opacity .3s ease;
}

.service_card_feature:hover .service_card_watermark {
    opacity: .45;
}

.service_card_feature:hover,
.service_card_dark:hover {
    background-color: #333538;
}

.service_card_charcoal,
.service_card_bronze {
    justify-content: center;
    min-height: 128px;
    padding: 28px 32px;
}

.service_card_charcoal {
    background: var(--color-charcoal-2);
}

.service_card_charcoal:hover {
    background: #3d3f43;
}

.service_card_bronze {
    background: var(--color-bronze);
}

.service_card_bronze:hover {
    background: #7f6f59;
}

.service_card_dark {
    background: var(--color-charcoal);
}

.service_feature_title {
    font-size: 30px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.25;
}

.service_title {
    font-size: 17px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 300;
}

.service_title_sm {
    font-size: 16px;
}

.service_text {
    font-size: 14px;
    line-height: 1.6;
    color: #cfc9bf;
}

.service_card_feature .service_text {
    max-width: 300px;
    font-size: 15px;
    color: #d9d4cb;
}

.service_card_bronze .service_text {
    color: #f1ece4;
}

.service_arrow {
    width: 40px;
    height: 40px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

.service_card_feature:hover .service_arrow {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-black);
}

/* ---------- Doctor ---------- */
.doctor_card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    justify-self: center;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(40, 35, 30, .12);
}

.doctor_card_caption {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background: var(--color-charcoal);
    color: var(--color-white);
    text-align: center;
}

.doctor_card_name {
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.doctor_card_link,
.doctor_card_role {
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.doctor_card:hover .doctor_card_link {
    color: var(--color-white);
}

/* ---------- Gallery CTA band ---------- */
.cta_band {
    background: var(--color-charcoal);
    padding: 56px 0;
}

.cta_band_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.cta_band_content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-white);
}

.cta_band_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
}

.cta_band_title em {
    color: var(--color-gold);
}

/* ---------- Reviews ---------- */
/* Native scroll-snap slider: swipe on touch, arrows + dots on any device */
.review_slider {
    width: 100%;
    margin: 24px 0;
}

.review_track,
.slider_track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 0 8px;
    justify-content: safe center; /* centers the cards when they all fit (e.g. only 2 reviews) */
}

.review_track::-webkit-scrollbar,
.slider_track::-webkit-scrollbar {
    display: none;
}

.review_track:focus-visible,
.slider_track:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

.review_card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px 32px;
    background: var(--color-sand);
    border-radius: var(--radius);
    text-align: left;
}

/* On a sand section the cards switch to cream so they never blend into the background */
.bg_sand .review_card {
    background: var(--color-cream);
}

.review_stars {
    font-size: 15px;
    letter-spacing: .2em;
    color: var(--color-gold);
}

.review_text {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 21px;
    line-height: 1.45;
    color: var(--color-ink);
}

.review_text::before {
    content: '“';
}

.review_text::after {
    content: '”';
}

/* Long reviews (classes added by JS): 4 lines shown; "Read More" keeps the same
   fixed 4-line height and lets the full review scroll inside it */
.review_text.is_clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.review_text.is_expanded {
    height: calc(4 * 1.45em);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
}

.review_text.is_expanded::-webkit-scrollbar {
    width: 4px;
}

.review_text.is_expanded::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 4px;
}

.review_text.is_expanded:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

.review_more {
    align-self: flex-start;
    margin-top: -6px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-gold-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.review_more:hover {
    color: var(--color-ink);
}

.review_more[hidden] {
    display: none;
}

.review_name {
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-ink);
}

.review_name + .review_stars {
    margin-top: -8px;
}

.review_footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--color-line);
    display: flex;
}

.review_logo {
    width: 24px;
    height: auto;
}

.slider_controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
}

/* Nothing to slide: every card is already visible (any slider: reviews, doctors, before & after) */
[data-slider].is_static .slider_controls {
    display: none;
}

.slider_arrow {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-ink);
    border-radius: 50%;
    background: none;
    color: var(--color-ink);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.slider_arrow:hover:not(:disabled) {
    background: var(--color-ink);
    color: var(--color-white);
}

.slider_arrow:disabled {
    opacity: .3;
    cursor: default;
}

.slider_dots {
    display: flex;
    gap: 10px;
}

.slider_dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-line);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.slider_dot.is_active {
    background: var(--color-gold-dark);
    transform: scale(1.25);
}

/* ---------- Before & After: patient spotlight cards (live-site layout) ---------- */
/* Slider (shared slider script): three cards per view (two on tablets, one on phones).
   Each card: After portrait on top with a framed "Before" close-up overlapping its corner,
   white story panel below. Fewer cards than fit stay centered and the arrows/dots hide. */
.case_slider {
    width: 100%;
    margin-top: 32px;
}

.case_list.slider_track {
    gap: 32px;
    padding: 8px 0 48px; /* room for the card shadows inside the scroll area */
}

.case_slider .slider_controls {
    margin-top: 0;
}

.case_card {
    flex: 0 0 calc((100% - 64px) / 3);
    scroll-snap-align: start;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(40, 35, 30, .10);
    text-align: left;
}

/* Card height follows the text, not the photo: the After portrait fills its side
   (cropped toward the face). min-height is on the container, never on the image. */
.case_media {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    background: var(--color-charcoal);
}

.case_media .case_after_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 68%; /* keeps the smile above the "Before" frame */
}

/* "After" pill on the portrait */
.case_tag {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* Framed "Before" close-up overlapping the bottom-left of the portrait */
.case_before {
    position: absolute;
    left: 22px;
    bottom: 22px;
    width: 40%;
    margin: 0;
    padding: 5px;
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.case_before img {
    border-radius: 6px 6px 0 0;
}

.case_before_label {
    display: block;
    padding: 5px 0 4px;
    border-radius: 0 0 6px 6px;
    background: var(--color-charcoal);
    color: var(--color-white);
    font-size: 9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
}

.case_body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 30px 30px 34px;
}

.case_name {
    position: relative;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(28px, 2.4vw, 34px);
    line-height: 1.1;
}

.case_caption {
    position: relative;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-body);
}

.case_quote {
    position: relative;
    margin: 4px 0 0;
    padding-left: 18px;
    border-left: 2px solid var(--color-gold);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.5;
    color: var(--color-ink);
}

.case_quote::before {
    content: '“';
}

.case_quote::after {
    content: '”';
}

.case_cta {
    margin-top: 8px;
}

@media (max-width: 991px) {
    .case_card {
        flex-basis: calc((100% - 32px) / 2);
    }
}

@media (max-width: 767px) {
    .case_card {
        flex-basis: 100%;
        border-radius: 14px;
    }

    .case_media {
        min-height: 300px;
    }

    .case_before {
        left: 14px;
        bottom: 14px;
        width: 58%;
    }

    .case_tag {
        top: 14px;
        left: 14px;
    }

    .case_body {
        gap: 12px;
        padding: 30px 24px 32px;
    }

    .case_quote {
        font-size: 18px;
    }
}

/* ---------- Home: shared bits for the content sections ---------- */
/* Plain list of secondary text links (e.g. New Patients · Our Technology · Our Facility) */
.link_list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.services_row_title {
    margin: 40px 0 16px;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-gold-dark);
}

.doctors_head {
    margin-bottom: 56px;
}

/* Doctor slider: one dentist (photo + bio) per slide */
.doctor_slider .slider_track {
    padding: 16px 0 56px; /* room for the photo card's shadow inside the scroll area */
}

.doctor_slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.doctor_slider .slider_controls {
    margin-top: 0;
}

.doctor_name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
}

.doctors_cta {
    margin-top: 56px;
}

/* Request · Map · Pay Online strip under the closing "Schedule Your Visit" block */
.cta_strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
    margin-top: 12px;
}

.cta_strip i {
    margin-right: 6px;
    color: var(--color-gold-dark);
}

/* ---------- Service page (Dental Implants) ---------- */
/* Each card spans 3 shared rows (image box, title, text) via subgrid, so image boxes,
   titles and text line up across cards whatever the image proportions are. */
.option_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 16px;
}

.option_card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 16px;
    padding: 32px;
    background: var(--color-cream);
    border-radius: var(--radius);
}

/* Two cards per row (service pages with 2 or 4 options) */
.option_grid_two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1000px;
    margin: 0 auto;
}

/* Cards on a plain (cream) section need the sand tone to stand out */
.section_padding:not(.bg_sand) .option_card {
    background: var(--color-sand);
}

.option_media {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Keep illustrations a sensible size when the cards stack to full width */
.option_media img {
    max-width: 360px;
    margin: 0 auto;
    border-radius: var(--radius);
}

.option_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
}

.option_links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 48px;
    text-align: center;
}

.option_links .link_list {
    justify-content: center;
}

.faq_head,
.team_head {
    margin-bottom: 40px;
}

.faq_list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq_item {
    background: var(--color-cream);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

/* FAQ on a plain (cream) section: sand items so they stand apart from the background */
.section_padding:not(.bg_sand) .faq_item {
    background: var(--color-sand);
}

.faq_question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    list-style: none;
    cursor: pointer;
}

.faq_question::-webkit-details-marker {
    display: none;
}

.faq_question h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
}

.faq_question::after {
    content: '+';
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 300;
    color: var(--color-gold-dark);
    transition: transform .2s ease;
}

.faq_item[open] .faq_question::after {
    transform: rotate(45deg);
}

.faq_question:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}

.faq_answer {
    padding: 0 28px 28px;
}

.faq_answer p,
.faq_answer li {
    line-height: 1.75;
    color: var(--color-body);
}

.faq_answer p + p,
.faq_answer ul {
    margin-top: 12px;
}

.faq_answer ul {
    padding-left: 20px;
    list-style: disc;
}

.faq_answer li::marker {
    color: var(--color-gold-dark);
}

/* Links inside running text (FAQ answers, service page copy) */
.faq_answer a,
.text_body a,
.check_list a,
.data_table a,
.note_text a {
    color: var(--color-gold-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.text_body a:hover,
.check_list a:hover,
.data_table a:hover,
.note_text a:hover {
    color: var(--color-ink);
}

.faq_cta {
    margin-top: 40px;
}

/* ---------- Doctor profile cards (include/doctor-cards.php) ---------- */
/* Horizontal card: portrait on one side, name + bio + actions on the other.
   Two doctors stack; the second card mirrors so the photos zig-zag. */
.doctor_profiles {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1080px;
    margin: 0 auto;
}

.doctor_profile {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    overflow: hidden;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(40, 35, 30, .10);
    text-align: left;
}

.doctor_profile:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.doctor_profile:nth-child(even) .doctor_profile_media {
    order: 2;
}

/* Card height follows the bio; the portrait fills its side (sized on the frame, never the image) */
.doctor_profile_media {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: var(--color-charcoal);
}

.doctor_profile_media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* keeps the face in frame */
    transition: transform .6s ease;
}

.doctor_profile:hover .doctor_profile_media img {
    transform: scale(1.03);
}

.doctor_profile_body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    padding: 48px 52px;
}

.doctor_profile_name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.1;
}

.doctor_profile_rule {
    display: block;
    width: 56px;
    height: 2px;
    margin: 4px 0;
    background: var(--color-gold);
}

.doctor_profile_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 10px;
}

/* ---------- Service pages: shared content blocks ---------- */
/* Centered heading block above a grid, table or list */
.block_head {
    margin-bottom: 40px;
}

/* Bulleted list with gold diamonds (candidate signs, care tips, symptoms…) */
.check_list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.check_list li {
    position: relative;
    padding-left: 26px;
    line-height: 1.7;
    color: var(--color-body);
    text-align: left;
}

.check_list li::before {
    content: '';
    position: absolute;
    top: .72em;
    left: 2px;
    width: 7px;
    height: 7px;
    background: var(--color-gold-dark);
    transform: rotate(45deg);
}

/* Cards for H3 + text groups (benefits, treatment types, reasons to choose us):
   three per row (two on tablets, one on phones); a shorter last row stays centered */
.feature_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.feature_card {
    flex: 0 1 calc((100% - 48px) / 3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    background: var(--color-sand);
    border-radius: var(--radius);
    border-top: 2px solid var(--color-gold);
    text-align: left;
}

.bg_sand .feature_card {
    background: var(--color-cream);
}

.feature_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
}

/* Numbered treatment steps */
.step_grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

.step_card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    background: var(--color-sand);
    border-radius: var(--radius);
    text-align: left;
}

.bg_sand .step_card {
    background: var(--color-cream);
}

.step_number {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 40px;
    line-height: 1;
    color: var(--color-gold-dark);
}

.step_title {
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.5;
}

/* Comparison and cost tables: scroll sideways inside their box on small screens */
.table_wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-white);
}

.data_table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    text-align: left;
}

.data_table th,
.data_table td {
    padding: 16px 22px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: top;
    line-height: 1.6;
}

.data_table thead th {
    background: var(--color-charcoal);
    color: var(--color-white);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
}

.data_table tbody th {
    font-weight: 500;
    color: var(--color-ink);
}

.data_table td {
    color: var(--color-body);
}

.data_table tbody tr:last-child th,
.data_table tbody tr:last-child td {
    border-bottom: 0;
}

/* Small print under a table (e.g. cost estimates) */
.note_text {
    max-width: 1000px;
    margin: 20px auto 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-muted);
    text-align: center;
}

@media (max-width: 991px) {
    .feature_card {
        flex-basis: calc((100% - 24px) / 2);
    }

    .doctor_profile_body {
        padding: 36px 32px;
    }

    /* Stacked cards don't need to line up with each other */
    .option_grid {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .option_card {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }
}

@media (max-width: 767px) {
    /* Doctor cards: photo on top, text below */
    .doctor_profile,
    .doctor_profile:nth-child(even) {
        grid-template-columns: 1fr;
        border-radius: 14px;
    }

    .doctor_profile:nth-child(even) .doctor_profile_media {
        order: 0;
    }

    .doctor_profile_media {
        min-height: 340px;
    }

    .doctor_profile_body {
        padding: 30px 24px 32px;
    }

    .option_card,
    .feature_card,
    .step_card {
        padding: 24px;
    }

    .feature_card {
        flex-basis: 100%;
    }

    .data_table th,
    .data_table td {
        padding: 14px 16px;
    }

    .faq_question {
        padding: 18px 20px;
    }

    .faq_question h3 {
        font-size: 19px;
    }

    .faq_answer {
        padding: 0 20px 22px;
    }
}

/* ---------- Appointment (footer CTA) ---------- */
/* Banner photo behind the appointment section, darkened so the white text stays readable */
.appointment {
    position: relative;
    background: url('../images/banner-image.png') center / cover no-repeat var(--color-charcoal);
}

.appointment::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 20, 22, .55), rgba(20, 20, 22, .82));
}

.appointment_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 56px;
    align-items: center;
}

.appointment_form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 34px;
    background: var(--color-cream);
    border-radius: 8px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
}

.form_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
}

/* Two fields side by side; they stack when there is no room (flex, like the card rows) */
.form_row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.form_row > * {
    flex: 1 1 150px;
    min-width: 0;
}

/* Phones: every form field on its own full-width row (all forms) */
@media (max-width: 767px) {
    .form_row > * {
        flex-basis: 100%;
    }
}

/* body prefix: beats WordPress theme rules like input[type="text"] on the blog (same weight, this file loads last) */
body .form_control {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 14px;
    font-weight: 300;
}

.form_control::placeholder {
    color: #8b857b;
}

body .form_control:focus {
    outline: none;
    border-color: var(--color-gold);
    background-color: var(--color-white);
}

body select.form_control {
    color: var(--color-body);
}

/* Field + its error labels (hidden until the footer script adds .is_visible) */
.form_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form_error {
    display: none;
    padding-left: 18px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #c62828;
}

.form_error.is_visible {
    display: block;
}

/* SMS consent checkboxes + policy links (class names kept from /survey.php) */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--color-gold-dark);
    cursor: pointer;
}

.form-checkbox label {
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-body);
    cursor: pointer;
}

.disclaimer-msg p {
    font-size: 12px;
    color: var(--color-body);
}

/* !important: the blog theme forces a { text-decoration: none !important } */
.disclaimer-msg a {
    color: var(--color-gold-dark);
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.disclaimer-msg a:hover {
    color: var(--color-ink);
}

.form_control[aria-invalid="true"] {
    border-color: #c62828;
}

.form_control[aria-invalid="true"]:focus {
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}

body .form_textarea {
    border-radius: 18px;
    resize: vertical;
}

.appointment_content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--color-white);
}

.appointment_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.05;
}

.appointment_content p {
    max-width: 440px;
    line-height: 1.7;
    color: #e0dbd2;
}

.appointment_call {
    font-size: 15px;
}

.appointment_call a {
    color: var(--color-gold);
}

.appointment_call a:hover {
    color: var(--color-white);
}

/* ---------- Footer ---------- */
.site_footer {
    background: var(--color-footer);
    color: #d9d4cb;
    padding-top: 60px;
}

.footer_map iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
    border-radius: 6px;
}

/* Three fixed columns: contacts left, brand centered, address/hours right */
.footer_info {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: start;
    padding: 56px 0;
}

.footer_contact_end {
    justify-self: end;
    text-align: right;
}

.footer_contact {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer_label {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.footer_value {
    font-size: 17px;
    color: #d9d4cb;
    word-break: break-word;
}

.footer_text {
    font-size: 16px;
    line-height: 1.6;
}

/* Address links to Google Maps */
.footer_text a {
    color: inherit;
}

.footer_brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.footer_logo {
    width: 240px;
}

.footer_tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--color-gold);
}

.footer_social,
.footer_legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Social links: round icon buttons (footer + contact info card) */
.footer_social {
    justify-content: center;
    gap: 14px;
}

.footer_social a,
.info_social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(201, 169, 121, .55);
    border-radius: 50%;
    background: rgba(201, 169, 121, .12);
    font-size: 20px;
    line-height: 1;
    color: var(--color-gold);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}

.footer_social a:hover,
.info_social a:hover {
    border-color: var(--color-gold);
    background: var(--color-gold);
    color: var(--color-black);
    transform: translateY(-3px);
}

.footer_social a:focus-visible,
.info_social a:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

.footer_value:hover,
.footer_text a:hover,
.footer_col a:hover,
.footer_legal a:hover {
    color: var(--color-white);
}

/* Fixed column counts (5 link groups) so the grid always fills the container exactly —
   auto-fit created an extra empty track + gap past the right edge on wide screens. */
.footer_links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

@media (max-width: 991px) {
    .footer_links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 36px;
    }
}

@media (max-width: 767px) {
    .footer_links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }
}

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

.footer_col a {
    font-size: 14px;
    color: #bdb7ad;
}

.footer_col a.footer_label {
    margin-bottom: 4px;
    font-size: 10px;
    color: var(--color-gold);
}

.footer_bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: capitalize;
    color: #d9d4cb;
}

.footer_legal a {
    color: #d9d4cb;
}

/* Tablet and phone: everything centred, legal links on top, copyright below */
@media (max-width: 991px) {
    .footer_bottom {
        flex-direction: column-reverse;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    .footer_legal {
        justify-content: center;
        gap: 10px 20px;
    }
}

/* ---------- 404 page ---------- */
.error_code {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(110px, 18vw, 200px);
    line-height: .9;
    color: var(--color-gold);
}

.error_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.1;
}

.error_text {
    max-width: 480px;
    line-height: 1.6;
    color: #e4dfd7;
}

.error_call {
    font-size: 15px;
    color: #d9d4cb;
}

.error_call a {
    color: var(--color-gold);
}

.error_call a:hover {
    color: var(--color-white);
}

.section_head_text {
    max-width: 950px;
}

/* ---------- Testimonials: all reviews in a grid (no slider) ---------- */
.review_grid {
    width: 100%;
    margin: 24px 0;
}

/* ---------- Smile Gallery ---------- */
/* Intro: lead sentence + booking button, centred */
.gallery_intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.gallery_lead {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.35;
    color: var(--color-ink);
}

/* Shared "Before" / "After" pill */
.story_label {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
}

.story_label_after {
    background: var(--color-gold);
}

/* Patient Spotlights: tabs (radio buttons) + one story at a time */
.story_tablist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 56px;
}

.story_tab {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 24px 7px 7px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-pill);
    color: #d9d4cb;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.story_tab:hover {
    border-color: var(--color-gold);
    color: var(--color-white);
}

/* round thumbnail: the frame is sized, the photo fills it */
.story_tab_thumb {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
}

.story_tab_thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

#story_shelby:checked ~ .story_tablist .story_tab_shelby,
#story_joanne:checked ~ .story_tablist .story_tab_joanne,
#story_alex:checked ~ .story_tablist .story_tab_alex {
    border-color: var(--color-gold);
    background: var(--color-gold);
    color: var(--color-charcoal);
}

#story_shelby:focus-visible ~ .story_tablist .story_tab_shelby,
#story_joanne:focus-visible ~ .story_tablist .story_tab_joanne,
#story_alex:focus-visible ~ .story_tablist .story_tab_alex {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

.story_panel {
    display: none;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

#story_shelby:checked ~ .story_panels .story_panel_shelby,
#story_joanne:checked ~ .story_panels .story_panel_joanne,
#story_alex:checked ~ .story_panels .story_panel_alex {
    display: grid;
}

/* After portrait in a 4:5 frame (sized on the frame, not the image) */
.story_media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.story_after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.story_body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.story_name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1;
    color: var(--color-white);
}

.story_caption {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--color-gold);
}

.story_quote {
    position: relative;
    margin: 12px 0 8px;
    padding-left: 40px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.45;
    color: var(--color-white);
}

.story_quote::before {
    content: '“';
    position: absolute;
    top: -14px;
    left: 0;
    font-size: 72px;
    line-height: 1;
    color: var(--color-gold);
}

.story_quote::after {
    content: '”';
}

/* Before close-up: natural proportions, framed */
.story_before {
    position: relative;
    width: min(100%, 340px);
    margin: 8px 0 0;
    overflow: hidden;
    border: 4px solid var(--color-white);
    border-radius: 14px;
}

/* Gallery Cases: split Before | After preview cards */

.gallery_tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(40, 35, 30, .10);
    text-align: left;
}

.bg_sand .gallery_tile {
    background: var(--color-cream);
}

/* both halves share one 4:3 frame (sized on the frame, not the images) */
.gallery_split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 4 / 3;
    background: var(--color-charcoal);
}

.gallery_split::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: var(--color-white);
}

.gallery_half {
    position: relative;
    overflow: hidden;
}

.gallery_half img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.gallery_tile_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 24px 26px;
}

.gallery_tile_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
}

@media (max-width: 991px) {
    .story_panel {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .story_media {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {

    .story_tab {
        padding-right: 16px;
        font-size: 11px;
    }
}

.gallery_case_caption {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-body);
}

/* ---------- Office Tour: photo grid ---------- */
.photo_grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

/* first two photos large (3 columns each), the rest smaller (2 columns each) */
.photo_tile {
    position: relative;
    grid-column: span 2;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-charcoal);
}

.photo_tile:nth-child(-n+2) {
    grid-column: span 3;
}

.photo_tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Patient Info ---------- */
/* Quick Links: welcome text beside a list of link rows */
.pi_welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}

.pi_lead {
    font-family: var(--font-serif);
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.4;
    color: var(--color-ink);
}

.pi_links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pi_link {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(40, 35, 30, .08);
    color: var(--color-ink);
    transition: background-color .3s ease, transform .3s ease;
}

.pi_link_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-sand);
    color: var(--color-gold-dark);
    font-size: 22px;
    transition: background-color .3s ease, color .3s ease;
}

.pi_link_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
    transition: color .3s ease;
}

.pi_link_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    color: var(--color-gold-dark);
    font-size: 18px;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.pi_link:hover {
    background: var(--color-charcoal);
    transform: translateX(6px);
}

.pi_link:hover .pi_link_title {
    color: var(--color-white);
}

.pi_link:hover .pi_link_icon {
    background: var(--color-charcoal-2);
    color: var(--color-gold);
}

.pi_link:hover .pi_link_arrow {
    border-color: var(--color-gold);
    background: var(--color-gold);
    color: var(--color-black);
}

.pi_link:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* Your First Visit: photo collage that stays in view + numbered timeline */
.visit_grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
}

.visit_media {
    position: sticky;
    top: 150px;
}

.visit_photo {
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
}

.visit_photo_main {
    width: 84%;
    box-shadow: 0 30px 60px rgba(40, 35, 30, .14);
}

/* second photo overlaps the first, framed in the section colour */
.visit_photo_inset {
    position: relative;
    width: 58%;
    margin: -32% 0 0 auto;
    border: 10px solid var(--color-sand);
    border-radius: 26px;
}

.visit_steps {
    margin: 16px 0 12px;
    padding: 0;
    list-style: none;
}

.visit_step {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 28px;
    padding-bottom: 36px;
}

/* line joining the step numbers */
.visit_step::before {
    content: '';
    position: absolute;
    top: 64px;
    bottom: 8px;
    left: 28px;
    width: 1px;
    background: var(--color-gold);
    opacity: .5;
}

.visit_step:last-child {
    padding-bottom: 0;
}

.visit_step:last-child::before {
    display: none;
}

.visit_step_num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    background: var(--color-cream);
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--color-gold-dark);
}

.visit_step_body {
    padding-top: 12px;
}

.visit_step_title {
    margin-bottom: 8px;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
}

/* Advanced Technologies: white content card overlapping the photo */
.tech_feature {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
}

.tech_card {
    grid-column: 1 / span 7;
    grid-row: 1;
    z-index: 1;
    padding: 56px;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(40, 35, 30, .12);
}

.tech_media {
    grid-column: 7 / -1;
    grid-row: 1;
    overflow: hidden;
    border-radius: 18px;
}

/* Book Dental Treatment: photo fills the left side of a white panel; the text sets the height */
.book_panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    overflow: hidden;
    background: var(--color-white);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(40, 35, 30, .10);
}

.book_panel_media {
    position: relative;
    min-height: 420px;
}

.book_panel_media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book_panel_body {
    padding: 64px;
}

@media (max-width: 991px) {
    .pi_welcome,
    .visit_grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .visit_media {
        position: static;
        width: 100%;
        max-width: 520px;
    }

    .tech_card,
    .tech_media {
        grid-column: 1 / -1;
    }

    .tech_media {
        grid-row: 1;
        width: 100%;
        max-width: 620px;
        justify-self: center;
    }

    /* card moves under the photo and overlaps its bottom edge */
    .tech_card {
        grid-row: 2;
        margin: -80px 24px 0;
        padding: 44px;
    }

    .book_panel {
        grid-template-columns: 1fr;
    }

    /* the frame is sized here, the photo fills it */
    .book_panel_media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .book_panel_body {
        padding: 48px 40px;
    }
}

@media (max-width: 575px) {
    .pi_link {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .pi_link_icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .pi_link_title {
        font-size: 22px;
    }

    .pi_link_arrow {
        display: none;
    }

    .visit_step {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 18px;
    }

    .visit_step::before {
        top: 52px;
        left: 22px;
    }

    .visit_step_num {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .visit_step_body {
        padding-top: 6px;
    }

    .visit_step_title {
        font-size: 23px;
    }

    .tech_card {
        margin: -48px 12px 0;
        padding: 32px 24px;
    }

    .book_panel_body {
        padding: 36px 24px;
    }
}

/* ---------- Contact page ---------- */
.contact_grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: start;
}

.contact_form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(40, 35, 30, .10);
}

/* Radio group (fieldset) without the browser frame */
fieldset.form_field {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* a legend sits outside the fieldset's flex gap, so it gets the same 6px space as the other field labels */
fieldset.form_field > legend {
    margin-bottom: 6px;
}

/* In-page jump targets (e.g. /financial-info/#payment-options) stop below the sticky header */
section[id],
div[id].section_padding {
    scroll-margin-top: 140px;
}

/* Contact form: "Who Referred You?" opens only when "How did you hear about us?" is "Other" (as on the
   live form). Pure CSS; browsers without :has() support simply keep the field visible. */
@supports selector(:has(a)) {
    .referrer_field {
        display: none;
    }

    .contact_form:has(#contact_source option[value="Other"]:checked) .referrer_field {
        display: flex;
    }
}

.form_group_label {
    padding-left: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink);
}

.form_choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding-left: 4px;
}

.form_choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-body);
    cursor: pointer;
}

.form_choice input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-gold-dark);
}

/* Dark contact information card */
.info_card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px;
    background: var(--color-charcoal);
    border-radius: 18px;
    color: var(--color-white);
}

.info_card_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
}

.info_list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info_list li {
    display: flex;
    gap: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: #d9d4cb;
}

.info_list i {
    flex-shrink: 0;
    width: 18px;
    margin-top: 4px;
    color: var(--color-gold);
    text-align: center;
}

.info_list a {
    color: var(--color-white);
}

.info_list a:hover {
    color: var(--color-gold);
}

.info_label {
    display: block;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.hours_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.hours_table th,
.hours_table td {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    text-align: left;
    font-weight: 300;
    color: #d9d4cb;
}

.hours_table td {
    text-align: right;
}

.hours_table tr:last-child th,
.hours_table tr:last-child td {
    border-bottom: 0;
}

.info_social {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Sitemap page ---------- */
/* Website pages: one white card per group */

.sitemap_card {
    padding: 28px 28px 22px;
    background: var(--color-white);
    border-top: 3px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(40, 35, 30, .08);
}

.sitemap_card_title {
    margin-bottom: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
}

.sitemap_list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-body);
}

.sitemap_list li + li a {
    border-top: 1px dashed var(--color-line);
}

.sitemap_list a::after {
    content: '→';
    flex-shrink: 0;
    color: var(--color-gold);
    transition: transform .2s ease;
}

.sitemap_list a:hover {
    color: var(--color-gold-dark);
}

.sitemap_list a:hover::after {
    transform: translateX(4px);
}



@media (max-width: 575px) {

    .sitemap_card {
        padding: 24px 22px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sitemap_list a::after {
        transition: none;
    }

    .sitemap_list a:hover::after {
        transform: none;
    }
}

/* ---------- FAQs hub: category jump links ---------- */
.chip_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1000px;
    margin: 0 auto;
}

.chip {
    padding: 9px 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.chip:hover {
    border-color: var(--color-gold-dark);
    background: var(--color-gold-dark);
    color: var(--color-white);
}

/* each FAQ category: heading + link to the service page */
.faq_category {
    scroll-margin-top: 160px; /* clears the sticky header when jumping from a chip */
}

.faq_category + .faq_category {
    margin-top: 72px;
}

.faq_category_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 24px;
    max-width: 900px;
    margin: 0 auto 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-line);
}

.faq_category_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
}

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

    .photo_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .photo_tile,
    .photo_tile:nth-child(-n+2) {
        grid-column: span 1;
    }

    .photo_tile:first-child {
        grid-column: 1 / -1;
    }
}

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

    .contact_form,
    .info_card {
        padding: 26px 22px;
    }
}

/* ---------- Dark section ---------- */
.bg_dark {
    background: var(--color-charcoal);
    color: var(--color-white);
}

.bg_dark .section_title {
    color: var(--color-white);
}

.bg_dark .text_body {
    color: #d9d4cb;
}

.bg_dark .text_link {
    color: var(--color-gold);
}

.bg_dark .text_link:hover {
    color: var(--color-white);
}

/* ---------- Meet Our Team page ---------- */
/* Section head: title on the left, intro text on the right */
.staff_head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 80px;
    align-items: end;
    margin-bottom: 64px;
}

/* Staff: portrait cards, every second card set lower for a staggered row */

.team_card:nth-child(even) {
    margin-top: 64px;
}

.team_card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: var(--color-charcoal);
    box-shadow: 0 24px 50px rgba(40, 35, 30, .14);
}

/* every photo in the same 3:4 frame (sized on the frame, not the image) */
.team_card_photo {
    position: relative;
    aspect-ratio: 3 / 4;
}

.team_card_photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .7s ease;
}

/* dark fade at the bottom so the name reads over the photo */
.team_card_photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 32, 34, 0) 38%, rgba(31, 32, 34, .6) 62%, rgba(31, 32, 34, .95) 100%);
}

.team_card:has(.team_card_btn):hover .team_card_photo img {
    transform: scale(1.06);
}

.team_card_info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px;
}

.team_card_name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    color: var(--color-white);
}

.team_card_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-white);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* the button covers the whole card, so any click on the card opens the bio */
.team_card_btn::after {
    content: '';
    position: absolute;
    inset: 0;
}

.team_card:hover .team_card_btn {
    border-color: var(--color-gold);
    background: var(--color-gold);
    color: var(--color-black);
}

.team_card_btn:focus-visible {
    outline: none;
}

.team_card:has(.team_card_btn:focus-visible) {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

/* Bio popup (native popover): photo with name on the left, the whole bio on the right (no scrolling on desktop) */
.bio_modal {
    width: min(1180px, calc(100% - 48px));
    min-height: min(520px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--color-cream);
    color: var(--color-ink);
    border-radius: 24px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(24px) scale(.98);
    transition: opacity .3s ease, transform .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}

.bio_modal:popover-open {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    opacity: 1;
    transform: none;
}

@starting-style {
    .bio_modal:popover-open {
        opacity: 0;
        transform: translateY(24px) scale(.98);
    }
}

.bio_modal::backdrop {
    background: rgba(20, 20, 22, .8);
    backdrop-filter: blur(4px);
}

.bio_modal_media {
    position: relative;
    min-height: 260px;
    background: var(--color-charcoal);
}

.bio_modal_media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.bio_modal_media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 32, 34, 0) 45%, rgba(31, 32, 34, .6) 68%, rgba(31, 32, 34, .95) 100%);
}

.bio_modal_id {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
}

.bio_modal_name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.05;
    color: var(--color-white);
}

.bio_modal_body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px 48px 56px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bio_modal_text {
    max-width: 640px;
}

/* long bios: two columns with a thin rule between them */
.bio_modal_text_cols {
    max-width: none;
    columns: 2;
    column-gap: 56px;
    column-rule: 1px solid var(--color-line);
}

.bio_modal_text p {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-body);
    text-wrap: pretty;
}

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

/* short bios: narrower popup, larger text */
.bio_modal_short {
    width: min(920px, calc(100% - 48px));
    min-height: min(460px, calc(100vh - 48px));
}

.bio_modal_short .bio_modal_text p {
    font-size: 17px;
    line-height: 1.75;
}

/* gold drop cap on the first paragraph */
.bio_modal_text p:first-child::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    font-family: var(--font-serif);
    font-size: 58px;
    line-height: .8;
    color: var(--color-gold-dark);
}

.bio_modal_close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--color-charcoal);
    color: var(--color-white);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .3s ease;
}

.bio_modal_close:hover {
    background: var(--color-gold-dark);
}

.bio_modal_close:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* page behind the open popup does not scroll */
@supports selector(:has(a)) {
    body:has(.bio_modal:popover-open) {
        overflow: hidden;
    }
}

/* short desktop screens (laptops): tighter text so the bio still fits */
@media (min-width: 992px) and (max-height: 760px) {
    .bio_modal_body {
        padding: 44px 56px 36px 48px;
    }

    .bio_modal_text p {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
    }
}

@media (max-width: 991px) {
    .staff_head {
        grid-template-columns: 1fr;
        margin-bottom: 48px;
    }

    /* photo on top, bio scrolls below */
    .bio_modal:popover-open {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    /* the photo frame keeps a 3:2 shape (sized on the frame, the photo fills it) so the whole head and shoulders show */
    .bio_modal_media {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }

    .bio_modal_media img {
        object-position: center 25%;
    }

    .bio_modal,
    .bio_modal_short {
        width: min(640px, calc(100% - 32px));
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
        max-height: none;
        border-radius: 20px;
    }

    .bio_modal_body {
        justify-content: flex-start;
        padding: 32px 28px 36px;
    }

    .bio_modal_text_cols {
        columns: 1;
    }
}

@media (max-width: 575px) {

    .team_card:nth-child(even) {
        margin-top: 0;
    }

    .bio_modal:popover-open {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .bio_modal_media {
        aspect-ratio: 1 / 1;
    }

    .bio_modal_body {
        padding: 28px 22px 32px;
    }

    .bio_modal_name {
        font-size: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team_card_photo img,
    .bio_modal {
        transition: none;
    }

    .team_card:has(.team_card_btn):hover .team_card_photo img {
        transform: none;
    }
}

/* ---------- About Us: Meet the Doctors / Meet Our Team cards ---------- */
/* Doctor card: portrait beside name + designation; the button covers the card, so the whole card links to the doctor's page */
.dentist_grid {
    max-width: 1140px;
    margin: 0 auto;
}

.dentist_card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    overflow: hidden;
    background: var(--color-white);
    border-radius: 22px;
    box-shadow: 0 24px 50px rgba(40, 35, 30, .10);
    transition: transform .3s ease, box-shadow .3s ease;
}

.dentist_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 60px rgba(40, 35, 30, .16);
}

/* 3:4 portrait frame (sized on the frame, the photo fills it) */
.dentist_card_photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-charcoal);
}

.dentist_card_photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    transition: transform .7s ease;
}

.dentist_card:hover .dentist_card_photo img {
    transform: scale(1.05);
}

.dentist_card_body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: 40px 36px;
}

.dentist_card_name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(26px, 2.4vw, 32px);
    line-height: 1.15;
}

.dentist_card_rule {
    width: 48px;
    height: 1px;
    margin: 4px 0 10px;
    background: var(--color-gold);
}

.dentist_card .btn::after {
    content: '';
    position: absolute;
    inset: 0;
}

.dentist_card:hover .btn_dark {
    background: var(--color-gold-dark);
}

.dentist_card .btn:focus-visible {
    outline: none;
}

.dentist_card:has(.btn:focus-visible) {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

/* single "Meet Our Team" button under the staff cards */
.team_more {
    margin-top: 56px;
}

@media (max-width: 991px) {
    .dentist_grid {
        max-width: 640px;
    }
}

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

    .dentist_card_photo {
        aspect-ratio: 4 / 5;
    }

    .dentist_card_body {
        padding: 28px 24px 30px;
    }

    .team_more {
        margin-top: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dentist_card,
    .dentist_card_photo img {
        transition: none;
    }

    .dentist_card:hover,
    .dentist_card:hover .dentist_card_photo img {
        transform: none;
    }
}

/* ---------- Services overview: photo cards ---------- */
/* Group heading (Restorative, Cosmetic…) with a thin rule running to the right */
.services_group_title {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 64px 0 28px;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
}

.services_group_title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-line);
}

.block_head + .services_group .services_group_title {
    margin-top: 0;
}

.service_tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(40, 35, 30, .08);
    color: var(--color-ink);
    transition: transform .3s ease, box-shadow .3s ease;
}

.service_tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(40, 35, 30, .14);
    color: var(--color-ink);
}

.service_tile:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

/* Every card shows its photo in the same 4:3 frame (set on the frame, not the image);
   the photo fills it, so cards line up whatever the source image proportions are */
.service_tile_media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-sand);
}

.service_tile_media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.service_tile:hover .service_tile_media img {
    transform: scale(1.05);
}

.service_tile_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 28px 28px;
    border-top: 2px solid var(--color-gold);
}

.service_tile_title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
}

.service_tile_link {
    margin-top: auto;
    color: var(--color-gold-dark);
}

.service_tile_arrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform .2s ease;
}

.service_tile:hover .service_tile_arrow {
    transform: translateX(6px);
}

/* ---------- Doctor page ---------- */
.edu_grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

.edu_card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 36px 32px;
    background: var(--color-cream);
    border-radius: var(--radius);
    border-top: 2px solid var(--color-gold);
}

.edu_step {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 40px;
    line-height: 1;
    color: var(--color-gold-dark);
}

.edu_title {
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
}

.edu_place {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.2;
}

.edu_text {
    font-size: 14px;
    color: var(--color-muted);
}

.focus_card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 40px;
    background: var(--color-charcoal);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.focus_list li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: 16px;
    line-height: 1.6;
    color: #d9d4cb;
}

.focus_list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.focus_list .diamond {
    flex-shrink: 0;
    transform: translateY(-2px) rotate(45deg);
}

.related_card {
    min-height: 150px;
    justify-content: space-between;
    gap: 20px;
}

.related_arrow {
    color: var(--color-gold);
    transition: transform .2s ease;
}

.service_card_bronze .related_arrow {
    color: var(--color-white);
}

.related_card:hover .related_arrow {
    transform: translateX(6px);
}

/* ---------- Legal / long-form content ---------- */
/* Legal pages: one readable column (no sidebar) */
.legal_content {
    max-width: 900px;
    margin: 0 auto;
}

.legal_content h2 {
    margin: 44px 0 14px;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 32px);
    line-height: 1.2;
}

.legal_content h3 {
    margin: 28px 0 12px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
}

.legal_content p,
.legal_content li {
    line-height: 1.75;
    color: var(--color-body);
}

.legal_content p {
    margin-bottom: 16px;
}

.legal_content ul {
    margin: 0 0 16px;
    padding-left: 20px;
    list-style: disc;
}

.legal_content li {
    margin-bottom: 8px;
}

.legal_content li::marker {
    color: var(--color-gold-dark);
}

.legal_content a {
    color: var(--color-gold-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere; /* long URLs wrap on small screens */
}

.legal_content a:hover {
    color: var(--color-ink);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Large tablets / small laptops — collapsible navigation */
@media (max-width: 1199px) {
    .menu_toggle {
        display: flex;
    }

    .header_menu {
        display: none;
        position: absolute;
        top: calc(100% + 16px);
        left: 0;
        right: 0;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 24px;
        background: var(--color-black);
        border-radius: 6px;
        box-shadow: var(--shadow-strong);
    }

    .header_menu.is_open {
        display: flex;
    }

    .main_nav {
        margin: 0;
    }

    .nav_list {
        height: auto;
        flex-direction: column;
        gap: 0;
    }

    .nav_item {
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .nav_link {
        padding: 14px 0;
        font-size: 12px;
    }

    .submenu_toggle {
        padding: 14px 4px 14px 20px;
        font-size: 14px;
    }

    .has_dropdown.is_open > .submenu_toggle .submenu_icon {
        transform: rotate(180deg);
    }

    .dropdown,
    .dropdown_mega {
        position: static;
        width: 100%;
        padding: 0 0 16px;
    }

    .dropdown_panel {
        min-width: 0;
        padding: 0 0 0 14px;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }

    .dropdown_panel a {
        color: #d9d4cb;
    }

    .dropdown_panel a:hover {
        color: var(--color-gold);
    }

    .mega_panel {
        gap: 20px;
        padding: 0 0 0 14px;
    }

    .dropdown_panel .mega_title {
        color: var(--color-gold);
        border-bottom-color: rgba(255, 255, 255, .1);
    }

    /* Mobile menu: the doctors sub-menu is always listed, indented under Meet the Doctors */
    .flyout {
        display: block;
        position: static;
        padding: 10px 0 0;
    }

    .flyout_icon {
        display: none;
    }

    .badge_new {
        color: var(--color-gold);
    }

    .header_actions {
        flex-wrap: wrap;
    }
}

/* Tablets */
@media (max-width: 991px) {

    .section_padding {
        padding: 80px 0;
    }

    .split_grid,
    .appointment_grid {
        gap: 48px;
    }

    .page_banner {
        min-height: 660px;
        padding: 200px 0 80px;
    }

    .page_banner_center {
        padding: 180px 0 80px;
    }

    .service_card_feature {
        min-height: 360px;
    }

    .review_card {
        flex-basis: calc((100% - 24px) / 2);
    }

}

/* Small tablets / large phones */
@media (max-width: 767px) {

    .section_padding {
        padding: 60px 0;
    }

    .utility_inner {
        gap: 4px 20px;
    }

    .phone_full {
        display: none;
    }

    .phone_short {
        display: inline;
    }

    /* .service_card prefix beats the generic phone padding rule below */
    .service_card.service_card_feature {
        min-height: 300px;
        padding: 92px 24px 24px; /* top space keeps the watermark clear of the heading */
    }

    .service_card_watermark {
        top: 24px;
        right: 24px;
        width: min(200px, 60%);
    }

    .service_feature_title {
        font-size: 24px;
    }

    .service_card,
    .service_card_charcoal,
    .service_card_bronze {
        padding: 24px;
    }

    .cta_band_title {
        font-size: 30px;
    }

    .review_card {
        flex-basis: 100%;
        padding: 28px 24px;
    }

    .review_text {
        font-size: 19px;
    }

    .appointment_form {
        padding: 26px 22px;
    }

    .footer_info {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 44px 0;
        text-align: center;
    }

    .footer_brand {
        order: -1;
    }

    .footer_contact_end {
        justify-self: stretch;
        text-align: center;
    }

    .page_banner {
        min-height: 600px;
        padding: 170px 0 64px;
    }

    .page_banner_center {
        padding: 160px 0 70px;
    }

    .page_banner::before {
        background: linear-gradient(90deg, rgba(20, 20, 22, .85), rgba(20, 20, 22, .55));
    }

    .page_banner_center::before {
        background: rgba(20, 20, 22, .72);
    }

    .legal_content h2 {
        margin-top: 36px;
    }

    .focus_card {
        padding: 28px 24px;
    }

    .edu_card {
        padding: 28px 24px;
    }

    .related_card {
        min-height: 120px;
    }
}

/* Phones — full-width buttons */
@media (max-width: 574px) {
    .btn {
        display: block;
        width: 100%;
        white-space: normal;
    }

    .utility_bar {
        font-size: 10px;
        letter-spacing: .08em;
    }

    .utility_inner > * {
        white-space: normal;
    }

    /* Utility bar can wrap to more lines here, so leave more room for the menu panel */
    .header_menu {
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
    }

    .btn_group {
        flex-direction: column;
        width: 100%;
    }

    .btn_wrap {
        width: 100%;
    }

    .header_actions {
        flex-direction: column;
    }

    .site_logo img {
        width: 150px;
    }

    .section_head {
        margin-bottom: 28px;
    }

}

/* Respect reduced-motion preferences for the review slider */
@media (prefers-reduced-motion: reduce) {
    .review_track,
    .slider_track {
        scroll-behavior: auto;
    }

    .service_tile,
    .service_tile_media img,
    .service_tile_arrow,
    .doctor_profile_media img {
        transition: none;
    }

    .service_tile:hover,
    .service_tile:hover .service_tile_media img,
    .doctor_profile:hover .doctor_profile_media img {
        transform: none;
    }
}

/* ---------- Office Tour: About Us / Contact Us photo cards ---------- */
/* Photo fills the card (sized on the card, not the image); title, text and button sit over a dark fade */
.tour_links {
    max-width: 1140px;
    margin: 0 auto;
}

.tour_card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 460px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--color-charcoal);
    box-shadow: 0 24px 50px rgba(40, 35, 30, .16);
}

.tour_card_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform .7s ease;
}

.tour_card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 32, 34, .05) 25%, rgba(31, 32, 34, .65) 60%, rgba(31, 32, 34, .95) 100%);
}

.tour_card:hover .tour_card_img {
    transform: scale(1.05);
}

.tour_card_body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 40px;
}

.tour_card_title {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gold);
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(32px, 3.2vw, 42px);
    line-height: 1.1;
    color: var(--color-white);
}

.tour_card_text {
    max-width: 380px;
    line-height: 1.7;
    color: #e4dfd7;
}

.tour_card .btn_group {
    margin-top: 8px;
}

@media (max-width: 767px) {
    .tour_card {
        min-height: 400px;
    }

    .tour_card_body {
        padding: 28px 24px;
    }
}

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

    .tour_card:hover .tour_card_img {
        transform: none;
    }
}

/* ==========================================================================
   Card rows (all pages): wrapping flex rows instead of CSS grid, so a last row
   that isn't full is centred. Each row sets --cols (cards per row) and --col-gap;
   every card takes an equal share of the row width.
   ========================================================================== */
.highlights_grid,
.services_row,
.step_grid,
.links_grid,
.review_grid,
.case_grid,
.sitemap_grid,
.team_grid,
.dentist_grid,
.service_tiles,
.edu_grid,
.related_grid,
.tour_links {
    --cols: 3;
    --col-gap: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--col-gap);
}

:is(.highlights_grid, .services_row, .step_grid, .links_grid, .review_grid, .case_grid,
    .sitemap_grid, .team_grid, .dentist_grid, .service_tiles, .edu_grid, .related_grid, .tour_links) > * {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
    min-width: 0;
}

.highlights_grid { --cols: 4; }
.services_row { --col-gap: 16px; }
.links_grid { --cols: 4; --col-gap: 16px; }
.case_grid { --col-gap: 28px; }
.sitemap_grid { --cols: 4; }
.team_grid { --cols: 4; align-items: flex-start; }
.dentist_grid { --cols: 2; --col-gap: 32px; }
.edu_grid { --col-gap: 16px; }
.related_grid { --cols: 2; --col-gap: 16px; }
.tour_links { --cols: 2; }

@media (max-width: 1199px) {
    .sitemap_grid { --cols: 3; }
}

@media (max-width: 991px) {
    .highlights_grid,
    .step_grid,
    .links_grid,
    .review_grid,
    .case_grid,
    .sitemap_grid,
    .team_grid,
    .service_tiles {
        --cols: 2;
    }

    .dentist_grid { --cols: 1; }
}

@media (max-width: 767px) {
    .services_row,
    .review_grid,
    .edu_grid,
    .tour_links {
        --cols: 1;
    }
}

@media (max-width: 575px) {
    .highlights_grid,
    .step_grid,
    .links_grid,
    .case_grid,
    .sitemap_grid,
    .team_grid,
    .service_tiles,
    .related_grid {
        --cols: 1;
    }
}

/* ==========================================================================
   Banner on phones (< 768px): one column — the video sits on top in its own 16:9 frame
   (banner photo behind it until it plays), and all banner text and buttons follow below
   on the dark background. Top padding leaves room for the header that overlays the banner.
   ========================================================================== */
@media (max-width: 767px) {
    .page_banner,
    .page_banner_center {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 84px 0 0;
        background: var(--color-charcoal);
    }

    .page_banner::before {
        display: none;
    }

    .banner_video {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: url('../images/banner-image.png') center / cover no-repeat var(--color-charcoal);
    }

    .banner_video iframe {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }

    .page_banner_inner {
        padding: 36px 0 48px;
    }
}