/* ══════════════════════════════════════════════════════════════════════
   SERVICE PAGES (/services/consulting/, /services/platform-as-a-service/)

   The two Services detail pages. They are siblings, so they share one
   component set and separate only by accent: consulting runs rust, the
   platform runs gold. Layers on top of styles.css (tokens, buttons,
   .container, .fade-in) and borrows .lp-crumbs from css/landing.css for
   the breadcrumb.

   Every grid floors its tracks with min(<floor>, 100%) so a narrow phone
   collapses to one column instead of forcing a track wider than the
   viewport.
   ══════════════════════════════════════════════════════════════════════ */

.sv-page { --accent: var(--gold-light); --accent-soft: rgba(184,134,11,0.16); }
.sv-page[data-accent="rust"] { --accent: var(--rust-light); --accent-soft: rgba(192,57,43,0.16); }

/* ── Hero ──
   Copy left, figure right. The figure is the page's one piece of real
   artwork; below 960px it drops under the copy rather than shrinking into
   illegibility. */
.sv-hero { position: relative; padding: 2rem 0 3.5rem; overflow: hidden; }
.sv-hero-glow {
  position: absolute;
  top: -22%; right: -12%;
  width: min(760px, 95vw); aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  pointer-events: none;
}
.sv-hero .container { position: relative; }
.sv-hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: center;
}
@media (min-width: 960px) { .sv-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

.sv-hero h1 {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(2.05rem, 4.8vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-light);
  margin: 0 0 1.15rem;
  max-width: 19ch;
}
.sv-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--rust-light), var(--gold-light) 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sv-lede {
  font-size: clamp(0.97rem, 1.5vw, 1.08rem);
  line-height: 1.78;
  color: var(--text-muted);
  max-width: 54ch;
  margin: 0 0 1.9rem;
}
.sv-lede strong { color: var(--text-light); font-weight: 600; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Trust chips under the hero actions — the four words the platform is
   built to be, or the four disciplines the practice is known for. */
.sv-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 2rem 0 0; padding: 0;
}
.sv-chips li {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.71rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid rgba(184,134,11,0.22);
  background: rgba(32,16,8,0.5);
  border-radius: 100px;
  padding: 0.38rem 0.85rem;
}

/* ── Hero figure A: the platform stack ──
   Three layers: what you build, the nine services it stands on, and who
   keeps the whole thing running. Deliberately wider than it is tall so the
   hero column sits level with the copy beside it instead of stretching. */
.sv-stack {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid rgba(184,134,11,0.22);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(42,20,10,0.55), rgba(15,5,3,0.72));
  box-shadow: 0 26px 70px rgba(0,0,0,0.45);
}
.sv-layer { border-radius: 14px; padding: 0.95rem 1.05rem 1rem; }
.sv-layer-label {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Top layer — the things a customer actually runs. */
.sv-layer-apps { background: rgba(38,85,197,0.08); border: 1px solid rgba(38,85,197,0.25); }
.sv-layer-apps .sv-layer-label { color: var(--blue-light); }
.sv-layer-apps-list {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  list-style: none; margin: 0.65rem 0 0; padding: 0;
}
.sv-layer-apps-list li {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-light);
  border: 1px solid rgba(38,85,197,0.3);
  background: rgba(15,5,3,0.5);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
}

/* Middle layer — the platform itself, and the only one that carries the mark. */
.sv-layer-core {
  position: relative;
  background: rgba(184,134,11,0.07);
  border: 1px solid rgba(184,134,11,0.3);
  padding-bottom: 0.85rem;
}
.sv-layer-core::before,
.sv-layer-core::after {
  content: '';
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 0.62rem; height: 0.62rem;
  border-right: 2px solid rgba(184,134,11,0.55);
  border-bottom: 2px solid rgba(184,134,11,0.55);
}
.sv-layer-core::before { top: -0.62rem; transform: translateX(-50%) rotate(-135deg); }
.sv-layer-core::after  { bottom: -0.62rem; transform: translateX(-50%) rotate(-135deg); }
.sv-layer-core-head { display: flex; align-items: center; gap: 0.6rem; }
.sv-layer-core .sv-layer-label { color: var(--gold-light); }
.sv-layer-mark {
  width: 34px; height: 34px;
  flex: none; display: block;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5));
}
.sv-layer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
  gap: 0.35rem;
  list-style: none; margin: 0.8rem 0 0; padding: 0;
}
.sv-layer-grid li {
  /* flex-centred with a floor height so a two-line label does not make its
     row taller than the others */
  display: flex; align-items: center; justify-content: center;
  min-height: 2.5rem;
  font-size: 0.72rem; line-height: 1.3;
  color: var(--text-light);
  background: rgba(15,5,3,0.55);
  border: 1px solid rgba(184,134,11,0.16);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  text-align: center;
}
.sv-layer-ring {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.3rem 0.85rem;
  list-style: none; margin: 0.85rem 0 0; padding: 0.7rem 0 0;
  border-top: 1px solid rgba(184,134,11,0.2);
  font-family: 'Work Sans', sans-serif;
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-light);
}

