/*! HOME HERO ===== */

.rw-home-hero .fl-row-content-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    padding: clamp(40px, 8vw, 100px) 20px 12.5vw !important;
}

.rw-home-hero .fl-col-content {
    display: flex;
    width: 100%;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 20px;
}

/*! Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(227, 94, 46, 0.15);
    border: 1px solid rgba(227, 94, 46, 0.3);
    border-radius: 100px;
    color: var(--tan);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 28px;
}

.hero-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--tan);
    border-radius: 50%;
    animation: rwpulse 2s ease-in-out infinite;
}

@keyframes rwpulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/*! Heading & Copy */
.hero-heading {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5.5vw, 60px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--white);
    margin-bottom: 24px;
}

.hero-heading .highlight {
    color: var(--orange);
}

.hero-content p {
    font-size: clamp(15px, 5.5vw, 19px);
    line-height: clamp(1.5em, 5.5vw, 1.8em);
    color: var(--white-70);
    margin-bottom: 40px;
    max-width: 580px;
}

/*! CTAs */
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}


/*! ===== EYEBROW ===== */

.eyebrow.tan {
    color: var(--tan) !important;
}

.eyebrow.tan::before {
    background: var(--tan);
}


/*! ===== Marquee Band =====
============================================================ */
.rw-home-scroller {
    border-top: 1px solid #B8D9E4;
    border-bottom: 1px solid #B8D9E4;
}

.marquee-band {
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: 0;
    animation: marquee 28s linear infinite;
    white-space: nowrap;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-item {
    font-size: 9.5px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--charcoal-blue);
    padding: 0 25px;
    flex-shrink: 0;
}

.marquee-sep {
    color: var(--tan);
    padding: 0 4px;
    flex-shrink: 0;
    height: 10px;
    line-height: 0.55;
}

/*! INTRO ROW
=========================*/

.intro-right {
    display: flex;
    flex-direction: column;
    gap: 36px;
    justify-content: center;
}

.value-item {
    display: flex;
    gap: 20px;
}

.value-num {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 300;
    color: var(--brown-light);
    line-height: 1;
    flex-shrink: 0;
    width: 44px;
}

.value-title {
    font-size: var(--h6-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 6px;
}

.value-desc {
    font-size: var(--p-size);
    color: var(--brown-dark);
}

/*! MEDICAL LIST
=========================*/
.medical-list {
    margin-top: 28px;
    border-top: 1px dotted rgba(93, 93, 95, 0.3);
    margin-bottom: 28px;
}

.medical-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 10px 16px 0;
    border-bottom: 1px dotted rgba(93, 93, 95, 0.3);
    text-decoration: none;
    transition: padding 0.2s ease-in-out;
    cursor: pointer;
}

.medical-item:hover {
    padding-left: 8px;
    text-decoration: none;
}

.mi-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mi-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--charcoal-blue);
    transition: color 0.2s;
}

.medical-item:hover .mi-name {
    color: var(--charcoal-blue-light);
}

.mi-arrow {
    font-size: 16px;
    color: var(--silver);
    transition: color 0.2s, transform 0.2s;
}

.medical-item:hover .mi-arrow {
    color: var(--azure-mist-dark);
    transform: translateX(4px);
}

/*! Home Category Grid
=========================*/
.cat-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cat-row {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {

    .cat-row-2,
    .cat-row-3 {
        grid-template-columns: 1fr 1fr;
        /* 2 columns */
    }
}

@media (min-width: 960px) {
    .cat-row-3 {
        grid-template-columns: 1fr 1fr 1fr;
        /* 3 columns */
    }
}

.cat-card {
    background: var(--white);
    border: 1px solid var(--silver);
    padding: 36px 32px 30px;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.cat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brown);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.cat-card:hover {
    box-shadow: 0 8px 40px rgba(56, 61, 80, .1);
    transform: translateY(-3px);
    border-color: var(--parchment-dark) !important;
}

.cat-card:hover::before {
    transform: scaleX(1);
}

.cat-icon-wrap {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    color: var(--tan);
}

.cat-icon-wrap svg {
    width: 100%;
    height: 100%;
}

.cat-name {
    font-family: var(--font-serif);
    color: var(--brown);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cat-subtitle {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 20px;
    padding-left: 4px;
}

.cat-treatments {
    display: grid;
    gap: 4px;
    margin-bottom: 22px;
}

.cat-treatments.two-col {
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {

    .cat-treatments.two-col {
        grid-template-columns: 1fr 1fr;
    }

}

.cat-t-item {
    display: flex;
    font-size: 15px;
    color: var(--rosy-granite);
    letter-spacing: 0.04em;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-mid);
    align-items: center;
    gap: 8px;
}

.cat-t-item::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--tan);
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.6;
}

