/* ==========================================================================
   SERVICES SUB-PAGES — SECTION 5: "DELIVERY APPROACH"
   ==========================================================================
   Nine variants, in two sets:

     11 · 12 · 13 · 14      HOME-DERIVED — the priority set, built from
                            .g-num / .glance-stats, .why-glance-stat,
                            .svc-cards--rows, and the thin gradient accent rule.
     2 · 4 · 5 · 9 · 14     FORKED from the approved Solutions §5 shortlist
                            (sol-05-role.css), renamed .s5v* -> .sv5v*.

   NOTE THE COLLISION: the forked set contains a variant 14 and so does the
   derived set. The namespace rule says a fork keeps its source number, and 14
   was already taken by the fork of §5·14, so the fourth derived variant is
   numbered 15 rather than 14. Everything else in the derived set is 11-13 as
   specified. This is the only place across the four sections where it happens.

   Preview-only. Namespaced .sv5vN- — NOT .svc-.

   ------------------------------------------------------------------------
   THE CONTENT — and a correction to the brief
   ------------------------------------------------------------------------
   The brief sizes this section for "4-7 named stages". Counted out of all
   eight reference docs, the real range is FOUR TO SIX:

       Consulting                 4   Align / Assess / Design / Roadmap
       Implementation & Rollout   6   Discover / Prepare / Explore / Realize /
                                      Deploy / Run
       AMS                        5   Transition / Stabilize / Operate /
                                      Improve / Govern and Evolve
       Migration & Modernization  5   Assess / Define / Prepare / Transition /
                                      Stabilize
       Integration                5   Assess / Architect / Build / Validate /
                                      Operate and Improve
       Data, Reporting & Analytics 5  Assess / Design / Build /
                                      Validate and Adopt / Govern and Improve
       Support & Optimization     5   Diagnose / Prioritize / Remediate /
                                      Validate / Sustain
       Training & Change          5   Align / Assess / Design / Enable / Sustain

   Six of eight are five stages; the outliers are 4 and 6. Everything below is
   still authored to hold seven without breaking, because headroom is free and
   a ninth page may arrive — but the layouts are TUNED for five, not for seven,
   and the previews render the 6-stage worst case.

   ------------------------------------------------------------------------
   THE HEIGHT PROBLEM, STATED HONESTLY
   ------------------------------------------------------------------------
   The live §5 measures 601px @390 / 553px @1440 on consulting and 476 / 546
   on implementation-rollout — flat, and almost independent of stage count.
   That is not because it is efficient. It is because .approach-rows is a
   horizontal scroll-snap row below 941px (styles.css:1650) and a fixed
   4/5/6-column grid above it, so at 390px the live page shows two stages and
   hides the rest off-screen behind a swipe.

   Any §5 that shows every stage at once WILL exceed that number at 390px.
   Rather than pretend otherwise: the derived variants are ranked below by
   measured height, one of them (design 9, forked) keeps the snap-row trick if
   the flat number is what matters, and the page-level budget is met out of §3,
   where the live .dx-index spends 3,164px on six blocks.

   ------------------------------------------------------------------------
   THE BASE — index.html, matched number for number
   ------------------------------------------------------------------------
     RADIUS   4px; media 8px; bento none.   BORDERS  #c4c4c4 / var(--c-line).
     SHADOWS  neutral only.                 HOVER    .22s, border + 2px + 4px.
     GRADIENT large numerals (.g-num) and thin accent rules ONLY. The bullet
              marker here is the sitewide 10x2 gradient rule
              (.article-body ul li::before), which is a thin accent rule.
     DARK     .why-glance-stat — var(--c-dark), 4px, SOLID 3px accent border.

   THE RE-THEME IS ONE LINE: --c-accent: var(--fam-700) on the wrapper.

   COLOUR — tokens only.
   ⚠ THE FORK CARRIED A BUG. sol-05-role.css:251 hovers a deep-band row to
   var(--fam-100). The blue family has NO --fam-100 (Solutions defines
   #D0BCFC; Services does not define one at all), so on a Services page that
   declaration resolves to nothing and the hover silently does not happen.
   Fixed in design 4 below — see the note there. That is the single hardcoded
   -colour defect the fork inherited, and it is now gone.

   ONE DOCUMENTED DEVIATION, carried over: on the deep band --fam-grad
   (700 -> 400) is unreadable against --fam-800, so numerals on dark are SOLID
   var(--fam-300) and the gradient appears there only as a thin rule.

   RESPONSIVE — mobile-first at 390px stepping up with min-width.
   Steps: 390 base · 561 · 761 · 941 · 1181
   ========================================================================== */


