/* =========================================================
   WILLSFLY — EMPLOYEE GATEWAY ULTRA PREMIUM BENTO CSS
   File: wwwroot/css/Employee.css
========================================================= */

.wf-emp-gateway-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 48px 0 96px;
    color: #f5f7fb;
    background: radial-gradient(circle at 8% 12%, rgba(214,167,96,.18), transparent 32%), radial-gradient(circle at 82% 16%, rgba(68,95,185,.24), transparent 42%), radial-gradient(circle at 55% 88%, rgba(154,205,196,.10), transparent 38%), linear-gradient(135deg, #05070c 0%, #0a0d15 48%, #101a36 100%);
}

    .wf-emp-gateway-page::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
    }

    .wf-emp-gateway-page::after {
        content: "";
        position: absolute;
        inset: auto -18% -34% auto;
        width: 720px;
        height: 720px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(214,167,96,.14), transparent 68%);
        filter: blur(8px);
        pointer-events: none;
    }

.wf-emp-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1840px;
    margin: 0 auto;
    padding-left: clamp(18px, 2.4vw, 42px);
    padding-right: clamp(18px, 2.4vw, 42px);
}

/* =========================================================
   LABELS
========================================================= */

.wf-emp-kicker,
.wf-emp-card-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: max-content;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #e8bd74;
    background: rgba(214,167,96,.12);
    border: 1px solid rgba(214,167,96,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================================================
   HERO GRID
========================================================= */

.wf-emp-gateway-hero {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(560px, .92fr);
    gap: clamp(42px, 5vw, 88px);
    align-items: flex-start;
}

.wf-emp-gateway-left,
.wf-emp-hero-timeline {
    min-width: 0;
}

    .wf-emp-gateway-left h1 {
        max-width: none !important;
        margin: 22px 0 18px;
        font-family: "Manrope", "Inter", system-ui, sans-serif;
        font-size: clamp(3rem, 3vw, 3rem);
        line-height: .94;
        letter-spacing: -.075em;
        font-weight: 900;
        color: #fff;
        text-wrap: pretty;
        word-break: keep-all;
    }

    .wf-emp-gateway-left p {
        max-width: none !important;
        margin: 0;
        color: rgba(224,231,242,.78);
        font-size: clamp(.98rem, .95vw, 1.08rem);
        line-height: 1.76;
    }

/* =========================================================
   MINI PROOF
========================================================= */

.wf-emp-mini-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

    .wf-emp-mini-proof span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 36px;
        padding: 8px 14px;
        border-radius: 999px;
        color: rgba(234,239,248,.86);
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.085);
        font-size: .78rem;
        font-weight: 800;
        backdrop-filter: blur(14px);
    }

    .wf-emp-mini-proof i {
        color: #d6a760;
    }

/* =========================================================
   BENTO CARD SYSTEM
========================================================= */

.wf-emp-hero-metrics,
.wf-emp-feature-split,
.wf-emp-principle-grid {
    display: grid;
    gap: clamp(18px, 1.5vw, 26px);
}

