/* ---------------------------------------------------------------------------
 * case-study-digital.css
 *
 * Digital case-study template. Rebuilt 2026-06-05 (rafa-racing-redesign,
 * sprint-6) to match Figma Sandbox node 27:3 1:1.
 *
 * Register: warm light-gray ground (warm-gray-100) editorial layout with four
 * intrinsic dark feature bands (Hero, Design System, App Store, Reflection).
 * The page is light-locked; dark bands carry their own dark primitives so they
 * stay dark regardless of theme. DM Serif Display drives the hero headline,
 * DM Serif Text the pull-quote, Neue Haas Grotesk the headings and body,
 * Cascadia/system mono the chrome labels.
 *
 * Token policy: imports tokens.css, consumes --sc-* tokens. The .cs local layer
 * maps the Figma surfaces to their tokens. No raw hex, no magic colors. Product
 * mockup colors (Rafa red/blue) live only inside the raster screenshots, never
 * in this stylesheet.
 * ------------------------------------------------------------------------- */

.footer__email { color: var(--sc-color-text-secondary); }
.cs img { max-width: 100%; }

/* ===== .cs local token layer ===== */
.cs {
  /* Light ground (page is light-locked → semantic surface tokens resolve light) */
  --cs-ground:        var(--sc-color-surface-page);   /* warm-gray-100 #e3dfd8 */
  --cs-ground-raised: var(--sc-color-surface-sunk);   /* warm-gray-200 */
  --cs-ground-deep:   var(--sc-color-surface-deep-sunk); /* warm-gray-300 */
  --cs-ink:           var(--sc-color-text-primary);   /* warm-gray-800 */
  --cs-ink-soft:      var(--sc-color-text-secondary); /* warm-gray-500 */
  --cs-line:          var(--sc-color-border-default);  /* warm-gray-250 */
  --cs-line-soft:     var(--sc-color-border-subtle);   /* warm-gray-350 */
  --cs-accent:        var(--sc-color-brand-accent);    /* shu-500 #c8281c */
  --cs-accent-deep:   var(--sc-color-brand-accent-deep);

  /* Dark band primitives (intrinsic, theme-independent) */
  --cs-dark:          var(--sc-p-color-dark-surface-page);      /* #0d0c0b */
  --cs-dark-raised:   var(--sc-p-color-warm-gray-800);          /* #1a1815 phone shells */
  --cs-dark-sunk:     var(--sc-p-color-dark-surface-sunk);      /* #181512 */
  --cs-dark-deep:     var(--sc-p-color-dark-surface-deep-sunk); /* #221f1b */
  --cs-dark-line:     var(--sc-p-color-dark-border-subtle);     /* #2f2b26 */
  --cs-on-dark:       var(--sc-p-color-dark-text-primary);      /* #e2ddd6 */
  --cs-on-dark-mute:  var(--sc-p-color-warm-gray-300);          /* #cdc9c2 hero head */
  --cs-on-dark-soft:  var(--sc-p-color-warm-gray-400);          /* #9a9388 */

  /* Layout constants (named; not raw magic numbers) */
  --cs-shell-max: 1196px;          /* Figma content column at 1440 */
  --cs-gutter:    var(--sc-p-space-24);
  --cs-hero-h:    680px;
  /* iOS handset geometry — the brand radius scale has no handset value. */
  --cs-phone-w:        260px;
  --cs-phone-radius:   28px;
  --cs-hero-phone-w:   200px;
  --cs-hero-phone-h:   410px;
  --cs-hero-phone-radius: 34px;

  background: var(--cs-ground);
  color: var(--cs-ink);
  display: block;
  width: 100%;
  min-width: 0;
}

/* ===== Shell / bleed alignment ===== */
.cs-shell {
  width: min(var(--cs-shell-max), calc(100% - var(--cs-gutter) * 2));
  margin-inline: auto;
}
/* Full-bleed rails align their content start to the shell's left edge. */
.cs-bleed {
  padding-inline: max(var(--cs-gutter), calc((100% - var(--cs-shell-max)) / 2));
}

/* ===== Section rhythm ===== */
.cs-section { padding-top: var(--sc-p-space-80); }
.cs-more { padding-bottom: var(--sc-p-space-96); }

