/* ==========================================================================
   SERVICES SUB-PAGES — SECTION 3: "WHAT VISCAP DELIVERS"
   ==========================================================================
   Nine variants, in two sets:

     11 · 12 · 13 · 14      HOME-DERIVED — the priority set, built by reusing
                            index.html's own structures out of styles.css:
                            .svc-cards, .services-tabs + .svc-panel,
                            .svc-cards--rows, .featured-grid + .feat-tile.
     3 · 4 · 8 · 9 · 10     FORKED from the approved Solutions §4 shortlist
                            (sol-04-modules.css), renamed .s4v* -> .sv3v* and
                            retuned from thirteen modules down to six.

   Preview-only. Namespaced .sv3vN- — NOT .svc-, which styles.css already owns.

   ------------------------------------------------------------------------
   THE CONTENT, AND WHY THIS SECTION IS THE PAGE'S BANK
   ------------------------------------------------------------------------
   Services §3 is EXACTLY SIX BLOCKS on all eight pages — verified against all
   eight reference docs, no exceptions.

   ⚠ THE BLOCK COUNT IS CONSTANT; THE CONTENT VOLUME IS NOT. Counted out of the
   docs, the Content Scope lists run:

       Consulting                    24 items    (4 per block)
       Implementation & Rollout      69
       Migration & Modernization     77
       AMS                           87
       Support & Optimization        93
       Integration                  113
       Training & Change            124
       Data, Reporting & Analytics  133 items    (18-26 per block)

   That is a 5.5x swing — WORSE than the 2x swing the Solutions §4 set this
   forks from was engineered for. An earlier version of this comment claimed
   "there is no stress case here"; that was written against Consulting alone
   and is wrong.

   Every LIVE page shows exactly four items per block regardless, because
   .dx-tags holds four — so the live pages are dropping up to 80% of the scope
   the docs specify, and their ~3,164px §3 is not a fair budget for a section
   that actually prints its content.

   Consequences, measured on Data, Reporting & Analytics (133 items), §3 alone:

       design 12 tabs           1,168 / 804     one panel visible — flat
       design  8 column flow    4,413 / 2,197   UNDER the live §3 at 1440
       design  9 sticky bar     5,827 / 2,550   UNDER the live §3 at 1440
       design  4 sticky index   7,892 / 4,320   the ruled grid costs ~2x a dot

   At 1440 everything except design 4 comes in under the page it replaces. At
   390 a one-column list of 133 items is ~4,400px and no amount of tuning
   changes that — only design 12 is width-independent.

   ------------------------------------------------------------------------
   THE BASE — index.html, matched number for number
   ------------------------------------------------------------------------
     RADIUS      var(--radius) = 4px. Media only 8px. Bento tiles none.
     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.
                 NEVER --fam-shadow.
     HOVER       .22s, modest — border-colour, translateY(-2px), arrow 4px.
                 No wipes, blooms, sheen or sibling dimming in this file.
     MOTIF       the outlined arrow box, 60x60 on cards / 48x48 in row lists.
                 See the note above .sv3-link for where it is and is not used.
     GRADIENT    large numerals (.g-num) and thin accent rules only.
     ROW LISTS   .svc-cards--rows — one var(--c-line) bottom rule, hover
                 changes ONLY that rule's colour.
     DARK STAT   .why-glance-stat — var(--c-dark), 4px, solid 3px accent rule.

   THE RE-THEME IS ONE LINE. styles.css writes var(--c-accent) wherever a
   component wants its accent, so

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

   on a variant wrapper re-points every shipped class inside it to the blue
   family. That is the entire substitution.

   COLOUR — tokens only. No --fam-100 (it does not exist in the blue set).
   The only literals are the ones index.html itself hardcodes: #c4c4c4 borders,
   its two neutral shadows, #323232 body and #b7b7c2 resting numerals.

   JAVASCRIPT
   Design 12 needs NONE — main.js:108-147 already drives .svc-tab / .svc-panel
   for every .services-grid on the page, generically, because the home page
   runs the same device. Design 10 (forked) carries the inline ARIA-tablist
   controller from the Solutions page, retargeted to .sv3v10-rail.

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


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

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

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


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

/* .services-title: 700, line-height .98, -.025em. Stepped down from the home
   page's 64px cap because §3 sits under an H1 hero and an H2 at §2. */
.sv3-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;
}
.sv3-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 */
.sv3-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; max-width: 68ch; }
.sv3-lede b { font-weight: 600; color: var(--c-ink); }

/* the small uppercase label that names a block ("Content scope"). At 11.5px
   uppercase it behaves as a caption instead of competing with the block title.
   NOTE: no top margin, by design — a block that needs a SECOND list has to add
   its own spacing inline. */
.sv3-cap {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-muted); margin: 0 0 9px;
}

