/* =====================================================================
   services.html — recruitment and staffing services
   Page-only rules. Tokens come from styles.css; never redefine one here.
   ===================================================================== */

/* ---------- 1. Hero ----------------------------------------------- */
.svc-hero .lead{max-width:56ch}
.svc-hero__badge{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 var(--sp-4);padding:7px 14px 7px 10px;
  border-radius:var(--r-pill);border:1px solid var(--forest-200);background:var(--forest-50);
  font-size:13px;font-weight:600;color:var(--forest-700);line-height:1.45;
}
.svc-hero__badge svg{width:16px;height:16px;color:var(--forest-600);flex:none}
.svc-hero__badge a{color:var(--forest-700)}
@media (max-width:520px){
  .svc-hero__badge{align-items:flex-start}
  .svc-hero__badge svg{margin-top:2px}
}

.svc-hero__trust{
  display:flex;gap:10px;align-items:flex-start;margin:var(--sp-6) 0 0;
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;max-width:56ch;
}
.svc-hero__trust svg{width:18px;height:18px;color:var(--forest-500);flex:none;margin-top:2px}
.svc-hero__trust b{color:var(--ink-800)}

.svc-photo{position:relative}
.svc-photo img{
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);width:100%;
  aspect-ratio:4/3;object-fit:cover;object-position:50% 38%;
}
.svc-photo .float-chip{position:absolute}
.svc-photo__chip-1{left:-10px;top:22px}
.svc-photo__chip-2{right:-6px;bottom:24px}
@media (max-width:899.98px){
  .svc-photo__chip-1{left:0}
  .svc-photo__chip-2{right:0}
}
@media (max-width:520px){
  .svc-photo .float-chip{scale:.9}
  .svc-photo__chip-1{transform-origin:left top}
  .svc-photo__chip-2{transform-origin:right bottom;bottom:12px}
}

/* Quick facts strip under the hero copy */
.svc-hero__facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);
  margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px dashed var(--line-strong);
}
@media (min-width:640px){ .svc-hero__facts{grid-template-columns:repeat(4,minmax(0,1fr))} }
.svc-fact b{
  display:block;font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.1;
  color:var(--forest-700);letter-spacing:-.02em;
}
.svc-fact span{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px;line-height:1.45}

/* ---------- 2. Engagement models ---------------------------------- */
.model-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){ .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1160px){ .model-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

.model-card{display:flex;flex-direction:column;gap:var(--sp-4);height:100%;scroll-margin-top:calc(var(--header-h) + 28px)}
.model-card__head{display:flex;gap:var(--sp-3);align-items:flex-start}
.model-card__head h3{margin:0;font-size:var(--fs-h4)}
.model-card__who{font-size:var(--fs-xs);color:var(--text-muted);margin:3px 0 0;line-height:1.5}
.model-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.model-card__list li{display:flex;gap:9px;margin:0;font-size:var(--fs-sm);color:var(--ink-700);line-height:1.5}
.model-card__list svg{width:16px;height:16px;color:var(--forest-500);flex:none;margin-top:3px}
.model-card__fee{
  margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
  display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--text-muted);line-height:1.55;
}
.model-card__fee svg{width:16px;height:16px;color:var(--saffron-700);flex:none;margin-top:2px}
.model-card__fee b{color:var(--ink-800);font-weight:600}
.model-card .link-arrow{align-self:flex-start}
.model-note{
  margin-top:clamp(24px,3vw,36px);display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--saffron-200);background:var(--saffron-50);border-radius:var(--r-lg);
  padding:var(--sp-5);font-size:var(--fs-sm);color:var(--ink-700);line-height:1.65;
}
.model-note svg{width:19px;height:19px;color:var(--saffron-700);flex:none;margin-top:2px}

