:root {
  color-scheme: light;
  --navy-950: #00254b;
  --navy-900: #00254b;
  --navy-800: #00254b;
  --teal-600: #16a085;
  --mint-400: #00cb99;
  --amber-500: #f59e0b;
  --amber-400: #d97706;
  --cream-100: #f5f0e8;
  --white: #ffffff;
  --ink: #00254b;
  --body: #00254b;
  --muted: #00254b;
  --line: #dce3e8;
  --surface: #f8f9ff;
  --page-max: 80rem;
  --reading-max: 44rem;
  --section-space: clamp(3rem, 5vw, 4.75rem);
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --shadow-soft: 0 1.5rem 4rem rgba(0, 37, 75, 0.1);
  --shadow-panel: 0 1.8rem 5rem rgba(0, 37, 75, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: clip;
  background: var(--white);
  color: var(--body);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
ul,
ol,
dl {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 14ch;
  margin-bottom: 1.5rem;
  color: var(--white);
  font-size: clamp(3rem, 2rem + 3.15vw, 5rem);
  line-height: 1.02;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 1.55rem + 2vw, 3.55rem);
  line-height: 1.08;
}

h3 {
  margin-bottom: 0.65rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child {
  margin-bottom: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy-900);
  font-weight: 700;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.section-shell {
  width: min(var(--page-max), calc(100% - 6rem));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section:not(.hero) {
  border-top: 1px solid rgba(0, 37, 75, 0.06);
}

.section--white {
  /* Faint brand-blue wash on white. Brand blue #00254B at <=5% so it reads as a
     tint, not a colour block; fades out by 78% so section copy sits on plain
     white. Applies at every width - mobile and desktop alike. */
  background:
    linear-gradient(
      180deg,
      rgba(0, 37, 75, 0.05) 0%,
      rgba(0, 37, 75, 0.018) 42%,
      rgba(0, 37, 75, 0) 78%
    ),
    var(--white);
}

.section--cream {
  background: var(--cream-100);
}

.section--surface {
  background: var(--surface);
}

.section--navy,
.section--booking {
  overflow: hidden;
  border-top-color: rgba(255, 255, 255, 0.08);
  background: var(--navy-900);
}

.section-heading {
  max-width: var(--reading-max);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.section-heading > p:last-child {
  max-width: 39rem;
  margin-inline: auto;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
}

.section-heading--left {
  margin-inline: 0;
  text-align: left;
}

.section-heading--left > p:last-child {
  margin-inline: 0;
}

.section-heading--light h2 {
  color: var(--white);
}

.section-heading--light > p:last-child {
  color: rgba(255, 255, 255, 0.72);
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  /* design.md brand green #16A085 measures 2.89:1 on cream, so it fails as
     label text. The spec also requires sufficient contrast, so the green stays
     as the graphic marker and the wording uses navy. */
  color: var(--navy-900);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--teal-600);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--teal-600) 16%, transparent);
  content: "";
}

.section-heading--left .eyebrow,
.hero .eyebrow,
.booking-shell .eyebrow {
  justify-content: flex-start;
}

.section-heading--light .eyebrow,
.hero .eyebrow {
  color: var(--mint-400);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: linear-gradient(180deg, rgba(0, 37, 75, 0.92), rgba(0, 37, 75, 0));
  transition: background 180ms ease, box-shadow 180ms ease;
}

.site-header--scrolled {
  background: rgba(0, 37, 75, 0.97);
  box-shadow: 0 0.8rem 2rem rgba(0, 37, 75, 0.2);
  backdrop-filter: blur(14px);
}

.header-inner {
  display: grid;
  min-height: 5rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

.brand-link {
  display: block;
}

.brand-link img {
  width: 8.25rem;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-link::after {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  left: 0;
  height: 0.12rem;
  background: var(--mint-400);
  content: "";
  transform: scaleX(0);
  transition: transform 160ms ease;
}

.nav-link:hover,
.nav-link[aria-current="location"] {
  color: var(--white);
}

.nav-link[aria-current="location"]::after {
  transform: scaleX(1);
}

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: var(--amber-500);
  color: var(--navy-950);
  box-shadow: 0 0.8rem 2rem rgba(245, 158, 11, 0.2);
}

.button--primary:hover {
  background: var(--amber-400);
}

.button--secondary {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
}

.button--secondary:hover {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.08);
}

.button--wide {
  width: 100%;
}

.header-cta {
  min-height: 2.75rem;
  padding-inline: 1rem;
  white-space: nowrap;
}

.hero {
  position: relative;
  display: grid;
  min-height: min(48rem, 100vh);
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding-top: 9.5rem;
  padding-bottom: 5.5rem;
  background: var(--navy-900);
}

.hero::before {
  position: absolute;
  /* Oversized so the transform-based drift never exposes an edge (.hero clips it). */
  inset: -2rem;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 35%, rgba(0, 203, 153, 0.12), transparent 24rem),
    radial-gradient(circle at 78% 58%, rgba(245, 158, 11, 0.08), transparent 22rem),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 3rem 3rem, 3rem 3rem;
  content: "";
  pointer-events: none;
  animation: hero-light-drift 16s ease-in-out infinite alternate;
}

/* Transform, not background-position: the drift now runs on the compositor
   instead of repainting the whole hero on every frame. */
@keyframes hero-light-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0.75rem, -0.5rem, 0); }
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.82fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.hero-copy {
  max-width: 44rem;
}

.hero-subheadline {
  max-width: 39rem;
  margin-bottom: 1.8rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 0.96rem + 0.38vw, 1.25rem);
  font-weight: 600;
  line-height: 1.58;
}

.hero-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.section-actions {
  justify-content: center;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.hero-support {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.84rem;
}

.hero-proof {
  position: relative;
  overflow: hidden;
  padding: clamp(1.65rem, 3vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: var(--shadow-panel);
  color: var(--white);
  backdrop-filter: blur(18px);
}

.hero-proof::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.25rem;
  background: linear-gradient(var(--mint-400), var(--amber-500));
  content: "";
}

.fluent-summary-card {
  container-type: inline-size;
}

.hero-proof__label {
  margin-bottom: 0.65rem;
  color: var(--mint-400);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-proof__title {
  display: block;
  max-width: 13ch;
  margin-bottom: 1.7rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.hero-proof dl {
  margin-bottom: 0;
}

.fluent-meta-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-proof dt {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.hero-proof dd {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 48.01rem) {
  .hero-proof {
    padding: clamp(1.35rem, 2vw, 1.8rem);
  }

  .hero-proof__title {
    margin-bottom: 0.9rem;
  }

  .fluent-meta-row {
    padding-block: 0.58rem;
  }

  .hero-proof dd[data-highlight="true"] {
    color: var(--amber-500);
  }

  .proof-panel {
    align-items: stretch;
  }

  .proof-segment.proof-card {
    display: flex;
    min-height: 12.5rem;
    padding: 1.1rem 1.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .proof-card__eyebrow,
  .proof-card__metric-label,
  .proof-card__detail {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
  }

  .proof-card__eyebrow {
    color: var(--body);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-align: center;
  }

  .proof-segment--featured .proof-card__eyebrow {
    color: rgba(255, 255, 255, 0.78);
  }

  .proof-card__logo-row {
    display: flex;
    min-height: 1.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
  }

  .proof-card__logo {
    display: grid;
    min-width: 3.5rem;
    min-height: 1.8rem;
    padding: 0.25rem 0.45rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
  }

  .proof-segment--featured .proof-card__logo {
    border-color: rgba(255, 255, 255, 0.55);
  }

  .proof-card__logo img {
    display: block;
    width: auto;
    max-width: 4.5rem;
    max-height: 1.75rem;
  }

  .proof-card__client,
  .proof-card__metric-label {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .proof-segment--featured .proof-card__client,
  .proof-segment--featured .proof-card__metric-label {
    color: var(--white);
  }

  .proof-card__divider {
    height: 1px;
    background: var(--line);
  }

  .proof-segment--featured .proof-card__divider {
    background: rgba(255, 255, 255, 0.14);
  }

  .proof-card .proof-segment__body {
    min-height: 0;
    height: 100%;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
  }

  .proof-card__metric {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1.75rem, 1.5rem + 0.5vw, 2rem);
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .proof-segment--featured .proof-card__metric,
  .proof-segment--featured .proof-card__metric [data-count-up] {
    color: var(--amber-500);
  }

  .proof-segment--support .proof-card__metric [data-count-up] {
    color: var(--teal-600);
  }

  .proof-card__detail {
    display: -webkit-box;
    overflow: hidden;
    color: var(--body);
    font-size: 0.8rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .proof-card__facts {
    display: grid;
    width: 100%;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0 0;
    gap: 0.4rem 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    list-style: none;
  }

  .proof-card__facts li {
    display: grid;
    min-width: 0;
    padding-inline: 0.45rem;
    gap: 0.08rem;
  }

  .proof-card__facts strong,
  .proof-card__facts span {
    font-family: "Inter", system-ui, sans-serif;
  }

  .proof-card__facts strong {
    color: var(--navy-950);
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .proof-card__facts span {
    color: var(--body);
    font-size: 0.66rem;
    line-height: 1.25;
  }

  .proof-segment--featured .proof-card__facts {
    border-color: rgba(255, 255, 255, 0.14);
  }

  .proof-segment--featured .proof-card__facts strong {
    color: var(--white);
  }

  .proof-segment--featured .proof-card__facts span {
    color: rgba(255, 255, 255, 0.78);
  }

  .proof-segment--featured .proof-card__detail {
    color: rgba(255, 255, 255, 0.78);
  }

  .proof-card .text-link {
    margin-top: auto;
    font-size: 0.8rem;
    text-decoration: none;
  }

  .proof-card .text-link:hover {
    text-decoration: underline;
  }
}

.hero-glow {
  position: absolute;
  right: -15rem;
  bottom: -21rem;
  width: 45rem;
  height: 35rem;
  border-radius: 50%;
  background: rgba(0, 203, 153, 0.1);
  filter: blur(100px);
  pointer-events: none;
}

.content-list__index {
  color: var(--navy-900);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#proof {
  padding: 1rem 0 1.5rem;
}

/* Power BI's #proof carries two shells - the comparison card, then the heading
   and the reporting-path diagram. They met at exactly 0px, so the elevated
   white card's bottom edge ran straight into the "Where the gaps usually are"
   eyebrow. Fabric has a single shell here and never showed this. */
#proof .section-shell + .section-shell {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}

#proof .section-shell {
  width: min(103.75rem, calc(100% - 4rem));
  margin-right: 0;
  margin-left: max(2rem, calc((100vw - 103.75rem) / 2));
}

#proof .section-heading {
  max-width: 78rem;
  margin-bottom: 0.75rem;
}

#proof .section-heading h2 {
  font-size: clamp(2.35rem, 2rem + 1.5vw, 3.25rem);
}

#proof .section-heading > p:last-child {
  max-width: 58rem;
}

.fabric-platform,
#proof .fabric-platform {
  margin-top: 0;
}

.fabric-system,
.fabric-phase__services {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fabric-system {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.48fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 1.125rem;
}

.fabric-phase {
  --phase-accent: var(--navy-800);
  position: relative;
  min-width: 0;
  padding: 0.55rem 1rem 0.8rem;
  border: 1px solid rgba(0, 37, 75, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.62);
}

.fabric-phase--organise {
  --phase-accent: var(--teal-600);
}

.fabric-phase--decide {
  --phase-accent: var(--amber-500);
}

.fabric-phase__heading {
  display: flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1.2rem;
  border-bottom: 2px solid var(--navy-900);
  color: var(--navy-950);
  font-size: clamp(0.76rem, 0.68rem + 0.25vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.fabric-phase__icon,
.proof-segment__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(0, 37, 75, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--phase-accent, var(--navy-900));
}

.fabric-phase__icon {
  width: 2.65rem;
  height: 2.65rem;
}

.fabric-phase__icon svg,
.proof-segment__icon svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.fabric-phase--decide .fabric-phase__icon svg,
.fabric-phase--decide .fabric-service__icon svg,
.fabric-service:last-child .fabric-service__icon svg {
  fill: currentColor;
  stroke: none;
}

.fabric-phase__services {
  display: grid;
  min-height: 15.75rem;
  gap: 2rem;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.fabric-service {
  position: relative;
  display: grid;
  height: 15.75rem;
  min-width: 0;
  padding: 0.7rem 0.65rem 1rem;
  gap: 0.6rem;
  grid-template-rows: auto 2.75rem minmax(2.3rem, auto) minmax(2.8rem, 1fr) auto;
  align-items: start;
  justify-items: center;
  border: 1px solid rgba(0, 37, 75, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.58);
  color: var(--navy-900);
  text-align: center;
  transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

.fabric-service__index,
.fabric-service__icon,
.fabric-service__name,
.fabric-service__handover {
  transition: background-color 260ms ease, border-color 260ms ease,
    box-shadow 260ms ease, color 260ms ease;
}

.fabric-service:not(:last-child)::after,
.fabric-phase:not(:last-child)::after {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 0.82rem;
  height: 0.82rem;
  border-top: 2px solid var(--navy-900);
  border-right: 2px solid var(--navy-900);
  content: "";
  pointer-events: none;
  transform: translateY(-50%) rotate(45deg);
}

.fabric-service:not(:last-child)::after {
  right: -1.52rem;
}

.fabric-phase:not(:last-child)::after {
  top: calc(0.55rem + 3.2rem + 1.2rem + 7.875rem);
  right: -0.76rem;
}

.fabric-service__index {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 0 0 0.25rem rgba(0, 37, 75, 0.06);
}

.fabric-service__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: var(--phase-accent);
}

.fabric-service__icon svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.fabric-service__name {
  align-self: end;
  color: var(--navy-950);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}

.fabric-service__note {
  max-width: 18rem;
  color: var(--body);
  font-size: 0.78rem;
  line-height: 1.45;
}

.fabric-service__handover {
  align-self: end;
  padding: 0.35rem 0.25rem;
  border: 1px solid rgba(0, 37, 75, 0.18);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--phase-accent) 8%, var(--white));
  color: var(--navy-900);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes fabric-card-settle {
  from {
    opacity: 0.78;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--phase-accent) 0%, transparent);
    transform: translateY(0.3rem);
  }

  50% {
    opacity: 1;
    border-color: var(--phase-accent);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--phase-accent) 72%, transparent),
      0 0 1.6rem color-mix(in srgb, var(--phase-accent) 52%, transparent);
    transform: translateY(0);
  }

  to {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--phase-accent) 0%, transparent);
    transform: translateY(0);
  }
}

@keyframes fabric-arrow-forward {
  from {
    opacity: 0.35;
    transform: translate(-0.3rem, -50%) rotate(45deg);
  }

  to {
    opacity: 1;
    transform: translate(0, -50%) rotate(45deg);
  }
}

.fabric-service.is-active {
  border-color: color-mix(in srgb, var(--phase-accent) 64%, var(--navy-900));
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
  animation: fabric-card-settle 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Only the phase strip keeps this animation: its arrow is a border chevron that
   is drawn rotated. The service arrows are now upright circles, so the
   keyframes' rotate(45deg) would skew them. */
@media (min-width: 78.01rem) {
  .fabric-phase.om-rail__phase--active:not(:last-child)::after {
    animation: fabric-arrow-forward 360ms ease-out both;
  }
}

.fabric-service.is-active .fabric-service__index {
  background: var(--phase-accent);
}

/* One restrained live cue at a time; no dimensions or positions change. */
.fabric-service.is-live {
  border-color: color-mix(in srgb, var(--phase-accent) 82%, var(--navy-900));
  background: color-mix(in srgb, var(--phase-accent) 9%, var(--white));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--phase-accent) 34%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--phase-accent) 30%, transparent);
}

.fabric-service.is-live .fabric-service__index {
  background: var(--phase-accent);
  box-shadow:
    0 0 0 0.3rem color-mix(in srgb, var(--phase-accent) 16%, transparent),
    0 0 1rem color-mix(in srgb, var(--phase-accent) 42%, transparent);
}

.fabric-service.is-live .fabric-service__icon,
.fabric-service.is-live .fabric-service__name {
  color: color-mix(in srgb, var(--phase-accent) 84%, var(--navy-950));
}

.fabric-service.is-live .fabric-service__handover {
  border-color: color-mix(in srgb, var(--phase-accent) 58%, var(--navy-900));
  background: color-mix(in srgb, var(--phase-accent) 15%, var(--white));
}

.fabric-service:has(+ .fabric-service.is-live)::after,
.fabric-phase:has(+ .fabric-phase .fabric-service.is-live:first-child)::after {
  border-color: var(--handover-accent, var(--phase-accent));
  filter: drop-shadow(0 0 0.3rem var(--handover-accent, var(--phase-accent)));
}

.fabric-phase--land:has(+ .fabric-phase .fabric-service.is-live:first-child)::after {
  --handover-accent: var(--teal-600);
}

.fabric-phase--organise:has(+ .fabric-phase .fabric-service.is-live:first-child)::after {
  --handover-accent: var(--amber-500);
}

.fabric-platform.is-live-complete .fabric-service {
  border-color: color-mix(in srgb, var(--phase-accent) 38%, var(--navy-900));
  background: color-mix(in srgb, var(--phase-accent) 5%, var(--white));
}

.fabric-platform.is-live-complete .fabric-service__index {
  background: var(--phase-accent);
}

.fabric-platform .om-diagram__caption {
  max-width: 54rem;
  margin-top: 0.75rem;
  color: var(--navy-900);
  font-size: 0.92rem;
}

.proof-panel {
  display: grid;
  overflow: hidden;
  margin-top: 0.875rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(0, 37, 75, 0.16);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.proof-segment {
  display: grid;
  min-width: 0;
  min-height: 11.75rem;
  padding: 0.625rem 1.4rem;
  gap: 1.15rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.proof-segment + .proof-segment {
  border-left: 1px solid var(--line);
}

.proof-segment--featured {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.78);
}

.proof-segment__icon {
  --phase-accent: var(--navy-900);
  width: 5.3rem;
  height: 5.3rem;
}

.proof-segment__icon svg {
  width: 2.9rem;
  height: 2.9rem;
  stroke-width: 1.65;
}

.proof-segment--featured .proof-segment__icon {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
}

.proof-segment__body {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

.proof-feature h3,
.proof-segment--support strong {
  margin: 0;
  color: var(--navy-950);
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.035em;
}

.proof-feature h3 {
  color: var(--white);
  font-size: clamp(1.1rem, 1rem + 0.2vw, 1.2rem);
}

.proof-feature p:not(.proof-feature__metric) {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
}

.proof-feature__metric {
  margin: 0;
  color: var(--amber-500);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(2.4rem, 2rem + 1vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.95;
}

.proof-feature .text-link {
  margin-top: 0.45rem;
  color: var(--white);
  font-size: 0.84rem;
}

.proof-segment--support strong {
  font-size: clamp(1.75rem, 1.5rem + 0.5vw, 2rem);
  line-height: 1;
}

.proof-segment--support span {
  color: var(--navy-950);
  font-weight: 750;
  line-height: 1.35;
}

.proof-segment--support [data-count-up] {
  color: var(--teal-600);
}

.proof-segment--support small {
  color: var(--body);
  line-height: 1.45;
}

#proof .section-actions {
  margin-top: 1.5rem;
}

#proof .section-actions .button {
  min-width: 21.875rem;
  font-size: 1rem;
}

.text-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  font-weight: 800;
  text-underline-offset: 0.25rem;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
}

.split-heading .section-heading {
  position: sticky;
  top: 7.5rem;
  margin-bottom: 0;
}

.content-list {
  margin: 0;
  padding: 0;
}

.content-list > li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.content-list > li:last-child {
  border-bottom: 1px solid var(--line);
}

.content-list strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
}

.content-list p {
  margin-bottom: 0;
}

.fluent-step-list {
  display: grid;
  margin: 2.25rem 0 0;
  padding: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(0, 37, 75, 0.14);
  border-radius: var(--radius-lg);
  background: var(--surface);
  list-style: none;
}

.fluent-step-list li {
  display: grid;
  gap: 0.55rem;
  padding: 1.15rem 0.85rem;
}

.fluent-step-list li + li {
  border-left: 1px solid rgba(0, 37, 75, 0.14);
}

.fluent-step-list span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
}

.fluent-step-list strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Reference-matched outcomes composition. The card stack and adoption rail
   share sequence keys, so their active states are applied in the same tick. */
#outcomes.outcomes-showcase {
  isolation: isolate;
  padding-block: clamp(2.75rem, 4vw, 4rem);
}

#outcomes .outcomes-layout {
  display: block;
  width: min(64rem, calc(100% - 6rem));
}

/* Reference-led business-impact composition: intentionally mobile-only. */
#impact .impact-mobile-layout {
  display: none;
}

@media (max-width: 63.99rem) {
  #impact {
    padding-block: 2.75rem;
    background:
      radial-gradient(circle at 92% 4%, rgba(0, 203, 153, 0.12), transparent 28%),
      linear-gradient(180deg, var(--surface), var(--white));
  }

  #impact .section-shell {
    width: min(100% - 1.5rem, 40rem);
  }

  #impact .section-heading {
    margin-bottom: 0.75rem;
    padding: 1.4rem 1rem 1.25rem;
    border: 1px solid rgba(0, 37, 75, 0.08);
    border-radius: 1.15rem;
    background: var(--white);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 37, 75, 0.07);
  }

  #impact .section-heading .eyebrow {
    justify-content: center;
    margin-bottom: 0.75rem;
    color: var(--navy-800);
  }

  #impact .section-heading h2 {
    max-width: 18ch;
    margin: 0 auto 0.75rem;
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.08;
    text-align: center;
  }

  #impact .section-heading > p:last-child {
    max-width: 36ch;
    margin: 0 auto;
    color: var(--body);
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
  }

  #impact .impact-grid,
  #impact .impact-outcome {
    display: none;
  }

  #impact .impact-mobile-layout {
    display: grid;
    gap: 0.75rem;
  }

  #impact .impact-mobile-proof {
    display: grid;
    min-height: 13.5rem;
    padding: 1rem;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    border: 1px solid rgba(0, 37, 75, 0.1);
    border-radius: 1.15rem;
    background: var(--white);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 37, 75, 0.07);
  }

  #impact .impact-mobile-gauge {
    display: grid;
    min-width: 0;
    place-items: center;
    align-content: center;
  }

  #impact .impact-mobile-gauge__ring {
    position: relative;
    display: grid;
    width: min(8.6rem, 34vw);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 205deg, var(--navy-800) 0 76%, rgba(0, 37, 75, 0.16) 76% 91%, transparent 91% 100%);
    transform: rotate(-4deg);
  }

  #impact .impact-mobile-gauge__ring::before {
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(0, 37, 75, 0.08);
    border-radius: 50%;
    background: var(--white);
    box-shadow: inset 0 0 1.2rem rgba(0, 203, 153, 0.08);
    content: "";
  }

  #impact .impact-mobile-gauge__ring span {
    position: relative;
    z-index: 1;
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1.75rem, 8vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    transform: rotate(4deg);
  }

  #impact .impact-mobile-gauge > p {
    margin: -0.15rem 0 0;
    color: var(--navy-800);
    font-size: 0.67rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
  }

  #impact .impact-mobile-metrics {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
  }

  #impact .impact-mobile-metrics li {
    display: grid;
    min-width: 0;
    padding: 0.7rem 0;
    gap: 0.65rem;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: center;
    border-bottom: 1px solid rgba(0, 37, 75, 0.09);
  }

  #impact .impact-mobile-metrics li:last-child {
    border-bottom: 0;
  }

  #impact .impact-mobile-metric__icon {
    display: grid;
    width: 2.25rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 203, 153, 0.12);
    color: var(--teal-600);
  }

  #impact .impact-mobile-metric__icon svg {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  #impact .impact-mobile-metrics li > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
  }

  #impact .impact-mobile-metrics strong {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.12rem;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  #impact .impact-mobile-metrics small {
    color: var(--body);
    font-size: 0.65rem;
    line-height: 1.3;
  }

  #impact .impact-mobile-advantage {
    padding: 1.2rem;
    border: 1px solid rgba(0, 37, 75, 0.08);
    border-radius: 1.15rem;
    background: var(--white);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 37, 75, 0.07);
  }

  #impact .impact-mobile-advantage__heading {
    display: grid;
    margin-bottom: 0.75rem;
    gap: 0.7rem;
    grid-template-columns: 2.3rem minmax(0, 1fr);
    align-items: center;
  }

  #impact .impact-mobile-advantage__icon {
    display: grid;
    width: 2.3rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--navy-800);
    color: var(--white);
    box-shadow: 0 0.35rem 0.85rem rgba(0, 37, 75, 0.18);
  }

  #impact .impact-mobile-advantage__icon svg {
    width: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  #impact .impact-mobile-advantage h3 {
    margin: 0;
    color: var(--navy-950);
    font-size: 1.05rem;
    text-align: left;
  }

  #impact .impact-mobile-advantage ul {
    display: grid;
    margin: 0;
    padding: 0 0 0 3rem;
    gap: 0.5rem;
    list-style: none;
  }

  #impact .impact-mobile-advantage li {
    position: relative;
    padding-left: 1.55rem;
    color: var(--navy-800);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.35;
  }

  #impact .impact-mobile-advantage li::before {
    position: absolute;
    top: 0.03rem;
    left: 0;
    display: grid;
    width: 1rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--navy-800);
    color: var(--white);
    content: "✓";
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
  }

  #impact .impact-mobile-sources {
    margin: 0.85rem 0 0 3rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(0, 37, 75, 0.1);
    color: var(--body);
    font-size: 0.67rem;
  }

  #impact .impact-mobile-sources summary {
    color: var(--navy-800);
    font-weight: 750;
    cursor: pointer;
  }

  #impact .impact-mobile-sources p {
    margin: 0.45rem 0 0;
    line-height: 1.45;
  }

  #impact .impact-mobile-flow {
    padding: 0.45rem 0 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #impact .impact-mobile-flow h3 {
    margin: 0 0 0.7rem;
    color: var(--navy-950);
    font-size: 0.92rem;
    text-align: left;
  }

  #impact .impact-mobile-flow ol {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
  }

  #impact .impact-mobile-flow ol::before {
    position: absolute;
    top: 1.35rem;
    right: 11%;
    left: 11%;
    height: 2px;
    background: var(--navy-800);
    content: "";
  }

  #impact .impact-mobile-flow li {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 0.45rem;
    color: var(--navy-950);
    font-size: 0.62rem;
    line-height: 1.2;
    text-align: center;
  }

  #impact .impact-mobile-flow li > span {
    display: grid;
    width: 2.75rem;
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid var(--navy-800);
    border-radius: 50%;
    background: var(--navy-800);
    color: var(--white);
    box-shadow: 0 0.35rem 0.9rem rgba(0, 37, 75, 0.09);
  }

  #impact .impact-mobile-flow svg {
    width: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }

  #impact .impact-mobile-flow strong {
    max-width: 8ch;
  }

  #impact .impact-mobile-cta {
    display: grid;
    min-height: 4.5rem;
    padding: 0.9rem 1rem;
    gap: 0.75rem;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid rgba(0, 203, 153, 0.28);
    border-radius: 1rem;
    background: var(--navy-950);
    color: var(--white);
    text-decoration: none;
    box-shadow: 0 1rem 2.5rem rgba(0, 37, 75, 0.2);
  }

  #impact .impact-mobile-cta__copy {
    display: grid;
    gap: 0.15rem;
  }

  #impact .impact-mobile-cta__icon {
    display: grid;
    width: 2.4rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
  }

  #impact .impact-mobile-cta__icon svg {
    width: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  #impact .impact-mobile-cta strong {
    color: var(--white);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.2;
  }

  #impact .impact-mobile-cta small {
    color: var(--mint-400);
    font-size: 0.67rem;
    line-height: 1.3;
  }

  #impact .impact-mobile-cta > svg {
    width: 1.4rem;
    fill: none;
    stroke: var(--mint-400);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 180ms ease;
  }

  #impact .impact-mobile-cta:hover > svg,
  #impact .impact-mobile-cta:focus-visible > svg {
    transform: translateX(0.2rem);
  }

  #impact .impact-mobile-cta:focus-visible,
  #impact .impact-mobile-sources summary:focus-visible {
    outline: 3px solid var(--amber-500);
    outline-offset: 0.2rem;
  }
}

