/* Sitewide layout + legibility pass (Sep 25 2026).
   Loaded AFTER each page's inline <style>, so equal-specificity rules here win. */

/* ---- Wider content: 1120 -> 1280 (1216px usable) ---- */
.container,
header .inner,
.hero .inner,
.trust .inner,
footer .base{max-width:1280px}

/* ---- Logo: locked B1 files (design-system CLAUDE.md). Not the -tight crop: it clips STAFFING when the SVG falls back from Archivo, which it always does inside an img ---- */
header .brand{display:inline-flex;align-items:center;color:var(--navy)}
header .brand img{height:54px;width:auto;display:block}
header .brand:hover{color:var(--navy)}
footer .brand{display:inline-flex;color:#fff}
footer .brand img{height:40px;width:auto;display:block}
@media (max-width:560px){header .brand img{height:40px}}

/* ---- Nav ---- */
header nav{font-size:17px}
header nav .links{gap:28px}
header nav .links a[aria-current="page"]{color:var(--orange)}

/* ---- Nothing under 13px ---- */
.hero .micro{font-size:13.5px}
/* one line at desktop widths (fits ~1250px+ viewports); wraps when the window narrows */
.trust .inner{gap:8px}
.trust .pill{font-size:12px;padding:6px 11px;letter-spacing:.04em;white-space:nowrap}
.trust .est{font-size:12.5px;opacity:.8}
.quote label{font-size:12px}
.quote p{font-size:14.5px}
.quote .fine{font-size:13px}
.stats dt{font-size:12.5px}
.stats dd small{font-size:13.5px}
.map-cap{font-size:12.5px}
.region{font-size:13.5px}
footer h5{font-size:12.5px}
footer .meta{font-size:14px}
footer ul{font-size:15px}
footer .base{font-size:13px}
.svc p{font-size:15px}
.check .s{font-size:14.5px}

/* ---- Tighter vertical rhythm ---- */
section{padding:72px 0}
.hero .inner{padding-top:64px;padding-bottom:64px}

/* ---- Why us: stats panel fills its column instead of floating ---- */
.why{align-items:stretch}
.why .stats{align-content:stretch}
.why .stats .stat{display:flex;flex-direction:column;justify-content:center}
.stats dd{font-size:34px}

/* ---- Industry cards (home) ---- */
.inds-home{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ind-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:28px;color:var(--fg-1);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}
a.ind-card:hover{border-color:var(--orange);box-shadow:0 12px 32px rgba(27,42,74,.10);color:var(--fg-1)}
.ind-card .ic{width:48px;height:48px;border-radius:10px;background:var(--orange-soft);color:var(--orange);display:inline-flex;align-items:center;justify-content:center}
.ind-card h3{margin:18px 0 8px;font-size:22px;font-weight:800;letter-spacing:-.01em}
.ind-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--fg-2)}
.ind-card ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ind-card li{font-size:13.5px;font-weight:600;background:var(--gray-50);border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:6px 12px;color:var(--navy)}
.ind-card .go{margin-top:auto;padding-top:22px;font-weight:700;font-size:15.5px;color:var(--navy)}
a.ind-card:hover .go{color:var(--orange)}

/* ---- Our people: points become cards, no floating button column ---- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.people .ctas{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.people-points{display:grid;gap:12px}
.people-points .pt{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:18px 20px}
.people-points svg{flex:0 0 auto;color:var(--orange);margin-top:2px}
.people-points .k{font-weight:700;font-size:16px;color:#fff}
.people-points .s{margin-top:4px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72)}

/* ---- Industry pages ---- */
.roles{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.role{background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:24px}
.role .ic{width:42px;height:42px;border-radius:10px;background:var(--orange-soft);color:var(--orange);display:inline-flex;align-items:center;justify-content:center}
.role h3{margin:16px 0 6px;font-size:18.5px;font-weight:800;letter-spacing:-.01em}
.role p{margin:0;font-size:15px;line-height:1.55;color:var(--fg-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.reqs{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.reqs li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--hairline);border-radius:10px;padding:16px 18px;font-size:15.5px;line-height:1.45}
.reqs li b{display:block;font-size:16px}
.reqs li span{display:block;margin-top:3px;font-size:14.5px;color:var(--fg-2)}
.reqs svg{flex:0 0 auto;color:var(--good);margin-top:3px}
.steps{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:26px 24px}
.step::before{counter-increment:step;content:counter(step);display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:16px;align-items:center;justify-content:center}
.step h3{margin:16px 0 6px;font-size:18.5px;font-weight:800;color:#fff}
.step p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.75)}
.crumb{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:14px}
.crumb a{color:rgba(255,255,255,.8)}
.crumb a:hover{color:var(--orange)}

@media (max-width:1040px){
  .inds-home,.roles,.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .people,.split{grid-template-columns:1fr;gap:28px}
  section{padding:56px 0}
}
@media (max-width:640px){
  .inds-home,.roles,.steps{grid-template-columns:1fr}
  .people > *,.split > *{min-width:0}
  .people .ctas .btn{width:100%}
}

/* ---- hire-staff / find-work micro text ---- */
.panel h3,.proof .ttl,.proof .line .lk,.af-field label{font-size:12.5px}
.panel .stat dt,.hero-stats dt,.badge-ok{font-size:12px}
.hero-stats dd small,.pay .rate small{font-size:13px}

/* ---- phone tightening ---- */
@media (max-width:640px){
  h2{font-size:30px}
  .hero h1{font-size:36px}
  section{padding:48px 0}
  .stats{padding:16px;gap:10px}
  .stats .stat{padding:14px}
  .stats dd{font-size:26px}
  .trust .inner{gap:8px}
  .trust .est{margin-left:0}
  .ind-card,.role{padding:22px}
}

/* ---- Honeypot anti-spam field: hidden from people, visible to bots ---- */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---- Nav fits between 1040 and 1280 (menu links show from 1040 up) ---- */
@media (max-width:1279px){
  header nav{font-size:15px;gap:18px;margin-left:20px}
  header nav .links{gap:18px}
  header .brand img{height:46px}
  header .btn{padding:12px 18px!important;font-size:15px!important}
}
@media (max-width:1199px){header nav .call{display:none}}