/* Only layouts unique to inner pages. Shared sections live in home.css. */
.page-main {
    padding-top: 6.625rem
}

.breadcrumbs {
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 2.875rem
}

.breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    list-style: none;
    margin: 0;
    padding: 0
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.breadcrumbs li + li::before {
    content: '';
    display: block;
    flex: 0 0 0.1875rem;
    width: 0.1875rem;
    height: 0.1875rem;
    border-radius: 50%;
    background: #121212;
}

.breadcrumbs [aria-current] {
    color: var(--accent)
}

.breadcrumbs a:hover {
    color: var(--accent)
}

.page-title {
    font-size: 2.25rem;
    text-align: left;
    color: var(--text);
    margin-bottom: 2.5rem
}

.page-main > .consultation-section {
    margin-top: 7.5rem
}

.contacts-page .page-main > .consultation-section {
    margin-top: 0
}

/* Specialist: portrait, principles and experience. */
.about-page-main {
    padding-top: 5.125rem
}

.about-hero {
    position: relative;
    background: #fcf8fa;
    min-height: 37.6875rem;
    overflow: hidden;
    isolation: isolate
}

.about-hero > .container {
    position: relative;
    min-height: 37.6875rem;
    padding-top: 1.5rem
}

.about-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.625rem;
    background: #fff;
    border-radius: 3.125rem 3.125rem 0 0;
    z-index: 2
}

.about-bio {
    position: relative;
    z-index: 1;
    padding: 2.375rem 0 5.625rem 3.8125rem;
    max-width: 38.125rem
}

.about-eyebrow {
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap
}

.about-eyebrow span {
    padding-inline: 0.5rem
}

.about-bio h1 {
    font: 500 italic 6rem/.9 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -.05em;
    margin-top: 1rem
}

.about-bio > .btn {
    width: 28.5625rem;
    max-width: 100%;
    margin-top: 3rem
}

.about-hero-photo {
    position: absolute;
    right: 3.4375rem;
    bottom: 0;
    width: 37.1875rem;
    height: 36.125rem;
    object-fit: contain;
    object-position: center bottom;
    z-index: 1
}

.about-glow {
    position: absolute;
    max-width: none;
    z-index: -1;
    pointer-events: none
}

.about-glow--top {
    top: -11.25rem;
    right: -8.125rem
}

.about-glow--bottom {
    top: 11.25rem;
    left: -15.625rem
}

.expertise-grid {
    display: grid;
    grid-template-columns:minmax(0, 538fr) minmax(0, 763fr);
    gap: 1.25rem;
    align-items: end
}

.expertise-photo {
    display: block;
    width: 100%;
    height: 36.375rem;
    object-fit: cover;
    border-radius: 1.875rem
}

.expertise-panel {
    display: grid;
    gap: 1.5rem;
    padding: 1.875rem;
    background: #faf0f5;
    border-radius: 1.875rem;
    min-height: 32.25rem
}

.expertise-panel h2, .expertise-item h3 {
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 600;
    color: var(--accent)
}

.principle-tags {
    display: flex;
    gap: 0.625rem;
    margin-top: 1rem
}

.principle-tags > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3.4375rem;
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
    flex: 1
}

.principle-tags img, .expertise-item > img {
    flex-shrink: 0
}

.expertise-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem
}

.expertise-item p {
    margin-top: 0.625rem;
    line-height: 1.2
}

.expertise-grid .section-actions {
    margin-top: 1rem
}

/* Specialist: numbered process and trust. */
.work-process {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 47.625rem);
    gap: 2.5rem;
    align-items: start
}

.work-process > .section-title {
    text-align: left
}

.process-timeline {
    position: relative
}

.process-timeline ol {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    gap: 3.5rem
}

.process-timeline li {
    display: grid;
    grid-template-columns:6.5rem minmax(0, 1fr);
    gap: 2.5rem;
    position: relative
}

.step-number {
    font: 600 2.25rem/1.1 'Cormorant Garamond', Georgia, serif;
    color: var(--accent);
    letter-spacing: -.04em
}

