/* ==========================================================================
   Insight Bay: Six Sigma and Project Management  ->  /six-sigma-project-management
   Page scoped system, built to sit beside aviation.css and space.css.

   ARCHITECTURE, identical to the Flight Theory page
   .sp-void   scoped --ib-* token override. Dark sections stay dark in both
              site themes, which is what gives the page its rhythm.
   .sp-sec    light sections, inheriting whatever theme the visitor chose.
   .sp-wide   1180px container, identical to the rest of the site.

   Where flight is horizon glow and cloud decks, this is the programme office
   and the quality lab at night: a bell curve under two hard limits, a chart
   that was never drawn, a schedule racing a launch window. Same brand, no new
   hues.

   Animated properties are transform and opacity only, plus the SVG
   attributes the live instrument has to redraw.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  Void sections: the same dusk palette as the sibling pages
   -------------------------------------------------------------------------- */

.sp-void {
  --ib-bg: #0A0C0D;
  --ib-bg-soft: #101314;
  --ib-bg-deep: #15181A;
  --ib-bg-hero-top: #0E1112;
  --ib-card-bg: #121516;
  --ib-ink: #F2EFE8;
  --ib-ink-soft: #C6C8C6;
  --ib-ink-muted: #878C8C;
  --ib-line: #262B2E;
  --ib-line-strong: #394044;
  --ib-accent: #E8845E;
  --ib-accent-ink: #E8845E;
  --ib-accent-ink-hover: #F19770;
  --ib-accent-hover: #F19770;
  --ib-accent-soft: #3A2820;
  --ib-gold: #D9B265;
  --ib-grid-line: rgba(242,239,232,.05);
  --sp-accent-text: #E8845E;
  --sp-on-accent: #17120F;
  --ib-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0.625rem 1.875rem -0.625rem rgba(0,0,0,.7);
  --ib-shadow-lg: 0 0.375rem 1.125rem rgba(0,0,0,.5), 0 1.875rem 3.75rem -1.25rem rgba(0,0,0,.8);

  position: relative;
  isolation: isolate;
  background: var(--ib-bg);
  color: var(--ib-ink);
  overflow: hidden;
  overflow: clip; /* clips the drifting decks like hidden, without becoming a scrollport, so sticky asides still stick */
}

.sp-page { --sp-ease: cubic-bezier(.22,.61,.21,1); }

/* --------------------------------------------------------------------------
   2  Layout and rhythm
   -------------------------------------------------------------------------- */

body.sp-page { margin: 0; }

.sp-wide { max-width: 73.75rem; margin-inline: auto; padding-inline: 1.25rem; }
.sp-sec  { padding-block: clamp(4.5rem, 9vh, 7rem); }
.sp-mt-1 { margin-top: 1.25rem; }
.sp-mt-2 { margin-top: 2.25rem; }
.sp-mt-3 { margin-top: 3.25rem; }

.sp-skip {
  position: absolute; left: -624.9375rem; top: 0; z-index: 999;
  padding: .8rem 1.2rem; background: var(--ib-ink); color: var(--ib-bg);
  border-radius: 0 0 0.75rem 0; font-weight: 600;
}
.sp-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3  Backdrop layers for void sections
   -------------------------------------------------------------------------- */

