/* ============================================================
   CASE STUDY — Editorial stylesheet v3
   Companion to styles.css (provides @font-face + :root tokens).
   Warm-paper background · Centered column layout ·
   Georgia serif body · Panchang display + numbers ·
   Blue accent #0F1A91 · Dark chapter breaks.
   ============================================================ */

/* ============================================================
   LOCAL OVERRIDES — warm paper palette + blue accent
   Override styles.css which sets html,body to pearl-1 (blue-grey).
   ============================================================ */
html {
  background: #F6F5F3;
  overflow-x: hidden;
}

.cs-page {
  --cs-bg:           #F6F5F3;
  --cs-bg-dark:      #141210;
  --cs-ink-dark:     #f0ebe3;
  --cs-mute-dark:    rgba(240, 235, 227, 0.52);
  --cs-serif:        Georgia, 'Palatino Linotype', 'Times New Roman', serif;

  /* Override global terracotta accent with blue */
  --accent-active:   #0F1A91;

  /* Column widths */
  --cs-col-body:  760px;
  --cs-col-wide:  1100px;
  --cs-pad:       clamp(1.5rem, 5vw, 5rem);

  background-color: var(--cs-bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* ── Page-wide animated grain canvas (saintsmary technique) ──
   Canvas is sized to viewport by JS; opacity tuned for light bg (#F6F5F3).
   No overflow or translate hacks needed — JS fills the exact viewport.   */
#cs-grain-canvas {
  position: fixed;
  inset: 0;
  opacity: 0.055;
  pointer-events: none;
  z-index: 450;
}

/* ── Butterfly — % position locks it to the first screen corner on any scale ── */
.cs-flow-butterfly {
  position: absolute;
  width: clamp(40px, 4vw, 60px);
  height: clamp(40px, 4vw, 60px);
  object-fit: cover;
  mix-blend-mode: exclusion;
  pointer-events: none;
  z-index: 5;   /* above grain and inner shadow */
}
/* equal inset from top and left corner */
.cs-flow-butterfly--tl {
  top:  14px;
  left: 14px;
}

/* ============================================================
   CENTERED LAYOUT
   Body column: 660px centered. Wide zone: 1100px centered.
   Both get generous padding-inline so they breathe on smaller screens.
   ============================================================ */
.cs-content {
  max-width: var(--cs-col-body);
  margin-inline: auto;
  padding-inline: var(--cs-pad);
}
.cs-wide {
  max-width: var(--cs-col-wide);
  margin-inline: auto;
  padding-inline: var(--cs-pad);
}

/* ── Flow image area ── */
.cs-flow-wrap {
  position: relative;
  margin-inline: 24px;
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 0;
  border-radius: 24px;
  background-color: transparent;
}

.cs-flow-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Soft inner shadow vignette */
.cs-flow-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 48px rgba(20, 18, 12, 0.065),
    inset 0 0 12px rgba(20, 18, 12, 0.035);
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
}


/* Footer 12-col grid */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2vw, 2rem);
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: var(--cs-pad);
}

/* ============================================================
   PROGRESS BAR — lives below the fixed nav (top: 52px)
   ============================================================ */
#cs-progress {
  position: fixed;
  top: 52px;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent-active);
  z-index: 510;
  transition: width 80ms linear, opacity 500ms ease;
  pointer-events: none;
}

/* ============================================================
   NAV
   ============================================================ */
.cs-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cs-pad);
  height: 52px;
}

