/* ============================================================
   ALL SERVICES (index hub) — parent service + sub-service layout
   builds on system.css + home.css + work.css (hero) + case.css
   ============================================================ */

/* hero variation of the work statement */
.wk-statement--svc .wks-title { max-width: 17ch; }
/* mirror the services hero horizontally so it differs from the Work hero */
.wk-statement--svc .wks-main { grid-template-columns: 48% 52%; }
.wk-statement--svc .wks-head { grid-column: 2; padding-left: clamp(32px,4vw,72px); }
.wk-statement--svc .wks-vline { left: 48%; }
.wk-statement--svc .wks-band { grid-template-columns: 48% 52%; }
.wk-statement--svc .wks-stats { grid-column: 1; }
.wk-statement--svc .wks-logos { grid-column: 2; }
@media (max-width: 760px){
  .wk-statement--svc .wks-main { grid-template-columns: 1fr; }
  .wk-statement--svc .wks-band { grid-template-columns: 1fr; }
  .wk-statement--svc .wks-head { grid-column: 1; text-align: left; align-items: flex-start; }
  .wk-statement--svc .wks-stats, .wk-statement--svc .wks-logos { grid-column: 1; }
  /* keep the three stats side-by-side on mobile */
  .wk-statement--svc .wks-stats { flex-wrap: nowrap; gap: clamp(14px,4vw,28px); }
  .wk-statement--svc .wks-stat { flex: 1 1 0; min-width: 0; }
  .wk-statement--svc .wks-stat .n { font-size: clamp(24px,7vw,40px); }
  /* logo marquee spans full window width on mobile */
  .wk-statement--svc .wks-logos { padding-left: 0; padding-right: 0; }
  .wk-statement--svc .wks-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
}
/* hero scrim starts light, JS darkens it on scroll */
.wk-statement--svc .wks-scrim { opacity: 0.25; background: var(--ink); }

/* parent service block */
.psvc-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px,5vw,90px); align-items: start; }
.psvc-idx { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); }
.psvc-flag { margin-left: 12px; vertical-align: middle; }
.psvc-name { font-family: var(--sans); font-weight: 600; font-stretch: 80%; font-size: clamp(42px,7vw,104px);
  line-height: 0.92; letter-spacing: -0.03em; margin: clamp(16px,2vw,26px) 0 0; }
.psvc-lede { font-size: clamp(16px,1.3vw,20px); line-height: 1.45; color: rgba(255,255,255,.74); max-width: 38ch;
  margin-top: var(--s5); text-wrap: pretty; }
.psvc-head .btn { margin-top: var(--s6); }
.psvc-head { position: sticky; top: clamp(96px,12vh,128px); align-self: start; }

/* sub-services — bleed hairline grid */
.psvc-subs { border-top: 1px solid var(--line-d); border-left: 1px solid var(--line-d);
  display: grid; grid-template-columns: 1fr 1fr; }
.psvc-sub { display: flex; flex-direction: column; gap: 9px; min-height: clamp(120px,11vw,150px);
  padding: clamp(20px,2vw,30px); border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
  text-decoration: none; transition: background .2s; }
.psvc-sub:hover { background: var(--paper); }
.psvc-sub:hover .st { color: var(--ink); }
.psvc-sub:hover .sd { color: rgba(16,18,22,.62); }
.psvc-sub .sn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--coral); }
.psvc-sub .st { font-weight: 600; font-size: clamp(17px,1.45vw,22px); letter-spacing: -0.012em; line-height: 1.05;
  color: var(--paper); }
.psvc-sub .sd { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* coral ground variant (black on red) */
.psvc.s--coral .psvc-idx, .psvc.s--coral .psvc-name { color: var(--ink); }
.psvc.s--coral .psvc-lede { color: rgba(16,18,22,.78); }
.psvc.s--coral .psvc-subs { border-color: rgba(16,18,22,.28); }
.psvc.s--coral .psvc-sub { border-color: rgba(16,18,22,.28); }
.psvc.s--coral .psvc-sub:hover { background: var(--paper); }
.psvc.s--coral .psvc-sub:hover .st { color: var(--ink); }
.psvc.s--coral .psvc-sub:hover .sd { color: rgba(16,18,22,.62); }
.psvc.s--coral .psvc-sub .sn { color: var(--ink); }
.psvc.s--coral .psvc-sub .st { color: var(--ink); }
.psvc.s--coral .psvc-sub .sd { color: rgba(16,18,22,.6); }

@media (max-width: 860px){ .psvc-grid { grid-template-columns: 1fr; gap: var(--s6); } .psvc-head { position: static; } }
@media (max-width: 520px){ .psvc-subs { grid-template-columns: 1fr; } }

/* sub-service icons */
.psvc-sub .psvc-ico { display: block; margin-bottom: 14px; }
.psvc-sub .psvc-ico svg { width: 24px; height: 24px; display: block; overflow: visible; }