/* ==========================================================================
   SERVICES SUB-PAGES — SECTION 2: SERVICE INTRODUCTION
   ==========================================================================
   Nine variants, in two sets:

     11 · 12 · 13 · 14   HOME-DERIVED — the priority set. Built by reusing
                         index.html's own structures (.glance, .glance-stats,
                         .g-num, .svc-cards--rows, .why-glance-stat) straight
                         out of styles.css, with only the delta declared here.
     1 · 2 · 3 · 5 · 6   FORKED from the approved Solutions §2 shortlist
                         (sol-02-intro.css), renamed .s2v* -> .sv2v* and
                         retuned for Services volume.

   Preview-only. Winners are merged into styles.css and this file is deleted.
   Namespaced .sv2vN- so nothing can reach a live page and parallel sessions
   cannot collide. NOT .svc- — styles.css already owns .svc-card,
   .svc-cards--rows, .svc-panel and more.

   ------------------------------------------------------------------------
   WHY THE DERIVED SET EXISTS
   ------------------------------------------------------------------------
   The Solutions variants match index.html's NUMBERS — 4px radius, #c4c4c4
   borders, neutral shadows, .22s hover — but invented their own shapes.
   That reads as compliant with the home page rather than derived from it.
   11-14 reuse the home page's actual vocabulary instead: the shipped class
   does the work, this file carries only what genuinely differs.

   Two consequences worth stating plainly:

     1. Every derived variant inherits breakpoints that have been in
        production since July. .glance-grid already collapses to one column
        at <=940 (styles.css:928); .glance-stats already tightens at <=560
        (:958); .svc-cards--rows already drops to 48x48 and border-only hover
        at <=560 (:474). None of that is re-solved here.
     2. The re-theme is ONE declaration. styles.css writes var(--c-accent)
        wherever a component wants its accent, so setting

            --c-accent: var(--fam-700)

        on the variant wrapper re-points every shipped class inside it to the
        blue family in a single line. That IS the whole substitution §7 of the
        brief describes; nothing else about the home components changes.

   ------------------------------------------------------------------------
   THE BASE — index.html, matched number for number
   ------------------------------------------------------------------------
     RADIUS      var(--radius) = 4px. Media only gets 8px (.glance-media).
                 Bento tiles get none (.feat-tile).
     BORDERS     neutral #c4c4c4 on cards, var(--c-line) on rules.
                 NEVER --fam-line.
     SHADOWS     neutral. 0 14px 30px rgba(20,20,40,.08) on cards,
                 0 30px 60px rgba(0,0,0,.35) on media. NEVER --fam-shadow.
     HOVER       .22s and modest — border-colour, translateY(-2px), arrow
                 nudging translateX(4px). No wipes, blooms, sheen or sibling
                 dimming anywhere in this file.
     MOTIF       the 60x60 outlined arrow box (.card-arrow), 48x48 in row
                 lists.
     GRADIENT    held back — large numerals (.g-num) and thin accent rules
                 only. Never a hover wipe.
     ROW LISTS   .svc-cards--rows: no border, no radius, one var(--c-line)
                 bottom rule; hover changes ONLY that rule's colour.
     DARK STAT   .why-glance-stat — var(--c-dark) fill, 4px radius, a SOLID
                 3px accent bottom border.

   COLOUR
   Tokens only. No hardcoded family hex. --fam-100 does NOT exist in the blue
   set and appears nowhere in this file. The only literals are the two the
   home page itself hardcodes — #c4c4c4 borders and its neutral shadows — plus
   #323232 body and #b7b7c2 resting numerals, all lifted verbatim from
   styles.css.

   HEIGHT BUDGET — measured, not guessed
   Live consulting.html §2:  582px @390  ·  334px @1440
   Live AMS §2 (the longest): 896px @390 ·  500px @1440
   §2 is the tightest of the four designed sections. 11 and 12 come in at or
   under the live page; 13 and 14 buy their extra height back out of §3, where
   the live .dx-index costs 3,164px for six blocks.

   RESPONSIVE — mobile-first at 390px stepping up with min-width, inverting
   styles.css's desktop-first queries. Safe: no shared selectors.
   Steps: 390 base · 561 · 761 · 941
   ========================================================================== */


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