.sp-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* A warm floor glow, the lab's answer to the horizon */
.sp-sky {
  background:
    radial-gradient(120% 62% at 50% 118%, rgba(232,132,94,.30) 0%, rgba(232,132,94,.09) 42%, transparent 72%),
    radial-gradient(90% 50% at 78% 108%, rgba(217,178,101,.14) 0%, transparent 66%),
    linear-gradient(to bottom, #06080A 0%, #0A0C0D 46%, #0E1011 78%, #15120F 100%);
}
.sp-void--dawn .sp-sky {
  background:
    radial-gradient(130% 70% at 22% 116%, rgba(232,132,94,.28) 0%, rgba(232,132,94,.08) 46%, transparent 74%),
    linear-gradient(to bottom, #06080A 0%, #0A0C0D 52%, #120F0D 100%);
}

/* Two slow sheets of light, drifting in opposite directions */
.sp-deck { position: absolute; left: 0; right: 0; background-repeat: no-repeat; }
.sp-deck-a {
  top: 46%; height: 34%; width: 210%;
  background-image:
    radial-gradient(58% 100% at 16% 52%, rgba(242,239,232,.05) 0%, transparent 70%),
    radial-gradient(44% 92% at 50% 44%, rgba(242,239,232,.04) 0%, transparent 72%),
    radial-gradient(66% 100% at 84% 58%, rgba(232,132,94,.05) 0%, transparent 74%);
  animation: sp-drift-a 200s linear infinite alternate;
}
.sp-deck-b {
  top: 66%; height: 38%; width: 250%;
  background-image:
    radial-gradient(52% 100% at 26% 48%, rgba(242,239,232,.035) 0%, transparent 72%),
    radial-gradient(62% 100% at 68% 60%, rgba(217,178,101,.05) 0%, transparent 76%);
  animation: sp-drift-b 280s linear infinite alternate;
}
@keyframes sp-drift-a {
  from { transform: translate3d(-24%, var(--sp-py, 0px), 0); }
  to   { transform: translate3d(0%,   var(--sp-py, 0px), 0); }
}
@keyframes sp-drift-b {
  from { transform: translate3d(0%,   var(--sp-py2, 0px), 0); }
  to   { transform: translate3d(-18%, var(--sp-py2, 0px), 0); }
}

.sp-grain {
  opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 0.1875rem);
  mix-blend-mode: overlay;
}

/* Graph paper, very faint: the planner's grammar is the grid */
.sp-grid {
  opacity: .55;
  background-image:
    linear-gradient(to right, rgba(242,239,232,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,239,232,.035) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* Corner ticks, as on the sibling pages */
.sp-hud { color: rgba(242,239,232,.16); }
.sp-hud span { position: absolute; width: 1.375rem; height: 1.375rem; border: 0 solid currentColor; }
.sp-hud span:nth-child(1) { top: 1.625rem; left: 1.625rem;  border-top-width: 1px; border-left-width: 1px; }
.sp-hud span:nth-child(2) { top: 1.625rem; right: 1.625rem; border-top-width: 1px; border-right-width: 1px; }
.sp-hud span:nth-child(3) { bottom: 1.625rem; left: 1.625rem;  border-bottom-width: 1px; border-left-width: 1px; }
.sp-hud span:nth-child(4) { bottom: 1.625rem; right: 1.625rem; border-bottom-width: 1px; border-right-width: 1px; }

/* One long run chart across the hero, drawn once on load and never again */
.sp-trail { color: var(--ib-accent); }
.sp-trail svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-trail path { stroke-dasharray: 2600; stroke-dashoffset: 2600; }
.sp-trail.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 3.2s var(--sp-ease); }

/* --------------------------------------------------------------------------
   4  Type system
   -------------------------------------------------------------------------- */

.sp-page h1, .sp-page h2, .sp-page h3 { letter-spacing: -.03em; }

.sp-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.35rem);
  line-height: 1.04; font-weight: 800; letter-spacing: -.032em;
  margin: 1rem 0 0; max-width: 13ch;
}
.sp-accent { color: var(--sp-accent-text, var(--ib-accent)); }

.sp-chapter { max-width: 48.75rem; }
.sp-chapter h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 1.14; font-weight: 700; letter-spacing: -.022em; margin: .85rem 0 0;
}

.sp-num {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--ib-font-mono, ui-monospace, monospace);
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ib-ink-muted); font-weight: 500;
}
.sp-num b { color: var(--ib-accent-ink, var(--ib-accent)); font-weight: 500; }

.sp-lede {
  margin-top: 1.3rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.65; color: var(--ib-ink-soft); max-width: 58ch;
}
.sp-body { max-width: 62ch; color: var(--ib-ink-soft); line-height: 1.72; }
.sp-body p { margin: 0 0 1rem; }
.sp-body p:last-child { margin-bottom: 0; }
.sp-body p.sp-note { margin-top: 1.6rem; }

.sp-pull {
  margin: 2.5rem 0 0; padding-left: 1.5rem; border-left: 2px solid var(--ib-accent);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.35; letter-spacing: -.015em;
  color: var(--ib-ink); font-weight: 600; max-width: 27ch;
}

.sp-kicker {
  display: block; font-family: var(--ib-font-mono, monospace);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ib-accent-ink, var(--ib-accent));
}

.sp-note { font-size: .85rem; color: var(--ib-ink-muted); line-height: 1.6; margin-top: 1.4rem; }

/* --------------------------------------------------------------------------
   4b  Prose with a companion figure
   The reading column keeps its 62ch measure. The right column carries the
   figure the argument is about, the ledger, the record of the night, the
   grade ladder, and stays in view while the paragraphs scroll past it, so no
   section on the page runs text down one side and nothing down the other.
   -------------------------------------------------------------------------- */

.sp-prose {
  display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start; margin-top: 2.25rem;
}
.sp-prose .sp-body { max-width: none; }
.sp-prose > div > .sp-pull { max-width: none; }
.sp-prose--faq { grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 22.5rem); }
.sp-prose--faq .sp-faq { max-width: none; margin-top: 0; }
.sp-lessons .sp-prose { margin-top: 0; }
.sp-lessons .sp-prose .sp-lesson-head { max-width: none; }

.sp-aside { position: sticky; top: 5.75rem; display: grid; gap: 1.5rem; }
.sp-aside .sp-pull { margin-top: 0; max-width: none; font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.sp-aside .sp-note { margin-top: 1rem; }

.sp-figure {
  border: 1px solid var(--ib-line); border-radius: 1rem;
  background: var(--ib-card-bg); padding: 1.3rem 1.5rem 1.4rem;
}
.sp-figure-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--ib-line);
}
.sp-figure-head .sp-kicker { color: var(--ib-accent-ink, var(--ib-accent)); }
.sp-figure-head > span:last-child:not(.sp-kicker) {
  font-family: var(--ib-font-mono, monospace); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ib-ink-muted); white-space: nowrap;
}
.sp-figure > p { margin: 1rem 0 0; color: var(--ib-ink-soft); line-height: 1.65; font-size: .95rem; }
.sp-figure > p.sp-note { font-size: .86rem; color: var(--ib-ink-muted); }
.sp-figure .ib-btn { margin-top: 1.1rem; }
.sp-figure-foot {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--ib-line);
  font-size: .88rem; line-height: 1.6; color: var(--ib-ink-soft);
}
.sp-figure-foot p { margin: 0; }