/* ===== Eyebrow (mono label + rule) ===== */
.cs-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sc-p-space-16);
  margin: 0 0 var(--sc-p-space-32);
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  font-weight: var(--sc-font-text-mono-chrome-weight);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-ink-soft);
}
.cs-eyebrow > span { flex: none; }
.cs-eyebrow::after {
  content: "";
  flex: 1 1 0;
  height: var(--sc-border-width-default);
  background: var(--cs-line);
}
.cs-eyebrow--plain::after { display: none; }
.cs-eyebrow--invert { color: var(--cs-on-dark-soft); }
.cs-eyebrow--invert::after { background: var(--cs-dark-line); }

/* ===== Section title (Neue Haas Grotesk Display Medium 32 / tight) ===== */
.cs-section__title {
  font-family: var(--sc-font-text-title-section-family);
  font-size: var(--sc-font-text-title-section-size);
  font-weight: var(--sc-font-text-title-section-weight);
  line-height: var(--sc-font-text-title-section-line-height);
  letter-spacing: var(--sc-font-text-title-section-letter-spacing);
  color: var(--cs-ink);
  margin: 0 0 var(--sc-p-space-24);
  max-width: 30ch;
}
.cs-section__title--invert { color: var(--cs-on-dark); }

/* ===== Prose ===== */
.cs-prose { max-width: 620px; }
.cs-prose p {
  font-family: var(--sc-font-text-body-default-family);
  font-size: var(--sc-font-text-body-default-size);
  font-weight: var(--sc-font-text-body-default-weight);
  line-height: var(--sc-font-text-body-default-line-height);
  color: var(--cs-ink-soft);
  margin: 0 0 var(--sc-p-space-16);
}
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose--invert p { color: var(--cs-on-dark-soft); }

/* ===== Dark bands ===== */
.cs-band {
  background: var(--cs-dark);
  color: var(--cs-on-dark);
  margin-top: var(--sc-p-space-80);
  padding-block: var(--sc-p-space-96);
}
/* Bands keep their top margin so a section's last element (e.g. the 5-step flow)
   never sits flush against the next band — uniform exterior spacing everywhere. */

/* ============================================================
 * 01 HERO (dark band)
 * ============================================================ */
.cs-hero {
  position: relative;
  min-height: var(--cs-hero-h);
  display: flex;
  align-items: end;
  overflow: hidden;
  background: var(--cs-dark);
  color: var(--cs-on-dark);
  isolation: isolate;
}
.cs-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.cs-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Legibility wash under the lower-left headline. */
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--sc-p-color-utility-black) 70%, transparent) 0%,
    color-mix(in srgb, var(--sc-p-color-utility-black) 30%, transparent) 42%,
    transparent 72%
  );
}
.cs-hero__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--sc-p-space-32);
  width: min(var(--cs-shell-max), calc(100% - var(--cs-gutter) * 2));
  margin-inline: auto;
  padding-block: var(--sc-p-space-96);
}
.cs-hero__copy { align-self: end; }
.cs-hero__title {
  font-family: var(--sc-p-font-family-serif-display);
  font-size: var(--sc-p-font-size-84);
  font-weight: var(--sc-p-font-weight-regular);
  line-height: var(--sc-p-font-line-height-flat);
  letter-spacing: var(--sc-p-font-tracking-tight);
  color: var(--cs-on-dark-mute);
  margin: 0 0 var(--sc-p-space-24);
}
.cs-hero__accent {
  color: var(--cs-accent);
  font-style: italic;
}
.cs-hero__sub {
  font-family: var(--sc-font-text-body-default-family);
  font-size: var(--sc-font-text-body-default-size);
  line-height: var(--sc-font-text-body-default-line-height);
  color: var(--cs-on-dark-soft);
  max-width: 42ch;
  margin: 0;
}

/* Hero phone cluster */
.cs-hero__phones {
  position: relative;
  height: var(--cs-hero-phone-h);
  align-self: center;
}
.cs-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: var(--cs-hero-phone-w);
  height: var(--cs-hero-phone-h);
  background: var(--cs-dark-raised);
  border-radius: var(--cs-hero-phone-radius);
  overflow: hidden;
  box-shadow: 0 var(--sc-p-space-24) var(--sc-p-space-64)
    color-mix(in srgb, var(--sc-p-color-utility-black) 55%, transparent);
}
.cs-phone img { display: block; width: 100%; height: auto; }
.cs-phone--left   { transform: translate(-50%, -50%) translateX(-148px) rotate(-9.7deg) scale(0.9);  z-index: 1; }
.cs-phone--right  { transform: translate(-50%, -50%) translateX(148px)  rotate(9.33deg) scale(0.9);  z-index: 2; }
.cs-phone--center { transform: translate(-50%, -50%) translateY(-6px) rotate(0deg);                  z-index: 3; }