/* ==========================================================================
   PREVIEW CHROME — not part of any design, do not lift
   ========================================================================== */
.sv5-top  { height: var(--header-h); }
.sv5-flag { background: #14141c; color: #fff; font-size: 13px; }
.sv5-flag .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 11px; }
.sv5-flag b { font-weight: 700; }
.sv5-flag span { color: rgba(255,255,255,.62); }

.sv5-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 32px 8px; }
.sv5-label .container { display: flex; flex-direction: column; gap: 8px; }
.sv5-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.sv5-label h2 b { color: var(--fam-700); font-weight: 800; }
.sv5-label p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-muted); max-width: 82ch; }
.sv5-label p b { color: var(--c-body); font-weight: 700; }
.sv5-label code { font-size: 13px; color: var(--fam-700); }
.sv5-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; }
.sv5-tags span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-body); background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 4px 8px;
}
.sv5-tags span.new  { color: #0b4a1f; background: #eaf7ee; border-color: #c3e6cd; }
.sv5-tags span.warn { color: #8a4a00; background: #fdf5ea; border-color: #f0dcc0; }

.sv5-note { background: var(--fam-tint); }
.sv5-note .container { padding-block: 38px; }
.sv5-note h3 { font-size: 17px; margin: 0 0 10px; color: var(--c-ink); }
.sv5-note p { font-size: 15px; line-height: 1.7; color: var(--c-body); margin: 0; max-width: 78ch; }
.sv5-note p + p { margin-top: 12px; }
.sv5-note b { color: var(--c-ink); }
.sv5-note code { color: var(--fam-700); font-size: 13.5px; }


/* ==========================================================================
   SHARED DEVICES — the home page's type and motif, family-substituted
   ========================================================================== */

/* .services-title: 700, .98, -.025em, stepped down — §5 sits mid-page under
   an H1 hero and two H2s */
.sv5-h2 {
  font-size: clamp(30px, 4.8vw, 52px); font-weight: 700; line-height: 1.0;
  letter-spacing: -.025em; color: var(--c-ink); margin: 0; text-wrap: balance;
}
.sv5-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-700); margin: 0 0 14px;
}
/* .svc-card p: 16px / 300 / 1.6 / #323232 */
.sv5-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; }
.sv5-lede + .sv5-lede { margin-top: 16px; }
.sv5-lede b { font-weight: 600; color: var(--c-ink); }

/* .g-num: gradient-clipped numerals, light surfaces only — see the deviation
   note at the top of this file. */
.sv5-num {
  display: block; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: var(--fam-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Bullet list. The sitewide marker is a 10x2 gradient rule
   (.article-body ul li::before) — a thin accent rule, which is exactly what
   the home page permits the gradient to be. */
.sv5-bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sv5-bul li {
  position: relative; padding-left: 18px;
  font-size: 14.5px; font-weight: 300; line-height: 1.45; color: #323232;
  break-inside: avoid;
}
.sv5-bul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 2px; background: var(--fam-grad);
}
.sv5-bul--dark li { color: rgba(255,255,255,.78); }
.sv5-bul--dark li::before { background: var(--fam-300); }

/* Small stage counter, e.g. 03 / 06. nowrap + no shrink: inside a flex row
   beside a long stage title it breaks after the slash at 390px. */
.sv5-count {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #b7b7c2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; flex-shrink: 0;
}

/* the closing line every Delivery Approach doc carries ("Where required,
   VISCAP can continue from advisory into implementation…"). It is a handoff to
   the sibling service pages, so it gets a rule above it and never body weight. */
.sv5-close {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--c-line);
  font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--c-body);
}
.sv5-close b { color: var(--c-ink); font-weight: 600; }


/* ==========================================================================
   ############  HOME-DERIVED SET — 11, 12, 13, 15  ############
   ========================================================================== */


/* ==========================================================================
   DESIGN 11 — STAGE NUMERAL GRID           derived from .glance-stats / .g-num
   ==========================================================================
   §5A of the brief puts it plainly: "home's big numeral is made for stage
   numbers". This is that, and nothing else — .glance-stats' 2-up grid of
   .g-num numerals with a label under each, used for the stages instead of the
   proof statistics.

   It is the flattest always-visible §5 here. .glance-stats is 2-up at every
   width (tightening at <=560, styles.css:958), so four stages is two rows,
   six is three, and seven is four — the height moves in half-steps rather
   than per stage. At 941 it opens to the stage count itself so the whole
   sequence reads as one line.

   .glance sets two colour rules on its children for a dark band; both are
   restated here for white, exactly as design 11 of §2 does.

   Reuses: .glance-stats .glance-stat .g-num .g-label
   ========================================================================== */