/* THE MOTIF — where it is, and where it deliberately is not.
   §3 describes work; with the exception of design 3's accordion toggle there
   is nothing per-block to click, and an arrow box on a non-link promises a
   destination that does not exist. So: design 3 carries the 48x48 geometry as
   its toggle, and .sv3-link below carries "this goes somewhere" in 8, 9 and
   10. The derived set follows the same rule — 11 and 13 are articles, not
   links, and carry no arrow. */

/* .link-arrow: 20px / 700 / accent, svg 18x16 nudging 4px. The home box is
   24px tall; 10px of block padding against a 6px margin keeps every visible
   value identical and takes the hit box to 44px. */
.sv3-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px; padding-block: 10px;
  color: var(--fam-700); font-weight: 700; font-size: 20px; line-height: 1.2;
}
.sv3-link svg { width: 18px; height: 16px; transition: transform .2s var(--ease); }
.sv3-link:hover svg { transform: translateX(4px); }
.sv3-link--sm { font-size: 15px; margin-top: 4px; padding-block: 13px; }
.sv3-link--sm svg { width: 16px; height: 14px; }

/* .g-num: gradient-clipped numerals. Only where the numeral is genuinely
   large (>=34px) — at ledger size a gradient inside two glyphs reads as a
   muddy colour rather than a ramp. */
.sv3-num {
  display: block; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: var(--fam-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Outlined chips — built from the parts the home page has: a 1px #c4c4c4
   border at var(--radius), the same edge a .svc-card carries. No fill, no
   --fam-chip tint; a tinted pill is the Solutions library. */
.sv3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sv3-chip {
  max-width: 100%; border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 6px 11px; font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--c-ink);
}

/* the stacked one-per-line list — cheaper vertically than chips (no padding,
   no borders), which is what the narrow contexts need */
.sv3-rail { display: grid; gap: 2px; margin: 0; }
.sv3-rail span { font-size: 14.5px; font-weight: 400; line-height: 1.5; color: var(--c-body); }

/* the middot rail — single words or short phrases only. Product names of 39
   characters wrap after almost every item at 390px and leave the separator
   dangling; scope items of two or three words do not. */
.sv3-mid { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; }
.sv3-mid span { font-size: 14px; font-weight: 300; line-height: 1.7; }
.sv3-mid span:not(:last-child)::after { content: "\00b7"; margin: 0 8px; opacity: .55; }

/* a trailing summary sentence. A footnote, so it sits under a hairline and
   never at body weight. */
.sv3-fnote {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--c-line);
  font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--c-body);
}
/* ...except after a hairline-ruled scope list, which already closes with a
   rule. Two hairlines 14px apart read as a mistake, not a break. */
.sv3v4-mod > .sv3-fnote { border-top: none; margin-top: 4px; padding-top: 10px; }

/* SCOPE DEVICE — the dot list. styles.css marks list items with a 7px gradient
   square (.kcol li::before); this is the same geometry in one flat --fam-700
   step. 5px, 1px radius: square, like everything else on the home page.
   Spacing is margin, not grid gap, because the multi-column contexts below set
   `columns` rather than grid tracks — column flow packs uneven items exactly
   where a row-wise grid would open a hole beside every short one. */
.sv3-dots { margin: 0; padding: 0; list-style: none; }
.sv3-dots li {
  position: relative; padding-left: 16px; margin-bottom: 6px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  font-size: 14.5px; font-weight: 300; line-height: 1.45; color: #323232;
}
.sv3-dots li:last-child { margin-bottom: 0; }
.sv3-dots li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--fam-700);
}


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


/* ==========================================================================
   DESIGN 11 — CARD GRID, 2-UP                        derived from .svc-cards
   ==========================================================================
   The home page's most-used device, and the one it repeats 31 times: a 2-up
   grid of .svc-card boxes at 4px radius on a #c4c4c4 border, 31px padding,
   with the .22s border-colour + 2px lift hover. Six blocks is three clean
   rows; styles.css:491 already drops it to one column at <=940.

   The card is an <article>, not an <a>, and carries NO arrow box. §3 describes
   what VISCAP does; there is no per-block destination, and the 60x60 arrow is
   the home page's promise that there is one. That is the whole delta from the
   home markup, and it is a deliberate subtraction rather than an omission.

   In its place the card carries the Content Scope list, which is what §3
   actually has and the home card does not.

   Reuses: .svc-cards .svc-card
   ========================================================================== */
.sv3v11 { --c-accent: var(--fam-700); }
.sv3v11 .svc-cards { margin-top: 30px; }
/* the home card is padding-bottom:68px on index.html only, to clear the
   absolutely-positioned arrow. No arrow here, so that comes off.
   PADDING IS STEPPED, and this is a measured decision rather than taste.
   .svc-card is a flat 31px at every width because on the home page it holds a
   title and two lines. With a scope list inside, 31px on a 350px column left
   248px of measure and pushed the 1-up mobile stack to 3,254px — 90px OVER the
   live §3 it replaces. 22/20 at phone width brings it to budget and the full
   31px returns at 1081 where the column is wide enough to carry it. */
