/* =========================================================
DISHA RECRUITMENT
OFFICE STAFF RECRUITMENT — DIVERSE PAGE CSS
VERSION: CLEAN PAGE-SPECIFIC TEST 1.0

LOAD ORDER:
1. css/global-new.css
2. css/office-staff.css
3. Font Awesome

IMPORTANT:
• This file is deliberately independent of office.css.
• It styles the complete office-staff-diverse-test.html page.
• Global header, navigation and footer remain in global-new.css.
• All page-specific components use the ofx / ofxtop / ofxdiv namespaces.
• No generic body/header/footer overrides.
========================================================= */


/* =========================================================
01 — PAGE BREADCRUMB
========================================================= */

.ofx-breadcrumb-wrap{
    background:#fff;
    border-bottom:1px solid #dfe8f1;
}

.ofx-breadcrumb{
    min-height:34px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#6b7f93;
    font-size:12px;
    line-height:1.3;
}

.ofx-breadcrumb a{
    color:#4f6e8c;
    text-decoration:none;
}

.ofx-breadcrumb a:hover{
    color:var(--green);
}

.ofx-breadcrumb strong{
    color:#5b6f83;
    font-weight:700;
}


/* =========================================================
02 — COMPACT COMMERCIAL HERO
========================================================= */

.ofxtop-hero{
    background:linear-gradient(105deg,#f3f8fd 0%,#f8fbfe 62%,#f1faf5 100%);
    border-bottom:1px solid #dbe6ef;
}

.ofxtop-hero-inner{
    padding-top:21px;
    padding-bottom:16px;
}

.ofxtop-eyebrow{
    margin-bottom:4px;
    color:var(--green);
    font-size:11px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:1.05px;
}

.ofxtop-hero h1{
    max-width:980px;
    margin:0;
    color:var(--blue);
    font-size:40px;
    line-height:1.08;
    letter-spacing:-.45px;
}

.ofxtop-hero h2{
    margin:2px 0 6px;
    color:#294d73;
    font-size:18px;
    line-height:1.25;
}

.ofxtop-hero p{
    max-width:1000px;
    margin:0 0 6px;
    font-size:14px;
    line-height:1.45;
}

.ofxtop-lead{
    color:#536f8b;
}

.ofxtop-lead strong{
    color:#31577d;
}

.ofxtop-support{
    color:#657e96;
    font-size:12.5px !important;
}

.ofxtop-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:7px;
}

.ofxtop-actions .btn{
    min-height:37px;
    padding:9px 14px;
    font-size:13px;
}

.ofxtop-outline-btn{
    min-height:37px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border:1px solid #bcd2e7;
    border-radius:7px;
    background:#fff;
    color:var(--blue);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.ofxtop-outline-btn:hover{
    background:#eef5fd;
    color:var(--blue);
}

.ofxtop-proof{
    display:flex;
    flex-wrap:wrap;
    gap:3px 17px;
    margin-top:6px;
    color:#536d86;
    font-size:11.5px;
    line-height:1.4;
    font-weight:600;
}

.ofxtop-hiring-note{
    max-width:760px;
    margin-top:7px;
    padding:6px 9px;
    border-left:3px solid var(--green);
    background:rgba(255,255,255,.86);
    color:#64788d;
    font-size:11.5px;
    line-height:1.4;
}

.ofxtop-hiring-note strong{
    color:var(--blue);
}


/* =========================================================
03 — SIX SPECIALIST ROLE TILES
========================================================= */

.ofxtop-roles{
    padding:18px 0 20px;
    background:#fff;
}

.ofxtop-role-heading{
    margin:0 auto 8px;
    text-align:center;
}

.ofxtop-role-heading > span{
    display:block;
    margin-bottom:2px;
    color:var(--green);
    font-size:10.5px;
    line-height:1.2;
    letter-spacing:1.05px;
    font-weight:800;
}

.ofxtop-role-heading h2{
    margin:0;
    color:var(--blue);
    font-size:27px;
    line-height:1.16;
}

.ofxtop-role-heading p{
    max-width:780px;
    margin:2px auto 0;
    color:#637c96;
    font-size:12.5px;
    line-height:1.4;
}

.ofxtop-role-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    max-width:920px;
    margin:0 auto;
}

.ofxtop-role-card{
    display:block;
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid #d5e2ef;
    border-bottom:2px solid var(--blue);
    border-radius:9px;
    box-shadow:0 2px 7px rgba(21,66,106,.055);
    text-decoration:none;
    transition:box-shadow .2s ease,transform .2s ease;
}

.ofxtop-role-card.ofxtop-blue{
    border-bottom-color:var(--blue);
}

.ofxtop-role-card.ofxtop-green{
    border-bottom-color:var(--green);
}

.ofxtop-role-card.ofxtop-orange{
    border-bottom-color:#d88900;
}

.ofxtop-role-card:hover{
    transform:translateY(-1px);
    box-shadow:0 5px 13px rgba(21,66,106,.10);
}

