/* ==========================================================================
   Sections Component
   ========================================================================== */

/* ---- Approach Section ---- */

/*
 * Layout: padded container with two-column split header,
 * then a full-width (edge-to-edge) image below.
 */
.approach-section {
    overflow: hidden;
    padding-top: var(--space-5xl);
    padding-bottom: 0; /* Image bleeds to section edge */
}

/* Two-column grid: label+title | description+features+CTA */
.approach__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-4xl);
}

/* ---- Left column ---- */
.approach__label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    margin-bottom: var(--space-md);
}

.approach__title {
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-text-dark);
    margin: 0;
}

/* ---- Right column ---- */
.approach__description {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
    margin: 0 0 var(--space-xl);
}

.approach__features {
    list-style: none;
    margin: 0 0 var(--space-xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.approach__feature {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
}

.approach__feature-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-text-dark);
}

.approach__actions {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* ---- Full-width image (edge-to-edge) ---- */
.approach__image {
    width: 100%;
    overflow: hidden;
}

.approach__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 810px;
}

/* ---- Desktop: side-by-side header columns ---- */
@media (min-width: 1024px) {
    .approach__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4xl);
    }

    .approach__title {
        font-size: 6rem; /* 60px — matches mockup */
        line-height: 1.2;
    }
}

/* ---- Process Steps ---- */
.process-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    counter-reset: step;
}

.process-step {
    position: relative;
    text-align: center;
    padding: var(--space-xl);
}

.process-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background-color: var(--color-sage);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
}

.process-step__title {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-sm);
}

.process-step__description {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

/* Connector line (visible on desktop) */
.process-step__connector {
    display: none;
}

@media (min-width: 768px) {
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }

    .process-step__connector {
        display: block;
        position: absolute;
        top: 28px;
        right: -50%;
        width: 100%;
        height: 2px;
        background: repeating-linear-gradient(
            to right,
            var(--color-border) 0,
            var(--color-border) 6px,
            transparent 6px,
            transparent 12px
        );
        z-index: -1;
    }

    .process-step:last-child .process-step__connector {
        display: none;
    }
}

/* ---- Expertise Section ---- */
.expertise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.expertise-item {
    text-align: center;
    padding: var(--space-xl);
}

.expertise-item__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    color: var(--color-sage);
}

.expertise-item__title {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-sm);
}

.expertise-item__description {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

@media (min-width: 768px) {
    .expertise-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- Why Choose Us ---- */
.why-choose {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.why-choose__image {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.why-choose__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.why-choose__reasons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.why-choose__reason {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.why-choose__reason-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-sage);
    margin-top: 0.2rem;
}

@media (min-width: 1024px) {
    .why-choose {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Blog Preview ---- */
.blog-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.blog-preview-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-preview-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.blog-preview-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-preview-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-preview-card__content {
    padding: var(--space-lg);
}

.blog-preview-card__date {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
}

.blog-preview-card__title {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-sm);
}

.blog-preview-card__title a {
    color: var(--color-text-dark);
}

.blog-preview-card__title a:hover {
    color: var(--color-sage);
}

.blog-preview-card__excerpt {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

@media (min-width: 768px) {
    .blog-preview-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- CTA Book Section ---- */
.cta-book {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.cta-book__content {
    text-align: center;
}

.cta-book__title {
    color: var(--color-white);
}

.cta-book__description {
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, 0.8);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-xl);
}

.cta-book__image {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.cta-book__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .cta-book {
        grid-template-columns: 1fr 1fr;
    }

    .cta-book__content {
        text-align: left;
    }
}

/* ---- Values Grid (About page) ---- */
.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.value-card {
    padding: var(--space-xl);
    text-align: center;
}

.value-card__icon {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-md);
}

.value-card__title {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-sm);
}

.value-card__description {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

@media (min-width: 768px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- Who We Serve ---- */
.serve-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.serve-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

.serve-card__title {
    font-size: var(--fs-xl);
    margin-bottom: 0;
}

.serve-card__description {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    margin: 0;
}

@media (min-width: 768px) {
    .serve-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Two Column Layout (alternating) ---- */
.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.two-col__image {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.two-col__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .two-col {
        grid-template-columns: 1fr 1fr;
    }

    .two-col--reverse .two-col__image {
        order: -1;
    }
}

/* ==========================================================================
   Team Preview Section (Home Page)
   ==========================================================================
   Scoped overrides for the team-preview section header and cards.
   Matches mockup: centered header (max-width 768px), 3-col flex layout,
   80px circular avatars, Inter body font for names/roles, text-dark palette.
   ========================================================================== */

/* ---- Section header: centered, constrained width, proper spacing ---- */
.section--team-preview .section__header--center {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4xl); /* 80px gap before card grid */
}

/* Label: body font, sentence-case, text color (override global sage/uppercase) */
.section--team-preview .section__label {
    font-family: var(--font-body);
    font-size: var(--fs-base);       /* 16px */
    line-height: var(--lh-normal);   /* 24px */
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-dark);
    margin-bottom: var(--space-md);  /* 16px before title */
}

/* Title: 60px Montserrat — hero-scale for emphasis */
.section--team-preview .section__title {
    font-size: 6rem;                 /* 60px */
    line-height: 1.2;               /* 72px */
    margin-bottom: var(--space-lg);  /* 24px before subtitle */
}

/* Subtitle: not defined globally, styled here for team-preview */
.section--team-preview .section__subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-lg);        /* 20px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);  /* 30px */
    color: var(--color-text-dark);
    text-align: center;
    margin: 0;
}

/* ---- 3-column card grid (flex for equal-width columns) ---- */
.team-preview__grid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-2xl);           /* 48px between cards */
}

/* ---- Card overrides: centered flex column with mockup sizing ---- */
.section--team-preview .team-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);            /* 24px between avatar / info / social */
    padding: 0;
}

/* Avatar: 80×80 circle with cover fit */
.section--team-preview .team-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    object-fit: cover;
    margin: 0;                       /* Remove default auto-margin */
}

.section--team-preview .team-card__avatar--placeholder {
    width: 80px;
    height: 80px;
}

/* Info block: center-aligned, 16px gap between name-role and bio */
.section--team-preview .team-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);            /* 16px */
    text-align: center;
}

/* Name: 26px Inter semibold */
.section--team-preview .team-card__name {
    font-family: var(--font-body);
    font-size: 2.6rem;              /* 26px */
    font-weight: var(--fw-semibold);
    line-height: 1.5;               /* ~39px */
    color: var(--color-text-dark);
    margin-bottom: 0;
}

/* Role: 20px regular, text-dark (override global sage color) */
.section--team-preview .team-card__role {
    font-size: var(--fs-lg);        /* 20px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    margin-bottom: 0;
}

/* Bio: 18px regular, text-dark */
.section--team-preview .team-card__bio {
    font-size: var(--fs-md);        /* 18px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    margin-bottom: 0;
}

/* Social icons: 14px gap, centered */
.section--team-preview .team-card__social {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.4rem;                     /* 14px */
}

/* ---- Tablet: 2-column wrap ---- */
@media (max-width: 1023px) and (min-width: 640px) {
    .team-preview__grid {
        flex-wrap: wrap;
    }

    .section--team-preview .team-card {
        flex: 1 1 calc(50% - var(--space-2xl));
        max-width: calc(50% - var(--space-lg));
    }
}

/* ---- Mobile: single column ---- */
@media (max-width: 639px) {
    .team-preview__grid {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3xl);       /* 64px between stacked cards */
    }

    .section--team-preview .team-card {
        max-width: 400px;
        width: 100%;
    }

    .section--team-preview .section__title {
        font-size: var(--fs-3xl);    /* 40px on mobile */
        line-height: var(--lh-tight);
    }

    .section--team-preview .section__subtitle {
        font-size: var(--fs-md);     /* 18px on mobile */
    }
}


/* ==========================================================================
   Non-Surgical Reconstructive Care Section (.section--non-surgical)
   --------------------------------------------------------------------------
   Educational, content-first section with a centered narrative + decorative
   pillar grid. Designed to convey topical authority while feeling premium.
   ========================================================================== */
.section--non-surgical {
    padding-block: var(--space-5xl);
    position: relative;
    overflow: hidden;
}

.section--non-surgical::before {
    /* Subtle sage gradient halo behind heading for visual depth. */
    content: "";
    position: absolute;
    inset: -20% 50% auto -20%;
    height: 60%;
    background: radial-gradient(closest-side, rgba(154, 161, 123, 0.18), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.non-surgical__inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.non-surgical__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.non-surgical__title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4vw, var(--fs-4xl));
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-text-dark);
    margin: 0;
}

.non-surgical__lead {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
    margin: 0;
    max-width: 780px;
}

.non-surgical__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    text-align: left;
    margin-bottom: var(--space-3xl);
}

.non-surgical__paragraph {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
    margin: 0;
}

/* Pillar grid � 4-up on desktop, 2-up on tablet, stack on mobile. */
.non-surgical__pillars {
    list-style: none;
    margin: 0 0 var(--space-3xl);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
}

.non-surgical__pillar {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.non-surgical__pillar:hover,
.non-surgical__pillar:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-sage);
}

.non-surgical__pillar-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(154, 161, 123, 0.18), rgba(154, 161, 123, 0.04));
    color: var(--color-sage-hover);
}

.non-surgical__pillar-icon svg {
    width: 28px;
    height: 28px;
}

.non-surgical__pillar-title {
    font-family: var(--font-heading);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text-dark);
    line-height: var(--lh-snug);
}

.non-surgical__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
}

@media (max-width: 960px) {
    .non-surgical__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .non-surgical__pillars { grid-template-columns: 1fr; }
    .non-surgical__body { gap: var(--space-md); }
}


/* ==========================================================================
   Feature Highlight Section (.section--feature-highlight)
   --------------------------------------------------------------------------
   Reusable two-column spotlight: image + content. Image gets a soft sage
   accent frame and gentle hover lift; content area supports label, title,
   intro copy, optional bullets and CTA.
   ========================================================================== */
.section--feature-highlight {
    padding-block: var(--space-5xl);
}

.feature-highlight__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(var(--space-2xl), 6vw, var(--space-4xl));
    align-items: center;
}

.section--feature-highlight--reverse .feature-highlight__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.section--feature-highlight--reverse .feature-highlight__media {
    order: 2;
}

/* ---- Media column ---- */
.feature-highlight__media {
    position: relative;
    margin: 0;
    isolation: isolate;
}

.feature-highlight__media::before {
    /* Decorative sage frame offset behind the image � creates depth. */
    content: "";
    position: absolute;
    inset: 12% -4% -8% 12%;
    background: linear-gradient(135deg, rgba(154, 161, 123, 0.35), rgba(154, 161, 123, 0.08));
    border-radius: var(--border-radius-lg);
    z-index: -1;
    transition: transform var(--transition-base);
}

.feature-highlight__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.feature-highlight__image--placeholder {
    background: var(--color-background-warm);
}

.feature-highlight__media:hover .feature-highlight__image,
.feature-highlight__media:focus-within .feature-highlight__image {
    transform: translateY(-4px) scale(1.01);
}

.feature-highlight__media:hover::before,
.feature-highlight__media:focus-within::before {
    transform: translate(-6px, -6px);
}

.feature-highlight__badge {
    position: absolute;
    bottom: var(--space-lg);
    left: var(--space-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    color: var(--color-sage-hover);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
}

/* ---- Content column ---- */
.feature-highlight__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.feature-highlight__title {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 3.6vw, var(--fs-4xl));
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-text-dark);
    margin: 0;
}

.feature-highlight__text {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
}

.feature-highlight__text p { margin: 0 0 var(--space-md); }
.feature-highlight__text p:last-child { margin-bottom: 0; }

.feature-highlight__bullets-intro {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--color-text-dark);
    margin: 0;
}

.feature-highlight__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-lg);
}

.feature-highlight__bullet {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--color-text-dark);
}

.feature-highlight__bullet-icon {
    flex-shrink: 0;
    color: var(--color-sage-hover);
}

.feature-highlight__actions {
    margin-top: var(--space-md);
}

@media (max-width: 900px) {
    .feature-highlight__grid,
    .section--feature-highlight--reverse .feature-highlight__grid {
        grid-template-columns: 1fr;
    }

    .section--feature-highlight--reverse .feature-highlight__media {
        order: 0;
    }

    .feature-highlight__bullets {
        grid-template-columns: 1fr;
    }

    .feature-highlight__media::before {
        inset: 8% -3% -6% 8%;
    }
}


/* ==========================================================================
   Feature Highlight — Bullet Groups (multi-list variant)
   --------------------------------------------------------------------------
   Used by sections like Corrective Exercises that need two separate bullet
   lists ("Designed to:", "Programs may include:") inside a single spotlight.
   ========================================================================== */
.feature-highlight__bullet-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.feature-highlight__bullet-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* When grouped, keep bullets in a single column for readability of paired lists. */
.feature-highlight__bullet-groups .feature-highlight__bullets {
    grid-template-columns: 1fr;
}


/* ==========================================================================
   Patient Experience — "What to Expect" Section
   --------------------------------------------------------------------------
   Three numbered visit cards on a soft warm background. Each card has a
   sage-tinted icon chip, eyebrow ("Step 01"), H3 title, body. Cards lift on
   hover with a subtle shadow + accent bar reveal. Uses .reveal-stagger so
   the card row animates in sequence on scroll.
   ========================================================================== */
.section--patient-experience {
    padding-block: var(--space-5xl);
    position: relative;
    overflow: hidden;
}

/* Soft decorative gradient blob in the background — adds depth without noise. */
.section--patient-experience::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto auto;
    width: 520px;
    height: 520px;
    background: radial-gradient(closest-side, rgba(154, 161, 123, 0.18), rgba(154, 161, 123, 0));
    pointer-events: none;
    z-index: 0;
}

.section--patient-experience .container {
    position: relative;
    z-index: 1;
}

.patient-experience__header {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: var(--space-3xl);
}

.patient-experience__intro {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
}

.patient-experience__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    counter-reset: patient-card;
}

.patient-experience__card {
    counter-increment: patient-card;
    display: flex;
}

/* The visible card body — separated from the <li> so we can apply the same
   premium frame regardless of list semantics, and so hover transforms only
   affect the card surface (not the staggered reveal transform). */
.patient-experience__card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-xl);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

/* Top accent bar — animates from 0 to full width on hover. */
.patient-experience__card-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-sage), var(--color-sage-hover));
    transition: width var(--transition-slow);
}

.patient-experience__card:hover .patient-experience__card-inner,
.patient-experience__card:focus-within .patient-experience__card-inner {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(154, 161, 123, 0.45);
}

.patient-experience__card:hover .patient-experience__card-inner::before,
.patient-experience__card:focus-within .patient-experience__card-inner::before {
    width: 100%;
}

.patient-experience__card-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.patient-experience__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(154, 161, 123, 0.22), rgba(154, 161, 123, 0.08));
    color: var(--color-sage-hover);
    transition: transform var(--transition-base), background var(--transition-base);
}

.patient-experience__icon svg {
    width: 26px;
    height: 26px;
}

.patient-experience__card:hover .patient-experience__icon {
    transform: scale(1.06) rotate(-3deg);
    background: linear-gradient(135deg, rgba(154, 161, 123, 0.32), rgba(154, 161, 123, 0.14));
}

.patient-experience__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-sage-hover);
}

.patient-experience__title {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--color-text-dark);
    margin: 0;
}

.patient-experience__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
}

.patient-experience__body p {
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
    .patient-experience__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .section--patient-experience {
        padding-block: var(--space-4xl);
    }

    .patient-experience__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .patient-experience__card-inner {
        padding: var(--space-lg);
    }
}