/* ═══ Services family ═════════════════════════════════════════════════
   Linked after sub.css on the six services pages (hub, Advisory,
   Implementation, Project assurance, AMS, Augmentation). The playbook
   look: a tinted hero with a chapter numeral and prev/next, the service
   rail numbered, options as a segmented panel, phases as a vertical
   timeline, scope as a key/value table, outputs as numbered statements,
   roles as a bench, and the hub as a numbered index that reads
   "start with a decision / a programme / ...".
   Written by tools/blueprint_design.py.
   ------------------------------------------------------------------ */


/* ── hero: tinted band, copy left, chapter marker right ── */
.svc-hero { padding: 10vh 0 9vh; background:
  radial-gradient(70% 90% at 88% 10%, rgba(179,210,48,.13), transparent 62%),
  radial-gradient(50% 70% at 10% 100%, rgba(46,171,198,.07), transparent 60%),
  linear-gradient(180deg, #0c130b 0%, var(--bg) 100%); }
.svc-hero::before { opacity: .35; }
.svc-hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 6vw; align-items: end; }
.svc-hero h1 { max-width: 16ch; }
.svc-facts { margin-top: 26px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
             color: rgba(239,243,233,.6); line-height: 2; animation: heroIn .9s var(--ease) .3s both; }
.svc-facts i { font-style: normal; color: var(--lime); padding: 0 10px; }
.svc-chapter { justify-self: end; text-align: right; animation: heroIn .9s var(--ease) .4s both; }
.svc-chapter-n { display: block; font-family: 'IBM Plex Mono', monospace; font-size: clamp(96px, 12vw, 180px); font-weight: 400; line-height: .9;
                 color: transparent; -webkit-text-stroke: 1px rgba(179,210,48,.55); letter-spacing: -.04em; }
.svc-chapter-k { display: block; margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-dim); }
.svc-chapter-nav { display: grid; gap: 8px; }
.svc-chapter-nav a { font-size: 13.5px; color: rgba(239,243,233,.72); text-decoration: none; transition: color .25s; }
.svc-chapter-nav a:hover { color: var(--lime); }
.svc-chapter-nav a span { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 2px; }
.svc-hub-index { list-style: none; margin: 0; padding: 0; justify-self: end; min-width: 300px; animation: heroIn .9s var(--ease) .4s both; }
.svc-hub-index a { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line);
                   color: rgba(239,243,233,.8); text-decoration: none; font-size: 14.5px; transition: color .25s; }
.svc-hub-index li:last-child a { border-bottom: 1px solid var(--line); }
.svc-hub-index a span { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; color: var(--lime); }
.svc-hub-index a i { font-style: normal; color: var(--lime); opacity: 0; transition: opacity .25s; }
.svc-hub-index a:hover { color: var(--lime); }
.svc-hub-index a:hover i { opacity: 1; }

/* ── section heads ── */
.eyebrow b { font-weight: 400; color: rgba(239,243,233,.48); margin-right: 4px; }
.svc-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px 6vw; align-items: end; margin-bottom: 58px; }
.svc-head h2 { font-size: clamp(28px, 3.8vw, 50px); font-weight: 600; margin: 18px 0 0; max-width: 20ch; }
.svc-head > p { color: var(--text-dim); font-size: clamp(14px, 1.2vw, 16.5px); line-height: 1.75; max-width: 52ch; padding-bottom: 6px; }
.svc-head.solo { grid-template-columns: 1fr; }

/* ── hub index: five service lines, "start with ..." ── */
.svc-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-index a { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) 40px; gap: 0 3vw; align-items: center; padding: 30px 0;
               border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: color .25s; }
