/* Services hub v2 (2026-11-11): Flow clay graphics, results band, coloured audience lanes,
   step tabs and a "where to start" picker. Markup from design/build-services-hub.py.
   Uses the page tokens (--ink-*, --green-*, --slate-*, --body, --display, --ease). Prefix sh2-. */

/* ---------- hero visual: Flow pedestals + three lane links ---------- */
.sh2-hv{max-width:560px}
.sh2-hero-fig{margin:0;border-radius:28px;overflow:hidden;background:#EEF8E8;border:1px solid var(--slate-200);
  box-shadow:0 40px 80px -48px rgba(22,28,34,.45),0 2px 0 rgba(255,255,255,.8) inset;aspect-ratio:1200/896}
.sh2-hero-fig img{display:block;width:100%;height:100%;object-fit:cover}
.sh2-hlinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:-34px;padding:0 8px;position:relative;z-index:3}
.sh2-hl{display:flex;align-items:center;gap:9px;padding:10px;border-radius:16px;background:#fff;border:1px solid var(--slate-200);
  color:var(--ink-900);text-decoration:none;box-shadow:0 14px 30px -20px rgba(22,28,34,.45);
  transition:transform .25s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease)}
.sh2-hl:hover{transform:translateY(-3px);border-color:var(--green-600);box-shadow:0 20px 34px -20px rgba(22,28,34,.5)}
.sh2-hl:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
.sh2-hl-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--green-500);color:var(--ink-800)}
.sh2-hl-ic svg{width:17px;height:17px}
.sh2-hl b{display:block;font:600 14px/1.2 var(--body);white-space:nowrap}
.sh2-hl small{display:block;margin-top:2px;font:500 12px/1.2 var(--body);color:var(--slate-500)}
.sh2-chip{left:auto;right:-18px;top:22px;bottom:auto}

/* ---------- results band sits right under the hero ---------- */
.sh2-sx{margin-top:0}