.sv2-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 32px 8px; }
.sv2-label .container { display: flex; flex-direction: column; gap: 8px; }
.sv2-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.sv2-label h2 b { color: var(--fam-700); font-weight: 800; }
.sv2-label p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-muted); max-width: 82ch; }
.sv2-label p b { color: var(--c-body); font-weight: 700; }
.sv2-label code { font-size: 13px; color: var(--fam-700); }
.sv2-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; }
.sv2-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;
}
.sv2-tags span.new  { color: #0b4a1f; background: #eaf7ee; border-color: #c3e6cd; }
.sv2-tags span.warn { color: #8a4a00; background: #fdf5ea; border-color: #f0dcc0; }

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


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

/* .services-title: 700 (not 900), line-height .98, -.025em. Stepped down from
   the home page's 64px cap because §2 sits under an H1 hero. */
.sv2-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;
}
.sv2-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 */
.sv2-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; }
.sv2-lede + .sv2-lede { margin-top: 16px; }
.sv2-lede b { font-weight: 600; color: var(--c-ink); }
.sv2-role { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--c-body); margin: 0; }
.sv2-role b { font-weight: 700; color: var(--c-ink); }

/* THE MOTIF — .card-arrow, 60x60, neutral border, 4px radius. */
.sv2-arrow {
  align-self: flex-end; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border: 1px solid #c4c4c4;
  border-radius: var(--radius); color: var(--fam-700);
  transition: border-color .22s var(--ease);
}
.sv2-arrow svg { width: 26px; height: 24px; transition: transform .22s var(--ease); }
.sv2-arrow--sm { width: 48px; height: 48px; align-self: center; }
.sv2-arrow--sm svg { width: 22px; height: 20px; }

/* .link-arrow: 20px / 700 / accent, svg 18x16 nudging 4px. The home page's own
   box is 24px tall; 10px of block padding pulled back by the same margin takes
   the hit box to 44px without moving the layout a pixel. */
.sv2-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding-block: 10px; margin: 4px 0 -10px;
  color: var(--fam-700); font-weight: 700; font-size: 20px; line-height: 1.2;
}
.sv2-link svg { width: 18px; height: 16px; transition: transform .2s var(--ease); }
.sv2-link:hover svg { transform: translateX(4px); }

/* .g-num: gradient-clipped numerals — one of only two places the home page
   lets the gradient appear. */
