/**
 * Services page — layout on top of r26-design-system.css (Prompt 12 palette)
 */

.sp-page {
  font-family: var(--font-body, Inter, "Inter Fallback", system-ui, sans-serif);
}

.services-page .r26-zone-header {
  background: #0f172a;
  /* Carry the horizontal gutter on the full-width band so the centered
     inner column lines up with every body section below it. */
  padding-left: var(--r26-content-pad);
  padding-right: var(--r26-content-pad);
}

/* Body sections pad the outer section and center a plain inner, so the header
   inner must do the same: keep only the vertical rhythm, drop side padding
   (otherwise the headline sits 40px further right than the content column). */
.services-page .r26-zone-header__inner {
  padding-left: 0;
  padding-right: 0;
}

.services-page .r26-zone-body {
  background: #f8fafc;
}

/* ── Section 2: How We Work process ──────────────────────────────────────── */
.sp-process {
  padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad);
  background: #f8fafc;
}

.sp-process__inner {
  max-width: var(--r26-content-max);
  margin: 0 auto;
}

.sp-process__title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1a1a1a;
  margin: 0 0 0.75rem;
  text-align: left;
}

.sp-process__lead {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 2.5rem;
  max-width: 42rem;
  text-align: left;
}

.sp-process__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.sp-process__step {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sp-process__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.sp-process__step-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0;
}

.sp-process__step-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #475569;
  margin: 0;
}

@media (max-width: 1024px) {
  .sp-process__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 600px) {
  .sp-process__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* ── Section 3: differentiator statement ─────────────────────────────────── */

.sp-differentiator {
  padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad);
  text-align: center;
  background: #f8fafc;
}

.sp-differentiator__text {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #1a1a1a;
  margin: 0 auto;
  max-width: 44rem;
}

.sp-differentiator__sub {
  margin: 0.9rem auto 0;
  max-width: 44rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #475569;
  text-align: left;
}

/* ── Section 3: track cards ──────────────────────────────────────────────── */
.sp-tracks {
  padding: 0 var(--r26-content-pad) clamp(1rem, 3vw, 1.5rem);
  background: #f8fafc;
}

.sp-tracks__inner {
  max-width: var(--r26-content-max);
  margin: 0 auto;
}

.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.sp-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--r26-radius-card);
  padding: 1.75rem 1.5rem;
}

.sp-card__chosen {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 5px;
}

.sp-card .r26-pill {
  margin-bottom: 5px;
}

/* Pilot & Foundation (the two light tiers) — solid brand pill instead of the
   washed-out pale-pink default, so they sit confidently alongside the dark
   Best Protected card and share one deliberate accent colour. */
.services-page .sp-card:not(.sp-card--featured) .r26-pill {
  background: var(--r26-brand);
  color: #ffffff;
}

.sp-card__engagement-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0 0 4px;
}

.sp-card__engagement-sub {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: #64748b;
  margin: 0 0 1rem;
}

.sp-card__premium {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sp-card__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 0.25rem;
}

.sp-card__section-value {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #1e293b;
  margin: 0 0 0.85rem;
}

.sp-card__list {
  margin: 0 0 0.85rem;
  padding: 0;
  list-style: none;
}

.sp-card__list li {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #1e293b;
  margin-bottom: 0.2rem;
  padding-left: 1rem;
  position: relative;
}

.sp-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #64748b;
}


.sp-card__price {
  margin-top: 26px;
  padding-top: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.65;
  color: #0f172a;
}

.sp-card__price small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 0.35rem;
  line-height: 1.5;
}

.sp-card .r26-btn {
  margin-top: 20px;
  align-self: flex-start;
  width: 100%;
  justify-content: center;
  background: #0f172a;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.sp-card .r26-btn:hover {
  background: #1e293b;
}

