/* ==========================================================================
   Front Page Styles
   ========================================================================== */

/* ---- Homepage Hero specific ---- */
.home-hero .hero__title {
    max-width: 90rem;
}

/* ---- Blog Preview on Homepage ---- */
.home-blog-preview {
    position: relative;
}

.home-blog-preview .section__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.home-blog-preview .section__header .btn {
    align-self: flex-start;
}

@media (min-width: 768px) {
    .home-blog-preview .section__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

/* ==========================================================================
   Shared Section Header Overrides (Home)
   ==========================================================================
   Many homepage sections share the same centered header pattern from the
   mockup: label (16px Inter semibold) → title (60px Montserrat) → subtitle
   (20px Inter) — all centered within max-width: 768px.
   ========================================================================== */

/* ---- Subtitle: missing from global.css, defined for all home sections ---- */
.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);
    margin: 0;
}

.section__header--center .section__subtitle {
    text-align: center;
}

/* ---- Section actions row (buttons below header) ---- */
.section__actions {
    display: flex;
    align-items: center;
    gap: var(--space-lg);               /* 24px between buttons */
    margin-top: var(--space-xl);        /* 32px above buttons */
}

.section__actions--center {
    justify-content: center;
}

/* ==========================================================================
   Process Steps Section — "The Wellness Journey Begins Here"
   ==========================================================================
   Mockup: scheme-2 background, centered header (768px), 3-col card layout
   with 256×256 rounded images, line+dot connector, centered content.
   ========================================================================== */
.section--process {
    background-color: var(--color-background-light);
}

/* ---- Reuse the same centered header pattern ---- */
.section--process .section__header--center {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4xl);
}

.section--process .section__label {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-dark);
}

.section--process .section__title {
    font-size: 6rem;                    /* 60px */
    line-height: 1.2;                   /* 72px */
    margin-bottom: var(--space-lg);     /* 24px */
}

.section--process .section__subtitle {
    margin-bottom: 0;
}

/* Buttons row below subtitle */
.section--process .section__actions {
    justify-content: center;
}

/* Link-style buttons: dark text per mockup (override global sage) */
.section--process .btn--link,
.section--expertise .btn--link {
    color: var(--color-text-dark);
}

.section--process .btn--link:hover,
.section--expertise .btn--link:hover {
    color: var(--color-text-dark);
    opacity: 0.7;
}

/* ---- 3-column step grid ---- */
.process__steps {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;                              /* Cards touch edge-to-edge */
}

.process__step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);                /* 16px between image → connector → content */
}

/* ---- Step image: 256×256 with border-radius ---- */
.process__step-image {
    width: 256px;
    height: 256px;
    border-radius: var(--border-radius); /* 8px */
    object-fit: cover;
}

/* Placeholder fallback when no image provided */
.process__step-placeholder {
    width: 256px;
    height: 256px;
    border-radius: var(--border-radius);
    background-color: var(--color-background-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-medium);
    color: var(--color-sage);
}

/* ---- Line + dot connector between image and content ---- */
.process__step-connector {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: var(--space-md);        /* 16px space above connector */
    gap: var(--space-sm);
}

.process__step-line {
    flex: 1;
    height: 3px;
    background-color: var(--color-text-dark);
}

.process__step-dot {
    width: 15px;
    height: 15px;
    border-radius: 9999px;
    background-color: var(--color-text-dark);
    flex-shrink: 0;
}

/* ---- Step content: centered text ---- */
.process__step-content {
    text-align: center;
    padding: 0 var(--space-xl);          /* 32px horizontal padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);                /* 8px between title and description */
}

.process__step-title {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);           /* 32px */
    font-weight: var(--fw-medium);
    line-height: 1.3;                   /* ~41.6px */
    color: var(--color-text-dark);
    margin: 0;
}

.process__step-description {
    font-family: var(--font-body);
    font-size: var(--fs-md);            /* 18px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);      /* 27px */
    color: var(--color-text-dark);
    margin: 0;
}

/* ---- Process: tablet ---- */
@media (max-width: 1023px) and (min-width: 640px) {
    .process__steps {
        flex-wrap: wrap;
        gap: var(--space-3xl);
    }

    .process__step {
        flex: 1 1 calc(50% - var(--space-xl));
    }
}