.process-timeline h3, .trust-card h3 {
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 600;
    color: var(--accent)
}

.process-timeline p {
    margin-top: 1rem;
    line-height: 1.2;
    opacity: .5
}

.timeline-line {
    position: absolute;
    left: 4.5rem;
    top: 0.875rem;
    max-width: none
}

.trust-grid {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch
}

.trust-photo {
    display: block;
    width: 100%;
    height: 38rem;
    object-fit: cover;
    border-radius: 1.875rem
}

.trust-column {
    display: grid;
    gap: 1.25rem;
    grid-template-rows:1fr 1fr
}

.trust-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 1.875rem;
    border-radius: 1.875rem;
    background: #fcf8fa
}

.trust-card > img {
    align-self: flex-start
}

.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 3.125rem;
    height: 3.125rem;
    background: var(--accent);
    border-radius: 0.625rem;
    flex-shrink: 0
}

.trust-icon img {
    max-width: none
}

.trust-card p {
    line-height: 1.2;
    margin-top: 0.625rem
}

/* Specialist: service mosaic reuses service-card. */
.about-services-grid {
    position: relative;
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-rows:23.125rem 23.125rem;
    grid-template-areas:'intro lifting injections' 'skin complex action'
}

.mosaic-intro {
    grid-area: intro;
    max-width: 24.125rem;
    padding-right: 1.25rem
}

.mosaic-lifting {
    grid-area: lifting
}

.mosaic-injections {
    grid-area: injections
}

.mosaic-skin {
    grid-area: skin
}

.mosaic-complex {
    grid-area: complex
}

.mosaic-action {
    grid-area: action;
    display: flex;
    align-items: flex-end;
    padding-left: 1.25rem
}

.mosaic-action .btn {
    width: 100%
}

.service-card--mosaic {
    min-height: 23.125rem
}

.service-card--mosaic > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1.5rem;
    left: 1.875rem;
    right: 1.875rem;
    bottom: 1.875rem
}

.service-card--mosaic strong {
    font: inherit
}

.service-card--mosaic small {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 500
}

.mosaic-join {
    position: absolute;
    left: calc(33.333% - 3rem);
    top: 20.25rem;
    pointer-events: none
}

.mosaic-join--second {
    left: calc(66.666% - 3rem)
}

/* Procedures catalog. */
.catalog-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 0
}

.catalog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 24.5rem;
    border: 1px solid #b426684d;
    border-radius: 1.875rem;
    overflow: hidden;
    padding: 1.75rem 0.25rem 0.25rem;
    transition: border-color .2s, box-shadow .2s
}

.catalog-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0.5rem 1.5rem #b4266812;
    z-index: 1
}

.catalog-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 1.625rem
}

.catalog-card h2 {
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase
}

.catalog-card-heading img {
    flex-shrink: 0;
    max-width: none
}

.catalog-card > p {
    padding: 1rem 1.625rem 1.5rem;
    line-height: 1.2;
    min-height: 5.125rem
}

.catalog-card > img {
    display: block;
    width: 100%;
    height: 15.125rem;
    object-fit: cover;
    border-radius: 1.625rem;
    margin-top: auto
}

/* Case catalog, using the existing case-card component. */
.case-filters {
    display: flex;
    justify-content: space-between;
    gap: 0.625rem;
    overflow-x: auto;
    padding-block: 0 0.75rem;
    margin-bottom: 3.25rem;
    scrollbar-width: thin;
    scrollbar-color: #b4266833 transparent
}

.case-filters > .btn {
    flex-shrink: 0;
    min-height: 2.25rem;
    padding: 0.4375rem 1.25rem 0.625rem;
    white-space: nowrap
}

.cases-gallery {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 2rem 1.25rem
}

.gallery-more {
    display: flex;
    width: min(40.625rem, 100%);
    margin: 2rem auto 0
}

.empty-cases {
    text-align: center;
    padding: 4rem 1.25rem;
    color: var(--accent);
    background: #fff5fa;
    border-radius: 1.875rem
}

