@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-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial
        }
    }
}

@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-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 {
    .visible {
        visibility: visible
    }

    .relative {
        position: relative
    }

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

    .table {
        display: table
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }
}

:root {
    --primary: #7b7267;
    --secondary: #5d4f41;
    --orange: #fa9a00;
    --blue: #0195e7;
    --green: #74af17;
    --brown: #5b5041;
    --ivory: #f8f2eb;
    --ivory-light: #faf8f2;
    --beige: #e6dbca;
    --dark: #474747;
    --muted: #786f66;
    --paper: #fff;
    --line: #5b504129;
    --inner: 1600px;
    --content: 1400px;
    --shadow: 0 24px 70px #5b50411f
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
}

body {
/*    color: var(--dark);*/
    letter-spacing: -.0375em;
    word-break: keep-all;
    text-rendering: optimizelegibility;
    background: #fafaf8;
    margin: 0;
    font-family: Pretendard, Noto Sans KR, Apple SD Gothic Neo, Malgun Gothic, sans-serif;
/*    font-size: 19px;*/
    line-height: 1.8
}

body,
button,
a {
    -webkit-font-smoothing: antialiased
}

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

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

/*p,*/
h1,
h2,
h3,
figure,
dl,
dd {
    margin: 0
}

address {
    font-style: normal
}

main {
    padding-top: 94px
}

.shell {
    width: min(var(--content), calc(100% - 80px));
    margin-inline: auto
}

.site-header {
    z-index: 100;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #faf8f2f7;
    border-bottom: 1px solid #5b50411a;
    height: 94px;
    position: fixed;
    inset: 0 0 auto
}

.header-inner {
    width: min(var(--inner), calc(100% - 64px));
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    height: 94px;
    margin: auto;
    display: grid
}

.brand {
    align-items: center;
    gap: 12px;
    width: 300px;
    display: flex
}

.brand img {
    object-fit: contain;
    flex: none;
    width: 46px;
    height: 46px
}

.brand>span {
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
    display: flex
}

.brand strong {
    color: var(--brown);
    letter-spacing: -.07em;
    white-space: nowrap;
    font-size: 19px;
    font-weight: 760
}

.brand small {
    color: #8d8277;
    letter-spacing: .1em;
    white-space: nowrap;
    margin-top: 5px;
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700
}

.desktop-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    height: 100%;
    display: grid
}

.desktop-nav>a {
    color: var(--brown);
    text-align: center;
    letter-spacing: -.055em;
    place-items: center;
    padding: 0 8px;
    font-size: clamp(13px, .88vw, 16px);
    font-weight: 600;
    display: grid;
    position: relative
}

.desktop-nav>a:after {
    content: "";
    background: var(--orange);
    height: 2px;
    transition: left .18s, right .18s;
    position: absolute;
    bottom: 17px;
    left: 50%;
    right: 50%
}

.desktop-nav>a:hover:after,
.desktop-nav>a:focus-visible:after {
    left: 27%;
    right: 27%
}

.mega-nav {
    visibility: hidden;
    opacity: 0;
    background: #f8f2ebfa;
    border-top: 1px solid #5b504114;
    max-height: 0;
    transition: max-height .26s, opacity .18s, visibility .18s;
    position: absolute;
    top: 94px;
    left: 0;
    right: 0;
    overflow: hidden;
    box-shadow: 0 20px 35px #5b504114
}

.site-header:hover .mega-nav,
.site-header:focus-within .mega-nav {
    visibility: visible;
    opacity: 1;
    max-height: 430px
}

.mega-nav-inner {
    width: min(var(--inner), calc(100% - 64px));
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    margin: auto;
    padding: 26px 0 34px;
    display: grid
}

.mega-columns {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    display: grid
}

.mega-columns>div {
    border-left: 1px solid #5b50411c;
    flex-direction: column;
    gap: 7px;
    padding: 0 12px;
    display: flex
}

.mega-columns>div:last-child {
    border-right: 1px solid #5b50411c
}

.mega-columns>div.active {
    background: #e6dbca47
}

.mega-columns a {
    color: #736a61;
    text-align: center;
    letter-spacing: -.055em;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.45
}

.mega-columns a:hover {
    color: var(--orange);
    font-weight: 700
}

.mobile-menu {
    display: none
}

.quick-menu {
    z-index: 90;
    background: #fffffff7;
    border: 1px solid #5b50411f;
    border-right: 0;
    border-radius: 28px 0 0 28px;
    width: 94px;
    position: fixed;
    top: 50%;
    right: 0;
    overflow: hidden;
    transform: translateY(-43%);
    box-shadow: 0 14px 36px #5b50411a
}

.quick-menu>div>a,
.quick-menu .top-button {
    color: #766d64;
    text-align: center;
    border-bottom: 1px solid #5b504117;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 69px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    transition: background .16s, color .16s;
    display: flex
}

.quick-menu>div>a:hover {
    background: var(--ivory);
    color: var(--orange)
}

.quick-menu img {
    object-fit: contain;
    width: 26px;
    height: 26px
}

.quick-menu .top-button {
    color: #fff;
    background: #af8b68;
    border-bottom: 0;
    min-height: 57px
}

.quick-menu .top-button img {
    filter: brightness(0)invert();
    width: 15px;
    height: 15px
}