/* Track 2 — featured charcoal, physically taller */
.sp-card--featured {
  background: #1e293b;
  border-color: #1e293b;
  border-top-color: #ffffff;
  padding-top: calc(1.75rem + 24px);
  padding-bottom: calc(1.75rem + 24px);
}

.sp-card--featured .sp-card__engagement-title,
.sp-card--featured .sp-card__price {
  color: #ffffff;
}

.sp-card--featured .sp-card__engagement-sub,
.sp-card--featured .sp-card__section-value,
.sp-card--featured .sp-card__list li {
  color: #94a3b8;
}

.sp-card--featured .sp-card__section-label {
  color: #94a3b8;
}

.sp-card--featured .sp-card__list li::before {
  color: #94a3b8;
}


.sp-card--featured .sp-card__price small {
  color: #94a3b8;
}

.sp-card--featured .r26-pill {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.sp-card--featured .r26-btn.r26-btn--on-dark {
  background: #ffffff;
  color: #0f172a;
}

.sp-card--featured .r26-btn.r26-btn--on-dark:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* The featured card sits inside .r26-zone-body, whose global rules force a
   light #f8fafc background and a light default text colour. That left the
   white price and title invisible (white-on-white) and the body text washed
   out. Re-assert the intended dark premium treatment at higher specificity so
   it wins cleanly, and keep the "Best Choice" eyebrow legible on dark. */
.services-page .r26-zone-body .sp-card--featured {
  background: #1e293b;
  border: 1px solid #1e293b;
  box-shadow: none;
  color: #f8fafc;
  padding: 2.5rem;
}

.services-page .r26-zone-body .sp-card--featured .sp-card__chosen {
  color: #cbd5e1;
}

/* ── Initial Technical Review panel ──────────────────────────────────────── */
.sp-risk-snapshot {
  padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad);
  background: #f8fafc;
}


.sp-risk-snapshot__inner {
  max-width: var(--r26-content-max);
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--r26-radius-card);
  padding: clamp(2rem, 4vw, 2.75rem);
}

.sp-risk-snapshot__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 0.5rem;
}

.sp-risk-snapshot__title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1a1a1a;
  margin: 0 0 0.75rem;
}

.sp-risk-snapshot__lead {
  font-size: 1rem;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 1.75rem;
  max-width: 42rem;
}

.sp-risk-snapshot__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2.5rem;
  margin-bottom: 1.75rem;
}

.sp-risk-snapshot__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 0.25rem;
}

.sp-risk-snapshot__value {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #1e293b;
  margin: 0 0 1rem;
}

.sp-risk-snapshot__price {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.65;
  color: #0f172a;
  margin: 0 0 1rem;
}

.sp-risk-snapshot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-risk-snapshot__list li {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #1e293b;
  margin-bottom: 0.2rem;
  padding-left: 1rem;
  position: relative;
}

.sp-risk-snapshot__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #64748b;
}

.sp-risk-snapshot__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  padding: 0.7rem 1.5rem;
  text-decoration: none;
}

.sp-risk-snapshot__cta:hover {
  background: #1e293b;
}

@media (max-width: 700px) {
  .sp-risk-snapshot__body {
    grid-template-columns: 1fr;
  }
}


/* ── Section 5: Why Our Approach Is Different ───────────────────────────── */
.sp-principles {
  padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad);
  background: #f8fafc;
}

.sp-principles__inner {
  max-width: var(--r26-content-max);
  margin: 0 auto;
}

.sp-principles__title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1a1a1a;
  margin: 0 0 0.75rem;
  text-align: left;
}

.sp-principles__lead {
  font-size: 1rem;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 1.25rem;
  max-width: 42rem;
}

.sp-principles__core {
  font-family: var(--font-heading);
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  line-height: 1.45;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--r26-radius-card);
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

.sp-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Shared feature card — used by Principles and Engagements Typically Include */
.sp-feature-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--r26-radius-card);
  padding: 1.5rem;
}

.sp-feature-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 0.35rem;
}