.sv3v11 .svc-card { padding: 22px 20px 20px; }
.sv3v11-n {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--fam-700); font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
/* .svc-card h4 is 20px/700/1.4 — inherited, not restated */
.sv3v11 .svc-card p { flex: none; }
.sv3v11-scope { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); }
@media (min-width: 761px) {
  .sv3v11 .svc-card { padding: 28px 28px 24px; }
}
@media (min-width: 1081px) {
  .sv3v11 .svc-card { padding: 31px 31px 26px; }
  .sv3v11-scope .sv3-dots { columns: 2; column-gap: 24px; }
}


/* ==========================================================================
   DESIGN 12 — TABBED EXPLORER            derived from .services-tabs/.svc-panel
   ==========================================================================
   The home page runs this device for eight services; §3 runs it for six
   delivery blocks. It is the shortest §3 possible and the only one whose
   height does not move at all with item count — one panel is visible, so six
   blocks and thirteen cost the same.

   NO NEW JAVASCRIPT. main.js:108-147 binds every .svc-tab inside every
   .services-grid on the page, scoped per grid, because index.html already
   needs exactly this. Click and desktop-hover both work, aria-selected is
   maintained, and .services-panels is auto-aligned to the first tab.

   Mobile is inherited whole (styles.css:495-518): the vertical tab column
   becomes a horizontal swipeable strip at <=940 with the next tab peeking at
   the edge to signal that it scrolls. That behaviour has been in production
   since July.

   TWO DELTAS ONLY:
     - .services-aside .services-title is white-space:nowrap, which is right
       for "Our SAP services" and wrong for "What VISCAP Delivers".
     - the panel needs the Content Scope list under the intro.

   Reuses: .services-grid .services-aside .services-title .services-tabs
           .svc-tab .services-panels .svc-panel .svc-panel-title
           .svc-panel-intro .link-arrow
   ========================================================================== */
.sv3v12 { --c-accent: var(--fam-700); }
/* the home heading is one short line in a 360px column; this one is three
   words longer and must be allowed to wrap */
.sv3v12 .services-aside .services-title {
  white-space: normal; margin-top: 0; font-size: clamp(26px, 2.9vw, 36px);
  line-height: 1.1;
}
/* .svc-tab::after is a 3px var(--c-grad) underline — the sitewide blue->violet
   ramp. Re-pointed to the family, which is the same thin-accent-rule licence
   the home page grants it. */
.sv3v12 .svc-tab::after { background: var(--fam-grad); }
.sv3v12 .svc-tab:hover  { color: var(--fam-700); }
.sv3v12 .svc-panel-intro { max-width: 72ch; }
.sv3v12-scope { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-line); }
@media (min-width: 561px) {
  .sv3v12-scope .sv3-dots { columns: 15em; column-gap: 28px; }
}
@media (min-width: 1081px) {
  .sv3v12-scope .sv3-dots { columns: 15em; column-gap: 30px; }
}


/* ==========================================================================
   DESIGN 13 — ROW LIST                          derived from .svc-cards--rows
   ==========================================================================
   The densest always-open treatment the home page has: no border, no radius,
   one var(--c-line) bottom rule per row, and a hover that changes only that
   rule's colour. Nothing slides, nothing dims, nothing lifts.

   The home row is title-only and centres a 48x48 arrow against it. §3's rows
   carry a lede and a scope list and have nowhere to link, so the row becomes a
   two-column grid — a numeral and title column against the scope — and the
   arrow is dropped for the same reason as design 11.

   styles.css:474 already tightens padding and drops the title to 17px below
   561px; that is inherited, not restated.

   Reuses: .svc-cards--rows .svc-card
   ========================================================================== */
.sv3v13 { --c-accent: var(--fam-700); }
.sv3v13 .svc-cards--rows { margin-top: 28px; }
/* the home row is flex-direction:row / align-items:center, which puts a title
   beside an arrow. These rows stack a lede and a list, so they go back to a
   column at phone width and become a two-track grid once there is room. */
