/* ============================================================
           PAGE: Feminine Hygiene Services
           Figma node 758:7925
           ============================================================ */

        /* Registered property so the corner-fill radius can transition. */
        @property --pink-r {
            syntax: '<length>';
            inherits: false;
            initial-value: 0px;
        }

        .fh-page {
            background: var(--whc-white);
        }

        /* ============================================================
           SECTION 1 — Hero (758:7926)
           Mirrors homepage hero layout (.whc-hero in index.html).
           ============================================================ */
        .fh-hero {
            position: relative;
            background: var(--whc-pink);
            overflow: hidden;
            min-height: 684px;
        }

        .fh-hero__inner {
            position: relative;
            height: 684px;
            display: grid;
            grid-template-columns: 1fr 1fr;     /* image covers half of screen */
            align-items: center;
        }

        /* Copy column — anchored 80px from left, vertically centered. */
        .fh-hero__content {
            position: relative;
            z-index: 2;
            color: var(--whc-white);
            padding-left: var(--container-pad);
            width: 100%;
            max-width: calc(477px + var(--container-pad));
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .fh-hero__title {
            font-size: 48px;
            line-height: 1.2;
            letter-spacing: -0.96px;
            margin: 0;
            color: var(--whc-white);
            font-weight: 400;
        }

        .fh-hero__title strong {
            font-weight: 600;
        }

        .fh-hero__cta {
            align-self: flex-start;   /* don't stretch in flex column */
        }

        /* Pattern straddles the pink/photo boundary so it peeks out from
           behind the photo edge. */
        .fh-hero__pattern {
            position: absolute;
            top: 0;
            left: calc(50% - 172px);
            width: 684px;
            height: 684px;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .fh-hero__pattern img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0) invert(1);
        }

        /* Photo — fills the right half of the hero edge-to-edge. */
        .fh-hero__visual {
            position: relative;
            z-index: 2;
            align-self: stretch;
            overflow: hidden;
        }

        .fh-hero__visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* ============================================================
           SECTION 2 — Intro / dark rounded card (758:8005)
           ============================================================ */
        .fh-intro {
            background: var(--whc-white);
            padding: 96px 0 64px;
        }

        .fh-intro__inner {
            max-width: min(1280px, calc(100% - 2 * var(--container-pad)));
            margin: 0 auto;
            padding: 64px 102px;
            background: #343A40;
            border-radius: 24px;
            color: var(--whc-white);
        }

        .fh-intro__heading {
            margin: 0 0 35px;
            font-size: 36px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: -0.72px;
            color: var(--whc-white);
        }

        .fh-intro__heading .accent {
            color: #FF8A8A;
        }

        .fh-intro__text {
            margin: 0;
            font-size: 20px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--whc-white);
        }

        /* ============================================================
           SECTION 3 — Why Feminine Hygiene Matters (758:8014)
           ============================================================ */
        .fh-why {
            background: var(--whc-white);
            padding: 53px 0 80px;
        }

        .fh-why__inner {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--container-pad);
        }

        .fh-why__title {
            margin: 0 auto 72px;
            text-align: center;
            font-size: 48px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: -0.96px;
            color: var(--whc-black);
        }

        .fh-why__title strong {
            font-weight: 600;
            color: var(--whc-pink);
        }

        .fh-why__grid {
            display: grid;
            grid-template-columns: repeat(3, 304px);
            gap: 33px 42px;
            justify-content: center;
        }

        .fh-why-card {
            position: relative;
            width: 304px;
            height: 257px;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 32px 24px;
            text-align: center;
            gap: 16px;
            background-color: var(--whc-white);
            transition: transform 0.3s var(--ease),
                        box-shadow 0.3s var(--ease);
        }

        /* corner-fill layer — 4 pink discs grow from corners; opacity fades in
           simultaneously so the pink "appears" while it's filling */
        .fh-why-card::before {
            content: "";
            position: absolute;
            inset: 0;
            --pink-r: 0px;
            background-image:
                radial-gradient(circle var(--pink-r) at 0%   0%,   var(--whc-pink) 99%, transparent 100%),
                radial-gradient(circle var(--pink-r) at 100% 0%,   var(--whc-pink) 99%, transparent 100%),
                radial-gradient(circle var(--pink-r) at 0%   100%, var(--whc-pink) 99%, transparent 100%),
                radial-gradient(circle var(--pink-r) at 100% 100%, var(--whc-pink) 99%, transparent 100%);
            background-repeat: no-repeat;
            opacity: 0;
            pointer-events: none;
            z-index: 0;
            transition: --pink-r 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity   0.55s ease;
        }

        .fh-why-card:hover::before {
            /* radius large enough that all four discs fully cover the card,
               and opacity fades in over the same window */
            --pink-r: 260px;
            opacity: 1;
        }

        /* keep icon + title above the pink layer */
        .fh-why-card__icon,
        .fh-why-card__title {
            position: relative;
            z-index: 1;
        }

        .fh-why-card__icon {
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .fh-why-card__icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            /* hover-out: revert quickly; the pink layer is fading too */
            transition: filter 0.25s ease;
        }

        /* hover-in: flip to white in step with the pink fade so it never reads
           as a dark icon on a pink background */
        .fh-why-card:hover .fh-why-card__icon img {
            filter: brightness(0) invert(1);
            transition: filter 0.3s ease 0.05s;
        }

        .fh-why-card__title {
            margin: 0;
            font-size: 24px;
            font-weight: 500;
            line-height: 1.5;
            color: var(--whc-black);
            transition: color 0.25s ease;
        }

        .fh-why-card:hover .fh-why-card__title {
            color: var(--whc-white);
            transition: color 0.3s ease 0.1s;
        }

        /* ============================================================
           SECTION 4 — Service Workflow (758:8026)
           Dark background, 5 step cards in horizontal scroll
           ============================================================ */
        .fh-workflow {
            background: #343A40;
            padding: 80px 0;
            overflow: hidden;
        }

        .fh-workflow__inner {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--container-pad);
            color: var(--whc-white);
        }

        .fh-workflow__heading {
            display: flex;
            flex-direction: column;
            gap: 29px;
            margin-bottom: 67px;
            max-width: 537px;
        }

        .fh-workflow__title {
            margin: 0;
            font-size: 48px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: -0.96px;
            color: var(--whc-white);
        }

        .fh-workflow__title strong {
            font-weight: 600;
        }

        .fh-workflow__sub {
            margin: 0;
            font-size: 20px;
            font-weight: 400;
            line-height: 1.5;
            letter-spacing: -0.4px;
            color: var(--whc-white);
        }

        .fh-workflow__track {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 32px;
        }

        .fh-workflow__track::-webkit-scrollbar { display: none; }
        .fh-workflow__track { scrollbar-width: none; }

        .fh-step {
            flex: 0 0 419px;
            height: 446px;
            background: var(--whc-white);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
        }

        .fh-step__num {
            margin: 12px 0 0 25px;
            font-size: 64px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -1.28px;
            color: var(--whc-pink);
        }

        .fh-step__body {
            padding: 22px 25px 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
            flex: 1;
        }

        .fh-step__title {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--whc-black);
        }

        .fh-step__text {
            margin: 0;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--whc-grey-dark);
        }

        .fh-step__image {
            margin-top: auto;
            width: 100%;
            height: 152px;
            overflow: hidden;
        }

        .fh-step__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .fh-workflow__progress {
            margin-top: 32px;
            height: 9px;
            background: rgba(255, 255, 255, 0.48);
            border-radius: 12px;
            overflow: hidden;
        }

        .fh-workflow__progress-bar {
            height: 100%;
            width: 40%;
            background: var(--whc-white);
            border-radius: 12px;
            transition: width 0.3s var(--ease);
        }

        /* ============================================================
           SECTION 5 — What Sets WHC Apart (758:8069)
           Pink background, content left, image right
           ============================================================ */
        .fh-apart {
            position: relative;
            background: var(--whc-pink);
            overflow: hidden;
            height: 590px;
        }

        .fh-apart__inner {
            position: relative;
            max-width: var(--container-max);
            margin: 0 auto;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }

        .fh-apart__content {
            padding: 0 var(--container-pad);
            display: flex;
            flex-direction: column;
            gap: 36px;
            max-width: 670px;
            color: var(--whc-white);
        }

        .fh-apart__title {
            margin: 0;
            font-size: 48px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.96px;
            color: var(--whc-white);
        }

        .fh-apart__list {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .fh-apart__item {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .fh-apart__item-icon {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fh-apart__item-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .fh-apart__item-text {
            margin: 0;
            font-size: 18px;
            font-weight: 500;
            line-height: 1.5;
            color: var(--whc-white);
        }

        .fh-apart__visual {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 50vw;
            overflow: hidden;
        }

        .fh-apart__visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ============================================================
           SECTION 6 — Products / Smartly Designed (499:7491)
           ============================================================ */
        .fh-products {
            background: var(--whc-white);
            padding: 58px 0 80px;
        }

        .fh-products__inner {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--container-pad);
        }

        .fh-products__title {
            margin: 0 0 72px;
            font-size: 48px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: -0.96px;
            color: var(--whc-black);
            max-width: 737px;
        }

        .fh-products__title strong {
            font-weight: 600;
            color: var(--whc-pink);
        }

        .fh-products__grid {
            display: flex;
            gap: 50px;
            flex-wrap: wrap;
        }

        .fh-product {
            flex: 0 0 393px;
            height: 504px;
            border: 1px solid #C5C5C5;
            border-radius: 12px;
            overflow: hidden;
            background: var(--whc-white);
            display: flex;
            flex-direction: column;
        }

        .fh-product__image {
            width: 100%;
            height: 248px;
            background: linear-gradient(180deg, #FFFFFF 0%, #DADADA 50%, #B5B5B5 100%);
            position: relative;
            overflow: hidden;
        }

        .fh-product__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .fh-product__body {
            padding: 23px 22px 32px;
            display: flex;
            flex-direction: column;
            gap: 31px;
            flex: 1;
        }

        .fh-product__heading {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .fh-product__title {
            margin: 0;
            font-size: 28px;
            font-weight: 600;
            line-height: 1.2;
            color: var(--whc-black);
        }

        .fh-product__text {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            color: var(--whc-black);
        }

        .fh-product__cta {
            background: var(--whc-white);
            color: var(--whc-orange);
            border: 1px solid var(--whc-orange);
            width: 153px;
            margin-top: auto;
        }

        .fh-product__cta:hover {
            background: var(--whc-orange);
            color: var(--whc-white);
        }

        /* ============================================================
           SECTION 7 — CTA Banner (Figma node 758:7952)
           Mirrors homepage CTA layout (.whc-cta in index.html).
           Layout per design (1440×580):
             · pink section, image fixed at 603px on the right
             · pattern glyph (598×598, 10% opacity) overlays the boundary
             · 424-wide copy column, 80px from left, vertically centered
             · 24px gap inside title/sub group, 32px before the CTA pill
           ============================================================ */
        .fh-cta {
            position: relative;
            background: var(--whc-pink);
            overflow: hidden;
            min-height: 580px;
        }

        .fh-cta__inner {
            position: relative;
            height: 580px;
            display: grid;
            grid-template-columns: 1fr 1fr;     /* image covers half of screen */
            align-items: center;
        }

        /* Pattern — straddles the pink/image boundary so it peeks out
           from behind the photo (Figma: pattern left edge sits 270px before
           the photo edge, opacity 10%, white). */
        .fh-cta__pattern {
            position: absolute;
            top: -9px;
            left: calc(50% - 270px);
            width: 598px;
            height: 598px;
            pointer-events: none;
            z-index: 3;
        }

        .fh-cta__pattern img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0) invert(1);
        }

        .fh-cta__copy {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: calc(424px + var(--container-pad));
            padding-left: var(--container-pad);
            color: var(--whc-white);
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        /* Title + subtitle group — 24px gap inside */
        .fh-cta__text {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .fh-cta__title {
            margin: 0;
            font-size: 40px;
            font-weight: 600;
            line-height: 1.2;
            color: var(--whc-white);
        }

        .fh-cta__sub {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.2;
            max-width: 380px;
            color: var(--whc-white);
        }

        .fh-cta__cta {
            width: 153px;          /* Figma fixed primary-CTA width */
            padding-left: 0;
            padding-right: 0;
        }

        .fh-cta__visual {
            position: relative;
            z-index: 2;
            align-self: stretch;
            overflow: hidden;
        }

        .fh-cta__visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* ============================================================
           Responsive
           ============================================================ */
        @media (max-width: 1280px) {
            .fh-hero__pattern { display: none; }

            .fh-intro__inner { padding: 56px 64px; }
            .fh-intro__heading { font-size: 32px; }

            .fh-why__title,
            .fh-products__title,
            .fh-workflow__title { font-size: 40px; }

            .fh-apart { height: auto; min-height: 540px; }
            .fh-apart__inner { min-height: 540px; }
            .fh-apart__title { font-size: 40px; }

            .fh-cta__title { font-size: 36px; }
        }

        @media (max-width: 991px) {
            .fh-hero__inner,
            .fh-apart__inner,
            .fh-cta__inner {
                grid-template-columns: 1fr;
            }

            .fh-hero { min-height: auto; }
            .fh-hero__inner { height: auto; padding-top: 64px; padding-bottom: 0; }
            .fh-hero__content { padding: 64px var(--container-pad) 48px; max-width: none; }
            .fh-hero__visual { height: 320px; }
            .fh-hero__pattern { display: none; }

            .fh-intro { padding: 64px 0 32px; }
            .fh-intro__inner { padding: 48px 32px; border-radius: 16px; }
            .fh-intro__heading { font-size: 28px; }
            .fh-intro__text { font-size: 18px; }

            .fh-why__grid { grid-template-columns: repeat(2, 304px); }

            .fh-apart { height: auto; }
            .fh-apart__inner { min-height: auto; }
            .fh-apart__content { padding: 64px var(--container-pad); max-width: 100%; }
            .fh-apart__visual { position: static; width: 100%; height: 320px; }

            .fh-products__grid { justify-content: center; }

            .fh-cta { min-height: auto; }
            .fh-cta__inner { height: auto; }
            .fh-cta__copy { padding: 64px var(--container-pad); max-width: none; }
            .fh-cta__visual { height: 320px; }
            .fh-cta__pattern { display: none; }

            .fh-step { flex: 0 0 320px; height: auto; min-height: 420px; }
        }

        @media (max-width: 600px) {
            .fh-hero__title,
            .fh-why__title,
            .fh-apart__title,
            .fh-products__title,
            .fh-workflow__title { font-size: 32px; letter-spacing: -0.5px; }

            .fh-cta__title { font-size: 28px; }

            .fh-intro__inner { padding: 40px 24px; }
            .fh-intro__heading { font-size: 24px; }
            .fh-intro__text { font-size: 16px; }

            .fh-why__grid { grid-template-columns: 1fr; }
            .fh-why-card { width: 100%; max-width: 360px; margin: 0 auto; }

            .fh-product { flex: 0 0 100%; max-width: 360px; margin: 0 auto; }

            .fh-step { flex: 0 0 280px; }
        }

        /* ============================================================
           Product Detail Modal (Figma node 499:7491 / variants)
           ============================================================ */
        .fh-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        .fh-modal.is-open {
            opacity: 1;
            pointer-events: auto;
        }

        .fh-modal[hidden] {
            display: none;
        }

        .fh-modal__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        .fh-modal__dialog {
            position: relative;
            width: 903px;
            max-width: 100%;
            height: 583px;
            max-height: 100%;
            background: #F8F8F8;
            border-radius: 16px;
            box-shadow: 4px 4px 11.4px 0 rgba(0, 0, 0, 0.12);
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr 412px;
            transform: scale(0.96);
            transition: transform 0.25s ease;
        }

        .fh-modal.is-open .fh-modal__dialog {
            transform: scale(1);
        }

        .fh-modal__content {
            padding: 35px 31px;
            display: flex;
            flex-direction: column;
            gap: 43px;
            overflow-y: auto;
        }

        .fh-modal__head {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .fh-modal__back {
            background: transparent;
            border: 0;
            padding: 0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--whc-black);
            font-family: 'Archivo', 'Metropolis', sans-serif;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.4;
            align-self: flex-start;
        }

        .fh-modal__back:hover {
            opacity: 0.7;
        }

        .fh-modal__back svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        .fh-modal__title-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .fh-modal__title {
            margin: 0;
            font-size: 28px;
            font-weight: 600;
            line-height: 1.2;
            color: var(--whc-black);
        }

        .fh-modal__text {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            color: var(--whc-black);
        }

        .fh-modal__sections {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .fh-modal__highlights-block {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .fh-modal__highlights-title {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.5;
            color: var(--whc-black);
        }

        .fh-modal__highlights {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .fh-modal__highlights li {
            position: relative;
            padding-left: 19px;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--whc-black);
        }

        .fh-modal__highlights li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            width: 14px;
            height: 14px;
            background: url("../icons/star-bullet.svg") no-repeat center/contain;
        }

        .fh-modal__visual {
            position: relative;
            overflow: hidden;
            background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #DCDCDC 50%, #BABABA 100%);
        }

        .fh-modal__image {
            position: absolute;
            inset: 14px;
            width: calc(100% - 28px);
            height: calc(100% - 28px);
            object-fit: contain;
        }

        @media (max-width: 900px) {
            .fh-modal__dialog {
                grid-template-columns: 1fr;
                height: auto;
                max-height: calc(100vh - 48px);
            }
            .fh-modal__visual {
                position: relative;
                height: 240px;
                order: -1;
            }
            .fh-modal__image {
                inset: 8px;
                width: calc(100% - 16px);
                height: calc(100% - 16px);
            }
        }

/* QC: reduce the oversized vertical gap between stacked product cards on mobile. */
@media (max-width: 991px) {
    .fh-products__grid { gap: 24px; }
}

/* QC: the benefit cards are a fixed 257px tall, so stacked on mobile they leave
   large vertical gaps. Let them hug their content and tighten the row gap. */
@media (max-width: 991px) {
    .fh-why-card { height: auto; min-height: 0; }
    .fh-why__grid { gap: 16px 42px; }
}