:root {
    --color-cream: #fef9ef;
    --color-amber: #a4630f;
    --color-gold: #d78700;
    --color-light-gold: #f5e3b2;
    --color-dark: #3d2812;
    --color-tan: #e6cf9c;
    --color-dark-alpha-82: rgba(61, 40, 18, .82);
    --color-dark-alpha-78: rgba(61, 40, 18, .78);
    --color-dark-alpha-72: rgba(61, 40, 18, .72);
    --color-dark-alpha-62: rgba(61, 40, 18, .62);
    --color-dark-alpha-6: rgba(61, 40, 18, .6);
    --font-heading: 'Rethink Sans', sans-serif;
    --font-body: 'Mulish', sans-serif;
    --ease: cubic-bezier(.23, 1, .32, 1);
    --radius: 14px;
    --radius-sm: 12px;
    --radius-pill: 999px;
}

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

.hero,
.hero-simple__container,
.about__image-inner,
.service-card__image-inner,
.doctor__image,
.team-card__image-inner,
.step-card__image-inner,
.about-page-story__image,
.about-page-story__image-inner,
.about-page-standards__image,
.about-page-standards__image-inner,
.contact-map__embed,
.contact-main__map-col,
.doctors-intro__image,
.doctor-card,
.doctor-avatar,
.new-patients__card,
.new-patients__doctor-photo,
.contact-extra__map,
.contact-info-card {
    isolation: isolate;
}

body {
    margin: 0;
    background: var(--color-cream);
    font-family: var(--font-body);
    color: var(--color-dark);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-amber); text-decoration: none; }
a:hover { color: var(--color-dark); }

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

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.12;
    margin: 0;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }
li { border: none; }

/* ----------------------------------------------------------------
   Skip link
   ---------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    background: var(--color-amber);
    color: var(--color-cream);
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
}

.skip-link:focus {
    top: 16px;
    color: var(--color-cream);
}

/* ----------------------------------------------------------------
   Top bar
   ---------------------------------------------------------------- */
.top-bar {
    background: var(--color-dark);
    color: var(--color-cream);
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: .04em;
    padding: 11px 40px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border: none;
}

.top-bar strong { font-weight: 700; }
.top-bar > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.top-bar a { color: var(--color-cream); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.top-bar a:hover { color: var(--color-gold); }
.top-bar__contact { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.top-bar__sep { opacity: .5; }

/* ----------------------------------------------------------------
   Section badge (label pill)
   ---------------------------------------------------------------- */
.section-badge {
    display: inline-flex;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-amber);
}

.section-badge--cream { background: transparent; }
.section-badge--gold { background: transparent; }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: .05em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary {
    background: var(--color-amber);
    color: var(--color-cream);
    font-size: 13px;
    padding: 16px 30px;
}

.btn--primary:hover {
    background: var(--color-gold);
    color: var(--color-cream);
}

.btn--outline {
    border: 1px solid rgba(61, 40, 18, .3);
    background: transparent;
    color: var(--color-dark);
    font-size: 13px;
    padding: 16px 28px;
}

.btn--outline:hover {
    background: var(--color-amber);
    color: var(--color-cream);
    border-color: var(--color-amber);
}

.btn--small {
    font-size: 12px;
    padding: 13px 24px;
}

.btn--hero-primary {
    background: var(--color-amber);
    color: var(--color-cream);
    font-size: 14px;
    padding: 16px 30px;
}

.btn--hero-primary:hover {
    background: var(--color-gold);
    color: var(--color-cream);
}

.btn--hero-outline {
    border: 1px solid rgba(254, 249, 239, .5);
    background: transparent;
    color: var(--color-cream);
    font-size: 13px;
    padding: 16px 28px;
}

.btn--hero-outline:hover {
    background: var(--color-gold);
    color: var(--color-cream);
    border-color: var(--color-gold);
}

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */
.hero-wrapper {
    padding: 24px 28px 0;
}

.hero {
    position: relative;
    /* flow-root contains the child margins (the hours card's bottom margin on
       mobile/tablet) without clipping, which overflow: hidden used to do here
       before it was removed to fix the corner hairline. */
    display: flow-root;
    border-radius: var(--radius);
    /* No overflow: hidden here. Clipping the hero at a rounded corner leaves a
       1px anti-aliased seam where the cream panels meet the curve (the hairline).
       The media layers below round themselves instead, and the cream panels
       round their own outer corners, so nothing needs clipping at this level. */
    background: #b58a4e center/cover no-repeat;
    min-height: 780px;
}

.hero__slides {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}

.hero__slide--active {
    opacity: 1;
}

.hero--slideshow {
    background: #b58a4e;
}

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

.hero__overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: linear-gradient(100deg,
        rgba(61, 40, 18, .92) 0%,
        rgba(61, 40, 18, .78) 40%,
        rgba(61, 40, 18, .34) 78%,
        rgba(61, 40, 18, .2) 100%);
}

.hero__top {
    position: absolute;
    left: -1px; top: -1px; right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    z-index: 2;
}

.hero__logo-nav {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.6vw, 28px);
    min-width: 0;
    flex-shrink: 3;
    position: relative;
    background: var(--color-cream);
    border-radius: var(--radius) 0 24px 0;
    padding: 18px clamp(14px, 1.8vw, 26px) 28px clamp(12px, 1.4vw, 20px);
}

/* Corner cutout curves */
.hero__logo-nav::before {
    content: '';
    position: absolute;
    right: -24px; top: 0;
    width: 24px; height: 24px;
    background: radial-gradient(circle 24.5px at 100% 100%, transparent 23.5px, var(--color-cream) 24.5px);
}

.hero__logo-nav::after {
    content: '';
    position: absolute;
    left: 0; bottom: -24px;
    width: 24px; height: 24px;
    background: radial-gradient(circle 24.5px at 100% 100%, transparent 23.5px, var(--color-cream) 24.5px);
}

/* Decorative corner patch: rounds the hero image's top-left where it meets the
   logo band at <=1024px. Hidden on desktop, where the band's own corners and the
   concave cutouts already do this. See the mobile rules further down. */
.hero__corner { display: none; }

.hero__logo {
    height: clamp(34px, 3.1vw, 46px);
    width: auto;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
}

.hero__nav {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.8vw, 20px);
    font-family: var(--font-heading);
    font-size: clamp(12px, 1.05vw, 14.5px);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero__nav a {
    position: relative;
    color: var(--color-dark-alpha-72);
    padding: 6px clamp(7px, 0.85vw, 12px);
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    background: transparent;
}

.hero__nav a:hover {
    background: var(--color-light-gold);
    color: var(--color-dark);
}

.hero__nav a.active,
.hero__nav a[aria-current="page"] {
    background: transparent;
    color: var(--color-gold);
    font-weight: 700;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    flex-shrink: 0;
}

.hero__phone {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(254, 249, 239, .14);
    border: 1px solid rgba(254, 249, 239, .4);
    color: var(--color-cream);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

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

.hero__book-btn {
    background: var(--color-amber);
    color: var(--color-cream);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.hero__book-btn:hover {
    background: var(--color-gold);
    color: var(--color-cream);
}

.hero__content {
    position: relative;
    max-width: 1448px;
    margin: 0 auto;
    padding: 180px 24px 76px;
    z-index: 1;
}

.hero__content-inner {
    max-width: 840px;
}

.hero__locale-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(254, 249, 239, .16);
    border: 1px solid rgba(254, 249, 239, .35);
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--color-cream);
}

.hero__title {
    font-size: clamp(40px, 4.6vw, 66px);
    line-height: 1.07;
    font-weight: 700;
    letter-spacing: -.028em;
    margin: 20px 0 0;
    color: var(--color-cream);
}

.hero__subtitle {
    font-family: var(--font-heading);
    font-size: clamp(18px, 1.6vw, 23px);
    font-weight: 600;
    line-height: 1.35;
    margin: 20px 0 0;
    color: var(--color-light-gold);
}

.hero__desc {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(254, 249, 239, .88);
    margin: 16px 0 0;
    max-width: 600px;
}

.hero__desc-lead {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 20px;
}

.hero__languages {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.hero__lang-tags {
    display: flex;
    gap: 7px;
}

.hero__lang-tag {
    background: rgba(254, 249, 239, .16);
    color: var(--color-cream);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
}

.hero__lang-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(254, 249, 239, .75);
}

.hero__ctas {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 44px;
    flex-wrap: wrap;
}

/* Hero avatar cluster */
.hero__avatars {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.hero__avatars img,
.hero__avatars .hero__avatar-initial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    /* Same upward bias as the team cards — at 44px a centred crop on a
       portrait source lands on the chin rather than the face. */
    object-position: 50% 20%;
    border: 2px solid rgba(254, 249, 239, .4);
    margin-left: -10px;
}

/* Initial in place of a headshot, matching the team card monogram. */
.hero__avatars .hero__avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--color-light-gold);
    color: var(--color-amber);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.hero__avatars img:first-child,
.hero__avatars .hero__avatar-initial:first-child {
    margin-left: 0;
}

/* Hero after-hours floating bar */
.hero__after-hours {
    display: inline-block;
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
    color: var(--color-dark);
}

.hero__after-hours-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

.hero__after-hours p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 2px;
}

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

/* Hero info cards (floating yellow boxes) */
.hero__info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.hero__info-card {
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
    padding: 24px 28px;
}

.hero__info-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 8px;
}

.hero__info-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
    margin: 0;
}

/* Hero hours card (bottom-right) */
.hero__hours {
    position: absolute;
    right: -1px; bottom: -1px;
    background: var(--color-cream);
    border-radius: 24px 0 var(--radius) 0;
    padding: 22px 30px 24px 28px;
    min-width: 344px;
    z-index: 2;
}

.hero__hours::before {
    content: '';
    position: absolute;
    left: -24px; bottom: 0;
    width: 24px; height: 24px;
    background: radial-gradient(circle 24.5px at 0% 0%, transparent 23.5px, var(--color-cream) 24.5px);
}

.hero__hours::after {
    content: '';
    position: absolute;
    right: 0; top: -24px;
    width: 24px; height: 24px;
    background: radial-gradient(circle 24.5px at 0% 0%, transparent 23.5px, var(--color-cream) 24.5px);
}

.hero__hours-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--color-amber);
}

.hero__hours-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 14px;
}

.hero__hours-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.hero__hours-row strong { font-weight: 700; }

.hero__hours-row span {
    color: var(--color-dark-alpha-78);
    text-align: right;
}

.hero__hours-divider {
    height: 1px;
    background: var(--color-tan);
}

.hero__hours-note {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--color-dark-alpha-62);
    font-style: italic;
    margin: 12px 0 0;
}

/* Subpage hero — shorter, smaller title */
.hero__content-inner--sub { max-width: 780px; }

.hero__title--sub {
    font-size: clamp(34px, 3.8vw, 52px);
}

.hero__content-inner--right {
    padding-top: 370px;
}

/* Contact hero — floating form card */
.hero__content-inner--contact { max-width: 980px; }

.hero__contact-form {
    margin-top: 28px;
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 24px 32px 28px;
}

.hero__contact-form h2 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-amber);
    margin: 0 0 14px;
    text-transform: uppercase;
}

.hero__contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.hero__contact-form-grid .contact-field {
    margin-top: 0;
    min-width: 0;
}

.hero__contact-form-grid .contact-field--message {
    grid-column: 1 / -1;
}

.hero__contact-form-grid .contact-field--submit {
    grid-column: 1 / -1;
    justify-self: start;
}

.hero__contact-form-grid .contact-field label {
    font-size: 12px;
    margin-bottom: 5px;
    color: var(--color-dark);
}

.hero__contact-form-grid .contact-field input,
.hero__contact-form-grid .contact-field textarea {
    padding: 10px 14px;
    font-size: 14px;
    background: var(--color-cream);
}

.hero__contact-form-grid .contact-field textarea {
    min-height: 70px;
    resize: vertical;
}

.hero__contact-form-grid .contact-submit {
    margin-top: 4px;
}

.contact-submit-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-form-disclaimer {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-dark-alpha-62);
    flex: 1;
}

/* ----------------------------------------------------------------
   Contact — Map + Details info section
   ---------------------------------------------------------------- */
.contact-info {
    padding: 120px 28px 80px;
}

.contact-info__inner {
    max-width: 1350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 28px;
    align-items: stretch;
}

.contact-info__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info__map {
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 400px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.contact-info__map .contact-map__embed {
    height: 100%;
}

.contact-info__map .contact-map__embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.contact-info__cards-header {
    margin-bottom: 4px;
}

.contact-info__cards-header h3 {
    font-size: clamp(30px, 3vw, 40px);
    margin: 0 0 12px;
}

.contact-info__cards-header p {
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-dark-alpha-78);
    max-width: 600px;
}

.contact-info-card {
    position: relative;
    border-radius: var(--radius);
}

.contact-info-card__bg {
    position: absolute;
    inset: 0;
    background: var(--color-light-gold);
    border-radius: var(--radius);
}

.contact-info-card__icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 52px;
    height: 42px;
    background: var(--color-amber);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-cream);
    z-index: 1;
}

.contact-info-card__body {
    position: relative;
    z-index: 1;
    padding: 24px 28px;
}

.contact-info-card__body h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
}

.contact-info-card__body address,
.contact-info-card__body p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-dark-alpha-82);
    font-style: normal;
}

.contact-info-card__body a {
    color: var(--color-amber);
}

.notch-tr-sm {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="86" height="76"%3E%3Cpath d="M86 64 A12 12 0 0 0 74 52 H32 A12 12 0 0 1 20 40 V12 A12 12 0 0 0 8 0 H86 V64 Z" fill="black"/%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: right top, 0 0;
    mask-size: 86px 76px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="86" height="76"%3E%3Cpath d="M86 64 A12 12 0 0 0 74 52 H32 A12 12 0 0 1 20 40 V12 A12 12 0 0 0 8 0 H86 V64 Z" fill="black"/%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: right top, 0 0;
    -webkit-mask-size: 86px 76px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

/* Contact — After hours + FAQ */
.contact-extra {
    padding: 0 28px 80px;
}

.contact-extra__grid {
    max-width: 1350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 40px;
    align-items: stretch;
}

.contact-extra__image {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-extra__image-main {
    flex: 1;
    min-height: 240px;
    border-radius: var(--radius);
    overflow: hidden;
    transition: flex-basis .35s var(--ease);
}

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

.contact-extra__image-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-extra__image-thumb {
    border-radius: var(--radius);
    overflow: hidden;
    height: 160px;
}

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

.contact-extra__after-hours-inner {
    margin-top: 20px;
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 36px 40px;
}

.contact-extra__after-hours-icon {
    color: var(--color-amber);
    margin-bottom: 16px;
}

.contact-extra__after-hours h2 {
    font-size: 22px;
    margin: 0 0 12px;
}

.contact-extra__after-hours {
    display: flex;
    flex-direction: column;
}

.contact-extra__map {
    min-height: 200px;
    flex: 1;
    border-radius: var(--radius);
    overflow: hidden;
    transition: flex-basis .35s var(--ease), min-height .35s var(--ease);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.contact-extra__map .contact-map__embed {
    height: 100%;
}

.contact-extra__map .contact-map__embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.contact-extra__faq h2 {
    font-size: clamp(26px, 2.6vw, 36px);
    margin: 16px 0 0;
}

.contact-extra__faq-desc {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-dark-alpha-78);
    margin: 12px 0 0;
    max-width: 560px;
}

.faq-accordion {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
}

.faq-item {
    border-top: 2px solid var(--color-light-gold);
}

.faq-item:last-child {
    border-bottom: 2px solid var(--color-light-gold);
}

.faq-item--full {
    grid-column: 1 / -1;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-dark);
    cursor: pointer;
    list-style: none;
    transition: color .15s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '';
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233d2812' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform .2s var(--ease);
}

.faq-item[open] summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a4630f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.faq-item[open] summary {
    color: var(--color-amber);
}

.faq-item summary:hover {
    color: var(--color-amber);
}

.faq-item__content {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s var(--ease);
}

.faq-item > p,
.faq-item__content > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    padding: 0 0 20px;
}