/* The ledger: what a child is handed, and how each one is run */
.sp-ledger-list { list-style: none; margin: 0; padding: 0; }
.sp-ledger-list li {
  display: grid; grid-template-columns: 2.1rem 1fr; column-gap: .6rem; align-items: start;
  padding: .72rem 0; border-bottom: 1px solid var(--ib-line);
}
.sp-ledger-list i {
  grid-row: span 2; font-style: normal; font-family: var(--ib-font-mono, monospace);
  font-size: .68rem; letter-spacing: .1em; color: var(--ib-ink-muted); padding-top: .15rem;
}
.sp-ledger-list b { font-size: .97rem; font-weight: 600; letter-spacing: -.012em; color: var(--ib-ink); }
.sp-ledger-list span { grid-column: 2; font-size: .86rem; color: var(--ib-ink-muted); line-height: 1.45; margin-top: .12rem; }
.sp-tally { margin-top: 1rem; display: grid; gap: .55rem; }
.sp-tally div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sp-tally span {
  font-family: var(--ib-font-mono, monospace); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ib-ink-muted);
}
.sp-tally b { font-family: var(--ib-font-mono, monospace); font-size: 1.05rem; font-weight: 600; color: var(--ib-ink); letter-spacing: -.01em; white-space: nowrap; }
.sp-tally b.is-key { color: var(--ib-accent); }

/* The night: the teleconference, hour by hour, from the commission's record */
.sp-night-list { list-style: none; margin: 0; padding: 0; }
.sp-night-list li {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: .9rem; align-items: start;
  padding: .75rem 0; border-bottom: 1px solid var(--ib-line);
}
.sp-night-list li:last-child { border-bottom: 0; padding-bottom: .2rem; }
.sp-night-list time {
  font-family: var(--ib-font-mono, monospace); font-size: .72rem; letter-spacing: .1em;
  color: var(--ib-ink-muted); padding-top: .22rem; white-space: nowrap;
}
.sp-night-list li.is-hot time { color: var(--ib-accent); }
.sp-night-list p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ib-ink-soft); }
.sp-night-list p b { color: var(--ib-ink); font-weight: 600; }
.sp-night-list li.is-hot p b { color: var(--ib-accent); }

/* The ladder: what school hands a student each year, against the three stages.
   One continuous rail runs the height of the list; the stage names sit beside
   it where each stage begins, and the year the big project arrives is marked. */
.sp-ladder-list { position: relative; list-style: none; margin: 0; padding: 0; --sp-rail: calc(1.5rem + .7rem); }
.sp-ladder-list::before {
  content: ""; position: absolute; top: .3rem; bottom: .3rem; left: var(--sp-rail); width: 0.1875rem; border-radius: 2px;
  background: var(--ib-accent); opacity: .35;
}
.sp-ladder-list li {
  position: relative; display: grid; grid-template-columns: 1.5rem 5.1rem 1fr; column-gap: .7rem;
  align-items: start; padding: .6rem 0; border-bottom: 1px solid var(--ib-line);
}
.sp-ladder-list li:last-child { border-bottom: 0; }
.sp-ladder-list i {
  font-style: normal; font-family: var(--ib-font-mono, monospace); font-size: .78rem;
  color: var(--ib-ink); font-weight: 500; padding-top: .16rem;
}
.sp-ladder-list em {
  position: relative; font-style: normal; font-family: var(--ib-font-mono, monospace);
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ib-accent-ink, var(--ib-accent)); padding: .22rem 0 0 .85rem; min-height: 1.6rem;
}
.sp-ladder-list li.is-hot em::after {
  content: ""; position: absolute; left: -0.1875rem; top: .3rem; width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  background: var(--ib-accent); box-shadow: 0 0 0 3px var(--ib-card-bg);
}
.sp-ladder-list span { font-size: .88rem; line-height: 1.5; color: var(--ib-ink-soft); }
.sp-ladder-list li.is-hot span { color: var(--ib-ink); }
.sp-ladder-list li.is-hot span b { color: var(--ib-accent); font-weight: 600; }

/* The plans, listed once more where a deciding parent is reading */
.sp-dl-list { list-style: none; margin: .2rem 0 0; padding: 0; }
.sp-dl-list li { border-bottom: 1px solid var(--ib-line); }
.sp-dl-list li:last-child { border-bottom: 0; }
.sp-dl-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8rem 0; color: var(--ib-ink); text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  transition: color var(--ib-dur-1, .16s) ease;
}
.sp-dl-list a:hover { color: var(--ib-accent-ink, var(--ib-accent)); }
.sp-dl-list a span {
  font-family: var(--ib-font-mono, monospace); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ib-ink-muted); font-weight: 500; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5  Hero
   -------------------------------------------------------------------------- */