/* Filled nav once user starts scrolling */
.cs-nav--scrolled {
  background: var(--cs-bg);
  border-bottom-color: rgba(20, 22, 28, 0.1);
}
.cs-nav__breadcrumb {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
#cs-read-time {
  opacity: 0.65;
}
.cs-nav__close {
  /* Perfect circle — matches glass pill style */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(217, 215, 222, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              inset 0 -1px 0 rgba(0,0,0,0.04);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(20, 22, 28, 0.65);
  line-height: 1;
  white-space: nowrap;
  transition: background 0.22s ease, color 0.22s ease,
              box-shadow 0.22s ease, border-color 0.22s ease;
}
.cs-nav__close:hover {
  background: linear-gradient(9deg, rgba(255,255,255,0.10) 64%, rgba(225,37,31,0.70) 336.24%);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 3px 6px 12px 0 rgba(0,0,0,0.04),
              inset 0 1px 0 rgba(255,255,255,0.5);
  color: rgba(20, 22, 28, 0.75);
}

/* ============================================================
   SECTION FADE-IN
   ============================================================ */
.cs-section {
  position: relative;
  z-index: 460;      /* above grain canvas (450); sections have transparent bg so grain shows through */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cs-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SECTION SPACING + CHAPTER DIVIDERS
   ============================================================ */
section.cs-section {
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid rgba(20, 22, 28, 0.1);
}

/* ============================================================
   SECTION RUBRIC — numbered, small-caps, accent counter
   ============================================================ */
body { counter-reset: cs-chapter; }
section.cs-section { counter-increment: cs-chapter; }

.cs-rubric {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
/* Numeric chapter prefix auto-generated by CSS counter */
section.cs-section .cs-rubric::before {
  content: counter(cs-chapter, decimal-leading-zero) " —";
  color: var(--accent-active);
  font-family: var(--font-body);
  font-weight: 500;
  font-variant: normal;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
/* Hero rubric: no counter, aligns to same left edge as title */
.cs-rubric--hero::before { display: none; }
.cs-rubric--hero {
  font-size: 0.65rem;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  margin-bottom: 1.25rem;
  padding-inline: var(--cs-pad);
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   HERO HEADER
   ============================================================ */
/* ── Hero image — 16px below nav, 32px side inset ── */
.cs-hero-img-wrap {
  position: relative;
  margin-top: calc(-1 * clamp(2rem, 4vw, 3.5rem) + 16px);
  margin-inline: 32px;
  /* 74px corner at 5303px native width → ~1.4% scales with container */
  border-radius: 1.4%;
  overflow: hidden;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.cs-hero-img {
  display: block;
  width: 100%;
  height: auto;
  /* Clip the baked-in white corners of the JPG to match the frame radius */
  border-radius: inherit;
}


.cs-hero-header {
  padding-top: calc(52px + clamp(2rem, 4vw, 3.5rem));
  padding-bottom: 40px;
  border-top: none !important;
}

/* First content section right after hero — 60px from divider to text */
.cs-hero-header + section.cs-section {
  padding-top: 60px;
}

/* ── Consistent 88px rhythm between chapters 1–5 (44 + 44) ─────────────
   Each adjacent pair loses its border divider and uses explicit 44px
   padding so the total gap is always 44 + 44 = 88px.
   ─────────────────────────────────────────────────────────────────── */
#s-context   { padding-bottom: 44px; }

#s-start     { border-top: none; padding-top: 44px; padding-bottom: 44px; }

#s-data      { border-top: none; padding-top: 44px; padding-bottom: 44px; }

#s-naming    { border-top: none; padding-top: 44px; padding-bottom: 44px; }

#s-diagnosis { border-top: none; padding-top: 44px; }

/* ── Dark block spacing ──────────────────────────────────────────────────
   Outer edges (entry/exit of dark band): 80px top + 80px bottom
   Inner gaps between sections: 44 + 44 = 88px rhythm
   #s-v1 gets extra bottom padding to breathe after thumbnail
   ─────────────────────────────────────────────────────────────────── */
#s-reframe    { padding-top: 80px; padding-bottom: 44px; }
#s-v1         { padding-top: 44px; padding-bottom: 80px; }
#s-monitoring { padding-top: 44px; padding-bottom: 80px; }

/* 88px gap: harder → scaling (44 + 44), no divider */
#s-harder     { padding-bottom: 44px; }
#s-scaling    { border-top: none; padding-top: 44px; padding-bottom: 44px; }

/* 88px gap: scaling → impact, no divider */
#s-impact     { border-top: none; padding-top: 44px; }

/* ── Wide content image (old flow, etc.) — matches cs-flow-wrap padding + shadow ── */
.cs-wide-img-wrap {
  position: relative;
  margin-inline: 24px;
  margin-top: clamp(2rem, 3vw, 3rem);
  border-radius: 24px;
  overflow: hidden;
  background-color: #C5C4C2;
}

.cs-wide-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 48px rgba(20, 18, 12, 0.065),
    inset 0 0 12px rgba(20, 18, 12, 0.035);
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
}

/* Small corner caption — Satoshi italic light */
.cs-img-note {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 0.6875rem;
  color: rgba(20, 20, 20, 0.4);
  pointer-events: none;
  line-height: 1;
  z-index: 5;
}

.cs-wide-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Full-width display title — spreads across the whole container */
.cs-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.5vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
  max-width: none;
  width: 100%;
  padding-inline: var(--cs-pad);
  box-sizing: border-box;
}

/* Hero subtitle — same left/right edges as title */
.cs-hero-subtitle {
  font-family: var(--cs-serif);
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 400;
  font-style: normal;
  opacity: 0.8;
  line-height: 1.6;
  color: var(--ink-soft);
  width: 100%;
  max-width: none;
  padding-inline: var(--cs-pad);
  box-sizing: border-box;
  margin-bottom: 0;
}

/* Hero meta row: year+client left, service tags right */
.cs-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding-inline: var(--cs-pad);
  box-sizing: border-box;
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  margin-top: 16px;
}
.cs-hero-meta__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.cs-hero-year {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.cs-hero-client {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  opacity: 0.7;
}
.cs-hero-meta__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cs-service-tag {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid rgba(20, 18, 16, 0.14);
  border-radius: 999px;
  padding: calc(0.3em + 2px) calc(0.6em + 2px);
  white-space: nowrap;
}

/* ============================================================
   TL;DR — editorial sidebar, not a card
   ============================================================ */
.cs-tldr {
  border-left: 3px solid var(--accent-active);
  padding: 0.75rem 0 0.75rem 1.25rem;
  margin-left: -1.5rem;
  background: none;
  border-radius: 0;
  max-width: 50ch;
  margin-bottom: 0;
}
.cs-tldr__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-active);
  margin-bottom: 0.5rem;
}
.cs-tldr p {
  font-family: var(--cs-serif);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   BODY TEXT — Georgia serif for reading comfort
   ============================================================ */
.cs-body {
  font-family: var(--cs-serif);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 65ch;
  margin-bottom: 1.4em;
}
.cs-body:last-child { margin-bottom: 0; }
.cs-body--muted {
  color: var(--ink-mute);
  font-size: 0.875rem;
}

/* ============================================================
   PULL QUOTES — centered, 2px top rule, italic display type
   ============================================================ */
.cs-pullquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  quotes: none;
  border: none;
  border-top: 2px solid var(--accent-active);
  padding: clamp(1.25rem, 2.5vw, 2rem) var(--cs-pad) 0;
  margin-inline: auto;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: var(--cs-col-body);     /* match prose column width */
  box-sizing: border-box;
}

/* ── Typewriter variant overrides ─────────────────────────── */

/* No blue rule above, tighter bottom gap */
.cs-pullquote[data-typewriter] {
  border-top: none;
  padding-top: 0;
  position: relative;          /* contains the absolutely-placed typed span */
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Ghost span: invisible but holds the full-height layout space
   so the block never collapses or shifts as text types in */
.cs-pq-ghost {
  display: block;
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}

/* Typed span: overlays ghost from the top.
   padding-inline mirrors the blockquote's own padding so typed text
   starts at the same left edge as the ghost and the body paragraphs above. */
.cs-pq-typed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-inline: var(--cs-pad);
  box-sizing: border-box;
}

/* Typewriter cursor — blinks while typing */
@keyframes cs-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Thin vertical bar — looks like an active text-input cursor */
.cs-pullquote--typing .cs-pq-typed::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.82em;
  background: var(--accent-active);
  margin-left: 3px;
  vertical-align: middle;
  border-radius: 1px;
  animation: cs-cursor-blink 0.6s step-end infinite;
}

/* Cursor gone once fully typed */
.cs-pullquote--typed .cs-pq-typed::after {
  display: none;
}


/* Closing pull quote — in dark section */
.cs-pullquote--closing {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: none;
  padding: 0 var(--cs-pad);
  max-width: 30ch;
  margin-inline: auto;
  color: var(--cs-ink-dark);
  font-style: italic;
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* ============================================================
   STAT BLOCKS — naked numbers, no card boxes
   ============================================================ */
.cs-stat-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: var(--cs-col-body);
  margin-inline: auto;
  padding-inline: var(--cs-pad);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 0;
}
.cs-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.cs-stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--accent-active);
}
.cs-stat__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 18ch;
  line-height: 1.4;
  text-align: left;
}