.wf-emp-hero-metrics {
    margin-top: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.wf-emp-feature-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wf-emp-principle-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

    .wf-emp-hero-metrics article,
    .wf-emp-feature-split article,
    .wf-emp-principle-grid article {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 18px;
        row-gap: 7px;
        align-items: start;
        min-height: auto;
        height: 100%;
        padding: 26px;
        border-radius: 26px;
        background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), linear-gradient(180deg, rgba(28,33,48,.88), rgba(9,12,20,.96));
        border: 1px solid rgba(255,255,255,.09);
        box-shadow: 0 24px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
        transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease, background .32s ease;
    }

        .wf-emp-hero-metrics article::before,
        .wf-emp-feature-split article::before,
        .wf-emp-principle-grid article::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 18% 12%, rgba(214,167,96,.16), transparent 34%), radial-gradient(circle at 92% 90%, rgba(154,205,196,.09), transparent 38%);
            opacity: 0;
            transition: opacity .32s ease;
            pointer-events: none;
        }

        .wf-emp-hero-metrics article:hover,
        .wf-emp-feature-split article:hover,
        .wf-emp-principle-grid article:hover {
            transform: translateY(-7px);
            border-color: rgba(214,167,96,.38);
            box-shadow: 0 34px 90px rgba(0,0,0,.46), 0 0 0 1px rgba(214,167,96,.08), inset 0 1px 0 rgba(255,255,255,.08);
        }

            .wf-emp-hero-metrics article:hover::before,
            .wf-emp-feature-split article:hover::before,
            .wf-emp-principle-grid article:hover::before {
                opacity: 1;
            }

        .wf-emp-hero-metrics article > i,
        .wf-emp-feature-split article > i,
        .wf-emp-principle-grid article > i {
            position: relative;
            z-index: 1;
            grid-column: 1;
            grid-row: 1 / span 2;
            width: 48px;
            height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            color: #e7b86e;
            background: rgba(214,167,96,.13);
            border: 1px solid rgba(214,167,96,.28);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        }

        .wf-emp-hero-metrics article > h4,
        .wf-emp-feature-split article > h4,
        .wf-emp-principle-grid article > h3 {
            position: relative;
            z-index: 1;
            grid-column: 2;
            grid-row: 1;
            margin: 0;
            color: rgba(255,255,255,.97);
            font-size: clamp(.98rem, .9vw, 1.08rem);
            font-weight: 900;
            line-height: 1.22;
            letter-spacing: -.025em;
            text-wrap: pretty;
            word-break: keep-all;
            overflow-wrap: normal;
        }

        .wf-emp-hero-metrics article > p,
        .wf-emp-feature-split article > p,
        .wf-emp-principle-grid article > p {
            position: relative;
            z-index: 1;
            grid-column: 2;
            grid-row: 2;
            margin: 0;
            color: rgba(214,222,235,.74);
            font-size: .92rem;
            line-height: 1.68;
            text-wrap: pretty;
        }

/* =========================================================
   RIGHT TIMELINE
========================================================= */

.wf-emp-hero-timeline {
    position: relative;
    padding-left: 38px;
}

    .wf-emp-hero-timeline::before {
        content: "";
        position: absolute;
        left: 0;
        top: 20px;
        bottom: 22px;
        width: 1px;
        background: linear-gradient(180deg, rgba(214,167,96,.95), rgba(214,167,96,.22), rgba(88,118,210,.60));
    }

.wf-emp-timeline-head,
.wf-emp-timeline-item,
.wf-emp-path-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.022)), linear-gradient(180deg, rgba(28,33,48,.88), rgba(9,12,20,.96));
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.055);
}

.wf-emp-timeline-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: clamp(30px, 2.4vw, 42px);
    margin-bottom: 18px;
}

    .wf-emp-timeline-head::after {
        content: "";
        position: absolute;
        right: -130px;
        bottom: -150px;
        width: 360px;
        height: 360px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(214,167,96,.16), transparent 66%);
        pointer-events: none;
    }

    .wf-emp-timeline-head h3 {
        position: relative;
        z-index: 1;
        max-width: 640px; /* KEY: control line length */
        margin: 18px 0 0;
        color: #fff;
        font-family: "Manrope", "Inter", system-ui, sans-serif;
        font-size: clamp(2.2rem, 2.4vw, 2.8rem); /* ↓ smaller = better wrapping */
        line-height: 1.08; /* more breathing */
        letter-spacing: -.05em;
        font-weight: 800;
        text-wrap: pretty;
        word-break: normal;
        overflow-wrap: normal;
    }

.wf-emp-view-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 8px 13px;
    border-radius: 999px;
    color: #aee7dd;
    background: rgba(154,205,196,.10);
    border: 1px solid rgba(154,205,196,.26);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.wf-emp-timeline-list {
    display: grid;
    gap: 16px;
}

.wf-emp-timeline-item {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr);
    gap: 18px;
    align-items: center;
    padding: 24px 26px;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .wf-emp-timeline-item:hover {
        transform: translateX(8px);
        border-color: rgba(214,167,96,.36);
        box-shadow: 0 30px 78px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
    }

.wf-emp-timeline-node {
    position: absolute;
    left: -44px;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: #d6a760;
    box-shadow: 0 0 0 7px rgba(214,167,96,.13), 0 0 24px rgba(214,167,96,.60);
}

.wf-emp-timeline-icon,
.wf-emp-path-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e7b86e;
    background: rgba(214,167,96,.13);
    border: 1px solid rgba(214,167,96,.26);
}