.sv3v13 .svc-cards--rows .svc-card {
  flex-direction: column; align-items: stretch; padding: 22px 2px;
}
.sv3v13-rh { display: flex; align-items: baseline; gap: 12px; }
.sv3v13-n { font-size: 14px; font-weight: 700; color: #b7b7c2; font-variant-numeric: tabular-nums; flex: 0 0 auto; transition: color .22s var(--ease); }
.sv3v13 .svc-cards--rows .svc-card h4 { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; }
.sv3v13-body p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 0 0 14px; }
@media (hover: hover) {
  .sv3v13 .svc-cards--rows .svc-card:hover .sv3v13-n { color: var(--fam-700); }
}
@media (min-width: 561px) {
  .sv3v13-body .sv3-dots { columns: 15em; column-gap: 26px; }
}
@media (min-width: 761px) {
  .sv3v13 .svc-cards--rows .svc-card {
    display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr);
    gap: 4px 44px; align-items: start; padding: 26px 4px;
  }
  .sv3v13 .svc-cards--rows .svc-card h4 { font-size: 20px; }
  .sv3v13-body { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1081px) {
  .sv3v13 .svc-cards--rows .svc-card { grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 4px 56px; }
  .sv3v13-body .sv3-dots { columns: 15em; column-gap: 28px; }
}


/* ==========================================================================
   DESIGN 14 — BENTO TILES                derived from .featured-grid/.feat-tile
   ==========================================================================
   The home page's Insights mosaic is SIX tiles in a zero-gap 3x2 grid. §3 is
   six blocks on every one of the eight pages. That is the most literal
   mapping available anywhere in this project, and it is the only §3 here with
   a tonal register — the forked set is light and type-only end to end, so a
   page that needs §3 to break the rhythm has no other option.

   .feat-tile geometry is taken whole: NO radius (the mosaic sits flush, and a
   corner would notch every join), 32px padding, bottom-aligned flex column,
   and the .feat-link chevron nudging 4px. The bento breakpoints come with it —
   3-up at >=941, 2-up at <=940, 1-up at <=560.

   TWO DELTAS:
     - FILLS. .feat-tile.blue is var(--c-blue-deep) and .light's tag colour is
       var(--c-accent), both outside the family. The tiles here take
       --fam-grad-deep, var(--c-dark) and var(--c-surface-2) instead, so the
       section is family-true. No photographs: site/assets/images is generic
       stock whose filenames do not describe the contents, and a capability
       list is the last place decorative filler belongs.
     - ROWS. grid-auto-rows is a fixed 300/240/220px on the home page, which
       is right for a headline and two lines of standfirst. A scope rail can
       run longer, so the rows become minmax(<home value>, auto): the mosaic
       rhythm holds and nothing can ever clip.

   Reuses: .featured-grid .featured-grid--bento .feat-tile .feat-link
   ========================================================================== */
