:root {
    --ink: #090908;
    --ink-2: #12110f;
    --paper: #f7f3eb;
    --ivory: #eee7da;
    --white: #fffdfa;
    --gold: #b58d4f;
    --gold-2: #d7bd87;
    --gold-bright: #e1c180;
    --muted: #5e574e;
    --line: rgba(20,18,14,.14);
    --line-light: rgba(255,255,255,.16);
    --shadow: 0 30px 80px rgba(11,9,6,.16);
    --display: "Bodoni 72","Didot","Times New Roman",serif;
    --body: 'Gelasio';
    --shell: min(1380px,calc(100vw - 80px));
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

    body.menu-open {
        overflow: hidden
    }

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

a {
    color: inherit;
    text-decoration: none
}

button, input, select, textarea {
    font: inherit
}

button {
    color: inherit
}

.shell {
    width: var(--shell);
    margin-inline: auto
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 12px;
    left: 12px;
    padding: 12px 16px;
    background: #fff;
    color: #000;
    transform: translateY(-150%);
    transition: transform .2s
}

    .skip-link:focus {
        transform: none
    }

.utility-bar {
    position: relative;
    z-index: 60;
    background: #050504;
    color: #e7ded1;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 14px;
    letter-spacing: .05em
}

.utility-inner {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

    .utility-inner p {
        margin: 0
    }

    .utility-inner a {
        font-weight: 700
    }

.signal-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-2);
    box-shadow: 0 0 0 4px rgba(215,189,135,.12);
    margin-right: 10px
}

.site-header {
    position: absolute;
    z-index: 50;
    top: 32px;
    width: 100%;
    color: white;
    transition: background .3s,box-shadow .3s,transform .3s
}

    .site-header.is-sticky {
        position: fixed;
        top: 0;
        background: rgba(9,9,8,.92);
        backdrop-filter: blur(18px);
        box-shadow: 0 8px 30px rgba(0,0,0,.18)
    }

.header-inner {
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color:inherit;
}

.brand-mark {
    position: relative;
    width: 42px;
    height: 44px;
    color: var(--gold-2);
    font-family: var(--display);
    font-size: 28px
}

    .brand-mark span {
        position: absolute;
        line-height: 1
    }

        .brand-mark span:first-child {
            left: 1px;
            top: 2px
        }

        .brand-mark span:last-child {
            right: 2px;
            bottom: 0
        }

    .brand-mark:after {
        content: "";
        position: absolute;
        inset: 4px 7px 5px;
        border: 1px solid currentColor;
        border-radius: 50%
    }

.brand-type {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    line-height: 1
}

    .brand-type strong {
        font-family: var(--display);
        font-size: 22px;
        letter-spacing: .22em;
        font-weight: 400
    }

    .brand-type small {
        margin-top: 7px;
        font-size: 9px;
        letter-spacing: .55em;
        padding-left: 3px
    }

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto
}

    .desktop-nav a {
        position: relative;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: #eee9e1
    }

        .desktop-nav a:after {
            content: "";
            position: absolute;
            left: 0;
            right: 100%;
            bottom: -8px;
            height: 1px;
            background: var(--gold-2);
            transition: right .25s
        }

        .desktop-nav a:hover:after, .desktop-nav a:focus-visible:after {
            right: 0
        }

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px
}

.phone-link {
    font-size: 13px;
    letter-spacing: .08em
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 28px;
    border: 1px solid transparent;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .13em;
    transition: transform .2s,box-shadow .2s,background .2s,color .2s
}

    .button:hover {
        transform: translateY(-2px);
        color:white;
    }

    .button:focus-visible, .text-link:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
        outline: 3px solid #e3c98e;
        outline-offset: 4px
    }

.button-gold {
    background: linear-gradient(120deg,#9c7336,#d3b477);
    color: #fff;
    box-shadow: 0 16px 38px rgba(130,91,33,.24)
}

    .button-gold:hover {
        box-shadow: 0 20px 45px rgba(130,91,33,.34)
    }

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

.button-small {
    min-height: 44px;
    padding-inline: 20px
}

.menu-button {
    display: none;
    background: none;
    border: 0;
    width: 48px;
    height: 48px;
    padding: 12px
}

    .menu-button span {
        display: block;
        width: 22px;
        height: 1px;
        background: white;
        margin: 7px auto;
        transition: transform .2s
    }

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(8,8,7,.98);
    padding: 140px 28px 40px;
    color: white
}

    .mobile-menu nav {
        display: flex;
        flex-direction: column
    }

        .mobile-menu nav a {
            padding: 17px 0;
            border-bottom: 1px solid var(--line-light);
            font-family: var(--display);
            font-size: 30px
        }

    .mobile-menu .button {
        margin-top: 32px;
        width: 100%
    }

.mobile-menu-phone {
    display: block;
    margin-top: 24px;
    text-align: center;
    letter-spacing: .12em
}

.hero {
    position: relative;
    min-height: 930px;
    background: var(--ink);
    color: white;
    overflow: hidden;
    padding-top: 124px
}

.hero-marble {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 20%,rgba(177,139,79,.16),transparent 34%),radial-gradient(circle at 14% 80%,rgba(255,255,255,.06),transparent 26%),linear-gradient(105deg,#050504 0%,#0e0d0b 44%,#17130e 100%)
}

    .hero-marble:before, .hero-marble:after {
        content: "";
        position: absolute;
        width: 70%;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(201,169,108,.24),transparent);
        transform: rotate(-28deg);
        top: 38%;
        left: -8%;
        filter: blur(.2px)
    }

    .hero-marble:after {
        top: 68%;
        left: 34%;
        transform: rotate(18deg);
        opacity: .5
    }

.hero-orbit {
    position: absolute;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(205,169,103,.44);
    border-radius: 50%;
    left: -470px;
    top: 100px;
    box-shadow: 0 0 90px rgba(181,141,79,.08)
}

    .hero-orbit:after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff0bd;
        right: 58px;
        top: 165px;
        box-shadow: 0 0 24px 8px rgba(230,194,122,.46)
    }

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,48%) minmax(0,52%);
    align-items: center;
    min-height: 695px
}

.hero-copy {
    padding: 60px 40px 90px 80px
}

.eyebrow {
    margin: 0 0 24px;
    color: var(--gold-2);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .27em;
    font-weight: 700
}

    .eyebrow.dark {
        color: #8d642c
    }

.hero h1, .section h2 {
    font-family: var(--display);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -.045em
}

.hero h1 {
    font-size: clamp(68px,6.2vw,104px);
    margin: 0;
    max-width: 720px
}

    .hero h1 em {
        font-style: normal;
        color: var(--gold-2)
    }