.hero {
    background: radial-gradient(circle at 7% 92%, #fa9a001f 0 6%, transparent 6.3%), radial-gradient(circle at 94% 8%, #74af171a 0 11%, transparent 11.3%), var(--ivory-light);
    align-items: center;
    min-height: 760px;
    padding: 86px 0 94px;
    display: flex;
    position: relative;
    overflow: hidden
}

.hero:after {
    content: "";
    border: 90px solid #e6dbca57;
    border-radius: 50%;
    width: 560px;
    height: 560px;
    position: absolute;
    bottom: -250px;
    right: -150px
}

.hero-grid,
.psg-hero-grid {
    z-index: 1;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: clamp(54px, 6vw, 110px);
    display: grid;
    position: relative
}

.hero-copy {
    padding-left: clamp(0px, 2vw, 30px)
}

.eyebrow {
    color: var(--orange);
    letter-spacing: .16em;
    margin-bottom: 16px;
    font-family: Nata Sans, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800
}

.hero h1,
.psg-hero h1 {
    color: var(--brown);
    letter-spacing: -.07em;
    font-size: clamp(48px, 5vw, 74px);
    font-weight: 650;
    line-height: 1.08
}

.hero h1:before,
.psg-hero h1:before {
/*    content: "";
    background: url(./img/symbol-title.svg) 50%/contain no-repeat;
    width: 62px;
    height: 35px;
    margin: 0 0 18px;
    display: block*/
}

.hero h1 span {
    color: var(--dark);
    margin-top: 20px;
    font-size: .58em;
    font-weight: 600;
    line-height: 1.35;
    display: block
}

.hero-answer {
    color: #6d655d;
    max-width: 690px;
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.9
}

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

.button {
    border: 1px solid #0000;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 0 29px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    transition: transform .17s, background .17s, color .17s;
    display: inline-flex
}

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

.button-primary {
    background: var(--orange);
    color: #fff
}

.button-primary:hover {
    background: #e88900
}

.button-ghost {
    color: var(--brown);
    background: #ffffff8c;
    border-color: #5b504147
}

.button-light {
    color: var(--brown);
    background: #fff
}

.button-light-outline {
    color: #fff;
    border-color: #ffffff85
}

.button-secondary {
    border-color: var(--line);
    color: var(--brown);
    background: #fff
}

.hero-trust {
    color: #766e65;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 30px 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
    display: flex
}

.hero-trust li:before {
    content: "●";
    color: var(--green);
    vertical-align: .16em;
    margin-right: 8px;
    font-size: 8px
}

.hero-media {
    margin-right: 28px;
    position: relative
}

.hero-media:before {
    content: "";
    border: 1px solid #74af1752;
    border-radius: 250px 24px;
    position: absolute;
    inset: -22px 32px 32px -22px
}

.hero-media img {
    aspect-ratio: 1.26;
    object-fit: cover;
    width: 100%;
    box-shadow: var(--shadow);
    border-radius: 250px 24px;
    position: relative
}

.hero-media figcaption {
    background: #fffffff0;
    border-radius: 22px 0 22px 22px;
    min-width: 270px;
    padding: 19px 24px;
    position: absolute;
    bottom: 10px;
    right: -18px;
    box-shadow: 0 12px 30px #5b50411f
}

.hero-media figcaption strong,
.hero-media figcaption span {
    display: block
}

.hero-media figcaption strong {
    color: var(--brown);
    font-size: 16px
}

.hero-media figcaption span {
    color: var(--muted);
    margin-top: 3px;
    font-size: 12px
}

.quick-route {
    border-bottom: 1px solid var(--line);
    background: #fff
}

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

.quick-route-grid a {
    border-right: 1px solid var(--line);
    align-items: center;
    gap: 16px;
    min-height: 108px;
    padding: 0 32px;
    transition: background .18s;
    display: flex
}

.quick-route-grid a:first-child {
    border-left: 1px solid var(--line)
}

.quick-route-grid a:hover {
    background: var(--ivory)
}

.quick-route-grid span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.quick-route-grid strong {
    color: var(--brown);
    font-size: 17px;
    font-weight: 650
}

.section {
    padding: 126px 0;
    scroll-margin-top: 108px
}

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

.section-dark {
    background: radial-gradient(circle at 100% 0, #e6dbca1c, transparent 31%), var(--brown);
    color: #fff
}

.section-heading {
    margin-bottom: 58px
}

.section-heading h2,
.editorial-copy h2,
.treatment-intro h2,
.doctor-copy h2,
.faq-intro h2,
.location-card h2,
.psg-section-title h2,
.preparation-grid h2,
.results-grid h2 {
    color: var(--brown);
    letter-spacing: -.065em;
    font-size: clamp(34px, 3.5vw, 50px);
    font-weight: 600;
    line-height: 1.3
}

.split-heading {
    grid-template-columns: 1.12fr .88fr;
    align-items: end;
    gap: 100px;
    display: grid
}

.split-heading>p,
.centered-heading>p,
.faq-intro>p,
.psg-section-title>p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.9
}

.centered-heading {
    text-align: center;
    max-width: 820px;
    margin-inline: auto
}

.centered-heading>p {
    max-width: 680px;
    margin: 18px auto 0
}

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

.symptom-card {
    background: #fff;
    border: 1px solid #5b504121;
    border-radius: 28px;
    min-height: 242px;
    padding: 34px 32px;
    transition: transform .18s, box-shadow .18s;
    position: relative;
    overflow: hidden
}

.symptom-card:after {
    content: "";
    border: 22px solid var(--ivory);
    border-radius: 50%;
    width: 110px;
    height: 110px;
    position: absolute;
    bottom: -45px;
    right: -45px
}

.symptom-card:nth-child(3n+2):after {
    border-color: #0195e714
}

.symptom-card:nth-child(3n+3):after {
    border-color: #74af171a
}

.symptom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 44px #5b50411a
}

.symptom-card>span,
.treatment-cards article>span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.symptom-card h3 {
    color: var(--brown);
    margin-top: 31px;
    font-size: 22px;
    font-weight: 650
}

.symptom-card p {
    z-index: 1;
    color: var(--muted);
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.75;
    position: relative
}

.editorial-grid,
.doctor-grid,
.location-grid,
.preparation-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(60px, 7vw, 112px);
    display: grid
}

.editorial-image {
    padding: 0 24px 24px 0;
    position: relative
}

.editorial-image:before {
    content: "";
    background: var(--beige);
    border-radius: 18px 110px;
    position: absolute;
    inset: 28px 0 0 28px
}

.editorial-image img {
    aspect-ratio: 1.12;
    object-fit: cover;
    border-radius: 18px 110px;
    width: 100%;
    position: relative
}

.editorial-image figcaption {
    color: var(--muted);
    margin: 18px 0 -18px 24px;
    font-size: 14px;
    position: relative
}

.editorial-copy .lead,
.treatment-intro>p:last-child,
.doctor-quote,
.results-grid .lead {
    color: #6b635b;
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.95
}

.check-list {
    gap: 13px;
    margin: 31px 0;
    padding: 0;
    list-style: none;
    display: grid
}

.check-list li {
    color: #5e574f;
    padding-left: 30px;
    font-size: 15px;
    font-weight: 600;
    position: relative
}

.check-list li:before {
    content: "";
    border-bottom: 2px solid var(--green);
    border-left: 2px solid var(--green);
    width: 13px;
    height: 7px;
    position: absolute;
    top: .68em;
    left: 2px;
    transform: rotate(-45deg)
}

