/* ==========================================================================
   Peak Hire Services — Recruitment Solutions
   The operational core of the site. Numerals are used here deliberately: the
   established rule reserves them for Recruitment Solutions and the Recruitment
   Process, so the seven core services carry 01-07 as the page's spine. Each
   service block then varies its internal structure so seven numbered blocks
   never read as seven identical cards.
   ========================================================================== */

/* --- Hero: tighter and more operational than the About hero ------------- */
.sol-hero{
  background:var(--midnight); color:var(--fg-dark); position:relative; overflow:hidden;
  padding-block:calc(var(--header-h) + clamp(48px,6vw,96px)) clamp(52px,5.5vw,88px);
}
.sol-hero__inner{ position:relative; z-index:1; max-width:880px; }
.sol-hero__title{ color:#F3F5F8; margin-top:var(--s5); max-width:20ch; }
.sol-hero__lead{ margin-top:var(--s5); max-width:62ch; color:#9FADBB; font-size:var(--t-lead); line-height:1.62; }
.sol-hero__actions{ margin-top:var(--s6); }

/* --- 1 · Recruitment model: one segmented proportion bar ---------------- */
.tiers__bar{
  display:grid; grid-template-columns:5fr 3fr 2fr; gap:3px;
  margin-top:var(--s7); height:8px;
}
.tiers__seg{ background:var(--gold); border-radius:1px; }
.tiers__seg:nth-child(2){ background:var(--gold-deep); }
.tiers__seg:nth-child(3){ background:var(--ink-navy); }
.tiers{ display:grid; grid-template-columns:5fr 3fr 2fr; gap:3px; margin-top:var(--s5); }
@media (max-width:860px){
  .tiers,.tiers__bar{ grid-template-columns:minmax(0,1fr); }
  .tiers__bar{ height:auto; gap:0; }
  .tiers__seg{ height:5px; margin-bottom:2px; }
  .tiers__tier{ padding-top:var(--s5); border-top:1px solid var(--rule); }
}
.tiers__tier{ padding-right:var(--s5); }
.tiers__name{
  font-family:var(--serif); font-weight:400; font-size:clamp(21px,1.05rem + .9vw,28px);
  line-height:1.1; letter-spacing:-.02em; color:var(--fg);
}
.tiers__desc{ margin-top:var(--s3); font-size:14.5px; color:var(--fg-body); line-height:1.55; }
.tiers__list{ margin-top:var(--s4); display:flex; flex-direction:column; gap:7px; }
.tiers__list li{ display:flex; gap:9px; font-size:13.5px; color:var(--fg-soft); line-height:1.45; }

/* --- Service blocks: shared frame, varied interiors --------------------- */
.svc{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,44px); }
@media (max-width:700px){ .svc{ grid-template-columns:minmax(0,1fr); gap:var(--s4); } }
.svc__num{ font-size:clamp(26px,1.2rem + 1.2vw,38px); line-height:1; padding-top:4px; }
.svc__title{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,1.1rem + 1.35vw,36px);
  line-height:1.1; letter-spacing:-.022em; color:var(--fg); }
.svc__lead{ margin-top:var(--s4); font-size:16px; line-height:1.66; color:var(--fg-body); max-width:60ch; }
.on-dark .svc__title{ color:var(--fg-dark); }
.on-dark .svc__lead{ color:var(--fg-dark-soft); }
/* list items inherit body charcoal, which is unreadable on midnight */
.on-dark .svc__cols li,
.on-dark .tiers__list li,
.on-dark .opmodel__items li{ color:var(--fg-dark-soft); }

/* 01 · inline step flow */
.flow{ margin-top:var(--s6); display:flex; flex-wrap:wrap; align-items:center; gap:10px var(--s3); }
.flow li{ display:flex; align-items:center; gap:10px var(--s3);
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--fg); }
.flow li::after{ content:""; width:14px; height:1px; background:var(--gold); display:block; }
.flow li:last-child::after{ display:none; }

/* 02 · campaign operating model */
.opmodel{ margin-top:var(--s6); border:1px solid var(--rule); border-top:2px solid var(--gold);
  background:var(--white); border-radius:var(--radius); padding:clamp(20px,2.6vw,32px); }
.opmodel__row + .opmodel__row{ margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--rule); }
.opmodel__label{ margin-bottom:var(--s4); }
.opmodel__items{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3) var(--s5); }
@media (max-width:760px){ .opmodel__items{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .opmodel__items{ grid-template-columns:minmax(0,1fr); } }
.opmodel__items li{ display:flex; gap:10px; font-size:14.5px; color:var(--fg-body); line-height:1.5; }

/* 03/05 · two-column supporting lists */
.svc__cols{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px var(--s6); }
@media (max-width:560px){ .svc__cols{ grid-template-columns:minmax(0,1fr); } }
.svc__cols li{ display:flex; gap:10px; font-size:14.5px; color:var(--fg-body); line-height:1.5; }
.svc__link{ margin-top:var(--s6); }

/* 05 · talent mapping visual — restrained, three clusters, blue links */
.mapping{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,64px); align-items:center; }
@media (max-width:900px){ .mapping{ grid-template-columns:minmax(0,1fr); gap:var(--s6); } }
.mapping__viz{ width:100%; max-width:400px; justify-self:center; }
.mapping__viz svg{ width:100%; height:auto; }
.viz__link{ stroke:var(--blue); stroke-width:.7; fill:none; opacity:.32; }
.viz__node{ fill:var(--gold-deep); }
.viz__node--soft{ fill:none; stroke:var(--gold-deep); stroke-width:1; opacity:.55; }
.viz__core{ fill:none; stroke:var(--ink-navy); stroke-width:1.2; }
.viz__label{ font-family:var(--sans); font-size:8.5px; font-weight:600; letter-spacing:.12em; fill:var(--slate); }

/* 06 · assessment criteria above a submission gate */
.gate{ margin-top:var(--s6); }
.gate__criteria{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5) var(--s6); }
@media (max-width:760px){ .gate__criteria{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:440px){ .gate__criteria{ grid-template-columns:minmax(0,1fr); } }
.gate__item h3{ font-size:15px; font-weight:600; color:var(--fg); }
.gate__item p{ margin-top:6px; font-size:14px; color:var(--fg-body); line-height:1.5; }
.gate__line{
  margin-top:var(--s7); padding-top:var(--s4); border-top:2px solid var(--gold);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:baseline; justify-content:space-between;
}
.gate__line p{ font-size:15px; color:var(--fg-body); max-width:52ch; }

/* 09 · reporting fields */
.fields{ margin-top:var(--s7); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--rule); }
@media (max-width:900px){ .fields{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .fields{ grid-template-columns:minmax(0,1fr); } }
.fields__item{ padding:var(--s5) var(--s4) var(--s5) 0; border-bottom:1px solid var(--rule); }
.fields__item h3{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.fields__item p{ margin-top:9px; font-size:14.5px; color:var(--fg-body); line-height:1.5; }

/* 10 · delivery modes — name + when to use it */
.modes{ margin-top:var(--s7); border-top:1px solid var(--rule); }
.modes__row{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:var(--s3) clamp(24px,4vw,56px); padding-block:var(--s4);
  border-bottom:1px solid var(--rule); align-items:baseline; }
@media (max-width:700px){ .modes__row{ grid-template-columns:minmax(0,1fr); gap:6px; } }
.modes__name{ font-size:15.5px; font-weight:600; color:var(--fg); letter-spacing:-.006em; }
.modes__when{ font-size:14.5px; color:var(--fg-body); line-height:1.55; }