.case-photo--female img {
    position: absolute;
    width: 100%;
    height: 227.65%;
    max-width: none;
    object-fit: fill;
    top: .23%;
    left: 0
}

.case-photo--after img {
    top: -120.9%
}

/* Case detail. */
.case-comparison {
    align-items: start
}

.case-comparison figure {
    min-width: 0;
    margin: 0
}

.comparison-photo {
    position: relative;
    aspect-ratio: 650/306;
    border-radius: 1.875rem;
    overflow: hidden
}

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


.comparison-photo .photo-label {
    left: 1rem;
    bottom: 1rem
}

.case-comparison figcaption {
    font-size: 1rem;
    line-height: 1.2;
    opacity: .5;
    margin-top: 0.625rem;
    padding-inline: 1rem
}

.case-solution {
    margin-top: 6.25rem
}

.case-solution article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 11.25rem;
    border: 2px solid var(--accent);
    border-radius: 1.875rem;
    padding: 1.5rem;
    text-align: center
}

.case-solution article:last-child {
    background: var(--accent);
    color: #fff
}

.case-solution h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1
}

.case-solution p {
    font-size: 1.25rem;
    line-height: 1.2;
    max-width: 21.75rem
}

.case-story {
    display: grid;
    gap: 5rem;
    margin-top: 7.5rem
}

.case-story-row {
    display: grid;
    grid-template-columns:19.6875rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start
}

.story-label {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.25rem 0.9375rem;
    background: #faf0f5;
    border-radius: 0.625rem;
    color: var(--accent)
}

.story-label img {
    flex-shrink: 0
}

/* SMAS detail. Reuse two-columns, advantage-card, section-title, cases and form. */
.procedure-hero {
    grid-template-columns:minmax(0, 670fr) minmax(0, 630fr);
    align-items: stretch
}

.procedure-hero-photo {
    display: block;
    width: 100%;
    height: 22.8125rem;
    object-fit: cover;
    border-radius: 1.875rem
}

.procedure-hero > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem
}

.procedure-hero .section-title {
    text-align: left;
    margin: 0
}

.procedure-hero h2 {
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 600
}

.procedure-hero p {
    font-size: 1.25rem;
    line-height: 1.2
}

.procedure-hero .btn {
    margin-top: auto
}

.procedure-benefits {
    margin-top: 7.5rem
}

.procedure-benefits-grid {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-areas:'neck vmax machine result' 'recovery face visit jaw';
    gap: 1.25rem
}

.benefit-image {
    display: block;
    width: 100%;
    height: 19.6875rem;
    object-fit: cover;
    border-radius: 1.875rem
}

.benefit-image--neck {
    grid-area: neck
}

.benefit-image--machine {
    grid-area: machine
}

.benefit-image--face {
    grid-area: face
}

.benefit-image--jaw {
    grid-area: jaw
}

.benefit-card {
    min-height: 19.6875rem
}

.benefit-card[data-benefit=vmax] {
    grid-area: vmax
}

.benefit-card[data-benefit=result] {
    grid-area: result
}

.benefit-card[data-benefit=recovery] {
    grid-area: recovery
}

.benefit-card[data-benefit=visit] {
    grid-area: visit
}

.benefit-card p {
    opacity: 1
}

.benefit-card--outline {
    background: #fff;
    border: 1px solid var(--accent);
    color: var(--text)
}

.benefit-card--soft {
    background: #b4266833;
    color: var(--text)
}

.benefit-card--outline h3, .benefit-card--soft h3 {
    color: var(--accent)
}

.procedure-tabs-section {
    margin-top: 8.5rem
}

.procedure-tabs-nav {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid #ddd
}

.procedure-tabs-nav button {
    padding: 0 0.75rem 1.25rem;
    font: 600 italic 2.25rem/1.1 'Cormorant Garamond', Georgia, serif;
    color: #bfbfbf;
    background: transparent;
    border-bottom: 2px solid transparent
}