.ofxtop-image{
    height:122px;
    padding:3px 4px 0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f7f9fb;
}

.ofxtop-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

.ofxtop-role-link{
    min-height:39px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding:6px 9px 7px;
    color:var(--green);
    font-size:14px;
    line-height:1.2;
    font-weight:800;
}

.ofxtop-role-link span{
    min-width:0;
}

.ofxtop-role-link b{
    flex:0 0 auto;
    color:var(--green);
    font-size:16px;
    font-weight:800;
}

.ofxtop-hiring-tip{
    max-width:780px;
    margin:8px auto 0;
    padding:6px 10px;
    display:flex;
    align-items:flex-start;
    gap:7px;
    border-left:3px solid var(--green);
    background:#f3faf5;
    color:#63788d;
    font-size:11.5px;
    line-height:1.4;
}

.ofxtop-hiring-tip strong{
    flex:0 0 auto;
    color:var(--green);
}


/* =========================================================
04 — TRUST STRIP
========================================================= */

.ofx-trust{
    padding:0 0 22px;
    background:#fff;
}

.ofx-trust-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    max-width:920px;
    margin:0 auto;
}

.ofx-trust-grid > div{
    min-height:52px;
    padding:8px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:var(--blue);
    color:#fff;
    text-align:center;
}

.ofx-trust-grid strong{
    display:block;
    color:#fff;
    font-size:16px;
    line-height:1.1;
}

.ofx-trust-grid span{
    display:block;
    margin-top:2px;
    color:#eaf2fa;
    font-size:9.5px;
    line-height:1.25;
}


/* =========================================================
05 — COMMON LOWER SECTION FOUNDATION
========================================================= */

.ofxdiv-brief,
.ofxdiv-assess,
.ofxdiv-budget,
.ofxdiv-process,
.ofxdiv-local,
.ofxdiv-why,
.ofxdiv-faq{
    position:relative;
}

.ofxdiv-brief,
.ofxdiv-assess,
.ofxdiv-budget,
.ofxdiv-process,
.ofxdiv-local,
.ofxdiv-why,
.ofxdiv-faq{
    padding:31px 0;
}

.ofxdiv-assess,
.ofxdiv-process,
.ofxdiv-why,
.ofxdiv-faq{
    background:#f7f9fc;
}

.ofxdiv-budget{
    background:#fff;
}

.ofxdiv-local{
    background:#f4faf7;
}

.ofxdiv-section-head{
    max-width:850px;
    margin:0 auto 16px;
    text-align:center;
}

.ofxdiv-section-head > span{
    display:block;
    margin-bottom:4px;
    color:var(--green);
    font-size:10.5px;
    line-height:1.25;
    letter-spacing:1.05px;
    font-weight:800;
}

.ofxdiv-section-head h2{
    margin:0 0 5px;
    color:var(--blue);
    font-size:27px;
    line-height:1.2;
}

.ofxdiv-section-head p{
    max-width:780px;
    margin:0 auto;
    color:#647b92;
    font-size:13px;
    line-height:1.5;
}


/* =========================================================
06 — REQUIREMENT BRIEF
========================================================= */

.ofxdiv-brief{
    background:#fff;
}

.ofxdiv-brief-layout{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:12px;
    align-items:stretch;
}

