/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-outline-style: solid
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

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

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

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

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .container {
        width: 100%
    }

    @media (width>=40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (width>=48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (width>=64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (width>=80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (width>=96rem) {
        .container {
            max-width: 96rem
        }
    }

    .table {
        display: table
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }
}

:root {
    --ink: #2f3a3a;
    --teal: #5fafa8;
    --mint: #dff2ef;
    --aqua: #f2f8f7;
    --cream: #fcfcfa;
    --coral: #f8c8c3;
    --line: #2f3a3a24;
    --font-sans: "Trebuchet MS", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    color: var(--ink);
    font-family: var(--font-sans), Arial, sans-serif;
    background: #fff;
    margin: 0
}

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

button,
input,
select {
    font: inherit
}

.container {
    width: min(1180px, 100% - 48px);
    margin-inline: auto
}

.site-header {
    z-index: 50;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #fffffff5;
    border-bottom: 1px solid #133b3c14;
    height: 84px;
    position: sticky;
    top: 0
}

.nav-wrap {
    justify-content: space-between;
    align-items: center;
    height: 100%;
    display: flex
}

.brand {
    align-items: center;
    gap: 11px;
    display: flex
}

.brand-mark {
    background: var(--teal);
    color: #fff;
    width: 42px;
    height: 42px;
    font-family: var(--font-serif);
    border-radius: 50% 50% 48% 52%;
    place-items: center;
    font-size: 25px;
    display: grid;
    box-shadow: inset 0 0 0 4px #ffffff2e
}

.brand strong,
.brand small {
    letter-spacing: .14em;
    display: block
}

.brand strong {
    font-size: 15px
}

.brand small {
    opacity: .62;
    margin-top: 2px;
    font-size: 8px
}

.nav {
    align-items: center;
    gap: 36px;
    font-size: 14px;
    font-weight: 650;
    display: flex
}

.nav>a:not(.nav-call):hover {
    color: var(--teal)
}

.nav-call {
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    padding: 13px 18px
}

.nav-call span {
    margin-left: 10px
}

.menu-button {
    color: var(--ink);
    background: 0 0;
    border: 0;
    font-size: 28px;
    display: none
}

.hero {
    align-items: center;
    height: calc(100svh - 84px);
    min-height: 620px;
    max-height: 820px;
    display: flex;
    position: relative;
    overflow: hidden
}

.hero-image {
    background: url(/images/clinic-hero.png) 50%/cover no-repeat;
    position: absolute;
    inset: 0
}

.hero-shade {
    background: linear-gradient(90deg, #083435e8 0%, #083435b8 38%, #08343521 67%, #08343500 100%);
    position: absolute;
    inset: 0
}

.hero-content {
    color: #fff;
    position: relative
}

.hero-content h1,
.page-hero h1,
.detail-hero h1 {
    font: 400 clamp(3.2rem, 7vw, 6.2rem)/.98 var(--font-serif);
    letter-spacing: -.04em;
    margin: 22px 0
}

.hero-content p {
    color: #fffc;
    max-width: 610px;
    font-size: 18px;
    line-height: 1.7
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--teal);
    font-size: 11px;
    font-weight: 800
}

.eyebrow.light {
    color: #a9e7da
}

.hero-actions {
    gap: 12px;
    margin-top: 35px;
    display: flex
}

.button {
    border: 1px solid #0000;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 15px 22px;
    font-size: 13px;
    font-weight: 750;
    transition: all .2s;
    display: inline-flex
}

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

.glass {
    color: #fff;
    background: #ffffff14;
    border-color: #ffffff52
}

.outline {
    border-color: var(--teal);
    color: var(--teal);
    background: 0 0
}

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

.full {
    width: 100%
}

.hero-trust {
    color: #ffffffba;
    gap: 30px;
    margin-top: 36px;
    font-size: 12px;
    display: flex
}

.intro-strip {
    background: var(--cream);
    border-bottom: 1px solid var(--line)
}

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

.intro-grid p {
    text-align: center;
    border-right: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0;
    padding: 22px 0;
    font-size: 12px;
    font-weight: 700
}

.intro-grid p:last-child {
    border: 0
}

.intro-grid span {
    color: var(--coral);
    margin-right: 10px
}

.section-heading h2,
.doctor-copy h2,
.appointment-copy h2,
.promise-grid h2,
.simple-cta h2,
.treatment-info h2 {
    font: 400 clamp(2.5rem, 5vw, 4.2rem)/1.05 var(--font-serif);
    letter-spacing: -.035em;
    margin: 16px 0
}

.section-heading.split {
    grid-template-columns: 1.1fr .7fr;
    align-items: end;
    gap: 10%;
    margin-bottom: 50px;
    display: grid
}

.section-heading.split p {
    color: #627778;
    line-height: 1.75
}

.service-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    display: grid
}

.service-card {
    border-radius: 4px;
    flex-direction: column;
    min-height: 330px;
    padding: 30px;
    transition: all .25s;
    display: flex;
    position: relative;
    overflow: hidden
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 50px #1041401a
}

.tone-0 {
    background: #eaf5f1
}

.tone-1 {
    background: #f7efe5
}

.tone-2 {
    background: #e7f1f4
}

.tone-3 {
    background: #f5eee9
}

.service-icon {
    color: var(--teal);
    font-size: 35px
}

.service-number {
    letter-spacing: .1em;
    opacity: .45;
    font-size: 11px;
    position: absolute;
    top: 29px;
    right: 26px
}

.service-card h3 {
    font: 400 25px/1.2 var(--font-serif);
    margin: 58px 0 12px
}

.service-card p {
    color: #607476;
    margin: 0;
    font-size: 14px;
    line-height: 1.6
}

.text-link {
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: auto;
    font-size: 12px;
    font-weight: 800
}

.text-link b {
    margin-left: 8px
}

.text-link.teal {
    color: var(--teal);
    margin-top: 26px;
    display: inline-block
}

.center {
    text-align: center;
    margin-top: 42px
}

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

.doctor-grid {
    grid-template-columns: .9fr 1fr;
    align-items: center;
    gap: 10%;
    display: grid
}

.doctor-photo-wrap {
    max-width: 470px;
    position: relative
}

.doctor-photo {
    aspect-ratio: .82;
    object-fit: cover;
    object-position: center 24%;
    background: #fff;
    width: 100%;
    display: block
}

.experience-badge {
    background: var(--teal);
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: 142px;
    height: 142px;
    display: flex;
    position: absolute;
    bottom: 25px;
    right: -35px;
    box-shadow: 0 15px 40px #0c6d6c40
}

.experience-badge strong {
    font: 400 42px var(--font-serif)
}

.experience-badge span {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    line-height: 1.4
}

.doctor-copy .role {
    color: var(--coral);
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 0 0 25px;
    font-size: 11px;
    font-weight: 800
}

.doctor-copy>p:not(.role) {
    color: #5d7474;
    line-height: 1.8
}

.doctor-copy h4 {
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 30px 0 15px;
    font-size: 11px
}

.interest-list {
    flex-wrap: wrap;
    gap: 9px;
    display: flex
}

.interest-list span {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 30px;
    padding: 8px 12px;
    font-size: 12px
}

.promise-section {
    background: var(--teal);
    color: #fff
}

.promise-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 12%;
    display: grid
}

.promise-grid blockquote {
    font: italic 400 25px/1.55 var(--font-serif);
    color: #d5ece7;
    border-left: 1px solid #ffffff59;
    margin: 0;
    padding-left: 35px
}

.appointment-section {
    background: var(--aqua)
}

.appointment-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10%;
    display: grid
}