.sp-feature-card__heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0 0 0.5rem;
}

.sp-feature-card__body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #475569;
  margin: 0;
}


.sp-principles__closing {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--r26-radius-card);
  padding: 1.5rem 2rem;
  text-align: center;
}

.sp-principles__closing p {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

@media (max-width: 900px) {
  .sp-principles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sp-principles__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Section 6: Engagements Typically Include ───────────────────────────── */
.sp-includes {
  padding: clamp(3.5rem, 7vw, 5rem) var(--r26-content-pad) clamp(2.75rem, 6vw, 4rem);
  background: #f8fafc;
}

.sp-includes__inner {
  max-width: var(--r26-content-max);
  margin: 0 auto;
}

.sp-includes__title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1a1a1a;
  margin: 0 0 0.75rem;
  text-align: left;
}

.sp-includes__lead {
  font-size: 1rem;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 2rem;
  max-width: 36rem;
}

.sp-includes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}


.sp-includes__closing {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #475569;
  text-align: center;
  margin: 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .sp-includes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sp-includes__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Section 8: accordion (Zone 2) ─────────────────────────────────────── */

.sp-acc-section {
  padding: clamp(2.5rem, 6vw, 4rem) var(--r26-content-pad) clamp(3rem, 7vw, 4.5rem);
  background: #f8fafc;
}


.sp-acc-section__inner {
  max-width: var(--r26-content-max);
  margin: 0 auto;
}

.sp-acc-title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1a1a1a;
  margin: 0 0 1.25rem;
  text-align: left;
}

.sp-acc {
  /* Reset the stale card styling that the global style.css .sp-acc block
     leaks in (full border, radius, background); this is a flat divider list. */
  border: 0;
  border-top: 1px solid #e2e8f0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.sp-acc details {
  border-bottom: 1px solid #e2e8f0;
}

.sp-acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: #1a1a1a;
}

.sp-acc summary::-webkit-details-marker {
  display: none;
}

.sp-acc summary::after {
  content: "+";
  flex: none;
  /* Neutralize the global style.css chevron (9px bordered box, rotate 45deg)
     so this renders as a clean plus/minus glyph. */
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  transition: none;
  font-family: var(--font-body, Inter, "Inter Fallback", system-ui, sans-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1;
}

.sp-acc details[open] summary::after {
  content: "−";
  transform: none;
}

.sp-acc__body {
  padding: 0 0 1.25rem;
}

.sp-acc__body p {
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0 0 0.85rem;
}

.sp-acc__body ul {
  margin: 0 0 0.5rem;
  padding-left: 1.15rem;
  list-style: disc;
}

.sp-acc__body li {
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.55;
  margin-bottom: 0.4rem;
}

/* Zone 4 CTA uses global white-on-dark button rule */

@media (max-width: 900px) {
  .sp-grid {
    grid-template-columns: 1fr;
  }

  .sp-card--featured {
    order: -1;
  }


}

/* ── Closing CTA supporting line ──────────────────────────────────────────── */
/* The shared zone-CTA component has no sub-headline slot; this adds one for the
   Services page only. services.css is loaded solely by services/index.html. */
.sp-cta__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 42rem;
  margin: 0.75rem auto 1.5rem;
}

/* ==========================================================================
   Services page, rebuilt around four defined engagements.
   Reuses the existing brand tokens, type scale, maroon, navy and borders.
   No framework, no new dependency, no motion required to read anything.
   ========================================================================== */

/* ── Shared section furniture ────────────────────────────────────────────── */
.sp-section-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-section-lead {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 62ch;
  font-size: var(--r26-type-body-size, 1rem);
  line-height: 1.7;
  color: #475569;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sp-hero__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.sp-hero__modes li {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
}

.sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 1.75rem;
}

.sp-hero__link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #e2e8f0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sp-hero__link:hover { color: #ffffff; }

/* ── Buying triggers ─────────────────────────────────────────────────────── */
.sp-triggers { padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad); }
.sp-triggers__inner { max-width: var(--r26-content-max, 1140px); margin: 0 auto; }

.sp-triggers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}

.sp-trigger {
  border-top: 2px solid var(--r26-primary-dark, #0f172a);
  padding-top: 0.9rem;
}

.sp-trigger__num {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-mono, "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--r26-link-accent, #991b1b);
}

.sp-trigger__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-trigger__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
}

/* ── Core engagements ────────────────────────────────────────────────────── */
.sp-engagements {
  padding: clamp(2.5rem, 5vw, 3.25rem) var(--r26-content-pad);
  background: #f8fafc;
}
.sp-engagements__inner { max-width: var(--r26-content-max, 1140px); margin: 0 auto; }

.sp-eng-grid {
  display: grid;
  /* Two across, not three. The shared container is 1140px, so three columns
     leave each card at about 347px and wrap the longer service titles three
     lines deep. Two give every title room to breathe, which is the point of
     the section. The adoption program then spans the full row beneath them,
     because it is a program rather than a fourth card. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}

.sp-eng {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: 12px;
  padding: clamp(1.5rem, 2.6vw, 2rem);
}

/* A short maroon segment on the top edge, the same accent the homepage journey
   uses. One rule per card, and nothing else is tinted. */
.sp-eng::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(1.5rem, 2.6vw, 2rem);
  width: 2.5rem;
  height: 2px;
  background: rgba(153, 27, 27, 0.6);
}

.sp-eng__num {
  font-family: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #64748b;
}

.r26-zone-body .sp-eng h3.sp-eng__title {
  margin: 0 0 0.75rem;
  font-family: "DM Serif Display", "DM Serif Fallback", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--r26-primary-dark, #0f172a);
}

.r26-zone-body p.sp-eng__when {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #475569;
}

.sp-eng__when-label {
  font-weight: 700;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-eng__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.r26-zone-body p.sp-eng__col-label {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-eng__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.r26-zone-body .sp-eng__list li {
  position: relative;
  padding-left: 0.9rem;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #475569;
}

.sp-eng__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(153, 27, 27, 0.5);
}

.sp-eng__aside {
  margin: 0.55rem 0 0;
  font-size: 0.78125rem;
  line-height: 1.55;
  color: #64748b;
}

/* Sits directly after the disclosure. It used to be pushed to the bottom with
   "margin: auto 0 0", which on a stretched grid left a large empty gap above it
   in the shortest card. */
.r26-zone-body p.sp-eng__limit {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #64748b;
}

.r26-zone-body p.sp-eng__limit--strong {
  padding-left: 0.85rem;
  border-left: 2px solid #dde3ec;
  color: #64748b;
}
/* Card head: the number and a one-word outcome anchor, so the four engagements
   can be told apart at a glance without reading the titles. */
.sp-eng__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin: 0 0 0.65rem;
}

/* Title case, no pill, no tint. The stage is a word, not a badge. */
.sp-eng__anchor {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--r26-link-accent, #991b1b);
}

/* Depth on demand. The visible card carries the decision-level content; the
   remaining scope sits one click away so the page stays scannable. Native
   details, so it works with no JavaScript and is keyboard accessible. */
.sp-eng__more {
  margin: 1.1rem 0 0;
  border-top: 1px solid #eef1f6;
  padding-top: 0.35rem;
}

.sp-eng__more-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #475569;
  /* A full-width row at 44px, so the control is comfortably tappable rather
     than a 10px line of capitals. */
  min-height: 44px;
  padding: 0.35rem 0;
}

.sp-eng__more-summary::-webkit-details-marker { display: none; }

.sp-eng__more-summary::after {
  content: "+";
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  color: var(--r26-link-accent, #991b1b);
}

.sp-eng__more[open] .sp-eng__more-summary::after { content: "\2212"; }

.sp-eng__more-summary:hover { color: var(--r26-primary-dark, #0f172a); }

.sp-eng__more-summary:focus-visible {
  outline: 2px solid var(--r26-link-accent, #991b1b);
  outline-offset: 3px;
  border-radius: 2px;
}

.sp-eng__more .sp-eng__list { margin-top: 0.6rem; }

/* Evidence runs through all four engagements rather than being sold on its own. */
.sp-engagements__note {
  max-width: 60rem;
  margin: clamp(1.25rem, 2.6vw, 1.75rem) auto 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: #64748b;
}


.sp-engagements__cta {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

/* ── Initial Technical Review ────────────────────────────────────────────── */
.sp-entry { padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad); }

.sp-entry__inner {
  max-width: var(--r26-content-max, 1140px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  background: var(--r26-primary-dark, #0f172a);
  border-radius: 14px;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.r26-zone-body p.sp-entry__eyebrow {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #f0a8a8;
}

.sp-entry__title {
  margin: 0 0 0.6rem;
  font-family: "DM Serif Display", "DM Serif Fallback", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: #ffffff;
}

.sp-entry__lead {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #cbd5e1;
  max-width: 42ch;
}

.sp-entry__price {
  margin: 0 0 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}

.r26-zone-body .sp-entry__detail p.sp-eng__col-label { color: #e2e8f0; }
.sp-entry__detail .sp-eng__list li { color: #cbd5e1; }
.sp-entry__detail .sp-eng__list li::before { background: #fca5a5; }

.r26-zone-body .sp-entry__detail p.sp-eng__limit--strong {
  margin-top: 1rem;
  border-top-color: rgba(148, 163, 184, 0.28);
  border-left-color: rgba(252, 165, 165, 0.55);
  color: #94a3b8;
}

.sp-entry__fit {
  grid-column: 1 / -1;
  margin: clamp(1.1rem, 2.4vw, 1.5rem) 0 0;
  padding-top: clamp(1rem, 2.2vw, 1.35rem);
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 0.875rem;
  line-height: 1.65;
  color: #cbd5e1;
}
.sp-entry__fit-label { font-weight: 600; color: #ffffff; }
.sp-entry__fit a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(252, 165, 165, 0.7);
}
.sp-entry__fit a:hover { text-decoration-color: #ffffff; }

/* ── Six-step method ─────────────────────────────────────────────────────── */
.sp-method {
  padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad);
  background: #f8fafc;
}
.sp-method__inner { max-width: var(--r26-content-max, 1140px); margin: 0 auto; }

.sp-method__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: sp-step;
}

.sp-method__step {
  counter-increment: sp-step;
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--r26-border, #e2e8f0);
}

.sp-method__step::before {
  content: counter(sp-step, decimal-leading-zero);
  position: absolute;
  top: 0.55rem;
  left: 0;
  font-family: var(--font-mono, "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--r26-link-accent, #991b1b);
}

.sp-method__name {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-method__desc {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #475569;
}

/* ── Examples of work ────────────────────────────────────────────────────── */
.sp-examples { padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad); }
.sp-examples__inner { max-width: var(--r26-content-max, 1140px); margin: 0 auto; }

.sp-examples__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem clamp(1rem, 2.4vw, 1.75rem);
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 clamp(1.5rem, 3vw, 2rem);
  padding: 0;
  list-style: none;
}

.sp-examples__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
}

.sp-examples__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(153, 27, 27, 0.55);
}

.sp-examples__domains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-bottom: 1.25rem;
}

.sp-examples__domain {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--r26-border, #e2e8f0);
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
}

.sp-examples__domain-name {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--r26-primary-dark, #0f172a);
}

/* ── Why Rule26 ──────────────────────────────────────────────────────────── */
.sp-why {
  padding: clamp(2.75rem, 6vw, 4rem) var(--r26-content-pad);
  background: #f8fafc;
}
.sp-why__inner { max-width: var(--r26-content-max, 1140px); margin: 0 auto; }

.sp-why__body {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
}

.sp-why__marks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.sp-why__marks li {
  border-left: 2px solid rgba(153, 27, 27, 0.32);
  padding-left: 0.85rem;
}

.sp-why__figure {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-why__label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
}

.sp-why__note {
  margin: 0 0 0.9rem;
  font-size: var(--r26-type-body-size, 1rem);
  line-height: 1.7;
  color: #475569;
  max-width: 64ch;
}

.sp-why__note:last-child { margin-bottom: 0; }

.sp-why__link {
  font-weight: 600;
  color: var(--r26-link-accent, #991b1b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sp-eng-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-triggers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-examples__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sp-eng-grid { grid-template-columns: 1fr; }
  .sp-method__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-entry__inner { grid-template-columns: 1fr; }
  .sp-why__body { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .sp-triggers__grid { grid-template-columns: 1fr; }
  .sp-eng__cols { grid-template-columns: 1fr; gap: 0.9rem; }
  .sp-examples__list { grid-template-columns: 1fr; }
  .sp-examples__domains { grid-template-columns: 1fr; }
  .sp-method__steps { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .sp-hero__modes li { white-space: normal; }
  .sp-hero__actions { gap: 0.85rem; }
}

/* ---------------------------------------------------------------------------
   Four-stage journey. Replaces the old trigger cards: same information, one
   line per stage, arranged so the sequence reads at a glance.
   --------------------------------------------------------------------------- */
.sp-journey {
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 0;
}

.sp-journey__inner {
  max-width: var(--r26-container, 72rem);
  margin: 0 auto;
  padding: 0 clamp(1.15rem, 4vw, 2.5rem);
}

.sp-journey__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin: clamp(1.25rem, 2.6vw, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.sp-journey__stage {
  position: relative;
  padding-top: 1.15rem;
  border-top: 2px solid rgba(153, 27, 27, 0.28);
}

/* The connector reads as a sequence without adding another element. */
.sp-journey__stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -5px;
  right: calc(-1 * clamp(0.9rem, 2vw, 1.5rem) / 2 - 4px);
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(148, 163, 184, 0.7);
  border-right: 2px solid rgba(148, 163, 184, 0.7);
  transform: rotate(45deg);
}

.r26-zone-body p.sp-journey__verb {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--r26-link-accent, #991b1b);
}

.r26-zone-body .sp-journey h3.sp-journey__name {
  margin: 0 0 0.45rem;
  font-family: "DM Serif Display", "DM Serif Fallback", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-journey__name a {
  color: inherit;
  text-decoration: none;
}

.sp-journey__name a:hover { text-decoration: underline; }

.sp-journey__name a:focus-visible {
  outline: 2px solid var(--r26-link-accent, #991b1b);
  outline-offset: 3px;
  border-radius: 2px;
}

.r26-zone-body p.sp-journey__out {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #64748b;
}

/* ---------------------------------------------------------------------------
   Service cards. One list instead of two columns of bullets, plus a single
   outcome line so the payoff is never buried.
   --------------------------------------------------------------------------- */
/* The payoff. Set apart by a quiet surface and a thin rule rather than by a
   louder label, so it reads as the conclusion of the card. */
.r26-zone-body p.sp-eng__out {
  margin: 1.1rem 0 0;
  padding: 0.75rem 0.9rem;
  background: #f8fafc;
  border-left: 2px solid rgba(153, 27, 27, 0.55);
  border-radius: 0 4px 4px 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-eng__out-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--r26-primary-dark, #0f172a);
  margin-right: 0.3rem;
}

/* Adoption is a program, so it gets the full width and its own five steps. */
/* Full width because it carries the five-stage program, made intentional by
   layout and whitespace rather than by a louder surface. */
.sp-eng--program { grid-column: 1 / -1; }

/* Five stages read as one horizontal sequence. The <ol> keeps the order; the
   visible numerals are gone, because a numbered list inside an already
   numbered card reads as a second hierarchy. */
.sp-program {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin: clamp(1.25rem, 2.6vw, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.sp-program__step {
  position: relative;
  padding-top: 1rem;
  border-top: 1px solid #dde3ec;
}

/* A drawn connector, never a character, so nothing extra is announced. */
.sp-program__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -1px;
  right: calc(-1 * clamp(0.9rem, 2vw, 1.5rem));
  width: clamp(0.9rem, 2vw, 1.5rem);
  height: 1px;
  background: #dde3ec;
}

.sp-program__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 1.5rem;
  height: 2px;
  background: rgba(153, 27, 27, 0.45);
}

.r26-zone-body .sp-program h4.sp-program__name {
  margin: 0 0 0.35rem;
  font-family: "DM Serif Display", "DM Serif Fallback", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--r26-primary-dark, #0f172a);
}

.r26-zone-body p.sp-program__body {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #64748b;
}

/* ---------------------------------------------------------------------------
   What runs through all four. A chip strip rather than another paragraph.
   --------------------------------------------------------------------------- */
.sp-through {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.15rem, 2.4vw, 1.5rem);
  background: #ffffff;
  border: 1px solid var(--r26-border, #e2e8f0);
  border-left: 3px solid rgba(153, 27, 27, 0.4);
  border-radius: 10px;
}

.r26-zone-body p.sp-through__label {
  margin: 0 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--r26-primary-dark, #0f172a);
}

.sp-through__intro {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #334155;
  max-width: 72ch;
}

.sp-through__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
}

.r26-zone-body .sp-through__chips li {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #334155;
  background: #ffffff;
  border: 1px solid #dde3ec;
  border-radius: 4px;
  padding: 0.3rem 0.65rem;
}

.sp-through__note {
  margin: 0;
  font-size: 0.78125rem;
  line-height: 1.6;
  color: #64748b;
}

/* --------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .sp-journey__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The arrow only reads as a connector on a single row, so drop it once the
     stages wrap. */
  .sp-journey__stage:not(:last-child)::after { display: none; }
  .sp-program { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-program__step:nth-child(3n)::after,
  .sp-program__step:last-child::after { display: none; }
}

/* Two up once three would each fall under ~330px, one up once two would. */
@media (max-width: 1080px) {
  .sp-eng-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cards in two columns would leave an empty cell beside the third, so
     the third spans instead. Its prose is measure-capped below, because a
     full-width card would otherwise run to 100+ character lines. */
  .sp-eng-grid > .sp-eng:nth-child(3) { grid-column: 1 / -1; }
}

/* A card that spans the full row would otherwise run to 100+ character lines. */
.r26-zone-body .sp-eng--program p.sp-eng__when,
.r26-zone-body .sp-eng--program p.sp-eng__out,
.r26-zone-body .sp-eng--program p.sp-eng__limit {
  max-width: 78ch;
}
@media (max-width: 720px) {
  .sp-eng-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .sp-program { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-program__step:nth-child(2n)::after { display: none; }
  .sp-program__step:nth-child(3n)::after { display: block; }
  .sp-program__step:last-child::after { display: none; }
}

@media (max-width: 430px) {
  .sp-journey__list { grid-template-columns: 1fr; }
  .sp-program { grid-template-columns: 1fr; }
  .sp-program__step::after { display: none; }
}

/* The shared focus ring is the same navy as this dark button, so the ring
   measured about 1:1 against it, under the 3:1 WCAG 1.4.11 asks for. A white
   ring with a navy halo reads on both light and dark grounds, matching the
   treatment the homepage uses. */
.sp-engagements__cta .r26-btn:focus-visible,
.sp-entry .r26-btn:focus-visible,
.sp-hero .r26-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #0f172a;
}