/* ══════════════════════════════════════════════════════════════════════
   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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sv-arc h3 {
  font-family: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', sans-serif;
  font-size: 1.55rem; font-weight: 700; line-height: 1;
  color: rgba(184,134,11,0.45);
  font-variant-numeric: tabular-nums;
}
.sv-band-title { flex: 1 1 18rem; }
.sv-band-title h3 {
  font-family: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Space Grotesk', 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; }