.sp-hero { padding-block: clamp(4.5rem, 11vh, 8rem) clamp(3rem, 7vh, 5rem); }
.sp-hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.sp-hero-eyebrow {
  font-family: var(--ib-font-mono, monospace);
  font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ib-ink-soft);
}
.sp-hero-sub { margin-top: 1.5rem; font-size: 1.08rem; line-height: 1.6; color: var(--ib-ink-soft); max-width: 40ch; }
.sp-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* The capability gauge: this page's answer to their attitude indicator.
   A process breathing under two fixed limits, a histogram filling itself one
   sample at a time, and three readouts computed from the curve on screen. */
.sp-gauge-wrap { width: 100%; max-width: 29.375rem; margin-inline: auto; }
.sp-gauge { position: relative; width: 100%; }
.sp-gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
.sp-g-frame   { fill: none; stroke: var(--ib-line-strong); stroke-width: 1; }
.sp-g-base    { stroke: rgba(242,239,232,.45); stroke-width: 1; }
.sp-g-grid    { stroke: rgba(242,239,232,.07); stroke-width: 1; }
.sp-g-curve   { fill: url(#spCurveGrad); stroke: rgba(242,239,232,.85); stroke-width: 1.2; stroke-linejoin: round; }
.sp-g-tail    { fill: var(--ib-accent); opacity: .55; }
.sp-g-spec    { stroke: var(--ib-accent); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sp-g-target  { stroke: rgba(242,239,232,.35); stroke-width: 1; stroke-dasharray: 1.5 3; }
.sp-g-sigtick { stroke: rgba(242,239,232,.28); stroke-width: 1; }
.sp-g-signum  { font-family: var(--ib-font-mono, monospace); font-size: 6.5px; fill: var(--ib-ink-muted); text-anchor: middle; letter-spacing: .04em; }
.sp-g-bar     { fill: rgba(242,239,232,.22); }
.sp-g-bar.is-out { fill: var(--ib-accent); opacity: .8; }
.sp-g-dot     { fill: rgba(242,239,232,.9); }
.sp-g-dot.is-out { fill: var(--ib-accent); }
.sp-g-txt     { font-family: var(--ib-font-mono, monospace); font-size: 8.5px; fill: var(--ib-ink-muted); letter-spacing: .12em; }
.sp-g-val     { font-family: var(--ib-font-mono, monospace); font-size: 13px; fill: var(--ib-ink); letter-spacing: .04em; font-weight: 500; }
.sp-g-val.is-key { fill: var(--ib-accent); }
.sp-g-tape    { fill: rgba(10,12,13,.55); stroke: var(--ib-line); stroke-width: 1; }
.sp-g-lbl     { font-family: var(--ib-font-mono, monospace); font-size: 7.5px; fill: var(--ib-accent); letter-spacing: .14em; }
.sp-gc-a { stop-color: rgba(242,239,232,.16); }
.sp-gc-b { stop-color: rgba(242,239,232,.02); }
.sp-gauge-note {
  margin: 1.1rem 0 0; text-align: center; min-height: 1.1em;
  font-family: var(--ib-font-mono, monospace);
  font-size: .64rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ib-ink-muted); line-height: 1.6;
}

/* Facts strip, the hairline grid under the hero */
.sp-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; margin-top: 3.25rem;
  background: var(--ib-line); border: 1px solid var(--ib-line);
  border-radius: 0.875rem; overflow: hidden;
}
.sp-fact { background: var(--ib-bg); padding: 1.15rem 1.2rem; }
.sp-fact b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ib-ink); }
.sp-fact span {
  display: block; margin-top: .3rem; font-family: var(--ib-font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ib-ink-muted); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6  The scene: the chart that was never drawn, drawn by scrolling
   -------------------------------------------------------------------------- */

.sp-scene { position: relative; margin-top: 3rem; }
.sp-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.sp-sc-axis  { stroke: rgba(242,239,232,.4); stroke-width: .5; }
.sp-sc-grid  { stroke: rgba(242,239,232,.08); stroke-width: .4; }
.sp-sc-txt   { font-family: var(--ib-font-mono, monospace); font-size: 1.9px; fill: var(--ib-ink-muted); letter-spacing: .08em; }
.sp-sc-txt.is-acc { fill: var(--ib-accent); }
.sp-sc-cold  { stroke: rgba(217,178,101,.7); stroke-width: .5; stroke-dasharray: 1.2 1.2; }
.sp-sc-pt    { fill: rgba(242,239,232,.92); transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0;
               transition: transform .5s var(--sp-ease), opacity .4s ease; }
.sp-sc-pt.is-hot { fill: var(--ib-accent); }
.sp-sc-pt.is-on { transform: scale(1); opacity: 1; }
.sp-sc-launch { stroke: var(--ib-accent); stroke-width: .7; }
.sp-sc-launch-g { opacity: 0; transition: opacity .8s ease; }
.sp-sc-launch-g.is-on { opacity: 1; }
.sp-sc-cap {
  margin: .9rem 0 0; font-family: var(--ib-font-mono, monospace);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ib-ink-muted); line-height: 1.6;
}