.sv5v11 { --c-accent: var(--fam-700); }
.sv5v11-head { margin-bottom: 26px; }
.sv5v11-head .sv5-lede { margin-top: 16px; max-width: 66ch; }
/* the two rules .glance sets on a dark ground, restated for white */
.sv5v11 .g-num   { background: var(--fam-grad); -webkit-background-clip: text; background-clip: text; }
.sv5v11 .g-label { color: var(--c-muted); }
.sv5v11 .glance-stats { gap: 26px 24px; }
/* the numeral is a step marker rather than a headline statistic, so it steps
   down from the home page's clamp(44px,5vw,70px) */
.sv5v11 .g-num { font-size: clamp(34px, 3.4vw, 46px); }
.sv5v11-stage h3 {
  font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  color: var(--c-ink); margin: 10px 0 0;
}
.sv5v11 .g-label { margin-top: 6px; font-size: 14.5px; font-weight: 300; line-height: 1.5; }
/* the thin accent rule under each numeral — the gradient's second permitted
   home, and what makes the row read as a sequence rather than as four figures */
.sv5v11-stage { padding-top: 14px; border-top: 2px solid var(--c-line); }
.sv5v11-stage:first-child { border-top-color: var(--fam-700); }
@media (min-width: 761px) {
  .sv5v11 .glance-stats { gap: 30px 34px; }
  .sv5v11-stage h3 { font-size: 19px; }
}
@media (min-width: 941px) {
  .sv5v11 .glance-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px 30px; }
  .sv5v11-head { margin-bottom: 34px; }
}
@media (min-width: 1181px) {
  /* ONE ROW OF THE FULL SEQUENCE, and flex rather than repeat(auto-fit,…) for
     the reason spelled out on design 12: auto-fit derives its count from a
     px floor and lands on five tracks at a 1440px viewport, which orphans the
     sixth stage. `flex: 1 1 0` has no floor and holds one row at 4, 5, 6 and 7.
     Held to 1181 rather than 941 because these labels carry a sentence, not
     three words — six columns of a 1017px container is 149px a stage, where
     that sentence runs to six lines. At 1181 it is 166px and at 1440 it is
     179px. Below this the grid is a clean 3-up, which takes 6 as two rows. */
  .sv5v11 .glance-stats { display: flex; gap: 28px; }
  .sv5v11-stage { flex: 1 1 0; min-width: 0; }
}


/* ==========================================================================
   DESIGN 12 — DARK STAT STAGES               derived from .why-glance-stat
   ==========================================================================
   The home page's Why VISCAP block: a line of copy over a var(--c-dark) card
   with a SOLID 3px accent bottom border at 4px radius. Here the card carries
   the stage — its number, its name and what it produces — and the copy above
   it carries the sentence.

   This is §5's dark moment, and unlike the forked design 4 it is dark in
   CARDS rather than as a full-bleed band, so it can sit next to a dark §2 or
   §4 without the page reading as two black stripes.

   ONE DOCUMENTED OVERRIDE. styles.css:678 drops .why-glance-grid to a single
   column at <=560 because each home column carries a two-line paragraph above
   its card. A stage card is a numeral and three words, so 1-up at 390px is
   six near-empty cards and 1,100px of page. Held at 2-up, which is what the
   content actually needs — the only place in this project a shipped mobile
   breakpoint is overridden rather than inherited, and it is here because the
   content is genuinely lighter, not because the breakpoint is wrong.

   Reuses: .why-glance-grid .why-glance-col .why-glance-stat
           .why-glance-num .why-glance-label
   ========================================================================== */