.faq-item > p a {
    color: var(--color-amber);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----------------------------------------------------------------
   Mobile menu
   ---------------------------------------------------------------- */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: var(--color-dark);
    z-index: 100;
}

.mobile-nav-overlay {
    display: none;
}

/* ----------------------------------------------------------------
   Features strip
   ---------------------------------------------------------------- */
.features {
    max-width: 1504px;
    margin: 0 auto;
    padding: 88px 52px 84px;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

.features__item {
    padding: 0 34px;
    border-right: 1px solid rgba(215, 135, 0, .55);
}

.features__item:first-child { padding-left: 0; }
.features__item:last-child { padding-right: 0; border-right: none; }
.features__item:nth-child(even) { padding-top: 0; }

.features__icon {
    display: block;
    margin-bottom: 20px;
    color: var(--color-gold);
}

.features__item h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
}

.features__item p {
    font-size: 15px;
    line-height: 1.62;
    color: var(--color-dark-alpha-78);
    margin: 12px 0 0;
}

/* ----------------------------------------------------------------
   About section
   ---------------------------------------------------------------- */
.about {
    padding: 20px 40px 96px;
}

.about__grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
    align-items: center;
}

.about__image-wrap {
    position: relative;
}

.about__image {
    position: relative;
    height: 540px;
    border-radius: var(--radius-sm);
}

.about__image-inner {
    width: 100%;
    height: 100%;
    background: var(--color-tan);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

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

.about__badge.corner-badge {
    width: 130px; height: 130px;
    padding: 12px;
    background: none;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.about__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about__content { max-width: 620px; }

.about__content h2 {
    font-size: clamp(36px, 3.6vw, 52px);
    line-height: 1.12;
    margin: 20px 0 0;
}

.about__content h2 span { color: inherit; }

.about__content > p {
    font-size: 17px;
    line-height: 1.68;
    color: var(--color-dark-alpha-82);
    margin: 22px 0 0;
}

.about__stats {
    margin-top: 32px;
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
    padding: 26px 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.about__stat {
    padding: 0 24px;
}

.about__stat:first-child { padding-left: 0; }
.about__stat:last-child { padding-right: 0; }
.about__stat + .about__stat { border-left: 1px solid rgba(215, 135, 0, .55); }

.about__stat-number {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--color-amber);
    line-height: 1;
}

.about__stat-label {
    font-size: 14.5px;
    color: var(--color-dark-alpha-78);
    margin-top: 8px;
}

/* ----------------------------------------------------------------
   Services section
   ---------------------------------------------------------------- */
.services-section {
    padding: 0 28px;
}

.services-section__inner {
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 88px 64px 100px;
}

.services-section__wrap {
    max-width: 1500px;
    margin: 0 auto;
}

.services-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.services-section__header > div { max-width: 780px; }

.services-section__header h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.14;
    margin: 18px 0 0;
}

.services-section__header h2 span { color: inherit; }

.services-section__intro {
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-dark-alpha-78);
    margin: 14px 0 0;
    max-width: 520px;
}

.services__grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 36px;
}

/* -- Reusable corner-badge notch pattern --
   The image gets a CSS mask that scoops out the corner where the badge sits.
   The badge overlaps into the scooped area so the two shapes interlock.
   Mask SVG encodes: rounded-rect minus the badge corner with a concave curve. */

.notch-tl {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="104"%3E%3Cg transform="translate(130,0) scale(-1,1)"%3E%3Cpath d="M130 90 A14 14 0 0 0 116 76 H46 A18 18 0 0 1 28 58 V14 A14 14 0 0 0 14 0 H130 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: left top, 0 0;
    mask-size: 130px 104px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="104"%3E%3Cg transform="translate(130,0) scale(-1,1)"%3E%3Cpath d="M130 90 A14 14 0 0 0 116 76 H46 A18 18 0 0 1 28 58 V14 A14 14 0 0 0 14 0 H130 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: left top, 0 0;
    -webkit-mask-size: 130px 104px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

.notch-tr {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="104"%3E%3Cpath d="M130 90 A14 14 0 0 0 116 76 H46 A18 18 0 0 1 28 58 V14 A14 14 0 0 0 14 0 H130 Z" fill="black"/%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: right top, 0 0;
    mask-size: 130px 104px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="130" height="104"%3E%3Cpath d="M130 90 A14 14 0 0 0 116 76 H46 A18 18 0 0 1 28 58 V14 A14 14 0 0 0 14 0 H130 Z" fill="black"/%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: right top, 0 0;
    -webkit-mask-size: 130px 104px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

/* Services page category cards only - .notch-tr is shared, so it is left alone
   and this class is added beside it on services.html.

   Same defect as the team cards, rotated: the SVG mask layer is anchored to the
   element's top-right corner, so its own antialiased boundary sits on those two
   edges and leaves a pale strip down the right side of the photo, below the
   badge. Pulling the layer 1px up and right moves that soft boundary outside the
   painted area; the gradient layer keeps the edges crisp. 1px is enough here
   because this mask is 88x76, smaller than the team cards' 130x104. */
.notch-tr--crisp {
    mask-position: right -1px top -1px, 0 0;
    -webkit-mask-position: right -1px top -1px, 0 0;
}

.notch-bl {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="298" height="100"%3E%3Cg transform="translate(298,100) scale(-1,-1)"%3E%3Cpath d="M298 100 A14 14 0 0 0 284 86 H32 A18 18 0 0 1 14 68 V14 A14 14 0 0 0 0 0 H298 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: left bottom, 0 0;
    mask-size: 298px 100px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="298" height="100"%3E%3Cg transform="translate(298,100) scale(-1,-1)"%3E%3Cpath d="M298 100 A14 14 0 0 0 284 86 H32 A18 18 0 0 1 14 68 V14 A14 14 0 0 0 0 0 H298 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: left bottom, 0 0;
    -webkit-mask-size: 298px 100px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

.notch-br {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="94" height="74"%3E%3Cg transform="translate(0,74) scale(1,-1)"%3E%3Cpath d="M94 68 A12 12 0 0 0 82 56 H32 A14 14 0 0 1 18 42 V12 A12 12 0 0 0 6 0 H94 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: right bottom, 0 0;
    mask-size: 94px 74px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="94" height="74"%3E%3Cg transform="translate(0,74) scale(1,-1)"%3E%3Cpath d="M94 68 A12 12 0 0 0 82 56 H32 A14 14 0 0 1 18 42 V12 A12 12 0 0 0 6 0 H94 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: right bottom, 0 0;
    -webkit-mask-size: 94px 74px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

/* Team-card notch, the base .notch-br shape scaled 1.25x. The team cards
   became square (~402px) when the fixed 230px height was dropped, so the
   badge went from 3.5% of the card to 2% and read as undersized against
   the larger photo. Scaling the whole shape - box, arcs and badge together
   - keeps the 8px channels on both sides and the notch's proportions. */
.notch-br-team {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="118" height="92"%3E%3Cg transform="translate(0,92) scale(1,-1)"%3E%3Cpath d="M118 85 A15 15 0 0 0 102 70 H40 A18 18 0 0 1 22 52 V15 A15 15 0 0 0 8 0 H118 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: right bottom, 0 0;
    mask-size: 118px 92px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="118" height="92"%3E%3Cg transform="translate(0,92) scale(1,-1)"%3E%3Cpath d="M118 85 A15 15 0 0 0 102 70 H40 A18 18 0 0 1 22 52 V15 A15 15 0 0 0 8 0 H118 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: right bottom, 0 0;
    -webkit-mask-size: 118px 92px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

/* Staff section of the doctors & staff page only - .notch-br-team is shared
   with the homepage, so it is left alone and this class is added beside it on
   doctors-and-staff.html.

   The notch mask has two layers: the SVG that carves the corner, and a
   linear-gradient that covers the rest of the box. The SVG layer is anchored to
   the element's bottom edge, and its own antialiased boundary sits right on that
   edge - so the photo's bottom fades out over ~2.8px instead of ending cleanly,
   which reads as a grey hairline running left from the badge.

   Dropping that layer 2px below the element puts its soft boundary outside the
   painted area; the gradient layer then defines a crisp bottom edge. Measured at
   8x zoom the fade falls from 2.75px to 1.38px, the same as an unmasked edge.
   Past -2px the fade stops improving and only eats into the channel. */
.notch-br-team--crisp {
    mask-position: right bottom -2px, 0 0;
    -webkit-mask-position: right bottom -2px, 0 0;
}

.notch-br-badge {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="340" height="240"%3E%3Cg transform="translate(0,240) scale(1,-1)"%3E%3Cpath d="M340 226 A14 14 0 0 0 326 212 H32 A18 18 0 0 1 14 194 V14 A14 14 0 0 0 0 0 H340 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: right bottom, 0 0;
    mask-size: 340px 240px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="340" height="240"%3E%3Cg transform="translate(0,240) scale(1,-1)"%3E%3Cpath d="M340 226 A14 14 0 0 0 326 212 H32 A18 18 0 0 1 14 194 V14 A14 14 0 0 0 0 0 H340 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: right bottom, 0 0;
    -webkit-mask-size: 340px 240px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

.notch-bl-badge {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="156" height="156"%3E%3Cg transform="translate(156,156) scale(-1,-1)"%3E%3Cpath d="M156 142 A14 14 0 0 0 142 128 H32 A18 18 0 0 1 14 110 V14 A14 14 0 0 0 0 0 H156 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: left bottom, 0 0;
    mask-size: 156px 156px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="156" height="156"%3E%3Cg transform="translate(156,156) scale(-1,-1)"%3E%3Cpath d="M156 142 A14 14 0 0 0 142 128 H32 A18 18 0 0 1 14 110 V14 A14 14 0 0 0 0 0 H156 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: left bottom, 0 0;
    -webkit-mask-size: 156px 156px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

.notch-tl-badge {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="156" height="156"%3E%3Cg transform="translate(156,0) scale(-1,1)"%3E%3Cpath d="M156 142 A14 14 0 0 0 142 128 H32 A18 18 0 0 1 14 110 V14 A14 14 0 0 0 0 0 H156 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: left top, 0 0;
    mask-size: 156px 156px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="156" height="156"%3E%3Cg transform="translate(156,0) scale(-1,1)"%3E%3Cpath d="M156 142 A14 14 0 0 0 142 128 H32 A18 18 0 0 1 14 110 V14 A14 14 0 0 0 0 0 H156 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: left top, 0 0;
    -webkit-mask-size: 156px 156px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

.notch-tr-bl {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="78" height="70"%3E%3Cpath d="M78 70 A14 14 0 0 0 64 56 H32 A18 18 0 0 1 14 38 V14 A14 14 0 0 0 0 0 H78 Z" fill="black"/%3E%3C/svg%3E'),
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="298" height="100"%3E%3Cg transform="translate(298,100) scale(-1,-1)"%3E%3Cpath d="M298 100 A14 14 0 0 0 284 86 H32 A18 18 0 0 1 14 68 V14 A14 14 0 0 0 0 0 H298 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: right top, left bottom, 0 0;
    mask-size: 78px 70px, 298px 100px, 100% 100%;
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-composite: exclude, exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="78" height="70"%3E%3Cpath d="M78 70 A14 14 0 0 0 64 56 H32 A18 18 0 0 1 14 38 V14 A14 14 0 0 0 0 0 H78 Z" fill="black"/%3E%3C/svg%3E'),
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="298" height="100"%3E%3Cg transform="translate(298,100) scale(-1,-1)"%3E%3Cpath d="M298 100 A14 14 0 0 0 284 86 H32 A18 18 0 0 1 14 68 V14 A14 14 0 0 0 0 0 H298 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: right top, left bottom, 0 0;
    -webkit-mask-size: 78px 70px, 298px 100px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-composite: xor, xor;
}

.notch-br-lg {
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="258"%3E%3Cg transform="translate(0,258) scale(1,-1)"%3E%3Cpath d="M300 258 A14 14 0 0 0 286 244 H32 A18 18 0 0 1 14 226 V14 A14 14 0 0 0 0 0 H300 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: right bottom, 0 0;
    mask-size: 300px 258px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="258"%3E%3Cg transform="translate(0,258) scale(1,-1)"%3E%3Cpath d="M300 258 A14 14 0 0 0 286 244 H32 A18 18 0 0 1 14 226 V14 A14 14 0 0 0 0 0 H300 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: right bottom, 0 0;
    -webkit-mask-size: 300px 258px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

.notch-br-cta {
    /* The SVG layer is pulled 1px past the corner so its antialiased boundary
       falls outside the painted area. Anchored flush, that soft edge let the
       gold card fade into the cream over ~6.5px along the notch, which read as a
       faint yellow line beside the emergency box. With the offset it is 1px.
       Only CTA cards use this class, so every page's CTA gets the fix. */
    mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="370" height="234"%3E%3Cg transform="translate(0,234) scale(1,-1)"%3E%3Cpath d="M370 234 A14 14 0 0 0 356 220 H32 A18 18 0 0 1 14 202 V14 A14 14 0 0 0 0 0 H370 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    mask-position: right -1px bottom -1px, 0 0;
    mask-size: 370px 234px, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="370" height="234"%3E%3Cg transform="translate(0,234) scale(1,-1)"%3E%3Cpath d="M370 234 A14 14 0 0 0 356 220 H32 A18 18 0 0 1 14 202 V14 A14 14 0 0 0 0 0 H370 Z" fill="black"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(black, black);
    -webkit-mask-position: right -1px bottom -1px, 0 0;
    -webkit-mask-size: 370px 234px, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;
}

.corner-badge {
    position: absolute;
    background: var(--color-amber);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-cream);
    z-index: 1;
}

.corner-badge--tl {
    left: 0; top: 0;
}

.corner-badge--tr {
    right: 0; top: 0;
}

.corner-badge--br {
    right: 0; bottom: 0;
}

.corner-badge--bl {
    left: 0; bottom: 0;
}

.service-card__image {
    position: relative;
    height: 250px;
    border-radius: var(--radius-sm);
}

.service-card__image-inner {
    width: 100%;
    height: 100%;
    background: var(--color-tan);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

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

.service-card__icon {
    width: 90px; height: 64px;
}

.service-card__heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(215, 135, 0, .55);
}

.service-card__number {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-amber);
}

.service-card__heading h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -.015em;
}

.service-card p {
    font-size: 15px;
    line-height: 1.62;
    color: var(--color-dark-alpha-78);
    margin: 10px 0 0;
}

/* ----------------------------------------------------------------
   Doctor profile section
   ---------------------------------------------------------------- */
.doctor {
    padding: 92px 40px;
}

.doctor__wrap {
    max-width: 1504px;
    margin: 0 auto;
}

.doctor__grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: start;
}

.doctor__image-wrap {
    position: relative;
}

.doctor__image {
    height: 560px;
    background: var(--color-tan);
    border-radius: var(--radius);
    overflow: hidden;
}

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

/* Team page only - the homepage shares .doctor__image but uses a different
   photo (a consultation scene) that wants the existing fixed height and
   centring. Here the photo matches the copy column: the grid stretches both,
   and the photo takes its height from the row so the two end level. */
.doctor--team .doctor__grid {
    align-items: stretch;
}

.doctor--team .doctor__image-wrap {
    display: flex;
    flex-direction: column;
    /* A stretched grid item's height is definite, but only if its own content
       is not allowed to push it out. */
    min-height: 0;
}

.doctor--team .doctor__image {
    background: var(--color-light-gold);
    width: 100%;
    /* flex-basis 0 + min-height 0 is what makes this track the copy column: with
       height:auto the inner img's height:100% resolves against an indefinite
       parent, falls back to its intrinsic height and pushes the box taller than
       the row. Basis 0 gives the box a definite height from the flex line, so
       the img fills it instead of driving it. */
    flex: 1 1 0;
    min-height: 0;
    height: auto;
}

.doctor--team .doctor__image img {
    /* The frame is now taller than the portrait's aspect at most widths, so the
       crop is vertical. Anchored high: it takes from the background above his
       head first and keeps his head and shoulders in frame. */
    object-position: 50% 4%;
}

.doctor__quote {
    position: absolute;
    right: 0; bottom: 0;
    width: 280px;
    background: var(--color-cream);
    border-radius: 16px 0 var(--radius) 0;
    padding: 8px 0 0 8px;
    z-index: 1;
}

.doctor__quote-inner {
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
    padding: 20px 24px 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.doctor__quote::before {
    content: '';
    position: absolute;
    left: -16px; bottom: 0;
    width: 16px; height: 16px;
    background: radial-gradient(circle 16px at 0% 0%, transparent 15.5px, var(--color-cream) 15.5px);
}

.doctor__quote::after {
    content: '';
    position: absolute;
    right: 0; top: -16px;
    width: 16px; height: 16px;
    background: radial-gradient(circle 16px at 0% 0%, transparent 15.5px, var(--color-cream) 15.5px);
}

.doctor__quote-mark {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 800;
    color: var(--color-gold);
    line-height: .5;
}

.doctor__quote p {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -.015em;
    color: var(--color-dark);
    margin: 16px 0 0;
}

.doctor__quote-divider {
    width: 40px;
    height: 1px;
    background: rgba(61, 40, 18, .28);
    margin: 20px 0 12px;
}

.doctor__quote-name {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-dark);
}

.doctor__quote-creds {
    font-size: 12px;
    color: var(--color-dark-alpha-62);
    margin: 3px 0 0;
}

.doctor__content { padding-top: 6px; }

.doctor__label {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-amber);
}

.doctor__content h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.12;
    margin: 16px 0 0;
}

.doctor__creds {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-amber);
    margin: 8px 0 0;
}

.doctor__intro {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    margin: 22px 0 0;
}

.doctor__bio {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(61, 40, 18, .84);
    margin: 14px 0 0;
}

.doctor__interests {
    margin-top: 30px;
}

.doctor__interests-label {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-amber);
}

.doctor__interests-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px 24px;
    margin-top: 18px;
    justify-content: start;
}

