/* BeeFixPro homepage section system — v36
   Shared section typography + right-side intro copy + active atlas indicator.
   Intentionally scoped to index.html via .index-page. */

.index-page {
    --bfp-v36-gold: #fdae02;
    --bfp-v36-title: #101d32;
    --bfp-v36-copy: #667085;
    --bfp-v36-green: #1fa463;
    --bfp-v36-green-soft: rgba(31, 164, 99, .16);
}

/* =========================================================
   1. ONE EYEBROW / SECTION-LABEL SYSTEM
   Exact visual language of the Services section.
   ========================================================= */
.index-page .services-premium__heading .section-title__tagline,
.index-page #local-services .jacksonville-directory__intro .jacksonville-eyebrow,
.index-page .brands-premium__header .section-title__tagline,
.index-page .team-command__eyebrow,
.index-page .service-journey__eyebrow,
.index-page .home-pricing-orbit__eyebrow,
.index-page .trust-reviews__eyebrow,
.index-page .faq-concierge__eyebrow,
.index-page .home-library-shelf__eyebrow {
    position: relative;
    display: inline-block;
    z-index: 1;
    margin: 0 0 13px 30px;
    padding: 0;
    border: 0;
    color: var(--bfp-v36-gold);
    font-family: var(--assimox-font-two, "Barlow", sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: transparent;
    box-shadow: none;
}

.index-page .services-premium__heading .section-title__tagline::before,
.index-page #local-services .jacksonville-directory__intro .jacksonville-eyebrow::before,
.index-page .brands-premium__header .section-title__tagline::before,
.index-page .team-command__eyebrow::before,
.index-page .service-journey__eyebrow::before,
.index-page .home-pricing-orbit__eyebrow::before,
.index-page .trust-reviews__eyebrow::before,
.index-page .faq-concierge__eyebrow::before,
.index-page .home-library-shelf__eyebrow::before {
    position: absolute;
    top: 8px;
    left: -30px;
    display: block;
    width: 20px;
    height: 2px;
    border: 0;
    border-radius: 0;
    background: var(--bfp-v36-gold);
    content: "";
    transform: none;
}

/* Atlas has a legacy decorative child line. The common ::before replaces it. */
.index-page #local-services .jacksonville-directory__intro .jacksonville-eyebrow > span {
    display: none !important;
}

/* =========================================================
   2. ONE MAIN TITLE SYSTEM
   Every principal section title now uses the exact Services
   title family / size / weight / color on desktop and mobile.
   ========================================================= */
.index-page .services-premium__heading h2,
.index-page #local-services .jacksonville-directory__intro h2,
.index-page .brands-premium__title,
.index-page .team-command__header h2,
.index-page .service-journey__heading h2,
.index-page .home-pricing-orbit__copy h2,
.index-page .trust-reviews__heading h3,
.index-page .faq-concierge__header h2,
.index-page .home-library-shelf__header h2 {
    margin-top: 0;
    color: var(--bfp-v36-title);
    font-family: var(--assimox-font, "Barlow", sans-serif);
    font-size: clamp(38px, 3.1vw, 52px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
}

/* Prevent component-specific rules from making a few headings look heavier. */
.index-page .trust-reviews__heading h3,
.index-page .brands-premium__title,
.index-page .faq-concierge__header h2 {
    text-transform: none;
}

/* =========================================================
   3. ONE RIGHT-SIDE INTRO COPY SYSTEM
   Applies only to explanatory text that sits to the right of a
   section title. Same width, typography, border, background and
   spacing across Brands / Team / Journey / FAQ.
   ========================================================= */
.index-page .brands-premium__header,
.index-page .team-command__header,
.index-page .service-journey__heading,
.index-page .faq-concierge__header {
    align-items: end;
    gap: clamp(28px, 4vw, 48px);
}

.index-page .brands-premium__intro,
.index-page .team-command__header > p,
.index-page .service-journey__heading > p,
.index-page .faq-concierge__header > p {
    position: relative;
    flex: 0 1 430px;
    width: 100%;
    max-width: 430px;
    margin: 0 0 2px;
    padding: 14px 16px 14px 18px;
    border: 1px solid rgba(218, 165, 55, .18);
    border-left: 3px solid rgba(253, 174, 2, .72);
    border-radius: 0 14px 14px 0;
    color: #686b70;
    background: linear-gradient(105deg, rgba(255, 249, 234, .84), rgba(255, 255, 255, .5));
    box-shadow: 0 10px 24px rgba(37, 35, 31, .035);
    font-family: var(--assimox-font, "Roboto", sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: 0;
    text-align: left;
}

/* =========================================================
   4. ACTIVE AREA — GREEN LIVE PULSE
   jacksonville-map.js moves .is-active whenever a map pin/tab is
   selected, so the status dot follows the chosen location.
   ========================================================= */
.index-page .service-atlas__panel header em i {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: #9ca39f;
    font-size: 7px;
    transform-origin: center;
}

.index-page .service-atlas__panel.is-active header em {
    border-color: rgba(31, 164, 99, .24);
    color: #526159;
    background: rgba(247, 252, 249, .96);
}

.index-page .service-atlas__panel.is-active header em i {
    color: var(--bfp-v36-green) !important;
    animation: bfp-v36-active-area-pulse 1.15s ease-in-out infinite;
}

.index-page .service-atlas__panel.is-active header em i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(31, 164, 99, .34);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%) scale(.45);
    animation: bfp-v36-active-area-ring 1.15s ease-out infinite;
}