.hero-lede {
    max-width: 610px;
    margin: 36px 0 0;
    color: #e4ded4;
    font-size: 18px;
    line-height: 1.7
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 38px
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align:center;
}

    .text-link.light {
        color: #fff
    }

/*    .text-link:after {
        content: "";
        height: 1px;
        width: 0;
        background: currentColor;
        transition: width .25s
    }

    .text-link:hover:after {
        width: 28px
    }*/

.text-link-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.text-link:hover .text-link-arrow {
    transform: translateX(5px);
}
.play-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(215,189,135,.65);
    border-radius: 50%;
    color: var(--gold-2)
}

.hero-note {
    max-width: 540px;
    margin: 30px 0 0;
    color: #9e978e;
    font-size: 12px
}

.hero-portrait {
    position: relative;
    align-self: stretch;
    min-height: 695px
}

.portrait-frame {
    position: absolute;
    inset: 0;
    overflow: hidden
}

    .portrait-frame:before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        background: linear-gradient(90deg,#0e0d0b 0%,transparent 18%,transparent 72%,rgba(11,9,7,.18) 100%)
    }

    .portrait-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 48% 40%;
        filter: saturate(.82) contrast(1.05) brightness(.84)
    }

.portrait-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(7,7,6,.8),transparent 38%),radial-gradient(circle at 60% 20%,transparent 0%,rgba(0,0,0,.18) 80%)
}

.portrait-caption {
    position: absolute;
    z-index: 3;
    right: 36px;
    bottom: 52px;
    width: 280px;
    padding: 22px 24px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(11,10,8,.62);
    backdrop-filter: blur(14px)
}

    .portrait-caption span {
        display: block;
        font-family: var(--display);
        font-size: 23px
    }

    .portrait-caption small {
        display: block;
        margin-top: 7px;
        color: #c9c0b2;
        line-height: 1.4
    }

.trust-rail {
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(250,247,241,.97);
    color: var(--ink);
    border-top: 1px solid rgba(255,255,255,.2)
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr)
}

    .trust-grid > div {
        position: relative;
        min-height: 118px;
        padding: 27px 24px 22px 56px;
        border-right: 1px solid var(--line)
    }

        .trust-grid > div:last-child {
            border-right: 0
        }

    .trust-grid strong, .trust-grid small {
        display: block
    }

    .trust-grid strong {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

    .trust-grid small {
        margin-top: 5px;
        color: var(--muted);
        font-size: 13px;
    }

.trust-icon {
    position: absolute;
    left: 20px;
    top: 31px;
    color: #9a7138;
    font-family: var(--display);
    font-size: 17px
}

.section {
    padding: 150px 0
}

    .section h2 {
        font-size: clamp(52px,5.2vw,86px);
        margin: 0
    }

.pathways {
    background: var(--paper)
}

.pathways-grid {
    display: grid;
    grid-template-columns: minmax(0,35fr) minmax(0,65fr);
    gap: 90px
}

.section-intro {
    position: sticky;
    top: 150px;
    align-self: start
}

    .section-intro p:last-child {
        max-width: 350px;
        color: var(--muted);
        margin-top: 30px
    }

.pathway-list {
    border-top: 1px solid var(--line)
}

.pathway-row {
    display: grid;
    grid-template-columns: 50px minmax(180px,1fr) minmax(220px,1fr) 44px;
    align-items: center;
    gap: 28px;
    padding: 34px 8px;
    border-bottom: 1px solid var(--line);
    transition: padding .25s,background .25s
}
.pathway-arrow {
    transition: transform 0.25s ease, color 0.25s ease;
}

    .pathway-row:hover {
        padding-left: 22px;
        background: rgba(255,255,255,.6)
    }
        .pathway-row:hover .pathway-arrow {
            transform: rotate(45deg);
        }
.pathway-number {
    font-family: var(--display);
    font-size: 17px;
    color: #8d6b3a
}

.pathway-title {
    font-family: var(--display);
    font-size: 30px;
    line-height: 1.12
}

.pathway-copy {
    color: var(--muted)
}

.pathway-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 20px
}

.connected-care {
    position: relative;
    background: #0c0b0a;
    color: white;
    overflow: hidden
}

    .connected-care:after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 100% 0%,rgba(181,141,79,.16),transparent 35%);
        pointer-events: none
    }

.connected-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end
}

    .connected-heading .eyebrow {
        grid-column: 1/-1
    }

    .connected-heading p:last-child {
        color: #aaa198;
        max-width: 520px;
        font-size: 18px
    }

.care-steps {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 90px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--line-light)
}

    .care-steps li {
        padding: 42px 44px 20px 0;
        border-right: 1px solid var(--line-light);
        min-height: 250px
    }

        .care-steps li + li {
            padding-left: 44px
        }

        .care-steps li:last-child {
            border-right: 0
        }

    .care-steps span {
        font-family: var(--display);
        color: var(--gold-2);
        font-size: 18px
    }

    .care-steps h3 {
        font-family: var(--display);
        font-size: 30px;
        font-weight: 400;
        margin: 32px 0 14px
    }

    .care-steps p {
        color: #aaa198;
        margin: 0
    }

.implants-section {
    background: var(--ivory)
}

.implants-grid {
    display: grid;
    grid-template-columns: minmax(0,58fr) minmax(0,42fr);
    align-items: center;
    gap: 90px
}

.case-visual {
    background: #11100e;
    padding: 24px;
    color: white;
    box-shadow: var(--shadow)
}

.case-kicker {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #b0a79a;
    margin-bottom: 14px
}

.comparison {
    position: relative;
    aspect-ratio: 720/376;
    overflow: hidden;
    background: #222
}

    .comparison > img, .comparison-before, .comparison-before img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.comparison-before {
    clip-path: inset(0 calc(100% - var(--position)) 0 0)
}

.comparison input {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize
}

.comparison-line {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: var(--position);
    width: 1px;
    background: white;
    pointer-events: none
}

    .comparison-line i {
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--gold);
        color: white;
        font-style: normal;
        transform: translate(-50%,-50%);
        box-shadow: 0 6px 20px rgba(0,0,0,.35)
    }

.before-label, .after-label {
    position: absolute;
    z-index: 2;
    bottom: 14px;
    padding: 6px 10px;
    background: rgba(0,0,0,.55);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .2em
}

.before-label {
    left: 14px
}

.after-label {
    right: 14px
}

.case-disclaimer {
    font-size: 14px;
    color: #aaa198;
    margin: 16px 2px 0
}

.implant-copy h2 {
    font-size: clamp(50px,4.4vw,76px)
}

