/* Gangal Recruitment homepage preview, 2026-10-14. No framework, no third-party assets. */
@font-face{font-family:Inter;src:url(/fonts/inter-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:optional}
:root{--navy:#1a365d;--navy2:#102a4c;--orange:#c05621;--orange-d:#9c4221;--ink:#1a202c;--muted:#4a5568;--line:#e2e8f0;--cream:#faf6f0;--tint:#ebf4ff;--sand:#f3e9dc}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:#fff;padding-bottom:76px}
@media (min-width:760px){body{padding-bottom:0}}
img,svg{max-width:100%;height:auto}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--orange-d)}
:focus-visible{outline:3px solid #2b6cb0;outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.15;color:var(--navy);margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2rem,6.4vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.55rem,4.2vw,2.2rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
ul.plain,ol.plain{list-style:none;margin:0;padding:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:1.02rem;text-decoration:none;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s;text-align:center}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-d);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy2);color:#fff}
.btn-ghost-light{border-color:rgba(255,255,255,.75);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--navy)}
.btn-ghost{border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-sm{min-height:44px;padding:8px 14px;font-size:.92rem;white-space:nowrap}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:#fff}

/* header */
.site-h{position:relative;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
@media (min-width:760px){.site-h{position:sticky;top:0}}
.site-h .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;padding:8px 16px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.02rem;color:var(--navy);text-decoration:none;min-height:44px;white-space:nowrap}
.logo svg{flex:none}
.nav{order:3;width:100%;display:flex;flex-wrap:wrap;gap:0 18px;font-size:.93rem;border-top:1px solid var(--line)}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--navy);text-decoration:underline}
.h-actions{display:flex;align-items:center;gap:6px}
@media (min-width:960px){.nav{order:0;width:auto;gap:26px;margin-left:auto;margin-right:12px;border-top:0}.site-h .wrap{flex-wrap:nowrap;padding:10px 20px}}

/* hero */
.hero{background:var(--cream);padding:32px 0 40px;border-bottom:1px solid #efe5d6}
@media (min-width:900px){.hero{padding:56px 0 64px}}
.hero-top{display:grid;gap:20px;align-items:center}
@media (min-width:900px){.hero-top{grid-template-columns:1.25fr .75fr;gap:48px}}
.eyebrow{display:inline-block;font-size:.88rem;font-weight:700;color:var(--orange-d);letter-spacing:.02em;margin-bottom:12px}
.lead{font-size:1.15rem;color:var(--muted);max-width:46ch;margin:0}
.hero-art{display:none}
@media (min-width:900px){.hero-art{display:block}}
.hero-art svg{display:block;width:100%;max-width:420px;margin-left:auto}

.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.btns .btn{flex:1 1 180px}

.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:.9rem;color:var(--muted)}
.facts li{display:inline-flex;align-items:center;gap:7px}
.facts svg{flex:none;color:var(--navy)}

/* sections */
section{padding:56px 0}
@media (min-width:900px){section{padding:84px 0}}
.alt{background:#f7fafc}
.cream{background:var(--cream)}
.intro{color:var(--muted);max-width:62ch;margin-bottom:28px;font-size:1.05rem}
.kicker{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-d);margin-bottom:8px}
.grid{display:grid;gap:16px}
@media (min-width:700px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.card p{color:var(--muted)}
.card p:last-child{margin-bottom:0}
.card .more{font-weight:700;text-decoration:none}
.card .more:hover{text-decoration:underline}
.ico{display:inline-flex;width:46px;height:46px;border-radius:12px;background:var(--tint);color:var(--navy);align-items:center;justify-content:center;margin-bottom:14px}
.ico-warm{background:var(--sand);color:var(--orange-d)}
.num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;margin-bottom:12px}
.num-navy{background:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.chips li{background:#f7fafc;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.9rem;color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.src{font-size:.85rem;color:var(--muted)}
.split{display:grid;gap:32px}
@media (min-width:960px){.split{grid-template-columns:1fr 1fr;gap:56px}}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.checklist svg{flex:none;margin-top:3px}
.checklist strong{color:var(--navy)}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.areas a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;font-weight:600}
.areas a:hover{border-color:var(--navy)}

/* jobs */
.jobs-list{display:grid;gap:12px}
@media (min-width:700px){.jobs-list{grid-template-columns:1fr 1fr}}
.job{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;color:var(--ink)}
.job:hover{border-color:var(--navy)}
.job strong{display:block;color:var(--navy)}
.job span{display:block;color:var(--muted);font-size:.93rem}
.empty{background:#fff;border:1px dashed #a0aec0;border-radius:12px;padding:18px}
.empty p{margin:0}

/* band */
.band{background:var(--navy);color:#e2e8f0}
.band .wrap{display:grid;gap:20px;align-items:center}
@media (min-width:900px){.band .wrap{grid-template-columns:1.3fr 1fr}}
.band h2{color:#fff;margin-bottom:.3em}
.band p{margin:0}
.band .btns .btn{flex:0 1 auto}

/* footer */
.site-f{background:var(--navy2);color:#cbd5e0;padding:48px 0 28px;font-size:.95rem}
.site-f a{color:#fff;text-decoration:none}
.site-f a:hover{text-decoration:underline;color:#fff}
.site-f :focus-visible{outline-color:#fff}
.fcols{display:grid;gap:28px;grid-template-columns:1fr 1fr}
@media (min-width:860px){.fcols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.fcols h2{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li a{display:inline-block;padding:6px 0}
.fbrand{grid-column:1/-1}
@media (min-width:860px){.fbrand{grid-column:auto}}
.fbrand p{margin:0 0 6px}
.fname{color:#fff;font-weight:800;font-size:1.05rem}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:32px;padding-top:20px;font-size:.875rem}
.legal p{margin:0 0 8px}
.legal a{text-decoration:underline}

/* sticky mobile CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;background:#fff;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px -12px rgba(26,54,93,.35);transition:transform .2s,visibility .2s}
.sticky .btn{flex:1}
@media (min-width:760px){.sticky{display:none}}
.mt{margin-top:40px}
a[href^="tel:"]{white-space:nowrap}
/* workers-first rework */
.bizbar{background:var(--navy2);color:#e2e8f0;font-size:.92rem}
.bizbar .wrap{padding-top:6px;padding-bottom:6px}
.bizbar p{margin:0;text-align:center}
.bizbar a{color:#fff;font-weight:700;display:inline-block;padding:6px 2px}
.bizbar a:hover{color:#fbd38d}
.bizbar a:focus-visible{outline-color:#fff}
.hero-btns{margin-top:24px;max-width:460px}
.hero .small{font-size:.93rem;color:var(--muted);margin:14px 0 0}
.facts{gap:10px 24px;font-size:.98rem;color:var(--ink);font-weight:600;margin-top:28px}
.facts svg{color:var(--orange-d)}
p.cta-row{gap:20px}
/* mobile: one-line business strip, no header button (hero + sticky bar carry it), nowrap sticky */
@media (max-width:599px){.bizbar{font-size:.85rem}.bizbar .wrap{padding:2px 12px}.bizbar a{padding:8px 2px}.h-actions{display:none}.nav{gap:0 16px;font-size:.9rem}.sticky .btn{white-space:nowrap;padding:12px 10px;font-size:.98rem}}