/* ---- Process: mobile ---- */
@media (max-width: 639px) {
    .process__steps {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3xl);
    }

    .process__step {
        width: 100%;
        max-width: 360px;
    }

    .process__step-image,
    .process__step-placeholder {
        width: 200px;
        height: 200px;
    }

    .section--process .section__title {
        font-size: var(--fs-3xl);        /* 40px mobile */
    }
}

/* ==========================================================================
   Areas of Expertise Section — "We Treat What Troubles You"
   ==========================================================================
   Mockup: scheme-1, centered header (768px), 3-col icon grid with
   48px icon → 40px Montserrat titles → 18px descriptions. Centered buttons.
   ========================================================================== */
.section--expertise .section__header--center {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4xl);
}

.section--expertise .section__label {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-dark);
}

.section--expertise .section__title {
    font-size: 6rem;
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

/* ---- 3-column expertise grid ---- */
.expertise__grid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-2xl);               /* 48px */
    margin-bottom: var(--space-4xl);
}

.expertise__card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);                /* 24px */
    text-align: center;
}

.expertise__icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-dark);
    flex-shrink: 0;
}

.expertise__icon svg {
    width: 48px;
    height: 48px;
}

.expertise__title {
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);           /* 40px */
    font-weight: var(--fw-medium);
    line-height: 1.3;                   /* 52px */
    color: var(--color-text-dark);
    margin: 0;
}

.expertise__description {
    font-family: var(--font-body);
    font-size: var(--fs-md);            /* 18px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);      /* 27px */
    color: var(--color-text-dark);
    margin: 0;
}

/* ---- Expertise: tablet ---- */
@media (max-width: 1023px) and (min-width: 640px) {
    .expertise__grid {
        flex-wrap: wrap;
    }

    .expertise__card {
        flex: 1 1 calc(50% - var(--space-2xl));
    }

    .expertise__title {
        font-size: var(--fs-2xl);        /* 32px */
    }
}

/* ---- Expertise: mobile ---- */
@media (max-width: 639px) {
    .expertise__grid {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3xl);
    }

    .expertise__card {
        max-width: 400px;
        width: 100%;
    }

    .expertise__title {
        font-size: var(--fs-2xl);
    }

    .section--expertise .section__title {
        font-size: var(--fs-3xl);
    }
}

/* ==========================================================================
   Why Choose Us Section
   ==========================================================================
   Mockup: scheme-1, 2-col side-by-side (image left, content right),
   80px gap. Image: 600×640 rounded. Content: 48px title, 20px description,
   18px reasons list with 16px gap.
   ========================================================================== */
.why-choose__grid {
    display: flex;
    align-items: center;
    gap: var(--space-4xl);               /* 80px */
}

.why-choose__image {
    flex: 1 1 0;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.why-choose__image img {
    width: 100%;
    height: 640px;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: block;
}

/* Placeholder when no image */
.why-choose__image--placeholder {
    height: 640px;
    background-color: var(--color-background-warm);
    border-radius: var(--border-radius);
}

.why-choose__content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);                /* 32px between title/desc and list */
}

.why-choose__title {
    font-family: var(--font-heading);
    font-size: 4.8rem;                  /* 48px */
    font-weight: var(--fw-medium);
    line-height: 1.2;                   /* 57.6px */
    color: var(--color-text-dark);
    margin: 0;
}

.why-choose__description {
    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);
    margin: 0;
}

/* ---- Reasons list (no bullets, 16px vertical gap) ---- */
.why-choose__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);                /* 16px */
}

.why-choose__list li,
.why-choose__list-item {
    font-family: var(--font-body);
    font-size: var(--fs-md);            /* 18px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);      /* 27px */
    color: var(--color-text-dark);
    padding: 0;
    /* Inline icon + label layout — keeps multi-line bullets aligned to the icon */
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

/* Check icon — circular brand-colored badge for visual rhythm and a polished, premium feel */
.why-choose__list-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.4rem;
    border-radius: 999px;
    background: var(--color-background-warm, rgba(9, 9, 8, 0.06));
    color: var(--color-text-dark);
    box-sizing: content-box;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.22s ease;
}