@media (max-width: 28rem) {
  #impact .impact-mobile-proof {
    padding-inline: 0.75rem;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  #impact .impact-mobile-metrics li {
    gap: 0.45rem;
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  #impact .impact-mobile-metric__icon {
    width: 2rem;
  }
}

#outcomes .outcomes-layout .section-heading {
  position: static;
  max-width: 54rem;
  margin: 0 auto clamp(2.75rem, 5vw, 4rem);
}

#outcomes .outcomes-layout .section-heading h2 {
  position: relative;
  max-width: 11ch;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

#outcomes .outcomes-layout .section-heading h2::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 5.25rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--mint-400);
  content: "";
  transform: translateX(-50%);
}

#outcomes .outcomes-layout .section-heading > p:last-child {
  max-width: 43rem;
  padding-left: 0;
  border-left: 0;
  line-height: 1.7;
}

#outcomes .outcomes-card-column {
  --outcome-card-gap: 0.75rem;
  --outcome-card-height: 7rem;
  width: min(58rem, 100%);
  min-width: 0;
  margin-inline: auto;
}

#outcomes .outcomes-card-window {
  height: calc((var(--outcome-card-height) * 3) + (var(--outcome-card-gap) * 2));
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  scroll-snap-type: y mandatory;
  scrollbar-color: color-mix(in srgb, var(--teal-600) 45%, transparent) transparent;
  scrollbar-width: thin;
}

#outcomes .outcome-list {
  display: grid;
  gap: var(--outcome-card-gap);
  grid-auto-rows: var(--outcome-card-height);
}

#outcomes .outcome-card {
  display: grid;
  min-height: 0;
  height: var(--outcome-card-height);
  align-items: center;
  padding: 0.85rem 0.75rem;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: 4.5rem 4.25rem minmax(0, 1fr) 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 0.5rem 1.8rem rgba(0, 37, 75, 0);
  list-style: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: border-color 420ms ease, box-shadow 420ms ease,
    opacity 420ms ease, transform 420ms ease;
}

#outcomes.is-sequence-running .outcome-card {
  opacity: 0.52;
}

#outcomes .outcome-card.is-active {
  border-color: color-mix(in srgb, var(--mint-400) 72%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint-400) 28%, transparent),
    0 0 2rem color-mix(in srgb, var(--teal-600) 22%, transparent),
    inset 3px 0 0 var(--mint-400);
  opacity: 1;
  transform: translateX(0.3rem);
}

#outcomes .outcome-card__index {
  display: grid;
  min-height: 4.75rem;
  place-items: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface), #eef1f9);
  color: var(--navy-900);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.75rem, 1.35rem + 1vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  transition: background 420ms ease, color 420ms ease;
}

#outcomes .outcome-card.is-active .outcome-card__index {
  background: var(--navy-900);
  color: var(--white);
}

#outcomes .outcome-card__icon {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy-900);
  transition: background 420ms ease, color 420ms ease, transform 420ms ease;
}

#outcomes .outcome-card__icon svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

#outcomes .outcome-card.is-active .outcome-card__icon {
  background: color-mix(in srgb, var(--mint-400) 14%, var(--surface));
  color: var(--teal-600);
  transform: scale(1.04);
}

#outcomes .outcome-card__copy {
  min-width: 0;
}

#outcomes .outcome-card__copy strong {
  margin-bottom: 0.25rem;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
}

#outcomes .outcome-card__copy p {
  max-width: 49rem;
  font-size: clamp(0.9rem, 0.85rem + 0.22vw, 1.05rem);
  line-height: 1.48;
}

#outcomes .outcome-card__chevron {
  display: grid;
  min-height: 4rem;
  place-items: center;
  border-left: 1px solid var(--line);
  color: var(--navy-900);
}

#outcomes .outcome-card__chevron svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

#outcomes .outcomes-path--full {
  width: min(54rem, 100%);
  min-width: 0;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-color: #94a3b8 transparent;
  scrollbar-width: thin;
}

#outcomes .outcomes-path--full:focus-visible {
  outline: 3px solid var(--mint-400);
  outline-offset: 0.25rem;
}

#outcomes .outcomes-path .fluent-step-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 0;
  background: transparent;
}

#outcomes .outcomes-path .fluent-step-list::after {
  content: none;
}

#outcomes .outcomes-step {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 8.5rem;
  align-content: center;
  justify-items: center;
  padding: 1rem 0.65rem;
  gap: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: var(--white);
  scroll-snap-align: center;
  text-align: center;
  transition: border-color 380ms ease, box-shadow 380ms ease, transform 380ms ease;
}

#outcomes .outcomes-step + .outcomes-step {
  border-left: 1px solid var(--line);
}

#outcomes .outcomes-step::before {
  content: none;
}

#outcomes .outcomes-step__icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mint-400) 12%, var(--surface));
  color: var(--teal-600);
  transition: background 380ms ease, color 380ms ease, transform 380ms ease;
}

#outcomes .outcomes-step__icon svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#outcomes .outcomes-step.is-active {
  border-color: color-mix(in srgb, var(--mint-400) 70%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint-400) 20%, transparent),
    0 0.75rem 1.8rem rgba(0, 37, 75, 0.08);
  transform: translateY(-0.2rem);
}

#outcomes .outcomes-step.is-active .outcomes-step__icon {
  background: var(--navy-900);
  color: var(--white);
  transform: scale(1.05);
}

#outcomes .outcomes-step strong {
  max-width: 9rem;
  color: var(--navy-900);
  font-size: clamp(0.9rem, 0.82rem + 0.25vw, 1.1rem);
  font-weight: 700;
  line-height: 1.2;
  transition: color 380ms ease;
}

#outcomes .outcomes-step.is-active strong {
  color: var(--ink);
}

.js-reveal-ready #outcomes [data-outcome-reveal] {
  transition-duration: 560ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Executive ownership comparison: the existing accessible tab controller is
   retained while the visual hierarchy becomes a clearer decision matrix. */
.ownership-compare {
  position: relative;
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid rgba(0, 37, 75, 0.12);
  border-radius: 0.5rem;
  background: var(--white);
}

.ownership-compare__heading {
  display: block;
  max-width: 68rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.ownership-compare__heading .eyebrow {
  justify-content: center;
  margin: 0 0 0.7rem;
}

.ownership-compare__heading h3 {
  max-width: none;
  margin: 0 auto 0.45rem;
  color: var(--ink);
  font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.16;
}

.ownership-compare__heading > p:last-child {
  max-width: 52rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.92rem;
}

.ownership-compare .om-compare__tabs {
  position: relative;
  z-index: 3;
  display: grid;
  width: calc(100% - clamp(1rem, 8vw, 6rem));
  margin: 0 auto 0.75rem;
  padding: 0;
  gap: 0.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ownership-compare .om-compare__tab,
.ownership-compare .om-compare__tab:first-child,
.ownership-compare .om-compare__tab:last-child {
  display: grid;
  position: relative;
  min-height: 6.25rem;
  align-items: center;
  padding: 0.8rem 1.35rem;
  gap: 1rem;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  border: 1px solid rgba(0, 37, 75, 0.13);
  border-radius: 0.5rem;
  color: #405063;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.ownership-compare .om-compare__tab:hover {
  background: #f5f7fa;
  color: var(--navy-900);
}

.ownership-compare [data-compare-tab="conflicting"] {
  background: #fff4f2;
  color: #8d241d;
}

.ownership-compare [data-compare-tab="conflicting"]:hover {
  background: #fde8e5;
  color: #761c16;
}

.ownership-compare [data-compare-tab="ordered"] {
  background: rgba(22, 160, 133, 0.08);
  color: #0c6f5c;
}

.ownership-compare [data-compare-tab="ordered"]:hover {
  background: rgba(22, 160, 133, 0.14);
  color: #075e4e;
}

.ownership-compare .om-compare__tab + .om-compare__tab {
  border-left: 1px solid rgba(0, 37, 75, 0.13);
}

.ownership-compare .om-compare__tab[aria-selected="true"] {
  z-index: 2;
  background: var(--navy-900);
  color: var(--white);
  box-shadow: 0 0.65rem 1.2rem rgba(0, 37, 75, 0.14), inset 0 -3px 0 var(--mint-400);
  transform: translateY(-0.15rem);
}

.ownership-compare [data-compare-tab="conflicting"][aria-selected="true"] {
  background: #b4231f;
  color: var(--white);
  box-shadow: 0 0.65rem 1.2rem rgba(180, 35, 31, 0.15), inset 0 -3px 0 #7f1d1a;
}

.ownership-compare [data-compare-tab="ordered"][aria-selected="true"] {
  background: var(--teal-600);
  color: var(--white);
  box-shadow: 0 0.65rem 1.2rem rgba(22, 160, 133, 0.18), inset 0 -3px 0 var(--mint-400);
}

.ownership-compare .om-compare__tab:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--mint-400);
  outline-offset: 2px;
}

.om-compare__tab-icon {
  display: grid;
  width: 3.75rem;
  height: 3.75rem;
  place-items: center;
  border: 1px solid rgba(0, 37, 75, 0.12);
  border-radius: 0.25rem;
  background: #f5f7fa;
  color: var(--navy-900);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.om-compare__tab-icon svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ownership-compare .om-compare__tab[aria-selected="true"] .om-compare__tab-icon {
  border-color: rgba(0, 203, 153, 0.4);
  background: rgba(0, 203, 153, 0.16);
  color: var(--mint-400);
}

.ownership-compare [data-compare-tab="conflicting"] .om-compare__tab-icon {
  border-color: rgba(180, 35, 31, 0.22);
  background: rgba(180, 35, 31, 0.06);
  color: #b4231f;
}

.ownership-compare [data-compare-tab="ordered"] .om-compare__tab-icon {
  border-color: rgba(22, 160, 133, 0.25);
  background: rgba(22, 160, 133, 0.08);
  color: var(--teal-600);
}

.ownership-compare [data-compare-tab][aria-selected="true"] .om-compare__tab-icon {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.om-compare__tab-copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.om-compare__tab-copy strong {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.25;
}

.om-compare__tab-copy small {
  color: currentColor;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.78;
}

.ownership-compare .om-compare__panel {
  position: relative;
  z-index: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(22, 160, 133, 0.2);
  border-radius: 0.5rem;
  background: var(--white);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 37, 75, 0.08);
}

.ownership-compare .om-compare__panel.is-revealing .ownership-state,
.ownership-compare .om-compare__panel.is-revealing .om-owners__row,
.ownership-compare .om-compare__panel.is-revealing > .om-diagram__caption {
  animation: ownership-panel-reveal 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--ownership-reveal-index) * 80ms);
}

@keyframes ownership-panel-reveal {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ownership-state {
  position: relative;
  display: flex;
  min-height: 6.7rem;
  align-items: center;
  margin: 0;
  padding: 1rem 1.5rem;
  gap: 1rem;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}

.ownership-state--gap {
  border-bottom-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.07);
  color: #70400a;
}

.ownership-state__icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  place-items: center;
  border-radius: 0.25rem;
  background: var(--white);
}

.ownership-state__icon svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ownership-state > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.08rem;
}

.ownership-state strong {
  color: inherit;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
}

.ownership-state div span {
  color: inherit;
  font-size: 0.9rem;
  opacity: 0.82;
}

.ownership-compare .om-owners {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ownership-compare .om-owners__row {
  min-height: 4.35rem;
  padding: 0.75rem 1.5rem;
  grid-template-columns: minmax(10rem, 1.05fr) minmax(15rem, 1.6fr) minmax(10rem, 1fr);
}

.ownership-compare .om-owners__row--head {
  min-height: 3.25rem;
  background: rgba(22, 160, 133, 0.07);
  color: var(--navy-900);
}

.ownership-compare .om-owners__row:not(.om-owners__row--head):nth-child(odd) {
  background: var(--white);
}

.ownership-compare .om-owners__answer {
  padding: 0;
  background: transparent;
}

.ownership-compare .om-owners--named .om-owners__answer {
  background: transparent;
  color: inherit;
}

.ownership-compare .om-owners--gap .om-owners__answer {
  background: transparent;
  color: inherit;
}

.ownership-service__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border-radius: 0.25rem;
  background: rgba(22, 160, 133, 0.1);
  color: var(--teal-600);
}

.om-owners--gap .ownership-service__icon {
  background: rgba(245, 158, 11, 0.12);
  color: #9a5600;
}

.ownership-service__icon svg,
.ownership-role__icon svg,
.ownership-caption__icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ownership-service__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.ownership-role {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  gap: 0.45rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.ownership-compare .om-owners--gap .ownership-role {
  background: var(--amber-500);
  color: var(--navy-950);
}

.ownership-compare .om-owners--named .ownership-role {
  background: rgba(22, 160, 133, 0.12);
  color: #075e4e;
}

.ownership-role__icon {
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  place-items: center;
}

.ownership-role__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.ownership-compare .om-diagram__caption {
  display: flex;
  max-width: none;
  margin: 0;
  min-height: 4.25rem;
  align-items: center;
  padding: 0.8rem 1.5rem;
  gap: 0.85rem;
  border-top: 1px solid rgba(0, 37, 75, 0.1);
  border-left: 0;
  background: var(--cool-surface, #f8f9ff);
  text-align: left;
}

.ownership-caption__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-600);
  color: var(--white);
}

[data-panel="scattered"] .ownership-caption__icon {
  background: var(--amber-500);
  color: var(--navy-950);
}

.ownership-caption__icon svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.2;
}

.capability-grid {
  position: relative;
  display: grid;
  align-items: stretch;
  gap: clamp(0.65rem, 1.2vw, 1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capability-grid::before {
  content: none;
}

.capability-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: clamp(17rem, 23vw, 23rem);
  align-items: center;
  flex-direction: column;
  padding: clamp(0.75rem, 2vw, 1.75rem);
  overflow: hidden;
  border: 1px solid rgba(0, 37, 75, 0.06);
  border-radius: 1rem;
  background: var(--white);
  color: var(--body);
  box-shadow: 0 0.8rem 2rem rgba(0, 37, 75, 0.08);
  text-align: center;
}

.capability-card:first-of-type {
  margin-inline-start: 0;
}

.capability-card::before {
  content: none;
}

.capability-card:first-of-type::before {
  content: none;
}

.capability-card > * {
  position: relative;
  z-index: 1;
}

.capability-connector {
  display: none;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.capability-connector::before {
  position: absolute;
  inset: 0;
  background: var(--mint-400);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
}

.capability-card__header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(1rem, 2vw, 1.65rem);
}

.capability-card__icon {
  position: relative;
  z-index: 3;
  display: grid;
  width: clamp(3.25rem, 6vw, 6rem);
  height: clamp(3.25rem, 6vw, 6rem);
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  box-shadow: 0 0 0 0.5rem var(--white), 0 0.65rem 1.35rem rgba(0, 37, 75, 0.18);
}

.capability-card:last-of-type {
  border-color: rgba(0, 37, 75, 0.06);
}

.capability-card:last-of-type .capability-card__icon {
  background: var(--amber-500);
  color: var(--navy-950);
}

.capability-card__icon svg {
  width: 48%;
  height: 48%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.capability-card__index {
  display: none;
}

.capability-card .fluent-badge {
  margin-bottom: clamp(0.8rem, 1.5vw, 1.25rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy-900);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.64rem, 0.52rem + 0.22vw, 0.82rem);
  letter-spacing: 0.11em;
}

.capability-card h3 {
  margin-top: 0;
  margin-bottom: 0.65rem;
  color: var(--ink);
  font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.35rem);
  line-height: 1.3;
}

.capability-card > p {
  margin-bottom: 1.25rem;
  line-height: 1.58;
}

.capability-card__topics {
  display: flex;
  margin: auto 0 0;
  padding: 0.85rem 0 0;
  flex-wrap: wrap;
  gap: 0.45rem;
  border-top: 1px solid rgba(0, 37, 75, 0.11);
  justify-content: center;
  list-style: none;
}

.capability-card__topic {
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(0, 37, 75, 0.14);
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--navy-800) 7%, var(--white));
  color: var(--navy-800);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.capability-pathway.is-running .capability-card:not(.is-active) {
  opacity: 0.58;
  transform: translateY(0.5rem);
}

.capability-card.is-active {
  opacity: 1;
  transform: translateY(0);
  animation: capability-stage-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.capability-card.is-active .capability-card__icon {
  animation: capability-icon-settle 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.capability-card.is-active .capability-card__index {
  color: rgba(0, 37, 75, 0.18);
}

.capability-connector.is-active::before {
  animation: capability-connector-fill 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes capability-stage-in {
  from { opacity: 0.58; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes capability-icon-settle {
  0% { box-shadow: 0 0 0 0.5rem var(--white), 0 0.65rem 1.35rem rgba(0, 37, 75, 0.18); transform: scale(0.92); }
  55% { box-shadow: 0 0 0 0.5rem var(--white), 0 0 0 0.9rem rgba(0, 37, 75, 0.1), 0 0.65rem 1.35rem rgba(0, 37, 75, 0.18); }
  100% { box-shadow: 0 0 0 0.5rem var(--white), 0 0.65rem 1.35rem rgba(0, 37, 75, 0.18); transform: scale(1); }
}

@keyframes capability-connector-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.course-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(0, 37, 75, 0.09);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1rem 2.5rem rgba(0, 37, 75, 0.09);
}

.course-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--mint-400), var(--teal-600));
  content: "";
}

.course-card--featured {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, var(--navy-900), var(--navy-800));
  color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1.4rem 3rem rgba(0, 37, 75, 0.22);
}

.course-card--featured::before {
  background: linear-gradient(90deg, var(--mint-400), var(--amber-500));
}

.course-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.course-card__level,
.course-card__duration {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.course-card__level {
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 203, 153, 0.1);
  color: var(--navy-800);
}

.course-card__duration {
  color: var(--teal-600);
}

.course-card--featured .course-card__level {
  background: rgba(0, 203, 153, 0.15);
  color: var(--mint-400);
}

.course-card--featured .course-card__duration {
  color: var(--amber-500);
}

.course-card h3 {
  min-height: 3.2rem;
  margin-bottom: 0.8rem;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.05rem + 0.45vw, 1.6rem);
}

.course-card--featured h3 {
  color: var(--white);
}

.course-card__price {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
}

.course-card__price > span {
  color: var(--navy-900);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.course-card__price small {
  max-width: 9rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.course-card__saving {
  display: inline-flex;
  min-height: 1.85rem;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255, 184, 0, 0.38);
  border-radius: 999px;
  background: rgba(255, 184, 0, 0.13);
  color: var(--amber-500);
  font-size: 0.72rem;
  font-weight: 800;
}

.course-card--featured .course-card__price > span {
  color: var(--white);
}

.course-card--featured .course-card__price small {
  color: rgba(255, 255, 255, 0.68);
}

.course-card > p:not(.course-card__price):not(.course-card__promise) {
  margin-bottom: 1.25rem;
  line-height: 1.58;
}

.course-card__promise {
  margin: -0.35rem 0 1rem;
  color: var(--teal-600);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
}

.course-card--featured .course-card__promise {
  color: var(--mint-400);
}

.course-card__topics {
  display: grid;
  margin: 0;
  padding: 1rem 0 0;
  gap: 0.55rem;
  border-top: 1px solid rgba(0, 37, 75, 0.12);
  list-style: none;
}

.course-card--featured .course-card__topics {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.course-card__topics li {
  position: relative;
  padding-inline-start: 1.25rem;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.45;
}

.course-card__topics li::before {
  position: absolute;
  top: 0.48em;
  left: 0.1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--mint-400);
  content: "";
}

.course-card__select {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 0.75rem 0.9rem;
  gap: 0.8rem;
  border: 1px solid rgba(0, 37, 75, 0.22);
  border-radius: 0.7rem;
  background: rgba(0, 203, 153, 0.07);
  color: var(--navy-900);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.course-card__topics + .course-card__select {
  margin-top: 1.25rem;
}

.course-card__select:hover {
  border-color: var(--teal-600);
  background: rgba(0, 203, 153, 0.13);
  transform: translateY(-0.1rem);
}

.course-card--featured .course-card__select {
  border-color: var(--amber-500);
  background: var(--amber-500);
  color: var(--navy-950);
}

.course-card--featured .course-card__select:hover {
  background: #ffc533;
}

.approach-panel {
  display: grid;
  margin-top: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  border-radius: 1rem;
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-panel);
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
}

.approach-panel__heading .eyebrow {
  justify-content: flex-start;
  color: var(--mint-400);
}

.approach-panel__heading h3 {
  color: var(--white);
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.25rem);
}

.approach-grid {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.8rem;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.approach-grid li {
  display: grid;
  min-width: 0;
  align-content: start;
  padding: 1rem;
  gap: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
}

.approach-grid strong {
  color: var(--white);
  font-size: 0.9rem;
}

.approach-grid span {
  font-size: 0.82rem;
  line-height: 1.5;
}

.fluent-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(81, 242, 190, 0.42);
  border-radius: var(--radius-sm);
  background: rgba(0, 203, 153, 0.1);
  color: var(--mint-400);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.text-list {
  border-top: 1px solid rgba(0, 37, 75, 0.18);
}

.audience-list {
  max-width: 69rem;
}

.text-list-item {
  display: grid;
  grid-template-columns: minmax(9rem, 0.45fr) minmax(0, 1.55fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid rgba(0, 37, 75, 0.18);
}

.text-list-item__label {
  color: var(--teal-600);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.text-list-item p {
  max-width: 47rem;
  margin-bottom: 0;
}

.text-list-item--muted {
  color: #65717c;
}

.practical-list {
  display: grid;
  margin-top: clamp(3rem, 7vw, 5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(0, 37, 75, 0.18);
}

.practical-list .text-list-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem;
  border: 0;
}

.practical-list .text-list-item + .text-list-item {
  border-left: 1px solid rgba(0, 37, 75, 0.18);
}

.practical-list strong {
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.35;
}

.practical-list span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Reference-led audience composition: one centred system with shared edges. */
#fit .fit-heading {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

#fit .fit-heading h2 {
  max-width: 22ch;
  margin-inline: auto;
}

#fit .audience-matrix,
#fit .practical-list {
  width: min(100%, 75rem);
  max-width: 75rem;
  margin-inline: auto;
}

#fit .audience-matrix__card {
  min-height: 19rem;
  grid-template-columns: 3.75rem minmax(0, 1fr);
}

#fit .audience-matrix__card > :not(.audience-matrix__icon) {
  grid-column: 2;
}

#fit .audience-matrix__icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  grid-row: 1 / span 4;
  place-items: center;
  border: 1px solid var(--mint-400);
  border-radius: 50%;
  color: var(--mint-400);
}

#fit .audience-matrix__icon svg,
#fit .fit-practical-card__icon svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

#fit .audience-matrix__boundary {
  grid-template-columns: 3.25rem 9.5rem minmax(0, 1fr);
}

#fit .audience-matrix__boundary .audience-matrix__icon {
  width: 2.75rem;
  height: 2.75rem;
  grid-row: 1 / span 2;
  color: var(--amber-500);
  border-color: var(--amber-500);
}

#fit .audience-matrix__boundary .audience-matrix__role {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding-top: 0;
}

#fit .audience-matrix__boundary h3,
#fit .audience-matrix__boundary p {
  grid-column: 3;
}

#fit .practical-list {
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(0, 37, 75, 0.14);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 0.65rem 1.8rem rgba(0, 37, 75, 0.06);
}

#fit .fit-practical-card {
  display: grid;
  min-height: 100%;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  gap: 1rem;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
}

#fit .fit-practical-card__icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: var(--radius-lg);
  background: rgba(0, 203, 153, 0.08);
  color: var(--teal-600);
}

#fit .fit-practical-card__body {
  display: grid;
  gap: 0.35rem;
}

#fit .fit-practical-card__body > span {
  line-height: 1.55;
}

.training-details__heading {
  max-width: 70rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.training-details__heading h2 {
  max-width: none;
  margin-inline: auto;
}

.training-details-layout {
  display: grid;
  gap: 1rem;
}

.training-facts {
  position: relative;
  isolation: isolate;
  display: grid;
  margin: 0;
  gap: clamp(0.65rem, 1.2vw, 1rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.training-facts::before {
  content: none;
}

.training-fact {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: clamp(17rem, 23vw, 23rem);
  align-items: center;
  padding: clamp(0.75rem, 2vw, 1.75rem);
  flex-direction: column;
  border: 1px solid rgba(0, 37, 75, 0.06);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 0.8rem 2rem rgba(0, 37, 75, 0.08);
  text-align: center;
}

.training-fact__icon {
  position: relative;
  z-index: 3;
  display: grid;
  width: clamp(3.25rem, 6vw, 6rem);
  height: clamp(3.25rem, 6vw, 6rem);
  flex: 0 0 auto;
  place-items: center;
  margin-bottom: clamp(1rem, 2vw, 1.65rem);
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  box-shadow: 0 0 0 0.5rem var(--white), 0 0.65rem 1.35rem rgba(0, 37, 75, 0.18);
}

.training-fact:last-child .training-fact__icon {
  background: var(--amber-500);
  color: var(--navy-950);
}

.training-fact__icon svg {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.training-fact dt {
  margin-bottom: clamp(0.8rem, 1.5vw, 1.25rem);
  color: var(--navy-900);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.64rem, 0.52rem + 0.22vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.training-fact dd {
  margin: 0;
  color: var(--body);
  font-size: clamp(0.76rem, 0.63rem + 0.25vw, 1rem);
  line-height: 1.55;
}

.training-fact dd strong {
  color: var(--ink);
  font-weight: 700;
}

.training-included {
  display: grid;
  min-width: 0;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 2rem);
  gap: 0.65rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--navy-950), var(--navy-900));
  color: var(--white);
  box-shadow: 0 1rem 2.5rem rgba(0, 37, 75, 0.18);
}

.training-included__label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  color: var(--mint-400);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.training-included__label span {
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border-radius: 50%;
  background: var(--mint-400);
  color: var(--white);
  box-shadow: 0 0 1.2rem rgba(0, 203, 153, 0.35);
  font-size: 0.9rem;
  letter-spacing: 0;
}

.training-included__list {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.training-included__list-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 4rem;
  align-items: center;
  padding: 0.15rem clamp(0.75rem, 1.6vw, 1.5rem);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.75rem, 0.65rem + 0.2vw, 0.94rem);
  line-height: 1.5;
  text-align: center;
}

.training-included__list-item:not(:nth-child(4n + 1))::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: rgba(0, 203, 153, 0.65);
  content: "";
}

.training-included__list-item:nth-child(n + 5)::after {
  position: absolute;
  inset: 0.05rem 0.75rem auto;
  height: 1px;
  background: rgba(0, 203, 153, 0.28);
  content: "";
}

.next-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 20%, rgba(0, 37, 75, 0.82), transparent 31rem),
    radial-gradient(circle at 88% 78%, rgba(245, 158, 11, 0.1), transparent 23rem),
    linear-gradient(145deg, var(--navy-950), var(--navy-900));
}

