/* ═══════════════════════════════════════════════════════════
   SonarPulse 2026 — theme layer.
   style.css carries the design tokens and component classes
   ported from the design canvas. This file adds the WordPress
   integration, page layout and responsive behaviour.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-size: 17px; line-height: 1.6; overflow-x: hidden;
       -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* Accessibility */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; left: 16px; top: 16px; z-index: 999;
  width: auto; height: auto; clip: auto; padding: 10px 18px; background: var(--color-accent);
  color: var(--color-bg); border-radius: 999px; }
:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }

/* Shell */
.sp-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 32px; }
.sp-site { background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); min-height: 100vh; }
.sp-section { padding-block: 88px 0; }

/* ── Header / nav ─────────────────────────────────────────── */
.sp-header { position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-divider); }
.admin-bar .sp-header { top: 32px; }
.sp-nav { max-width: 1180px; margin: 0 auto; padding: 14px 32px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.sp-brand { display: flex; align-items: center; gap: 10px; margin-right: auto;
  text-decoration: none; }
.sp-brand-mark { width: 30px; height: 30px; border-radius: 999px;
  background: var(--color-accent); display: grid; place-items: center;
  color: var(--color-bg); font-family: var(--font-heading); font-size: 15px; flex: none; }
.sp-brand-mark img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; }
.sp-brand-name { font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.02em; }

/* Wordmark logos. Height-constrained with auto width so any future logo of
   a different aspect ratio still sits correctly on the baseline. */
.sp-brand-logo { height: 38px; width: auto; max-width: min(260px, 52vw);
  object-fit: contain; display: block; }
.sp-footer-logo { height: 34px; width: auto; max-width: 240px;
  object-fit: contain; display: block; margin-bottom: 20px; }
.sp-menu { display: flex; align-items: center; gap: 22px; font-size: 15px;
  list-style: none; margin: 0; padding: 0; }
.sp-menu a { text-decoration: none; padding-bottom: 2px; color: var(--color-neutral-700);
  border-bottom: 2px solid transparent; transition: color .15s; }
.sp-menu a:hover { color: var(--color-accent-700); }
.sp-menu .current-menu-item > a,
.sp-menu .current_page_item > a,
.sp-menu .current-menu-ancestor > a,
.sp-menu .current_page_parent > a { color: var(--color-accent-700);
  border-bottom-color: var(--color-accent); }
.sp-nav-toggle { display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; color: var(--color-text); }
.sp-nav-toggle svg { display: block; }

/* ── Typographic scale ────────────────────────────────────── */
.sp-kicker { color: var(--color-accent-700); margin: 0 0 18px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  font-family: var(--font-body); }
.sp-h1 { font-size: clamp(40px, 5.2vw, 78px); line-height: 1.02;
  letter-spacing: -0.03em; margin: 0 0 28px; text-wrap: balance; }
.sp-h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.05;
  letter-spacing: -0.025em; margin: 0 0 20px; text-wrap: balance; }
.sp-h2-sm { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; }
.sp-h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1;
  letter-spacing: -0.02em; margin: 16px 0; }
.sp-lead { font-size: 21px; line-height: 1.5; color: var(--color-neutral-800);
  text-wrap: pretty; max-width: 30em; }
.sp-body { font-size: 17px; line-height: 1.65; color: var(--color-neutral-700);
  text-wrap: pretty; }
.sp-dark { background: var(--color-neutral-900); color: var(--color-neutral-200); }
.sp-dark h1, .sp-dark h2, .sp-dark h3 { color: var(--color-neutral-100); }
.sp-dark .sp-kicker { color: var(--color-accent-300); }
.sp-dark .sp-body { color: var(--color-neutral-300); }

/* ── Generic grids (named, not inline) ────────────────────── */
.sp-grid { display: grid; gap: 32px; }
.sp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sp-split { grid-template-columns: 1.08fr 0.92fr; gap: 64px; align-items: start; }

/* ── Hero ─────────────────────────────────────────────────── */
.sp-hero { padding: 92px 0 72px; }
.sp-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.sp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 36px; }
.sp-alert-card { background: var(--color-neutral-900); border-radius: 30px; padding: 26px;
  box-shadow: var(--shadow-lg); color: var(--color-neutral-200); }
.sp-alert-row { display: flex; justify-content: space-between; font-size: 13px; gap: 16px; }
.sp-alert-row > span:first-child { color: var(--color-neutral-400); }

/* ── Stats bar ────────────────────────────────────────────── */
.sp-stats { border-block: 1px solid var(--color-divider);
  background: var(--color-neutral-100); }