.why-choose__list-item:hover .why-choose__list-icon {
    transform: scale(1.08) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
    .why-choose__list-icon {
        transition: none;
    }
    .why-choose__list-item:hover .why-choose__list-icon {
        transform: none;
    }
}

/* Supporting paragraph below the list — slightly muted to read as context, not a bullet */
.why-choose__paragraph {
    font-family: var(--font-body);
    font-size: var(--fs-md);            /* 18px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    margin: 0;
    padding-top: var(--space-sm, 0.8rem);
    border-top: 1px solid rgba(9, 9, 8, 0.10);
}

/* ---- Why Choose: tablet ---- */
@media (max-width: 1023px) {
    .why-choose__grid {
        flex-direction: column;
        gap: var(--space-3xl);
    }

    .why-choose__image img {
        height: 400px;
    }

    .why-choose__image--placeholder {
        height: 300px;
    }

    .why-choose__title {
        font-size: var(--fs-3xl);        /* 40px */
    }
}

/* ---- Why Choose: mobile ---- */
@media (max-width: 639px) {
    .why-choose__title {
        font-size: var(--fs-2xl);        /* 32px */
    }

    .why-choose__image img {
        height: 280px;
    }
}

/* ==========================================================================
   Community / Newsletter Section — "Join Our Wellness Community"
   ==========================================================================
   Mockup: scheme-3 background (warm), 2-col (content left, image right),
   80px gap. Title 60px, description 20px, email subscribe form, disclaimer.
   ========================================================================== */
.section--community {
    background-color: var(--color-background-warm);
}

.community__grid {
    display: flex;
    align-items: center;
    gap: var(--space-4xl);               /* 80px */
}

.community__content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);                /* 32px between elements */
}

/* Title override to 60px like mockup */
.section--community .section__title {
    font-size: 6rem;                     /* 60px */
    line-height: 1.2;                    /* 72px */
    margin-bottom: 0;
}

/* Description */
.section--community .section__description {
    font-size: var(--fs-lg);            /* 20px */
    line-height: var(--lh-normal);      /* 30px */
    color: var(--color-text-dark);
    max-width: none;
    margin: 0;
}

/* Social links */
.community__social {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.community__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    transition: background-color var(--transition-normal), transform var(--transition-normal);
}

.community__social-link:hover,
.community__social-link:focus-visible {
    background-color: var(--color-primary-dark, #1565c0);
    transform: scale(1.1);
}

.community__social-icon {
    width: 24px;
    height: 24px;
}

/* ---- Community image ---- */
.community__image {
    flex: 1 1 0;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.community__image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: block;
}

.community__image--placeholder {
    height: 400px;
    background-color: var(--color-background-light);
    border-radius: var(--border-radius);
}

/* ---- Community: tablet & mobile ---- */
@media (max-width: 1023px) {
    .community__grid {
        flex-direction: column;
        gap: var(--space-3xl);
    }

    .section--community .section__title {
        font-size: var(--fs-3xl);        /* 40px */
    }

    .community__image img {
        height: 300px;
    }
}

@media (max-width: 639px) {
    .section--community .section__title {
        font-size: var(--fs-2xl);        /* 32px */
    }

    .community__image img {
        height: 240px;
    }
}

/* ==========================================================================
   Reviews / Testimonials Section
   ==========================================================================
   Mockup: scheme-4 (dark bg), left-aligned header (not centered),
   title 60px white, subtitle 20px white, 3-col review cards with
   dark foreground, white-border outline, star ratings.
   ========================================================================== */
.section--reviews.section--scheme-4 {
    background-color: var(--color-dark);
    color: var(--color-white);
}

/* Left-aligned header (per mockup — not centered) */
.section--reviews .section__header {
    max-width: 768px;
    margin-bottom: var(--space-4xl);
}

.section--reviews .section__title {
    font-size: 6rem;                     /* 60px */
    line-height: 1.2;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

.section--reviews .section__subtitle {
    color: var(--color-white);
}

/* ---- 3-column review card grid ---- */
.section--reviews .reviews-grid {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-xl);                /* 32px */
    margin-bottom: var(--space-xl);
}

/* ---- Review card on dark scheme ---- */
.section--scheme-4 .review-card {
    flex: 1 1 0;
    padding: var(--space-xl);            /* 32px */
    background-color: var(--color-dark);
    border-radius: var(--border-radius);
    outline: 1px solid rgba(255, 255, 255, 0.20);
    outline-offset: -1px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);                /* 24px */
}