.sv3v14 { --c-accent: var(--fam-700); }
.sv3v14 .featured-grid { margin-top: 30px; grid-auto-rows: minmax(220px, auto); }
.sv3v14 .feat-tile { justify-content: flex-start; }
/* family fills, replacing .blue / .grad / .light */
.sv3v14 .feat-tile--deep  { background: var(--fam-grad-deep); color: #fff; }
.sv3v14 .feat-tile--dark  { background: var(--c-dark); color: #fff; }
.sv3v14 .feat-tile--light { background: var(--c-surface-2); color: var(--c-ink); }
.sv3v14 .feat-tile--paper { background: #fff; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); }
.sv3v14-n { font-size: 13px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; opacity: .8; margin-bottom: 12px; }
.sv3v14 .feat-tile--deep .sv3v14-n  { color: var(--fam-200); opacity: 1; }
.sv3v14 .feat-tile--dark .sv3v14-n  { color: var(--fam-300); opacity: 1; }
.sv3v14 .feat-tile--light .sv3v14-n,
.sv3v14 .feat-tile--paper .sv3v14-n { color: var(--fam-700); opacity: 1; }
/* .feat-tile h3 is clamp(19px,1.5vw,24px)/700/1.22 — inherited */
.sv3v14 .feat-tile p { margin-top: 10px; }
.sv3v14 .feat-tile--light p, .sv3v14 .feat-tile--paper p { color: var(--c-body); opacity: 1; }
/* THE RAIL IS A GRID HERE, NOT A MIDDOT LIST. A bento tile at 3-up is ~390px,
   and a wrapping middot rail leaves the separator stranded at the end of every
   wrapped line — "Priority alignment · Investment roadmap ·" then a break. That
   reads as a truncation mark rather than a join, which is the exact failure
   sol-04-modules.css documents for this device. .sv3-mid stays a middot rail
   for the wider contexts where it does not wrap; inside a tile it becomes two
   columns of plain labels and the problem cannot occur. */
.sv3v14 .sv3-mid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 4px 14px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid currentColor; opacity: .88;
}
.sv3v14 .sv3-mid span { font-size: 13px; line-height: 1.45; }
.sv3v14 .sv3-mid span:not(:last-child)::after { content: none; }
.sv3v14 .feat-tile--light .sv3-mid, .sv3v14 .feat-tile--paper .sv3-mid { color: var(--c-body); opacity: 1; }
@media (min-width: 941px) {
  .sv3v14 .featured-grid { grid-auto-rows: minmax(300px, auto); }
}


/* ==========================================================================
   ############  FORKED SET — 3, 4, 8, 9, 10  ############
   Forked from sol-04-modules.css. Class names keep the SOURCE variant number
   per the namespace rule: .s4v8- becomes .sv3v8-.

   RETUNE APPLIED — all five were sized for THIRTEEN modules; Services has SIX.
     3   accordion    ships with the first panel open. A six-row disclosure
                      list rendered fully closed is six rules and no content.
     4   sticky index at six entries the rail is short, so the index column is
                      narrowed 290 -> 250px and the content column takes the
                      difference; the <941 jump list drops from 3 columns to 2.
     8   column flow  capped at TWO columns. At three, six blocks is two per
                      column and the flow stops packing anything.
     9   sticky bar   unchanged — six tall bodies is exactly what it is for.
     10  switchboard  rail tightened for six chips, AND the inherited
                      selected-tab-invisible-on-hover defect fixed (see below).
   ========================================================================== */


/* ==========================================================================
   DESIGN 3 — DISCLOSURE ACCORDION                             (fork of §4·3)
   Native <details>/<summary>: zero JavaScript, correct screen-reader
   announcement, keyboard-operable, and deep links still resolve because the
   panels are in the DOM whether open or not.
   The 48x48 outlined box that .svc-cards--rows uses for its arrow becomes the
   toggle — same geometry, same border, same .22s — and it is now honestly
   interactive rather than a signpost.
   ========================================================================== */
.sv3v3-list { margin-top: 28px; border-top: 1px solid var(--c-line); }
.sv3v3-item { border-bottom: 1px solid var(--c-line); transition: border-bottom-color .22s var(--ease); }
.sv3v3-item > summary { list-style: none; cursor: pointer; }
.sv3v3-item > summary::-webkit-details-marker { display: none; }
/* align-items:start, not center — a three-line title at 390px would park the
   numeral beside its second line. The numeral tracks the first line and the
   toggle re-centres itself against the whole row. */
.sv3v3-sum {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 48px;
  gap: 0 10px; align-items: start; min-height: 68px; padding: 14px 2px;
  margin: 0; font-size: inherit; font-weight: 400;
}
.sv3v3-n {
  font-size: 15px; font-weight: 700; color: #b7b7c2; letter-spacing: -.01em;
  line-height: 1.5; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
.sv3v3-t { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--c-ink); }
.sv3v3-meta { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--c-muted); }
/* the toggle: the row list's 48x48 arrow box, drawn as a plus. Only the
   vertical stroke rotates away — a 90deg turn of the whole box would spin the
   horizontal stroke onto itself and read as noise. */
.sv3v3-tog {
  justify-self: end; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid #c4c4c4; border-radius: var(--radius);
  color: var(--fam-700); transition: border-color .22s var(--ease);
}
.sv3v3-tog svg { width: 20px; height: 20px; }
.sv3v3-tog .v { transform-box: fill-box; transform-origin: center; transition: transform .22s var(--ease); }
.sv3v3-item[open] .sv3v3-tog .v { transform: scaleY(0); }
.sv3v3-item[open] .sv3v3-n { color: var(--fam-700); }
.sv3v3-panel { padding: 2px 2px 26px; }
.sv3v3-panel .sv3-chips { margin-bottom: 20px; }
@media (hover: hover) {
  .sv3v3-item:hover { border-bottom-color: var(--fam-700); }
  .sv3v3-item:hover .sv3v3-n { color: var(--fam-700); }
  .sv3v3-item:hover .sv3v3-tog { border-color: var(--fam-700); }
}
.sv3v3-item > summary:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 561px) {
  .sv3v3-panel .sv3-dots { columns: 15em; column-gap: 26px; }
}
@media (min-width: 761px) {
  .sv3v3-sum { grid-template-columns: 56px minmax(0,1fr) 48px; gap: 0 16px; }
  .sv3v3-t { font-size: 20px; }
  .sv3v3-n { font-size: 17px; }
  .sv3v3-panel { padding: 2px 0 30px 72px; }
}
@media (min-width: 1081px) {
  .sv3v3-panel .sv3-dots { columns: 15em; column-gap: 30px; }
  .sv3v3-panel .sv3-fnote { max-width: 92ch; }
}


/* ==========================================================================
   DESIGN 4 — STICKY BLOCK INDEX                               (fork of §4·4)
   Prints everything and adds a persistent index. At >=941 the index is a
   sticky rail beside the stack; below that it is a plain jump list above it,
   because a sticky rail on a phone eats a third of the screen.
   The stack is deliberately plain — a large gradient numeral, a title and a
   hairline scope list. All the structure is in the index.

   RETUNE: index narrowed 290 -> 250 / 310 -> 270, and the phone jump list held
   at two columns. Six entries across three columns left a two-item orphan row.
   ========================================================================== */