/* Faux iOS status bar (handsets) */
.cs-phone__bar {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sc-p-space-8);
  padding: var(--sc-p-space-12) var(--sc-p-space-16) var(--sc-p-space-8);
  color: var(--sc-p-color-utility-white);
  pointer-events: none;
}
.cs-phone__time {
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-11);
  font-weight: var(--sc-p-font-weight-semibold);
}
.cs-phone__island {
  flex: none;
  width: 32%;
  height: var(--sc-p-space-16);
  margin-inline: auto;
  background: var(--sc-p-color-utility-black);
  border-radius: var(--sc-radius-pill);
}
.cs-phone__batt {
  flex: none;
  width: var(--sc-p-space-16);
  height: var(--sc-p-space-8);
  border-radius: var(--sc-p-radius-input);
  background: var(--sc-p-color-utility-white);
}

/* ============================================================
 * 02 META
 * ============================================================ */
.cs-meta {
  border-block: var(--sc-border-width-default) solid var(--cs-line);
  background: var(--cs-ground);
}
.cs-meta__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.cs-meta__item {
  padding: var(--sc-p-space-24) var(--sc-p-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--sc-p-space-8);
  border-left: var(--sc-border-width-default) solid var(--cs-line);
}
.cs-meta__item:first-child { border-left: 0; padding-left: 0; }
.cs-meta__label {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-ink-soft);
}
.cs-meta__value {
  font-family: var(--sc-font-text-body-dense-family);
  font-size: var(--sc-font-text-body-dense-size);
  line-height: var(--sc-font-text-body-dense-line-height);
  color: var(--cs-ink);
}

/* ============================================================
 * 03 OVERVIEW
 * ============================================================ */
.cs-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  align-items: center;
  gap: var(--sc-p-space-48);
}
.cs-overview__logo {
  width: 100%;
  max-width: 412px;
  height: auto;
  justify-self: center;
}

/* ============================================================
 * 04 OPPORTUNITY — five-step flow
 * ============================================================ */
.cs-flow {
  list-style: none;
  margin: var(--sc-p-space-48) 0 0;
  padding: var(--sc-p-space-32) 0 0;
  border-top: var(--sc-border-width-default) solid var(--cs-line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sc-p-space-24);
}
.cs-flow__step {
  display: flex;
  flex-direction: column;
  gap: var(--sc-p-space-8);
}
.cs-flow__num {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  color: var(--cs-accent);
}
.cs-flow__name {
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-16);
  font-weight: var(--sc-p-font-weight-medium);
  color: var(--cs-ink);
}
.cs-flow__desc {
  font-family: var(--sc-font-text-caption-family);
  font-size: var(--sc-font-text-caption-size);
  color: var(--cs-ink-soft);
}

/* ============================================================
 * 05 DESIGN SYSTEM (dark band)
 * ============================================================ */
.cs-system__lede { max-width: 600px; }
.cs-screens {
  list-style: none;
  width: min(var(--cs-shell-max), calc(100% - var(--cs-gutter) * 2));
  margin: var(--sc-p-space-48) auto 0;
  padding: 0;
  display: flex;
  gap: var(--sc-p-space-24);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cs-screens::-webkit-scrollbar { display: none; }
.cs-screen {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sc-p-space-12);
  align-items: center;
}
.cs-screen__phone {
  width: var(--cs-phone-w);
  height: 540px;
  padding: var(--sc-p-space-8);
  background: var(--cs-dark-raised);
  border: var(--sc-border-width-default) solid var(--cs-dark-line);
  border-radius: var(--cs-phone-radius);
  overflow: hidden;
}
.cs-screen__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: calc(var(--cs-phone-radius) - var(--sc-p-space-8));
  background: var(--cs-dark);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cs-screen__scroll::-webkit-scrollbar { display: none; }