.implant-copy > p:not(.eyebrow) {
    color: #5d554c;
    font-size: 18px;
    margin-top: 30px
}

.premium-list {
    list-style: none;
    margin: 38px 0;
    padding: 0;
    border-top: 1px solid var(--line)
}

    .premium-list li {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 18px;
        padding: 18px 0;
        border-bottom: 1px solid var(--line)
    }

    .premium-list span {
        color: #8d642c;
        font-family: var(--display)
    }

.inline-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 34px
}

.doctor-section {
    background: var(--white)
}

.doctor-grid {
    display: grid;
    grid-template-columns: minmax(0,47fr) minmax(0,53fr);
    align-items: center;
    gap: 110px
}

.doctor-portrait {
    position: relative
}

    .doctor-portrait:before {
        content: "";
        position: absolute;
        inset: -30px 30px 30px -30px;
        border: 1px solid rgba(181,141,79,.32)
    }

    .doctor-portrait img {
        position: relative;
        width: 100%;
        aspect-ratio: 4/5;
        object-fit: cover;
        object-position: 53% 45%;
        filter: saturate(.78) contrast(1.04)
    }

.doctor-signature {
    position: absolute;
    right: -20px;
    bottom: 28px;
    padding: 16px 22px;
    background: var(--ink);
    color: var(--gold-2);
    font-family: var(--display);
    font-size: 20px
}

.doctor-copy h2 {
    font-size: clamp(54px,4.5vw,78px)
}

.large-copy {
    font-family: var(--display);
    font-size: 27px;
    line-height: 1.42;
    margin-top: 34px
}

.doctor-copy > p:not(.eyebrow):not(.large-copy) {
    color: var(--muted)
}

.credentials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 38px 0;
    border-top: 1px solid var(--line)
}

    .credentials div {
        padding: 18px 20px 18px 0;
        border-bottom: 1px solid var(--line)
    }

        .credentials div:nth-child(odd) {
            border-right: 1px solid var(--line)
        }

        .credentials div:nth-child(even) {
            padding-left: 24px
        }

    .credentials span, .credentials strong {
        display: block
    }

    .credentials span {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: .16em;
        color: #8d642c
    }

    .credentials strong {
        margin-top: 6px;
        font-size: 13px
    }
.services-section {
    background: var(--ink);
    color: white;
}

.services-heading {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 100px;
    align-items: end;
}

    .services-heading h2 em {
        font-style: normal;
        color: var(--gold-bright);
    }

    .services-heading > p {
        margin: 0 0 7px;
        color: #aaa198;
        font-size: 17px;
        line-height: 1.75;
    }

.service-interface {
    display: grid;
    grid-template-columns: 0.38fr 0.62fr;
    margin-top: 78px;
    border: 1px solid var(--line-light);
    min-height: 690px;
}

.service-tabs {
    border-right: 1px solid var(--line-light);
    display: grid;
    grid-template-rows: repeat(6, 1fr);
}

    .service-tabs button {
        position: relative;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--line-light);
        text-align: left;
        color: #847e76;
        padding: 0 28px;
        font-family: var(--serif);
        font-size: 24px;
        cursor: pointer;
        transition: 0.35s;
        display: flex;
        align-items: center;
        gap: 22px;
    }

        .service-tabs button:last-child {
            border-bottom: 0;
        }

        .service-tabs button span {
            font-family: var(--sans);
            font-size: 9px;
            color: #70695f;
            letter-spacing: 0.1em;
        }

        .service-tabs button[aria-selected="true"] {
            color: white;
            background: linear-gradient(90deg, rgba(213, 173, 105, 0.14), transparent);
        }

            .service-tabs button[aria-selected="true"]:before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 2px;
                background: var(--gold-bright);
            }

.service-panels {
    position: relative;
    min-width: 0;
}

    .service-panels article {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-rows: 1fr auto;
        overflow: hidden;
    }

        .service-panels article[hidden] {
            display: none;
        }

    .service-panels img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.65) brightness(0.95);
        animation: panelIn 0.65s var(--ease);
    }

    .service-panels article > div {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 90px 55px 48px;
        background: linear-gradient(transparent, rgba(8, 7, 6, 0.96) 64%);
        animation: panelIn 0.65s var(--ease);
    }

.panel-index {
    color: var(--gold-bright);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 15px;
}

.service-panels h3 {
    font-size:20px;
    margin: 0 0 17px;
}

.service-panels p:not(.panel-index) {
    max-width: 600px;
    color: #c1bbb2;
    margin: 0 0 25px;
}

.service-panels a {
    display: inline-flex;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    color: var(--gold-bright);
}