/* ---------- audience lanes ---------- */
.sh2-lane{padding:112px 0}
.sh2-light{background:var(--white)}
.sh2-mint{background:linear-gradient(180deg,#F1F9EB 0%,#F7FBF4 100%);border-top:1px solid #E1EFD7;border-bottom:1px solid #E1EFD7}
.sh2-dark{background:var(--ink-900);color:#E8EDF1}

.sh2-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;align-items:center;margin-bottom:56px}
.sh2-copy h2{font:600 clamp(32px,3.4vw,46px)/1.08 var(--display);letter-spacing:-.025em;color:var(--ink-900);margin:18px 0 16px;max-width:16ch}
.sh2-dark .sh2-copy h2{color:#fff}
.sh2-lead{font:400 18px/1.6 var(--body);color:var(--ink-600);max-width:48ch;margin:0}
.sh2-dark .sh2-lead{color:#B9C4CE}
.sh2-dark .tag{background:rgba(116,209,66,.14);color:var(--green-500)}
.sh2-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.sh2-points li{display:flex;align-items:center;gap:10px;font:500 15px/1.4 var(--body);color:var(--ink-700)}
.sh2-dark .sh2-points li{color:#D5DDE4}
.sh2-points svg{flex:none;width:20px;height:20px;padding:4px;border-radius:999px;background:var(--green-500);color:var(--ink-800)}
.sh2-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px}
.sh2-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--green-500);color:var(--ink-900);
  font:600 15px/1 var(--body);text-decoration:none;box-shadow:0 12px 24px -14px rgba(53,115,24,.7);transition:background-color .2s var(--ease),transform .2s var(--ease)}
.sh2-btn svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.sh2-btn:hover{background:var(--green-600);transform:translateY(-1px)}
.sh2-btn:hover svg{transform:translateX(3px)}
.sh2-btn:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
.sh2-dark .sh2-btn:focus-visible{outline-color:var(--green-500)}
.sh2-count{font:500 15px/1 var(--body);color:var(--slate-500)}
.sh2-count b{font:700 22px/1 var(--display);color:var(--ink-900);margin-right:4px}
.sh2-dark .sh2-count{color:#9AA7B3}
.sh2-dark .sh2-count b{color:#fff}

.sh2-fig{margin:0;border-radius:28px;overflow:hidden;background:#EEF8E8;aspect-ratio:1200/896;border:1px solid #DCEBD2;
  box-shadow:0 36px 70px -44px rgba(22,28,34,.4)}
.sh2-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sh2-lane:hover .sh2-fig img{transform:scale(1.02)}
.sh2-dark .sh2-fig{border-color:rgba(255,255,255,.08);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}

/* service cards */
.sh2-cards{display:grid;gap:16px}
.sh2-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sh2-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sh2-card{position:relative;display:flex;flex-direction:column;padding:24px;border-radius:22px;background:#fff;border:1px solid var(--slate-200);
  transition:transform .25s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease)}
.sh2-card:hover{transform:translateY(-4px);border-color:var(--green-600);box-shadow:0 26px 44px -30px rgba(22,28,34,.45)}
.sh2-card:has(.sh2-go:focus-visible){outline:2px solid var(--green-700);outline-offset:3px}
.sh2-mint .sh2-card{border-color:#DCEBD2}
.sh2-dark .sh2-card{background:#1D252E;border-color:rgba(255,255,255,.08)}
.sh2-dark .sh2-card:hover{border-color:var(--green-500);box-shadow:0 26px 44px -26px rgba(0,0,0,.8)}
.sh2-dark .sh2-card:has(.sh2-go:focus-visible){outline-color:var(--green-500)}
.sh2-card-top{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.sh2-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--green-50);color:var(--green-700);transition:background-color .2s var(--ease),color .2s var(--ease)}
.sh2-ic svg{width:22px;height:22px}
.sh2-card:hover .sh2-ic{background:var(--green-500);color:var(--ink-800)}
.sh2-dark .sh2-ic{background:rgba(116,209,66,.14);color:var(--green-500)}
.sh2-n{margin-left:auto;font:600 13px/1 var(--display);letter-spacing:.04em;color:var(--slate-400)}
.sh2-dark .sh2-n{color:#66737F}
.sh2-badge{padding:4px 10px;border-radius:999px;background:var(--green-500);color:var(--ink-900);font:600 12px/16px var(--body)}
.sh2-card h3{font:600 19px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink-900);margin:0 0 8px}
.sh2-dark .sh2-card h3{color:#fff}
.sh2-card p{font:400 15px/1.55 var(--body);color:var(--slate-500);margin:0}
.sh2-dark .sh2-card p{color:#A9B5C0}
.sh2-subs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0}
.sh2-subs li{padding:4px 9px;border-radius:999px;background:var(--slate-50);border:1px solid var(--slate-200);font:500 12px/16px var(--body);color:var(--ink-700)}
.sh2-subs .sh2-more{background:none;border-style:dashed;color:var(--slate-500)}
.sh2-card p.sh2-go-row{margin-top:auto;padding-top:22px}
.sh2-go{display:inline-flex;align-items:center;gap:6px;font:600 14px/1.3 var(--body);color:var(--green-700);text-decoration:none}
.sh2-go svg{flex:none;width:16px;height:16px;transition:transform .2s var(--ease)}
.sh2-card:hover .sh2-go svg{transform:translateX(3px)}
.sh2-go::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}   /* whole card clicks through */
.sh2-go:focus-visible{outline:none}
.sh2-ask{color:var(--ink-700)}
.sh2-dark .sh2-go{color:var(--green-500)}

/* ---------- steps (deep green, .px from service-extras.css) ---------- */
.sh2-px .sec-head{max-width:640px}

/* ---------- where to start ---------- */
.sh2-picker{padding:112px 0;background:var(--white)}
.sh2-picker-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px;align-items:center}
.sh2-fig-sm{margin-bottom:28px}
.sh2-picker h2{font:600 clamp(30px,3vw,42px)/1.1 var(--display);letter-spacing:-.025em;color:var(--ink-900);margin:0 0 12px}
.sh2-picker .sh2-lead{margin-bottom:26px}
.sh2-picks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sh2-pick{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:20px 22px;border-radius:18px;
  background:var(--slate-50);border:1px solid var(--slate-200);text-decoration:none;color:var(--ink-900);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .25s var(--ease)}
.sh2-pick:hover{background:#fff;border-color:var(--green-600);transform:translateX(4px)}
.sh2-pick:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
.sh2-pick-who{justify-self:start;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--slate-200);font:600 12px/16px var(--body);color:var(--slate-500);white-space:nowrap}
.sh2-pick-q{font:500 16px/1.4 var(--body);color:var(--ink-700)}
.sh2-pick-a{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.3 var(--body);color:var(--green-700);text-align:right}
.sh2-pick-a svg{flex:none;width:16px;height:16px;transition:transform .2s var(--ease)}
.sh2-pick:hover .sh2-pick-a svg{transform:translateX(3px)}

/* ---------- responsive ---------- */
@media (max-width:1180px) and (min-width:601px){
  .sh2-hl-ic{display:none}
  .sh2-hl{padding:10px 12px;justify-content:center;text-align:center}
}
@media (max-width:1180px){
  .sh2-c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1020px){
  .sh2-hv{max-width:600px;justify-self:start;margin-top:12px}
  .sh2-chip{right:-8px}
  .sh2-head{grid-template-columns:minmax(0,1fr);gap:36px}
  .sh2-fig{max-width:640px}
  .sh2-c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh2-picker-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .sh2-picker-side{max-width:560px}
  .sh2-fig-sm{max-width:440px}
}
@media (max-width:720px){
  .sh2-lane,.sh2-picker{padding:72px 0}
  .sh2-head{margin-bottom:36px}
  .sh2-lead{font-size:17px}
  .sh2-c4,.sh2-c3{grid-template-columns:minmax(0,1fr);gap:12px}
  .sh2-card{padding:20px}
  .sh2-card-top{margin-bottom:14px}
  .sh2-pick{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 18px}
  .sh2-pick-a{text-align:left}
}
@media (max-width:600px){
  .sh2-hlinks{grid-template-columns:minmax(0,1fr);margin-top:12px;padding:0}
  .sh2-chip{right:8px;top:12px}
  .sh2-hero-fig,.sh2-fig{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .sh2-hl,.sh2-card,.sh2-pick,.sh2-btn,.sh2-fig img,.sh2-go svg,.sh2-pick-a svg,.sh2-btn svg{transition:none}
  .sh2-card:hover,.sh2-hl:hover,.sh2-pick:hover,.sh2-btn:hover{transform:none}
  .sh2-lane:hover .sh2-fig img{transform:none}
}

/* service pictograms (service-icons.css) in the hub: bigger, no tile */
.sh2-ic.si{width:52px;height:52px}
.sh2-hl-ic.si{width:38px;height:38px}

/* ---------- QA pass 2026-11-12 ---------- */
/* services offered on request (no page yet): a compact row under the lane's grid */
.sh2-also{margin-top:28px}
.sh2-also-h{margin:0 0 12px;font:600 14px/1.3 var(--body);color:var(--slate-500)}
.sh2-also-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sh2-also-card{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:4px 14px;height:100%;padding:16px 18px;border-radius:18px;
  background:rgba(255,255,255,.7);border:1px dashed #C9DFBA;color:var(--ink-900);text-decoration:none;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .25s var(--ease)}
.sh2-also-card:hover{background:#fff;border-style:solid;border-color:var(--green-600);transform:translateY(-2px)}
.sh2-also-card:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
.sh2-also-card .sh2-ic{width:44px;height:44px;grid-row:span 2}
.sh2-also-t b{display:block;font:600 16px/1.3 var(--display)}
.sh2-also-t small{display:block;margin-top:2px;font:400 13px/1.45 var(--body);color:var(--slate-500)}
.sh2-also-go{grid-column:2;display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:600 13px/1 var(--body);color:var(--green-700)}
.sh2-also-go svg{width:14px;height:14px}

/* the "which service fits you" list needs the full width below desktop */
@media (max-width:1180px){
  .sh2-picker-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .sh2-picker-side{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:8px 32px;align-items:center;max-width:none}
  .sh2-picker-side .sh2-fig-sm{grid-row:span 3;margin:0}
  .sh2-picker-side .sh2-btn{justify-self:start}
}
@media (max-width:720px){
  .sh2-picker-side{display:block}
  .sh2-picker-side .sh2-fig-sm{margin-bottom:24px}
  .sh2-also-list{grid-template-columns:minmax(0,1fr)}
}
/* jump chips: 44px tap targets on touch screens */
@media (max-width:720px){.sh-jump a{min-height:44px;display:inline-flex;align-items:center}}
@media (prefers-reduced-motion:reduce){.sh2-also-card{transition:none}.sh2-also-card:hover{transform:none}}