.sv5v12 { --c-accent: var(--fam-700); }
.sv5v12-head { margin-bottom: 26px; }
.sv5v12-head .sv5-lede { margin-top: 16px; max-width: 66ch; }
.sv5v12 .why-glance-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
/* the numeral is a step marker, not a statistic */
.sv5v12 .why-glance-num { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--fam-300); }
.sv5v12 .why-glance-stat { padding: 18px 16px 16px; }
.sv5v12-stage h3 { font-size: 17px; font-weight: 700; line-height: 1.3; color: #fff; margin: 10px 0 0; }
.sv5v12 .why-glance-label { margin-top: 8px; font-size: 14px; font-weight: 300; }
@media (min-width: 561px) {
  .sv5v12 .why-glance-grid { gap: 18px; }
  .sv5v12 .why-glance-stat { padding: 22px 20px 18px; }
}
@media (min-width: 761px) {
  .sv5v12 .why-glance-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sv5v12-stage h3 { font-size: 18px; }
}
@media (min-width: 1081px) {
  /* ONE ROW AT ANY STAGE COUNT — and this is flex, not an auto-fit grid,
     because auto-fit gets it wrong at exactly the count that matters.
     repeat(auto-fit, minmax(180px, 1fr)) derives its track count from the
     180px floor: at a 1440px viewport the container is 1176px, which fits
     floor((1176 + 20) / 200) = 5 tracks — so SIX stages ship as five and an
     orphan, the same defect the §4 forks had to be retuned out of. A flex row
     of `flex: 1 1 0` children has no floor to round against and holds one row
     at 4, 5, 6 and 7. The cost is width at the top of the range: 5 stages get
     219px each, 6 get 179px, 7 get 151px. Six of the eight pages have exactly
     five stages, one has six and one has four. */
  .sv5v12 .why-glance-grid { display: flex; gap: 16px; }
  .sv5v12 .why-glance-col { flex: 1 1 0; min-width: 0; }
  .sv5v12 .why-glance-stat { padding: 24px 20px 20px; }
}


/* ==========================================================================
   DESIGN 13 — NUMBERED STAGE ROWS            derived from .svc-cards--rows
   ==========================================================================
   The home row list, numbered. One var(--c-line) rule per stage, the number in
   a fixed left column, the name beside it and what the stage produces in the
   column after that. Hover changes only the rule's colour.

   The densest way to show every stage AND its detail. It grows linearly, but
   the per-stage cost is a rule and two lines rather than a card, so linear is
   cheap: six stages is roughly what three cards would cost.

   No arrow box — the stages describe work, they do not navigate.

   Reuses: .svc-cards--rows .svc-card
   ========================================================================== */
.sv5v13 { --c-accent: var(--fam-700); }
.sv5v13-head { margin-bottom: 26px; }
.sv5v13-head .sv5-lede { margin-top: 16px; max-width: 66ch; }
.sv5v13 .svc-cards--rows .svc-card {
  display: grid; grid-template-columns: 40px minmax(0,1fr);
  gap: 2px 12px; align-items: baseline; padding: 18px 2px;
}
.sv5v13-n {
  grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 700;
  color: #b7b7c2; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
.sv5v13 .svc-cards--rows .svc-card h4 { grid-column: 2; grid-row: 1; font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; }
.sv5v13-d { grid-column: 2; grid-row: 2; font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 6px 0 0; }
@media (hover: hover) {
  .sv5v13 .svc-cards--rows .svc-card:hover .sv5v13-n { color: var(--fam-700); }
}
@media (min-width: 761px) {
  .sv5v13 .svc-cards--rows .svc-card {
    grid-template-columns: 56px minmax(0,270px) minmax(0,1fr);
    gap: 0 32px; align-items: baseline; padding: 22px 4px;
  }
  .sv5v13 .svc-cards--rows .svc-card h4 { font-size: 20px; }
  .sv5v13-d { grid-column: 3; grid-row: 1; margin: 0; }
  .sv5v13-n { font-size: 17px; }
}
@media (min-width: 941px) {
  .sv5v13 .svc-cards--rows .svc-card { grid-template-columns: 56px minmax(0,300px) minmax(0,1fr); gap: 0 48px; }
}


/* ==========================================================================
   DESIGN 15 — PROGRESS RAIL       derived from .svc-tab::after + .g-num
   ==========================================================================
   Numbered 11-13 above, then 15: 14 is taken by the fork of §5·14 and the
   namespace rule says a fork keeps its source number.

   §5 is the one section on the page where ORDER is the content, and none of
   11, 12 or 13 says so — they show a set, not a sequence. The home page has
   no timeline, but it does have the two parts one is made of: the 3px gradient
   underline that fills under the active .svc-tab, and the large gradient
   numeral. This composes them — a continuous 2px --fam-grad rule with a
   numeral node per stage.

   Both are thin-accent-rule and large-numeral uses, which are precisely the
   two places §7 of the brief lets the gradient appear. Nothing wipes.

   The rail is HORIZONTAL at >=941, where the sequence reads left to right in
   one line and the height stops depending on stage count, and VERTICAL below
   that, where a horizontal rail would either scroll or squeeze seven labels
   into 350px.
   ========================================================================== */
.sv5v15-head { margin-bottom: 30px; }
.sv5v15-head .sv5-lede { margin-top: 16px; max-width: 66ch; }
.sv5v15-track { position: relative; padding-left: 30px; }
/* the spine: the gradient as a thin rule, which is the licence the home page
   grants it. Inset top and bottom so it starts and stops at the first and last
   node rather than running past them. */
.sv5v15-track::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 2px; background: var(--fam-grad);
}
.sv5v15-stage { position: relative; padding-bottom: 24px; }
.sv5v15-stage:last-child { padding-bottom: 0; }
/* the node — a 12px dot with a white ring, so the spine reads as continuous
   behind it rather than butting into it */
.sv5v15-stage::before {
  content: ""; position: absolute; left: -30px; top: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fam-700); box-shadow: 0 0 0 4px #fff;
}
.sv5v15-n { font-size: 26px; margin-bottom: 4px; }
.sv5v15-stage h3 { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.sv5v15-stage p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 7px 0 0; max-width: 56ch; }
@media (min-width: 561px) {
  .sv5v15-stage { padding-bottom: 28px; }
  .sv5v15-n { font-size: 30px; }
}
@media (min-width: 941px) {
  /* horizontal: the sequence in one line, and the section height stops moving
     with stage count. auto-fit is deliberately NOT used — the stages must stay
     on one row at 4 and at 7, so the track is a flex row of equal columns. */
  .sv5v15-track { padding-left: 0; padding-top: 30px; display: flex; gap: 0; }
  .sv5v15-stage { flex: 1 1 0; min-width: 0; padding: 0 22px 0 0; }
  .sv5v15-stage:last-child { padding-right: 0; }
  .sv5v15-stage::before { left: 0; top: -30px; }
  /* THE SPINE IS DRAWN PER SEGMENT HERE, not as one rule across the track.
     A single track-wide rule cannot know where the last node is — CSS has no
     access to the stage count — so it ran the full container width and
     overshot the final node by a whole column, which reads as an unfinished
     line rather than a finished sequence. One segment per stage, suppressed on
     the last, ends the spine exactly on the last node at 4, 5, 6 or 7 stages.
     left:12px starts it at the node's right edge; right:0 resolves against the
     padding box, so it meets the next stage's node with no seam. */
  .sv5v15-track::before { content: none; }
  .sv5v15-stage::after {
    content: ""; position: absolute; left: 12px; right: 0; top: -25px;
    height: 2px; background: var(--fam-grad);
  }
  .sv5v15-stage:last-child::after { content: none; }
  .sv5v15-n { font-size: 34px; }
  .sv5v15-stage h3 { font-size: 18px; }
  .sv5v15-stage p { font-size: 14.5px; }
}
@media (min-width: 1181px) {
  .sv5v15-stage { padding-right: 30px; }
  .sv5v15-n { font-size: 40px; }
}