.cs-screen__scroll:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--cs-accent);
  outline-offset: var(--sc-border-focus-offset);
}
.cs-screen__scroll img { width: 100%; height: auto; display: block; }
.cs-screen__cap {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-on-dark-soft);
}

/* ============================================================
 * 07 DESIGN DECISIONS
 * ============================================================ */
.cs-decisions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--sc-p-space-64);
  row-gap: 0;
}
.cs-decision {
  padding: var(--sc-p-space-32) 0;
  border-top: var(--sc-border-width-default) solid var(--cs-line);
  display: flex;
  flex-direction: column;
  gap: var(--sc-p-space-12);
}
.cs-decision__title {
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-20);
  font-weight: var(--sc-p-font-weight-medium);
  line-height: var(--sc-p-font-line-height-snug);
  letter-spacing: var(--sc-p-font-tracking-snug);
  color: var(--cs-ink);
  margin: 0;
}
.cs-decision__body {
  font-family: var(--sc-font-text-body-default-family);
  font-size: var(--sc-font-text-body-dense-size);
  line-height: var(--sc-font-text-body-default-line-height);
  color: var(--cs-ink-soft);
  margin: 0;
}
.cs-decision__chip {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-accent);
  background: var(--cs-ground-raised);
  border-radius: var(--sc-radius-pill);
  padding: var(--sc-p-space-micro-6) var(--sc-p-space-12);
}
.cs-tag { color: var(--cs-accent); font-weight: var(--sc-p-font-weight-medium); }

/* ============================================================
 * 06 APP STORE (dark band) — drag strip
 * ============================================================ */
.cs-appstore__hint {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-accent);
  margin: var(--sc-p-space-16) 0 0;
}
.cs-strip {
  width: min(var(--cs-shell-max), calc(100% - var(--cs-gutter) * 2));
  margin: var(--sc-p-space-32) auto 0;
  height: 432px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--sc-radius-surface);
}
.cs-strip::-webkit-scrollbar { display: none; }
.cs-strip.is-dragging { cursor: grabbing; }
.cs-strip:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--cs-accent);
  outline-offset: calc(var(--sc-border-focus-offset) * -1);
}
.cs-strip__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  width: max-content;
  height: 100%;
}
.cs-strip__item { flex: 0 0 auto; height: 100%; }
.cs-strip__item img { height: 100%; width: auto; display: block; user-select: none; -webkit-user-drag: none; }

/* ============================================================
 * 08 FULL SCOPE — table
 * ============================================================ */
.cs-table-wrap { margin-top: var(--sc-p-space-48); overflow-x: auto; }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table thead th {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-ink-soft);
  font-weight: var(--sc-p-font-weight-medium);
  text-align: left;
  padding: 0 var(--sc-p-space-24) var(--sc-p-space-16) 0;
  border-bottom: var(--sc-border-width-default) solid var(--cs-ink);
}
.cs-table tbody th,
.cs-table tbody td {
  text-align: left;
  vertical-align: top;
  padding: var(--sc-p-space-16) var(--sc-p-space-24) var(--sc-p-space-16) 0;
  border-bottom: var(--sc-border-width-default) solid var(--cs-line);
}
.cs-table tbody th {
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-font-text-body-dense-size);
  font-weight: var(--sc-p-font-weight-medium);
  color: var(--cs-ink);
  width: 22%;
}
.cs-table tbody td {
  font-family: var(--sc-font-text-body-default-family);
  font-size: var(--sc-font-text-body-dense-size);
  color: var(--cs-ink-soft);
}
.cs-table__plat {
  white-space: nowrap;
  width: 12%;
  font-family: var(--sc-font-text-mono-chrome-family) !important;
  font-size: var(--sc-font-text-mono-chrome-size) !important;
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-ink-soft) !important;
  text-align: right;
}

/* ============================================================
 * 10 PROTOTYPE — tabs left, device right
 * ============================================================ */
.cs-proto {
  margin-top: var(--sc-p-space-48);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: center;
  gap: var(--sc-p-space-64);
}
.cs-proto__nav {
  display: flex;
  flex-direction: column;
}
.cs-proto__tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--sc-p-space-16);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: var(--sc-border-width-default) solid var(--cs-line);
  padding: var(--sc-p-space-24) 0;
  cursor: pointer;
  transition: color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}