/* Bottom layer — the part you stop having to staff. */
.sv-layer-run { background: rgba(192,57,43,0.07); border: 1px solid rgba(192,57,43,0.25); }
.sv-layer-run .sv-layer-label { color: var(--rust-light); }
.sv-layer-run p {
  margin: 0.5rem 0 0;
  font-size: 0.78rem; line-height: 1.5;
  color: var(--text-muted);
}

/* ── Hero figure B: the engagement arc ──
   Four stages and the thing you are left holding at the end. */
.sv-arc {
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(42,20,10,0.6), rgba(15,5,3,0.72));
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 26px 70px rgba(0,0,0,0.42);
}
.sv-arc-cap {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.15rem;
}
.sv-arc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.sv-arc li { display: flex; gap: 0.95rem; padding: 0.7rem 0; position: relative; }
.sv-arc li + li { border-top: 1px solid rgba(184,134,11,0.12); }
.sv-arc-n {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(184,134,11,0.3);
  background: rgba(32,16,8,0.7);
  font-family: 'Work Sans', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sv-arc h3,
.sv-arc li p.sv-arc-t {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.93rem; font-weight: 700;
  color: var(--text-light); margin: 0.15rem 0 0.2rem;
}
.sv-arc li p { font-size: 0.8rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.sv-arc-out {
  margin-top: 1.2rem;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(192,57,43,0.3);
  background: rgba(192,57,43,0.08);
}
.sv-arc-out span {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rust-light); margin-bottom: 0.3rem;
}
.sv-arc-out p { margin: 0; font-size: 0.86rem; line-height: 1.65; color: var(--text-light); }

/* ── In-page rail ──
   A horizontal index of the page. Scrolls sideways on a phone rather
   than wrapping into a block of links. */
.sv-rail { border-top: 1px solid rgba(184,134,11,0.12); border-bottom: 1px solid rgba(184,134,11,0.12); }
.sv-rail ul {
  display: flex; gap: 0.4rem;
  list-style: none; margin: 0; padding: 0.55rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sv-rail ul::-webkit-scrollbar { display: none; }
.sv-rail a {
  display: inline-block; white-space: nowrap;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.79rem; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  transition: color 0.25s, background 0.25s;
}
.sv-rail a:hover, .sv-rail a:focus-visible { color: var(--text-light); background: rgba(184,134,11,0.1); }
.sv-rail a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Section scaffolding ── */
.sv-section { padding: clamp(3.25rem, 6vw, 4.75rem) 0; scroll-margin-top: 5.5rem; }
.sv-section + .sv-section { border-top: 1px solid rgba(184,134,11,0.1); }
.sv-head { max-width: 62ch; }
.sv-kicker {
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.sv-section h2 {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--text-light);
  margin: 0 0 0.9rem;
  max-width: 24ch;
}
.sv-intro { font-size: 0.95rem; line-height: 1.8; color: var(--text-muted); margin: 0; max-width: 64ch; }

/* ── Split: prose beside a panel ── */
.sv-split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); margin-top: 2.25rem; align-items: start; }
@media (min-width: 900px) { .sv-split { grid-template-columns: 1.1fr 0.9fr; } }
.sv-prose p { font-size: 0.96rem; line-height: 1.85; color: var(--text-muted); margin: 0 0 1.1rem; }
.sv-prose p:last-child { margin-bottom: 0; }
.sv-prose strong { color: var(--text-light); font-weight: 600; }

/* Two-column before/after panel. */
.sv-compare {
  border: 1px solid rgba(184,134,11,0.18);
  border-radius: 16px;
  background: rgba(24,8,6,0.5);
  overflow: hidden;
}
.sv-compare-col { padding: 1.35rem 1.4rem 1.5rem; }
.sv-compare-col + .sv-compare-col { border-top: 1px solid rgba(184,134,11,0.16); }
.sv-compare-col h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  margin: 0 0 0.9rem;
  color: var(--text-muted);
}
.sv-compare-col.is-good h3 { color: var(--gold-light); }
.sv-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sv-compare li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.86rem; line-height: 1.6;
  color: var(--text-muted);
}
.sv-compare li::before {
  content: '\2715';
  position: absolute; left: 0; top: 0.05rem;
  font-size: 0.7rem; color: rgba(192,57,43,0.75);
}
.sv-compare-col.is-good li { color: var(--text-light); }
.sv-compare-col.is-good li::before { content: '\2713'; color: var(--gold-light); }