.doctor__interest {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doctor__interest-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-amber);
}

.doctor__interest span:last-child {
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 600;
}

/* Team page: the interests list takes the overlay card on the portrait, and
   the quote sits in the copy column unboxed. Same shapes as the homepage
   arrangement, contents swapped. */
.doctor__interests--panel {
    position: absolute;
    right: 0; bottom: 0;
    width: 280px;
    margin-top: 0;
    background: var(--color-cream);
    border-radius: 16px 0 var(--radius) 0;
    padding: 8px 0 0 8px;
    z-index: 1;
}

.doctor__interests--panel::before {
    content: '';
    position: absolute;
    left: -16px; bottom: 0;
    width: 16px; height: 16px;
    background: radial-gradient(circle 16px at 0% 0%, transparent 15.5px, var(--color-cream) 15.5px);
}

.doctor__interests--panel::after {
    content: '';
    position: absolute;
    right: 0; top: -16px;
    width: 16px; height: 16px;
    background: radial-gradient(circle 16px at 0% 0%, transparent 15.5px, var(--color-cream) 15.5px);
}

.doctor__interests-inner {
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
    padding: 20px 24px 22px;
    height: 100%;
}

.doctor__interests--panel .doctor__interests-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
}

.doctor__interests--panel .doctor__interest span:last-child {
    font-size: 14.5px;
    line-height: 1.3;
}

.doctor__quote--plain {
    position: static;
    width: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    margin-top: 30px;
}

.doctor__quote--plain::before,
.doctor__quote--plain::after { display: none; }

.doctor__quote--plain .doctor__quote-inner {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* Team page: the quote is a plain card under Particular Interests rather than
   a notched overlay on the portrait, so the photo stays whole. Keeps the gold
   fill and all the quote typography; drops the cutout geometry. */
.doctor__quote--card {
    position: static;
    width: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    margin-top: 28px;
}

.doctor__quote--card::before,
.doctor__quote--card::after { display: none; }

.doctor__quote--card .doctor__quote-inner {
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 22px 20px 24px;
}

.doctor__quote--card .doctor__quote-divider { display: block; }

.doctor__after-hours {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-tan);
}

.doctor__after-hours-label {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-amber);
    margin-bottom: 10px;
}

.doctor__after-hours p {
    font-size: 15px;
    line-height: 1.62;
    color: var(--color-dark-alpha-78);
    margin: 0;
}

/* ----------------------------------------------------------------
   Team section
   ---------------------------------------------------------------- */
.team {
    margin-top: 64px;
    max-width: 1750px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
}

.team__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.team__header h3 {
    font-size: clamp(28px, 2.8vw, 40px);
    letter-spacing: -.025em;
    margin: 12px 0 0;
}

.team__desc {
    font-size: 15px;
    line-height: 1.62;
    color: var(--color-dark-alpha-78);
    margin: 12px 0 0;
    max-width: 820px;
}

.team__grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.team-card__image {
    position: relative;
    /* The 4-column grid runs up to a 1750px container, so a card is ~400px
       wide on a desktop. A fixed 230px height made that a 1.75 letterbox
       that cropped ~43% of the headshot and cut into foreheads. Tying the
       box to the source's square ratio keeps the crop consistent at every
       width instead of worsening as the viewport grows. */
    aspect-ratio: 1 / 1;
}

.team-card__image-inner {
    width: 100%;
    height: 100%;
    /* Matches the backdrop baked into the headshots (#f5e3b2), so the
       loading placeholder resolves into the photo instead of shifting
       colour underneath it. */
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
    overflow: hidden;
    /* The card can land on a half pixel (a 4-column grid inside a 1750px
       container gives 402.5px at desktop widths). The mask and the element
       edge then round in opposite directions and leave a pale hairline
       along the notch. Snapping to the pixel grid removes the seam. */
    transform: translateZ(0);
}

.team-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Slight upward bias so the face sits on the upper third rather than
       dead centre; the box is square now, so this is framing, not rescue. */
    object-position: 50% 40%;
}

/* Stands in for a headshot where we have no photo of the staff member. The
   brochure uses the same device: the light-gold tile with a single amber
   initial, so the card reads as deliberate rather than as a failed image. */
.team-card__initial {
    /* Centring a single glyph by flex alone puts it high: flex centres the
       line box, and the font's ascent and descent are not symmetric about the
       cap height. Positioning the text node and translating it off its own
       measured centre sidesteps the line box entirely. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: 700;
    /* The tile is square and tracks the column width, so the glyph is sized
       against the viewport with a clamp - roughly 40% of the tile across the
       range, held to sane bounds at the extremes. */
    font-size: clamp(52px, 9.6vw, 132px);
    line-height: 1;
    color: var(--color-amber);
    /* The glyph is decorative - the name is already in the h4 underneath. */
    user-select: none;
}

.team-card__icon {
    /* Paired with .notch-br-team (118x92). Both are the base shape scaled
       1.25x, which holds the 8px channel on the left and top. */
    width: 88px; height: 62px;
}

/* Team page only - the homepage cards stop at the role. Cards stretch to a
   shared height so a description that wraps to a second line does not leave the
   row ragged. */
.team__grid { align-items: stretch; }

.team-card {
    display: flex;
    flex-direction: column;
}

.team-card__desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-dark-alpha-62);
    margin: 6px 0 0;
}

.team-card h4 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    margin: 16px 0 0;
    letter-spacing: normal;
}

.team-card p {
    font-size: 13.5px;
    color: rgba(61, 40, 18, .7);
    margin: 4px 0 0;
}

.team__languages-note {
    font-size: 15px;
    line-height: 1.62;
    color: var(--color-dark-alpha-78);
    margin: 32px 0 0;
    max-width: 700px;
}

/* ----------------------------------------------------------------
   New patients CTA
   ---------------------------------------------------------------- */
.new-patients {
    padding: 120px 0 96px;
}

.new-patients__inner {
    max-width: 1750px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
}

.new-patients__doctor-photo {
    position: absolute;
    right: 440px;
    top: -100px;
    bottom: 0;
    z-index: 3;
    border-radius: var(--radius);
    overflow: hidden;
}

.new-patients__doctor-photo img {
    height: 100%;
    width: auto;
    display: block;
}

.new-patients__card {
    position: relative;
}

.new-patients__card-border {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: var(--color-gold);
}

.new-patients__card-border.notch-br-cta {
    z-index: 0;
}

.new-patients__card-fill {
    position: absolute;
    inset: 2px;
    border-radius: 14px;
    background: var(--color-cream);
}

.new-patients__card-fill.notch-br-cta {
    z-index: 0;
}

.new-patients__agpal {
    position: absolute;
    top: 48px;
    /* Centred on the same 344px column the emergency panel below it occupies.
       Pinning by `right` instead left it sitting slightly off to one side of
       the text underneath. Centring on the column's midpoint keeps the two
       aligned whatever width the badge scales to. */
    right: 172px;
    transform: translateX(50%);
    /* Scales with the card rather than sitting at a fixed size, so it keeps its
       proportion to the emergency panel as the viewport narrows. */
    width: clamp(190px, 19vw, 286px);
    height: auto;
    z-index: 1;
}

.new-patients__content {
    position: relative;
    max-width: 1448px;
    margin: 0 auto;
    padding: 64px 24px 64px 40px;
    z-index: 1;
}

.new-patients__content-inner {
    max-width: min(920px, calc(100% - 380px));
}

.new-patients__content h2 {
    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 20px 0 0;
    padding-bottom: 10px;
    text-wrap: pretty;
}

.new-patients__content > p {
    font-size: 17.5px;
    line-height: 1.7;
    color: rgba(61, 40, 18, .84);
    margin: 36px 0 0;
    text-wrap: pretty;
}

.new-patients__ctas {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.new-patients--highlight {
    padding-top: 64px;
    padding-bottom: 140px;
}

.new-patients--highlight .new-patients__card-border {
    display: none;
}

.new-patients--highlight .new-patients__card-fill {
    inset: 0;
    border-radius: 16px;
    background: var(--color-light-gold);
}

.new-patients__emergency {
    position: absolute;
    right: 0; bottom: 0;
    width: 344px;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0;
}

.new-patients__emergency-inner {
    padding: 24px 26px;
}

.new-patients__emergency-inner svg {
    color: var(--color-gold);
    margin-bottom: 12px;
}

.new-patients__emergency-inner p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
    margin: 0;
}

.new-patients__emergency-inner p + p {
    margin-top: 8px;
}

.new-patients__emergency-inner strong {
    color: var(--color-dark);
    font-weight: 700;
}

.new-patients__emergency-inner a {
    color: var(--color-amber);
    font-weight: 600;
}

/* Bolded phone links (locum) keep the link colour at full strong weight —
   the nested <a> would otherwise override <strong> with its own 600. */
.new-patients__emergency-inner strong a,
.contact-info-card__body strong a,
.hero__after-hours strong a {
    font-weight: 700;
}

/* On the light-gold hero card, amber links fall to 3.78:1 — below AA for
   14px body text. Dark brown keeps the number legible; the bold weight
   and underline carry the affordance instead of colour. */
.hero__after-hours a {
    color: var(--color-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Same 3.78:1 problem on the light-gold patient-info panels: keep bolded
   phone links dark, and at full strong weight over the nested <a>. */
.patient-info-section .rich-text strong a {
    color: var(--color-dark);
    font-weight: 700;
}

.new-patients__emergency-inner a:hover {
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   Steps section
   ---------------------------------------------------------------- */
.steps {
    max-width: 1504px;
    margin: 0 auto;
    padding: 56px 52px 24px;
}

.steps h3 {
    font-size: clamp(26px, 2.4vw, 34px);
    letter-spacing: -.025em;
    margin: 14px 0 0;
}

.steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 26px;
}

.step-card__image {
    position: relative;
    height: 300px;
    border-radius: var(--radius-sm);
}

.step-card__image-inner {
    width: 100%;
    height: 100%;
    background: var(--color-tan);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

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

.step-card__icon-badge {
    width: 54px; height: 46px;
}

.step-card__label {
    position: absolute;
    left: 0; bottom: 0;
    width: 272px; height: 74px;
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
}

.step-card__label span {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-amber);
    letter-spacing: .06em;
}

.step-card__label h4 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: normal;
}

.step-card > p {
    font-size: 15px;
    line-height: 1.62;
    color: var(--color-dark-alpha-78);
    margin: 20px 0 0;
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.site-footer {
    background: var(--color-dark);
    padding: 72px 44px 32px;
}

.site-footer a {
    color: rgba(254, 249, 239, .78);
    transition: color .15s ease;
}

.site-footer a:hover { color: var(--color-cream); }

.footer__grid {
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 56px;
}

.footer__brand-logo {
    height: 52px;
    width: auto;
}

.footer__brand p {
    font-size: 15px;
    line-height: 1.62;
    color: rgba(254, 249, 239, .7);
    margin: 18px 0 0;
    max-width: 340px;
}

.footer__brand .booking-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-cream);
    background: var(--color-amber);
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    transition: background .15s ease;
}

.footer__brand .booking-button:hover {
    background: var(--color-gold);
}

.footer__heading {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-gold);
    margin: 0;
}

.footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
    font-size: 15px;
    list-style: none;
    padding: 0;
}

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

.footer__hours {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__hours-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 14.5px;
}

.footer__hours-row strong {
    font-weight: 700;
    color: var(--color-cream);
}