/* Usage split — two big numbers with vertical divider */
.cs-split-stat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: var(--cs-col-body);
  margin-inline: auto;
  padding-inline: var(--cs-pad);
  margin-block: clamp(2.5rem, 4vw, 3.5rem);
}
.cs-stat--large {
  align-items: flex-start;
}
.cs-stat--large .cs-stat__num {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  color: var(--ink);
}
.cs-stat--large .cs-stat__label {
  text-align: left;
  white-space: nowrap;
  max-width: none;
}
.cs-split-stat__divider {
  width: 1px;
  height: 4rem;
  background: rgba(20, 22, 28, 0.12);
  flex-shrink: 0;
}

/* ============================================================
   FUNNEL — stepped waterfall bars
   ============================================================ */
.cs-funnel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--cs-col-body);   /* edge-to-edge within the text column */
  margin-inline: auto;
  padding-inline: var(--cs-pad);
  margin-block: clamp(2rem, 3.5vw, 3rem);
}
.cs-funnel__step {
  display: grid;
  grid-template-columns: 4rem 1fr auto;   /* number left | bar grows | label right */
  align-items: center;
  gap: 1.25rem;
}
.cs-funnel__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: left;               /* numbers anchor to left edge */
  line-height: 1;
}
.cs-funnel__track {
  height: 5px;
  background: rgba(20, 22, 28, 0.07);
  border-radius: 3px;
  overflow: hidden;
}
.cs-funnel__fill {
  height: 100%;
  background: var(--accent-active);
  border-radius: 3px;
  opacity: 0.75;
}
.cs-funnel__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  white-space: nowrap;
  text-align: right;              /* labels anchor to right edge */
}