.services-footnote {
    padding-top: 28px;
    color: #716b63;
    font-size: 11px;
    letter-spacing: 0.04em;
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: scale(1.02);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.experience-section {
    background: var(--paper)
}

.experience-grid {
    display: grid;
    grid-template-columns: minmax(0,42fr) minmax(0,58fr);
    gap: 100px
}

.experience-copy > p:last-child {
    color: var(--muted);
    font-size: 18px;
    margin-top: 30px;
    max-width: 490px
}

.experience-points {
    border-top: 1px solid var(--line)
}

    .experience-points article {
        display: grid;
        grid-template-columns: 55px 1fr 1fr;
        gap: 24px;
        padding: 32px 0;
        border-bottom: 1px solid var(--line);
        align-items: start
    }

    .experience-points span {
        font-family: var(--display);
        color: #8d642c
    }

    .experience-points h3 {
        font-family: var(--display);
        font-weight: 400;
        font-size: 29px;
        margin: 0
    }

    .experience-points p {
        color: var(--muted);
        margin: 0
    }

.testimonials {
    background: var(--ivory)
}

.testimonial-heading {
/*    display: grid;*/
    grid-template-columns: .35fr .65fr;
    align-items: end
}

    .testimonial-heading .eyebrow {
        align-self: start
    }

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 80px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

    .testimonial-grid figure {
        margin: 0;
        padding: 50px 42px 46px 0;
        border-right: 1px solid var(--line)
    }

        .testimonial-grid figure + figure {
            padding-left: 42px
        }

        .testimonial-grid figure:last-child {
            border-right: 0
        }

    .testimonial-grid blockquote {
        font-family: var(--display);
        font-size: 29px;
        line-height: 1.3;
        margin: 0
    }

    .testimonial-grid figcaption {
        margin-top: 30px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: #766a5c
    }

.testimonial-note {
    font-size: 14px;
    color: #7f7568;
    margin-top: 18px
}

.gallery-section {
    background: #0c0b0a;
    color: white
}

.gallery-heading {
    display: grid;
    grid-template-columns: 1fr .55fr;
    gap: 90px;
    align-items: end
}

    .gallery-heading p:last-child {
        color: #aaa198
    }

.gallery-grid {
    display: grid;
    grid-template-columns: 1.5fr .75fr .75fr;
    gap: 18px;
    margin-top: 72px
}

.photo-brief {
    position: relative;
    min-height: 500px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: radial-gradient(circle at 72% 18%,rgba(184,145,83,.24),transparent 34%),linear-gradient(145deg,#23201c,#0d0c0b 70%)
}

    .photo-brief:before {
        content: "";
        position: absolute;
        inset: 18px;
        border: 1px solid rgba(215,189,135,.22)
    }

    .photo-brief:nth-child(2) {
        background: radial-gradient(circle at 40% 35%,rgba(255,255,255,.08),transparent 28%),linear-gradient(135deg,#1a1815,#090908)
    }

    .photo-brief:nth-child(3) {
        background: radial-gradient(circle at 60% 25%,rgba(184,145,83,.18),transparent 30%),linear-gradient(180deg,#171511,#070706)
    }

    .photo-brief span, .photo-brief strong, .photo-brief small {
        position: relative;
        z-index: 2
    }

    .photo-brief span {
        font-family: var(--display);
        font-size: 18px;
        color: var(--gold-2)
    }

    .photo-brief strong {
        font-family: var(--display);
        font-weight: 400;
        font-size: 34px;
        margin-top: 10px
    }

    .photo-brief small {
        color: #aaa198
    }

.faq-section {
    background: var(--paper)
}

.faq-grid {
    display: grid;
    grid-template-columns: minmax(0,38fr) minmax(0,62fr);
    gap: 100px
}

.faq-intro {
    position: sticky;
    top: 150px;
    align-self: start
}

    .faq-intro p:last-child {
        color: var(--muted);
        max-width: 360px;
        margin-top: 28px
    }

.accordion {
    border-top: 1px solid var(--line)
}

details {
    border-bottom: 1px solid var(--line)
}

summary {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 28px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: 27px;
    line-height: 1.25
}

    summary::-webkit-details-marker {
        display: none
    }

    summary span {
        font-family: var(--body);
        font-weight: 300;
        color: #8d642c;
        transition: transform .2s
    }

details[open] summary span {
    transform: rotate(45deg)
}

details > div {
    padding: 0 54px 28px 0;
    color: var(--muted);
    max-width: 720px
}

.appointment-section {
    background: var(--paper);
    color: white
}

.appointment-grid {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 0;
    box-shadow: 0 35px 90px rgba(0,0,0,.25)
}

.location-card {
    padding: 70px;
    background: radial-gradient(circle at 100% 0%,rgba(181,141,79,.2),transparent 35%),#11100e
}

    .location-card h2 {
        font-size: clamp(52px,4.5vw,76px)
    }

.address-block {
    margin-top: 45px;
    padding-top: 28px;
    border-top: 1px solid var(--line-light)
}

    .address-block p {
        color: #d4cdc2
    }

    .address-block a {
        font-family: var(--display);
        font-size: 34px;
        color: var(--gold-2)
    }

.hours {
    margin: 35px 0
}

    .hours div {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.09);
        font-size: 13px
    }

    .hours dt {
        color: #aaa198
    }

    .hours dd {
        margin: 0
    }

.service-area {
    margin-top: 35px;
    color: #8f877e;
    font-size: 12px
}

.appointment-form-card {
    background: var(--white);
    color: var(--ink);
    padding: 70px
}

    .appointment-form-card h2 {
        font-size: clamp(48px,4vw,67px)
    }

    .appointment-form-card form {
        margin-top: 42px
    }

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

.appointment-form-card label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700
}

    .appointment-form-card label > span[aria-hidden] {
        color: #996a29
    }

.appointment-form-card input, .appointment-form-card select, .appointment-form-card textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #c9c0b3;
/*    background: transparent;*/
    border-radius: 0;
    padding: 12px 0;
    font-size: 15px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink)
}

.appointment-form-card textarea {
    border: 1px solid #c9c0b3;
    padding: 14px;
    margin-top: 2px;
    resize: vertical
}

.appointment-form-card form > label {
    margin-top: 22px
}

.appointment-form-card .consent {
    flex-direction: row;
    align-items: flex-start;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400
}

.consent input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 2px
}

.privacy-notice {
    padding: 14px 16px;
    background: #f0ebe2;
    font-size: 13px;
    color: #625a51
}

.form-submit {
    margin-top: 20px
}

.form-status {
    min-height: 24px;
    margin-top: 14px;
    font-size: 13px
}

    .form-status.error {
        color: #8c1f16
    }

    .form-status.success {
        color: #21663e
    }

.honeypot {
    position: absolute !important;
    left: -9999px !important
}

.site-footer {
    background: #050504;
    color: #d9d1c6;
    padding: 90px 0 28px
}

.footer-top {
    display: grid;
    grid-template-columns: 1.35fr .8fr .8fr 1fr;
    gap: 70px
}

.footer-brand p {
    color: #bbb3a9;
    max-width: 320px;
    margin-top: 24px
}

.site-footer h2 {
    font-family: var(--body);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--gold-2);
    margin: 0 0 18px
}

.site-footer nav, .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

    .site-footer nav a, .footer-contact a {
        padding: 5px 0;
        color: #bbb3a9;
        font-size: 16px
    }

    .footer-contact p {
        color: #bbb3a9;
        font-size: 16px
    }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 80px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 14px;
    color: #77716a
}

    .footer-bottom div {
        display: flex;
        gap: 22px
    }

.mobile-cta-bar {
    display: none
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease,transform .8s ease
}

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

@media (max-width:1200px) {
    :root {
        --shell: min(100% - 48px,1200px)
    }

    .desktop-nav {
        gap: 18px
    }

        .desktop-nav a {
            font-size: 10px
        }

    .hero-copy {
        padding-left: 20px
    }

    .trust-grid > div {
        padding-left: 44px
    }

    .trust-icon {
        left: 14px
    }

    .pathways-grid, .faq-grid {
        gap: 60px
    }

    .doctor-grid {
        gap: 70px
    }

    .appointment-grid {
        grid-template-columns: 1fr 1.15fr
    }

    .location-card, .appointment-form-card {
        padding: 50px
    }
}