/* ==========================================================================
   ############  FORKED SET — 2, 4, 5, 9, 14  ############
   Forked from sol-05-role.css. Class names keep the SOURCE variant number:
   .s5v14- becomes .sv5v14-.

   RETUNE APPLIED — the source carried SEVEN blocks of six to eight bullets
   each; Services carries four to six stages of three to six.
     2   sticky rail   sticky released 941 -> 1081. At five short panels a rail
                       that pins for 300px and lets go reads as a glitch.
     4   deep band     --fam-100 hover REMOVED (it does not exist in blue) and
                       the 2-column bullet split held to 561 rather than
                       arriving with the 3-column step, which at five bullets
                       left a one-item third column.
     5   spine         desktop split narrowed 300 -> 260px and the bullets held
                       at 2 columns. Checked at 4 stages as well as 6 — this is
                       the variant the brief warns can look broken at the short
                       end, and it is why the head keeps its own margin.
     9   snap stepper  unchanged. This is the one variant whose height does not
                       move with stage count at all, and it is the closest
                       match to what the live page already does.
     14  zig-zag       flagged, not fixed. Six alternating full-width blocks is
                       the tallest thing in this catalogue; see the note there.
   ========================================================================== */


/* ==========================================================================
   DESIGN 2 — STICKY STAGE RAIL + OPEN PANELS                  (fork of §5·2)
   Everything is visible; the rail is orientation, not disclosure. Base is a
   numbered table of contents in the row-list treatment (46px rows, so the tap
   targets clear 44px); at >=1081 that rail becomes a sticky column beside the
   panels.
   ========================================================================== */
