/* Self-hosted fonts (Inter variable 400-700, Lato 700 italic), latin + latin-ext.
   Replaces the Google Fonts stylesheet to remove a render-blocking third-party request. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lato-italic-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lato-italic-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================================
   Rubino Periodontics & Implant Dentistry — Design Tokens & Base
   Tokens sourced from Figma variables (2026-08-14).
   Font: Inter (Google Fonts) — web substitute for SF Pro.
   Sizing: rem-based (16px root). Fluid scale 16→20px above 1920px.
   =================================================================== */

/* ===================================================================
   Root font size
   =================================================================== */

html {
    font-size: clamp(16px, calc(16px + 4 * (100vw - 1920px) / 640), 20px);
    scroll-behavior: smooth;
}

/* ===================================================================
   Design tokens
   =================================================================== */

:root {
    /* --- Colors --- */

    /* Primary */
    --color-primary:           #2F3D49;
    --color-primary-highlight: #0094F6;

    /* Secondary */
    --color-secondary:      #00B1B2;
    --color-secondary-dark: #005556;

    /* Neutral */
    --color-black:     #000000;
    --color-grey-dark: #111111;
    --color-grey:      #5C5C5C;
    --color-off-white: #F2F2F2;
    --color-white:     #FFFFFF;

    /* --- Typography --- */

    --font-family: 'Inter', system-ui, -apple-system, sans-serif;

    /* Fluid type scale — clamp(mobile-min, fluid-mid, figma-desktop-max)
       Fluid range: 601px → 1920px viewport */
    /* 40→91px */ --text-h1:       700 clamp(2.5rem, 1.048rem + 3.867vw, 5.6875rem)/1      var(--font-family);
                  --text-h1-ls:    -0.125rem;

    /* 32→72px */ --text-h2:       700 clamp(2rem, 0.861rem + 3.033vw, 4.5rem)/1            var(--font-family);
                  --text-h2-ls:    -0.125rem;

    /* 28→54px */ --text-h3:       700 clamp(1.75rem, 1.009rem + 1.971vw, 3.375rem)/1      var(--font-family);
                  --text-h3-ls:    0;

    /* 22→40px */ --text-h4:       600 clamp(1.375rem, 0.863rem + 1.365vw, 2.5rem)/1.2     var(--font-family);
                  --text-h4-ls:    0;

    /* 20→30px */ --text-h5:       400 clamp(1.25rem, 0.965rem + 0.758vw, 1.875rem)/1.5    var(--font-family);
                  --text-h5-ls:    0;

    /* 17→23px */ --text-h6:       400 clamp(1.0625rem, 0.892rem + 0.455vw, 1.4375rem)/1.2 var(--font-family);
                  --text-h6-ls:    0;

    /* Figma: 20px */ --text-body-lg:  400 1.25rem/1.5    var(--font-family);
                      --text-body-lg-ls: 0;

    /* Figma: 17px */ --text-body:     400 1.0625rem/1.5  var(--font-family);
                      --text-body-ls:  0;

    /* Figma: 13px */ --text-body-sm:  400 0.8125rem/1.2  var(--font-family);
                      --text-body-sm-ls: 0;

    /* --- Spacing (base-8 scale, rem) --- */
    --space-1:  0.5rem;    /*  8px */
    --space-2:  1rem;      /* 16px */
    --space-3:  1.5rem;    /* 24px */
    --space-4:  2rem;      /* 32px */
    --space-5:  2.5rem;    /* 40px */
    --space-6:  3rem;      /* 48px */
    --space-8:  4rem;      /* 64px */
    --space-10: 5rem;      /* 80px */
    --space-12: 6rem;      /* 96px */
    --space-16: 8rem;      /* 128px */

    /* --- Section spacing (fluid, 601→1920px, min 1.5rem) --- */
    /* 24→80px  */ --section-sm:  clamp(1.5rem, -0.095rem + 4.246vw, 5rem);
    /* 24→120px */ --section-md:  clamp(1.5rem, -1.234rem + 7.278vw, 7.5rem);
    /* 24→160px */ --section-lg:  clamp(1.5rem, -2.373rem + 10.311vw, 10rem);

    /* --- Layout --- */
    --container-max: 88.5rem;  /* 1416px */
    --container-padding: var(--space-3);

    /* --- Breakpoints (reference — can't use in media queries) --- */
    /* Mobile:  up to 767px  (47.9375em) */
    /* Tablet:  768–1024px   (48em–64em) */
    /* Laptop:  1025–1400px  (64.0625em–87.5em) */
    /* Large:   1401px and above (87.5625em+)   */
}

/* ===================================================================
   Reset & Base
   =================================================================== */

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

body {
    font: var(--text-body);
    letter-spacing: var(--text-body-ls);
    color: var(--color-grey-dark);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--color-secondary);
    text-decoration: none;
}

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

h1 { font: var(--text-h1); letter-spacing: var(--text-h1-ls); }
h2 { font: var(--text-h2); letter-spacing: var(--text-h2-ls); color: var(--color-primary); }
h3 { font: var(--text-h3); letter-spacing: var(--text-h3-ls); color: var(--color-primary); }
h4 { font: var(--text-h4); letter-spacing: var(--text-h4-ls); color: var(--color-primary); }
h5 { font: var(--text-h5); letter-spacing: var(--text-h5-ls); }
h6 { font: var(--text-h6); letter-spacing: var(--text-h6-ls); }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow { --container-max: 70.5rem;  /* 1128px */ }
.container--wide   { --container-max: 106.5rem; /* 1704px */ }

/* --- Buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1em 1.5em;
    border: none;
    border-radius: 2.5rem;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-secondary);
    color: var(--color-white);
    border-bottom: 4px solid var(--color-secondary-dark);
}

.btn--primary:hover {
    background: var(--color-secondary-dark);
    color: var(--color-white);
}

.btn--highlight {
    background: var(--color-primary-highlight);
    color: var(--color-white);
    border-bottom: 4px solid var(--color-primary);
}

.btn--highlight:hover {
    background: #0076c5;
    color: var(--color-white);
}

.btn--lg {
    font-size: clamp(1.125rem, 0.696rem + 0.67vw, 1.5rem);
}

/* ===================================================================
   Responsive body text
   =================================================================== */

@media (max-width: 47.9375em) {
    :root {
        --text-body-lg: 400 1.125rem/1.5   var(--font-family);    /* 18px */
        --text-body:    400 1rem/1.5        var(--font-family);    /* 16px */
    }
}

/* ===================================================================
   Titlebar (Internal page hero)
   =================================================================== */

.titlebar {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: clamp(20rem, 10rem + 26.667vw, 45rem);
    padding: var(--section-md) 0;
    overflow: hidden;
}

.titlebar__bg {
    position: absolute;
    inset: 0;
    background: var(--color-white);
}

.titlebar__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    opacity: 0.5;
}

.titlebar__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 100%);
}

.titlebar__inner {
    position: relative;
    text-align: center;
    padding-top: var(--space-8);
}

.titlebar__heading {
    font: var(--text-h1);
    letter-spacing: var(--text-h1-ls);
  	max-width: 15em;
	margin-inline: auto;
}

.titlebar__subtitle {
    display: block;
    font: var(--text-h5);
    letter-spacing: var(--text-h5-ls);
    color: var(--color-grey-dark);
    margin-top: var(--space-2);
}

@media (max-width: 47.9375em) {
    .titlebar {
        min-height: 18rem;
        padding: var(--space-6) 0;
    }

    .titlebar__inner {
        padding-top: var(--space-4);
    }
}

/* ===================================================================
   Homepage Hero
   =================================================================== */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(28rem, 16rem + 33.333vw, 60rem);
    padding-bottom: 5rem;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
}

.hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* White wash so the dark hero text reads over the photo — strongest at the
   bottom where the text sits, clear by the faces. Flattened on tablet/phone. */
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0) 80%);
}