/* ============================================================
   OLD MODEL FLOW DIAGRAM
   Icons from Figma (inline SVG), text as HTML, stagger on scroll.
   ============================================================ */
.cs-om-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}

/* Each step: icon above, label below */
.cs-om-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  color: var(--ink);
  /* entrance animation */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.cs-om-step__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* subtle float loop — plays once fully visible */
  animation: om-float 3.2s ease-in-out infinite;
  animation-play-state: paused;
}

.cs-om-step:nth-child(1) .cs-om-step__icon { animation-delay: 0s; }
.cs-om-step:nth-child(3) .cs-om-step__icon { animation-delay: 0.4s; }
.cs-om-step:nth-child(5) .cs-om-step__icon { animation-delay: 0.8s; }
.cs-om-step:nth-child(7) .cs-om-step__icon { animation-delay: 1.2s; }

@keyframes om-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.cs-om-step__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.35;
}

/* Last step — the problem state, orange from main nav (#E8490F) */
.cs-om-step--problem { color: #E8490F; }
.cs-om-step--problem .cs-om-step__label { color: #E8490F; }

/* Arrow connector */
.cs-om-arrow {
  flex-shrink: 0;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Stagger in when .cs-om-flow gets .is-active (via IntersectionObserver) */
.cs-om-flow.is-active .cs-om-step:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.cs-om-flow.is-active .cs-om-arrow:nth-child(2) { opacity: 0.3; transition-delay: 0.1s; }
.cs-om-flow.is-active .cs-om-step:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.15s; }
.cs-om-flow.is-active .cs-om-arrow:nth-child(4) { opacity: 0.3; transition-delay: 0.25s; }
.cs-om-flow.is-active .cs-om-step:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.3s; }
.cs-om-flow.is-active .cs-om-arrow:nth-child(6) { opacity: 0.3; transition-delay: 0.4s; }
.cs-om-flow.is-active .cs-om-step:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.45s; }