.sv5v2-head { margin-bottom: 26px; }

.sv5v2-rail { margin: 0 0 34px; padding: 0; list-style: none; }
.sv5v2-rail li { border-bottom: 1px solid var(--c-line); transition: border-bottom-color .22s var(--ease); }
.sv5v2-rail li:first-child { border-top: 1px solid var(--c-line); }
.sv5v2-rail a {
  display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center;
  padding: 13px 2px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--c-ink);
  transition: color .22s var(--ease);
}
.sv5v2-rail i { font-style: normal; font-size: 13px; font-weight: 700; color: #b7b7c2; font-variant-numeric: tabular-nums; transition: color .22s var(--ease); }
@media (hover: hover) {
  .sv5v2-rail li:hover { border-bottom-color: var(--fam-700); }
  .sv5v2-rail li:hover a, .sv5v2-rail li:hover i { color: var(--fam-700); }
}
.sv5v2-rail a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: -2px; }

.sv5v2-panel { padding-block: 24px; border-top: 1px solid var(--c-line); }
.sv5v2-panel:first-child { border-top: none; padding-top: 0; }
.sv5v2-panel:last-child { padding-bottom: 0; }
.sv5v2-ph { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sv5v2-panel h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--c-ink); margin: 0; }
.sv5v2-panel .sv5-lede { margin-bottom: 16px; font-size: 15px; }