.appointment-copy>p {
    color: #607575;
    max-width: 480px;
    line-height: 1.7
}

.contact-mini {
    gap: 15px;
    margin-top: 36px;
    display: grid
}

.contact-mini a {
    flex-direction: column;
    display: flex
}

.contact-mini b {
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--coral);
    font-size: 10px
}

.contact-mini span {
    margin-top: 5px;
    font-size: 14px
}

.appointment-form {
    background: #fff;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 36px;
    display: grid;
    box-shadow: 0 15px 50px #124b4914
}

.appointment-form label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 750
}

.appointment-form input,
.appointment-form select {
    width: 100%;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #bfd0cc;
    border-radius: 0;
    outline: none;
    margin-top: 4px;
    padding: 13px 0;
    font-size: 14px;
    display: block
}

.appointment-form input:focus,
.appointment-form select:focus {
    border-color: var(--teal)
}

.appointment-form .full,
.appointment-form small {
    grid-column: 1/-1
}

.appointment-form small {
    color: #809190;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px
}

.page-hero {
    background: var(--ink);
    color: #fff;
    padding: 115px 0
}

.page-hero h1 {
    margin-bottom: 25px
}

.page-hero p {
    color: #b8d1cf;
    max-width: 600px;
    line-height: 1.75
}

.simple-cta {
    text-align: center;
    background: var(--teal);
    color: #fff;
    padding: 90px 20px
}