.next-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  content: "";
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 82%, transparent);
}

.next-shell {
  position: relative;
  z-index: 1;
}

.next-heading {
  max-width: 58rem;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.next-heading h2 {
  max-width: 19ch;
  margin-inline: auto;
}

.next-journey {
  position: relative;
  display: grid;
  margin: 0;
  overflow: hidden;
  padding: 0;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
  list-style: none;
  backdrop-filter: blur(12px);
}

.next-journey::before {
  position: absolute;
  top: 8rem;
  right: 16.66%;
  left: 16.66%;
  z-index: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  content: "";
}

.next-journey::after {
  position: absolute;
  top: 8rem;
  right: 16.66%;
  left: 16.66%;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, #4a8fc4, var(--navy-800) 52%, var(--amber-500));
  content: "";
  transform-origin: left;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal-ready .next-journey[data-reveal] {
  opacity: 1;
  transform: none;
}

.js-reveal-ready .next-journey[data-reveal]::after {
  transform: scaleX(0);
}

.js-reveal-ready .next-journey.is-visible::after {
  transform: scaleX(1);
}

.next-step {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 23rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  gap: 1.15rem;
  grid-template-rows: auto auto 1fr;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.next-step:first-child {
  border-inline-start: 0;
}

.next-step--destination {
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.12), transparent 64%),
    rgba(255, 255, 255, 0.025);
}

.js-reveal-ready .next-journey[data-reveal] .next-step {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal-ready .next-journey.is-visible .next-step {
  opacity: 1;
  transform: none;
}

.js-reveal-ready .next-journey.is-visible .next-step:nth-child(2) { transition-delay: 140ms; }
.js-reveal-ready .next-journey.is-visible .next-step:nth-child(3) { transition-delay: 280ms; }

.next-step__index {
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-end: 1.25rem;
  color: rgba(255, 255, 255, 0.075);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(3.5rem, 5vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 1;
}

.next-step__icon {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  margin-block-start: 3.25rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  box-shadow: 0 0 0 0.55rem var(--navy-950), 0 0.8rem 2rem rgba(0, 0, 0, 0.25);
}

.next-step:nth-child(3) .next-step__icon {
  border-color: var(--amber-500);
  background: var(--amber-500);
  color: var(--navy-950);
}

.next-step__icon svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.next-step__body {
  align-self: end;
}

.next-step__label {
  color: #8dbfe5;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.next-step--destination .next-step__label {
  color: var(--amber-500);
}

.next-step h3 {
  margin: 0.45rem 0 0.65rem;
  color: var(--white);
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem);
}

.next-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.next-runway__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(0rem, 2vw, 1rem) 0;
  color: var(--white);
  text-align: center;
}

.next-runway__footer .button {
  margin-inline: auto;
}

.next-runway__footer p {
  display: grid;
  margin: 0;
  gap: 0.15rem;
}

.next-runway__footer strong {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.05rem;
}

.next-runway__footer span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.faq-shell {
  display: grid;
  grid-template-columns: minmax(18rem, 0.68fr) minmax(0, 1.32fr);
  align-items: stretch;
  gap: clamp(3rem, 7vw, 7rem);
}

.faq-intro {
  position: sticky;
  top: 6.75rem;
  display: flex;
  height: 100%;
  flex-direction: column;
}

.faq-shell .section-heading {
  margin-bottom: 2rem;
}

.faq-persona {
  margin-top: 0;
  padding: 1.1rem;
  border: 1px solid rgba(0, 37, 75, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
}

.faq-persona__label {
  margin-bottom: 0.75rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.faq-persona__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.faq-persona__options button {
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(0, 37, 75, 0.18);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-900);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.faq-persona__options button:hover {
  border-color: var(--teal-600);
  transform: translateY(-1px);
}

.faq-persona__options button[aria-pressed="true"] {
  border-color: var(--navy-900);
  background: var(--navy-900);
  color: var(--white);
}

.faq-persona__options button:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: 0.2rem;
  box-shadow: 0 0 0 0.28rem rgba(0, 203, 153, 0.3);
}

.faq-persona__note {
  margin: 0.85rem 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--mint-400);
  color: var(--body);
  font-size: 0.84rem;
  line-height: 1.55;
}

.sds-accordion {
  overflow: hidden;
  border: 1px solid rgba(0, 37, 75, 0.12);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 1rem 3rem rgba(0, 37, 75, 0.07);
}

.faq-group {
  display: block;
}

.faq-group[hidden] {
  display: none;
}

.faq-group + .faq-group {
  border-top: 1px solid rgba(0, 37, 75, 0.12);
}

.faq-group.is-active {
  animation: faq-group-in 180ms ease both;
}

.faq-group__heading {
  margin: 0;
  padding: 1.15rem 1.25rem 0.35rem;
  color: var(--teal-600);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-group__heading:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: -0.2rem;
  box-shadow: inset 0 0 0 0.25rem rgba(0, 203, 153, 0.24);
}

.faq-pagination {
  display: grid;
  grid-column: 2;
  grid-template-columns: minmax(7rem, auto) 1fr minmax(7rem, auto);
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.faq-pagination[hidden] {
  display: none;
}

.faq-pagination button {
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(0, 37, 75, 0.18);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-900);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.faq-pagination button:last-child {
  justify-self: end;
}

.faq-pagination button:hover:not(:disabled) {
  border-color: var(--teal-600);
  transform: translateY(-1px);
}

.faq-pagination button:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: 0.2rem;
  box-shadow: 0 0 0 0.28rem rgba(0, 203, 153, 0.3);
}

.faq-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.faq-pagination__status {
  justify-self: center;
  color: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
}

@keyframes faq-group-in {
  from { opacity: 0; transform: translateY(0.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

.faq-item + .faq-item {
  border-top: 1px solid rgba(0, 37, 75, 0.12);
}

.faq-item {
  transition: background 220ms ease;
}

.faq-item:has(button[aria-expanded="true"]) {
  background: rgba(0, 203, 153, 0.045);
}

.faq-item button {
  display: grid;
  width: 100%;
  min-height: 4.8rem;
  padding: 1.1rem 1.25rem;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.faq-question {
  display: grid;
  min-width: 0;
  gap: 0.85rem;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
}

.faq-question__number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 203, 153, 0.09);
  color: var(--teal-600);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.faq-action {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.faq-item button [data-disclosure-action] {
  color: var(--teal-600);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.faq-action__icon {
  position: relative;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(0, 37, 75, 0.18);
  border-radius: 50%;
  background: var(--white);
}

.faq-action__icon::before,
.faq-action__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 1px;
  background: var(--navy-900);
  content: "";
  transform: translate(-50%, -50%);
  transition: transform 220ms ease;
}

.faq-action__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item button[aria-expanded="true"] .faq-action__icon {
  border-color: var(--teal-600);
  background: rgba(0, 203, 153, 0.08);
}

.faq-item button[aria-expanded="true"] .faq-action__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item > div {
  padding: 0 5.75rem 1.35rem 4.1rem;
}

.faq-item > div:not([hidden]) {
  animation: faq-answer-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.faq-item > div p {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--mint-400);
  color: var(--body);
}

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-0.45rem); }
  to { opacity: 1; transform: translateY(0); }
}

.faq-item button:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: -0.2rem;
  box-shadow: inset 0 0 0 0.25rem rgba(0, 203, 153, 0.24);
}

.section--booking::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 203, 153, 0.12), transparent 23rem),
    radial-gradient(circle at 83% 76%, rgba(245, 158, 11, 0.08), transparent 22rem);
  content: "";
  pointer-events: none;
}

.booking-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(28rem, 1.18fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 6.5rem);
}

.booking-intro {
  position: sticky;
  top: 7.5rem;
}

.booking-shell .section-heading {
  margin: 0;
  text-align: left;
}

.booking-shell .section-heading > p:last-child {
  margin-inline: 0;
}

.booking-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.booking-assurance li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(81, 242, 190, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 700;
}

.booking-assurance li span {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(81, 242, 190, 0.16);
  color: var(--mint-400);
  font-size: 0.68rem;
}

.contact-form {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #ffffff 0%, #f5f9fb 100%);
  box-shadow: 0 1.8rem 4.5rem rgba(0, 17, 38, 0.34);
  animation: booking-form-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.contact-form::before {
  position: absolute;
  inset: 0 0 auto;
  height: 0.28rem;
  background: linear-gradient(90deg, var(--teal-600), var(--mint-400), var(--amber-500));
  content: "";
}

@keyframes booking-form-in {
  from { opacity: 0; transform: translateY(1.2rem); }
  to { opacity: 1; transform: translateY(0); }
}

.booking-form__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.45rem;
  color: var(--navy-900);
  font-size: 1rem;
  font-weight: 800;
}

.booking-form__header-icon {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.7rem;
  background: rgba(0, 203, 153, 0.1);
  color: var(--teal-600);
}

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

.form-grid label {
  display: grid;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.form-wide {
  grid-column: 1 / -1;
}

.select-field {
  align-content: start;
}

.select-field__label {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.select-control {
  position: relative;
  display: block;
}

.select-control select {
  min-height: 3.25rem;
  padding-inline: 0.95rem 3rem;
  appearance: none;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  cursor: pointer;
  font-weight: 650;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.select-control select:hover {
  border-color: #7f9dac;
  background: var(--white);
}

.select-control select:focus-visible {
  border-color: var(--teal-600);
  outline: 3px solid rgba(0, 203, 153, 0.22);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 203, 153, 0.14);
}

.select-control__chevron {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--teal-600);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transform: translateY(-50%);
  pointer-events: none;
}

.select-control[data-enhanced-ready="true"] > select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.select-control[data-enhanced-ready="true"] > .select-control__chevron {
  display: none;
}

.custom-select__trigger {
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid #aec2ce;
  border-radius: 0.42rem;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.custom-select__trigger:hover {
  border-color: #7f9dac;
  background: var(--white);
}

.custom-select__trigger:focus-visible,
.select-control[data-open="true"] .custom-select__trigger {
  border-color: var(--teal-600);
  outline: 3px solid rgba(0, 203, 153, 0.2);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 203, 153, 0.12);
}

.custom-select__trigger[data-invalid="true"] {
  border-color: #b42318;
  outline-color: rgba(180, 35, 24, 0.18);
}

.custom-select__trigger[data-placeholder="true"] {
  color: #334f61;
  font-weight: 600;
}

.custom-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select__chevron {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--teal-600);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 180ms ease;
}

.select-control[data-open="true"] .custom-select__chevron {
  transform: rotate(180deg);
}

.custom-select__panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  left: 0;
  z-index: 40;
  max-height: min(20rem, 48dvh);
  padding: 0.42rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(0, 37, 75, 0.14);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 1.4rem 3.5rem rgba(0, 37, 75, 0.22), 0 0.3rem 0.9rem rgba(0, 37, 75, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.45rem) scale(0.985);
  transform-origin: top center;
  pointer-events: none;
  scrollbar-color: #a8bcc7 transparent;
  scrollbar-width: thin;
  transition: opacity 170ms ease, transform 170ms ease, visibility 170ms ease;
}

.select-control[data-open="true"] .custom-select__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.custom-select__group + .custom-select__group {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(0, 37, 75, 0.1);
}

.custom-select__group-label {
  display: block;
  padding: 0.62rem 0.72rem 0.32rem;
  color: #537082;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.custom-select__option {
  position: relative;
  display: flex;
  min-height: 2.9rem;
  align-items: center;
  padding: 0.68rem 2.6rem 0.68rem 0.8rem;
  border-radius: 0.5rem;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.custom-select__option[data-active="true"] {
  background: #edf8f5;
  color: var(--navy-900);
  transform: translateX(0.1rem);
}

.custom-select__option[aria-selected="true"] {
  background: var(--navy-900);
  color: var(--white);
}

.custom-select__option[aria-selected="true"]::after {
  position: absolute;
  right: 0.85rem;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--mint-400);
  color: var(--navy-950);
  content: "✓";
  font-size: 0.72rem;
  font-weight: 900;
}

.custom-select__option[aria-selected="true"][data-active="true"] {
  background: #00254b;
}

.select-field__hint {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
}

.booking-goal {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.booking-goal legend {
  margin-bottom: 0.55rem;
  padding: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.booking-goal__shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.booking-goal__shortcut {
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #b9cbd4;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy-900);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.booking-goal__shortcut:hover {
  border-color: var(--teal-600);
  transform: translateY(-0.1rem);
}

.booking-goal__shortcut[aria-pressed="true"] {
  border-color: var(--teal-600);
  background: var(--navy-900);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(81, 242, 190, 0.28);
}

.booking-goal__shortcut:focus-visible {
  outline: 3px solid rgba(0, 203, 153, 0.3);
  outline-offset: 2px;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid #b7c5ce;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}

.form-grid input,
.form-grid select {
  min-height: 3.1rem;
  padding: 0.7rem 0.85rem;
}

.form-grid textarea {
  min-height: 6.7rem;
  padding: 0.8rem 0.85rem;
  resize: vertical;
}

.form-grid input:focus-visible,
.form-grid select:focus-visible,
.form-grid textarea:focus-visible {
  border-color: var(--teal-600);
  outline: 3px solid rgba(0, 203, 153, 0.22);
  outline-offset: 2px;
}

.booking-form__notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 203, 153, 0.08);
  color: #285064;
  font-size: 0.76rem;
  font-weight: 650;
}

.booking-form__notice span {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(0, 130, 104, 0.35);
  border-radius: 50%;
  color: #006b58;
  font-size: 0.7rem;
  font-weight: 900;
}

.booking-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.booking-form__submit svg {
  transition: transform 180ms ease;
}

.booking-form__submit:hover svg {
  transform: translateX(0.2rem);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form-note,
.form-status {
  font-size: 0.78rem;
  text-align: center;
}

.form-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
}

.form-note a {
  color: var(--navy-900);
  font-weight: 800;
}

.form-status {
  min-height: 1.3rem;
  margin: 0.45rem 0 0;
  color: var(--teal-600);
  font-weight: 700;
}

.form-status[data-state="pending"] {
  color: var(--muted);
}

.form-status[data-state="success"] {
  color: var(--teal-600);
}

.form-status[data-state="fallback"] {
  color: var(--navy-900);
}

.form-status[data-state="error"] {
  color: #b4231f;
}

.booking-form button[type="submit"][disabled] {
  cursor: progress;
  opacity: 0.7;
  transform: none;
}

.site-footer {
  padding-block: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.62);
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  font-size: 0.78rem;
}

.footer-inner img {
  width: 9rem;
}

.footer-inner p {
  margin: 0;
}

.footer-inner p:last-child {
  text-align: right;
}

.footer-inner a {
  color: var(--white);
  font-weight: 700;
}

.button:focus-visible,
.nav-link:focus-visible,
.brand-link:focus-visible,
.text-link:focus-visible,
.footer-inner a:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 0.25rem;
}

.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  /* Same 0.55s expo-out curve as the section and content reveals, so every entrance settles alike. */
  transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1), transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.responsive-scroll-region {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  scrollbar-color: #94a3b8 transparent;
  scrollbar-width: thin;
}

.responsive-scroll-region:focus-visible {
  outline: 3px solid var(--mint-400);
  outline-offset: 0.25rem;
}

.capability-scroll {
  overflow: visible;
}

@media (max-width: 78rem) {
  #proof .section-shell {
    width: min(70rem, calc(100% - 3rem));
    margin-inline: auto;
  }

  .proof-segment {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }

  .proof-segment__icon {
    width: 4.25rem;
    height: 4.25rem;
  }

  .proof-segment__icon svg {
    width: 2.35rem;
    height: 2.35rem;
  }
}

@media (max-width: 70rem) {
  .training-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 64rem) {
  .hero {
    min-height: auto;
    padding-top: 8.5rem;
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    gap: 3rem;
  }

  #outcomes .outcomes-layout {
    width: min(64rem, calc(100% - 3rem));
  }

  #outcomes .outcome-card {
    grid-template-columns: 3.6rem 3.6rem minmax(0, 1fr) 2.5rem;
  }

  #outcomes .outcomes-card-column {
    --outcome-card-height: 6.5rem;
  }

  #outcomes .outcome-card__index {
    min-height: 4rem;
    font-size: 1.65rem;
  }

  #outcomes .outcome-card__icon {
    width: 3.6rem;
    height: 3.6rem;
  }

  .capability-card {
    min-height: 0;
  }
}

@media (min-width: 48.01rem) and (max-width: 78rem) {
  .header-inner {
    width: min(var(--page-max), calc(100% - 2rem));
    gap: 0.75rem;
  }

  .nav-links {
    gap: clamp(0.45rem, 1.2vw, 1rem);
  }

  .nav-link {
    font-size: clamp(0.68rem, 1vw, 0.82rem);
  }

  .header-cta {
    padding-inline: clamp(0.7rem, 1.5vw, 1rem);
    font-size: clamp(0.68rem, 1vw, 0.78rem);
  }

  .fabric-platform,
  .capability-scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .fabric-system {
    min-width: 70rem;
  }

  .capability-grid {
    min-width: 64rem;
  }

  #outcomes .outcomes-layout {
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(13rem, 0.68fr) minmax(0, 1.32fr);
  }

  #fit .audience-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #fit .audience-matrix__boundary {
    grid-template-columns: 3.25rem 9.5rem minmax(0, 1fr);
  }

  #fit .audience-matrix__boundary .audience-matrix__role {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  #fit .audience-matrix__boundary h3,
  #fit .audience-matrix__boundary p {
    grid-column: 3;
  }
}