.text-link {
    color: var(--orange);
    align-items: center;
    font-size: 15px;
    font-weight: 750;
    display: inline-flex
}

.text-link:after {
    content: "→";
    margin-left: 10px
}

.process-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.process-list li {
    background: var(--ivory);
    border-radius: 22px;
    min-height: 290px;
    padding: 31px 28px
}

.process-list li:nth-child(2) {
    background: #f3f7eb
}

.process-list li:nth-child(3) {
    background: #eef6fa
}

.process-list li:nth-child(4) {
    background: #f6efe7
}

.process-list span,
.test-day-list span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.process-list h3 {
    color: var(--brown);
    margin-top: 66px;
    font-size: 21px;
    font-weight: 650
}

.process-list p {
    color: var(--muted);
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.8
}

.light-heading h2,
.light-heading>p {
    color: #fff
}

.light-heading .eyebrow {
    color: #f7b95a
}

.photo-story {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    display: grid
}

.photo-story figure {
    background: #fff;
    border-radius: 24px;
    overflow: hidden
}

.photo-story img {
    aspect-ratio: 1.32;
    object-fit: cover;
    width: 100%
}

.photo-story .equipment-figure img {
    object-fit: contain;
    padding: 46px 32px
}

.photo-story figcaption {
    min-height: 80px;
    color: var(--brown);
    flex-direction: column;
    justify-content: center;
    padding: 12px 21px;
    font-size: 15px;
    font-weight: 700;
    display: flex
}

.photo-story figcaption span {
    color: var(--orange);
    letter-spacing: .12em;
    margin-bottom: 4px;
    font-size: 10px
}

.center-action {
    justify-content: center;
    margin-top: 44px;
    display: flex
}

.treatment-grid {
    grid-template-columns: .78fr 1.22fr;
    align-items: start;
    gap: 100px;
    display: grid
}

.treatment-intro {
    position: sticky;
    top: 132px
}

.treatment-cards {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    display: grid
}

.treatment-cards article {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 24px;
    min-height: 244px;
    padding: 32px
}

.treatment-cards article:nth-child(2n)>span {
    color: var(--blue)
}

.treatment-cards h3 {
    color: var(--brown);
    margin-top: 49px;
    font-size: 23px;
    font-weight: 650
}

.treatment-cards p {
    color: var(--muted);
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.8
}

.insurance-section {
    background: #f3f7eb;
    padding: 80px 0
}

.insurance-grid {
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: 90px;
    display: grid
}

.insurance-grid h2 {
    color: var(--brown);
    letter-spacing: -.06em;
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 620;
    line-height: 1.35
}

.insurance-grid>p {
    color: #5f6952;
    font-size: 16px;
    line-height: 1.95
}

.doctor-grid {
    align-items: end
}