.simple-cta p {
    color: #c9e4df;
    margin-bottom: 28px
}

.detail-hero-grid {
    grid-template-columns: 1fr .65fr;
    align-items: center;
    gap: 10%;
    display: grid
}

.back-link {
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 50px;
    font-size: 12px;
    display: block
}

.detail-icon {
    color: var(--teal);
    font-size: 45px
}

.detail-hero p {
    color: #617575;
    max-width: 650px;
    margin-bottom: 28px;
    font-size: 17px;
    line-height: 1.8
}

.detail-art {
    background: linear-gradient(145deg, #e2f3ee, #b8ddd6);
    border-radius: 50% 50% 4px 4px;
    place-items: center;
    height: 480px;
    display: grid
}

.detail-art span {
    color: var(--teal);
    filter: drop-shadow(0 20px 25px #0c6d6c29);
    font-size: 150px
}

.treatment-info {
    grid-template-columns: 1fr .8fr;
    gap: 10%;
    display: grid
}

.treatment-info>div>p {
    color: #617575;
    line-height: 1.8
}

.benefit-list>div {
    border-bottom: 1px solid var(--line);
    align-items: center;
    gap: 25px;
    padding: 22px 0;
    display: flex
}

.benefit-list span {
    color: var(--coral);
    font-size: 10px
}

.benefit-list p {
    font: 400 22px var(--font-serif);
    margin: 0
}

.contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8%;
    display: grid
}

.contact-cards {
    gap: 12px;
    display: grid
}

.contact-cards a {
    background: var(--aqua);
    align-items: flex-start;
    gap: 22px;
    padding: 26px;
    display: flex
}

.contact-cards>a>span {
    color: var(--teal);
    font-size: 25px
}

.contact-cards small,
.contact-cards strong {
    display: block
}

.contact-cards small {
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--coral);
    margin-bottom: 7px;
    font-size: 9px
}

.contact-cards strong {
    font: 400 19px/1.5 var(--font-serif)
}

.map-card {
    background: var(--cream);
    padding: 30px
}

.map-pattern {
    background-color: #dcece6;
    background-image: radial-gradient(#8ebdb3 1px, #0000 1px);
    background-size: 18px 18px;
    place-items: center;
    height: 250px;
    display: grid
}

.map-pattern span {
    background: var(--coral);
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 70px;
    height: 70px;
    font-size: 32px;
    display: grid;
    box-shadow: 0 10px 30px #e88d744d
}

.map-card h3 {
    font: 400 28px var(--font-serif);
    margin: 25px 0 8px
}

.map-card p {
    color: #607575;
    line-height: 1.6
}

footer {
    color: #d3e5e3;
    background: #0d3334;
    padding: 75px 0 25px
}

.footer-grid {
    grid-template-columns: 1.4fr .55fr 1fr .7fr;
    gap: 7%;
    display: grid
}

.footer-brand .brand-mark {
    color: var(--teal);
    background: #fff
}

.footer-grid>div>p {
    color: #9eb8b6;
    font-size: 13px;
    line-height: 1.8
}

.footer-grid h4 {
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #7fb2aa;
    margin: 5px 0 20px;
    font-size: 10px
}

.footer-grid>div>a:not(.brand) {
    margin-bottom: 13px;
    font-size: 13px;
    display: block
}

.footer-bottom {
    color: #769694;
    border-top: 1px solid #ffffff1a;
    justify-content: space-between;
    margin-top: 60px;
    padding-top: 25px;
    font-size: 10px;
    display: flex
}

.sticky-actions {
    z-index: 60;
    flex-direction: column;
    gap: 10px;
    display: flex;
    position: fixed;
    bottom: 20px;
    right: 20px
}

.sticky-actions a {
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 21px;
    display: grid;
    box-shadow: 0 8px 25px #0003
}

.sticky-call {
    background: var(--ink)
}

.sticky-whatsapp {
    background: #25d366
}

@media (width<=900px) {
    .container {
        width: min(100% - 36px, 720px)
    }

    .menu-button {
        display: block
    }

    .nav {
        border-bottom: 1px solid var(--line);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 24px;
        display: none;
        position: absolute;
        top: 84px;
        left: 0;
        right: 0;
        box-shadow: 0 15px 30px #143c3c14
    }

    .nav.open {
        display: flex
    }

    .nav>a {
        padding: 14px
    }

    .hero {
        min-height: 680px
    }

    .hero-shade {
        background: linear-gradient(90deg, #083435e6, #08343591)
    }

    .hero-content h1 {
        font-size: clamp(3.2rem, 9vw, 5.3rem)
    }

    .section {
        padding: 80px 0
    }

    .section-heading.split,
    .doctor-grid,
    .appointment-grid,
    .promise-grid,
    .detail-hero-grid,
    .treatment-info,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 55px
    }

    .service-grid,
    .all-services {
        grid-template-columns: repeat(2, 1fr)
    }

    .doctor-photo-wrap {
        margin: auto
    }

    .footer-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 45px
    }

    .detail-art {
        height: 330px
    }

    .contact-hero {
        padding: 90px 0
    }
}

@media (width<=600px) {
    .container {
        width: calc(100% - 30px)
    }

    .site-header {
        height: 72px
    }

    .nav {
        top: 72px
    }

    .brand-mark {
        width: 38px;
        height: 38px
    }

    .hero {
        align-items: flex-end;
        height: calc(100svh - 72px);
        min-height: 650px;
        padding-bottom: 45px
    }

    .hero-image {
        background-position: 64%
    }

    .hero-shade {
        background: linear-gradient(#08343538, #083435b3 35%, #083435f7 90%)
    }

    .hero-content h1 {
        font-size: 3rem
    }

    .hero-content p {
        font-size: 15px;
        line-height: 1.6
    }

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

    .hero-trust {
        flex-direction: column;
        gap: 12px;
        margin-top: 25px
    }

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

    .intro-grid p {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 14px
    }

    .section {
        padding: 65px 0
    }

    .section-heading h2,
    .doctor-copy h2,
    .appointment-copy h2,
    .promise-grid h2,
    .simple-cta h2,
    .treatment-info h2 {
        font-size: 2.55rem
    }

    .section-heading.split {
        display: block
    }

    .section-heading.split p {
        margin-top: 20px
    }

    .service-grid,
    .all-services {
        grid-template-columns: 1fr
    }

    .service-card {
        min-height: 285px
    }

    .doctor-grid {
        gap: 45px
    }

    .experience-badge {
        width: 115px;
        height: 115px;
        right: -5px
    }

    .experience-badge strong {
        font-size: 33px
    }

    .promise-grid {
        gap: 30px
    }

    .promise-grid blockquote {
        font-size: 20px
    }

    .appointment-form {
        grid-template-columns: 1fr;
        padding: 25px
    }

    .appointment-form .full,
    .appointment-form small {
        grid-column: auto
    }

    .page-hero {
        padding: 80px 0
    }

    .page-hero h1,
    .detail-hero h1 {
        font-size: 3.2rem
    }

    .detail-art {
        height: 260px
    }

    .detail-art span {
        font-size: 100px
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: 10px
    }

    .sticky-actions {
        bottom: 12px;
        right: 12px
    }

    .sticky-actions a {
        width: 48px;
        height: 48px
    }
}

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

    .button,
    .service-card {
        transition: none
    }
}

.hero {
    background: var(--ink);
    align-items: center;
    height: 650px;
    min-height: 0;
    max-height: none
}

.hero-image {
    background-position: 50%;
    width: 52%;
    left: auto
}

.hero-shade {
    background: linear-gradient(90deg, var(--ink) 0%, #133b3c61 24%, transparent 52%);
    left: 48%
}

.hero-content {
    width: min(560px, 43vw);
    margin-left: max(24px, 50vw - 590px);
    margin-right: 0;
    padding-right: 48px
}

.hero-content h1 {
    margin: 17px 0;
    font-size: clamp(3.25rem, 5.3vw, 5.3rem);
    line-height: 1.01
}

.hero-content p {
    max-width: 520px;
    font-size: 16px
}

.hero-actions,
.hero-trust {
    margin-top: 27px
}

.section {
    padding: 88px 0
}

.section-heading h2,
.doctor-copy h2,
.appointment-copy h2,
.promise-grid h2,
.simple-cta h2,
.treatment-info h2 {
    font-size: clamp(2.35rem, 4.2vw, 3.65rem)
}

.section-heading.split {
    margin-bottom: 38px
}

.service-grid {
    gap: 16px
}

.service-card {
    color: #fff;
    background-position: 50%;
    background-size: cover;
    border-radius: 2px;
    justify-content: flex-end;
    min-height: 285px;
    padding: 24px
}

.service-card:before {
    content: "";
    background: linear-gradient(#0000 30%, #0627282e 52%, #062728eb 100%);
    transition: all .25s;
    position: absolute;
    inset: 0
}

.service-card>* {
    z-index: 1;
    position: relative
}

.service-card .service-number {
    color: #fff;
    opacity: .8;
    top: 20px;
    right: 20px
}

.service-card h3 {
    margin: 0 0 8px;
    font-size: 23px
}

.service-card p {
    color: #ffffffc7;
    max-width: 95%;
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.55
}

.service-card .text-link {
    color: #fff;
    margin-top: 0;
    font-size: 10px
}

.service-card:hover:before {
    background: linear-gradient(#0627280d, #062728f5)
}

.services-list-section {
    background: #f7faf8
}

.all-services {
    grid-template-columns: repeat(3, 1fr)
}

.all-services .service-card {
    min-height: 300px
}

.doctor-grid {
    gap: 8%
}

.doctor-photo-wrap {
    max-width: 410px
}

.appointment-form {
    padding: 30px
}

.appointment-section {
    padding-block: 82px
}

.page-hero {
    padding: 92px 0
}

.page-hero h1 {
    font-size: clamp(3rem, 6vw, 5.4rem)
}

.detail-hero {
    background: #f7faf8;
    padding: 65px 0 75px
}

.detail-hero-grid {
    grid-template-columns: .9fr 1.05fr;
    gap: 8%
}

.detail-hero h1 {
    margin: 16px 0;
    font-size: clamp(3rem, 5.5vw, 5rem)
}

.detail-hero p {
    font-size: 16px
}

.detail-photo {
    object-fit: cover;
    width: 100%;
    height: 440px;
    display: block
}

.back-link {
    margin-bottom: 42px
}

.detail-content {
    padding-block: 82px
}

.treatment-info {
    gap: 9%
}

.treatment-info>div>p {
    max-width: 540px;
    font-size: 16px
}

.clinical-note {
    border-left: 3px solid var(--coral);
    margin-top: 30px;
    padding: 4px 0 4px 22px
}

.clinical-note strong,
.aftercare-card small {
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--coral);
    font-size: 10px
}

.clinical-note p {
    margin-bottom: 0;
    font-size: 13px !important
}

.process-list {
    margin-top: 22px
}

.process-list>div {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 35px 1fr;
    gap: 16px;
    padding: 17px 0;
    display: grid
}

.process-list span {
    color: var(--coral);
    font-size: 10px
}

.process-list p {
    font: 400 19px/1.4 var(--font-serif);
    margin: 0
}

.aftercare-section {
    background: var(--ink);
    color: #fff;
    padding-block: 72px
}

.aftercare-grid {
    grid-template-columns: .8fr 1fr .8fr;
    align-items: center;
    gap: 6%;
    display: grid
}

.aftercare-grid h2 {
    font: 400 35px/1.15 var(--font-serif);
    margin: 14px 0
}

.benefit-pills {
    gap: 10px;
    display: grid
}

.benefit-pills span {
    color: #d4e7e4;
    border: 1px solid #ffffff29;
    padding: 13px 15px;
    font-size: 13px
}

.aftercare-card {
    color: var(--ink);
    background: #fff;
    padding: 27px
}

.aftercare-card p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.7
}

.sticky-actions {
    gap: 8px
}

.sticky-actions a {
    width: 50px;
    height: 50px;
    font-size: 19px
}

.sticky-whatsapp {
    position: relative
}

.wa-glyph {
    border: 2px solid #fff;
    border-radius: 50%;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: 13px;
    line-height: 1;
    display: grid;
    transform: rotate(-18deg)
}

.wa-glyph:after {
    content: "";
    border-left: 2px solid #fff;
    width: 7px;
    height: 7px;
    position: absolute;
    bottom: 10px;
    left: 11px;
    transform: rotate(-35deg)
}

@media (width<=900px) {
    .hero {
        height: auto;
        min-height: 620px
    }

    .hero-image {
        width: 50%
    }

    .hero-content {
        width: 45vw;
        margin-left: 24px;
        padding-right: 20px
    }

    .hero-content h1 {
        font-size: clamp(2.8rem, 6vw, 4.2rem)
    }

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

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

    .detail-photo {
        height: 380px
    }

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

    .aftercare-card {
        grid-column: 1/-1
    }
}

@media (width<=600px) {
    .hero {
        background: var(--ink);
        flex-direction: column;
        min-height: 0;
        padding: 0;
        display: flex
    }

    .hero-image {
        background-position: 67%;
        order: 1;
        width: 100%;
        height: 300px;
        position: relative
    }

    .hero-shade {
        display: none
    }

    .hero-content {
        order: 2;
        width: 100%;
        margin: 0;
        padding: 38px 20px 42px
    }

    .hero-content h1 {
        font-size: 2.75rem
    }

    .hero-content p {
        font-size: 14px
    }

    .hero-actions {
        margin-top: 24px
    }

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

    .section {
        padding: 60px 0
    }

    .service-card,
    .all-services .service-card {
        min-height: 265px
    }

    .all-services {
        grid-template-columns: 1fr
    }

    .page-hero {
        padding: 68px 0
    }

    .detail-hero {
        padding: 45px 0 55px
    }

    .detail-photo {
        height: 260px
    }

    .detail-content {
        padding-block: 60px
    }

    .aftercare-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .aftercare-card {
        grid-column: auto
    }
}

@media (width>=901px) {
    .hero-image {
        background-position: 100%;
        width: 56%
    }

    .hero-shade {
        left: 44%
    }
}

.clinic-map {
    background: #dcece6;
    border: 0;
    width: 100%;
    height: 280px;
    display: block
}

.map-card h3 {
    margin-top: 24px
}

.header-logo {
    object-fit: contain;
    width: 218px;
    height: auto;
    display: block
}

.footer-logo {
    object-fit: contain;
    width: 250px;
    height: auto;
    display: block
}

.footer-brand {
    display: inline-flex
}

.footer-bottom a {
    color: #bfe3de;
    font-weight: 700
}

.footer-bottom a:hover {
    color: #fff
}

.menu-button {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 800
}

@media (width<=600px) {
    .header-logo {
        width: 178px
    }

    .footer-logo {
        width: 225px
    }
}

.sticky-call {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    font-size: 9px !important
}

.sticky-whatsapp {
    isolation: isolate
}

.sticky-whatsapp:after {
    content: "";
    z-index: -1;
    background: #25d366;
    width: 11px;
    height: 11px;
    position: absolute;
    bottom: 5px;
    left: 8px;
    transform: rotate(25deg)
}

.whatsapp-symbol {
    color: #fff;
    place-items: center;
    width: 30px;
    height: 30px;
    display: grid
}

.whatsapp-symbol:before,
.whatsapp-mini:before {
    content: "☎";
    color: currentColor;
    font-family: Arial, sans-serif;
    line-height: 1;
    display: block;
    transform: rotate(-18deg)
}

.whatsapp-symbol:before {
    font-size: 26px
}

.whatsapp-mini {
    color: #fff;
    vertical-align: middle;
    background: #25d366;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    display: inline-grid
}

.whatsapp-mini:before {
    font-size: 13px
}

.whatsapp-text-link {
    align-items: center;
    gap: 5px;
    display: flex !important
}

.button-icon {
    width: 22px;
    height: 22px
}

.contact-wa {
    width: 30px;
    height: 30px
}

.contact-wa:before {
    font-size: 18px
}

.phone-card-icon:before {
    content: "☎"
}

.location-card-icon:before {
    content: "⌖"
}

.phone-card-icon,
.location-card-icon {
    color: var(--teal);
    font-size: 25px
}

.sticky-call {
    font-size: 0 !important
}

.sticky-phone-icon:before {
    content: "☎";
    color: #fff;
    font: 26px/1 Arial, sans-serif;
    display: block
}

.sticky-whatsapp:after {
    display: none
}

.whatsapp-symbol {
    filter: brightness(0)invert();
    width: 27px;
    height: 27px;
    display: block
}

.whatsapp-symbol:before,
.whatsapp-mini:before {
    content: none
}

.whatsapp-mini img {
    filter: brightness(0)invert();
    width: 12px;
    height: 12px;
    display: block
}

.button-icon img {
    width: 13px;
    height: 13px
}

.contact-wa img {
    width: 18px;
    height: 18px
}

body,
.site-header {
    background-color: var(--cream)
}

.primary {
    background: var(--coral);
    color: var(--ink)
}

.eyebrow,
.intro-grid span,
.clinical-note strong,
.aftercare-card small {
    color: var(--teal)
}

.section-heading p,
.doctor-copy>p:not(.role),
.appointment-copy>p,
.treatment-info>div>p,
.map-card p {
    color: #111
}

@media (width<=600px) {
    .intro-grid p {
        text-align: left;
        grid-template-columns: 42px 1fr;
        align-items: center;
        gap: 10px;
        display: grid
    }

    .intro-grid p>span {
        text-align: center;
        margin: 0
    }
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}