.hero__content {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--space-10);
    padding-top: var(--space-16);
    padding-bottom: var(--space-8);
}

.hero__heading {
    flex: 0 1 60%;
    font: var(--text-h1);
    letter-spacing: var(--text-h1-ls);
    color: var(--color-grey-dark);
}

.hero__heading em {
    color: var(--color-secondary);
}

.hero__aside {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

.hero__description {
    font: var(--text-h5);
    letter-spacing: var(--text-h5-ls);
}

/* --- Hero Location Cards --- */

.hero-locations {
    position: relative;
    z-index: 1;
    margin-top: -5rem;
}

.hero-locations__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.hero-locations__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    background: rgba(47, 61, 73, 0.85);
    padding: var(--space-5) var(--space-3);
    text-align: center;
}

.hero-locations__card .btn {
    white-space: normal;
}

.hero-locations__name {
    font: var(--text-h5);
    letter-spacing: var(--text-h5-ls);
    color: var(--color-white);
}

.hero-locations__address {
    color: var(--color-white);
}

.hero-locations__address a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.hero-locations__address a:hover {
    color: var(--color-secondary);
}

@media (max-width: 64em) {
    .hero__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.4);
    }

    .hero__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-5);
    }

    .hero__heading {
        flex: none;
    }

    .hero__aside {
        flex: none;
        align-items: center;
    }

    .hero-locations__inner {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .hero-locations {
        margin-top: -3rem;
    }
}

@media (max-width: 47.9375em) {
    .hero {
        min-height: 24rem;
    }

    .hero__content {
        padding-top: var(--space-10);
        padding-bottom: var(--space-4);
    }

    .btn--lg {
        font-size: 1.125rem;
    }
}

/* ===================================================================
   Split — reusable edge-to-edge image + contained text layout
   Image bleeds to the viewport edge; text aligns with the container.
   Add .split--reverse to flip image to the right side.
   =================================================================== */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding-block: var(--section-sm);
    overflow: hidden;
}

.split__media {
    position: relative;
    align-self: stretch;
}

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

.split__body {
    padding-left: clamp(2.5rem, 1rem + 5vw, 7.5rem);
    padding-right: max(var(--container-padding), calc((100% - var(--container-max) / 2) + var(--container-padding)));
}

@media (min-width: 64.0625em) {
    .split--reverse .split__media {
        order: 2;
    }

    .split--reverse .split__body {
        order: 1;
        padding-left: max(var(--container-padding), calc((100% - var(--container-max) / 2) + var(--container-padding)));
        padding-right: clamp(2.5rem, 1rem + 5vw, 7.5rem);
    }
}

@media (max-width: 64em) {
    .split {
        grid-template-columns: 1fr;
    }

    .split__media {
        padding-inline: var(--container-padding);
        max-height: 28rem;
    }

    .split__body {
        padding-inline: var(--container-padding);
        padding-top: var(--space-8);
    }
}

/* ===================================================================
   Excellence (services page)
   =================================================================== */

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

.excellence__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 1rem + 5vw, 7.5rem);
    align-items: center;
}

.excellence__media {
    aspect-ratio: 792 / 642;
}

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

@media (max-width: 64em) {
    .excellence__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .excellence__media {
        order: -1;
        width: 100%;
        max-width: 32rem;
        margin-inline: auto;
    }
}

.excellence__heading {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
    margin-bottom: var(--space-3);
}

.excellence__heading em {
    color: var(--color-secondary);
}

.excellence__text {
    margin-bottom: var(--space-3);
}

.excellence__text:last-child {
    margin-bottom: 0;
}

/* ===================================================================
   Section heading (standalone centered H2)
   =================================================================== */

.section-heading {
    text-align: center;
}
.perio-cta + .section-heading {
  padding-top: var(--section-md);
}

.section-heading__text em {
    color: var(--color-secondary);
}

/* ===================================================================
   Service split (periodontics list splits)
   =================================================================== */

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

.service-split__heading {
    margin-bottom: var(--space-3);
}

.service-split__heading em {
    color: var(--color-secondary);
}

.service-split__text {
    margin-bottom: var(--space-3);
}

.service-split__list {
    list-style: disc;
    padding-left: 1.25em;
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

/* ===================================================================
   Periodontics CTA (off-white blurb)
   =================================================================== */

.perio-cta,
.implant-complications {
    background: var(--color-off-white);
    padding-block: var(--section-md);
    text-align: center;
}

.perio-cta__text {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
    max-width: 70rem;
    margin-inline: auto;
}

.implant-complications__heading {
    color: var(--color-black);
    margin-bottom: var(--space-3);
}

.implant-complications__heading em {
    color: var(--color-secondary);
}

.implant-complications__text {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
}

/* ===================================================================
   Thank You page
   =================================================================== */

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

.thank-you__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
}

.thank-you__text {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
}

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

.page-content h2 {
    margin-top: var(--space-5);
}

/* ===================================================================
   Contact page (intro + resource cards)
   =================================================================== */

.contact-intro {
    padding-block: var(--section-md) var(--section-sm);
}

.contact-intro__text {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
    text-align: center;
}

.contact-intro__text a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.contact-resources {
    padding-block: var(--section-sm) var(--section-md);
}

.contact-resources__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.contact-resources__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-off-white);
    border-radius: 1rem;
    border-bottom: 4px solid var(--color-secondary-dark);
}

.contact-resources__heading {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
}

.contact-resources__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}

@media (max-width: 48em) {
    .contact-resources__grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   Smile Gallery (before/after cases)
   =================================================================== */

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

.smile-gallery__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.smile-gallery__case {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.smile-gallery__image {
    margin: 0 auto;
}

.smile-gallery__caption {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
    text-align: center;
}

/* ===================================================================
   Additional Specialized Dental Services (3-column image cards)
   =================================================================== */

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

.additional-services__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
}

.additional-services__heading {
    text-align: center;
}

.additional-services__heading em {
    color: var(--color-secondary);
}

.additional-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

.additional-services__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-inline: var(--space-3);
    border-left: 1px solid #E0E5E8;
}

.additional-services__col:first-child {
    border-left: 0;
}

.additional-services__media {
    width: 100%;
    aspect-ratio: 428 / 320;
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.additional-services__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.additional-services__title {
    color: var(--color-black);
}

.additional-services__title em {
    color: var(--color-secondary);
}

.additional-services__text {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
}

.additional-services__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-2);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.additional-services__cta svg {
    width: 1rem;
    height: 0.625rem;
}

@media (max-width: 64em) {
    .additional-services__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .additional-services__col {
        border-left: 0;
        border-top: 1px solid #E0E5E8;
        padding-top: var(--space-6);
    }

    .additional-services__col:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

/* ===================================================================
   Oral Surgery Services (services page 2-column with icons + CTA)
   =================================================================== */

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

.oral-surgery__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
}

.oral-surgery__heading {
    text-align: center;
}

.oral-surgery__heading em {
    color: var(--color-secondary);
}

.oral-surgery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    width: 100%;
}

.oral-surgery__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-inline: var(--space-3);
    border-left: 1px solid #E0E5E8;
}

.oral-surgery__col:first-child {
    border-left: 0;
}

.oral-surgery__icon {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    background: var(--color-off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.oral-surgery__icon img {
    max-width: 55%;
    max-height: 55%;
    display: block;
}

.oral-surgery__title {
    color: var(--color-black);
}

.oral-surgery__title em {
    color: var(--color-secondary);
}

.oral-surgery__text {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
}

.oral-surgery__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-2);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.oral-surgery__cta svg {
    width: 1rem;
    height: 0.625rem;
}

@media (max-width: 64em) {
    .oral-surgery__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .oral-surgery__col {
        border-left: 0;
        border-top: 1px solid #E0E5E8;
        padding-top: var(--space-6);
    }

    .oral-surgery__col:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

/* ===================================================================
   Why Choose (services page 3-column grid)
   =================================================================== */

.why-choose {
    padding-block: var(--section-md);
    background: var(--color-white);
}

.why-choose__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
}

.why-choose__heading {
    text-align: center;
}

.why-choose__heading em {
    font-style: normal;
    color: var(--color-secondary);
}

.why-choose__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

.why-choose__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-3);
    border-left: 1px solid #DEDEDE;
}