.procedure-tabs-nav button[aria-selected=true] {
    color: var(--accent);
    border-color: var(--accent)
}

.procedure-tab-content {
    padding-top: 2.5rem;
    max-width: 53.75rem;
    margin-inline: auto
}

.procedure-checklist {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 0.75rem 2.5rem;
    padding: 0;
    margin: 0;
    list-style: none
}

.procedure-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    line-height: 1.2
}

.procedure-checklist li img {
    flex-shrink: 0;
    max-width: none
}

#procedure-panel-1 .procedure-checklist {
    grid-auto-flow: column;
    grid-template-rows:repeat(5, auto)
}

.mobile-procedure-toggle {
    display: none
}

@media (max-width: 1399px) {
    .about-bio {
        padding-left: 1.875rem
    }

    .about-bio h1 {
        font-size: 5.25rem
    }

    .about-hero-photo {
        right: 0;
        width: 52%
    }

    .about-eyebrow {
        font-size: 0.875rem
    }

    .expertise-panel {
        padding: 1.5rem
    }

    .principle-tags > span {
        padding-inline: 0.625rem;
        font-size: 0.875rem
    }

    .trust-card {
        padding: 1.5rem
    }

    .catalog-card h2 {
        font-size: 1.375rem
    }

    .catalog-card-heading {
        padding-inline: 1.25rem
    }

    .catalog-card > p {
        padding-inline: 1.25rem
    }

    .case-filters {
        justify-content: flex-start
    }

    .case-story-row {
        grid-template-columns:16.25rem minmax(0, 1fr)
    }
}

@media (max-width: 1100px) {
    .about-bio {
        padding-left: 0;
        max-width: 52%
    }

    .about-bio h1 {
        font-size: 4.75rem
    }

    .about-eyebrow {
        white-space: normal
    }

    .about-eyebrow span {
        padding-inline: 2px
    }

    .about-bio > .btn {
        width: 100%
    }

    .expertise-grid {
        grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr)
    }

    .expertise-photo {
        height: 38.75rem
    }

    .expertise-panel h2, .expertise-item h3 {
        font-size: 1.3125rem
    }

    .principle-tags {
        flex-wrap: wrap
    }

    .principle-tags > span {
        flex: auto;
        min-height: 2.75rem
    }

    .expertise-panel {
        gap: 1.25rem
    }

    .work-process {
        grid-template-columns:1fr 1.6fr;
        gap: 1.5rem
    }

    .process-timeline li {
        grid-template-columns:5rem minmax(0, 1fr);
        gap: 1.5rem
    }

    .timeline-line {
        left: 3.375rem
    }

    .trust-card h3 {
        font-size: 1.375rem
    }

    .trust-card {
        padding: 1.25rem
    }

    .trust-photo {
        height: 37.5rem
    }

    .service-card--mosaic > span {
        left: 1.25rem;
        right: 1.25rem;
        font-size: 1.3125rem
    }

    .catalog-card h2 {
        font-size: 1.25rem
    }

    .catalog-card-heading {
        padding-inline: 1rem
    }

    .catalog-card > p {
        padding-inline: 1rem;
        font-size: 0.875rem;
        min-height: 4.875rem
    }

    .catalog-card > img {
        height: 12.5rem
    }

    .catalog-card {
        min-height: 21.875rem
    }

    .procedure-hero p {
        font-size: 1.125rem
    }

    .procedure-hero > div {
        gap: 1.125rem
    }

    .procedure-benefits-grid {
        gap: 1rem
    }

    .benefit-card {
        padding: 1.25rem
    }

    .benefit-card h3 {
        font-size: 1.3125rem
    }

    .benefit-card p {
        font-size: 0.875rem
    }

    .benefit-card, .benefit-image {
        min-height: 17.5rem;
        height: 17.5rem
    }

    .case-story-row {
        grid-template-columns:13.75rem minmax(0, 1fr)
    }
}