/* --------------------------------------------------------------------------
   7  The nine disciplines grid: two rows of four, then two half-width cards
   -------------------------------------------------------------------------- */

.sp-fields {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; margin-top: 2.5rem;
  background: var(--ib-line); border: 1px solid var(--ib-line);
  border-radius: 1rem; overflow: hidden;
}
.sp-field { background: var(--ib-bg); padding: 1.5rem 1.5rem 1.6rem; transition: background var(--ib-dur-1, .16s) ease; }
.sp-field:hover { background: var(--ib-bg-soft); }
.sp-field--wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 1.5rem; align-items: start; }
.sp-field--wide .sp-field-top { grid-column: 1; }
.sp-field--wide h3 { margin-top: 0; }
.sp-field--wide p { max-width: 70ch; }
.sp-field-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-field-icon { color: var(--ib-accent); flex: 0 0 auto; }
.sp-field-icon svg { display: block; }
.sp-field-tag {
  font-family: var(--ib-font-mono, monospace);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ib-ink-muted);
}
.sp-field h3 { margin: 1rem 0 .4rem; font-size: 1.06rem; font-weight: 650; letter-spacing: -.018em; }
.sp-field p  { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ib-ink-soft); }

/* --------------------------------------------------------------------------
   8  Stage switch, stage panels and the timeline
   -------------------------------------------------------------------------- */

.sp-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.sp-sw {
  font-family: var(--ib-font-mono, monospace);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem 1rem; border-radius: 62.4375rem;
  border: 1px solid var(--ib-line-strong); background: transparent;
  color: var(--ib-ink-soft); cursor: pointer;
  transition: all var(--ib-dur-1, .16s) ease;
}
.sp-sw:hover { border-color: var(--ib-ink-muted); color: var(--ib-ink); }
.sp-sw[aria-selected="true"] { background: var(--ib-accent); border-color: var(--ib-accent); color: var(--sp-on-accent, #17120F); }
.sp-sw:focus-visible { outline: 2px solid var(--ib-accent); outline-offset: 2px; }

.sp-stage { margin-top: 2rem; }
.sp-stage[hidden] { display: none; }
.sp-stage-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.sp-stage-head h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.022em; }
.sp-stage-head p  { margin: .7rem 0 0; color: var(--ib-ink-soft); line-height: 1.7; max-width: 60ch; }
.sp-stage-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.sp-stage-stats div { border-top: 1px solid var(--ib-line-strong); padding-top: .85rem; }
.sp-stage-stats b { display: block; font-size: 1.15rem; letter-spacing: -.015em; }
.sp-stage-stats span {
  display: block; margin-top: .25rem; font-family: var(--ib-font-mono, monospace);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ib-ink-muted);
}

/* What each discipline looks like at this depth: a compact list, one line each */
.sp-stage-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ib-line); }
.sp-stage-list li {
  display: grid; grid-template-columns: 6.2rem 1fr; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--ib-line); font-size: .92rem; line-height: 1.5; color: var(--ib-ink-soft);
}
.sp-stage-list b {
  font-family: var(--ib-font-mono, monospace); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ib-accent-ink, var(--ib-accent)); font-weight: 500; padding-top: .2rem;
}

.sp-timeline { position: relative; margin-top: 3rem; }
.sp-tl { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: .35rem; }
.sp-tl-grade { text-align: center; }
.sp-tl-line { height: 0.1875rem; border-radius: 2px; background: var(--ib-line-strong); }
.sp-tl-grade[data-on="1"] .sp-tl-line { background: var(--ib-accent); }
.sp-tl-grade b {
  display: block; margin-top: .55rem; font-family: var(--ib-font-mono, monospace);
  font-size: .68rem; letter-spacing: .1em; color: var(--ib-ink-muted);
}
.sp-tl-mark { position: absolute; top: -18px; left: 0; color: var(--ib-accent); transition: transform .5s var(--sp-ease); }

/* --------------------------------------------------------------------------
   9  The two lessons: one switch, two calculators
   -------------------------------------------------------------------------- */

.sp-lessons { margin-top: 2.5rem; }
.sp-lesson[hidden] { display: none; }
.sp-lesson-head { max-width: 62ch; }
.sp-lesson-head h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.022em; }
.sp-lesson-head .sp-lede { margin-top: .9rem; }

.sp-calc { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3.5rem); margin-top: 2.5rem; align-items: start; }

.sp-eq {
  border: 1px solid var(--ib-line); border-radius: 0.875rem;
  background: var(--ib-bg-soft); padding: 1.4rem 1.5rem;
  font-family: var(--ib-font-mono, monospace); font-size: 1rem; color: var(--ib-ink); line-height: 2;
}
.sp-eq em { color: var(--ib-accent); font-style: normal; }
.sp-figure .sp-eq { border: 0; border-radius: 0; background: transparent; padding: .9rem 0 0; font-size: .95rem; }
.sp-figure .sp-eq + .sp-note { margin-top: .6rem; }