.wf-emp-timeline-item h4 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 1.04rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.wf-emp-timeline-item p {
    max-width: 64ch;
    margin: 0;
    color: rgba(214,222,235,.72);
    line-height: 1.66;
    font-size: .94rem;
}

/* =========================================================
   LEFT FEATURE STACK
========================================================= */

.wf-emp-left-feature-stack {
    margin-top: 34px;
    display: grid;
    gap: 18px;
    animation: wfFeatureRise .75s ease both;
}

.wf-emp-feature-wide {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 2.4vw, 42px);
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(255,255,255,.078), rgba(255,255,255,.025)), linear-gradient(180deg, rgba(28,33,48,.88), rgba(9,12,20,.96));
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 28px 78px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .wf-emp-feature-wide:hover {
        transform: translateY(-6px);
        border-color: rgba(214,167,96,.36);
        box-shadow: 0 36px 96px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.07);
    }

    .wf-emp-feature-wide::after {
        content: "";
        position: absolute;
        right: -110px;
        bottom: -140px;
        width: 320px;
        height: 320px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(214,167,96,.16), transparent 66%);
        pointer-events: none;
    }

    .wf-emp-feature-wide h3 {
        position: relative;
        z-index: 1;
        max-width: 880px;
        margin: 18px 0 12px;
        color: #fff;
        font-family: "Manrope", "Inter", system-ui, sans-serif;
        font-size: clamp(1.55rem, 1.85vw, 2.18rem);
        line-height: 1.08;
        letter-spacing: -.052em;
        font-weight: 900;
        text-wrap: pretty;
        word-break: keep-all;
    }

    .wf-emp-feature-wide p {
        position: relative;
        z-index: 1;
        max-width: 850px;
        margin: 0;
        color: rgba(214,222,235,.73);
        line-height: 1.76;
    }

/* =========================================================
   ACCESS PATHS
========================================================= */

.wf-emp-access-paths {
    display: block;
    width: 100%;
    margin: 64px auto 0;
}

.wf-emp-auth-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: clamp(18px, 2vw, 30px);
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.018)), rgba(8,12,21,.58);
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: 0 42px 100px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
}

.wf-emp-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2vw, 34px);
}

.wf-emp-path-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    min-height: 300px;
    padding: clamp(34px, 3vw, 50px);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .wf-emp-path-card:hover {
        transform: translateY(-7px);
        border-color: rgba(214,167,96,.34);
        box-shadow: 0 38px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.075);
    }

    .wf-emp-path-card::after {
        content: "";
        position: absolute;
        right: -120px;
        bottom: -170px;
        width: 380px;
        height: 380px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(214,167,96,.16), transparent 65%);
        pointer-events: none;
    }

.wf-emp-path-card-accent::after {
    background: radial-gradient(circle, rgba(154,205,196,.14), transparent 65%);
}

.wf-emp-path-card > div {
    position: relative;
    z-index: 1;
}

.wf-emp-path-card h2 {
    max-width: 620px;
    margin: 14px 0 12px;
    color: #fff;
    font-family: "Manrope", "Inter", system-ui, sans-serif;
    font-size: clamp(2rem, 2.55vw, 3.18rem);
    line-height: 1.02;
    letter-spacing: -.058em;
    font-weight: 900;
    text-wrap: pretty;
    word-break: keep-all;
}

.wf-emp-path-card p {
    max-width: 680px;
    margin: 0 0 24px;
    color: rgba(214,222,235,.74);
    line-height: 1.72;
}

/* =========================================================
   BUTTONS
========================================================= */

.wf-emp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 13px 22px;
    border-radius: 16px;
    text-decoration: none;
    border: 0;
    font-size: .92rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}