/* ---------- 3. Industries we hire for ----------------------------- */
.indus-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){ .indus-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .indus-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

.indus-card{
  display:flex;flex-direction:column;overflow:hidden;padding:0;height:100%;
  scroll-margin-top:calc(var(--header-h) + 28px);
}
.indus-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-100)}
.indus-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.indus-card:hover .indus-card__media img{transform:scale(1.04)}
.indus-card__hex{position:absolute;left:14px;bottom:-22px;filter:drop-shadow(0 6px 14px rgba(12,26,10,.22))}
.indus-card__body{padding:var(--sp-6) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.indus-card__body h3{margin:0;font-size:var(--fs-h4)}
.indus-card__body p{font-size:var(--fs-sm);color:var(--text-muted);margin:0;line-height:1.6}
.indus-card__roles{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
}
.indus-card__roles li{margin:0}
.indus-card__foot{
  margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;
}
.indus-card__count{font-size:var(--fs-xs);color:var(--text-subtle)}
.indus-card__count b{color:var(--forest-700)}

/* ---------- 4. How we work ---------------------------------------- */
.proc-cols{display:grid;gap:clamp(20px,3vw,48px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){ .proc-cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
.proc-cols .stepper__body p{margin-bottom:10px}
.proc-do{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.proc-do li{display:flex;gap:8px;margin:0;font-size:13px;line-height:1.5;color:var(--text-muted)}
.proc-do b{
  flex:none;min-width:38px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--saffron-800);padding-top:3px;
}
.proc-do li:last-child b{color:var(--forest-600)}
.proc-aside{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;
  margin-top:clamp(28px,3vw,44px);padding:var(--sp-5) clamp(20px,2.4vw,28px);
  border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-xs);
}
.proc-aside p{margin:0;font-size:var(--fs-sm);color:var(--text-muted);max-width:66ch;line-height:1.6}
.proc-aside b{color:var(--ink-800)}

/* ---------- 5. On every mandate ----------------------------------- */
.get-grid{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .get-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .get-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.get-grid .card{scroll-margin-top:calc(var(--header-h) + 28px)}

/* ---------- 6. Why WorkKar ---------------------------------------- */
.why-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){ .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .why-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.why-card{display:flex;flex-direction:column;gap:var(--sp-3);height:100%}
.why-card h3{margin:0;font-size:17px}
.why-card p{margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.62}
.why-card__num{
  font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--saffron-800);
  letter-spacing:.08em;
}

/* ---------- 7. Service level facts table -------------------------- */
.facts-wrap{
  border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;
  box-shadow:var(--sh-sm);overflow:hidden;
}
.facts-scroll{overflow-x:auto}
.facts{width:100%;border-collapse:collapse;min-width:640px;font-size:var(--fs-sm)}
.facts caption{
  text-align:left;padding:var(--sp-5) clamp(18px,2vw,24px);border-bottom:1px solid var(--line-soft);
  background:var(--surface-warm);font-family:var(--font-head);font-weight:600;color:var(--heading);font-size:15.5px;
}
.facts th,.facts td{padding:14px clamp(14px,1.6vw,20px);text-align:left;vertical-align:top;line-height:1.55}
.facts thead th{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);
  background:var(--ink-50);border-bottom:1px solid var(--line);white-space:nowrap;
}
.facts tbody tr+tr th,.facts tbody tr+tr td{border-top:1px solid var(--line-soft)}
.facts tbody th{font-weight:600;color:var(--heading);font-family:var(--font-head);width:26%}
.facts td{color:var(--ink-700)}
.facts td:last-child{color:var(--text-muted);font-size:13px}
.facts tbody tr:nth-child(even) th,.facts tbody tr:nth-child(even) td{background:var(--ink-50)}
.facts .yes{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--forest-700)}
.facts .yes svg{width:16px;height:16px;color:var(--forest-500);flex:none}
.facts .no{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--saffron-800)}
.facts .no svg{width:16px;height:16px;color:var(--saffron-700);flex:none}
.facts-foot{
  display:flex;gap:10px;align-items:flex-start;padding:var(--sp-5) clamp(18px,2vw,24px);
  border-top:1px solid var(--line-soft);background:var(--surface-warm);
  font-size:13px;color:var(--text-muted);line-height:1.6;
}
.facts-foot svg{width:17px;height:17px;color:var(--saffron-700);flex:none;margin-top:2px}
.facts-hint{margin:var(--sp-3) 0 0;font-size:var(--fs-xs);color:var(--text-subtle)}
@media (max-width:767.98px){ .facts-hint{display:block} }

/* Turnaround table: four columns, and the row header carries an example line */
.facts--tat{min-width:720px}
.facts--tat tbody th{width:28%}
.facts--tat td{white-space:normal}
.facts__eg{
  display:block;margin-top:5px;font-family:var(--font-body);font-weight:400;
  font-size:12px;line-height:1.45;color:var(--text-subtle);
}
.facts-wrap + .facts-wrap{margin-top:0}
.facts-foot b{color:var(--ink-800);font-weight:600}