.sp-sliders { margin-top: 1.75rem; display: grid; gap: 1.4rem; }
.sp-slider label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .95rem; color: var(--ib-ink-soft); }
.sp-slider output { font-family: var(--ib-font-mono, monospace); font-size: .95rem; color: var(--ib-accent); font-weight: 500; white-space: nowrap; }
.sp-slider input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin-top: .7rem; height: 0.1875rem; border-radius: 2px;
  background: var(--ib-line-strong); outline: none; cursor: pointer;
}
.sp-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 0.9375rem; height: 0.9375rem; border-radius: 50%;
  background: var(--ib-accent); border: 0; cursor: pointer;
}
.sp-slider input[type=range]::-moz-range-thumb { width: 0.9375rem; height: 0.9375rem; border-radius: 50%; background: var(--ib-accent); border: 0; cursor: pointer; }
.sp-slider input[type=range]:focus-visible { outline: 2px solid var(--ib-accent); outline-offset: 6px; }

.sp-verdict {
  margin-top: 1.6rem; border: 1px solid var(--ib-line); border-left: 2px solid var(--ib-accent);
  border-radius: 0 0.75rem 0.75rem 0; padding: 1rem 1.2rem; color: var(--ib-ink-soft); line-height: 1.65; font-size: .97rem;
}
.sp-verdict.is-hot { border-left-color: var(--ib-gold); }