.footer__hours-row span {
    color: rgba(254, 249, 239, .75);
    text-align: right;
    white-space: nowrap;
}

.footer__hours-divider {
    height: 1px;
    background: rgba(254, 249, 239, .14);
}

.footer__hours-note {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(254, 249, 239, .55);
    font-style: italic;
    margin: 14px 0 0;
}

.footer__contact {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__contact-item {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(254, 249, 239, .78);
}

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

.footer__contact-item svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--color-gold);
}

.footer__bottom {
    max-width: 1360px;
    margin: 44px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(254, 249, 239, .16);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 13px;
    color: rgba(254, 249, 239, .6);
    flex-wrap: wrap;
}

.footer__bottom-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.footer__powered-by {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(254, 249, 239, .5);
}

.footer__powered-by img {
    height: 24px;
    width: auto;
}

.footer__bottom-right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer__bottom-right a {
    color: rgba(254, 249, 239, .7);
}

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

/* ----------------------------------------------------------------
   Card hover lifts
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Hero stagger entrance
   ---------------------------------------------------------------- */
.hero__content-inner > * {
    opacity: 0;
    transform: translateY(16px);
    animation: heroFadeIn .6s var(--ease) forwards;
}

.hero__content-inner > *:nth-child(1) { animation-delay: .1s; }
.hero__content-inner > *:nth-child(2) { animation-delay: .25s; }
.hero__content-inner > *:nth-child(3) { animation-delay: .4s; }
.hero__content-inner > *:nth-child(4) { animation-delay: .52s; }
.hero__content-inner > *:nth-child(5) { animation-delay: .62s; }
.hero__content-inner > *:nth-child(6) { animation-delay: .72s; }

@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------------------------------
   Scroll reveals
   ---------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .32s; }
.reveal-delay-4 { transition-delay: .44s; }
.reveal-delay-5 { transition-delay: .56s; }

.reveal-badge {
    opacity: 0;
    transform: scale(.7);
    transition: opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s;
}

.is-visible .reveal-badge {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-badge {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero__content-inner > * {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .flip-card__back {
        transition: none;
    }
}

/* ----------------------------------------------------------------
   Responsive — Narrow laptop (≤ 1495px)
   ---------------------------------------------------------------- */
@media (max-width: 1495px) {
    /* Dr Berera's cutout is anchored 440px from the right edge, so as the card
       narrows he tracks left across the headline. Below this width there is no
       longer clear space between the text column and the emergency panel for
       him to stand in, so he is dropped rather than left overlapping the copy. */
    .new-patients__doctor-photo {
        display: none;
    }

    /* With the photo gone the text column no longer has to clear it, but the
       reserve for the AGPAL badge and emergency panel on the right stays. */
    .new-patients__content-inner {
        max-width: calc(100% - 360px);
    }
}

/* ----------------------------------------------------------------
   Responsive — Tablet (≤ 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .new-patients__content br,
    .new-patients__emergency br,
    .services-page-allied-full__overlay br,
    .patient-info-policies__header br { display: none; }

    .features__item:nth-child(odd) { border-right: none; }
    .about__stat + .about__stat { border-left: none; }
    .about__stats--enclosed .about__stat + .about__stat { border-left: none; }
    .service-card__heading { border-top: none; }
    .doctor__after-hours { border-top: none; }
    .doctor__quote-divider { display: none; }
    .first-visit__step { border-right: none; }
    .doctor-card__detail { border-top: none; }
    .hero__hours-divider { display: none; }
    .footer__hours-divider { display: none; }
    .footer__bottom { border-top: none; }

    .top-bar {
        padding: 10px 20px;
        gap: 8px;
    }

    .hero__nav { display: none; }

    .hero__actions { display: none; }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--color-amber);
        border: none;
        border-radius: var(--radius-sm);
        color: var(--color-cream);
        padding: 0;
        cursor: pointer;
        position: absolute;
        right: 18px;
        top: 18px;
    }

    .hero__logo-nav {
        padding: 14px 18px;
        position: static;
        /* Same shape as desktop: rounds into the hero's top-left corner, square
           on the inner (right) edge where the concave cutout takes over. A
           rounded top-right here bulges the cream OUTWARD (convex), tapering the
           image into a wedge - the cutouts below must do this work instead, so
           the curve reads concave. Notch radii are 15px here - the desktop
           24px reads too heavy against a 58px-tall band, so this is
           scaled down to stay proportionate to it. */
        border-radius: var(--radius) 0 15px 0;
        margin: 0;
    }

    /* Keep the concave notch on mobile/tablet so the panel meets the hero the
       same polished way it does on desktop. */
    .hero__logo-nav::before {
        display: block;
        right: -15px;
        top: 0;
        width: 15px;
        height: 15px;
        background: radial-gradient(circle 16px at 100% 100%, transparent 14px, var(--color-cream) 16px);
    }

    /* The panel is a band across the hero's top here, so the image below it
       starts at an interior edge that border-radius cannot round. This cutout
       curves the panel's bottom-left into the image, the same way it does on
       desktop, instead of leaving a hard 90-degree junction. */
    .hero__logo-nav::after {
        display: block;
        left: 0;
        bottom: -15px;
        width: 15px;
        height: 15px;
        background: radial-gradient(circle 16px at 100% 100%, transparent 14px, var(--color-cream) 16px);
    }

    /* Sits immediately after .hero__logo-nav in the flex row, so it tracks the
       band's right edge at any width - no hardcoded offset. margin-left cancels
       the row's 12px gap and overlaps 1px to avoid a seam (-13px = -(12 + 1)),
       independent of the radius; margin-right: auto keeps the remaining items
       (hamburger) pushed to the far right. */
    .hero__top { justify-content: flex-start; }

    .hero__corner {
        display: block;
        flex: 0 0 15px;
        align-self: flex-start;
        height: 15px;
        margin-left: -13px;
        margin-right: auto;
        background: var(--color-cream);
        -webkit-mask-image: radial-gradient(circle 15px at 100% 100%, transparent 14px, #000 16px);
        mask-image: radial-gradient(circle 15px at 100% 100%, transparent 14px, #000 16px);
    }

    .hero-simple__links { display: none; }
    .hero-simple__actions { display: none; }
    .hero-simple .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--color-amber);
        border: none;
        border-radius: var(--radius-sm);
        color: var(--color-cream);
        padding: 0;
        position: absolute;
        right: 18px;
        top: 18px;
    }

    .hero-simple__logo-nav {
        padding: 14px 18px;
        position: static;
        border-radius: var(--radius) 0 14px 0;
        margin: 0;
    }

    .hero-simple__logo-nav::before {
        display: block;
        right: -14px;
        top: 0;
        width: 14px;
        height: 14px;
        background: radial-gradient(circle 14.5px at 100% 100%, transparent 13.5px, var(--color-cream) 14.5px);
    }

    .hero-simple__logo-nav::after {
        display: block;
        left: 0;
        bottom: -14px;
        width: 14px;
        height: 14px;
        background: radial-gradient(circle 14.5px at 100% 100%, transparent 13.5px, var(--color-cream) 14.5px);
    }

    .hero-simple__inner { padding: 72px 36px 52px; }

    .hero-simple__hours {
        position: relative;
        right: auto; bottom: auto;
        margin: 0 24px 24px;
        border-radius: var(--radius-sm);
        min-width: 0;
    }

    .hero-simple__hours::before,
    .hero-simple__hours::after { display: none; }

    .hero-simple__container--has-image { min-height: auto; }

    .hero__content {
        padding: 140px 24px 76px;
    }

    .hero__title { font-size: clamp(36px, 5vw, 52px); }

    .hero__hours {
        position: relative;
        right: auto; bottom: auto;
        left: auto;
        margin: 40px 24px 24px;
        border-radius: var(--radius-sm);
    }

    .hero__hours::before,
    .hero__hours::after { display: none; }

    .hero__ctas { flex-direction: column; align-items: flex-start; }
    .hero__ctas .btn { text-align: left; }

    .hero__after-hours { padding: 40px; }

    .hero__contact-form-grid { grid-template-columns: 1fr; }
    .hero__contact-form { padding: 20px 24px 24px; }

    .hero { min-height: auto; }

    .features__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 0;
    }

    .features__item { border-right: none; padding: 0; }
    .features__item:nth-child(even) { padding-top: 0; padding-left: 34px; }
    .features__item:nth-child(odd) { padding-right: 34px; border-right: 1px solid rgba(215, 135, 0, .55); }

    .features { padding: 60px 32px 60px; }

    .about__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about__image { height: 400px; }
    .about { padding: 20px 32px 64px; }

    .services-section__inner { padding: 60px 36px 68px; }

    .services-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 28px;
    }

    .doctor__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .doctor__image { height: 480px; }
    .doctor--team .doctor__image { height: 620px; }
    .doctor { padding: 60px 32px; }

    .team__grid {
        /* 3 + 2 at tablet. With five cards a 2-column track leaves a single
           card alone on a third row; three across fills the first row and
           pairs the rest. */
        grid-template-columns: repeat(3, 1fr);
        max-width: 720px;
    }

    .new-patients { padding: 60px 0 64px; }

    .new-patients__content-inner {
        max-width: 100%;
    }

    .new-patients__doctor-photo {
        display: none !important;
    }

    .new-patients__card {
        display: flex;
        flex-direction: column;
    }

    .new-patients__card-border.notch-br-cta,
    .new-patients__card-fill.notch-br-cta {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .new-patients__emergency {
        position: relative;
        right: auto; bottom: auto;
        width: auto;
        margin: 0;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        order: 10;
        text-align: center;
    }

    .new-patients__agpal {
        display: none;
    }

    .new-patients__content h2 {
        font-size: clamp(24px, 5vw, 32px);
    }

    .new-patients__content {
        padding: 40px;
        text-align: center;
    }

    .new-patients__content-inner {
        max-width: 540px;
        margin: 0 auto;
        align-items: center;
    }

    .new-patients__ctas {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .new-patients__ctas .btn {
        text-align: center;
        justify-content: center;
        width: 100%;
        max-width: 320px;
    }

    .steps { padding: 40px 32px 24px; }

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

    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footer__brand .booking-button {
        text-align: left;
    }

    .site-footer { padding: 56px 32px 28px; }
}

/* ----------------------------------------------------------------
   Responsive — Mobile nav overlay
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(61, 40, 18, .6);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .mobile-nav-overlay.is-open {
        display: block;
        opacity: 1;
    }

    .mobile-nav {
        position: fixed;
        top: 0; right: 0;
        width: min(340px, 85vw);
        height: 100%;
        background: var(--color-cream);
        z-index: 91;
        padding: 24px;
        transform: translateX(100%);
        transition: transform .3s var(--ease);
        overflow-y: auto;
    }

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

    .mobile-nav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px; height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-dark);
        margin-left: auto;
    }

    .mobile-nav__links {
        list-style: none;
        padding: 0;
        margin: 24px 0 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-nav__links a {
        display: block;
        padding: 14px 16px;
        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--color-dark);
        border-radius: var(--radius-sm);
        transition: background .15s ease;
    }

    .mobile-nav__links a:hover,
    .mobile-nav__links a.active {
        background: var(--color-light-gold);
    }

    .mobile-nav__cta {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid rgba(215, 135, 0, .3);
    }

    .mobile-nav__cta .booking-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: var(--color-amber);
        color: var(--color-cream);
        font-family: var(--font-heading);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .05em;
        padding: 16px 30px;
        border-radius: var(--radius-pill);
        text-transform: uppercase;
    }
}

/* ----------------------------------------------------------------
   Responsive — Mobile (≤ 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .top-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }

    .hero-wrapper { padding: 12px 12px 0; }
    .hero { border-radius: var(--radius); }

    .hero__content { padding: 120px 20px 40px; }
    .hero__title { font-size: clamp(32px, 8vw, 42px); }
    .hero__subtitle { font-size: 18px; }
    .hero__desc { font-size: 16px; }

    .hero__hours { min-width: 0; }
    .hero__info-cards { grid-template-columns: 1fr; }

    .features__grid { grid-template-columns: 1fr; gap: 32px; }
    .features__item { padding: 0 !important; border-right: none !important; }
    .features { padding: 48px 24px; }

    .about { padding: 20px 20px 48px; }
    .about__grid { gap: 32px; }
    .about__image { height: 300px; }
    .about__stats { padding: 20px 18px; }
    .about__stat { padding: 0 16px; }
    .about__stats--enclosed .about__stat { padding: 0 16px; }

    .services-section { padding: 0 16px; }
    .services-section__inner { padding: 48px 24px 56px; }
    .services__grid { grid-template-columns: 1fr; gap: 36px; }

    .doctor { padding: 48px 20px; }
    .doctor__interests-grid { grid-template-columns: repeat(2, auto); }
    .doctor__grid { gap: 24px; }
    .doctor__image-wrap { display: flex; flex-direction: column; }
    .doctor__content { order: -1; }
    .doctor__image { height: 380px; }
    .doctor__quote {
        position: static;
        width: auto;
        background: none;
        border-radius: 0;
        padding: 0;
        margin-top: 16px;
    }
    .doctor__quote::before,
    .doctor__quote::after { display: none; }
    .doctor__quote-inner {
        border-radius: var(--radius-sm);
    }
    /* The card keeps its own padding and radius here - it is not the notched
       overlay, so it has no cutout geometry to unwind. */
    .doctor__quote--card { margin-top: 22px; }
    .doctor__quote--card .doctor__quote-inner {
        border-radius: var(--radius);
        padding: 20px 18px 22px;
    }
    .doctor--team .doctor__image { height: 420px; }
    .team { padding: 0 20px; }

    .team__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* The corner badge is a fixed 88x62, so on a ~155px mobile tile it covers
       the lower right outright and would sit on top of a centred glyph. Shift
       the initial into the clear upper-left area at this width only. */
    .team-card__initial {
        top: 38%;
        left: 40%;
    }
    .team__header { flex-direction: column; align-items: flex-start; }

    .new-patients__inner { padding: 0 16px; }
    .new-patients__content { padding: 32px 20px; }
    .new-patients__agpal { width: 160px; }

    .steps { padding: 32px 20px 20px; }
    .steps__grid { grid-template-columns: 1fr; }

    .step-card__label { width: auto; max-width: 272px; }

    .footer__grid { grid-template-columns: 1fr; gap: 36px; }
    .site-footer { padding: 48px 24px 24px; }
    .footer__bottom { flex-direction: column; gap: 16px; }
}

/* ----------------------------------------------------------------
   Responsive — Small mobile (≤ 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .hero__logo { height: 30px; }
    .hero__ctas { flex-direction: column; align-items: flex-start; }
    .hero__ctas .btn { text-align: left; }
    .new-patients__ctas { flex-direction: column; }
    .new-patients__ctas .btn { text-align: center; justify-content: center; }
}

/* ----------------------------------------------------------------
   Doctor avatar fallback
   ---------------------------------------------------------------- */
.doctor-avatar {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--color-amber), var(--color-gold));
    display: flex;
    align-items: center;
    justify-content: center;
}