@media (max-width: 992px) {
    .page-main {
        padding-top: 6.125rem
    }

    .about-page-main {
        padding-top: 4.625rem
    }

    .about-bio h1 {
        font-size: 4.25rem
    }

    .about-bio .text-large {
        font-size: 1.125rem
    }

    .about-hero, .about-hero > .container {
        min-height: 35.625rem
    }

    .about-hero-photo {
        height: 33.125rem;
        width: 54%;
        right: -1rem
    }

    .about-hero::after {
        height: 2.5rem
    }

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

    .expertise-photo {
        height: auto;
        max-height: 36.25rem;
        object-position: center
    }

    .expertise-panel {
        min-height: 0;
        gap: 1.75rem
    }

    .principle-tags > span {
        font-size: 1rem
    }

    .expertise-grid .section-actions {
        margin-top: 1rem
    }

    .work-process {
        grid-template-columns:1fr
    }

    .process-timeline li {
        grid-template-columns:6.5rem minmax(0, 1fr);
        gap: 2.5rem
    }

    .timeline-line {
        left: 4.5rem
    }

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

    .trust-photo {
        grid-column: 2;
        grid-row: 1/3;
        height: 100%;
        min-height: 40rem
    }

    .trust-column {
        display: contents
    }

    .trust-card {
        grid-column: 1;
        gap: 1.5rem
    }

    .trust-card h3 {
        font-size: 1.375rem
    }

    .about-services-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        grid-template-rows:auto 20rem 20rem auto;
        grid-template-areas:'intro intro' 'lifting injections' 'skin complex' 'action action';
        gap: 1rem
    }

    .mosaic-intro {
        max-width: none;
        padding: 0;
        margin: 0 0 0.5rem
    }

    .service-card--mosaic {
        min-height: 20rem
    }

    .mosaic-action {
        padding: 0
    }

    .mosaic-join {
        display: none
    }

    .catalog-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 0.75rem
    }

    .catalog-card-heading {
        padding-inline: 1.25rem
    }

    .catalog-card > p {
        padding-inline: 1.25rem;
        font-size: 1rem
    }

    .catalog-card > img {
        height: 13.75rem
    }

    .cases-gallery {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem
    }

    .case-story-row {
        grid-template-columns:1fr;
        gap: 1.25rem
    }

    .case-story {
        gap: 3rem;
        margin-top: 5rem
    }

    .case-solution {
        margin-top: 4rem
    }

    .case-comparison figcaption {
        font-size: 0.8125rem;
        padding-inline: 0
    }

    .procedure-hero {
        grid-template-columns:1fr
    }

    .procedure-hero-photo {
        height: auto;
        max-height: 26.25rem
    }

    .procedure-hero > div {
        gap: 1.25rem
    }

    .procedure-hero .section-title {
        font-size: 2.625rem
    }

    .procedure-hero .btn {
        margin-top: 0.25rem
    }

    .procedure-benefits-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        grid-template-areas:'neck vmax' 'machine result' 'recovery face' 'visit jaw'
    }

    .benefit-card, .benefit-image {
        height: auto;
        min-height: 19.6875rem
    }

    .benefit-card h3 {
        font-size: 1.5rem
    }

    .benefit-card p {
        font-size: 1rem
    }

    .procedure-tabs-nav button {
        font-size: 1.875rem
    }

    .procedure-checklist {
        gap: 0.875rem 1.5rem
    }

    .procedure-tabs-section {
        margin-top: 6.25rem
    }
}