@media (max-width:980px) {
    :root {
        --shell: calc(100% - 40px)
    }

    .desktop-nav, .phone-link, .header-actions > .button {
        display: none
    }

    .menu-button {
        display: block
    }

    .hero {
        min-height: auto;
        padding-top: 124px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .hero-copy {
        padding: 60px 0 40px;
        max-width: 720px
    }

    .hero h1 {
        font-size: clamp(64px,12vw,96px)
    }

    .hero-portrait {
        min-height: 560px
    }

    .portrait-frame:before {
        background: linear-gradient(to bottom,#0e0d0b 0%,transparent 12%,transparent 72%,rgba(11,9,7,.7) 100%)
    }

    .portrait-caption {
        right: 24px;
        bottom: 25px
    }

    .trust-rail {
        position: relative
    }

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

        .trust-grid > div:nth-child(2n) {
            border-right: 0
        }

        .trust-grid > div:last-child {
            grid-column: 1/-1
        }

    .section {
        padding: 110px 0
    }

    .pathways-grid, .connected-heading, .implants-grid, .doctor-grid, .services-heading, .experience-grid, .testimonial-heading, .gallery-heading, .faq-grid, .appointment-grid {
        grid-template-columns: 1fr
    }

    .section-intro, .faq-intro {
        position: static
    }

    .pathways-grid, .doctor-grid, .experience-grid, .faq-grid {
        gap: 60px
    }

    .pathway-row {
        grid-template-columns: 45px 1fr 44px
    }

    .pathway-copy {
        grid-column: 2/3
    }

    .pathway-arrow {
        grid-column: 3;
        grid-row: 1/3
    }

    .care-steps {
        grid-template-columns: 1fr
    }

        .care-steps li, .care-steps li + li {
            border-right: 0;
            border-bottom: 1px solid var(--line-light);
            padding: 32px 0;
            min-height: 0
        }

    .implants-grid {
        gap: 60px
    }

    .doctor-portrait {
        max-width: 650px
    }

    .service-interface {
        grid-template-columns: 1fr
    }

    .service-tabs {
        border-right: 0;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

        .service-tabs button {
            border-right: 1px solid var(--line-light)
        }

    .service-panels article {
        min-height: 600px
    }

    .testimonial-heading {
        gap: 20px
    }

    .testimonial-grid {
        grid-template-columns: 1fr
    }

        .testimonial-grid figure, .testimonial-grid figure + figure {
            padding: 38px 0;
            border-right: 0;
            border-bottom: 1px solid var(--line)
        }

    .gallery-grid {
        grid-template-columns: 1fr 1fr
    }

    .photo-brief-large {
        grid-column: 1/-1
    }

    .photo-brief {
        min-height: 390px
    }

    .appointment-grid {
        box-shadow: none
    }

    .location-card, .appointment-form-card {
        padding: 60px
    }

    .footer-top {
        grid-template-columns: 1fr 1fr
    }

    .footer-brand {
        grid-column: 1/-1
    }
}

@media (max-width:680px) {
    :root {
        --shell: calc(100% - 32px)
    }

    body {
        font-size: 15px
    }

    .utility-inner {
        justify-content: center
    }

        .utility-inner p {
            display: none
        }

    .site-header {
        top: 32px
    }

    .header-inner {
        height: 74px
    }

    .brand-type strong {
        font-size: 18px
    }

    .hero {
        padding-top: 106px
    }

    .hero-orbit {
        width: 490px;
        height: 490px;
        left: -340px;
        top: 140px
    }

    .hero-copy {
        padding: 64px 0 34px
    }

    .hero h1 {
        font-size: clamp(55px,17vw,78px);
        line-height: .96
    }

    .hero-lede {
        font-size: 16px;
        margin-top: 28px
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 18px
    }

        .hero-actions .text-link {
            justify-content: flex-start
        }

    .hero-note {
        margin-top: 22px
    }

    .hero-portrait {
        min-height: 420px;
        margin-inline: -16px
    }

    .portrait-frame img {
        object-position: 52% 42%
    }

    .portrait-caption {
        left: 20px;
        right: 20px;
        width: auto
    }

    .trust-grid {
        grid-template-columns: 1fr
    }

        .trust-grid > div, .trust-grid > div:nth-child(2n) {
            border-right: 0;
            min-height: 88px;
            padding: 20px 16px 18px 52px
        }

            .trust-grid > div:last-child {
                grid-column: auto
            }

    .trust-icon {
        top: 24px
    }

    .section {
        padding: 86px 0
    }

        .section h2 {
            font-size: clamp(45px,14vw,64px)
        }

    .pathways-grid, .doctor-grid, .experience-grid, .faq-grid {
        gap: 45px
    }

    .pathway-row {
        grid-template-columns: 36px 1fr 36px;
        gap: 14px;
        padding: 26px 0
    }

    .pathway-title {
        font-size: 25px
    }

    .pathway-copy {
        font-size: 13px
    }

    .pathway-arrow {
        width: 34px;
        height: 34px
    }

    .connected-heading {
        gap: 28px
    }

        .connected-heading p:last-child {
            font-size: 16px
        }

    .care-steps {
        margin-top: 50px
    }

    .case-visual {
        padding: 12px
    }

    .comparison {
        aspect-ratio: 1.2
    }

    .implant-copy > p:not(.eyebrow) {
        font-size: 16px
    }

    .inline-actions {
        flex-direction: column;
        align-items: stretch
    }

    .doctor-portrait:before {
        inset: -14px 14px 14px -14px
    }

    .doctor-signature {
        right: 0;
        font-size: 16px
    }

    .large-copy {
        font-size: 23px
    }

    .credentials {
        grid-template-columns: 1fr
    }

        .credentials div:nth-child(odd) {
            border-right: 0
        }

        .credentials div:nth-child(even) {
            padding-left: 0
        }

    .services-heading {
        gap: 24px
    }

    .service-interface {
        margin-top: 50px
    }

    .service-tabs {
        grid-template-columns: 1fr
    }

        .service-tabs button {
            border-right: 0;
            font-size: 20px
        }

    .service-panels article {
        min-height: auto;
        grid-template-rows: 250px auto
    }

        .service-panels article > div {
            padding: 30px 22px 34px
        }

    .service-panels h3 {
        font-size: 30px
    }

    .experience-points article {
        grid-template-columns: 40px 1fr
    }

    .experience-points p {
        grid-column: 2
    }

    .testimonial-grid {
        margin-top: 50px
    }

        .testimonial-grid blockquote {
            font-size: 25px
        }

    .gallery-grid {
        grid-template-columns: 1fr
    }

    .photo-brief-large {
        grid-column: auto
    }

    .photo-brief {
        min-height: 330px
    }

    .gallery-heading {
        gap: 24px
    }

    .faq-grid {
        gap: 40px
    }

    summary {
        font-size: 22px;
        padding: 23px 0
    }

    .location-card, .appointment-form-card {
        padding: 42px 24px
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .appointment-form-card h2 {
        font-size: 48px
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 42px
    }

    .footer-brand {
        grid-column: auto
    }

    .footer-bottom {
        flex-direction: column;
        margin-top: 50px;
        padding-bottom: 80px
    }

        .footer-bottom div {
            flex-wrap: wrap;
            gap: 12px 20px
        }

    .mobile-cta-bar {
        position: fixed;
        z-index: 70;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        background: #070706;
        color: white;
        padding: 8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
        box-shadow: 0 -10px 30px rgba(0,0,0,.25)
    }

        .mobile-cta-bar a {
            min-height: 48px;
            display: grid;
            place-items: center;
            text-transform: uppercase;
            letter-spacing: .1em;
            font-size: 14px;
            border: 1px solid rgba(255,255,255,.16)
        }

            .mobile-cta-bar a:last-child {
                background: linear-gradient(120deg,#9c7336,#d3b477);
                border-color: transparent
            }

    .site-footer {
        padding-bottom: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *, *:before, *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}
a:hover {
    color: inherit;
}

.subpage-hero {
    position: relative;
    min-height: 580px;
    padding-top: 124px;
    overflow: hidden;
    isolation: isolate;
    background: var(--ink);
    color: #fff;
}

    /* Homepage-inspired marble background and diagonal hairlines. */
    .subpage-hero .hero-marble {
        position: absolute;
        z-index: -3;
        inset: 0;
        background: radial-gradient(circle at 5% 82%, rgba(255, 255, 255, .055), transparent 27%), radial-gradient(circle at 28% 20%, rgba(177, 139, 79, .13), transparent 32%), linear-gradient(105deg, #050504 0%, #0e0d0b 50%, #15120e 100%);
    }

        .subpage-hero .hero-marble::before,
        .subpage-hero .hero-marble::after {
            content: "";
            position: absolute;
            width: 69%;
            height: 1px;
            left: -9%;
            top: 45%;
            transform: rotate(-26deg);
            background: linear-gradient( 90deg, transparent, rgba(201, 169, 108, .24), transparent );
            pointer-events: none;
        }

        .subpage-hero .hero-marble::after {
            width: 58%;
            top: 79%;
            left: 26%;
            transform: rotate(14deg);
            opacity: .42;
        }

    /* Keep the homepage orbit only on the left side. */
    .subpage-hero .hero-orbit {
        position: absolute;
        z-index: -1;
        width: 560px;
        height: 560px;
        left: -365px;
        top: 66px;
        border: 1px solid rgba(205, 169, 103, .42);
        border-radius: 50%;
        box-shadow: 0 0 86px rgba(181, 141, 79, .07);
        pointer-events: none;
    }

        .subpage-hero .hero-orbit::after {
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            top: 122px;
            right: 44px;
            border-radius: 50%;
            background: #fff0bd;
            box-shadow: 0 0 24px 8px rgba(230, 194, 122, .42);
        }

.subpage-hero__inner {
    position: relative;
    min-height: 456px;
    display: flex;
    align-items: center;
}

.subpage-hero__content {
    position: relative;
    z-index: 2;
    width: min(920px, 78%);
    padding: 34px 0 36px 80px;
}

.subpage-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0 0 27px;
    padding: 0;
    list-style: none;
    color: #aaa198;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

    .subpage-breadcrumb li {
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }

        .subpage-breadcrumb li:not(:last-child)::after {
            content: "/";
            color: var(--ink);
        }

    .subpage-breadcrumb a {
        transition: color .2s ease;
    }

        .subpage-breadcrumb a:hover,
        .subpage-breadcrumb a:focus-visible {
            color: var(--gold-2);
        }

    .subpage-breadcrumb [aria-current="page"] {
        color: var(--ink);
    }
    .subpage-breadcrumb a {
        color: var(--ink);
    }
    .subpage-hero__content .eyebrow {
        margin-bottom: 18px;
    }

.subpage-hero__title {
    max-width: 900px;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(58px, 5.5vw, 84px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.045em;
    text-wrap: balance;
}

    .subpage-hero__title em {
        color: var(--gold-2);
        font-style: normal;
    }

.subpage-hero__description {
    max-width: 680px;
    margin: 24px 0 0;
    color: #d7d0c6;
    font-size: 17px;
    line-height: 1.68;
}

.subpage-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    margin-top: 28px;
}

    .subpage-hero__actions .text-link {
        color: #d9d1c7;
    }

.subpage-hero__bottom-line {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient( 90deg, rgba(215, 189, 135, .5), rgba(255, 255, 255, .1) 42%, transparent 88% );
}

@media (max-width: 1200px) {
    .subpage-hero__content {
        width: min(850px, 84%);
        padding-left: 20px;
    }
}

@media (max-width: 980px) {
    .subpage-hero {
        min-height: 550px;
        padding-top: 124px;
    }

    .subpage-hero__inner {
        min-height: 426px;
    }

    .subpage-hero__content {
        width: min(760px, 92%);
        padding: 54px 0 58px;
    }

    .subpage-hero__title {
        font-size: clamp(58px, 10vw, 82px);
    }
}

@media (max-width: 680px) {
    .subpage-hero {
        min-height: auto;
        padding-top: 106px;
    }

        .subpage-hero .hero-orbit {
            width: 440px;
            height: 440px;
            left: -315px;
            top: 96px;
        }

    .subpage-hero__inner {
        min-height: auto;
    }

    .subpage-hero__content {
        width: 100%;
        padding: 52px 0 58px;
    }

    .subpage-breadcrumb {
        gap: 7px;
        margin-bottom: 24px;
        font-size: 9px;
    }

        .subpage-breadcrumb li {
            gap: 7px;
        }

    .subpage-hero__content .eyebrow {
        margin-bottom: 16px;
    }

    .subpage-hero__title {
        font-size: clamp(49px, 14vw, 68px);
        line-height: .96;
    }

    .subpage-hero__description {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.64;
    }

    .subpage-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 17px;
        margin-top: 27px;
    }

        .subpage-hero__actions .text-link {
            justify-content: flex-start;
        }
}

@media (prefers-reduced-motion: reduce) {
    .subpage-breadcrumb a {
        transition: none;
    }
}
.breadcrumb-home svg {
    display: block;
    width: 15px;
    height: 15px;
}


#location.section, #main-content .doctor-introduction.section {
    padding: 75px 0;
}

/*Docotor Page*/
.doctor-introduction {
    background: var(--white);
}

.doctor-introduction__grid {
    display: grid;
    /*    grid-template-columns: minmax(360px, 44fr) minmax(0, 56fr);
    gap: 110px;*/
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    gap: clamp(40px, 6vw, 110px);
    align-items: center;
}

.doctor-profile-visual {
    position: relative;
    max-width: 640px;
}

    .doctor-profile-visual::before {
        content: "";
        position: absolute;
        inset: -28px 30px 30px -28px;
        border: 1px solid rgba(181, 141, 79, .32);
        pointer-events: none;
    }

.doctor-profile-visual__image {
    position: relative;
    overflow: hidden;
    background: #171511;
    box-shadow: var(--shadow);
}

    .doctor-profile-visual__image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(7, 7, 6, .58), transparent 42%), linear-gradient(90deg, transparent 68%, rgba(8, 7, 6, .16));
        pointer-events: none;
    }

.doctor-profile-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 54% 45%;
    filter: saturate(.78) contrast(1.04);
}

.doctor-profile-stamp {
    position: absolute;
    z-index: 3;
    top: 28px;
    right: -20px;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(215, 189, 135, .48);
    border-radius: 50%;
    background: rgba(10, 9, 8, .84);
    color: var(--gold-2);
    font-family: var(--display);
    font-size: 25px;
    letter-spacing: .07em;
    backdrop-filter: blur(12px);
}

.doctor-profile-caption {
    position: absolute;
    z-index: 3;
    right: -34px;
    bottom: 28px;
    width: min(320px, 78%);
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(11, 10, 8, .82);
    color: #fff;
    backdrop-filter: blur(14px);
}

    .doctor-profile-caption strong,
    .doctor-profile-caption small {
        display: block;
    }

    .doctor-profile-caption strong {
        font-family: var(--display);
        font-size: 23px;
        font-weight: 400;
        line-height: 1.15;
    }

    .doctor-profile-caption small {
        margin-top: 8px;
        color: #c6bdb1;
        font-size: 11px;
        line-height: 1.55;
    }

.doctor-story__label {
    margin-bottom: 18px;
}

.doctor-story h2,
.doctor-complex__heading h2,
.doctor-focus__intro h2,
.doctor-practice__heading h2,
.doctor-cta__copy h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.045em;
}

.doctor-story h2 {
    max-width: 760px;
    font-size: clamp(52px, 4.7vw, 78px);
}

.doctor-story__lead {
    max-width: 760px;
    margin: 34px 0 0;
    font-family: var(--display);
    font-size: 27px;
    line-height: 1.43;
}

.doctor-story__body {
    max-width: 720px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.82;
}

.doctor-story__signature {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
    color: #8d642c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

    .doctor-story__signature::before {
        content: "";
        width: 48px;
        height: 1px;
        background: currentColor;
    }

/* ================================================================
     CREDENTIAL RAIL
     ================================================================ */

.doctor-credentials {
    background: var(--ivory);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.doctor-credentials__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.doctor-credential {
    min-height: 190px;
    padding: 36px 32px 34px 0;
    border-right: 1px solid var(--line);
}

    .doctor-credential + .doctor-credential {
        padding-left: 32px;
    }

    .doctor-credential:last-child {
        border-right: 0;
    }

    .doctor-credential span,
    .doctor-credential strong,
    .doctor-credential small {
        display: block;
    }

    .doctor-credential span {
        color: #8d642c;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .doctor-credential strong {
        margin-top: 24px;
        font-family: var(--display);
        font-size: 27px;
        font-weight: 400;
        line-height: 1.15;
    }

    .doctor-credential small {
        margin-top: 12px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
    }
/* ================================================================
     COMPLEX CARE STORY
     ================================================================ */

.doctor-complex {
    position: relative;
    overflow: hidden;
    background: #0c0b0a;
    color: #fff;
}

    .doctor-complex::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 100% 0%, rgba(181, 141, 79, .18), transparent 34%), linear-gradient(115deg, transparent 0 64%, rgba(255, 255, 255, .025) 64% 65%, transparent 65%);
        pointer-events: none;
    }

.doctor-complex__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    gap: 100px;
    align-items: start;
}