.cs-proto__tab:last-child { border-bottom: var(--sc-border-width-default) solid var(--cs-line); }
.cs-proto__flow {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-ink-soft);
}
.cs-proto__name {
  display: inline-flex;
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-24);
  font-weight: var(--sc-p-font-weight-medium);
  letter-spacing: var(--sc-p-font-tracking-snug);
  color: var(--cs-ink);
}
/* Per-letter lift + red on hover — mirrors the brand.shokunincrafthouse.com
   left-panel nav. JS wraps each glyph in .cs-ltr with a --ltr stagger index. */
.cs-ltr {
  display: inline-block;
  white-space: pre;
  transition: transform var(--sc-motion-mode-duration) var(--sc-p-motion-easing-out) calc(var(--ltr) * 22ms),
              color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing) calc(var(--ltr) * 22ms);
}
.cs-proto__arrow {
  font-family: var(--sc-p-font-family-sans);
  color: var(--cs-ink-soft);
  transition: transform var(--sc-motion-mode-duration) var(--sc-p-motion-easing-out),
              color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}
.cs-proto__tab:hover .cs-ltr,
.cs-proto__tab:focus-visible .cs-ltr { transform: translateY(-0.22em); color: var(--cs-accent); }
.cs-proto__tab:hover .cs-proto__arrow,
.cs-proto__tab:focus-visible .cs-proto__arrow { color: var(--cs-accent); transform: translateX(var(--sc-p-space-4)); }
.cs-proto__tab:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--cs-accent);
  outline-offset: calc(var(--sc-border-focus-offset) * -1);
}
.cs-proto__tab.is-active .cs-proto__name,
.cs-proto__tab.is-active .cs-ltr { color: var(--cs-accent); }
.cs-proto__tab.is-active .cs-proto__flow { color: var(--cs-accent); }
.cs-proto__tab.is-active .cs-proto__arrow { color: var(--cs-accent); }

.cs-proto__device {
  position: relative;
  width: var(--cs-phone-w);
  height: 560px;
  padding: var(--sc-p-space-8);
  background: var(--cs-dark-raised);
  border: var(--sc-border-width-default) solid var(--cs-dark-line);
  border-radius: var(--cs-phone-radius);
  overflow: hidden;
  justify-self: center;
}
.cs-proto__device .cs-phone__bar { color: var(--sc-p-color-utility-white); }
.cs-proto__screen {
  position: absolute;
  inset: var(--sc-p-space-8);
  border-radius: calc(var(--cs-phone-radius) - var(--sc-p-space-8));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--cs-dark);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cs-proto__screen::-webkit-scrollbar { display: none; }
.cs-proto__shot { display: none; width: 100%; height: auto; }
.cs-proto__shot.is-active { display: block; }

/* ============================================================
 * 09 ADMIN — browser deck
 * ============================================================ */