/* The curve against the tolerance: the visual the sliders drive */
.sp-vis-wrap { display: grid; gap: 1.5rem; }
.sp-curvebox { position: relative; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--ib-line); background: #101314; }
.sp-curvebox svg { width: 100%; height: auto; display: block; }
.sp-cb-bg     { fill: url(#spCbBg); }
.sp-cb-grid   { stroke: rgba(242,239,232,.06); stroke-width: .5; }
.sp-cb-base   { stroke: rgba(242,239,232,.4); stroke-width: .6; }
.sp-cb-curve  { fill: rgba(242,239,232,.10); stroke: rgba(242,239,232,.85); stroke-width: 1; }
.sp-cb-tail   { fill: var(--ib-accent); opacity: .7; }
.sp-cb-spec   { stroke: var(--ib-accent); stroke-width: .8; stroke-dasharray: 2.2 2.2; }
.sp-cb-target { stroke: rgba(242,239,232,.3); stroke-width: .6; stroke-dasharray: 1 2.5; }
.sp-cb-mean   { stroke: var(--ib-gold); stroke-width: .8; }
.sp-cb-txt    { font-family: var(--ib-font-mono, monospace); font-size: 6px; fill: var(--ib-ink-muted); letter-spacing: .1em; }
.sp-cb-txt.is-acc { fill: var(--ib-accent); }
.sp-cb-txt.is-gold { fill: var(--ib-gold); }
.sp-cb-tick   { stroke: rgba(242,239,232,.25); stroke-width: .5; }

/* The lanes: every chain racing the date, and the project waiting for the slowest */
.sp-vis-wrap { display: grid; gap: 1.5rem; }
.sp-lanebox { position: relative; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--ib-line); background: #101314; }
.sp-lanebox svg { width: 100%; height: auto; display: block; }
.sp-lb-bg     { fill: url(#spLbBg); }
.sp-lb-grid   { stroke: rgba(242,239,232,.06); stroke-width: .5; }
.sp-lb-lane   { stroke: rgba(242,239,232,.08); stroke-width: 6; stroke-linecap: round; }
.sp-lb-plan   { stroke: rgba(242,239,232,.55); stroke-width: 6; stroke-linecap: round; }
.sp-lb-band   { fill: var(--ib-accent); opacity: .28; }
.sp-lb-band.is-proj { opacity: .5; }
.sp-lb-p50    { stroke: var(--ib-ink); stroke-width: 1; }
.sp-lb-date   { stroke: var(--ib-accent); stroke-width: .9; stroke-dasharray: 2.2 2.2; }
.sp-lb-txt    { font-family: var(--ib-font-mono, monospace); font-size: 6px; fill: var(--ib-ink-muted); letter-spacing: .1em; }
.sp-lb-txt.is-acc { fill: var(--ib-accent); }
.sp-lb-txt.is-ink { fill: var(--ib-ink); }
.sp-lb-dot    { fill: rgba(242,239,232,.9); transition: transform .9s cubic-bezier(.22,.61,.21,1), fill .3s ease; }
.sp-lb-dot.is-late { fill: var(--ib-accent); }
.sp-lb-dot.is-proj { stroke: var(--ib-ink); stroke-width: .8; }
.sp-lb-tick   { stroke: rgba(242,239,232,.25); stroke-width: .5; }
.sp-lb-tally  { font-family: var(--ib-font-mono, monospace); font-size: 6px; fill: var(--ib-ink-muted); letter-spacing: .1em; }
.sp-lb-tally b { fill: var(--ib-accent); font-weight: 500; }

.sp-readout { display: grid; gap: 1.1rem; }
.sp-readout div { border-left: 2px solid var(--ib-line-strong); padding-left: 1rem; }
.sp-readout b {
  display: block; font-family: var(--ib-font-mono, monospace);
  font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.01em; color: var(--ib-ink); font-weight: 600;
}
.sp-readout div.is-key b { color: var(--ib-accent); }
.sp-readout span {
  display: block; margin-top: .3rem; font-family: var(--ib-font-mono, monospace);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ib-ink-muted);
}

/* --------------------------------------------------------------------------
   10  Tiles, slabs, runs, faq
   -------------------------------------------------------------------------- */

.sp-cols { display: grid; gap: 1rem; margin-top: 2.25rem; }
.sp-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sp-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.sp-tile { border: 1px solid var(--ib-line); border-radius: 0.875rem; background: var(--ib-card-bg); padding: 1.5rem 1.6rem; }
.sp-tile h3 { margin: .8rem 0 .5rem; font-size: 1.05rem; font-weight: 650; letter-spacing: -.016em; }
.sp-tile p  { margin: 0; color: var(--ib-ink-soft); font-size: .95rem; line-height: 1.65; }

.sp-slab { margin-top: 3rem; border-radius: 1.125rem; padding: clamp(1.8rem, 3.5vw, 2.8rem); background: var(--ib-bg-soft); border: 1px solid var(--ib-line); }
.sp-slab h3 { margin: 0 0 .8rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -.022em; }
.sp-slab p  { margin: 0; color: var(--ib-ink-soft); line-height: 1.7; max-width: 62ch; }

.sp-runs { margin-top: 2.5rem; border-top: 1px solid var(--ib-line); }
.sp-run { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem; padding: 1.15rem .2rem; border-bottom: 1px solid var(--ib-line); }
.sp-run b {
  font-family: var(--ib-font-mono, monospace); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ib-accent-ink, var(--ib-accent)); font-weight: 500; padding-top: .18rem;
}
.sp-run p { margin: 0; color: var(--ib-ink-soft); line-height: 1.65; font-size: .97rem; }

.sp-faq { margin-top: 2.25rem; border-top: 1px solid var(--ib-line); max-width: 51.25rem; }
.sp-faq details { border-bottom: 1px solid var(--ib-line); }
.sp-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem .2rem; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.012em; transition: transform var(--ib-dur-1, .16s) ease;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary:hover { transform: translateX(2px); }
.sp-faq summary:focus-visible { outline: 2px solid var(--ib-accent); outline-offset: 2px; border-radius: 0.375rem; }
.sp-chev { position: relative; flex: 0 0 auto; width: 0.8125rem; height: 0.8125rem; margin-top: .4rem; }
.sp-chev::before, .sp-chev::after {
  content: ""; position: absolute; background: var(--ib-ink-muted);
  transition: transform var(--ib-dur-2, .3s) var(--sp-ease), opacity var(--ib-dur-2, .3s) ease;
}
.sp-chev::before { top: 0.375rem; left: 0; width: 0.8125rem; height: 1.5px; }
.sp-chev::after  { top: 0; left: 0.375rem; width: 1.5px; height: 0.8125rem; }
.sp-faq details[open] summary .sp-chev::after { transform: scaleY(0); opacity: 0; }
.sp-faq-body { padding: 0 .2rem 1.4rem; color: var(--ib-ink-soft); line-height: 1.72; max-width: 66ch; }
.sp-faq-body p { margin: 0 0 .8rem; }
.sp-faq-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11  Final section
   -------------------------------------------------------------------------- */

.sp-final { padding-block: clamp(5rem, 10vh, 8rem); }
.sp-final h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; margin: 1rem 0 0; }
.sp-final p  { margin-top: 1.4rem; color: var(--ib-ink-soft); line-height: 1.7; max-width: 58ch; font-size: 1.05rem; }
.sp-final-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.sp-final-fine {
  margin-top: 2rem; font-family: var(--ib-font-mono, monospace);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ib-ink-muted);
}

/* --------------------------------------------------------------------------
   12  Reveal, sticky, nav over the hero
   -------------------------------------------------------------------------- */

.sp-reveal { opacity: 0; transform: translateY(1.125rem); }
.sp-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--sp-ease), transform .6s var(--sp-ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
html:not(.js) .sp-reveal { opacity: 1; transform: none; }

.sp-sticky {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 140%);
  z-index: 60; opacity: 0; pointer-events: none;
  transition: transform .45s var(--sp-ease), opacity .35s ease;
}
.sp-sticky.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