/* ── Capability bands ──
   Three bands of three disciplines. The band header is the editorial
   line; the cards under it are the inventory. */
.sv-bands { display: grid; gap: 1.1rem; margin-top: 2.5rem; }
.sv-band {
  border: 1px solid rgba(184,134,11,0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(32,16,8,0.5), rgba(15,5,3,0.4));
  padding: 1.5rem 1.35rem 1.4rem;
}
.sv-band-head {
  display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem;
  align-items: baseline;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(184,134,11,0.14);
}
.sv-band-n {
  font-family: 'Work Sans', sans-serif;
  font-size: 1.55rem; font-weight: 700; line-height: 1;
  color: rgba(184,134,11,0.85);
  font-variant-numeric: tabular-nums;
}
.sv-band-title { flex: 1 1 18rem; }
.sv-band-title h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700;
  color: var(--text-light); margin: 0 0 0.35rem;
}
.sv-band-title p { font-size: 0.87rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
.sv-band-pull {
  flex: 0 1 auto;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.82rem; font-weight: 600; font-style: italic;
  color: var(--gold-light);
}
.sv-band:nth-child(2) .sv-band-pull { color: var(--blue-light); }
.sv-band:nth-child(3) .sv-band-pull { color: var(--rust-light); }

.sv-caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.sv-cap {
  padding: 1.2rem 1.15rem 1.25rem;
  border: 1px solid rgba(184,134,11,0.14);
  border-radius: 14px;
  background: rgba(15,5,3,0.55);
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.sv-cap:hover {
  border-color: rgba(184,134,11,0.4);
  background: rgba(42,20,10,0.5);
  transform: translateY(-3px);
}
.sv-cap-icon {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 10px;
  border: 1px solid rgba(184,134,11,0.25);
  background: rgba(184,134,11,0.09);
  color: var(--gold-light);
  margin-bottom: 0.9rem;
}
.sv-band:nth-child(2) .sv-cap-icon { color: var(--blue-light); border-color: rgba(38,85,197,0.32); background: rgba(38,85,197,0.1); }
.sv-band:nth-child(3) .sv-cap-icon { color: var(--rust-light); border-color: rgba(192,57,43,0.32); background: rgba(192,57,43,0.09); }
.sv-cap-icon svg { width: 20px; height: 20px; }
.sv-cap h4 {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.97rem; font-weight: 700;
  color: var(--text-light); margin: 0 0 0.45rem;
}
.sv-cap > p { font-size: 0.84rem; line-height: 1.65; color: var(--text-muted); margin: 0 0 0.85rem; }
.sv-cap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.sv-cap li {
  position: relative; padding-left: 0.95rem;
  font-size: 0.79rem; line-height: 1.55; color: var(--text-muted);
}
.sv-cap li::before {
  content: '';
  position: absolute; left: 0; top: 0.58em;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(184,134,11,0.55);
}

/* ── Value chain ──
   Four steps left to right, chevroned on wide screens. */
.sv-chain {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  display: grid; gap: 0.9rem;
  counter-reset: chain;
}
@media (min-width: 900px) { .sv-chain { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } }
.sv-chain li {
  position: relative;
  padding: 1.3rem 1.25rem 1.35rem;
  border: 1px solid rgba(184,134,11,0.16);
  border-radius: 14px;
  background: rgba(32,16,8,0.45);
}
@media (min-width: 900px) {
  .sv-chain li:not(:last-child)::after {
    content: '';
    position: absolute; right: -1.15rem; top: 50%;
    width: 0.7rem; height: 0.7rem;
    border-top: 2px solid rgba(184,134,11,0.5);
    border-right: 2px solid rgba(184,134,11,0.5);
    transform: translateY(-50%) rotate(45deg);
  }
}
.sv-chain-n {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6rem;
}
.sv-chain h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: var(--text-light); margin: 0 0 0.35rem;
}
.sv-chain p { font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.sv-chain-tag {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem); font-weight: 700;
  color: var(--text-light);
  text-align: center;
  margin: 2.25rem 0 0;
}
.sv-chain-tag span { color: var(--gold-light); }

/* The ideas / solutions / impact triad. */
.sv-triad {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  text-align: center;
}
.sv-triad li { padding: 1.15rem 1rem; }
.sv-triad svg { width: 26px; height: 26px; color: var(--gold-light); margin-bottom: 0.7rem; }
.sv-triad h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-light); margin: 0 0 0.25rem;
}
.sv-triad p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