.doctor-complex__heading h2 {
    max-width: 720px;
    font-size: clamp(52px, 4.8vw, 80px);
}

.doctor-complex__body {
    padding-top: 55px;
}

    .doctor-complex__body > p {
        margin: 0;
        color: #b8afa4;
        font-size: 18px;
        line-height: 1.85;
    }

        .doctor-complex__body > p + p {
            margin-top: 24px;
        }

.doctor-complex__quote {
    margin: 46px 0 0;
    padding: 32px 0 0;
    border-top: 1px solid var(--line-light);
    font-family: var(--display);
    font-size: 30px;
    line-height: 1.35;
}

    .doctor-complex__quote em {
        color: var(--gold-2);
        font-style: normal;
    }
/* ================================================================
     RESPONSIVE
     ================================================================ */

@media (max-width: 1100px) {
    .doctor-introduction__grid,
    .doctor-complex__grid,
    .doctor-practice__heading,
    .doctor-cta__grid {
        gap: 60px;
    }

    .doctor-introduction__grid {
        grid-template-columns: minmax(330px, 44fr) minmax(0, 56fr);
    }

    .doctor-focus__grid {
        gap: 60px;
    }

    .doctor-credentials__grid,
    .doctor-practice-facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .doctor-credential:nth-child(2),
    .doctor-practice-fact:nth-child(2) {
        border-right: 0;
    }

    .doctor-credential:nth-child(-n+2),
    .doctor-practice-fact:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 900px) {
    .subpage-hero__content {
        width: min(820px, 94%);
        padding-left: 24px;
    }

    .doctor-introduction__grid,
    .doctor-complex__grid,
    .doctor-focus__grid,
    .doctor-practice__heading,
    .doctor-cta__grid {
        grid-template-columns: 1fr;
    }

    .doctor-introduction__grid,
    .doctor-complex__grid,
    .doctor-focus__grid,
    .doctor-practice__heading,
    .doctor-cta__grid {
        gap: 58px;
    }

    .doctor-profile-visual {
        max-width: 650px;
    }

    .doctor-complex__body {
        padding-top: 0;
    }

    .doctor-focus__intro {
        position: static;
    }

    .doctor-focus-row {
        grid-template-columns: 48px 1fr;
    }

        .doctor-focus-row p {
            grid-column: 2;
        }

    .doctor-cta__actions {
        max-width: 420px;
    }
}

@media (max-width: 680px) {
    .subpage-hero {
        min-height: auto;
        padding-top: 106px;
    }

        .subpage-hero .hero-orbit {
            width: 440px;
            height: 440px;
            left: -318px;
            top: 105px;
        }

    .subpage-hero__inner {
        min-height: 474px;
    }

    .subpage-hero__content {
        width: 100%;
        padding: 48px 0 54px;
    }

    .subpage-hero__title {
        font-size: clamp(49px, 14vw, 66px);
    }

    .subpage-hero__description {
        font-size: 15px;
    }

    .subpage-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

        .subpage-hero__actions .text-link {
            justify-content: flex-start;
        }

    .doctor-profile-visual::before {
        inset: -14px 14px 14px -14px;
    }

    .doctor-profile-stamp {
        right: -4px;
        width: 68px;
        height: 68px;
        font-size: 21px;
    }

    .doctor-profile-caption {
        right: 14px;
        bottom: 16px;
        left: 14px;
        width: auto;
    }

    .doctor-story__lead,
    .doctor-personal-note p {
        font-size: 23px;
    }

    .doctor-credentials__grid,
    .doctor-practice-facts {
        grid-template-columns: 1fr;
    }

    .doctor-credential,
    .doctor-credential + .doctor-credential,
    .doctor-practice-fact,
    .doctor-practice-fact + .doctor-practice-fact {
        min-height: 0;
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

        .doctor-credential:last-child,
        .doctor-practice-fact:last-child {
            border-bottom: 0;
        }

    .doctor-complex__quote {
        font-size: 25px;
    }

    .doctor-focus-row {
        grid-template-columns: 38px 1fr;
        gap: 16px;
        padding: 28px 0;
    }

        .doctor-focus-row h3 {
            font-size: 26px;
        }

    .doctor-personal-note,
    .doctor-languages {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .doctor-practice-facts {
        margin-top: 48px;
    }
}
.doctor-introduction {
    background: var(--white);
}

.doctor-introduction__grid {
    display: grid;
    /*    grid-template-columns: minmax(360px, 44fr) minmax(0, 56fr);
    gap: 110px;*/
/*    grid-template-columns: minmax(0, 44%) minmax(0, 56%);*/
    gap: clamp(40px, 6vw, 110px);
    align-items: center;
    margin-top: 60px;
}

.doctor-profile-visual {
    position: relative;
    max-width: 640px;
}

    .doctor-profile-visual::before {
        content: "";
        position: absolute;
        inset: -28px 30px 30px -28px;
        border: 1px solid rgba(181, 141, 79, .32);
        pointer-events: none;
    }

.doctor-profile-visual__image {
    position: relative;
    overflow: hidden;
    background: #171511;
    box-shadow: var(--shadow);
}

    .doctor-profile-visual__image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(7, 7, 6, .58), transparent 42%), linear-gradient(90deg, transparent 68%, rgba(8, 7, 6, .16));
        pointer-events: none;
    }