.ofxdiv-check-panel,
.ofxdiv-situation-panel{
    padding:17px;
    border:1px solid #d7e3ee;
    border-radius:10px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.ofxdiv-check-panel{
    border-top:3px solid var(--blue);
}

.ofxdiv-situation-panel{
    border-top:3px solid var(--green);
}

.ofxdiv-panel-label{
    margin-bottom:4px;
    color:#6f8498;
    font-size:10px;
    line-height:1.25;
    letter-spacing:.9px;
    font-weight:800;
}

.ofxdiv-check-panel h3{
    margin-bottom:9px;
    color:var(--blue);
    font-size:19px;
    line-height:1.25;
}

.ofxdiv-check-panel ul{
    list-style:none;
    margin:0;
    padding:0;
}

.ofxdiv-check-panel li{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:8px;
    padding:6px 0;
    border-bottom:1px solid #edf2f6;
    font-size:12.5px;
    line-height:1.35;
}

.ofxdiv-check-panel li:last-child{
    border-bottom:0;
}

.ofxdiv-check-panel li strong{
    color:#304f6d;
}

.ofxdiv-check-panel li span{
    color:#6a7f93;
}

.ofxdiv-situation-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.ofxdiv-situation-list article{
    display:grid;
    grid-template-columns:29px minmax(0,1fr);
    gap:8px;
    padding:9px;
    border:1px solid #e0e8f0;
    border-radius:8px;
    background:#fafdff;
}

.ofxdiv-situation-list article > b{
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eef5fd;
    color:var(--blue);
    font-size:10px;
}

.ofxdiv-situation-list h3{
    margin:0 0 2px;
    color:var(--blue);
    font-size:14px;
    line-height:1.25;
}

.ofxdiv-situation-list p{
    margin:0;
    color:#6c8093;
    font-size:11.5px;
    line-height:1.4;
}


/* =========================================================
07 — EMPLOYER ASSESSMENT
========================================================= */

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

.ofxdiv-assess-grid article{
    min-height:132px;
    padding:13px;
    border:1px solid #d9e5ef;
    border-radius:9px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.ofxdiv-assess-grid .ofxdiv-assess-feature{
    border-top:2px solid var(--blue);
}

.ofxdiv-icon{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:7px;
    border-radius:50%;
    background:#eef5fd;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
}

.ofxdiv-assess-grid h3{
    margin-bottom:4px;
    color:var(--blue);
    font-size:15px;
    line-height:1.25;
}

.ofxdiv-assess-grid p{
    margin:0;
    color:#667c91;
    font-size:12px;
    line-height:1.45;
}

.ofxdiv-callout{
    max-width:850px;
    margin:9px auto 0;
    padding:8px 11px;
    display:flex;
    align-items:flex-start;
    gap:8px;
    border-left:3px solid var(--green);
    background:#eef9f2;
    color:#61788c;
    font-size:11.5px;
    line-height:1.45;
}

.ofxdiv-callout strong{
    flex:0 0 auto;
    color:var(--green);
}


/* =========================================================
08 — BUDGET + COMMUTE
========================================================= */

.ofxdiv-budget{
    background:#fff;
}

.ofxdiv-budget-grid{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(260px,.75fr);
    gap:10px;
    align-items:stretch;
}

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

.ofxdiv-levels article{
    padding:14px;
    border:1px solid #d8e4ef;
    border-top:3px solid var(--blue);
    border-radius:9px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.ofxdiv-levels article:nth-child(2){
    border-top-color:var(--green);
}

.ofxdiv-levels article:nth-child(3){
    border-top-color:#d88900;
}

.ofxdiv-levels article > span{
    display:block;
    margin-bottom:5px;
    color:#71859a;
    font-size:9.5px;
    line-height:1.25;
    letter-spacing:.7px;
    font-weight:800;
}

.ofxdiv-levels h3{
    margin-bottom:5px;
    color:var(--blue);
    font-size:18px;
    line-height:1.2;
}

.ofxdiv-levels p{
    margin:0;
    color:#687d91;
    font-size:11.5px;
    line-height:1.45;
}

.ofxdiv-commute{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:9px;
    padding:14px;
    border:1px solid #cfe3d5;
    border-radius:9px;
    background:#f4faf6;
}

.ofxdiv-mapmark{
    width:31px;
    height:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#dff3e5;
    color:var(--green);
    font-size:13px;
}

.ofxdiv-commute > div:last-child > span{
    display:block;
    margin-bottom:4px;
    color:var(--green);
    font-size:9.5px;
    letter-spacing:.8px;
    font-weight:800;
}

.ofxdiv-commute h3{
    margin-bottom:5px;
    color:var(--blue);
    font-size:16px;
    line-height:1.25;
}

.ofxdiv-commute p{
    margin-bottom:7px;
    color:#657a8e;
    font-size:11.5px;
    line-height:1.45;
}

.ofxdiv-commute strong{
    color:#315c45;
    font-size:11px;
    line-height:1.4;
}

.ofxdiv-market-note{
    margin-top:8px;
    padding:7px 10px;
    border:1px solid #e0e8ef;
    border-radius:7px;
    background:#fafcfe;
    color:#74879a;
    font-size:10.5px;
    line-height:1.4;
}

.ofxdiv-market-note strong{
    color:#516b84;
}


/* =========================================================
09 — RECRUITMENT PROCESS
========================================================= */

.ofxdiv-timeline{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
}

.ofxdiv-timeline article{
    position:relative;
    min-width:0;
    padding:12px 10px 11px;
    border:1px solid #d8e4ef;
    border-radius:8px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.ofxdiv-timeline article > b{
    display:block;
    margin-bottom:6px;
    color:var(--green);
    font-size:10px;
    line-height:1.2;
    font-weight:800;
}

.ofxdiv-timeline h3{
    margin-bottom:3px;
    color:var(--blue);
    font-size:14px;
    line-height:1.2;
}

.ofxdiv-timeline p{
    margin:0;
    color:#6b7f92;
    font-size:10.8px;
    line-height:1.4;
}

.ofxdiv-process-note{
    max-width:850px;
    margin:9px auto 0;
    padding:7px 10px;
    display:flex;
    gap:7px;
    border-left:3px solid var(--blue);
    background:#eef5fd;
    color:#667b90;
    font-size:11px;
    line-height:1.4;
}

.ofxdiv-process-note strong{
    flex:0 0 auto;
    color:var(--blue);
}


/* =========================================================
10 — LOCAL BANGALORE CONTEXT
========================================================= */

.ofxdiv-local{
    padding:30px 0;
}

.ofxdiv-local-panel{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
    gap:18px;
    padding:19px;
    border:1px solid #cfe3d5;
    border-radius:11px;
    background:linear-gradient(135deg,#f7fcf9,#fff);
    box-shadow:var(--shadow-sm);
}

.ofxdiv-local-copy > span{
    display:block;
    margin-bottom:4px;
    color:var(--green);
    font-size:10px;
    letter-spacing:.9px;
    font-weight:800;
}

.ofxdiv-local-copy h2{
    margin-bottom:6px;
    color:var(--blue);
    font-size:25px;
    line-height:1.2;
}

.ofxdiv-local-copy p{
    max-width:700px;
    margin-bottom:7px;
    color:#61788e;
    font-size:12.5px;
    line-height:1.5;
}

.ofxdiv-local-copy a{
    display:inline-flex;
    align-items:center;
    margin-top:3px;
    padding:8px 11px;
    border-radius:7px;
    background:var(--green);
    color:#fff;
    font-size:11.5px;
    font-weight:700;
    text-decoration:none;
}

.ofxdiv-local-copy a:hover{
    background:var(--green-dark);
}

.ofxdiv-local-facts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}

.ofxdiv-local-facts > div{
    padding:10px;
    border:1px solid #d8e7dd;
    border-radius:8px;
    background:#fff;
}

.ofxdiv-local-facts b,
.ofxdiv-local-facts span{
    display:block;
}

.ofxdiv-local-facts b{
    margin-bottom:2px;
    color:var(--blue);
    font-size:13px;
}

.ofxdiv-local-facts span{
    color:#708394;
    font-size:10.5px;
    line-height:1.35;
}


/* =========================================================
11 — WHY DISHA
========================================================= */

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

.ofxdiv-pillars article{
    padding:15px;
    border:1px solid #d8e4ef;
    border-radius:9px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.ofxdiv-pillar-no{
    margin-bottom:5px;
    color:var(--green);
    font-size:10px;
    line-height:1.2;
    font-weight:800;
}

.ofxdiv-pillars h3{
    margin-bottom:4px;
    color:var(--blue);
    font-size:16px;
    line-height:1.25;
}

.ofxdiv-pillars p{
    margin:0;
    color:#687d91;
    font-size:11.8px;
    line-height:1.45;
}

.ofxdiv-proof-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:5px 16px;
    margin-top:9px;
    color:#5c7388;
    font-size:10.5px;
    line-height:1.4;
    font-weight:700;
}


/* =========================================================
12 — FAQ
========================================================= */

.ofxdiv-faq{
    padding:31px 0 34px;
}

.ofxdiv-faq-wrap{
    display:grid;
    grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr);
    gap:12px;
    max-width:950px;
    margin:0 auto;
    align-items:start;
}

.ofxdiv-faq-intro{
    padding:15px;
    border:1px solid #d5e2ee;
    border-left:3px solid var(--green);
    border-radius:8px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.ofxdiv-faq-intro > strong{
    display:block;
    margin-bottom:5px;
    color:var(--blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:17px;
    line-height:1.25;
}

.ofxdiv-faq-intro p{
    margin-bottom:9px;
    color:#687d91;
    font-size:11.5px;
    line-height:1.45;
}

.ofxdiv-faq-intro a{
    color:var(--green);
    font-size:11.5px;
    font-weight:800;
    text-decoration:none;
}

.ofxdiv-faq-list{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ofxdiv-faq-list details{
    border:1px solid #d8e4ef;
    border-radius:8px;
    background:#fff;
    overflow:hidden;
}

.ofxdiv-faq-list summary{
    position:relative;
    list-style:none;
    cursor:pointer;
    padding:10px 34px 10px 12px;
    color:var(--blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:12.5px;
    line-height:1.35;
    font-weight:700;
}

.ofxdiv-faq-list summary::-webkit-details-marker{
    display:none;
}

.ofxdiv-faq-list summary::after{
    content:"+";
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    color:var(--green);
    font-size:17px;
    line-height:1;
    font-weight:700;
}

.ofxdiv-faq-list details[open] summary::after{
    content:"−";
}

.ofxdiv-faq-list details p{
    margin:0;
    padding:0 12px 11px;
    color:#64798d;
    font-size:11.5px;
    line-height:1.5;
}


/* =========================================================
13 — FINAL EMPLOYER CTA
========================================================= */

.ofx-final-cta{
    padding:31px 0;
    background:linear-gradient(135deg,var(--blue),var(--blue-dark));
    color:#fff;
    text-align:center;
}

.ofx-final-cta span{
    display:block;
    margin-bottom:4px;
    color:#9ce1b3;
    font-size:10px;
    line-height:1.25;
    letter-spacing:1px;
    font-weight:800;
}

.ofx-final-cta h2{
    margin-bottom:5px;
    color:#fff;
    font-size:27px;
    line-height:1.2;
}

.ofx-final-cta p{
    max-width:700px;
    margin:0 auto 12px;
    color:#e9f1f8;
    font-size:12.5px;
    line-height:1.5;
}

.ofx-final-cta .btn{
    min-height:38px;
    padding:9px 15px;
    font-size:12.5px;
}


/* =========================================================
14 — RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .ofxtop-hero h1{
        font-size:36px;
    }

    .ofxtop-role-grid{
        max-width:100%;
    }

    .ofxdiv-timeline{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .ofxdiv-budget-grid,
    .ofxdiv-local-panel{
        grid-template-columns:1fr;
    }

    .ofxdiv-levels{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .ofxdiv-faq-wrap{
        grid-template-columns:1fr;
    }

    .ofxdiv-faq-intro{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        align-items:center;
        gap:12px;
    }

    .ofxdiv-faq-intro > strong{
        margin:0;
    }

    .ofxdiv-faq-intro p{
        margin:0;
    }
}


@media(max-width:800px){

    .ofxtop-hero-inner{
        padding-top:18px;
        padding-bottom:15px;
    }

    .ofxtop-hero h1{
        font-size:32px;
    }

    .ofxtop-role-heading h2{
        font-size:24px;
    }

    .ofx-trust-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ofxdiv-brief-layout{
        grid-template-columns:1fr;
    }

    .ofxdiv-assess-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ofxdiv-situation-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


@media(max-width:650px){

    .ofxtop-hero h1{
        font-size:29px;
    }

    .ofxtop-hero h2{
        font-size:17px;
    }

    .ofxtop-hero p{
        font-size:13.5px;
    }

    .ofxtop-actions{
        gap:6px;
    }

    .ofxtop-actions .btn,
    .ofxtop-outline-btn{
        min-height:36px;
        padding:8px 11px;
        font-size:12.5px;
    }

    .ofxtop-role-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ofxtop-image{
        height:118px;
    }

    .ofxtop-role-link{
        min-height:42px;
        padding:7px 8px;
        font-size:12.5px;
    }

    .ofxtop-hiring-tip{
        display:block;
    }

    .ofxtop-hiring-tip strong{
        display:block;
        margin-bottom:2px;
    }

    .ofxdiv-brief,
    .ofxdiv-assess,
    .ofxdiv-budget,
    .ofxdiv-process,
    .ofxdiv-local,
    .ofxdiv-why,
    .ofxdiv-specialists,
    .ofxdiv-faq{
        padding:27px 0;
    }

    .ofxdiv-section-head{
        margin-bottom:13px;
    }

    .ofxdiv-section-head h2{
        font-size:23px;
    }

    .ofxdiv-section-head p{
        font-size:12.5px;
    }

    .ofxdiv-assess-grid{
        grid-template-columns:1fr;
    }

    .ofxdiv-timeline{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ofxdiv-levels{
        grid-template-columns:1fr;
    }

    .ofxdiv-local-panel{
        padding:15px;
    }

    .ofxdiv-local-copy h2{
        font-size:22px;
    }

    .ofxdiv-pillars{
        grid-template-columns:1fr;
    }

    .ofxdiv-faq-intro{
        display:block;
    }

    .ofxdiv-faq-intro > strong{
        margin-bottom:5px;
    }
}


@media(max-width:430px){

    .ofxtop-hero h1{
        font-size:27px;
    }

    .ofxtop-proof{
        gap:3px 10px;
        font-size:11px;
    }

    .ofxtop-role-grid{
        grid-template-columns:1fr;
    }

    .ofxtop-image{
        height:150px;
    }

    .ofx-trust-grid{
        grid-template-columns:1fr 1fr;
    }

    .ofxdiv-situation-list{
        grid-template-columns:1fr;
    }

    .ofxdiv-timeline{
        grid-template-columns:1fr 1fr;
    }

    .ofxdiv-check-panel li{
        grid-template-columns:1fr;
        gap:1px;
    }

    .ofxdiv-process-note,
    .ofxdiv-callout{
        display:block;
    }

    .ofxdiv-process-note strong,
    .ofxdiv-callout strong{
        display:block;
        margin-bottom:2px;
    }

    .ofx-final-cta h2{
        font-size:23px;
    }
}


/* =========================================================
15 — EMPLOYER HIRING GUIDE BRIDGE
Placed immediately below the six visual role tiles.
========================================================= */

.ofx-guide-bridge{
    padding:22px 0 24px;
    background:#f7fafc;
    border-top:1px solid #e4edf5;
    border-bottom:1px solid #e4edf5;
}

.ofx-guide-head{
    max-width:850px;
    margin:0 auto 12px;
    text-align:center;
}

.ofx-guide-head > span{
    display:block;
    margin-bottom:3px;
    color:var(--green);
    font-size:10px;
    line-height:1.25;
    letter-spacing:1px;
    font-weight:800;
}

.ofx-related-head > span{
    display:block;
    margin-bottom:3px;
    color:var(--green);
    font-size:10px;
    line-height:1.25;
    letter-spacing:1px;
    font-weight:800;
}

.ofx-guide-head h2{
    margin:0 0 4px;
    color:var(--blue);
    font-size:25px;
    line-height:1.18;
}

.ofx-related-head h2{
    margin:0 0 4px;
    color:var(--blue);
    font-size:25px;
    line-height:1.18;
}

.ofx-guide-head p{
    max-width:760px;
    margin:0 auto;
    color:#657c93;
    font-size:12px;
    line-height:1.45;
}

.ofx-related-head p{
    max-width:760px;
    margin:0 auto;
    color:#657c93;
    font-size:12px;
    line-height:1.45;
}

.ofx-guide-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    max-width:1080px;
    margin:0 auto;
}

.ofx-guide-card{
    min-width:0;
    min-height:82px;
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    gap:8px;
    align-items:start;
    padding:11px 12px;
    border:1px solid #d7e4ef;
    border-top:3px solid var(--blue);
    border-radius:8px;
    background:#fff;
    box-shadow:0 2px 7px rgba(21,66,106,.035);
    text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.ofx-guide-card.ofx-guide-green{
    border-top-color:var(--green);
}

.ofx-guide-card:hover{
    transform:translateY(-1px);
    border-color:#b9cee1;
    box-shadow:0 5px 13px rgba(21,66,106,.08);
}

.ofx-guide-icon{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--blue);
    font-size:15px;
    font-weight:800;
}

.ofx-guide-card.ofx-guide-green .ofx-guide-icon{
    color:var(--green);
}

.ofx-guide-card h3{
    margin:0 0 3px;
    color:#29435d;
    font-size:12.5px;
    line-height:1.3;
    font-weight:800;
}

.ofx-guide-card p{
    margin:0;
    color:#71859a;
    font-size:10.8px;
    line-height:1.4;
}


/* =========================================================
16 — RELATED RECRUITMENT SERVICES & EMPLOYER RESOURCES
Compact lower navigation; intentionally different from the
large visual role selector at the top.
========================================================= */

.ofx-related-resources{
    padding:27px 0 29px;
    background:#fff;
    border-top:1px solid #e1eaf2;
}

.ofx-related-head{
    max-width:900px;
    margin:0 auto 13px;
    text-align:center;
}

.ofx-related-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    max-width:980px;
    margin:0 auto;
}

.ofx-related-card{
    min-width:0;
    display:grid;
    grid-template-columns:24px minmax(0,1fr) 14px;
    gap:8px;
    align-items:center;
    padding:10px 11px;
    border:1px solid #d7e3ed;
    border-top:2px solid var(--blue);
    border-radius:8px;
    background:#fff;
    text-decoration:none;
    box-shadow:0 2px 6px rgba(21,66,106,.03);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.ofx-related-card.ofx-related-green{
    border-top-color:var(--green);
}

.ofx-related-card.ofx-related-orange{
    border-top-color:#d88900;
}

.ofx-related-card:hover{
    transform:translateY(-1px);
    border-color:#b9cee1;
    box-shadow:0 5px 12px rgba(21,66,106,.07);
}

.ofx-related-icon{
    color:var(--blue);
    font-size:14px;
    font-weight:800;
    text-align:center;
}

.ofx-related-green .ofx-related-icon{
    color:var(--green);
}

.ofx-related-orange .ofx-related-icon{
    color:#d88900;
}

.ofx-related-card h3{
    margin:0 0 2px;
    color:#29435d;
    font-size:12px;
    line-height:1.3;
    font-weight:800;
}

.ofx-related-card p{
    margin:0;
    color:#71859a;
    font-size:10.5px;
    line-height:1.35;
}

.ofx-related-card b{
    color:var(--green);
    font-size:15px;
    text-align:right;
}


/* =========================================================
17 — RESPONSIVE RULES FOR NEW SECTIONS
========================================================= */

@media (max-width:900px){
    .ofx-guide-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ofx-related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:640px){
    .ofx-guide-bridge{
        padding:19px 0 21px;
    }

    .ofx-guide-head h2{
        font-size:21px;
    }

    .ofx-related-head h2{
        font-size:21px;
    }

    .ofx-guide-head p{
        font-size:11.5px;
    }

    .ofx-related-head p{
        font-size:11.5px;
    }

    .ofx-guide-grid,
    .ofx-related-grid{
        grid-template-columns:1fr;
        gap:7px;
    }

    .ofx-guide-card{
        min-height:74px;
    }

    .ofx-related-resources{
        padding:23px 0 25px;
    }
}

/* =========================================================
END — OFFICE STAFF RECRUITMENT DIVERSE PAGE CSS
VERSION 3 — FINAL SAFETY CLEANUP
========================================================= */


/* =========================================================
APPROVED ROLE CARD COMPONENT
Integrated from standalone office-role-cards-test.css.
Only the six-card component is added here.
========================================================= */

.rolecards-test{
    padding:30px 0 34px;
    background:#f7f9fc;
}

.rolecards-test-heading{
    max-width:980px;
    margin:0 auto 22px;
    text-align:center;
}

.rolecards-test-heading > span{
    display:block;
    margin-bottom:5px;
    color:var(--green);
    font-size:10.5px;
    line-height:1.25;
    letter-spacing:1px;
    font-weight:800;
}

.rolecards-test-heading h1{
    margin:0 0 6px;
    color:var(--blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:29px;
    line-height:1.2;
    font-weight:700;
}

.rolecards-test-heading p{
    max-width:760px;
    margin:0 auto;
    color:#657c93;
    font-size:13px;
    line-height:1.5;
}

.rolecards-test-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    max-width:1140px;
    margin:0 auto;
}

.rolecard-test{
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:14px;
    border:1px solid #d7e2ec;
    border-radius:12px;
    background:#fff;
    box-shadow:0 3px 12px rgba(21,66,106,.055);
    color:inherit;
    text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.rolecard-image-wrap{
    width:100%;
    height:142px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    margin:0 0 12px;
    border-radius:9px;
    background:#f7f9fc;
    overflow:hidden;
}

.rolecard-image-wrap img{
    display:block;
    width:auto;
    height:100%;
    max-width:78%;
    object-fit:contain;
    border-radius:5px;
}

.rolecard-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:3px 5px 2px;
}

.rolecard-kicker{
    display:block;
    margin-bottom:5px;
    color:var(--green);
    font-size:9.5px;
    line-height:1.25;
    letter-spacing:.85px;
    font-weight:800;
}

.rolecard-body h2{
    margin:0 0 7px;
    color:var(--blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:15px;
    line-height:1.3;
    font-weight:700;
}
.rolecard-body h3{
    margin:0 0 7px;
    color:var(--blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:14px;
    line-height:1.3;
    font-weight:700;
}
.rolecard-body p{
    margin:0;
    color:#667d94;
    font-size:12px;
    line-height:1.5;
}

.rolecard-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:auto;
    padding-top:14px;
    color:var(--blue);
    font-size:12.5px;
    line-height:1.25;
    font-weight:700;
}

.rolecard-link b{
    color:var(--green);
    font-size:16px;
    line-height:1;
    transition:transform .18s ease;
}

.rolecard-blue{border-top:3px solid var(--blue);}
.rolecard-green{border-top:3px solid var(--green);}
.rolecard-orange{border-top:3px solid #e39a00;}

@media (hover:hover) and (pointer:fine){
    .rolecard-test:hover{
        transform:translateY(-2px);
        border-color:#bfd2e3;
        box-shadow:0 7px 18px rgba(21,66,106,.09);
    }
    .rolecard-test:hover .rolecard-link b{
        transform:translateX(2px);
    }
}

.rolecards-test-tip{
    max-width:780px;
    margin:14px auto 0;
    padding:9px 12px;
    display:flex;
    align-items:flex-start;
    gap:7px;
    border-left:3px solid var(--green);
    background:#f1f8f3;
    color:#657c93;
    font-size:11px;
    line-height:1.45;
}

.rolecards-test-tip strong{
    flex:0 0 auto;
    color:var(--green);
}

@media(max-width:900px){
    .rolecards-test-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }
}

@media(max-width:600px){
    .rolecards-test{
        padding:22px 0 26px;
    }
    .rolecards-test-heading{
        margin-bottom:16px;
    }
    .rolecards-test-heading h1{
        font-size:24px;
    }
    .rolecards-test-heading p{
        font-size:12px;
    }
    .rolecards-test-grid{
        grid-template-columns:1fr;
        gap:12px;
    }
    .rolecard-test{
        padding:12px;
    }
    .rolecard-image-wrap{
        height:150px;
    }
    .rolecard-body h2{
        font-size:17px;
    }
    .rolecards-test-tip{
        display:block;
    }
    .rolecards-test-tip strong{
        display:block;
        margin-bottom:2px;
    }
}

/* =========================================================
CONTENT & DIGITAL SPECIALISTS
Compact two-card specialist strip
========================================================= */

.ofxcd-specialists{
    padding:14px 0 16px;
    background:#fff;
    border-top:1px solid #edf2f6;
    border-bottom:1px solid #edf2f6;
}

.ofxcd-inner{
    width:100%;
    max-width:1140px;
    margin:0 auto;
}

.ofxcd-heading{
    margin:0 0 9px;
}

.ofxcd-heading > span{
    display:block;
    margin-bottom:3px;
    color:var(--green);
    font-size:10.5px;
    line-height:1.25;
    letter-spacing:1px;
    font-weight:800;
}

.ofxcd-heading h2{
    margin:0 0 4px;
    color:var(--blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:25px;
    line-height:1.18;
    font-weight:700;
}

.ofxcd-intro{
    max-width:900px;
    margin:0;
    color:#657c93;
    font-size:12px;
    line-height:1.45;
}

.ofxcd-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100%;
}

.ofxcd-card{
    min-width:0;
    padding:9px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid #cbdceb;
    border-left:3px solid var(--blue);
    border-radius:8px;
    background:#fbfdff;
    box-shadow:0 3px 9px rgba(21,66,106,.06);
    color:inherit;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.ofxcd-card:hover{
    transform:translateY(-1px);
    border-color:#b9d2ea;
    box-shadow:0 5px 12px rgba(21,66,106,.08);
}

.ofxcd-card-green{
    border-left-color:var(--green);
}

.ofxcd-card-content{
    min-width:0;
}

.ofxcd-card h3{
    margin:0 0 2px;
    color:var(--blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:15px;
    line-height:1.22;
    font-weight:700;
}

.ofxcd-card p{
    margin:0;
    color:#718398;
    font-size:11px;
    line-height:1.35;
}

.ofxcd-arrow{
    flex:0 0 auto;
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#edf7f0;
    color:var(--green);
    font-size:13px;
    line-height:1;
    font-weight:800;
}

@media(max-width:640px){
    .ofxcd-grid{
        grid-template-columns:1fr;
        gap:8px;
    }

    .ofxcd-heading h2{
        font-size:21px;
    }

    .ofxcd-intro{
        font-size:11.5px;
    }
}

/* DISHA TYPOGRAPHY STANDARD V1 — validated Office Staff baseline */
.ofxtop-role-heading h2,
.ofxdiv-section-head h2,
.ofx-guide-head h2,
.ofx-related-head h2 { font-size:30px; line-height:1.2; }
.ofxtop-role-heading p,
.ofxdiv-section-head p,
.ofx-guide-head p,
.ofx-related-head p { font-size:15px; line-height:1.55; }
.rolecard-body h2,
.rolecard-body h3 { font-size:20px; line-height:1.25; }
.rolecard-body p { font-size:15px; line-height:1.5; }
.ofx-guide-card h3,
.ofx-related-card h3 { font-size:15px; line-height:1.3; }
.ofx-guide-card p,
.ofx-related-card p { font-size:13px; line-height:1.45; }


@media (max-width: 768px){
.ofxtop-role-heading h2,.ofxdiv-section-head h2,.ofx-guide-head h2,.ofx-related-head h2{font-size:24px;line-height:1.22;}
.ofxtop-role-heading p,.ofxdiv-section-head p,.ofx-guide-head p,.ofx-related-head p{font-size:14px;line-height:1.5;}
.rolecard-body h2,.rolecard-body h3{font-size:18px;line-height:1.28;}
.rolecard-body p{font-size:14px;line-height:1.48;}
.ofx-guide-card h3,.ofx-related-card h3{font-size:15px;line-height:1.3;}
.ofx-guide-card p,.ofx-related-card p{font-size:13px;line-height:1.45;}
}


/* =========================================================
DISHA — COMPACT MOBILE MASTER NAVIGATION
V1
Mobile-only site navigation. Desktop navigation is unchanged.
========================================================= */

.disha-mobile-master-nav-v1{
    display:none !important;
}

@media(max-width:767px){

    .disha-mobile-master-nav-v1{
        display:flex;
        width:100%;
        min-width:0;
        align-items:center;
        justify-content:space-between;
        gap:3px;
        margin:5px 0 0;
        padding:7px 0 8px;
        border-top:1px solid #DDE7F2;
        border-bottom:1px solid #DDE7F2;
        box-sizing:border-box;
        overflow:hidden;
    }

    .disha-mobile-master-nav-v1 a{
        flex:0 1 auto;
        min-width:0;
        margin:0;
        padding:1px 0;
        color:#0052A5;
        text-decoration:none;
        font-size:10.5px;
        font-weight:600;
        line-height:1.15;
        letter-spacing:-.05px;
        white-space:nowrap;
        text-align:center;
    }

    .disha-mobile-master-nav-v1 a.is-active{
        color:#00843D;
        font-weight:700;
    }

    .disha-mobile-master-nav-v1 a:hover{
        color:#00843D;
    }

    .disha-mobile-master-nav-v1 a:last-child{
        display:inline-flex;
        align-items:center;
        gap:2px;
    }

    .site-header .nav-menu{
        display:none !important;
    }
}

@media(max-width:380px){
    .disha-mobile-master-nav-v1{
        gap:2px;
        padding-top:6px;
        padding-bottom:7px;
    }
    .disha-mobile-master-nav-v1 a{
        font-size:9.5px;
    }
}

@media(max-width:340px){
    .disha-mobile-master-nav-v1 a{
        font-size:9px;
    }
}

/* =========================================================
DISHA — COMPACT MOBILE MASTER NAVIGATION
END V1
========================================================= */