/* ---------- 8. Commercials (the page's one dark band) ------------- */
.comm{display:grid;gap:clamp(24px,3vw,56px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:980px){ .comm{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} }
.comm__quote{font-size:var(--fs-lead);line-height:1.65;color:var(--text-on-dark);margin:0 0 var(--sp-5)}
.comm__quote b{color:#fff}
.comm-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.comm-row{
  display:flex;gap:var(--sp-4);align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  margin:0;padding:14px var(--sp-5);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);
}
.comm-row__name{font-family:var(--font-head);font-weight:600;font-size:15px;color:#fff}
.comm-row__fee{font-size:13.5px;color:var(--text-on-dark-muted);text-align:right}
.comm-note{
  margin-top:var(--sp-6);display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--line-dark);background:rgba(255,255,255,.05);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--text-on-dark-muted);line-height:1.6;
}
.comm-note svg{width:18px;height:18px;color:var(--saffron-300);flex:none;margin-top:2px}

/* ---------- 9. Sample case snapshots ------------------------------ */
.case-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){ .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .case-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.case-card{display:flex;flex-direction:column;gap:var(--sp-3);height:100%}
.case-card__tag{
  display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--saffron-800);margin:0;
}
.case-card h3{margin:0;font-size:17px;line-height:1.35}
.case-card__meta{font-size:13px;color:var(--text-muted);margin:0}
.case-card__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.case-card__steps li{display:flex;gap:9px;margin:0;font-size:13.5px;color:var(--ink-700);line-height:1.5}
.case-card__steps svg{width:15px;height:15px;color:var(--forest-500);flex:none;margin-top:3px}
.case-card__foot{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}

/* ---------- 10. Talk to us: desk card + requirement form ---------- */
.desk{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1024px){ .desk{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)} }

.desk-card{display:flex;flex-direction:column;gap:var(--sp-5)}
@media (min-width:1024px){ .desk-card{position:sticky;top:calc(var(--header-h) + 24px)} }
.desk-card__people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.desk-card__people li{display:flex;gap:var(--sp-3);align-items:center;margin:0}
.desk-card__name{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--heading);margin:0;line-height:1.3}
.desk-card__role{font-size:var(--fs-xs);color:var(--text-muted);margin:0 0 3px;line-height:1.3}
.desk-card__tel{font-size:14px;font-weight:600;color:var(--forest-700);text-decoration:none}
.desk-card__tel:hover{color:var(--saffron-700)}
.desk-card__rows{
  list-style:none;margin:0;padding:var(--sp-5) 0 0;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:12px;font-size:var(--fs-sm);
}
.desk-card__rows li{display:flex;gap:10px;align-items:flex-start;margin:0;line-height:1.6;color:var(--ink-700)}
.desk-card__rows svg{width:17px;height:17px;color:var(--saffron-700);flex:none;margin-top:3px}
.desk-card__rows address{font-style:normal}
.desk-card__actions{display:flex;flex-wrap:wrap;gap:10px}

.req-form .form-grid{margin-bottom:var(--sp-5)}
.req-form__foot{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;margin-top:var(--sp-5)}
.req-form__foot .fineprint{margin:0}
.stepper-input{display:flex;align-items:center;gap:8px}
.stepper-input .input{text-align:center;max-width:96px;padding-inline:6px}
.stepper-input .btn--icon{flex:none}

/* ---------- 11. FAQ ------------------------------------------------ */
.svc-faq{display:grid;gap:clamp(24px,3vw,56px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1024px){ .svc-faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} }
.svc-faq__aside{position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:1023.98px){ .svc-faq__aside{position:static} }
.svc-faq__card{margin-top:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-3)}
.svc-faq__card p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-muted)}
.svc-faq__card p.svc-faq__card-title{
  display:flex;gap:9px;align-items:center;font-family:var(--font-head);font-weight:600;
  font-size:15px;line-height:1.35;color:var(--heading);
}
.svc-faq__card-title svg{width:18px;height:18px;color:var(--forest-600);flex:none}
.svc-faq__card .link-arrow{align-self:flex-start}

/* ---------- 12. Ribbon host sections ------------------------------- */
/* A .ribbon--divider sits in the flow at the end of a section, so that
   section drops its bottom padding and the wave becomes the separator. */
.section--svc-ribbon{padding-bottom:0}

/* ---------- 13. CTA band art --------------------------------------
   The ridges stretch horizontally (preserveAspectRatio="none"), so nothing
   with a recognisable shape may live in them. The climbers sit in their own
   uniformly scaled SVG, parked exactly on the ridge's flat crest. --ridge-h
   and --crest are already set on .cta-band in styles.css, so the two line up
   from 320px to 1920px and there is no rectangular seam. */
.cta-band__ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--ridge-h);z-index:-1;display:block}
.cta-band__figs{
  position:absolute;left:50%;translate:-50% 0;
  bottom:calc(var(--ridge-h) * var(--crest));
  width:clamp(158px,23vw,300px);height:auto;z-index:-1;display:block;
}