.cat-link-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
    margin-top: auto;
}

.cat-link-text:hover {
    color: var(--tan);
    text-decoration: none;
}

.cat-card-membership {
    background: var(--charcoal-blue);
    border-color: var(--charcoal-blue);
}

.cat-card-membership .cat-name {
    color: var(--white);
}

.cat-card-membership .cat-subtitle {
    color: var(--rosy-granite);
}

.cat-card-membership .cat-t-item {
    color: var(--silver);
}

.cat-card-membership .cat-t-item::before {
    color: var(--charcoal-light);
}

.cat-card-membership .cat-link-text {
    color: var(--azure-mist);
}

.cat-card-membership::before {
    background: var(--azure-mist);
}

.cat-card-membership:hover {
    box-shadow: 0 8px 40px rgba(56, 61, 80, .3);
}

.cat-icon-membership {
    color: var(--azure-mist);
}


/*! Quote and Sig */
blockquote.quote {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.5vw, 32px);
    font-style: italic;
    font-weight: 400;
    color: var(--brown);
    line-height: 1.45;
    margin: 24px 0;
    border-left: 3px solid var(--tan);
    padding-left: 22px;
}

.quote-sig {
    font-family: var(--font-serif);
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--parchment-dark);
    font-size: 12px;
    color: var(--charcoal-blue);
}

.quote-sig strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 2px;
}

/*!
Home Membership Section ------------------------------ */

.memberships-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.memberships-header .eyebrow {
    color: var(--tan);
    justify-content: center;
}

.memberships-header .eyebrow::before {
    content: none;
}

.memberships-header h2 span {
    color: var(--tan);
}

.memberships-header p {
    color: var(--rosy-granite);
    margin: 0 auto;
}

.membership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.m-card {
    padding: 52px;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.m-card--gold {
    background-color: #414354;
    border: 1px solid #5D5E6B;
}

.m-card--platinum {
    background-color: #414354;
    border: 1px solid #5D5E6B;
}

.m-card:hover {
    border-color: #5D6170;
    box-shadow: 0 8px 40px rgba(122, 191, 212, 0.15);
}

.m-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 0;
    right: 0;
    background: #5D5E6B;
    color: var(--white);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    padding: 6px 16px 6px 18px;
    font-family: var(--font-sans);
}

.m-card.featured:hover::before {
    background: #5D6170;
}

.m-tier {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 10px;
}

.m-name {
    font-family: var(--font-serif);
    font-size: 46px;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1;
}

.m-desc {
    font-size: 16px;
    color: var(--rosy-granite);
    font-weight: 300;
    line-height: 1.9;
    margin-bottom: 28px;
}

.m-freq-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--silver);
    margin-bottom: 12px;
}

.m-freq {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.freq-pill {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 8px 14px;
    border: 1px solid var(--rosy-granite);
    border-radius: 3px;
    color: var(--rosy-granite);
    transition: all 0.25s;
    background: var(--white);
}

.freq-pill:hover {
    transform: translateY(-1px);
    background: var(--parchment);
}

.m-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 36px;
}

.chip {
    font-size: 13px;
    color: var(--brown);
    background: var(--parchment);
    border: 1px solid var(--rosy-granite);
    border-radius: 3px;
    padding: 5px 12px;
    font-weight: 400;
    transition: background 0.2s, transform 0.2s;
}

.chip:hover {
    transform: translateY(-1px);
    background: var(--white);
}

.m-card .btn {
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    border: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.m-card .btn:hover {
    box-shadow: 0 8px 30px rgba(0, 15, 47, 0.25);
    transform: translateY(-3px);
}

.m-card--gold .btn {
    background: var(--tan);
    color: var(--white);
}

.m-card--platinum .btn {
    background: var(--azure-mist);
    color: var(--charcoal-blue);
}

/* Testimonial pull quote */
.pull-quote {
    border-left: 3px solid var(--tan);
    padding: 20px 24px;
    background: var(--azure-light);
    margin: 28px 0;
}

.pull-quote p {
    font-family: var(--font-serif);
    font-size: 18px;
    font-style: italic;
    color: var(--charcoal-blue);
    margin-top: 0;
    line-height: 1.7;
}

.pull-quote cite {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tan);
    display: block;
    margin-top: 10px;
}