.sv2-num {
  font-size: clamp(38px, 5vw, 70px); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; background: var(--fam-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


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


/* ==========================================================================
   DESIGN 11 — GLANCE STAT INTRO           derived from .glance / .glance-stats
   ==========================================================================
   The home page's own "introduce with proof" move, on a light ground: the
   copy head beside the big gradient numerals. Shipped classes carry the whole
   layout — .glance-grid (1.15fr .85fr, 60px, centred; one column at <=940)
   and .glance-stats (2-up, tightening at <=560).

   .glance itself is a dark band, so the two colour rules it sets on its
   children have to be re-stated for white: .g-label is rgba(255,255,255,.74)
   and .g-num takes --c-grad, the sitewide blue->violet ramp. Those two lines
   ARE this variant. Nothing else is redeclared.

   NO MEDIA PANEL, deliberately. This is the short §2 — the one that comes in
   under the live page at both widths. Design 13 is the same device with the
   media and the dark band, for pages that want §2 to be the moment.

   Reuses: .glance-grid .glance-stats .glance-stat .g-num .g-label
   ========================================================================== */
.sv2v11 { --c-accent: var(--fam-700); }
.sv2v11 .glance-head { max-width: 62ch; margin-bottom: 0; }
/* .glance IS A DARK BAND, and it sets FOUR rules on its children that only make
   sense there. All four have to be restated for a light ground, and missing any
   one of them is invisible in the stylesheet and obvious in the browser:
     .glance-head h2   clamp(38px,5vw,66px) — a display size that would
                       out-shout the H1 hero two sections up. Restated at the
                       §2 step-down rather than neutralised: `font: inherit`
                       also wipes .sv2-h2 and renders the heading at body size.
     .glance-head p    rgba(255,255,255,.72) — white on white, i.e. the lede
                       vanishes entirely.
     .g-num            var(--c-grad), the sitewide blue->violet ramp.
     .g-label          rgba(255,255,255,.74).
   Specificity note: .glance-head h2 is (0,1,1) and beats the shared .sv2-h2 at
   (0,1,0), so these have to be written against the wrapper to win. */
.sv2v11 .glance-head .sv2-h2 {
  font-size: clamp(30px, 4.8vw, 52px); font-weight: 700;
  line-height: 1.0; letter-spacing: -.025em;
}
.sv2v11 .glance-head p { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; }
.sv2v11 .g-num   { background: var(--fam-grad); -webkit-background-clip: text; background-clip: text; }
.sv2v11 .g-label { color: var(--c-muted); }
/* .glance-grid is centred, which is right when a 380px media panel is the
   other column. Against a stats block of the same height, start-aligned reads
   straighter. */
.sv2v11 .glance-grid { align-items: start; gap: 34px; }
.sv2v11 .glance-stats { gap: 30px 40px; }
.sv2v11-rail {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; align-items: baseline;
}
.sv2v11-rail span { font-size: 15px; font-weight: 300; line-height: 1.7; color: #323232; }
.sv2v11-rail span:not(:last-child)::after { content: "\00b7"; margin: 0 10px; color: #b7b7c2; }
@media (min-width: 941px) {
  .sv2v11 .glance-grid { gap: 60px; }
  .sv2v11 .glance-stats { gap: 40px 48px; }
}


/* ==========================================================================
   DESIGN 12 — INTRO + ENGAGEMENT ROW INDEX      derived from .svc-cards--rows
   ==========================================================================
   Every Services §2 doc lists the situations VISCAP is typically brought into
   — "an S/4HANA evaluation, a RISE or GROW assessment, an HR and payroll
   transformation…". On the live pages that list is buried mid-paragraph. Here
   it becomes the home page's row list, which is exactly what a set of short
   labelled links is for.

   The rows are .svc-cards--rows verbatim: no border, no radius, one
   var(--c-line) bottom rule, a 48x48 .card-arrow, and a hover that changes
   only the rule's colour. Nothing slides, nothing dims. styles.css:474 already
   tightens padding and drops the title to 17px below 561px.

   The DELTA is one line — the rows carry no body copy on the home page, and
   these want a half-line of qualifier under the title.

   Reuses: .svc-cards--rows .svc-card .card-arrow
   ========================================================================== */
.sv2v12 { --c-accent: var(--fam-700); display: grid; gap: 26px; }
.sv2v12-head .sv2-lede { max-width: 68ch; margin-top: 16px; }
/* the row list is title-only on the home page. Let the title column stack a
   qualifier under it and keep the arrow centred against both lines. */
.sv2v12 .svc-cards--rows .svc-card { align-items: center; }
.sv2v12-rowtext { min-width: 0; }
.sv2v12-rowtext h4 { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.sv2v12-rowtext p  { font-size: 14.5px; font-weight: 300; line-height: 1.5; color: #323232; margin: 4px 0 0; }
@media (min-width: 761px) {
  .sv2v12-rowtext h4 { font-size: 20px; }
}
@media (min-width: 941px) {
  .sv2v12 { grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 64px; align-items: start; }
  .sv2v12-head { position: sticky; top: calc(var(--header-h) + 26px); }
}


/* ==========================================================================
   DESIGN 13 — DEEP GLANCE BAND (dark)             derived from .glance in full
   ==========================================================================
   The home page's .glance section taken whole — head, stats, media panel —
   and re-themed onto --fam-grad-deep. This is §2's dark moment and the only
   variant here that carries a photograph.

   Media keeps the home treatment exactly: 8px radius, the neutral
   0 30px 60px rgba(0,0,0,.35) shadow, and the left:40px / bottom:15px nudge
   out of its grid column at >=941 (styles.css:705). All of that is inherited,
   not restated — the only media rule below is the family-tinted fallback
   colour behind the photo.

   ⚠ NUMERALS ARE SOLID HERE, NOT GRADIENT — the same deviation
   sol-05-role.css documents for its deep band, and it applies just as hard in
   blue. --fam-grad runs --fam-700 (#0436AB) to --fam-400 (#5C91FB); against the
   band's --fam-800 (#012a86) mid-stop that is:

       --fam-700 end   1.27:1     invisible
       --fam-400 end   4.13:1     legible

   so a gradient numeral fades out from left to right across its own glyphs.
   The home page never hits this because .g-num sits on a near-black. Rather
   than invent a second gradient, numerals on this band are SOLID
   var(--fam-300) — the blue set's on-dark accent, 4.13:1 — and the gradient
   does not appear on the band at all. Design 11 keeps the gradient because
   there it sits on white, where --fam-grad reads 10.2:1 to 5.3:1.

   Reuses: .glance-head .glance-grid .glance-stats .g-num .g-label .glance-media
   ========================================================================== */
.sv2v13 { --c-accent: var(--fam-700); background: var(--fam-grad-deep); color: #fff; padding-block: 40px; }
.sv2v13 .glance-head { max-width: 720px; margin-bottom: 34px; }
/* same specificity trap as design 11: .glance-head h2 is (0,1,1) and would
   otherwise render this at the home band's clamp(38px,5vw,66px). Only the size
   moves — the band is dark, so .glance-head p's white is already correct here. */
.sv2v13 .glance-head .sv2-h2 {
  font-size: clamp(30px, 4.8vw, 52px); font-weight: 700;
  line-height: 1.0; letter-spacing: -.025em; color: #fff;
}
.sv2v13 .glance-head p { font-size: 16px; font-weight: 300; }
.sv2v13 .sv2-eyebrow { color: var(--fam-200); }
.sv2v13 .sv2-lede { color: rgba(255,255,255,.78); }
.sv2v13 .sv2-lede b { color: #fff; }
/* solid, not gradient — see the contrast note above. background:none is needed
   as well as a colour, because .g-num sets background-clip:text and a colour
   alone would still be clipped away to transparent. */
.sv2v13 .g-num {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--fam-300);
}
/* .glance-media's own fallback is #1b1146, a violet. Only the fallback moves —
   radius, shadow and the >=941 nudge are all inherited. */
.sv2v13 .glance-media { background-color: var(--fam-900); }
.sv2v13 .sv2-link { color: var(--fam-200); }
@media (min-width: 941px) {
  .sv2v13 { padding-block: 44px; }
}


/* ==========================================================================
   DESIGN 14 — INTRO + DARK STAT CARDS         derived from .why-glance-stat
   ==========================================================================
   The home page's Why VISCAP grid: a line of copy above a dark stat card with
   a solid 3px accent bottom border. Four of them, 4-up at desktop, 2-up at
   <=940 and 1-up at <=560 — all of that already in styles.css:664-681.

   Used here for the four things a Services §2 has to establish — what the
   service is for, the scope it covers, where it starts, and what it hands on
   to. The stat card carries the short answer; the copy above carries the
   sentence.

   The one substitution does the whole re-theme: --c-accent on the wrapper
   turns .why-glance-stat's 3px bottom border blue.

   Reuses: .why-glance-grid .why-glance-col .why-glance-copy
           .why-glance-stat .why-glance-num .why-glance-label
   ========================================================================== */
.sv2v14 { --c-accent: var(--fam-700); display: grid; gap: 30px; }
.sv2v14-head .sv2-lede { max-width: 66ch; margin-top: 16px; }
/* the home grid is a full-width band under a centred title; here it sits
   beside the copy at width, so it needs its own top spacing rather than
   .why-glance-title's 44px margin */
.sv2v14 .why-glance-grid { gap: 22px; }
/* the home card's label wraps to two lines on "UAE, USA, UK and India"; these
   labels are longer, so the numeral is a word rather than a figure and steps
   down to match */
.sv2v14 .why-glance-num { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; }
@media (min-width: 561px) {
  .sv2v14 .why-glance-grid { gap: 24px; }
}
@media (min-width: 941px) {
  .sv2v14 .why-glance-grid { gap: 28px; }
}


/* ==========================================================================
   ############  FORKED SET — 1, 2, 3, 5, 6  ############
   Forked from sol-02-intro.css. Class names keep the SOURCE variant number
   per the namespace rule: .s2v1- becomes .sv2v1-, section digit changes,
   variant digit never does.

   RETUNE APPLIED
     - Solutions §2 carried up to nine scope themes; Services §2 is one block
       plus about five supporting points. Design 3's sticky head is released
       below 941 -> 1081 because at six rows there is almost nothing for it to
       stick past, and design 6's ledger columns are widened for the shorter
       lists.
     - Every var(--fam-*) re-checked against the blue set. No --fam-100.
   ========================================================================== */


/* ==========================================================================
   DESIGN 1 — EDITORIAL SPLIT + GLANCE BAND                    (fork of §2·1)
   Heading and lede in white, then a dark band carrying the positioning
   statement beside a media panel. Media: 8px radius, neutral shadow, nudged
   out of its column at >=941.
   ========================================================================== */
.sv2v1-top { display: grid; gap: 20px; }
.sv2v1-rail { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; align-items: baseline; }
.sv2v1-rail span { font-size: 15px; font-weight: 300; line-height: 1.7; color: #323232; }
.sv2v1-rail span:not(:last-child)::after { content: "\00b7"; margin: 0 10px; color: #b7b7c2; }

.sv2v1-band {
  margin-top: 34px; padding-block: 34px;
  background: var(--fam-grad-deep); color: #fff;
}
.sv2v1-inner { display: grid; gap: 26px; }
.sv2v1-band .sv2-eyebrow { color: var(--fam-200); }
.sv2v1-statement {
  margin: 0; font-size: 19px; font-weight: 300; line-height: 1.55;
  letter-spacing: -.01em; color: rgba(255,255,255,.86);
}
.sv2v1-statement b { color: #fff; font-weight: 700; }
.sv2v1-media {
  border-radius: 14px; overflow: hidden; min-height: 240px;
  background: var(--img) center/cover no-repeat, var(--fam-900);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.sv2v1-band .sv2-link { color: var(--fam-200); }
@media (min-width: 761px) {
  .sv2v1-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 52px; align-items: start; }
  .sv2v1-statement { font-size: 21px; }
  .sv2v1-media { min-height: 320px; }
}
@media (min-width: 941px) {
  .sv2v1-band { padding-block: 44px; }
  .sv2v1-inner { grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
  .sv2v1-statement { font-size: 24px; max-width: 44ch; }
  .sv2v1-media { min-height: 380px; position: relative; left: 40px; bottom: 15px; }
}


/* ==========================================================================
   DESIGN 2 — FRAGMENT -> CONVERGE (dark)                      (fork of §2·2)
   A dark band names the starting condition; a white .svc-card overlaps it
   with the resolution and carries the 60x60 arrow.
   ========================================================================== */
.sv2v2-problem { background: var(--fam-grad-deep); color: #fff; padding: 36px 0 82px; }
.sv2v2-problem .sv2-eyebrow { color: var(--fam-200); }
.sv2v2-problem h2 { color: #fff; max-width: 18ch; }
.sv2v2-list { list-style: none; margin: 24px 0 0; padding: 0; }
.sv2v2-list li {
  padding: 17px 4px; font-size: 16px; font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: border-bottom-color .22s var(--ease), color .22s var(--ease);
}
.sv2v2-list li:first-child { border-top: 1px solid rgba(255,255,255,.22); }
@media (hover: hover) {
  .sv2v2-list li:hover { border-bottom-color: #fff; color: #fff; }
}

/* the home .svc-card, verbatim: 4px radius, #c4c4c4 border, 31px padding,
   neutral shadow, 2px lift */
.sv2v2-answer {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 26px 22px 22px; margin: -54px 0 0;
  box-shadow: 0 14px 30px rgba(20,20,40,.08);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.sv2v2-answer h3 { font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0 0 10px; }
.sv2v2-role { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); }
@media (hover: hover) {
  .sv2v2-answer:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.14); transform: translateY(-2px); }
  .sv2v2-answer:hover .sv2-arrow { border-color: var(--fam-700); }
  .sv2v2-answer:hover .sv2-arrow svg { transform: translateX(4px); }
}
.sv2v2-answer:focus-within { border-color: var(--fam-700); }
@media (min-width: 761px) {
  .sv2v2-problem { padding: 48px 0 94px; }
  .sv2v2-answer { margin: -62px 28px 0; padding: 31px; }
}
@media (min-width: 941px) {
  .sv2v2-problem { padding: 60px 0 112px; }
  .sv2v2-inner { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 60px; align-items: start; }
  .sv2v2-list { margin-top: 0; }
  .sv2v2-answer {
    margin: -78px auto 0; max-width: 1000px;
    display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) auto;
    gap: 40px; align-items: center;
  }
  .sv2v2-answer .sv2-arrow { align-self: center; }
}


/* ==========================================================================
   DESIGN 3 — NUMBERED ROW INDEX                               (fork of §2·3)
   The .svc-cards--rows pattern: one var(--c-line) rule per row, a 48x48 arrow
   box, hover changing only that rule's colour.

   RETUNE: the source pinned the head at >=941 because Solutions §2 ran nine
   to thirteen rows past it. Services §2 runs five or six, which at 941 is
   barely one viewport — a head that sticks for 200px and then releases reads
   as a glitch rather than as orientation. Held back to 1081, where the rows
   are tall enough for the pin to do something.
   ========================================================================== */
.sv2v3 { display: grid; gap: 28px; }
.sv2v3-index { display: flex; flex-direction: column; gap: 0; }
.sv2v3-item {
  display: grid; grid-template-columns: 38px minmax(0,1fr) 48px;
  gap: 0 12px; align-items: center;
  padding: 18px 2px; border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease);
}
.sv2v3-item:first-child { border-top: 1px solid var(--c-line); }
.sv2v3-n {
  font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: #b7b7c2; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
.sv2v3-item h4 { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.sv2v3-item p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 4px 0 0; }
@media (hover: hover) {
  .sv2v3-item:hover { border-bottom-color: var(--fam-700); }
  .sv2v3-item:hover .sv2v3-n { color: var(--fam-700); }
  .sv2v3-item:hover .sv2-arrow { border-color: var(--fam-700); }
  .sv2v3-item:hover .sv2-arrow svg { transform: translateX(4px); }
}
.sv2v3-item:focus-within { border-bottom-color: var(--fam-700); }
@media (min-width: 761px) {
  .sv2v3-item { grid-template-columns: 56px minmax(0,1fr) 48px; gap: 0 20px; padding: 22px 4px; }
  .sv2v3-n { font-size: 24px; }
  .sv2v3-item h4 { font-size: 20px; }
}
@media (min-width: 941px) {
  .sv2v3 { grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 64px; align-items: start; }
}
@media (min-width: 1081px) {
  .sv2v3-head { position: sticky; top: calc(var(--header-h) + 26px); }
}


/* ==========================================================================
   DESIGN 5 — MEDIA + COPY PANEL                               (fork of §2·5)
   The .glance split on a light ground: media panel beside the copy, themes
   below as .svc-card boxes. Media keeps the home treatment exactly.

   RETUNE: the source dropped the theme cards to three columns at >=941 for
   nine themes. Services §2 has four to six supporting points, so the cards
   stay two-up at width — three columns of two rows left a hole in the last.
   ========================================================================== */
.sv2v5 { display: grid; gap: 28px; }
.sv2v5-media {
  border-radius: 14px; overflow: hidden; min-height: 240px;
  background: var(--img) center/cover no-repeat, var(--fam-900);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
/* .svc-cards: 2-up grid, 18px gap, one column on small screens */
.sv2v5-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 4px; }
.sv2v5-card {
  display: flex; flex-direction: column;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 22px; color: var(--c-ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.sv2v5-card h4 { font-size: 18px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.sv2v5-card p { font-size: 15px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; flex: 1; }
@media (hover: hover) {
  .sv2v5-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
}
@media (min-width: 561px) {
  .sv2v5-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 761px) {
  .sv2v5-media { min-height: 320px; }
  .sv2v5-card { padding: 26px; }
}
@media (min-width: 941px) {
  .sv2v5-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
  .sv2v5-media { min-height: 400px; position: relative; right: 40px; bottom: 15px; }
  .sv2v5-cards { gap: 18px; margin-top: 34px; }
}


/* ==========================================================================
   DESIGN 6 — BEFORE / AFTER LEDGER                            (fork of §2·6)
   Two .svc-cards--rows lists side by side. The "with VISCAP" column is marked
   the way the home page marks a stat block — .why-glance-stat's dark head with
   a solid 3px accent bottom border, not a gradient spine.

   RETUNE: the source split at 761 for nine-item lists. Services §2's lists run
   four to six, so the split is held to 941 — at 761 two columns of five short
   rows left the section wider than it was tall and the pairing stopped
   reading.
   ========================================================================== */
.sv2v6-grid { display: grid; gap: 30px; margin-top: 30px; }
.sv2v6-cap {
  display: block; padding: 14px 18px 12px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
.sv2v6-col--now .sv2v6-cap { border: 1px solid var(--c-line); color: var(--c-muted); background: var(--c-surface-2); }
.sv2v6-col--next .sv2v6-cap { background: var(--c-dark); color: #fff; border-bottom: 3px solid var(--fam-700); }

.sv2v6-list { list-style: none; margin: 16px 0 0; padding: 0; }
.sv2v6-list li {
  padding: 15px 4px; font-size: 15.5px; line-height: 1.5;
  border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease), color .22s var(--ease);
}
.sv2v6-list li:first-child { border-top: 1px solid var(--c-line); }
.sv2v6-col--now .sv2v6-list li { color: var(--c-muted); font-weight: 300; }
.sv2v6-col--next .sv2v6-list li { color: var(--c-ink); font-weight: 400; }
@media (hover: hover) {
  .sv2v6-col--next .sv2v6-list li:hover { border-bottom-color: var(--fam-700); }
  .sv2v6-col--now .sv2v6-list li:hover { border-bottom-color: #c4c4c4; color: var(--c-body); }
}
.sv2v6-close { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--c-line); }
@media (min-width: 941px) {
  .sv2v6-grid { grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 40px; }
  .sv2v6-list li { font-size: 16px; }
}


/* ==========================================================================
   REDUCED MOTION
   The motion budget is already tiny — border colours, a 2px lift and a 4px
   arrow nudge. This removes the transforms and leaves the colour changes,
   which then arrive instantly.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sv2-arrow, .sv2-arrow svg, .sv2-link svg,
  .sv2v2-answer, .sv2v2-list li, .sv2v3-item, .sv2v3-n,
  .sv2v5-card, .sv2v6-list li { transition: none; }
  .sv2v2-answer:hover, .sv2v5-card:hover { transform: none; }
  .sv2-arrow svg, .sv2-link svg { transform: none !important; }
}