.wf-emp-btn-primary {
    color: #07090d;
    background: linear-gradient(135deg, #e8bd74, #c98d3c);
    box-shadow: 0 16px 42px rgba(214,167,96,.26);
}

    .wf-emp-btn-primary:hover {
        color: #07090d;
        transform: translateY(-3px);
        box-shadow: 0 24px 60px rgba(214,167,96,.36);
    }

.wf-emp-btn-secondary {
    color: #f4f7fb;
    background: rgba(255,255,255,.058);
    border: 1px solid rgba(255,255,255,.12);
}

    .wf-emp-btn-secondary:hover {
        color: #fff;
        transform: translateY(-3px);
        border-color: rgba(214,167,96,.40);
        background: rgba(214,167,96,.11);
    }

/* =========================================================
   ACCESS STANDARDS
========================================================= */

.wf-emp-principles {
    width: 100%;
    margin: 72px auto 0 !important;
}

.wf-emp-section-head {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    column-gap: clamp(44px, 7vw, 140px);
    row-gap: 14px; /* ↓ reduce gap */

    align-items: start; /* 🔥 KEY FIX */
    margin-bottom: 30px; /* ↓ slightly tighter */
}


    .wf-emp-section-head .wf-emp-kicker {
        grid-column: 1 / -1;
        justify-self: center;
        margin: 0 0 4px !important;
    }

    .wf-emp-section-head h2 {
        grid-column: 1;
        margin: 0;
        max-width: 760px;
        font-family: "Manrope", "Inter", system-ui, sans-serif;
        font-size: clamp(2rem, 2.6vw, 2.8rem); /* ↓ Reduced */
        line-height: 1.08; /* ↑ More breathing */
        letter-spacing: -.05em; /* Softer */
        font-weight: 800;
        color: #f7f8fb;
        text-wrap: pretty;
        word-break: normal;
    }

    .wf-emp-section-head p {
        grid-column: 2;
        max-width: 640px;
        margin: 0;
        text-align: left;
        font-size: clamp(1rem, 1vw, 1.12rem);
        line-height: 1.78;
        color: rgba(214,222,235,.76);
        text-wrap: pretty;
    }

/* =========================================================
   ANIMATION
========================================================= */

@keyframes wfFeatureRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1399.98px) {
    .wf-emp-gateway-hero {
        grid-template-columns: minmax(0, 1fr) minmax(500px, .88fr);
    }

    .wf-emp-hero-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199.98px) {
    .wf-emp-gateway-hero,
    .wf-emp-section-head {
        grid-template-columns: 1fr;
    }

    .wf-emp-hero-timeline {
        padding-left: 0;
    }

        .wf-emp-hero-timeline::before,
        .wf-emp-timeline-node {
            display: none;
        }

    .wf-emp-principle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wf-emp-section-head h2,
    .wf-emp-section-head p {
        grid-column: auto;
        max-width: 100%;
    }

    .wf-emp-auth-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .wf-emp-feature-split {
        grid-template-columns: 1fr;
    }

    .wf-emp-timeline-head {
        grid-template-columns: 1fr;
    }

    .wf-emp-view-pill {
        width: fit-content;
    }
}

@media (max-width: 767.98px) {
    .wf-emp-gateway-page {
        padding: 74px 0 86px;
    }

    .wf-emp-shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .wf-emp-gateway-left h1 {
        font-size: clamp(2.35rem, 11vw, 3.55rem);
        letter-spacing: -.06em;
    }

    .wf-emp-mini-proof {
        flex-direction: column;
    }

        .wf-emp-mini-proof span,
        .wf-emp-btn {
            width: 100%;
        }

    .wf-emp-hero-metrics,
    .wf-emp-feature-split,
    .wf-emp-principle-grid {
        grid-template-columns: 1fr;
    }

        .wf-emp-hero-metrics article,
        .wf-emp-feature-split article,
        .wf-emp-principle-grid article,
        .wf-emp-path-card,
        .wf-emp-timeline-item {
            grid-template-columns: 1fr;
            min-height: auto;
        }

            .wf-emp-hero-metrics article > i,
            .wf-emp-feature-split article > i,
            .wf-emp-principle-grid article > i {
                grid-column: auto;
                grid-row: auto;
                margin-bottom: 10px;
            }

            .wf-emp-hero-metrics article > h4,
            .wf-emp-feature-split article > h4,
            .wf-emp-principle-grid article > h3,
            .wf-emp-hero-metrics article > p,
            .wf-emp-feature-split article > p,
            .wf-emp-principle-grid article > p {
                grid-column: auto;
                grid-row: auto;
            }

    .wf-emp-access-paths,
    .wf-emp-principles {
        margin-top: 68px;
    }

    .wf-emp-auth-wrapper {
        padding: 18px;
    }

    .wf-emp-path-card {
        padding: 28px;
    }

    .wf-emp-section-head h2 {
        font-size: clamp(2.25rem, 10vw, 3.3rem);
    }
}
/* =========================================================
   EMPLOYEE PAGE — MATCH PRODUCT ECOSYSTEM / CAREERS FINAL FIX
   ADD THIS AT VERY BOTTOM OF Employee.css
========================================================= */