/* Start floating once visible */
.cs-om-flow.is-active .cs-om-step__icon { animation-play-state: running; }

/* ============================================================
   ARTIFACT PANELS (old/new flow)
   ============================================================ */
.cs-artifact {
  background: rgba(20, 22, 28, 0.04);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(20, 22, 28, 0.09);
}
.cs-artifact--new {
  background: rgba(20, 22, 28, 0.02);
  border-color: rgba(20, 22, 28, 0.06);
}
.cs-artifact__label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
}
.cs-artifact__note {
  font-family: var(--cs-serif);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-top: 1.25rem;
}
.cs-model-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.cs-model__step {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--cs-bg);
  border: 1px solid rgba(20, 22, 28, 0.12);
  border-radius: 3px;
  padding: 0.4em 0.75em;
  white-space: nowrap;
}
.cs-model__step--problem {
  border-color: rgba(15, 26, 145, 0.3);
  color: var(--accent-active);
  background: rgba(15, 26, 145, 0.05);
}
.cs-model__step--resolved {
  background: var(--ink);
  border-color: var(--ink);
  color: #f4f0eb;
}
.cs-model__arrow {
  font-size: 0.7rem;
  color: rgba(20, 22, 28, 0.25);
  font-family: var(--font-body);
}

/* ============================================================
   NEW MODEL SCHEME — step + icon + label + arrow (dark section)
   Mirrors .cs-om-flow structure, adapted for dark backgrounds.
   ============================================================ */
.cs-nm-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.cs-nm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  color: rgba(240, 235, 227, 0.75);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.cs-nm-step__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* subtle float loop — plays once fully visible */
  animation: nm-float 3.2s ease-in-out infinite;
  animation-play-state: paused;
}

.cs-nm-step__icon svg {
  width: 32px;
  height: 32px;
}

/* Stagger float start across 5 steps (children 1,3,5,7,9) */
.cs-nm-step:nth-child(1) .cs-nm-step__icon { animation-delay: 0s; }
.cs-nm-step:nth-child(3) .cs-nm-step__icon { animation-delay: 0.4s; }
.cs-nm-step:nth-child(5) .cs-nm-step__icon { animation-delay: 0.8s; }
.cs-nm-step:nth-child(7) .cs-nm-step__icon { animation-delay: 1.2s; }
.cs-nm-step:nth-child(9) .cs-nm-step__icon { animation-delay: 1.6s; }

@keyframes nm-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.cs-nm-step__label {
  font-size: 0.72rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(240, 235, 227, 0.50);
}

.cs-nm-step--resolved {
  color: #4756FD;
}

.cs-nm-step--resolved .cs-nm-step__label {
  color: #4756FD;
}

.cs-nm-arrow {
  color: rgba(240, 235, 227, 0.18);
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Stagger: step arrow step arrow step arrow step arrow step (9 children) */
.cs-nm-flow.is-active .cs-nm-step:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0s; }
.cs-nm-flow.is-active .cs-nm-arrow:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; }
.cs-nm-flow.is-active .cs-nm-step:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.16s; }
.cs-nm-flow.is-active .cs-nm-arrow:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.24s; }
.cs-nm-flow.is-active .cs-nm-step:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.30s; }
.cs-nm-flow.is-active .cs-nm-arrow:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.38s; }
.cs-nm-flow.is-active .cs-nm-step:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.44s; }
.cs-nm-flow.is-active .cs-nm-arrow:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.52s; }
.cs-nm-flow.is-active .cs-nm-step:nth-child(9)  { opacity: 1; transform: none; transition-delay: 0.58s; }

/* Start floating once the flow is visible */
.cs-nm-flow.is-active .cs-nm-step__icon { animation-play-state: running; }

/* ============================================================
   LOSTNESS INDEX
   ============================================================ */