@media (max-width: 48rem) {
  :root {
    /* Tightened from 4.5rem: section padding was 1,074px of the mobile page.
       Keeps a clear rhythm between sections without the page reading cramped. */
    --section-space: 3.5rem;
  }

  html {
    scroll-padding-top: 4.25rem;
  }

  .nav-links {
    display: none;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .section-shell {
    width: min(var(--page-max), calc(100% - 2.5rem));
  }

  .fabric-system {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .fabric-phase:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -1.05rem;
    transform: translateX(50%) rotate(135deg);
  }

  .training-facts {
    grid-template-columns: 1fr;
  }

  .approach-panel {
    grid-template-columns: 1fr;
  }

  .approach-grid {
    grid-template-columns: 1fr;
  }

  .training-fact {
    min-height: 0;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon copy";
    align-items: center;
    column-gap: 1rem;
    text-align: left;
  }

  .training-fact__icon {
    grid-area: icon;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0;
  }

  .training-fact dt {
    grid-area: title;
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
  }

  .training-fact dd {
    grid-area: copy;
    font-size: 0.95rem;
  }

  .training-included {
    padding: 1.5rem;
    gap: 1rem;
  }

  .training-included__list {
    grid-template-columns: 1fr;
  }

  .training-included__list-item {
    padding: 0.8rem 0;
    text-align: left;
  }

  .training-included__list-item:not(:first-child)::before {
    inset: 0 0 auto;
    width: auto;
    height: 1px;
  }

  .training-included__list-item:nth-child(n + 5)::after {
    content: none;
  }

  .next-journey {
    overflow: visible;
    gap: 0.8rem;
    grid-template-columns: 1fr;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .next-journey::before {
    top: 3.5rem;
    right: auto;
    bottom: 3.5rem;
    left: 3.4rem;
    width: 2px;
    height: auto;
  }

  .next-journey::after {
    top: 3.5rem;
    right: auto;
    bottom: 3.5rem;
    left: 3.4rem;
    width: 2px;
    height: auto;
    transform-origin: top;
  }

  .js-reveal-ready .next-journey[data-reveal]::after {
    transform: scaleY(0);
  }

  .js-reveal-ready .next-journey.is-visible::after {
    transform: scaleY(1);
  }

  .next-step {
    min-height: 0;
    padding: 1.25rem;
    gap: 1rem;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    grid-template-rows: 1fr;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
  }

  .next-step__index {
    inset-block-start: 0.75rem;
    inset-inline-end: 1rem;
    color: rgba(255, 255, 255, 0.07);
    font-size: 2.75rem;
  }

  .next-step__icon {
    grid-column: 1;
    grid-row: 1;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0;
  }

  .next-step__body {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .next-runway__footer {
    align-items: stretch;
    padding-top: 1.5rem;
    flex-direction: column;
    gap: 1.1rem;
  }

  .next-runway__footer .button {
    width: 100%;
    margin-inline-start: 0;
  }

  .faq-shell {
    gap: 2.5rem;
  }

  .faq-intro {
    position: static;
    display: block;
    height: auto;
  }

  .faq-persona {
    margin-top: 0;
  }

  .faq-persona__options button {
    flex: 1 1 9rem;
  }

  #fit .audience-matrix {
    padding: 1rem;
  }

  #fit .audience-matrix__card {
    min-height: 0;
  }

  #fit .audience-matrix__boundary {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  #fit .audience-matrix__boundary .audience-matrix__icon {
    grid-row: 1 / span 2;
  }

  #fit .audience-matrix__boundary .audience-matrix__role,
  #fit .audience-matrix__boundary h3,
  #fit .audience-matrix__boundary p {
    grid-column: 2;
    grid-row: auto;
  }

  #fit .practical-list {
    grid-template-columns: 1fr;
  }

  #fit .practical-list .fit-practical-card + .fit-practical-card {
    border-top: 1px solid rgba(0, 37, 75, 0.14);
    border-left: 0;
  }

  #outcomes .outcomes-layout {
    display: block;
    width: min(var(--page-max), calc(100% - 2.5rem));
  }

  #outcomes .outcomes-layout .section-heading {
    position: static;
    margin: 0 auto 2.5rem;
  }

  #outcomes .outcomes-layout .section-heading h2 {
    max-width: 11ch;
  }

  #outcomes .outcome-card {
    padding: 0.75rem 0.6rem;
    gap: 0.7rem;
    grid-template-columns: 3.25rem 3.25rem minmax(0, 1fr) 1.5rem;
  }

  #outcomes .outcomes-card-column {
    --outcome-card-height: 10.25rem;
  }

  #outcomes .outcome-card__index {
    min-height: 3.6rem;
    font-size: 1.45rem;
  }

  #outcomes .outcome-card__icon {
    width: 3.25rem;
    height: 3.25rem;
  }

  #outcomes .outcome-card__icon svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  #outcomes .outcome-card__chevron {
    min-height: 3.5rem;
  }

  #outcomes .outcome-card.is-active {
    transform: none;
  }

  #outcomes .outcomes-path--full {
    width: 100%;
    margin: 0 auto 2.5rem;
    overflow-x: hidden;
    padding-bottom: 0;
  }

  #outcomes .outcomes-path .fluent-step-list {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0.4rem 0 0;
    gap: clamp(0.25rem, 1.5vw, 0.45rem);
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #outcomes .outcomes-step {
    min-height: 5.5rem;
    align-items: center;
    justify-items: center;
    padding: 0.55rem 0.15rem;
    gap: 0.35rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    border-radius: 1.1rem;
    text-align: center;
  }

  #outcomes .outcomes-step + .outcomes-step {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  #outcomes .outcomes-step__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  #outcomes .outcomes-step__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  #outcomes .outcomes-step strong {
    max-width: 100%;
    font-size: clamp(0.5rem, 2.2vw, 0.7rem);
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .ownership-compare {
    padding: 0.85rem;
    border-radius: 0.5rem;
  }

  .ownership-compare__heading {
    display: block;
    margin-bottom: 1.25rem;
    padding-inline: 0.35rem;
  }

  .ownership-compare__heading .eyebrow {
    margin-bottom: 0.65rem;
  }

  .ownership-compare__heading h3 {
    font-size: 1.5rem;
  }

  .ownership-compare__heading > p:last-child {
    font-size: 0.9rem;
  }

  .ownership-compare .om-compare__tabs {
    width: 100%;
    margin: 0 auto 0.5rem;
    padding: 0;
    gap: 0.25rem;
  }

  .ownership-compare .om-compare__tab,
  .ownership-compare .om-compare__tab:first-child,
  .ownership-compare .om-compare__tab:last-child {
    min-height: 4.25rem;
    padding: 0.5rem;
    gap: 0.45rem;
    grid-template-columns: 2.3rem minmax(0, 1fr);
  }

  .ownership-compare .om-compare__tab[aria-selected="true"] {
    transform: none;
  }

  .om-compare__tab-icon {
    width: 2.3rem;
    height: 2.3rem;
  }

  .om-compare__tab-icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .om-compare__tab-copy strong {
    font-size: 0.72rem;
  }

  .om-compare__tab-copy small {
    display: none;
  }

  .ownership-compare .om-compare__panel {
    padding: 0;
  }

  .ownership-state {
    min-height: 5.25rem;
    align-items: flex-start;
    padding: 0.75rem;
  }

  .ownership-state__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .ownership-state div span {
    font-size: 0.74rem;
  }

  .ownership-compare .om-owners__row {
    min-height: 0;
    padding: 1rem;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .ownership-compare .om-owners__row--head {
    display: none;
  }

  .ownership-compare .om-owners__decision,
  .ownership-compare .om-owners__answer {
    display: grid;
    justify-self: stretch;
    gap: 0.28rem;
  }

  .ownership-compare .om-owners__decision::before,
  .ownership-compare .om-owners__answer::before {
    color: #748195;
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .ownership-role {
    justify-self: start;
  }

  .ownership-compare .om-diagram__caption {
    min-height: 0;
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
  }

  h1 {
    font-size: clamp(2.55rem, 12vw, 3.25rem);
  }

  h2 {
    font-size: clamp(2rem, 9vw, 2.7rem);
  }

  .header-inner {
    min-height: 4.5rem;
    gap: 0.75rem;
  }

  .brand-link img {
    width: 6.9rem;
  }

  .header-cta {
    min-height: 2.45rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.75rem;
  }

  .hero {
    padding-top: 6.75rem;
    padding-bottom: 3.5rem;
  }

  .hero-layout,
  .proof-panel,
  .split-heading,
  .faq-shell,
  .booking-shell {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    gap: 2.5rem;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-proof {
    padding: 1.5rem;
  }

  .proof-panel {
    max-width: 35rem;
  }

  #proof .section-shell {
    width: min(46rem, calc(100% - 2.5rem));
  }

  .fabric-phase {
    padding-inline: 0.85rem;
  }

  .fabric-phase__services {
    min-height: 0;
    gap: 1rem;
    grid-auto-columns: auto;
    grid-auto-flow: row;
  }

  .fabric-service {
    height: auto;
    min-height: 13.5rem;
    grid-template-columns: 3rem 3.25rem minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-items: start;
    padding: 1rem;
    text-align: left;
  }

  .fabric-service__index {
    grid-row: 1 / span 3;
  }

  .fabric-service__icon {
    grid-row: 1 / span 3;
  }

  .fabric-service__name,
  .fabric-service__note,
  .fabric-service__handover {
    grid-column: 3;
  }

  .fabric-service__note {
    max-width: none;
    font-size: 1rem;
  }

  .fabric-service:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -0.68rem;
    transform: translateX(50%) rotate(135deg);
  }

  .proof-panel {
    max-width: none;
  }

  .proof-segment {
    min-height: 0;
    padding: 1.5rem;
  }

  #proof .section-actions .button {
    width: 100%;
    min-width: 0;
  }

  .proof-segment + .proof-segment {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .proof-feature {
    padding: 2rem;
  }

  .proof-supporting {
    padding: 1rem 1.5rem 1.75rem;
  }

  .split-heading .section-heading,
  .faq-shell .section-heading,
  .booking-shell .section-heading {
    position: static;
    margin-bottom: 0;
  }

  .fluent-step-list {
    grid-template-columns: 1fr;
  }

  .fluent-step-list li {
    grid-template-columns: 2rem 1fr;
    align-items: center;
  }

  .fluent-step-list li + li {
    border-top: 1px solid rgba(0, 37, 75, 0.14);
    border-left: 0;
  }

  .capability-grid {
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .capability-connector {
    display: none;
  }

  .practical-list {
    grid-template-columns: 1fr;
  }

  .capability-card,
  .capability-card:first-of-type {
    margin-inline-start: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 37, 75, 0.06);
    border-radius: 1rem;
    background: var(--white);
    clip-path: none;
  }

  .capability-card::before,
  .capability-card:first-of-type::before {
    content: none;
  }

  .capability-card {
    z-index: 1;
    display: grid;
    min-height: 0;
    padding: 1.35rem;
    gap: 0.65rem 1rem;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    text-align: left;
  }

  .capability-card + .capability-card {
    border-left: 1px solid rgba(0, 37, 75, 0.14);
  }

  .capability-card__header {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: start;
    margin: 0;
  }

  .capability-card > :not(.capability-card__header) {
    grid-column: 2;
  }

  .capability-card h3 {
    margin-top: 0;
  }

  .capability-card__icon {
    width: 4.5rem;
    height: 4.5rem;
  }

  .capability-card__topics {
    justify-content: flex-start;
  }

  .capability-card:not(:last-of-type)::after {
    content: none;
  }

  .capability-pathway::before {
    z-index: 2;
  }

  .text-list-item {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .practical-list .text-list-item + .text-list-item {
    border-top: 1px solid rgba(0, 37, 75, 0.18);
    border-left: 0;
  }

  .faq-item > div {
    padding: 0 1.25rem 1.25rem 4.1rem;
  }

  .faq-group__heading {
    padding: 1rem 1.25rem 0.3rem;
  }

  .faq-pagination {
    grid-column: auto;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
  }

  .faq-pagination button {
    padding-inline: 0.7rem;
  }

  .faq-pagination button:last-child {
    justify-self: stretch;
  }

  .booking-shell {
    gap: 2.5rem;
  }

  .booking-intro {
    position: static;
  }

  .booking-assurance {
    margin-top: 1.35rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-wide {
    grid-column: auto;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .footer-inner p:last-child {
    text-align: left;
  }
}

@media (max-width: 28rem) {
  .header-cta {
    max-width: 9.5rem;
  }

  .content-list > li {
    grid-template-columns: 2.5rem 1fr;
  }

  .fluent-meta-row {
    grid-template-columns: 4.6rem 1fr;
  }

  .faq-item button {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .faq-action {
    padding-left: 2.85rem;
  }

  .faq-item > div {
    padding-left: 1.25rem;
  }

  .booking-goal__shortcut {
    flex: 1 1 auto;
  }

  .choice-grid--level {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 22rem) {
  #outcomes .outcome-card {
    grid-template-columns: 3rem minmax(0, 1fr) 1.25rem;
  }

  #outcomes .outcome-card__icon {
    display: none;
  }

  #outcomes .outcome-card__index {
    min-height: 3.25rem;
  }
}

/* Reference-aligned case-study dashboard: a fixed three-column reading order on desktop. */
@media (min-width: 48.01rem) {
  .proof-panel {
    grid-template-columns: minmax(0, 1.175fr) minmax(0, 2fr) minmax(0, 0.825fr);
    min-height: 24.5rem;
  }

  .proof-segment.proof-card {
    min-height: 24.5rem;
    padding: 1.15rem 2.1rem;
    gap: 0.75rem;
  }

  .proof-card__header {
    display: grid;
    gap: 0.55rem;
  }

  .proof-card__eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.13em;
  }

  .proof-card__logo-row {
    min-height: 2.25rem;
  }

  .proof-card__logo {
    min-width: 4.5rem;
    min-height: 2.25rem;
  }

  .proof-card--impacx .proof-card__logo {
    width: 8.25rem;
    height: 2.35rem;
    min-width: 0;
    min-height: 0;
    padding: 0.25rem 0.6rem;
    border-color: rgba(255, 255, 255, 0.78);
    border-radius: 0.3rem;
  }

  .proof-card--impacx .proof-card__logo img {
    width: 7.1rem;
    max-width: none;
    max-height: 1.6rem;
    object-fit: contain;
  }

  .proof-card--municipality .proof-card__logo {
    width: 6.4rem;
    height: 2.45rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .proof-card--municipality .proof-card__logo img {
    width: 6.4rem;
    max-width: none;
    max-height: 2.45rem;
    object-fit: contain;
  }

  .proof-card__divider {
    width: 100%;
  }

  .proof-segment + .proof-segment {
    position: relative;
    border-left: 0;
  }

  .proof-segment + .proof-segment::before {
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: 0;
    width: 1px;
    background: var(--line);
    content: "";
  }

  .proof-card--impacx {
    justify-content: space-between;
    text-align: center;
  }

  .proof-card--impacx .proof-card__header,
  .proof-card--impacx .proof-card__logo-row {
    justify-items: center;
  }

  .proof-card--impacx .proof-card__eyebrow::after {
    display: block;
    width: 4rem;
    height: 0.16rem;
    margin: 0.45rem auto 0;
    background: #00d6dc;
    content: "";
  }

  .proof-card--impacx .proof-card__impact {
    display: grid;
    height: auto;
    gap: 0.3rem;
    justify-items: center;
  }

  .proof-card--impacx .proof-card__metric {
    font-size: clamp(2.9rem, 3.5vw, 4.15rem);
    line-height: 0.9;
  }

  .proof-card--impacx .proof-card__metric-label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1.15rem, 1.3vw, 1.6rem);
    font-weight: 700;
  }

  .proof-card--impacx .proof-card__detail {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.86rem;
    line-height: 1.4;
  }

  .proof-card__facts--grid {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .proof-card--impacx .proof-card__facts--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .proof-card__facts--grid li {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
  }

  .proof-card__fact-icon {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: currentColor;
  }

  .proof-card__fact-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .proof-card__fact-copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
  }

  .proof-card--impacx .proof-card__facts--grid li {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    align-items: center;
    padding: 0.5rem 0.65rem;
    text-align: left;
  }

  .proof-card--impacx .proof-card__fact-icon {
    color: var(--white);
  }

  .proof-card--impacx .proof-card__facts--grid li:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  .proof-card--impacx .proof-card__facts--grid li:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .proof-card__facts--grid strong {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1.1rem, 1.35vw, 1.55rem);
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .proof-card__facts--grid span {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .proof-card--municipality {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: start;
    color: var(--navy-950);
  }

  .proof-card--municipality .proof-card__header {
    gap: 0.55rem;
  }

  .proof-card--municipality .proof-card__eyebrow {
    text-align: left;
  }

  .proof-card--municipality .proof-card__logo-row {
    justify-content: flex-start;
  }

  .proof-card--municipality .proof-card__client {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1.05rem, 1.3vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  .proof-card--municipality .proof-card__kpi {
    display: grid;
    height: auto;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 2.1vw, 2rem);
    padding: 0.6rem 0;
    text-align: left;
  }

  .proof-card--municipality .proof-card__metric {
    display: grid;
    width: clamp(5rem, 7vw, 6.25rem);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(0, 37, 75, 0.18);
    border-radius: 50%;
    color: var(--navy-900);
    font-size: clamp(1.5rem, 1.9vw, 2.1rem);
  }

  .proof-card--municipality .proof-card__kpi > div,
  .proof-card__summary-copy {
    display: grid;
    gap: 0.35rem;
  }

  .proof-card--municipality .proof-card__metric-label {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    font-weight: 700;
    line-height: 1.2;
  }

  .proof-card--municipality .proof-card__detail {
    display: block;
    color: var(--navy-900);
    font-size: 0.86rem;
    line-height: 1.4;
  }

  .proof-card--municipality .proof-card__facts--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .proof-card--municipality .proof-card__facts--grid li {
    justify-items: center;
    padding: 0.5rem clamp(0.4rem, 0.8vw, 0.8rem);
    text-align: center;
  }

  .proof-card--municipality .proof-card__fact-icon {
    width: 2.1rem;
    height: 2.1rem;
    color: var(--navy-900);
  }

  .proof-card--municipality .proof-card__fact-copy {
    justify-items: center;
  }

  .proof-card--municipality .proof-card__facts--grid li + li {
    border-left: 1px solid var(--line);
  }

  .proof-card--municipality .proof-card__facts--grid strong,
  .proof-card--municipality .proof-card__facts--grid span {
    color: var(--navy-950);
  }

  .proof-card--municipality .text-link {
    margin-top: 0;
    color: var(--navy-900);
    font-weight: 750;
  }

  .proof-card--summary {
    display: flex;
    justify-content: flex-start;
    justify-items: center;
    text-align: center;
  }

  .proof-card--summary .proof-card__header {
    width: 100%;
  }

  .proof-card--summary .proof-card__summary-icon {
    display: grid;
    width: clamp(4.25rem, 4.6vw, 5rem);
    aspect-ratio: 1;
    place-items: center;
    align-self: center;
    border: 0;
    margin-top: 0.5rem;
  }

  .proof-card__summary-icon img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .proof-card--summary .proof-card__metric {
    color: var(--navy-950);
    font-size: clamp(2rem, 2.7vw, 3.2rem);
  }

  .proof-card--summary .proof-card__summary-copy {
    align-self: auto;
    margin-top: 0.7rem;
  }

  .proof-card--summary .proof-card__metric-label {
    color: var(--navy-950);
    font-size: 0.9rem;
  }

  .proof-card--summary .proof-card__summary-track {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .proof-card--summary > .proof-card__divider {
    margin: 0.7rem 0;
  }

  .proof-card--summary .proof-card__detail {
    display: block;
    color: var(--body);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.45;
  }
}

@media (max-width: 48rem) {
  .proof-segment.proof-card {
    display: flex;
    min-height: 0;
    padding: 1.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .proof-card__header,
  .proof-card__kpi,
  .proof-card__summary-copy {
    display: grid;
    gap: 0.75rem;
  }

  .proof-card__eyebrow,
  .proof-card__metric-label,
  .proof-card__detail {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
  }

  .proof-card__eyebrow {
    color: var(--body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-align: left;
  }

  .proof-card__logo-row {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.75rem;
  }

  .proof-card__logo {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
  }

  .proof-card__logo img {
    display: block;
    width: auto;
    height: auto;
  }

  .proof-card__divider {
    width: 100%;
    height: 1px;
    background: var(--line);
  }

  .proof-card .proof-segment__body {
    width: 100%;
    min-width: 0;
  }

  .proof-card__metric {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .proof-card__metric-label {
    color: var(--navy-950);
    font-weight: 750;
    line-height: 1.35;
  }

  .proof-card__detail {
    display: block;
    color: var(--body);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .proof-card__facts--grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .proof-card__facts--grid li {
    display: grid;
    min-width: 0;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem;
    text-align: left;
  }

  .proof-card__fact-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
  }

  .proof-card__fact-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .proof-card__fact-copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
  }

  .proof-card__facts--grid strong {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  .proof-card__facts--grid span {
    color: var(--body);
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .proof-card--impacx {
    text-align: center;
  }

  .proof-card--impacx .proof-card__header,
  .proof-card--impacx .proof-card__logo-row {
    justify-items: center;
    justify-content: center;
  }

  .proof-card--impacx .proof-card__eyebrow {
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
  }

  .proof-card--impacx .proof-card__eyebrow::after {
    display: block;
    width: 4.75rem;
    height: 0.18rem;
    margin: 0.8rem auto 0;
    background: #00d6dc;
    content: "";
  }

  .proof-card--impacx .proof-card__logo {
    width: 9.25rem;
    height: 2.75rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 0.3rem;
    background: var(--white);
  }

  .proof-card--impacx .proof-card__logo img {
    width: 8rem;
    max-height: 1.85rem;
    object-fit: contain;
  }

  .proof-card--impacx .proof-card__impact {
    display: grid;
    gap: 0.55rem;
    justify-items: center;
  }

  .proof-card--impacx .proof-card__metric {
    color: var(--amber-500);
    font-size: 3.75rem;
  }

  .proof-card--impacx .proof-card__metric-label {
    color: var(--white);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.35rem;
  }

  .proof-card--impacx .proof-card__detail,
  .proof-card--impacx .proof-card__facts--grid span {
    color: rgba(255, 255, 255, 0.8);
  }

  .proof-card--impacx .proof-card__facts--grid {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .proof-card--impacx .proof-card__facts--grid strong {
    color: var(--white);
  }

  .proof-card--municipality .proof-card__logo {
    width: 6.5rem;
    height: auto;
    border: 0;
    background: transparent;
  }

  .proof-card--municipality .proof-card__logo img {
    width: 6.5rem;
    object-fit: contain;
  }

  .proof-card--municipality .proof-card__client {
    min-width: 0;
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .proof-card--municipality .proof-card__kpi {
    justify-items: center;
    text-align: center;
  }

  .proof-card--municipality .proof-card__metric {
    display: grid;
    width: 7rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(0, 37, 75, 0.18);
    border-radius: 50%;
    font-size: 2.75rem;
  }

  .proof-card--municipality .proof-card__kpi > div {
    display: grid;
    gap: 0.45rem;
  }

  .proof-card--municipality .proof-card__facts--grid {
    padding-block: 1rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .proof-card .text-link {
    margin-top: 0;
  }

  .proof-card--summary {
    align-items: center;
    text-align: center;
  }

  .proof-card--summary .proof-card__header {
    width: 100%;
  }

  .proof-card--summary .proof-card__metric {
    font-size: 3rem;
  }

  .proof-card--summary .proof-card__summary-track {
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.4;
  }

  .proof-card__summary-icon {
    display: grid;
    width: 5rem;
    aspect-ratio: 1;
    place-items: center;
    border: 0;
  }

  .proof-card__summary-icon img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* Reference platform-map composition: shared phase strip, five reporting-stage
   panels and handover rail. Mirrors the Fabric page, sized for five stages. */
.fabric-system {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto minmax(clamp(15.5rem, 19.45vw, 23.3rem), auto) auto;
  gap: 1rem 0;
  position: relative;
}

.fabric-phase-list,
.fabric-service-list,
.fabric-handover-rail {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.fabric-phase-list { grid-row: 1; }
.fabric-service-list { grid-row: 2; }

.fabric-phase {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.fabric-phase__heading {
  min-height: clamp(2.7rem, 3.4vw, 4rem);
  margin: 0;
  padding: 0.65rem 1rem;
  justify-content: center;
  border: 1px solid rgba(0, 37, 75, 0.28);
  border-bottom: 0.2rem solid var(--navy-900);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.8);
}

.fabric-phase--land { grid-column: span 2; }
.fabric-phase--organise { grid-column: span 2; }
.fabric-phase--decide { grid-column: span 1; }

.fabric-phase-list .fabric-phase:not(:last-child)::after {
  position: absolute;
  display: block;
  top: 50%;
  right: -0.72rem;
  z-index: 5;
  width: 1.44rem;
  height: 1.44rem;
  border-top: 1px solid rgba(0, 37, 75, 0.32);
  border-right: 1px solid rgba(0, 37, 75, 0.32);
  background: var(--white);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.fabric-phase__icon {
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  background: transparent;
}

.fabric-service {
  --phase-accent: var(--navy-800);
  /* min-height, not height: the grid row is minmax(clamp(...), auto), so the
     row is meant to grow. A fixed height pushed the handover pill out of the
     card and onto the rail between 48rem and 78rem. The base rule's
     height: 15.75rem has to be released for the row to size to content. */
  height: auto;
  min-height: clamp(15.5rem, 19.45vw, 23.3rem);
  padding: 1.35rem 0.85rem 1.1rem;
  grid-template-rows: auto 3rem minmax(2.5rem, auto) minmax(3.2rem, 1fr) auto;
  border-color: rgba(0, 37, 75, 0.25);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.8);
}

.fabric-service--organise { --phase-accent: var(--teal-600); }
.fabric-service--decide { --phase-accent: var(--amber-500); }

.fabric-service--organise .fabric-service__index {
  background: var(--phase-accent);
}

.fabric-service--decide .fabric-service__index {
  background: var(--phase-accent);
}

.fabric-service + .fabric-service { margin-left: -1px; }
.fabric-service__index { width: 2.8rem; height: 2.8rem; font-size: 0.95rem; }
.fabric-service__icon { width: 3rem; height: 3rem; }
.fabric-service__icon svg { width: 2.5rem; height: 2.5rem; }
.fabric-service__name { font-size: clamp(0.9rem, 0.76rem + 0.28vw, 1.05rem); }
.fabric-service__note { font-size: clamp(0.8rem, 0.72rem + 0.18vw, 0.94rem); }

.fabric-handover-rail {
  grid-row: 3;
  min-height: clamp(3.1rem, 3.9vw, 4.7rem);
  border: 1px solid rgba(0, 37, 75, 0.24);
  background: rgba(255, 255, 255, 0.8);
}

.fabric-handover {
  position: relative;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  color: var(--navy-800);
  font-size: clamp(0.63rem, 0.56rem + 0.16vw, 0.76rem);
  font-weight: 800;
  text-align: center;
  text-transform: none;
}

.fabric-handover__icon {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  place-items: center;
}

.fabric-handover__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.fabric-handover--decide .fabric-handover__icon svg {
  fill: currentColor;
  stroke: none;
}

.fabric-handover:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -0.25rem;
  z-index: 2;
  color: var(--navy-900);
  content: "›";
  font-family: Arial, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
}

.fabric-handover--organise { color: var(--teal-600); }
.fabric-handover--decide { color: var(--amber-500); }

.fabric-service__handover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 10.5rem);
  min-height: 2.25rem;
  padding: 0.35rem 0.45rem;
  border-color: var(--phase-accent);
  background: transparent;
  color: var(--phase-accent);
  font-size: clamp(0.63rem, 0.56rem + 0.16vw, 0.76rem);
}

/* Chevron drawn as SVG rather than the Arial "›" glyph: font side bearings and
   baseline metrics leave the glyph off-centre inside the circle. The path is
   symmetric about (12,12) so background-position: center is exact. */
.fabric-service:not(:nth-child(5))::after {
  position: absolute;
  top: 45%;
  right: -1.2rem;
  z-index: 4;
  display: block; /* must stay explicit: a later `.fabric-service::after` sets display: none */
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--white);
  border-radius: 50%;
  background-color: var(--navy-900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width%3D%274%27 stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 1.05rem 1.05rem;
  content: "";
  transform: translateY(-50%);
}

/* Earlier cards paint above the card to their right, so their handover circles
   remain whole when that following card becomes the live animated card. */
.fabric-service:nth-child(1) { z-index: 5; }
.fabric-service:nth-child(2) { z-index: 4; }
.fabric-service:nth-child(3) { z-index: 3; }
.fabric-service:nth-child(4) { z-index: 2; }
.fabric-service:nth-child(5) { z-index: 1; }

.fabric-platform .om-diagram__caption {
  max-width: none;
  margin-left: 0;
  text-align: left;
}

.fabric-service::after,
.fabric-phase::after { display: none; }

@media (max-width: 48rem) {
  .fabric-system {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0.75rem;
  }

  .fabric-phase-list,
  .fabric-service-list {
    grid-template-columns: 1fr;
  }

  .fabric-phase--land,
  .fabric-phase--organise,
  .fabric-phase--decide {
    grid-column: 1;
  }

  .fabric-phase__heading {
    min-height: 3.5rem;
  }

  .fabric-service {
    height: auto;
    min-height: 10rem;
    margin: 0 !important;
    grid-template-columns: 3rem 3.25rem minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    text-align: left;
  }

  .fabric-service__index,
  .fabric-service__icon { grid-row: 1 / span 3; }

  .fabric-service__name,
  .fabric-service__note { grid-column: 3; }

  /* Stacked cards hand over downwards, so the connectors move to the bottom
     edge; without this they sit off the right edge and are clipped. */
  .fabric-phase-list .fabric-phase:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -0.72rem;
    transform: translateX(50%) rotate(135deg);
  }

  .fabric-service:not(:nth-child(5))::after {
    top: auto;
    right: 50%;
    bottom: -1.2rem;
    transform: translateX(50%) rotate(90deg);
  }

  .fabric-handover-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero::before {
    animation: none !important;
  }

  .faq-item,
  .faq-item > div:not([hidden]),
  .faq-group.is-active,
  .next-journey::before,
  .next-journey::after,
  .next-step,
  .contact-form,
  .booking-goal__shortcut,
  .booking-form__submit svg {
    animation: none !important;
    transition: none !important;
  }

  .fabric-service,
  .fabric-service__index,
  .fabric-service__handover {
    transition: none !important;
  }

  .fabric-service.is-active,
  .fabric-service.is-live,
  .fabric-service.is-live:not(:last-child)::after,
  .fabric-service.is-active:not(:last-child)::after,
  .fabric-phase.om-rail__phase--active:not(:last-child)::after {
    animation: none !important; /* fabric-card-settle and fabric-arrow-forward */
  }

  .js-reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }

  #outcomes .outcome-card.is-active {
    transform: none;
  }

  .ownership-compare .om-compare__panel.is-revealing .ownership-state,
  .ownership-compare .om-compare__panel.is-revealing .om-owners__row,
  .ownership-compare .om-compare__panel.is-revealing > .om-diagram__caption {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .capability-card,
  .capability-card__icon,
  .capability-connector::before {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .capability-connector::before {
    transform: scaleX(1);
  }

  .custom-select__panel,
  .custom-select__chevron,
  .custom-select__option {
    transition: none !important;
  }

}
 
/* Reference-led reporting path for phone and tablet layouts. */
@media (max-width: 56rem) {
  #proof .reporting-path-shell {
    display: flex;
    width: min(100% - 1.5rem, 46rem);
    flex-direction: column;
  }

  #proof .reporting-path-shell > .section-heading {
    order: 1;
    margin: 4rem auto 1.8rem;
    padding-inline: 0.25rem;
  }

  #proof .reporting-path-shell > .section-heading .eyebrow {
    margin-bottom: 1.15rem;
    color: var(--navy-900);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
  }

  #proof .reporting-path-shell > .section-heading h2 {
    max-width: 13ch;
    margin-inline: auto;
    margin-bottom: 1.15rem;
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  #proof .reporting-path-shell > .section-heading > p:last-child {
    max-width: 31rem;
    color: #46536a;
    font-size: clamp(0.94rem, 3.85vw, 1.08rem);
    line-height: 1.65;
    text-wrap: balance;
  }

  #proof .reporting-path-shell > .fabric-platform {
    order: 2;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #proof .reporting-path-shell .fabric-system {
    display: grid;
    min-width: 0;
    gap: 1.15rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  #proof .reporting-path-shell .fabric-phase-list {
    display: grid;
    overflow: hidden;
    margin: 0;
    padding: 0;
    gap: 0;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #d2dce6;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.65rem 1.8rem rgba(0, 37, 75, 0.06);
  }

  #proof .reporting-path-shell .fabric-phase {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    min-height: 7rem;
    grid-column: auto;
    place-items: center;
    padding: 0.75rem 0.35rem;
    border: 0;
    border-radius: 0;
    background: #fff;
  }

  #proof .reporting-path-shell .fabric-phase + .fabric-phase {
    border-left: 0;
    padding-left: 1rem;
  }

  #proof .reporting-path-shell .fabric-phase:nth-child(1) { z-index: 3; }
  #proof .reporting-path-shell .fabric-phase:nth-child(2) { z-index: 2; }
  #proof .reporting-path-shell .fabric-phase:nth-child(3) { z-index: 1; }

  #proof .reporting-path-shell .fabric-phase:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -0.9rem;
    bottom: auto;
    left: auto;
    z-index: 3;
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid #c8d4df;
    border-width: 1px 1px 0 0;
    background: #fff;
    content: "";
    transform: translateY(-50%) rotate(45deg);
  }

  #proof .reporting-path-shell .fabric-phase__heading {
    display: grid;
    min-height: 0;
    margin: 0;
    width: 100%;
    place-items: center;
    padding: 0;
    gap: 0.55rem;
    border: 0;
    background: transparent;
    color: var(--navy-900);
    font-size: clamp(0.56rem, 2.55vw, 0.68rem);
    letter-spacing: 0.015em;
    line-height: 1.28;
    text-align: center;
    text-transform: uppercase;
  }

  #proof .reporting-path-shell .fabric-phase__icon {
    width: 2rem;
    height: 2rem;
  }

  #proof .reporting-path-shell .fabric-phase__icon svg {
    width: 1.75rem;
    height: 1.75rem;
  }

  #proof .reporting-path-shell .fabric-service-list {
    display: grid;
    overflow: visible;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  #proof .reporting-path-shell .fabric-service {
    position: relative;
    display: grid;
    width: 100%;
    height: auto;
    min-height: 7.75rem;
    margin: 0 !important;
    padding: 1rem;
    align-items: center;
    gap: 0.3rem 0.55rem;
    grid-template-areas:
      "index icon name handover"
      "index icon note handover";
    grid-template-columns: 2.75rem 2.35rem minmax(0, 1fr) 5.8rem;
    grid-template-rows: auto auto;
    border: 1px solid #d7e0e8;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.65rem 1.8rem rgba(0, 37, 75, 0.055);
    text-align: left;
  }

  #proof .reporting-path-shell .fabric-service--organise {
    background: linear-gradient(90deg, #f1fbf9, #fff 72%);
  }

  #proof .reporting-path-shell .fabric-service--decide {
    background: linear-gradient(90deg, #fff8ee, #fff 72%);
  }

  #proof .reporting-path-shell .fabric-service__index {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    grid-area: index;
    place-items: center;
    align-self: center;
    border-radius: 50%;
    background: var(--navy-900);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
  }

  #proof .reporting-path-shell .fabric-service--organise .fabric-service__index {
    background: var(--teal-600);
  }

  #proof .reporting-path-shell .fabric-service--decide .fabric-service__index {
    background: var(--amber-500);
    color: var(--navy-950);
  }

  #proof .reporting-path-shell .fabric-service__icon {
    width: 2.35rem;
    height: 2.35rem;
    grid-area: icon;
    align-self: center;
    color: var(--navy-900);
  }

  #proof .reporting-path-shell .fabric-service__name {
    grid-area: name;
    align-self: end;
    justify-self: start;
    color: var(--navy-900);
    font-size: 1rem;
    line-height: 1.2;
  }

  #proof .reporting-path-shell .fabric-service__note {
    grid-area: note;
    align-self: start;
    justify-self: start;
    color: #435068;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  #proof .reporting-path-shell .fabric-service__handover {
    display: flex;
    min-height: 3.25rem;
    grid-area: handover;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    margin-top: 0;
    padding: 0.45rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.86);
    color: var(--navy-900);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: normal;
  }

  #proof .reporting-path-shell .fabric-service--organise .fabric-service__name,
  #proof .reporting-path-shell .fabric-service--organise .fabric-service__icon,
  #proof .reporting-path-shell .fabric-service--organise .fabric-service__handover {
    color: var(--teal-600);
  }

  #proof .reporting-path-shell .fabric-service--decide .fabric-service__icon,
  #proof .reporting-path-shell .fabric-service--decide .fabric-service__handover {
    color: #d97706;
  }

  #proof .reporting-path-shell .fabric-service-list > .fabric-service:not(:last-child)::after {
    position: absolute;
    top: auto;
    right: auto;
    bottom: -1.78rem;
    left: 50%;
    z-index: 4;
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid #d5dde5;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300254b' stroke-width%3D%274%27 stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8.5 6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 1.15rem 1.15rem;
    color: var(--navy-900);
    box-shadow: 0 0.3rem 0.8rem rgba(0, 37, 75, 0.08);
    content: "";
    font-size: 1.2rem;
    line-height: 1;
    transform: translateX(-50%);
  }

  #proof .reporting-path-shell .fabric-handover-rail {
    display: flex !important;
    overflow: visible;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0.85rem 0.45rem;
    gap: 0.25rem;
    grid-column: 1;
    grid-row: auto;
    border: 1px solid #d7e0e8;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.65rem 1.8rem rgba(0, 37, 75, 0.05);
    scrollbar-width: thin;
  }

  #proof .reporting-path-shell .fabric-handover {
    position: relative;
    display: grid;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    place-items: center;
    padding: 0.35rem 0.15rem;
    gap: 0.35rem;
    color: var(--navy-900);
    font-size: 0.54rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
  }

  #proof .reporting-path-shell .fabric-handover--land { color: var(--navy-900); }
  #proof .reporting-path-shell .fabric-handover--organise { color: var(--teal-600); }
  #proof .reporting-path-shell .fabric-handover--decide { color: var(--amber-500); }

  #proof .reporting-path-shell .fabric-handover:not(:last-child)::after {
    right: -0.3rem;
    color: currentColor;
    font-size: 1.25rem;
  }

  #proof .reporting-path-shell .fabric-handover + .fabric-handover::before {
    display: none;
    content: none;
  }

  #proof .reporting-path-shell .fabric-handover__icon {
    width: 1.55rem;
    height: 1.55rem;
  }

  #proof .reporting-path-shell .om-diagram__caption {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #d7e0e8;
    border-radius: 0.75rem;
    background: #f5f8fc;
    color: #46536a;
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: center;
  }

  #proof .reporting-path-shell > .section-actions {
    order: 3;
    width: 100%;
    margin-top: 0;
  }

  #proof .reporting-path-shell .section-actions .button {
    width: 100%;
    min-height: 3.65rem;
    border-radius: 0.5rem;
    font-size: 1rem;
  }

  #proof .reporting-path-shell > .proof-panel {
    order: 4;
    margin-top: 3rem;
  }
}

.ownership-state--trusted {
  border-bottom-color: rgba(22, 160, 133, 0.28);
  background: rgba(22, 160, 133, 0.08);
  color: #076b59;
}

/* Client feedback 2026-08-24: compact, decision-led course comparison. */
.course-choice-guide {
  display: grid;
  margin: calc(clamp(2.5rem, 5vw, 4rem) * -0.45) 0 1.25rem;
  padding: 0.9rem;
  gap: 0.55rem;
  border: 1px solid rgba(0, 37, 75, 0.1);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.72);
  grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
  box-shadow: 0 0.7rem 1.8rem rgba(0, 37, 75, 0.06);
}

.course-choice-guide > strong,
.course-choice-guide > span {
  display: flex;
  min-height: 3.2rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
}

.course-choice-guide > strong {
  background: var(--navy-900);
  color: var(--white);
  font-family: "Inter", system-ui, sans-serif;
}

.course-choice-guide > span {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: var(--white);
  color: var(--navy-900);
  font-size: 0.75rem;
  line-height: 1.35;
}

.course-card {
  padding: clamp(1.15rem, 1.8vw, 1.55rem);
}

.course-card__topline {
  margin-bottom: 0.85rem;
}

.course-card h3 {
  min-height: 0;
  margin-bottom: 0.65rem;
}

.course-card__highlights {
  display: grid;
  margin: 0.8rem 0;
  padding: 0;
  gap: 0.45rem;
  list-style: none;
}

.course-card__highlights li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.course-card__highlights li::before {
  position: absolute;
  top: 0.42em;
  left: 0.05rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--mint-400);
  content: "";
}

.course-card__details {
  margin: 0.15rem 0 0.75rem;
  border-block: 1px solid rgba(0, 37, 75, 0.1);
}

.course-card__details summary {
  padding: 0.7rem 0;
  color: var(--navy-900);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.course-card__details > div {
  padding: 0 0 0.85rem;
  font-size: 0.82rem;
}

.course-card__details .course-card__topics {
  margin-bottom: 0.9rem;
}

.course-card__details .course-card__leave {
  margin-top: 0.75rem;
}

.course-card__price {
  margin-top: auto;
  margin-bottom: 0.85rem;
}

.course-card__anchor {
  display: flex;
  margin: 0.2rem 0 0.3rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
  font-weight: 700;
}

.course-card__anchor del {
  text-decoration-color: var(--amber-500);
  text-decoration-thickness: 0.12rem;
}

.course-card--featured .course-card__details {
  border-color: rgba(255, 255, 255, 0.16);
}

.course-card--featured .course-card__details summary {
  color: var(--white);
}

.training-details #results {
  margin-top: clamp(3.25rem, 7vw, 6rem);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 78rem) {
  .course-choice-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-choice-guide > strong {
    grid-column: 1 / -1;
  }
}

@media (max-width: 48rem) {
  #offer .section-shell {
    width: min(100% - 2rem, 30rem);
  }

  #offer .section-heading {
    margin-bottom: 2rem;
  }

  #offer .section-heading h2 {
    max-width: 13ch;
    margin-inline: auto;
    font-size: clamp(2rem, 8.5vw, 2.65rem);
  }

  #offer .section-heading > p:last-child {
    max-width: 34rem;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  #offer .course-choice-guide {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.8rem;
    border-color: rgba(0, 37, 75, 0.14);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: 0 0.65rem 1.5rem rgba(0, 37, 75, 0.06);
  }

  #offer .course-choice-guide > strong {
    display: grid;
    min-height: 3.25rem;
    align-items: center;
    padding: 0;
    gap: 0.75rem;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    background: transparent;
    color: var(--navy-900);
    font-size: 0.88rem;
    line-height: 1.25;
  }

  #offer .course-choice-guide > strong::before {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--navy-900);
    color: var(--white);
    content: "☷";
    font-size: 1.25rem;
  }

  #offer .course-choice-guide > strong::after {
    color: var(--navy-900);
    content: "⌄";
    font-size: 1.5rem;
    line-height: 1;
  }

  #offer .course-choice-guide > span {
    display: none;
  }

  #offer .course-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  #offer .course-card {
    display: grid;
    min-height: 0;
    padding: 1rem;
    row-gap: 0.45rem;
    grid-template-areas:
      "topline"
      "title"
      "price"
      "promise"
      "bestfor"
      "highlights"
      "details"
      "select";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    border-radius: 0.9rem;
    box-shadow: 0 0.8rem 2rem rgba(0, 37, 75, 0.08);
  }

  #offer .course-card::before {
    content: none;
  }

  #offer .course-card {
    padding-left: 1.65rem;
  }

  #offer .course-card::before {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: linear-gradient(135deg, var(--teal-600), var(--mint-400));
    content: "";
  }

  #offer .course-card::after {
    position: absolute;
    top: 0.22rem;
    left: 0.45rem;
    z-index: 1;
    color: var(--white);
    content: "★";
    font-size: 0.82rem;
    line-height: 1;
  }

  #offer .course-card__topline {
    grid-area: topline;
    justify-content: flex-start;
    margin-bottom: 0.45rem;
    gap: 0.35rem;
  }

  #offer .course-card__level,
  #offer .course-card__duration {
    font-size: 0.58rem;
    letter-spacing: 0.055em;
  }

  #offer .course-card__level {
    padding: 0.25rem 0.4rem;
  }

  #offer .course-card h3 {
    min-height: 0;
    margin-bottom: 0.25rem;
    grid-area: title;
    font-size: 1rem;
    line-height: 1.18;
  }

  #offer .course-card__promise {
    margin: 0 0 0.4rem;
    grid-area: promise;
    font-size: 0.68rem;
    line-height: 1.28;
  }

  #offer .course-card__bestfor {
    margin: 0 0 0.45rem;
    grid-area: bestfor;
    font-size: 0.62rem;
    line-height: 1.28;
  }

  #offer .course-card__bestfor strong {
    display: block;
    margin-bottom: 0.08rem;
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  #offer .course-card__highlights {
    align-self: start;
    margin: 0;
    gap: 0.25rem;
    grid-area: highlights;
  }

  #offer .course-card__highlights li {
    padding-left: 0.85rem;
    font-size: 0.62rem;
    line-height: 1.25;
  }

  #offer .course-card__highlights li::before {
    top: 0.4em;
    width: 0.38rem;
    height: 0.38rem;
  }

  #offer .course-card__details {
    align-self: end;
    margin: 0.35rem 0 0;
    border: 0;
    grid-area: details;
  }

  #offer .course-card__details summary {
    padding: 0.35rem 0 0;
    font-size: 0.62rem;
  }

  #offer .course-card__details > div {
    padding: 0.45rem 0 0;
    font-size: 0.65rem;
  }

  #offer .course-card__price {
    align-self: start;
    justify-self: start;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    gap: 0.3rem;
    grid-area: price;
  }

  #offer .course-card__price > span {
    font-size: clamp(2rem, 9vw, 2.7rem);
  }

  #offer .course-card__price small {
    max-width: none;
    font-size: 0.6rem;
  }

  #offer .course-card__saving {
    min-height: 1.45rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.56rem;
  }

  #offer .course-card__select {
    align-self: end;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    gap: 0.35rem;
    grid-area: select;
    font-size: 0.62rem;
    line-height: 1.2;
  }

  #offer .course-card__anchor {
    align-self: end;
    margin: 0;
    gap: 0.3rem;
    grid-area: anchor;
    font-size: 0.56rem;
  }

  #offer .course-card--featured {
    min-height: 0;
    margin-top: clamp(1.25rem, 5vw, 2rem);
    grid-template-areas:
      "topline"
      "title"
      "anchor"
      "price"
      "promise"
      "bestfor"
      "highlights"
      "details"
      "select";
    grid-template-rows: none;
  }

  #offer .course-card--featured .course-card__highlights {
    padding-top: 0.25rem;
  }

  #offer .approach-panel,
  #offer .section-actions {
    display: none;
  }
}

/* Reference-led phone hero. Kept below 36rem so tablet and desktop designs remain unchanged. */
:where(.hero--sds) .mobile-hero-symbol,
:where(.hero--sds) .mobile-hero-journey,
:where(.hero--sds) .mobile-hero-action__icon,
:where(.hero--sds) .mobile-hero-action__arrow,
:where(.hero--sds) .mobile-hero-support__icon {
  display: none;
}

@media (max-width: 36rem) {
  .hero--sds {
    display: block;
    min-height: 0;
    overflow: hidden;
    padding: 6.25rem 0 1.9rem;
    background: #fff;
    color: var(--navy-900);
  }

  .hero--sds::before,
  .hero--sds .hero-glow {
    display: none;
  }

  .hero--sds .hero-layout {
    display: block;
    width: min(100% - 2rem, 28rem);
  }

  .hero--sds .hero-copy {
    max-width: none;
    text-align: center;
  }

  .mobile-hero-symbol {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    place-items: center;
    background: linear-gradient(145deg, #f4f8ff, #e4f0ff);
  }

  .mobile-hero-symbol svg {
    width: 2.8rem;
    fill: none;
    stroke: #00254b;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }

  .hero--sds .eyebrow {
    width: 100%;
    min-height: 3.65rem;
    justify-content: center;
    margin: 0 0 1.35rem;
    padding: 0.7rem 0.8rem;
    border: 1.5px solid #00254b;
    border-radius: 0.8rem;
    color: #00254b;
    font-size: clamp(0.72rem, 3.35vw, 0.88rem);
    letter-spacing: 0.08em;
    line-height: 1.45;
    text-align: center;
  }

  .hero--sds .eyebrow::before {
    display: none;
  }

  .hero--sds h1 {
    max-width: 100%;
    margin: 0 auto 1rem;
    color: #00254b;
    font-size: clamp(2.35rem, 10.6vw, 3.2rem);
    letter-spacing: -0.055em;
    line-height: 1.02;
    text-wrap: balance;
  }

  .hero--sds .hero-subheadline {
    max-width: 24rem;
    margin: 0 auto 1.25rem;
    color: #00254b;
    font-size: clamp(1rem, 4.25vw, 1.15rem);
    font-weight: 500;
    line-height: 1.46;
    text-wrap: balance;
  }

  .mobile-hero-journey {
    display: grid;
    margin: 0 0 1.35rem;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
  }

  .mobile-hero-step {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    color: #00254b;
    font-size: 0.77rem;
    font-weight: 600;
    line-height: 1.22;
  }

  .mobile-hero-step:not(:last-child)::after {
    position: absolute;
    top: 1.85rem;
    left: calc(50% + 2.5rem);
    width: calc(100% - 5rem);
    height: 2px;
    background: repeating-linear-gradient(90deg, #00254b 0 7px, transparent 7px 13px);
    content: "";
  }

  .mobile-hero-step__icon {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 0.28rem;
    border-radius: 50%;
    place-items: center;
    background: linear-gradient(145deg, #f4f8ff, #e5f1ff);
  }

  .mobile-hero-step__icon svg {
    width: 2.35rem;
    fill: none;
    stroke: #00254b;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .mobile-hero-step strong {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .mobile-hero-step > span:last-child {
    max-width: 8rem;
    text-wrap: balance;
  }

  .hero--sds .hero-actions {
    display: grid;
    gap: 0.5rem;
  }

  .hero--sds .hero-actions .button {
    display: grid;
    width: 100%;
    min-height: 4.75rem;
    padding: 0.55rem 0.75rem;
    grid-template-columns: 3.6rem minmax(0, 1fr) 1.25rem;
    gap: 0.65rem;
    border-radius: 0.65rem;
    font-size: clamp(0.96rem, 4.45vw, 1.17rem);
    line-height: 1.2;
    text-align: left;
  }

  .hero--sds .hero-actions .button--primary {
    border-color: #00254b;
    background: #00254b;
    color: #fff;
    box-shadow: none;
  }

  .hero--sds .hero-actions .button--secondary {
    border: 1.5px solid #00254b;
    background: #fff;
    color: #00254b;
  }

  .mobile-hero-action__icon {
    display: grid;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    place-items: center;
    background: #f0f6ff;
  }

  .button--primary .mobile-hero-action__icon {
    background: #00254b;
  }

  .mobile-hero-action__icon svg {
    width: 2.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .mobile-hero-action__arrow {
    display: block;
    justify-self: end;
    font-family: Arial, sans-serif;
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
  }

  .hero--sds .hero-support {
    display: grid;
    margin: 0.65rem 0 0;
    padding: 0.75rem;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.65rem;
    background: linear-gradient(110deg, #f1f7ff, #e2effd);
    color: #00254b;
    font-size: clamp(0.9rem, 4vw, 1.02rem);
    line-height: 1.38;
    text-align: left;
  }

  .mobile-hero-support__icon {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    place-items: center;
    background: #00254b;
    color: #fff;
  }

  .mobile-hero-support__icon svg {
    width: 2.4rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .hero--sds .hero-proof {
    display: none;
  }
}
/* Reference-led comparison treatment for phone and narrow mobile previews only. */
@media (max-width: 36rem) {
  #proof {
    background: #fff;
  }

  #proof > .section-shell {
    width: min(100% - 1.5rem, 34rem);
  }

  #proof .ownership-compare {
    overflow: visible;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #proof .ownership-compare__heading {
    margin: 0 auto 1.5rem;
    padding-inline: 0.35rem;
    text-align: center;
  }

  #proof .ownership-compare__heading .eyebrow {
    justify-content: center;
    margin-bottom: 0.85rem;
    color: var(--navy-900);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
  }

  #proof .ownership-compare__heading h3 {
    max-width: 15ch;
    margin: 0 auto 0.8rem;
    color: var(--navy-950);
    font-size: clamp(2rem, 8.8vw, 2.8rem);
    letter-spacing: -0.05em;
    line-height: 1.08;
    text-wrap: balance;
  }

  #proof .ownership-compare__heading > p:last-child {
    max-width: 31rem;
    color: #4c586b;
    font-size: clamp(0.94rem, 3.8vw, 1.05rem);
    line-height: 1.55;
    text-wrap: balance;
  }

  #proof .ownership-compare .om-compare__tabs {
    position: relative;
    display: grid;
    width: 100%;
    margin: 0 auto 2rem;
    gap: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  #proof .ownership-compare .om-compare__tab,
  #proof .ownership-compare .om-compare__tab:first-child,
  #proof .ownership-compare .om-compare__tab:last-child {
    min-height: 9.6rem;
    padding: 1rem 0.75rem;
    gap: 0.7rem;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    border: 1px solid #cbd8e7;
    border-radius: 0.65rem;
    background: #fff;
    color: var(--navy-900);
    box-shadow: none;
    transform: none;
  }

  #proof .ownership-compare .om-compare__tab:first-child[aria-selected="true"] {
    border-color: #c92320;
    background: linear-gradient(135deg, #bd1917, #d72b26);
    color: #fff;
    box-shadow: 0 0.85rem 1.8rem rgba(185, 25, 23, 0.16);
  }

  #proof .ownership-compare .om-compare__tab:last-child[aria-selected="true"] {
    border-color: var(--teal-600);
    background: linear-gradient(135deg, #078b73, #16a085);
    color: #fff;
    box-shadow: 0 0.85rem 1.8rem rgba(22, 160, 133, 0.16);
  }

  #proof .ownership-compare .om-compare__tab:first-child {
    position: relative;
    z-index: 2;
    overflow: visible;
    border-right: 0;
    border-radius: 0.75rem 0 0 0.75rem;
  }

  #proof .ownership-compare .om-compare__tab:first-child::after {
    position: absolute;
    top: 50%;
    right: -1rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
  }

  #proof .ownership-compare .om-compare__tab:first-child[aria-selected="true"]::after {
    background: #cc2420;
  }

  #proof .ownership-compare .om-compare__tab:last-child {
    position: relative;
    z-index: 1;
    border-left: 0;
    border-radius: 0 0.75rem 0.75rem 0;
  }

  #proof .om-compare__tab-icon {
    width: 2.75rem;
    height: 3.7rem;
    border-radius: 0.5rem;
  }

  #proof .om-compare__tab-icon svg {
    width: 1.65rem;
    height: 1.65rem;
  }

  #proof .om-compare__tab-copy strong {
    font-size: clamp(0.82rem, 3.65vw, 1rem);
    line-height: 1.2;
  }

  #proof .om-compare__tab-copy small {
    display: block;
    font-size: clamp(0.7rem, 3vw, 0.82rem);
    line-height: 1.35;
  }

  #proof .ownership-compare .om-compare__panel {
    position: relative;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #proof .ownership-compare .om-compare__panel::before {
    position: absolute;
    top: 4rem;
    bottom: 4rem;
    left: 50%;
    z-index: 0;
    width: 2px;
    background: #b9dedb;
    content: "";
    transform: translateX(-50%);
  }

  #proof .ownership-state {
    position: relative;
    z-index: 1;
    min-height: 7.5rem;
    align-items: center;
    padding: 1.15rem 1rem;
    gap: 0.9rem;
    border: 1px solid rgba(245, 158, 11, 0.48);
    border-radius: 0.7rem;
    background: #fff9ef;
  }

  #proof .ownership-state--trusted {
    border-color: rgba(22, 160, 133, 0.46);
    background: #effaf7;
    color: #076b59;
  }

  #proof .ownership-state__icon {
    width: 3.15rem;
    height: 3.15rem;
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 0.55rem;
  }

  #proof .ownership-state strong {
    font-size: 1rem;
  }

  #proof .ownership-state div span {
    font-size: 0.82rem;
    line-height: 1.4;
  }

  #proof .ownership-state::after,
  #proof .ownership-compare .om-owners::after {
    position: absolute;
    bottom: -1.18rem;
    left: 50%;
    z-index: 3;
    width: 0.9rem;
    height: 0.9rem;
    border: 0.2rem solid #fff;
    border-radius: 50%;
    background: var(--teal-600);
    box-shadow: 0 0 0 1px #87cbc3;
    content: "";
    transform: translateX(-50%);
  }

  #proof .ownership-compare .om-owners {
    position: relative;
    z-index: 1;
    overflow: visible;
    margin-top: 2rem;
    border: 1px solid rgba(22, 160, 133, 0.38);
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: 0 0.6rem 1.8rem rgba(0, 37, 75, 0.05);
  }

  #proof .ownership-compare .om-owners__row {
    display: grid;
    min-height: 6.5rem;
    padding: 0.8rem 0;
    align-items: center;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #fff;
  }

  #proof .ownership-compare .om-owners__row > span {
    min-width: 0;
    align-self: stretch;
    padding-inline: 0.7rem;
  }

  #proof .ownership-compare .om-owners__row:not(.om-owners__row--head) > span + span {
    border-left: 1px solid #e1e8ee;
  }

  #proof .ownership-compare .om-owners__row + .om-owners__row {
    border-top: 1px solid #dce5ec;
  }

  #proof .ownership-compare .om-owners__row--head {
    display: grid;
    min-height: 4rem;
    padding-block: 0.65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #effafa;
    font-size: clamp(0.56rem, 2.35vw, 0.68rem);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  #proof .ownership-compare .om-owners__row--head > span {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.6rem;
    text-align: center;
    overflow-wrap: anywhere;
  }

  #proof .ownership-compare .om-owners__row--head > span + span {
    border-left: 1px solid rgba(22, 160, 133, 0.2);
  }

  #proof .ownership-compare .om-owners__row--head > span:nth-child(1) {
    grid-column: 1;
  }

  #proof .ownership-compare .om-owners__row--head > span:nth-child(2) {
    grid-column: 2;
  }

  #proof .ownership-compare .om-owners__row--head > span:nth-child(3) {
    grid-column: 3;
  }

  #proof .ownership-compare .om-owners__service {
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    color: var(--navy-900);
    font-size: clamp(0.68rem, 2.8vw, 0.8rem);
    line-height: 1.2;
    text-align: center;
  }

  #proof .ownership-service__icon {
    width: 2.45rem;
    height: 2.45rem;
  }

  #proof .ownership-compare .om-owners__decision,
  #proof .ownership-compare .om-owners__answer {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    color: #566173;
    font-size: clamp(0.62rem, 2.6vw, 0.76rem);
    line-height: 1.3;
  }

  #proof .ownership-compare .om-owners__decision,
  #proof .ownership-compare .om-owners__answer {
    padding-inline: 0.7rem;
  }

  #proof .ownership-compare .om-owners__decision::before,
  #proof .ownership-compare .om-owners__answer::before {
    display: none;
  }

  #proof .ownership-compare .ownership-role {
    display: flex;
    width: 100%;
    min-height: 2.65rem;
    justify-self: stretch;
    padding: 0.35rem 0.3rem;
    border-radius: 0.45rem;
    font-size: clamp(0.59rem, 2.45vw, 0.72rem);
    line-height: 1.2;
    text-align: center;
  }

  #proof .ownership-compare .om-diagram__caption {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 6.25rem;
    margin-top: 2rem;
    padding: 1rem;
    grid-template-columns: 3.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    border: 1px solid #ccd9ea;
    border-radius: 0.7rem;
    background: #f7f9ff;
    color: var(--navy-900);
    font-size: clamp(0.83rem, 3.45vw, 0.96rem);
    line-height: 1.45;
  }

  #proof .ownership-caption__icon {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #0f8f78, #16b69a);
    color: #fff;
  }

  #proof .ownership-caption__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2.3;
  }
}

/* Reference-scale reporting path for tablet and desktop layouts. */
br.reporting-copy-break {
  display: none;
}

/* Legacy vertical reporting path override (superseded by the desktop horizontal restoration below).
@media (min-width: 56.01rem) {
  br.reporting-copy-break {
    display: block;
  }

  #proof .reporting-path-shell {
    display: flex;
    width: min(100% - 7rem, 59rem);
    max-width: 59rem;
    padding-block: 1.75rem;
    flex-direction: column;
  }

  #proof .reporting-path-shell > .section-heading {
    order: 1;
    max-width: 50rem;
    margin: 0 auto 2.2rem;
  }

  #proof .reporting-path-shell > .section-heading .eyebrow {
    margin-bottom: 1.4rem;
    font-size: 0.9rem;
    letter-spacing: 0.22em;
  }

  #proof .reporting-path-shell > .section-heading h2 {
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: 1.35rem;
    font-size: clamp(3rem, 6vw, 4.35rem);
    line-height: 1.03;
    text-wrap: wrap;
  }

  #proof .reporting-path-shell > .section-heading > p:last-child {
    max-width: 36rem;
    font-size: clamp(1.08rem, 2vw, 1.35rem);
    line-height: 1.75;
    text-wrap: wrap;
  }

  #proof .reporting-path-shell > .fabric-platform {
    order: 2;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #proof .reporting-path-shell .fabric-system {
    display: grid;
    min-width: 0;
    gap: 1.15rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  #proof .reporting-path-shell .fabric-phase-list {
    display: grid;
    overflow: hidden;
    margin: 0;
    padding: 0;
    gap: 0;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #d2dce6;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 0.8rem 2.2rem rgba(0, 37, 75, 0.06);
  }

  #proof .reporting-path-shell .fabric-phase {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    min-height: 6.75rem;
    grid-column: auto;
    place-items: center;
    padding: 1rem;
    border: 0;
    border-radius: 0;
    background: #fff;
  }

  #proof .reporting-path-shell .fabric-phase + .fabric-phase {
    border-left: 0;
    padding-left: 2rem;
  }

  #proof .reporting-path-shell .fabric-phase:nth-child(1) { z-index: 3; }
  #proof .reporting-path-shell .fabric-phase:nth-child(2) { z-index: 2; }
  #proof .reporting-path-shell .fabric-phase:nth-child(3) { z-index: 1; }

  #proof .reporting-path-shell .fabric-phase:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -1.18rem;
    bottom: auto;
    left: auto;
    z-index: 3;
    display: block;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid #c8d4df;
    border-width: 1px 1px 0 0;
    background: #fff;
    content: "";
    transform: translateY(-50%) rotate(45deg);
  }

  #proof .reporting-path-shell .fabric-phase__heading {
    display: grid;
    min-height: 0;
    margin: 0;
    width: 100%;
    place-items: center;
    padding: 0;
    gap: 0.7rem;
    border: 0;
    background: transparent;
    font-size: 0.92rem;
    letter-spacing: 0.025em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
  }

  #proof .reporting-path-shell .fabric-phase__icon {
    width: 2.7rem;
    height: 2.7rem;
  }

  #proof .reporting-path-shell .fabric-phase__icon svg {
    width: 2.45rem;
    height: 2.45rem;
  }

  #proof .reporting-path-shell .fabric-service-list {
    display: grid;
    overflow: visible;
    margin: 0;
    padding: 0;
    gap: 1.15rem;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  #proof .reporting-path-shell .fabric-service {
    position: relative;
    display: grid;
    width: 100%;
    height: auto;
    min-height: 9rem;
    margin: 0 !important;
    padding: 1.25rem 2.75rem 1.25rem 1.65rem;
    align-items: center;
    gap: 0.35rem 1.2rem;
    grid-template-areas:
      "index icon name handover"
      "index icon note handover";
    grid-template-columns: 4.6rem 4.25rem minmax(0, 1fr) 12.5rem;
    grid-template-rows: auto auto;
    border: 1px solid #d7e0e8;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 0.75rem 2.2rem rgba(0, 37, 75, 0.055);
    text-align: left;
  }

  #proof .reporting-path-shell .fabric-service--organise {
    background: linear-gradient(90deg, #f1fbf9, #fff 72%);
  }

  #proof .reporting-path-shell .fabric-service--decide {
    background: linear-gradient(90deg, #fff8ee, #fff 72%);
  }

  #proof .reporting-path-shell .fabric-service__index {
    display: grid;
    width: 4.4rem;
    height: 4.4rem;
    grid-area: index;
    place-items: center;
    align-self: center;
    border-radius: 50%;
    background: var(--navy-900);
    color: #fff;
    font-size: 1.45rem;
    font-weight: 800;
  }

  #proof .reporting-path-shell .fabric-service--organise .fabric-service__index {
    background: var(--teal-600);
  }

  #proof .reporting-path-shell .fabric-service--decide .fabric-service__index {
    background: var(--amber-500);
    color: var(--navy-950);
  }

  #proof .reporting-path-shell .fabric-service__icon {
    width: 4rem;
    height: 4rem;
    grid-area: icon;
    align-self: center;
  }

  #proof .reporting-path-shell .fabric-service__icon svg {
    width: 3.5rem;
    height: 3.5rem;
  }

  #proof .reporting-path-shell .fabric-service__name {
    grid-area: name;
    align-self: end;
    justify-self: start;
    width: 100%;
    padding-left: 2.35rem;
    text-align: left;
    font-size: 1.48rem;
    line-height: 1.2;
  }

  #proof .reporting-path-shell .fabric-service__note {
    grid-area: note;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    padding-left: 2.35rem;
    font-size: 1.08rem;
    line-height: 1.5;
  }

  #proof .reporting-path-shell .fabric-service__handover {
    display: flex;
    min-height: 3.6rem;
    grid-area: handover;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    padding: 0.65rem 1rem;
    border: 2px solid currentColor;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--navy-900);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
  }

  #proof .reporting-path-shell .fabric-service--organise .fabric-service__name,
  #proof .reporting-path-shell .fabric-service--organise .fabric-service__icon,
  #proof .reporting-path-shell .fabric-service--organise .fabric-service__handover {
    color: var(--teal-600);
  }

  #proof .reporting-path-shell .fabric-service--decide .fabric-service__icon,
  #proof .reporting-path-shell .fabric-service--decide .fabric-service__handover {
    color: #d97706;
  }

  #proof .reporting-path-shell .fabric-service:not(:last-child)::after {
    position: absolute;
    top: auto;
    right: auto;
    bottom: -1.7rem;
    left: 50%;
    z-index: 4;
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border: 1px solid #d5dde5;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300254b' stroke-width%3D%274%27 stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8.5 6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 1.35rem 1.35rem;
    color: var(--navy-900);
    box-shadow: 0 0.35rem 0.9rem rgba(0, 37, 75, 0.08);
    content: "";
    font-size: 1.45rem;
    line-height: 1;
    transform: translateX(-50%);
  }

  #proof .reporting-path-shell .fabric-handover-rail {
    display: grid !important;
    margin: 0;
    padding: 1rem 0;
    gap: 0;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 8.5rem;
    border: 1px solid #d7e0e8;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 0.75rem 2.2rem rgba(0, 37, 75, 0.05);
  }

  #proof .reporting-path-shell .fabric-handover {
    position: relative;
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 0.5rem;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
  }

  #proof .reporting-path-shell .fabric-handover + .fabric-handover::before {
    position: absolute;
    top: 50%;
    left: -0.2rem;
    content: "›";
    font-size: 1.8rem;
    transform: translateY(-50%);
  }

  #proof .reporting-path-shell .fabric-handover__icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  #proof .reporting-path-shell .om-diagram__caption {
    margin: 1.15rem 0 0;
    padding: 1.1rem 1.5rem;
    border: 1px solid #d7e0e8;
    border-radius: 0.85rem;
    background: #f5f8fc;
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
  }

  #proof .reporting-path-shell > .section-actions {
    order: 3;
    width: 100%;
    margin-top: 1rem;
  }

  #proof .reporting-path-shell .section-actions .button {
    width: 100%;
    min-height: 4.4rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
  }

  #proof .reporting-path-shell > .proof-panel {
    order: 4;
    margin-top: 4rem;
  }
}
*/

/* Desktop-only horizontal reporting path restoration */
@media (min-width: 56.01rem) {
  #proof .reporting-path-shell {
    --reporting-stage-count: 5;
    display: flex;
    width: min(103.75rem, calc(100% - 4rem));
    max-width: none;
    margin-inline: auto;
    flex-direction: column;
  }

  #proof .reporting-path-shell .fabric-system,
  #proof .reporting-path-shell .fabric-phase-list,
  #proof .reporting-path-shell .fabric-service-list,
  #proof .reporting-path-shell .fabric-handover-rail {
    grid-template-columns: repeat(var(--reporting-stage-count), minmax(0, 1fr));
  }

  #proof .reporting-path-shell .fabric-system {
    gap: clamp(0.9rem, 1.2vw, 1.5rem) 0;
    grid-template-rows: auto minmax(clamp(16.5rem, 19vw, 22.75rem), auto) auto;
  }

  #proof .reporting-path-shell .fabric-phase-list {
    gap: 0;
    overflow: visible;
  }

  #proof .reporting-path-shell .fabric-phase {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #proof .reporting-path-shell .fabric-phase__heading {
    display: flex;
    min-height: clamp(3.35rem, 3.9vw, 4.6rem);
    margin: 0;
    padding: 0 1.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 0;
    border-radius: 0;
    background: var(--phase-accent);
    box-shadow: 0 0.4rem 1rem rgba(0, 37, 75, 0.12);
    color: var(--white);
    font-size: clamp(0.88rem, 0.72rem + 0.55vw, 1.28rem);
    letter-spacing: 0.025em;
    line-height: 1.15;
  }

  #proof .reporting-path-shell .fabric-phase:first-child .fabric-phase__heading {
    border-radius: 0.7rem 0 0 0.7rem;
  }

  #proof .reporting-path-shell .fabric-phase:last-child .fabric-phase__heading {
    border-radius: 0 0.7rem 0.7rem 0;
  }

  #proof .reporting-path-shell .fabric-phase--organise .fabric-phase__heading {
    background: var(--teal-600);
  }

  #proof .reporting-path-shell .fabric-phase--decide .fabric-phase__heading {
    background: var(--amber-500);
  }

  #proof .reporting-path-shell .fabric-phase__icon {
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    background: transparent;
    color: currentColor;
  }

  #proof .reporting-path-shell .fabric-phase__icon svg {
    width: 1.8rem;
    height: 1.8rem;
  }

  #proof .reporting-path-shell .fabric-phase:not(:last-child) {
    z-index: 2;
    margin-right: -0.85rem;
  }

  #proof .reporting-path-shell .fabric-phase:nth-child(1) { z-index: 3; }
  #proof .reporting-path-shell .fabric-phase:nth-child(2) { z-index: 2; }
  #proof .reporting-path-shell .fabric-phase:nth-child(3) { z-index: 1; }

  #proof .reporting-path-shell .fabric-phase:not(:last-child)::after {
    position: absolute;
    top: 0;
    right: -1.05rem;
    z-index: 3;
    display: block;
    width: 1.25rem;
    height: 100%;
    border: 0;
    background: var(--phase-accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    transform: none;
  }

  #proof .reporting-path-shell .fabric-phase--organise:not(:last-child)::after {
    background: var(--teal-600);
  }

  #proof .reporting-path-shell .fabric-phase--decide:not(:last-child)::after {
    background: var(--amber-500);
  }

  #proof .reporting-path-shell .fabric-phase.om-rail__phase--active:not(:last-child)::after {
    animation: none;
  }

  #proof .reporting-path-shell .fabric-service-list {
    column-gap: 1.25rem;
    row-gap: 0;
  }

  #proof .reporting-path-shell .fabric-service {
    height: auto;
    min-height: clamp(16.5rem, 19vw, 22.75rem);
    margin-left: 0;
    padding: clamp(1rem, 1.35vw, 1.55rem) clamp(0.7rem, 0.95vw, 1.2rem) clamp(1.05rem, 1.3vw, 1.45rem);
    gap: 0.65rem;
    grid-template-rows: auto clamp(2.75rem, 3vw, 3.5rem) minmax(2.2rem, auto) minmax(3rem, 1fr) auto;
    border: 1px solid #e0e8ef;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 0.75rem 1.8rem rgba(0, 37, 75, 0.1);
  }

  #proof .reporting-path-shell .fabric-service__index {
    width: clamp(2.8rem, 3vw, 3.5rem);
    height: clamp(2.8rem, 3vw, 3.5rem);
    font-size: clamp(0.9rem, 0.9rem + 0.3vw, 1.2rem);
  }

  #proof .reporting-path-shell .fabric-service__icon {
    width: clamp(2.9rem, 3.2vw, 3.5rem);
    height: clamp(2.9rem, 3.2vw, 3.5rem);
  }

  #proof .reporting-path-shell .fabric-service__icon svg {
    width: clamp(2.4rem, 2.7vw, 3rem);
    height: clamp(2.4rem, 2.7vw, 3rem);
  }

  #proof .reporting-path-shell .fabric-service__name {
    font-size: clamp(1rem, 0.85rem + 0.45vw, 1.35rem);
    line-height: 1.2;
  }

  #proof .reporting-path-shell .fabric-service__note {
    max-width: 24rem;
    font-size: clamp(0.86rem, 0.74rem + 0.32vw, 1.08rem);
    line-height: 1.35;
  }

  #proof .reporting-path-shell .fabric-service__handover {
    width: min(100%, 13.5rem);
    min-height: clamp(2.8rem, 3vw, 3.3rem);
    padding: 0.5rem 0.7rem;
    border: 2px solid currentColor;
    border-radius: 0.45rem;
    background: transparent;
    font-size: clamp(0.66rem, 0.58rem + 0.2vw, 0.86rem);
  }

  #proof .reporting-path-shell .fabric-service:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -2.15rem;
    z-index: 4;
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    border: 2px solid var(--white);
    border-radius: 50%;
    background-color: var(--navy-900);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width%3D%274%27 stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 1.25rem 1.25rem;
    content: "";
    transform: translateY(-50%);
  }

  #proof .reporting-path-shell .fabric-handover-rail {
    min-height: clamp(4.2rem, 4.5vw, 5rem);
    padding: 0.65rem 0;
    border: 1px solid #e0e8ef;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 0.65rem 1.6rem rgba(0, 37, 75, 0.07);
  }

  #proof .reporting-path-shell .fabric-handover {
    gap: 0.55rem;
    padding: 0.4rem;
    color: var(--navy-900);
    font-size: clamp(0.68rem, 0.6rem + 0.22vw, 0.88rem);
  }

  #proof .reporting-path-shell .fabric-handover__icon {
    width: clamp(2rem, 2.4vw, 2.65rem);
    height: clamp(2rem, 2.4vw, 2.65rem);
  }

  #proof .reporting-path-shell .om-diagram__caption {
    margin-top: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: clamp(0.85rem, 0.75rem + 0.2vw, 1rem);
    line-height: 1.45;
    text-align: center;
  }

  #proof .reporting-path-shell > .section-heading h2 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(3rem, 3.4vw, 4.2rem);
    line-height: 1.05;
    text-wrap: balance;
  }

  #proof .reporting-path-shell > .section-heading > p:last-child {
    max-width: 75rem;
    margin-inline: auto;
    font-size: clamp(1rem, 0.88rem + 0.35vw, 1.3rem);
    line-height: 1.45;
  }

  @media (min-width: 78.01rem) {
    #proof .reporting-path-shell {
      width: min(112rem, calc(100% - 7rem));
    }
  }

  #proof .reporting-path-shell > .section-heading {
    order: 1;
    margin-inline: auto;
  }

  #proof .reporting-path-shell > .fabric-platform {
    order: 2;
  }

  #proof .reporting-path-shell > .section-actions {
    order: 3;
    width: 100%;
    margin-top: 1rem;
  }

  #proof .reporting-path-shell .section-actions .button {
    width: 100%;
    min-height: 4.4rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
  }

  #proof .reporting-path-shell > .proof-panel {
    order: 4;
    margin-top: 4rem;
  }
}
/* End desktop-only horizontal reporting path restoration */

/* Mobile-only scroll-led campaign motion. */
@media (max-width: 48rem) {
  #impact .is-mobile-stagger [data-mobile-stagger-item] {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #impact .is-mobile-stagger.is-mobile-revealed [data-mobile-stagger-item].is-revealed {
    opacity: 1;
    transform: none;
  }

  #impact .is-mobile-stagger [data-mobile-stagger-item]:nth-child(2) { transition-delay: 80ms; }
  #impact .is-mobile-stagger [data-mobile-stagger-item]:nth-child(3) { transition-delay: 160ms; }
  #impact .is-mobile-stagger [data-mobile-stagger-item]:nth-child(4) { transition-delay: 240ms; }

  #impact .is-mobile-stagger.is-mobile-revealed .impact-mobile-gauge.is-revealed .impact-mobile-gauge__ring {
    animation: mobile-impact-gauge-enter 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .is-mobile-service-sequence .fabric-service {
    opacity: 0;
    transform: translateY(0.75rem);
    animation: none !important;
    transition: opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 260ms ease;
  }

  .is-mobile-service-sequence .fabric-service.is-revealed {
    opacity: 1;
    transform: none;
  }

  #proof .reporting-path-shell.is-mobile-service-sequence .fabric-service:not(:last-child)::after,
  #proof .reporting-path-shell .is-mobile-service-sequence .fabric-service:not(:last-child)::after {
    border-width: 2px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300254b' stroke-width%3D%274%27 stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8.5 6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 1.4rem 1.4rem;
    content: "";
  }

  .is-mobile-service-sequence .fabric-service.is-connector-active:not(:last-child)::after {
    animation: mobile-connector-forward 360ms ease-out both;
  }
}

@keyframes mobile-impact-gauge-enter {
  from { opacity: 0.35; transform: rotate(-10deg) scale(0.9); }
  to { opacity: 1; transform: rotate(-4deg) scale(1); }
}

@keyframes mobile-connector-forward {
  0% { border-color: #d5dde5; box-shadow: 0 0.35rem 0.9rem rgba(0, 37, 75, 0.08); }
  55% { border-color: var(--mint-400); box-shadow: 0 0 0 0.35rem rgba(0, 203, 153, 0.16); }
  100% { border-color: var(--teal-600); box-shadow: 0 0.35rem 0.9rem rgba(0, 37, 75, 0.12); }
}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  #impact .is-mobile-stagger [data-mobile-stagger-item],
  #impact .is-mobile-stagger.is-mobile-revealed .impact-mobile-gauge.is-revealed .impact-mobile-gauge__ring,
  .is-mobile-service-sequence .fabric-service,
  .is-mobile-service-sequence .fabric-service.is-connector-active:not(:last-child)::after {
    animation: none !important;
    transition: none !important;
  }
}

.booking-goal-mobile-wrapper {
  display: contents;
}

/* Mobile conversion simplification */
@media (max-width: 48rem) {
  #details,
  .nav-link--details,
  #booking .mobile-form-secondary {
    display: none !important;
  }

  #offer .section-heading {
    text-align: center;
  }

  #offer .section-heading > p:last-child {
    margin-inline: auto;
  }

  #offer .course-card {
    justify-items: center;
    text-align: center;
  }

  #offer .course-card__topline {
    justify-content: center;
  }

  #offer .course-card__promise,
  #offer .course-card__bestfor {
    max-width: 28rem;
  }

  #offer .course-card__highlights {
    width: min(100%, 18rem);
    justify-self: center;
    text-align: left;
  }

  #offer .course-card__details {
    width: 100%;
  }

  #offer .course-card__details summary {
    justify-content: center;
  }

  #offer .course-card__price,
  #offer .course-card__anchor {
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  #booking .booking-shell {
    gap: 1.5rem;
  }

  #booking .booking-intro .section-heading,
  #booking .booking-form__header {
    justify-content: center;
    text-align: center;
  }

  #booking .booking-assurance {
    justify-content: center;
  }

  #booking .form-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  #booking .form-grid > label,
  #booking .select-field {
    text-align: left;
  }

  #booking .booking-form__notice,
  #booking .form-note {
    text-align: center;
  }
}
/* End mobile conversion simplification */

/* Simplified Power BI enquiry form: one calm, progressive form for individuals
   and teams. These selectors stay inside the booking section so the shared
   form, field and select styles remain available elsewhere on the page. */
#booking .booking-form {
  min-width: 0;
}

#booking .booking-step {
  min-width: 0;
  margin: 0;
  padding: 0 0 1.35rem;
  border: 0;
  border-bottom: 1px solid rgba(0, 37, 75, 0.12);
}

#booking .booking-step + .booking-step {
  padding-top: 1.35rem;
}

#booking .booking-step legend {
  width: 100%;
  margin-bottom: 0.8rem;
  padding: 0;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#booking .booking-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}

#booking .booking-mode-option,
#booking .booking-course-choice {
  position: relative;
  display: grid;
  min-width: 0;
  align-items: center;
  border: 1px solid #b7c8d2;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#booking .booking-mode-option {
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 800;
}

#booking .booking-mode-option:has(input:checked),
#booking .booking-course-choice:has(input:checked) {
  border-color: var(--teal-600);
  background: #edf8f5;
  box-shadow: inset 0 0 0 1px rgba(22, 160, 133, 0.15);
}

#booking .booking-mode-option:hover,
#booking .booking-course-choice:hover {
  border-color: var(--teal-600);
  transform: translateY(-1px);
}

#booking .booking-mode-option input,
#booking .booking-course-choice input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--teal-600);
}

#booking .booking-mode-option:focus-within,
#booking .booking-course-choice:focus-within {
  outline: 3px solid rgba(0, 203, 153, 0.22);
  outline-offset: 2px;
}

#booking .booking-contact-grid,
#booking .booking-team-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

#booking .booking-team-fields[hidden] {
  display: none !important;
}

#booking .booking-contact-grid label,
#booking .booking-team-fields label,
#booking .booking-question label {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

#booking .booking-contact-grid input,
#booking .booking-team-fields input,
#booking .booking-question textarea {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #b7c5ce;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}

#booking .booking-contact-grid input:focus-visible,
#booking .booking-team-fields input:focus-visible,
#booking .booking-question textarea:focus-visible {
  border-color: var(--teal-600);
  outline: 3px solid rgba(0, 203, 153, 0.22);
  outline-offset: 2px;
}

#booking .booking-form__hint {
  margin: -0.25rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

#booking .booking-form__price-note {
  margin: 1rem 0 1.15rem;
}

#booking .booking-course-choices {
  display: grid;
  gap: 0.55rem;
}

#booking .booking-course-choice {
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.7rem;
  min-height: 3.55rem;
  padding: 0.68rem 0.85rem;
}

#booking .booking-course-choice span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

#booking .booking-course-choice strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.3;
}

#booking .booking-course-choice small {
  color: #537082;
  font-size: 0.74rem;
  line-height: 1.35;
}

#booking .booking-step--dates[hidden] {
  display: none !important;
}

#booking .booking-date-instruction,
#booking .booking-timing-note,
#booking .booking-date-message {
  margin: 0;
  color: #537082;
  font-size: 0.78rem;
  line-height: 1.5;
}

#booking .booking-date-instruction {
  margin-bottom: 0.65rem;
  color: var(--ink);
  font-weight: 800;
}

#booking .booking-date-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

#booking .booking-date-choice {
  position: relative;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.7rem;
  min-height: 3.5rem;
  align-items: center;
  padding: 0.72rem 0.82rem;
  border: 1px solid #b7c8d2;
  border-radius: 0.55rem;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

#booking .booking-date-choice span {
  display: grid;
  gap: 0.12rem;
}

#booking .booking-date-choice strong {
  font-size: 0.82rem;
  line-height: 1.3;
}

#booking .booking-date-choice small {
  color: #537082;
  font-size: 0.72rem;
  line-height: 1.35;
}

#booking .booking-date-choice input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--teal-600);
}

#booking .booking-date-choice:has(input:checked) {
  border-color: var(--teal-600);
  background: #edf8f5;
  box-shadow: inset 0 0 0 1px rgba(22, 160, 133, 0.15);
}

#booking .booking-date-choice:focus-within {
  outline: 3px solid rgba(0, 203, 153, 0.22);
  outline-offset: 2px;
}

#booking .booking-date-choice--full {
  background: #f2f4f5;
  color: #52606b;
  cursor: not-allowed;
}

#booking .booking-date-choice--full input {
  opacity: 0.7;
}

#booking .booking-timing-note {
  margin-top: 0.7rem;
}

#booking .booking-date-message {
  padding: 0.85rem;
  border: 1px solid rgba(0, 37, 75, 0.14);
  border-radius: 0.55rem;
  background: #f8fbfc;
  color: var(--ink);
  font-weight: 700;
}

#booking .booking-location {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: baseline;
  padding: 0.9rem 0;
  color: var(--muted);
  font-size: 0.78rem;
}

#booking .booking-location span {
  font-weight: 800;
}

#booking .booking-location strong {
  color: var(--ink);
  font-size: 0.8rem;
}

#booking .booking-question {
  border-top: 1px solid rgba(0, 37, 75, 0.1);
  padding: 1rem 0 1.15rem;
}

#booking .booking-question summary {
  color: var(--navy-900);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  list-style-position: outside;
}

#booking .booking-question summary span {
  color: var(--muted);
  font-weight: 500;
}

#booking .booking-question[open] summary {
  margin-bottom: 0.8rem;
}

#booking .booking-question textarea {
  min-height: 6rem;
  resize: vertical;
}

#booking .booking-form__notice {
  align-items: flex-start;
  margin-top: 1.15rem;
}

#booking .booking-form__notice > span:not(:first-child) {
  display: block;
  width: auto;
  height: auto;
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

#booking .booking-form__notice a {
  color: var(--navy-900);
  font-weight: 800;
}

#booking .booking-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

#booking .booking-form__notice[hidden] {
  display: none;
}

@media (max-width: 64rem) {
  #booking .booking-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  #booking .booking-intro {
    position: static;
  }
}

@media (max-width: 48rem) {
  #booking [data-team-group-size] {
    display: none !important;
  }

  #booking .booking-mode-options,
  #booking .booking-contact-grid,
  #booking .booking-team-fields,
  #booking .booking-date-choice-grid {
    grid-template-columns: 1fr;
  }

  #booking .booking-step {
    padding-bottom: 1.1rem;
  }

  #booking .booking-step + .booking-step {
    padding-top: 1.1rem;
  }

  #booking .booking-form {
    padding: 1.25rem;
  }

  #booking .booking-form__notice {
    align-items: flex-start;
    font-size: 0.74rem;
  }
}

@media (max-width: 28rem) {
  #booking .booking-form {
    padding: 1rem;
  }

  #booking .booking-mode-option,
  #booking .booking-course-choice,
  #booking .booking-date-choice {
    padding-inline: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #booking .booking-mode-option,
  #booking .booking-course-choice,
  #booking .booking-date-choice,
  #booking .booking-form__submit svg {
    transition: none;
  }
}

/* Mobile conversion polish */
.header-cta__mobile {
  display: none;
}

@property --mobile-gauge-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}

@media (max-width: 48rem) {
  .header-inner {
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .header-cta {
    display: inline-flex !important;
    min-width: 3.75rem;
    min-height: 44px;
    margin-inline-start: auto;
    padding: 0.55rem 0.85rem;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
  }

  .header-cta__mobile {
    display: inline;
  }

  .header-cta__desktop {
    display: none;
  }

  #booking .booking-shell {
    gap: 1rem;
  }

  #booking .booking-intro {
    position: static;
  }

  #booking .booking-intro .section-heading {
    gap: 0.45rem;
  }

  #booking .booking-intro .section-heading h2 {
    max-width: 18ch;
    margin-inline: auto;
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    line-height: 1.08;
  }

  #booking .booking-intro .section-heading > p:not(.eyebrow),
  #booking .booking-assurance,
  #booking .booking-path__body {
    display: none;
  }

  #booking .booking-paths {
    margin-top: 0.9rem;
  }

  #booking .booking-paths__label {
    margin-bottom: 0.45rem;
    text-align: center;
  }

  #booking .booking-paths__options {
    gap: 0.5rem;
  }

  #booking .booking-path {
    min-height: 44px;
    padding: 0.72rem 0.9rem;
    justify-items: center;
    text-align: center;
  }

  .is-mobile-service-sequence .fabric-service {
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease, box-shadow 200ms ease;
  }

  .is-mobile-service-sequence .fabric-service.is-connector-active:not(:last-child)::after {
    animation-duration: 200ms;
  }

  #impact .impact-mobile-gauge__ring {
    --mobile-gauge-progress: 0turn;
    background: conic-gradient(
      from 205deg,
      var(--navy-800) 0 var(--mobile-gauge-progress),
      rgba(0, 37, 75, 0.16) var(--mobile-gauge-progress) 0.91turn,
      transparent 0.91turn 1turn
    );
  }

  #impact .is-mobile-stagger.is-mobile-revealed .impact-mobile-gauge.is-revealed .impact-mobile-gauge__ring {
    animation: mobile-impact-gauge-fill 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  #offer .course-card__highlights {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    justify-self: center;
    text-align: left;
  }

  #offer .course-card--featured {
    padding: clamp(1.35rem, 5vw, 1.75rem);
    border-width: 2px;
    text-align: center;
    box-shadow: 0 1.25rem 2.8rem rgba(0, 37, 75, 0.18);
  }

  #offer .course-card--featured .course-card__topline {
    width: 100%;
    justify-content: center;
    gap: 0.4rem;
  }

  #offer .course-card--featured .course-card__level,
  #offer .course-card--featured .course-card__duration {
    text-align: center;
  }

  #offer .course-card--featured .course-card__promise,
  #offer .course-card--featured .course-card__bestfor,
  #offer .course-card--featured .course-card__highlights {
    margin-inline: auto;
  }
}

@keyframes mobile-impact-gauge-fill {
  from { --mobile-gauge-progress: 0turn; }
  to { --mobile-gauge-progress: 0.78turn; }
}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  #impact .impact-mobile-gauge__ring,
  #impact .is-mobile-stagger.is-mobile-revealed .impact-mobile-gauge.is-revealed .impact-mobile-gauge__ring {
    --mobile-gauge-progress: 0.78turn;
    animation: none !important;
  }
}
/* End mobile conversion polish */

.proof-strip__label-mobile,
.mobile-offer-cta {
  display: none;
}

/* Mobile narrow viewport bug fixes */
@media (max-width: 48rem) {
  body {
    min-width: 0;
  }

  #offer {
    scroll-margin-top: 1.5rem;
  }

  .proof-strip__label-short,
  .section-actions .desktop-proof-cta {
    display: none !important;
  }

  .proof-strip__label-mobile {
    display: inline;
  }

  .section-actions .mobile-offer-cta {
    display: inline-flex;
  }
}

@media (max-width: 22rem) {
  #outcomes .outcome-card {
    grid-template-columns: 3rem 3rem minmax(0, 1fr) 1.25rem;
  }
}
/* End mobile narrow viewport bug fixes */

/* Keep the desktop-only outcomes markers out of the mobile reading flow. */
#outcomes .outcomes-step__number,
#outcomes .outcomes-step__marker {
  display: none;
}

/* Desktop-only outcomes restoration */
@media (min-width: 56.01rem) {
  #outcomes .outcomes-layout {
    display: grid;
    width: min(104rem, calc(100% - 6rem));
    align-items: start;
    gap: clamp(2.5rem, 5vw, 6rem) clamp(3rem, 7vw, 7.5rem);
    grid-template-columns: minmax(20rem, 0.72fr) minmax(34rem, 1.28fr);
    grid-template-areas: "intro cards" "rail rail";
  }

  #outcomes .outcomes-layout > .section-heading {
    grid-area: intro;
    position: sticky;
    top: 7.5rem;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  #outcomes .outcomes-layout > .section-heading .eyebrow {
    justify-content: flex-start;
  }

  #outcomes .outcomes-layout > .section-heading h2 {
    max-width: 10.5ch;
    margin-inline: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
  }

  #outcomes .outcomes-layout > .section-heading h2::after {
    content: none;
  }

  #outcomes .outcomes-layout > .section-heading > p:last-child {
    max-width: 31rem;
    margin-inline: 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--mint-400);
  }

  #outcomes .outcomes-card-column {
    grid-area: cards;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #outcomes .outcomes-path--full {
    grid-area: rail;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #outcomes .outcomes-step__icon {
    display: none;
  }

  #outcomes .outcomes-path .fluent-step-list {
    --outcomes-list-padding-top: 1.35rem;
    --outcomes-marker-center: 5.625rem;
    position: relative;
    min-height: 13.5rem;
    margin: 0;
    overflow: hidden;
    padding: var(--outcomes-list-padding-top) 2rem 0.75rem;
    gap: 0;
    border: 1px solid rgba(0, 37, 75, 0.14);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #fbfcff, var(--surface));
  }

  #outcomes .outcomes-path .fluent-step-list::after {
    position: absolute;
    z-index: 0;
    top: calc(var(--outcomes-list-padding-top) + var(--outcomes-marker-center));
    right: 10%;
    left: 10%;
    border-top: 2px dashed #cbd5e1;
    content: "";
  }

  #outcomes .outcomes-step {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 0;
    align-content: start;
    justify-items: center;
    padding: 0.2rem 0.75rem 1.3rem;
    gap: 0.3rem;
    grid-template-rows: 3.25rem 2.55rem auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scroll-snap-align: center;
    text-align: center;
    transform: none;
  }

  #outcomes .outcomes-step + .outcomes-step {
    border-left: 0;
  }

  #outcomes .outcomes-step:first-child::before {
    display: none;
    content: none;
  }

  #outcomes .outcomes-step:not(:first-child)::before {
    position: absolute;
    z-index: 1;
    top: calc(var(--outcomes-marker-center) - 1px);
    bottom: auto;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--mint-400);
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #outcomes .outcomes-step.is-active:not(:first-child)::before {
    transform: scaleX(1);
  }

  #outcomes .outcomes-step__number {
    position: relative;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 50%;
    background: var(--navy-900);
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
  }

  #outcomes .outcomes-step__number::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 2.55rem;
    background: #94a3b8;
    content: "";
    transform: translateX(-50%);
  }

  #outcomes .outcomes-step__marker {
    position: relative;
    z-index: 2;
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    align-self: end;
    border: 3px solid var(--white);
    border-radius: 50%;
    background: #9aa8ba;
    box-shadow: 0 0 0 2px #cbd5e1;
  }

  #outcomes .outcomes-step strong {
    max-width: 9rem;
    color: var(--navy-900);
    font-size: clamp(0.9rem, 0.82rem + 0.25vw, 1.1rem);
    font-weight: 700;
    line-height: 1.2;
  }

  #outcomes .outcomes-step.is-active {
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  #outcomes .outcomes-step.is-active .outcomes-step__number {
    background: var(--navy-900);
    box-shadow: 0 0 0 0.25rem rgba(0, 37, 75, 0.08);
  }

  #outcomes .outcomes-step.is-active .outcomes-step__number::after {
    background: var(--navy-900);
  }

  #outcomes .outcomes-step.is-active .outcomes-step__marker {
    background: var(--mint-400);
    box-shadow: 0 0 0 2px var(--mint-400), 0 0 0 0.38rem var(--white);
  }

  #outcomes .outcomes-step.is-active strong {
    color: var(--ink);
  }
}

@media (min-width: 56.01rem) and (max-width: 78rem) {
  #outcomes .outcomes-layout {
    width: calc(100% - 3rem);
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(13rem, 0.68fr) minmax(0, 1.32fr);
  }
}

@media (min-width: 56.01rem) and (prefers-reduced-motion: reduce) {
  #outcomes .outcomes-step,
  #outcomes .outcomes-step::before,
  #outcomes .outcomes-step__number,
  #outcomes .outcomes-step__number::after,
  #outcomes .outcomes-step__marker {
    animation: none;
    transition: none;
  }
}
/* End desktop-only outcomes restoration */

/* Mobile practical-solution intro alignment */
@media (max-width: 48rem) {
  #outcomes .outcomes-layout > .section-heading {
    display: flex;
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #outcomes .outcomes-layout > .section-heading .eyebrow {
    justify-content: center;
  }

  #outcomes .outcomes-layout > .section-heading > p:last-child {
    margin-inline: auto;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }
}
/* End mobile practical-solution intro alignment */

/* Mobile approved journey polish */
@media (max-width: 48rem) {
  .mobile-hero-symbol svg {
    fill: none;
    stroke: #00254b;
  }

  .mobile-hero-symbol svg path:first-child {
    fill: #00254b;
  }
}
/* End mobile approved journey polish */

/* Desktop interaction and layout polish. Mobile composition remains governed by
   the existing max-width: 48rem rules above. */
.desktop-booking-topbar {
  display: none;
}

@media (min-width: 48.01rem) {
  #faq .faq-intro,
  #outcomes .outcomes-layout > .section-heading,
  #booking .booking-intro {
    position: static !important;
    top: auto;
  }

  #booking .booking-shell {
    align-items: start;
  }

  #booking .desktop-booking-topbar {
    display: flex;
    min-height: 3.05rem;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: calc(-1 * clamp(1.5rem, 4vw, 2.75rem)) calc(-1 * clamp(1.5rem, 4vw, 2.75rem)) 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--navy-900);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
  }

  #booking .desktop-booking-topbar svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
  }

  #booking .booking-form__header {
    display: none;
  }

  #booking .booking-team-fields--animating {
    will-change: height, opacity;
  }

  #proof .reporting-path-shell > .section-heading,
  #proof .reporting-path-shell > .fabric-platform,
  #proof .reporting-path-shell > .section-actions {
    width: min(80rem, calc(100% - 4rem));
    max-width: 80rem;
    margin-inline: auto;
  }

  #proof .reporting-path-shell > .section-actions {
    margin-top: 1.35rem;
  }

  #proof .reporting-path-shell > .section-actions .desktop-proof-cta {
    width: fit-content;
    min-width: 0;
    padding-inline: 2rem;
  }

  #details .proof-panel {
    grid-template-columns: minmax(0, 1.175fr) minmax(0, 2fr) minmax(0, 0.825fr);
  }

  #details .proof-panel > .proof-card--summary {
    display: none;
  }

  #details .proof-panel:has(> .proof-card--summary) {
    grid-template-columns: minmax(0, 1.175fr) minmax(0, 2fr);
  }

  #details .training-location > .training-location__cards,
  #details .training-location > .training-location__gallery {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer-closing,
  #booking .booking-team-fields--animating {
    animation: none !important;
    transition: none !important;
  }
}

/* End desktop interaction and layout polish */

/* Desktop campaign comment refinements. */
@media (min-width: 64.01rem) {
  #booking .contact-form::before {
    display: none;
  }

  #booking .booking-step > legend {
    width: 100%;
    margin-bottom: 1rem;
  }

  #booking .desktop-step-title {
    display: grid;
    grid-template-columns: 1.65rem 1.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    color: var(--navy-900);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
  }

  #booking .desktop-step-title > svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  #booking .desktop-step-number {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border: 1px solid var(--teal-600);
    border-radius: 50%;
    color: var(--teal-600);
    font-size: 0.85rem;
    font-weight: 650;
  }
}

/* Desktop business-impact reference composition. The wrapper remains
   layout-neutral below the desktop breakpoint so phone/tablet stay intact. */
.impact-desktop-proof {
  display: contents;
}

.impact-desktop-gauge {
  display: none;
}

.impact-card__icon {
  display: none;
}

@media (min-width: 64.01rem) {
  #impact {
    background:
      radial-gradient(circle at 92% 3%, rgba(0, 203, 153, 0.1), transparent 25%),
      linear-gradient(180deg, var(--surface), var(--white));
  }

  #impact .section-shell {
    width: min(76rem, calc(100% - 4rem));
    max-width: 76rem;
  }

  #impact .section-heading {
    max-width: 76rem;
    margin: 0 auto 1.25rem;
    padding: 2rem 2.5rem 1.75rem;
    border: 1px solid rgba(0, 37, 75, 0.08);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 37, 75, 0.07);
  }

  #impact .section-heading h2 {
    max-width: 25ch;
    margin: 0 auto 0.85rem;
    text-align: center;
  }

  #impact .section-heading > p:last-child {
    max-width: 66ch;
    margin: 0 auto;
    text-align: center;
  }

  #impact .impact-desktop-proof {
    display: grid;
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 1.75rem 2rem;
    border: 1px solid rgba(0, 37, 75, 0.08);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 37, 75, 0.07);
  }

  #impact .impact-desktop-gauge {
    display: grid;
    place-items: center;
    align-content: center;
    min-width: 0;
    text-align: center;
  }

  #impact .impact-desktop-gauge__ring {
    display: grid;
    width: min(16rem, 100%);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 205deg, var(--navy-950) 0 78%, #d9f5ef 78% 100%);
    box-shadow: inset 0 0 0 0.9rem var(--white);
  }

  #impact .impact-desktop-gauge__ring span {
    display: grid;
    width: 70%;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    color: var(--navy-950);
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.05em;
  }

  #impact .impact-desktop-gauge > p {
    margin: 0.55rem 0 0;
    color: var(--navy-800);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
  }

  #impact .impact-grid {
    display: grid;
    min-width: 0;
    margin: 0;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #impact .impact-card {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    grid-template-areas: "icon number" "icon label" "icon body";
    column-gap: 0.8rem;
    padding: 0.9rem 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 37, 75, 0.12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #impact .impact-card:last-child {
    border-bottom: 0;
  }

  #impact .impact-card::before {
    display: grid;
    width: 2.2rem;
    aspect-ratio: 1;
    place-items: center;
    grid-area: icon;
    align-self: start;
    border-radius: 50%;
    background: #d9f5ef;
    color: var(--teal-700);
    content: "↗";
    font-size: 1.1rem;
    font-weight: 800;
  }

  #impact .impact-card__number,
  #impact .impact-card__label,
  #impact .impact-card__body {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #impact .impact-card__number {
    grid-area: number;
    font-size: clamp(1.35rem, 1.05rem + 0.7vw, 2rem);
  }

  #impact .impact-card__label {
    grid-area: label;
    font-size: 0.76rem;
    line-height: 1.3;
  }

  #impact .impact-card__body {
    grid-area: body;
    max-width: 58ch;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  #impact .impact-outcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 1.75rem 2rem;
    border: 1px solid rgba(0, 37, 75, 0.08);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 37, 75, 0.07);
  }

  #impact .impact-outcome__copy h3 {
    margin-top: 0;
  }

  #impact .impact-outcome__panel {
    border: 1px solid rgba(0, 37, 75, 0.08);
    border-radius: 0.8rem;
    background: #f5f8fc;
    color: var(--navy-800);
    box-shadow: none;
  }

  #impact .impact-outcome__panel p {
    color: var(--navy-800);
  }

  #impact .impact-outcome__label {
    color: var(--navy-950);
  }

  #impact .impact-sources {
    border-top-color: rgba(0, 37, 75, 0.14);
  }

  #impact .impact-sources summary,
  #impact .impact-sources ul {
    color: var(--navy-800);
  }
}

@media (max-width: 64rem) {
  #booking .desktop-step-title {
    display: contents;
  }

  #booking .desktop-step-number,
  #booking .booking-step > legend .desktop-step-title > svg {
    display: none;
  }
}

/* Latest desktop reference pass: compact impact panel and course comparison.
   Everything here is opt-in above 64rem so the existing mobile composition
   remains the source of truth below the desktop breakpoint. */
.impact-desktop-top {
  display: contents;
}

.course-card__heading {
  display: contents;
}

.course-card__icon,
.course-choice-guide__icon {
  display: none;
}

.course-choice-guide__button-slot {
  display: none;
}

@media (min-width: 64.01rem) {
  #impact .section-shell {
    width: min(84rem, calc(100% - 4rem));
    max-width: 84rem;
  }

  #impact .impact-desktop-top {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(0, 37, 75, 0.08);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 37, 75, 0.07);
  }

  #impact .impact-desktop-top > .section-heading {
    max-width: none;
    margin: 0;
    padding: 1.1rem 1rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  #impact .impact-desktop-top > .section-heading .eyebrow {
    justify-content: flex-start;
  }

  #impact .impact-desktop-top > .section-heading h2 {
    max-width: 22ch;
    margin: 0 0 0.7rem;
    font-size: clamp(2rem, 1.5rem + 1.2vw, 3rem);
    text-align: left;
  }

  #impact .impact-desktop-top > .section-heading > p:last-child {
    max-width: 42ch;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
  }

  #impact .impact-desktop-top > .impact-desktop-proof {
    display: grid;
    grid-template-columns: minmax(7.5rem, 9rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #impact .impact-desktop-top .impact-desktop-gauge__ring {
    width: min(9rem, 100%);
    box-shadow: inset 0 0 0 0.55rem var(--white);
  }

  #impact .impact-desktop-top .impact-desktop-gauge {
    position: relative;
    width: 100%;
    justify-self: center;
    align-self: stretch;
    align-content: center;
  }

  #impact .impact-desktop-top .impact-desktop-gauge > p {
    position: absolute;
    inset: calc(50% + 5rem) 0 auto;
    width: 100%;
    margin: 0;
  }

  #impact .impact-desktop-top .impact-desktop-gauge__ring span {
    font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.3rem);
  }

  #impact .impact-desktop-top .impact-desktop-gauge > p {
    margin-top: 0.4rem;
    font-size: 0.65rem;
  }

  #impact .impact-desktop-top .impact-card {
    padding: 0.55rem 0;
  }

  #impact .impact-desktop-top .impact-card::before {
    width: 1.8rem;
  }

  #impact .impact-desktop-top .impact-card__number {
    font-size: clamp(1.25rem, 1rem + 0.55vw, 1.75rem);
  }

  #impact .impact-desktop-top .impact-card__label {
    font-size: 0.68rem;
  }

  #impact .impact-desktop-top .impact-card__body {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  #impact .impact-outcome {
    margin-top: 0;
  }

  #impact .impact-outcome__panel {
    border-color: rgba(255, 255, 255, 0.14);
    background: var(--navy-950);
    color: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1rem 2.5rem rgba(0, 37, 75, 0.18);
  }

  #impact .impact-outcome__panel p {
    color: rgba(255, 255, 255, 0.86);
  }

  #impact .impact-outcome__label {
    color: var(--mint-400);
  }

  #impact .impact-sources {
    border-top-color: rgba(255, 255, 255, 0.16);
  }

  #impact .impact-sources summary,
  #impact .impact-sources ul {
    color: rgba(255, 255, 255, 0.86);
  }

  #offer .section-shell {
    width: min(114rem, calc(100% - 5rem));
    max-width: 114rem;
  }

  #offer .course-choice-guide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.65rem;
  }

  #offer .course-choice-guide > strong {
    display: none;
  }

  #offer .course-choice-guide > strong,
  #offer .course-choice-guide > span {
    min-height: 4.2rem;
    padding: 0.7rem 0.85rem;
  }

  #offer .course-choice-guide > strong {
    display: none;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.25;
  }

  #offer .course-choice-guide > span {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    background: var(--white);
    font-size: 0.8rem;
  }

  #offer .course-choice-guide > span > span:last-child {
    display: grid;
    gap: 0.1rem;
  }

  #offer .course-choice-guide__icon {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 2.45rem;
    place-items: center;
    border: 1px solid rgba(22, 160, 133, 0.28);
    border-radius: 50%;
    color: var(--teal-600);
    font-size: 1.25rem;
  }

  #offer .course-choice-guide__icon svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  #offer .course-choice-guide > strong .course-choice-guide__icon {
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--white);
  }

  #offer .course-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
    align-items: stretch;
  }

  #offer .course-card {
    min-height: 37.5rem;
    padding: 1.4rem 1.5rem 1.5rem;
    border: 1px solid rgba(0, 37, 75, 0.12);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: 0 0.9rem 2.1rem rgba(0, 37, 75, 0.08);
  }

  #offer .course-card::before {
    height: 0;
    background: none;
  }

  #offer .course-card__topline {
    margin-bottom: 0.7rem;
  }

  #offer .course-card__heading {
    display: flex;
    min-height: 4.4rem;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #offer .course-card__icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    place-items: center;
    border: 2px solid var(--teal-600);
    border-radius: 0.65rem;
    color: var(--teal-600);
    font-size: 1.25rem;
    font-weight: 700;
  }

  #offer .course-card__icon svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  #offer .course-card h3 {
    min-height: 0;
    margin: 0;
    font-size: clamp(1.25rem, 1.05rem + 0.45vw, 1.6rem);
    line-height: 1.18;
  }

  #offer .course-card__promise {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    line-height: 1.4;
  }

  #offer .course-card__highlights li::before {
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    top: 0.15em;
    background: var(--teal-600);
    color: var(--white);
    content: "✓";
    font-size: 0.65rem;
    font-weight: 800;
  }

  #offer .course-card__price {
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem 0.65rem;
  }

  #offer .course-card__price::before {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 2.8rem;
    place-items: center;
    border-radius: 50%;
    background: #f1f4f7;
    color: var(--navy-900);
    content: "◇";
    font-size: 1.35rem;
  }

  #offer .course-card__select {
    min-height: 3.05rem;
    justify-content: center;
    border-color: var(--teal-600);
    border-radius: 0.65rem;
    background: var(--white);
    text-align: center;
  }

  #offer .course-card__select svg {
    margin-left: auto;
  }

  #offer .course-card--featured {
    padding-top: 3rem;
    border-color: var(--amber-500);
    background: linear-gradient(155deg, var(--navy-950), var(--navy-900));
  }

  #offer .course-card--featured::before {
    inset: 0.65rem 0.9rem auto;
    display: grid;
    width: auto;
    height: 1.75rem;
    place-items: center;
    border-radius: 0.25rem;
    background: var(--amber-500);
    color: var(--navy-950);
    content: "★  BEST VALUE · RECOMMENDED COMPLETE PATH";
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  #offer .course-card--featured .course-card__icon {
    border-color: var(--amber-500);
    color: var(--amber-500);
  }

  #offer .course-card--featured .course-card__price::before {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
  }

  #offer .course-card--featured .course-card__select {
    border-color: var(--amber-500);
    background: var(--amber-500);
  }

  #offer .course-choice-guide__button-slot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
    margin-top: 1rem;
  }

  #offer .course-choice-guide__button {
    display: inline-flex;
    min-height: 3.05rem;
    align-items: center;
    justify-content: center;
    grid-column: 4;
    padding: 0.75rem 1rem;
    border: 1px solid var(--navy-950);
    border-radius: 0.65rem;
    background: var(--navy-950);
    color: var(--white);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }
}

@media (min-width: 64.01rem) and (max-width: 78rem) {
  #offer .course-choice-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #offer .course-choice-guide > strong {
    grid-column: 1 / -1;
  }

  #offer .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #offer .course-choice-guide__button-slot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  #offer .course-choice-guide__button {
    grid-column: 2;
  }
}

@media (min-width: 78.01rem) {
  /* Align each problem choice with the course card it introduces. The
     heading remains the first-card-width anchor above the four equal tracks. */
  #offer .course-choice-guide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "beginner advanced super-user enablement";
    gap: 1.75rem;
    padding: 0;
  }

  #offer .course-choice-guide > span:nth-of-type(1) {
    grid-area: beginner;
  }

  #offer .course-choice-guide > span:nth-of-type(2) {
    grid-area: advanced;
  }

  #offer .course-choice-guide > span:nth-of-type(3) {
    grid-area: super-user;
  }

  #offer .course-choice-guide > span:nth-of-type(4) {
    grid-area: enablement;
  }
}

/* Keep the desktop 23x proof visually attached to its matching metric. The
   gauge remains inside the desktop-only proof markup, so the mobile proof
   composition remains untouched. */
@media (min-width: 64.01rem) {
  #impact .impact-desktop-top > .impact-desktop-proof {
    display: block;
    min-width: 0;
    grid-template-columns: none;
    gap: 0;
  }

  #impact .impact-card--customer-win {
    grid-template-columns: 7.5rem 1.8rem minmax(0, 1fr);
    grid-template-areas:
      "gauge icon number"
      "gauge icon label"
      "gauge icon body";
    column-gap: 0.8rem;
    align-items: center;
  }

  #impact .impact-card--customer-win .impact-desktop-gauge {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-area: gauge;
    align-self: stretch;
    align-content: center;
    justify-self: center;
    position: static;
    text-align: center;
    overflow: visible;
  }

  #impact .impact-card--customer-win .impact-desktop-gauge__ring {
    width: 7.5rem;
  }

  #impact .impact-card--customer-win .impact-desktop-gauge > p {
    position: static;
    inset: auto;
    width: auto;
    margin: 0.45rem 0 0;
    font-size: 0.65rem;
  }

  #impact .impact-card--customer-win .impact-card__number,
  #impact .impact-card--customer-win .impact-card__label,
  #impact .impact-card--customer-win .impact-card__body {
    grid-column: auto;
  }

  #impact .impact-card--data-risk::before,
  #impact .impact-card--data-quality::before,
  #impact .impact-card--speed::before {
    display: none;
  }

  #impact .impact-card--data-risk,
  #impact .impact-card--data-quality,
  #impact .impact-card--speed {
    grid-template-columns: 7.5rem 1.8rem minmax(0, 1fr);
    grid-template-areas:
      "icon . number"
      "icon . label"
      "icon . body";
    column-gap: 0.8rem;
  }

  #impact .impact-card--data-risk .impact-card__icon,
  #impact .impact-card--data-quality .impact-card__icon,
  #impact .impact-card--speed .impact-card__icon {
    display: grid;
    width: 7.5rem;
    aspect-ratio: 1;
    place-items: center;
    grid-area: icon;
    align-self: start;
    justify-self: center;
    border-radius: 50%;
    background: #e4f7f2;
    color: var(--navy-800);
  }

  #impact .impact-card--speed .impact-card__number {
    font-size: clamp(1rem, 0.85rem + 0.35vw, 1.3rem);
    line-height: 1.25;
  }

  #impact .impact-card--data-risk .impact-card__icon svg,
  #impact .impact-card--data-quality .impact-card__icon svg,
  #impact .impact-card--speed .impact-card__icon svg {
    width: 3rem;
    height: 3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
  }

  #offer .course-choice-guide__button {
    width: 100%;
  }
}

/* Feedback-aligned early training-path decision diagram */
.training-selector {
  position: relative;
  isolation: isolate;
  scroll-margin-top: 5rem;
  overflow: clip;
  background:
    radial-gradient(circle at 0 0, rgba(196, 219, 246, 0.58) 0, rgba(226, 239, 253, 0.34) 13rem, rgba(255, 255, 255, 0) 32rem),
    var(--white);
  --selector-amber: #f39c12;
}

.training-selector::before {
  position: absolute;
  top: 7rem;
  left: 0;
  z-index: -1;
  width: min(15rem, 30vw);
  height: 24rem;
  background-image: radial-gradient(rgba(0, 37, 75, 0.15) 1px, transparent 1.15px);
  background-size: 0.8rem 0.8rem;
  content: "";
  opacity: 0.52;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 0 50%, #000 0%, rgba(0, 0, 0, 0.76) 35%, transparent 74%);
  mask-image: radial-gradient(ellipse at 0 50%, #000 0%, rgba(0, 0, 0, 0.76) 35%, transparent 74%);
}

.training-selector .section-shell {
  position: relative;
  z-index: 1;
}

.booking-location-choice select {
  width: 100%;
  min-height: 3rem;
  margin-top: 0.35rem;
  padding: 0.75rem 2.5rem 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}

.training-selector .section-heading {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.training-selector__diagram {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-inline: auto;
}

.training-selector__hub {
  position: relative;
  z-index: 2;
  display: flex;
  height: 4.8rem;
  flex-direction: column;
  align-items: center;
}

.training-selector__hub-ring {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(0, 37, 75, 0.08);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 0.45rem rgba(0, 37, 75, 0.06), 0 0.4rem 1rem rgba(0, 37, 75, 0.08);
}

.training-selector__hub-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--teal-600);
  box-shadow: 0 0 0 0.3rem rgba(22, 160, 133, 0.16);
}

.training-selector__hub-chevron {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 0.35rem;
  place-items: center;
  border: 1px solid rgba(0, 37, 75, 0.12);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-900);
  box-shadow: 0 0.25rem 0.7rem rgba(0, 37, 75, 0.08);
}

.training-selector__hub-chevron svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.training-selector__rail {
  position: absolute;
  z-index: -1;
  top: 6.2rem;
  right: 12.5%;
  left: 12.5%;
  height: 2px;
  background: var(--navy-900);
  pointer-events: none;
}

.training-selector__rail::before {
  position: absolute;
  top: -1.4rem;
  left: 50%;
  width: 2px;
  height: 1.4rem;
  background: var(--navy-900);
  content: "";
  transform: translateX(-50%);
}

.training-selector__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.9rem;
}

.training-selector__grid a {
  position: relative;
  display: grid;
  min-height: 10.5rem;
  grid-template-columns: 3.8rem minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--body);
  text-decoration: none;
  box-shadow: 0 0.65rem 1.8rem rgba(0, 37, 75, 0.08);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.training-selector__grid a::before {
  position: absolute;
  top: -1.35rem;
  left: 50%;
  width: 2px;
  height: 1.35rem;
  background: var(--navy-900);
  content: "";
  transform: translateX(-50%);
}

.training-selector__grid a::after {
  position: absolute;
  top: -1.82rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border: 0.24rem solid var(--white);
  border-radius: 50%;
  background: var(--selector-amber);
  box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.28), 0 0.25rem 0.75rem rgba(0, 37, 75, 0.16);
  content: "";
  transform: translateX(-50%);
}

.training-selector__grid a:hover {
  border-color: var(--teal-600);
  box-shadow: 0 1rem 2.4rem rgba(0, 37, 75, 0.13);
  transform: translateY(-0.2rem);
}

.training-selector__grid a:focus-visible {
  z-index: 3;
  outline: 3px solid var(--mint-400);
  outline-offset: 3px;
}

.training-selector__card-icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin: 1.2rem 0 0 1.1rem;
  place-items: center;
  border-radius: 50%;
}

.training-selector__card-icon--green {
  background: #e3f5f0;
  color: var(--teal-600);
}

.training-selector__card-icon--amber {
  background: #fff4df;
  color: var(--selector-amber);
}

.training-selector__card-icon svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.training-selector__card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.35rem 1.1rem 1.1rem 0.75rem;
}

.training-selector__card-copy strong {
  color: var(--navy-950);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.15rem);
  line-height: 1.25;
}

.training-selector__card-copy > span {
  margin-top: auto;
  color: var(--body);
  font-size: 0.97rem;
  line-height: 1.55;
}

.training-selector__card-action {
  display: flex;
  min-height: 3.25rem;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--navy-900);
  color: var(--selector-amber);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.training-selector__card-action > span {
  flex: none;
  font-size: 1.15em;
  line-height: 1;
}