/* ── Benefit tiles ── */
.sv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
}
.sv-tile {
  padding: 1.35rem 1.3rem 1.4rem;
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 14px;
  background: rgba(24,8,6,0.5);
  transition: border-color 0.3s, transform 0.3s;
}
.sv-tile:hover { border-color: rgba(184,134,11,0.38); transform: translateY(-3px); }
.sv-tile svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 0.8rem; }
.sv-tile h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.98rem; font-weight: 700;
  color: var(--text-light); margin: 0 0 0.45rem;
}
.sv-tile p { font-size: 0.85rem; line-height: 1.7; color: var(--text-muted); margin: 0; }

/* ── Numbered step rail ── */
.sv-steps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 0; }
.sv-step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.1rem;
  padding: 1.3rem 0;
  border-top: 1px solid rgba(184,134,11,0.12);
}
.sv-step:last-child { border-bottom: 1px solid rgba(184,134,11,0.12); }
.sv-step-n {
  font-family: 'Work Sans', sans-serif;
  font-size: 1.25rem; font-weight: 700; line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}
.sv-step h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: var(--text-light); margin: 0 0 0.4rem;
}
.sv-step p { font-size: 0.88rem; line-height: 1.75; color: var(--text-muted); margin: 0; max-width: 72ch; }
@media (min-width: 900px) { .sv-step { grid-template-columns: 4rem 1fr; } }

/* ── Engagement models ── */
.sv-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
}
.sv-model {
  display: flex; flex-direction: column;
  padding: 1.4rem 1.3rem 1.45rem;
  border: 1px solid rgba(184,134,11,0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(42,20,10,0.42), rgba(15,5,3,0.42));
}
.sv-model-tag {
  align-self: flex-start;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rust-light);
  border: 1px solid rgba(192,57,43,0.3);
  background: rgba(192,57,43,0.08);
  border-radius: 100px;
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.9rem;
}
.sv-model h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: 1.02rem; font-weight: 700;
  color: var(--text-light); margin: 0 0 0.5rem;
}
.sv-model > p { font-size: 0.85rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 1rem; }
.sv-model dl {
  margin: auto 0 0; padding-top: 0.9rem;
  border-top: 1px solid rgba(184,134,11,0.14);
  display: grid; gap: 0.45rem;
}
.sv-model div { display: flex; gap: 0.6rem; justify-content: space-between; align-items: baseline; }
.sv-model dt {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.sv-model dd { margin: 0; font-size: 0.82rem; color: var(--text-light); text-align: right; }

/* ── FAQ ── */
.sv-faq { display: grid; gap: 0.65rem; margin-top: 2.25rem; max-width: 74ch; }
.sv-faq-item {
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 12px;
  background: rgba(24,8,6,0.45);
  overflow: hidden;
}
.sv-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.2rem;
  position: relative;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.94rem; font-weight: 600;
  color: var(--text-light);
}
.sv-faq-item > summary::-webkit-details-marker { display: none; }
.sv-faq-item > summary::after {
  content: '+';
  position: absolute; right: 1.15rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem; font-weight: 400;
  color: var(--accent);
}
.sv-faq-item[open] > summary::after { content: '\2212'; }
.sv-faq-item > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sv-faq-answer {
  margin: 0; padding: 0 1.2rem 1.15rem;
  font-size: 0.88rem; line-height: 1.8; color: var(--text-muted);
}

/* ── Related ── */
.sv-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 0.9rem;
  margin-top: 2rem;
}
.sv-related a {
  display: block;
  padding: 1.2rem 1.25rem 1.25rem;
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 14px;
  background: rgba(32,16,8,0.4);
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.sv-related a:hover, .sv-related a:focus-visible {
  border-color: rgba(184,134,11,0.42);
  background: rgba(42,20,10,0.6);
  transform: translateY(-2px);
}
.sv-related a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sv-related-t {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.92rem; font-weight: 700;
  color: var(--text-light); margin-bottom: 0.35rem;
}
.sv-related-d { display: block; font-size: 0.79rem; line-height: 1.55; color: var(--text-muted); }

/* ── Closing CTA ── */
.sv-cta { padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 5.5rem); border-top: 1px solid rgba(184,134,11,0.12); }
.sv-cta-box {
  position: relative;
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.35rem, 4vw, 3rem);
  border: 1px solid rgba(184,134,11,0.25);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(42,20,10,0.72), rgba(15,5,3,0.9));
  overflow: hidden;
}
.sv-cta-box::before {
  content: '';
  position: absolute; inset: -40% 55% 40% -20%;
  background: radial-gradient(circle, rgba(192,57,43,0.22), transparent 65%);
  pointer-events: none;
}
.sv-cta-box > * { position: relative; }
.sv-cta-box h2 {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.2; color: var(--text-light);
  margin: 0 auto 0.9rem; max-width: 22ch;
}
.sv-cta-box p {
  font-size: 0.95rem; line-height: 1.8; color: var(--text-muted);
  margin: 0 auto 1.9rem; max-width: 62ch;
}
.sv-cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }