/* ==========================================================================
   3 Lions — Service page module library (surgical v2)
   -----------------------------------------------------------------------
   A composition kit, NOT a template. Each service page picks a different
   hero variant and a different sequence of bands, so no two pages read the
   same while the design language stays one studio's.

   Self-contained: hardcoded brand hex (navy #012169 / red #CF081F) so it
   never depends on which tokens.css won the cascade. Roboto only.
   Motion reuses the existing .reveal system (JS-gated, reduced-motion safe).
   ========================================================================== */

.sv { font-family: 'Roboto', system-ui, sans-serif; }

/* --------------------------------------------------------------------------
   1. Bands — the rhythm. Alternate these; never stack two navy in a row.
   Tighter than the old leaf template (that page ran 7rem gutters and felt
   hollow). Section padding here tops out at 5rem.
   -------------------------------------------------------------------------- */
.sv-band { padding-block: clamp(3rem, 5.5vw, 5rem); padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.sv-band--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.sv-band--slim  { padding-block: clamp(1.5rem, 2.75vw, 2.5rem); }  /* ~half of .sv-band */
.sv-band--white { background: #fff; }
.sv-band--bone  { background: #f5f7fb; }
.sv-band--navy  { background: #012169; color: #fff; }
.sv-band--deep  { background: #00082A; color: #fff; }
.sv-band--red   { background: #CF081F; color: #fff; }
.sv-inner { max-width: 1180px; margin-inline: auto; }
.sv-inner--narrow { max-width: 780px; }
.sv-inner--mid { max-width: 960px; }

/* Hairline edge transition — a crisp seam between two light bands so the
   page reads as deliberate sections rather than one endless scroll. */
.sv-band--seam { border-top: 1px solid #e4e9f2; }

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */
.sv-eyebrow {
  margin: 0 0 0.85rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #CF081F;
}
.sv-band--navy .sv-eyebrow,
.sv-band--deep .sv-eyebrow { color: #ff6274; }
.sv-band--red .sv-eyebrow { color: rgba(255,255,255,.9); }

.sv-h2 {
  margin: 0 0 1rem; font-weight: 800;
  font-size: clamp(1.8rem, 1rem + 2.7vw, 2.85rem);
  line-height: 1.1; letter-spacing: -0.022em; color: #012169; text-wrap: balance;
}
.sv-h2 .accent { color: #CF081F; }
.sv-band--navy .sv-h2, .sv-band--deep .sv-h2, .sv-band--red .sv-h2 { color: #fff; }
.sv-band--navy .sv-h2 .accent, .sv-band--deep .sv-h2 .accent { color: #ff6274; }
.sv-band--red .sv-h2 .accent { color: #00082A; }

.sv-h3 { margin: 0 0 0.55rem; font-weight: 700; font-size: 1.16rem; line-height: 1.28; color: #012169; }
.sv-band--navy .sv-h3, .sv-band--deep .sv-h3, .sv-band--red .sv-h3 { color: #fff; }

/* Body copy: darker than the old #4a5568 — the old leaf pages failed the
   "does this take effort to read" test on tinted backgrounds. */
.sv-p { margin: 0 0 1.05rem; color: #3a4761; font-size: 1.02rem; line-height: 1.72; }
.sv-p:last-child { margin-bottom: 0; }
.sv-band--navy .sv-p, .sv-band--deep .sv-p { color: rgba(255,255,255,.84); }
.sv-band--red .sv-p { color: rgba(255,255,255,.92); }

.sv-lede {
  margin: 0 0 1.15rem; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.3rem);
  line-height: 1.62; color: #33405a; font-weight: 400; max-width: 62ch;
}
.sv-band--navy .sv-lede, .sv-band--deep .sv-lede { color: rgba(255,255,255,.88); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.sv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 2rem; border-radius: 9px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sv-btn--primary { background: #CF081F; color: #fff; border-color: #CF081F; }
.sv-btn--primary:hover { background: #b3061a; border-color: #b3061a; color: #fff; text-decoration: none; transform: translateY(-2px); }
.sv-btn--ghost { background: transparent; color: #012169; border-color: #012169; }
.sv-btn--ghost:hover { background: #012169; color: #fff; text-decoration: none; transform: translateY(-2px); }
.sv-btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.sv-btn--light:hover { background: #fff; color: #012169; text-decoration: none; transform: translateY(-2px); }
.sv-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sv-band--white .sv-btn:focus-visible, .sv-band--bone .sv-btn:focus-visible { outline-color: #012169; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.6rem; }

/* --------------------------------------------------------------------------
   4. HERO VARIANT A — split: headline left, real image right.
   Replaces the old "glorified title bar" hero-detail.
   -------------------------------------------------------------------------- */
.sv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #012169; color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem); padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.sv-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 620px at 12% 6%, rgba(43,79,162,.6) 0%, rgba(1,33,105,0) 55%),
    radial-gradient(820px 640px at 92% 96%, rgba(207,8,31,.32) 0%, rgba(1,33,105,0) 58%);
}
.sv-hero__inner { max-width: 1180px; margin-inline: auto; display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .sv-hero--split .sv-hero__inner { grid-template-columns: 1.05fr 1fr; } }
.sv-hero__pill {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 1.1rem;
  padding: 0.4rem 0.9rem; border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.sv-hero__pill svg { width: 14px; height: 14px; color: #ff6274; }
.sv-hero__h1 {
  margin: 0 0 1.1rem; font-weight: 800;
  font-size: clamp(2.15rem, 1rem + 4.4vw, 3.9rem);
  line-height: 1.05; letter-spacing: -0.028em; color: #fff; text-wrap: balance;
}
.sv-hero__h1 .accent { color: #ff6274; }   /* brightened red — #CF081F is too low-contrast on navy */
.sv-hero__sub { margin: 0; max-width: 52ch; font-size: clamp(1.04rem, 1rem + 0.45vw, 1.24rem); line-height: 1.6; color: rgba(255,255,255,.86); }
.sv-hero__media { position: relative; }
.sv-hero__media img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.72);
}
@media (max-width: 899px) { .sv-hero--split .sv-hero__media { order: -1; } }

/* HERO VARIANT B — feature: full-bleed photo, text overlaid. */
.sv-hero--feature { padding: 0; min-height: min(78vh, 660px); display: flex; align-items: flex-end; }
.sv-hero--feature .sv-hero__bg { position: absolute; inset: 0; z-index: -2; }
.sv-hero--feature .sv-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-hero--feature::before {
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,8,42,.94) 0%, rgba(0,8,42,.78) 42%, rgba(0,8,42,.28) 78%, rgba(0,8,42,.15) 100%);
}
.sv-hero--feature .sv-hero__inner { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem); width: 100%; }
.sv-hero--feature .sv-hero__col { max-width: 46rem; }

/* HERO VARIANT D — bar: text-only band, flat deep navy — the same #00082A
   ground the old feature overlay read as. No pill, no media, no glow. */
.sv-hero--bar { background: #00082A; padding-block: clamp(2.25rem, 4vw, 3rem); }
.sv-hero--bar::before { content: none; }
.sv-hero--bar .sv-hero__col { max-width: 46rem; }

/* HERO VARIANT C — editorial: oversized type stacked over an offset figure. */
.sv-hero--editorial { background: #00082A; }
.sv-hero--editorial .sv-hero__h1 { font-size: clamp(2.4rem, 1rem + 6vw, 5rem); letter-spacing: -0.035em; }
@media (min-width: 900px) { .sv-hero--editorial .sv-hero__inner { grid-template-columns: 1.25fr 1fr; align-items: end; } }

/* Type-only hero: one column, and the statement gets room to breathe rather
   than sitting against an empty reserved half. */
.sv-hero--solo .sv-hero__inner { grid-template-columns: 1fr !important; }
.sv-hero--solo .sv-hero__col { max-width: 58rem; }
.sv-hero--solo .sv-hero__h1 { max-width: 18ch; }
.sv-hero--solo .sv-hero__sub { max-width: 58ch; }
@media (min-width: 900px) { .sv-hero--solo { padding-block: clamp(4rem, 9vw, 7rem); } }

/* --------------------------------------------------------------------------
   5. Split feature — image one side, prose + list the other. Alternates.
   -------------------------------------------------------------------------- */
.sv-split { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 860px) { .sv-split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .sv-split--flip .sv-split__media { order: 2; } }
.sv-split__media img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid #e4e9f2; box-shadow: 0 26px 58px -32px rgba(1,33,105,.5);
}
.sv-band--navy .sv-split__media img, .sv-band--deep .sv-split__media img { border-color: rgba(255,255,255,.14); box-shadow: 0 26px 58px -28px rgba(0,0,0,.6); }
.sv-split__body .sv-p { max-width: 52ch; }

/* --------------------------------------------------------------------------
   6. Full-bleed figure band — for the meaningful custom graphic. The graphic
   is the content here, not decoration, so it gets its own band + caption.
   -------------------------------------------------------------------------- */
.sv-figure { margin: 0; }
.sv-figure img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  border: 1px solid #e4e9f2; box-shadow: 0 30px 70px -38px rgba(1,33,105,.55);
}
.sv-band--navy .sv-figure img, .sv-band--deep .sv-figure img { border-color: rgba(255,255,255,.16); box-shadow: 0 30px 70px -32px rgba(0,0,0,.66); }
/* Inline-SVG chart figures — same card chrome as image figures. */
.sv-figure__svg {
  background: #fff; border-radius: 18px; border: 1px solid #e4e9f2;
  box-shadow: 0 30px 70px -38px rgba(1,33,105,.55);
  padding: clamp(1rem, 2.5vw, 2rem);
}
.sv-figure__svg svg { width: 100%; height: auto; display: block; font-family: 'Roboto', system-ui, sans-serif; }
.sv-figure figcaption { margin-top: 1rem; font-size: 0.92rem; line-height: 1.6; color: #5c6b85; max-width: 68ch; }
.sv-band--navy .sv-figure figcaption, .sv-band--deep .sv-figure figcaption { color: rgba(255,255,255,.66); }
.sv-figure--framed img { background: #fff; padding: clamp(0.75rem, 2vw, 1.5rem); }
/* Flush insert — no card chrome; the graphic reads as part of the page. */
.sv-figure--flush img { border: 0; border-radius: 0; box-shadow: none; }

/* --------------------------------------------------------------------------
   7. Editorial numbered list — replaces the generic 3-card grid where the
   content is genuinely sequential or itemised prose (not icon soup).
   -------------------------------------------------------------------------- */
.sv-list { display: grid; gap: 0; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid #e4e9f2; }
.sv-band--navy .sv-list, .sv-band--deep .sv-list { border-color: rgba(255,255,255,.18); }
.sv-list__item {
  display: grid; gap: 0.35rem 1.5rem; padding: clamp(1.15rem, 2.4vw, 1.7rem) 0;
  border-bottom: 1px solid #e4e9f2; align-items: start;
}
.sv-band--navy .sv-list__item, .sv-band--deep .sv-list__item { border-color: rgba(255,255,255,.18); }
/* was 4.5rem 1fr 1.15fr, which opened a canyon between the title and its
   description on a 1180px container — tightened so the two read as one line */
@media (min-width: 760px) { .sv-list__item { grid-template-columns: 3.25rem 15rem 1fr; gap: 0 1.75rem; align-items: baseline; } }
.sv-list__n { font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em; color: #CF081F; }
.sv-band--navy .sv-list__n, .sv-band--deep .sv-list__n { color: #ff6274; }
.sv-list__t { margin: 0; font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: #012169; }
.sv-band--navy .sv-list__t, .sv-band--deep .sv-list__t { color: #fff; }
.sv-list__d { margin: 0; color: #3a4761; font-size: 0.98rem; line-height: 1.62; }
.sv-band--navy .sv-list__d, .sv-band--deep .sv-list__d { color: rgba(255,255,255,.78); }

/* --------------------------------------------------------------------------
   8. Comparison — two honest columns (the problem vs what we do about it).
   Used instead of a card grid where the point is a contrast.
   -------------------------------------------------------------------------- */
.sv-compare { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (min-width: 780px) { .sv-compare { grid-template-columns: 1fr 1fr; } }
.sv-compare__col { border-radius: 16px; padding: clamp(1.4rem, 2.6vw, 2rem); }
.sv-compare__col--bad { background: #fff; border: 1px solid #e4e9f2; }
.sv-compare__col--good { background: #012169; color: #fff; box-shadow: 0 24px 54px -30px rgba(1,33,105,.6); }
.sv-compare__label {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.sv-compare__col--bad .sv-compare__label { color: #8b93a6; }
.sv-compare__col--good .sv-compare__label { color: #ff6274; }
.sv-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.sv-compare li { position: relative; padding-left: 1.7rem; font-size: 0.99rem; line-height: 1.6; }
.sv-compare__col--bad li { color: #55617a; }
.sv-compare__col--good li { color: rgba(255,255,255,.9); }
.sv-compare li::before {
  position: absolute; left: 0; top: 0.05em; font-weight: 700; font-size: 1.05em;
}
.sv-compare__col--bad li::before { content: '\00d7'; color: #b6bdcc; }
.sv-compare__col--good li::before { content: '\2713'; color: #ff6274; }

/* --------------------------------------------------------------------------
   9. Checklist beside an image — "what's included" without an icon grid.
   -------------------------------------------------------------------------- */
.sv-checks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.sv-checks li { position: relative; padding-left: 2rem; font-size: 1rem; line-height: 1.6; color: #3a4761; }
.sv-band--navy .sv-checks li, .sv-band--deep .sv-checks li { color: rgba(255,255,255,.85); }
.sv-checks li::before {
  content: ''; position: absolute; left: 0; top: 0.38em;
  width: 12px; height: 7px; border-left: 2.5px solid #CF081F; border-bottom: 2.5px solid #CF081F;
  transform: rotate(-45deg);
}
.sv-checks li strong { color: #012169; font-weight: 700; }
.sv-band--navy .sv-checks li strong, .sv-band--deep .sv-checks li strong { color: #fff; }

/* --------------------------------------------------------------------------
   10. Use-case tiles — content-led, not icon-led. Denser and flatter than the
   old card grid so it doesn't read as another three-box row.
   -------------------------------------------------------------------------- */
.sv-tiles { display: grid; gap: clamp(0.85rem, 1.8vw, 1.25rem); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .sv-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sv-tiles--3 { grid-template-columns: repeat(3, 1fr); } }
.sv-tile {
  background: #fff; border: 1px solid #e4e9f2; border-left: 3px solid #CF081F;
  border-radius: 0 12px 12px 0; padding: clamp(1.15rem, 2.2vw, 1.6rem);
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s;
}
.sv-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(1,33,105,.42); }
.sv-band--navy .sv-tile, .sv-band--deep .sv-tile { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); border-left-color: #ff6274; }
.sv-tile h3 { margin: 0 0 0.5rem; font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: #012169; }
.sv-band--navy .sv-tile h3, .sv-band--deep .sv-tile h3 { color: #fff; }
.sv-tile p { margin: 0; font-size: 1rem; line-height: 1.65; color: #46536c; }
.sv-band--navy .sv-tile p, .sv-band--deep .sv-tile p { color: rgba(255,255,255,.76); }

/* --------------------------------------------------------------------------
   10b. App tiles — the products a service is built on, named. Hand-authored
   glyphs (see APP_GLYPH in build-service-pages.mjs) rather than generated art,
   so nothing is ever a malformed logo.
   -------------------------------------------------------------------------- */
.sv-apps {
  list-style: none; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; padding: 0;
  display: grid; gap: clamp(0.75rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .sv-apps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .sv-apps { grid-template-columns: repeat(5, 1fr); } }
.sv-app {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  background: #fff; border: 1px solid #e4e9f2; border-radius: 14px;
  padding: clamp(0.9rem, 1.8vw, 1.15rem);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s;
}
.sv-app:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(1,33,105,.4); border-color: #cfd8e8; }
.sv-band--navy .sv-app, .sv-band--deep .sv-app { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
/* real product artwork — never tinted, filtered or distorted */
.sv-app__logo { width: 34px; height: 34px; display: block; object-fit: contain; }
.sv-app__name { font-weight: 700; font-size: 0.97rem; color: #012169; line-height: 1.2; }
.sv-band--navy .sv-app__name, .sv-band--deep .sv-app__name { color: #fff; }
.sv-app__use { font-size: 0.86rem; line-height: 1.5; color: #55617a; }
.sv-band--navy .sv-app__use, .sv-band--deep .sv-app__use { color: rgba(255,255,255,.74); }
.sv-apps__note { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; font-size: 0.95rem; line-height: 1.65; color: #5c6b85; max-width: 70ch; }
.sv-band--navy .sv-apps__note, .sv-band--deep .sv-apps__note { color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   10c. Product chain — what happens after one trigger, app by app. Native
   markup so the logos are the real files and every label stays selectable and
   responsive; on narrow screens it becomes a vertical list rather than
   squeezing seven columns.
   -------------------------------------------------------------------------- */
.sv-chain {
  list-style: none; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; padding: 0;
  display: grid; gap: clamp(0.6rem, 1.4vw, 0.9rem);
  grid-template-columns: 1fr; counter-reset: chain;
}
@media (min-width: 620px) { .sv-chain { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sv-chain { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1120px) { .sv-chain { grid-template-columns: repeat(7, 1fr); } }
.sv-chain__step {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem;
  background: #fff; border: 1px solid #e4e9f2; border-radius: 14px;
  padding: clamp(0.9rem, 1.8vw, 1.15rem);
}
.sv-band--bone .sv-chain__step { box-shadow: 0 10px 26px -18px rgba(1,33,105,.35); }
/* connector arrow between steps, only where they sit side by side */
@media (min-width: 1120px) {
  .sv-chain__step:not(:last-child)::after {
    content: ''; position: absolute; right: -0.62rem; top: 50%; z-index: 1;
    width: 7px; height: 7px; border-top: 2px solid #CF081F; border-right: 2px solid #CF081F;
    transform: translateY(-50%) rotate(45deg);
  }
}
.sv-chain__n { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: #CF081F; }
.sv-chain__logo { width: 30px; height: 30px; display: block; object-fit: contain; }
.sv-chain__app { font-weight: 700; font-size: 0.95rem; color: #012169; line-height: 1.2; }
.sv-chain__do { font-size: 0.85rem; line-height: 1.5; color: #55617a; }
.sv-chain__foot {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: clamp(0.9rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.5rem);
  background: #012169; color: #fff; border-radius: 12px;
  font-weight: 700; font-size: clamp(1rem, 1rem + 0.3vw, 1.15rem); text-align: center;
}
.sv-chain__foot .accent { color: #ff6274; }

/* --------------------------------------------------------------------------
   10e. Logo marquee — the platforms we build on, scrolling. Mirrors the home
   page band: seamless because the set is emitted twice and the track moves
   -50%; pauses on hover; stops dead under reduced motion.
   -------------------------------------------------------------------------- */
/* The band itself is the strip: full-bleed, tight, no inner container —
   matching the home page marquee's proportions exactly. */
.sv-band--strip { padding-block: clamp(1.6rem, 3.5vw, 2.5rem); padding-inline: 0; }
.sv-mq { overflow: hidden; }
.sv-mq__track { display: flex; width: max-content; animation: sv-mq-scroll 52s linear infinite; will-change: transform; }
.sv-mq:hover .sv-mq__track { animation-play-state: paused; }
.sv-mq__half { display: flex; align-items: center; gap: clamp(1.6rem, 4vw, 3rem); padding-right: clamp(1.6rem, 4vw, 3rem); }
.sv-mq__chip { flex: 0 0 auto; display: grid; place-items: center; }
/* Sized by HEIGHT so each SVG scales from its own viewBox and keeps its aspect
   ratio — never stretched. --s is the per-logo optical adjustment. */
.sv-mq__chip img {
  height: calc(clamp(30px, 3.4vw, 42px) * var(--s, 1));
  width: auto; max-width: 92%; object-fit: contain; display: block;
  opacity: .9; transition: opacity .2s ease;
}
.sv-mq:hover .sv-mq__chip img { opacity: 1; }
.sv-mq__note { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; font-size: 0.95rem; line-height: 1.65; color: #5c6b85; max-width: 72ch; }
.sv-band--navy .sv-mq__note, .sv-band--deep .sv-mq__note { color: rgba(255,255,255,.72); }
@keyframes sv-mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sv-mq__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .sv-mq__half:last-child { display: none; }   /* one set only when static */
  .sv-mq__half { flex-wrap: wrap; justify-content: center; }
}

/* --------------------------------------------------------------------------
   10f. Platform chooser — real mark, who it suits, and an honest caveat.
   -------------------------------------------------------------------------- */
.sv-pick { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 820px) { .sv-pick { grid-template-columns: repeat(3, 1fr); } }
.sv-pick__card {
  display: flex; flex-direction: column; gap: 0.85rem;
  background: #fff; border: 1px solid #e4e9f2; border-top: 3px solid #012169;
  border-radius: 14px; padding: clamp(1.35rem, 2.6vw, 1.9rem);
  box-shadow: 0 18px 40px -30px rgba(1,33,105,.5);
}
/* Logo slot. Fixed height so every card's heading starts at the same Y. The
   color/ marks used here have their viewBox cropped to the drawn ink (see
   ops/build-brand-logos.mjs), so height:100% gives every brand exactly the
   same visible height with no per-logo scale factors — widths differ (a
   wordmark is wider than a bag icon), which is fine and expected. */
.sv-pick__logoslot { height: clamp(36px, 3.4vw, 48px); display: flex; align-items: center; }
.sv-pick__logo {
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain; object-position: left center; display: block;
}
.sv-pick__for { margin: 0; font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: #012169; }
/* Two lines reserved so a heading that wraps and one that does not still leave
   their bullet lists starting on the same line. Only worth doing once the cards
   are actually side by side — stacked, it is just a gap under the short one. */
@media (min-width: 820px) { .sv-pick__for { min-height: calc(2 * 1.35em); } }
.sv-pick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sv-pick__list li { position: relative; padding-left: 1.6rem; font-size: 0.97rem; line-height: 1.6; color: #3a4761; }
.sv-pick__list li::before {
  content: ''; position: absolute; left: 0; top: 0.42em; width: 11px; height: 6px;
  border-left: 2.5px solid #CF081F; border-bottom: 2.5px solid #CF081F; transform: rotate(-45deg);
}
.sv-pick__caveat { margin: auto 0 0; padding-top: 0.9rem; border-top: 1px solid #eef1f7; font-size: 0.9rem; line-height: 1.55; color: #6b7791; }
.sv-pick__note { margin: clamp(1.5rem, 3vw, 2rem) 0 0; font-size: 1rem; line-height: 1.7; color: #3a4761; max-width: 74ch; }

/* --------------------------------------------------------------------------
   10g. Buying journey — device frames built in markup, one per step.
   -------------------------------------------------------------------------- */
.sv-journey { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .sv-journey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sv-journey { grid-template-columns: repeat(4, 1fr); } }
.sv-journey__step {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem;
  background: #fff; border: 1px solid #e4e9f2; border-radius: 16px;
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
}
.sv-journey__n { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; color: #CF081F; }
/* device frame + a simple screen state, drawn with gradients so it stays crisp */
.sv-journey__phone {
  align-self: center; width: clamp(92px, 11vw, 118px); aspect-ratio: 9 / 16;
  border: 3px solid #012169; border-radius: 16px; padding: 7px; background: #fff;
  box-shadow: 0 12px 28px -18px rgba(1,33,105,.55);
}
.sv-journey__screen { width: 100%; height: 100%; display: block; border-radius: 8px; background: #f7f9fc; }
.sv-journey__t { margin: 0; font-weight: 700; font-size: 1.06rem; line-height: 1.3; color: #012169; }
.sv-journey__d { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #3a4761; }
.sv-journey__risk { margin: auto 0 0; padding-top: 0.8rem; border-top: 1px solid #eef1f7; font-size: 0.88rem; line-height: 1.55; color: #6b7791; }
.sv-journey__risk span { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #CF081F; margin-bottom: 0.25rem; }

/* --------------------------------------------------------------------------
   10d. "The glue" panel — one product in the middle of the others, using the
   real supplied artwork. Markup rather than a generated picture.
   -------------------------------------------------------------------------- */
.sv-glue {
  background: #fff; border: 1px solid #e4e9f2; border-radius: 18px;
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid; gap: clamp(0.9rem, 2vw, 1.35rem); justify-items: center;
  box-shadow: 0 24px 54px -34px rgba(1,33,105,.45);
}
.sv-glue__row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.85rem, 2.5vw, 1.9rem); }
.sv-glue__app { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 4.4rem; }
.sv-glue__app img { width: 30px; height: 30px; display: block; object-fit: contain; }
.sv-glue__app span { font-size: 0.76rem; font-weight: 600; color: #55617a; text-align: center; line-height: 1.25; }
.sv-glue__core {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  background: #f5f7fb; border: 1px solid #dfe6f2; border-radius: 14px;
  padding: clamp(0.9rem, 2vw, 1.15rem) clamp(1.1rem, 3vw, 1.75rem); width: 100%; max-width: 22rem;
}
/* connectors up and down into the core */
.sv-glue__core::before, .sv-glue__core::after {
  content: ''; position: absolute; left: 50%; width: 2px; height: clamp(0.7rem, 2vw, 1.1rem);
  background: #CF081F; transform: translateX(-50%);
}
.sv-glue__core::before { top: calc(-1 * clamp(0.7rem, 2vw, 1.1rem)); }
.sv-glue__core::after { bottom: calc(-1 * clamp(0.7rem, 2vw, 1.1rem)); }
.sv-glue__core img { width: 40px; height: 40px; display: block; object-fit: contain; }
.sv-glue__coreName { font-weight: 800; font-size: 1.08rem; color: #012169; }
.sv-glue__coreLine { font-size: 0.86rem; line-height: 1.5; color: #55617a; text-align: center; max-width: 30ch; }

/* --------------------------------------------------------------------------
   11. Pull statement — a breather between dense sections.
   -------------------------------------------------------------------------- */
.sv-pull { max-width: 24ch; margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.14;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 2.6rem); }
.sv-pull--wide { max-width: 34ch; }
.sv-pull .accent { color: #ff6274; }
.sv-band--white .sv-pull, .sv-band--bone .sv-pull { color: #012169; }
.sv-band--white .sv-pull .accent, .sv-band--bone .sv-pull .accent { color: #CF081F; }
/* a light-red accent on a red band is near-invisible — go dark navy instead */
.sv-band--red .sv-pull .accent { color: #00082A; }
.sv-pull__note { margin: 1.15rem 0 0; max-width: 54ch; font-size: 1.02rem; line-height: 1.68; }
.sv-band--navy .sv-pull__note, .sv-band--deep .sv-pull__note, .sv-band--red .sv-pull__note { color: rgba(255,255,255,.8); }
.sv-band--white .sv-pull__note, .sv-band--bone .sv-pull__note { color: #3a4761; }
@media (min-width: 860px) {
  .sv-pull-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
  .sv-pull-grid .sv-pull__note { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.sv-faq { max-width: 820px; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; border-top: 1px solid #e4e9f2; text-align: left; }
.sv-faq details { border-bottom: 1px solid #e4e9f2; }
.sv-faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.15rem 2.75rem 1.15rem 0; font-weight: 700; font-size: 1.06rem; color: #012169;
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after {
  content: ''; position: absolute; right: 0.35rem; top: 1.4rem; width: 10px; height: 10px;
  border-right: 2px solid #CF081F; border-bottom: 2px solid #CF081F;
  transform: rotate(45deg); transition: transform .2s;
}
.sv-faq details[open] summary::after { transform: rotate(-135deg); }
.sv-faq summary:focus-visible { outline: 3px solid #012169; outline-offset: 3px; border-radius: 4px; }
.sv-faq p { margin: 0 0 1.15rem; color: #4a5568; line-height: 1.7; max-width: 70ch; }

/* --------------------------------------------------------------------------
   13. Related services — quiet outbound row, keeps the hub graph connected.
   -------------------------------------------------------------------------- */
.sv-rel { display: grid; gap: 0.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .sv-rel { grid-template-columns: repeat(3, 1fr); } }
.sv-rel a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border: 1px solid #e4e9f2; border-radius: 12px; background: #fff;
  text-decoration: none; color: #012169; font-weight: 700; font-size: 0.98rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.sv-rel a::after { content: '\2192'; color: #CF081F; transition: transform .2s; }
.sv-rel a:hover { border-color: #CF081F; transform: translateY(-2px); box-shadow: 0 14px 32px -20px rgba(1,33,105,.4); text-decoration: none; }
.sv-rel a:hover::after { transform: translateX(4px); }
.sv-rel a:focus-visible { outline: 3px solid #012169; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   14. Closing CTA
   -------------------------------------------------------------------------- */
.sv-cta { text-align: center; }
.sv-cta .sv-h2 { margin-inline: auto; max-width: 20ch; }
.sv-cta .sv-p { margin-inline: auto; max-width: 52ch; }
.sv-cta .sv-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   15. Mobile guards — the old pages wrapped badly at 360-412.
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .sv-hero__h1 { hyphens: none; word-break: normal; overflow-wrap: break-word; }
  .sv-actions { gap: 0.65rem; }
  .sv-actions .sv-btn { width: 100%; }
  .sv-list__item { grid-template-columns: 1fr; }
  .sv-list__n { margin-bottom: 0.1rem; }
}

/* ═══ Devices band — one design system, three real HTML renderings ═══ */
.sv-dev {
  position: relative; margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr;
}
.sv-dev__frame {
  background: #fff; border: 1px solid #dfe5ef; border-radius: 14px;
  box-shadow: 0 30px 70px -34px rgba(1,33,105,.45);
  overflow: hidden; position: relative;
}
/* editorial overlap on wide screens; clean stack on small */
@media (min-width: 860px) {
  .sv-dev { grid-template-columns: repeat(20, 1fr); align-items: end; padding-bottom: 2.4rem; }
  .sv-dev__frame--desktop { grid-column: 1 / 14; grid-row: 1; z-index: 1; }
  .sv-dev__frame--tablet  { grid-column: 13 / 18; grid-row: 1; z-index: 2; margin-bottom: -.5rem; }
  .sv-dev__frame--phone   { grid-column: 17 / 21; grid-row: 1; z-index: 3; margin-bottom: -1rem; }
  .sv-dev__frame--tablet, .sv-dev__frame--phone { box-shadow: -18px 30px 60px -30px rgba(1,33,105,.55); }
}
@media (max-width: 859.98px) {
  .sv-dev { gap: 2.6rem; }
  .sv-dev__frame--tablet { max-width: 420px; }
  .sv-dev__frame--phone { max-width: 260px; }
}
.sv-dev__chrome {
  display: flex; align-items: center; gap: 5px; padding: 8px 12px;
  background: #f1f4fa; border-bottom: 1px solid #e4e9f2;
}
.sv-dev__chrome span { width: 8px; height: 8px; border-radius: 50%; background: #d3dae8; }
.sv-dev__chrome em {
  font-style: normal; font-size: 9px; color: #7e88a0; background: #fff;
  border-radius: 20px; padding: 2px 12px; margin-left: 8px;
}
.sv-dev__page { padding: 12px 16px 16px; }
.sv-dev__frame--tablet .sv-dev__page { padding: 10px 12px 14px; border-top: 6px solid #0d1220; border-radius: 8px 8px 0 0; }
.sv-dev__frame--phone .sv-dev__page { padding: 9px 10px 0; border-top: 8px solid #0d1220; border-radius: 10px 10px 0 0; position: relative; }
/* specimen page internals — real type, miniature scale */
.sv-dev__nav { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #eef1f7; }
.sv-dev__logo { font-weight: 800; font-size: 11px; color: #012169; letter-spacing: -.01em; margin-right: auto; }
.sv-dev__nav i { font-style: normal; font-size: 8.5px; color: #3a4761; }
.sv-dev__cta {
  text-decoration: none; background: #CF081F; color: #fff; font-weight: 700;
  font-size: 8.5px; padding: 4px 10px; border-radius: 4px; white-space: nowrap;
}
.sv-dev__burger { display: inline-flex; flex-direction: column; gap: 2.5px; }
.sv-dev__burger em { width: 13px; height: 2px; background: #012169; border-radius: 2px; }
.sv-dev__hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; align-items: center; padding: 11px 0; }
.sv-dev__hero h3 { margin: 0 0 5px; font-size: 16px; line-height: 1.15; color: #012169; letter-spacing: -.02em; }
.sv-dev__hero p { margin: 0 0 7px; font-size: 8.5px; line-height: 1.5; color: #5c6b85; max-width: 24ch; }
.sv-dev__pic {
  aspect-ratio: 16 / 9; border-radius: 8px;
  background: linear-gradient(135deg, #0a2f7c 0%, #012169 55%, #00082A 100%);
  position: relative; overflow: hidden;
}
.sv-dev__pic::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(255,255,255,.22), transparent 55%);
}
.sv-dev__hero--stack { grid-template-columns: 1fr; gap: 7px; padding: 10px 0 8px; }
.sv-dev__hero--stack .sv-dev__pic { aspect-ratio: 16 / 7; }
.sv-dev__hero--stack .sv-dev__cta { justify-self: start; }
.sv-dev__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sv-dev__cards--2 { grid-template-columns: repeat(2, 1fr); }
.sv-dev__cards--1 { grid-template-columns: 1fr; }
.sv-dev__card { border: 1px solid #eef1f7; border-radius: 7px; padding: 8px; }
.sv-dev__card b { display: block; width: 14px; height: 14px; border-radius: 4px; background: #CF081F; opacity: .9; margin-bottom: 6px; }
.sv-dev__card h4 { margin: 0 0 5px; font-size: 8.5px; color: #012169; }
.sv-dev__card p { margin: 0 0 3px; height: 3.5px; border-radius: 2px; background: #e7ebf3; }
.sv-dev__card p.sv-dev__short { width: 62%; }
.sv-dev__stickybar {
  position: sticky; bottom: 0; margin: 8px -10px 0; padding: 7px 10px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(2px);
  border-top: 1px solid #eef1f7; display: flex;
}
.sv-dev__stickybar .sv-dev__cta { flex: 1; text-align: center; padding: 5px 10px; }
.sv-dev__note { margin: clamp(2.2rem, 4vw, 3rem) 0 0; font-size: 1rem; line-height: 1.7; color: #3a4761; max-width: 74ch; }

/* ═══ Proof strip — real project panels, linking to the work page ═══ */
.sv-proof__head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1.2rem; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.sv-proof__head .sv-eyebrow { grid-column: 1 / -1; }
.sv-proof__head .sv-h2 { margin: 0; text-align: left; }
.sv-proof__link { font-weight: 700; color: #CF081F; text-decoration: none; white-space: nowrap; padding-bottom: .35rem; }
.sv-proof__link:hover { text-decoration: underline; }
.sv-proof__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 1.4rem); }
@media (max-width: 700px) { .sv-proof__row { grid-template-columns: 1fr; } }
.sv-proof__item { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #e4e9f2; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) {
  .sv-proof__item:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(1,33,105,.5); }
}
.sv-proof__item:active { transform: scale(0.98); }
.sv-proof__item img { width: 100%; height: auto; display: block; }

/* ═══ WordPress pair — editor on the left, live site on the right ═══ */
.sv-wp {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(.9rem, 2vw, 1.6rem);
  align-items: stretch; margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 880px) {
  .sv-wp { grid-template-columns: 1fr; }
  .sv-wp__flow { transform: rotate(90deg); justify-self: center; margin: -0.4rem 0; }
}
.sv-wp__admin, .sv-wp__site {
  background: #fff; border: 1px solid #dfe5ef; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(1,33,105,.45); min-width: 0;
}
/* authentic WP admin palette — this is what the real thing looks like */
.sv-wp__admin { display: grid; grid-template-columns: 118px 1fr; background: #1d2327; }
.sv-wp__side { padding: 12px 0; display: flex; flex-direction: column; gap: 2px; }
.sv-wp__wplogo {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #a7aaad;
  color: #a7aaad; font-weight: 800; font-size: 12px; display: grid; place-items: center;
  margin: 0 0 10px 14px; font-style: normal;
}
.sv-wp__side i { font-style: normal; font-size: 10.5px; color: #a7aaad; padding: 6px 14px; }
.sv-wp__side i.is-on { color: #fff; background: #2271b1; border-left: 3px solid #72aee6; padding-left: 11px; }
.sv-wp__canvas { background: #f0f0f1; display: flex; flex-direction: column; }
.sv-wp__bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-bottom: 1px solid #dcdcde; padding: 7px 12px;
}
.sv-wp__bar em { font-style: normal; font-size: 10px; color: #50575e; }
.sv-wp__publish {
  text-decoration: none; background: #2271b1; color: #fff; font-weight: 600;
  font-size: 10px; padding: 4px 12px; border-radius: 3px;
}
.sv-wp__doc { background: #fff; margin: 14px; padding: 16px 18px; flex: 1; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sv-wp__doc h3 { margin: 0 0 18px; font-size: 15px; color: #1d2327; letter-spacing: -.01em; }
.sv-wp__block { position: relative; padding: 6px 8px; border-radius: 3px; }
.sv-wp__block p { margin: 0; font-size: 10px; line-height: 1.6; color: #3c434a; }
.sv-wp__block.is-sel { outline: 1.5px solid #2271b1; }
.sv-wp__tools {
  position: absolute; top: -16px; left: 6px; display: inline-flex; gap: 1px;
  background: #1d2327; border-radius: 3px; padding: 2px;
}
.sv-wp__tools b { color: #fff; font-size: 8px; width: 14px; height: 12px; display: grid; place-items: center; font-weight: 700; }
.sv-wp__flow {
  align-self: center; display: flex; flex-direction: column; align-items: center;
  gap: 2px; color: #CF081F;
}
.sv-wp__flow svg { width: 44px; height: 22px; }
.sv-wp__flowlab { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sv-wp__flowtime { font-size: .72rem; color: #8a94ab; white-space: nowrap; }
.sv-wp__front { padding: 12px 16px 16px; }
.sv-wp__front h3 { margin: 10px 0 6px; font-size: 16px; color: #012169; letter-spacing: -.02em; }
.sv-wp__frontline { margin: 0 0 5px; font-size: 10px; line-height: 1.6; color: #3a4761; }
.sv-wp__frontline--dim { color: #8a94ab; }
.sv-wp__frontcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sv-wp__frontcards div {
  height: 44px; border-radius: 7px;
  background: linear-gradient(135deg, #0a2f7c, #012169 70%);
}
.sv-wp__frontcards div:last-child { background: #f0f2f8; border: 1px solid #e4e9f2; }

/* ═══ Deck spread — five real mini-slides, staggered like a table spread ═══ */
.sv-deck {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.2rem); margin-top: clamp(2rem, 4vw, 3rem);
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.6rem 4px 1.2rem;
  scrollbar-width: thin;
}
.sv-deck__slide {
  aspect-ratio: 16 / 10; background: #fff; border: 1px solid #dfe5ef;
  border-radius: 10px; padding: 14px 16px; position: relative; overflow: hidden;
  box-shadow: 0 24px 55px -30px rgba(1,33,105,.5);
  scroll-snap-align: center; min-width: 0;
}
@media (min-width: 1000px) {
  .sv-deck__slide:nth-child(odd) { transform: translateY(-10px) rotate(-.4deg); }
  .sv-deck__slide:nth-child(even) { transform: translateY(10px) rotate(.35deg); }
}
.sv-deck__slide--cover { background: linear-gradient(150deg, #0a2f7c, #012169 55%, #00082A); border: 0; }
.sv-deck__mark { display: block; width: 18px; height: 18px; border-radius: 5px; background: #CF081F; margin-bottom: 26px; }
.sv-deck__slide--cover h3 { margin: 0 0 6px; font-size: 17px; color: #fff; letter-spacing: -.02em; line-height: 1.1; }
.sv-deck__slide--cover p { margin: 0; font-size: 9px; color: rgba(255,255,255,.65); }
.sv-deck__slide h4 { margin: 0 0 9px; font-size: 11.5px; color: #012169; letter-spacing: -.01em; }
.sv-deck__pg { position: absolute; right: 12px; bottom: 8px; font-size: 8px; font-weight: 700; color: #a5aec2; }
.sv-deck__slide--cover .sv-deck__pg { color: rgba(255,255,255,.4); }
.sv-deck__stats { display: grid; gap: 6px; }
.sv-deck__stats div { display: flex; align-items: baseline; gap: 8px; }
.sv-deck__stats b { font-size: 13.5px; color: #CF081F; letter-spacing: -.02em; min-width: 40px; white-space: nowrap; }
.sv-deck__stats i { font-style: normal; font-size: 8.5px; color: #5c6b85; line-height: 1.35; }
.sv-deck__chart { width: 100%; height: auto; }
.sv-deck__nodes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sv-deck__nodes span {
  font-size: 8px; font-weight: 700; color: #012169; border: 1.2px solid #012169;
  border-radius: 20px; padding: 3px 8px; white-space: nowrap;
}
.sv-deck__nodes em { color: #CF081F; font-style: normal; font-size: 10px; }
.sv-deck__bars p { margin: 0 0 5px; height: 4px; border-radius: 2px; background: #e7ebf3; }
.sv-deck__bars .sv-deck__short { width: 58%; }
.sv-deck__slide--ask { border-top: 4px solid #CF081F; }
.sv-deck__terms { display: grid; gap: 7px; }
.sv-deck__terms div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #eef1f7; padding-bottom: 5px; }
.sv-deck__terms i { font-style: normal; font-size: 8.5px; color: #5c6b85; }
.sv-deck__terms b { font-size: 10px; color: #012169; }
.sv-deck__labels {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.2rem); padding: 0 4px; margin-top: .2rem;
}
.sv-deck__labels span { text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a94ab; }
@media (max-width: 999.98px) { .sv-deck__labels { display: none; } }

/* all five slides fit without scroll on desktop */
@media (min-width: 1000px) {
  .sv-deck, .sv-deck__labels { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
}

/* ═══ Document contents page (business plans) ═══ */
.sv-docpage {
  background: #fff; border: 1px solid #dfe5ef; border-radius: 4px;
  padding: clamp(1.4rem, 3vw, 2.2rem); aspect-ratio: 8.5 / 10.4;
  box-shadow: 0 30px 70px -34px rgba(1,33,105,.5), 0 0 0 1px rgba(1,33,105,.02);
  display: flex; flex-direction: column; max-width: 460px; margin-inline: auto;
}
.sv-docpage__brand { display: block; width: 26px; height: 5px; background: #CF081F; margin-bottom: 14px; }
.sv-docpage__head h3 { margin: 0 0 4px; font-size: clamp(15px, 1.6vw, 19px); color: #012169; letter-spacing: -.015em; }
.sv-docpage__head p { margin: 0 0 8px; font-size: 10px; color: #8a94ab; }
.sv-docpage__toc { list-style: none; margin: auto 0; padding: 0; display: grid; gap: 8px; }
.sv-docpage__toc li { display: flex; align-items: baseline; gap: 9px; }
.sv-docpage__toc i { font-style: normal; font-size: 9px; font-weight: 800; color: #CF081F; }
.sv-docpage__toc span { font-size: clamp(10px, 1.15vw, 12.5px); color: #1d2a44; font-weight: 600; white-space: nowrap; }
.sv-docpage__toc em { flex: 1; border-bottom: 1.5px dotted #d3dae8; transform: translateY(-2px); }
.sv-docpage__toc b { font-size: 9.5px; color: #8a94ab; font-weight: 600; }
.sv-docpage__foot { border-top: 1px solid #eef1f7; padding-top: 8px; }
.sv-docpage__foot span { font-size: 8.5px; color: #a5aec2; }

/* ═══ Controlled SOP sheet ═══ */
.sv-sop {
  background: #fff; border: 1px solid #dfe5ef; border-radius: 4px;
  padding: clamp(1.2rem, 2.6vw, 1.8rem); max-width: 480px; margin-inline: auto;
  box-shadow: 0 30px 70px -34px rgba(1,33,105,.5);
}
.sv-sop__ctl {
  display: grid; grid-template-columns: repeat(4, auto); gap: 4px 16px;
  border: 1.5px solid #012169; border-radius: 4px; padding: 8px 12px; margin-bottom: 14px;
}
.sv-sop__ctl div { display: flex; flex-direction: column; }
.sv-sop__ctl i { font-style: normal; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: #8a94ab; }
.sv-sop__ctl b { font-size: 10.5px; color: #012169; }
.sv-sop h3 { margin: 0 0 12px; font-size: 15px; color: #012169; letter-spacing: -.01em; }
.sv-sop__steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.sv-sop__steps li { display: flex; gap: 10px; }
.sv-sop__steps i {
  font-style: normal; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: #012169; color: #fff; font-size: 9px; font-weight: 800;
  display: grid; place-items: center; margin-top: 1px;
}
.sv-sop__steps b { display: block; font-size: 10.5px; color: #1d2a44; }
.sv-sop__steps span { font-size: 9px; color: #5c6b85; line-height: 1.45; }
.sv-sop__exc {
  border-left: 3px solid #CF081F; background: #fdf2f3; border-radius: 0 6px 6px 0;
  padding: 7px 10px; font-size: 9px; color: #5c2129; margin-bottom: 12px; line-height: 1.5;
}
.sv-sop__exc b { color: #CF081F; }
.sv-sop__rev { border-top: 1.5px solid #012169; padding-top: 6px; }
.sv-sop__rev > div { display: grid; grid-template-columns: 44px 1fr 74px; gap: 8px; padding: 3px 0; font-size: 8.5px; color: #5c6b85; }
.sv-sop__revhead { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a94ab; font-size: 7.5px; }

/* ═══ Lesson player (courses & training) ═══ */
.sv-les {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; margin-top: clamp(2rem, 4vw, 3rem);
  background: #fff; border: 1px solid #dfe5ef; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(1,33,105,.45);
}
@media (max-width: 820px) { .sv-les { grid-template-columns: 1fr; } }
.sv-les__main { padding: clamp(1rem, 2.4vw, 1.6rem); min-width: 0; }
.sv-les__media {
  position: relative; aspect-ratio: 16 / 8.2; border-radius: 10px; overflow: hidden;
  background:
    radial-gradient(ellipse at 68% 30%, rgba(255, 255, 255, .18), transparent 55%),
    linear-gradient(140deg, #0a2f7c, #012169 60%, #00082A);
}
.sv-les__play {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(255,255,255,.94); color: #CF081F;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.sv-les__play svg { width: 20px; height: 20px; margin-left: 2px; }
.sv-les__time { position: absolute; right: 10px; bottom: 12px; font-size: 9px; color: rgba(255,255,255,.85); }
.sv-les__track { position: absolute; left: 10px; right: 74px; bottom: 16px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
.sv-les__track b { display: block; width: 63%; height: 100%; border-radius: 2px; background: #CF081F; }
.sv-les__main h3 { margin: 12px 0 10px; font-size: 15px; color: #012169; }
.sv-les__quiz { border: 1px solid #e4e9f2; border-radius: 10px; padding: 12px 14px; }
.sv-les__quiz p { margin: 0 0 9px; font-size: 11px; font-weight: 700; color: #1d2a44; }
.sv-les__quiz label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #3a4761; padding: 6px 8px; border-radius: 7px; border: 1px solid transparent; }
.sv-les__quiz label span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cbd4e4; flex: 0 0 auto; }
.sv-les__quiz label.is-sel { border-color: #012169; background: #f5f7fb; }
.sv-les__quiz label.is-sel span { border-color: #012169; box-shadow: inset 0 0 0 3px #fff; background: #012169; }
.sv-les__quiz u { display: inline-block; margin-top: 8px; text-decoration: none; background: #CF081F; color: #fff; font-size: 10px; font-weight: 700; padding: 5px 12px; border-radius: 5px; }
.sv-les__side { background: #f7f9fc; border-left: 1px solid #eef1f7; padding: clamp(1rem, 2.4vw, 1.4rem); }
@media (max-width: 820px) { .sv-les__side { border-left: 0; border-top: 1px solid #eef1f7; } }
.sv-les__prog { position: relative; height: 6px; border-radius: 3px; background: #e7ebf3; margin: 4px 0 40px; }
.sv-les__prog b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: #012169; }
.sv-les__prog span { position: absolute; top: 10px; left: 0; font-size: 9.5px; font-weight: 700; color: #012169; }
.sv-les__mod { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; }
.sv-les__mod i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; border: 1.6px solid #cbd4e4; color: #8a94ab; font-size: 8.5px; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
.sv-les__mod span { font-size: 10.5px; color: #3a4761; flex: 1; min-width: 0; }
.sv-les__mod em { font-style: normal; font-size: 8.5px; color: #a5aec2; }
.sv-les__mod.is-done i { background: #012169; border-color: #012169; color: #fff; }
.sv-les__mod.is-done span { color: #8a94ab; text-decoration: line-through; text-decoration-thickness: 1px; }
.sv-les__mod.is-now { background: #fff; border: 1px solid #e4e9f2; box-shadow: 0 6px 16px -10px rgba(1,33,105,.4); }
.sv-les__mod.is-now i { border-color: #CF081F; color: #CF081F; }
.sv-les__mod.is-now span { font-weight: 700; color: #012169; }

/* ═══ Knowledge → course chain ═══ */
.sv-lp { display: flex; gap: clamp(.5rem, 1.2vw, .9rem); align-items: stretch; margin-top: clamp(2rem, 4vw, 3rem); }
.sv-lp__stage { flex: 1 1 0; min-width: 0; }
.sv-lp__arrow { flex: 0 0 auto; align-self: center; }
@media (max-width: 900px) { .sv-lp { flex-direction: column; } .sv-lp__arrow { transform: rotate(90deg); align-self: center; } }
.sv-lp__stage { background: #fff; border: 1px solid #e4e9f2; border-top: 3px solid #012169; border-radius: 12px; padding: clamp(.9rem, 2vw, 1.3rem); }
.sv-lp__stage:last-of-type { border-top-color: #CF081F; }
.sv-lp__badge { font-size: .78rem; font-weight: 800; color: #CF081F; letter-spacing: .06em; }
.sv-lp__stage h3 { margin: .35rem 0 .4rem; font-size: 1.02rem; color: #012169; }
.sv-lp__stage p { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.55; color: #5c6b85; }
.sv-lp__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sv-lp__chips span { font-size: .72rem; font-weight: 600; color: #3a4761; background: #f0f2f8; border-radius: 20px; padding: 3px 9px; }
.sv-lp__arrow { align-self: center; color: #CF081F; }
.sv-lp__arrow svg { width: 30px; height: 22px; }
/* deck problem stat text clears the page number */
.sv-deck__stats i { padding-right: 16px; }

/* ═══ Real before/after pair ═══ */
.sv-ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 2vw, 1.6rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 760px) { .sv-ba { grid-template-columns: 1fr; } }
.sv-ba__col { margin: 0; }
.sv-ba__frame { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #dfe5ef; box-shadow: 0 26px 60px -32px rgba(1,33,105,.5); }
.sv-ba__frame img { width: 100%; height: auto; display: block; }
.sv-ba__frame--before img { filter: saturate(.85); }
.sv-ba__tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(13, 18, 32, .82); color: #fff; border-radius: 6px; padding: 4px 10px;
}
.sv-ba__tag--after { background: #CF081F; }

/* ═══ Asset fan — one message, three native formats ═══ */
.sv-fan { display: grid; grid-template-columns: minmax(170px, 250px) auto 1fr; gap: clamp(.9rem, 2.2vw, 1.8rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 880px) { .sv-fan { grid-template-columns: 1fr; } .sv-fan__arrow { transform: rotate(90deg); justify-self: center; } .sv-fan__src { max-width: 280px; } }
.sv-fan__src {
  position: relative; border-radius: 12px; border: 1.5px dashed #b9c3d8; background: #fff;
  padding: 1.2rem 1.2rem 2.4rem;
}
.sv-fan__src b { display: block; font-size: 34px; line-height: .6; color: #CF081F; font-family: Georgia, serif; }
.sv-fan__src h3 { margin: .4rem 0 0; font-size: clamp(15px, 1.5vw, 18px); color: #012169; letter-spacing: -.015em; line-height: 1.25; }
.sv-fan__src span {
  position: absolute; left: 1.2rem; bottom: .8rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #8a94ab;
}
.sv-fan__arrow { color: #CF081F; }
.sv-fan__arrow svg { width: 30px; height: 22px; }
.sv-fan__outs { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: clamp(.7rem, 1.6vw, 1.2rem); align-items: stretch; min-width: 0; }
@media (max-width: 640px) { .sv-fan__outs { grid-template-columns: 1fr; } }
.sv-fan__out { position: relative; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid #dfe5ef; background: #fff; box-shadow: 0 18px 44px -26px rgba(1,33,105,.45); }
.sv-fan__out em {
  font-style: normal; text-align: center; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #8a94ab; padding: .4rem 0; background: #fff;
  border-top: 1px solid #eef1f7; margin-top: auto;
}
.sv-fan__herobg {
  flex: 1; min-height: 130px; padding: 16px;
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(ellipse at 75% 20%, rgba(255,255,255,.14), transparent 55%), linear-gradient(140deg, #0a2f7c, #012169 60%, #00082A);
}
.sv-fan__herobg h3 { margin: 0 0 5px; font-size: clamp(14px, 1.5vw, 18px); color: #fff; letter-spacing: -.015em; max-width: 18ch; }
.sv-fan__herobg p { margin: 0 0 9px; font-size: 9px; color: rgba(255,255,255,.7); max-width: 30ch; }
.sv-fan__herobg u { text-decoration: none; align-self: flex-start; background: #CF081F; color: #fff; font-size: 9px; font-weight: 700; padding: 4px 11px; border-radius: 4px; }
.sv-fan__cardbody { flex: 1; padding: 12px; }
.sv-fan__chip { display: block; width: 15px; height: 15px; border-radius: 4px; background: #CF081F; margin-bottom: 8px; }
.sv-fan__cardbody h4 { margin: 0 0 7px; font-size: 10.5px; color: #012169; line-height: 1.3; }
.sv-fan__cardbody p { margin: 0 0 4px; height: 4px; border-radius: 2px; background: #e7ebf3; }
.sv-fan__cardbody .sv-fan__short { width: 60%; }
.sv-fan__out--social .sv-fan__soc {
  flex: 1; min-height: 110px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  background: linear-gradient(155deg, #CF081F, #8f0515); padding: 12px;
}
.sv-fan__soc h4 { margin: 0; font-size: clamp(11px, 1.1vw, 13px); line-height: 1.15; color: #fff; letter-spacing: -.005em; text-transform: uppercase; font-weight: 800; max-width: 13ch; }
.sv-fan__soc i { font-style: normal; font-size: 8px; color: rgba(255,255,255,.75); font-weight: 700; }

/* ═══════════ V5: deep FAQ knowledge base ═══════════ */
.sv-fqd { margin-top: clamp(2rem, 4vw, 3rem); columns: 2; column-gap: clamp(1.4rem, 3vw, 2.4rem); }
@media (max-width: 900px) { .sv-fqd { columns: 1; } }
.sv-fqd__group { break-inside: avoid; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.sv-fqd__g {
  margin: 0 0 .9rem; font-size: .82rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #CF081F;
  padding-bottom: .5rem; border-bottom: 2px solid #eef1f7;
}
.sv-fqd details { border-bottom: 1px solid #eef1f7; }
.sv-fqd summary {
  cursor: pointer; list-style: none; position: relative;
  padding: .85rem 2rem .85rem 0; font-weight: 700; font-size: .99rem;
  line-height: 1.45; color: #012169;
}
.sv-fqd summary::-webkit-details-marker { display: none; }
.sv-fqd summary::after {
  content: '+'; position: absolute; right: .2rem; top: .78rem;
  font-size: 1.15rem; font-weight: 700; color: #CF081F;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sv-fqd details[open] summary::after { transform: rotate(45deg); }
.sv-fqd summary:hover { color: #CF081F; }
.sv-fqd summary:focus-visible { outline: 2px solid #CF081F; outline-offset: 2px; border-radius: 4px; }
.sv-fqd__a { padding: 0 .2rem 1rem 0; }
.sv-fqd__a p { margin: 0 0 .7rem; font-size: .94rem; line-height: 1.7; color: #3a4761; }
.sv-fqd__a p:last-child { margin-bottom: 0; }
.sv-band--bone .sv-fqd details, .sv-band--bone .sv-fqd__g { border-color: #e4e9f2; }

/* ═══════════ V5: editorial statement band ═══════════ */
.sv-stmt {
  margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 800;
  line-height: 1.22; letter-spacing: -.02em; color: #012169; text-wrap: balance;
}
.sv-band--navy .sv-stmt, .sv-band--deep .sv-stmt { color: #fff; }
.sv-stmt .accent { color: #CF081F; }
.sv-band--navy .sv-stmt .accent, .sv-band--deep .sv-stmt .accent { color: #ff6274; }
.sv-stmt__sub { margin: 1.1rem 0 0; font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.65; color: #5c6b85; max-width: 62ch; }
.sv-band--navy .sv-stmt__sub, .sv-band--deep .sv-stmt__sub { color: rgba(255,255,255,.72); }
/* statement + graphic: copy sits on the container's left edge (same line as the
   band below), media right; stacks text-first under 900px. */
.sv-stmt-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .sv-stmt-grid { grid-template-columns: 2fr 3fr; } }  /* 40% copy / 60% media */
.sv-stmt-grid__media img { width: 100%; height: auto; display: block; }

/* ═══════════ V5: devices callout badges + legend ═══════════ */
.sv-dev { position: relative; }
.sv-dev__pt {
  position: absolute; z-index: 4; width: 24px; height: 24px; border-radius: 50%;
  background: #CF081F; color: #fff; font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(0,0,0,.5);
}
/* badges anchor to their own frame, so they hold at every width and layout */
.sv-dev__frame { }
.sv-dev__pt--d-nav    { left: -9px;  top: 40px; }
.sv-dev__pt--d-pic    { right: 14%;  top: 34%; }
.sv-dev__pt--d-grid   { left: -9px;  bottom: 14%; }
.sv-dev__pt--t-nav    { right: -9px; top: 14px; }
.sv-dev__pt--p-burger { right: -9px; top: 12px; }
.sv-dev__pt--p-cta    { right: 34%;  bottom: -9px; }
.sv-dev__legend {
  list-style: none; margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.4rem);
}
@media (max-width: 900px) { .sv-dev__legend { grid-template-columns: 1fr; } }
.sv-dev__legend li { display: flex; gap: .7rem; align-items: flex-start; }
.sv-dev__legend i {
  font-style: normal; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #CF081F; color: #fff; font-size: 11.5px; font-weight: 800;
  display: grid; place-items: center; margin-top: 2px;
}
.sv-dev__legend b { display: block; font-size: .93rem; color: #012169; margin-bottom: .15rem; }
.sv-dev__legend span { font-size: .88rem; line-height: 1.55; color: #5c6b85; }

/* ═══════════ V5: art-direction triptych — one photo, three treatments ═══════════ */
.sv-ad { display: grid; grid-template-columns: 2fr 1.1fr 0.9fr; gap: clamp(.9rem, 2vw, 1.5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) { .sv-ad { grid-template-columns: 1fr 1fr; } .sv-ad__f--wide { grid-column: 1 / -1; } }
.sv-ad__f { margin: 0; }
.sv-ad__f img { width: 100%; display: block; border-radius: 12px; border: 1px solid #dfe5ef; box-shadow: 0 22px 50px -28px rgba(1,33,105,.5); }
.sv-ad__f--wide img { aspect-ratio: 16 / 7; object-fit: cover; object-position: 62% 40%; }
.sv-ad__f--square img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 74% 45%; }
.sv-ad__f--tall img { aspect-ratio: 4 / 5.4; object-fit: cover; object-position: 80% 50%; filter: saturate(1.06) contrast(1.04); }
.sv-ad__f figcaption { padding: .65rem .2rem 0; }
.sv-ad__f figcaption b { display: block; font-size: .92rem; color: #012169; margin-bottom: .12rem; }
.sv-ad__f figcaption span { font-size: .85rem; line-height: 1.5; color: #5c6b85; }

.sv-sop__meta { display: flex; gap: 8px; align-items: baseline; margin: 0 0 7px; }
.sv-sop__meta i { font-style: normal; flex: 0 0 76px; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: #8a94ab; font-weight: 800; }
.sv-sop__meta span { font-size: 9.5px; line-height: 1.5; color: #3a4761; }
.sv-sop__meta--refs { margin: 0 0 12px; }

/* ═══════════ V5: editorial work roster (About) ═══════════ */
.sv-roster { list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 720px) { .sv-roster { columns: 1; } }
.sv-roster li { break-inside: avoid; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem .2rem; border-bottom: 1px solid #e4e9f2; }
.sv-roster b { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #012169; letter-spacing: -.01em; }
.sv-roster span { font-size: .85rem; color: #8a94ab; white-space: nowrap; }