.sp-stat-value { font-family: var(--font-heading); font-size: clamp(34px, 4vw, 46px);
  line-height: 1; color: var(--color-accent-700); }
.sp-stat-label { font-size: 14px; line-height: 1.45; margin-top: 8px;
  color: var(--color-neutral-700); }
.sp-stat-source { font-size: 12px; color: var(--color-neutral-600); }

/* ── Cards ────────────────────────────────────────────────── */
.sp-tile { background: var(--color-neutral-100); border-radius: 26px; padding: 28px;
  border: 1px solid var(--color-divider); }
.sp-tile-num { font-family: var(--font-heading); font-size: 15px;
  color: var(--color-accent-700); }
.sp-tile-name { font-family: var(--font-heading); font-size: 21px; line-height: 1.2;
  margin: 10px 0 8px; letter-spacing: -0.01em; }
.sp-tile-desc { font-size: 15px; line-height: 1.55; color: var(--color-neutral-700); margin: 0; }
.sp-dark .sp-tile { background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
  border-color: var(--color-neutral-700); }
.sp-dark .sp-tile-name { color: var(--color-neutral-100); }
.sp-dark .sp-tile-desc { color: var(--color-neutral-300); }

/* ── Lifecycle stepper ────────────────────────────────────── */
.sp-step-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sp-step-tab { display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; cursor: pointer; font-size: 15px;
  font-family: inherit; background: transparent; color: var(--color-neutral-800);
  border: 1px solid var(--color-divider);
  transition: background .15s, color .15s, border-color .15s; }
.sp-step-tab:hover { border-color: var(--color-accent-400); }
.sp-step-tab[aria-selected="true"] { background: var(--color-accent);
  color: var(--color-bg); border-color: var(--color-accent); }
.sp-step-tab .num { font-family: var(--font-heading); font-size: 12px; opacity: .7; }
.sp-step-panel[hidden] { display: none; }
/* The panel sits in a surface-toned rounded box — this is the container the
   design uses to separate the selected stage from the page ground. */
.sp-step-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px;
  align-items: start; background: var(--color-surface);
  border-radius: 32px; padding: 44px; }
.sp-step-panel .tag { margin-bottom: 16px; }
.sp-step-title { font-size: 34px; line-height: 1.1; letter-spacing: -0.02em;
  margin: 16px 0; }

/* Label above the evidence list — neutral and smaller than a section kicker. */
.sp-evidence-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); margin: 0 0 16px; }

/* Each piece of evidence is its own light card with a dot marker. */
.sp-evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-evidence li { display: flex; gap: 12px; align-items: baseline;
  padding: 14px 18px; background: var(--color-neutral-100); border-radius: 18px;
  font-size: 15px; line-height: 1.5; }
.sp-evidence li::before { content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--color-accent-2-600); flex: none; transform: translateY(-2px); }

/* ── Platform: the two engine cards ───────────────────────── */
.sp-engine { background: var(--color-surface); border-radius: 32px; padding: 40px; }
.sp-engine .tag { margin-bottom: 18px; }
.sp-engine-title { font-size: 32px; letter-spacing: -0.02em; margin: 16px 0 12px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.sp-engine-lead { font-size: 16px; color: var(--color-neutral-700); margin: 0 0 26px; }
.sp-engine-list { display: grid; gap: 12px; }
.sp-engine-row { display: flex; gap: 12px; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); }
.sp-engine-num { font-family: var(--font-heading); font-size: 12px;
  color: var(--color-accent-700); flex: none; width: 20px; }
.sp-engine-name { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.sp-engine-desc { font-size: 14px; line-height: 1.5; color: var(--color-neutral-700); }

/* TMX is the sage counterpart, not the neutral dark used elsewhere. */
.sp-engine-tmx { background: var(--color-accent-2-900); color: var(--color-neutral-200); }
.sp-engine-tmx .tag { background: var(--color-accent-2-700); color: var(--color-accent-2-100); }
.sp-engine-tmx .sp-engine-title { color: var(--color-neutral-100); }
.sp-engine-tmx .sp-engine-lead { color: var(--color-accent-2-200); }
.sp-engine-tmx .sp-engine-row { border-bottom-color: var(--color-accent-2-800); }
.sp-engine-tmx .sp-engine-num { color: var(--color-accent-2-300); }
.sp-engine-tmx .sp-engine-name { color: var(--color-neutral-100); }
.sp-engine-tmx .sp-engine-desc { color: var(--color-accent-2-200); }

/* ── Sonar Score calculator ───────────────────────────────── */
.sp-calc { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px;
  align-items: start; }
.sp-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.sp-subject { padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 0; font-size: 14px; font-family: inherit;
  background: var(--color-neutral-200); color: var(--color-neutral-800); }
.sp-subject[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }
.sp-slider { width: 100%; accent-color: var(--color-accent); margin: 8px 0 0; }
.sp-module-row { margin-bottom: 20px; }
.sp-module-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; gap: 12px; }
.sp-module-head strong { font-weight: 600; }
.sp-bar { height: 8px; border-radius: 999px; background: var(--color-neutral-200);
  overflow: hidden; margin-top: 8px; }