.cs-lostness {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: var(--cs-col-body);
  margin-inline: auto;
  padding-inline: var(--cs-pad);
  margin-block: clamp(2.5rem, 4vw, 3.5rem);
}
.cs-lostness__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cs-lostness__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.cs-lostness__num--before { color: rgba(20, 22, 28, 0.25); }
.cs-lostness__num--after  { color: var(--accent-active); }
.cs-lostness__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cs-lostness__arrow {
  display: flex;
  align-items: center;
  color: rgba(20, 22, 28, 0.2);
  flex-shrink: 0;
}
.cs-lostness__arrow svg {
  width: 24px;
  height: 24px;
}

/* ============================================================
   STEP BLOCKS (01/02/03)
   ============================================================ */
.cs-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  max-width: var(--cs-col-body);
  margin-inline: auto;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(20, 22, 28, 0.1);
}
.cs-step:first-of-type { border-top: none; padding-top: 0; }
.cs-step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(20, 22, 28, 0.12);
  min-width: 2.5ch;
  user-select: none;
}
.cs-step__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.cs-step__body {
  font-family: var(--cs-serif);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ============================================================
   SUBHEADINGS
   ============================================================ */
.cs-subheading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--ink);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

/* ============================================================
   DEPOSIT BULLET PAIR — side-by-side two-column bullets
   Sits inside cs-content, same max-width as cs-body.
   ============================================================ */
.cs-bullet-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.cs-bullet-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cs-bullet-item__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Bullet dot */
.cs-bullet-item__title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-active);
  flex-shrink: 0;
}

.cs-bullet-item__body {
  font-family: var(--cs-body-font, var(--font-body));
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ============================================================
   SCREEN PLACEHOLDERS
   1px border · Scale-in reveal animation ·
   Caption bottom-left with accent left rule ·
   Optional phone frame sketch for mobile screens
   ============================================================ */
.cs-screen-placeholder {
  width: 100%;
  background: rgba(20, 22, 28, 0.04);
  border: 1px solid rgba(20, 22, 28, 0.1);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 100px;

  /* Scale-in reveal — starts hidden */
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.cs-screen-placeholder.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
/* Caption: bottom-left, accent left rule */
.cs-screen-placeholder::after {
  content: attr(data-label);
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  border-left: 2px solid var(--accent-active);
  padding: 0.2rem 0 0.2rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  max-width: 55%;
  line-height: 1.5;
}
/* Phone frame sketch */
.cs-screen-placeholder[data-frame="phone"]::before {
  content: '';
  position: absolute;
  width: 68px;
  height: 120px;
  border: 1.5px solid rgba(20, 22, 28, 0.12);
  border-radius: 13px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  box-shadow: 0 36px 0 -30px rgba(20, 22, 28, 0.1);
}

/* ============================================================
   DARK CHAPTER — full-width contrast section
   ============================================================ */
.cs-section--dark {
  background-color: var(--cs-bg-dark);
  background-image: none;   /* suppress grid in dark sections */
  border-top: none !important;
  /* Dark sections are always visible — no flash of body background on scroll */
  opacity: 1;
  transform: none;
}
.cs-section--dark + section.cs-section {
  border-top: none;
}

/* ── Dark block: rounded corners matching #work on home page ── */
#s-reframe {
  border-radius: 16px 16px 0 0;
}

section#s-reframe .cs-rubric::before {
  font-size: inherit;
}
#s-monitoring {
  border-radius: 0 0 16px 16px;
}
/* Restore divider after the dark block ends */
#s-solution {
  border-top: 1px solid rgba(20, 22, 28, 0.1);
}
.cs-section--dark .cs-rubric {
  color: var(--cs-mute-dark);
}
section.cs-section--dark .cs-rubric::before {
  color: #4756FD;
}
.cs-section--dark .cs-body {
  color: rgba(240, 235, 227, 0.72);
}
.cs-section--dark .cs-pullquote {
  color: var(--cs-ink-dark);
  border-top-color: #4756FD;
}
.cs-section--dark .cs-pullquote--closing {
  color: var(--cs-ink-dark);
  border-top: none;
}
.cs-section--dark .cs-artifact {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.cs-section--dark .cs-artifact__label {
  color: rgba(240, 235, 227, 0.45);
}
.cs-section--dark .cs-artifact__note {
  color: rgba(240, 235, 227, 0.6);
}
.cs-section--dark .cs-model__step {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(240, 235, 227, 0.75);
}
.cs-section--dark .cs-model__step--resolved {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f0ebe3;
}
.cs-section--dark .cs-model__step--problem {
  border-color: rgba(71, 86, 253, 0.4);
  color: #8b9cf5;
  background: rgba(71, 86, 253, 0.12);
}
.cs-section--dark .cs-model__arrow {
  color: rgba(255, 255, 255, 0.2);
}

/* Lostness + stat numbers in dark sections */
.cs-section--dark .cs-stat__num {
  color: var(--cs-ink-dark);
}
.cs-section--dark .cs-stat__label {
  color: var(--cs-mute-dark);
}
.cs-section--dark .cs-lostness__num--before {
  color: rgba(240, 235, 227, 0.45);
}
.cs-section--dark .cs-lostness__num--after {
  color: var(--cs-ink-dark);
}
.cs-section--dark .cs-lostness__label {
  color: var(--cs-mute-dark);
}
.cs-section--dark .cs-lostness__arrow {
  color: rgba(240, 235, 227, 0.25);
}

/* ============================================================
   STEP 02 LOTTIE — configure-flow animation
   ============================================================ */
.cs-lottie-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
  height: clamp(420px, 50vw, 640px);
}