.doctor-profile-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 54% 45%;
    filter: saturate(.78) contrast(1.04);
}

.doctor-profile-stamp {
    position: absolute;
    z-index: 3;
    top: 28px;
    right: -15px;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(215, 189, 135, .48);
    border-radius: 50%;
    background: rgba(10, 9, 8, .84);
    color: var(--gold-2);
    font-family: var(--display);
    font-size: 25px;
    letter-spacing: .07em;
    backdrop-filter: blur(12px);
}

.doctor-profile-caption {
    position: absolute;
    z-index: 3;
    right: -34px;
    bottom: 28px;
    width: min(320px, 78%);
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(11, 10, 8, .82);
    color: #fff;
    backdrop-filter: blur(14px);
}

    .doctor-profile-caption strong,
    .doctor-profile-caption small {
        display: block;
    }

    .doctor-profile-caption strong {
        font-family: var(--display);
        font-size: 23px;
        font-weight: 400;
        line-height: 1.15;
    }

    .doctor-profile-caption small {
        margin-top: 8px;
        color: #c6bdb1;
        font-size: 11px;
        line-height: 1.55;
    }

.doctor-story__label {
    margin-bottom: 18px;
}

.doctor-story h2,
.doctor-complex__heading h2,
.doctor-focus__intro h2,
.doctor-practice__heading h2,
.doctor-cta__copy h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.045em;
}

.doctor-story h2 {
    max-width: 760px;
    font-size: clamp(52px, 4.7vw, 78px);
}

.doctor-story__lead {
    max-width: 760px;
    margin: 34px 0 0;
    font-family: var(--display);
    font-size: 27px;
    line-height: 1.43;
}

.doctor-story__body {
    max-width: 720px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.82;
}

.doctor-story__signature {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
    color: #8d642c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

    .doctor-story__signature::before {
        content: "";
        width: 48px;
        height: 1px;
        background: currentColor;
    }
/* ================================================================
     CLINICAL FOCUS
     ================================================================ */

.doctor-focus {
    background: var(--paper);
}

.doctor-focus__grid {
    display: grid;
    grid-template-columns: minmax(280px, 35fr) minmax(0, 65fr);
    gap: 90px;
    align-items: start;
}

.doctor-focus__intro {
    position: sticky;
    top: 150px;
}

    .doctor-focus__intro h2 {
        font-size: clamp(50px, 4.6vw, 76px);
    }

    .doctor-focus__intro > p:last-child {
        max-width: 380px;
        margin: 28px 0 0;
        color: var(--muted);
    }

.doctor-focus-list {
    border-top: 1px solid var(--line);
}

.doctor-focus-row {
    display: grid;
    grid-template-columns: 56px minmax(200px, .9fr) minmax(260px, 1.1fr);
    gap: 28px;
    align-items: start;
    padding: 34px 8px;
    border-bottom: 1px solid var(--line);
}

.doctor-focus-row__number {
    color: #8d642c;
    font-family: var(--display);
    font-size: 17px;
}

.doctor-focus-row h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
}

.doctor-focus-row p {
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}


.appointment-modal .modal-dialog {
    width: min(920px, calc(100% - 32px));
    max-width: 920px;
}

.appointment-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 0;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.appointment-modal .modal-body {
    padding: 0;
}

.appointment-modal .appointment-form-card {
    padding: 66px 70px 70px;
    background: var(--white);
    box-shadow: none;
}

.appointment-modal-close {
    position: absolute;
    z-index: 5;
    top: 20px;
    right: 20px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(20, 18, 14, 0.16);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .appointment-modal-close:hover {
        background: var(--ink);
        color: var(--white);
        transform: rotate(4deg);
    }

    .appointment-modal-close span {
        display: block;
        transform: translateY(-1px);
    }

.modal-backdrop.show {
    opacity: 0.82;
}

.modal-backdrop {
    background: #050504;
}

@media (max-width: 680px) {
    .appointment-modal .modal-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
        align-items: flex-end;
        min-height: calc(100% - 16px);
    }

    .appointment-modal .appointment-form-card {
        padding: 68px 24px 38px;
    }

    .appointment-modal-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
    }
}

.intl-tel-input {
    position: relative;
    display: block !important;
}