@media (max-width: 600px) {
    .page-main {
        padding-top: 6rem
    }

    .breadcrumbs {
        font-size: 0.75rem;
        margin-bottom: 1.75rem
    }

    .breadcrumbs ol, .breadcrumbs li {
        gap: 0.5rem
    }

    .page-title {
        font-size: 1.875rem;
        margin-bottom: 1.75rem
    }

    .about-page-main {
        padding-top: 4.5rem
    }

    .about-hero {
        min-height: 43.75rem
    }

    .about-hero > .container {
        min-height: 43.75rem
    }

    .about-hero .breadcrumbs {
        margin-bottom: 1.5rem
    }

    .about-bio {
        padding: 0;
        max-width: none
    }

    .about-eyebrow {
        font-size: 0.75rem;
        line-height: 1.35;
        white-space: nowrap
    }

    .about-eyebrow span {
        padding-inline: 0.1875rem
    }

    .about-bio h1 {
        font-size: 4rem;
        line-height: .9;
        margin-top: 1rem
    }

    .about-bio .text-large {
        font-size: 1rem;
        margin-top: 0.875rem
    }

    .about-bio > .btn {
        margin-top: 1.5rem
    }

    .about-hero-photo {
        right: 50%;
        transform: translateX(50%);
        bottom: 0;
        width: 22.5rem;
        max-width: none;
        height: 21.875rem;
        object-fit: contain;
        object-position: center bottom
    }

    .about-hero::after {
        height: 1.5rem;
        border-radius: 1.5rem 1.5rem 0 0
    }

    .about-glow--top {
        right: -28.125rem;
        top: 6.25rem
    }

    .about-glow--bottom {
        left: -28.125rem;
        top: 18.75rem
    }

    .expertise-photo {
        border-radius: 1.5rem;
        max-height: none;
        aspect-ratio: 538/582
    }

    .expertise-grid {
        gap: 1rem
    }

    .expertise-panel {
        border-radius: 1.5rem;
        padding: 1.5rem 1.25rem;
        gap: 1.5rem
    }

    .expertise-panel h2, .expertise-item h3 {
        font-size: 1.25rem
    }

    .expertise-item p {
        font-size: 0.875rem;
        line-height: 1.35
    }

    .principle-tags {
        gap: 0.5rem;
        margin-top: 1rem
    }

    .principle-tags > span {
        font-size: 0.75rem;
        padding: 0.625rem;
        min-height: 2.5rem;
        justify-content: flex-start
    }

    .expertise-grid .section-actions {
        gap: 0.75rem
    }

    .work-process {
        gap: 0
    }

    .work-process > .section-title {
        text-align: center
    }

    .process-timeline ol {
        gap: 2rem
    }

    .process-timeline li {
        grid-template-columns:3.375rem minmax(0, 1fr);
        gap: 1.5rem
    }

    .step-number {
        font-size: 2rem
    }

    .timeline-line {
        left: 2.75rem;
        top: 0.75rem
    }

    .process-timeline h3 {
        font-size: 1.25rem
    }

    .process-timeline p {
        font-size: 0.875rem;
        line-height: 1.35;
        margin-top: 0.75rem
    }

    .trust-grid {
        grid-template-columns:1fr;
        gap: 1rem
    }

    .trust-photo {
        grid-column: auto;
        grid-row: 3;
        height: auto;
        min-height: 0;
        max-height: 30rem;
        object-fit: cover;
        border-radius: 1.5rem
    }

    .trust-card {
        grid-column: auto;
        padding: 1.5rem;
        gap: 2rem;
        border-radius: 1.5rem
    }

    .trust-card h3 {
        font-size: 1.375rem
    }

    .trust-card p {
        font-size: 0.875rem;
        line-height: 1.35
    }

    .about-services-grid {
        grid-template-columns:1fr;
        grid-template-rows:auto;
        grid-template-areas:'intro' 'lifting' 'injections' 'skin' 'complex' 'action';
        gap: 0.75rem
    }

    .service-card--mosaic {
        min-height: 19.375rem
    }

    .service-card--mosaic > span {
        font-size: 1.375rem;
        left: 1.5rem;
        right: 1.5rem;
        bottom: 1.5rem;
        gap: 0.75rem
    }

    .service-card--mosaic small {
        font-size: 0.875rem
    }

    .mosaic-action {
        margin-top: 0.5rem
    }

    .catalog-grid {
        grid-template-columns:1fr;
        gap: 0.75rem
    }

    .catalog-card {
        padding-top: 1.5rem;
        min-height: 0;
        border-radius: 1.5rem
    }

    .catalog-card-heading {
        padding-inline: 1.25rem
    }

    .catalog-card h2 {
        font-size: 1.5rem
    }

    .catalog-card > p {
        padding: 0.875rem 1.25rem 1.5rem;
        min-height: 0;
        font-size: 1rem
    }

    .catalog-card > img {
        height: auto;
        aspect-ratio: 641/365;
        border-radius: 1.25rem
    }

    .case-filters {
        margin-bottom: 1.5rem;
        gap: 0.5rem;
        margin-right: -1rem;
        padding-right: 1rem
    }

    .case-filters > .btn {
        min-height: 2.125rem;
        padding: 0.4375rem 0.875rem 0.5625rem;
        font-size: 0.75rem
    }

    .cases-gallery {
        grid-template-columns:1fr;
        gap: 1rem
    }

    .gallery-more {
        margin-top: 1.25rem
    }

    .case-comparison {
        grid-template-columns:1fr;
        gap: 1.25rem
    }

    .comparison-photo {
        border-radius: 1.5rem;
        aspect-ratio: 650/306
    }

    .case-comparison figcaption {
        font-size: 0.75rem;
        line-height: 1.35;
        margin-top: 0.625rem
    }

    .case-solution {
        grid-template-columns:1fr;
        margin-top: 3rem;
        gap: 1rem
    }

    .case-solution article {
        min-height: 9.375rem;
        border-radius: 1.5rem;
        gap: 1rem;
        padding: 1.5rem
    }

    .case-solution h2 {
        font-size: 1.375rem
    }

    .case-solution p {
        font-size: 1rem;
        max-width: 17.5rem
    }

    .case-story {
        margin-top: 3rem;
        gap: 2.5rem
    }

    .case-story-row {
        gap: 1rem
    }

    .story-label {
        font-size: 0.8125rem;
        padding: 0.625rem 0.875rem
    }

    .case-story-row .block-title {
        font-size: 1.5rem
    }

    .case-story-row .text-large {
        font-size: 1rem;
        line-height: 1.35;
        margin-top: 1rem
    }

    .procedure-hero {
        display: flex;
        flex-direction: column;
        gap: 1.5rem
    }

    .procedure-hero-photo {
        order: 1;
        border-radius: 1.5rem
    }

    .procedure-hero > div {
        gap: 1rem
    }

    .procedure-hero .section-title {
        font-size: 2.25rem;
        line-height: 1.05
    }

    .procedure-hero h2 {
        font-size: 1.375rem
    }

    .procedure-hero p {
        font-size: 1rem;
        line-height: 1.35
    }

    .procedure-hero .btn {
        margin-top: 0.5rem
    }

    .procedure-benefits {
        margin-top: 4rem
    }

    .procedure-benefits-grid {
        grid-template-columns:1fr;
        grid-template-areas:'vmax' 'machine' 'result' 'neck' 'recovery' 'jaw' 'visit' 'face';
        gap: 1rem
    }

    .benefit-card {
        min-height: 17.5rem;
        padding: 1.5rem;
        border-radius: 1.5rem
    }

    .benefit-card h3 {
        font-size: 1.5rem
    }

    .benefit-card p {
        font-size: 1rem;
        line-height: 1.35
    }

    .benefit-image {
        height: auto;
        min-height: 0;
        aspect-ratio: 1;
        border-radius: 1.5rem
    }

    .procedure-tabs-section {
        margin-top: 4rem
    }

    .procedure-tabs-nav {
        display: none
    }

    .mobile-procedure-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: transparent;
        color: var(--accent);
        padding: 1rem 0;
        border-bottom: 1px solid #b426684d;
        text-align: left;
        font: 600 italic 1.75rem/1.1 'Cormorant Garamond', Georgia, serif
    }

    .mobile-procedure-toggle .procedure-toggle-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 1.25rem;
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 1rem;
        transition: transform .2s ease;
    }

    .procedure-toggle-chevron::before {
        content: '';
        display: block;
        width: .625rem;
        height: .625rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-25%) rotate(45deg);
    }

    .mobile-procedure-toggle[aria-expanded=true] .procedure-toggle-chevron {
        transform: rotate(180deg);
    }

    .procedure-tab-content {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }

    .procedure-checklist {
        grid-template-columns:1fr;
        gap: 0.875rem;
        font-size: 0.875rem;
        line-height: 1.35
    }
}

