/* Page-specific styling. Keep main.css unchanged. */
.staff-hero {
    background:linear-gradient(135deg,#0b132b,#153a77);
    color:#fff;
    text-align:center;
    padding:90px 20px 82px
}

.staff-hero .staff-eyebrow {
    font-size:12px;
    letter-spacing:.19em;
    font-weight:800;
    color:#8fc4ff;
    margin:0 0 18px
}

.staff-hero h1 {
    font-size:clamp(38px,5vw,66px);
    font-weight:800;
    letter-spacing:-.045em;
    line-height:1.13;
    max-width:1000px;
    margin:0 auto 22px;
    color:#fff
}

.staff-hero h1 span {
    color:#75b9ff
}

.staff-lede {
    max-width:800px;
    margin:0 auto 26px;
    font-size:18px;
    line-height:1.8;
    color:#e0ecff
}

.staff-hero-link {
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    border-bottom:1px solid #7bb9f6;
    padding-bottom:7px
}

.staff-section {
    padding:76px 0
}

.staff-models {
    background:#f6f9fd
}

.staff-process {
    background:#fff
}

.staff-heading {
    text-align:center;
    max-width:810px;
    margin:0 auto 38px
}

.staff-kicker {
    font-size:12px!important;
    letter-spacing:.17em;
    font-weight:800!important;
    color:#2670c8!important;
    margin:0 0 12px
}

.staff-heading h2 {
    font-size:clamp(28px,3.2vw,41px);
    line-height:1.2;
    color:#152945;
    margin:0 0 18px
}

.staff-heading h2 span {
    color:#2670c8
}

.staff-heading h2:after {
    content:'';
    display:block;
    width:76px;
    height:4px;
    border-radius:6px;
    background:linear-gradient(90deg,#226cdb,#86c7ff,#226cdb);
    background-size:200% 100%;
    animation:staffShine 3s linear infinite;
    margin:16px auto 0
}

@keyframes staffShine {
    to {
        background-position:-200% 0
    }

}

.staff-heading>p:last-child {
    color:#64748b;
    line-height:1.8
}

.staff-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}

.staff-card {
    background:#fff;
    border:1px solid #e0e9f4;
    border-radius:18px;
    padding:29px;
    box-shadow:0 12px 30px rgba(20,50,90,.05);
    transition:transform .25s,border-color .25s;
    display:flex;
    flex-direction:column
}

.staff-card:hover {
    transform:translateY(-5px);
    border-color:#8cbdf3
}

.staff-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px
}

.staff-number {
    font-size:12px;
    font-weight:800;
    letter-spacing:.1em;
    color:#2670c8
}

.staff-card-top i {
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:13px;
    background:#eaf3ff;
    color:#2670c8;
    font-size:21px
}

.staff-card h3 {
    font-size:22px;
    color:#152945;
    margin:0 0 13px
}

.staff-card>p {
    color:#5c6f87;
    line-height:1.75;
    margin:0 0 20px
}

.staff-card ul {
    padding:18px 0 0 18px;
    margin:auto 0 0;
    border-top:1px solid #e5edf5;
    color:#415a76;
    line-height:1.75
}

.staff-card li {
    margin-bottom:6px
}

.staff-steps {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
}

.staff-step {
    display:flex;
    gap:22px;
    background:#f7faff;
    border:1px solid #e1ebf5;
    border-radius:17px;
    padding:27px
}

.staff-step-number {
    display:grid;
    place-items:center;
    flex:0 0 52px;
    height:52px;
    border-radius:13px;
    background:#e7f1ff;
    color:#246cc1;
    font-size:17px;
    font-weight:800
}

.staff-step-tag {
    color:#2670c8!important;
    font-size:11px;
    letter-spacing:.13em;
    font-weight:800;
    margin:0 0 8px
}

.staff-step h3 {
    font-size:20px;
    color:#152945;
    margin:0 0 10px
}

.staff-step div:last-child>p:last-child {
    color:#60718a;
    line-height:1.75;
    margin:0
}

.staff-cta {
    padding:66px 20px;
    text-align:center;
    background:linear-gradient(135deg,#102344,#1c4580);
    color:#fff
}

.staff-cta .staff-kicker {
    color:#a7d3ff!important
}

.staff-cta h2 {
    font-size:clamp(30px,4vw,44px);
    color:#fff;
    margin:0 0 17px
}

.staff-cta p:not(.staff-kicker) {
    max-width:770px;
    margin:0 auto 27px;
    color:#d9e8fc;
    line-height:1.8
}

.staff-cta-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    padding:15px 25px;
    border-radius:10px;
    background:#fff;
    color:#123766!important;
    text-decoration:none;
    font-weight:800;
    transition:transform .2s
}

.staff-cta-button:hover {
    transform:translateY(-3px)
}

.staff-cta small {
    display:block;
    color:#c5d9f1;
    margin:14px auto 0;
    line-height:1.6
}

body.dark-mode .staff-models {
    background:#0b132b
}

body.dark-mode .staff-process {
    background:#0f172a
}

body.dark-mode .staff-heading h2,body.dark-mode .staff-card h3,body.dark-mode .staff-step h3 {
    color:#f3f7ff
}

body.dark-mode .staff-heading>p:last-child,body.dark-mode .staff-card>p,body.dark-mode .staff-step div:last-child>p:last-child,body.dark-mode .staff-card ul {
    color:#b6c6df
}

body.dark-mode .staff-card,body.dark-mode .staff-step {
    background:#121d38;
    border-color:#2b3c59
}

body.dark-mode .staff-card ul {
    border-color:#2b3c59
}

body.dark-mode .staff-cta h2 {
    color:#fff
}

body.dark-mode .staff-cta-button {
    color:#123766!important
}

@media(max-width:900px) {
    .staff-grid {
        grid-template-columns:1fr
    }

    .staff-card {
        padding:26px
    }

    .staff-steps {
        grid-template-columns:1fr
    }

    .staff-section {
        padding:58px 0
    }

    .staff-hero {
        padding:76px 20px
    }

}

@media(max-width:600px) {
    .staff-hero .staff-lede {
        font-size:16px
    }

    .staff-step {
        padding:22px;
        gap:15px
    }

    .staff-step-number {
        flex-basis:44px;
        height:44px
    }

    .staff-cta-button {
        width:100%;
        max-width:300px
    }

}

@media(prefers-reduced-motion:reduce) {
    .staff-heading h2:after {
        animation:none
    }

    .staff-card,.staff-cta-button {
        transition:none
    }

}




.staff-hero .eyebrow,
.staff-hero .hero-eyebrow,
.staff-hero .staff-eyebrow,
.hero .eyebrow,
.hero .hero-eyebrow,
.hero .contact-eyebrow {
    display: block;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}