.why-choose__col:first-child {
    border-left: 0;
}

.why-choose__title {
    font: var(--text-h4);
    color: var(--color-grey-dark);
}

.why-choose__text {
    font: var(--text-body-lg);
}

@media (max-width: 64em) {
    .why-choose__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .why-choose__col {
        border-left: 0;
        border-top: 1px solid #E0E5E8;
    }

    .why-choose__col:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

/* ===================================================================
   Welcome
   =================================================================== */

.welcome__heading {
    font-size: clamp(2rem, 1rem + 3.333vw, 3.375rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-6);
}

.welcome__heading em {
    color: var(--color-secondary);
}

.welcome__text {
    margin-bottom: var(--space-4);
}

.welcome__text:last-of-type {
    margin-bottom: var(--space-8);
}

/* ===================================================================
   Services Carousel
   =================================================================== */

.services-carousel {
    padding-block: var(--section-lg);
    overflow: hidden;
}

.services-carousel__inner {
    display: grid;
    grid-template-columns: minmax(16rem, 34rem) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 5rem);
    align-items: center;
    padding-left: max(var(--container-padding), calc((100% - var(--container-max)) / 2 + var(--container-padding)));
}

.services-carousel__heading {
    font-size: clamp(2rem, 1rem + 3.333vw, 3.375rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

.services-carousel__heading em {
    color: var(--color-secondary);
}

.services-carousel__text {
    line-height: 1.6;
    margin-bottom: var(--space-8);
}

.services-carousel__track-area {
    min-width: 0;
}

.services-carousel__track-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    cursor: grab;
}

.services-carousel__track-wrap:active {
    cursor: grabbing;
}

.services-carousel__track-wrap::-webkit-scrollbar {
    display: none;
}

.services-carousel__track {
    display: flex;
    gap: var(--space-5);
    padding-right: var(--container-padding);
}

.services-carousel__card {
    flex: 0 0 auto;
    position: relative;
    width: clamp(16rem, 10rem + 12vw, 30rem);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-white);
}

.services-carousel__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scaleX(-1);
    transition: transform 0.4s ease;
}

.services-carousel__card:hover .services-carousel__card-img {
    transform: scaleX(-1) scale(1.05);
}

.services-carousel__card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    background: linear-gradient(to top, rgba(47, 61, 73, 0.85) 0%, rgba(47, 61, 73, 0.15) 40%, transparent 65%);
}

.services-carousel__card-title {
    font-size: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-white);
}

.services-carousel__card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--color-white);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.services-carousel__card:hover .services-carousel__card-arrow {
    background: rgba(255, 255, 255, 0.15);
}

.services-carousel__card-arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.services-carousel__nav {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-5);
}

.services-carousel__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.services-carousel__nav-btn:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.services-carousel__nav-btn svg {
    width: 1.5rem;
    height: 1rem;
}

@media (max-width: 64em) {
    .services-carousel__inner {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 0;
        gap: var(--space-5);
    }

    .services-carousel__body {
        padding-inline: var(--container-padding);
        text-align: center;
    }

    .services-carousel__track {
        padding-left: var(--container-padding);
    }

    .services-carousel__nav {
        padding-left: var(--container-padding);
    }
}

/* ===================================================================
   Special Offer
   =================================================================== */

.special-offer {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: clamp(22rem, 12rem + 26.667vw, 44rem);
    background: linear-gradient(to right, #00BABC, #005556);
    overflow: hidden;
}

.special-offer__photo {
    position: relative;
    flex: 0 0 55%;
    clip-path: polygon(0 0, 75% 0, 92% 100%, 0 100%);
}

.special-offer__photo::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    clip-path: polygon(72% 0, 75% 0, 92% 100%, 89% 100%);
    background: var(--color-white);
    z-index: 1;
}

.special-offer__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.special-offer__badge {
    position: absolute;
    left: 36%;
    top: 6%;
    width: clamp(9rem, 5rem + 10.667vw, 18.75rem);
    aspect-ratio: 1;
    z-index: 2;
}

.special-offer__badge-img {
    width: 100%;
    height: 100%;
}

.special-offer__price {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-align: center;
    line-height: 1;
}

.special-offer__price-amount {
    font-weight: 900;
    font-size: clamp(2.5rem, 1rem + 4vw, 6.75rem);
    letter-spacing: -0.05em;
}

.special-offer__price-amount sup {
    font-size: 0.65em;
    vertical-align: 0.15em;
}

.special-offer__price-value {
    font-weight: 400;
    font-size: clamp(0.75rem, 0.4rem + 0.95vw, 1.7rem);
    margin-top: 0.25em;
}

.special-offer__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-8) var(--space-3) var(--space-5);
    color: var(--color-white);
}

.special-offer__heading {
    color: var(--color-white);
}

.special-offer__heading em {
    font-family: 'Lato', var(--font-family);
}

.special-offer__subtitle {
    font: var(--text-h5);
    letter-spacing: var(--text-h5-ls);
}

.special-offer__list {
    list-style: disc;
    padding-left: 1.25em;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.special-offer__disclaimer {
    font: var(--text-body-sm);
    letter-spacing: var(--text-body-sm-ls);
    font-style: italic;
    opacity: 0.9;
}

@media (max-width: 64em) {
    .special-offer {
        flex-direction: column;
        min-height: auto;
    }

    .special-offer__photo {
        flex: none;
        height: 20rem;
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }

    .special-offer__photo::after {
        clip-path: polygon(0 97%, 100% 82%, 100% 85%, 0 100%);
    }

    .special-offer__badge {
        position: relative;
        left: auto;
        top: auto;
        align-self: center;
        margin-top: -4.5rem;
        width: 10rem;
        z-index: 2;
    }

    .special-offer__content {
        align-items: center;
        text-align: center;
        padding: 0 var(--space-3) var(--space-5);
    }

    .special-offer__list {
        text-align: left;
        align-self: center;
    }
}

/* ===================================================================
   Doctor Profile Cards (Meet the Doctors page)
   =================================================================== */

.doctor-profiles {
    position: relative;
    overflow: hidden;
    padding-block: var(--section-md);
}

.doctor-profiles__bg {
    position: absolute;
    inset: 0;
    background: var(--color-white);
}

.doctor-profiles__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

.doctor-profile {
    position: relative;
    scroll-margin-top: calc(var(--header-h, 7.5rem) + 1.5rem);
}

.doctor-profile + .doctor-profile {
    margin-top: var(--section-md);
}

.doctor-profile__inner {
    display: grid;
    grid-template-columns: minmax(auto, 30rem) 1fr;
    gap: clamp(2rem, 1rem + 3vw, 5rem);
    max-width: 88.5rem;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.doctor-profile__img-wrap {
    overflow: hidden;
    aspect-ratio: 480 / 642;
}

.doctor-profile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.doctor-profile__name {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
    margin-bottom: var(--space-3);
}

.doctor-profile__body p {
    margin-bottom: var(--space-2);
}

.doctor-profile__body p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.doctor-profile__body p a:hover {
    color: var(--color-secondary);
}

.doctor-profile__highlights {
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.doctor-profile__highlight {
    border-bottom: 1px solid var(--color-secondary-dark);
}

.doctor-profile__highlight-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3);
    cursor: pointer;
    list-style: none;
}

.doctor-profile__highlight-summary::-webkit-details-marker {
    display: none;
}

.doctor-profile__highlight-text {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
}

.doctor-profile__highlight-arrow {
    width: 0.5rem;
    flex-shrink: 0;
    color: var(--color-secondary-dark);
    transition: transform 0.3s ease;
}

.doctor-profile__highlight[open] .doctor-profile__highlight-arrow {
    transform: rotate(90deg);
}

.doctor-profile__highlight-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 var(--space-3) var(--space-3);
    line-height: 1.6;
}

.doctor-profile__highlight-content > *:first-child {
    margin-top: 0;
}

.doctor-profile__highlight-content > *:last-child {
    margin-bottom: 0;
}

.doctor-profile__highlight-content p {
    margin-bottom: var(--space-2);
}

.doctor-profile__highlight-content ul {
    padding-left: var(--space-4);
    margin-bottom: var(--space-2);
}


.doctor-profile__highlight-content ul {
    list-style: disc;
    padding-left: var(--space-4);
}

.doctor-profile__highlight-content li {
    margin-bottom: var(--space-1);
}

@media (max-width: 64em) {
    .doctor-profile__inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .doctor-profile__img-wrap {
        width: 100%;
        max-width: 30rem;
        margin-inline: auto;
    }

    .doctor-profile__body {
        text-align: left;
    }

    .doctor-profile__name {
        text-align: center;
    }
}

/* ===================================================================
   Meet Our Periodontists (homepage)
   =================================================================== */

.meet-doctors {
    position: relative;
    overflow: hidden;
}

.meet-doctors__bg {
    position: absolute;
    inset: 0;
    background: var(--color-white);
}

.meet-doctors__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

.meet-doctors__header {
    position: relative;
    text-align: center;
    padding-block: var(--section-md);
}

.meet-doctors__heading {
    margin-bottom: var(--space-3);
}

.meet-doctors__heading em {
    color: var(--color-secondary);
}

.meet-doctors__subtitle {
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
    margin-inline: auto;
}

.meet-doctors__card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 5rem);
}

.meet-doctors__card + .meet-doctors__card {
    margin-top: var(--space-5);
}

.meet-doctors__img-wrap {
    overflow: hidden;
    aspect-ratio: 960 / 579;
}

.meet-doctors__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.meet-doctors__card--img-left .meet-doctors__img-wrap {
    clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);
}

.meet-doctors__card--img-left .meet-doctors__body {
    padding-right: max(var(--container-padding), calc((100vw - 80rem) / 2 + var(--container-padding)));
}

.meet-doctors__card--img-right .meet-doctors__img-wrap {
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
    order: 2;
}

.meet-doctors__card--img-right .meet-doctors__body {
    order: 1;
    padding-left: max(var(--container-padding), calc((100vw - 80rem) / 2 + var(--container-padding)));
}

.meet-doctors__name {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
    margin-bottom: var(--space-3);
}

.meet-doctors__body p {
    margin-bottom: var(--space-2);
}

.meet-doctors__body .btn {
    margin-top: var(--space-3);
}

.meet-doctors__card:last-child {
    padding-bottom: var(--section-md);
}

@media (max-width: 64em) {
    .meet-doctors__card {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .meet-doctors__card--img-left .meet-doctors__img-wrap {
        clip-path: none;
    }

    .meet-doctors__card--img-right .meet-doctors__img-wrap {
        clip-path: none;
        order: 0;
    }

    .meet-doctors__card--img-right .meet-doctors__body {
        order: 0;
        padding-left: var(--container-padding);
    }

    .meet-doctors__body {
        text-align: center;
    }

    .meet-doctors__card--img-left .meet-doctors__body {
        padding-right: var(--container-padding);
        padding-left: var(--container-padding);
    }

    .meet-doctors__card--img-right .meet-doctors__body {
        padding-right: var(--container-padding);
    }
}

/* ===================================================================
   Staff / Comfortable Experience
   =================================================================== */

.staff-experience {
    padding-top: var(--section-lg);
    padding-bottom: var(--section-sm);
}

.staff-experience__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-10);
}

.staff-experience__heading {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
}

.staff-experience__heading em {
    color: var(--color-secondary);
}

.staff-experience__text {
    font: var(--text-body-lg);
}

.staff-experience__text a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.staff-experience__photo-wrap {
    width: 100%;
    border: 0.5rem solid var(--color-primary);
    overflow: hidden;
}

.staff-experience__photo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 28rem;
    object-fit: cover;
    object-position: top center;
}

.staff-experience__careers {
    font: var(--text-body-lg);
}

.staff-experience__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

.btn--muted {
    background: #7691a7;
    color: var(--color-white);
    border-bottom: 4px solid #5a7589;
}

.btn--muted:hover {
    background: #5a7589;
    color: var(--color-white);
}

/* ===================================================================
   Technology
   =================================================================== */

.technology {
    background: linear-gradient(to bottom, var(--color-white), #e7f8ff);
    padding-top: var(--space-10);
}

.technology__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-10);
}

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

.technology__img {
    width: 100%;
    max-width: 50rem;
    height: auto;
    border-radius: 1.5rem;
    object-fit: cover;
}

.technology__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--section-md);
}

.technology__heading {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
}

.technology__heading em {
    color: var(--color-secondary);
}

.technology__body a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.technology__body .btn {
    align-self: flex-start;
    margin-top: var(--space-3);
}

@media (max-width: 64em) {
    .technology__inner {
        grid-template-columns: 1fr;
    }

    .technology__body {
        text-align: center;
        padding-bottom: var(--section-sm);
    }

    .technology__body .btn {
        align-self: center;
    }
}

/* ===================================================================
   FAQ (reusable across pages)
   =================================================================== */

.faq {
    background: var(--color-off-white);
    padding-block: var(--section-md);
}

.faq__heading {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
    text-align: center;
    margin-bottom: var(--section-sm);
}

.faq__heading em {
    color: var(--color-secondary);
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq__item {
    background: #7691a7;
    border-radius: 2.5rem;
    border-bottom: 4px solid var(--color-secondary-dark);
    overflow: hidden;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3);
    font: var(--text-h6);
    letter-spacing: var(--text-h6-ls);
    color: var(--color-white);
    cursor: pointer;
    list-style: none;
}

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

.faq__question::after {
    content: '';
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-right: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-right: 0.5rem;
}

.faq__item[open] .faq__question::after {
    transform: rotate(-135deg);
}

.faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-inline: var(--space-3);
    color: var(--color-white);
}

.faq__answer p {
    padding-bottom: var(--space-3);
}

/* ===================================================================
   Testimonials
   =================================================================== */

.testimonials {
    position: relative;
    padding: var(--section-lg) 0;
    overflow: hidden;
}

.testimonials__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.testimonials__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.testimonials__carousel {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
}

.testimonials__arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-white);
    background: var(--color-secondary);
    color: var(--color-white);
    cursor: pointer;
    transition: background 0.2s;
}

.testimonials__arrow:hover {
    background: var(--color-secondary-dark);
}

.testimonials__arrow svg {
    width: 1.5rem;
    height: 1rem;
}

.testimonials__slides {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.testimonials__slide {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.testimonials__slide--active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.testimonials__photo {
    flex-shrink: 0;
    width: clamp(16rem, 10rem + 16vw, 32rem);
    aspect-ratio: 509 / 650;
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.15);
}

.testimonials__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonials__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
}

.testimonials__quote {
    font: var(--text-h5);
    letter-spacing: var(--text-h5-ls);
    color: var(--color-primary);
}

.testimonials__quote p {
    margin: 0;
}

.testimonials__separator {
    width: 3rem;
    border: none;
    border-top: 1px solid var(--color-secondary);
    margin: var(--space-1) 0;
}

.testimonials__name {
    font: var(--text-body-lg);
    font-style: normal;
    color: var(--color-primary);
}

.testimonials__cta {
    margin-top: var(--space-3);
}

@media (max-width: 64em) {
    .testimonials__slide {
        flex-direction: column;
        gap: var(--space-5);
    }

    .testimonials__photo {
        width: min(80%, 20rem);
    }

    .testimonials__content {
        text-align: center;
        align-items: center;
    }
}

@media (max-width: 37.5em) {
    .testimonials__carousel {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }

    .testimonials__slides {
        order: -1;
        flex-basis: 100%;
    }

    .testimonials__arrow {
        width: 3rem;
        height: 3rem;
    }
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

/* --- TopBar --- */

.topbar {
    display: flex;
    align-items: center;
    background: #e0e6eb;
}

.topbar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0%;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
    transition: background 0.2s;
}

.topbar__link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-primary);
}

.topbar__divider {
    width: 1px;
    height: 2rem;
    background: var(--color-primary);
    opacity: 0.25;
    flex-shrink: 0;
}

.topbar__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0.75rem 1.5rem;
    background: var(--color-secondary);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
    transition: background 0.2s;
}

.topbar__cta:hover {
    background: var(--color-secondary-dark);
    color: var(--color-white);
}

/* --- Navbar --- */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 3rem;
    background: rgba(47, 61, 73, 0.9);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
}

.navbar__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar__logo:hover {
    opacity: 0.85;
}

.navbar__logo-img {
    height: 3.5rem;
    width: auto;
}

/* Hamburger toggle — hidden on desktop */
.navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.navbar__toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
    transform: translateY(0.5rem) rotate(45deg);
}

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

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
    transform: translateY(-0.5rem) rotate(-45deg);
}

/* Nav menu */
.navbar__menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar__link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
    border-radius: 5rem;
    transition: background 0.2s;
}

.navbar__link:hover,
.navbar__link:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* Items with dropdowns */
.navbar__item {
    position: relative;
}

.navbar__link--toggle {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* Dropdown menus — every level uses the same class */
.navbar__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    background: var(--color-primary);
    list-style: none;
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    z-index: 110;
}

/* Sub-dropdowns fly out to the right */
.navbar__dropdown--sub {
    top: -0.5rem;
    left: 100%;
}

/* Show on hover (desktop) or when toggled open */
.has-dropdown:hover > .navbar__dropdown,
.has-dropdown.is-dropdown-open > .navbar__dropdown,
.has-sub:hover > .navbar__dropdown,
.has-sub.is-dropdown-open > .navbar__dropdown {
    display: block;
}

.navbar__dropdown-item {
    position: relative;
}

.navbar__dropdown-link {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-white);
    white-space: nowrap;
    transition: background 0.15s;
}

.navbar__dropdown-link:hover,
.navbar__dropdown-link:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* Arrow indicator for items with sub-menus (desktop hover) */
.has-sub > .navbar__dropdown-link::after {
    content: '\203A';
    float: right;
    margin-left: 1rem;
    opacity: 0.5;
}

/* Non-link group label (null path) */
.navbar__dropdown-link--group {
    cursor: default;
}

/* Non-link top-level label */
.navbar__link--label {
    cursor: default;
}

/* Arrow toggle button (chevron) */
.navbar__arrow {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: background 0.15s;
}

.navbar__arrow svg {
    width: 0.75rem;
    height: 0.5rem;
    transition: transform 0.2s;
}

.navbar__arrow:hover {
    background: rgba(255, 255, 255, 0.1);
}

.navbar__arrow[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Right-align dropdown for items near the viewport edge */
.navbar__item:last-of-type > .navbar__dropdown {
    left: auto;
    right: 0;
}

/* Sub-dropdowns near the right edge fly left instead of right */
.navbar__item:last-of-type .navbar__dropdown--sub {
    left: auto;
    right: 100%;
}

/* Mobile-only contact info — hidden on desktop */
.navbar__mobile-contact {
    display: none;
}

/* ===================================================================
   Header — Responsive
   =================================================================== */

/* Laptop: tighten nav spacing */
@media (max-width: 99.9375em) {
    .navbar {
        padding-inline: 1.5rem;
    }

    .navbar__logo-img {
        height: 2.75rem;
    }

    .navbar__link {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }

    .topbar__link {
        font-size: 0.75rem;
        padding: 0.625rem 1rem;
    }

    .topbar__cta {
        font-size: 0.75rem;
        padding: 0.625rem 1rem;
    }
}

/* Tablet & below: hamburger menu */
@media (max-width: 72em) {
    .topbar {
        display: none;
    }

    .navbar {
        padding: 0.75rem 1.5rem;
        position: relative;
    }

    .navbar__toggle {
        display: flex;
    }

    .navbar__menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(47, 61, 73, 0.97);
        backdrop-filter: blur(0.5rem);
        -webkit-backdrop-filter: blur(0.5rem);
        padding: 0.75rem 0;
    }

    .navbar__menu.is-open {
        display: flex;
    }

    .navbar__menu {
        max-height: calc(100vh - var(--navbar-h, 4.125rem));
        max-height: calc(100dvh - var(--navbar-h, 4.125rem));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .navbar__link {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        border-radius: 0;
        text-align: left;
    }

    .navbar__link:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .navbar__dropdown {
        position: static;
        min-width: 0;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    .navbar__dropdown--sub {
        background: rgba(255, 255, 255, 0.03);
    }

    .navbar__dropdown-link {
        padding: 0.625rem 1.5rem 0.625rem 2.5rem;
        text-align: left;
    }

    .navbar__dropdown--sub .navbar__dropdown-link {
        padding-left: 3.5rem;
    }

    /* On mobile, disable hover — only toggle via arrow buttons */
    .has-dropdown:hover > .navbar__dropdown,
    .has-sub:hover > .navbar__dropdown {
        display: none;
    }

    .has-dropdown.is-dropdown-open > .navbar__dropdown,
    .has-sub.is-dropdown-open > .navbar__dropdown {
        display: block;
    }

    /* Hide desktop ::after chevron on mobile */
    .has-sub > .navbar__dropdown-link::after {
        display: none;
    }

    /* Show arrow toggle buttons */
    .navbar__arrow {
        display: flex;
        margin-left: auto;
    }

    /* Items with dropdowns: link + arrow side by side */
    .has-dropdown,
    .has-sub {
        display: flex;
        flex-wrap: wrap;
    }

    .has-dropdown > .navbar__link,
    .has-sub > .navbar__dropdown-link {
        flex: 1 1 0%;
        min-width: 0;
    }

    .has-dropdown > .navbar__dropdown,
    .has-sub > .navbar__dropdown {
        flex-basis: 100%;
    }

    .navbar__arrow--sub {
        border-left-color: rgba(255, 255, 255, 0.08);
    }

    /* Mobile menu contact info */
    .navbar__mobile-contact {
        display: flex;
        flex-direction: column;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    .navbar__mobile-phone {
        display: block;
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        color: var(--color-white);
        transition: background 0.15s;
    }

    .navbar__mobile-phone:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-white);
    }

    .navbar__mobile-phone-label {
        opacity: 0.6;
        margin-right: 0.25rem;
    }

    .navbar__mobile-cta {
        display: block;
        margin: 0.75rem 1.5rem;
        padding: 0.875rem 1.5rem;
        background: var(--color-secondary);
        color: var(--color-white);
        font-weight: 700;
        font-size: 0.875rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-align: center;
        border-radius: 0.25rem;
        transition: background 0.2s;
    }

    .navbar__mobile-cta:hover {
        background: var(--color-secondary-dark);
        color: var(--color-white);
    }
}

/* ===================================================================
   Footer
   =================================================================== */

/* --- CTA / Form Section --- */

.cta {
    background: linear-gradient(180deg, #7891a6 0%, var(--color-primary) 100%);
    padding: var(--section-md) 0;
    scroll-margin-top: 6rem;
}

.cta__inner {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: var(--space-8);
    align-items: start;
}

.cta__inner::before {
    content: '';
    align-self: stretch;
    background: var(--color-secondary);
    grid-column: 2;
    grid-row: 1;
}

.cta__heading {
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.cta__body {
    font: var(--text-body-lg);
    letter-spacing: var(--text-body-lg-ls);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-4);
}

.cta__body a {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

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

.cta__separator {
    border: none;
    border-top: 1px solid var(--color-secondary);
    margin: var(--space-4) 0;
    width: 100%;
}

.cta__hours {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.cta__hours strong {
    color: var(--color-white);
}

.cta__body p {
    margin-bottom: var(--space-2);
}

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

.cta__phone-link {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    font-size: 1.1em;
    font-weight: 700;
}

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

.cta__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
}

.cta__form-wrap {
    padding: 0;
}

.cta__form-heading {
    color: var(--color-white);
    font: var(--text-h4);
    margin-bottom: var(--space-3);
}

.cta__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cta__input {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-grey-dark);
    background: var(--color-white);
    border: 1px solid transparent;
    border-radius: 0.375rem;
    outline: none;
    transition: border-color 0.2s;
}

.cta__input::placeholder {
    color: var(--color-grey);
}

.cta__input:focus {
    border-color: var(--color-secondary);
}

.cta__textarea {
    resize: vertical;
    min-height: 6rem;
}

.cta__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 5rem;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}

.cta__submit:hover {
    background: var(--color-secondary-dark);
}

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

.locations {
    background: var(--color-primary);
    padding: var(--section-sm) 0;
}

.locations__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.locations__card {
    text-align: center;
}

.locations__name {
    font: var(--text-h5);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.locations__map {
    width: 100%;
    height: 12.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.locations__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.locations__address {
    font-style: normal;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-1);
}

.locations__directions {
    display: block;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: var(--space-3);
    transition: color 0.2s;
}

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

.locations__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    background: var(--color-secondary);
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 5rem;
    border-bottom: 3px solid var(--color-secondary-dark);
    transition: background 0.2s;
}

.locations__call:hover {
    background: var(--color-secondary-dark);
    color: var(--color-white);
}

/* --- Highlight Banner (Marquee) --- */

.marquee {
    background: var(--color-secondary);
    overflow: hidden;
    padding: 0.5em 0;
    white-space: nowrap;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
    font-size: clamp(0.875rem, 0.523rem + 1.502vw, 1.875rem);
}

.marquee__track {
    display: inline-flex;
    align-items: center;
    animation: marquee-scroll 25s linear infinite;
}

.marquee__text {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-white);
    flex-shrink: 0;
    padding: 0 0.75em;
}

.marquee__diamond {
    flex-shrink: 0;
    width: 0.6em;
    height: 0.6em;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* --- Footer Bar (Logo + Social) --- */

.footer-bar {
    background: var(--color-primary);
    padding: var(--space-5) 0;
}

.footer-bar__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.footer-bar__logo {
    display: flex;
    align-items: center;
}

.footer-bar__logo:hover {
    opacity: 0.85;
}

.footer-bar__logo-img {
    height: 4rem;
    width: auto;
}

.footer-bar__social {
    display: flex;
    gap: var(--space-3);
}

.footer-bar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.footer-bar__social-link:hover {
    color: var(--color-white);
}

.footer-bar__social-link svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* --- Copyright --- */

.footer-copy {
    background: #1a252d;
    padding: var(--space-2) 0;
    text-align: center;
}

.footer-copy p {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ===================================================================
   Footer — Responsive
   =================================================================== */

@media (max-width: 64em) {
    .cta__inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .cta__inner::before {
        display: none;
    }

    .locations__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        max-width: 28rem;
        margin-inline: auto;
    }
}

@media (max-width: 47.9375em) {
    .footer-bar__logo-img {
        height: 3rem;
    }
}

/* ===================================================================
   Internal Page Template
   Intro block + two-column (sticky sidebar + content) + FAQ.
   Used by any page that includes /includes/internal-page.php.
   =================================================================== */

/* --- Intro block (image + blurb above the two-column area) --- */

.internal-intro {
    padding: var(--section-sm) 0;
}

.internal-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--space-6);
    align-items: start;
}

.internal-intro__media {
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    /* Pin the image while a taller blurb scrolls past; clears the sticky
       header. Reset to static when the layout stacks (see max-width: 64em). */
    position: sticky;
    top: calc(var(--header-h, 7.5rem) + 1.5rem);
}

.internal-intro__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.internal-intro__media:has(.internal-intro__video),
.internal-intro__media:has(.internal-intro__video-wrap) {
    aspect-ratio: 16 / 9;
}

.internal-intro__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.internal-intro__video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.internal-intro__video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.internal-intro__heading {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
    margin-bottom: var(--space-3);
}

.internal-intro__heading em {
    color: var(--color-secondary);
    font-style: normal;
}

.internal-intro__copy p + p {
    margin-top: var(--space-2);
}

@media (min-width: 87.5625em) {
    .internal-intro__copy p {
        font-size: clamp(1.0625rem, 0.5577rem + 0.5769vw, 1.25rem);
    }
}

@media (max-width: 64em) {
    .internal-intro__inner {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    /* Stacked: blurb first, image below. */
    .internal-intro__body {
        order: -1;
    }
    .internal-intro__media {
        aspect-ratio: 16 / 9;
        position: static;
    }
}

/* --- Two-column layout: sticky sidebar + main content --- */

.internal-layout {
    padding: var(--section-sm) 0 var(--section-md);
}

.internal-layout__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-6);
    align-items: start;
}

@media (max-width: 64em) {
    .internal-layout__inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

/* Tablet (768–1024px): the intro and two-column sections stack full-width,
   which lets paragraphs run too wide to read comfortably. Add fluid side
   padding that grows with the viewport, holding the content to a ~38rem
   measure (~75ch). Mobile (<768px) is already narrow, so it's left alone. */
@media (min-width: 48em) and (max-width: 64em) {
    .internal-intro__inner,
    .internal-layout__inner {
        padding-inline: max(0rem, (100vw - 38rem) / 2 - var(--container-padding));
    }
}

/* --- Sidebar (sticky) --- */

.internal-sidebar {
    position: sticky;
    /* Clear the sticky site header (--header-h is measured in JS; fallback
       ~7.5rem ≈ topbar + navbar on desktop). */
    top: calc(var(--header-h, 7.5rem) + 1.5rem);
    align-self: start;
    /* Safety net: if the sidebar is ever taller than the screen (long TOC),
       cap it to the viewport and let it scroll internally instead of having
       its bottom clipped off while stuck. */
    max-height: calc(100vh - var(--header-h, 7.5rem) - 3rem);
    overflow-y: auto;
}

/* Mobile/tablet reflow: the desktop sticky sidebar is replaced by a collapsed
   TOC above the content and a tail (Explore More + special) below it, so the
   reader isn't scrolling past the whole sidebar to reach the article. */
.internal-toc-disclosure,
.internal-mobile-tail {
    display: none;
}

@media (max-width: 64em) {
    .internal-sidebar {
        display: none;
    }
    .internal-toc-disclosure {
        display: block;
    }
    .internal-mobile-tail {
        display: flex;
    }
}

/* Collapsed "On This Page" disclosure (mobile). */
.internal-toc-disclosure {
    background: var(--color-off-white);
    border-radius: 1rem;
    overflow: hidden;
}

.internal-toc-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--color-primary);
}

.internal-toc-disclosure__summary::-webkit-details-marker {
    display: none;
}

.internal-toc-disclosure__icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-secondary);
    transition: transform 0.2s;
}

.internal-toc-disclosure__icon svg {
    width: 0.875rem;
    height: auto;
}