.doctor-avatar::after {
    content: "";
    position: absolute;
    width: 40%;
    height: 40%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.doctor-avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mf-logo-light { display: none; }
.mf-logo-dark { display: inline; }
.footer-light .mf-logo-light { display: inline; }
.footer-light .mf-logo-dark { display: none; }


/* ----------------------------------------------------------------
   About page — Hero simple (subpage)
   ---------------------------------------------------------------- */
.hero-simple {
    padding: 24px 28px 0;
}

.hero-simple__container {
    position: relative;
    display: flow-root;
    background: var(--color-light-gold);
    border-radius: var(--radius);
    /* See .hero above - no overflow: hidden, to avoid the 1px corner seam.
       The placeholder image rounds itself; the cream panels round their own
       outer corners. */
}

.hero-simple__top {
    position: absolute;
    left: -1px; top: -1px; right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    z-index: 2;
}

.hero-simple__logo-nav {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.6vw, 28px);
    min-width: 0;
    flex-shrink: 3;
    position: relative;
    background: var(--color-cream);
    border-radius: var(--radius) 0 24px 0;
    padding: 18px clamp(14px, 1.8vw, 26px) 28px clamp(12px, 1.4vw, 20px);
}

.hero-simple__logo-nav::before {
    content: '';
    position: absolute;
    right: -24px; top: 0;
    width: 24px; height: 24px;
    background: radial-gradient(circle 24.5px at 100% 100%, transparent 23.5px, var(--color-cream) 24.5px);
}

.hero-simple__logo-nav::after {
    content: '';
    position: absolute;
    left: 0; bottom: -24px;
    width: 24px; height: 24px;
    background: radial-gradient(circle 24.5px at 100% 100%, transparent 23.5px, var(--color-cream) 24.5px);
}

.hero-simple__logo {
    height: clamp(34px, 3.1vw, 46px);
    width: auto;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
}

.hero-simple__links {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.8vw, 20px);
    font-family: var(--font-heading);
    font-size: clamp(12px, 1.05vw, 14.5px);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-simple__links a {
    position: relative;
    color: var(--color-dark-alpha-72);
    padding: 6px clamp(7px, 0.85vw, 12px);
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    background: transparent;
}

.hero-simple__links a:hover,
.hero-simple__links a.active,
.hero-simple__links a[aria-current="page"] {
    background: var(--color-light-gold);
    color: var(--color-dark);
}

.hero-simple__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    flex-shrink: 0;
}

.hero-simple__phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    color: var(--color-dark);
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--color-cream);
    transition: background .15s ease;
    white-space: nowrap;
}

.hero-simple__phone:hover {
    background: var(--color-tan);
}

.hero-simple__book-btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(11px, 0.95vw, 13px);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-cream);
    background: var(--color-amber);
    padding: 11px 22px;
    border-radius: 999px;
    transition: background .15s ease;
    white-space: nowrap;
}

.hero-simple__book-btn:hover {
    background: var(--color-gold);
    color: var(--color-cream);
}


.hero-simple__container--has-image {
    min-height: 520px;
}

.hero-simple__placeholder {
    position: absolute;
    inset: 0;
    background: var(--color-tan);
    border-radius: var(--radius);
    overflow: hidden;
    z-index: 0;
}

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

.hero-simple__container--has-image .hero-simple__inner {
    position: relative;
    z-index: 1;
}

.hero-simple__inner {
    padding: 100px 64px 68px;
    max-width: 1500px;
    margin: 0 auto;
}

.hero-simple h1 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -.028em;
    margin: 18px 0 0;
}

.hero-simple h1 span { color: inherit; }

.hero-simple__inner > p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
    margin: 16px 0 0;
    max-width: 560px;
}

.hero-simple__hours {
    position: absolute;
    right: -1px; bottom: -1px;
    background: var(--color-cream);
    border-radius: 24px 0 var(--radius) 0;
    padding: 22px 30px 24px 28px;
    min-width: 344px;
    z-index: 2;
}

.hero-simple__hours::before {
    content: '';
    position: absolute;
    left: -24px; bottom: 0;
    width: 24px; height: 24px;
    background: radial-gradient(circle 24.5px at 0% 0%, transparent 23.5px, var(--color-cream) 24.5px);
}

.hero-simple__hours::after {
    content: '';
    position: absolute;
    right: 0; top: -24px;
    width: 24px; height: 24px;
    background: radial-gradient(circle 24.5px at 0% 0%, transparent 23.5px, var(--color-cream) 24.5px);
}

/* ----------------------------------------------------------------
   About page — Practice Values
   ---------------------------------------------------------------- */
.practice-values {
    padding: 80px 40px 80px;
}

.practice-values__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.practice-values__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 48px;
}

.practice-values__header h2 {
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
    margin: 16px 0 0;
}

.practice-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.practice-values__item {
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.practice-values__number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-amber);
    color: var(--color-cream);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    border-radius: 10px;
    margin-bottom: 20px;
}

.practice-values__item h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}

.practice-values__item p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
    margin: 0;
}

/* ----------------------------------------------------------------
   About page — Practice story
   ---------------------------------------------------------------- */
.about-page-story {
    padding: 80px 40px 88px;
}

.about-page-story__grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
    align-items: center;
}

.about-page-story__image-wrap {
    position: relative;
}

.about-page-story__image {
    position: relative;
    height: 480px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.about-page-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-page-story__since {
    position: absolute;
    left: 0; bottom: 0;
    width: 150px;
    height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
    text-align: center;
    background: var(--color-cream);
    border-radius: 0 var(--radius-sm) 0 0;
}

.about-page-story__since-year {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--color-dark);
    line-height: 1;
}

.about-page-story__since-label {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-amber);
    margin-top: 7px;
}

.about-page-story__image-inner {
    width: 100%;
    height: 100%;
    background: var(--color-tan);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.about-page-story__content h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.12;
    margin: 0 0 22px;
}

.about-page-story__lead {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-dark);
    margin-bottom: 16px;
}

.about-page-story__content > p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
}

.about-page-story__content > p + p {
    margin-top: 14px;
}

.about-page-story .about__stats {
    background: transparent;
    padding: 26px 0;
}

.about__stats--enclosed {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 0;
}

.about__stats--enclosed .about__stat {
    border-left: none;
    border-right: none;
    padding: 0 24px;
}

.about__stats--enclosed .about__stat + .about__stat {
    border-left: 1px solid rgba(215, 135, 0, .55);
}

/* ----------------------------------------------------------------
   Rich text — descendant styles for Rails HTML merge tags
   ---------------------------------------------------------------- */
.rich-text p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
}

.rich-text p + p {
    margin-top: 14px;
}

.rich-text strong {
    font-weight: 700;
    color: var(--color-dark);
}

.rich-text ul,
.rich-text ol {
    padding-left: 20px;
    margin: 14px 0 0;
}

.rich-text li {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
}

.rich-text li + li {
    margin-top: 6px;
}

.rich-text a {
    color: var(--color-amber);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rich-text a:hover {
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   About page — Appointments section
   ---------------------------------------------------------------- */
.about-page-appts {
    padding: 0 28px;
}

.about-page-appts__inner {
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 80px 64px 84px;
}

.about-page-appts__wrap {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: start;
}

.about-page-appts__header h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.12;
    margin: 18px 0 0;
}

.about-page-appts__header h2 span { color: inherit; }

.about-page-appts__cta {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
    align-items: center;
}

.about-page-appts__cta .booking-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background: var(--color-amber);
    color: var(--color-cream);
    padding: 16px 30px;
    transition: background .15s ease, color .15s ease;
    text-transform: uppercase;
}

.about-page-appts__cta .booking-button:hover {
    background: var(--color-gold);
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   About page — Fees & billing
   ---------------------------------------------------------------- */
.about-page-fees {
    padding: 80px 40px 88px;
}

.about-page-fees__grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: start;
}

.about-page-fees__header h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.12;
    margin: 18px 0 0;
}

.about-page-fees__header h2 span { color: inherit; }

.about-page-fees__badge {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
}

.about-page-fees__icon {
    flex-shrink: 0;
    color: var(--color-amber);
}

.about-page-fees__badge span {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   About page — Accreditation
   ---------------------------------------------------------------- */
.about-page-accred {
    padding: 0 28px 80px;
}

.about-page-accred__inner {
    max-width: 1300px;
    margin: 0 auto;
    background: var(--color-cream);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius);
    padding: 48px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.about-page-accred__content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.about-page-accred__icon {
    flex-shrink: 0;
    color: var(--color-gold);
    margin-top: 4px;
}

.about-page-accred__content h2 {
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.about-page-accred__content p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-dark-alpha-78);
    margin: 10px 0 0;
    max-width: 560px;
}

.about-page-accred__badge {
    flex-shrink: 0;
}

.about-page-accred__badge .accreditation-badge {
    height: 80px;
    width: auto;
}

/* ----------------------------------------------------------------
   About page — How Standards Stay High
   ---------------------------------------------------------------- */
.about-page-standards {
    margin: 0 28px 80px;
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 72px 64px;
}

.about-page-standards__inner {
    max-width: 1500px;
    margin: 0 auto;
}

.about-page-standards__top {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 40px;
    align-items: stretch;
}

.about-page-standards__image {
    position: relative;
    border-radius: var(--radius-sm);
}

.about-page-standards__image-inner {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-tan);
}

.about-page-standards__image-inner img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.about-page-standards__image-inner.notch-bl-badge {
    mask-size: 340px 240px, 100% 100%;
    -webkit-mask-size: 340px 240px, 100% 100%;
}

.about-page-standards__notch-content {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 310px;
    padding: 20px 20px;
}

.about-page-standards__notch-content--left {
    right: auto;
    left: 0;
}

.about-page-standards__notch-content h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.about-page-standards__notch-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
    margin: 8px 0 0;
}

.about-page-standards__lead {
    font-weight: 500;
}

.about-page-standards__header h2 {
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin: 18px 0 0;
}

.about-page-standards__header > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-dark-alpha-78);
    margin: 16px 0 0;
}

.about-page-standards__header > p:first-of-type {
    margin-top: 24px;
}

.about-page-standards__header > .btn {
    margin-top: 28px;
}

.about-page-standards__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 36px;
    align-items: start;
}

.about-page-standards__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-page-standards__item--mobile-only {
    display: none;
}

.about-page-standards__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-amber);
    border-radius: 10px;
    color: var(--color-cream);
    margin-bottom: 18px;
}

.about-page-standards__item h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.about-page-standards__item p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
    margin: 8px 0 0;
}

/* ----------------------------------------------------------------
   About page — Booking CTA strip
   ---------------------------------------------------------------- */
.about-page-cta {
    padding: 0 28px 96px;
}

.about-page-cta__inner {
    max-width: 1504px;
    margin: 0 auto;
}

.about-page-cta__card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.about-page-cta__card-border {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: var(--color-gold);
}

.about-page-cta__card-border.notch-br-cta {
    z-index: 0;
}

.about-page-cta__card-fill {
    position: absolute;
    inset: 2px;
    border-radius: 14px;
    background: var(--color-cream);
}

.about-page-cta__card-fill.notch-br-cta {
    z-index: 0;
}

.about-page-cta__content {
    position: relative;
    z-index: 1;
    padding: 64px;
    max-width: min(920px, calc(100% - 380px));
}

.about-page-cta__content h2 {
    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 20px 0 0;
    text-wrap: pretty;
}

.about-page-cta__content > p {
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    margin: 18px 0 0;
    text-wrap: pretty;
}

.about-page-cta__buttons {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.about-page-cta__buttons .btn {
    max-width: 100%;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------
   About page — Responsive (Tablet ≤ 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero-simple { padding: 20px 20px 0; }

    .practice-values { padding: 56px 32px 0; }
    .practice-values__grid { grid-template-columns: 1fr; }

    .about-page-story { padding: 56px 32px 64px; }
    .about-page-story__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-page-story__image { height: 380px; }

    .about-page-appts__inner { padding: 56px 36px 60px; }
    .about-page-appts__wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .about-page-fees { padding: 56px 32px 64px; }
    .about-page-fees__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .about-page-accred__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 36px;
    }

    .about-page-standards { margin: 0 20px 64px; padding: 52px 36px; }
    .about-page-standards__top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .about-page-standards__image-inner img { min-height: 240px; }

    .about-page-cta__content { padding: 48px 36px; max-width: 100%; }
    .about-page-cta__card-border.notch-br-cta,
    .about-page-cta__card-fill.notch-br-cta {
        mask-image: none;
        -webkit-mask-image: none;
    }
    .about-page-cta__buttons { flex-direction: column; }
    .about-page-cta__buttons .btn { text-align: center; justify-content: center; }
}

/* ----------------------------------------------------------------
   About page — Responsive (Mobile ≤ 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-simple { padding: 16px 16px 0; }
    .hero-simple__inner { padding: 44px 24px 40px; }

    .about-page-story { padding: 40px 20px 48px; }
    .about-page-story__image { height: 280px; }

    .about-page-appts { padding: 0 16px; }
    .about-page-appts__inner { padding: 44px 24px 48px; }

    .about-page-fees { padding: 40px 20px 48px; }

    .about-page-accred { padding: 0 16px 56px; }
    .about-page-accred__inner {
        padding: 32px 24px;
        gap: 28px;
    }
    .about-page-accred__content {
        flex-direction: column;
    }

    .about-page-standards { margin: 0 16px 56px; padding: 44px 24px; }
    .about-page-standards__top { gap: 24px; }
    .about-page-standards__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
    .about-page-standards__image-inner.notch-bl-badge {
        mask-image: none;
        -webkit-mask-image: none;
    }
    .about-page-standards__notch-content {
        display: none;
    }
    .about-page-standards__item--mobile-only {
        display: flex;
    }

    .about-page-cta { padding: 0 16px 64px; }
    .about-page-cta__content { padding: 36px 24px; max-width: 100%; }
}

/* ----------------------------------------------------------------
   About page — Responsive (Small mobile ≤ 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .about-page-appts__cta { flex-direction: column; }
    .about-page-appts__cta .btn,
    .about-page-appts__cta .booking-button { text-align: center; justify-content: center; width: 100%; }

    .about-page-cta__buttons .btn { text-align: center; justify-content: center; }
}


/* ================================================================
   Contact page
   ================================================================ */

/* ----------------------------------------------------------------
   Contact — Main grid (form + details)
   ---------------------------------------------------------------- */
.contact-main {
    padding: 80px 40px 88px;
}

.contact-main__grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 72px;
    align-items: start;
}

/* ----------------------------------------------------------------
   Contact — Form column
   ---------------------------------------------------------------- */
.contact-main__form-col h2 {
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.15;
}

.contact-main__form-intro {
    font-size: 17px;
    line-height: 1.68;
    color: var(--color-dark-alpha-78);
    margin: 16px 0 0;
    max-width: 520px;
}

.contact-field {
    margin-top: 22px;
}

.contact-field label {
    display: block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--color-dark);
    margin-bottom: 7px;
}

.contact-field label span {
    color: var(--color-amber);
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    background: var(--color-cream);
    border: 1px solid var(--color-tan);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--color-amber);
    box-shadow: 0 0 0 3px rgba(164, 99, 15, .12);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: var(--color-dark-alpha-6);
}

.contact-field textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-submit {
    margin-top: 28px;
    max-width: 100%;
    box-sizing: border-box;
}

