/* =========================================================
DISHA RECRUITMENT
CUSTOMER-SUPPORT-EXECUTIVE-RECRUITMENT.CSS
VERSION 4.4 — COMMERCIAL CUSTOMER SUPPORT PAGE

Design direction:
• Commercial recruitment page + Hiring Insights knowledge presentation
• Compact premium spacing without shrinking typography
• Customer-support-specific namespace only
• Uses global-new.css + recruitment-pages.css
• No dependency on office.css
========================================================= */

.csrx2-page{color:var(--text);background:#fff}
.csrx2-page h1,.csrx2-page h2,.csrx2-page h3{font-family:"Poppins",Arial,sans-serif}
.csrx2-page p{margin:0;color:#5f7082}
.csrx2-page a:focus-visible{outline:3px solid rgba(20,140,59,.35);outline-offset:3px;border-radius:4px}
.csrx2-label{display:block;margin-bottom:6px;color:var(--green-dark);font-size:11px;line-height:1.3;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}

/* =========================================================
CSRX 4.4 CSS 01
HERO
START
========================================================= */
.csrx2-hero{
    padding:34px 0 30px;
    background:linear-gradient(110deg,#f1f7fd 0%,#f8fbff 58%,#eef8f2 100%);
    border-bottom:1px solid #dfeaf4
}
.csrx2-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);
    gap:34px;
    align-items:center
}
.csrx2-kicker{
    display:inline-flex;
    margin-bottom:8px;
    padding:5px 10px;
    border-radius:20px;
    background:#e8f4ec;
    color:#16773a;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.9px
}
.csrx2-hero h1{
    max-width:720px;
    margin:0 0 12px;
    color:var(--blue);
    font-size:40px;
    line-height:1.12;
    letter-spacing:-.4px
}
.csrx2-lead{
    max-width:735px;
    margin-bottom:10px!important;
    color:#3e566f!important;
    font-size:16px!important;
    line-height:1.62!important
}
.csrx2-copy{
    max-width:735px;
    color:#607286!important;
    font-size:14.5px!important;
    line-height:1.62!important
}
.csrx2-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:16px
}
.csrx2-text-link{color:var(--blue);font-size:13.5px;font-weight:700}
.csrx2-text-link:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.csrx2-proof{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.csrx2-proof span{
    padding:6px 9px;
    border:1px solid #d2e0ec;
    border-radius:7px;
    background:#fff;
    color:#50667c;
    font-size:12px;
    font-weight:600
}
.csrx2-hero-visual{display:flex;justify-content:flex-end}
.csrx2-image-card{
    position:relative;
    overflow:hidden;
    width:100%;
    max-width:400px;
    border:1px solid #d4e1ec;
    border-radius:15px;
    background:#fff;
    box-shadow:0 10px 24px rgba(18,60,105,.08)
}
.csrx2-image-card img{width:100%;height:auto}
.csrx2-image-caption{
    position:absolute;
    left:14px;
    right:14px;
    bottom:-45px;
    padding:11px 13px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:9px;
    background:rgba(255,255,255,.95);
    box-shadow:0 5px 16px rgba(0,0,0,.08)
}
.csrx2-image-caption strong{
    display:block;
    color:var(--blue);
    font-size:13.5px;
    line-height:1.4
}
.csrx2-image-caption span{
    display:block;
    margin-top:3px;
    color:#607286;
    font-size:12px;
    line-height:1.45
}
/* CSRX 4.4 CSS 01 END */

/* =========================================================
CSRX 4.4 CSS 02
ROLE DEFINITION + GUIDE
START
========================================================= */
.csrx2-definition{padding:25px 0 27px;background:#fff}
.csrx2-definition-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.75fr);
    gap:28px;
    align-items:end;
    margin-bottom:14px
}
.csrx2-definition-head h2,.csrx2-heading h2{
    margin:0;
    color:var(--blue);
    font-size:26px;
    line-height:1.24
}
.csrx2-definition-head p{font-size:14px;line-height:1.6}
.csrx2-definition-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border:1px solid #d8e3ed;
    border-radius:11px;
    overflow:hidden;
    background:#fbfdff
}
.csrx2-definition-grid>div{
    padding:13px 12px;
    border-right:1px solid #d8e3ed
}
.csrx2-definition-grid>div:last-child{border-right:0}
.csrx2-definition-grid b{
    display:block;
    margin-bottom:4px;
    color:var(--blue);
    font-size:14.5px
}
.csrx2-definition-grid span{
    display:block;
    color:#64768a;
    font-size:12.8px;
    line-height:1.45
}
.csrx2-tip{
    margin-top:11px;
    padding:11px 14px;
    border-left:4px solid var(--green);
    border-radius:7px;
    background:#f5fbf7;
    color:#607286;
    font-size:13.5px;
    line-height:1.55
}
.csrx2-tip strong{color:var(--blue)}
.csrx2-guide-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:13px;
    padding:11px 14px;
    border-left:4px solid var(--green);
    border-radius:8px;
    background:#f7fcf8
}
.csrx2-guide-strip strong{
    display:inline;
    margin-right:4px;
    color:var(--blue);
    font-size:13px
}
.csrx2-guide-strip span{
    color:#627386;
    font-size:13px;
    line-height:1.5
}
.csrx2-guide-strip a:not(.csrx2-guide-link){
    color:var(--green-dark);
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px
}
.csrx2-guide-link{
    flex:0 0 auto;
    color:var(--blue);
    font-size:12px;
    font-weight:800;
    white-space:nowrap
}
.csrx2-guide-link:hover{color:var(--green)}
/* CSRX 4.4 CSS 02 END */