.cs-lottie-player {
  display: block;
  width: 25.2%;
  height: auto;
}

/* ── Step 03: success + confetti layered slot ── */
.cs-lottie-wrap--success {
  position: relative;
  /* Allow confetti to bleed outside the column without shifting layout */
  overflow: visible;
}

/* Confetti: free-positioned, wider than the mockup column.
   Centre aligned horizontally; vertical anchor is 32px above
   the mockup's top edge (top: -32px, then translateY(-50%)
   pulls the mid-point of the canvas up to that line).        */
.cs-confetti-player {
  position: absolute;
  left: 50%;
  /* 32px above the top edge of the wrapper = top of the mockup */
  top: 38px;
  transform: translate(-50%, -50%);
  /* Override global img { max-width: 100% } reset — without this the
     img is capped at the parent column width (≈261px) regardless of % */
  max-width: none !important;
  width: 202%;
  height: 202%;
  z-index: -1;
  pointer-events: none;
}

/* Success phone floats on top */
.cs-lottie-player--success {
  position: relative;
  z-index: 1;
}

/* ============================================================
   STEP 02 / 03 SHOWCASE — text left · animation right
   ============================================================ */
.cs-step-showcase {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}

/* Left: step number stacked above heading + body */
.cs-step-showcase__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Prevent text spreading too wide in a wide container */
  max-width: 332px;
}

/* Right: lottie column — 25.2% × 1.2 = 30.24% of cs-wide */
.cs-step-showcase__media {
  flex-shrink: 0;
  width: 30.24%;
  height: auto !important;
  aspect-ratio: 555 / 1134;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Push mockup to top of the flex row */
  align-self: flex-start;
  /* Slightly wider gap than step 01 */
  margin-left: calc(clamp(0.75rem, 2vw, 1.5rem) + 1.5rem);
}

/* Step 01 wide variant — 3-col showcase, slightly reduced from full width */
.cs-step-showcase__media--wide {
  flex-shrink: 0;
  width: 48%;
  height: clamp(280px, 36vw, 430px);
  aspect-ratio: unset;
}

/* Player fills the column fully */
.cs-step-showcase .cs-lottie-player {
  width: 100%;
  height: auto;
}

/* Step1 showcase inherits height from media--wide column */
.cs-step-showcase__media--wide.cs-step1-showcase {
  height: clamp(280px, 36vw, 430px);
}

/* ============================================================
   STEP 01 SHOWCASE — 3-column layout with infinite scroll sides
   ============================================================ */