/* Main page width like Products / Careers */
.wf-emp-shell {
    max-width: 100% !important;
    padding-left: clamp(24px, 3vw, 48px) !important;
    padding-right: clamp(24px, 3vw, 48px) !important;
}

/* Hero same premium left-right proportion */
.wf-emp-gateway-hero {
    max-width: 1760px !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(520px, .82fr) !important;
    gap: clamp(54px, 6vw, 110px) !important;
    align-items: flex-start !important;
}

/* Left hero heading like Careers/Product */
.wf-emp-gateway-left h1 {
    max-width: 980px !important;
    font-size: clamp(3.2rem, 4.4vw, 6rem) !important;
    line-height: .95 !important;
    letter-spacing: -.08em !important;
    text-wrap: pretty !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.wf-emp-gateway-left p {
    max-width: 920px !important;
    font-size: 1.06rem !important;
    line-height: 1.78 !important;
}

/* IMPORTANT: make top 3 cards readable, not skinny */
.wf-emp-hero-metrics {
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 24px !important;
}

    .wf-emp-hero-metrics article {
        min-height: 185px !important;
        padding: 28px 28px !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
    }

        /* Stop ugly word breaking */
        .wf-emp-hero-metrics article h4,
        .wf-emp-feature-split article h4,
        .wf-emp-principle-grid article h3,
        .wf-emp-timeline-head h3,
        .wf-emp-section-head h2 {
            text-wrap: pretty !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
            hyphens: none !important;
        }

/* Right card heading: reduce width pressure */
.wf-emp-timeline-head {
    padding: 38px 42px !important;
}

    .wf-emp-timeline-head h3 {
        max-width: 560px !important;
        font-size: clamp(2.25rem, 2.6vw, 3.45rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.065em !important;
    }

/* Timeline cards like Product Ecosystem */
.wf-emp-timeline-item {
    min-height: 116px !important;
    padding: 26px 30px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
}

/* Access standards section like Product/Careers */
.wf-emp-principles {
    max-width: 1760px !important;
    margin: 112px auto 0 !important;
}

.wf-emp-section-head {
    grid-template-columns: minmax(0, 1fr) minmax(520px, .72fr) !important;
    gap: clamp(48px, 7vw, 140px) !important;
    align-items: center !important;
    margin-bottom: 42px !important;
}

    .wf-emp-section-head .wf-emp-kicker {
        justify-self: center !important;
    }

    .wf-emp-section-head h2 {
        max-width: 860px !important;
        font-size: clamp(3.2rem, 3.9vw, 5.2rem) !important;
        line-height: .96 !important;
    }

    .wf-emp-section-head p {
        max-width: 680px !important;
        font-size: 1.08rem !important;
        line-height: 1.8 !important;
    }

/* Bottom 4 cards premium spacing */
.wf-emp-principle-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px !important;
}

    .wf-emp-principle-grid article {
        min-height: 188px !important;
        padding: 30px 30px !important;
    }

/* Responsive protection */
@media (max-width: 1399.98px) {
    .wf-emp-gateway-hero {
        grid-template-columns: 1fr !important;
    }

    .wf-emp-hero-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1199.98px) {
    .wf-emp-section-head {
        grid-template-columns: 1fr !important;
    }

    .wf-emp-principle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .wf-emp-hero-metrics,
    .wf-emp-principle-grid {
        grid-template-columns: 1fr !important;
    }

    .wf-emp-gateway-left h1,
    .wf-emp-section-head h2 {
        font-size: clamp(2.4rem, 10vw, 3.6rem) !important;
    }
}







/* =========================================================
   EMPLOYEE TYPOGRAPHY — CORPORATE MATCH WITH CAREERS/PERSPECTIVES
   ADD AT VERY BOTTOM
========================================================= */

.wf-emp-gateway-left h1 {
    max-width: 980px !important;
    font-size: clamp(3rem, 3vw, 3rem) !important;
    line-height: .96 !important;
    letter-spacing: -.08em !important;
    font-weight: 800 !important;
}

.wf-emp-gateway-left p {
    max-width: 920px !important;
    margin-top: 24px !important;
    font-size: 1.04rem !important;
    line-height: 1.92 !important;
    color: rgba(226,232,244,.82) !important;
}

.wf-emp-timeline-head h3 {
    max-width: 760px !important;
    font-size: clamp(1.45rem, 1.65vw, 1.95rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -.04em !important;
    font-weight: 800 !important;
}

.wf-emp-feature-wide h3,
.wf-emp-path-card h2,
.wf-emp-section-head h2 {
    font-size: clamp(2rem, 3vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.05em !important;
    font-weight: 800 !important;
}

.wf-emp-feature-wide p,
.wf-emp-path-card p,
.wf-emp-section-head p {
    font-size: 1.01rem !important;
    line-height: 1.84 !important;
    color: rgba(226,232,244,.82) !important;
}

.wf-emp-hero-metrics article > h4,
.wf-emp-feature-split article > h4,
.wf-emp-principle-grid article > h3,
.wf-emp-timeline-item h4 {
    font-size: 1.05rem !important;
    line-height: 1.34 !important;
    letter-spacing: -.035em !important;
    font-weight: 800 !important;
}

.wf-emp-hero-metrics article > p,
.wf-emp-feature-split article > p,
.wf-emp-principle-grid article > p,
.wf-emp-timeline-item p {
    font-size: .94rem !important;
    line-height: 1.78 !important;
    color: rgba(226,232,244,.76) !important;
}

/* =========================================================
   TIMELINE — FINAL ANIMATION + HOVER FIX
   (ADD AT VERY BOTTOM ONLY)
========================================================= */

/* 1. Vertical line animation */
.wf-emp-hero-timeline::before {
    transform-origin: top;
    transform: scaleY(0);
    animation: wfTimelineLineReveal 1.2s ease forwards;
}

@keyframes wfTimelineLineReveal {
    to {
        transform: scaleY(1);
    }
}

/* 2. Timeline node pulse animation */
.wf-emp-timeline-node {
    top: 50%;
    transform: translateY(-50%);
    animation: wfTimelinePulse 2.8s ease-in-out infinite;
}

@keyframes wfTimelinePulse {
    0%, 100% {
        box-shadow: 0 0 0 6px rgba(214,167,96,.10), 0 0 14px rgba(214,167,96,.45);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(214,167,96,.18), 0 0 28px rgba(214,167,96,.65);
    }
}

/* 3. Stagger animation for items (smooth entry) */
.wf-emp-timeline-item {
    opacity: 0;
    transform: translateX(-18px);
    animation: wfTimelineItemIn .7s ease forwards;
}

    .wf-emp-timeline-item:nth-child(1) {
        animation-delay: .2s;
    }

    .wf-emp-timeline-item:nth-child(2) {
        animation-delay: .35s;
    }

    .wf-emp-timeline-item:nth-child(3) {
        animation-delay: .5s;
    }

    .wf-emp-timeline-item:nth-child(4) {
        animation-delay: .65s;
    }

    .wf-emp-timeline-item:nth-child(5) {
        animation-delay: .8s;
    }

@keyframes wfTimelineItemIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 4. PREMIUM HOVER — card + icon + node sync */
.wf-emp-timeline-item:hover {
    transform: translateX(10px) scale(1.01);
    border-color: rgba(214,167,96,.38);
    box-shadow: 0 36px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(214,167,96,.08), inset 0 1px 0 rgba(255,255,255,.08);
}

    /* icon lift */
    .wf-emp-timeline-item:hover .wf-emp-timeline-icon {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 16px 34px rgba(0,0,0,.28);
    }

    /* node glow boost */
    .wf-emp-timeline-item:hover .wf-emp-timeline-node {
        box-shadow: 0 0 0 12px rgba(214,167,96,.22), 0 0 36px rgba(214,167,96,.85);
    }

/* 5. Smooth transition fixes (missing earlier) */
.wf-emp-timeline-item,
.wf-emp-timeline-icon,
.wf-emp-timeline-node {
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .3s ease;
}