.internal-toc-disclosure[open] .internal-toc-disclosure__icon {
    transform: rotate(180deg);
}

.internal-toc-disclosure__body {
    padding: 0 var(--space-3) var(--space-3);
}

/* Mobile tail: Explore More + special card, below the content.
   (display is set to flex in the max-width:64em block; none by default.) */
.internal-mobile-tail {
    flex-direction: column;
    gap: var(--space-4);
}

.internal-mobile-explore {
    background: var(--color-off-white);
    border-radius: 1rem;
    overflow: hidden;
}

/* Header row styled to match the "On This Page" disclosure summary. */
.internal-mobile-explore__heading {
    padding: var(--space-2) var(--space-3);
    font: var(--text-h4);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-primary);
}

.internal-mobile-explore__body {
    padding: 0 var(--space-3) var(--space-3);
}

.internal-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.internal-sidebar__heading {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-grey);
    margin-bottom: var(--space-1);
}

.internal-sidebar__heading a {
    color: inherit;
}

.internal-sidebar__heading a:hover {
    color: var(--color-secondary);
}

/* --- Tabs (On This Page / Explore More) --- */

.internal-tabs {
    background: var(--color-off-white);
    border-radius: 1rem;
    overflow: hidden;
}

.internal-tabs__strip {
    display: flex;
    background: var(--color-primary);
}

.internal-tabs__tab {
    flex: 1;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 0;
    padding: .75rem var(--space-3);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

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

.internal-tabs__tab[aria-selected="true"] {
    background: var(--color-secondary);
    color: var(--color-white);
}

.internal-tabs__panel {
    padding: var(--space-2);
}

.internal-tabs__panel[hidden] {
    display: none;
}

/* --- Table of Contents --- */

.internal-toc {
    list-style: none;
    padding: 0;
    margin: 0;
}

.internal-toc__item + .internal-toc__item {
    margin-top: .25rem;
}

.internal-toc__link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--color-grey-dark);
    font-size: 0.9375rem;
    line-height: 1.35;
    border-left: 3px solid transparent;
    border-radius: 0 0.25rem 0.25rem 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.internal-toc__link:hover {
    color: var(--color-secondary-dark);
    background: rgba(0, 177, 178, 0.08);
}

.internal-toc__link.is-current {
    color: var(--color-secondary-dark);
    border-left-color: var(--color-secondary);
    background: rgba(0, 177, 178, 0.10);
    font-weight: 600;
}

/* --- Sibling / Explore More list --- */

.internal-siblings {
    list-style: none;
    padding: 0;
    margin: 0;
}

.internal-siblings__section {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-grey);
    margin-bottom: var(--space-1);
}

.internal-siblings__section a {
    color: inherit;
}

.internal-siblings__section a:hover {
    color: var(--color-secondary-dark);
}

.internal-siblings__item + .internal-siblings__item {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.internal-siblings__link {
    display: block;
    padding: 0.5rem 0.25rem;
    color: var(--color-grey-dark);
    font-size: 0.9375rem;
    line-height: 1.35;
    transition: color 0.15s;
}

.internal-siblings__link:hover {
    color: var(--color-secondary-dark);
}

.internal-siblings__link--current {
    color: var(--color-secondary-dark);
    font-weight: 600;
    cursor: default;
}

/* --- New patient special card (compact) --- */

.internal-special {
    display: block;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 1rem;
    padding: var(--space-2);
    text-align: center;
    transition: background 0.2s;
}

.internal-special:hover {
    background: var(--color-secondary-dark);
    color: var(--color-white);
}

.internal-special__eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-secondary);
}

.internal-special__price {
    display: block;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.1;
    color: var(--color-white);
}

.internal-special__price sup {
    font-size: 0.5em;
    top: -0.6em;
    margin-right: 0.05em;
}

.internal-special__value {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: line-through;
}

.internal-special__desc {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.85);
    margin-top: var(--space-2);
}

.internal-special__cta {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-secondary);
    padding-bottom: 0.1em;
}

.internal-special:hover .internal-special__cta,
.internal-special:hover .internal-special__eyebrow {
    color: var(--color-white);
}

@media (max-height: 864px) {
    .internal-sidebar .internal-special {
        display: none;
    }
}

/* --- Main content column --- */

.internal-content {
    min-width: 0;
}

.internal-content > * + * {
    margin-top: var(--space-3);
}

.internal-content h2 {
    font: var(--text-h3);
}

/* Keep TOC anchor jumps clear of the sticky site header. The scroll target is
   the element carrying the id (the <article> wrappers, or a heading used
   directly as an anchor), so the offset must live there — not only on <h2>. */
.internal-content [id] {
    scroll-margin-top: calc(var(--header-h, 7.5rem) + 1.5rem);
}

.internal-content h3 {
    font: var(--text-h4);
}

@media (min-width: 87.5625em) {
    .internal-content p,
    .internal-content ul,
    .internal-content ol {
        font-size: clamp(1.0625rem, 0.5577rem + 0.5769vw, 1.25rem);
    }
}

.internal-content p + p {
    margin-top: var(--space-2);
}

.internal-content ul,
.internal-content ol {
    padding-left: 1.25rem;
}

.internal-content li + li {
    margin-top: 0.5rem;
}

.internal-content article > * + * {
    margin-top: var(--space-3);
}

.internal-content img {
    border-radius: 0.75rem;
    margin-block: var(--space-3);
}

/* Small images migrated with a left/right float flow alongside the text.
   Add class="align-left" or class="align-right" on the <img> in $content. */
.internal-content img.align-left,
.internal-content img.align-right {
    max-width: 45%;
}

.internal-content img.align-left {
    float: left;
    margin-right: var(--space-3);
}

.internal-content img.align-right {
    float: right;
    margin-left: var(--space-3);
}

/* Images that sit on their own line, flush left, directly under their heading.
   Used where a section has several small equipment/diagram photos and floats
   would leave the text ragged. These source images are small (~200px), so the
   width is capped rather than stretched — never upscale them into mush. */
.internal-content img.align-block {
    display: block;
    float: none;
    margin-inline: 0;
    max-width: min(100%, 20rem);
    max-height: 18rem;
    width: auto;
    height: auto;
}

/* Google Map embed (location pages, under "Map & Directions"). Shorter than
   the 16:9 video ratio — a map reads better wide and low. */
.internal-content .map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 26rem;
    margin-block: var(--space-3);
    border-radius: 0.75rem;
    overflow: hidden;
}

.internal-content .map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Office Tour photo grid. Source photos are a uniform 720x400 (9:5), so the
   tiles share one aspect ratio and the rows stay level. Collapses to a single
   column on narrow screens via auto-fit. */
.office-tour-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3);
    margin-block: var(--space-3);
}

.office-tour-gallery__item {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 0.75rem;
    overflow: hidden;
}

.office-tour-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 5;
    object-fit: cover;
    margin-block: 0;
    transition: transform 0.3s ease;
}

.office-tour-gallery__item:hover img,
.office-tour-gallery__item:focus-visible img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .office-tour-gallery img { transition: none; }
    .office-tour-gallery__item:hover img,
    .office-tour-gallery__item:focus-visible img { transform: none; }
}

/* Lightbox — opened from the Office Tour grid. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] { display: none; }

body.has-lightbox { overflow: hidden; }

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.82);
}

.lightbox__panel {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: min(64rem, 92vw);
}

.lightbox__figure {
    margin: 0;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    height: auto;
    border-radius: 0.75rem;
}

.lightbox__caption,
.lightbox__count {
    color: #fff;
    text-align: center;
    margin: 0;
}

.lightbox__count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.25rem;
    font-size: 0.875rem;
    opacity: 0.75;
}

.lightbox__btn {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.15);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
    background: rgb(255 255 255 / 0.3);
}

.lightbox__btn--close {
    position: absolute;
    top: -3.25rem;
    right: 0;
}

/* Stack the controls under the photo on narrow screens. */
@media (max-width: 40rem) {
    .lightbox__panel { flex-direction: column; }
    .lightbox__btn--prev { position: absolute; left: 0.25rem; top: 50%; transform: translateY(-50%); }
    .lightbox__btn--next { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); }
    .lightbox__btn--close { top: -3rem; right: 0.25rem; }
}

