/* service-v5.css — GENERATED by mockups/service-src/build-v5.mjs. Do not hand-edit.
   Palette A — Enquad navy, unchanged. The site's own colour, untouched. No distance at all from the homepage.

   ROLES, not colours. Every ramp fills the same five: dark (the band ground), deep (anything
   that would otherwise sit on the dark and vanish), mid (the one accent that has to read on
   white), tint and pale (the two light grounds). Swapping ramps swaps five hex values, nothing
   else — no rule below names a colour directly.

   ⚠⚠⚠ THE 34x2 EYEBROW RULE IS NAVY #0f054d, measured off the live homepage (home.css:2542), and
   #fff on a dark ground. Direction L had it RED above every section heading. Red is the CTA
   hover sitewide (D-023) and nothing else — a red rule above eight headings was the loudest
   alien note on the page. ⛔ Do not put red back on a rule, a border, a bullet or a button. */

.sv5{
  --sv5-dark:#0f054d; --sv5-mid:#1a0b73; --sv5-deep:#0a0335;
  --sv5-tint:#e5e4f0; --sv5-pale:#f4f4f9;
  --sv5-eyebrow:#0f054d;   /* the homepage's own rule colour, not this ramp's */
  --sv5-red:#e01820;           /* CTA hover only (D-023) */
  --sv5-ink:#14123a; --sv5-body:#474463; --sv5-mute:#6b6885;
  --sv5-line:#d9d8e4; --sv5-slot:#8d8aa3; --sv5-slotbg:#f0eff5;
  --sv5-sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;

  font:400 16.5px/1.62 var(--sv5-sans);
  color:var(--sv5-body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ── RESETS ─────────────────────────────────────────────────────────────────────────────────
   Every rule here beats a BARE ELEMENT rule in a sitewide sheet the local preview cannot show
   (TRAPS-BUILD.md lists five that already shipped defects). Two classes minimum wherever the
   bare rule is (0,1,1) and the tie would ride source order. None of these is a dead repeat. */
.sv5 *,.sv5 *::before,.sv5 *::after{box-sizing:border-box}
.sv5 h1,.sv5 h2,.sv5 h3{
  font-family:var(--sv5-sans);         /* webflow-core: h2/h3{font-family:instrument-serif} */
  text-transform:none;                 /* webflow-core: h1{text-transform:uppercase} — shipped ALL CAPS once */
  color:var(--sv5-ink);                /* webflow-core: h2{color:var(--black)} */
  letter-spacing:-.02em; margin:0; font-weight:600; text-wrap:balance;
}
.sv5 p,.sv5 dd,.sv5 figure,.sv5 blockquote{margin:0}
.sv5 ul,.sv5 ol{margin:0;padding:0;list-style:none}
.sv5 a{text-decoration:none}
/* hello-elementor/reset.css: button{white-space:nowrap} — and white-space INHERITS. */
.sv5 .sv5-tab,.sv5 .sv5-btn{white-space:normal}
/* hello-elementor/reset.css ships a bare a:hover{color:#336} at (0,1,1). ANY link styled by one
   class loses its colour the moment a pointer touches it. Two classes each, deliberately. */
.sv5 .sv5-cloud__links a:hover{color:var(--sv5-dark)}
/* ⛔ the chips hovered to --sv5-dark while they sat on the tint strip. They are on the NAVY
   hero now, so that is navy on navy — the same class of resting-state bug as the white-on-white
   button C8 guards, and a hover probe would call this one healthy too. */
.sv5 .sv5-chips a:hover{color:#fff;border-color:rgba(255,255,255,.75)}
.sv5 .sv5-close__c dd a:hover,.sv5 .sv5-crumb a:hover{color:#fff}
.sv5 .sv5-tab:hover b,.sv5 .sv5-tab:hover span{color:#fff}
.sv5 .sv5-btn--white:hover{color:var(--sv5-dark)}
.sv5 .sv5-btn--solid:hover,.sv5 .sv5-btn--ghost:hover{color:#fff}

/* ── shared ─────────────────────────────────────────────────────────────────────────────── */
.sv5 .sv5-wrap{max-width:1240px;margin-inline:auto;padding-inline:40px}
.sv5 .sv5-h1{font-size:50px;line-height:1.1;letter-spacing:-.03em;color:#fff}
.sv5 .sv5-h2{font-size:38px;line-height:1.16}
.sv5 .sv5-h3{font-size:20px;line-height:1.32;letter-spacing:-.01em}
.sv5 .sv5-h2--on-dark{color:#fff}
.sv5 .sv5-h2--mid{text-align:center}

/* the site's own eyebrow, copied off the live homepage: 34x2 navy rule, 14px gap, 13px/700
   uppercase, 1.9px tracking (home.css:2542, shipped sitewide 2026-08-26) */
.sv5 .sv5-eyebrow{font:700 13px/1 var(--sv5-sans);letter-spacing:1.9px;text-transform:uppercase;
  color:var(--sv5-ink);display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sv5 .sv5-eyebrow::before{content:"";flex:none;width:34px;height:2px;background:var(--sv5-eyebrow)}
.sv5 .sv5-eyebrow--on-dark{color:#fff}
.sv5 .sv5-eyebrow--on-dark::before{background:#fff}
.sv5 .sv5-eyebrow--mid{justify-content:center}

/* D-023, the ONE hover on every CTA sitewide: a 2px red rule wiping in along the bottom edge
   from the left, .22s ease, and NOTHING else moves.
   ⛔ ::after, never a background-image — Elementor's lazy-load sets background-image:none
   !important below the 4th top-level container until it scrolls in. */
.sv5 .sv5-btn{display:inline-block;position:relative;overflow:hidden;
  font:600 15px/1 var(--sv5-sans);padding:16px 26px;border:1.5px solid transparent}
.sv5 .sv5-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background-color:var(--sv5-red);scale:0 1;transform-origin:left center;transition:scale .22s ease}
.sv5 .sv5-btn:hover::after,.sv5 .sv5-btn:focus-visible::after{scale:1 1}
.sv5 .sv5-btn--solid{background:var(--sv5-mid);color:#fff;border-color:var(--sv5-mid)}
.sv5 .sv5-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sv5 .sv5-btn--white{background:#fff;color:var(--sv5-dark);border-color:#fff}
.sv5 .sv5-btn:focus-visible{outline:2px solid var(--sv5-red);outline-offset:3px}

/* a pending slot. Deliberately quiet: it is a gap, not a feature. */
.sv5 .sv5-slot{border:1px dashed var(--sv5-line);background:var(--sv5-slotbg);
  display:grid;place-items:center;padding:30px;min-height:118px}
.sv5 .sv5-slot[data-sv5-tall]{min-height:300px}
.sv5 .sv5-slot__t{font:700 11px/1 var(--sv5-sans);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--sv5-slot)}
.sv5 .sv5-slot--dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.30)}
.sv5 .sv5-slot--dark .sv5-slot__t{color:rgba(255,255,255,.72)}
/* ⚠ A SLOT ON THE TINT GROUND LOSES ITS EDGE. --sv5-line against #e5e4f0 measures 1.12:1 — the
   dashed border is simply not drawn as far as a reader is concerned, and the box reads as a
   stray pale rectangle. Three bands sit on tint and all three can hold a slot, so this is one
   rule, not three. Found by mockups/shot/restcheck.mjs; no screenshot review had caught it. */
.sv5 .sv5-trio .sv5-slot,.sv5 .sv5-said .sv5-slot,.sv5 .sv5-inds .sv5-slot{border-color:var(--sv5-slot)}

.sv5 .sv5-ticks{display:flex;flex-wrap:wrap;gap:10px 30px}
.sv5 .sv5-ticks li{position:relative;padding-left:26px;font-size:15px;color:rgba(255,255,255,.9)}
.sv5 .sv5-ticks li::before{content:"\2713";position:absolute;left:0;font-weight:700;color:#fff}

/* ── 1 hero — the breadcrumb lives INSIDE it now, so the top padding drops from 66 to 26 and
      the grid carries the gap instead ────────────────────────────────────────────────────── */
.sv5 .sv5-hero{background:var(--sv5-dark);color:#fff;padding:26px 0 58px}
.sv5 .sv5-hero__wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;
  margin-top:38px}
.sv5 .sv5-hero .sv5-h1{max-width:16ch}
.sv5 .sv5-hero__lede{margin-top:20px;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:60ch}
.sv5 .sv5-hero__btns{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.sv5 .sv5-hero__note{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.74)}

/* the breadcrumb — a rule across the top of the hero, not its own tint strip any more.
   ⛔ EVERY COLOUR HERE CHANGED WITH THE GROUND, and none of the old ones would have failed
   loudly: --sv5-mute links and solid white chips are both invisible ink on navy. The nav is
   the flex row itself now; .sv5-crumb__wrap is gone. */
.sv5 .sv5-crumb{display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.62);
  padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.16)}
.sv5 .sv5-crumb a{color:rgba(255,255,255,.62)}
.sv5 .sv5-chips{display:flex;gap:8px;flex-wrap:wrap}
/* ⛔ ghost, not the old solid white pill: a filled white chip 38px above the h1 out-shouts it. */
.sv5 .sv5-chips a{background:transparent;border:1px solid rgba(255,255,255,.34);padding:8px 13px;
  color:#fff;font-weight:600;font-size:13px}

/* ── 9 logos ────────────────────────────────────────────────────────────────────────────── */
.sv5 .sv5-logos{background:#fff;padding:52px 0}
.sv5 .sv5-logos__strip{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:26px 54px}
/* the three marks are 35px tall as supplied and differ in width; hold the HEIGHT and let the
   width fall out, or the widest mark dominates the strip. */
.sv5 .sv5-logos__strip img{display:block;height:34px;width:auto;max-width:100%;
  filter:grayscale(1);opacity:.72;transition:filter .22s ease,opacity .22s ease}
.sv5 .sv5-logos__strip img:hover{filter:none;opacity:1}

/* ── 4 intro ────────────────────────────────────────────────────────────────────────────── */
/* ⚠ THE GROUND HERE FOLLOWS HIDDEN (top of this file). sv5-cat is NAVY and sits between intro
   and fit; take it out and both of those are white, which merge into ONE over-tall white band
   with no error and no byte change. C9 catches it only because this value is the truth. */
.sv5 .sv5-intro{background:var(--sv5-tint);padding:76px 0}
.sv5 .sv5-intro__wrap{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:start}
.sv5 .sv5-intro__p{margin-top:16px;max-width:60ch}
.sv5 .sv5-intro__stat{font:600 22px/1.44 var(--sv5-sans);color:var(--sv5-dark);margin-top:26px}
.sv5 .sv5-intro__items{display:grid;gap:20px}
.sv5 .sv5-pitem{border-left:3px solid var(--sv5-line);padding-left:18px}
/* ⚠⚠ --sv5-line measures 1.12:1 against the tint — the rule is simply
   not drawn as far as a reader is concerned. Same fix as the three slot bands took in ROUND 8;
   it goes the day the catalogue comes back and intro returns to white. */
.sv5 .sv5-intro .sv5-pitem{border-left-color:var(--sv5-slot)}
.sv5 .sv5-pitem .sv5-h3{font-size:17px}
.sv5 .sv5-pitem p{margin-top:6px;font-size:15px;color:var(--sv5-mute)}

/* ── 5 catalogue ────────────────────────────────────────────────────────────────────────── */
.sv5 .sv5-cat{background:var(--sv5-dark);padding:74px 0}
.sv5 .sv5-cat .sv5-h2{margin-bottom:34px}
.sv5 .sv5-cat__body{display:grid;grid-template-columns:286px 1fr;background:var(--sv5-pale);
  border:1px solid rgba(255,255,255,.14)}
/* ⚠⚠ A FLAT COLOUR CANNOT SIT ON ITSELF — a rail the same value as its band is invisible. */
.sv5 .sv5-cat__rail{background:var(--sv5-deep)}
.sv5 .sv5-tab{display:block;width:100%;text-align:left;padding:19px 22px;
  border-bottom:1px solid rgba(255,255,255,.10);border-left:4px solid transparent}
/* without this the rail's tail below the sixth service reads as an empty seventh row */
.sv5 .sv5-tab:last-child{border-bottom:0}
.sv5 .sv5-tab b{display:block;font:600 16.5px/1.3 var(--sv5-sans);color:#fff}
.sv5 .sv5-tab span{display:block;font-size:13px;line-height:1.4;color:rgba(255,255,255,.6);margin-top:4px}
.sv5 .sv5-tab--on{background:rgba(255,255,255,.12);border-left-color:#fff}
/* ⚠ align-items alone is NOT enough. The rail column is taller than the panel, so the panel
   stretches to match it and grid's default align-content:stretch spreads the card rows down that
   whole height — a 137px hole between two rows, measured on back-office 2026-09-07. */
.sv5 .sv5-cat__panel{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:26px;
  align-items:start;align-content:start}
/* an odd card count leaves the last cell empty and the panel reads as a failed load; the last
   card takes the whole row instead, and sets its own list in two columns */
.sv5 .sv5-scard:last-child:nth-child(odd){grid-column:1/-1}
.sv5 .sv5-scard:last-child:nth-child(odd) ul{grid-template-columns:1fr 1fr;gap:9px 26px}
.sv5 .sv5-scard{background:#fff;border:1px solid var(--sv5-line);padding:24px 24px 22px}
.sv5 .sv5-scard .sv5-h3{font-size:18.5px;color:var(--sv5-dark)}
.sv5 .sv5-scard__i{color:var(--sv5-mute);font-size:14.5px;margin-top:8px;line-height:1.5}
.sv5 .sv5-scard ul{margin-top:16px;display:grid;gap:9px}
.sv5 .sv5-scard li{position:relative;padding-left:16px;font-size:14.8px;line-height:1.45}
.sv5 .sv5-scard li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  background:var(--sv5-mid)}

/* ── 5 offer row ────────────────────────────────────────────────────────────────────────────
   ⛔⛔ THIS BAND USED TO BE NAVY WITH NO TOP PADDING — it was welded to the catalogue above it
   and the two read as one navy block. Fit sits between them now, so the weld is gone. It went
   to TINT rather than back to navy because navy here would be a FIFTH dark stop on a page the
   homepage rations to three grounds; the two boxes are already --sv5-deep, so they read as
   dark cards on a light band and lose nothing. */
.sv5 .sv5-trio{background:var(--sv5-tint);padding:74px 0}
.sv5 .sv5-trio__wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
.sv5 .sv5-tbox{background:var(--sv5-deep);color:#fff;padding:36px 32px;
  display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.sv5 .sv5-tbox .sv5-h3{color:#fff;font-size:23px}
.sv5 .sv5-tbox--slot{background:transparent;padding:0}
/* white fill, not the slot's own --sv5-slotbg: #f0eff5 on the #e5e4f0 tint is a six-value
   difference and the box disappears into the band. Its edge is handled with the other two
   tint-band slots, up in the slot block. */
.sv5 .sv5-tbox--slot .sv5-slot{width:100%;height:100%;background:#fff}

/* ── 7 process ──────────────────────────────────────────────────────────────────────────── */
.sv5 .sv5-proc{background:#fff;padding:80px 0}
.sv5 .sv5-steps{max-width:1000px;margin-inline:auto;margin-top:44px}
.sv5 .sv5-steps li{display:grid;grid-template-columns:64px 1fr 40px 1.15fr;gap:22px;
  align-items:start;padding:26px 0;border-top:1px solid var(--sv5-line)}
.sv5 .sv5-steps li:first-child{border-top:0}
.sv5 .sv5-steps__n{width:48px;height:48px;border:2px solid var(--sv5-mid);border-radius:50%;
  display:grid;place-items:center;font:600 20px/1 var(--sv5-sans);color:var(--sv5-ink)}
.sv5 .sv5-steps li b{font:600 22px/1.3 var(--sv5-sans);color:var(--sv5-ink);padding-top:11px}
.sv5 .sv5-steps__chev{font-size:30px;color:var(--sv5-mid);line-height:1;padding-top:8px}
.sv5 .sv5-steps li p{font-size:15.5px;padding-top:12px}

/* ── 10 industries · 8 numbers — two thirds of the pending run, one light ground, one dark ─ */
.sv5 .sv5-inds{background:var(--sv5-tint);padding:70px 0}
/* centred to match the band's own eyebrow and h2, which are the --mid (centred) variants.
   Left-aligned chips under a centred heading read as two decisions. */
.sv5 .sv5-inds__list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:12px;justify-content:center}
/* square corners: the sharp-corner sweep of 2026-08-22 rules the site's own boxes, and these
   are boxes, not media. ⛔ No radius here — the phone and the address pill in the drawings are
   the only radii in this stylesheet and they are drawings of round things. */
.sv5 .sv5-ind{background:#fff;border:1px solid var(--sv5-line);padding:12px 20px;
  font:600 15px/1.2 var(--sv5-sans);color:var(--sv5-ink)}
.sv5 .sv5-nums{background:var(--sv5-dark);padding:56px 0}

/* ── 4 good fit / bad fit ───────────────────────────────────────────────────────────────── */
.sv5 .sv5-adv{background:#fff;padding:80px 0}
.sv5 .sv5-adv__cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px}
.sv5 .sv5-adv__h{font-size:19px;padding-bottom:12px;border-bottom:2px solid var(--sv5-line);margin-bottom:20px}
.sv5 .sv5-adv__h--yes{border-bottom-color:var(--sv5-dark)}
.sv5 .sv5-adv__grid{display:grid;gap:14px}
.sv5 .sv5-acard{background:var(--sv5-pale);border-left:3px solid var(--sv5-mid);padding:18px 20px;font-size:15.5px}
.sv5 .sv5-acard--no{border-left-color:var(--sv5-line);color:var(--sv5-mute)}

/* ── 11 faq — WHITE now, because industries (tint) sits immediately above it. Two neighbours
      on one ground merge into a single over-tall band and no assertion can see it. ───────── */
.sv5 .sv5-faq{background:#fff;padding:80px 0}
.sv5 .sv5-faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px;margin-top:40px}
.sv5 .sv5-faq__grid .sv5-h3{font-size:18px;margin-bottom:8px}
.sv5 .sv5-faq__grid p{font-size:15.5px}

/* ── 7 what the client said — TINT now: process (white) is above it and figures (navy) below,
      and it is the last real content before the pending run ─────────────────────────────── */
.sv5 .sv5-said{background:var(--sv5-tint);padding:80px 0}
.sv5 .sv5-said__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:26px;margin-top:40px}
/* white, not --sv5-pale: pale was a lift off white and is almost the tint's own value. */
.sv5 .sv5-q{background:#fff;border-top:3px solid var(--sv5-mid);padding:32px}
.sv5 .sv5-q blockquote{font:400 19px/1.55 var(--sv5-sans);color:var(--sv5-ink)}
.sv5 .sv5-q figcaption{margin-top:20px;padding-top:18px;border-top:1px solid var(--sv5-line)}
.sv5 .sv5-q figcaption b{display:block;font-size:15px;color:var(--sv5-ink)}
.sv5 .sv5-q figcaption span{display:block;margin-top:8px;font-size:14.5px;color:var(--sv5-mute)}

/* ── 13 closing CTA ─────────────────────────────────────────────────────────────────────── */
.sv5 .sv5-close{background:var(--sv5-dark);color:#fff;padding:76px 0}
.sv5 .sv5-close__wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
.sv5 .sv5-close__lede{margin-top:16px;color:rgba(255,255,255,.84);max-width:56ch}
.sv5 .sv5-close .sv5-ticks{margin-top:26px}
.sv5 .sv5-close__c{display:grid;gap:26px;justify-items:start}
.sv5 .sv5-close__c dl{display:grid;gap:16px}
.sv5 .sv5-close__c dt{font:700 11px/1 var(--sv5-sans);letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:5px}
.sv5 .sv5-close__c dd{color:#fff;font-size:15.5px}
/* ⛔ THIS MUST STAY SCOPED TO dd. A bare .sv5-close__c a is (0,2,0) — the SAME weight as
   .sv5-btn--white above, and later in the file, so it won the cascade and painted the closing
   band's white button WHITE ON WHITE. The label was invisible on all six live pages, and only
   in the resting state: .sv5-btn--white:hover is (0,2,1), so it came back under a pointer,
   which is why hovercheck.mjs reported the button healthy. Found 2026-09-07. Guarded by C8. */
.sv5 .sv5-close__c dd a{color:#fff}

/* ── 14 link cloud ──────────────────────────────────────────────────────────────────────── */
.sv5 .sv5-cloud{background:#fff;padding:56px 0;border-top:1px solid var(--sv5-line)}
.sv5 .sv5-cloud__h{font-size:13px;letter-spacing:1.9px;text-transform:uppercase;
  color:var(--sv5-mute);font-weight:700;margin-bottom:16px}
.sv5 .sv5-cloud__links{display:flex;flex-wrap:wrap;gap:10px}
.sv5 .sv5-cloud__links a{border:1px solid var(--sv5-line);padding:8px 14px;font-size:14px;
  color:var(--sv5-dark)}

/* ── THE DRAWN VISUAL LAYER ─────────────────────────────────────────────────────────────────
   ⛔⛔ ANY RULE HERE THAT TOUCHES A CLASS THE OTHER FIVE PAGES ALREADY HAVE MUST CARRY
   [data-sv5-vis]. This stylesheet is ONE file shared by all six: it reaches every page the
   instant it is written, while the markup only reaches a page that is re-shipped. Ungated,
   .sv5-acard's two-column grid would land on five pages with no glyph to put in the first
   column and shrink-wrap their text into it. The gate attribute is emitted only for a slug in
   VISUALS, so the CSS and the markup arrive together. C10 fails the build on a miss.
   ✅ The paint rules below (sv5-fig, sv5-fx-*, sv5-mk*) need no gate and deliberately do not
   carry one: those classes exist in NO other page's markup, so the rules match nothing there.
   ⚠ Nothing here is a photograph; see VISUALS at the top of the builder for why. */

/* the hero figure. ⛔ Colours live HERE, never as SVG fill= attributes, or --palette= would
   move the whole page and leave the drawing behind on ramp A. */
.sv5[data-sv5-vis] .sv5-fig{display:flex;align-items:center;justify-content:center;min-height:300px}
.sv5[data-sv5-vis] .sv5-fig svg{display:block;width:100%;height:auto;max-width:560px}
/* ⚠ non-scaling-stroke: the figure scales with its column, and a 1.25 user-unit stroke would
   thin out to about half a pixel at 390 and simply stop being drawn. */
.sv5 .sv5-fx-o,.sv5 .sv5-fx-f{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke}
.sv5 .sv5-fx-o{stroke:rgba(255,255,255,.46)}
.sv5 .sv5-fx-f{stroke:rgba(255,255,255,.22)}
.sv5 .sv5-fx-p{fill:rgba(255,255,255,.04)}
.sv5 .sv5-fx-b{fill:rgba(255,255,255,.13)}
/* ⛔ the band's own ground, so the near shape occludes the far one. Any other value is a box. */
.sv5 .sv5-fx-s{fill:var(--sv5-dark)}
.sv5 .sv5-fx-a{fill:#fff}
.sv5 .sv5-fx-m{fill:rgba(255,255,255,.30)}
/* the three accents, FIG_C1..FIG_C3 at the top of the builder. ⛔ Literal, not ramp-derived,
   and the note there says why: every colour in every ramp is a dark blue, and a dark blue on
   the dark-blue hero ground is not a quiet accent, it is an invisible one. */
.sv5 .sv5-fx-c{fill:#5b6cff}
.sv5 .sv5-fx-c2{fill:#38c6f4}
.sv5 .sv5-fx-c2f{fill:#5b6cff38}
.sv5 .sv5-fx-h,.sv5 .sv5-fx-cur{fill:#ffb020}
/* the picture block's selection box. ⚠ non-scaling-stroke here too: the figure caps at
   420px on a phone, where a scaled 1-unit dash would close up into a solid line. */
.sv5 .sv5-fx-hs{fill:none;stroke:#ffb020bf;stroke-width:1;stroke-dasharray:4 4;
  vector-effect:non-scaling-stroke}
/* strokes. ⚠ 2px against the hairlines' 1.25: these carry the DRAWN line — a headset band, a
   pen path, a tick — and at 1.25 they read as furniture instead of as the subject. */
.sv5 .sv5-fx-co,.sv5 .sv5-fx-c2o,.sv5 .sv5-fx-ho,.sv5 .sv5-fx-wo{fill:none;stroke-width:2;
  stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.sv5 .sv5-fx-co{stroke:#5b6cff}
.sv5 .sv5-fx-c2o{stroke:#38c6f4}
.sv5 .sv5-fx-ho{stroke:#ffb020}
.sv5 .sv5-fx-wo{stroke:#fff}
/* construction guides — the dashed lines a mark is built on */
.sv5 .sv5-fx-gd{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:5 5;
  vector-effect:non-scaling-stroke}

/* the good-fit / bad-fit marks */
.sv5[data-sv5-vis] .sv5-acard{display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start}
.sv5 .sv5-mk{width:20px;height:20px;margin-top:1px;fill:none;stroke-width:2;
  stroke-linecap:square;stroke-linejoin:miter}
.sv5 .sv5-mk__y{stroke:var(--sv5-mid)}
.sv5 .sv5-mk__n{stroke:var(--sv5-slot)}

/* the process spine — a connector between consecutive step numbers, so four rows read as one
   run rather than a table. ⚠ THE NUMBERS ARE THE GEOMETRY: the circle is 48px inside a 64px
   column (52px under 1040), so its centre is 24px in at BOTH widths and one offset serves both.
   top:74 is the circle's own bottom (26px of li padding + 48), bottom:-26 reaches exactly the
   next circle's top — so the line starts and stops on the marks and never crosses one. */
.sv5[data-sv5-vis] .sv5-steps li{position:relative}
.sv5[data-sv5-vis] .sv5-steps li:not(:last-child)::before{content:"";position:absolute;
  left:23px;top:74px;bottom:-26px;width:2px;background:var(--sv5-line)}

/* the pull quote's mark. ⚠ --sv5-line, not --sv5-mid: at 62px a mid-navy quote mark out-shouts
   the sentence it belongs to. */
.sv5[data-sv5-vis] .sv5-q blockquote{position:relative;padding-left:46px}
.sv5[data-sv5-vis] .sv5-q blockquote::before{content:"\201C";position:absolute;left:-2px;top:-14px;
  font:700 64px/1 var(--sv5-sans);color:var(--sv5-line)}

/* ── SCROLL REVEALS — block 15's family, mirrored for sv5-. ⛔ NO SECOND MOTION SYSTEM (D-015).
   The gate attribute data-sv5-rev is set at RUNTIME by service-v5.js; delete the script and all
   of this goes inert, which is the designed failure mode.
   ⛔⛔ NEVER PUT A transition OR A transition-delay ON THE HIDDEN PRE-STATE. The transition makes
   ARMING fade the section OUT (1 → 0), and a delay defers the HIDE even at duration 0s. Both
   were live in block 13 from 2026-08-25 and both had to be fixed by moving everything onto the
   .sv5-in state. This block is written that way from the start. */
.sv5 .sv5-rev[data-sv5-rev] > .sv5-wrap > *{opacity:0;translate:0 14px}
.sv5 .sv5-rev[data-sv5-rev].sv5-in > .sv5-wrap > *{
  opacity:1;translate:0 0;transition:opacity .5s ease,translate .5s ease}
.sv5 .sv5-rev[data-sv5-rev].sv5-in > .sv5-wrap > *:nth-child(2){transition-delay:.07s}
.sv5 .sv5-rev[data-sv5-rev].sv5-in > .sv5-wrap > *:nth-child(3){transition-delay:.14s}
.sv5 .sv5-rev[data-sv5-rev].sv5-in > .sv5-wrap > *:nth-child(n+4){transition-delay:.21s}

/* ⚠⚠⚠ service.css's own reduced-motion kill switch is .svc-page *, which does NOT reach
   ::before/::after. This one names the pseudo-elements too. */
@media (prefers-reduced-motion:reduce){
  .sv5 *,.sv5 *::before,.sv5 *::after{transition:none!important;animation:none!important}
  .sv5 .sv5-rev[data-sv5-rev] > .sv5-wrap > *{opacity:1;translate:none}
}

/* ── responsive ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .sv5 .sv5-hero__wrap,.sv5 .sv5-intro__wrap,.sv5 .sv5-adv__cols,.sv5 .sv5-faq__grid,
  .sv5 .sv5-trio__wrap,.sv5 .sv5-close__wrap{grid-template-columns:1fr}
  .sv5 .sv5-cat__body,.sv5 .sv5-cat__panel{grid-template-columns:1fr}
  .sv5 .sv5-scard:last-child:nth-child(odd) ul{grid-template-columns:1fr}
  .sv5 .sv5-steps li{grid-template-columns:52px 1fr}
  .sv5 .sv5-steps__chev{display:none}
  .sv5 .sv5-steps li p{grid-column:2}
  .sv5 .sv5-wrap{padding-inline:22px}
  .sv5 .sv5-h1{font-size:36px}
  .sv5 .sv5-h2{font-size:29px}
  /* ⚠ the figure is the LAST thing in the hero once the grid is one column, so it must not
     open at 300px of drawing above the fold on a phone; it caps and centres instead. */
  .sv5[data-sv5-vis] .sv5-fig{min-height:0;margin-top:6px}
  .sv5[data-sv5-vis] .sv5-fig svg{max-width:420px}
}