/* ============================================================
   SATOOMS CONSULTS CANADA INC. — Inner Page Visual System
   ============================================================
   Reconstruction of the approved Stitch inner-page exports
   (stitch.ui/about us.ui/, stitch.ui/services.ui/, stitch.ui/industries.ui/).

   IMPORTANT — SHARED SHELL:
   These pages link `stitch-homepage.css` first. That file provides the
   canonical approved shell: design tokens, page base + reset, `.sx-container`,
   the top contact bar, the navbar (incl. mobile disclosure), the footer, the
   `.sx-btn` system, the skip link and the visually-hidden helper. Nothing in
   this file redeclares any of it, so the header/footer can never drift from
   the approved homepage implementation.

   SCOPE OF THIS FILE:
   Only page bodies (hero → closing CTA) for About / Services / Industries.
   Class prefixes: `.pg-` shared page primitives, `.ab-` About, `.sv-` Services,
   `.in-` Industries.

   TOKENS:
   The inner-page exports carry their own near-identical brand tokens
   (navy #0b1d3a, green #1f7a3f). They are reproduced exactly here rather than
   mapped onto the homepage navy/green, so each page matches the colours of its
   approved reference. See the final report for the sub-perceptual delta.
   ============================================================ */

:root {
  /* Recessed secondary text, split by the surface it sits on.
     slate-400 (#94a3b8) is only 2.56:1 on white, which fails AA, but it is
     correct on the dark bands (6.9:1) where a darker grey would fail.
     Keeping the two surfaces separate is what stops a fix for one from
     breaking the other. */
  --muted-on-light: #475569;
  --muted-on-dark: #94a3b8;
  --pg-navy: #0b1d3a;
  --pg-navy-card: #0e2447;
  --pg-navy-deep: #061325;
  --pg-green: #1f7a3f;
  --pg-green-hover: #186333;
  --pg-green-light: #eaf5ee;
  --pg-gray-bg: #f8fafc;
  --pg-border: #e2e8f0;
  --pg-gray-100: #f3f4f6;
  --pg-gray-200: #e5e7eb;
  --pg-gray-300: #d1d5db;
  --pg-gray-400: #9ca3af;
  --pg-gray-200-text: #e5e7eb;
  --pg-navy-70: rgba(11, 29, 58, 0.7);
  --pg-navy-80: rgba(11, 29, 58, 0.8);
  --pg-navy-90: rgba(11, 29, 58, 0.9);
  --pg-navy-60: rgba(11, 29, 58, 0.6);
}

/* ------------------------------------------------------------
   1. SHARED PAGE PRIMITIVES
   ------------------------------------------------------------ */
/* py-16 (64px) base → py-20 (80px) from the lg breakpoint, exactly as the
   approved exports specify. */
.pg-section {
  padding: 64px var(--sx-gutter);
  background-color: #ffffff;
}
.pg-section--pale { background-color: var(--pg-gray-bg); }
.pg-section--dark { background-color: var(--pg-navy); color: #ffffff; }
.pg-section--tight { padding: 56px var(--sx-gutter); }
.pg-section--ruled-b { border-bottom: 1px solid var(--pg-gray-200); }
.pg-section--ruled-t { border-top: 1px solid var(--pg-gray-200); }

.pg-wrap { max-width: 1400px; margin-inline: auto; }

/* eyebrow label (text-xs font-bold uppercase tracking-wider) */
.pg-eyebrow {
  color: var(--pg-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.pg-eyebrow--wide { letter-spacing: 1.2px; }
/* Unused at present. Kept light for the same reason as the About band eyebrow:
   green is only legible on light surfaces. */
.pg-eyebrow--on-dark { color: #ffffff; }

/* section heading — the exports' h2 is text-2xl (24/32) base, text-3xl
   (30/36) from the sm breakpoint. */
.pg-h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--pg-navy);
  letter-spacing: normal;
  margin: 0;
}
.pg-section--dark .pg-h2 { color: #ffffff; }
.pg-h2--snug { line-height: 1.375; }
/* `tracking-tight` (-0.025em) as used by the Services / Industries exports */
.pg-h2--tight { letter-spacing: -0.025em; }

/* short green rule (w-12 h-1) */
.pg-rule {
  width: 48px;
  height: 4px;
  background-color: var(--pg-green);
  border: 0;
}
.pg-rule--center { margin-inline: auto; }

.pg-body { font-size: 14px; line-height: 20px; color: var(--pg-navy-70); }
.pg-body--relaxed { line-height: 22.75px; }
.pg-body--on-dark { color: var(--pg-gray-200-text); }

.pg-center { text-align: center; }

/* ------------------------------------------------------------
   2. BUTTONS (page bodies only — the shell keeps `.sx-btn`)
   ------------------------------------------------------------ */
.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.pg-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pg-btn--green { background-color: var(--pg-green); color: #ffffff; border: 0; }
.pg-btn--green:hover { background-color: var(--pg-green-hover); }
.pg-btn--green-outline {
  background-color: #ffffff;
  color: var(--pg-green);
  border-color: var(--pg-green);
  box-shadow: none;
}
.pg-btn--green-outline:hover { background-color: #f9fafb; }
.pg-btn--navy { background-color: var(--pg-navy); color: #ffffff; border: 0; }
.pg-btn--navy:hover { background-color: var(--pg-navy-card); }
/* `py-2.5 text-xs` button used by the president CTA (36px tall) */
.pg-btn--xs { padding: 10px 24px; font-size: 12px; line-height: 16px; }
/* `px-7 py-3` closing-CTA button */
.pg-btn--lg { padding: 12px 28px; }

/* ------------------------------------------------------------
   3. ABOUT — A2 HERO
   ------------------------------------------------------------ */
.ab-hero {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid var(--pg-gray-100);
}
.ab-hero__media { display: none; }
.ab-hero__inner {
  position: relative;
  z-index: 10;
  padding-top: 64px;
  padding-bottom: 64px;
}
.ab-hero__copy { max-width: 576px; }

.ab-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--pg-green-light);
  color: var(--pg-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.ab-hero__pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--pg-green);
}
.ab-hero__heading {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--pg-navy);
  margin-bottom: 24px;
}
.ab-hero__tagline {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--pg-navy-90);
  margin-bottom: 16px;
}
.ab-hero__tagline span { color: var(--pg-green); font-weight: 700; }
/* The export pairs `text-sm sm:text-base` with `leading-relaxed`. Because the
   responsive font-size utility is emitted after the line-height utility, the
   rendered line-height is the size utility's (24px at >=640px), not 1.625. */
.ab-hero__body {
  font-size: 14px;
  line-height: 22.75px;
  color: var(--pg-navy-70);
  margin-bottom: 32px;
  max-width: 512px;
}
.ab-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ------------------------------------------------------------
   4. ABOUT — A3 WHO WE ARE
   ------------------------------------------------------------ */
.ab-who__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
.ab-who__hook-h2 { margin-bottom: 20px; }
.ab-who__rule { margin-bottom: 24px; }
.ab-who__lede { margin-bottom: 24px; }
.ab-who__quote {
  background-color: var(--pg-gray-bg);
  border-left: 4px solid var(--pg-green);
  border-radius: 0 4px 4px 0;
  padding: 20px;
}
.ab-who__quote p {
  font-size: 12px;
  line-height: 19.5px;
  font-weight: 600;
  font-style: italic;
  color: var(--pg-navy-80);
}
.ab-who__cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ab-who__card {
  background-color: var(--pg-gray-bg);
  border: 1px solid var(--pg-gray-100);
  border-radius: 4px;
  padding: 24px;
  transition: border-color 0.15s ease;
}
.ab-who__card:hover { border-color: rgba(31, 122, 63, 0.3); }
.ab-who__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: var(--pg-green-light);
  color: var(--pg-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.ab-who__card-icon svg { width: 20px; height: 20px; }
.ab-who__card h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pg-navy);
  margin-bottom: 8px;
}
.ab-who__card p { font-size: 12px; line-height: 19.5px; color: var(--pg-navy-70); }
.ab-who__col { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }

/* ------------------------------------------------------------
   5. ABOUT — A4 PHOTOGRAPHIC BAND
   ------------------------------------------------------------ */
.ab-band {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-top: 1px solid var(--pg-gray-200);
  border-bottom: 1px solid var(--pg-gray-200);
}
.ab-band img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ab-band__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 29, 58, 0.65);
  display: flex;
  align-items: center;
  padding: 0 var(--sx-gutter);
}
.ab-band__copy { max-width: 672px; color: #ffffff; }
.ab-band__copy .pg-h2 { color: #ffffff; margin-bottom: 16px; }
/* The brand green cannot meet AA contrast over this photographic band: its best
   possible ratio is 3.9:1 against pure black, so no scrim strength makes it
   pass. The band's heading and body copy are already light, so the eyebrow
   matches them and keeps its size, weight and letter-spacing for hierarchy. */
.ab-band__copy .pg-eyebrow { color: #ffffff; }
.ab-band__copy p { font-size: 14px; line-height: 22.75px; color: var(--pg-gray-200-text); }

/* ------------------------------------------------------------
   6. ABOUT — A5 PURPOSE / MISSION / VISION
   ------------------------------------------------------------ */
.ab-purpose__head { text-align: center; max-width: 672px; margin: 0 auto 56px; }
.ab-purpose__head .pg-rule { margin-top: 12px; }
.ab-purpose__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
.ab-purpose__card {
  background-color: var(--pg-navy-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ab-purpose__card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ab-purpose__icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background-color: rgba(31, 122, 63, 0.2);
  border: 1px solid rgba(31, 122, 63, 0.4);
  color: var(--pg-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-purpose__icon svg { width: 24px; height: 24px; }
.ab-purpose__kicker {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--pg-green);
}
.ab-purpose__card h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.ab-purpose__card p {
  font-size: 16px;
  line-height: 26px;
  color: var(--pg-gray-200-text);
  margin-bottom: 24px;
}
.ab-purpose__meta {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--pg-gray-300);
}
.ab-purpose__meta i {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--pg-green);
  display: block;
}

/* ------------------------------------------------------------
   7. ABOUT — A6 CORE VALUES
   ------------------------------------------------------------ */
.ab-values__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 48px;
}
.ab-values__head .pg-rule { margin-top: 12px; }
.ab-values__intro { font-size: 12px; line-height: 16px; color: var(--pg-navy-70); max-width: 448px; margin-top: 16px; }
.ab-values__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ab-values__card {
  background-color: #ffffff;
  border: 1px solid var(--pg-gray-200);
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: border-color 0.15s ease;
}
.ab-values__card:hover { border-color: rgba(31, 122, 63, 0.4); }
.ab-values__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ab-values__num {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--pg-green);
}
.ab-values__icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: var(--pg-green-light);
  color: var(--pg-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-values__icon svg { width: 16px; height: 16px; }
.ab-values__card h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pg-navy);
  margin-bottom: 6px;
}
.ab-values__card p { font-size: 12px; line-height: 19.5px; color: var(--pg-navy-70); }

/* ------------------------------------------------------------
   8. ABOUT — A7 WHAT SETS US APART
   ------------------------------------------------------------ */
.ab-apart__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.ab-apart__rule { margin-top: 12px; margin-bottom: 24px; }
.ab-apart__list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.ab-apart__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--pg-gray-100);
  border-radius: 4px;
  background-color: rgba(248, 250, 252, 0.6);
}
.ab-apart__tick {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background-color: rgba(31, 122, 63, 0.1);
  color: var(--pg-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ab-apart__tick svg { width: 16px; height: 16px; }
/* Class-based (not element-based) so the heading level can change for correct
   document outline without altering how it looks. */
.ab-apart__item .ab-apart__title { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--pg-navy); }
.ab-apart__item p { font-size: 12px; line-height: 19.5px; color: var(--pg-navy-70); margin-top: 4px; }
.ab-apart__photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--pg-gray-100);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ab-apart__photo img { width: 100%; height: 420px; object-fit: cover; object-position: center; display: block; }
.ab-apart__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  color: #ffffff;
  background: linear-gradient(to top, #0b1d3a, rgba(11, 29, 58, 0.8), transparent);
}
/* The caption sits on the photograph, where the brand green cannot reach AA.
   The caption block already renders white, so its eyebrow follows it. */
.ab-apart__caption .pg-eyebrow { margin-bottom: 4px; color: #ffffff; }
.ab-apart__caption p { font-size: 14px; line-height: 20px; font-weight: 600; }

/* ------------------------------------------------------------
   9. ABOUT — A8 ADVISORY LIFECYCLE
   ------------------------------------------------------------ */
.ab-life__head { text-align: center; max-width: 672px; margin: 0 auto 56px; }
.ab-life__head .pg-rule { margin-top: 12px; margin-bottom: 16px; }
.ab-life__head p { font-size: 12px; line-height: 16px; color: var(--pg-navy-70); }
.ab-life__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ab-life__card {
  background-color: #ffffff;
  border: 1px solid var(--pg-gray-200);
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ab-life__badge {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: var(--pg-green);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.ab-life__badge svg { width: 16px; height: 16px; }
.ab-life__step {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--pg-green);
}
.ab-life__card h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pg-navy);
  margin-top: 4px;
  margin-bottom: 8px;
}
.ab-life__card p { font-size: 12px; line-height: 19.5px; color: var(--pg-navy-70); }

/* ------------------------------------------------------------
   10. ABOUT — A9 PRESIDENT
   ------------------------------------------------------------ */
.ab-pres__panel {
  background-color: var(--pg-gray-bg);
  border: 1px solid var(--pg-gray-200);
  border-radius: 4px;
  padding: 32px;
}
.ab-pres__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.ab-pres__portrait-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ab-pres__portrait {
  width: 192px;
  height: 192px;
  border-radius: 9999px;
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  margin-bottom: 16px;
  background-color: var(--pg-gray-200);
}
.ab-pres__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ab-pres__name { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--pg-green); }
.ab-pres__role { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--pg-navy-80); }
.ab-pres__org { font-size: 11px; line-height: 16px; color: var(--pg-navy-70); margin-top: 4px; }
.ab-pres__bio { display: flex; flex-direction: column; gap: 16px; }
/* the approved export's leadership eyebrow carries no bottom margin: the flex
   column's own 16px rhythm provides the spacing */
.ab-pres__bio > .pg-eyebrow { margin-bottom: 0; }
.ab-pres__quote { font-size: 14px; line-height: 22.75px; color: var(--pg-navy-80); padding-top: 8px; }
.ab-pres__note { font-size: 12px; line-height: 19.5px; color: var(--pg-navy-70); }
.ab-pres__cta { padding-top: 12px; }

/* ------------------------------------------------------------
   11. ABOUT — A10 PRACTICE AREAS BRIDGE
   ------------------------------------------------------------ */
.ab-bridge__panel {
  background-color: #ffffff;
  border: 1px solid var(--pg-gray-200);
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.ab-bridge__copy { max-width: 672px; }
.ab-bridge__copy h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--pg-navy);
  margin-bottom: 8px;
}
.ab-bridge__copy p { font-size: 12px; line-height: 16px; color: var(--pg-navy-70); }
.ab-bridge__action { flex-shrink: 0; }

/* ------------------------------------------------------------
   12. ABOUT — A11 CLOSING CTA
   ------------------------------------------------------------ */
.ab-cta {
  position: relative;
  background-color: var(--pg-navy);
  color: #ffffff;
  padding: 48px var(--sx-gutter);
  overflow: hidden;
}
.ab-cta__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
}
.ab-cta__pattern svg { width: 100%; height: 100%; }
.ab-cta__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.ab-cta__lead { display: flex; align-items: center; gap: 20px; }
.ab-cta__icon {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ab-cta__icon svg { width: 32px; height: 32px; }
.ab-cta__lead h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
.ab-cta__lead p { font-size: 12px; line-height: 16px; color: var(--pg-gray-300); margin-top: 4px; max-width: 576px; }
.ab-cta__action { flex-shrink: 0; }  .ab-cta__action .pg-btn { padding: 12px 28px; }

/* ------------------------------------------------------------
   13. RESPONSIVE — matches the exports' sm / md / lg breakpoints
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  .pg-h2 { font-size: 30px; line-height: 36px; }
  .ab-hero__heading { font-size: 36px; line-height: 40px; }
  .ab-hero__tagline { font-size: 16px; line-height: 24px; }
  .ab-hero__body { font-size: 16px; line-height: 24px; }
  .ab-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-values__intro { font-size: 14px; line-height: 20px; }
  .ab-life__head p { font-size: 14px; line-height: 20px; }
  .ab-pres__portrait { width: 224px; height: 224px; }
  .ab-bridge__copy h3 { font-size: 24px; line-height: 32px; }
  .ab-bridge__copy p { font-size: 14px; line-height: 20px; }
  .ab-cta__lead h2 { font-size: 24px; line-height: 32px; }
  .ab-cta__lead p { font-size: 14px; line-height: 20px; }
}

@media (min-width: 768px) {
  .ab-hero__media {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 58%;
  }
  .ab-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .ab-hero__fade-h {
    position: absolute;
    inset: 0;
    width: 38%;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.8), transparent);
  }
  .ab-hero__fade-v {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 96px;
    background: linear-gradient(to right, #ffffff, transparent);
  }
  .ab-who__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-values__head { flex-direction: row; align-items: flex-end; }
  .ab-values__intro { margin-top: 0; }
  .ab-bridge__panel { flex-direction: row; }
}

@media (min-width: 1024px) {
  .pg-section { padding-top: 80px; padding-bottom: 80px; }
  .pg-section--tight { padding: 56px var(--sx-gutter); }
  .ab-hero__inner { padding-top: 80px; padding-bottom: 80px; }
  .ab-hero__heading { font-size: 46px; line-height: 40px; }
  .ab-hero__copy { max-width: 672px; }
  .ab-band { height: 384px; }
  .ab-who__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ab-who__hook { grid-column: span 5; }
  .ab-who__col { grid-column: span 7; }
  .ab-purpose__card { padding: 40px; }
  .ab-purpose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab-apart__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ab-apart__col { grid-column: span 6; }
  .ab-life__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ab-pres__panel { padding: 48px; }
  .ab-pres__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .ab-pres__portrait-col { grid-column: span 4; }
  .ab-pres__bio { grid-column: span 8; }
  .ab-bridge__panel { padding: 40px; }
  .ab-cta__inner { flex-direction: row; }
}

/* ------------------------------------------------------------
   14. SERVICES — PAGE SCOPE + BODY SECTIONS
   ------------------------------------------------------------
   PAGE SCOPE
   The approved Services export carries its own brand ramp
   (navy #0c1e38, green #1b7a43, accent #22c55e, deep navy #07152b).
   Those values are reproduced exactly, not mapped onto another page's
   palette. The override is scoped to `.sv-page` (applied to <body> of the
   Services page only) so no other page can pick up these values.
   ------------------------------------------------------------ */
.sv-page {
  --pg-navy: #0c1e38;
  --pg-green: #1b7a43;
  --pg-green-hover: #156d39;
  --pg-green-light: #ecfdf5;
  --pg-gray-bg: #f8fafc;
  --pg-border: #e2e8f0;

  --sv-accent: #22c55e;
  --sv-deep: #07152b;
  --sv-emerald-50: #ecfdf5;
  --sv-emerald-300: #6ee7b7;
  --sv-slate-100: #f1f5f9;
  --sv-slate-200: #e2e8f0;
  --sv-slate-300: #cbd5e1;
  --sv-slate-400: #94a3b8;
  --sv-slate-500: #64748b;
  --sv-slate-600: #475569;
  --sv-slate-800: #1e293b;
}

/* Buttons — the Services export uses its own padding / weight per button,
   so this page keeps its own small button set instead of re-using `.pg-btn`. */
.sv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sv-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.sv-btn--green {
  border: 0;
  background-color: var(--pg-green);
  color: #ffffff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.sv-btn--green:hover { background-color: var(--pg-green-hover); }
.sv-btn--outline {
  background-color: #ffffff;
  color: var(--pg-green);
  border-color: var(--pg-green);
}
.sv-btn--outline:hover { background-color: #f8fafc; }
.sv-btn--lg {
  padding: 14px 24px;
  font-size: 16px;
  line-height: 24px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.sv-btn:hover svg { transform: translateX(4px); }

/* --- SV1 hero ------------------------------------------------- */
.sv-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  overflow: hidden;
  background-color: #ffffff;
  border-bottom: 1px solid rgb(226 232 240 / 0.8);
}
.sv-hero__media {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}
.sv-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sv-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #ffffff, rgb(255 255 255 / 0.85), transparent);
}
.sv-hero__fade-edge {
  display: none;
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 128px;
  background: linear-gradient(to right, #ffffff, transparent);
}
.sv-hero__inner {
  position: relative;
  z-index: 10;
  padding-top: 56px;
  padding-bottom: 56px;
}
.sv-hero__copy { max-width: 672px; }
.sv-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  margin-bottom: 16px;
  border: 1px solid rgb(167 243 208 / 0.6);
  border-radius: 9999px;
  background-color: var(--sv-emerald-50);
  color: var(--pg-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.sv-hero__pill-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--pg-green);
}
@media (prefers-reduced-motion: no-preference) {
  .sv-hero__pill-dot { animation: sv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
}
@keyframes sv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.sv-hero__heading {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--pg-navy);
}
.sv-hero__tagline {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--sv-slate-800);
}
.sv-hero__tagline span { color: var(--pg-green); }
.sv-hero__body {
  margin: 0 0 32px;
  max-width: 576px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sv-slate-600);
}
.sv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* --- SV2 delivery philosophy ---------------------------------- */
.sv-pillars {
  padding-top: 56px;
  padding-bottom: 56px;
  background-color: var(--pg-gray-bg);
  border-bottom: 1px solid rgb(226 232 240 / 0.8);
}
.sv-pillars__head {
  max-width: 672px;
  margin: 0 auto 40px;
  text-align: center;
}
.sv-pillars__rule { margin-top: 12px; }
.sv-pillars__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.sv-pillar {
  padding: 24px;
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.03);
  transition: border-color 0.15s ease;
}
.sv-pillar:hover { border-color: var(--sv-emerald-300); }
.sv-pillar__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: var(--sv-emerald-50);
  color: var(--pg-green);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}
.sv-pillar__title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pg-navy);
}
.sv-pillar__copy {
  margin: 0;
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sv-slate-600);
}

/* --- SV3 practice portfolio ----------------------------------- */
.sv-portfolio {
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: #ffffff;
  scroll-margin-top: 96px;
}
.sv-portfolio__head { max-width: 768px; margin-bottom: 48px; }
.sv-portfolio__head .pg-eyebrow { margin-bottom: 4px; }
.sv-portfolio__head .pg-h2 { margin-bottom: 12px; }
.sv-portfolio__rule { margin-bottom: 16px; }
.sv-portfolio__lead {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--sv-slate-600);
}
.sv-portfolio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.sv-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sv-slate-200);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--pg-gray-bg);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.sv-card__media { position: relative; height: 256px; overflow: hidden; }
.sv-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sv-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgb(12 30 56 / 0.9);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}
.sv-card__body { padding: 24px; }
.sv-card__title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--pg-navy);
}
.sv-card__copy {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--sv-slate-600);
}
.sv-card__focus {
  padding-top: 16px;
  margin-bottom: 20px;
  border-top: 1px solid var(--sv-slate-200);
}
.sv-card__focus-label {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--pg-navy);
}
.sv-card__focus-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 16px;
  color: var(--sv-slate-600);
}
.sv-card__focus-list li { display: flex; align-items: center; gap: 8px; }
.sv-card__focus-list li + li { margin-top: 6px; }
.sv-card__focus-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--pg-green);
}
.sv-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  border-radius: 4px;
  background-color: var(--pg-green);
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.sv-card__cta:hover { background-color: var(--pg-green-hover); }
.sv-card__cta svg { width: 16px; height: 16px; flex-shrink: 0; }

.sv-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--sv-slate-200);
  border-bottom: 1px solid var(--sv-slate-200);
}
.sv-row {
  display: block;
  padding: 16px;
  border-left: 4px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sv-row + .sv-row { border-top: 1px solid var(--sv-slate-200); }
.sv-row--featured {
  background-color: rgb(236 253 245 / 0.7);
  border-left-color: var(--pg-green);
}
.sv-row:hover {
  background-color: #f8fafc;
  border-left-color: var(--sv-slate-300);
}
.sv-row--featured:hover { background-color: rgb(236 253 245 / 0.7); }
.sv-row__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sv-row__lead { display: flex; align-items: flex-start; gap: 16px; }
.sv-row__num {
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--muted-on-light);
  transition: color 0.15s ease;
}
.sv-row--featured .sv-row__num { color: var(--pg-green); }
.sv-row:hover .sv-row__num { color: var(--pg-navy); }
.sv-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pg-navy);
  transition: color 0.15s ease;
}
.sv-row:hover .sv-row__title { color: var(--pg-green); }
.sv-row__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: var(--pg-green);
  color: #ffffff;
  font-size: 10px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.sv-row__copy {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--sv-slate-500);
}
.sv-row--featured .sv-row__copy { color: var(--sv-slate-600); }
.sv-row__chev {
  width: 20px;
  height: 20px;
  margin-left: 16px;
  flex-shrink: 0;
  color: var(--sv-slate-400);
  transition: color 0.15s ease, transform 0.15s ease;
}
.sv-row--featured .sv-row__chev { color: var(--pg-green); }
.sv-row:hover .sv-row__chev {
  color: var(--pg-green);
  transform: translateX(4px);
}

/* --- SV4 delivery mandate (photographic break) ---------------- */
.sv-quote {
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--sv-deep);
}
.sv-quote__bg { position: absolute; inset: 0; z-index: 0; }
.sv-quote__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.25;
  filter: grayscale(1);
}
.sv-quote__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #07152b, rgb(7 21 43 / 0.95), rgb(7 21 43 / 0.8));
}
.sv-quote__inner {
  position: relative;
  z-index: 10;
  max-width: 896px;
  padding-inline: var(--sx-gutter);
}
.sv-quote__eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sv-accent);
}
.sv-quote__text {
  margin: 0 0 24px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.sv-quote__mandate { display: flex; align-items: center; gap: 12px; }
.sv-quote__mandate-bar {
  width: 40px;
  height: 2px;
  flex-shrink: 0;
  background-color: var(--pg-green);
}
.sv-quote__mandate-label {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sv-slate-300);
}

/* --- SV5 integrated ecosystem --------------------------------- */
.sv-eco {
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: var(--pg-gray-bg);
  border-bottom: 1px solid var(--sv-slate-200);
}
.sv-eco__head {
  max-width: 768px;
  margin: 0 auto 56px;
  text-align: center;
}
.sv-eco__head .pg-eyebrow { margin-bottom: 4px; }
.sv-eco__head .pg-h2 { margin-bottom: 0; }
.sv-eco__rule { margin: 12px auto 16px; }
.sv-eco__lead {
  margin: 0;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--sv-slate-600);
}
.sv-eco__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.sv-eco__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: 1px solid var(--sv-slate-200);
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.sv-eco__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: var(--sv-emerald-50);
  color: var(--pg-green);
}
.sv-eco__icon svg { width: 24px; height: 24px; }
.sv-eco__tag {
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--pg-green);
}
.sv-eco__title {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--pg-navy);
}
.sv-eco__copy {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sv-slate-600);
}
.sv-eco__list {
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--sv-slate-100);
  font-size: 12px;
  line-height: 16px;
  color: var(--sv-slate-500);
}
.sv-eco__list li { display: flex; align-items: flex-start; gap: 8px; }
.sv-eco__list li + li { margin-top: 8px; }
.sv-eco__list li::before {
  content: "\2713";
  color: var(--pg-green);
  font-weight: 700;
}
.sv-eco__foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--sv-slate-100);
}
.sv-eco__link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--pg-green);
}
.sv-eco__link:hover { color: var(--pg-green-hover); }

/* --- SV6 consultation intake band ----------------------------- */
.sv-intake {
  padding: 48px var(--sx-gutter);
  background-color: var(--sv-deep);
  color: #ffffff;
  scroll-margin-top: 96px;
}
.sv-intake__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sv-intake__lead {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 672px;
}
.sv-intake__icon {
  display: none;
  flex-shrink: 0;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background-color: rgb(255 255 255 / 0.1);
  color: var(--sv-accent);
}
.sv-intake__icon svg { width: 32px; height: 32px; display: block; }
.sv-intake__title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.sv-intake__copy {
  margin: 0;
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sv-slate-300);
}
.sv-intake__action { flex-shrink: 0; }

/* ------------------------------------------------------------
   15. SERVICES — RESPONSIVE (exports' sm / md / lg steps)
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  .sv-intake__icon { display: block; }
}

@media (min-width: 768px) {
  .sv-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-hero__heading { font-size: 36px; line-height: 40px; }
  .sv-eco__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-intake__inner { flex-direction: row; }
  .sv-intake__title { font-size: 24px; line-height: 32px; }
  .sv-intake__copy { font-size: 14px; line-height: 20px; }
}

@media (min-width: 1024px) {
  .sv-hero__heading { font-size: 42px; line-height: 40px; }
  .sv-hero__body { font-size: 16px; line-height: 24px; }
  .sv-hero__inner { padding-top: 80px; padding-bottom: 80px; }
  .sv-hero__media { width: 60%; }
  .sv-hero__fade-edge { display: block; }
  .sv-pillars__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-portfolio__lead { font-size: 16px; line-height: 24px; }
  .sv-portfolio__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sv-card { grid-column: span 5; position: sticky; top: 96px; }
  .sv-rows { grid-column: span 7; }
  .sv-quote { padding-top: 96px; padding-bottom: 96px; }
  .sv-quote__text { font-size: 30px; line-height: 36px; }
}

/* ============================================================
   16. INDUSTRIES — PAGE SCOPE + BODY SECTIONS
   ============================================================
   Reconstruction of the approved Industries export
   (stitch.ui/industries.ui/). The export ships its own palette — navy
   #0b1f3a plus the Tailwind emerald/green ramp — so the shared `.pg-*
   tokens are re-pointed on `.in-page` only. About and Services keep their
   own palettes untouched.

   GEOMETRY SOURCE: the export's own render at the approved reference
   viewport (1280 CSS @1.5x). Every value below is the computed style of the
   corresponding node in that render, not an estimate.
   ============================================================ */

.in-page {
  --pg-navy: #0b1f3a;
  --pg-green: #047857; /* emerald-700 — eyebrow labels */
  --pg-green-hover: #166534;
  --pg-green-light: #ecfdf5;
  --pg-gray-bg: #f8fafc;
  --pg-border: #e2e8f0;

  --in-green: #15803d; /* green-700 — buttons */
  --in-green-hover: #166534;
  --in-emerald-700: #047857;
  --in-emerald-600: #059669;
  --in-emerald-500: #10b981;
  --in-emerald-400: #34d399;
  --in-emerald-100: #d1fae5;
  --in-emerald-50: #ecfdf5;
  --in-slate-50: #f8fafc;
  --in-slate-100: #f1f5f9;
  --in-slate-200: #e2e8f0;
  --in-slate-300: #cbd5e1;
  --in-slate-400: #94a3b8;
  --in-slate-500: #64748b;
  --in-slate-600: #475569;
  --in-slate-700: #334155;
}

/* This export's green rules are emerald-600, one step lighter than its
   emerald-700 labels — the shared `.pg-rule` token would make them match. */
.in-page .pg-rule { background-color: var(--in-emerald-600); }

/* section heading — `font-extrabold` here (About / Services use bold) */
.in-h2 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  color: var(--pg-navy);
}

.in-eyebrow--tight { margin-bottom: 4px; }

/* ------------------------------------------------------------
   16.1 BUTTONS (Industries variants — the shell keeps `.sx-btn`)
   ------------------------------------------------------------ */
.in-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  box-shadow: var(--sx-shadow-sm);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.in-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.in-btn--green { background-color: var(--in-green); color: #ffffff; border: 0; }
.in-btn--green:hover { background-color: var(--in-green-hover); }
.in-btn--outline {
  background-color: #ffffff;
  color: var(--in-slate-700);
  border-color: var(--in-slate-300);
  box-shadow: none;
}
.in-btn--outline:hover { border-color: var(--in-emerald-600); color: var(--in-emerald-700); }
.in-btn--lg { padding: 12px 28px; }

/* ------------------------------------------------------------
   16.2 IN1 — HERO
   ------------------------------------------------------------ */
.in-hero {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid var(--in-slate-200);
}
.in-hero__media { display: none; }
.in-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.in-hero__grid { display: grid; grid-template-columns: 1fr; min-height: 400px; align-items: center; }
.in-hero__copy { padding: 48px 0; }
.in-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid rgba(167, 243, 208, 0.8); /* border-emerald-200/80 */
  border-radius: 9999px;
  background-color: var(--in-emerald-50);
  color: #065f46;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 20px;
}
.in-hero__pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--in-emerald-600);
}
.in-hero__heading {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--pg-navy);
}
.in-hero__tagline {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--in-slate-700);
}
.in-hero__tagline span { color: var(--in-emerald-700); font-weight: 800; }
.in-hero__body {
  max-width: 576px;
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--in-slate-600);
}
.in-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ------------------------------------------------------------
   16.3 IN2 — INDUSTRY POSITIONING
   ------------------------------------------------------------ */
.in-context {
  padding: 56px var(--sx-gutter);
  background-color: var(--in-slate-50);
  border-bottom: 1px solid var(--in-slate-200);
}
.in-context__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.in-context__rule { margin-top: 16px; }
.in-context__body p { font-size: 14px; line-height: 22.75px; color: var(--in-slate-600); }
.in-context__body > * + * { margin-top: 16px; }

/* ------------------------------------------------------------
   16.4 IN3 — PRIMARY INDUSTRY LANDSCAPE
   ------------------------------------------------------------ */
.in-landscape {
  padding: 64px var(--sx-gutter);
  background-color: #ffffff;
  border-bottom: 1px solid var(--in-slate-200);
  scroll-margin-top: 96px; /* sticky header clearance for the #landscape anchor */
}
.in-landscape__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--in-slate-100);
}
.in-landscape__lede {
  max-width: 448px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--in-slate-500);
}
.in-landscape__row1 { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
.in-landscape__row2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.in-landscape__stack { display: flex; flex-direction: column; gap: 24px; }
.in-landscape__stack .in-card { flex: 1 1 0%; }

/* shared sector card */
.in-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--in-slate-200);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--sx-shadow-sm);
  transition: border-color 150ms ease;
}
.in-card:hover { border-color: var(--in-emerald-600); }
.in-card__media { position: relative; width: 100%; overflow: hidden; background-color: var(--in-slate-100); }
.in-card--major .in-card__media { height: 256px; }
.in-card--sm .in-card__media { height: 176px; }
.in-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms ease;
}
.in-card:hover .in-card__media img { transform: scale(1.05); }
.in-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(11, 31, 58, 0.9);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.in-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  color: #ffffff;
  background-image: linear-gradient(to top, rgba(11, 31, 58, 0.9), rgba(11, 31, 58, 0.4), rgba(11, 31, 58, 0));
}
.in-card__caption-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.in-card__caption-title {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 900;
  color: #ffffff;
}
.in-card__body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}
/* stays a plain block so the last paragraph's bottom margin collapses out,
   exactly as it does in the export (this drives the stacked cards' height) */
.in-card__block { display: block; }
.in-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.in-card__num {
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  color: var(--in-emerald-700);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.in-card__tag {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: var(--in-slate-100);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  color: var(--muted-on-light);
}
.in-card__title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pg-navy);
  transition: color 150ms ease;
}
.in-card:hover .in-card__title { color: var(--in-emerald-700); }
.in-card__desc { margin: 0 0 16px; font-size: 12px; line-height: 19.5px; color: var(--in-slate-600); }
.in-card__text { margin: 0 0 24px; font-size: 14px; line-height: 22.75px; color: var(--in-slate-600); }
.in-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--in-slate-100);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--in-slate-500);
}
.in-card__focus { display: flex; align-items: center; gap: 8px; }
.in-card__dot { width: 6px; height: 6px; border-radius: 9999px; background-color: var(--in-emerald-600); }
.in-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--in-emerald-700);
  transition: transform 150ms ease;
}
.in-card--major:hover .in-card__cta { transform: translateX(4px); }
.in-card--stack:hover .in-card__cta { transform: translateX(2px); }
.in-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--in-slate-100);
  font-size: 12px;
  line-height: 16px;
}
.in-card__meta-label { font-weight: 500; color: var(--in-slate-500); }
.in-card__meta--plain { font-weight: 500; color: var(--in-slate-500); }
/* the bottom row's compact cards drop the pill styling and the numeral's
   letter-spacing, and use the tighter `mb-2` head rhythm of that row */
.in-card--sm .in-card__head { margin-bottom: 8px; }
.in-card__tag--plain { padding: 0; background-color: transparent; border-radius: 0; }
.in-card__num--plain { letter-spacing: normal; }

/* ------------------------------------------------------------
   16.5 IN4 — PHOTOGRAPHIC / EDITORIAL BREAK
   ------------------------------------------------------------ */
.in-quote {
  position: relative;
  padding: 64px var(--sx-gutter);
  background-color: var(--pg-navy);
  color: #ffffff;
  overflow: hidden;
}
.in-quote__bg { position: absolute; inset: 0; opacity: 0.2; mix-blend-mode: luminosity; }
.in-quote__bg img { width: 100%; height: 100%; object-fit: cover; }
.in-quote__inner { position: relative; z-index: 10; }
.in-quote__copy { max-width: 768px; }
.in-quote__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--in-emerald-400);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.in-quote__text { margin: 0 0 24px; font-size: 24px; line-height: 32px; font-weight: 800; color: #ffffff; }
.in-quote__sig { display: flex; align-items: center; gap: 12px; }
.in-quote__bar { width: 40px; height: 2px; background-color: var(--in-emerald-500); }
.in-quote__name {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--in-slate-300);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ------------------------------------------------------------
   16.6 IN5 — CROSS-SECTOR CAPABILITIES
   ------------------------------------------------------------ */
.in-capabilities {
  padding: 64px var(--sx-gutter);
  background-color: var(--in-slate-50);
  border-bottom: 1px solid var(--in-slate-200);
}
.in-capabilities__head { max-width: 672px; margin: 0 auto 48px; text-align: center; }
.in-capabilities__rule { margin: 12px auto 16px; }
.in-capabilities__lede { margin: 0; font-size: 12px; line-height: 16px; color: var(--in-slate-600); }
.in-capabilities__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.in-pillar {
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid var(--in-slate-200);
  border-radius: 4px;
  box-shadow: var(--sx-shadow-sm);
  transition: border-color 150ms ease;
}
.in-pillar:hover { border-color: var(--in-emerald-600); }
.in-pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border: 1px solid var(--in-emerald-100);
  border-radius: 6px;
  background-color: var(--in-emerald-50);
  color: var(--in-emerald-700);
}
.in-pillar__icon svg { width: 24px; height: 24px; }
.in-pillar__num {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  color: var(--muted-on-light);
}
.in-pillar__title { margin: 0 0 8px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--pg-navy); }
.in-pillar__copy { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--in-slate-600); }

/* ------------------------------------------------------------
   16.7 IN6 — ADVISORY LIFECYCLE PIPELINE
   ------------------------------------------------------------ */
.in-adapt {
  padding: 64px var(--sx-gutter);
  background-color: #ffffff;
  border-bottom: 1px solid var(--in-slate-200);
  scroll-margin-top: 96px; /* sticky header clearance for the #adaptation anchor */
}
.in-adapt__head { max-width: 768px; margin-bottom: 48px; }
.in-adapt__title { margin-bottom: 12px; }
.in-adapt__lede { margin: 0; font-size: 14px; line-height: 22.75px; color: var(--in-slate-600); }
.in-adapt__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.in-step {
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid var(--in-slate-200);
  border-radius: 4px;
  transition: border-color 150ms ease;
}
.in-step:hover { border-color: var(--in-emerald-500); }
.in-step__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.in-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: var(--in-emerald-700);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}
.in-step__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  color: var(--pg-navy);
  text-transform: uppercase;
}
.in-step__title { margin: 0 0 6px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--pg-navy); }
.in-step__copy { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--in-slate-600); }

/* ------------------------------------------------------------
   16.8 IN7 — SERVICES BRIDGE
   ------------------------------------------------------------ */
.in-bridge {
  padding: 48px var(--sx-gutter);
  background-color: var(--in-slate-50);
  border-bottom: 1px solid var(--in-slate-200);
}
.in-bridge__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  background-color: #ffffff;
  border: 1px solid var(--in-slate-200);
  border-radius: 4px;
  box-shadow: var(--sx-shadow-sm);
}
.in-bridge__copy { max-width: 576px; }
.in-bridge__title { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 800; color: var(--pg-navy); }
.in-bridge__lede { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--in-slate-600); }
.in-bridge__action { flex-shrink: 0; }

/* ------------------------------------------------------------
   16.9 IN8 — CLOSING CONSULTATION CTA
   ------------------------------------------------------------ */
.in-cta {
  padding: 48px var(--sx-gutter);
  background-color: var(--pg-navy);
  color: #ffffff;
}
.in-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.in-cta__lead { display: flex; align-items: center; gap: 20px; }
.in-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--in-emerald-400);
}
.in-cta__icon svg { width: 28px; height: 28px; }
.in-cta__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 900; color: #ffffff; }
.in-cta__lede { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--in-slate-300); }
.in-cta__action { flex-shrink: 0; }

/* ------------------------------------------------------------
   16.10 INDUSTRIES — RESPONSIVE (exports' sm / md / lg steps)
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  .in-h2 { font-size: 30px; line-height: 36px; }
  .in-hero__heading { font-size: 36px; line-height: 40px; }
  .in-hero__tagline { font-size: 18px; line-height: 28px; }
  .in-hero__body { font-size: 16px; line-height: 24px; }
  .in-context__body p { font-size: 16px; line-height: 24px; }
  .in-landscape__lede { font-size: 14px; line-height: 20px; }
  .in-card--major .in-card__media { height: 288px; }
  .in-card--major .in-card__body { padding: 28px; }
  .in-card__title { font-size: 18px; line-height: 28px; }
  .in-card__desc { font-size: 14px; line-height: 20px; }
  .in-quote { padding-top: 80px; padding-bottom: 80px; }
  .in-quote__text { font-size: 30px; line-height: 36px; }
  .in-capabilities__lede { font-size: 14px; line-height: 20px; }
  .in-capabilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-pillar__copy { font-size: 14px; line-height: 20px; }
  .in-adapt__lede { font-size: 16px; line-height: 24px; }
  .in-bridge__panel { padding: 40px; }
  .in-bridge__title { font-size: 24px; line-height: 32px; }
  .in-bridge__lede { font-size: 14px; line-height: 20px; }
  .in-cta__title { font-size: 24px; line-height: 32px; }
  .in-cta__lede { font-size: 14px; line-height: 20px; }
}

@media (min-width: 768px) {
  .in-landscape__head { flex-direction: row; align-items: flex-end; }
  .in-landscape__lede { margin-top: 0; }
  .in-landscape__row2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-adapt__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .in-bridge__panel { flex-direction: row; }
  .in-cta__inner { flex-direction: row; }
}

@media (min-width: 1024px) {
  .in-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: 440px; }
  .in-hero__heading { font-size: 42px; line-height: 40px; }
  .in-hero__copy { grid-column: span 7; position: relative; z-index: 10; padding: 64px 40px 64px 0; }
  .in-capabilities__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .in-hero__media { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 45%; }
  .in-hero__fade {
    position: absolute;
    inset: 0 auto 0 0;
    width: 144px;
    background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  }
  .in-context__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .in-context__intro { grid-column: span 5; }
  .in-context__body { grid-column: span 7; }
  .in-landscape__row1 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .in-card--major { grid-column: span 7; }
  .in-landscape__stack { grid-column: span 5; }
}

/* ============================================================
   8. MEET THE FOUNDER — reconstruction of stitch.ui/meet the founder.ui
   ------------------------------------------------------------
   The approved export for this page carries its own container metric:
   `max-w-7xl mx-auto px-6` on every section wrapper (1232px content at a
   1280px viewport) instead of the 5%-gutter used by About/Services/Industries.
   That metric is reproduced exactly here so each page matches its own approved
   reference. Base rules are mobile; `md`/`lg` blocks restore the export's
   responsive steps (the export is desktop-optimised, so base = single column).
   ============================================================ */
:root {
  --fo-navy: #0d1b2a;
  --fo-navy-alt: #0d1b2a;
  --fo-navy-deep: #0b1726;
  --fo-green: #15803d;
  --fo-green-hover: #166534;
  --fo-emerald-400: #34d399;
  --fo-emerald-700: #047857;
  --fo-emerald-800: #065f46;
  --fo-gray-bg: #f8fafc;
  --fo-gray-100: #f1f5f9;
  --fo-gray-200: #e2e8f0;
  --fo-gray-200-text: #e5e7eb;
  --fo-slate-300: #cbd5e1;
  --fo-slate-400: #94a3b8;
  --fo-slate-500: #64748b;
  --fo-slate-600: #475569;
  --fo-slate-700: #334155;
  --fo-slate-800: #1e293b;
}

.fo-section { padding-block: 64px; background-color: #ffffff; }
.fo-section--pale { background-color: var(--fo-gray-bg); }
.fo-section--navy { background-color: var(--fo-navy-alt); color: #ffffff; }
.fo-section--tight { padding-block: 56px; }
.fo-section--ruled-100 { border-bottom: 1px solid var(--fo-gray-100); }
.fo-section--ruled-200 { border-bottom: 1px solid rgba(226, 232, 240, 0.8); }
.fo-section--ruled-top-dark { border-top: 1px solid var(--fo-slate-800); }

/* container: max-w-7xl (1280) + px-6 (24) */
.fo-wrap {
  width: 100%;
  max-width: var(--site-container);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* typography primitives (line-height = 1.5x for un-styled `text-[Npx]` spans,
   exactly as the export's Tailwind preflight resolves them) */
.fo-eyebrow {
  display: block;
  color: var(--fo-emerald-700);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.fo-eyebrow--sm { font-size: 11.5px; line-height: 17.25px; letter-spacing: 1.15px; }
.fo-eyebrow--dark { color: var(--fo-emerald-400); }
.fo-h2 {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--fo-navy);
  letter-spacing: -0.75px;
}
.fo-h3 { margin: 0; font-size: 17px; line-height: 25.5px; font-weight: 700; color: var(--fo-navy); }
.fo-rule { width: 48px; height: 4px; background-color: var(--fo-emerald-700); }
.fo-p { margin: 0; font-size: 15px; line-height: 24.375px; color: var(--fo-slate-600); }
.fo-p--sm { font-size: 14px; line-height: 22.75px; }
.fo-p--dark { color: var(--fo-slate-300); }

/* buttons */
.fo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 700;
  padding: 12px 24px;
  border: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.fo-btn svg { width: 16px; height: 16px; flex-shrink: 0; margin-left: 8px; }
.fo-btn--green { background-color: var(--fo-green); color: #ffffff; }
.fo-btn--green:hover { background-color: var(--fo-green-hover); }
.fo-btn--ghost { background-color: #ffffff; color: var(--fo-navy); border: 1px solid var(--fo-slate-300); }
.fo-btn--ghost:hover { background-color: var(--fo-gray-bg); border-color: var(--fo-slate-400); }
.fo-btn--navy { background-color: var(--fo-navy); color: #ffffff; }
.fo-btn--navy:hover { background-color: var(--fo-green); }
.fo-btn--sm { padding: 10px 20px; font-size: 13.5px; line-height: 20.25px; }

/* ------------------------------------------------------------
   8.1 F1 — FOUNDER HERO
   ------------------------------------------------------------ */
.fo-hero {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid var(--fo-gray-100);
}
.fo-hero__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.fo-hero__copy { display: flex; flex-direction: column; justify-content: center; }
.fo-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: #ecfdf5;
  border: 1px solid rgba(167, 243, 208, 0.7);
  color: #065f46;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.fo-hero__dot { width: 6px; height: 6px; border-radius: 9999px; background-color: #059669; flex-shrink: 0; }
.fo-hero__name {
  margin: 0 0 8px;
  font-size: 44px;
  line-height: 40px;
  font-weight: 700;
  color: var(--fo-navy);
  letter-spacing: -1.1px;
}
.fo-hero__name span { font-weight: 400; color: var(--fo-slate-600); }
.fo-hero__role {
  margin: 0 0 24px;
  font-size: 19px;
  line-height: 28.5px;
  font-weight: 600;
  color: #065f46;
}
.fo-hero__lede { margin: 0 0 24px; font-size: 17px; line-height: 27.625px; color: var(--fo-slate-600); }
.fo-hero__quote {
  background-color: var(--fo-gray-bg);
  border-left: 4px solid var(--fo-emerald-700);
  border-radius: 0 4px 4px 0;
  padding: 20px;
  margin: 0 0 32px;
}
.fo-hero__quote p {
  margin: 0;
  font-size: 15.5px;
  line-height: 25.1875px;
  font-style: italic;
  font-weight: 500;
  color: var(--fo-navy);
}
.fo-hero__quote span {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 18.75px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.625px;
  color: var(--fo-slate-500);
}
.fo-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fo-hero__portrait-col { display: flex; justify-content: center; }
.fo-hero__portrait { position: relative; width: 100%; max-width: 420px; }
.fo-hero__frame {
  position: absolute;
  inset: -8px;
  border-radius: 16px;
  background-image: linear-gradient(to top right, rgba(209, 250, 229, 0.6), var(--fo-gray-100));
  transform: rotate(-1deg);
}
.fo-hero__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background-color: #ffffff;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.fo-hero__photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.fo-hero__meta { background-color: var(--fo-navy-deep); color: #ffffff; padding: 16px; }
.fo-hero__meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fo-hero__meta-name { font-size: 14px; line-height: 21px; font-weight: 700; letter-spacing: -0.35px; }
.fo-hero__meta-role { font-size: 12px; line-height: 18px; color: var(--fo-emerald-400); }
.fo-hero__badge {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #022c22;
  color: #6ee7b7;
  border: 1px solid rgba(4, 120, 87, 0.5);
}

/* ------------------------------------------------------------
   8.2 F2 — EDITORIAL BIOGRAPHY
   ------------------------------------------------------------ */
.fo-bio__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
.fo-bio__head .fo-eyebrow { margin-bottom: 12px; }
.fo-bio__head .fo-h2 { margin-bottom: 16px; }
.fo-bio__head .fo-rule { margin-bottom: 24px; }
.fo-bio__body { display: flex; flex-direction: column; gap: 20px; font-size: 15.5px; line-height: 25.1875px; color: #334155; }
.fo-bio__body p { margin: 0; }

/* ------------------------------------------------------------
   8.3 F3 — LEADERSHIP PILLARS
   ------------------------------------------------------------ */
.fo-pillars__head { max-width: 768px; margin-bottom: 48px; }
.fo-pillars__head .fo-eyebrow { margin-bottom: 8px; }
.fo-pillars__head .fo-p { margin-top: 8px; font-size: 15px; line-height: 22.5px; }
.fo-pillars__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.fo-pillar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.fo-pillar__icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: var(--fo-emerald-800);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.fo-pillar__icon svg { width: 20px; height: 20px; }
.fo-pillar__num { font-size: 12px; line-height: 18px; font-weight: 700; color: var(--fo-emerald-800); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.fo-pillar h3 { margin: 0 0 12px; font-size: 18px; line-height: 27px; font-weight: 700; color: var(--fo-navy); }
.fo-pillar p { margin: 0; font-size: 14px; line-height: 22.75px; color: var(--fo-slate-600); }
.fo-pillar__foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--fo-gray-100);
  font-size: 12.5px;
  line-height: 18.75px;
  font-weight: 600;
  color: var(--fo-slate-500);
}

/* ------------------------------------------------------------
   8.4 F4 — PHOTOGRAPHIC STATEMENT BAND
   ------------------------------------------------------------ */
.fo-band {
  position: relative;
  background-color: var(--fo-navy-deep);
  color: #ffffff;
  overflow: hidden;
}
.fo-band__media { position: absolute; inset: 0; z-index: 0; opacity: 0.2; mix-blend-mode: luminosity; }
.fo-band__media img { width: 100%; height: 100%; object-fit: cover; }
.fo-band__inner { position: relative; z-index: 10; max-width: 1024px; margin-inline: auto; padding-inline: 24px; text-align: center; }
/* the export's band eyebrow carries `mb-4` (16px), unlike the page eyebrows */
.fo-band__inner .fo-eyebrow { margin-bottom: 16px; }
.fo-band__quote {
  margin: 0 auto 24px;
  max-width: 896px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.9px;
  color: #ffffff;
}
.fo-band__attrib { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--fo-slate-300); }
.fo-band__attrib span:first-child,
.fo-band__attrib span:last-child { width: 32px; height: 1px; background-color: #10b981; }

/* ------------------------------------------------------------
   8.5 F5 — AREAS OF PROFESSIONAL FOCUS
   ------------------------------------------------------------ */
.fo-focus__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--fo-gray-200);
}
.fo-focus__head .fo-eyebrow { margin-bottom: 8px; }
.fo-focus__aside { margin: 0; max-width: 448px; font-size: 14px; line-height: 21px; color: var(--fo-slate-500); }
.fo-focus__grid { display: grid; grid-template-columns: 1fr; gap: 32px 48px; }
.fo-focus__item { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--fo-gray-100); }
.fo-focus__num { flex-shrink: 0; padding-top: 4px; font-size: 14px; line-height: 21px; font-weight: 700; color: var(--fo-emerald-800); }
.fo-focus__item h3 { margin: 0 0 6px; font-size: 17px; line-height: 25.5px; font-weight: 700; color: var(--fo-navy); }
.fo-focus__item p { margin: 0; font-size: 14px; line-height: 22.75px; color: var(--fo-slate-600); }

/* ------------------------------------------------------------
   8.6 F6 — ORGANIZATIONAL ALIGNMENT (navy split)
   ------------------------------------------------------------ */
.fo-align__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.fo-align__eyebrow { margin-bottom: 12px; }
.fo-align__heading { margin: 0 0 24px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.75px; color: #ffffff; }
.fo-align__body { margin: 0 0 24px; font-size: 15.5px; line-height: 25.1875px; color: var(--fo-slate-300); }
.fo-align__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 16px; border-top: 1px solid var(--fo-slate-800); }
.fo-align__value { font-size: 30px; line-height: 36px; font-weight: 700; margin-bottom: 4px; }
.fo-align__value--green { color: var(--fo-emerald-400); }
.fo-align__label { font-size: 13px; line-height: 19.5px; font-weight: 500; color: var(--fo-slate-300); }
.fo-align__card {
  background-color: #132338;
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.fo-align__card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 18px; line-height: 27px; font-weight: 700; color: #ffffff; }
.fo-align__card h3 svg { width: 20px; height: 20px; color: var(--fo-emerald-400); flex-shrink: 0; }
.fo-align__card > p { margin: 0 0 24px; font-size: 14px; line-height: 22.75px; color: var(--fo-slate-300); }
.fo-align__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 21px; color: var(--fo-gray-200-text); }
.fo-align__list li { display: flex; align-items: center; gap: 10px; }
.fo-align__list li::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background-color: var(--fo-emerald-400); flex-shrink: 0; }
.fo-align__actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--fo-slate-700); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ------------------------------------------------------------
   8.7 F7 — INSIGHTS BRIDGE
   ------------------------------------------------------------ */
.fo-bridge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  border: 1px solid var(--fo-gray-200);
  border-radius: 12px;
  background-image: linear-gradient(to right, var(--fo-gray-bg), rgba(236, 253, 245, 0.4));
}
.fo-bridge__copy { max-width: 672px; }
.fo-bridge__copy .fo-eyebrow { margin-bottom: 8px; }
.fo-bridge__copy .fo-h2 { margin-bottom: 12px; }
.fo-bridge__copy p { font-size: 15px; line-height: 24.375px; }
.fo-bridge__action { flex-shrink: 0; }

/* ------------------------------------------------------------
   8.8 F8 — CONSULTATION CTA STRIP
   ------------------------------------------------------------ */
.fo-cta {
  background-color: var(--fo-navy-deep);
  color: #ffffff;
  padding-block: 56px;
  border-top: 1px solid var(--fo-slate-800);
}
.fo-cta__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; }
.fo-cta__group { display: flex; align-items: center; gap: 20px; }
.fo-cta__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background-color: rgba(2, 44, 34, 0.6);
  border: 1px solid rgba(4, 120, 87, 0.5);
  color: var(--fo-emerald-400);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fo-cta__icon svg { width: 28px; height: 28px; }
.fo-cta__title { margin: 0 0 4px; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.6px; color: #ffffff; }
.fo-cta__body { margin: 0; font-size: 14px; line-height: 21px; color: var(--fo-slate-400); }
.fo-cta__action { flex-shrink: 0; }

@media (min-width: 768px) {
  .fo-pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fo-focus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-focus__head { flex-direction: row; align-items: flex-end; gap: 24px; }
  .fo-focus__aside { text-align: right; }
  .fo-bridge { flex-direction: row; align-items: center; padding: 48px; }
  .fo-cta__inner { flex-direction: row; }
}

@media (min-width: 1024px) {
  .fo-section { padding-block: 80px; }
  .fo-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px; }
  .fo-hero__copy { grid-column: span 7; }
  .fo-hero__portrait-col { grid-column: span 5; justify-content: flex-end; }
  .fo-bio__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fo-bio__head { grid-column: span 5; }
  .fo-bio__body { grid-column: span 7; }
  .fo-align__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fo-align__col { grid-column: span 6; }
  .fo-align__heading { font-size: 36px; line-height: 40px; letter-spacing: -0.9px; }
}

/* The export's bridge section is `py-16` (64px) at every width, and its
   photographic band is `py-20` (80px) at every width — neither carries a
   responsive `sm:py-20` step like the other sections. */
.fo-section--always-tight { padding-block: 64px; }
.fo-section--always-lg { padding-block: 80px; }

/* ============================================================
   9. INSIGHTS & RESOURCES — reconstruction of
      stitch.ui/insights & resources.ui (I1–I9)
   ------------------------------------------------------------
   This export carries its own brand tokens (#0A192F / #107A48) and its own
   container metric (`max-w-7xl mx-auto px-6`, 1232px content at 1280px).
   Every section is `py-16` at all widths except the bridge (py-14) and the
   consultation strip (py-10). Layout uses Tailwind's `space-y-*` mechanism
   (margin-based, block containers) — reproduced verbatim because it affects
   baseline placement of the inline pills and badges.
   ============================================================ */
:root {
  --ir-navy: #0a192f;
  --ir-navy-hover: #0c633a;
  --ir-green: #107a48;
  --ir-slate-50: #f8fafc;
  --ir-slate-100: #f1f5f9;
  --ir-slate-200: #e2e8f0;
  --ir-slate-300: #cbd5e1;
  --ir-slate-400: #94a3b8;
  --ir-slate-500: #64748b;
  --ir-slate-600: #475569;
  --ir-slate-700: #334155;
  --ir-slate-800: #1e293b;
  --ir-slate-900: #0f172a;
  --ir-emerald-50: #ecfdf5;
  --ir-emerald-100: #d1fae5;
  --ir-emerald-200: #a7f3d0;
  --ir-emerald-400: #34d399;
}

.ir-section { padding-block: 64px; background-color: #ffffff; }
.ir-section--pale { background-color: var(--ir-slate-50); }
.ir-section--navy { background-color: var(--ir-navy); color: #ffffff; }
.ir-section--tight { padding-block: 56px; }
.ir-section--strip { padding-block: 40px; }
.ir-section--ruled { border-bottom: 1px solid var(--ir-slate-200); }
.ir-section--ruled-dark { border-bottom: 1px solid var(--ir-slate-800); }

.ir-wrap { width: 100%; max-width: var(--site-container); margin-inline: auto; padding-inline: var(--site-gutter); }

/* space-y-N equivalents (block containers, margin-based) */
[class].ir-stack-6 > * + * { margin-top: 24px; }
[class].ir-stack-3 > * + * { margin-top: 12px; }

/* The insight exports leave these labels as *inline* spans (no `block`), so their
   line box is the parent's 24px strut — that 8px/line difference is intentional
   and part of the approved spacing, so it is reproduced rather than normalised. */
.ir-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ir-green);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ir-h2 { margin: 4px 0 0; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ir-navy); }
.ir-h2--flush { margin-top: 0; }
.ir-lede { margin: 0; font-size: 14px; line-height: 20px; color: var(--ir-slate-500); }

.ir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  padding: 12px 24px;
  border: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ir-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ir-btn--green { background-color: var(--ir-green); color: #ffffff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.ir-btn--green:hover { background-color: var(--ir-navy-hover); }
.ir-btn--outline { padding: 12px 20px; background-color: #ffffff; color: var(--ir-slate-700); border: 1px solid var(--ir-slate-300); }
.ir-btn--outline:hover { border-color: var(--ir-slate-400); }
.ir-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ir-green); }
.ir-link:hover { color: var(--ir-navy-hover); }
.ir-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.ir-link--sm { gap: 4px; font-size: 12px; line-height: 16px; }
.ir-link--sm svg { width: 14px; height: 14px; }
.ir-link--lead { gap: 4px; font-size: 14px; line-height: 20px; }
.ir-link--lead svg { width: 14px; height: 14px; }

/* pills / badges */
.ir-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: var(--ir-emerald-50);
  border: 1px solid var(--ir-emerald-200);
  color: var(--ir-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ir-pill--dark {
  background-color: rgba(2, 44, 34, 0.6);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--ir-emerald-400);
}
.ir-pill__dot { width: 6px; height: 6px; border-radius: 9999px; background-color: var(--ir-green); flex-shrink: 0; }
.ir-pill--dark .ir-pill__dot { background-color: var(--ir-emerald-400); }
.ir-badge-note {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--ir-slate-500);
  background-color: #ffffff;
  border: 1px solid var(--ir-slate-200);
  padding: 6px 12px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   9.1 I1 — INSIGHTS HERO
   ------------------------------------------------------------ */
.ir-hero { background-color: #ffffff; padding-top: 48px; padding-bottom: 64px; overflow: hidden; border-bottom: 1px solid var(--ir-slate-200); }
.ir-hero__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.ir-hero__title { margin: 0; font-size: 48px; line-height: 48px; font-weight: 800; color: var(--ir-navy); letter-spacing: -1.2px; }
.ir-hero__title span { color: var(--ir-green); }
.ir-hero__lede { margin: 0; font-size: 18px; line-height: 29.25px; color: var(--ir-slate-600); }
.ir-hero__actions { padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ir-hero__actions .ir-btn--outline svg { color: var(--ir-slate-400); }
.ir-hero__trust {
  padding-top: 24px;
  border-top: 1px solid var(--ir-slate-100);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ir-slate-500);
}
.ir-hero__trust-item { display: flex; align-items: center; gap: 8px; }
.ir-hero__trust-item svg { width: 16px; height: 16px; color: var(--ir-green); flex-shrink: 0; }
.ir-hero__media { position: relative; }
.ir-hero__media-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ir-slate-200);
  background-color: var(--ir-slate-900);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ir-hero__media-card img { width: 100%; height: 100%; object-fit: cover; }
.ir-hero__scrim { position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(10, 25, 47, 0.8), rgba(10, 25, 47, 0) 50%, rgba(10, 25, 47, 0)); }
.ir-hero__caption { position: absolute; bottom: 16px; left: 16px; right: 16px; color: #ffffff; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ir-hero__caption-cat { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ir-emerald-400); text-transform: uppercase; letter-spacing: 0.6px; }
.ir-hero__caption-text { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ir-slate-200); }
.ir-hero__caption-badge {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--ir-slate-300);
  background-color: rgba(10, 25, 47, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--ir-slate-700);
}

/* ------------------------------------------------------------
   9.2 section headers shared by I2 / I3 / I6
   ------------------------------------------------------------ */
.ir-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.ir-head--wide { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
.ir-head__note { margin: 0; max-width: 448px; font-size: 14px; line-height: 20px; color: var(--ir-slate-500); }
.ir-head--center { display: block; text-align: center; max-width: 672px; margin-inline: auto; margin-bottom: 48px; }
.ir-head--center .ir-head__note { margin-top: 12px; max-width: none; color: var(--ir-slate-600); }

/* ------------------------------------------------------------
   9.3 I2 — FEATURED INSIGHT
   ------------------------------------------------------------ */
.ir-feature { display: grid; grid-template-columns: 1fr; background-color: #ffffff; border: 1px solid var(--ir-slate-200); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
/* `overflow: hidden` clips the photograph's scroll-entry settle (see section 15
   of assets/css/stitch-homepage.css). The frame is the only box that should
   define this region's size, and everything inside it — the scrim, the tag — is
   already inset to it, so nothing is clipped that was not already inside. */
.ir-feature__media { position: relative; background-color: var(--ir-slate-900); min-height: 340px; overflow: hidden; }
.ir-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.ir-feature__scrim { position: absolute; inset: 0; background-image: linear-gradient(to top right, rgba(10, 25, 47, 0.6), rgba(10, 25, 47, 0) 50%, rgba(10, 25, 47, 0)); }
.ir-feature__tag {
  display: inline;
  background-color: var(--ir-green);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ir-tagwrap { position: absolute; top: 16px; left: 16px; }
.ir-feature__body { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
[class].ir-feature__inner > * + * { margin-top: 16px; }
.ir-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; color: var(--ir-slate-500); font-weight: 500; }
.ir-meta--tight { gap: 8px; font-weight: 400; }
.ir-meta span:first-child { color: var(--ir-green); font-weight: 700; }
.ir-h3 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ir-navy); }
.ir-feature__text { margin: 0; font-size: 14px; line-height: 22.75px; color: var(--ir-slate-600); }
.ir-themes { background-color: var(--ir-slate-50); border: 1px solid var(--ir-slate-100); border-radius: 4px; padding: 16px; font-size: 12px; line-height: 16px; color: var(--ir-slate-600); }
[class].ir-themes > * + * { margin-top: 6px; }
.ir-themes__title { font-weight: 600; color: var(--ir-slate-800); }
.ir-themes__list { margin: 0; padding-left: 0; list-style: disc inside; }
.ir-themes__list li + li { margin-top: 4px; }
.ir-foot {
  padding-top: 16px;
  margin-top: 24px;
  border-top: 1px solid var(--ir-slate-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ir-slate-500);
}

/* ------------------------------------------------------------
   9.4 I3 — LATEST INSIGHTS (asymmetric grid)
   ------------------------------------------------------------ */
.ir-grid12 { display: grid; grid-template-columns: 1fr; gap: 32px; }
.ir-card { background-color: #ffffff; border: 1px solid var(--ir-slate-200); border-radius: 8px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); display: flex; flex-direction: column; overflow: hidden; }
.ir-card__media { position: relative; aspect-ratio: 16 / 9; background-color: var(--ir-slate-800); overflow: hidden; }
.ir-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ir-card__tag {
  display: inline;
  background-color: rgba(10, 25, 47, 0.9);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
}
.ir-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
[class].ir-card__body > * + * { margin-top: 16px; }
[class].ir-card__inner > * + * { margin-top: 8px; }
.ir-card__title { margin: 0; font-size: 20px; line-height: 27.5px; font-weight: 700; color: var(--ir-navy); }
.ir-card__text { margin: 0; font-size: 14px; line-height: 22.75px; color: var(--ir-slate-600); }
.ir-stackcol { display: flex; flex-direction: column; gap: 24px; }
.ir-mini { background-color: #ffffff; border: 1px solid var(--ir-slate-200); border-radius: 8px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); padding: 24px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
[class].ir-mini > * + * { margin-top: 24px; }
[class].ir-mini__inner > * + * { margin-top: 8px; }
.ir-mini__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; }
.ir-mini__cat { font-weight: 700; color: var(--ir-green); text-transform: uppercase; letter-spacing: 0.6px; }
.ir-mini__idx { color: var(--ir-slate-500); }
.ir-mini__title { margin: 0; font-size: 18px; line-height: 24.75px; font-weight: 700; color: var(--ir-navy); }
.ir-mini__text { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--ir-slate-600); }
.ir-foot--tight { margin-top: 0; }

/* ------------------------------------------------------------
   9.5 I4 — PRACTICE TAXONOMY
   ------------------------------------------------------------ */
.ir-tax { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ir-tax__card { background-color: #ffffff; border: 1px solid var(--ir-slate-200); border-radius: 4px; padding: 24px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.ir-tax__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ir-green); }
.ir-tax__row svg { width: 16px; height: 16px; flex-shrink: 0; }
.ir-tax__card h3 { margin: 0 0 8px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ir-navy); }
.ir-tax__card p { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--ir-slate-500); }

/* ------------------------------------------------------------
   9.6 I5 — FEATURED RESOURCE BAND
   ------------------------------------------------------------ */
.ir-mono { position: relative; overflow: hidden; }
.ir-mono__texture { position: absolute; inset: 0; opacity: 0.1; background-image: radial-gradient(#107a48 1px, transparent 1px); background-size: 16px 16px; }
.ir-mono__grid { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.ir-mono__visual { display: flex; justify-content: center; }
.ir-mono__doc {
  width: 100%;
  max-width: 384px;
  border-radius: 8px;
  padding: 32px;
  border: 1px solid var(--ir-slate-700);
  background-image: linear-gradient(to bottom right, #0f243e, #060f1e);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  position: relative;
}
.ir-mono__doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(51, 65, 85, 0.6); padding-bottom: 16px; margin-bottom: 24px; font-size: 12px; line-height: 16px; }
.ir-mono__doc-head span:first-child { font-weight: 700; color: var(--ir-emerald-400); text-transform: uppercase; letter-spacing: 0.6px; }
.ir-mono__doc-head span:last-child { color: var(--ir-slate-400); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.ir-mono__doc-body { margin-block: 32px; }
[class].ir-mono__doc-body > * + * { margin-top: 16px; }
.ir-mono__rule { width: 48px; height: 4px; background-color: var(--ir-green); }
.ir-mono__doc-title { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; color: #ffffff; }
.ir-mono__doc-text { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--ir-slate-300); }
.ir-mono__doc-foot { padding-top: 16px; border-top: 1px solid rgba(51, 65, 85, 0.6); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; color: var(--ir-slate-400); }
.ir-mono__doc-foot span:last-child { color: var(--ir-emerald-400); font-weight: 600; }
[class].ir-mono__copy > * + * { margin-top: 24px; }
.ir-h2--xl { margin: 0; font-size: 36px; line-height: 40px; font-weight: 800; color: #ffffff; letter-spacing: -0.9px; }
.ir-h2--xl span { color: var(--ir-emerald-400); }
.ir-mono__body { margin: 0; font-size: 16px; line-height: 24px; color: var(--ir-slate-300); }
.ir-mono__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: 8px; font-size: 12px; line-height: 16px; color: var(--ir-slate-300); }
.ir-mono__point { display: flex; align-items: flex-start; gap: 8px; }
.ir-mono__point svg { width: 16px; height: 16px; color: var(--ir-emerald-400); flex-shrink: 0; margin-top: 2px; }
.ir-mono__actions { padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ir-mono__note { font-size: 12px; line-height: 16px; color: var(--ir-slate-400); }

/* ------------------------------------------------------------
   9.7 I6 — RESEARCH & PRACTICE RESOURCES
   ------------------------------------------------------------ */
.ir-lib { border-top: 1px solid var(--ir-slate-200); border-bottom: 1px solid var(--ir-slate-200); }
.ir-lib__row { padding: 24px 16px; margin-inline: -16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; border-radius: 4px; transition: background-color 0.15s ease; }
.ir-lib__row + .ir-lib__row { border-top: 1px solid var(--ir-slate-200); }
.ir-lib__row:hover { background-color: var(--ir-slate-50); }
.ir-lib__lead { max-width: 768px; }
[class].ir-lib__lead > * + * { margin-top: 6px; }
.ir-lib__meta { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; }
.ir-lib__tag { background-color: var(--ir-emerald-100); color: var(--ir-green); font-weight: 700; padding: 2px 10px; border-radius: 4px; }
.ir-lib__area { color: var(--ir-slate-500); }
.ir-lib__title { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ir-navy); }
.ir-lib__text { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--ir-slate-600); }
.ir-lib__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.ir-lib__note { display: none; font-size: 12px; line-height: 16px; color: var(--muted-on-light); }
.ir-lib__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ir-green); background-color: var(--ir-emerald-50); padding: 8px 16px; border-radius: 4px; }
.ir-lib__cta:hover { background-color: var(--ir-emerald-100); }
.ir-lib__cta svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ------------------------------------------------------------
   9.8 I7 — FOUNDATIONAL PHILOSOPHY BAND
   ------------------------------------------------------------ */
.ir-philo__inner { max-width: 896px; margin-inline: auto; padding-inline: 24px; text-align: center; padding-block: 64px; }
[class].ir-philo__inner > * + * { margin-top: 24px; }
.ir-philo__quote { margin: 0; font-size: 36px; line-height: 40px; font-weight: 700; color: #ffffff; letter-spacing: -0.9px; }
.ir-philo__rule { width: 64px; height: 2px; background-color: var(--ir-green); margin-inline: auto; }
.ir-philo__text { margin: 0 auto; max-width: 672px; font-size: 16px; line-height: 24px; color: var(--ir-slate-300); }
.ir-philo__trust { padding-top: 16px; display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 12px; line-height: 16px; color: var(--ir-slate-400); }
.ir-philo__trust span { display: flex; align-items: center; gap: 6px; }
.ir-philo__trust svg { width: 16px; height: 16px; color: var(--ir-emerald-400); flex-shrink: 0; }

/* ------------------------------------------------------------
   9.9 I8 — SERVICES & FOUNDER BRIDGE
   ------------------------------------------------------------ */
.ir-apply {
  background-color: #ffffff;
  border: 1px solid var(--ir-slate-200);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.ir-apply__copy { max-width: 672px; }
[class].ir-apply__copy > * + * { margin-top: 12px; }
.ir-apply__copy h2 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ir-navy); }
.ir-apply__copy p { margin: 0; font-size: 14px; line-height: 22.75px; color: var(--ir-slate-600); }
.ir-apply__actions { display: flex; flex-direction: column; align-items: stretch; gap: 16px; flex-shrink: 0; }
.ir-apply__actions .ir-btn--outline { padding: 12px 20px; }

/* ------------------------------------------------------------
   9.10 I9 — CONSULTATION CTA STRIP
   ------------------------------------------------------------ */
.ir-cta__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; }
.ir-cta__group { display: flex; align-items: center; gap: 16px; }
.ir-cta__icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: rgba(16, 122, 72, 0.2);
  border: 1px solid rgba(16, 122, 72, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ir-cta__icon svg { width: 24px; height: 24px; color: var(--ir-emerald-400); }
.ir-cta__title { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; color: #ffffff; }
.ir-cta__body { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--ir-slate-400); }
.ir-cta__action { flex-shrink: 0; }

@media (min-width: 640px) {
  .ir-apply { flex-direction: row; padding: 40px; }
}

@media (min-width: 768px) {
  .ir-head--wide { flex-direction: row; align-items: flex-end; gap: 24px; }
  .ir-apply__actions { flex-direction: row; align-items: center; }
  .ir-cta__inner { flex-direction: row; }
  .ir-tax { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-lib__note { display: inline-block; }
}

@media (min-width: 1024px) {
  .ir-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .ir-hero__copy { grid-column: span 6; }
  .ir-hero__media { grid-column: span 6; }
  .ir-feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ir-feature__media { grid-column: span 7; min-height: 420px; }
  .ir-feature__body { grid-column: span 5; padding: 40px; }
  .ir-grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ir-card--lead { grid-column: span 7; }
  .ir-stackcol--side { grid-column: span 5; }
  .ir-mono__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; }
  .ir-mono__visual { grid-column: span 5; }
  .ir-mono__copy { grid-column: span 7; }
  .ir-lib__row { flex-direction: row; align-items: center; }
  .ir-tax { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------
   10. CONTACT / LET'S CONNECT — reconstruction of the approved
       export saved as stitch.ui/"lets connect.ui" (2026-09-16).
       This is the Contact / consultation destination. Every value
       below was measured from that export's own render.
   ------------------------------------------------------------ */
:root {
  --ct-navy: #0a192f;
  --ct-green: #1b7a43;
  --ct-green-hover: #155d33;
  --ct-emerald-50: #ecfdf5;
  --ct-emerald-100: #d1fae5;
  --ct-emerald-200: #a7f3d0;
  --ct-emerald-400: #34d399;
  --ct-slate-50: #f8fafc;
  --ct-slate-100: #f1f5f9;
  --ct-slate-200: #e2e8f0;
  --ct-slate-300: #cbd5e1;
  --ct-slate-400: #94a3b8;
  --ct-slate-500: #64748b;
  --ct-slate-600: #475569;
  --ct-slate-700: #334155;
  --ct-slate-800: #1e293b;
  --ct-slate-900: #0f172a;
  --ct-red-500: #ef4444;
  /* Error text needs AA contrast on white; red-500 is only 3.8:1. */
  --ct-red-700: #b91c1c;
  --ct-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ct-wrap { width: 100%; max-width: var(--site-container); margin-inline: auto; padding-inline: var(--site-gutter); }

/* The export renders these section labels as *inline* spans, so each one
   occupies its parent's 24px line box rather than its own 16px box. */
.ct-eyebrow { color: var(--ct-green); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }

/* ------------------------------------------------------------
   10.1 C1 — CONTACT HERO
   ------------------------------------------------------------ */
.ct-hero { background-color: #ffffff; padding: 48px 0 64px; border-bottom: 1px solid var(--ct-slate-200); overflow: hidden; }
.ct-hero__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
[class].ct-hero__copy > * + * { margin-top: 24px; }
.ct-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 12px;
  background-color: var(--ct-emerald-50);
  border: 1px solid var(--ct-emerald-200);
  border-radius: 4px;
  color: var(--ct-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.ct-hero__dot { width: 6px; height: 6px; border-radius: 9999px; background-color: var(--ct-green); flex-shrink: 0; }
.ct-hero__title { margin: 0; font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.9px; color: var(--ct-navy); }
.ct-hero__title span { color: var(--ct-green); }
.ct-hero__lede { margin: 0; font-size: 18px; line-height: 29.25px; color: var(--ct-slate-600); }
.ct-hero__points { padding-top: 8px; }
[class].ct-hero__points > * + * { margin-top: 12px; }
.ct-hero__point { display: flex; align-items: center; gap: 12px; color: var(--ct-slate-700); font-size: 14px; line-height: 20px; font-weight: 500; }
.ct-hero__check { width: 20px; height: 20px; border-radius: 9999px; background-color: var(--ct-emerald-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ct-hero__check svg { width: 14px; height: 14px; color: var(--ct-green); }

.ct-hero__visual { position: relative; }
.ct-hero__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  border: 1px solid var(--ct-slate-200);
  background-color: var(--ct-slate-900);
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.ct-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.ct-hero__scrim { position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(10, 25, 47, 0.7), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); }
.ct-hero__badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: rgba(10, 25, 47, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--ct-slate-700);
  border-radius: 4px;
  color: #ffffff;
}
.ct-hero__pulse { width: 10px; height: 10px; border-radius: 9999px; background-color: var(--ct-emerald-400); flex-shrink: 0; animation: ct-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.ct-hero__badge p { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ct-slate-200); }
@keyframes ct-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ------------------------------------------------------------
   10.2 C2 — DIRECT ACCESS + INQUIRY FORM
   ------------------------------------------------------------ */
.ct-inquiry { padding: 64px 0; background-color: #ffffff; border-bottom: 1px solid var(--ct-slate-200); }
.ct-inquiry__grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
[class].ct-inquiry__col > * + * { margin-top: 32px; }
.ct-inquiry__intro h2 { margin: 4px 0 0; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ct-navy); }
.ct-inquiry__intro p { margin: 12px 0 0; font-size: 14px; line-height: 22.75px; color: var(--ct-slate-600); }

[class].ct-blocks > * + * { margin-top: 24px; }
.ct-block {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background-color: var(--ct-slate-50);
  border: 1px solid var(--ct-slate-200);
  border-radius: 8px;
}
.ct-block__icon {
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border: 1px solid var(--ct-green);
  border-radius: 8px;
  background-color: var(--ct-emerald-50);
  color: var(--ct-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ct-block__icon svg { width: 20px; height: 20px; }
[class].ct-block__body > * + * { margin-top: 4px; }
.ct-block__label { color: var(--ct-slate-500); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.ct-block__value { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ct-navy); }
[class].ct-block__value > * + * { margin-left: 8px; }
.ct-block__value a { color: inherit; }
.ct-block__value a:hover { color: var(--ct-green); }
.ct-block__sep { color: var(--ct-slate-600); font-weight: 400; }
.ct-block__note { color: var(--ct-slate-600); font-size: 12px; line-height: 19.5px; }
/* Compact second channel on the Consultation Lines block: the phone lines above
   already publish the number, so this adds the WhatsApp route without repeating
   it. Size, spacing and hover follow the existing contact-info treatment. */
.ct-block__whatsapp { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ct-navy); }
.ct-block__whatsapp svg { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; color: var(--ct-green); }
.ct-block__whatsapp a { color: inherit; }
.ct-block__whatsapp a:hover { color: var(--ct-green); }

.ct-callout { padding: 20px; background-color: rgba(236, 253, 245, 0.6); border: 1px solid var(--ct-emerald-200); border-radius: 8px; }
.ct-callout__title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--ct-green); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.ct-callout__title svg { width: 16px; height: 16px; flex-shrink: 0; }
.ct-callout p { margin: 0; color: var(--ct-slate-700); font-size: 12px; line-height: 19.5px; }

.ct-form-card { background-color: #ffffff; border: 1px solid var(--ct-slate-200); border-radius: 8px; padding: 32px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.ct-form-card__intro { margin-bottom: 32px; }
.ct-form-card__intro h3 { margin: 4px 0 0; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ct-navy); }
.ct-form-card__intro p { margin: 8px 0 0; font-size: 12px; line-height: 20px; color: var(--ct-slate-600); }
[class].ct-form { margin: 0; }
[class].ct-form > * + * { margin-top: 20px; }
.ct-form__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ct-label { display: block; margin-bottom: 8px; color: var(--ct-slate-700); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.ct-required { color: var(--ct-red-700); }
/* Form controls must inherit the page font: the browser default is the
   platform control font (a monospace for textarea, Arial for select), which
   would change both the metrics and the rendered placeholder text. */
.ct-input,
.ct-select,
.ct-textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--ct-slate-800);
  background-color: #ffffff;
  border: 1px solid var(--ct-slate-300);
  border-radius: 4px;
}
.ct-input::placeholder,
.ct-textarea::placeholder { color: var(--muted-on-light); opacity: 1; }
.ct-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: calc(100% - 8px) 50%;
  background-size: 21px 21px;
  background-repeat: no-repeat;
}
.ct-textarea { resize: vertical; }
.ct-input:focus,
.ct-select:focus,
.ct-textarea:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--ct-green); }
.ct-form__submit { padding-top: 8px; }
[class].ct-form__submit > * + * { margin-top: 16px; }
.ct-form__privacy { margin: 0; color: var(--ct-slate-500); font-size: 12px; line-height: 19.5px; }
.ct-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background-color: var(--ct-green);
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.ct-submit:hover { background-color: var(--ct-green-hover); }
.ct-submit svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Form submission states.
   The status region reports the real outcome: a confirmation appears only
   after the server has confirmed the provider accepted the message. */
.ct-error { margin: 6px 0 0; color: var(--ct-red-700); font-size: 12px; line-height: 18px; font-weight: 600; }
.ct-input[aria-invalid='true'],
.ct-select[aria-invalid='true'],
.ct-textarea[aria-invalid='true'] { border-color: var(--ct-red-700); }
.ct-form__status { margin: 0; font-size: 13px; line-height: 20px; font-weight: 600; }
.ct-form__status[data-state='pending'] { color: var(--ct-slate-600); }
.ct-form__status[data-state='success'] { color: var(--ct-green); }
.ct-form__status[data-state='error'] { color: var(--ct-red-700); }
.ct-form__status:empty { display: none; }
.ct-submit[disabled] { cursor: progress; opacity: 0.75; }
.ct-submit[disabled]:hover { background-color: var(--ct-green); }

/* Honeypot: positioned off-screen rather than removed, so automated form
   fillers still see it while people (and assistive tech) never encounter it. */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------
   10.3 C3 — WHAT TO EXPECT
   ------------------------------------------------------------ */
.ct-expect { padding: 64px 0; background-color: var(--ct-slate-50); border-bottom: 1px solid var(--ct-slate-200); }
.ct-expect__head { max-width: 672px; margin: 0 auto 48px; text-align: center; }
.ct-expect__head h2 { margin: 4px 0 0; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ct-navy); }
.ct-expect__head p { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--ct-slate-600); }
.ct-expect__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.ct-step { position: relative; padding: 32px; background-color: #ffffff; border: 1px solid var(--ct-slate-200); border-radius: 8px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
[class].ct-step > * + * { margin-top: 16px; }
.ct-step__num {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ct-emerald-50);
  border: 1px solid rgba(27, 122, 67, 0.3);
  border-radius: 8px;
  color: var(--ct-green);
  font-family: var(--ct-mono);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}
.ct-step h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ct-navy); }
.ct-step p { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--ct-slate-600); }

/* ------------------------------------------------------------
   10.4 C4 — ALTERNATIVE PATHWAYS
   ------------------------------------------------------------ */
.ct-paths { padding: 64px 0; background-color: #ffffff; border-bottom: 1px solid var(--ct-slate-200); }
.ct-paths__head { max-width: 672px; margin: 0 auto 40px; text-align: center; }
.ct-paths__head h2 { margin: 4px 0 0; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ct-navy); }
.ct-paths__head p { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ct-slate-600); }
.ct-paths__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ct-path {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  background-color: #ffffff;
  border: 1px solid var(--ct-slate-200);
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: border-color 150ms ease;
}
.ct-path:hover { border-color: var(--ct-green); }
[class].ct-path > * + * { margin-top: 16px; }
[class].ct-path__top > * + * { margin-top: 8px; }
.ct-path h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ct-navy); transition: color 150ms ease; }
.ct-path:hover h3 { color: var(--ct-green); }
.ct-path p { margin: 0; font-size: 12px; line-height: 19.5px; color: var(--ct-slate-600); }
.ct-path__link { display: inline-flex; align-items: center; gap: 4px; padding-top: 12px; border-top: 1px solid var(--ct-slate-100); color: var(--ct-green); font-size: 14px; line-height: 20px; font-weight: 700; }
.ct-path__link:hover { color: var(--ct-green-hover); }
.ct-path__arrow { transition: transform 150ms ease; }
.ct-path:hover .ct-path__arrow { transform: translateX(4px); }

/* ------------------------------------------------------------
   10.5 C5 — LOCATION / REGISTERED OFFICE
   ------------------------------------------------------------
   Reuses the "What to Expect" band's pale surface, gutter and centred
   heading; the address card is the section's only addition. */
.ct-location__card {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px;
  background-color: #ffffff;
  border: 1px solid var(--ct-slate-200);
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  text-align: center;
}
.ct-location__card h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ct-navy); }
.ct-location__address { margin: 12px 0 0; font-size: 14px; line-height: 22px; color: var(--ct-slate-600); }

/* ------------------------------------------------------------
   10.6 C6 — CLOSING CONFIDENCE STRIP
   ------------------------------------------------------------ */
/* The export's closing strip carries its own px-6 gutter, so its inner
   container must not add a second one. */
.ct-close { background-color: var(--ct-navy); padding: 40px 24px; border-bottom: 1px solid var(--ct-slate-800); }
.ct-close__inner { width: 100%; max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; }
.ct-close__group { display: flex; align-items: center; gap: 16px; }
.ct-close__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: rgba(27, 122, 67, 0.2); border: 1px solid rgba(27, 122, 67, 0.3); border-radius: 8px; }
.ct-close__icon svg { width: 24px; height: 24px; color: var(--ct-emerald-400); }
.ct-close h3 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; color: #ffffff; }
.ct-close p { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--ct-slate-400); }
.ct-close p a:hover { color: var(--ct-emerald-400); }
.ct-close__action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 24px;
  background-color: var(--ct-green);
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  transition: background-color 150ms ease;
}
.ct-close__action:hover { background-color: var(--ct-green-hover); }
.ct-close__action svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (min-width: 640px) {
  .ct-hero__title { font-size: 48px; line-height: 48px; letter-spacing: -1.2px; }
  .ct-form-card { padding: 40px; }
  .ct-form-card__intro p { font-size: 14px; }
  .ct-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .ct-expect__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-paths__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-close__inner { flex-direction: row; }
}

@media (min-width: 1024px) {
  .ct-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .ct-hero__copy { grid-column: span 6; }
  .ct-hero__visual { grid-column: span 6; }
  .ct-inquiry__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ct-inquiry__aside { grid-column: span 5; }
  .ct-inquiry__form { grid-column: span 7; }
}

/* The export animates the badge dot with `animate-pulse`; stop it for users
   who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ct-hero__pulse { animation: none; }
  .ct-path__arrow { transition: none; }
}


/* ============================================================
   SD — SERVICE-DETAIL FAMILY (`.sd-*`)
   Reconstructed from the approved Stitch service-detail exports
   (stitch.ui/<SERVICE>.ui/). One shared component system carries the whole
   family; per-page accents are overridden by a `.sd-page--<slug>` block so the
   pages stay consistent without being cloned.

   Geometry reference: page 01 (Healthcare Management Consulting) measured at the
   1280px reference viewport — content container max 1232px, section padding
   64/80px vertical, 12-column grids with 48px gaps.
   ============================================================ */

.sd-page {
  /* brand tokens as measured from the approved exports */
  --sd-ink: #0d1b2a;
  --sd-green: #1b7340;
  --sd-accent: #047857;
  --sd-accent-strong: #065f46;
  --sd-accent-mid: #059669;
  --sd-accent-bright: #10b981;
  --sd-accent-text: #34d399;
  --sd-accent-soft: #ecfdf5;
  --sd-accent-soft-2: #d1fae5;
  --sd-accent-line: #a7f3d0;
  --sd-accent-deep: #064e3b;
  --sd-band: #0d1b2a;
  --sd-cta-bg: #0b1522;
  --sd-surface: #f8fafc;
  --sd-line: #e2e8f0;
  --sd-line-soft: #f1f5f9;
  --sd-slate-700: #334155;
  --sd-slate-600: #475569;
  --sd-slate-500: #64748b;
  --sd-slate-400: #94a3b8;
  color: var(--sd-ink);
}

.sd-wrap {
  /* The wrap and the section gutter reproduce the shared site grid: the
     container is capped at --sx-container with a --sx-gutter inline gutter. */
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
  margin-inline: auto;
}

/* --- generic section shells ------------------------------------------------ */
.sd-sect {
  padding: 56px var(--site-gutter);
  background: #fff;
}

/* The crumb band above the hero is flush with it (band bottom == hero top), so
   the Practice Area pill used to sit hard against the breadcrumb and the two
   read as one gummed block. 24px of breathing room is added HERE, on the hero
   side, rather than as padding on the band itself: the band is a fixed
   per-breakpoint height that the whole family is measured against, and moving
   its height would reintroduce the cross-page drift the fixed values removed.
   Applied to the shared rule, so all nine service-detail pages inherit it. */
.sd-sect--hero {
  padding-top: 24px;
  background: #fff;
}

.sd-sect--surface {
  background: var(--sd-surface);
}

.sd-sect--top {
  border-top: 1px solid var(--sd-line);
}

.sd-sect--bottom {
  border-bottom: 1px solid var(--sd-line);
}

.sd-sect--bordered {
  border-top: 1px solid var(--sd-line);
  border-bottom: 1px solid var(--sd-line);
}

/* --- shared typography ----------------------------------------------------- */
.sd-eyebrow {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sd-accent);
}

.sd-h2 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: var(--sd-ink);
}

/* the institutional-context heading runs at the export's looser 41.25px leading */
.sd-h2--snug {
  line-height: 41.25px;
}

.sd-h2--xl {
  font-size: 36px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -0.9px;
}

.sd-h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--sd-ink);
}

.sd-rule {
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 16px;
  background: var(--sd-accent-mid);
}

.sd-head {
  max-width: 768px;
  margin-bottom: 56px;
}

.sd-head--tight {
  margin-bottom: 48px;
}

/* the stakeholder heading block runs tighter in the export */
.sd-head--tight .sd-head__lede {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
}

.sd-head .sd-h2 {
  margin-top: 8px;
}

.sd-head__lede {
  margin-top: 12px;
  font-size: 16px;
  line-height: 24px;
  color: var(--sd-slate-600);
}

.sd-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--sd-slate-600);
}

.sd-split__body {
  font-size: 16px;
  line-height: 26px;
  color: var(--sd-slate-600);
}

.sd-split__body > p + p {
  margin-top: 20px;
}

.sd-split__body strong {
  font-weight: 600;
  color: #1e293b;
}

.sd-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--sd-accent-strong);
  text-decoration: none;
}

.sd-link:hover {
  color: #064e3b;
}

.sd-link__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* --- buttons --------------------------------------------------------------- */
.sd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--sd-green);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-decoration: none;
  /* Tailwind `shadow` — the service-detail exports give every solid green CTA a
     soft lift; without it the buttons read noticeably flatter than the reference. */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.sd-btn:hover {
  background: #155d33;
}

.sd-btn--ghost {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: var(--sd-slate-700);
  /* the exports' outline buttons are flat: no shadow */
  box-shadow: none;
}

.sd-btn--ghost:hover {
  border-color: var(--sd-slate-400);
  background: #fff;
  color: #0f172a;
}

.sd-btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* --- breadcrumb ------------------------------------------------------------ */
/* The breadcrumb band is a FIXED height per breakpoint, not a content-driven
   one. The crumb still wraps freely inside it — a long service name pushes the
   "Practice Discipline NN of 08" tag onto a second row below ~414px — but the
   band itself never grows, so the hero label underneath always lands at the
   same offset on all eight service-detail pages instead of drifting by up to
   33px with the length of the service name.

   Each value is the MEASURED worst-case wrap across the eight service pages
   (tools/probe-crumb-band.mjs) plus an 8px breathing allowance, so the tallest
   crumb in the family still clears the header by 4px instead of sitting flush
   against it while shorter names float lower. Nothing is clipped or hidden:
     <360px  -> 79px  (71 + 8; HQ: trail wraps AND tag drops a row)
     360-413 -> 73px  (65 + 8; PH: "Public Health & Health Systems
                                 Strengthening" wraps the trail to two lines)
     414-599 -> 55px  (47 + 8; trail and tag fit on one row each)
     >=600px -> the canonical first-content offset (32px, 40px from 1024px),
                which is also where the crumb fits on a single row. */
.sd-crumb {
  display: flex;
  align-items: center;
  min-height: 79px;
  padding: 0 var(--site-gutter);
  background: var(--sd-surface);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

@media (min-width: 360px) {
  .sd-crumb {
    min-height: 73px;
  }
}

@media (min-width: 414px) {
  .sd-crumb {
    min-height: 55px;
  }
}

@media (min-width: 600px) {
  .sd-crumb {
    min-height: var(--site-hero-offset);
  }
}

.sd-crumb .sd-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sd-slate-500);
}

.sd-crumb__trail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sd-crumb__trail a {
  color: inherit;
  text-decoration: none;
}

.sd-crumb__trail a:hover {
  color: #1e293b;
}

.sd-crumb__current {
  font-weight: 700;
  color: var(--sd-accent-strong);
}

.sd-crumb__tag {
  display: none;
  padding: 2px 10px;
  border-radius: 9999px;
  background: var(--sd-accent-soft-2);
  color: var(--sd-accent-strong);
  font-weight: 600;
  white-space: nowrap;
}

/* --- hero ------------------------------------------------------------------ */
.sd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.sd-hero__copy > * + * {
  margin-top: 24px;
}

.sd-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--sd-accent-line);
  border-radius: 9999px;
  background: var(--sd-accent-soft);
  color: var(--sd-accent-strong);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--sd-accent-mid);
  flex: none;
}

.sd-hero__title {
  font-size: 36px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -0.9px;
  color: var(--sd-ink);
}

.sd-hero__title span {
  color: var(--sd-accent);
}

.sd-hero__lede {
  font-size: 18px;
  line-height: 1.625;
  color: var(--sd-slate-600);
}

.sd-checks {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sd-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--sd-slate-700);
}

.sd-checks svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--sd-accent-mid);
}

.sd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

.sd-frame {
  position: relative;
  margin: 0;
  border: 1px solid var(--sd-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.sd-frame img {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
}

.sd-frame__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 20px;
  background-image: linear-gradient(to top, rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.5), rgba(2, 6, 23, 0));
}

.sd-frame__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--sd-accent-text);
}

.sd-frame__note {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: #e2e8f0;
}

.sd-pulse {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--sd-accent-bright);
  flex: none;
  animation: sd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes sd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* --- split sections -------------------------------------------------------- */
.sd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.sd-split__aside .sd-h2 {
  margin-top: 8px;
}

.sd-split--center > * {
  align-self: center;
}

/* the engagement-scope column runs on 16px rhythm in the export */
.sd-split--roomy .sd-split__aside .sd-h2 {
  margin-top: 16px;
}

/* --- capability cards ------------------------------------------------------ */
.sd-caps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.sd-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--sd-line);
  border-radius: 8px;
  background: #fff;
  /* the export is `transition-all` on the card */
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

/* `hover:border-emerald-500/80 hover:shadow-md` */
.sd-card:hover {
  border-color: rgba(5, 150, 105, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* `group-hover:bg-emerald-600 group-hover:text-white transition-colors` */
.sd-card:hover .sd-card__icon {
  background: #059669;
  color: #fff;
}

.sd-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sd-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: var(--sd-accent-soft);
  color: var(--sd-accent);
  transition: background-color 150ms ease, color 150ms ease;
}

.sd-card__icon svg {
  width: 24px;
  height: 24px;
}

.sd-card__no {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--muted-on-light);
}

.sd-card__title {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--sd-ink);
}

.sd-card__body {
  font-size: 14px;
  line-height: 22.75px;
  color: var(--sd-slate-600);
}

.sd-card__tags {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--sd-line-soft);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--sd-accent);
}

/* --- philosophy band ------------------------------------------------------- */
.sd-quote {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
  background: var(--sd-band);
  color: #fff;
}

.sd-quote__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  mix-blend-mode: luminosity;
}

.sd-quote__inner {
  position: relative;
  z-index: 10;
  max-width: 896px;
  margin-inline: auto;
  text-align: center;
}

.sd-quote__pill {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(6, 95, 70, 0.8);
  border-radius: 4px;
  background: rgba(2, 44, 34, 0.6);
  color: var(--sd-accent-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.sd-quote__title {
  margin-top: 24px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.9px;
  color: #fff;
}

.sd-quote__rule {
  display: block;
  width: 64px;
  height: 4px;
  margin: 24px auto 0;
  background: var(--sd-accent-bright);
}

.sd-quote__note {
  max-width: 672px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 24px;
  color: #cbd5e1;
}

/* --- delivery steps -------------------------------------------------------- */
.sd-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  list-style: none;
}

.sd-step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border: 1px solid var(--sd-line);
  border-radius: 8px;
  background: #fff;
}

.sd-step__no {
  display: block;
  margin-bottom: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px;
  line-height: 32px;
  font-weight: 900;
  color: var(--sd-accent);
}

.sd-step__title {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--sd-ink);
}

.sd-step__body {
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

.sd-step__foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--sd-line-soft);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  color: var(--sd-accent);
}

.sd-step--final {
  background: var(--sd-accent-deep);
  border-color: #065f46;
  color: #fff;
}

.sd-step--final .sd-step__no {
  color: var(--sd-accent-text);
}

.sd-step--final .sd-step__title {
  color: #fff;
}

.sd-step--final .sd-step__body {
  color: #e2e8f0;
}

.sd-step--final .sd-step__foot {
  border-top-color: #065f46;
  color: #6ee7b7;
}

/* --- engagement scope ------------------------------------------------------ */
.sd-callout {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--sd-accent-line);
  border-radius: 8px;
  background: rgba(236, 253, 245, 0.8);
}

.sd-callout__title {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--sd-accent-deep);
}

.sd-callout__body {
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-accent-strong);
}

.sd-includes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  list-style: none;
}

.sd-include {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--sd-line);
  border-radius: 4px;
  background: var(--sd-surface);
}

.sd-include__icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--sd-accent-mid);
}

.sd-include__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--sd-ink);
}

.sd-include__body {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sd-slate-500);
}

/* --- stakeholders ---------------------------------------------------------- */
.sd-who {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  list-style: none;
}

.sd-who__card {
  padding: 24px;
  border: 1px solid var(--sd-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.sd-who__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: rgba(209, 250, 229, 0.7);
  color: var(--sd-accent-strong);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.sd-who__title {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--sd-ink);
}

.sd-who__body {
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

/* --- interconnected practice areas ----------------------------------------- */
.sd-areas__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sd-line);
}

.sd-areas__head .sd-eyebrow {
  margin-bottom: 4px;
}

.sd-areas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.sd-area {
  display: block;
  padding: 24px;
  border: 1px solid var(--sd-line);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.6);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* `hover:border-emerald-600 transition-all` plus the `group-hover` pair on the
   title and trailing arrow inside the card. */
.sd-area:hover {
  border-color: var(--sd-accent-strong);
}

.sd-area:hover .sd-area__title {
  color: var(--sd-accent-strong);
}

.sd-area:hover .sd-area__icon {
  transform: translateX(4px);
}

.sd-area__no {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--muted-on-light);
}

.sd-area__title {
  margin: 4px 0 8px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--sd-ink);
  transition: color 150ms ease;
}

.sd-area__body {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

.sd-area__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--sd-accent);
}

.sd-area__icon {
  width: 14px;
  height: 14px;
  transition: transform 150ms ease;
}

.sd-areas__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--sd-line-soft);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-areas__prev {
  color: var(--muted-on-light);
}

/* --- consultation CTA ------------------------------------------------------ */
.sd-cta {
  padding: 40px 24px;
  background: var(--sd-cta-bg);
  border-top: 1px solid #1e293b;
}

.sd-cta__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: center;
}

.sd-cta__lead {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sd-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid rgba(4, 120, 87, 0.6);
  border-radius: 9999px;
  background: rgba(6, 78, 59, 0.5);
  color: var(--sd-accent-text);
}

.sd-cta__icon svg {
  width: 24px;
  height: 24px;
}

.sd-cta__title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.45px;
  color: #fff;
}

.sd-cta__note {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted-on-dark);
}

.sd-btn--cta {
  white-space: nowrap;
}

/* Page 01 (Healthcare Management Consulting) uses Tailwind `shadow-sm` on its
   delivery-step cards and on the consultation-band button, where the other
   service-detail exports use no card shadow / full `shadow` respectively. */
.sd-page--hm .sd-step {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--hm .sd-btn--cta {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* --- responsive ------------------------------------------------------------ */
@media (min-width: 640px) {
  .sd-hero__title {
    font-size: 44px;
  }

  .sd-includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-quote__title {
    font-size: 36px;
    line-height: 40px;
  }
}

@media (min-width: 768px) {
  .sd-sect {
    padding: 64px var(--site-gutter);
  }

  /* The hero keeps only the 24px crumb gap in top padding so the breathing
     room added for the breadcrumb stays identical at every width. */
  .sd-sect--hero {
    padding: 24px var(--site-gutter) 64px;
  }

  .sd-sect--lg {
    padding: 80px var(--site-gutter);
  }

  .sd-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sd-who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sd-cta__row {
    flex-direction: row;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .sd-crumb__tag {
    display: inline-block;
  }

  .sd-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sd-hero__copy {
    grid-column: span 6;
  }

  .sd-hero__media {
    grid-column: span 6;
  }

  .sd-hero__title {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -1.2px;
  }

  .sd-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
  }

  .sd-split__aside {
    grid-column: span 5;
  }

  .sd-split__body {
    grid-column: span 7;
  }

  .sd-caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sd-who {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-pulse {
    animation: none;
  }

  .sd-btn,
  .sd-card,
  .sd-card__icon,
  .sd-area,
  .sd-area__title,
  .sd-area__icon {
    transition: none;
  }

  .sd-area:hover .sd-area__icon {
    transform: none;
  }
}


/* ============================================================
   SD — PAGE 02: HEALTHCARE QUALITY IMPROVEMENT (`.sd-page--hq`)
   Per-page overrides measured from the approved export
   (stitch.ui/HEALTHCARE QUALITY IMPROVEMENT.ui/). The export runs a narrower
   gutter (32px) over a 1216px content column, an 11px eyebrow, 44/30/24px
   headings and 20–24px card padding, so every value that differs from the
   page-01 baseline is scoped here and page 01 keeps its own geometry.
   Tokens measured this page: green #165b33, eyebrow #134e2c, icon #165b33.

   NOTE — this export is the only one that overrides Tailwind's emerald ramp in
   its `tailwind.config` (emerald-500 #16a34a, 600 #165b33, 700 #134e2c,
   800 #0e3b21). Every accent below therefore resolves to the export's own
   values, not the Tailwind defaults the other service pages use.
   ============================================================ */

.sd-page--hq {
  --sd-green: #165b33;
  --sd-accent: #134e2c;
  --sd-accent-strong: #134e2c;
  --sd-accent-mid: #165b33;
  --sd-cta-bg: #0b192c;
}

.sd-page--hq .sd-sect {
  padding-left: 0;
  padding-right: 0;
}

/* the export's gutter sits on the container, not the section */
.sd-page--hq .sd-wrap {
  max-width: var(--site-container);
  padding-inline: var(--site-gutter);
}

/* --- breadcrumb ------------------------------------------------------------ */
.sd-page--hq .sd-crumb {
  padding: 0;
}

.sd-page--hq .sd-crumb .sd-wrap {
  flex-wrap: wrap;
  align-items: center;
}

.sd-page--hq .sd-crumb__current {
  font-weight: 500;
  color: #1e293b;
}

.sd-page--hq .sd-crumb__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid rgba(167, 243, 208, 0.6);
  /* export uses `rounded-full` (pill), not the square-ish service-family radius */
  border-radius: 9999px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.sd-page--hq .sd-crumb__tag .sd-pill__dot {
  width: 6px;
  height: 6px;
  background: var(--sd-green);
}

/* --- hero ------------------------------------------------------------------- */
.sd-page--hq .sd-sect--hero {
  padding-bottom: 64px;
}

.sd-page--hq .sd-pill {
  gap: 8px;
  padding: 4px 12px;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--sd-accent);
  background: #ecfdf5;
  border: 1px solid #d1fae5;
}

.sd-page--hq .sd-hero__title {
  font-size: 44px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -1.1px;
  color: #020617;
}

.sd-page--hq .sd-hero__title span {
  color: #059669;
}

.sd-page--hq .sd-hero__lede {
  max-width: 576px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--sd-slate-600);
}

.sd-page--hq .sd-checks {
  gap: 10px;
}

.sd-page--hq .sd-checks li {
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--sd-slate-700);
}

.sd-page--hq .sd-checks svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #165b33;
}

.sd-page--hq .sd-btn {
  padding: 12px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: normal;
}

.sd-page--hq .sd-btn--ghost {
  padding: 12px 20px;
  background: #fff;
  border-color: #cbd5e1;
  color: var(--sd-slate-700);
}

.sd-page--hq .sd-frame {
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.sd-page--hq .sd-frame__overlay {
  padding: 48px 20px 20px;
  background: linear-gradient(to top, #020617, rgba(15, 23, 42, 0.9), transparent);
}

.sd-page--hq .sd-frame__label {
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: #34d399;
}

.sd-page--hq .sd-frame__label .sd-pulse {
  width: 6px;
  height: 6px;
  background: #34d399;
}

.sd-page--hq .sd-frame__note {
  font-size: 12px;
  line-height: 16.5px;
  color: #e2e8f0;
}

/* --- section headings ------------------------------------------------------- */
.sd-page--hq .sd-eyebrow {
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  color: var(--sd-accent);
}

.sd-page--hq .sd-h2 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: normal;
  color: #0f172a;
}

.sd-page--hq .sd-h2--md {
  font-size: 24px;
  line-height: 32px;
}

.sd-page--hq .sd-h2--tight {
  font-size: 24px;
  line-height: 30px;
}

.sd-page--hq .sd-head {
  margin-bottom: 48px;
}

.sd-page--hq .sd-head .sd-h2 {
  margin-top: 4px;
}

.sd-page--hq .sd-head__lede {
  max-width: 768px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sd-slate-600);
}

.sd-page--hq .sd-head--tight {
  margin-bottom: 40px;
}

/* --- editorial split -------------------------------------------------------- */
.sd-page--hq .sd-split {
  gap: 32px;
}

.sd-page--hq .sd-split__aside .sd-h2 {
  margin-top: 8px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: normal;
  color: #0f172a;
}

.sd-page--hq .sd-rule {
  width: 48px;
  height: 4px;
  margin-top: 16px;
  border-radius: 9999px;
  background: var(--sd-green);
}

.sd-page--hq .sd-split__body {
  gap: 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--sd-slate-600);
}

/* --- capabilities ----------------------------------------------------------- */
.sd-page--hq .sd-sect--architecture {
  padding-top: 64px;
  padding-bottom: 64px;
  background: #fafcfd;
}

.sd-page--hq .sd-caps {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.sd-page--hq .sd-card {
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* the export's card is `flex flex-col justify-between`: when a row is set by its
     tallest card, the slack lands between the icon/title/body group and the tag
     strip instead of below it. Requires the `.sd-card__content` wrapper. */
  justify-content: space-between;
}

.sd-page--hq .sd-card__top {
  height: 36px;
  margin-bottom: 16px;
}

.sd-page--hq .sd-card__icon {
  width: 36px;
  height: 36px;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  background: #ecfdf5;
}

.sd-page--hq .sd-card__icon svg {
  width: 20px;
  height: 20px;
  color: #165b33;
}

.sd-page--hq .sd-card__no {
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted-on-light);
}

.sd-page--hq .sd-card__title {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: normal;
  color: #0f172a;
}

.sd-page--hq .sd-card__body {
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

.sd-page--hq .sd-card__tags {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sd-line-soft);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 500;
  color: var(--sd-accent);
}

/* --- advisory mandate band --------------------------------------------------- */
.sd-page--hq .sd-quote {
  padding: 64px 16px;
  background: var(--sd-cta-bg);
}

.sd-page--hq .sd-quote__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(#16a34a 1px, transparent 1px);
  background-size: 16px 16px;
}

.sd-page--hq .sd-quote__inner {
  max-width: 896px;
  gap: 24px;
}

.sd-page--hq .sd-quote__pill {
  padding: 4px 12px;
  border: 1px solid rgba(14, 59, 33, 0.8);
  border-radius: 4px;
  background: rgba(2, 44, 34, 0.6);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #34d399;
}

.sd-page--hq .sd-quote__title {
  margin: 24px 0 0;
  padding-inline: 16px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.75px;
  color: #fff;
}

.sd-page--hq .sd-quote__rule,
.sd-page--hq .sd-quote__bg {
  display: none;
}

.sd-page--hq .sd-quote__note {
  max-width: 672px;
  font-size: 16px;
  line-height: 24px;
  color: #cbd5e1;
}

/* --- delivery methodology ---------------------------------------------------- */
.sd-page--hq .sd-sect--delivery {
  padding-top: 64px;
  padding-bottom: 64px;
}

.sd-page--hq .sd-steps {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.sd-page--hq .sd-step {
  padding: 20px;
  border: 1px solid var(--sd-line);
  border-radius: 8px;
}

.sd-page--hq .sd-step__no {
  margin-bottom: 4px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 900;
  color: var(--sd-accent);
}

.sd-page--hq .sd-step__title {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #0f172a;
}

.sd-page--hq .sd-step__body {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

.sd-page--hq .sd-step__foot {
  padding-top: 12px;
  border-top: 1px solid var(--sd-line-soft);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  color: var(--sd-accent);
}

.sd-page--hq .sd-step--final {
  border-color: transparent;
  background: var(--sd-green);
  /* Tailwind `shadow-md` on the closing dark card */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--hq .sd-step--final .sd-step__no {
  color: #6ee7b7;
}

.sd-page--hq .sd-step--final .sd-step__title {
  color: #fff;
}

.sd-page--hq .sd-step--final .sd-step__body {
  color: #ecfdf5;
}

.sd-page--hq .sd-step--final .sd-step__foot {
  border-top-color: rgba(19, 78, 44, 0.6);
  color: #a7f3d0;
}

/* --- practical scope --------------------------------------------------------- */
.sd-page--hq .sd-sect--scope {
  padding-top: 56px;
  padding-bottom: 56px;
  background: var(--sd-surface);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--hq .sd-scope {
  gap: 32px;
}

.sd-page--hq .sd-scope__aside .sd-h2 {
  margin-top: 16px;
}

.sd-page--hq .sd-scope__aside > p {
  margin-top: 16px;
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

.sd-page--hq .sd-callout {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--sd-accent-line);
  border-radius: 8px;
  background: rgba(236, 253, 245, 0.7);
}

.sd-page--hq .sd-callout__title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: normal;
  color: #064e3b;
}

.sd-page--hq .sd-callout__body {
  margin-top: 4px;
  font-size: 11px;
  line-height: 16.5px;
  color: #0e3b21;
}

.sd-page--hq .sd-includes {
  gap: 16px;
}

.sd-page--hq .sd-include {
  padding: 16px;
  gap: 12px;
  border-radius: 8px;
}

.sd-page--hq .sd-include__icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #165b33;
}

.sd-page--hq .sd-include__title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #0f172a;
}

.sd-page--hq .sd-include__body {
  margin-top: 2px;
  font-size: 11px;
  line-height: 16.5px;
  color: var(--sd-slate-600);
}

/* --- institutional stakeholders ---------------------------------------------- */
.sd-page--hq .sd-sect--who {
  padding-top: 64px;
  padding-bottom: 64px;
}

.sd-page--hq .sd-who {
  gap: 24px;
}

.sd-page--hq .sd-who__card {
  padding: 20px;
  border-radius: 8px;
}

.sd-page--hq .sd-who__badge {
  padding: 2px 8px;
  border: 1px solid #d1fae5;
  border-radius: 4px;
  background: #ecfdf5;
  color: var(--sd-accent);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--hq .sd-who__title {
  margin: 12px 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #0f172a;
}

.sd-page--hq .sd-who__body {
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

/* --- interconnected practice areas ------------------------------------------- */
.sd-page--hq .sd-sect--areas {
  padding-top: 56px;
  padding-bottom: 56px;
  background: var(--sd-surface);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--hq .sd-areas__head {
  align-items: flex-end;
  margin-bottom: 32px;
}

.sd-page--hq .sd-areas__head .sd-h2 {
  margin-top: 4px;
  font-size: 24px;
  line-height: 32px;
}

.sd-page--hq .sd-areas {
  gap: 24px;
}

.sd-page--hq .sd-area {
  padding: 20px;
  border-radius: 8px;
}

.sd-page--hq .sd-area__no {
  margin-bottom: 4px;
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted-on-light);
}

.sd-page--hq .sd-area__title {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #0f172a;
}

.sd-page--hq .sd-area__body {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

.sd-page--hq .sd-area__cta {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--sd-accent);
}

.sd-page--hq .sd-areas__foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--sd-line);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--sd-slate-500);
}

.sd-page--hq .sd-areas__foot a:hover {
  color: var(--sd-accent);
}

/* --- consultation strip ------------------------------------------------------- */
.sd-page--hq .sd-cta {
  padding: 24px 0;
  background: var(--sd-cta-bg);
}

.sd-page--hq .sd-cta__row {
  align-items: center;
  /* The row doubles as .sd-wrap, so the horizontal gutter must be
     re-declared here; the shorthand would otherwise clear it. */
  padding: 8px 32px;
}

.sd-page--hq .sd-cta__icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(19, 78, 44, 0.6);
  background: #022c22;
  color: #34d399;
}

.sd-page--hq .sd-cta__icon svg {
  width: 20px;
  height: 20px;
}

.sd-page--hq .sd-cta__title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: normal;
}

.sd-page--hq .sd-cta__note {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: #cbd5e1;
}

.sd-page--hq .sd-btn--cta {
  padding: 12px 24px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: normal;
}

/* --- breadcrumb / link / utility fixes ---------------------------------------- */
.sd-page--hq .sd-link {
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--sd-accent);
}

.sd-page--hq .sd-link__icon {
  width: 14px;
  height: 14px;
}

/* the export's editorial band is bordered with the slate-100 hairline */
.sd-page--hq .sd-sect--editorial {
  padding-top: 56px;
  padding-bottom: 56px;
  border-top: 1px solid var(--sd-line-soft);
  border-bottom: 1px solid var(--sd-line-soft);
}

/* the export hides the h1 line break below the sm breakpoint */
.sd-br-sm {
  display: none;
}

@media (min-width: 640px) {
  .sd-br-sm {
    display: inline;
  }
}

/* --- base-component corrections for this page --------------------------------- */
.sd-page--hq .sd-include {
  background: #fff;
}

/* the export lets the hero image keep its own ratio under a 440px ceiling */
.sd-page--hq .sd-frame img {
  height: auto;
  max-height: 440px;
}

/* `pt-1` + `space-y-3` on the hero checklist, `gap-2.5` inside each item */
.sd-page--hq .sd-checks {
  padding-top: 4px;
  gap: 12px;
}

.sd-page--hq .sd-split {
  align-items: start;
}

.sd-page--hq .sd-split__body > p + p {
  margin-top: 16px;
}

/* the export renders every numeric label in the body face, not a mono face */
.sd-page--hq .sd-card__no,
.sd-page--hq .sd-step__no,
.sd-page--hq .sd-area__no {
  font-family: inherit;
}

.sd-page--hq .sd-area__no {
  display: block;
}

/* the export's step footnote is a padded box with no top margin */
.sd-page--hq .sd-step__foot {
  margin-top: 0;
}

/* the final step is a filled tile with no border at all (its padding box must
   stay 20px so the copy wraps exactly as the export does) */
.sd-page--hq .sd-step--final {
  border-width: 0;
}

/* the stakeholders head runs on a 4px lede gap, not the 8px used elsewhere */
.sd-page--hq .sd-head--tight .sd-head__lede {
  margin-top: 4px;
}

/* the export's practice-area tiles are solid white */
.sd-page--hq .sd-area {
  background: #fff;
}

.sd-page--hq .sd-area__title {
  margin: 0 0 8px;
}

/* these export elements are flex rows, not inline boxes: keeping them block-level
   stops the inherited 24px line-box strut from adding phantom rows */
.sd-page--hq .sd-area__cta,
.sd-page--hq .sd-link,
.sd-page--hq .sd-frame__label {
  display: flex;
}

/* the section head is full width; only the lede inside it is capped */
.sd-page--hq .sd-head {
  max-width: none;
}

.sd-page--hq .sd-head--tight .sd-head__lede {
  max-width: none;
}

/* the practice-area head carries no rule or padding in this export */
.sd-page--hq .sd-areas__head {
  padding-bottom: 0;
  border-bottom: 0;
}

.sd-page--hq .sd-areas__head .sd-eyebrow {
  margin-bottom: 0;
}

/* the stakeholder badge is an inline pill in the export (its box is the font's
   content area plus padding, not a fixed circular tile) */
.sd-page--hq .sd-who__badge {
  display: inline;
  margin: 0;
  padding: 2px 8px;
  border-radius: 4px;
}

/* The export's metadata rows are plain blocks whose 24px strut sets the line
   box; the 11px label is an inline span inside them. Keeping that structure is
   what puts the label on the reference baseline. */
.sd-page--hq .sd-card__tags,
.sd-page--hq .sd-step__foot {
  line-height: 24px;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}

.sd-page--hq .sd-card__tags > span,
.sd-page--hq .sd-step__foot > span {
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  color: var(--sd-accent);
}

.sd-page--hq .sd-card__tags > span {
  font-weight: 500;
}

/* the highlighted (05) stage sits on the export's solid #165B33 card, so its
   label is emerald-200 rather than the standard accent */
.sd-page--hq .sd-step--final .sd-step__foot > span {
  color: #a7f3d0;
}

.sd-page--hq .sd-crumb__tag {
  color: #0e3b21;
}

.sd-page--hq .sd-hero__title span {
  color: #165b33;
}

.sd-page--hq .sd-split__body strong {
  color: #0f172a;
  font-weight: 600;
}

/* the eyebrow is an inline span in this export: keep it inline so the parent's
   line box (16px/24px strut) reproduces the reference's block heights */
.sd-page--hq .sd-eyebrow {
  display: inline-block;
}

.sd-page--hq .sd-head,
.sd-page--hq .sd-split__aside,
.sd-page--hq .sd-scope__aside,
.sd-page--hq .sd-areas__head > div {
  font-size: 16px;
  line-height: 24px;
}

.sd-page--hq .sd-who__card {
  box-shadow: none;
}

.sd-page--hq .sd-cta {
  border-top: 0;
}

@media (min-width: 1024px) {
  .sd-page--hq .sd-cta__row {
    flex-direction: row;
    gap: 16px;
    text-align: left;
  }
}

/* --- responsive steps --------------------------------------------------------- */
@media (min-width: 768px) {
  .sd-page--hq .sd-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--hq .sd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--hq .sd-who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--hq .sd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sd-page--hq .sd-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
  }
  .sd-page--hq .sd-hero__copy {
    grid-column: span 6;
  }
  .sd-page--hq .sd-hero__media {
    grid-column: span 6;
  }
  .sd-page--hq .sd-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sd-page--hq .sd-split__aside {
    grid-column: span 5;
  }
  .sd-page--hq .sd-split__body {
    grid-column: span 7;
  }
  .sd-page--hq .sd-caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .sd-page--hq .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sd-page--hq .sd-scope {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .sd-page--hq .sd-scope__aside {
    grid-column: span 4;
  }
  .sd-page--hq .sd-scope__grid {
    grid-column: span 8;
  }
  .sd-page--hq .sd-who {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============================================================
   SD — PAGE 03 DELTAS : PUBLIC HEALTH & HEALTH SYSTEMS STRENGTHENING
   Reconstructed from stitch.ui/PUBLIC HEALTH & HEALTH SYSTEMS
   STRENGTHENING.ui/. The export reuses the family skeleton but differs from
   page 02 in its accent (#166534), its breadcrumb meta treatment, the larger
   hero checklist, the square-ish card footers, the pill-shaped stakeholder
   badge, Lato (not monospace) card labels, a textured mandate band, and the
   smaller `shadow-sm` lift on its green buttons. Only those deltas live here.
   ============================================================ */
.sd-page--ph {
  --sd-accent: #166534;
  --sd-accent-strong: #166534;
  --sd-accent-mid: #059669;
  --sd-accent-deep: #166534;
  --sd-accent-text: #a7f3d0;
  --sd-accent-soft: #ecfdf5;
  --sd-accent-soft-2: #ecfdf5;
  --sd-accent-line: #a7f3d0;
  --sd-green: #166534;
}

/* the export's gutter sits on the container, and its section padding is vertical only */
.sd-page--ph .sd-sect {
  padding-left: 0;
  padding-right: 0;
}

.sd-page--ph .sd-wrap {
  max-width: var(--site-container);
  padding-inline: var(--site-gutter);
}

.sd-page--ph .sd-crumb {
  padding: 0;
}

/* every solid green CTA in this export uses `shadow-sm`, not `shadow` */
.sd-page--ph .sd-btn {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--ph .sd-btn--ghost {
  box-shadow: none;
  color: var(--sd-slate-700);
  font-weight: 500;
}

/* --- breadcrumb: plain dot + label, not the page-02 pill ------------------- */
.sd-page--ph .sd-crumb {
  color: #475569;
}

.sd-page--ph .sd-crumb__trail a {
  color: #475569;
}

.sd-page--ph .sd-crumb__trail span[aria-hidden="true"] {
  color: var(--muted-on-light);
}

.sd-page--ph .sd-crumb__current {
  color: #0f172a;
  font-weight: 600;
}

.sd-page--ph .sd-crumb__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #334155;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.sd-page--ph .sd-crumb__tag .sd-pill__dot {
  width: 8px;
  height: 8px;
  background: var(--sd-accent-mid);
}

/* --- hero ----------------------------------------------------------------- */
.sd-page--ph .sd-sect--hero {
  padding-bottom: 64px;
}

/* the export spaces each hero child explicitly instead of a uniform rhythm */
.sd-page--ph .sd-hero__copy > * + * {
  margin-top: 0;
}

.sd-page--ph .sd-pill__dot {
  width: 6px;
  height: 6px;
}

.sd-page--ph .sd-pulse {
  background: #059669;
}

/* this export's buttons are 600 weight with normal tracking */
.sd-page--ph .sd-btn,
.sd-page--ph .sd-btn__arrow {
  font-weight: 600;
  letter-spacing: normal;
}

.sd-page--ph .sd-pill {
  margin-bottom: 20px;
  padding: 4px 12px;
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--ph .sd-hero__title {
  margin-bottom: 24px;
  font-size: 48px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -1.2px;
  color: #0f172a;
}

.sd-page--ph .sd-hero__title span {
  color: var(--sd-accent);
}

.sd-page--ph .sd-hero__lede {
  margin-bottom: 32px;
  font-size: 18px;
  line-height: 28px;
}

.sd-page--ph .sd-checks {
  gap: 14px;
  padding-top: 0;
  margin-bottom: 36px;
}

.sd-page--ph .sd-checks li {
  font-size: 16px;
  line-height: 24px;
  color: #334155;
}

.sd-page--ph .sd-checks svg {
  margin-top: 4px;
}

.sd-page--ph .sd-btn__arrow {
  font-size: 14px;
  line-height: 20px;
}

/* media card: 16/10 image with a caption block below, not a dark overlay */
.sd-page--ph .sd-frame {
  border-radius: 12px;
  background: #fff;
}

.sd-page--ph .sd-frame__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f1f5f9;
}

.sd-page--ph .sd-frame__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-page--ph .sd-frame__caption {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid #f1f5f9;
  background: #fff;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--ph .sd-frame__caption .sd-pulse {
  margin-top: 4px;
  flex: none;
}

.sd-page--ph .sd-frame__label {
  display: inline;
  margin: 0;
  color: var(--sd-accent);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sd-page--ph .sd-frame__note {
  display: inline;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

/* the export's action row carries no extra top padding (the checklist's own
   margin supplies the gap) */
.sd-page--ph .sd-actions {
  padding-top: 0;
}

/* --- section shells ------------------------------------------------------- */
.sd-page--ph .sd-sect--editorial {
  padding: 64px 0;
  background: var(--sd-surface);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--ph .sd-sect--editorial .sd-split {
  gap: 40px;
  align-items: flex-start;
}

.sd-page--ph .sd-sect--caps,
.sd-page--ph .sd-sect--delivery,
.sd-page--ph .sd-sect--scope,
.sd-page--ph .sd-sect--who,
.sd-page--ph .sd-sect--areas {
  padding: 80px 0;
}

.sd-page--ph .sd-sect--delivery {
  background: var(--sd-surface);
  border-bottom: 1px solid var(--sd-line);
}

.sd-page--ph .sd-sect--who {
  background: var(--sd-surface);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--ph .sd-head {
  max-width: 768px;
}

.sd-page--ph .sd-h2 {
  letter-spacing: normal;
  color: #0f172a;
}

.sd-page--ph .sd-h2--xl {
  font-weight: 700;
}

.sd-page--ph .sd-h2--md {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.sd-page--ph .sd-rule {
  margin: 16px 0 24px;
  background: var(--sd-accent);
}

.sd-page--ph .sd-split__body {
  line-height: 24px;
}

.sd-page--ph .sd-split__body > p + p {
  margin-top: 16px;
}

.sd-page--ph .sd-head__lede {
  line-height: 26px;
}

/* --- practice architecture ------------------------------------------------ */
.sd-page--ph .sd-card__no {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--ph .sd-card__foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sd-line-soft);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--sd-slate-500);
}

/* --- textured mandate band ------------------------------------------------ */
.sd-page--ph .sd-quote {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
}

.sd-page--ph .sd-quote__inner {
  position: relative;
  z-index: 10;
  max-width: 896px;
  margin-inline: auto;
}

.sd-page--ph .sd-quote__pill {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #34d399;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.2px;
}

.sd-page--ph .sd-quote__title {
  margin: 0 0 24px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #fff;
}

.sd-page--ph .sd-quote__note {
  margin: 0 auto;
  font-size: 16px;
  line-height: 24px;
  color: #cbd5e1;
}

.sd-quote__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- practical scope: include tiles --------------------------------------- */
.sd-page--ph .sd-includes {
  gap: 24px;
}

.sd-page--ph .sd-include {
  gap: 14px;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--ph .sd-include__icon {
  margin-top: 8px;
  color: var(--sd-accent);
}

.sd-page--ph .sd-include__title {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #0f172a;
}

.sd-page--ph .sd-include__body {
  font-size: 12px;
  line-height: 19.5px;
  color: var(--sd-slate-600);
}

/* --- consultation intake --------------------------------------------------- */
.sd-page--ph .sd-cta {
  padding: 24px 0;
}

.sd-page--ph .sd-cta__row {
  padding: 0 32px;
}

.sd-page--ph .sd-sect--who .sd-head__lede {
  font-size: 16px;
  line-height: 24px;
}

.sd-page--ph .sd-step__no {
  margin-bottom: 4px;
}

.sd-page--ph .sd-step__title {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 16px;
}

.sd-page--ph .sd-cta__note {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted-on-dark);
}

.sd-page--ph .sd-cta__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.sd-page--ph .sd-btn--cta {
  padding: 10px 24px;
  font-weight: 600;
}

/* --- delivery methodology ------------------------------------------------- */
.sd-page--ph .sd-sect--delivery .sd-head {
  margin-bottom: 48px;
}

.sd-page--ph .sd-step {
  padding: 20px;
}

.sd-page--ph .sd-step__no {
  font-family: inherit;
}

.sd-page--ph .sd-step__title {
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--ph .sd-step--final {
  border-width: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--ph .sd-step--final .sd-step__body {
  color: rgba(236, 253, 245, 0.9);
}

.sd-page--ph .sd-step--final .sd-step__foot {
  border-top-color: rgba(16, 185, 129, 0.5);
  color: #fff;
}

/* --- practical scope ------------------------------------------------------ */
.sd-page--ph .sd-callout__title {
  color: #065f46;
}

.sd-page--ph .sd-callout__body {
  color: rgba(6, 78, 59, 0.9);
}

/* --- institutional stakeholders ------------------------------------------- */
.sd-page--ph .sd-who__badge {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 2px 10px;
  border: 1px solid var(--sd-accent-line);
  border-radius: 4px;
  background: var(--sd-accent-soft);
  color: #065f46;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

/* --- interconnected practice areas ---------------------------------------- */
.sd-page--ph .sd-areas__head {
  padding-bottom: 24px;
}

.sd-page--ph .sd-link {
  font-weight: 600;
}

.sd-page--ph .sd-areas__foot {
  font-weight: 500;
  color: var(--sd-slate-600);
}

.sd-page--ph .sd-areas__foot a:hover {
  color: #0f172a;
}

/* --- page 03 responsive layout -------------------------------------------- */
@media (min-width: 640px) {
  .sd-page--ph .sd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--ph .sd-includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .sd-page--ph .sd-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--ph .sd-includes,
  .sd-page--ph .sd-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sd-page--ph .sd-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
  }
  .sd-page--ph .sd-hero__copy {
    grid-column: span 7;
  }
  .sd-page--ph .sd-hero__media {
    grid-column: span 5;
  }
  .sd-page--ph .sd-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sd-page--ph .sd-split--wide .sd-split__aside {
    grid-column: span 5;
  }
  .sd-page--ph .sd-split--wide .sd-split__body {
    grid-column: span 7;
  }
  .sd-page--ph .sd-caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .sd-page--ph .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
  .sd-page--ph .sd-who {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--ph .sd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- page 03 (Public Health & Health Systems Strengthening) card + step metrics
       measured from the approved Stitch screen's computed geometry.
       The export keeps Tailwind's default emerald ramp (no theme override), so the
       icon tint stays on the page accent while sizes follow `p-6/sm:p-7` and
       `w-10 h-10`. ---------------------------------------------------------------- */
.sd-page--ph .sd-card {
  padding: 28px;
  justify-content: space-between;
}

.sd-page--ph .sd-card__top {
  height: 40px;
  margin-bottom: 20px;
}

.sd-page--ph .sd-card__icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 4px;
}

.sd-page--ph .sd-card__icon svg {
  width: 20px;
  height: 20px;
}

.sd-page--ph .sd-card__no {
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
}

.sd-page--ph .sd-card__title {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 24.75px;
  letter-spacing: normal;
  color: #0f172a;
}

.sd-page--ph .sd-card__body {
  margin-bottom: 24px;
}

.sd-page--ph .sd-card__foot {
  margin-top: 0;
}

.sd-page--ph .sd-step__body {
  margin-bottom: 24px;
}

.sd-page--ph .sd-step__foot {
  margin-top: 0;
}

/* --- page 03 measured corrections ------------------------------------------
   Each value below is the export's own computed geometry (see tools/ref-ph.txt):
   the caps heading pair uses `mb-4` (16px) with a flush lede, the stakeholder
   cards are `flex flex-col justify-start`, the practice-area ribbon centres its
   action link, and the consultation band's indicator is the export's `w-10 h-10`. */
.sd-page--ph .sd-sect--caps .sd-head .sd-h2 {
  margin-bottom: 16px;
}

.sd-page--ph .sd-sect--caps .sd-head__lede {
  margin-top: 0;
}

.sd-page--ph .sd-who__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.sd-page--ph .sd-areas__head {
  align-items: center;
}

.sd-page--ph .sd-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--ph .sd-area__no {
  display: block;
  margin-bottom: 8px;
  font-family: inherit;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.sd-page--ph .sd-area__title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 24px;
  color: #0f172a;
}

.sd-page--ph .sd-area__body {
  margin-bottom: 24px;
}

.sd-page--ph .sd-area__cta {
  display: flex;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--sd-line-soft);
  font-weight: 600;
}

.sd-page--ph .sd-cta__icon {
  width: 40px;
  height: 40px;
  border-color: rgba(16, 185, 129, 0.3);
}

.sd-page--ph .sd-cta__icon svg {
  width: 20px;
  height: 20px;
}

.sd-page--ph .sd-cta__title {
  letter-spacing: normal;
}

/* --- page 03 remaining measured deltas ------------------------------------- */
.sd-page--ph .sd-split__note {
  margin-top: 16px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--sd-slate-600);
}

.sd-page--ph .sd-callout {
  margin-top: 0;
  background: #ecfdf5;
}

.sd-page--ph .sd-callout__title {
  color: #064e3b;
}

.sd-page--ph .sd-include__icon {
  margin-top: 2px;
}

.sd-page--ph .sd-card {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--ph .sd-btn--ghost {
  font-weight: 500;
}

/* --- page 03 delivery/stakeholder typography -------------------------------
   The export's light step cards carry `shadow-sm` with `text-slate-900`
   numerals/labels; the final dark card is flat and uses white/emerald-200. */
.sd-page--ph .sd-step {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--ph .sd-step--final {
  box-shadow: none;
}

.sd-page--ph .sd-step__no {
  color: #0f172a;
}

.sd-page--ph .sd-step__title {
  color: #0f172a;
}

.sd-page--ph .sd-step--final .sd-step__no {
  color: #fff;
}

.sd-page--ph .sd-step--final .sd-step__title {
  color: #a7f3d0;
}

.sd-page--ph .sd-who__title {
  color: #0f172a;
}

/* the stakeholder badge is `inline-block` in the export: it must hug its label
   instead of stretching as a flex child */
.sd-page--ph .sd-who__card {
  align-items: flex-start;
}

.sd-page--ph .sd-areas__foot a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The export's `text-3xl sm:text-4xl ... tracking-tight` headings keep Tailwind's
   -0.025em tracking (-0.9px at 36px); only the `text-2xl` variant is untracked. */
.sd-page--ph .sd-h2--xl {
  letter-spacing: -0.9px;
}

/* --- page 03 mobile scale ---------------------------------------------------
   The export's hero uses `text-4xl sm:text-5xl` (36px below 640px) and its
   practice-area foot stacks below `sm`, so the page keeps the export's own
   small-screen geometry instead of overflowing. */
@media (max-width: 639px) {
  .sd-page--ph .sd-hero__title {
    font-size: 36px;
    line-height: 40px;
  }

  .sd-page--ph .sd-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }

  .sd-page--ph .sd-areas__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================================
   PAGE 04 — RESEARCH, MONITORING & EVALUATION
   ============================================================
   Reconstructed from stitch.ui/RESEARCH, MONITORING & EVALUATION.ui/.
   Every value below is the export's own computed geometry (tools/ref-rm.txt):
   the gutter is `px-6` (24px) on the section with a `max-w-7xl` container, the
   brand green is #1b7a43 with the `brand-green-light` tint #e8f5ed, and four
   sections carry Tailwind's unmapped `py-18` utility, i.e. genuinely 0px of
   vertical padding in the approved reference.
   ============================================================ */

.sd-page--rm {
  --sd-ink: #0b1b3d;
  --sd-green: #1b7a43;
  --sd-accent: #1b7a43;
  --sd-accent-strong: #1b7a43;
  --sd-accent-mid: #1b7a43;
  --sd-accent-bright: #1b7a43;
  --sd-accent-deep: #1b7a43;
  --sd-accent-text: #a7f3d0;
  --sd-accent-soft: #e8f5ed;
  --sd-accent-soft-2: #e8f5ed;
  --sd-accent-line: #1b7a43;
  --sd-band: #0b1b3d;
  --sd-cta-bg: #060f22;
}

/* --- section shells ------------------------------------------------------- */
.sd-page--rm .sd-wrap {
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
}

.sd-page--rm .sd-sect--hero {
  padding-bottom: 56px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--rm .sd-sect--editorial {
  padding: 64px 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--rm .sd-sect--caps {
  padding: 0 24px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--rm .sd-sect--delivery {
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--rm .sd-sect--evidence {
  padding: 64px 24px;
  background: #08152e;
  border-bottom: 1px solid #1e293b;
}

.sd-page--rm .sd-sect--scope {
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--rm .sd-sect--who {
  padding: 0 24px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--rm .sd-sect--areas {
  padding: 64px 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

/* --- breadcrumb ----------------------------------------------------------- */
.sd-page--rm .sd-crumb {
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  color: #64748b;
}

.sd-page--rm .sd-crumb .sd-wrap {
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
}

.sd-page--rm .sd-crumb__trail {
  gap: 8px;
}

.sd-page--rm .sd-crumb__trail a,
.sd-page--rm .sd-crumb__trail span[aria-hidden="true"] {
  color: #64748b;
}

.sd-page--rm .sd-crumb__trail a:hover {
  color: var(--sd-green);
}

.sd-page--rm .sd-crumb__current {
  color: #1e293b;
  font-weight: 600;
}

.sd-page--rm .sd-crumb__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sd-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
}

.sd-page--rm .sd-crumb__tag .sd-pill__dot {
  width: 8px;
  height: 8px;
  background: var(--sd-green);
}

/* --- hero ----------------------------------------------------------------- */
.sd-page--rm .sd-hero__copy > * + * {
  margin-top: 24px;
}

.sd-page--rm .sd-pill {
  gap: 8px;
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  background: #e8f5ed;
  color: var(--sd-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--rm .sd-pill__dot {
  width: 6px;
  height: 6px;
  background: var(--sd-green);
}

.sd-page--rm .sd-hero__title {
  font-size: 44px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -1.1px;
  color: #0b1b3d;
}

.sd-page--rm .sd-hero__title span {
  color: var(--sd-green);
}

.sd-page--rm .sd-hero__lede {
  max-width: 672px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #475569;
}

.sd-page--rm .sd-checks {
  gap: 10px;
  padding-top: 8px;
}

.sd-page--rm .sd-checks li {
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #334155;
}

.sd-page--rm .sd-checks svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--sd-green);
}

.sd-page--rm .sd-actions {
  gap: 16px;
  padding-top: 16px;
}

.sd-page--rm .sd-btn {
  padding: 12px 28px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: normal;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--rm .sd-btn--ghost {
  padding: 12px 24px;
  border: 1px solid #cbd5e1;
  background: transparent;
  color: #334155;
  font-weight: 600;
  box-shadow: none;
}

.sd-page--rm .sd-btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* media card: 420px image with the navy caption bar overlaid on the bottom */
.sd-page--rm .sd-frame {
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 8px;
  background: #f1f5f9;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.sd-page--rm .sd-frame__media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.sd-page--rm .sd-frame__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 27, 61, 0.9);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
}

.sd-page--rm .sd-frame__caption .sd-pulse {
  width: 8px;
  height: 8px;
  margin-top: 0;
  /* the export's dot is a plain flex item, so it shrinks with the caption text */
  flex: 0 1 8px;
  background: var(--sd-green);
}

.sd-page--rm .sd-frame__label {
  display: inline;
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: #e2e8f0;
}

.sd-page--rm .sd-frame__note {
  display: inline;
  font-size: 12px;
  line-height: 16px;
  color: #cbd5e1;
}

/* --- editorial context ---------------------------------------------------- */
.sd-page--rm .sd-sect--editorial .sd-split {
  gap: 48px;
  align-items: flex-start;
}

.sd-page--rm .sd-split__aside > * + * {
  margin-top: 12px;
}

/* The export's eyebrows are *inline* spans, so each sits in the parent block's
   own 24px strut line box. Rendering them as blocks drops 8px from every
   section head and shifts everything below it. */
.sd-page--rm .sd-eyebrow {
  display: inline;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--sd-green);
}

.sd-page--rm .sd-h2 {
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #0b1b3d;
}

.sd-page--rm .sd-sect--editorial .sd-h2 {
  font-size: 30px;
  line-height: 37.5px;
}

.sd-page--rm .sd-rule {
  width: 48px;
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--sd-green);
}

.sd-page--rm .sd-split__body {
  font-size: 16px;
  line-height: 26px;
  color: #475569;
}

.sd-page--rm .sd-split__body > p + p {
  margin-top: 16px;
}

.sd-page--rm .sd-split__body strong {
  font-weight: 700;
  color: #0b1b3d;
}

/* --- shared section head -------------------------------------------------- */
.sd-page--rm .sd-head {
  max-width: 768px;
  margin-bottom: 48px;
}

.sd-page--rm .sd-head > * + * {
  margin-top: 8px;
}

.sd-page--rm .sd-head .sd-h2,
.sd-page--rm .sd-head__lede {
  margin-top: 8px;
}

.sd-page--rm .sd-sect--caps .sd-h2,
.sd-page--rm .sd-sect--delivery .sd-h2,
.sd-page--rm .sd-sect--who .sd-h2 {
  font-size: 30px;
  line-height: 36px;
}

.sd-page--rm .sd-head__lede {
  font-size: 16px;
  line-height: 24px;
  color: #475569;
}

/* --- practice architecture (caps) ----------------------------------------- */
.sd-page--rm .sd-caps {
  gap: 24px;
  list-style: none;
}

.sd-page--rm .sd-card {
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fff;
  justify-content: space-between;
}

/* the export's content wrapper is `space-y-4` over the icon row and the
   title/body group, with `mt-2` inside that group */
.sd-page--rm .sd-card__main {
  display: block;
}

.sd-page--rm .sd-card__top {
  height: 40px;
  margin-bottom: 16px;
  align-items: center;
}

.sd-page--rm .sd-card__icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: #e8f5ed;
  color: var(--sd-green);
}

.sd-page--rm .sd-card__icon svg {
  width: 20px;
  height: 20px;
}

.sd-page--rm .sd-card__no {
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.sd-page--rm .sd-card__title {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: normal;
  color: #0b1b3d;
}

.sd-page--rm .sd-card__body {
  margin-top: 0;
  font-size: 14px;
  line-height: 20px;
  color: #475569;
}

.sd-page--rm .sd-card__foot {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: #64748b;
}

/* --- advisory mandate band ------------------------------------------------ */
.sd-page--rm .sd-quote {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
  background: #0b1b3d;
  color: #fff;
}

.sd-page--rm .sd-quote__media {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.sd-page--rm .sd-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the export stacks a fully-opaque navy gradient over the texture */
.sd-page--rm .sd-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0b1b3d, rgba(11, 27, 61, 0.95), #0b1b3d);
  pointer-events: none;
}

.sd-page--rm .sd-quote__inner {
  position: relative;
  z-index: 10;
  display: block;
  max-width: 1024px;
  margin-inline: auto;
  text-align: center;
}

.sd-page--rm .sd-quote__inner > * + * {
  margin-top: 24px;
}

.sd-page--rm .sd-quote .sd-eyebrow {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  color: #34d399;
}

.sd-page--rm .sd-quote__title {
  max-width: 896px;
  margin: 24px auto 0;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.9px;
  color: #fff;
}

.sd-page--rm .sd-quote__note {
  max-width: 672px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 24px;
  color: #cbd5e1;
}

/* --- delivery methodology ------------------------------------------------- */
.sd-page--rm .sd-steps {
  gap: 16px;
  list-style: none;
}

.sd-page--rm .sd-step {
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

/* inline in the export (the `space-y-2` gaps live on the following siblings) */
.sd-page--rm .sd-step__no {
  display: inline;
  font-family: inherit;
  margin-bottom: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 900;
  color: #0b1b3d;
}

.sd-page--rm .sd-step__title {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.sd-page--rm .sd-step__body {
  padding-top: 4px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--rm .sd-step__foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--rm .sd-step--final {
  border-color: var(--sd-green);
  background: var(--sd-green);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--rm .sd-step--final .sd-step__no {
  color: #fff;
}

.sd-page--rm .sd-step--final .sd-step__title {
  color: #ffffff;
}

.sd-page--rm .sd-step--final .sd-step__body {
  color: #d1fae5;
}

.sd-page--rm .sd-step--final .sd-step__foot {
  border-top-color: rgba(5, 150, 105, 0.5);
  color: #fff;
}

/* --- evidence architecture ------------------------------------------------ */
.sd-page--rm .sd-sect--evidence .sd-head {
  margin-bottom: 40px;
  max-width: 768px;
}

.sd-page--rm .sd-sect--evidence .sd-eyebrow {
  color: #34d399;
}

.sd-page--rm .sd-sect--evidence .sd-h2 {
  font-size: 30px;
  line-height: 36px;
  color: #fff;
}

.sd-page--rm .sd-sect--evidence .sd-head__lede {
  font-size: 14px;
  line-height: 20px;
  color: #cbd5e1;
}

.sd-page--rm .sd-evi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  position: relative;
  list-style: none;
}

.sd-page--rm .sd-evi__item {
  padding: 24px;
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 8px;
  background: rgba(20, 42, 89, 0.6);
}

.sd-page--rm .sd-evi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sd-page--rm .sd-evi__no {
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  color: #34d399;
}

.sd-page--rm .sd-evi__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--sd-green);
}

.sd-page--rm .sd-evi__title {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.45px;
  color: #fff;
}

.sd-page--rm .sd-evi__body {
  margin-top: 12px;
  font-size: 12px;
  line-height: 19.5px;
  color: #cbd5e1;
}

.sd-page--rm .sd-evi__item--final {
  border-color: rgba(27, 122, 67, 0.6);
  background: rgba(27, 122, 67, 0.2);
}

.sd-page--rm .sd-evi__item--final .sd-evi__no {
  color: #34d399;
}

.sd-page--rm .sd-evi__item--final .sd-evi__dot {
  background: #34d399;
}

.sd-page--rm .sd-evi__item--final .sd-evi__title {
  color: #6ee7b7;
}

.sd-page--rm .sd-evi__item--final .sd-evi__body {
  color: #e2e8f0;
}

/* --- practical scope ------------------------------------------------------ */
.sd-page--rm .sd-split--wide {
  gap: 48px;
  align-items: flex-start;
}

.sd-page--rm .sd-split__aside > div > .sd-h2 {
  margin-top: 4px;
  font-size: 30px;
  line-height: 36px;
}

.sd-page--rm .sd-split__note {
  margin-top: 24px;
  font-size: 16px;
  line-height: 24px;
  color: #475569;
}

.sd-page--rm .sd-callout {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.sd-page--rm .sd-callout__title {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sd-green);
}

.sd-page--rm .sd-callout__body {
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--rm .sd-includes {
  gap: 16px;
  list-style: none;
}

.sd-page--rm .sd-include {
  display: block;
  padding: 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.sd-page--rm .sd-include__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-page--rm .sd-include__icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
  color: var(--sd-green);
}

.sd-page--rm .sd-include__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--rm .sd-include__body {
  margin-top: 8px;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

/* --- institutional stakeholders ------------------------------------------- */
.sd-page--rm .sd-who {
  gap: 24px;
  list-style: none;
}

.sd-page--rm .sd-who__card {
  display: block;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.sd-page--rm .sd-who__badge {
  display: inline;
  width: auto;
  height: auto;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sd-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  letter-spacing: normal;
}

.sd-page--rm .sd-who__title {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--rm .sd-who__body {
  margin-top: 12px;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

/* --- interconnected practice areas ---------------------------------------- */
.sd-page--rm .sd-areas__head {
  align-items: flex-end;
  margin-bottom: 40px;
  padding-bottom: 0;
  border-bottom: 0;
}

.sd-page--rm .sd-areas__head .sd-h2 {
  margin-top: 4px;
  font-size: 30px;
  line-height: 36px;
}

.sd-page--rm .sd-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--sd-green);
}

.sd-page--rm .sd-link__arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

.sd-page--rm .sd-areas {
  gap: 24px;
  list-style: none;
}

/* the export's card is a plain block: the label is inline (24px strut line box)
   and the closing link is an inline-flex, so it sits on the text baseline */
.sd-page--rm .sd-area {
  display: block;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.sd-page--rm .sd-area__main {
  display: block;
}

/* inline in the export, so the label sits in the parent's 24px strut line box */
.sd-page--rm .sd-area__no {
  display: inline;
  font-family: inherit;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.sd-page--rm .sd-area__title {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--rm .sd-area__body {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--rm .sd-area__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--rm .sd-area__arrow {
  width: 12px;
  height: 12px;
  flex: none;
}

.sd-page--rm .sd-areas__foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.sd-page--rm .sd-areas__foot a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  text-decoration: none;
}

.sd-page--rm .sd-areas__foot a:hover {
  color: #0b1b3d;
}

/* --- consultation intake --------------------------------------------------- */
.sd-page--rm .sd-cta {
  padding: 48px 24px;
  background: #060f22;
  border-top: 0;
  border-bottom: 1px solid #1e293b;
}

.sd-page--rm .sd-cta__row {
  gap: 24px;
}

.sd-page--rm .sd-cta__lead {
  display: block;
}

.sd-page--rm .sd-cta__lead > * + * {
  margin-top: 6px;
}

.sd-page--rm .sd-cta__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-page--rm .sd-cta__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 9999px;
  background: var(--sd-green);
}

.sd-page--rm .sd-cta__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: #fff;
}

.sd-page--rm .sd-cta__note {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-on-dark);
}

.sd-page--rm .sd-btn--cta {
  padding: 14px 32px;
  font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--rm .sd-cta__arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

/* the hero column rhythm is `space-y-6`: the actions row's own pt-4 is additive */
.sd-page--rm .sd-hero__copy > .sd-actions {
  margin-top: 24px;
}

/* --- page 04 interaction states -------------------------------------------
   Hover treatments as authored in the export; the static screenshots cannot
   show them, so they are taken straight from the reference's utility classes. */
.sd-page--rm .sd-card:hover {
  border-color: rgba(27, 122, 67, 0.4);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--rm .sd-card:hover .sd-card__title {
  color: var(--sd-green);
}

.sd-page--rm .sd-step:hover,
.sd-page--rm .sd-step--final:hover {
  border-color: var(--sd-green);
}

.sd-page--rm .sd-include:hover {
  border-color: #cbd5e1;
}

.sd-page--rm .sd-area:hover {
  border-color: rgba(27, 122, 67, 0.5);
}

.sd-page--rm .sd-area:hover .sd-area__title,
.sd-page--rm .sd-area:hover .sd-area__cta {
  color: var(--sd-green);
}

.sd-page--rm .sd-link:hover {
  text-decoration: underline;
}

/* --- page 04 responsive layout --------------------------------------------
   The export uses `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3/4/5`; below 640px
   the hero title drops to `text-4xl` and the practice-area foot stacks. */
@media (min-width: 640px) {
  .sd-page--rm .sd-frame__media img {
    height: 420px;
  }
  .sd-page--rm .sd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--rm .sd-includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--rm .sd-who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .sd-page--rm .sd-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--rm .sd-evi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--rm .sd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sd-page--rm .sd-areas__head {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .sd-page--rm .sd-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
    /* top-aligned so the canonical first-content offset is exact */
    align-items: start;
  }
  .sd-page--rm .sd-hero__copy {
    grid-column: span 7;
  }
  .sd-page--rm .sd-hero__media {
    grid-column: span 5;
  }
  .sd-page--rm .sd-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sd-page--rm .sd-split__aside {
    grid-column: span 5;
  }
  .sd-page--rm .sd-split__body {
    grid-column: span 7;
  }
  .sd-page--rm .sd-caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .sd-page--rm .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
  .sd-page--rm .sd-who {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--rm .sd-cta__row {
    flex-direction: row;
    text-align: left;
  }
  .sd-page--rm .sd-cta__lead {
    text-align: left;
  }
}

@media (max-width: 639px) {
  .sd-page--rm .sd-hero__title {
    font-size: 36px;
    line-height: 40px;
  }
  .sd-page--rm .sd-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }
  .sd-page--rm .sd-areas__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sd-page--rm .sd-cta__row {
    align-items: center;
    text-align: center;
  }
  .sd-page--rm .sd-cta__head {
    justify-content: center;
  }
}

/* ============================================================
   PAGE 05 — INTERNATIONAL ADVISORY SERVICES
   ============================================================
   Reconstructed from stitch.ui/INTERNATIONAL ADVISORY SERVICES.UI/.
   Same section skeleton and gutter rules as page 04; the deltas are the
   `text-emerald-700` hero accent and the related-practice card family.
   ============================================================ */
.sd-page--ia {
  --sd-ink: #0b1b3d;
  --sd-green: #1b7a43;
  --sd-accent: #1b7a43;
  --sd-accent-strong: #1b7a43;
  --sd-accent-mid: #1b7a43;
  --sd-accent-bright: #1b7a43;
  --sd-accent-deep: #1b7a43;
  --sd-accent-text: #a7f3d0;
  --sd-accent-soft: #e8f5ed;
  --sd-accent-soft-2: #e8f5ed;
  --sd-accent-line: #1b7a43;
  --sd-band: #0b1b3d;
  --sd-cta-bg: #060f22;
}

/* --- section shells ------------------------------------------------------- */
.sd-page--ia .sd-wrap {
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
}

.sd-page--ia .sd-sect--hero {
  padding-bottom: 56px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--ia .sd-sect--editorial {
  padding: 64px 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--ia .sd-sect--caps {
  padding: 0 24px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--ia .sd-sect--delivery {
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--ia .sd-sect--evidence {
  padding: 64px 24px;
  background: #08152e;
  border-bottom: 1px solid #1e293b;
}

.sd-page--ia .sd-sect--scope {
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--ia .sd-sect--who {
  padding: 0 24px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--ia .sd-sect--areas {
  padding: 64px 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

/* --- breadcrumb ----------------------------------------------------------- */
.sd-page--ia .sd-crumb {
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  color: #64748b;
}

.sd-page--ia .sd-crumb .sd-wrap {
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
}

.sd-page--ia .sd-crumb__trail {
  gap: 8px;
}

.sd-page--ia .sd-crumb__trail a,
.sd-page--ia .sd-crumb__trail span[aria-hidden="true"] {
  color: #64748b;
}

.sd-page--ia .sd-crumb__trail a:hover {
  color: var(--sd-green);
}

.sd-page--ia .sd-crumb__current {
  color: #1e293b;
  font-weight: 600;
}

.sd-page--ia .sd-crumb__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sd-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
}

.sd-page--ia .sd-crumb__tag .sd-pill__dot {
  width: 8px;
  height: 8px;
  background: var(--sd-green);
}

/* --- hero ----------------------------------------------------------------- */
.sd-page--ia .sd-hero__copy > * + * {
  margin-top: 24px;
}

.sd-page--ia .sd-pill {
  gap: 8px;
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  background: #e8f5ed;
  color: var(--sd-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--ia .sd-pill__dot {
  width: 6px;
  height: 6px;
  background: var(--sd-green);
}

.sd-page--ia .sd-hero__title {
  font-size: 44px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -1.1px;
  color: #0b1b3d;
}

.sd-page--ia .sd-hero__title span {
  color: var(--sd-green);
}

/* the export colours this headline's closing phrase `text-emerald-700` */
.sd-page--ia .sd-hero__title span.sd-hero__accent {
  color: #047857;
}

.sd-page--ia .sd-hero__lede {
  max-width: 672px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #475569;
}

.sd-page--ia .sd-checks {
  gap: 10px;
  padding-top: 8px;
}

.sd-page--ia .sd-checks li {
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #334155;
}

.sd-page--ia .sd-checks svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--sd-green);
}

.sd-page--ia .sd-actions {
  gap: 16px;
  padding-top: 16px;
}

.sd-page--ia .sd-btn {
  padding: 12px 28px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: normal;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--ia .sd-btn--ghost {
  padding: 12px 24px;
  border: 1px solid #cbd5e1;
  background: transparent;
  color: #334155;
  font-weight: 600;
  box-shadow: none;
}

.sd-page--ia .sd-btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* media card: 420px image with the navy caption bar overlaid on the bottom */
.sd-page--ia .sd-frame {
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 8px;
  background: #f1f5f9;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.sd-page--ia .sd-frame__media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.sd-page--ia .sd-frame__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 27, 61, 0.9);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
}

.sd-page--ia .sd-frame__caption .sd-pulse {
  width: 8px;
  height: 8px;
  margin-top: 0;
  /* the export's dot is a plain flex item, so it shrinks with the caption text */
  flex: 0 1 8px;
  background: var(--sd-green);
}

.sd-page--ia .sd-frame__label {
  display: inline;
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: #e2e8f0;
}

.sd-page--ia .sd-frame__note {
  display: inline;
  font-size: 12px;
  line-height: 16px;
  color: #cbd5e1;
}

/* --- editorial context ---------------------------------------------------- */
.sd-page--ia .sd-sect--editorial .sd-split {
  gap: 48px;
  align-items: flex-start;
}

.sd-page--ia .sd-split__aside > * + * {
  margin-top: 12px;
}

/* The export's eyebrows are *inline* spans, so each sits in the parent block's
   own 24px strut line box. Rendering them as blocks drops 8px from every
   section head and shifts everything below it. */
.sd-page--ia .sd-eyebrow {
  display: inline;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--sd-green);
}

.sd-page--ia .sd-h2 {
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #0b1b3d;
}

.sd-page--ia .sd-sect--editorial .sd-h2 {
  font-size: 30px;
  line-height: 37.5px;
}

.sd-page--ia .sd-rule {
  width: 48px;
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--sd-green);
}

.sd-page--ia .sd-split__body {
  font-size: 16px;
  line-height: 26px;
  color: #475569;
}

.sd-page--ia .sd-split__body > p + p {
  margin-top: 16px;
}

.sd-page--ia .sd-split__body strong {
  font-weight: 700;
  color: #0b1b3d;
}

/* --- shared section head -------------------------------------------------- */
.sd-page--ia .sd-head {
  max-width: 768px;
  margin-bottom: 48px;
}

.sd-page--ia .sd-head > * + * {
  margin-top: 8px;
}

.sd-page--ia .sd-head .sd-h2,
.sd-page--ia .sd-head__lede {
  margin-top: 8px;
}

.sd-page--ia .sd-sect--caps .sd-h2,
.sd-page--ia .sd-sect--delivery .sd-h2,
.sd-page--ia .sd-sect--who .sd-h2 {
  font-size: 30px;
  line-height: 36px;
}

.sd-page--ia .sd-head__lede {
  font-size: 16px;
  line-height: 24px;
  color: #475569;
}

/* --- practice architecture (caps) ----------------------------------------- */
.sd-page--ia .sd-caps {
  gap: 24px;
  list-style: none;
}

.sd-page--ia .sd-card {
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fff;
  justify-content: space-between;
}

/* the export's content wrapper is `space-y-4` over the icon row and the
   title/body group, with `mt-2` inside that group */
.sd-page--ia .sd-card__main {
  display: block;
}

.sd-page--ia .sd-card__top {
  height: 40px;
  margin-bottom: 16px;
  align-items: center;
}

.sd-page--ia .sd-card__icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: #e8f5ed;
  color: var(--sd-green);
}

.sd-page--ia .sd-card__icon svg {
  width: 20px;
  height: 20px;
}

.sd-page--ia .sd-card__no {
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.sd-page--ia .sd-card__title {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: normal;
  color: #0b1b3d;
}

.sd-page--ia .sd-card__body {
  margin-top: 0;
  font-size: 14px;
  line-height: 20px;
  color: #475569;
}

.sd-page--ia .sd-card__foot {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: #64748b;
}

/* --- advisory mandate band ------------------------------------------------ */
.sd-page--ia .sd-quote {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
  background: #0b1b3d;
  color: #fff;
}

.sd-page--ia .sd-quote__media {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.sd-page--ia .sd-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the export stacks a fully-opaque navy gradient over the texture */
.sd-page--ia .sd-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0b1b3d, rgba(11, 27, 61, 0.95), #0b1b3d);
  pointer-events: none;
}

.sd-page--ia .sd-quote__inner {
  position: relative;
  z-index: 10;
  display: block;
  max-width: 1024px;
  margin-inline: auto;
  text-align: center;
}

.sd-page--ia .sd-quote__inner > * + * {
  margin-top: 24px;
}

.sd-page--ia .sd-quote .sd-eyebrow {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  color: #34d399;
}

.sd-page--ia .sd-quote__title {
  max-width: 896px;
  margin: 24px auto 0;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.9px;
  color: #fff;
}

.sd-page--ia .sd-quote__note {
  max-width: 672px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 24px;
  color: #cbd5e1;
}

/* --- delivery methodology ------------------------------------------------- */
.sd-page--ia .sd-steps {
  gap: 16px;
  list-style: none;
}

.sd-page--ia .sd-step {
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

/* inline in the export (the `space-y-2` gaps live on the following siblings) */
.sd-page--ia .sd-step__no {
  display: inline;
  font-family: inherit;
  margin-bottom: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 900;
  color: #0b1b3d;
}

.sd-page--ia .sd-step__title {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.sd-page--ia .sd-step__body {
  padding-top: 4px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--ia .sd-step__foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--ia .sd-step--final {
  border-color: var(--sd-green);
  background: var(--sd-green);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--ia .sd-step--final .sd-step__no {
  color: #fff;
}

.sd-page--ia .sd-step--final .sd-step__title {
  color: #ffffff;
}

.sd-page--ia .sd-step--final .sd-step__body {
  color: #d1fae5;
}

.sd-page--ia .sd-step--final .sd-step__foot {
  border-top-color: rgba(5, 150, 105, 0.5);
  color: #fff;
}

/* --- evidence architecture ------------------------------------------------ */
.sd-page--ia .sd-sect--evidence .sd-head {
  margin-bottom: 40px;
  max-width: 768px;
}

.sd-page--ia .sd-sect--evidence .sd-eyebrow {
  color: #34d399;
}

.sd-page--ia .sd-sect--evidence .sd-h2 {
  font-size: 30px;
  line-height: 36px;
  color: #fff;
}

.sd-page--ia .sd-sect--evidence .sd-head__lede {
  font-size: 14px;
  line-height: 20px;
  color: #cbd5e1;
}

.sd-page--ia .sd-evi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  position: relative;
  list-style: none;
}

.sd-page--ia .sd-evi__item {
  padding: 24px;
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 8px;
  background: rgba(20, 42, 89, 0.6);
}

.sd-page--ia .sd-evi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sd-page--ia .sd-evi__no {
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  color: #34d399;
}

.sd-page--ia .sd-evi__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--sd-green);
}

.sd-page--ia .sd-evi__title {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.45px;
  color: #fff;
}

.sd-page--ia .sd-evi__body {
  margin-top: 12px;
  font-size: 12px;
  line-height: 19.5px;
  color: #cbd5e1;
}

.sd-page--ia .sd-evi__item--final {
  border-color: rgba(27, 122, 67, 0.6);
  background: rgba(27, 122, 67, 0.2);
}

.sd-page--ia .sd-evi__item--final .sd-evi__no {
  color: #34d399;
}

.sd-page--ia .sd-evi__item--final .sd-evi__dot {
  background: #34d399;
}

.sd-page--ia .sd-evi__item--final .sd-evi__title {
  color: #6ee7b7;
}

.sd-page--ia .sd-evi__item--final .sd-evi__body {
  color: #e2e8f0;
}

/* --- practical scope ------------------------------------------------------ */
.sd-page--ia .sd-split--wide {
  gap: 48px;
  align-items: flex-start;
}

.sd-page--ia .sd-split__aside > div > .sd-h2 {
  margin-top: 4px;
  font-size: 30px;
  line-height: 36px;
}

.sd-page--ia .sd-split__note {
  margin-top: 24px;
  font-size: 16px;
  line-height: 24px;
  color: #475569;
}

.sd-page--ia .sd-callout {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.sd-page--ia .sd-callout__title {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sd-green);
}

.sd-page--ia .sd-callout__body {
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--ia .sd-includes {
  gap: 16px;
  list-style: none;
}

.sd-page--ia .sd-include {
  display: block;
  padding: 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.sd-page--ia .sd-include__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-page--ia .sd-include__icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
  color: var(--sd-green);
}

.sd-page--ia .sd-include__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--ia .sd-include__body {
  margin-top: 8px;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

/* --- institutional stakeholders ------------------------------------------- */
.sd-page--ia .sd-who {
  gap: 24px;
  list-style: none;
}

.sd-page--ia .sd-who__card {
  display: block;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.sd-page--ia .sd-who__badge {
  display: inline;
  width: auto;
  height: auto;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sd-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  letter-spacing: normal;
}

.sd-page--ia .sd-who__title {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--ia .sd-who__body {
  margin-top: 12px;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

/* --- interconnected practice areas ---------------------------------------- */
.sd-page--ia .sd-areas__head {
  align-items: flex-end;
  margin-bottom: 40px;
  padding-bottom: 0;
  border-bottom: 0;
}

.sd-page--ia .sd-areas__head .sd-h2 {
  margin-top: 8px;
  font-size: 30px;
  line-height: 36px;
}

.sd-page--ia .sd-areas__lede {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #475569;
}

.sd-page--ia .sd-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--sd-green);
}

.sd-page--ia .sd-link__arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

.sd-page--ia .sd-areas {
  gap: 24px;
  list-style: none;
}

/* the export's card is a plain block: the label is inline (24px strut line box)
   and the closing link is an inline-flex, so it sits on the text baseline */
/* the export's related-practice card is a `flex flex-col justify-between
   space-y-4` tile on the surface tint, with a ruled footer holding the link */
.sd-page--ia .sd-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #f8fafc;
}

.sd-page--ia .sd-area__main {
  display: block;
}

.sd-page--ia .sd-area__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  background: #e8f5ed;
  color: var(--sd-green);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.sd-page--ia .sd-area__title {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--ia .sd-area__body {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--ia .sd-area__foot {
  padding-top: 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
}

/* the export's link is `flex` (block-level), so it does not inherit the line
   box's strut height the way an inline-flex item would */
.sd-page--ia .sd-area__cta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--sd-green);
}

.sd-page--ia .sd-area__arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

.sd-page--ia .sd-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.sd-page--ia .sd-pager a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.sd-page--ia .sd-pager__prev {
  color: #475569;
}

.sd-page--ia .sd-pager__next {
  color: #0b1b3d;
}

.sd-page--ia .sd-pager a:hover {
  color: var(--sd-green);
}

.sd-page--ia .sd-pager__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* --- consultation intake --------------------------------------------------- */
.sd-page--ia .sd-cta {
  padding: 48px 24px;
  background: #060f22;
  border-top: 0;
  border-bottom: 1px solid #1e293b;
}

.sd-page--ia .sd-cta__row {
  gap: 24px;
}

.sd-page--ia .sd-cta__lead {
  display: block;
}

.sd-page--ia .sd-cta__lead > * + * {
  margin-top: 6px;
}

.sd-page--ia .sd-cta__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-page--ia .sd-cta__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 9999px;
  background: var(--sd-green);
}

.sd-page--ia .sd-cta__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: #fff;
}

.sd-page--ia .sd-cta__note {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-on-dark);
}

.sd-page--ia .sd-btn--cta {
  padding: 14px 32px;
  font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--ia .sd-cta__arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

/* the hero column rhythm is `space-y-6`: the actions row's own pt-4 is additive */
.sd-page--ia .sd-hero__copy > .sd-actions {
  margin-top: 24px;
}

/* --- page 04 interaction states -------------------------------------------
   Hover treatments as authored in the export; the static screenshots cannot
   show them, so they are taken straight from the reference's utility classes. */
.sd-page--ia .sd-card:hover {
  border-color: rgba(27, 122, 67, 0.4);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--ia .sd-card:hover .sd-card__title {
  color: var(--sd-green);
}

.sd-page--ia .sd-step:hover,
.sd-page--ia .sd-step--final:hover {
  border-color: var(--sd-green);
}

.sd-page--ia .sd-include:hover {
  border-color: #cbd5e1;
}

.sd-page--ia .sd-area:hover {
  border-color: rgba(27, 122, 67, 0.4);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--ia .sd-area:hover .sd-area__title {
  color: var(--sd-green);
}

.sd-page--ia .sd-link:hover {
  text-decoration: underline;
}

/* --- page 04 responsive layout --------------------------------------------
   The export uses `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3/4/5`; below 640px
   the hero title drops to `text-4xl` and the practice-area foot stacks. */
@media (min-width: 640px) {
  .sd-page--ia .sd-frame__media img {
    height: 420px;
  }
  .sd-page--ia .sd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--ia .sd-includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--ia .sd-who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .sd-page--ia .sd-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--ia .sd-evi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--ia .sd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sd-page--ia .sd-areas__head {
    flex-direction: row;
  }
}

/* The export's CTA row is `lg:flex-row`; the shared layer turns it into a row
   at 768px (correct for the pages whose export says `md:flex-row`), so undo it
   until 1024px here. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sd-page--ia .sd-cta__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sd-page--ia .sd-cta__head {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .sd-page--ia .sd-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
    /* top-aligned so the canonical first-content offset is exact */
    align-items: start;
  }
  .sd-page--ia .sd-hero__copy {
    grid-column: span 7;
  }
  .sd-page--ia .sd-hero__media {
    grid-column: span 5;
  }
  .sd-page--ia .sd-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sd-page--ia .sd-split__aside {
    grid-column: span 5;
  }
  .sd-page--ia .sd-split__body {
    grid-column: span 7;
  }
  .sd-page--ia .sd-caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .sd-page--ia .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
  .sd-page--ia .sd-who {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--ia .sd-cta__row {
    flex-direction: row;
    text-align: left;
  }
  .sd-page--ia .sd-cta__lead {
    text-align: left;
  }
}

@media (max-width: 639px) {
  .sd-page--ia .sd-hero__title {
    font-size: 36px;
    line-height: 40px;
  }
  .sd-page--ia .sd-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }
  .sd-page--ia .sd-pager {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sd-page--ia .sd-cta__row {
    align-items: center;
    text-align: center;
  }
  .sd-page--ia .sd-cta__head {
    justify-content: center;
  }
}


/* ============================================================
   PAGE 06 — LEADERSHIP & EXECUTIVE COACHING
   ============================================================
   Reconstructed from stitch.ui/LEADERSHIP & EXECUTIVE COACHING.UI/.
   The approved export declares the same section skeleton as page 05
   (byte-identical `<section>` class lists), so the page-05 geometry is the
   baseline; this block carries the page-06 accent palette, the leadership
   card/glyph family and the leadership-specific wraps.
   Deliberately absent: page-05's stakeholder grid, related-practice cards and
   prev/next pager — the approved page-06 export renders its practice-architecture
   grid and institutional-context panel a second time instead of those sections
   (see the report's STRUCTURE VERIFICATION REQUIRED entry).
   ============================================================ */
.sd-page--lc {
  --sd-ink: #0b1b3d;
  --sd-green: #1b7a43;
  --sd-accent: #1b7a43;
  --sd-accent-strong: #1b7a43;
  --sd-accent-mid: #1b7a43;
  --sd-accent-bright: #1b7a43;
  --sd-accent-deep: #1b7a43;
  --sd-accent-text: #a7f3d0;
  --sd-accent-soft: #e8f5ed;
  --sd-accent-soft-2: #e8f5ed;
  --sd-accent-line: #1b7a43;
  --sd-band: #0b1b3d;
  --sd-cta-bg: #060f22;
}

/* --- section shells ------------------------------------------------------- */
.sd-page--lc .sd-wrap {
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
}

.sd-page--lc .sd-sect--hero {
  padding-bottom: 56px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--lc .sd-sect--editorial {
  padding: 64px 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--lc .sd-sect--caps {
  padding: 0 24px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--lc .sd-sect--delivery {
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--lc .sd-sect--evidence {
  padding: 64px 24px;
  background: #08152e;
  border-bottom: 1px solid #1e293b;
}

.sd-page--lc .sd-sect--scope {
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

/* --- breadcrumb ----------------------------------------------------------- */
.sd-page--lc .sd-crumb {
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  color: #64748b;
}

.sd-page--lc .sd-crumb .sd-wrap {
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
}

.sd-page--lc .sd-crumb__trail {
  gap: 8px;
}

.sd-page--lc .sd-crumb__trail a,
.sd-page--lc .sd-crumb__trail span[aria-hidden="true"] {
  color: #64748b;
}

.sd-page--lc .sd-crumb__trail a:hover {
  color: var(--sd-green);
}

.sd-page--lc .sd-crumb__current {
  color: #1e293b;
  font-weight: 600;
}

.sd-page--lc .sd-crumb__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sd-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
}

.sd-page--lc .sd-crumb__tag .sd-pill__dot {
  width: 8px;
  height: 8px;
  background: var(--sd-green);
}

/* --- hero ----------------------------------------------------------------- */
.sd-page--lc .sd-hero__copy > * + * {
  margin-top: 24px;
}

.sd-page--lc .sd-pill {
  gap: 8px;
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  background: #e8f5ed;
  color: var(--sd-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--lc .sd-pill__dot {
  width: 6px;
  height: 6px;
  background: var(--sd-green);
}

.sd-page--lc .sd-hero__title {
  font-size: 44px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -1.1px;
  color: #0b1b3d;
}

.sd-page--lc .sd-hero__title span {
  color: var(--sd-green);
}

/* the export colours this headline's closing phrase `text-emerald-700` */
.sd-page--lc .sd-hero__title span.sd-hero__accent {
  color: #047857;
}

.sd-page--lc .sd-hero__lede {
  max-width: 672px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #475569;
}

.sd-page--lc .sd-checks {
  gap: 10px;
  padding-top: 8px;
}

.sd-page--lc .sd-checks li {
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #334155;
}

.sd-page--lc .sd-checks svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--sd-green);
}

.sd-page--lc .sd-actions {
  gap: 16px;
  padding-top: 16px;
}

.sd-page--lc .sd-btn {
  padding: 12px 28px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: normal;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--lc .sd-btn--ghost {
  padding: 12px 24px;
  border: 1px solid #cbd5e1;
  background: transparent;
  color: #334155;
  font-weight: 600;
  box-shadow: none;
}

.sd-page--lc .sd-btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* media card: 420px image with the navy caption bar overlaid on the bottom */
.sd-page--lc .sd-frame {
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 8px;
  background: #f1f5f9;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.sd-page--lc .sd-frame__media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.sd-page--lc .sd-frame__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 27, 61, 0.9);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
}

.sd-page--lc .sd-frame__caption .sd-pulse {
  width: 8px;
  height: 8px;
  margin-top: 0;
  /* the export's dot is a plain flex item, so it shrinks with the caption text */
  flex: 0 1 8px;
  background: var(--sd-green);
}

.sd-page--lc .sd-frame__label {
  display: inline;
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: #e2e8f0;
}

.sd-page--lc .sd-frame__note {
  display: inline;
  font-size: 12px;
  line-height: 16px;
  color: #cbd5e1;
}

/* --- editorial context ---------------------------------------------------- */
.sd-page--lc .sd-sect--editorial .sd-split {
  gap: 48px;
  align-items: flex-start;
}

.sd-page--lc .sd-split__aside > * + * {
  margin-top: 12px;
}

/* The export's eyebrows are *inline* spans, so each sits in the parent block's
   own 24px strut line box. Rendering them as blocks drops 8px from every
   section head and shifts everything below it. */
.sd-page--lc .sd-eyebrow {
  display: inline;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--sd-green);
}

.sd-page--lc .sd-h2 {
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #0b1b3d;
}

.sd-page--lc .sd-sect--editorial .sd-h2 {
  font-size: 30px;
  line-height: 37.5px;
}

.sd-page--lc .sd-rule {
  width: 48px;
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--sd-green);
}

.sd-page--lc .sd-split__body {
  font-size: 16px;
  line-height: 26px;
  color: #475569;
}

.sd-page--lc .sd-split__body > p + p {
  margin-top: 16px;
}

.sd-page--lc .sd-split__body strong {
  font-weight: 700;
  color: #0b1b3d;
}

/* --- shared section head -------------------------------------------------- */
.sd-page--lc .sd-head {
  max-width: 768px;
  margin-bottom: 48px;
}

.sd-page--lc .sd-head > * + * {
  margin-top: 8px;
}

.sd-page--lc .sd-head .sd-h2,
.sd-page--lc .sd-head__lede {
  margin-top: 8px;
}

.sd-page--lc .sd-head__lede {
  font-size: 16px;
  line-height: 24px;
  color: #475569;
}

/* --- practice architecture (caps) ----------------------------------------- */
.sd-page--lc .sd-caps {
  gap: 24px;
  list-style: none;
}

.sd-page--lc .sd-card {
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fff;
  justify-content: space-between;
}

/* the export's content wrapper is `space-y-4` over the icon row and the
   title/body group, with `mt-2` inside that group */
.sd-page--lc .sd-card__main {
  display: block;
}

.sd-page--lc .sd-card__top {
  height: 40px;
  margin-bottom: 16px;
  align-items: center;
}

.sd-page--lc .sd-card__icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: #e8f5ed;
  color: var(--sd-green);
}

.sd-page--lc .sd-card__icon svg {
  width: 20px;
  height: 20px;
}

.sd-page--lc .sd-card__no {
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.sd-page--lc .sd-card__title {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: normal;
  color: #0b1b3d;
}

.sd-page--lc .sd-card__body {
  margin-top: 0;
  font-size: 14px;
  line-height: 20px;
  color: #475569;
}

.sd-page--lc .sd-card__foot {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: #64748b;
}

/* --- advisory mandate band ------------------------------------------------ */
.sd-page--lc .sd-quote {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
  background: #0b1b3d;
  color: #fff;
}

.sd-page--lc .sd-quote__media {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.sd-page--lc .sd-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the export stacks a fully-opaque navy gradient over the texture */
.sd-page--lc .sd-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0b1b3d, rgba(11, 27, 61, 0.95), #0b1b3d);
  pointer-events: none;
}

.sd-page--lc .sd-quote__inner {
  position: relative;
  z-index: 10;
  display: block;
  max-width: 1024px;
  margin-inline: auto;
  text-align: center;
}

.sd-page--lc .sd-quote__inner > * + * {
  margin-top: 24px;
}

.sd-page--lc .sd-quote .sd-eyebrow {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  color: #34d399;
}

.sd-page--lc .sd-quote__title {
  max-width: 896px;
  margin: 24px auto 0;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.9px;
  color: #fff;
}

.sd-page--lc .sd-quote__note {
  max-width: 672px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 24px;
  color: #cbd5e1;
}

/* --- delivery methodology ------------------------------------------------- */
.sd-page--lc .sd-steps {
  gap: 16px;
  list-style: none;
}

.sd-page--lc .sd-step {
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

/* inline in the export (the `space-y-2` gaps live on the following siblings) */
.sd-page--lc .sd-step__no {
  display: inline;
  font-family: inherit;
  margin-bottom: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 900;
  color: #0b1b3d;
}

.sd-page--lc .sd-step__title {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-on-light);
}

.sd-page--lc .sd-step__body {
  padding-top: 4px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--lc .sd-step__foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--lc .sd-step--final {
  border-color: var(--sd-green);
  background: var(--sd-green);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--lc .sd-step--final .sd-step__no {
  color: #fff;
}

.sd-page--lc .sd-step--final .sd-step__title {
  color: #ffffff;
}

.sd-page--lc .sd-step--final .sd-step__body {
  color: #d1fae5;
}

.sd-page--lc .sd-step--final .sd-step__foot {
  border-top-color: rgba(5, 150, 105, 0.5);
  color: #fff;
}

/* --- evidence architecture ------------------------------------------------ */
.sd-page--lc .sd-sect--evidence .sd-head {
  margin-bottom: 40px;
  max-width: 768px;
}

.sd-page--lc .sd-sect--evidence .sd-eyebrow {
  color: #34d399;
}

.sd-page--lc .sd-sect--evidence .sd-h2 {
  font-size: 30px;
  line-height: 36px;
  color: #fff;
}

.sd-page--lc .sd-sect--evidence .sd-head__lede {
  font-size: 14px;
  line-height: 20px;
  color: #cbd5e1;
}

.sd-page--lc .sd-evi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  position: relative;
  list-style: none;
}

.sd-page--lc .sd-evi__item {
  padding: 24px;
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 8px;
  background: rgba(20, 42, 89, 0.6);
}

.sd-page--lc .sd-evi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sd-page--lc .sd-evi__no {
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  color: #34d399;
}

.sd-page--lc .sd-evi__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--sd-green);
}

.sd-page--lc .sd-evi__title {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.45px;
  color: #fff;
}

.sd-page--lc .sd-evi__body {
  margin-top: 12px;
  font-size: 12px;
  line-height: 19.5px;
  color: #cbd5e1;
}

.sd-page--lc .sd-evi__item--final {
  border-color: rgba(27, 122, 67, 0.6);
  background: rgba(27, 122, 67, 0.2);
}

.sd-page--lc .sd-evi__item--final .sd-evi__no {
  color: #34d399;
}

.sd-page--lc .sd-evi__item--final .sd-evi__dot {
  background: #34d399;
}

.sd-page--lc .sd-evi__item--final .sd-evi__title {
  color: #6ee7b7;
}

.sd-page--lc .sd-evi__item--final .sd-evi__body {
  color: #e2e8f0;
}

/* --- practical scope ------------------------------------------------------ */
.sd-page--lc .sd-split--wide {
  gap: 48px;
  align-items: flex-start;
}

.sd-page--lc .sd-split__aside > div > .sd-h2 {
  margin-top: 4px;
  font-size: 30px;
  line-height: 36px;
}

.sd-page--lc .sd-split__note {
  margin-top: 24px;
  font-size: 16px;
  line-height: 24px;
  color: #475569;
}

.sd-page--lc .sd-callout {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.sd-page--lc .sd-callout__title {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sd-green);
}

.sd-page--lc .sd-callout__body {
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

.sd-page--lc .sd-includes {
  gap: 16px;
  list-style: none;
}

.sd-page--lc .sd-include {
  display: block;
  padding: 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.sd-page--lc .sd-include__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-page--lc .sd-include__icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
  color: var(--sd-green);
}

.sd-page--lc .sd-include__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #0b1b3d;
}

.sd-page--lc .sd-include__body {
  margin-top: 8px;
  font-size: 12px;
  line-height: 19.5px;
  color: #475569;
}

/* --- consultation intake --------------------------------------------------- */
.sd-page--lc .sd-cta {
  padding: 48px 24px;
  background: #060f22;
  border-top: 0;
  border-bottom: 1px solid #1e293b;
}

.sd-page--lc .sd-cta__row {
  gap: 24px;
}

.sd-page--lc .sd-cta__lead {
  display: block;
}

.sd-page--lc .sd-cta__lead > * + * {
  margin-top: 6px;
}

.sd-page--lc .sd-cta__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-page--lc .sd-cta__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 9999px;
  background: var(--sd-green);
}

.sd-page--lc .sd-cta__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: #fff;
}

.sd-page--lc .sd-cta__note {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-on-dark);
}

.sd-page--lc .sd-btn--cta {
  padding: 14px 32px;
  font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--lc .sd-cta__arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

/* the hero column rhythm is `space-y-6`: the actions row's own pt-4 is additive */
.sd-page--lc .sd-hero__copy > .sd-actions {
  margin-top: 24px;
}

/* --- page 04 interaction states -------------------------------------------
   Hover treatments as authored in the export; the static screenshots cannot
   show them, so they are taken straight from the reference's utility classes. */
.sd-page--lc .sd-card:hover {
  border-color: rgba(27, 122, 67, 0.4);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--lc .sd-card:hover .sd-card__title {
  color: var(--sd-green);
}

.sd-page--lc .sd-step:hover,
.sd-page--lc .sd-step--final:hover {
  border-color: var(--sd-green);
}

.sd-page--lc .sd-include:hover {
  border-color: #cbd5e1;
}

/* --- page 04 responsive layout --------------------------------------------
   The export uses `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3/4/5`; below 640px
   the hero title drops to `text-4xl` and the practice-area foot stacks. */
@media (min-width: 640px) {
  .sd-page--lc .sd-frame__media img {
    height: 420px;
  }
  .sd-page--lc .sd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--lc .sd-includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .sd-page--lc .sd-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--lc .sd-evi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sd-page--lc .sd-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
    /* top-aligned so the canonical first-content offset is exact */
    align-items: start;
  }
  .sd-page--lc .sd-hero__copy {
    grid-column: span 7;
  }
  .sd-page--lc .sd-hero__media {
    grid-column: span 5;
  }
  .sd-page--lc .sd-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sd-page--lc .sd-split__aside {
    grid-column: span 5;
  }
  .sd-page--lc .sd-split__body {
    grid-column: span 7;
  }
  .sd-page--lc .sd-caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .sd-page--lc .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
  .sd-page--lc .sd-cta__row {
    flex-direction: row;
    text-align: left;
  }
  .sd-page--lc .sd-cta__lead {
    text-align: left;
  }
}

/* Tablet tier (640–1023px) — the export's `sm:` values. The CTA row uses
   `lg:flex-row`, so the shared 768px row rule is undone until 1024px. */
@media (min-width: 640px) and (max-width: 1023px) {
  .sd-page--lc .sd-hero__title {
    font-size: 48px;
    line-height: 48px;
  }
  .sd-page--lc .sd-quote__title {
    font-size: 30px;
    line-height: 36px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sd-page--lc .sd-cta__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sd-page--lc .sd-cta__head {
    justify-content: center;
  }
}

/* Mobile tier (≤639px) — layout only; the sub-640px type scale is shared by
   every service-detail page and lives in the family block at the end of this
   file. */
@media (max-width: 639px) {
  .sd-page--lc .sd-cta__row {
    align-items: center;
    text-align: center;
  }
  .sd-page--lc .sd-cta__head {
    justify-content: center;
  }
}
/* ============================================================
   SERVICE-DETAIL FAMILY — SHARED SUB-640px TYPE SCALE
   ============================================================
   Every approved service-detail export declares the same responsive type
   classes for these components (`text-2xl sm:text-3xl lg:text-4xl`,
   `text-sm sm:text-base`, `text-xs sm:text-sm`, `text-base sm:text-lg`), so
   their sub-640px values are identical across the six service-detail pages and
   are declared once here rather than repeated in each page block.
   This block is deliberately last: at equal specificity, source order lets it
   override each page block's desktop-first base values below 640px, while the
   ≥640px rendering is untouched.
   ============================================================ */
@media (max-width: 639px) {
  .sd-page .sd-hero__title {
    font-size: 36px;
    line-height: 41.4px;
  }
  .sd-page .sd-hero__lede {
    font-size: 16px;
    line-height: 26px;
  }
  .sd-page .sd-quote__title {
    font-size: 24px;
    line-height: 33px;
  }
  .sd-page .sd-quote__note {
    font-size: 14px;
    line-height: 20px;
  }
  .sd-page .sd-head__lede {
    font-size: 14px;
    line-height: 20px;
  }
  .sd-page .sd-split__note {
    font-size: 14px;
    line-height: 22.75px;
  }
  .sd-page .sd-card__body {
    font-size: 12px;
    line-height: 19.5px;
  }
  .sd-page .sd-cta__title {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
  }
  .sd-page .sd-cta__note {
    font-size: 12px;
    line-height: 16px;
  }
}


/* ============================================================
   PAGE 07 — ORGANIZATIONAL DEVELOPMENT
   ============================================================
   Reconstructed from stitch.ui/ORGANIZATIONAL DEVELOPMENT.ui/.
   Every value below is taken from the approved export's own classes and from
   its measured geometry at 1280px (tools/ref-od.txt). This export is from a
   different Stitch generation than pages 01–06: 46px hero rail, #1e7e4e accent
   (rgb(30,126,78)), #08152e ink/panel, 12px card radius, 28px card padding.
   It keeps the family skeleton (hero → editorial → caps → mandate → delivery →
   continuum → scope → stakeholders → synergistic → CTA) so the shared
   component markup and behaviour are reused.
   ============================================================ */
.sd-page--od {
  --sd-ink: #08152e;
  --sd-green: #1e7e4e;
  --sd-accent: #1e7e4e;
  --sd-accent-strong: #17653e;
  --sd-accent-mid: #1e7e4e;
  --sd-accent-soft: #ecfdf5;
  --sd-accent-line: #d1fae5;
  --sd-panel: #0f2142;
  --sd-band: #08152e;
  --sd-cta-bg: #08152e;
}

/* --- breadcrumb ----------------------------------------------------------- */
.sd-page--od .sd-crumb {
  background: #f8fafc;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  color: #64748b;
}

.sd-page--od .sd-crumb__trail {
  gap: 8px;
  font-size: 11.5px;
  line-height: 17.25px;
  font-weight: 500;
}

.sd-page--od .sd-crumb__trail a,
.sd-page--od .sd-crumb__trail span[aria-hidden="true"] {
  color: #64748b;
}

.sd-page--od .sd-crumb__current {
  color: #08152e;
  font-weight: 600;
}

.sd-page--od .sd-crumb__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #1e7e4e;
  font-size: 10.5px;
  line-height: 15.75px;
  font-weight: 700;
  letter-spacing: 0.525px;
  /* the export uppercases this discipline tag (12px wider than mixed case) */
  text-transform: uppercase;
}

.sd-page--od .sd-crumb__tag .sd-pill__dot {
  width: 6px;
  height: 6px;
  background: #1e7e4e;
}

/* --- section shells ------------------------------------------------------- */
.sd-page--od .sd-wrap {
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
}

.sd-page--od .sd-sect--hero {
  padding-bottom: 64px;
  background: #fff;
}

.sd-page--od .sd-sect--editorial {
  padding: 56px 24px;
  background: #f8fafc;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--od .sd-sect--caps {
  padding: 64px 24px;
  background: #fff;
}

.sd-page--od .sd-sect--delivery {
  padding: 64px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--od .sd-sect--evidence {
  padding: 64px 24px;
  background: #08152e;
  color: #fff;
}

.sd-page--od .sd-sect--scope {
  padding: 64px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--od .sd-sect--who {
  padding: 64px 24px;
  background: #f8fafc;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--od .sd-sect--areas {
  padding: 64px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* --- shared section head -------------------------------------------------- */
.sd-page--od .sd-head {
  max-width: 768px;
  margin-bottom: 48px;
}

.sd-page--od .sd-eyebrow {
  display: block;
  color: #1e7e4e;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.sd-page--od .sd-h2 {
  margin: 8px 0 0;
  color: #08152e;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.75px;
}

.sd-page--od .sd-head__lede {
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 20px;
}

.sd-page--od .sd-sect--evidence .sd-h2 {
  color: #fff;
}

.sd-page--od .sd-sect--evidence .sd-head__lede {
  color: #cbd5e1;
}

/* --- hero ----------------------------------------------------------------- */
.sd-page--od .sd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  /* top-aligned so the canonical first-content offset is exact */
  align-items: start;
}

.sd-page--od .sd-hero__copy > * + * {
  margin-top: 24px;
}

.sd-page--od .sd-pill {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #d1fae5;
  border-radius: 4px;
  background: rgba(236, 253, 245, 0.8);
  color: #1e7e4e;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.275px;
}

.sd-page--od .sd-pill__dot {
  width: 6px;
  height: 6px;
  background: #1e7e4e;
}

/* mobile-first: the export's h1 is `text-4xl lg:text-[46px]` */
.sd-page--od .sd-hero__title {
  margin: 24px 0 0;
  color: #08152e;
  font-size: 36px;
  line-height: 41.4px;
  font-weight: 800;
  letter-spacing: -1.15px;
}

.sd-page--od .sd-hero__title .sd-hero__accent {
  color: #1e7e4e;
}

.sd-page--od .sd-hero__lede {
  max-width: 576px;
  color: #475569;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.sd-page--od .sd-checks {
  padding-top: 4px;
  gap: 10px;
}

.sd-page--od .sd-checks li {
  gap: 10px;
  color: #334155;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 500;
}

.sd-page--od .sd-checks svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #1e7e4e;
}

.sd-page--od .sd-actions {
  gap: 16px;
  padding-top: 16px;
}

.sd-page--od .sd-btn {
  display: inline-flex;
  align-items: center;
  /* the export sets no tracking on buttons (the base rule's 0.35px came from
     another export and widens every od button label) */
  letter-spacing: normal;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: #1e7e4e;
  color: #fff;
  font-size: 13.5px;
  line-height: 20.25px;
  font-weight: 700;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--od .sd-btn:hover {
  background: #17653e;
}

.sd-page--od .sd-btn--ghost {
  padding: 12px 20px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  /* the export's ghost CTA is a flat surface (no shadow-sm) */
  box-shadow: none;
}

.sd-page--od .sd-btn--ghost:hover {
  border-color: #94a3b8;
  color: #08152e;
}

.sd-page--od .sd-btn__icon {
  width: 16px;
  height: 16px;
  /* the base .sd-btn already supplies the export's 8px gap; adding a margin here
     double-spaced the icon and widened the hero CTA by 8px */
  flex: none;
}

/* hero media: 16/10 frame, radius 12, gradient veil, floating caption */
.sd-page--od .sd-hero__media .sd-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.sd-page--od .sd-frame__media {
  position: absolute;
  inset: 0;
}

.sd-page--od .sd-frame__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sd-page--od .sd-hero__media .sd-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 21, 46, 0.85), rgba(8, 21, 46, 0) 55%);
}

.sd-page--od .sd-frame__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
}

.sd-page--od .sd-frame__caption .sd-pulse {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 9999px;
  background: #1e7e4e;
}

.sd-page--od .sd-frame__label {
  /* the caption row's 8px gap already separates the pulse from this label */
  margin: 0;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.sd-page--od .sd-frame__note {
  color: #cbd5e1;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}

/* --- editorial context ---------------------------------------------------- */
.sd-page--od .sd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.sd-page--od .sd-split__aside > * + * {
  margin-top: 12px;
}

/* `text-2xl lg:text-3xl` — this export's h2 carries no tracking-tight */
.sd-page--od .sd-sect--editorial .sd-h2 {
  margin: 12px 0 0;
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: normal;
}

.sd-page--od .sd-rule {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 9999px;
  background: #1e7e4e;
}

.sd-page--od .sd-split__body > * + * {
  margin-top: 16px;
}

.sd-page--od .sd-split__body {
  color: #475569;
  font-size: 14.5px;
  line-height: 23.5625px;
}

.sd-page--od .sd-split__body strong {
  color: #08152e;
  font-weight: 600;
}

/* --- practice architecture (caps) ----------------------------------------- */
.sd-page--od .sd-caps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd-page--od .sd-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sd-page--od .sd-card:hover {
  border-color: #a7f3d0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--od .sd-card__main > * + * {
  margin-top: 16px;
}

.sd-page--od .sd-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sd-page--od .sd-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  background: #ecfdf5;
  color: #1e7e4e;
}

.sd-page--od .sd-card__icon svg {
  width: 20px;
  height: 20px;
}

.sd-page--od .sd-card__no {
  /* the export's numeric labels inherit the body face, not the base mono face */
  font-family: inherit;
  color: var(--muted-on-light);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.sd-page--od .sd-card__title {
  margin: 16px 0 0;
  color: #08152e;
  font-size: 18px;
  line-height: 24.75px;
  font-weight: 700;
}

.sd-page--od .sd-card__body {
  margin: 16px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 21.125px;
}

.sd-page--od .sd-card__foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  line-height: 15.75px;
  font-weight: 700;
  letter-spacing: 0.525px;
  text-transform: uppercase;
}

/* --- institutional development mandate band ------------------------------- */
.sd-page--od .sd-quote {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
  background: #08152e;
  color: #fff;
}

.sd-page--od .sd-quote__media {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.sd-page--od .sd-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-page--od .sd-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #08152e, rgba(8, 21, 46, 0.9), #08152e);
  pointer-events: none;
}

.sd-page--od .sd-quote__inner {
  position: relative;
  z-index: 10;
  display: block;
  max-width: 1024px;
  margin-inline: auto;
  padding: 0 24px;
  text-align: center;
}

.sd-page--od .sd-quote__inner > * + * {
  margin-top: 24px;
}

.sd-page--od .sd-quote .sd-eyebrow {
  color: #1e7e4e;
  letter-spacing: 1.1px;
}

/* `text-2xl sm:text-3xl lg:text-4xl` */
.sd-page--od .sd-quote__title {
  max-width: 976px;
  margin: 24px auto 0;
  color: #fff;
  font-size: 24px;
  line-height: 33px;
  font-weight: 800;
  letter-spacing: -0.9px;
}

/* `text-xs sm:text-sm` */
.sd-page--od .sd-quote__note {
  max-width: 672px;
  margin: 24px auto 0;
  color: var(--muted-on-dark);
  font-size: 12px;
  line-height: 16px;
}

/* --- delivery methodology ------------------------------------------------- */
.sd-page--od .sd-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-page--od .sd-step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  background: #f8fafc;
}

.sd-page--od .sd-step__main > * + * {
  margin-top: 8px;
}

.sd-page--od .sd-step__no {
  /* the export's number is an inline span in a space-y-2 stack of its own line,
     followed by an 8px gap from the stack */
  display: block;
  margin-bottom: 8px;
  font-family: inherit;
  color: #08152e;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
}

.sd-page--od .sd-step__title {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--od .sd-step__body {
  margin: 8px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 19.5px;
}

.sd-page--od .sd-step__foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  color: #64748b;
  font-size: 10.5px;
  line-height: 15.75px;
  font-weight: 700;
}

.sd-page--od .sd-step--final {
  border-color: #17653e;
  background: #1e7e4e;
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--od .sd-step--final .sd-step__no {
  color: #fff;
}

.sd-page--od .sd-step--final .sd-step__title {
  color: #ffffff;
}

.sd-page--od .sd-step--final .sd-step__body {
  color: #ecfdf5;
}

.sd-page--od .sd-step--final .sd-step__foot {
  border-top-color: rgba(16, 185, 129, 0.6);
  color: #ffffff;
}

/* --- organizational system framework (navy panel) ------------------------- */
.sd-page--od .sd-evi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-page--od .sd-evi__item {
  padding: 24px;
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 12px;
  background: #0f2142;
}

.sd-page--od .sd-evi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* This eyebrow appears on the light sections AND on the two dark bands, so the
   on-dark instances take the lighter step of the page accent. */
.sd-page--od .sd-quote .sd-eyebrow,
.sd-page--od .sd-sect--evidence .sd-eyebrow {
  color: #34d399;
}

.sd-page--od .sd-evi__no {
  color: #34d399;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--od .sd-evi__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #1e7e4e;
}

.sd-page--od .sd-evi__title {
  margin: 12px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.sd-page--od .sd-evi__body {
  margin: 12px 0 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 19.5px;
}

/* --- practical scope ------------------------------------------------------ */
.sd-page--od .sd-split--wide {
  align-items: center;
  gap: 48px;
}

.sd-page--od .sd-split--wide .sd-split__aside {
  display: flex;
  flex-direction: column;
}

.sd-page--od .sd-split--wide .sd-split__aside > * + * {
  margin-top: 16px;
}

.sd-page--od .sd-sect--scope .sd-h2 {
  margin: 16px 0 0;
  line-height: 37.5px;
}

.sd-page--od .sd-split__note {
  margin: 16px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 22.75px;
}

.sd-page--od .sd-callout {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.sd-page--od .sd-callout__title {
  margin: 0;
  color: #08152e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--od .sd-callout__body {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 11.5px;
  line-height: 18.6875px;
}

.sd-page--od .sd-includes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-page--od .sd-include {
  /* the export stacks the head above the body; the shared rule makes it a row */
  display: block;
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 8px;
  background: #f8fafc;
}

.sd-page--od .sd-include__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e7e4e;
}

.sd-page--od .sd-include__icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
  flex: none;
}

.sd-page--od .sd-include__title {
  margin: 0;
  color: #08152e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--od .sd-include__body {
  margin: 4px 0 0;
  padding-left: 24px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 18.6875px;
}

/* --- institutional stakeholders ------------------------------------------- */
.sd-page--od .sd-who {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the export's card inherits a 16px/24px strut, which is what gives the plain
   inline number span its 24px line box (measured: card 216, number dy 31) */
.sd-page--od .sd-who__card {
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  /* the export's stakeholder tiles are flat (the base .sd-card shadow-sm leaked in) */
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
}

.sd-page--od .sd-who__badge {
  /* the export uses bare inline text, not a filled badge box */
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--od .sd-who__title {
  margin: 12px 0 0;
  color: #08152e;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.sd-page--od .sd-who__body {
  margin: 12px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 19.5px;
}

/* --- interconnected practice areas + pager -------------------------------- */
.sd-page--od .sd-areas__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
  /* the export's head is borderless with no bottom padding */
  padding: 0;
  border-bottom: 0;
}

.sd-page--od .sd-areas__intro .sd-h2 {
  margin-top: 0;
}

.sd-page--od .sd-areas__intro .sd-eyebrow {
  margin-bottom: 0;
}

.sd-page--od .sd-sect--areas .sd-h2 {
  margin: 0;
  margin-top: 0;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: normal;
}

.sd-page--od .sd-areas__lede {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 16px;
}

.sd-page--od .sd-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}

.sd-page--od .sd-link:hover {
  color: #17653e;
}

.sd-page--od .sd-link__arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

.sd-page--od .sd-areas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* block flow (not flex): the export lets grid stretch place the slack below the
   content, and its 16px/24px strut sets the number span's line box */
.sd-page--od .sd-area {
  display: block;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  line-height: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sd-page--od .sd-area:hover {
  border-color: #a7f3d0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--od .sd-area__badge {
  /* the export uses an inline span, so its 24px line box comes from the card strut */
  display: inline;
  color: #1e7e4e;
  font-size: 10.5px;
  line-height: 15.75px;
  font-weight: 700;
  text-transform: uppercase;
}

.sd-page--od .sd-area__title {
  margin: 12px 0 0;
  color: #08152e;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.sd-page--od .sd-area__body {
  margin: 12px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 19.5px;
}

.sd-page--od .sd-area__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding-top: 8px;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--od .sd-area__cta:hover {
  text-decoration: underline;
}

.sd-page--od .sd-area__arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

.sd-page--od .sd-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  color: #64748b;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--od .sd-pager a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
}

.sd-page--od .sd-pager a:hover {
  color: #08152e;
}

/* --- consultation intake -------------------------------------------------- */
.sd-page--od .sd-cta {
  padding: 48px 24px;
  background: #08152e;
  border-top: 0;
  border-bottom: 1px solid #1e293b;
  color: #fff;
}

.sd-page--od .sd-cta__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: center;
}

/* the export stacks the eyebrow-row and the note (space-y-1.5) instead of
   placing them side by side */
.sd-page--od .sd-cta__lead {
  display: block;
}

.sd-page--od .sd-cta__lead > * + * {
  margin-top: 6px;
}

.sd-page--od .sd-cta__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sd-page--od .sd-cta__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 9999px;
  background: #1e7e4e;
}

/* `text-xl sm:text-2xl` */
.sd-page--od .sd-cta__title {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.sd-page--od .sd-cta__note {
  margin: 6px 0 0;
  color: var(--muted-on-dark);
  font-size: 12px;
  line-height: 16px;
}

.sd-page--od .sd-cta__action {
  flex: none;
}

.sd-page--od .sd-btn--cta {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--od .sd-cta__arrow {
  width: 16px;
  height: 16px;
  /* the base .sd-btn gap already supplies the export's 8px before the arrow */
  flex: none;
}

/* --- responsive tiers ----------------------------------------------------- */
@media (min-width: 640px) {
  .sd-page--od .sd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--od .sd-includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--od .sd-who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--od .sd-areas__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sd-page--od .sd-quote__title {
    font-size: 30px;
    line-height: 36px;
  }
  .sd-page--od .sd-quote__note {
    font-size: 14px;
    line-height: 20px;
  }
  .sd-page--od .sd-cta__title {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.6px;
  }
}

@media (min-width: 768px) {
  .sd-page--od .sd-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--od .sd-evi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--od .sd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sd-page--od .sd-cta__row {
    flex-direction: row;
    text-align: left;
  }
  .sd-page--od .sd-cta__lead {
    text-align: left;
  }
  .sd-page--od .sd-cta__head {
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .sd-page--od .sd-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
  }
  .sd-page--od .sd-hero__copy {
    grid-column: span 6;
  }
  .sd-page--od .sd-hero__media {
    grid-column: span 6;
  }
  .sd-page--od .sd-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
  }
  .sd-page--od .sd-split__aside {
    grid-column: span 5;
  }
  .sd-page--od .sd-split__body {
    grid-column: span 7;
  }
  .sd-page--od .sd-split--wide {
    gap: 48px;
  }
  .sd-page--od .sd-caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .sd-page--od .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sd-page--od .sd-who {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--od .sd-hero__title {
    font-size: 46px;
    line-height: 52.9px;
  }
  .sd-page--od .sd-sect--editorial .sd-h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .sd-page--od .sd-quote__title {
    font-size: 36px;
    line-height: 40px;
  }
}

/* the hero caption's supporting line is `hidden sm:inline` in the export */
@media (max-width: 639px) {
  .sd-page--od .sd-frame__note {
    display: none;
  }
}

/* The export carries two hover scales that are part of the approved design:
   `group-hover:scale-102` on the hero photograph and `group-hover:scale-105`
   on each capability icon tile. Both are enhancements only — nothing depends
   on hover to be reachable. */
.sd-page--od .sd-frame__media img {
  transition: transform 500ms ease;
}
.sd-page--od .sd-frame:hover .sd-frame__media img {
  transform: scale(1.02);
}
.sd-page--od .sd-card__icon {
  transition: transform 150ms ease;
}
.sd-page--od .sd-card:hover .sd-card__icon {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .sd-page--od .sd-frame__media img,
  .sd-page--od .sd-card__icon,
  .sd-page--od .sd-card {
    transition: none;
  }
  .sd-page--od .sd-frame:hover .sd-frame__media img,
  .sd-page--od .sd-card:hover .sd-card__icon {
    transform: none;
  }
}


/* ============================================================
   PAGE 08 — TRAINING & CAPACITY BUILDING
   ============================================================
   Reconstructed from stitch.ui/TRAINING & CAPACITY BUILDING.ui/.
   Every value below is taken from the approved export's own classes and from
   its measured geometry at 1280px (tools/ref-tc.txt). This export shares the
   page 07 generation (46px hero rail, #1e7e4e accent, 12px card radius) but
   uses a second ink tone (#0b1b3d for copy, #08152e for panels), 80px section
   padding and #48c774 as its light-on-navy accent.
   ============================================================ */
.sd-page--tc {
  --sd-ink: #0b1b3d;
  --sd-green: #1e7e4e;
  --sd-accent: #1e7e4e;
  --sd-accent-strong: #16653e;
  --sd-accent-mid: #1e7e4e;
  --sd-accent-soft: #ecfdf5;
  --sd-accent-line: #d1fae5;
  --sd-accent-light: #48c774;
  --sd-panel: #0e2148;
  --sd-band: #08152e;
  --sd-cta-bg: #08152e;
}

/* --- breadcrumb ----------------------------------------------------------- */
.sd-page--tc .sd-crumb {
  background: rgba(248, 250, 252, 0.7);
  border-bottom: 1px solid #f1f5f9;
  color: #64748b;
}

.sd-page--tc .sd-crumb__trail {
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

.sd-page--tc .sd-crumb__trail a,
.sd-page--tc .sd-crumb__trail span[aria-hidden="true"] {
  color: #64748b;
}

.sd-page--tc .sd-crumb__current {
  color: #1e293b;
  font-weight: 600;
}

.sd-page--tc .sd-crumb__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #1e7e4e;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.sd-page--tc .sd-crumb__tag .sd-pill__dot {
  width: 8px;
  height: 8px;
  background: #1e7e4e;
}

/* --- section shells ------------------------------------------------------- */
.sd-page--tc .sd-wrap {
  max-width: calc(var(--site-container) - 2 * var(--site-gutter));
}

.sd-page--tc .sd-sect--hero {
  padding-bottom: 64px;
  background: #fff;
}

.sd-page--tc .sd-sect--editorial {
  padding: 64px 24px;
  background: rgba(248, 250, 252, 0.5);
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--tc .sd-sect--caps {
  padding: 80px 24px;
  background: #fff;
}

.sd-page--tc .sd-sect--delivery {
  padding: 80px 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

/* the continuum band sits between delivery and scope with no border of its own */
.sd-page--tc .sd-sect--evidence {
  padding: 64px 24px;
  background: #08152e;
  color: #fff;
}

.sd-page--tc .sd-sect--scope {
  padding: 80px 24px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.sd-page--tc .sd-sect--who {
  padding: 80px 24px;
  background: rgba(248, 250, 252, 0.5);
}

.sd-page--tc .sd-sect--areas {
  padding: 80px 24px;
  background: #fff;
  border-top: 1px solid #f1f5f9;
}

/* --- shared section head -------------------------------------------------- */
.sd-page--tc .sd-head {
  max-width: 768px;
  margin-bottom: 48px;
}

/* this export scopes each head separately: `max-w-2xl` on the capability head,
   `max-w-3xl` on the delivery/stakeholder lede with a full-width head */
.sd-page--tc .sd-sect--caps .sd-head {
  max-width: 672px;
}

.sd-page--tc .sd-sect--delivery .sd-head {
  max-width: none;
}

.sd-page--tc .sd-sect--delivery .sd-head__lede {
  max-width: 768px;
}

.sd-page--tc .sd-sect--who .sd-head__lede {
  max-width: 768px;
}

.sd-page--tc .sd-eyebrow {
  display: block;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--tc .sd-h2 {
  margin: 12px 0 0;
  color: #0b1b3d;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.75px;
}

.sd-page--tc .sd-head__lede {
  margin: 12px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 20px;
}

.sd-page--tc .sd-sect--evidence .sd-head {
  max-width: none;
  margin-bottom: 40px;
}

.sd-page--tc .sd-sect--evidence .sd-h2 {
  margin: 8px 0 0;
  color: #fff;
}

.sd-page--tc .sd-sect--evidence .sd-head__lede {
  margin: 8px 0 0;
  max-width: 672px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 16px;
}

.sd-page--tc .sd-sect--evidence .sd-eyebrow {
  color: #48c774;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0.55px;
}

.sd-page--tc .sd-sect--who .sd-head {
  max-width: none;
  margin-bottom: 48px;
}

/* --- hero ----------------------------------------------------------------- */
.sd-page--tc .sd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  /* top-aligned so the canonical first-content offset is exact */
  align-items: start;
}

.sd-page--tc .sd-hero__copy > * + * {
  margin-top: 24px;
}

/* the export's hero rail is bare inline text, not a bordered pill */
.sd-page--tc .sd-pill {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--tc .sd-pill__dot {
  width: 6px;
  height: 6px;
  background: #1e7e4e;
}

/* mobile-first: the export's h1 is `text-4xl lg:text-[46px] leading-[1.12]` */
.sd-page--tc .sd-hero__title {
  margin: 24px 0 0;
  color: #0b1b3d;
  font-size: 36px;
  line-height: 40.32px;
  font-weight: 800;
  letter-spacing: -1.15px;
}

.sd-page--tc .sd-hero__title .sd-hero__accent {
  color: #1e7e4e;
}

/* `text-base lg:text-[17px] leading-relaxed` */
.sd-page--tc .sd-hero__lede {
  max-width: 592px;
  color: #475569;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.sd-page--tc .sd-checks {
  padding-top: 8px;
  gap: 12px;
}

.sd-page--tc .sd-checks li {
  gap: 12px;
  color: #334155;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
}

.sd-page--tc .sd-checks svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #1e7e4e;
}

.sd-page--tc .sd-actions {
  gap: 16px;
  padding-top: 16px;
}

.sd-page--tc .sd-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: #1e7e4e;
  color: #fff;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: normal;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--tc .sd-btn:hover {
  background: #16653e;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sd-page--tc .sd-btn--ghost {
  border: 1px solid #e2e8f0;
  /* the export leaves the ghost CTA transparent (it sits on white anyway) */
  background: none;
  color: #334155;
  box-shadow: none;
}

.sd-page--tc .sd-btn--ghost:hover {
  background: #f8fafc;
}

.sd-page--tc .sd-btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.sd-page--tc .sd-hero__media .sd-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  overflow: hidden;
  background: none;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.sd-page--tc .sd-frame__media {
  position: absolute;
  inset: 0;
}

.sd-page--tc .sd-frame__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* the export's gradient veil is the caption band itself (`bottom-0 inset-x-0`
   + 24px caption padding = 84.5px), not a full-frame overlay */
.sd-page--tc .sd-hero__media .sd-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84.5px;
  background: linear-gradient(to top, rgba(11, 27, 61, 0.9), rgba(11, 27, 61, 0.5), rgba(11, 27, 61, 0));
}

.sd-page--tc .sd-frame__caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
}

/* caption row: `flex items-center space-x-2` above the supporting line */
.sd-page--tc .sd-frame__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-page--tc .sd-frame__row .sd-pulse {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 9999px;
  background: #48c774;
}

.sd-page--tc .sd-frame__label {
  margin: 0;
  color: #ffffff;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.sd-page--tc .sd-frame__note {
  margin: 4px 0 0;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

/* --- editorial context ---------------------------------------------------- */
.sd-page--tc .sd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.sd-page--tc .sd-split__aside > * + * {
  margin-top: 12px;
}

/* `text-2xl lg:text-3xl` */
.sd-page--tc .sd-sect--editorial .sd-h2 {
  margin: 12px 0 0;
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: normal;
}

.sd-page--tc .sd-rule {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 9999px;
  background: #1e7e4e;
}

.sd-page--tc .sd-split__body > * + * {
  margin-top: 16px;
}

.sd-page--tc .sd-split__body {
  color: #475569;
  font-size: 15px;
  line-height: 24.375px;
}

.sd-page--tc .sd-split__body strong {
  color: #1e293b;
  font-weight: 700;
}

/* --- practice architecture (caps) ----------------------------------------- */
.sd-page--tc .sd-caps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd-page--tc .sd-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sd-page--tc .sd-card__main > * + * {
  margin-top: 16px;
}

.sd-page--tc .sd-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.sd-page--tc .sd-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #ecfdf5;
  color: #1e7e4e;
}

.sd-page--tc .sd-card__icon svg {
  width: 20px;
  height: 20px;
}

.sd-page--tc .sd-card__no {
  font-family: inherit;
  color: var(--muted-on-light);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.sd-page--tc .sd-card__title {
  margin: 16px 0 0;
  color: #0b1b3d;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}

.sd-page--tc .sd-card__body {
  margin: 16px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 19.5px;
}

/* the export's card footer is a two-ended tag row, not one string */
.sd-page--tc .sd-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  color: var(--muted-on-light);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

/* --- institutional capability mandate band -------------------------------- */
.sd-page--tc .sd-quote {
  position: relative;
  overflow: hidden;
  padding: 96px 24px;
  background: #08152e;
  color: #fff;
}

.sd-page--tc .sd-quote__media {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.sd-page--tc .sd-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-page--tc .sd-quote__inner {
  position: relative;
  z-index: 10;
  display: block;
  max-width: 896px;
  margin-inline: auto;
  padding: 0;
  text-align: center;
}

.sd-page--tc .sd-quote__inner > * + * {
  margin-top: 24px;
}

.sd-page--tc .sd-quote .sd-eyebrow {
  color: #48c774;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
}

.sd-page--tc .sd-quote__title {
  max-width: 100%;
  margin: 24px auto 0;
  color: #fff;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.75px;
}

.sd-page--tc .sd-quote__note {
  max-width: 672px;
  margin: 24px auto 0;
  color: var(--muted-on-dark);
  font-size: 14px;
  line-height: 20px;
}

/* --- delivery methodology ------------------------------------------------- */
.sd-page--tc .sd-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-page--tc .sd-step {
  /* the export is a `space-y-4` block: grid stretch leaves the card's slack
     below the footer instead of distributing it above it */
  display: block;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.sd-page--tc .sd-step__main > * + * {
  margin-top: 16px;
}

.sd-page--tc .sd-step__no {
  display: block;
  margin-bottom: 16px;
  font-family: inherit;
  color: #0b1b3d;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
}

.sd-page--tc .sd-step__title {
  margin: 16px 0 0;
  color: var(--muted-on-light);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--tc .sd-step__body {
  margin: 16px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 19.5px;
}

.sd-page--tc .sd-step__foot {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  color: #1e7e4e;
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sd-page--tc .sd-step--final {
  border: 0;
  background: #1e7e4e;
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--tc .sd-step--final .sd-step__no {
  color: #fff;
}

.sd-page--tc .sd-step--final .sd-step__title {
  color: #ffffff;
}

.sd-page--tc .sd-step--final .sd-step__body {
  color: #ecfdf5;
}

.sd-page--tc .sd-step--final .sd-step__foot {
  border-top-color: rgba(16, 185, 129, 0.4);
  color: #fff;
}

/* --- applied learning continuum (navy band) ------------------------------- */
.sd-page--tc .sd-evi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-page--tc .sd-evi__item {
  padding: 24px;
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 12px;
  background: #0e2148;
}

.sd-page--tc .sd-evi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sd-page--tc .sd-evi__no {
  color: #48c774;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--tc .sd-evi__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #48c774;
}

.sd-page--tc .sd-evi__title {
  margin: 12px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.sd-page--tc .sd-evi__body {
  margin: 12px 0 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 19.5px;
}

/* --- practical scope ------------------------------------------------------ */
.sd-page--tc .sd-split--wide {
  align-items: start;
  gap: 48px;
}

.sd-page--tc .sd-split--wide .sd-split__aside {
  display: flex;
  flex-direction: column;
}

.sd-page--tc .sd-split--wide .sd-split__aside > * + * {
  margin-top: 24px;
}

.sd-page--tc .sd-sect--scope .sd-h2 {
  margin: 12px 0 0;
  line-height: 36px;
}

.sd-page--tc .sd-split__note {
  margin: 12px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 22.75px;
}

.sd-page--tc .sd-callout {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  background: #f8fafc;
}

.sd-page--tc .sd-callout__title {
  margin: 0;
  color: #0b1b3d;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--tc .sd-callout__body {
  margin: 12px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 19.5px;
}

.sd-page--tc .sd-includes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-page--tc .sd-include {
  display: block;
  padding: 20px;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.5);
}

.sd-page--tc .sd-include__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e7e4e;
}

.sd-page--tc .sd-include__icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
  flex: none;
}

.sd-page--tc .sd-include__title {
  margin: 0;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--tc .sd-include__body {
  /* the export's include body starts at the icon's left edge, not indented */
  margin: 8px 0 0;
  padding-left: 0;
  color: #475569;
  font-size: 12px;
  line-height: 16px;
}

/* --- institutional stakeholders ------------------------------------------- */
.sd-page--tc .sd-who {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the export's card inherits a 16px/24px strut, which is what gives the plain
   inline number span its 24px line box (measured: card 224, number dy 31) */
.sd-page--tc .sd-who__card {
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
}

.sd-page--tc .sd-who__badge {
  /* the export uses bare inline text, not a filled badge box */
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--tc .sd-who__title {
  margin: 12px 0 0;
  color: #0b1b3d;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.sd-page--tc .sd-who__body {
  margin: 12px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 19.5px;
}

/* --- interconnected practice areas + pager -------------------------------- */
.sd-page--tc .sd-areas__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 48px;
  padding: 0;
  border-bottom: 0;
}

.sd-page--tc .sd-areas__intro .sd-h2 {
  margin-top: 8px;
}

.sd-page--tc .sd-sect--areas .sd-h2 {
  margin: 8px 0 0;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.75px;
}

.sd-page--tc .sd-areas__lede {
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 20px;
}

.sd-page--tc .sd-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1e7e4e;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.sd-page--tc .sd-link:hover {
  color: #16653e;
}

.sd-page--tc .sd-link__arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

.sd-page--tc .sd-areas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-page--tc .sd-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sd-page--tc .sd-area__main > * + * {
  margin-top: 12px;
}

.sd-page--tc .sd-area__badge {
  display: block;
  color: #1e7e4e;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.sd-page--tc .sd-area__title {
  margin: 12px 0 0;
  color: #0b1b3d;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}

.sd-page--tc .sd-area__body {
  margin: 12px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 19.5px;
}

/* `div.pt-6 mt-6 border-t` wrapping the inline-flex link (the block's 24px strut
   is what makes the footer 49px tall, not 41) */
.sd-page--tc .sd-area__foot {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  font-size: 16px;
  line-height: 24px;
}

.sd-page--tc .sd-area__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--tc .sd-area__cta:hover {
  color: #16653e;
}

.sd-page--tc .sd-area__arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

.sd-page--tc .sd-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  color: #64748b;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.sd-page--tc .sd-pager a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
}

.sd-page--tc .sd-pager a:hover {
  color: #1e7e4e;
}

/* --- consultation intake -------------------------------------------------- */
.sd-page--tc .sd-cta {
  padding: 48px 24px;
  background: #08152e;
  border-top: 0;
  border-bottom: 0;
  color: #fff;
}

.sd-page--tc .sd-cta__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: center;
}

.sd-page--tc .sd-cta__lead {
  display: block;
}

.sd-page--tc .sd-cta__lead > * + * {
  margin-top: 8px;
}

.sd-page--tc .sd-cta__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sd-page--tc .sd-cta__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 9999px;
  background: #1e7e4e;
}

.sd-page--tc .sd-cta__title {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.sd-page--tc .sd-cta__note {
  margin: 8px 0 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 16px;
}

.sd-page--tc .sd-cta__action {
  flex: none;
}

.sd-page--tc .sd-btn--cta {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--tc .sd-cta__arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

.sd-page--tc .sd-btn--cta:hover {
  box-shadow: none;
}

/* --- responsive tiers ----------------------------------------------------- */
@media (min-width: 640px) {
  .sd-page--tc .sd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--tc .sd-includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--tc .sd-who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--tc .sd-areas__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .sd-page--tc .sd-hero__title {
    font-size: 46px;
    line-height: 51.52px;
  }
  .sd-page--tc .sd-hero__lede {
    font-size: 17px;
    line-height: 27.625px;
  }
  .sd-page--tc .sd-cta__row {
    flex-direction: row;
    text-align: left;
  }
  .sd-page--tc .sd-cta__lead {
    text-align: left;
  }
  .sd-page--tc .sd-cta__head {
    justify-content: flex-start;
  }
}

@media (min-width: 768px) {
  .sd-page--tc .sd-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-page--tc .sd-evi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--tc .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sd-page--tc .sd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sd-page--tc .sd-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
  }
  .sd-page--tc .sd-hero__copy {
    grid-column: span 6;
  }
  .sd-page--tc .sd-hero__media {
    grid-column: span 6;
  }
  .sd-page--tc .sd-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
  }
  /* the scope split runs on `gap-12` (48px), not the editorial 40px */
  .sd-page--tc .sd-split--wide {
    gap: 48px;
  }
  .sd-page--tc .sd-split__aside {
    grid-column: span 5;
  }
  .sd-page--tc .sd-split__body {
    grid-column: span 7;
  }
  .sd-page--tc .sd-caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sd-page--tc .sd-who {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sd-page--tc .sd-sect--editorial .sd-h2 {
    font-size: 30px;
    line-height: 36px;
  }
}

/* the hero caption's supporting line is `hidden sm:inline` in the export */
@media (max-width: 639px) {
  .sd-page--tc .sd-frame__note {
    display: none;
  }
}


/* ============================================================
   PAGE 09 — 404 / PAGE NOT FOUND
   ============================================================
   Reconstructed from stitch.ui/404  PAGE NOT FOUND.ui/.
   This export comes from the About/homepage Stitch generation rather than the
   service-detail family, so it brings its own container (1280px with 32px
   gutters), 96px main padding and a light page gradient. Values are taken from
   the export's classes and its measured geometry (tools/ref-nf.txt).
   ============================================================ */
.sd-page--nf {
  --sd-ink: #0b1b3d;
  --sd-green: #1e7e4e;
  --sd-green-dark: #17653e;
  --sd-slate: #475569;
}

.sd-page--nf .sd-wrap {
  max-width: var(--site-container);
  padding: 0 var(--site-gutter);
}

/* The export's body is `min-h-screen flex flex-col justify-between`, which is
   what makes the 404 fill exactly the space left between the header and the
   footer. The shared shell's body is a plain block, so the flex context is
   established here for this page only. Without :has() support the page simply
   flows normally instead of centring — no layout breakage. */
body.sx-page:has(.sd-page--nf) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- page canvas ---------------------------------------------------------- */
.sd-nf {
  position: relative;
  overflow: hidden;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 0;
  background: linear-gradient(to bottom, #ffffff, #fbfcfe, #f8fafc);
}

/* the export's faint architectural grid (1px lines every 48px) */
.sd-page--nf .sd-nf__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: linear-gradient(#0b1b3d 1px, transparent 1px),
    linear-gradient(to right, #0b1b3d 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.sd-page--nf .sd-nf__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 360px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: rgba(236, 253, 245, 0.6);
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}

.sd-page--nf .sd-nf__grid {
  position: relative;
  z-index: 10;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.sd-page--nf .sd-nf__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* --- status badge --------------------------------------------------------- */
.sd-page--nf .sd-nf__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px 12px;
  border: 1px solid #d1fae5;
  border-radius: 9999px;
  background: #ecfdf5;
  color: #1e7e4e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sd-page--nf .sd-nf__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 9999px;
  background: #1e7e4e;
}

/* --- monumental numeral + heading ---------------------------------------- */
.sd-page--nf .sd-nf__num {
  margin: 0 0 16px;
  color: #0b1b3d;
  font-size: 76px;
  line-height: 76px;
  font-weight: 800;
  letter-spacing: -1.9px;
  text-shadow: 0 20px 40px rgba(11, 27, 61, 0.06);
  user-select: none;
}

.sd-page--nf .sd-nf__num-accent {
  color: #1e7e4e;
}

.sd-page--nf .sd-nf__title {
  margin: 0 0 16px;
  color: #0b1b3d;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  /* tracking-tight (-0.025em) at each of the three reference sizes */
  letter-spacing: -0.75px;
}

.sd-page--nf .sd-nf__title-accent {
  color: #1e7e4e;
}

.sd-page--nf .sd-nf__lede {
  max-width: 576px;
  margin: 0 0 32px;
  color: #475569;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

/* --- recovery CTAs -------------------------------------------------------- */
.sd-page--nf .sd-nf__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.sd-page--nf .sd-nf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 0;
  border-radius: 4px;
  font-size: 15px;
  line-height: 22.5px;
  font-weight: 600;
  text-decoration: none;
}

.sd-page--nf .sd-nf__btn--primary {
  background: #1e7e4e;
  color: #fff;
  /* the export carries Tailwind `shadow-sm` on the primary button only */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sd-page--nf .sd-nf__btn--primary:hover {
  background: #17653e;
}

.sd-page--nf .sd-nf__btn--ghost {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0b1b3d;
}

.sd-page--nf .sd-nf__btn--ghost:hover {
  background: #f8fafc;
}

.sd-page--nf .sd-nf__btn-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.sd-page--nf .sd-nf__btn--ghost .sd-nf__btn-icon {
  color: #94a3b8;
}

/* --- direct navigation paths --------------------------------------------- */
.sd-page--nf .sd-nf__paths {
  width: 100%;
  max-width: 576px;
  padding-top: 24px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.sd-page--nf .sd-nf__paths-label {
  margin: 0 0 14px;
  color: var(--muted-on-light);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sd-page--nf .sd-nf__paths-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.sd-page--nf .sd-nf__path {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #475569;
}

.sd-page--nf .sd-nf__path:hover {
  color: #1e7e4e;
}

.sd-page--nf .sd-nf__path-arrow {
  color: #1e7e4e;
}

.sd-page--nf .sd-nf__path-sep {
  color: #cbd5e1;
}

/* --- navigation notice card ---------------------------------------------- */
.sd-page--nf .sd-nf__aside {
  display: none;
}

.sd-page--nf .sd-nf__card {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: 32px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px -8px rgba(11, 27, 61, 0.06);
}

.sd-page--nf .sd-nf__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid #f1f5f9;
  /* the export's Tailwind border colour utility paints all four sides; only the
     bottom width is non-zero, so this only keeps the computed border colour
     identical to the reference rather than falling back to currentColor */
  border-color: #f1f5f9;
}

.sd-page--nf .sd-nf__card-id {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sd-page--nf .sd-nf__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #1e7e4e;
}

.sd-page--nf .sd-nf__card-glyph {
  width: 16px;
  height: 16px;
}

.sd-page--nf .sd-nf__card-title {
  color: #0b1b3d;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.sd-page--nf .sd-nf__card-sub {
  color: #64748b;
  font-size: 11px;
  line-height: 16.5px;
}

.sd-page--nf .sd-nf__card-code {
  padding: 2px 8px;
  border-radius: 4px;
  background: #ecfdf5;
  color: #047857;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
}

.sd-page--nf .sd-nf__card-body {
  padding: 24px 0;
}

.sd-page--nf .sd-nf__card-note {
  margin: 0;
  color: #475569;
  font-size: 13.5px;
  line-height: 21.9375px;
}

.sd-page--nf .sd-nf__rows {
  margin-top: 16px;
  padding-top: 8px;
}

.sd-page--nf .sd-nf__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.8);
}

.sd-page--nf .sd-nf__row:first-child {
  margin-top: 0;
}

.sd-page--nf .sd-nf__row:hover {
  background: rgba(236, 253, 245, 0.5);
}

.sd-page--nf .sd-nf__row-label {
  color: #0b1b3d;
  font-size: 12.5px;
  line-height: 18.75px;
  font-weight: 500;
}

.sd-page--nf .sd-nf__row-no {
  color: #1e7e4e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.sd-page--nf .sd-nf__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.sd-page--nf .sd-nf__foot-note {
  color: #64748b;
  font-size: 12px;
  line-height: 18px;
}

.sd-page--nf .sd-nf__foot-link {
  color: #1e7e4e;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

.sd-page--nf .sd-nf__foot-link:hover {
  text-decoration: underline;
}

/* --- responsive tiers ----------------------------------------------------- */
@media (min-width: 640px) {
  .sd-page--nf .sd-nf {
    padding: 80px 0;
  }
  .sd-page--nf .sd-nf__num {
    font-size: 96px;
    line-height: 96px;
    letter-spacing: -2.4px;
  }
  .sd-page--nf .sd-nf__title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.9px;
  }
  .sd-page--nf .sd-nf__lede {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (min-width: 1024px) {
  .sd-page--nf .sd-nf {
    padding: 96px 0;
  }
  .sd-page--nf .sd-nf__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 64px;
  }
  .sd-page--nf .sd-nf__copy {
    grid-column: span 7;
  }
  .sd-page--nf .sd-nf__aside {
    display: block;
    grid-column: span 5;
  }
  .sd-page--nf .sd-nf__num {
    font-size: 112px;
    line-height: 112px;
    letter-spacing: -2.8px;
  }
  .sd-page--nf .sd-nf__title {
    font-size: 42px;
    line-height: 40px;
    letter-spacing: -1.05px;
  }
}

/* the export hides the "•" separators on small screens */
@media (max-width: 639px) {
  .sd-page--nf .sd-nf__path-sep {
    display: none;
  }
}

/* ============================================================
   GLOBAL ALIGNMENT — canonical hero first-content offset
   ============================================================
   Every primary page's first meaningful hero content starts on the same
   horizontal line, `--site-hero-offset` below the sticky header (the value
   measured from the approved homepage hero: 40px at >=1024px, 32px below).
   Each hero declares the offset once here, from the one token, instead of the
   nine unrelated historical values it used to carry (48/56/64/80px). No hero's
   composition, media treatment or internal layout is changed by this block.
   ------------------------------------------------------------ */
.ab-hero__inner,
.sv-hero__inner,
.in-hero__copy,
.fo-hero,
.ir-hero,
.ct-hero,
/* Credentials is the one page whose hero *is* the `pg-section` band, so the
   offset is declared on the band itself. Without this the shared `pg-section`
   padding (64/80px) would open the page 46px below every other route. */
.cc-hero {
  padding-top: var(--site-hero-offset);
}

/* The exported pills are `inline-flex`, which parks them 2px below their
   container's padding edge because of the line-box strut. Making them
   block-level flex boxes of content width keeps the approved look exactly and
   makes the offset above land on the pixel. */
.ab-hero__pill,
.sv-hero__pill,
.in-hero__pill,
.fo-hero__pill,
.ir-pill,
.ct-hero__pill,
.sd-pill,
.cc-hero .pg-eyebrow {
  display: flex;
  width: fit-content;
}

/* A hero that centres its copy against a taller column, or inside a fixed
   min-height band, drops its first content by a slack that varies with the
   content itself — which is exactly the "content jumps between pages"
   behaviour this task removes. Starting the copy at the top of the hero makes
   the offset deterministic; the columns still share one hero height. */
.fo-hero__grid,
.in-hero__grid,
.sd-hero {
  align-items: start;
}

/* ------------------------------------------------------------
   Services overview hero — stacked below the desktop split
   ------------------------------------------------------------
   On desktop the hero is a split composition: the photograph is a
   full-height layer behind the copy, softened by a white-to-transparent fade.
   Below the desktop breakpoint the copy wraps onto the dark right-hand side of
   that photograph, which puts dark text over a dark image. Here the photograph
   stops being a background layer and becomes an ordinary image block placed
   after the copy, so the text always sits on the clean white surface. The
   approved desktop split above 1024px is untouched.
   ------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .sv-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .sv-hero__inner {
    order: 1;
    padding-bottom: 32px;
  }

  .sv-hero__media {
    order: 2;
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .sv-hero__fade,
  .sv-hero__fade-edge {
    display: none;
  }
}

/* --- AA contrast corrections: accent text on dark surfaces -----------------
   Brand green has a maximum possible contrast of ~3.9:1 against pure black, so
   it can never satisfy 4.5:1 for normal text on a dark band. These two are the
   About-page labels that sat on dark surfaces without the on-dark treatment
   already established by `.pg-eyebrow--on-dark`, so they are switched to the
   same white used everywhere else on dark. Only the colour changes - font,
   size, spacing, transform and position are untouched. */
.pg-section--dark .pg-eyebrow,
.ab-purpose__card .ab-purpose__kicker {
  color: #ffffff;
}

/* ------------------------------------------------------------
   20. CORPORATE CREDENTIALS
   ------------------------------------------------------------
   Reconstructed from the approved `stitch.ui/credentials.ui` design: a light
   hero band (status pill + meta chips), a three-column statutory-particulars
   grid, a 5/7 registered-office split, a two-panel documentation block, a
   transparency band and a dark closing CTA. The route shell, gutters, content
   width, headings, rules and buttons all still come from the shared `pg-*` kit,
   so the page cannot drift from the rest of the site; only the page-specific
   composition below is new. */
.cc-page {
  background-color: #ffffff;
}

/* Band rhythm, scoped to this page only.

   Credentials is one document read top to bottom, but each band kept the shared
   `pg-section` padding (64px per side, 80px from 1024px), so the 128px/160px
   between two bands made consecutive sections read as separate pages rather
   than as one record. Only the BAND-TO-BAND whitespace is reduced here, by 30%
   of the shared value (64 -> 45, 80 -> 56), via `padding-block` on the section
   shells: card padding, card internals, headings, rules, grids, gutters and the
   content width all stay on their existing values.

   `:not(.cc-hero)` keeps the hero's top padding on the site's canonical
   first-content offset (`--site-hero-offset`, declared with the other routes in
   the alignment block at the end of this file) so the page still opens on the
   same line as every other route; only its bottom half joins the tighter
   rhythm. The trailing dark CTA is a `pg-section` too and tightens with the
   rest. */
.cc-page > .pg-section {
  padding-bottom: 45px;
}

.cc-page > .pg-section:not(.cc-hero) {
  padding-top: 45px;
}

@media (min-width: 1024px) {
  .cc-page > .pg-section {
    padding-bottom: 56px;
  }

  .cc-page > .pg-section:not(.cc-hero) {
    padding-top: 56px;
  }
}

/* The export opens on a slate-50 -> white gradient over a hairline. */
.cc-hero {
  background-image: linear-gradient(180deg, var(--pg-gray-bg) 0%, #ffffff 58%);
}

.cc-hero__inner {
  max-width: 768px;
}

.cc-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 20px;
  padding: 4px 12px;
  border: 1px solid rgba(31, 122, 63, 0.28);
  border-radius: 999px;
  background-color: var(--pg-green-light);
  color: var(--pg-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cc-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--pg-green);
}

.cc-hero__title {
  margin: 0 0 20px;
  color: var(--pg-navy);
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.cc-hero__lede {
  max-width: 768px;
  margin: 0 0 24px;
  color: var(--pg-navy-70);
  font-size: 16px;
  line-height: 26px;
}

/* Hero meta chips — verified particulars only. */
.cc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.cc-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--pg-border);
  border-radius: 4px;
  background-color: var(--pg-gray-100);
  color: var(--pg-navy);
}

.cc-chip__icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  color: var(--pg-green);
}

.cc-chip--accent {
  border-color: rgba(31, 122, 63, 0.28);
  background-color: var(--pg-green-light);
  color: var(--pg-green);
}

.cc-chip__dot {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: var(--pg-green);
}

.cc-head {
  max-width: 720px;
  margin-bottom: 40px;
}

.cc-head__rule {
  margin-top: 12px;
}

.cc-lede {
  margin: 12px 0 0;
}

/* One bordered record: each row is a labelled particular, separated by a
   hairline. A single column at every width keeps long values (the statutory
   name, the address) wrapping naturally instead of being squeezed. */
.cc-facts {
  max-width: 840px;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid var(--pg-gray-200);
  border-radius: 6px;
  overflow: hidden;
}

/* The registration record and the CTA that follows it are one stacked block.
   Without this the button sits flush against the record card; 24px is the
   kit's established stacked-block rhythm (`ct-blocks`, `ir-stack-6`, …). */
.cc-facts + .cc-action {
  margin-top: 24px;
}

.cc-fact {
  padding: 16px 20px;
}

.cc-fact + .cc-fact {
  border-top: 1px solid var(--pg-gray-200);
}

.cc-fact__label {
  margin: 0;
  color: var(--pg-green);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.cc-fact__value {
  margin: 4px 0 0;
  color: var(--pg-navy);
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
}

.cc-fact__note {
  margin: 4px 0 0;
  color: var(--pg-navy-70);
  font-size: 12px;
  line-height: 19px;
}

/* ------------------------------------------------------------
   Statutory particulars — one card per registered particular
   ------------------------------------------------------------ */
.cc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.cc-card {
  padding: 24px;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  background-color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cc-card:hover {
  border-color: var(--pg-gray-300);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.cc-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cc-card__label {
  color: var(--pg-navy-60);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.cc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--pg-gray-100);
  border-radius: 6px;
  background-color: var(--pg-gray-bg);
  color: var(--pg-green);
}

.cc-card__icon svg {
  width: 16px;
  height: 16px;
}

.cc-card__value {
  color: var(--pg-navy);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.cc-card__value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.02em;
}

.cc-card__note {
  margin: 8px 0 0;
  color: var(--pg-navy-60);
  font-size: 12px;
  line-height: 19px;
}

.cc-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ------------------------------------------------------------
   Registered office — context column + address card
   ------------------------------------------------------------ */
.cc-office {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.cc-office__lede {
  margin: 16px 0 24px;
}

.cc-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--pg-navy-70);
  font-size: 12px;
  line-height: 19px;
}

.cc-note__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cc-note__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--pg-green);
}

.cc-office__card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid var(--pg-border);
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.cc-office__deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 128px;
  height: 128px;
  margin: -32px -32px 0 0;
  border-bottom-left-radius: 100%;
  background-color: var(--pg-green-light);
  pointer-events: none;
}

.cc-office__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.cc-office__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(31, 122, 63, 0.2);
  border-radius: 8px;
  background-color: var(--pg-green-light);
  color: var(--pg-green);
}

.cc-office__icon svg {
  width: 24px;
  height: 24px;
}

.cc-office__label {
  display: block;
  color: var(--pg-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.cc-office__name {
  margin: 4px 0 12px;
  color: var(--pg-navy);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.cc-office__address {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-style: normal;
  color: var(--pg-navy-70);
  font-size: 16px;
  line-height: 26px;
}

.cc-office__line {
  color: var(--pg-navy);
  font-weight: 500;
}

.cc-office__country {
  color: var(--pg-navy-60);
}

.cc-office__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--pg-gray-100);
}

.cc-office__fact {
  min-width: 0;
}

.cc-office__fact-label {
  color: var(--pg-navy-60);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.cc-office__fact-value {
  margin: 4px 0 0;
  color: var(--pg-navy);
  font-size: 12px;
  line-height: 19px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   Corporate documentation — overview + due diligence panels
   ------------------------------------------------------------ */
.cc-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.cc-panel {
  padding: 28px;
  border: 1px solid var(--pg-border);
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.cc-panel--muted {
  background-color: var(--pg-gray-bg);
  box-shadow: none;
}

.cc-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cc-panel__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--pg-green);
}

.cc-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-color: var(--pg-gray-100);
  color: var(--pg-navy);
}

.cc-panel__icon svg {
  width: 16px;
  height: 16px;
}

.cc-panel__title {
  margin: 0;
  color: var(--pg-navy);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.cc-panel__body {
  margin: 0 0 16px;
  color: var(--pg-navy-70);
  font-size: 14px;
  line-height: 22.75px;
}

.cc-stand {
  padding: 16px;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  background-color: #ffffff;
}

.cc-stand__label {
  display: block;
  margin-bottom: 4px;
  color: var(--pg-navy-60);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.cc-stand__value {
  display: flex;
  align-items: center;
  color: var(--pg-green);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.cc-stand__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.cc-notice {
  padding: 16px;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  background-color: var(--pg-gray-bg);
  color: var(--pg-navy-70);
  font-size: 12px;
  line-height: 19px;
}

.cc-notice__label {
  display: block;
  margin-bottom: 4px;
  color: var(--pg-navy);
  font-weight: 600;
}

/* ------------------------------------------------------------
   Corporate transparency band
   ------------------------------------------------------------ */
.cc-trans {
  max-width: 1024px;
  padding: 32px;
  border: 1px solid var(--pg-border);
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.cc-trans__copy {
  min-width: 0;
}

.cc-trans__body {
  margin: 12px 0 0;
}

.cc-trans__icon {
  display: none;
}

/* ------------------------------------------------------------
   Closing CTA band
   ------------------------------------------------------------ */
.cc-cta__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.cc-cta__copy {
  max-width: 672px;
}

.cc-cta__title {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.cc-cta__lede {
  margin: 12px 0 0;
  color: var(--pg-gray-200-text);
  font-size: 14px;
  line-height: 22.75px;
}

.cc-cta__action {
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .cc-hero__title {
    font-size: 36px;
    line-height: 44px;
  }

  .cc-hero__lede {
    font-size: 18px;
    line-height: 28px;
  }

  /* Label and particular sit on one line once there is room for both. */
  .cc-fact {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 24px;
    align-items: baseline;
  }

  .cc-fact__value {
    margin-top: 0;
  }

  .cc-fact__note {
    grid-column: 2;
  }

  .cc-office__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The transparency icon only appears once there is room for it beside the copy
     (`hidden sm:block` in the export). */
  .cc-trans {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 40px;
  }

  .cc-trans__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(31, 122, 63, 0.2);
    border-radius: 8px;
    background-color: var(--pg-green-light);
    color: var(--pg-green);
  }

  .cc-trans__icon svg {
    width: 24px;
    height: 24px;
  }
}

/* Statutory cards and the documentation panels collapse deliberately:
   one column, then two (`md`), then three (`lg`) — the export's own order. */
@media (min-width: 768px) {
  .cc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-doc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cc-hero__title {
    font-size: 48px;
    line-height: 48px;
  }

  .cc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cc-office {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .cc-cta__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}