.sv3v4 { display: grid; gap: 30px; margin-top: 30px; }
.sv3v4-index { border-top: 1px solid var(--c-line); padding-top: 16px; }
.sv3v4-index ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin: 10px 0 0; padding: 0; }
.sv3v4-index a {
  display: flex; align-items: baseline; gap: 9px; min-height: 44px; padding: 6px 0;
  font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--c-body);
  transition: color .22s var(--ease);
}
/* fixed 30px, not auto: "1" and "6" are the same width here, but an auto
   column would still resolve per row and stagger the titles */
.sv3v4-index a span:first-child {
  flex: 0 0 30px; font-weight: 700; color: #b7b7c2; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
@media (hover: hover) {
  .sv3v4-index a:hover { color: var(--fam-700); }
  .sv3v4-index a:hover span:first-child { color: var(--fam-700); }
}
.sv3v4-index a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }

.sv3v4-mod { padding: 26px 0; border-top: 1px solid var(--c-line); }
.sv3v4-mod:first-child { border-top: none; padding-top: 0; }
.sv3v4-mod .sv3-num { font-size: 34px; margin-bottom: 10px; }
.sv3v4-mod h3 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--c-ink); margin: 0 0 12px; }
.sv3v4-prod { margin-bottom: 18px; }
.sv3v4-scope { list-style: none; margin: 0; padding: 0; }
.sv3v4-scope li {
  padding: 7px 2px; font-size: 14.5px; font-weight: 300; line-height: 1.4; color: #323232;
  border-bottom: 1px solid var(--c-line);
}
.sv3v4-scope li:first-child { border-top: 1px solid var(--c-line); }
/* This is the one scope list that stays a GRID rather than flowing in
   `columns`, because its items are separated by rules and rules have to line
   up across the gutter — column flow would stagger them. Held to TWO columns
   at every width: at three the cells are narrow enough that one wrapped phrase
   opens a hole under every one-line neighbour. Row-wise flow means items 1 and
   2 are the top row, so both need the opening rule. */