@media (min-width: 64.01rem) {
  .training-selector {
    padding: 4.5rem 0 3.5rem;
  }

  .training-selector .section-shell {
    width: min(105.5rem, calc(100% - 6rem));
  }

  .training-selector .section-heading {
    max-width: 60rem;
    margin-bottom: 0.25rem;
  }

  .training-selector .section-heading .eyebrow {
    margin-bottom: 2.35rem;
  }

  .training-selector .section-heading h2 {
    max-width: 52rem;
    margin: 0 auto 1.5rem;
    font-size: clamp(3rem, 1.5rem + 2.2vw, 4.15rem);
  }

  .training-selector__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
    margin-top: 1.25rem;
  }

  .training-selector__grid a {
    min-height: 17.2rem;
    height: 17.2rem;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    border-radius: 0.75rem;
  }

  .training-selector__hub {
    height: 6.8rem;
  }

  .training-selector__hub-chevron {
    margin-top: 2.35rem;
  }

  .training-selector__rail {
    top: 4rem;
    right: calc((100% - 5.25rem) / 8 - 1px);
    left: calc((100% - 5.25rem) / 8 - 1px);
    height: 4rem;
    border: 2px solid var(--navy-900);
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    background: none;
  }

  .training-selector__rail::before {
    top: -1rem;
    height: 1rem;
  }

  .training-selector__grid a::before {
    top: -4rem;
    height: 4rem;
  }

  .training-selector__grid a:first-child::before,
  .training-selector__grid a:last-child::before {
    display: none;
  }

  .training-selector__grid a::after {
    top: -1.15rem;
  }

  .training-selector__card-icon {
    width: 5rem;
    height: 5rem;
    margin: 1.25rem 0 0 1.75rem;
  }

  .training-selector__card-icon svg {
    width: 2.7rem;
    height: 2.7rem;
  }

  .training-selector__card-copy {
    gap: 0;
    padding: 2rem 1rem 1.35rem 1.35rem;
  }

  .training-selector__card-copy strong {
    display: flex;
    width: calc(100% + 1rem);
    height: 3.75rem;
    align-items: center;
    font-size: clamp(1.15rem, 1.02rem + 0.35vw, 1.4rem);
  }

  .training-selector__card-copy > span {
    width: auto;
    max-width: 19rem;
    margin-top: 1.6rem;
    margin-left: -6.3rem;
    font-size: 1.15rem;
    line-height: 1.55;
  }

  .training-selector__card-action {
    min-height: 3.8rem;
    border-radius: 0 0 0.75rem 0.75rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 64rem) {
  .training-selector__diagram {
    width: min(100%, 44rem);
  }

  .training-selector__rail {
    top: 4.8rem;
    right: auto;
    bottom: 1.3rem;
    left: 50%;
    width: 2px;
    height: auto;
    background: var(--navy-900);
  }

  .training-selector__rail::before {
    display: none;
  }

  .training-selector__grid {
    gap: 1.35rem;
    margin-top: 2.35rem;
  }

  .training-selector__grid a {
    min-height: 9.5rem;
  }
}

@media (max-width: 48rem) {
  .training-selector__grid {
    grid-template-columns: 1fr;
  }

  .training-selector__grid a {
    min-height: 8.75rem;
  }

  .training-selector__card-copy {
    padding-top: 1.15rem;
  }

  .training-selector__card-copy > span {
    font-size: 0.92rem;
  }

  .training-selector__card-action {
    min-height: 3rem;
    font-size: 0.84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .training-selector__grid a,
  .training-selector__rail {
    transition: none;
  }

  .training-selector__grid a:hover {
    transform: none;
  }
}


/* ==========================================================================
   Site footer - mirrors the onmodus.com parent footer.
   Structure and proportions follow the parent (navy field, logo + contact
   row, hairline rule, copyright opposite the legal links). Two deliberate
   departures, both to keep the campaign pages' own mobile guarantees:
   footer text holds 14px on phones instead of the parent's 13px (G5: no text
   below 14px at <=768px), and every footer link keeps a 44px touch target
   (G4). Desktop matches the parent's 13px.
   ========================================================================== */
.site-footer {
  padding: 2rem 1.25rem;
  border-top: 0;
  background: #00254b;
  color: #ffffff;
}

.footer-shell {
  width: min(80rem, 100%);
  margin-inline: auto;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}

.footer-logo {
  display: inline-flex;
  text-decoration: none;
}

.footer-logo img {
  width: clamp(11.875rem, 18vw, 17.5rem);
  height: auto;
}

.footer-contact {
  max-width: 35rem;
}

.footer-contact p {
  margin: 0;
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

.footer-contact a,
.footer-more a,
.footer-legal a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
}

.footer-contact a:hover,
.footer-more a:hover,
.footer-legal a:hover {
  text-decoration: underline;
}

.footer-contact a:focus-visible,
.footer-more a:focus-visible,
.footer-legal a:focus-visible,
.footer-logo:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-more {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-more__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copy {
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5rem;
}

@media (min-width: 48.01rem) {
  .site-footer {
    padding: 3rem;
  }

  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
  }

  .footer-more {
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
  }

  .footer-contact p,
  .footer-contact a,
  .footer-more a,
  .footer-legal a,
  .footer-copy {
    font-size: 0.8125rem;
  }

  .footer-contact a,
  .footer-more a,
  .footer-legal a {
    min-height: 0;
  }

  .footer-contact a {
    margin-top: 0.5rem;
  }

  .footer-legal {
    justify-content: flex-end;
    gap: 0 clamp(1.5rem, 3vw, 3rem);
  }

  .footer-legal a {
    white-space: nowrap;
  }
}


/* ==========================================================================
   Styled listbox (js/select-ui.js). The native <select> stays in the DOM and
   remains the submitted control; it is hidden from sight but kept focusable
   and zero-sized over the trigger so browser validation still anchors here.
   ========================================================================== */
.select-ui {
  position: relative;
  margin-top: 0.35rem;
}

.select-ui > select {
  position: absolute;
  bottom: 0;
  left: 1rem;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.select-ui__trigger {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.select-ui__trigger:hover {
  border-color: var(--teal-600);
}

.select-ui__trigger:focus-visible {
  outline: 3px solid var(--mint-400);
  outline-offset: 2px;
}

.select-ui.is-open .select-ui__trigger {
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.14);
}

.select-ui.is-invalid .select-ui__trigger {
  border-color: #c2402f;
}

.select-ui__trigger.is-placeholder .select-ui__value {
  color: var(--muted);
}

.select-ui__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-ui__chevron {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--navy-900);
  transition: transform 180ms ease;
}

.select-ui.is-open .select-ui__chevron {
  transform: rotate(180deg);
}

.select-ui__chevron svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.select-ui__list {
  /* Positioned by js/select-ui.js on <body>: the booking form clips overflow
     for its step slider, so an absolutely positioned panel would be cropped.
     The panel eases open and the options settle in behind it, so the list
     arrives rather than snapping. Transform origin follows the open direction
     (.is-up when it flips above the trigger). */
  position: fixed;
  z-index: 1300;
  max-height: 17rem;
  margin: 0;
  transform: translateY(-0.4rem) scaleY(0.96);
  transform-origin: top center;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  padding: 0.35rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 37, 75, 0.16);
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.select-ui__list.is-up {
  transform: translateY(0.4rem) scaleY(0.96);
  transform-origin: bottom center;
}

.select-ui__list.is-open {
  transform: none;
  opacity: 1;
}

.select-ui__option {
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 140ms ease;
  transition-delay: calc(70ms + var(--i, 0) * 26ms);
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  border-radius: calc(var(--radius-sm) - 1px);
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.35;
  cursor: pointer;
}

.select-ui__option--placeholder {
  color: var(--muted);
}

.select-ui__option.is-active {
  background: rgba(0, 37, 75, 0.08);
}

.select-ui__option.is-selected {
  color: var(--navy-900);
  font-weight: 600;
}

.select-ui__option.is-selected::after {
  margin-left: auto;
  padding-left: 0.75rem;
  color: var(--teal-600);
  content: "✓";
  font-weight: 700;
}

.select-ui__list.is-open .select-ui__option {
  opacity: 1;
  transform: none;
}

.select-ui__list.is-up .select-ui__option {
  transform: translateY(0.25rem);
}

.select-ui__list.is-up.is-open .select-ui__option {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .select-ui__trigger,
  .select-ui__chevron,
  .select-ui__list,
  .select-ui__option {
    transition: none;
    transition-delay: 0s;
  }

  .select-ui__list {
    transform: none;
  }
}

/* ==========================================================================
   Folded course cards on phones (js/offer-collapse.js).
   Level, duration, title, price and the choose button always stay visible -
   only the supporting copy folds. The base mobile grid order is untouched;
   this adds a "toggle" row beneath the price for the collapsible cards.
   ========================================================================== */
/* The toggle is injected for every collapsible card but only exists as a
   control on phones; desktop keeps all four cards fully open. */
.course-card__toggle {
  display: none;
}

.course-card__collapse-region {
  display: contents;
}

@media (max-width: 48rem) {
  #offer .course-card.is-collapsible {
    grid-template-areas:
      "topline"
      "title"
      "price"
      "toggle"
      "region"
      "select";
  }

  #offer .course-card__toggle {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    padding: 0.55rem 0.7rem;
    grid-area: toggle;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--navy-900);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
  }

  #offer .course-card__toggle:focus-visible {
    outline: 3px solid var(--mint-400);
    outline-offset: 2px;
  }

  #offer .course-card__toggle-icon {
    display: grid;
    flex: none;
    place-items: center;
    color: var(--teal-600);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  #offer .course-card__toggle-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  #offer .course-card.is-expanded .course-card__toggle-icon {
    transform: rotate(180deg);
  }

  #offer .course-card__collapse-region {
    display: grid;
    min-width: 0;
    grid-area: region;
    overflow: hidden;
  }

  #offer .course-card__collapse-region-inner {
    display: grid;
    min-width: 0;
  }

  #offer .course-card__collapse-region .course-card__promise,
  #offer .course-card__collapse-region .course-card__bestfor,
  #offer .course-card__collapse-region .course-card__highlights,
  #offer .course-card__collapse-region .course-card__details {
    grid-area: auto;
  }

  #offer .course-card.is-collapsed .course-card__collapse-region {
    height: 0;
  }

  #offer .course-card.is-collapsible {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #offer .course-card__toggle-icon {
    transition: none;
  }
}

/* Client feedback: the positioning statement that introduces the outcome list.
   "This is not tool training. It is capability building..." from the
   proof-evidence brief. */
.impact-positioning {
  margin: 0 0 0.9rem;
  color: var(--navy-950);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 64.01rem) {
  #impact .impact-positioning {
    max-width: 46ch;
    font-size: 0.98rem;
  }
}

/* September 2026 client revision: desktop hierarchy only. */
.hero-title__desktop,
.hero-payoff--desktop {
  display: none;
}

@media (min-width: 48.01rem) {
  .hero-course-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hero-title__desktop,
  .hero-payoff--desktop {
    display: block;
  }

  .hero-title__mobile {
    display: none;
  }

  .hero-payoff--desktop {
    max-width: 38rem;
    margin: 0.65rem 0 0;
    color: var(--mint-400);
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.4rem);
    font-weight: 700;
    line-height: 1.3;
  }

  .proof-strip {
    padding-block: clamp(0.7rem, 1.1vw, 1rem);
  }

  .proof-strip .proof-strip__link {
    display: none;
  }
}

.workflow-caption__desktop {
  display: none;
}

.impact-outcome__sources {
  display: grid;
  margin: 0.8rem 0 0;
  gap: 0.35rem;
}

.desktop-cta-copy {
  display: none;
}

@media (min-width: 48.01rem) {
  .desktop-cta-copy {
    display: inline;
  }

  .mobile-cta-copy {
    display: none;
  }

  .training-location-section--early .training-location {
    margin-top: 0;
  }

  .training-location-section--early .training-location > .location-marquee {
    display: block;
  }

  .training-location-section--early .training-location > .training-location__cards,
  .training-location-section--early .training-location > .training-location__gallery {
    display: none;
  }

  .booking-phone > .required-label {
    display: none;
  }

  .workflow-caption__desktop {
    display: inline;
  }

  .workflow-caption__mobile {
    display: none;
  }
}

/* Outcomes vertical scrollytelling — approved 2026-09-22 reference match. */
#outcomes.outcomes-scroll-story {
  --outcomes-navy: #00254b;
  --outcomes-teal: #16a085;
  --outcomes-mint: #00cb99;
  --outcomes-ink: #06152f;
  --outcomes-copy: #00254b;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(circle at 4% 12%, rgb(0 203 153 / 9%), transparent 22rem),
    radial-gradient(circle at 94% 16%, rgb(0 37 75 / 7%), transparent 25rem),
    linear-gradient(135deg, #ffffff 0%, #fbfeff 52%, #f4fbfb 100%);
}

#outcomes.outcomes-scroll-story::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto -16rem -13rem;
  width: 34rem;
  aspect-ratio: 1;
  border: 1px solid rgb(0 203 153 / 18%);
  border-radius: 50%;
  background: rgb(218 248 242 / 28%);
}

#outcomes .outcomes-layout {
  width: min(72rem, calc(100% - 2rem));
  max-width: none;
  margin-inline: auto;
}

#outcomes .outcomes-layout > .section-heading {
  max-width: 42rem;
  margin-inline: 0;
  text-align: left;
}

#outcomes .outcomes-layout > .section-heading .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  letter-spacing: 0.28em;
}

#outcomes .outcomes-layout > .section-heading .eyebrow::before {
  content: "";
  width: 2.35rem;
  height: 2px;
  background: var(--outcomes-mint);
}

#outcomes .outcomes-layout > .section-heading h2 {
  max-width: 9.5ch;
  margin-top: 1.5rem;
  color: var(--outcomes-ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(2.4rem, 6vw, 4.35rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

#outcomes .outcomes-layout > .section-heading h2::after {
  display: none;
}

#outcomes .outcomes-layout > .section-heading > p:last-child {
  max-width: 31rem;
  margin-top: 1.55rem;
  color: var(--outcomes-copy);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.62;
}

#outcomes .outcomes-path--full {
  display: none;
}

#outcomes .outcomes-card-column,
#outcomes .outcomes-card-window {
  width: 100%;
  max-width: none;
}

#outcomes .outcomes-card-window {
  height: auto;
  margin-top: 2.5rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-snap-type: none;
}

#outcomes .outcome-list {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
}

#outcomes .outcome-card {
  min-height: 7.25rem;
  padding: 1rem;
  grid-template-columns: 3.4rem 3.75rem minmax(0, 1fr) 3rem;
  gap: 0.85rem;
  overflow: hidden;
  border: 1px solid rgb(0 37 75 / 10%);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 1.1rem 2.8rem rgb(0 37 75 / 7%);
  opacity: 1;
  transform: none;
  scroll-snap-align: none;
  transition: border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease, transform 220ms ease;
}

#outcomes .outcome-card__index {
  color: var(--outcomes-navy);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

#outcomes .outcome-card__icon {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 0.85rem;
  color: var(--outcomes-teal);
  background: linear-gradient(145deg, rgb(0 203 153 / 14%), rgb(22 160 133 / 6%));
}

#outcomes .outcome-card__copy strong {
  color: var(--outcomes-ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

#outcomes .outcome-card__copy p {
  margin-top: 0.3rem;
  color: var(--outcomes-copy);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.96rem;
  line-height: 1.45;
}

#outcomes .outcome-card__chevron {
  display: grid;
  width: 2.9rem;
  min-width: 2.9rem;
  height: 2.9rem;
  min-height: 2.9rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--outcomes-navy);
  background: rgb(0 203 153 / 9%);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

#outcomes .outcome-card__chevron:hover {
  border-color: rgb(0 203 153 / 42%);
  background: rgb(0 203 153 / 16%);
  transform: translateX(2px);
}

#outcomes .outcome-card__chevron:focus-visible {
  outline: 3px solid rgb(0 203 153 / 35%);
  outline-offset: 3px;
}

#outcomes .outcome-card.is-active {
  border-color: var(--outcomes-mint);
  box-shadow: 0 1.2rem 3.2rem rgb(0 37 75 / 9%), 0 0 0 1px rgb(0 203 153 / 14%);
}

@media (min-width: 56.01rem) and (min-height: 44rem) {
  #outcomes.outcomes-scroll-story {
    min-height: max(78rem, 250svh);
    padding-block: 0;
  }

  #outcomes .outcomes-layout {
    position: sticky;
    top: 4.25rem;
    display: grid;
    width: min(96rem, calc(100% - 4rem));
    /* The pinned block has to be shorter than the viewport by more than the
       sticky top offset, otherwise it unpins the moment stage 05 lands and the
       whole story slides away. At 100svh - 5.25rem that margin was 16px; this
       buys a real hold on the last stage before the section releases. */
    min-height: calc(100svh - 16rem);
    grid-template-columns: minmax(19rem, 0.72fr) minmax(4.75rem, 0.19fr) minmax(35rem, 1.55fr);
    grid-template-areas: "intro rail cards";
    --outcomes-col-gap: clamp(1.25rem, 2.4vw, 2.75rem);
    column-gap: var(--outcomes-col-gap);
    align-items: center;
    /* Single source of truth for the rail/card row rhythm. Both columns are
       five rows of this exact height and gap, so node N always lines up with
       card N regardless of viewport. */
    --outcomes-row-h: 7rem;
    --outcomes-row-gap: clamp(0.68rem, 1.1vh, 0.95rem);
  }

  #outcomes .outcomes-layout > .section-heading {
    position: static !important;
    grid-area: intro;
    align-self: center;
  }

  #outcomes .outcomes-layout > .section-heading h2 {
    font-size: clamp(3rem, 4.1vw, 4.6rem);
  }

  #outcomes .outcomes-path--full {
    display: block;
    grid-area: rail;
    width: 100%;
    min-width: 0;
    align-self: center;
    /* The rail is vertical here, so the mobile horizontal-scroll affordance
       only reserves a phantom scrollbar that shifts the centred nodes up. */
    overflow: visible;
  }

  #outcomes .outcomes-path .fluent-step-list {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, var(--outcomes-row-h));
    gap: var(--outcomes-row-gap);
    align-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  #outcomes .outcomes-path .fluent-step-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(var(--outcomes-row-h) / 2);
    bottom: calc(var(--outcomes-row-h) / 2);
    left: 50%;
    width: 2px;
    background: repeating-linear-gradient(to bottom, rgb(0 37 75 / 20%) 0 8px, transparent 8px 15px);
    transform: translateX(-50%);
  }

  #outcomes .outcomes-step {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 0;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    color: var(--outcomes-navy);
  }

  #outcomes .outcomes-step__icon,
  #outcomes .outcomes-step__marker,
  #outcomes .outcomes-step strong {
    display: none;
  }

  /* Leftover from the earlier horizontal rail: a solid stub hanging off every
     number, which dangled into empty space below node 05. */
  #outcomes .outcomes-step__number::after {
    display: none;
    content: none;
  }

  /* Brand-blue tie-line from each number across to its card. Anchored with
     left AND right rather than a guessed width, so it spans the real column
     gap at every viewport, and it starts at the circle's edge so it never
     runs under the node. Selectors mirror the old horizontal-rail ones so
     they override them outright. */
  #outcomes .outcomes-step:first-child::before,
  #outcomes .outcomes-step:not(:first-child)::before,
  #outcomes .outcomes-step.is-active:not(:first-child)::before {
    display: block;
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    bottom: auto;
    left: calc(50% + 2.25rem);
    right: calc(-1 * var(--outcomes-col-gap));
    width: auto;
    height: 2px;
    background: var(--outcomes-navy);
    opacity: 0.16;
    transform: translateY(-50%);
    transform-origin: center;
    transition: opacity 320ms ease, right 320ms ease;
  }

  #outcomes .outcomes-step.is-complete::before {
    opacity: 0.42;
  }

  /* The active card slides 0.32rem right, so its tie-line follows it across
     rather than leaving a visible break on the row being read. */
  #outcomes .outcomes-step.is-active::before,
  #outcomes .outcomes-step.is-active:not(:first-child)::before {
    right: calc((-1 * var(--outcomes-col-gap)) - 0.32rem);
    opacity: 1;
  }

  /* Each node draws the connector down to the next one and inks it mint once
     that stage is behind you. One row pitch long, minus the two node radii, so
     it meets the circles instead of running underneath them. */
  #outcomes .outcomes-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(50% + 2.25rem);
    left: 50%;
    width: 2px;
    height: calc(var(--outcomes-row-h) + var(--outcomes-row-gap) - 4.5rem);
    background: var(--outcomes-mint);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #outcomes .outcomes-step.is-complete::after {
    transform: translateX(-50%) scaleY(1);
  }

  @media (prefers-reduced-motion: reduce) {
    #outcomes .outcomes-step::after,
    #outcomes .outcomes-step::before {
      transition: none !important;
    }
  }

  /* Decorative corner circle removed on desktop at the client's request. */
  #outcomes.outcomes-scroll-story::after {
    display: none;
  }

  #outcomes .outcomes-step__number {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    place-items: center;
    border: 5px solid #f8fdfd;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(145deg, #00254b, var(--outcomes-navy));
    box-shadow: 0 0.75rem 1.8rem rgb(0 37 75 / 16%);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    opacity: 0.5;
    transition: opacity 220ms ease, box-shadow 220ms ease, transform 220ms ease, background-color 220ms ease;
  }

  #outcomes .outcomes-step.is-complete .outcomes-step__number {
    opacity: 0.82;
  }

  #outcomes .outcomes-step.is-active .outcomes-step__number {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgb(0 203 153 / 18%), 0 0.9rem 2rem rgb(0 37 75 / 22%);
  }

  #outcomes .outcomes-card-column {
    grid-area: cards;
    min-width: 0;
  }

  #outcomes .outcomes-card-window {
    margin-top: 0;
  }

  #outcomes .outcome-list {
    gap: var(--outcomes-row-gap);
    grid-auto-rows: var(--outcomes-row-h);
  }

  #outcomes .outcome-card {
    /* The shared row is the only thing that sets card height here. The base
       rule pins an explicit height that a mid-width media query drops to
       6.5rem, which left the card short inside its own row. */
    min-height: 0;
    height: 100%;
    padding: clamp(0.75rem, 1.2vh, 1rem) clamp(1rem, 1.5vw, 1.55rem);
    grid-template-columns: 4.25rem minmax(0, 1fr) 3.25rem;
    gap: clamp(1rem, 1.6vw, 1.7rem);
    align-items: center;
    border-color: rgb(0 37 75 / 9%);
    background: rgb(255 255 255 / 55%);
    box-shadow: none;
    /* Hierarchy comes from the card chrome, not from dimming the copy: at
       0.34 the body text measured 1.65:1 against white (AA needs 4.5:1). */
    opacity: 1;
    transform: translateX(0);
  }

  #outcomes .outcome-card:not(.is-active) .outcome-card__icon {
    opacity: 0.55;
  }

  #outcomes .outcome-card:not(.is-active) .outcome-card__chevron {
    opacity: 0.72;
  }

  #outcomes .outcome-card__index {
    display: none;
  }

  #outcomes .outcome-card__icon {
    width: 4.25rem;
    height: 4.25rem;
  }

  #outcomes .outcome-card__copy strong {
    font-size: clamp(1.15rem, 1.55vw, 1.55rem);
  }

  #outcomes .outcome-card__copy p {
    font-size: clamp(0.92rem, 1.08vw, 1.08rem);
  }

  #outcomes .outcome-card.is-complete {
    border-color: rgb(0 37 75 / 14%);
    background: rgb(255 255 255 / 78%);
    opacity: 1;
  }

  #outcomes .outcome-card.is-active {
    background: #ffffff;
    opacity: 1;
    transform: translateX(0.32rem);
  }
}

@media (min-width: 56.01rem) and (max-height: 43.99rem) {
  #outcomes .outcomes-path--full {
    display: none;
  }
}

@media (max-width: 40rem) {
  #outcomes .outcome-card {
    min-height: 0;
    grid-template-columns: 2.8rem minmax(0, 1fr) 2.9rem;
    padding: 1rem 0.9rem;
  }

  #outcomes .outcome-card__index {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.05rem;
  }

  #outcomes .outcome-card__icon {
    display: none;
  }

  #outcomes .outcome-card__copy {
    grid-column: 2;
  }

  #outcomes .outcome-card__chevron {
    grid-column: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  #outcomes .outcome-card,
  #outcomes .outcomes-step__number,
  #outcomes .outcome-card__chevron {
    transition: none !important;
  }

  #outcomes .outcome-card {
    opacity: 1 !important;
    transform: none !important;
  }

  #outcomes .outcomes-step__number {
    opacity: 1 !important;
  }
}

/* ============================================================
   UI pass — 2026-09-23
   Interaction + motion refinements. No palette values and no copy
   or pricing data are changed anywhere in this block.
   ============================================================ */

:root {
  --om-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --om-dur-fast: 180ms;
  --om-dur-base: 240ms;
  --om-dur-slow: 420ms;
}

/* ---------- Shared focus ring ---------- */

#offer .course-card__select:focus-visible,
.course-card__details summary:focus-visible,
.om-progress__bar:focus-visible {
  outline: 3px solid rgba(0, 203, 153, 0.55);
  outline-offset: 3px;
}

/* ---------- Offer cards ---------- */

@media (min-width: 56.01rem) {
  /* The reveal system owns `transform` only until the card is visible, so
     the lift takes over cleanly once it lands. */
  #offer .course-card {
    transition:
      transform var(--om-dur-base) var(--om-ease),
      box-shadow var(--om-dur-base) var(--om-ease),
      border-color var(--om-dur-base) var(--om-ease);
  }

  #offer .course-card:hover,
  #offer .course-card:focus-within {
    transform: translateY(-0.25rem);
    box-shadow: 0 1.6rem 3.2rem rgba(0, 37, 75, 0.16);
  }

  #offer .course-card--featured:hover,
  #offer .course-card--featured:focus-within {
    box-shadow: 0 2rem 3.8rem rgba(0, 37, 75, 0.3);
  }

  /* Keyboard users get the same read on which card they are inside. */
  #offer .course-card:focus-within {
    outline: 2px solid rgba(0, 203, 153, 0.5);
    outline-offset: 4px;
  }
}

/* Custom disclosure chevron, replacing the native triangle. */
.course-card__details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  list-style: none;
}

.course-card__details summary::-webkit-details-marker {
  display: none;
}

.course-card__details summary::after {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  opacity: 0.75;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform var(--om-dur-base) var(--om-ease);
}

.course-card__details[open] summary::after {
  transform: translateY(0.06rem) rotate(-135deg);
}

/* A ::details-content height animation was tried here and removed: in this
   engine the pseudo kept block-size:0 while open, so the panel's content
   overflowed onto the copy below it (237px on Power BI, 140px on Fabric).
   The native instant toggle is correct; only the chevron animates. */

/* Commercial facts settle in after the card lands. `both` fill plus an
   opacity floor keeps the price legible even if the animation never runs,
   and it is only armed once the reveal has actually fired. */
@keyframes om-fact-settle {
  from {
    opacity: 0.55;
    transform: translateY(0.35rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.js-reveal-ready #offer .course-card[data-reveal].is-visible .course-commercial-fact {
  animation: om-fact-settle var(--om-dur-slow) var(--om-ease) both;
}

.js-reveal-ready #offer .course-card[data-reveal].is-visible .course-commercial-fact--duration {
  animation-delay: 200ms;
}

.js-reveal-ready #offer .course-card[data-reveal].is-visible .course-commercial-fact--investment {
  animation-delay: 300ms;
}

/* ---------- Scroll progress ---------- */

.om-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.om-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-600), var(--mint-400));
  transform: scaleX(var(--om-progress, 0));
  transform-origin: left center;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #offer .course-card,
  .course-card__details summary::after {
    transition: none !important;
  }

  .js-reveal-ready #offer .course-card[data-reveal].is-visible .course-commercial-fact {
    animation: none !important;
  }

  #offer .course-card:hover,
  #offer .course-card:focus-within {
    transform: none !important;
  }
}

/* Bug fix: on the dark featured card the availability note inherited the
   light-theme body colour and landed at 1.43:1 against the navy. Reuses the
   same white the rest of that card's copy already uses (15.4:1). */
.course-card--featured .course-availability__message {
  color: rgba(255, 255, 255, 0.82);
}