/* =========================================================
CSRX 4.4 CSS 03
COMMON SECTION + HEADING
START
========================================================= */
.csrx2-section{padding:38px 0;background:#fff}
.csrx2-soft{background:#f5f9ff}
.csrx2-heading{max-width:850px;margin:0 auto 21px;text-align:center}
.csrx2-heading p{margin-top:8px;font-size:14px;line-height:1.62}
/* CSRX 4.4 CSS 03 END */

/* =========================================================
CSRX 4.4 CSS 04
ROLES
START
========================================================= */
.csrx2-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.csrx2-role-grid article{
    padding:16px;
    border:1px solid #d9e4ee;
    border-radius:11px;
    background:#fff;
    box-shadow:0 4px 14px rgba(18,60,105,.045)
}
.csrx2-role-grid article:nth-child(2n){border-top:3px solid var(--green)}
.csrx2-role-grid article:nth-child(2n+1){border-top:3px solid var(--blue)}
.csrx2-role-grid article>span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:29px;
    height:29px;
    margin-bottom:8px;
    border-radius:8px;
    background:#edf5fd;
    color:var(--blue);
    font-size:10px;
    font-weight:800
}
.csrx2-role-grid article:nth-child(2n)>span{background:#edf8f0;color:var(--green)}
.csrx2-role-grid h3{margin:0 0 6px;color:#263746;font-size:16px;line-height:1.35}
.csrx2-role-grid p{font-size:13.2px;line-height:1.52}
/* CSRX 4.4 CSS 04 END */

/* =========================================================
CSRX 4.4 CSS 05
BUSINESS CONTEXT
START
========================================================= */
.csrx2-context-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.csrx2-context-grid article{
    padding:15px;
    border:1px solid #d8e3ed;
    border-top:3px solid var(--blue);
    border-radius:9px;
    background:#fff
}
.csrx2-context-grid article:nth-child(2n){border-top-color:var(--green)}
.csrx2-context-grid b{
    display:block;
    margin-bottom:5px;
    color:var(--blue);
    font-size:14px;
    line-height:1.35
}
.csrx2-context-grid span{
    display:block;
    color:#627386;
    font-size:12.8px;
    line-height:1.5
}
/* CSRX 4.4 CSS 05 END */

/* =========================================================
CSRX 4.4 CSS 06
ASSESSMENT
START
========================================================= */
.csrx2-assess-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.csrx2-assess-grid>div{
    padding:14px;
    border:1px solid #d7e3ee;
    border-radius:9px;
    background:#fff
}
.csrx2-assess-grid b{
    display:block;
    margin-bottom:5px;
    color:var(--blue);
    font-size:14.5px;
    line-height:1.35
}
.csrx2-assess-grid span{
    display:block;
    color:#627386;
    font-size:13.2px;
    line-height:1.5
}
/* CSRX 4.4 CSS 06 END */

/* =========================================================
CSRX 4.4 CSS 07
ROLE BOUNDARY
START
========================================================= */
.csrx2-bridge-section{padding:38px 0;background:#fff}
.csrx2-bridge-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);
    gap:11px;
    max-width:960px;
    margin:0 auto
}
.csrx2-bridge-grid article{
    padding:18px;
    border:1px solid #d8e3ed;
    border-radius:11px;
    background:#fff
}
.csrx2-bridge-grid article.blue{border-top:3px solid var(--blue)}
.csrx2-bridge-grid article.green{border-top:3px solid var(--green)}
.csrx2-bridge-grid h3{margin:0 0 9px;color:var(--blue);font-size:18px}
.csrx2-bridge-grid ul{list-style:none;margin:0;padding:0}
.csrx2-bridge-grid li{
    position:relative;
    padding:6px 0 6px 17px;
    border-top:1px solid #edf1f5;
    color:#627386;
    font-size:13.2px;
    line-height:1.48
}
.csrx2-bridge-grid li:first-child{border-top:0}
.csrx2-bridge-grid li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--green);
    font-weight:800
}
.csrx2-bridge-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:11px;
    background:#f1f6fb;
    border:1px solid #d8e3ed;
    color:#708094;
    font-size:10px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.7px
}
.csrx2-warning{
    max-width:960px;
    margin:11px auto 0;
    padding:11px 14px;
    border-left:4px solid #d6a21c;
    border-radius:7px;
    background:#fffaf0;
    color:#6b6870;
    font-size:13px;
    line-height:1.52
}
.csrx2-warning strong{color:#6a4d00}
/* CSRX 4.4 CSS 07 END */

/* =========================================================
CSRX 4.4 CSS 08
BANGALORE HIRING REALITY
START
========================================================= */
.csrx2-budget{
    padding:38px 0;
    background:linear-gradient(180deg,#f3faf5 0%,#f8fbff 100%);
    border-top:1px solid #e0ebe5;
    border-bottom:1px solid #e0e9f0
}
.csrx2-budget-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.csrx2-budget-grid article{
    padding:18px;
    border:1px solid #d5e2e8;
    border-radius:11px;
    background:#fff
}
.csrx2-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin-bottom:8px;
    border-radius:9px;
    background:#edf7f0;
    color:var(--green);
    font-weight:800
}
.csrx2-budget-grid small{
    display:block;
    margin-bottom:4px;
    color:var(--green-dark);
    font-size:10px;
    letter-spacing:1px;
    font-weight:800
}
.csrx2-budget-grid h3{margin:0 0 7px;color:#263746;font-size:17px}
.csrx2-budget-grid p{font-size:13.3px;line-height:1.55}
.csrx2-budget-grid em{
    display:block;
    margin-top:8px;
    color:#6a7b8c;
    font-size:12.3px;
    line-height:1.45;
    font-style:normal
}
.csrx2-source-note{margin-top:10px;color:#718091;font-size:12.3px;line-height:1.5}
/* CSRX 4.4 CSS 08 END */

/* =========================================================
CSRX 4.4 CSS 09
HIRING SITUATIONS
START
========================================================= */
.csrx2-situations{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.csrx2-situations>div{
    padding:15px;
    border:1px solid #dbe5ed;
    border-radius:10px;
    background:#fff
}
.csrx2-situations b{
    display:block;
    margin-bottom:5px;
    color:var(--blue);
    font-size:15px
}
.csrx2-situations span{
    display:block;
    color:#627386;
    font-size:13.2px;
    line-height:1.5
}
/* CSRX 4.4 CSS 09 END */

/* =========================================================
CSRX 4.4 CSS 10
PROCESS
START
========================================================= */
.csrx2-process{padding:38px 0;background:#eef5fb}
.csrx2-process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.csrx2-process-grid>div{
    padding:13px 11px;
    border:1px solid #d4e1ed;
    border-radius:9px;
    background:#fff
}
.csrx2-process-grid span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin-bottom:7px;
    border-radius:50%;
    background:#edf5fd;
    color:var(--blue);
    font-size:10px;
    font-weight:800
}
.csrx2-process-grid>div:nth-child(2n) span{background:#edf8f0;color:var(--green)}
.csrx2-process-grid b{display:block;margin-bottom:4px;color:#263746;font-size:14.5px}
.csrx2-process-grid p{font-size:12.5px;line-height:1.46}
/* CSRX 4.4 CSS 10 END */

/* =========================================================
CSRX 4.4 CSS 11
CHECKLIST
START
========================================================= */
.csrx2-check-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.csrx2-check-grid>div{
    padding:14px;
    border:1px solid #d8e3ed;
    border-radius:9px;
    background:#fff
}
.csrx2-check-grid b{display:block;margin-bottom:4px;color:var(--blue);font-size:14px}
.csrx2-check-grid span{display:block;color:#627386;font-size:13px;line-height:1.48}
/* CSRX 4.4 CSS 11 END */

/* =========================================================
CSRX 4.4 CSS 12
RELATED RESOURCES
START
========================================================= */
.csrx2-links{padding:38px 0;background:#fff}
.csrx2-link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.csrx2-link-grid a{
    display:flex;
    flex-direction:column;
    min-height:165px;
    padding:16px;
    border:1px solid #d9e4ed;
    border-top:3px solid var(--blue);
    border-radius:10px;
    background:#fff;
    box-shadow:0 4px 14px rgba(18,60,105,.045)
}
.csrx2-link-grid a:nth-child(2n){border-top-color:var(--green)}
.csrx2-link-grid strong{
    margin-bottom:6px;
    color:var(--blue);
    font-size:14.5px;
    line-height:1.4
}
.csrx2-link-grid span{color:#627386;font-size:13px;line-height:1.5}
.csrx2-link-grid b{margin-top:auto;padding-top:10px;color:var(--green-dark);font-size:12px}
/* CSRX 4.4 CSS 12 END */

/* =========================================================
CSRX 4.4 CSS 13
FAQ
START
========================================================= */
.csrx2-faq{max-width:920px;margin:0 auto}
.csrx2-faq details{
    margin-bottom:8px;
    border:1px solid #d8e3ed;
    border-radius:9px;
    background:#fff;
    overflow:hidden
}
.csrx2-faq summary{
    position:relative;
    padding:14px 42px 14px 16px;
    cursor:pointer;
    list-style:none;
    color:#263746;
    font-family:"Poppins",Arial,sans-serif;
    font-size:14.5px;
    font-weight:600;
    line-height:1.45
}
.csrx2-faq summary::-webkit-details-marker{display:none}
.csrx2-faq summary:after{
    content:"+";
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--green);
    font-size:19px
}
.csrx2-faq details[open] summary{background:#f8fbff;color:var(--blue)}
.csrx2-faq details[open] summary:after{content:"−"}
.csrx2-faq details p{
    padding:0 16px 15px;
    background:#f8fbff;
    color:#627386;
    font-size:13.5px;
    line-height:1.65
}
/* CSRX 4.4 CSS 13 END */

/* =========================================================
CSRX 4.4 CSS 14
ENQUIRY + FINAL CTA
START
========================================================= */
.csrx2-enquiry{padding:30px 0;background:#f5f9ff}
.csrx2-enquiry-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:22px;
    align-items:center;
    padding:22px 24px;
    border:1px solid #b9dcc1;
    border-left:4px solid var(--green);
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow-sm)
}
.csrx2-enquiry-box h2{margin:0 0 7px;color:var(--blue);font-size:25px;line-height:1.25}
.csrx2-enquiry-box p{max-width:750px;font-size:14px;line-height:1.58}
.csrx2-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.csrx2-pills span{
    padding:5px 8px;
    border-radius:6px;
    background:#edf7f0;
    color:#28723f;
    font-size:12px;
    font-weight:700
}
.csrx2-final{
    padding:37px 0;
    background:linear-gradient(135deg,#0b4f9c,#0a3e7b);
    text-align:center;
    color:#fff
}
.csrx2-final>div>span{
    display:block;
    margin-bottom:6px;
    color:#dcecff;
    font-size:11px;
    letter-spacing:1.2px;
    font-weight:800
}
.csrx2-final h2{margin:0 auto 7px;max-width:850px;color:#fff;font-size:28px;line-height:1.25}
.csrx2-final p{
    max-width:760px;
    margin:0 auto 16px;
    color:#eaf3ff!important;
    font-size:14px!important;
    line-height:1.6!important
}
/* CSRX 4.4 CSS 14 END */

/* =========================================================
CSRX 4.4 CSS 15
RESPONSIVE
START
========================================================= */
@media(max-width:1050px){
    .csrx2-hero-grid{grid-template-columns:1fr 360px}
    .csrx2-definition-grid{grid-template-columns:repeat(3,1fr)}
    .csrx2-definition-grid>div:nth-child(3n){border-right:0}
    .csrx2-definition-grid>div:nth-child(n+4){border-top:1px solid #d8e3ed}
    .csrx2-context-grid{grid-template-columns:repeat(2,1fr)}
    .csrx2-assess-grid{grid-template-columns:repeat(2,1fr)}
    .csrx2-process-grid{grid-template-columns:repeat(3,1fr)}
    .csrx2-check-grid{grid-template-columns:repeat(2,1fr)}
    .csrx2-link-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
    .csrx2-definition-head{grid-template-columns:1fr}
    .csrx2-bridge-grid{grid-template-columns:1fr 1fr}
    .csrx2-bridge-arrow{grid-column:1/-1;min-height:46px}
    .csrx2-guide-strip{align-items:flex-start;flex-direction:column;gap:7px}
}
@media(max-width:800px){
    .csrx2-hero-grid{grid-template-columns:1fr}
    .csrx2-hero-visual{justify-content:flex-start}
    .csrx2-image-card{max-width:410px}
    .csrx2-role-grid,.csrx2-budget-grid,.csrx2-situations{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
    .csrx2-hero{padding:28px 0}
    .csrx2-hero h1{font-size:31px}
    .csrx2-lead{font-size:15px!important}
    .csrx2-copy{font-size:14px!important}
    .csrx2-section,.csrx2-bridge-section,.csrx2-budget,.csrx2-process,.csrx2-links{padding:32px 0}
    .csrx2-definition-grid,.csrx2-role-grid,.csrx2-context-grid,.csrx2-assess-grid,.csrx2-budget-grid,.csrx2-situations,.csrx2-process-grid,.csrx2-check-grid,.csrx2-link-grid{grid-template-columns:1fr}
    .csrx2-definition-grid>div{border-right:0!important;border-top:1px solid #d8e3ed}
    .csrx2-definition-grid>div:first-child{border-top:0}
    .csrx2-bridge-grid{grid-template-columns:1fr}
    .csrx2-bridge-arrow{grid-column:auto}
    .csrx2-enquiry-box{grid-template-columns:1fr;gap:15px;padding:19px}
    .csrx2-enquiry-box .btn{width:100%}
    .csrx2-final h2{font-size:24px}
    .csrx2-heading h2,.csrx2-definition-head h2{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
    *{scroll-behavior:auto!important}
}
/* CSRX 4.4 CSS 15 END */

/* =====================================================
CUSTOMER SUPPORT HERO EYEBROW
===================================================== */

.csrx2-kicker i {
    margin-right: 0.4em;
}