@media (max-width: 359px) {
    .about-eyebrow {
        font-size: 0.625rem
    }

    .about-bio h1 {
        font-size: 3.5rem
    }

    .about-hero, .about-hero > .container {
        min-height: 41.875rem
    }

    .about-hero-photo {
        width: 20.625rem;
        height: 20.625rem
    }

    .principle-tags > span {
        font-size: 0.6875rem
    }

    .catalog-card h2 {
        font-size: 1.3125rem
    }

    .process-timeline li {
        grid-template-columns:2.625rem minmax(0, 1fr);
        gap: 1.125rem
    }

    .timeline-line {
        left: 2.125rem
    }

    .procedure-hero h2 {
        font-size: 1.25rem
    }
}

@media (max-width: 600px) {
    .page-main > .consultation-section {
        margin-top: 4rem
    }

    .contacts-page .page-main > .consultation-section {
        margin-top: 0
    }

    #procedure-panel-1 .procedure-checklist {
        grid-auto-flow: row;
        grid-template-rows:none
    }
}

/* Keep the benefits grid compact when CMS contains a different number of cards. */
.procedure-benefits-grid--auto { grid-template-areas: none; }

/* CMS HTML content in procedure tabs; tab count can vary. */
.procedure-tabs-nav {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}
.procedure-richtext ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 2.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.procedure-richtext ul > li {
    position: relative;
    padding-left: 1.875rem;
    line-height: 1.2;
    min-width: 0;
}
.procedure-richtext ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--accent);
}
.procedure-richtext > * + * { margin-top: 1rem; }
.procedure-richtext li > p { margin: 0; }
.procedure-richtext img { max-width: 100%; height: auto; }
.procedure-richtext ul ul { display: block; margin-top: 0.75rem; }
.procedure-richtext ul ul > li + li { margin-top: 0.75rem; }
@media (max-width: 600px) {
    .procedure-richtext ul { grid-template-columns: 1fr; gap: 0.875rem; font-size: 0.875rem; }
    .procedure-richtext ul > li { line-height: 1.35; }
}