@keyframes bfp-v36-active-area-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(.9);
        filter: drop-shadow(0 0 0 rgba(31, 164, 99, 0));
    }
    50% {
        opacity: .68;
        transform: scale(1.22);
        filter: drop-shadow(0 0 5px rgba(31, 164, 99, .8));
    }
}

@keyframes bfp-v36-active-area-ring {
    0% {
        opacity: .75;
        transform: translate(-50%, -50%) scale(.38);
    }
    70%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.45);
    }
}

/* =========================================================
   5. TABLET / MOBILE
   Keep the same hierarchy, only scale the Services title system
   down exactly as the Services component already does.
   ========================================================= */
@media (max-width: 991px) {
    .index-page .brands-premium__intro,
    .index-page .team-command__header > p,
    .index-page .service-journey__heading > p,
    .index-page .faq-concierge__header > p {
        max-width: 670px;
        flex-basis: 670px;
    }
}

@media (max-width: 767px) {
    .index-page .services-premium__heading .section-title__tagline,
    .index-page #local-services .jacksonville-directory__intro .jacksonville-eyebrow,
    .index-page .brands-premium__header .section-title__tagline,
    .index-page .team-command__eyebrow,
    .index-page .service-journey__eyebrow,
    .index-page .home-pricing-orbit__eyebrow,
    .index-page .trust-reviews__eyebrow,
    .index-page .faq-concierge__eyebrow,
    .index-page .home-library-shelf__eyebrow {
        margin: 0 0 10px 30px;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: .1em;
    }

    .index-page .services-premium__heading h2,
    .index-page #local-services .jacksonville-directory__intro h2,
    .index-page .brands-premium__title,
    .index-page .team-command__header h2,
    .index-page .service-journey__heading h2,
    .index-page .home-pricing-orbit__copy h2,
    .index-page .trust-reviews__heading h3,
    .index-page .faq-concierge__header h2,
    .index-page .home-library-shelf__header h2 {
        font-size: clamp(29px, 9vw, 36px);
        line-height: 1.06;
        letter-spacing: -.035em;
    }

    .index-page .brands-premium__header,
    .index-page .team-command__header,
    .index-page .service-journey__heading,
    .index-page .faq-concierge__header {
        gap: 16px;
    }

    .index-page .brands-premium__intro,
    .index-page .team-command__header > p,
    .index-page .service-journey__heading > p,
    .index-page .faq-concierge__header > p {
        flex-basis: auto;
        max-width: none;
        margin-top: 4px;
        padding: 12px 13px 12px 15px;
        border-radius: 0 12px 12px 0;
        font-size: 13px;
        line-height: 1.58;
    }
}

@media (max-width: 430px) {
    .index-page .brands-premium__intro,
    .index-page .team-command__header > p,
    .index-page .service-journey__heading > p,
    .index-page .faq-concierge__header > p {
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .index-page .service-atlas__panel.is-active header em i,
    .index-page .service-atlas__panel.is-active header em i::after {
        animation: none;
    }
}