/* On narrow screens floats read poorly — drop them to full-width blocks. */
@media (max-width: 40rem) {
    .internal-content img.align-left,
    .internal-content img.align-right {
        float: none;
        max-width: 100%;
        margin-inline: 0;
        margin-block: var(--space-3);
    }
}

/* Responsive 16:9 wrapper for migrated YouTube/Vimeo embeds.
   Markup: <div class="video-embed"><iframe ...></iframe></div> */
.internal-content .video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin-block: var(--space-3);
    border-radius: 0.75rem;
    overflow: hidden;
}

.internal-content .video-embed iframe,
.internal-content .video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.internal-content a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Buttons in content are not underlined body links. */
.internal-content a.btn {
    text-decoration: none;
    color: var(--color-white);
}

/* --- Testimonials Page (blockquote cards in internal-content) ---------- */
.internal-content blockquote.testimonial {
    background: var(--color-neutral-50, #f8f8f8);
    border: none;
    border-radius: 0.5rem;
    padding: 1.5rem 1.75rem 1.25rem;
    margin: 0 0 1.75rem;
    overflow: hidden;
}
.internal-content blockquote.testimonial::after {
    content: "";
    display: block;
    clear: both;
}
.internal-content .testimonial__photo {
    float: right;
    width: 200px;
    height: auto;
    margin: 0 0 1rem 1.5rem;
    border-radius: 0.375rem;
}
.internal-content .testimonial__attribution {
    font-weight: 700;
    font-style: italic;
    margin-bottom: 0;
}
.internal-content blockquote.testimonial .video-embed {
    margin-block: 0 var(--space-2, 1rem);
}
@media (max-width: 600px) {
    .internal-content .testimonial__photo {
        float: none;
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 0 0 1rem;
    }
}

/* FAQ styling is shared with the home page — see the ".faq" block above.
   The internal-page FAQ (includes/faq-accordion.php) reuses those same
   classes so both match the Figma design; no separate rules here. */

/* =================================================================== */
/* Doctor Referral Form                                                */
/* =================================================================== */

.referral-form {
    margin-top: var(--space-4);
}

.referral-form__group {
    border: 1px solid var(--color-neutral-200, #e5e5e5);
    border-radius: 0.5rem;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.referral-form__group legend {
    font: var(--text-h5);
    color: var(--color-primary);
    padding: 0 0.5rem;
}

.referral-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.referral-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    margin-top: 0.75rem;
    color: var(--color-grey-dark);
}

.referral-form .required {
    color: #c00;
    font-weight: 700;
}

.referral-form input[type="text"],
.referral-form input[type="tel"],
.referral-form input[type="email"],
.referral-form input[type="date"],
.referral-form textarea,
.referral-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-grey-dark);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200, #d1d5db);
    border-radius: 0.375rem;
    outline: none;
    transition: border-color 0.2s;
}

.referral-form input:focus,
.referral-form textarea:focus,
.referral-form select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(1, 91, 128, 0.15);
}

.referral-form textarea {
    resize: vertical;
}

.referral-form__note {
    font-size: 0.875rem;
    color: var(--color-grey);
    margin-top: 0;
    margin-bottom: 1rem;
}

.referral-form__radiographs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.referral-form__radio-col h4 {
    font-size: 1rem;
    color: var(--color-primary);
    margin: 0 0 0.5rem;
    padding: 0;
}

.referral-form__checks {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.referral-form__checks label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    font-size: 0.875rem;
    margin: 0;
    cursor: pointer;
}

.referral-form__checks input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--color-primary);
}

@media (max-width: 768px) {
    .referral-form__row {
        grid-template-columns: 1fr;
    }

    .referral-form__radiographs {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Blog — listing + single post
   ========================================================================== */

.blog-listing__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.blog-card {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: box-shadow .2s, transform .2s;
}

.blog-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

.blog-card__content {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
}

.blog-card__date {
    font-size: 0.8125rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 0.25rem;
}

.blog-card__title,
.blog-card__title.blog-card__title {
  	font: var(--text-h5);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__title a:hover {
    color: var(--color-secondary);
}

.blog-card__excerpt {
    line-height: 1.55;
    color: #555;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__read-more {
    display: inline-block;
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    text-transform: uppercase;
}

.blog-card__read-more:hover {
    color: var(--color-secondary-dark);
}

.blog-listing__empty {
    text-align: center;
    padding: var(--space-6) var(--space-3);
    color: #888;
    font-size: 1.125rem;
}

/* Category filter pills in sidebar */
.blog-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.blog-categories .internal-toc__item {
    margin: 0;
}

.blog-categories .internal-toc__link {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1;
    font-family: inherit;
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    color: var(--color-grey-dark);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.blog-categories .internal-toc__link:hover {
    color: var(--color-secondary-dark);
    border-color: var(--color-secondary);
    background: rgba(0, 177, 178, 0.06);
}

.blog-categories .internal-toc__item--active .internal-toc__link {
    color: #fff;
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    font-weight: 500;
}

.blog-categories__count {
    font-size: 0.8125rem;
    color: #999;
    font-weight: 400;
}

/* --- Single blog post --- */
.blog-post__header {
    margin-bottom: var(--space-4);
}

.blog-post__title {
    font: var(--text-h3);
    letter-spacing: var(--text-h3-ls);
    color: var(--color-primary);
    margin: 0 0 0.5rem;
}

.blog-post__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #888;
}

.blog-post__date {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.blog-post__meta-sep {
    color: #ccc;
}

.blog-post__author {
    font-style: normal;
}

.blog-post__featured-image {
    margin-bottom: var(--space-4);
    border-radius: 0.75rem;
    overflow: hidden;
}

.blog-post__image {
    width: 100%;
    height: auto;
    display: block;
}

.blog-post__content {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-body);
}

.blog-post__content h2,
.blog-post__content h3,
.blog-post__content h4 {
    margin-top: var(--space-3);
    margin-bottom: 0.5em;
}

.blog-post__content p {
    margin-bottom: 1.25em;
}

.blog-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.blog-post__nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid #e5e5e5;
}

.blog-post__nav a {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
}

.blog-post__nav a:hover {
    color: var(--color-secondary-dark);
}

.blog-post__nav-prev,
.blog-post__nav-next {
    max-width: 45%;
}

.blog-post__nav-next {
    text-align: right;
    margin-left: auto;
}

.blog-listing__category-title {
    margin-bottom: var(--space-4);
}

.blog-listing__load-more {
    text-align: center;
    padding: var(--space-5) 0 0;
    grid-column: 1 / -1;
}

.blog-card--hidden {
    display: none !important;
}

/* Blog sidebar: keep categories visible on mobile/tablet, hide special card */
@media (max-width: 64em) {
    .blog .internal-sidebar {
        display: block;
        position: static;
    }
    .blog .internal-special {
        display: none;
    }
}



/* --- Forms: anti-spam honeypot + inline notices --- */

/* Off-screen rather than display:none — bots that skip hidden fields are
   more likely to fill this one in, which is the whole point of the trap. */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-notice {
    padding: 0.875rem 1.25rem;
    margin-bottom: var(--space-3);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.form-notice a {
    color: inherit;
    text-decoration: underline;
}

.form-notice--error {
    background: #fdecea;
    color: #8a1c13;
    border: 1px solid #f5c2bd;
}

/* Gravity Forms iframe embeds (forms live at bradentonperio.com/forms/, see gf_iframe()) */
.gf-embed {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    overflow: hidden;
}