/*
 * Salesforce Staffing page (page-staffing.php) design system — copied from
 * radical-staffing.html's two <style> blocks. Shared #r1fh / .r1-nav-menu /
 * .r1-drop* / .r1-toggle / .r1-burger / .r1-backdrop / .r1-pillnav base
 * rules live in assets/css/base.css and are not duplicated here; only the
 * page's own background override for .r1-pillnav::before is kept below
 * (this page uses a fully-opaque pill instead of base.css's translucent
 * rgba(255,255,255,.8)).
 */
:root{--dark:#10131a;--dark2:#172033;--green:#183c28;--green2:#133020;--text:#0f172a;--muted:#64748b;--line:#e2e8f0}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff;color:var(--text);line-height:1.6}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,calc(100% - 48px));margin:auto}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8fafc 0%,#fff 48%,#ecfdf5 100%);color:#020617}
.blob{position:absolute;border-radius:999px;filter:blur(60px);opacity:.6}
.blob.one{width:320px;height:320px;background:#a7f3d0;left:-96px;top:96px}
.blob.two{width:384px;height:384px;background:#bae6fd;right:-96px;top:80px}
/* .nav / .brand are shared in base.css now — .logo/.brand strong/.brand
   small are unused here (this page renders the SVG logo via .brand-logo,
   not the original text-badge logo variant), dropped rather than moved. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:15px 25px;font-weight:800;border:1px solid transparent;transition:.25s;cursor:pointer}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:hover{background:var(--green2)}
.btn.ghost{border-color:#cbd5e1;background:#fff;color:#0f172a}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;padding:55px 0 100px;align-items:center}
.eyebrow{display:inline-block;border:1px solid #a7f3d0;background:#ecfdf5;padding:9px 16px;border-radius:999px;color:#183c28;font-weight:700;font-size:1.4rem}
.hero-grid .eyebrow{font-size:1rem}
.hero h1{font-size:clamp(3rem,7vw,5.2rem);line-height:1.04;margin:24px 0 20px;font-weight:900;letter-spacing:-.04em}
.hero p.lead{font-size:1.25rem;color:#020617;max-width:680px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.chip{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.1);padding:8px 14px;border-radius:999px;color:rgba(255,255,255,.82);font-weight:700;font-size:.9rem}
.role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{border-radius:30px;padding:24px;background:#fff;border:1px solid var(--line);box-shadow:0 15px 40px rgba(15,23,42,.08)}
.role-card{background:#fff;border-color:var(--line);color:#0f172a;animation:rise .8s both}
.role-card:nth-child(2){transform:translateY(28px)}
.icon{width:48px;height:48px;border-radius:16px;background:var(--green);color:#fff;display:grid;place-items:center}
.icon svg{width:25px;height:25px}
.role-card h3,.benefit h3{margin:18px 0 8px;font-size:1.35rem}
.role-card p{color:var(--muted);font-size:.93rem}
.section{padding:80px 0}
.section.alt{background:#f8fafc}
.section.dark{background:var(--dark);color:#fff}
.section.green{background:var(--green);color:#fff}
.section.green p{color:rgba(255,255,255,.85)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.kicker{text-transform:uppercase;letter-spacing:.25em;font-weight:900;font-size:.82rem;color:#183c28}
.dark .kicker{color:#6ee7b7}
.section h2{font-size:clamp(2.35rem,5vw,4rem);line-height:1.08;letter-spacing:-.035em;margin:14px 0 20px}
.section p{color:#020617;font-size:1.08rem}
.dark p{color:rgba(255,255,255,.65)}
.workflow{display:grid;gap:16px}
.workflow-item{display:grid;grid-template-columns:72px 1fr;gap:16px;background:#f8fafc;border:1px solid var(--line);border-radius:26px;padding:18px}
.step{width:56px;height:56px;border-radius:18px;background:var(--dark);color:#6ee7b7;display:grid;place-items:center;font-weight:900}
.workflow-item h3{margin:0;font-size:1.25rem}
.workflow-item p{margin:6px 0 0;font-size:1rem}
.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
.benefit{transition:.25s}
.benefit:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(15,23,42,.12)}
.benefit .icon{background:#d1fae5;color:#183c28}
.benefit p{font-size:1rem;margin-bottom:0}
.dark-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:30px;padding:30px}
.list{display:grid;gap:16px;margin-top:20px}
.list-item{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.76)}
.check{color:#6ee7b7;font-weight:900}
.cta{text-align:center;max-width:860px;margin:auto}
.cta p{color:rgba(16,19,26,.75);font-weight:600}
.fade{animation:rise .7s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr}
  .role-card:nth-child(2){transform:none}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .section-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:620px){
  .container{width:min(100% - 28px,1180px)}
  .nav .btn{padding:11px 16px}
  .brand small{display:none}
  .hero-grid{padding-top:30px}
  .role-grid,.benefit-grid{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .actions .btn{width:100%}
  .workflow-item{grid-template-columns:1fr}
  .section{padding:64px 0}
  .section-head .btn{width:100%}
}

/* ===== Site header (pill nav over hero) =====
   .site-header / .site-header>.container / .brand now live in base.css. */
.site-header .btn{border-radius:12px;padding:11px 20px}
.btn-emerald{background:#183c28;color:#fff}
.btn-emerald:hover{background:#133020}
.hero .hero-grid{padding-top:118px}
.text-slate-600{color:#020617 !important}
.text-sm{font-size:1rem !important}

/* ===== Page-specific .r1-pillnav override =====
 * base.css's shared .r1-pillnav::before uses a translucent
 * rgba(255,255,255,.8) background; this page's original pill nav
 * (quick-implementations-style) used a fully opaque background. */
.r1-pillnav::before{background:rgba(255,255,255,1)}