[data-mf-feedback] {
    margin-top: 18px;
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
}

[data-mf-feedback][data-status="success"] {
    background: rgba(22, 163, 74, .08);
    color: rgba(6, 95, 70, 1);
    border: 1px solid rgba(22, 163, 74, .25);
}

[data-mf-feedback][data-status="error"] {
    background: rgba(239, 68, 68, .06);
    color: rgba(153, 27, 27, 1);
    border: 1px solid rgba(239, 68, 68, .2);
}

/* ----------------------------------------------------------------
   Contact — Details column
   ---------------------------------------------------------------- */
.contact-details-card {
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 40px 36px;
}

.contact-details-card__heading {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.contact-details-list {
    margin: 28px 0 0;
    padding: 0;
}

.contact-details-list__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 0;
    border-top: 1px solid rgba(164, 99, 15, .18);
}

.contact-details-list__item:last-child {
    padding-bottom: 0;
}

.contact-details-list__item dt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-amber);
    text-transform: uppercase;
}

.contact-details-list__item dt svg {
    flex-shrink: 0;
    color: var(--color-amber);
}

.contact-details-list__item dd {
    margin: 0;
    padding-left: 30px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-dark);
}

.contact-details-list__item dd address {
    font-style: normal;
}

.contact-details-list__item dd a {
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.contact-details-list__item dd a:hover {
    color: var(--color-amber);
}

/* ----------------------------------------------------------------
   Contact — Hours card
   ---------------------------------------------------------------- */
.contact-hours-card {
    margin-top: 24px;
    background: var(--color-cream);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius);
    padding: 32px 36px;
}

.contact-hours-card__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.contact-hours-card__heading svg {
    flex-shrink: 0;
    color: var(--color-amber);
}

.contact-hours-card__table {
    margin-top: 18px;
}

.contact-hours-card .hours-table {
    width: 100%;
    border-collapse: collapse;
}

.contact-hours-card .hours-table td {
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(164, 99, 15, .12);
    vertical-align: top;
}

.contact-hours-card .hours-table td:first-child {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-dark);
    white-space: nowrap;
    padding-right: 24px;
}

.contact-hours-card .hours-table td:last-child {
    color: var(--color-dark-alpha-78);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.contact-hours-card .hours-table tr:last-child td {
    border-bottom: none;
}

.contact-hours-card__note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-dark-alpha-62);
    font-style: italic;
    margin: 14px 0 0;
}

/* ----------------------------------------------------------------
   Contact — Map section
   ---------------------------------------------------------------- */
.contact-map {
    padding: 0 28px;
}

.contact-map__inner {
    max-width: 1504px;
    margin: 0 auto;
}

.contact-map__embed {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-tan);
}

.contact-map__embed iframe {
    display: block;
    width: 100%;
    height: 400px;
}

/* ----------------------------------------------------------------
   Contact — Booking CTA strip
   ---------------------------------------------------------------- */
.contact-cta {
    margin: 0 28px;
    padding: 80px 64px 96px;
    background: var(--color-light-gold);
    border-radius: var(--radius);
}

.contact-cta__inner {
    max-width: 1500px;
    margin: 0 auto;
    text-align: center;
}

.contact-cta__content h2 {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 18px 0 0;
}

.contact-cta__content > p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-78);
    margin: 14px auto 0;
    max-width: 520px;
}

.contact-cta__buttons {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.contact-cta__buttons .btn {
    max-width: 100%;
    box-sizing: border-box;
}

.contact-cta__buttons .booking-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background: transparent;
    color: var(--color-dark);
    border: 1px solid rgba(61, 40, 18, .3);
    padding: 16px 28px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    text-transform: uppercase;
}

.contact-cta__buttons .booking-button:hover {
    background: var(--color-gold);
    color: var(--color-dark);
    border-color: var(--color-gold);
}

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

/* ----------------------------------------------------------------
   Contact page — Responsive (Tablet <= 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .contact-main { padding: 56px 32px 64px; }
    .contact-main__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .contact-info { padding: 0 20px 64px; }
    .contact-info__inner { grid-template-columns: 1fr; }
    .contact-info__map { min-height: 300px; }

    .contact-extra { padding: 0 20px 64px; }
    .contact-extra__grid { grid-template-columns: 1fr; }
    .contact-extra__image { display: none; }
    .faq-accordion { grid-template-columns: 1fr; }

    .contact-cta { margin: 0 20px; padding: 56px 36px 72px; }
    .contact-cta__inner { padding: 48px 36px; }
    .contact-cta__buttons { flex-direction: column; }
    .contact-cta__buttons .btn,
    .contact-cta__buttons .booking-button { text-align: center; justify-content: center; width: 100%; max-width: 320px; }
}

/* ----------------------------------------------------------------
   Contact page — Responsive (Mobile <= 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero__contact-form { padding: 18px 18px 22px; }
    .contact-submit-row { flex-direction: column; align-items: flex-start; }

    .contact-main { padding: 40px 20px 48px; }
    .contact-main__grid { gap: 40px; }

    .contact-info { padding: 80px 16px 56px; }
    .contact-info-card__body { padding: 20px 24px; }
    .contact-info-card__icon { width: 48px; height: 38px; }
    .notch-tr-sm {
        mask-size: 72px 62px, 100% 100%;
        -webkit-mask-size: 72px 62px, 100% 100%;
    }
    .contact-info__map { min-height: 250px; }

    .contact-extra { padding: 0 16px 56px; }
    .contact-extra__after-hours-inner { padding: 28px 24px; }

    .contact-cta { margin: 0 16px; padding: 40px 24px 64px; }
    .contact-cta__inner { padding: 36px 24px; }
}

/* ----------------------------------------------------------------
   Contact page — Responsive (Small mobile <= 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .contact-cta__buttons { flex-direction: column; align-items: stretch; }
    .contact-cta__buttons .btn,
    .contact-cta__buttons .booking-button { max-width: 100%; }
    .contact-submit { width: 100%; justify-content: center; }
}
/* ================================================================
   Services page
   ================================================================ */

/* ----------------------------------------------------------------
   Services — First Visit
   ---------------------------------------------------------------- */
.first-visit {
    padding: 80px 40px 0;
}

.first-visit__inner {
    max-width: 1350px;
    margin: 0 auto;
}

.first-visit__inner > .section-badge {
    margin-bottom: 16px;
}

.first-visit__inner > h2 {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 40px;
}

.first-visit__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.first-visit__step {
    background: transparent;
    border: none;
    border-radius: var(--radius);
    padding: 32px 28px;
    border-right: 1px solid rgba(215, 135, 0, .3);
}

.first-visit__step:last-child {
    border-right: none;
}

.first-visit__number {
    background: transparent;
    color: var(--color-amber);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
}

.first-visit__step h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}

.first-visit__step p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
    margin: 0;
}

/* ----------------------------------------------------------------
   Services — Content section
   ---------------------------------------------------------------- */
.services-page-content {
    padding: 80px 40px 88px;
    max-width: 1500px;
    margin: 0 auto;
}

.services-page-content__wrap {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: start;
}

.services-page-content__header h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.12;
    margin: 18px 0 0;
}

.services-page-content__header h2 span { color: inherit; }

.services-page-content__intro {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    margin: 18px 0 0;
    max-width: 480px;
}

/* ----------------------------------------------------------------
   Services — Category cards
   ---------------------------------------------------------------- */
.services-page-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.flip-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.flip-card__inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flip-card__front,
.flip-card__back {
    border-radius: var(--radius);
    overflow: hidden;
}

.flip-card__front {
    background: var(--color-cream);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flip-card__back {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 100%;
    transform: translateY(100%);
    background: var(--color-light-gold);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: transform 1.1s var(--ease);
    border-radius: var(--radius);
}

.flip-card.is-flipped .flip-card__back {
    transform: translateY(0);
}

@media (hover: hover) {
    .flip-card:hover .flip-card__back {
        transform: translateY(0);
    }
}

.flip-card__text {
    padding: 28px 36px 36px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.flip-card__front .flip-card__text {
    background: var(--color-light-gold);
}

.services-page-category__number {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: .04em;
    margin-bottom: 16px;
}

.flip-card__text h3 {
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.flip-card__list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    grid-auto-rows: min-content;
}

.flip-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-dark-alpha-82);
}

.flip-card__list li::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm5 7.4-6 6.4a1 1 0 0 1-1.5 0L6.8 13l1.5-1.4 2 2.1 5.1-5.5L17 9.4Z' fill='%23a4630f'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.flip-card__list li strong {
    color: var(--color-dark);
}

.flip-card__list--detailed {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
}

.flip-card__list--detailed li {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 2px 10px;
}

.flip-card__list--detailed li > strong,
.flip-card__list--detailed li > span {
    grid-column: 2;
}

.flip-card__list--detailed li > span {
    display: block;
    color: var(--color-dark-alpha-72);
    font-size: 13.5px;
    margin-top: 2px;
}

.flip-card__book {
    margin-top: auto;
    align-self: flex-start;
}

.flip-card__trigger {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-amber);
    text-transform: uppercase;
    transition: color .15s ease;
}

.flip-card__trigger:hover {
    color: var(--color-gold);
}

.services-page-category__image-wrap {
    position: relative;
}

.services-page-category__image-inner {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
}

.services-page-category__icon {
    width: 60px;
    height: 48px;
}

.services-page-category__image-inner.notch-tr,
.flip-card__back.notch-tr {
    mask-size: 88px 76px, 100% 100%;
    -webkit-mask-size: 88px 76px, 100% 100%;
}

.services-page-category__image-inner img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    display: block;
}

.services-page-category__image-placeholder {
    width: 100%;
    height: 290px;
    background: var(--color-tan);
}

.services-page-category__badge {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream);
    padding: 6px;
}

.services-page-category__badge img {
    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------------
   Services — Allied health (full section)
   ---------------------------------------------------------------- */
.services-page-allied-full {
    margin: 0 28px 80px;
    padding: 72px 64px;
}

.services-page-allied-full__inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    /* stretch, not start: the image column has no intrinsic height cap, so
       with align-items:start it ran past the bottom of the content column
       and its lower corners fell outside the section - rendering square
       because the parent's rounded clip never reached them. */
    align-items: stretch;
}

.services-page-allied-full__right > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-dark-alpha-78);
    margin: 0 0 28px;
}

.services-page-allied-full__left {
    /* min-height:0 lets this grid item shrink below the photo's intrinsic
       height, so the row is sized by the content column and the photo is
       cropped to match - rather than the photo forcing the row taller. */
    min-height: 0;
    position: relative;
}

.services-page-allied-full__image {
    /* Absolutely filling the column means the photo never contributes its
       own height to the grid row - the content column on the right sets the
       height and object-fit:cover crops the photo to it. */
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.services-page-allied-full__image-inner {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    /* The notch mask's second layer is a plain rectangle, so it overrides
       border-radius and leaves every corner the notch doesn't scoop square.
       clip-path applies to the same element and composes with the mask,
       so it restores the radius the mask flattened. */
    clip-path: inset(0 round var(--radius));
    overflow: hidden;
}

.services-page-allied-full__image-inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.services-page-allied-full__image-placeholder {
    width: 100%;
    height: 380px;
    background: var(--color-tan);
}

.services-page-allied-full__overlay {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    padding: 20px 24px;
    background: var(--color-cream);
    /* top-left  : sits in the image's own corner, follows its radius
       top-right  : square, the ::before draws the concave turn there
       bottom-right: convex - this is the corner the photo wraps around
       bottom-left: square, the ::after draws the concave turn there
       A convex radius on the two concave corners pinches them into a
       spike, which is why they are 0 rather than var(--radius). */
    border-radius: var(--radius) 0 var(--radius) 0;
}

/* Concave corners where the panel meets the photo. The .notch-tl-badge mask
   is meant to scoop these, but its 152x138 scoop is smaller than the panel
   (up to 238x187), so the panel covers the curve entirely and the photo
   meets it at a hard 90 degrees. Two pseudo-elements in the panel's own
   colour draw the inverted radius instead, and they track the panel's size
   automatically rather than needing a mask box kept in sync. */
.services-page-allied-full__overlay::before,
.services-page-allied-full__overlay::after {
    content: "";
    position: absolute;
    width: var(--radius);
    height: var(--radius);
    background: var(--color-cream);
    pointer-events: none;
    z-index: 1;
}

/* Both sit just inside the panel: the parent .._image has overflow:hidden
   and a clip-path, so anything placed outside the panel's own box is
   clipped away before it paints. */

/* concave turn at the panel's top-right, curving up into the photo */
.services-page-allied-full__overlay::before {
    top: 0;
    right: calc(var(--radius) * -1);
    -webkit-mask-image: radial-gradient(circle var(--radius) at 100% 100%, transparent 0 var(--radius), #000 calc(var(--radius) + .5px));
    mask-image: radial-gradient(circle var(--radius) at 100% 100%, transparent 0 var(--radius), #000 calc(var(--radius) + .5px));
}

/* concave turn at the panel's bottom-left, curving down into the photo */
.services-page-allied-full__overlay::after {
    left: 0;
    bottom: calc(var(--radius) * -1);
    -webkit-mask-image: radial-gradient(circle var(--radius) at 100% 100%, transparent 0 var(--radius), #000 calc(var(--radius) + .5px));
    mask-image: radial-gradient(circle var(--radius) at 100% 100%, transparent 0 var(--radius), #000 calc(var(--radius) + .5px));
}

.services-page-allied-full__overlay h2 {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin: 10px 0 0;
}

.services-page-allied-full__overlay h2 span { color: inherit; }

.services-page-allied-full__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* The image column matches THIS column's height, not the reverse - see
       .services-page-allied-full__image. */
}

.allied-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.allied-card__image {
    position: relative;
    height: 200px;
    border-radius: var(--radius-sm);
}

.allied-card__image-inner {
    width: 100%;
    height: 100%;
    background: var(--color-tan);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.allied-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-tan);
}

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

.allied-card__icon {
    width: 56px;
    height: 46px;
}

.allied-card__image-inner.notch-tl {
    mask-size: 84px 74px, 100% 100%;
    -webkit-mask-size: 84px 74px, 100% 100%;
}

.allied-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 12px 0 4px;
}

.allied-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
    margin: 0;
}

/* ----------------------------------------------------------------
   Services — Booking CTA strip
   ---------------------------------------------------------------- */
.services-page-cta {
    padding: 80px 28px 96px;
}

.services-page-cta__inner {
    max-width: 1504px;
    margin: 0 auto;
}

.services-page-cta__card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.services-page-cta__card-border {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: var(--color-gold);
}

.services-page-cta__card-border.notch-br-cta {
    z-index: 0;
}

.services-page-cta__card-fill {
    position: absolute;
    inset: 2px;
    border-radius: 14px;
    background: var(--color-cream);
}

.services-page-cta__card-fill.notch-br-cta {
    z-index: 0;
}

.services-page-cta__content {
    position: relative;
    z-index: 1;
    padding: 64px;
    max-width: min(920px, calc(100% - 380px));
}

.services-page-cta__content h2 {
    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 20px 0 0;
    text-wrap: pretty;
}

.services-page-cta__content > p {
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    margin: 18px 0 0;
    text-wrap: pretty;
}

.services-page-cta__buttons {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.services-page-cta__buttons .btn {
    max-width: 100%;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Services page — Responsive (Tablet <= 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .first-visit { padding: 56px 32px 0; }
    .first-visit__steps { grid-template-columns: 1fr 1fr; }
    .first-visit__step:nth-child(even) { border-right: none; }

    .services-page-content { padding: 56px 32px 64px; }
    .services-page-content__wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .services-page-categories { gap: 20px; }
    .flip-card__text { padding: 24px 28px 36px; }

    .services-page-allied-full { margin: 0 20px 64px; padding: 52px 36px; }
    .services-page-allied-full__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .services-page-allied-full__right { text-align: left; }
    .services-page-allied-full__overlay { text-align: left; }
    /* Stacked: back to normal flow with an explicit height, since there is
       no neighbouring column to take the height from. */
    .services-page-allied-full__left { min-height: 0; }
    .services-page-allied-full__image { position: relative; inset: auto; height: 340px; }
    .services-page-allied-full__image-placeholder { min-height: 340px; height: 340px; }
    .services-page-allied-full__image-inner img { height: 340px; }


    .services-page-cta { padding: 56px 20px 72px; }
    .services-page-cta__content { padding: 48px 36px; max-width: 100%; }
    .services-page-cta__card-border.notch-br-cta,
    .services-page-cta__card-fill.notch-br-cta {
        mask-image: none;
        -webkit-mask-image: none;
    }
    .services-page-cta__buttons { flex-direction: column; }
    .services-page-cta__buttons .btn { text-align: center; justify-content: center; }
}

/* ----------------------------------------------------------------
   Services page — Responsive (Mobile <= 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .first-visit { padding: 40px 20px 0; }
    .first-visit__steps { grid-template-columns: 1fr; }
    .first-visit__step { border-right: none !important; }

    .services-page-content { padding: 40px 20px 48px; }
    .services-page-categories { grid-template-columns: 1fr; gap: 16px; }
    .flip-card__text { padding: 20px 24px 32px; }

    .services-page-allied-full { margin: 0 16px 56px; padding: 44px 24px; }
    .services-page-allied-full__inner { gap: 24px; }
    .services-page-allied-full__image-placeholder { height: 320px; }
    .services-page-allied-full__image-inner img { height: 320px; }
    .services-page-allied-full__right { text-align: left; }
    .services-page-allied-full__right p { text-align: left; }
    .services-page-allied-full__overlay { text-align: left; }
    .allied-cards-grid { grid-template-columns: 1fr; }
    .allied-card { text-align: left; }
    .allied-card__image { height: 220px; }

    .services-page-cta { padding: 40px 16px 64px; }
    .services-page-cta__content { padding: 36px 24px; max-width: 100%; }
}

/* ----------------------------------------------------------------
   Services page — Responsive (Small mobile <= 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .services-page-cta__buttons .btn { text-align: center; justify-content: center; }
}
/* ================================================================
   Doctors page
   ================================================================ */

/* ----------------------------------------------------------------
   Doctors page — Intro section
   ---------------------------------------------------------------- */
.doctors-intro {
    padding: 80px 40px 0;
}

.doctors-intro__grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.doctors-intro__content h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.12;
    margin: 18px 0 0;
}

.doctors-intro__content h2 span { color: inherit; }

.doctors-intro__text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    margin: 22px 0 0;
    max-width: 520px;
}

.doctors-intro__highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
}