.cs-step1-showcase {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow: hidden;
  height: clamp(380px, 52vw, 640px);
}

.cs-showcase__side {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 100%;
  border-radius: 16px;
  /* GPU layer — prevents repaints during child animation */
  transform: translateZ(0);
  will-change: transform;
}

.cs-showcase__track {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  /* Composite on GPU so scrolling is thread-independent */
  will-change: transform;
  backface-visibility: hidden;
}

.cs-showcase__track img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  flex-shrink: 0;
  /* Prevent subpixel shimmer on moving images */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ── Timing: ease-in → scroll → ease-out → pause at each image ── */
.cs-showcase__track--up {
  animation: showcase-scroll-up 10s ease-in-out infinite;
}

.cs-showcase__track--down {
  animation: showcase-scroll-down 12s ease-in-out infinite;
}

@keyframes showcase-scroll-up {
  /* Rest on image 1 */
  0%   { transform: translateY(0);    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  8%   { transform: translateY(0);    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  /* Ease to image 2 */
  42%  { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  /* Rest on image 2 */
  50%  { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  /* Ease to loop reset */
  92%  { transform: translateY(-50%); }
  100% { transform: translateY(-50%); }
}

@keyframes showcase-scroll-down {
  /* Rest on image 1 (duplicate = loop start) */
  0%   { transform: translateY(-50%); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  8%   { transform: translateY(-50%); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  /* Ease to image 2 */
  42%  { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  /* Rest on image 2 */
  50%  { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  /* Ease to loop reset */
  92%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* ── Center: static, constrained to showcase height ── */
.cs-showcase__center {
  flex: 1.5;
  min-width: 0;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-showcase__center img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  border-radius: 16px;
}

/* ============================================================
   FOOTER NAV
   ============================================================ */
.cs-footer {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(20, 22, 28, 0.08);
  background: var(--cs-bg);
}
.cs-footer__center {
  display: flex;
  justify-content: center;
}
/* kept for when prev/next return */
.cs-footer__prev  { grid-column: 1 / 4; display: flex; align-items: center; }
.cs-footer__back  { grid-column: 5 / 10; display: flex; align-items: center; justify-content: center; }
.cs-footer__next  { grid-column: 11 / 13; display: flex; align-items: center; justify-content: flex-end; }

/* Glass pill — matches home nav pill exactly */
.cs-footer__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  border-radius: 32px;
  background: rgba(217, 215, 222, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              inset 0 -1px 0 rgba(0,0,0,0.04);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(20, 22, 28, 0.65);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s ease, color 0.22s ease,
              box-shadow 0.22s ease, border-color 0.22s ease;
}
.cs-footer__pill:hover {
  background: linear-gradient(9deg, rgba(255,255,255,0.10) 64%, rgba(225,37,31,0.70) 336.24%);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 3px 6px 12px 0 rgba(0,0,0,0.04),
              inset 0 1px 0 rgba(255,255,255,0.5);
  color: rgba(20, 22, 28, 0.80);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .cs-stat-row {
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  .cs-split-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .cs-split-stat__divider {
    width: 2.5rem;
    height: 1px;
  }
  .cs-funnel__step {
    grid-template-columns: 3rem 1fr;
    grid-template-rows: auto auto;
  }
  .cs-funnel__label {
    grid-column: 2;
    white-space: normal;
  }
  .cs-lostness {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .cs-step {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .cs-step__num {
    font-size: 1.75rem;
    color: var(--accent-active);
    opacity: 0.4;
  }
  .cs-model-flow {
    flex-direction: column;
    align-items: flex-start;
  }
  .cs-footer__prev,
  .cs-footer__back,
  .cs-footer__next {
    grid-column: 1 / 13;
    text-align: left;
  }
  .cs-hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .cs-hero-meta__right {
    justify-content: flex-start;
  }
}

@media (max-width: 540px) {
  .cs-title {
    font-size: clamp(2rem, 9.5vw, 2.75rem);
  }
  .cs-stat-row {
    flex-direction: column;
    gap: 1.75rem;
  }
}