.rw-bg-parchment .pull-quote {
    background: var(--white);
}

/* ── Included treatments pill strip ── */
.included-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
}

.included-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--white);
}

.included-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.included-pill {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    background-color: #414354;
    border: 1px solid #5D5E6B;
    color: var(--rosy-granite);
    padding: 5px 12px;
}

.plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ── Column ── */
.plan-col {
    display: flex;
    flex-direction: column;
    background-color: #414354;
    border: 1px solid #5D5E6B;
}

.plan-col:hover {
    border-color: #5D6170;
    box-shadow: 0 8px 40px rgba(122, 191, 212, 0.15);
}

/* ── Column header ── */
.col-header {
    padding: 36px 44px 28px;
    border-bottom: 1px solid var(--border-mid);
    background: var(--off-white);
}

.col-title {
    font-family: var(--font-serif);
    font-size: 46px;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 10px;
    color: var(--white);
}

.col-title em {
    font-style: italic;
    color: var(--tan);
}

.col-note {
    font-size: 15px;
    color: var(--rosy-granite);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.03em;
}

.col-note strong {
    font-weight: 600;
    color: var(--text-mid);
}

/* ── Plan items ── */
.plan-list {
    display: flex;
    flex-direction: column;
    padding: 24px 44px 44px;
    gap: 10px;
    flex: 1;
}

.plan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border: 1px solid var(--tan);
    text-decoration: none;
    transition: all 0.25s;
    position: relative;
    background: var(--tan);
    color: var(--white);
}

.plan-noexpire .plan-item {
    border: 1px solid var(--azure-mist);
    background: var(--azure-mist);
    color: var(--charcoal-blue);
}

.plan-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tan-light);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.25s;
}

.plan-noexpire .plan-item::before {
    background: var(--azure-mist-dark);
}

.plan-item:hover {
    border-color: var(--tan-light);
    color: var(--white);
    background: none;
    transform: translateX(3px);
    text-decoration: none;
    cursor: pointer;
}

.plan-noexpire .plan-item:hover {
    border-color: var(--azure-mist-dark);
    color: var(--white);
}

.plan-item:hover::before {
    transform: scaleY(1);
}

.plan-item:hover .plan-arrow {
    transform: translateX(4px);
    color: var(--ice-dark);
}

.plan-item .plan-price .chillrx-price {
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 300;
}

.plan-noexpire .plan-item .plan-price .chillrx-price {
    color: var(--charcoal-blue);
}

.plan-noexpire .plan-item:hover .plan-price .chillrx-price,
.plan-item:hover .plan-price,
.plan-item:hover .plan-price .chillrx-price {
    color: var(--white);
}

.plan-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plan-qty {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.2;
}

.plan-desc {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 400;
    letter-spacing: 0.06em;
}

.plan-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.plan-price {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 300;
    color: var(--white);
    transition: color 0.25s;
    line-height: 1;
    margin-top: -7px;
}

.plan-arrow {
    font-size: 16px;
    color: var(--text-light);
    transition: all 0.25s;
}

/* ── Best value badge ── */
.best-value {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--brown);
    color: var(--white);
    padding: 3px 8px;
    line-height: 1;
    border-radius: 1px;
}

.plan-noexpire .best-value {
    background: #5aa3bb;
}


/*! ─────────────────────────────────────────
    LOCATIONS STRIP — Azure Mist
 ───────────────────────────────────────── */
.rw-locations-strip .eyebrow {
    color: var(--brown);
    justify-content: center;
}

.rw-locations-strip .eyebrow::before {
    content: none;
}

.rw-locations-strip h2 {
    text-align: center;
    margin-bottom: 40px;
}

.loc-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.loc-card {
    background: var(--white);
    border: 1px solid var(--silver);
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    color: inherit;
    border-radius: 3px;
}

.loc-card:hover {
    border-color: var(--brown);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(104, 77, 68, 0.1);
    text-decoration: none;
}

.loc-state {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 0px;
}