@media (min-width: 561px) {
  .sv5v2-panel .sv5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 941px) {
  .sv5v2-panel { padding-block: 30px; }
  .sv5v2-panel .sv5-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* RETUNE: 941 -> 1081. Solutions §5 ran seven panels of up to eight bullets
   past this rail; five short stages do not give it enough to hold still
   against, and a pin that releases after one screen reads as a bug. */
@media (min-width: 1081px) {
  .sv5v2 { display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 64px; align-items: start; }
  .sv5v2-aside { position: sticky; top: calc(var(--header-h) + 26px); }
  /* the H2 shares this column with the rail, so it takes the narrow-column
     step-down rather than the full 52px */
  .sv5v2-head .sv5-h2 { font-size: clamp(30px, 3vw, 38px); }
  .sv5v2-rail { margin-bottom: 0; margin-top: 26px; }
  .sv5v2-head { margin-bottom: 0; }
}


/* ==========================================================================
   DESIGN 4 — DEEP BAND, NUMBERED STAGES (dark)                (fork of §5·4)
   The full-bleed inverse. --fam-grad-deep fill, hairline rules at
   rgba(255,255,255,.22), and the .why-glance-stat marker — a SOLID 3px accent
   rule — closing the band. Numerals are solid --fam-300, not gradient: see the
   deviation note at the top of this file.
   ========================================================================== */
.sv5v4 { background: var(--fam-grad-deep); color: #fff; padding-block: 40px 44px; }
.sv5v4-head { margin-bottom: 30px; }
.sv5v4 .sv5-eyebrow { color: var(--fam-200); }
.sv5v4-head h2 { color: #fff; max-width: 20ch; }
.sv5v4-head .sv5-lede { color: rgba(255,255,255,.76); margin-top: 16px; max-width: 62ch; }
.sv5v4-head .sv5-lede b { color: #fff; }
/* thin accent rule — the second of the two places the gradient is allowed */
.sv5v4-hr { height: 2px; width: 88px; background: var(--fam-grad); margin-top: 22px; }

.sv5v4-row {
  padding-block: 20px; border-top: 1px solid rgba(255,255,255,.22);
  transition: border-top-color .22s var(--ease);
}
.sv5v4-row:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.sv5v4-rh { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.sv5v4-n { font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--fam-300); font-variant-numeric: tabular-nums; }
.sv5v4-row h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0; }
/* the stage description sits in the title column at width, under the name */
.sv5v4-d { font-size: 14px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.66); margin: 8px 0 12px; }
.sv5v4-row .sv5-bul li { color: rgba(255,255,255,.78); }
/* ⚠ THE INHERITED BUG, FIXED. sol-05-role.css:251 hovers this rule to
   var(--fam-100). Solutions defines --fam-100 (#D0BCFC); the Services blue set
   does NOT define one at all, so on a Services page that declaration resolves
   to nothing, border-top-color falls back to the inherited value and the hover
   silently does not happen. --fam-200 is the blue set's on-dark light step and
   is what the Solutions author meant. */
@media (hover: hover) {
  .sv5v4-row:hover { border-top-color: var(--fam-200); }
}

/* .why-glance-stat: --c-dark fill, 4px radius, solid 3px accent bottom rule */
.sv5v4-close {
  margin-top: 30px; background: var(--c-dark); border-radius: var(--radius);
  padding: 22px 20px 20px; border-bottom: 3px solid var(--fam-300);
}
.sv5v4-close p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.78); }
.sv5v4-close b { color: #fff; font-weight: 700; }

/* RETUNE: the source opened a THIRD bullet column at 941. Services stages
   carry three to six bullets, where a third column is a single orphan item.
   Two columns from 561 up, and no third step. */
@media (min-width: 561px) {
  .sv5v4-row .sv5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 761px) {
  .sv5v4 { padding-block: 48px 52px; }
  .sv5v4-row { display: grid; grid-template-columns: minmax(0,268px) minmax(0,1fr); gap: 6px 40px; padding-block: 24px; }
  .sv5v4-rh { margin-bottom: 0; }
  .sv5v4-d { grid-column: 1; margin: 8px 0 0; }
  .sv5v4-row h3 { font-size: 19px; }
  .sv5v4-close { padding: 26px 24px 22px; }
}
@media (min-width: 941px) {
  .sv5v4 { padding-block: 56px 60px; }
  .sv5v4-row { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 6px 56px; }
}


/* ==========================================================================
   DESIGN 5 — SPINE TIMELINE                                   (fork of §5·5)
   States the sequence as a shape: a continuous 2px gradient rule running the
   full height with a node per stage — a thin accent rule, the gradient's
   second permitted home. Numerals are the large gradient-clipped kind and sit
   on white, where --fam-grad reads at 10.2:1 to 5.3:1.

   RETUNE: this is the variant the brief warns "can look broken at 4". Two
   changes for the short end — the desktop copy column narrows 300 -> 260px so
   four stages do not leave a channel of white down the middle, and the bullets
   stay at two columns at every width rather than opening a third at 1181,
   which at four bullets was one item per column.
   ========================================================================== */
/* the measure cap belongs on the H2, not the wrapper: ch resolves against the
   element's OWN font-size, so 30ch on a 16px wrapper is 270px and breaks a
   52px heading into six lines */
.sv5v5-head { margin-bottom: 34px; }
.sv5v5-head .sv5-h2 { max-width: 20ch; }
.sv5v5-track { position: relative; padding-left: 30px; }
.sv5v5-track::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: var(--fam-grad);
}
.sv5v5-stage { position: relative; padding-bottom: 30px; }
.sv5v5-stage:last-child { padding-bottom: 0; }
.sv5v5-stage::before {
  content: ""; position: absolute; left: -30px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fam-700); box-shadow: 0 0 0 4px #fff;
}
/* .sv5v5-side keeps the numeral+title row and the summary together as ONE grid
   child, so the >=941 two-column split places them both in the left column.
   The summary is a sibling of .sv5v5-sh rather than nested inside it — nested,
   it inherited the numeral's indent and hung further right than the bullets. */
.sv5v5-sh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sv5v5-n { font-size: 30px; }
.sv5v5-stage h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.sv5v5-sum { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--c-muted); margin: 0 0 16px; }

@media (min-width: 561px) {
  .sv5v5-stage .sv5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 761px) {
  .sv5v5-track { padding-left: 42px; }
  .sv5v5-track::before { left: 9px; }
  .sv5v5-stage { padding-bottom: 38px; }
  .sv5v5-stage::before { left: -42px; top: 10px; width: 20px; height: 20px; border: 4px solid #fff; box-shadow: none; }
  .sv5v5-n { font-size: 40px; }
  .sv5v5-stage h3 { font-size: 21px; }
}
@media (min-width: 941px) {
  .sv5v5-head { margin-bottom: 44px; }
  .sv5v5-stage { display: grid; grid-template-columns: minmax(0,260px) minmax(0,1fr); gap: 0 52px; }
  .sv5v5-sum { margin-bottom: 0; }
  .sv5v5-stage .sv5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 9 — SCROLL-SNAP STEPPER                              (fork of §5·9)
   One stage per card on a horizontal snap track. The only variant whose §5
   occupies a fixed height no matter how many stages arrive — four or seven,
   the section is one card tall. Cards are .svc-card geometry and stretch to
   the tallest, so the longest stage sets the height once.
   The track lives INSIDE .container, so the page itself can never scroll
   sideways; the scrollbar is styled thin and family-coloured and doubles as
   the progress indicator, which is why there is no JS here.

   This is also the closest match to what the live page already does — the
   shipped .approach-rows is a snap row below 941px — so it is the safe pick
   for a page that must not grow at all.
   ========================================================================== */
.sv5v9-head { margin-bottom: 24px; }
.sv5v9-hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--c-muted); }
.sv5v9-hint svg { width: 18px; height: 12px; color: var(--fam-700); }

.sv5v9-track {
  display: flex; gap: 14px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* room for the cards' hover shadow inside the scroll box */
  padding: 6px 2px 18px;
  scrollbar-width: thin; scrollbar-color: var(--fam-700) var(--c-line);
}
.sv5v9-track:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; }
.sv5v9-track::-webkit-scrollbar { height: 4px; }
.sv5v9-track::-webkit-scrollbar-track { background: var(--c-line); border-radius: 2px; }
.sv5v9-track::-webkit-scrollbar-thumb { background: var(--fam-700); border-radius: 2px; }

.sv5v9-card {
  flex: 0 0 84%; scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 22px 20px; background: #fff; color: var(--c-ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.sv5v9-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sv5v9-card h3 { font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 10px; }
.sv5v9-d { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--c-muted); margin: 0 0 14px; }
.sv5v9-card .sv5-bul { flex: 1; }
@media (hover: hover) {
  .sv5v9-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
}

@media (min-width: 561px) { .sv5v9-card { flex-basis: 54%; } }
@media (min-width: 761px) { .sv5v9-card { flex-basis: 40%; padding: 26px 24px; } }
@media (min-width: 941px) {
  .sv5v9 { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 56px; align-items: center; }
  .sv5v9-head { margin-bottom: 0; }
  .sv5v9-head .sv5-h2 { font-size: clamp(30px, 3vw, 38px); }
  .sv5v9-card { flex-basis: 46%; }
}
@media (min-width: 1181px) { .sv5v9-card { flex-basis: 32.4%; } }


/* ==========================================================================
   DESIGN 14 — ZIG-ZAG EDITORIAL                              (fork of §5·14)
   The home .glance split — copy one side, content the other — repeated per
   stage and alternated. Type-only, so the alternation is carried by a large
   gradient numeral rather than by photography.
   Rules only below 941 where the layout is a single column and needs them; at
   width the alternation itself is the separator.

   ⚠ FLAGGED, NOT FIXED. §5B of the brief names this as a length risk, and the
   measurement agrees: six alternating full-width blocks is the tallest thing
   in this catalogue at either width. It is kept because a page where §5 is the
   hero has nothing else with this much presence, and because at FOUR stages
   (Consulting) it is genuinely the best of the nine. It should not be put on a
   page whose §3 also runs long. Recommended for cutting if the set has to come
   down to six — see the Phase 1 report.
   ========================================================================== */
.sv5v14-head { margin-bottom: 32px; }
.sv5v14-head .sv5-h2 { max-width: 20ch; }

.sv5v14-stage { padding-block: 26px; border-top: 1px solid var(--c-line); }
.sv5v14-stage:last-child { border-bottom: 1px solid var(--c-line); }
.sv5v14-n { font-size: clamp(40px, 6vw, 64px); margin-bottom: 10px; }
.sv5v14-stage h3 { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); margin: 0 0 10px; }
.sv5v14-side .sv5-lede { font-size: 15px; max-width: 42ch; }
.sv5v14-stage .sv5-bul { margin-top: 18px; }

@media (min-width: 561px) {
  .sv5v14-stage .sv5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 941px) {
  .sv5v14-stage {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 0 64px; align-items: center;
    padding-block: 34px; border-top: none;
  }
  .sv5v14-stage:last-child { border-bottom: none; }
  /* the alternation IS the separator at width */
  .sv5v14-stage:nth-child(even) .sv5v14-side { order: 2; }
  .sv5v14-stage .sv5-bul { margin-top: 0; }
  .sv5v14-n { font-size: 64px; }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sv5v2-rail li, .sv5v2-rail a, .sv5v2-rail i,
  .sv5v4-row, .sv5v9-card, .sv5v13-n { transition: none; }
  .sv5v9-card:hover { transform: none; }
  .sv5v9-track { scroll-behavior: auto; }
}