.cs-deck { margin-top: var(--sc-p-space-48); }
.cs-deck__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--sc-p-space-64);
}
.cs-deck__card {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--cs-dark-raised);
  border-radius: var(--sc-radius-surface);
  overflow: hidden;
  transform-origin: center;
  transition: transform var(--sc-motion-mode-duration) var(--sc-p-motion-easing-cinematic),
              opacity var(--sc-motion-mode-duration) var(--sc-p-motion-easing-cinematic);
  will-change: transform, opacity;
}
.cs-deck__card[data-depth="0"] { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; z-index: 6; cursor: pointer; }
.cs-deck__card[data-depth="1"] { transform: translateY(var(--sc-p-space-8)) scale(0.97) rotate(2deg); opacity: 0.85; z-index: 5; }
.cs-deck__card[data-depth="2"] { transform: translateY(var(--sc-p-space-16)) scale(0.94) rotate(-1.5deg); opacity: 0.6; z-index: 4; }
.cs-deck__card[data-depth="3"] { transform: translateY(var(--sc-p-space-24)) scale(0.91) rotate(2.5deg); opacity: 0.4; z-index: 3; }
.cs-deck__card[data-depth="4"] { transform: translateY(var(--sc-p-space-32)) scale(0.88) rotate(-2deg); opacity: 0.22; z-index: 2; }
.cs-deck__card[data-depth="5"] { transform: translateY(var(--sc-p-space-48)) scale(0.85) rotate(1.5deg); opacity: 0.1; z-index: 1; }
.cs-deck__card:not([data-depth="0"]) { pointer-events: none; }
.cs-deck__bar {
  display: flex; align-items: center; gap: var(--sc-p-space-8);
  padding: var(--sc-p-space-12) var(--sc-p-space-16);
  background: var(--cs-dark-deep);
  border-bottom: var(--sc-border-width-default) solid var(--cs-dark-line);
  flex: none;
}
.cs-deck__dot {
  width: var(--sc-p-space-12); height: var(--sc-p-space-12);
  border-radius: var(--sc-radius-pill);
  background: var(--cs-dark-line);
}
.cs-deck__url {
  margin-left: var(--sc-p-space-12);
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  color: var(--cs-on-dark-soft);
}
.cs-deck__card img { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top center; display: block; }
.cs-deck__card figcaption {
  position: absolute; left: 0; bottom: 0; width: 100%;
  padding: var(--sc-p-space-12) var(--sc-p-space-16);
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-on-dark);
  background: linear-gradient(to top, var(--cs-dark), transparent);
}
.cs-deck__controls {
  display: flex; align-items: center; gap: var(--sc-p-space-16);
}
.cs-deck__btn {
  font-family: var(--sc-p-font-family-mono);
  font-size: var(--sc-font-text-body-default-size);
  color: var(--cs-ink);
  background: transparent;
  border: var(--sc-border-width-default) solid var(--cs-line);
  border-radius: var(--sc-radius-control);
  width: var(--sc-p-space-48); height: var(--sc-p-space-32);
  cursor: pointer;
  transition: box-shadow var(--sc-motion-hover-duration) var(--sc-motion-hover-easing),
              color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing),
              transform var(--sc-motion-press-duration) var(--sc-motion-press-easing);
}
.cs-deck__btn:hover { color: var(--cs-accent); box-shadow: inset 0 0 0 var(--sc-border-width-focus) var(--cs-accent); }
.cs-deck__btn:active { transform: scale(var(--sc-motion-press-scale)); }
.cs-deck__btn:focus-visible { outline: var(--sc-border-width-focus) solid var(--cs-accent); outline-offset: var(--sc-border-focus-offset); }
.cs-deck__dots { display: flex; gap: var(--sc-p-space-8); }
.cs-deck__dots button {
  width: var(--sc-p-space-8); height: var(--sc-p-space-8);
  padding: 0; border: 0; border-radius: var(--sc-radius-pill);
  background: var(--cs-line); cursor: pointer;
}
.cs-deck__dots button[aria-selected="true"] { background: var(--cs-accent); }
.cs-deck__dots button:focus-visible { outline: var(--sc-border-width-focus) solid var(--cs-accent); outline-offset: var(--sc-border-focus-offset); }
.cs-deck__counter {
  margin-left: auto;
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  color: var(--cs-ink-soft);
}

/* ===== Admin head (title + Flats/Prototype toggle) ===== */
.cs-admin__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sc-p-space-24);
}
.cs-toggle {
  display: inline-flex;
  flex: none;
  gap: var(--sc-p-space-micro-2);
  padding: var(--sc-p-space-4);
  background: var(--cs-ground-raised);
  border-radius: var(--sc-radius-pill);
}
.cs-toggle__btn {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-ink-soft);
  background: transparent;
  border: 0;
  border-radius: var(--sc-radius-pill);
  padding: var(--sc-p-space-micro-6) var(--sc-p-space-12);
  cursor: pointer;
  transition: color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing),
              background-color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}
.cs-toggle__btn:hover { color: var(--cs-ink); }
.cs-toggle__btn:focus-visible { outline: var(--sc-border-width-focus) solid var(--cs-accent); outline-offset: var(--sc-border-focus-offset); }
.cs-toggle__btn.is-active { background: var(--cs-accent); color: var(--sc-color-text-on-accent); }

/* ============================================================
 * CTA bar
 * ============================================================ */
.cs-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-p-space-24);
  margin-top: var(--sc-p-space-32);
  padding: var(--sc-p-space-24) var(--sc-p-space-32);
  background: var(--cs-ground-raised);
  border-radius: var(--sc-radius-surface);
  transition: box-shadow var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}