@media (min-width: 761px) {
  .sv3v4-scope { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .sv3v4-scope li:nth-child(-n+2) { border-top: 1px solid var(--c-line); }
  .sv3v4-mod .sv3-num { font-size: 40px; }
  .sv3v4-mod h3 { font-size: 26px; }
}
@media (min-width: 941px) {
  .sv3v4 { grid-template-columns: minmax(0,250px) minmax(0,1fr); gap: 56px; align-items: start; }
  .sv3v4-index { position: sticky; top: calc(var(--header-h) + 24px); border-top: none; padding-top: 0; }
  .sv3v4-index ol { grid-template-columns: 1fr; gap: 0; }
  .sv3v4-index li { border-bottom: 1px solid var(--c-line); }
  .sv3v4-index li:first-child { border-top: 1px solid var(--c-line); }
  /* 13px, not 11px: the rail rows drop min-height here, and at 11px a one-line
     entry is a 41px target. A 941px viewport is still a tablet in landscape. */
  .sv3v4-index a { min-height: 0; padding: 13px 2px; }
  .sv3v4-mod { padding: 34px 0; }
}
@media (min-width: 1081px) {
  .sv3v4 { grid-template-columns: minmax(0,270px) minmax(0,1fr); gap: 72px; }
  .sv3v4-scope { column-gap: 48px; }
}
/* a third ruled column, and the opening rule follows to :nth-child(-n+3).
   Held to 1181 because the rules have to line up across the gutter, so this
   only works once each cell is wide enough that these short scope phrases do
   not wrap and stagger them. */
@media (min-width: 1181px) {
  .sv3v4-scope { grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 36px; }
  .sv3v4-scope li:nth-child(-n+3) { border-top: 1px solid var(--c-line); }
  .sv3v4-scope li:nth-child(3) ~ li:nth-child(-n+2) { border-top: none; }
}


/* ==========================================================================
   DESIGN 8 — COLUMN FLOW                                      (fork of §4·8)
   The only variant that uses flow instead of a grid. `columns` packs uneven
   blocks by height rather than by row, so a 4-item block costs 4 items of page
   instead of leaving a hole beside a 12-item one.
   The trade is reading order: columns run down-then-across. That is why the
   numerals are large and gradient-clipped — they have to be findable out of
   linear order. column-rule replaces the per-block border.

   RETUNE: capped at TWO columns. The source opened a third at 1081 for
   thirteen modules; at six that is two blocks per column, which is not flow,
   it is three short stacks with rules between them.
   ========================================================================== */
.sv3v8-flow { margin-top: 30px; columns: 1; column-gap: 40px; column-rule: 1px solid var(--c-line); }
.sv3v8-mod {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  padding: 22px 0; border-top: 1px solid var(--c-line);
}
.sv3v8-mod:first-child { border-top: none; padding-top: 0; }
.sv3v8-mod .sv3-num { font-size: 34px; margin-bottom: 8px; }
.sv3v8-mod h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--c-ink); margin: 0 0 10px; }
.sv3v8-lede { font-size: 14px; font-weight: 300; line-height: 1.55; color: #323232; margin: 0 0 12px; }
.sv3v8-prod { margin-bottom: 14px; }
.sv3v8-prod span { font-size: 13.5px; }
.sv3v8-mod .sv3-dots li { font-size: 14.5px; }
.sv3v8-mod .sv3-fnote { font-size: 13.5px; }
@media (min-width: 761px) {
  .sv3v8-flow { columns: 2; }
  /* in flow, "first child" is only the first block of the FIRST column, and
     the browser decides which those are — so every block keeps its top rule
     and the first one gets it back */
  .sv3v8-mod:first-child { border-top: 1px solid var(--c-line); padding-top: 22px; }
}
@media (min-width: 1081px) {
  .sv3v8-flow { column-gap: 56px; }
  .sv3v8-mod .sv3-num { font-size: 38px; }
}


/* ==========================================================================
   DESIGN 9 — STICKY BLOCK BAR                                 (fork of §4·9)
   A scroll-through spec sheet. Each block's header bar sticks to the top of
   the viewport while that block's scope scrolls past under it, then the next
   bar pushes it out — the pattern a long contacts list uses for its letter
   headings.
   The 2px var(--fam-700) top rule is the "thin accent rule" the home page
   allows; it also does the work a drop shadow would do, marking the stuck
   bar's edge without a shadow sitting over the content.
   top: var(--header-h) parks the bar under the fixed site header. Nothing in
   this variant's ancestry may set overflow — a single overflow:hidden kills
   position:sticky.
   ========================================================================== */
.sv3v9 { margin-top: 30px; }
.sv3v9-mod { margin-bottom: 4px; }
.sv3v9-bar {
  position: sticky; top: var(--header-h); z-index: 5;
  background: #fff; border-top: 2px solid var(--fam-700);
  border-bottom: 1px solid var(--c-line);
  padding: 13px 2px 12px;
  display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 0 10px; align-items: baseline;
}
.sv3v9-n { font-size: 15px; font-weight: 700; color: var(--fam-700); font-variant-numeric: tabular-nums; }
.sv3v9-bar h3 { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
/* hidden in the bar at phone widths: a two-line title plus a caption line
   makes the bar 95px, and with the 84px fixed site header above it that is a
   quarter of a 716px viewport permanently spent on chrome. The same words are
   two lines below in the body, so nothing is lost — and at 761 the caption
   returns on the bar's right, where it costs no height at all. */
.sv3v9-cap { display: none; grid-column: 2; margin: 4px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--c-muted); }
.sv3v9-body { padding: 20px 2px 30px; }
.sv3v9-body .sv3-chips { margin-bottom: 22px; }
@media (min-width: 561px) {
  .sv3v9-body .sv3-dots { columns: 15em; column-gap: 26px; }
}
@media (min-width: 761px) {
  /* the third track is minmax(0,300px), NOT auto: with an `auto` track the
     browser sizes it from the item's max-content contribution, and a max-width
     on the item makes that resolution circular — it collapses to near
     min-content and breaks the caption across three lines, which takes the
     sticky bar from 51px to 95px. */
  .sv3v9-bar { grid-template-columns: 56px minmax(0,1fr) minmax(0,300px); padding: 15px 2px 14px; }
  .sv3v9-bar h3 { font-size: 20px; }
  .sv3v9-n { font-size: 17px; }
  .sv3v9-cap { display: block; grid-column: 3; grid-row: 1; margin-top: 0; justify-self: end; text-align: right; }
  .sv3v9-body { padding: 24px 2px 38px 56px; }
}
@media (min-width: 1081px) {
  .sv3v9-body .sv3-dots { columns: 15em; column-gap: 30px; }
}


/* ==========================================================================
   DESIGN 10 — BLOCK SWITCHBOARD                              (fork of §4·10)
   The tightest footprint here: six blocks in a fixed-height panel, one at a
   time. A proper ARIA tablist — roving tabindex, arrow keys, Home/End,
   aria-selected, aria-controls — driven by ~30 lines of inline vanilla JS
   copied forward from the Solutions page and retargeted to .sv3v10-rail.
   The panel head is .why-glance-stat: var(--c-dark) fill, 4px radius, solid
   3px accent bottom border. That is how the home page marks a block as "the
   one that matters right now", which is exactly the panel's job.

   KNOWN CAVEAT, stated rather than buried: everything is in the DOM and
   crawlable, but hidden panels are not reachable by in-page browser find.

   RETUNE + DEFECT FIX
     - the rail is sized for six chips rather than thirteen: the auto-fill
       minimum goes 64 -> 78px so six fill one row at 390 instead of leaving a
       short second row.
     - sol-04-modules.css:631 leaves the SELECTED tab invisible on hover above
       941px. The >=941 block strips the tab's background and sets the selected
       colour to var(--c-ink), but the phone-width rule
       `[aria-selected="true"]:hover { color: #fff }` still applies — white on
       white. Fixed HERE, in the fork, rather than upstream, so eight live
       Solutions pages are not touched. See the >=941 block below.
   ========================================================================== */
.sv3v10 { display: grid; gap: 22px; margin-top: 30px; }
.sv3v10-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.sv3v10-tab {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 6px 8px; text-align: center;
  border: 1px solid #c4c4c4; border-radius: var(--radius); background: #fff;
  font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--c-body);
  font-variant-numeric: tabular-nums;
  transition: border-color .22s var(--ease), color .22s var(--ease), background-color .22s var(--ease);
}
.sv3v10-tab .t { display: none; }
.sv3v10-tab[aria-selected="true"] { border-color: var(--fam-700); color: #fff; background: var(--fam-700); }
@media (hover: hover) {
  .sv3v10-tab:hover { border-color: var(--fam-700); color: var(--fam-700); }
  .sv3v10-tab[aria-selected="true"]:hover { color: #fff; }
}
.sv3v10-tab:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }

.sv3v10-panel[hidden] { display: none; }
.sv3v10-panel:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; }
/* .why-glance-stat: --c-dark fill, 4px radius, solid 3px accent bottom rule */
.sv3v10-head {
  background: var(--c-dark); border-radius: var(--radius);
  border-bottom: 3px solid var(--fam-700); padding: 20px 20px 18px; color: #fff;
}
.sv3v10-hn { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--fam-200); font-variant-numeric: tabular-nums; }
.sv3v10-head h3 { margin: 8px 0 0; font-size: 21px; font-weight: 700; line-height: 1.28; letter-spacing: -.015em; color: #fff; }
.sv3v10-head p { margin: 12px 0 0; font-size: 15px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.76); max-width: 68ch; }
.sv3v10-head .sv3-cap { color: rgba(255,255,255,.62); margin: 16px 0 9px; }
.sv3v10-head .sv3-chip { border-color: rgba(255,255,255,.32); color: #fff; }
.sv3v10-body { padding-top: 22px; }
@media (min-width: 761px) {
  .sv3v10-head { padding: 26px 26px 22px; }
  .sv3v10-head h3 { font-size: 25px; }
  .sv3v10-body .sv3-dots { columns: 15em; column-gap: 28px; }
}
@media (min-width: 941px) {
  .sv3v10 { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 44px; align-items: start; }
  /* .services-tabs: a stacked list separated by var(--c-line), left-aligned,
     no boxes — the boxes were only ever the phone treatment */
  .sv3v10-rail { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-line); }
  .sv3v10-tab {
    justify-content: flex-start; text-align: left; gap: 12px; min-height: 0;
    padding: 13px 4px; border: none; border-bottom: 1px solid var(--c-line);
    border-radius: 0; background: none; font-size: 15px; font-weight: 600;
  }
  .sv3v10-tab .n { flex: 0 0 34px; color: #b7b7c2; transition: color .22s var(--ease); }
  .sv3v10-tab .t { display: block; }
  .sv3v10-tab[aria-selected="true"] { background: none; color: var(--c-ink); border-bottom-color: var(--fam-700); }
  .sv3v10-tab[aria-selected="true"] .n { color: var(--fam-700); }
  .sv3v10-tab:hover .n { color: var(--fam-700); }
  /* THE DEFECT FIX. The phone rule above sets `color:#fff` on a hovered
     selected tab, which is correct while the tab has a --fam-700 fill. Here
     the fill is stripped, so that rule would paint the label white on white
     and the selected tab would vanish under the cursor. Restated at this
     width against the background this width actually has. */
  @media (hover: hover) {
    .sv3v10-tab[aria-selected="true"]:hover { color: var(--c-ink); }
    .sv3v10-tab[aria-selected="true"]:hover .n { color: var(--fam-700); }
  }
}
@media (min-width: 1081px) {
  .sv3v10-body .sv3-dots { columns: 15em; column-gap: 30px; }
}


/* ==========================================================================
   REDUCED MOTION
   The budget is already small — border colours, a 2px lift and a 4px glyph
   nudge. This removes the transforms and leaves the colour changes, which then
   arrive instantly.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sv3-link svg,
  .sv3v3-item, .sv3v3-n, .sv3v3-tog, .sv3v3-tog .v,
  .sv3v4-index a, .sv3v4-index a span:first-child,
  .sv3v10-tab, .sv3v10-tab .n, .sv3v13-n { transition: none; }
  .sv3-link svg { transform: none !important; }
}