.doctor-portrait {
    background: radial-gradient(circle at 50% 38%, #fff 0, #f8f2eb 58%, #e6dbca 100%);
    border-radius: 260px 260px 24px 24px;
    justify-content: center;
    align-items: flex-end;
    min-height: 600px;
    display: flex;
    overflow: hidden
}

.doctor-portrait img {
    object-fit: contain;
    object-position: center bottom;
    width: 93%;
    height: 600px
}

.doctor-quote {
    border-left: 3px solid var(--orange);
    background: var(--ivory-light);
    padding: 22px 25px
}

.credential-list {
    border-top: 1px solid var(--line);
    margin-top: 34px
}

.credential-list>div {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 100px 1fr;
    gap: 25px;
    padding: 18px 0;
    display: grid
}

.credential-list dt {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.credential-list dd {
    color: #5f5851;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7
}

.faq-section {
    background: var(--ivory-light)
}

.faq-grid {
    grid-template-columns: .65fr 1.35fr;
    align-items: start;
    gap: 90px;
    display: grid
}

.faq-intro {
    position: sticky;
    top: 132px
}

.faq-intro>p {
    margin-top: 18px
}

.faq-list {
    border-top: 2px solid var(--brown)
}

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

.faq-list summary {
    cursor: pointer;
    min-height: 84px;
    color: var(--brown);
    align-items: center;
    gap: 21px;
    padding: 19px 6px;
    font-size: 17px;
    font-weight: 650;
    list-style: none;
    display: flex
}

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

.faq-list summary span {
    color: var(--orange);
    flex: none;
    font-size: 13px;
    font-weight: 800
}

.faq-list summary>div {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.faq-list summary small {
    color: #978c81;
    letter-spacing: -.02em;
    font-size: 10px;
    font-weight: 650
}

.faq-list summary strong {
    color: var(--brown);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.5
}

.faq-list summary:after {
    content: "+";
    color: var(--orange);
    margin-left: auto;
    font-size: 25px;
    font-weight: 400
}

.faq-list details[open] summary:after {
    content: "–"
}

.faq-list details p {
    color: var(--muted);
    padding: 0 49px 29px;
    font-size: 15px;
    line-height: 1.9
}

.location-section {
    background: #fff
}

.location-card address {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
    padding: 24px 0;
    display: flex
}

.location-card address strong {
    color: var(--brown);
    font-size: 18px;
    line-height: 1.7
}

.location-card address span {
    color: var(--muted);
    font-size: 14px
}

.location-actions {
    gap: 12px;
    margin-top: 30px;
    display: flex
}

.location-image img {
    aspect-ratio: 1.3;
    object-fit: cover;
    border-radius: 22px 120px;
    width: 100%
}

.final-cta {
    background: var(--orange);
    color: #fff;
    padding: 70px 0
}

.final-cta-inner {
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    display: flex
}

.final-cta p {
    font-size: 14px;
    font-weight: 700
}

.final-cta h2 {
    color: #fff;
    letter-spacing: -.06em;
    margin-top: 5px;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 600;
    line-height: 1.35
}

.breadcrumb {
    color: #8a8178;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    font-size: 13px;
    display: flex
}

.breadcrumb strong {
    color: var(--brown)
}

.psg-hero {
    background: linear-gradient(90deg, #f8f2ebfa 0 48%, #f8f2ebbf 66%, #f8f2eb33), url(./img/space/sleep-room.webp) 50%/cover no-repeat;
    padding: 90px 0;
    position: relative;
    overflow: hidden
}

.psg-hero-grid {
    grid-template-columns: .92fr 1.08fr;
    min-height: 550px
}

.psg-hero-grid>div:first-child {
    padding: 48px 48px 48px 0
}

.psg-hero h1 {
    font-size: clamp(43px, 4.6vw, 67px)
}

.psg-hero-media {
    width: 82%;
    box-shadow: var(--shadow);
    background: #fffc;
    border-radius: 210px 210px 24px 24px;
    justify-self: end;
    padding: 13px
}

.psg-hero-media img {
    aspect-ratio: 1/1.03;
    object-fit: cover;
    border-radius: 200px 200px 17px 17px;
    width: 100%
}

.anchor-nav {
    z-index: 70;
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #fffffff5;
    position: sticky;
    top: 94px
}

.anchor-nav-inner {
    grid-template-columns: repeat(6, 1fr);
    display: grid
}

.anchor-nav a {
    border-right: 1px solid var(--line);
    color: #716960;
    place-items: center;
    min-height: 67px;
    font-size: 14px;
    font-weight: 650;
    display: grid
}

.anchor-nav a:first-child {
    border-left: 1px solid var(--line)
}

.anchor-nav a:hover {
    background: var(--ivory);
    color: var(--orange)
}

.psg-two-column,
.results-grid {
    grid-template-columns: .75fr 1.25fr;
    align-items: start;
    gap: 100px;
    display: grid
}

.psg-section-title {
    position: sticky;
    top: 190px
}

.psg-section-title>p:not(.eyebrow) {
    margin-top: 22px
}

.measurement-list {
    border-top: 2px solid var(--brown)
}

.measurement-list>div {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 54px .85fr 1.15fr;
    align-items: center;
    gap: 22px;
    min-height: 80px;
    padding: 13px 10px;
    display: grid
}

.measurement-list span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.measurement-list dt {
    color: var(--brown);
    font-size: 16px;
    font-weight: 700
}

.measurement-list dd {
    color: var(--muted);
    font-size: 14px
}

.reverse-grid .editorial-copy {
    order: 1
}

.reverse-grid .editorial-image {
    order: 2
}

.preparation-grid>figure img {
    aspect-ratio: 1.08;
    object-fit: cover;
    border-radius: 180px 180px 24px 24px;
    width: 100%
}

.prep-list {
    border-top: 1px solid var(--line);
    margin-top: 32px
}

.prep-list article {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 45px 1fr;
    gap: 20px;
    padding: 17px 0;
    display: grid
}

.prep-list article>span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.prep-list h3 {
    color: var(--brown);
    font-size: 16px;
    font-weight: 700
}

.prep-list p {
    color: var(--muted);
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.7
}

.test-day-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.test-day-list li {
    border: 1px solid #fff3;
    border-radius: 22px;
    min-height: 215px;
    padding: 27px
}

.test-day-list span,
.test-day-list strong {
    display: block
}

.test-day-list strong {
    color: #fff;
    margin-top: 40px;
    font-size: 19px
}

.test-day-list p {
    color: #ffffffb8;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7
}

.psg-wide-image {
    border-radius: 24px;
    margin-top: 25px;
    overflow: hidden
}

.psg-wide-image img {
    object-fit: cover;
    width: 100%;
    max-height: 530px
}

.results-grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: center
}

.result-callout {
    border-left: 4px solid var(--green);
    background: #f3f7eb;
    margin-top: 32px;
    padding: 25px 29px
}

.result-callout strong {
    color: var(--brown);
    font-size: 17px
}

.result-callout p {
    color: #65705a;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.8
}

.insurance-card {
    background: var(--ivory);
    border-radius: 34px;
    padding: 45px
}

.insurance-card h3 {
    color: var(--brown);
    font-size: 27px;
    font-weight: 650
}

.insurance-card>p:not(.eyebrow) {
    color: var(--muted);
    margin-top: 17px;
    font-size: 15px;
    line-height: 1.9
}

.insurance-card .button {
    margin-top: 28px
}

.mobile-sticky-cta {
    display: none
}

.clinic-home-hero {
    background: radial-gradient(circle at 8% 85%, #fa9a001f 0 8%, transparent 8.3%), radial-gradient(circle at 90% 10%, #74af171a 0 13%, transparent 13.3%), var(--ivory-light);
    align-items: center;
    min-height: 760px;
    padding: 86px 0 90px;
    display: flex;
    position: relative;
    overflow: hidden
}

.clinic-home-hero:after {
    content: "";
    border: 96px solid #e6dbca4d;
    border-radius: 50%;
    width: 650px;
    height: 650px;
    position: absolute;
    bottom: -310px;
    right: -210px
}

.clinic-home-hero-grid {
    z-index: 1;
    grid-template-columns: .94fr 1.06fr;
    align-items: center;
    gap: clamp(58px, 7vw, 120px);
    display: grid;
    position: relative
}

.clinic-home-copy h1,
.subpage-hero h1,
.doctor-profile-hero h1 {
    color: var(--brown);
    letter-spacing: -.065em;
    font-size: clamp(44px, 4.4vw, 68px);
    font-weight: 650;
    line-height: 1.14
}

.clinic-home-copy h1:before,
.subpage-hero h1:before,
.doctor-profile-hero h1:before {
    content: "";
    background: url(./img/symbol-title.svg) 50%/contain no-repeat;
    width: 61px;
    height: 34px;
    margin-bottom: 20px;
    display: block
}

.clinic-home-copy h1 span,
.subpage-hero h1 span,
.doctor-profile-hero h1 span {
    color: var(--dark);
    margin-top: 13px;
    font-size: .68em;
    line-height: 1.35;
    display: block
}

.clinic-lead {
    color: #6d655d;
    max-width: 700px;
    margin-top: 27px;
    font-size: 16px;
    line-height: 1.95
}

.clinic-home-visual {
    min-height: 620px;
    position: relative
}

.doctor-hero-arch {
    box-shadow: var(--shadow);
    background: radial-gradient(circle at 50% 34%, #fff 0 30%, #0000 58%), linear-gradient(145deg, #ede2d3, #f9f3eb 58%, #dce9cd);
    border-radius: 310px 310px 28px 28px;
    position: absolute;
    inset: 0 28px 0 0;
    overflow: hidden
}

.doctor-hero-arch img {
    object-fit: contain;
    object-position: center bottom
}

.hero-quote-card {
    z-index: 2;
    background: #fffffff0;
    border-radius: 24px 0 24px 24px;
    width: min(370px, 75%);
    padding: 24px 27px;
    position: absolute;
    bottom: 28px;
    right: -8px;
    box-shadow: 0 18px 46px #5b504129
}

.hero-quote-card span,
.hero-quote-card strong,
.hero-quote-card p {
    display: block
}

.hero-quote-card span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.hero-quote-card strong {
    color: var(--brown);
    margin-top: 3px;
    font-size: 25px
}

.hero-quote-card p {
    color: var(--muted);
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.65
}

.clinic-route-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff
}

.clinic-route-strip>div {
    grid-template-columns: repeat(4, 1fr);
    display: grid
}

.clinic-route-strip a {
    border-right: 1px solid var(--line);
    align-items: center;
    gap: 15px;
    min-height: 102px;
    padding: 0 29px;
    transition: background .16s;
    display: flex
}

.clinic-route-strip a:first-child {
    border-left: 1px solid var(--line)
}

.clinic-route-strip a:hover {
    background: var(--ivory)
}

.clinic-route-strip span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.clinic-route-strip strong {
    color: var(--brown);
    font-size: 16px
}

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

.clinic-card {
    background: #fff;
    border: 1px solid #5b504121;
    border-radius: 28px;
    transition: transform .19s, box-shadow .19s;
    overflow: hidden;
    box-shadow: 0 14px 42px #5b50410f
}

.clinic-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 58px #5b504121
}

.clinic-card-image {
    aspect-ratio: 1.5;
    position: relative;
    overflow: hidden
}

.clinic-card-image img {
    object-fit: cover;
    transition: transform .5s
}

.clinic-card:hover .clinic-card-image img {
    transform: scale(1.035)
}

.clinic-card-copy {
    flex-direction: column;
    min-height: 330px;
    padding: 29px 29px 31px;
    display: flex
}

.clinic-card-copy>span {
    color: var(--orange);
    letter-spacing: .12em;
    font-size: 10px;
    font-weight: 850
}

.clinic-card-copy h3 {
    color: var(--brown);
    letter-spacing: -.06em;
    margin-top: 22px;
    font-size: 23px;
    font-weight: 650;
    line-height: 1.45
}

.clinic-card-copy p {
    color: var(--muted);
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.8
}

.clinic-card-copy>strong {
    color: var(--orange);
    margin-top: auto;
    padding-top: 27px;
    font-size: 13px
}

.facility-preview-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    display: grid
}

.facility-preview-grid figure,
.interior-highlight-grid figure,
.interior-gallery figure {
    background: #ece8e2;
    border-radius: 22px;
    min-height: 360px;
    position: relative;
    overflow: hidden
}

.facility-preview-grid img,
.interior-highlight-grid img,
.interior-gallery img {
    object-fit: cover
}

.facility-preview-grid figcaption,
.interior-highlight-grid figcaption,
.interior-gallery figcaption {
    color: #fff;
    background: linear-gradient(#0000, #231f1cc7);
    padding: 45px 20px 18px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.facility-preview-grid figcaption strong,
.facility-preview-grid figcaption span {
    display: block
}

.facility-preview-grid figcaption strong {
    font-size: 16px
}

.facility-preview-grid figcaption span {
    color: #ffffffbd;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5
}

.clinic-info-grid {
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
    display: grid
}

.clinic-info-grid h2,
.parking-grid h2 {
    color: #fff;
    letter-spacing: -.065em;
    font-size: clamp(31px, 3.4vw, 46px);
    font-weight: 620;
    line-height: 1.35
}

.hours-large {
    border-top: 1px solid #ffffff40;
    margin-top: 33px
}

.hours-large>div {
    border-bottom: 1px solid #ffffff26;
    grid-template-columns: 140px 1fr;
    padding: 16px 0;
    display: grid
}

.hours-large dt {
    color: #ffffffad;
    font-size: 14px
}

.hours-large dd {
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700
}

.info-note {
    color: #ffffffa3;
    margin-top: 17px;
    font-size: 12px
}

.clinic-location-panel {
    background: #ffffff0f;
    border: 1px solid #ffffff2e;
    border-radius: 28px;
    padding: 42px
}

.clinic-location-panel address {
    color: #fff;
    margin-top: 25px;
    font-size: 19px;
    font-weight: 700
}

.clinic-location-panel ul {
    color: #ffffffb8;
    gap: 7px;
    margin: 20px 0 0;
    padding: 0;
    font-size: 13px;
    list-style: none;
    display: grid
}

.clinic-location-panel li:before {
    content: "•";
    color: #f4b451;
    margin-right: 9px
}

.medical-review {
    width: min(var(--content), calc(100% - 80px));
    border-bottom: 1px solid var(--line);
    color: #8d847c;
    text-align: right;
    margin: 0 auto;
    padding: 21px 0;
    font-size: 11px
}

.medical-review span {
    color: var(--orange);
    margin-right: 9px;
    font-weight: 800
}

.subpage-hero {
    background: radial-gradient(circle at 95% 0, #74af1717, transparent 26%), var(--ivory-light);
    padding: 90px 0 102px;
    position: relative;
    overflow: hidden
}

.subpage-hero-grid {
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: clamp(55px, 7vw, 110px);
    display: grid
}

.subpage-hero h1 {
    font-size: clamp(41px, 4.2vw, 62px)
}

.subpage-hero-grid>div>p:last-child {
    color: var(--muted);
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.95
}

.subpage-hero-grid>figure {
    min-height: 530px;
    box-shadow: var(--shadow);
    border-radius: 260px 24px;
    position: relative;
    overflow: hidden
}

.subpage-hero-grid>figure img {
    object-fit: cover
}

.philosophy-lead {
    text-align: center;
    max-width: 1020px
}

.philosophy-lead h2,
.doctor-letter-grid h2,
.credentials-grid h2,
.info-hours-grid h2 {
    color: var(--brown);
    letter-spacing: -.065em;
    font-size: clamp(34px, 3.5vw, 50px);
    font-weight: 600;
    line-height: 1.35
}

.philosophy-lead>p:last-child {
    max-width: 780px;
    color: var(--muted);
    margin: 22px auto 0;
    font-size: 16px;
    line-height: 1.95
}

.principle-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 56px;
    display: grid
}

.principle-grid article {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 24px;
    min-height: 260px;
    padding: 28px
}

.principle-grid span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800
}

.principle-grid h3 {
    color: var(--brown);
    margin-top: 50px;
    font-size: 21px
}

.principle-grid p {
    color: var(--muted);
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.75
}

.section-dark .section-heading h2,
.section-dark .section-heading>p:not(.eyebrow) {
    color: #fff
}

.interior-highlight-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    display: grid
}

.interior-highlight-grid figure {
    min-height: 350px
}

.interior-highlight-grid figcaption {
    font-size: 15px;
    font-weight: 700
}

.doctor-profile-hero {
    background: radial-gradient(circle at 8% 94%, #fa9a001c, transparent 22%), var(--ivory-light);
    padding: 66px 0 0
}

.doctor-profile-grid {
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: clamp(60px, 8vw, 130px);
    display: grid
}

.doctor-profile-grid>figure {
    background: linear-gradient(150deg, #e7dbc9, #fffaf3);
    border-radius: 300px 300px 0 0;
    align-self: end;
    min-height: 690px;
    position: relative;
    overflow: hidden
}

.doctor-profile-grid>figure img {
    object-fit: contain;
    object-position: center bottom
}

.doctor-profile-hero h1 {
    font-size: clamp(39px, 4vw, 60px)
}

.doctor-profile-hero blockquote {
    border-left: 3px solid var(--orange);
    color: var(--brown);
    background: #ffffffa6;
    margin: 32px 0 0;
    padding: 22px 25px;
    font-size: 22px;
    font-weight: 650;
    line-height: 1.6
}

.doctor-letter-grid {
    grid-template-columns: .74fr 1.26fr;
    align-items: start;
    gap: 100px;
    display: grid
}

.doctor-letter {
    gap: 22px;
    padding-top: 7px;
    display: grid
}

.doctor-letter p {
    color: var(--muted);
    font-size: 16px;
    line-height: 2
}

.doctor-signature {
    font-weight: 700;
    color: var(--brown) !important
}

.focus-process-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    display: grid
}

.focus-process-grid article {
    background: #fff;
    border-radius: 25px;
    flex-direction: column;
    min-height: 310px;
    padding: 31px;
    display: flex
}

.focus-process-grid span {
    color: var(--orange);
    font-size: 10px;
    font-weight: 850
}

.focus-process-grid h3 {
    color: var(--brown);
    margin-top: 42px;
    font-size: 24px
}

.focus-process-grid p {
    color: var(--muted);
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.8
}

.focus-process-grid a {
    color: var(--orange);
    margin-top: auto;
    padding-top: 24px;
    font-size: 13px;
    font-weight: 750
}

.credentials-grid {
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
    display: grid
}

.credentials-grid ul {
    border-top: 2px solid var(--brown);
    margin: 29px 0 0;
    padding: 0;
    list-style: none
}

.credentials-grid li {
    border-bottom: 1px solid var(--line);
    color: #625b54;
    padding: 15px 4px;
    font-size: 14px;
    line-height: 1.6
}

.credential-accuracy-note {
    background: var(--ivory);
    color: #746b62;
    margin-top: 32px;
    padding: 18px 21px;
    font-size: 12px
}

.equipment-group-list {
    gap: 30px;
    display: grid
}

.equipment-group {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 30px;
    grid-template-columns: .88fr 1.12fr;
    align-items: center;
    gap: 70px;
    padding: 34px;
    display: grid
}

.equipment-group:nth-child(2n) figure {
    order: 2
}

.equipment-group>figure {
    background: var(--ivory);
    border-radius: 23px;
    min-height: 380px;
    position: relative;
    overflow: hidden
}

.equipment-group>figure img {
    object-fit: cover
}

.equipment-group:first-child>figure img {
    object-fit: contain;
    padding: 54px
}

.equipment-group>div>span {
    color: var(--orange);
    font-size: 14px;
    font-weight: 850
}

.equipment-group h2 {
    color: var(--brown);
    margin-top: 13px;
    font-size: 34px;
    font-weight: 650
}

.equipment-group p {
    color: var(--muted);
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.85
}

.equipment-group ul {
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.equipment-group li {
    border: 1px solid var(--line);
    background: var(--ivory-light);
    color: #6c6259;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 700
}

.interior-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    display: grid
}

.interior-gallery figure {
    min-height: 320px
}

.interior-gallery figure.wide {
    grid-column: span 2
}

.interior-gallery figcaption {
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    display: flex
}

.interior-gallery figcaption span {
    color: #f6b24a;
    font-size: 10px
}

.clinic-exam-flow {
    background: #fff
}

.info-hours-grid {
    grid-template-columns: .7fr 1.3fr;
    align-items: start;
    gap: 100px;
    display: grid
}

.info-hours-grid header>p:last-child {
    color: var(--muted);
    margin-top: 16px;
    font-size: 14px
}

.hours-table {
    border-top: 2px solid var(--brown)
}

.hours-table>div {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 1fr 1fr;
    padding: 23px 10px;
    display: grid
}

.hours-table strong {
    color: var(--brown);
    font-size: 17px
}

.hours-table span {
    color: #5f5851;
    text-align: right;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700
}

.hours-table>p {
    color: #8a8178;
    text-align: right;
    margin-top: 15px;
    font-size: 12px
}

.landmark-route {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    display: grid
}

.landmark-card {
    background: #fff;
    border-radius: 24px;
    min-height: 250px;
    padding: 30px;
    box-shadow: 0 13px 38px #5b504112
}

.landmark-card span {
    color: var(--orange);
    font-size: 10px;
    font-weight: 850
}

.landmark-card strong {
    color: var(--brown);
    margin-top: 45px;
    font-size: 24px;
    display: block
}

.landmark-card p {
    color: var(--muted);
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.75
}

.map-action-panel {
    background: var(--brown);
    color: #fff;
    border-radius: 24px;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-top: 28px;
    padding: 28px 31px;
    display: flex
}

.map-action-panel strong {
    font-size: 19px
}

.map-action-panel p {
    color: #ffffffad;
    margin-top: 4px;
    font-size: 12px
}

.map-action-panel>div:last-child {
    gap: 10px;
    display: flex
}

.transport-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    display: grid
}

.transport-grid article {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 26px;
    min-height: 270px;
    padding: 34px
}

.transport-grid article>span {
    color: var(--orange);
    font-size: 10px;
    font-weight: 850
}

.transport-grid h3 {
    color: var(--brown);
    margin-top: 36px;
    font-size: 26px
}

.transport-grid strong {
    color: #5f5851;
    margin-top: 8px;
    font-size: 16px;
    display: block
}

.transport-grid p {
    color: var(--muted);
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.8
}

.parking-grid {
    grid-template-columns: .72fr 1.28fr;
    gap: 90px;
    display: grid
}

.parking-grid header>p:last-child {
    color: #ffffffa8;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8
}

.parking-grid>div {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    display: grid
}

.parking-grid article {
    background: #ffffff0f;
    border: 1px solid #ffffff2e;
    border-radius: 24px;
    min-height: 240px;
    padding: 29px
}

.parking-grid article span,
.parking-grid article strong {
    display: block
}

.parking-grid article span {
    color: #f7b95a;
    font-size: 13px;
    font-weight: 800
}

.parking-grid article strong {
    color: #fff;
    margin-top: 50px;
    font-size: 20px
}

.parking-grid article p {
    color: #ffffffa6;
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.75
}

.arrival-photo-section .button {
    margin-top: 30px
}

@media (width<=1480px) {

    .header-inner,
    .mega-nav-inner {
        width: min(var(--inner), calc(100% - 40px));
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 24px
    }

    .brand {
        width: 250px
    }

    .brand strong {
        font-size: 16px
    }

    .desktop-nav>a {
        font-size: 13px
    }

    .quick-menu {
        width: 100px
    }

    .quick-menu>div>a {
        min-height: 63px
    }

    .quick-menu span {
        font-size: 10px
    }
}

@media (width<=1180px) {
    body {
        font-size: 17px
    }

    .desktop-nav>a {
        font-size: 11px
    }

    .quick-menu {
        display: none
    }

    .hero {
        min-height: auto
    }

    .hero-grid,
    .psg-hero-grid {
        gap: 48px
    }

    .symptom-card {
        min-height: 260px
    }
}

@media (width<=860px) {
    body {
        font-size: 16px
    }

    main {
        padding-top: 72px
    }

    .shell {
        width: min(100% - 38px, 680px)
    }

    .site-header {
        height: 72px
    }

    .header-inner {
        justify-content: space-between;
        gap: 20px;
        width: calc(100% - 36px);
        height: 72px;
        display: flex
    }

    .brand {
        width: min(235px, 100vw - 100px)
    }

    .desktop-nav,
    .mega-nav {
        display: none
    }

    .mobile-menu {
        display: block
    }

    .mobile-menu>summary {
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 8px;
        list-style: none;
        display: flex
    }

    .mobile-menu>summary::-webkit-details-marker {
        display: none
    }

    .mobile-menu>summary span {
        background: var(--brown);
        width: 26px;
        height: 2px;
        display: block
    }

    .mobile-menu-panel {
        background: var(--ivory-light);
        max-height: calc(100vh - 72px);
        padding: 25px 20px 100px;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        overflow-y: auto;
        box-shadow: 0 20px 35px #5b50411f
    }

    .mobile-menu-panel>p {
        color: var(--orange);
        letter-spacing: .15em;
        margin-bottom: 15px;
        font-size: 10px;
        font-weight: 800
    }

    .mobile-menu-panel>details {
        border-top: 1px solid var(--line)
    }

    .mobile-menu-panel>details:last-child {
        border-bottom: 1px solid var(--line)
    }

    .mobile-menu-panel>details>summary {
        cursor: pointer;
        min-height: 54px;
        color: var(--brown);
        align-items: center;
        font-size: 16px;
        font-weight: 700;
        display: flex
    }

    .mobile-menu-panel>details>div {
        grid-template-columns: 1fr 1fr;
        gap: 5px 10px;
        padding: 0 0 17px;
        display: grid
    }

    .mobile-menu-panel>details a {
        color: var(--muted);
        padding: 6px 0;
        font-size: 13px
    }

    .hero {
        padding: 60px 0 72px
    }

    .hero-grid,
    .psg-hero-grid,
    .editorial-grid,
    .doctor-grid,
    .location-grid,
    .preparation-grid,
    .treatment-grid,
    .insurance-grid,
    .faq-grid,
    .psg-two-column,
    .results-grid,
    .split-heading {
        grid-template-columns: 1fr;
        gap: 44px
    }

    .hero-copy {
        padding: 0
    }

    .hero h1,
    .psg-hero h1 {
        font-size: clamp(42px, 13vw, 58px)
    }

    .hero h1 span {
        font-size: .55em
    }

    .hero-answer {
        font-size: 15px
    }

    .hero-media {
        margin: 18px 6px 0 12px
    }

    .hero-media:before {
        inset: -12px 20px 20px -12px
    }

    .hero-media img {
        border-radius: 160px 18px
    }

    .hero-media figcaption {
        min-width: 235px;
        right: -4px
    }

    .quick-route-grid {
        grid-template-columns: 1fr 1fr
    }

    .quick-route-grid a {
        border-bottom: 1px solid var(--line);
        min-height: 82px;
        padding: 0 17px
    }

    .quick-route-grid a:nth-child(odd) {
        border-left: 1px solid var(--line)
    }

    .quick-route-grid strong {
        font-size: 14px
    }

    .section {
        padding: 82px 0
    }

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

    .section-heading h2,
    .editorial-copy h2,
    .treatment-intro h2,
    .doctor-copy h2,
    .faq-intro h2,
    .location-card h2,
    .psg-section-title h2,
    .preparation-grid h2,
    .results-grid h2 {
        font-size: clamp(30px, 8.5vw, 40px)
    }

    .symptom-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .symptom-card {
        min-height: 205px
    }

    .editorial-grid {
        gap: 58px
    }

    .editorial-image {
        padding: 0 15px 15px 0
    }

    .editorial-image:before {
        inset: 18px 0 0 18px
    }

    .editorial-image img,
    .location-image img {
        border-radius: 14px 70px
    }

    .reverse-grid .editorial-copy {
        order: 2
    }

    .reverse-grid .editorial-image {
        order: 1
    }

    .process-list,
    .test-day-list {
        grid-template-columns: 1fr 1fr
    }

    .process-list li {
        min-height: 235px
    }

    .process-list h3 {
        margin-top: 39px
    }

    .photo-story {
        grid-template-columns: 1fr
    }

    .treatment-intro,
    .faq-intro,
    .psg-section-title {
        position: static
    }

    .doctor-portrait {
        border-radius: 200px 200px 22px 22px;
        min-height: 470px
    }

    .doctor-portrait img {
        height: 470px
    }

    .final-cta-inner {
        flex-direction: column;
        align-items: flex-start
    }

    .breadcrumb {
        min-height: 54px
    }

    .psg-hero {
        background: linear-gradient(#f8f2ebeb, #f8f2ebeb), url(./img/space/sleep-room.webp) 50%/cover no-repeat;
        padding: 60px 0 72px
    }

    .psg-hero-grid {
        min-height: 0
    }

    .psg-hero-grid>div:first-child {
        padding: 0
    }

    .psg-hero-media {
        justify-self: center;
        width: min(100%, 520px)
    }

    .anchor-nav {
        top: 72px;
        overflow-x: auto
    }

    .anchor-nav-inner {
        grid-template-columns: repeat(6, 115px);
        width: max-content
    }

    .anchor-nav a {
        min-height: 56px;
        font-size: 12px
    }

    .measurement-list>div {
        grid-template-columns: 36px 1fr;
        gap: 8px 13px;
        padding: 15px 5px
    }

    .measurement-list dd {
        grid-column: 2
    }

    .preparation-grid>figure img {
        aspect-ratio: 1.1;
        border-radius: 120px 120px 20px 20px
    }

    .insurance-card {
        padding: 32px 26px
    }

    .mobile-sticky-cta {
        z-index: 110;
        grid-template-columns: 1fr 1fr;
        height: 66px;
        display: grid;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: 0 -8px 24px #5b50411f
    }

    .mobile-sticky-cta a {
        color: var(--brown);
        background: #fff;
        justify-content: center;
        align-items: center;
        gap: 9px;
        font-size: 14px;
        font-weight: 700;
        display: flex
    }

    .mobile-sticky-cta a:last-child {
        background: var(--orange);
        color: #fff
    }

    .mobile-sticky-cta a:last-child img {
        filter: brightness(0)invert()
    }

    .clinic-home-hero {
        min-height: 0;
        padding: 62px 0 78px
    }

    .clinic-home-hero-grid,
    .subpage-hero-grid,
    .doctor-profile-grid,
    .clinic-info-grid,
    .doctor-letter-grid,
    .credentials-grid,
    .info-hours-grid,
    .parking-grid {
        grid-template-columns: 1fr;
        gap: 46px
    }

    .clinic-home-copy h1,
    .subpage-hero h1,
    .doctor-profile-hero h1 {
        font-size: clamp(38px, 10.7vw, 55px)
    }

    .clinic-home-visual {
        min-height: 550px
    }

    .doctor-hero-arch {
        right: 0
    }

    .clinic-route-strip>div {
        grid-template-columns: 1fr 1fr
    }

    .clinic-route-strip a {
        border-bottom: 1px solid var(--line);
        min-height: 80px;
        padding: 0 17px
    }

    .clinic-card-grid,
    .focus-process-grid,
    .interior-highlight-grid,
    .interior-gallery,
    .landmark-route,
    .transport-grid {
        grid-template-columns: 1fr
    }

    .clinic-card-copy {
        min-height: 285px
    }

    .facility-preview-grid,
    .principle-grid {
        grid-template-columns: 1fr 1fr
    }

    .facility-preview-grid figure,
    .interior-highlight-grid figure,
    .interior-gallery figure {
        min-height: 330px
    }

    .clinic-location-panel {
        padding: 29px 24px
    }

    .medical-review {
        width: calc(100% - 38px)
    }

    .subpage-hero {
        padding: 62px 0 76px
    }

    .subpage-hero-grid>figure {
        border-radius: 170px 20px;
        min-height: 430px
    }

    .doctor-profile-hero {
        padding-top: 46px
    }

    .doctor-profile-grid>figure {
        order: 2;
        min-height: 560px
    }

    .doctor-letter-grid {
        gap: 32px
    }

    .equipment-group {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 21px
    }

    .equipment-group:nth-child(2n) figure {
        order: 0
    }

    .equipment-group>figure {
        min-height: 330px
    }

    .interior-gallery figure.wide {
        grid-column: auto
    }

    .map-action-panel {
        flex-direction: column;
        align-items: flex-start
    }

    .parking-grid>div {
        grid-template-columns: 1fr
    }
}

@media (width<=520px) {

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

    .butto {
        width: 100%
    }

    .process-list,
    .test-day-list,
    .treatment-cards {
        grid-template-columns: 1fr
    }

    .process-list li,
    .test-day-list li {
        min-height: 205px
    }

    .faq-list summary,
    .faq-list summary strong {
        font-size: 15px
    }

    .faq-list details p {
        padding-left: 36px;
        padding-right: 10px
    }

    .brand {
        gap: 8px
    }

    .brand img {
        width: 38px;
        height: 38px
    }

    .brand strong {
        font-size: 14px
    }

    .brand small {
        font-size: 5.6px
    }

    .clinic-home-visual {
        min-height: 460px
    }

    .doctor-hero-arch {
        border-radius: 220px 220px 22px 22px;
        inset: 0
    }

    .hero-quote-card {
        width: 84%;
        bottom: 15px;
        right: 6px
    }

    .clinic-route-strip strong {
        font-size: 12px
    }

    .facility-preview-grid,
    .principle-grid {
        grid-template-columns: 1fr
    }

    .clinic-card-copy {
        min-height: 260px;
        padding: 25px 23px
    }

    .clinic-info-grid {
        gap: 56px
    }

    .hours-large>div {
        grid-template-columns: 110px 1fr
    }

    .subpage-hero-grid>figure {
        min-height: 340px
    }

    .doctor-profile-grid>figure {
        min-height: 470px
    }

    .equipment-group>figure {
        min-height: 270px
    }

    .equipment-group h2 {
        font-size: 28px
    }

    .hours-table>div {
        grid-template-columns: 1fr;
        gap: 7px
    }

    .hours-table span {
        text-align: left
    }

    .map-action-panel>div:last-child {
        flex-direction: column;
        width: 100%
    }
}

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

    *,
    :before,
    :after {
        transition-duration: .01ms !important
    }
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}



/* drag area */
::selection {
    color: #fff;
    background: #FA9A00;
}
::-moz-selection {
    color: #fff;
    background: #FA9A00;
}