.cs-cta:hover { box-shadow: inset 0 0 0 var(--sc-border-width-focus) var(--cs-accent); }
.cs-cta:focus-visible { outline: var(--sc-border-width-focus) solid var(--cs-accent); outline-offset: var(--sc-border-focus-offset); }
.cs-cta__text { display: flex; flex-direction: column; gap: var(--sc-p-space-4); }
.cs-cta__text strong {
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-font-text-body-default-size);
  font-weight: var(--sc-p-font-weight-medium);
  color: var(--cs-ink);
}
.cs-cta__sub {
  font-family: var(--sc-font-text-body-dense-family);
  font-size: var(--sc-font-text-body-dense-size);
  color: var(--cs-ink-soft);
}
.cs-cta__action {
  flex: none;
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-accent);
}

/* ============================================================
 * 11 RESULTS — stats + quote
 * ============================================================ */
.cs-results__lede { max-width: 18ch; }
.cs-stats {
  margin: var(--sc-p-space-48) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: var(--sc-border-width-default) solid var(--cs-line);
  border-radius: var(--sc-radius-surface);
  overflow: hidden;
}
.cs-stat {
  padding: var(--sc-p-space-48) var(--sc-p-space-32);
  border-left: var(--sc-border-width-default) solid var(--cs-line);
  text-align: center;
}
.cs-stat:first-child { border-left: 0; }
.cs-stat__num {
  font-family: var(--sc-p-font-family-mono);
  font-size: var(--sc-p-font-size-60);
  font-weight: var(--sc-p-font-weight-medium);
  letter-spacing: var(--sc-p-font-tracking-tight);
  color: var(--cs-ink);
  line-height: var(--sc-p-font-line-height-flat);
  margin: 0 0 var(--sc-p-space-12);
}
.cs-stat__label {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-ink-soft);
  margin: 0;
}
.cs-quote {
  margin: var(--sc-p-space-64) 0 0;
  padding-left: var(--sc-p-space-24);
  border-left: var(--sc-border-width-accent) solid var(--cs-accent);
  max-width: 1000px;
}
.cs-quote__text {
  font-family: var(--sc-p-font-family-serif-text);
  font-size: var(--sc-p-font-size-32);
  font-style: italic;
  line-height: var(--sc-p-font-line-height-snug);
  letter-spacing: var(--sc-p-font-tracking-tight);
  color: var(--cs-ink);
  margin: 0 0 var(--sc-p-space-16);
}
.cs-quote__cite {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  font-style: normal;
  color: var(--cs-ink-soft);
}

/* ============================================================
 * 12 REFLECTION (dark band) — uses .cs-band
 * ============================================================ */
.cs-reflection__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sc-p-space-64);
}
.cs-reflection__copy { max-width: 560px; }
.cs-reflection__viewer {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.cs-reflection__viewer.is-dragging { cursor: grabbing; }
.cs-reflection__viewer canvas { width: 100%; height: 100%; display: block; }

/* ============================================================
 * 13 CASE STUDIES (next / prev)
 * ============================================================ */
.cs-more__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sc-p-space-32);
}
.cs-thumb { min-width: 0; }
.cs-thumb__link {
  display: flex;
  flex-direction: column;
  gap: var(--sc-p-space-12);
}
.cs-thumb__media {
  position: relative;
  aspect-ratio: 200 / 95;
  border-radius: var(--sc-radius-surface);
  overflow: hidden;
  background: var(--cs-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}
.cs-thumb__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-thumb__name {
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-font-text-body-dense-size);
  font-weight: var(--sc-p-font-weight-medium);
  color: var(--cs-on-dark-soft);
  text-align: center;
  padding: var(--sc-p-space-16);
}
.cs-thumb__link:hover .cs-thumb__media { box-shadow: inset 0 0 0 var(--sc-border-width-focus) var(--cs-accent); }
.cs-thumb__link:focus-visible { outline: var(--sc-border-width-focus) solid var(--cs-accent); outline-offset: var(--sc-border-focus-offset); border-radius: var(--sc-radius-control); }
.cs-thumb__title {
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-font-text-body-default-size);
  font-weight: var(--sc-p-font-weight-medium);
  color: var(--cs-ink);
}
.cs-thumb__cat {
  font-family: var(--sc-font-text-mono-chrome-family);
  font-size: var(--sc-font-text-mono-chrome-size);
  letter-spacing: var(--sc-font-text-mono-chrome-letter-spacing);
  text-transform: uppercase;
  color: var(--cs-ink-soft);
}