/* Semantic procedure list markers, drawn entirely in CSS. */
.procedure-richtext .content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.procedure-richtext .content ul > li {
    margin: 0;
    padding-left: 2rem;
    min-height: 1.375rem;
    overflow-wrap: anywhere;
}
.procedure-richtext ul > li::before {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.375rem;
    background: var(--accent);
}
.procedure-richtext ul > li::after {
    content: '';
    position: absolute;
    left: 0.375rem;
    top: 0.375rem;
    width: 0.625rem;
    height: 0.625rem;
    pointer-events: none;
    background:
        linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%);
}
.procedure-richtext--indications ul > li::before {
    border-radius: 50%;
    background: #e8f5ec;
}
.procedure-richtext--indications ul > li::after {
    left: 0.5625rem;
    top: 0.3125rem;
    width: 0.25rem;
    height: 0.5rem;
    border-right: 2px solid #27864a;
    border-bottom: 2px solid #27864a;
    background: none;
    transform: rotate(45deg);
}
.procedure-richtext--impact ul > li::before {
    border-radius: 50%;
    background: #fff0df;
}
.procedure-richtext--impact ul > li::after {
    left: 0.4375rem;
    top: 0.5rem;
    width: 0.3125rem;
    height: 0.3125rem;
    border: 0;
    border-top: 2px solid #dc791b;
    border-right: 2px solid #dc791b;
    background: none;
    transform: rotate(45deg);
}
.procedure-richtext .content ul ul {
    margin-top: 0.75rem;
}
.procedure-richtext .content ul ul > li + li {
    margin-top: 0.75rem;
}