.sp-bar > span { display: block; height: 100%; background: var(--color-accent);
  border-radius: 999px; transition: width .2s ease; }
.sp-score-card { background: var(--color-neutral-900); color: var(--color-neutral-200);
  border-radius: 30px; padding: 32px; box-shadow: var(--shadow-lg); }
.sp-score-value { font-family: var(--font-heading); font-size: 68px; line-height: 1; }
.sp-calc-reset { background: none; border: 0; color: var(--color-neutral-400);
  font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: underline;
  padding: 0; margin-top: 18px; }
.sp-calc-reset:hover { color: var(--color-accent-300); }

/* ── CTA panel ────────────────────────────────────────────── */
.sp-cta { background: var(--color-accent); color: var(--color-bg);
  border-radius: 36px; padding: 64px; display: grid;
  grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.sp-cta h2 { color: var(--color-bg); }
.sp-cta p { font-size: 18px; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--color-bg) 88%, var(--color-accent-900)); }
.sp-cta-form { background: var(--color-bg); border-radius: 26px; padding: 28px;
  color: var(--color-text); }
.sp-cta-form .field { display: grid; gap: 6px; }
.sp-cta-form label { font-size: 13px; color: var(--color-neutral-700); }

/* ── Blog ─────────────────────────────────────────────────── */
.sp-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sp-post-card { background: var(--color-neutral-100); border-radius: 26px;
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s; }
.sp-post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sp-post-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--color-neutral-200); }
.sp-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-post-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sp-post-title { font-family: var(--font-heading); font-size: 21px; line-height: 1.2;
  letter-spacing: -0.01em; margin: 0; font-weight: 400; }
.sp-post-title a { text-decoration: none; }
.sp-post-title a:hover { color: var(--color-accent-700); }
.sp-post-meta { font-size: 13px; color: var(--color-neutral-600); }
.sp-post-excerpt { font-size: 15px; line-height: 1.55; color: var(--color-neutral-700);
  margin: 0; }

.sp-article { max-width: 760px; margin: 0 auto; }
.sp-article p, .sp-article ul, .sp-article ol, .sp-article blockquote,
.sp-article figure, .sp-article table, .sp-article pre { margin: 0 0 1.4em; }
.sp-article h2 { font-size: clamp(26px,3vw,36px); line-height: 1.15;
  margin: 2em 0 .6em; letter-spacing: -0.02em; }
.sp-article h3 { font-size: clamp(21px,2.2vw,27px); line-height: 1.2; margin: 1.8em 0 .5em; }
.sp-article a { color: var(--color-accent-700); }
.sp-article a:hover { color: var(--color-accent-600); }
.sp-article img { border-radius: var(--radius-md); }
.sp-article blockquote { border-left: 3px solid var(--color-accent);
  padding: 4px 0 4px 22px; color: var(--color-neutral-700); font-size: 19px; }
.sp-article pre { background: var(--color-neutral-900); color: var(--color-neutral-200);
  padding: 18px; border-radius: var(--radius-md); overflow-x: auto; font-size: 14px; }
.sp-article code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.sp-article table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.sp-article ul, .sp-article ol { padding-left: 1.3em; }
.sp-article li { margin-bottom: .5em; }

/* WordPress core classes */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: min(1180px, 100vw - 64px); margin-inline: calc(50% - min(590px, 50vw - 32px)); }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { font-size: 13px;
  color: var(--color-neutral-600); text-align: center; margin-top: 8px; }

.sp-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: 56px; }
.sp-pagination .page-numbers { padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--color-divider); text-decoration: none; font-size: 15px; }
.sp-pagination .page-numbers.current { background: var(--color-accent);
  color: var(--color-bg); border-color: var(--color-accent); }

/* ── Footer ───────────────────────────────────────────────── */
.sp-footer { background: var(--color-neutral-900); color: var(--color-neutral-400);
  margin-top: 96px; }
