/* pages-services: "What we do" overview (/services/) + the 14 service pages (/services/<slug>/).
   Owner: agent B1. Markup is generated by tools/gen-services.mjs. All own selectors are prefixed .sv-;
   overrides of shared components are scoped to body.page-services (this file loads before components.css). */

/* ---- Utilities ---------------------------------------------------------------- */
.sv-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Hero (dark, text + angled photo) --------------------------------------- */
.page-services .sv-hero { padding-bottom: clamp(56px, 7vw, 112px); }
.sv-hero::before { /* angled shard echoing the brand mark */
  content: ""; position: absolute; right: -8%; top: -10%; width: 52%; height: 130%;
  background: linear-gradient(160deg, rgba(169, 206, 244, .16), rgba(112, 202, 208, 0) 70%);
  clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
  pointer-events: none;
}
.sv-hero .container { position: relative; }
.sv-hero__grid { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: end; }
.sv-hero__copy, .sv-hero__media { min-width: 0; }
.sv-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-3); max-width: none; }
.sv-hero__num { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: var(--fw-light); line-height: 1; color: var(--aqua); font-variant-numeric: tabular-nums; }
.page-services .sv-hero__group { margin: 0; min-height: 32px; text-decoration: none; }
.page-services .sv-hero__group:hover { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--aqua); text-underline-offset: 4px; }
.sv-hero__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule-dark-soft);
  font-family: var(--font-ui); font-size: .9375rem; font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark); max-width: none;
}
.page-services .sv-hero__title { max-width: 18ch; }
.page-services .sv-hero .page-hero__lead { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.6; max-width: 58ch; }
.page-services .sv-hero .sv-hero__lead-2 { margin-top: var(--s-4); font-size: 1rem; color: var(--on-dark-3); }
.sv-hero__media-frame { aspect-ratio: 3 / 2; }
.sv-ph-media { height: 100%; min-height: 0; background-color: rgba(255, 255, 255, .04); color: var(--on-dark-2); border-color: var(--rule-dark); }
.page-services .sv-hero__note { color: var(--on-dark-3); max-width: 60ch; }
@media (min-width: 1025px) {
  .sv-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .sv-hero__media-frame { aspect-ratio: 4 / 5; }
}

/* ---- Overview hero: jump links to the three groups --------------------------- */
.sv-hero--overview .sv-hero__grid { align-items: end; }
.sv-jump__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-dark-soft); }
.sv-jump__link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 4px var(--s-4);
  min-height: 72px; padding-block: var(--s-4);
  border-top: 1px solid var(--rule-dark-soft);
  color: var(--on-dark); text-decoration: none;
  transition: color var(--dur-fast) ease-in-out;
}
.sv-jump__num { grid-row: span 2; font-size: 1.75rem; font-weight: var(--fw-light); line-height: 1; color: var(--aqua); font-variant-numeric: tabular-nums; }
.sv-jump__label { font-size: var(--fs-h4); line-height: 1.25; }
.sv-jump__count { grid-column: 2; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--on-dark-3); }
.sv-jump__link .btn__arrow { grid-column: 3; grid-row: 1 / span 2; transform: rotate(90deg); }
.sv-jump__link:hover { color: var(--aqua); }
.sv-jump__link:hover .btn__arrow { transform: rotate(90deg) translateX(4px); }

/* ---- Overview: service groups (3 columns; heads and lists align via subgrid) - */
.page-services .svc-group { scroll-margin-top: calc(var(--header-h-compact) + var(--stripe-h) + 24px); }
.sv-group__num { display: block; margin-bottom: var(--s-4); font-size: var(--fs-num); font-weight: var(--fw-light); line-height: 1; color: var(--aqua-ink); font-variant-numeric: tabular-nums; }
.page-services .svc-group__title { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: var(--fw-light); }
.sv-group__head { padding-bottom: var(--s-5); }
.sv-group__body { min-width: 0; }
.page-services .svc-group__list { margin-top: 0; }
.sv-link__name { flex: 1 1 14ch; min-width: 0; }
.page-services .svc-group__link .badge-confirm { order: 2; }
.sv-link__cta {
  order: 3; display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: var(--fw-medium); letter-spacing: .02em; color: var(--ink-3);
  white-space: nowrap;
}
.page-services .svc-group__link:hover .sv-link__cta { color: var(--aqua-ink); }
.page-services .svc-group__link .sv-link__cta .btn__arrow { margin-left: 0; }
.sv-group-note { max-width: 46ch; }
@media (min-width: 1025px) {
  .page-services .svc-groups { grid-template-rows: auto auto; }
  .page-services .svc-group { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }
}

/* ---- Service page: two-column section (head left, content right) ------------- */
.sv-split { display: grid; gap: var(--s-6) var(--s-8); grid-template-columns: minmax(0, 1fr); }
.sv-split > * { min-width: 0; }
.sv-split__head > * + * { margin-top: var(--s-4); }
.page-services .sv-split__head .section-head__title { max-width: 14ch; }
.page-services .sv-split__head .eyebrow { margin-bottom: var(--s-2); }
@media (min-width: 1025px) {
  .sv-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .sv-split__head { position: sticky; top: calc(var(--header-h-compact) + var(--stripe-h) + 32px); }
}
.page-services .deliverables > li { font-size: 1.0625rem; }

/* Standards we work to */
.sv-standards { display: grid; gap: var(--s-5); }
.page-services .sv-standards__example { font-family: var(--font-ui); line-height: 1.6; }
.sv-standards__ph { min-height: 120px; }

/* ---- Related projects: text cards from Map – Projects ------------------------ */
.sv-projects { row-gap: var(--gap); }
.page-services .sv-project { padding: var(--s-5); border: 1px solid var(--rule); background: var(--surface); transition: border-color var(--dur-med) ease-in-out; }
.page-services .sv-project:hover { border-color: var(--aqua-ink); }
.sv-project__id { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.page-services .sv-project .card__title { font-size: clamp(1.2rem, 1.5vw, 1.4rem); }
.sv-project__facts { display: grid; gap: 0; margin: 0; }
.sv-project__facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); padding-block: 10px; border-bottom: 1px solid var(--rule); }
.sv-project__facts dt { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.sv-project__facts dd { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.sv-project__facts a { color: var(--ink); text-decoration-color: var(--aqua); text-underline-offset: 3px; }
.page-services .sv-project__link { align-self: flex-start; margin-top: auto; padding-top: var(--s-2); }
.page-services .sv-project--ghost { border-style: dashed; background: transparent; opacity: .7; }
.page-services .sv-project--ghost:hover { border-color: var(--rule); }
.sv-projects__empty { min-height: 100%; }
.sv-projects__note { margin-top: var(--s-6); }

/* ---- Group siblings (navigation aid) ----------------------------------------- */
.sv-siblings__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-4); }
.page-services .sv-siblings__title { color: var(--ink-2); }
.sv-siblings__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.sv-siblings__link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 56px; padding-block: var(--s-3);
  border-top: 1px solid var(--rule-strong); color: var(--ink); text-decoration: none; font-size: 1rem; line-height: 1.3;
}
.sv-siblings__link .btn__arrow { margin-left: auto; opacity: .5; }
.sv-siblings__link:hover { color: var(--teal-deep); }
.sv-siblings__link:hover .btn__arrow { opacity: 1; transform: translateX(6px); }

/* ---- Enquiry band ------------------------------------------------------------- */
.page-services .sv-inquiry__title { margin-top: var(--s-4); }
.page-services .inquiry .eyebrow { color: var(--on-dark-2); }
.page-services .inquiry__body p + p { margin-top: var(--s-3); }