.doctors-intro__highlight {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
}

.doctors-intro__highlight-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-amber);
}

.doctors-intro__highlight span:last-child {
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}

.doctors-intro__image-wrap {
    position: relative;
}

.doctors-intro__image {
    height: 460px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

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

.doctors-intro__badge {
    position: absolute;
    left: 0; bottom: 0;
    background: var(--color-cream);
    border-radius: 0 var(--radius-sm) 0 0;
    padding: 8px 8px 0 0;
}

.doctors-intro__badge-inner {
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.doctors-intro__badge-icon {
    color: var(--color-amber);
    flex-shrink: 0;
}

.doctors-intro__badge-text {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   Doctors page — Cards section
   ---------------------------------------------------------------- */
.doctors-section {
    padding: 80px 40px 96px;
}

.doctors-section__wrap {
    max-width: 1300px;
    margin: 0 auto;
}

.doctors-section__header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 48px;
}

.doctors-section__header h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.12;
    margin: 18px 0 0;
}

.doctors-section__header h2 span { color: inherit; }

.doctors-section__header > p {
    font-size: 17px;
    line-height: 1.68;
    color: var(--color-dark-alpha-78);
    margin: 16px 0 0;
}

.doctors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    gap: 40px;
}

.doctor-card {
    background: var(--color-cream);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 260px 1fr;
}

.doctor-card .doctor-avatar {
    border-radius: 0;
    aspect-ratio: auto;
    min-height: 100%;
    background: url('../images/dr-virendra-berera-general-practitioner.webp') center/cover no-repeat var(--color-tan);
}

.doctor-card .doctor-avatar::after {
    display: none;
}

.doctor-card__body {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
}

.doctor-card__name {
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.doctor-card__profession {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-amber);
    margin: 6px 0 0;
}

.doctor-card__bio {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--color-dark-alpha-82);
    margin: 18px 0 0;
}

.doctor-card__details {
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.doctor-card__detail {
    padding-top: 16px;
    border-top: 1px solid rgba(215, 135, 0, .3);
}

.doctor-card__detail dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-amber);
    text-transform: uppercase;
}

.doctor-card__detail dt svg {
    flex-shrink: 0;
    color: var(--color-amber);
}

.doctor-card__detail dd {
    margin: 8px 0 0;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-dark-alpha-78);
}

.doctor-card__cta {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* ----------------------------------------------------------------
   Doctors page — Booking CTA strip
   ---------------------------------------------------------------- */
.doctors-cta {
    padding: 0 28px 96px;
}

.doctors-cta__inner {
    max-width: 1504px;
    margin: 0 auto;
}

.doctors-cta__card {
    position: relative;
}

.doctors-cta__card-border {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: var(--color-gold);
}

.doctors-cta__card-border.notch-br-cta { z-index: 0; }

.doctors-cta__card-fill {
    position: absolute;
    inset: 2px;
    border-radius: 14px;
    background: var(--color-cream);
}

.doctors-cta__card-fill.notch-br-cta { z-index: 0; }

.doctors-cta__content {
    position: relative;
    z-index: 1;
    padding: 64px;
    max-width: min(920px, calc(100% - 380px));
}

.doctors-cta__content h2 {
    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 20px 0 0;
    text-wrap: pretty;
}

.doctors-cta__content > p {
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    margin: 18px 0 0;
    text-wrap: pretty;
}

.doctors-cta__buttons {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.doctors-cta__buttons .btn { max-width: 100%; box-sizing: border-box; }

/* ----------------------------------------------------------------
   Doctors page — Responsive (Tablet <= 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .doctors-intro { padding: 56px 32px 0; }
    .doctors-intro__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .doctors-intro__image { height: 380px; }

    .doctors-section { padding: 56px 32px 72px; }

    .doctor-card {
        grid-template-columns: 220px 1fr;
    }

    .doctors-cta { padding: 0 20px 72px; }
    .doctors-cta__content { padding: 48px 36px; max-width: 100%; }
    .doctors-cta__card-border.notch-br-cta,
    .doctors-cta__card-fill.notch-br-cta {
        mask-image: none;
        -webkit-mask-image: none;
    }
    .doctors-cta__buttons { flex-direction: column; }
    .doctors-cta__buttons .btn { text-align: center; justify-content: center; }
}

/* ----------------------------------------------------------------
   Doctors page — Responsive (Mobile <= 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .doctors-intro { padding: 40px 20px 0; }
    .doctors-intro__image { height: 280px; }
    .doctors-intro__highlights { grid-template-columns: 1fr; }

    .doctors-section { padding: 40px 20px 56px; }
    .doctors-section__header { margin-bottom: 32px; }

    .doctor-card {
        grid-template-columns: 1fr;
    }

    .doctor-card .doctor-avatar {
        aspect-ratio: 16 / 9;
        min-height: 220px;
        max-height: 280px;
    }

    .doctor-card__body { padding: 28px 24px; }

    .doctors-cta { padding: 0 16px 64px; }
    .doctors-cta__content { padding: 36px 24px; }
}

/* ----------------------------------------------------------------
   Doctors page — Responsive (Small mobile <= 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .doctors-cta__buttons { flex-direction: column; align-items: stretch; }
    .doctors-cta__buttons .btn { max-width: 100%; text-align: center; justify-content: center; }
    .doctor-card__cta { flex-direction: column; }
    .doctor-card__cta .btn { text-align: center; justify-content: center; width: 100%; }
}
/* ================================================================
   Team page
   ================================================================ */

/* ----------------------------------------------------------------
   Team page — Team intro section
   ---------------------------------------------------------------- */
.team-page-intro {
    padding: 80px 40px 88px;
}

.team-page-intro__grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: start;
}

.team-page-intro__content h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.12;
    margin: 18px 0 0;
}

.team-page-intro__content h2 span { color: inherit; }

.team-page-intro__content > p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    margin: 20px 0 0;
}

.team-page-intro__doctor-note {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
    padding: 20px 24px;
    background: var(--color-light-gold);
    border-radius: var(--radius-sm);
}

.team-page-intro__doctor-note svg {
    flex-shrink: 0;
    color: var(--color-amber);
    margin-top: 2px;
}

.team-page-intro__doctor-note p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-dark-alpha-78);
}

.team-page-intro__doctor-note a {
    font-weight: 700;
}

/* ----------------------------------------------------------------
   Team page — Staff members (rich-text merge tag wrapper)
   ---------------------------------------------------------------- */
.team-page-members {
    padding: 0 28px;
}

.team-page-members__inner {
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 80px 64px 84px;
}

.team-page-members__wrap {
    max-width: 1300px;
    margin: 0 auto;
}

.team-page-members__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.team-page-members__header > div { max-width: 620px; }

.team-page-members__header h2 {
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.14;
    margin: 18px 0 0;
}

.team-page-members__header h2 span { color: inherit; }

.team-page-members__content {
    margin-top: 40px;
}

/* Grid of staff cards generated from the rich-text merge tag */
.team-page-members__content .rich-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.team-page-members__content .rich-text li {
    background: var(--color-cream);
    border-radius: var(--radius-sm);
    padding: 30px 28px;
    font-size: 16px;
    line-height: 1.6;
}

.team-page-members__content .rich-text li p {
    font-size: 16px;
    line-height: 1.6;
}

.team-page-members__content .rich-text li strong {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-amber);
    display: block;
    margin-bottom: 4px;
}

/* ----------------------------------------------------------------
   Team page — Staff cards (bespoke, with photos from homepage)
   ---------------------------------------------------------------- */
.team-page-cards {
    padding: 80px 40px 0;
}

.team-page-cards__wrap {
    max-width: 1300px;
    margin: 0 auto;
}

.team-page-cards__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 32px;
}

/* Reuses .team-card from homepage — same notch-br image, corner badge pattern */

/* ----------------------------------------------------------------
   Team page — Booking CTA strip
   ---------------------------------------------------------------- */
.team-page-cta {
    padding: 80px 28px 96px;
}

.team-page-cta__inner {
    max-width: 1300px;
    margin: 0 auto;
    background: var(--color-light-gold);
    border-radius: var(--radius);
    padding: 64px;
    text-align: center;
}

.team-page-cta__content h2 {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 18px 0 0;
}

.team-page-cta__content > p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-78);
    margin: 14px auto 0;
    max-width: 520px;
}

.team-page-cta__buttons {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.team-page-cta__buttons .btn {
    max-width: 100%;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Team page — Responsive (Tablet <= 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .team-page-intro { padding: 56px 32px 64px; }
    .team-page-intro__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .team-page-members__inner { padding: 56px 36px 60px; }
    .team-page-members__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .team-page-members__content .rich-text ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-page-cards { padding: 56px 32px 0; }
    .team-page-cards__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-page-cta { padding: 56px 20px 72px; }
    .team-page-cta__inner { padding: 48px 36px; }
    .team-page-cta__buttons { flex-direction: column; }
    .team-page-cta__buttons .btn { text-align: center; justify-content: center; width: 100%; max-width: 320px; }
}

/* ----------------------------------------------------------------
   Team page — Responsive (Mobile <= 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .team-page-intro { padding: 40px 20px 48px; }

    .team-page-members { padding: 0 16px; }
    .team-page-members__inner { padding: 44px 24px 48px; }
    .team-page-members__content .rich-text ul {
        grid-template-columns: 1fr;
    }

    .team-page-cards { padding: 40px 20px 0; }
    .team-page-cards__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .team-page-cta { padding: 40px 16px 64px; }
    .team-page-cta__inner { padding: 36px 24px; }
}

/* ----------------------------------------------------------------
   Team page — Responsive (Small mobile <= 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .team-page-cta__buttons { flex-direction: column; align-items: stretch; }
    .team-page-cta__buttons .btn { max-width: 100%; }
}

/* ================================================================
   Appointments page
   ================================================================ */
.appointments-booking {
    padding: 72px 40px;
}

.appointments-booking__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.appointments-booking__inner h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin: 14px 0 12px;
}

.appointments-booking__inner > p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-78);
    max-width: 600px;
    margin: 0 auto;
}

.appointments-booking__widget {
    margin-top: 40px;
    min-height: 400px;
}

.appointments-booking__fallback {
    margin-top: 24px;
    font-size: 15px;
    color: var(--color-dark-alpha-72);
}

.appointments-info {
    padding: 0 40px 72px;
}

.appointments-info__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.appointments-info__card {
    background: transparent;
    border-radius: var(--radius);
    padding: 32px 28px;
}

.appointments-info__card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.appointments-info__card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-dark-alpha-78);
}

@media (max-width: 768px) {
    .appointments-booking { padding: 48px 20px; }
    .appointments-info { padding: 0 20px 48px; }
    .appointments-info__grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Patient Info page
   ================================================================ */

/* ----------------------------------------------------------------
   Patient Info — Intro banner (new patients + appts quick-ref)
   ---------------------------------------------------------------- */
.patient-info-intro {
    padding: 64px 40px 40px;
}

.patient-info-intro__grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.patient-info-intro__card {
    background: transparent;
    border-radius: var(--radius);
    padding: 36px 36px 38px;
    display: flex;
    flex-direction: column;
}

.patient-info-intro__card-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-amber);
    text-transform: uppercase;
}

.patient-info-intro__card-label svg {
    flex-shrink: 0;
    color: var(--color-amber);
}

.patient-info-intro__card h2 {
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 14px 0 0;
}

.patient-info-intro__card .rich-text {
    margin-top: 14px;
}

.patient-info-intro__card-cta {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
    align-items: center;
}

.patient-info-intro__card-cta .booking-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background: var(--color-amber);
    color: var(--color-cream);
    padding: 16px 30px;
    transition: background .15s ease, color .15s ease;
    text-transform: uppercase;
}