.loc-city {
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--charcoal-blue);
}





/*! PAGE HEADER BANNER ===== */
.h1-full-width-row {
    background: var(--parchment);
    border-bottom: 1px solid var(--parchment-dark);
}

.h1-full-width-row .fl-col {
    width: 100%;
}

.h1-full-width-row .fl-row-content-wrap {
    padding: 40px var(--section-padding-lr) 40px
}

.h1-full-width-row h1 {
    color: var(--charcoal-blue);
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 15px
}

.h1-full-width-row h1 em {
    font-style: italic;
    color: var(--brown);
}

.h1-full-width-row p {
    color: var(--brown);
    font-size: 20px;
    margin-bottom: 15px
}

/*! Breadcumbs
------------------------------------------------------------*/
.rw-breadcrumbs {
    font-size: clamp(12px, 1.5vw, 14px);
    color: #989594;
    margin-bottom: 10px
}

.rw-breadcrumbs-inline {
    border-top: 1px solid var(--silver);
    margin-top: 15px;
    padding-top: 15px;
    margin-bottom: 0;
    color: #989594;
    font-size: 14px;
    width: fit-content
}

.rw-breadcrumbs-inline strong {
    font-weight: 600 !important;
}

.rw-breadcrumbs-inline a {
    color: #989594;
}

/*! ═══════════════════════════════════════════
   HOW IT WORKS — Process steps band
   Reusable for any multi-step service
═══════════════════════════════════════════ */
.process-header {
    text-align: center;
    margin-bottom: 52px;
}

.process-header .eyebrow {
    justify-content: center;
}

.process-header .eyebrow::before {
    content: none;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--silver);
    z-index: 0;
}

.process-step {
    text-align: center;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.step-circle {
    width: 56px;
    height: 56px;
    background: var(--white);
    border: 1.5px solid var(--silver);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--charcoal-blue);
    transition: all 0.25s;
}

.process-step:hover .step-circle {
    background: var(--brown);
    border-color: var(--brown);
    color: var(--white);
}

.step-title {
    font-size: clamp(14px, 1.25rem, 16px);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--charcoal-blue);
    margin-bottom: 8px;
}

p.step-body {
    font-size: clamp(13px, 1.25rem, 15px);
    color: var(--brown-dark);
    line-height: 1.8;
}

/*! ═══════════════════════════════════════════
   MEDICATION SECTION TEMPLATE
   Reusable: .med-section (alternating image sides)
═══════════════════════════════════════════ */

.med-headline {
    font-family: var(--font-serif);
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--charcoal-blue);
    margin-bottom: 6px;
}

.med-headline em {
    font-style: italic;
    color: var(--brown);
}

.med-headline sup {
    font-size: 0.5em;
    vertical-align: super;
    color: var(--rosy-granite);
    font-style: normal;
}

.med-tagline {
    font-size: 11px;
    font-style: italic;
    font-family: var(--font-serif);
    color: var(--rosy-granite);
    margin-bottom: 20px;
}

/* Key benefit bullets */
.med-bullets {
    list-style: none;
    margin: 20px 0 24px;
}

.med-bullets li {
    font-size: 13px;
    color: var(--charcoal-blue);
    padding: 8px 0;
    border-bottom: 1px solid var(--parchment-dark);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}

.med-bullets li::before {
    content: '✦';
    font-size: 8px;
    color: var(--tan);
    flex-shrink: 0;
    margin-top: 4px;
}

/* Expandable Q&A */
.med-qa {
    margin: 24px 0;
}

.med-qa-item {
    border-top: 1px solid var(--parchment-dark);
}

.med-qa-item:last-child {
    border-bottom: 1px solid var(--parchment-dark);
}

.med-qa-trigger {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s;
}

.med-qa-trigger:hover .qa-q {
    color: var(--brown);
}

.qa-q {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--charcoal-blue);
    transition: color 0.2s;
}

.qa-icon {
    font-size: 18px;
    color: var(--silver);
    flex-shrink: 0;
    transition: transform 0.3s, color 0.2s;
    line-height: 1;
}

.med-qa-item.open .qa-icon {
    transform: rotate(45deg);
    color: var(--brown);
}

.med-qa-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.med-qa-item.open .med-qa-body {
    max-height: 300px;
}

.med-qa-body p {
    font-size: 13px;
    color: var(--rosy-granite);
    line-height: 1.85;
    padding-bottom: 16px;
}

.med-safety {
    font-size: 11px;
    color: var(--silver);
    line-height: 1.7;
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--parchment);
    border-left: 3px solid var(--silver);
    font-style: italic;
}

.med-actions {
    margin-top: 28px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}


/* ============================================================
   FACIALS PAGE
*/

.facial-nav {
    animation-delay: 0.68s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

.facial-nav-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--charcoal-blue);
    margin-bottom: 4px;
}

.facial-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.facial-pill {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rosy-granite);
    border: 1px solid var(--gray-200);
    padding: 9px 16px;
    text-decoration: none;
    transition: all 0.25s;
}

.facial-pill:hover {
    border-color: var(--azure-mist-rich);
    color: var(--azure-mist-rich);
    background: var(--azure-light);
    text-decoration: none;
}


.facial-card {
    background: var(--white);
    border: 1px solid var(--parchment-dark);
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.facial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--azure-mist-dark);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.facial-card:hover {
    text-decoration: none;
    border: 1px solid var(--azure-mist-dark);
}

.facial-card:hover::before {
    transform: scaleX(1);
}

.facial-card:hover .fc-arrow {
    transform: translateX(4px);
    color: var(--ice-dark);
    text-decoration: none;
}

.fc-num {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 300;
    color: var(--tan);
    line-height: 1;
}

.fc-name {
    font-family: var(--font-serif);
    font-size: var(--h3-size);
    font-weight: 300;
    line-height: 1.2;
    color: var(--charcoal-blue);
}

.fc-tag {
    font-size: var(--p-size);
    color: var(--rosy-granite);
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.fc-arrow {
    font-size: 14px;
    color: var(--text-light);
    margin-top: auto;
    padding-top: 8px;
    transition: all 0.25s;
    align-self: flex-start;
}

.t-number {
    font-family: var(--font-serif);
    font-size: 80px;
    font-weight: 300;
    color: rgba(122, 191, 212, 0.15);
    line-height: 1;
    margin-bottom: -12px;
    user-select: none;
}

.t-tagline {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 300;
    font-style: italic;
    color: var(--charcoal-blue-light);
    margin-bottom: 20px;
}

.t-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 28px;
}

.t-lists .list-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rosy-granite);
    margin-bottom: 12px;
}

.t-lists .check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-left: 0;
}

.t-lists .check-list li,
.t-lists .two-col-list li {
    color: var(--rosy-granite);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}

.t-lists .check-list li::before,
.t-lists .two-col-list li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--azure-deep);
    flex-shrink: 0;
    margin-top: 9px;
}

.t-pair {
    margin-bottom: 36px;
}

.t-pair .list-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rosy-granite);
    margin-bottom: 12px;
}

.result-badge {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--cream);
    border-left: 3px solid var(--azure-mist-rich);
    margin-bottom: 36px;
}


.result-label {
    font-size: var(--p-size);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--azure-mist-rich);
    flex-shrink: 0;
}

.result-text {
    font-size: var(--p-size);
    color: var(--rosy-granite);
    line-height: 1.75;
    font-style: italic;
}

.comparison-header {
    margin-bottom: 36px;
}

.comparison-grid {
    gap: 2px;
}

.comp-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 44px 36px;
    transition: background 0.3s, border-color 0.3s;
    text-decoration: none;
    display: block;
    color: inherit;
}

.comp-card:hover {
    background: rgba(122, 191, 212, 0.1);
    border-color: rgba(122, 191, 212, 0.3);
}

.comp-num {
    font-family: var(--font-serif);
    font-size: 56px;
    font-weight: 300;
    color: rgba(122, 191, 212, 0.25);
    line-height: 1;
    margin-bottom: 16px;
}

.comp-name {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 300;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 20px;
}

.comp-name em {
    font-style: italic;
    color: var(--azure-mist-rich);
}

.comp-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.comp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 0;
}

.comp-list li {
    font-size: var(--p-size);
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

.comp-list li::before {
    content: '✓';
    color: var(--azure-mist-rich);
    font-size: var(--p-size);
    flex-shrink: 0;
    font-weight: 700;
}

.comp-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--azure-mist-rich);
    transition: gap 0.25s;
}

.comp-card:hover .comp-cta {
    gap: 14px;
    color: var(--azure-mist-dark);
}