/* ============================================================
 * MOTION
 * ============================================================ */
@keyframes cs-rise {
  from { opacity: 0; transform: translateY(var(--sc-p-space-24)); }
  to   { opacity: 1; transform: none; }
}
[data-cs-load-item] {
  animation: cs-rise var(--sc-p-motion-duration-orchestrated) var(--sc-p-motion-easing-cinematic) both;
}
[data-cs-load-item]:nth-child(2) { animation-delay: 90ms; }
.cs-hero__phones[data-cs-load-item] { animation-delay: 180ms; }

.cs-js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--sc-p-space-16));
  transition: opacity var(--sc-motion-mode-duration) var(--sc-p-motion-easing-cinematic),
              transform var(--sc-motion-mode-duration) var(--sc-p-motion-easing-cinematic);
}
.cs-js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Static mode (?static=1): pin every entrance to its final state so headless
   full-page captures render the whole page, not a blank below-fold. */
.cs-static [data-cs-load-item] { animation: none !important; }
.cs-static [data-reveal],
.cs-static [data-reveal].is-revealed {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 1024px) {
  .cs-hero__title { font-size: var(--sc-p-font-size-60); }
  .cs-flow { grid-template-columns: repeat(3, 1fr); }
  .cs-overview__grid { grid-template-columns: 1fr; gap: var(--sc-p-space-32); }
  .cs-overview__logo { justify-self: start; max-width: 320px; }
  .cs-proto { grid-template-columns: 1fr; gap: var(--sc-p-space-48); justify-items: center; }
  .cs-proto__nav { width: 100%; max-width: 520px; }
  .cs-reflection__grid { grid-template-columns: 1fr; gap: var(--sc-p-space-48); }
  .cs-admin__head { flex-direction: column; }
  .cs-more__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .cs-section { padding-top: var(--sc-p-space-64); }
  .cs-band { padding-block: var(--sc-p-space-64); margin-top: var(--sc-p-space-64); }
  .cs-hero { min-height: auto; }
  .cs-hero__shell { grid-template-columns: 1fr; padding-block: var(--sc-p-space-80); gap: var(--sc-p-space-48); }
  .cs-hero__title { font-size: var(--sc-p-font-size-44); }
  .cs-hero__phones { height: 360px; order: 2; }
  .cs-meta__grid { grid-template-columns: repeat(2, 1fr); }
  .cs-meta__item { border-left: 0; padding-left: 0; border-top: var(--sc-border-width-default) solid var(--cs-line); }
  .cs-meta__item:first-child { border-top: 0; }
  .cs-meta__item:nth-child(2) { border-top: 0; }
  .cs-meta__item:nth-child(even) { padding-left: var(--sc-p-space-16); border-left: var(--sc-border-width-default) solid var(--cs-line); }
  .cs-flow { grid-template-columns: repeat(2, 1fr); }
  .cs-decisions { grid-template-columns: 1fr; column-gap: 0; }
  .cs-stats { grid-template-columns: 1fr; }
  .cs-stat { border-left: 0; border-top: var(--sc-border-width-default) solid var(--cs-line); }
  .cs-stat:first-child { border-top: 0; }
  .cs-more__grid { grid-template-columns: repeat(2, 1fr); }
  .cs-cta { flex-direction: column; align-items: flex-start; }
  .cs-quote__text { font-size: var(--sc-p-font-size-24); }
}

@media (max-width: 390px) {
  .cs-hero__title { font-size: var(--sc-p-font-size-44); }
  .cs-flow { grid-template-columns: 1fr; }
  .cs-meta__grid { grid-template-columns: 1fr; }
  .cs-meta__item { border-left: 0 !important; padding-left: 0 !important; border-top: var(--sc-border-width-default) solid var(--cs-line); }
  .cs-meta__item:first-child { border-top: 0; }
  .cs-more__grid { grid-template-columns: 1fr; }
  .cs-hero__phones { height: 320px; }
}

/* ============================================================
 * REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-cs-load-item] { animation: none !important; }
  .cs-js [data-reveal],
  .cs-js [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cs-deck__card { transition: none; }
  .cs-strip { scroll-behavior: auto; }
  .cs-ltr { transition: color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing); }
  .cs-proto__tab:hover .cs-ltr,
  .cs-proto__tab:focus-visible .cs-ltr { transform: none; }
}