.sp-footer a { color: var(--color-neutral-300); text-decoration: none; }
.sp-footer a:hover { color: var(--color-accent-300); }
.sp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding: 64px 0 40px; }
.sp-footer h6 { color: var(--color-neutral-100); font-family: var(--font-body);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 14px; font-weight: 600; }
.sp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px;
  font-size: 15px; }
.sp-footer-bottom { border-top: 1px solid var(--color-neutral-800);
  padding: 22px 0 40px; font-size: 13px; display: flex; flex-wrap: wrap;
  gap: 12px 28px; justify-content: space-between; }

/* ── Forms / notices ──────────────────────────────────────── */
.sp-form-note { font-size: 12px; color: var(--color-neutral-600); text-align: center; }
.sp-alert-msg { padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px;
  margin-bottom: 14px; }
.sp-alert-ok { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.sp-alert-err { background: var(--color-accent-200); color: var(--color-accent-800); }

/* ═══ Responsive ══════════════════════════════════════════ */
@media (max-width: 1060px) {
  /* Preserve the design canvas' inline-style responsive behaviour. */
  [style*="repeat(3, 1fr)"], [style*="repeat(4, 1fr)"], [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1.08fr 0.92fr"], [style*="1fr 0.85fr"], [style*="0.9fr 1.1fr"], [style*="0.95fr 1.05fr"], [style*="1.15fr 0.85fr"] { grid-template-columns: 1fr !important; gap: 44px !important; }
  [style*="1.4fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  .sp-grid-3, .sp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sp-split, .sp-calc, .sp-cta { grid-template-columns: 1fr; gap: 44px; }
  .sp-step-panel { grid-template-columns: 1fr; gap: 36px; padding: 32px; }
  .sp-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-posts { grid-template-columns: repeat(2, 1fr); }
  .sp-hero { padding: 64px 0 56px; }
}
@media (max-width: 900px) {
  .sp-nav-toggle { display: block; order: 2; }
  .sp-menu { display: none; order: 4; width: 100%; flex-direction: column;
    align-items: flex-start; gap: 4px; padding: 8px 0 4px; }
  .sp-menu.is-open { display: flex; }
  .sp-menu li { width: 100%; }
  .sp-menu a { display: block; padding: 11px 0; width: 100%;
    border-bottom: 1px solid var(--color-divider); }
  .sp-nav > .btn { order: 3; font-size: 14px; padding: 9px 18px; }
}
@media (max-width: 820px) {
  [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
  .sp-wrap, .sp-nav { padding-inline: 22px; }
  .sp-grid-2, .sp-posts { grid-template-columns: 1fr; }
  .sp-section { padding-block: 64px 0; }
  .sp-cta { padding: 40px; border-radius: 28px; }
  .sp-engine { padding: 30px; border-radius: 26px; }
}
@media (max-width: 620px) {
  [style*="repeat(3, 1fr)"], [style*="repeat(4, 1fr)"], [style*="repeat(6, 1fr)"], [style*="1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  body { font-size: 16px; }
  .sp-brand-logo { height: 30px; }
  .sp-footer-logo { height: 28px; }
  .sp-grid-3, .sp-grid-4, .sp-footer-grid { grid-template-columns: 1fr; }
  .sp-cta { padding: 30px; }
  .sp-step-panel { padding: 26px; border-radius: 24px; }
  .sp-score-card { padding: 24px; }
  .sp-score-value { font-size: 54px; }
  .sp-footer { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .sp-header, .sp-footer, .sp-nav-toggle, .btn, .sp-cta { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── Homepage feature slider ──────────────────────────────────
   Full-bleed: the band spans the viewport while every other section
   keeps the 1180px .sp-wrap column, so nothing below shifts.
   ───────────────────────────────────────────────────────────── */
.sp-carousel-section { padding-block: 72px 0; }

/* No 100vw breakout needed: the wrapper div was removed, and <main> and the
   <section> are unconstrained block elements, so this is already the width of
   the viewport. Using 100vw here would ADD the scrollbar width and introduce
   a horizontal scroll — and masking that with overflow-x:hidden on an
   ancestor would break the sticky header. */
.sp-carousel { position: relative; }

/* Fixed height, so changing slide never resizes the band. Every slide is
   absolutely positioned — including the active one — which means the
   container height is set here and nowhere else. */
.sp-slides { position: relative; overflow: hidden;
  height: clamp(360px, 33vw, 500px);
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider); }

/* Cross-fade. visibility is switched instantly when showing and only after
   the fade when hiding, so the outgoing slide fades out properly and hidden
   slides still leave the tab order. */
.sp-slide { position: absolute; inset: 0; display: grid;
  grid-template-columns: 1.02fr 0.98fr; align-items: stretch; gap: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s;
  text-decoration: none; color: inherit; }
.sp-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto;
  z-index: 1; transition: opacity .5s ease, visibility 0s linear 0s; }
a.sp-slide { cursor: pointer; }

.sp-slide-media { position: relative; min-height: 0; overflow: hidden;
  background: var(--color-bg); }
/* contain, not cover, for both: the marketing kit produces diagram stills
   AND diagram animations, and cropping cuts the labels off. The artwork's
   own ground is the page cream, so the letterbox is invisible. Real footage
   would letterbox rather than fill, which is the safer failure. */
.sp-slide-media img,
.sp-slide-media video { width: 100%; height: 100%; object-fit: contain;
  object-position: center; display: block; }

/* The body is height-capped too: titles and copy are line-clamped so an
   unusually long headline cannot push the layout around. */
.sp-slide-body { display: flex; flex-direction: column; justify-content: center;
  padding: 40px clamp(24px, 5vw, 80px); min-height: 0; overflow: hidden; }
.sp-slide-body > * { max-width: 34em; }
.sp-slide-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 2.3vw, 34px); line-height: 1.14; letter-spacing: -0.02em;
  margin: 0 0 12px; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.sp-slide-text { font-size: 16px; line-height: 1.55; color: var(--color-neutral-700);
  margin: 0 0 22px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.sp-slide-cta { font-size: 15px; padding: 11px 22px; display: inline-block;
  align-self: flex-start; flex: none; }
a.sp-slide:hover .sp-slide-cta { background: var(--color-accent-600); }

/* Controls */
.sp-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border: 1px solid var(--color-divider); backdrop-filter: blur(8px);
  transition: background .15s, color .15s; }
.sp-carousel-arrow:hover { background: var(--color-accent); color: var(--color-bg);
  border-color: var(--color-accent); }
.sp-carousel-prev { left: clamp(10px, 2vw, 28px); }
.sp-carousel-next { right: clamp(10px, 2vw, 28px); }

.sp-carousel-dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.sp-carousel-dot { width: 9px; height: 9px; border-radius: 999px; cursor: pointer;
  border: 0; padding: 0; background: var(--color-neutral-400);
  transition: background .15s, width .15s; }
.sp-carousel-dot[aria-selected="true"] { background: var(--color-accent); width: 26px; }

@media (max-width: 900px) {
  /* Stacked, the slide's vertical centre falls in the TEXT row, so arrows
     floating at top:50% land on the kicker. Move them out of the artwork
     altogether and put them either side of the dots, where a thumb can
     reach them and nothing can collide. */
  .sp-carousel { display: grid; align-items: center;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "media media media"
                         "prev  dots  next"; }
  .sp-slides { grid-area: media; }
  .sp-carousel-prev { grid-area: prev; }
  .sp-carousel-next { grid-area: next; }
  .sp-carousel-dots { grid-area: dots; }
  .sp-carousel-arrow { position: static; transform: none;
    justify-self: center; margin-top: 16px; margin-inline: 14px; }
  .sp-carousel-dots { margin-top: 16px; }

  .sp-slides { height: 560px; }
  .sp-slide { grid-template-columns: 1fr; grid-template-rows: 46% 54%; }
  .sp-slide-media { aspect-ratio: auto; }
  .sp-slide-body { padding: 24px 24px 28px; justify-content: flex-start; }
  .sp-slide-body > * { max-width: none; }
  .sp-slide-title { font-size: 22px; -webkit-line-clamp: 3; }
  .sp-slide-text { -webkit-line-clamp: 3; }
  .sp-carousel-arrow { width: 38px; height: 38px; }
}
@media (max-width: 620px) {
  .sp-carousel-section { padding-block: 40px 0; }
  .sp-slides { height: 520px; }
  .sp-slide { grid-template-rows: 42% 58%; }
  .sp-slide-title { font-size: 20px; }
  .sp-slide-text { font-size: 15px; -webkit-line-clamp: 4; }
}

/* Slider leading the page: less headroom, and the hero that follows no
   longer needs its full top padding. */
/* Leading the page: sit flush under the sticky header. The header already
   draws a bottom rule, so the slider's own top border would double it. */
.sp-carousel-section.is-lead { padding-block: 0; }
.sp-carousel-section.is-lead .sp-slides { border-top: 0; }
.sp-carousel-section.is-lead + .sp-hero { padding-top: 64px; }
@media (max-width: 620px) {
  .sp-carousel-section.is-lead + .sp-hero { padding-top: 44px; }
}