/* Star ratings: white on dark */
.section--scheme-4 .review-card__rating {
    display: flex;
    gap: 0.4rem;
    color: var(--color-white);
}

.section--scheme-4 .review-card__rating svg {
    width: 20px;
    height: 20px;
}

/* Review text */
.section--scheme-4 .review-card__text {
    color: var(--color-white);
    font-size: var(--fs-lg);            /* 20px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);      /* 30px */
    font-style: normal;
    margin: 0;
    flex: 1;
}

.section--scheme-4 .review-card__text p {
    margin: 0;
}

/* Author row */
.section--scheme-4 .review-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-md);                /* 16px */
}

.section--scheme-4 .review-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.15);
}

.section--scheme-4 .review-card__avatar--placeholder {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
}

.section--scheme-4 .review-card__author-info {
    display: flex;
    flex-direction: column;
}

.section--scheme-4 .review-card__name {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-md);            /* 18px */
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    font-style: normal;
}

.section--scheme-4 .review-card__role {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-md);            /* 18px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
}

/* Reviews source attribution */
.reviews-attribution {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.60);
    font-size: var(--fs-sm);
}

.reviews-attribution p {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
}

.reviews-attribution svg {
    color: var(--color-white);
}

/* ---- Reviews: tablet ---- */
@media (max-width: 1023px) and (min-width: 640px) {
    .section--reviews .reviews-grid {
        flex-wrap: wrap;
    }

    .section--scheme-4 .review-card {
        flex: 1 1 calc(50% - var(--space-xl));
    }

    .section--reviews .section__title {
        font-size: var(--fs-3xl);
    }
}

/* ---- Reviews: mobile ---- */
@media (max-width: 639px) {
    .section--reviews .reviews-grid {
        flex-direction: column;
    }

    .section--reviews .section__title {
        font-size: var(--fs-3xl);
    }
}

/* ==========================================================================
   CTA Book Section — "Schedule Your Appointment Today!"
   ==========================================================================
   Mockup: scheme-1, centered header (768px), primary CTA button,
   full-width 1280×738 image below.
   ========================================================================== */
.section--cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4xl);               /* 80px */
}

.cta__content {
    max-width: 768px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);                /* 24px */
}

.cta__title {
    font-size: 6rem;                     /* 60px */
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 0;
}

.cta__description {
    font-family: var(--font-body);
    font-size: var(--fs-lg);            /* 20px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    margin: 0;
}

.cta__actions {
    margin-top: var(--space-sm);
}

.cta__image {
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.cta__image img {
    width: 100%;
    height: auto;
    max-height: 738px;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius);
}

/* ---- CTA: mobile ---- */
@media (max-width: 639px) {
    .cta__title {
        font-size: var(--fs-3xl);
    }

    .cta__image img {
        max-height: 400px;
    }
}

/* ==========================================================================
   Blog Preview Grid (Home)
   ========================================================================== */
.blog-preview__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.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__image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

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

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

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

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

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

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

/* Blog section header centered with subtitle */
.section--blog .section__header--center {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4xl);
}

.section--blog .section__label {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-dark);
}

.section--blog .section__title {
    font-size: 6rem;
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

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

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

/* ==========================================================================
   Promo Callout — Reusable spotlight section
   ==========================================================================
   Used by the Fullscript dispensary block (homepage) and any future
   single-CTA promo. Visual goals:
     • Sit cohesively between the cream community block (scheme-3) and the
       dark reviews block (scheme-4).
     • Feel premium via a floating rounded card, layered gradient orbs,
       a sage accent badge, and a CTA with an animated arrow.
     • Stay accessible: focus rings, prefers-reduced-motion friendly,
       semantic heading + aria-labelledby in markup.
   ========================================================================== */
.section--promo-callout {
    /* Generous vertical rhythm matches sibling homepage sections. */
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-5xl);
}