body.sp-page .ib-nav { position: fixed; top: 0; left: 0; right: 0; }
body.sp-page .sp-hero { padding-top: calc(4.25rem + clamp(3.5rem, 9vh, 6.5rem)); }
body.sp-page [id] { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.ib-nav.sp-over {
  background: linear-gradient(to bottom, rgba(8,10,11,.82) 0%, rgba(8,10,11,.55) 62%, rgba(8,10,11,0) 100%);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ib-nav.sp-over .ib-nav-inner {
  --ib-ink: #F2EFE8; --ib-ink-soft: rgba(242,239,232,.78);
  --ib-line-strong: rgba(242,239,232,.28); --ib-bg-deep: rgba(242,239,232,.10); --ib-bg: #0E1112;
}
.ib-nav.sp-over .ib-logo,
.ib-nav.sp-over .ib-nav-links a { color: rgba(242,239,232,.84); }
.ib-nav.sp-over .ib-nav-links a:hover,
.ib-nav.sp-over .ib-nav-links a.active { color: #F2EFE8; }
.ib-nav.sp-over.menu-open {
  background: var(--ib-nav-bg); border-bottom-color: var(--ib-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ib-nav.sp-over.menu-open .ib-nav-inner {
  --ib-ink: #20201E; --ib-ink-soft: #4A4742; --ib-line-strong: #C9C0AE; --ib-bg-deep: #EEE9DD; --ib-bg: #F5F1EB;
}
[data-theme="dark"] .ib-nav.sp-over.menu-open .ib-nav-inner {
  --ib-ink: #F2EFE8; --ib-ink-soft: #C9C4BB; --ib-line-strong: #45413A; --ib-bg-deep: #232220; --ib-bg: #1A1916;
}
.ib-nav.sp-over.menu-open .ib-logo { color: var(--ib-ink); }

.ib-footer p { color: var(--ib-footer-text-soft); }
.ib-footer h3 {
  color: var(--ib-footer-text); font-family: var(--ib-font-sans);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin: 0 0 1rem; opacity: .7;
}

/* --------------------------------------------------------------------------
   13  Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .sp-hero-grid { grid-template-columns: 1fr; }
  .sp-gauge-wrap { max-width: 23.75rem; margin-top: 2.5rem; }
  .sp-calc { grid-template-columns: 1fr; }
  .sp-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sp-facts  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sp-stage-grid { grid-template-columns: 1fr; }
  .sp-prose, .sp-prose--faq { grid-template-columns: 1fr; gap: 2.25rem; }
  .sp-prose .sp-body { max-width: 62ch; }
  .sp-prose > div > .sp-pull { max-width: 27ch; }
  .sp-aside { position: static; max-width: 40rem; }
  .sp-aside .sp-pull { max-width: 27ch; }
}
@media (max-width: 768px) {
  .sp-sec { padding-block: 3.5rem; }
  .sp-hero { padding-block: 3rem 2.5rem; }
  .sp-hero h1 { max-width: none; }
  .sp-hero-actions { flex-direction: column; align-items: stretch; }
  .sp-hero-actions .ib-btn { justify-content: center; }
  .sp-fields { grid-template-columns: 1fr; }
  .sp-field--wide { grid-column: auto; grid-template-columns: 1fr; }
  .sp-facts  { grid-template-columns: 1fr; }
  .sp-cols-2, .sp-cols-3 { grid-template-columns: 1fr; }
  .sp-stage-stats { grid-template-columns: 1fr; gap: .9rem; }
  .sp-stage-list li { grid-template-columns: 1fr; gap: .25rem; }
  .sp-run { grid-template-columns: 1fr; gap: .4rem; }
  .sp-tl { grid-template-columns: repeat(4, minmax(0,1fr)); gap: .3rem 1rem; }
  .sp-ladder-list { --sp-rail: calc(1.4rem + .5rem); }
  .sp-ladder-list li { grid-template-columns: 1.4rem 4.7rem 1fr; column-gap: .5rem; }
  .sp-figure { padding: 1.15rem 1.2rem 1.25rem; }
  .sp-sc-txt { font-size: 3px; }
  .sp-sc-title { display: none; }
  .sp-trail, .sp-deck-b, .sp-hud { display: none; }
  .sp-sticky { left: 1rem; right: 1rem; transform: translateY(140%); }
  .sp-sticky.is-on { transform: translateY(0); }
  .sp-sticky .ib-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   14  Print, reduced motion, forced colours
   -------------------------------------------------------------------------- */

@media print {
  .ib-nav, .sp-sticky, .sp-layer, .sp-skip { display: none !important; }
  .sp-reveal { opacity: 1 !important; transform: none !important; }
  .sp-faq details { display: block !important; }
  .sp-faq-body { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-page *, .sp-page *::before, .sp-page *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .sp-deck-a, .sp-deck-b { animation: none; transform: none; }
  .sp-trail path { stroke-dashoffset: 0; }
  .sp-reveal { opacity: 1; transform: none; }
  .sp-sc-pt { transform: scale(1); opacity: 1; }
  .sp-sc-launch-g { opacity: 1; }
}

@media (forced-colors: active) {
  .sp-layer, .sp-gauge, .sp-scene, .sp-curvebox { display: none; }
  .sp-tile, .sp-field, .sp-fact, .sp-slab { border: 1px solid CanvasText; }
}


/* ============================================================
   Wide screens (added 21 Sep 2026). Nothing changes below 1280px.
   Above it the layout grows with the window instead of sitting in
   a fixed 1180px column: the container keeps a slim outer margin
   and the whole type and spacing scale (all in rem) rises gently,
   from 16px at 1280 to 20px at 1920, capped at 22px, so every
   section keeps its proportions.
   ============================================================ */
@media (min-width: 1280px) {
  .sp-wide { max-width: min(calc(84.375vw + 100px), 92rem); }
}