.svc-index-n { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .16em; color: var(--lime); }
.svc-index h3 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; margin: 0; }
.svc-index-k { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.svc-index p { font-size: 15px; color: rgba(239,243,233,.78); line-height: 1.6; margin: 0; }
.svc-index-arrow { font-size: 26px; color: var(--lime); opacity: .5; justify-self: end; transition: opacity .25s, transform .25s; }
.svc-index a:hover h3 { color: var(--lime); }
.svc-index a:hover .svc-index-arrow { opacity: 1; transform: translateX(4px); }

/* ── options: one panel, N equal segments ── */
/* the 1px gap over a line-coloured ground draws the dividers in both directions, so the panel can wrap to two rows */
.svc-options { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.svc-option { padding: 30px 28px 34px; background: #0b0f0a; display: grid; grid-template-rows: auto 1fr; align-content: start; }
.svc-option-n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em; color: var(--lime); margin-bottom: 18px; }
.svc-option h4, .svc-option h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; }
.svc-option p { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin: 0; }

/* ── vertical timeline ── */
.svc-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.svc-timeline::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, var(--lime), rgba(179,210,48,.15)); }
.svc-timeline li { position: relative; display: grid; grid-template-columns: 40px minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 4vw; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.svc-timeline li:last-child { border-bottom: 0; }
.svc-step-n { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lime); background: var(--bg); display: grid; place-items: center;
              font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--lime); align-self: center; }
.tint .svc-step-n { background: #0b0e0a; }
.svc-timeline h4, .svc-timeline h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; margin: 0; }
.svc-timeline p { font-size: 14.5px; color: var(--text-dim); line-height: 1.65; margin: 0; }

/* ── scope: key / value table ── */
.svc-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5vw; border-top: 1px solid var(--line); }
.svc-scope div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.svc-scope dt { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); padding-top: 4px; }
.svc-scope dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(239,243,233,.8); }

/* ── checklist: two columns of numbered squares ── */
.svc-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5vw; border-top: 1px solid var(--line); counter-reset: chk; }
.svc-check li { counter-increment: chk; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line);
                font-size: 16px; font-weight: 500; line-height: 1.5; color: rgba(239,243,233,.88); }
.svc-check li::before { content: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(179,210,48,.5);
                        font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--lime); margin-top: 1px; }

/* ── statements: numbered, one column ── */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: st; max-width: 900px; }
.svc-list li { counter-increment: st; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line);
               font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; line-height: 1.45; }
.svc-list li::before { content: none; font-family: 'IBM Plex Mono', monospace; font-size: 22px; letter-spacing: .04em; color: var(--lime); }

/* ── bench: roles ── */
.svc-bench { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5vw; border-top: 1px solid var(--line); }
.svc-bench li { position: relative; padding: 15px 0 15px 22px; border-bottom: 1px solid var(--line); font-size: 15.5px; color: rgba(239,243,233,.86); }
.svc-bench li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; background: var(--lime); }

/* ── CTA bookend: same tint as the hero ── */
.svc-cta { background: radial-gradient(60% 90% at 12% 100%, rgba(179,210,48,.12), transparent 62%), linear-gradient(0deg, #0c130b 0%, var(--bg) 100%); border-top: 1px solid var(--line); }

/* ── responsive ── */
@media (max-width: 1080px) {
  .svc-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-index a { grid-template-columns: minmax(0, 1fr) 32px; }
  .svc-index p { grid-column: 1; margin-top: 8px; }
  .svc-index .svc-index-arrow { grid-row: 1; grid-column: 2; }
}
@media (max-width: 900px) {
  .svc-hero-in { grid-template-columns: 1fr; gap: 34px; }
  .svc-chapter { justify-self: start; text-align: left; }
  .svc-chapter-n { font-size: 72px; }
  .svc-hub-index { justify-self: stretch; min-width: 0; }
  .svc-head { grid-template-columns: 1fr; }
  .svc-head > p { padding-bottom: 0; }
  .svc-options { grid-template-columns: 1fr; }
  .svc-timeline li { grid-template-columns: 40px minmax(0, 1fr); gap: 0 18px; }
  .svc-timeline p { grid-column: 2; margin-top: 6px; }
  .svc-scope, .svc-check, .svc-bench { grid-template-columns: 1fr; }
  .svc-list li { font-size: 16.5px; }
}
@media (max-width: 620px) {
  .svc-scope div { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-facts, .svc-chapter, .svc-hub-index { animation: none; }
}