.patient-info-intro__card-cta .booking-button:hover {
    background: var(--color-gold);
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   Patient Info — Content sections
   ---------------------------------------------------------------- */
.patient-info-section {
    padding: 72px 40px 72px;
    margin: 0 28px 120px;
    background: var(--color-light-gold);
    border-radius: var(--radius);
}

.patient-info-section:last-of-type {
    margin-bottom: 0;
}

.patient-info-section__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
}

.patient-info-section__label {
}

.patient-info-section__label-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-amber);
    text-transform: uppercase;
}

.patient-info-section__label-eyebrow svg {
    flex-shrink: 0;
    color: var(--color-amber);
}

.patient-info-section__label h2 {
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 14px 0 0;
}

.patient-info-section__body {
    padding-top: 4px;
}

.patient-info-section__body .rich-text {
    max-width: 720px;
}

.patient-info-section__inner--with-image {
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.patient-info-section__content h2 {
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 14px 0 16px;
}

.patient-info-section__image-wrap {
    position: relative;
    margin-bottom: -120px;
}

.patient-info-section__image-inner {
    border-radius: var(--radius);
    overflow: hidden;
    border: 20px solid var(--color-cream);
    box-sizing: border-box;
}

.patient-info-section__image-placeholder {
    width: 100%;
    height: 300px;
    background: var(--color-tan);
}

.patient-info-section__image-inner img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--radius) - 6px);
}


/* ----------------------------------------------------------------
   Patient Info — Policies grid (cards)
   ---------------------------------------------------------------- */
.patient-info-policies {
    margin: 0 28px 80px;
    padding: 80px 64px 80px;
}

.patient-info-policies__inner {
    max-width: 1500px;
    margin: 0 auto;
}

.patient-info-policies__header {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.patient-info-policies__header h2 {
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.14;
    margin: 18px 0 0;
}

.patient-info-policies__header h2 span {
    color: inherit;
}

.patient-info-policies__header > p {
    font-size: 17px;
    line-height: 1.68;
    color: var(--color-dark-alpha-78);
    margin: 16px 0 0;
}

.patient-info-policies__grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.policy-card {
    background: var(--color-cream);
    border-radius: var(--radius-sm);
    padding: 32px 28px 36px;
    display: flex;
    flex-direction: column;
}

.policy-card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--color-light-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-amber);
}

.policy-card h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.01em;
    margin: 20px 0 0;
}

.policy-card .rich-text {
    margin-top: 12px;
}

.policy-card .rich-text p {
    font-size: 15px;
    line-height: 1.65;
}

/* ----------------------------------------------------------------
   Patient Info — FAQs
   ---------------------------------------------------------------- */
.patient-info-faq {
    padding: 80px 40px;
    max-width: 1500px;
    margin: 0 auto;
}

.patient-info-faq__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: stretch;
}

.patient-info-faq__content h2 {
    font-size: clamp(30px, 2.8vw, 42px);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 18px 0 0;
}

.patient-info-faq__desc {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-78);
    margin: 12px 0 36px;
}

.patient-info-faq .faq-accordion {
    grid-template-columns: 1fr;
}

.patient-info-faq__image {
    border-radius: var(--radius);
    overflow: hidden;
}

.patient-info-faq__image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-tan);
    border-radius: var(--radius);
}

.patient-info-faq__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
}

/* ----------------------------------------------------------------
   Patient Info — Booking CTA strip
   ---------------------------------------------------------------- */
.patient-info-cta {
    padding: 80px 28px 96px;
}

.patient-info-cta__inner {
    max-width: 1300px;
    margin: 0 auto;
    background: var(--color-cream);
    border: 2px solid var(--color-gold);
    border-radius: var(--radius);
    padding: 56px 64px;
    text-align: center;
}

.patient-info-cta__content h2 {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.patient-info-cta__content > p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-78);
    margin: 14px auto 0;
    max-width: 520px;
}

.patient-info-cta__buttons {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.patient-info-cta__buttons .btn {
    max-width: 100%;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Patient Info — Responsive (Tablet <= 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .patient-info-intro { padding: 48px 32px 0; }
    .patient-info-intro__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .patient-info-section { padding: 56px 32px 56px; margin: 0 20px 20px; }
    .patient-info-section__inner {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .patient-info-section__label {
        position: static;
    }
    .patient-info-section__inner--with-image {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .patient-info-section__inner--reversed .patient-info-section__image-wrap {
        order: 2;
    }

    .patient-info-faq { padding: 56px 32px; margin-top: 80px; }
    .patient-info-faq__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .patient-info-faq__image { position: static; }

    .patient-info-policies { margin: 0 20px; padding: 56px 36px 56px; }
    .patient-info-policies__inner { padding: 52px 36px 60px; }
    .patient-info-policies__header {
        text-align: left;
        margin: 0;
    }
    .patient-info-policies__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .patient-info-cta { padding: 56px 20px 72px; }
    .patient-info-cta__inner { padding: 48px 36px; }
    .patient-info-cta__buttons { flex-direction: column; }
    .patient-info-cta__buttons .btn { text-align: center; justify-content: center; width: 100%; max-width: 320px; }
}

/* ----------------------------------------------------------------
   Patient Info — Responsive (Mobile <= 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .patient-info-intro { padding: 36px 20px 40px; }
    .patient-info-intro__grid { grid-template-columns: 1fr; }
    .patient-info-intro__card { padding: 28px 24px 32px; }

    .patient-info-section { padding: 44px 20px 44px; margin: 0 16px 40px; }
    .patient-info-section:last-of-type { margin-bottom: 120px; }
    .patient-info-section__inner { gap: 4px; }
    .patient-info-section__image-wrap { margin-top: 40px; margin-bottom: -80px; }

    .patient-info-policies { margin: 0 16px 80px; padding: 44px 16px 44px; }
    .patient-info-policies__inner { padding: 40px 0 48px; }
    .patient-info-policies__header { text-align: left; margin: 0; }
    .patient-info-policies__grid { grid-template-columns: 1fr; }

    .patient-info-faq { padding: 40px 20px; }

    .patient-info-cta { padding: 40px 16px 64px; }
    .patient-info-cta__inner { padding: 36px 24px; }
}

/* ----------------------------------------------------------------
   Patient Info — Responsive (Small mobile <= 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .patient-info-intro__card-cta { flex-direction: column; }
    .patient-info-intro__card-cta .btn,
    .patient-info-intro__card-cta .booking-button { text-align: center; justify-content: center; width: 100%; }

    .patient-info-cta__buttons .btn { max-width: 100%; }
}

/* ================================================================
   Privacy Policy page
   ================================================================ */

/* ----------------------------------------------------------------
   Privacy — Legal content wrapper
   ---------------------------------------------------------------- */
.privacy-content {
    padding: 80px 40px 96px;
}

.privacy-content__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
}

/* ----------------------------------------------------------------
   Privacy — Sidebar (sticky nav)
   ---------------------------------------------------------------- */
.privacy-content__sidebar {
    position: sticky;
    top: 40px;
}

.privacy-content__sidebar-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-amber);
    text-transform: uppercase;
}

.privacy-content__sidebar-label svg {
    flex-shrink: 0;
    color: var(--color-amber);
}

.privacy-content__updated {
    font-size: 14px;
    color: var(--color-dark-alpha-62);
    margin: 14px 0 0;
}

.privacy-content__nav {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.privacy-content__nav a {
    display: block;
    padding: 10px 14px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark-alpha-72);
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}

.privacy-content__nav a:hover {
    background: var(--color-light-gold);
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   Privacy — Legal text body
   ---------------------------------------------------------------- */
.privacy-content__body {
    max-width: 65ch;
}

.privacy-content__intro {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-tan);
}

.privacy-content__intro a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.privacy-section {
    padding: 40px 0;
    border-bottom: 1px solid var(--color-tan);
}

.privacy-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.privacy-section h2 {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
    letter-spacing: -.015em;
}

.privacy-section h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    margin: 28px 0 0;
}

.privacy-section p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    margin: 14px 0 0;
}

.privacy-section ul,
.privacy-section ol {
    padding-left: 20px;
    margin: 14px 0 0;
}

.privacy-section li {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
}

.privacy-section li + li {
    margin-top: 6px;
}

.privacy-section li strong {
    font-weight: 700;
    color: var(--color-dark);
}

.privacy-section a {
    color: var(--color-amber);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.privacy-section a:hover {
    color: var(--color-dark);
}

.privacy-section em {
    font-style: italic;
}

/* ----------------------------------------------------------------
   Privacy — Responsive (Tablet <= 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .privacy-content { padding: 56px 32px 72px; }
    .privacy-content__inner {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .privacy-content__sidebar {
        position: static;
    }
    .privacy-content__nav {
        display: none;
    }
}

/* ----------------------------------------------------------------
   Privacy — Responsive (Mobile <= 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .privacy-content { padding: 40px 20px 64px; }
    .privacy-content__body { max-width: 100%; }
    .hero-simple { padding: 16px 16px 0; }
    .hero-simple__inner { padding: 44px 24px 40px; }
}
/* ================================================================
   Legal content pages (Terms, Privacy)
   ================================================================ */

/* ----------------------------------------------------------------
   Legal content — Article wrapper
   ---------------------------------------------------------------- */
.legal-content {
    padding: 72px 40px 96px;
}

.legal-content__inner {
    max-width: 820px;
    margin: 0 auto;
}

.legal-content__intro {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark-alpha-82);
    margin: 0 0 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-tan);
}

.legal-content__intro a {
    color: var(--color-amber);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-content__intro a:hover {
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   Legal content — Section headings
   ---------------------------------------------------------------- */
.legal-content h2 {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.22;
    letter-spacing: -.015em;
    margin: 40px 0 0;
}

.legal-content h2:first-of-type {
    margin-top: 0;
}

/* ----------------------------------------------------------------
   Legal content — Body text
   ---------------------------------------------------------------- */
.legal-content p {
    font-size: 16px;
    line-height: 1.72;
    color: var(--color-dark-alpha-82);
    margin: 14px 0 0;
}

.legal-content strong {
    font-weight: 700;
    color: var(--color-dark);
}

.legal-content a {
    color: var(--color-amber);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-content a:hover {
    color: var(--color-dark);
}

/* ----------------------------------------------------------------
   Legal content — Lists
   ---------------------------------------------------------------- */
.legal-content ul,
.legal-content ol {
    padding-left: 20px;
    margin: 14px 0 0;
}

.legal-content li {
    font-size: 16px;
    line-height: 1.72;
    color: var(--color-dark-alpha-82);
}

.legal-content li + li {
    margin-top: 6px;
}

/* ----------------------------------------------------------------
   Legal content — Definition list (contact details)
   ---------------------------------------------------------------- */
.legal-content dl {
    margin: 18px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 20px;
    align-items: baseline;
}

.legal-content dt {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-amber);
}

.legal-content dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-dark);
}

.legal-content dd address {
    font-style: normal;
}

/* ----------------------------------------------------------------
   Legal content — Last updated + small text
   ---------------------------------------------------------------- */
.legal-content__updated {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--color-tan);
    font-size: 14px;
    color: var(--color-dark-alpha-62);
}

/* ----------------------------------------------------------------
   Legal content — Responsive (Tablet <= 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .legal-content {
        padding: 56px 32px 72px;
    }
}

/* ----------------------------------------------------------------
   Legal content — Responsive (Mobile <= 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .legal-content {
        padding: 40px 20px 56px;
    }

    .legal-content h2 {
        margin-top: 32px;
    }

    .legal-content dl {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .legal-content dt {
        margin-top: 12px;
    }

    .legal-content dt:first-of-type {
        margin-top: 0;
    }
}
/* ----------------------------------------------------------------
   404 page
   ---------------------------------------------------------------- */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 80px 28px;
}

.error-page__inner {
    max-width: 620px;
    text-align: center;
}

.error-page__code {
    font-family: var(--font-heading);
    font-size: clamp(72px, 10vw, 120px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--color-light-gold);
}

.error-page__heading {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin: 16px 0 0;
}

.error-page__message {
    font-size: 17px;
    line-height: 1.68;
    color: var(--color-dark-alpha-78);
    margin: 16px 0 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.error-page__divider {
    width: 48px;
    height: 2px;
    background: var(--color-gold);
    margin: 28px auto;
    border-radius: 1px;
}

.error-page__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-amber);
    margin-bottom: 28px;
}

.error-page__phone:hover {
    color: var(--color-dark);
}

.error-page__phone svg {
    flex-shrink: 0;
}

.error-page__ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .error-page { padding: 56px 20px; }

    .error-page__ctas {
        flex-direction: column;
    }

    .error-page__ctas .btn {
        text-align: center;
        justify-content: center;
    }
}

/* ── 404 ──────────────────────────────────────────────────────────────
 * Served for any unmatched path, so it stands alone: say what happened, then
 * offer the way back rather than leaving a dead end.
 *
 * Deliberately written against fallbacks rather than this site's own token
 * names - every site in the fleet has a different vocabulary, and a 404 that
 * silently loses its layout because one variable is spelt differently is
 * worse than one that is slightly plainer. */
.notfound {
    padding-block: clamp(6rem, 14vw, 11rem) clamp(4rem, 9vw, 7rem);
    text-align: center;
}
.notfound__inner { max-width: 46rem; margin-inline: auto; }

/* Decorative, aria-hidden in the markup - the <h1> carries the meaning. Sized
 * large but kept at a legible contrast: a very pale numeral fails WCAG even
 * when it is ornamental. */
.notfound__code {
    font-size: clamp(4.5rem, 18vw, 9rem);
    font-weight: 700;
    line-height: 0.9;
    margin: 0 0 0.25em;
    opacity: 0.55;
}
.notfound h1 { margin-top: 0; }
.notfound__lede { font-size: 1.125rem; line-height: 1.5; margin-inline: auto; max-width: 40rem; }

.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.notfound__links {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid currentColor;
    /* The rule is a hairline of the surrounding ink rather than a named border
     * token, so it works whatever the site's palette is. */
    border-color: color-mix(in oklab, currentColor 22%, transparent);
}
.notfound__links-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}
.notfound__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    justify-content: center;
}
.notfound__links a {
    display: inline-block;
    /* WCAG 2.2 target size. */
    min-height: 24px;
    line-height: 24px;
    font-weight: 600;
}

/* ----------------------------------------------------------------
   Doctors & staff page — Staff section

   The staff grid (.team) is reused here from the homepage, where it sat
   nested inside the doctor block and leaned on a 64px top margin for its
   spacing. As its own top-level section it needs real section padding
   instead, so .team--staff-page drops that margin and .staff-section
   supplies the rhythm — matched to .doctors-section above it so the two
   groups read as equal-weight siblings rather than one subordinate to
   the other.
   ---------------------------------------------------------------- */
.staff-section {
    padding: 0 0 96px;
}

.team--staff-page {
    margin-top: 0;
}

.team--staff-page .team__header {
    display: block;
    text-align: center;
}

.team--staff-page .team__header h2 {
    font-size: clamp(28px, 2.8vw, 40px);
    letter-spacing: -.025em;
    margin: 12px 0 0;
}

.team--staff-page .team__header h2 span {
    color: var(--color-amber);
}

.team--staff-page .team__desc {
    margin-left: auto;
    margin-right: auto;
}