.promo-callout__card {
    position: relative;
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    /* Subtle hover lift + shadow grow gives the card depth without distracting movement. */
    transition:
        transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    will-change: transform;
}

.promo-callout__card:hover,
.promo-callout__card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(154, 161, 123, 0.55); /* sage at 55% — brand-aligned glow */
}

/* Decorative gradient orbs — purely visual, hidden from AT via aria-hidden in markup. */
.promo-callout__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.promo-callout__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    transition: transform 0.8s ease, opacity 0.6s ease;
}

.promo-callout__orb--one {
    width: 32rem;
    height: 32rem;
    top: -12rem;
    left: -8rem;
    background: radial-gradient(circle at 30% 30%, rgba(154, 161, 123, 0.55), rgba(154, 161, 123, 0));
}

.promo-callout__orb--two {
    width: 26rem;
    height: 26rem;
    bottom: -10rem;
    right: -6rem;
    background: radial-gradient(circle at 70% 70%, rgba(50, 52, 42, 0.35), rgba(50, 52, 42, 0));
}

.promo-callout__card:hover .promo-callout__orb--one {
    transform: translate(1.2rem, 0.8rem);
}

.promo-callout__card:hover .promo-callout__orb--two {
    transform: translate(-1.2rem, -0.8rem);
}

/* Lift content above the decorative orbs. */
.promo-callout__badge,
.promo-callout__content {
    position: relative;
    z-index: 1;
}

.promo-callout__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7.2rem;
    height: 7.2rem;
    margin: 0 auto var(--space-lg);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-sage), #b6bd96);
    color: var(--color-white);
    box-shadow: 0 12px 28px rgba(154, 161, 123, 0.35);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.promo-callout__card:hover .promo-callout__badge {
    transform: rotate(-6deg) scale(1.06);
}

.promo-callout__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-md);
}

.promo-callout__title {
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);            /* 40px */
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--color-text-dark);
    max-width: 70rem;
    margin: 0 auto var(--space-lg);
}

.promo-callout__description {
    max-width: 64rem;
    margin: 0 auto;
    color: var(--color-text-muted);
}

.promo-callout__description p {
    font-size: var(--fs-md);             /* 18px */
    line-height: var(--lh-relaxed);
    margin: 0;
}

.promo-callout__description p + p {
    margin-top: var(--space-md);
}

.promo-callout__actions {
    justify-content: center;
    margin-top: var(--space-2xl);
}

/* CTA: arrow slides forward on hover for that polished, "go somewhere" cue. */
.promo-callout__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.promo-callout__cta-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.promo-callout__cta:hover .promo-callout__cta-icon,
.promo-callout__cta:focus-visible .promo-callout__cta-icon {
    transform: translateX(4px);
}

/* Tablet & up: more breathing room inside the card. */
@media (min-width: 768px) {
    .promo-callout__card {
        padding: var(--space-4xl) var(--space-3xl);
    }

    .promo-callout__title {
        font-size: var(--fs-4xl);        /* 48px */
    }
}

@media (min-width: 1024px) {
    .promo-callout__card {
        padding: 8.0rem var(--space-4xl);
    }
}

/* Respect users who prefer reduced motion — keep depth, drop movement. */
@media (prefers-reduced-motion: reduce) {
    .promo-callout__card,
    .promo-callout__badge,
    .promo-callout__orb,
    .promo-callout__cta-icon {
        transition: none;
    }

    .promo-callout__card:hover,
    .promo-callout__card:focus-within {
        transform: none;
    }

    .promo-callout__card:hover .promo-callout__badge,
    .promo-callout__card:hover .promo-callout__orb--one,
    .promo-callout__card:hover .promo-callout__orb--two,
    .promo-callout__cta:hover .promo-callout__cta-icon,
    .promo-callout__cta:focus-visible .promo-callout__cta-icon {
        transform: none;
    }
}