/* Activate cross-document view transitions (Chrome 126+, Safari 18+, Firefox 131+) */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==================================================================
   Page Transitions
   The hero card is a shared named element — browser morphs its
   position/size between pages automatically. Root crossfades over
   the shared cream background for a seamless, no-flash feel.
   Both directions (forward + back) are handled automatically by
   the browser reading old vs new element positions.
================================================================== */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 380ms ease both vt-fade-out; }
  ::view-transition-new(root) { animation: 380ms ease both vt-fade-in; }
}

@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

/* ==================================================================
   Shell — max 1440px centered; body bg (#faf8f4) fills gutters
   seamlessly since it matches --cs-bg.
================================================================== */
.cs {
  --cs-pad: clamp(1.75rem, 4vw, 4rem);
  --cs-max: 1440px;
  --cs-fg: 21, 20, 15;
  --cs-bg: #faf8f4;
  background: var(--cs-bg);
  color: rgb(var(--cs-fg));
  --fg-rgb: 21, 20, 15;
  max-width: var(--cs-max);
  margin-inline: auto;
}

/* ==================================================================
   Header — frosted glass spans full viewport width but its CONTENT
   aligns with the 1440px column using a dynamic padding-inline.
   Formula: at ≤1440px → normal --cs-pad; at >1440px → half-gutter
   + --cs-pad so "Back Home" and "About" track the column edges.
================================================================== */
.cs-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(1.25rem, 3.2vh, 2rem);
  padding-inline: var(--cs-pad);
  background: rgba(250, 248, 244, 0.82);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  border-bottom: 1px solid rgba(21, 20, 15, 0.08);
  transform: translateZ(0); /* stable GPU layer — prevents backdrop-filter blink on scroll */
}

.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: rgb(var(--cs-fg));
  text-decoration: none;
  line-height: 1.5;
  transition: opacity 0.2s;
}
.cs-back:hover { opacity: 0.5; }
.cs-back:hover .cs-back__arrow { transform: translateX(-4px); }

.cs-back__arrow {
  display: inline-block;
  font-family: "Bebas Neue", sans-serif;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-header-about {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: rgb(var(--cs-fg));
  text-decoration: none;
  transition: opacity 0.2s;
}
.cs-header-about:hover { opacity: 0.5; }

/* ==================================================================
   Hero — sticky, full-viewport, absolute positioning (matches Figma)
   Title: left, vertically centered
   Image card: right half, vertically centered
================================================================== */
.cs-hero {
  position: sticky;
  top: 0;
  height: 100svh;
  background: var(--cs-bg);
  z-index: 0;
  overflow: hidden;
}

/* Brand title: left edge, vertically centered */
.cs-hero__title-wrap {
  position: absolute;
  left: var(--cs-pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.cs-hero__title-anim {
  will-change: transform, opacity;
}

.cs-title {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 6.1vw, 5.75rem); /* 92px at 1512px per Figma */
  line-height: 0.92;
  color: rgb(var(--cs-fg));
  white-space: nowrap;
}

/* Reduced max for titles that would otherwise crowd the image card */
.cs-title--long {
  font-size: clamp(3rem, 5.6vw, 5.25rem);
}

/* Image card: starts just past the midpoint, fills to right edge */
.cs-hero__card-wrap {
  position: absolute;
  left: clamp(300px, 43.4vw, 660px); /* 656px at 1512px per Figma */
  right: var(--cs-pad);
  top: 50%;
  transform: translateY(-50%);
}

.cs-hero__card {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(21, 20, 15, 0.12);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.4);
  will-change: transform;
  transform-origin: 50% 60%;
}


.cs-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Scroll indicator: centered at bottom */
.cs-scroll-hint {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(21, 20, 15, 0.2);
  color: rgb(var(--cs-fg));
  text-decoration: none;
  transition: border-color 0.25s;
  z-index: 1;
}
.cs-scroll-hint:hover { border-color: rgba(21, 20, 15, 0.5); }

@media (prefers-reduced-motion: no-preference) {
  .cs-scroll-hint { animation: hint-bob 2.8s ease-in-out infinite; }
}
@keyframes hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* ==================================================================
   Content card — slides over the sticky hero on scroll
================================================================== */
.cs-content {
  position: relative;
  z-index: 2;
  background: var(--cs-bg);
  border-radius: 28px 28px 28px 28px;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.09);
}

/* ==================================================================
   Overview — first section visible as card reveals
   Two-column: headline+desc left, metadata right
================================================================== */
.cs-overview {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0 clamp(3rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 6rem) var(--cs-pad);
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
  align-items: start;
}

.cs-overview__headline {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: rgb(var(--cs-fg));
  margin-bottom: 2rem;
}

.cs-overview__body {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(21, 20, 15, 0.72);
}

.cs-overview__body + .cs-overview__body { margin-top: 1rem; }

/* Metadata DL in right column */
.cs-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
  padding-top: 0;
}

.cs-meta__row {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-meta__row:last-child { border-bottom: none; }

.cs-meta dt {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: rgba(21, 20, 15, 0.38);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-meta dd {
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(var(--cs-fg));
}

/* ==================================================================
   Section base — all content chapters
================================================================== */
.cs-section {
  padding: clamp(4rem, 6.5vw, 6rem) var(--cs-pad);
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
}
.cs-section:last-child { border-bottom: none; }

.cs-chapter-no {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-bottom: 0.875rem;
}

.cs-section-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: rgb(var(--cs-fg));
  margin-bottom: 0;
  max-width: 675px;
}

.cs-section-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(21, 20, 15, 0.68);
  max-width: 58ch;
  margin-top: 1.25rem;
}

/* ==================================================================
   Annotated body row — body copy left, large typographic aside right.
   Fills empty whitespace with a short Bebas Neue statement that adds
   rhythm without competing with the main narrative.
================================================================== */
.cs-annotated {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.cs-aside-note {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.625rem, 2.2vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: 0.03em;
  color: rgba(21, 20, 15, 0.2);
  padding-top: 0.2rem; /* optical alignment with body cap-height */
}

/* ==================================================================
   Impact snapshot
================================================================== */
.cs-impact__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(3rem, 6vw, 7rem);
  margin-top: 2.5rem;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-impact__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-impact__arrow {
  color: rgba(21, 20, 15, 0.28);
  flex-shrink: 0;
}

.cs-impact__text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(21, 20, 15, 0.68);
}

/* ==================================================================
   Context
================================================================== */
.cs-context__body {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(21, 20, 15, 0.7);
  max-width: 62ch;
  margin-top: 1.5rem;
}

.cs-context__lead {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.375rem, 2vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: rgb(21, 20, 15);
  margin-top: 2rem;
}

.cs-risk-list {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-risk-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(21, 20, 15, 0.65);
}

.cs-risk-item::before {
  content: "→";
  font-family: "Bebas Neue", sans-serif;
  color: rgba(21, 20, 15, 0.22);
  flex-shrink: 0;
}

/* Collaboration phones — 6-up grid, consistent portrait ratio */
.cs-collabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.cs-collab-phone {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(21, 20, 15, 0.09);
  box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.18);
  aspect-ratio: 9 / 9;
}

.cs-collab-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Image + label component (used throughout) */
.cs-img-item { display: flex; flex-direction: column; }

.cs-img-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(21, 20, 15, 0.09);
  box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.14);
}

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

.cs-img-caption {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: rgba(21, 20, 15, 0.38);
  margin-top: 0.625rem;
  display: block;
}

/* Challenge needs grid */
.cs-challenge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem clamp(3rem, 6vw, 7rem);
  margin-top: 2.5rem;
}

.cs-challenge-item__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  color: rgba(21, 20, 15, 0.4);
  margin-bottom: 0.5rem;
}

.cs-challenge-item__body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(21, 20, 15, 0.65);
}

/* ==================================================================
   What I Owned — numbered responsibilities
================================================================== */
.cs-owned__list {
  margin-top: 2.75rem;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-owned__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 2.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
  align-items: start;
}

.cs-owned__num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 3.25rem;
  line-height: 1;
  color: rgba(21, 20, 15, 0.06);
  text-align: right;
  padding-top: 0.125rem;
}

.cs-owned__content-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: rgb(21, 20, 15);
  margin-bottom: 0.5rem;
}

.cs-owned__body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(21, 20, 15, 0.65);
}

/* Commerce 4-up screens */
.cs-screens-4up {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

.cs-screens-4up .cs-img-frame img {
  height: auto; /* show full image at natural ratio, no side-cropping */
}

/* ==================================================================
   Core Problem — four tensions
================================================================== */
.cs-tensions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
  margin-top: 2rem;
}

.cs-tension {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-tension:nth-child(odd) {
  padding-right: clamp(2rem, 5vw, 5rem);
  border-right: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-tension:nth-child(even) { padding-left: clamp(2rem, 5vw, 5rem); }
.cs-tension:nth-last-child(-n+2) { border-bottom: none; }

.cs-tension__headline {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: rgb(var(--cs-fg));
  margin-bottom: 0.875rem;
}

.cs-tension__vs {
  color: rgba(21, 20, 15, 0.25);
  margin: 0 0.3em;
}

.cs-tension__body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(21, 20, 15, 0.62);
  max-width: 38ch;
}

/* ==================================================================
   System Architecture
================================================================== */
.cs-arch__intro {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(21, 20, 15, 0.68);
  max-width: 62ch;
  margin-top: 1.5rem;
}

.cs-arch__sub {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

.cs-arch-needs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.cs-arch-need {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(21, 20, 15, 0.62);
  padding: 1rem 1.25rem;
  background: rgba(21, 20, 15, 0.025);
  border-radius: 10px;
  border: 1px solid rgba(21, 20, 15, 0.05);
}

.cs-arch-need::before {
  content: "—";
  color: rgba(21, 20, 15, 0.28);
  flex-shrink: 0;
  letter-spacing: 0;
}

.cs-arch__principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.cs-arch-card {
  padding: clamp(1.5rem, 2vw, 2rem);
  background: rgba(21, 20, 15, 0.025);
  border-radius: 16px;
  border: 1px solid rgba(21, 20, 15, 0.06);
}

.cs-arch-card__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: rgb(21, 20, 15);
  margin-bottom: 0.625rem;
}

.cs-arch-card__body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(21, 20, 15, 0.6);
}

.cs-arch__diagram {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(21, 20, 15, 0.09);
  padding: 24px;
}

.cs-arch__diagram img { width: 100%; display: block; }

/* ==================================================================
   Architecture Zoom — Magnifier (desktop) + Modal (all)
================================================================== */
.cs-arch-zoom {
  position: relative; /* anchor for lens + expand btn */
}

/* Hide cursor over image so the lens acts as the cursor (desktop) */
@media (pointer: fine) {
  .cs-arch-zoom { cursor: none; }
}

/* ── Magnifier lens ── */
.arch-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1.5px solid rgba(21, 20, 15, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  background-color: #faf8f4; /* blocks underlying image from bleeding through */
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 10;
  will-change: transform, background-position;
}

.arch-lens.is-visible { opacity: 1; }

/* ── Expand button (desktop, top-right corner on hover) ── */
.arch-expand-btn {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(21, 20, 15, 0.16);
  background: rgba(250, 248, 244, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgb(21, 20, 15);
  cursor: pointer; /* override container cursor: none */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  z-index: 20;
}

@media (pointer: fine) {
  .cs-arch-zoom:hover .arch-expand-btn { opacity: 1; }
}

.arch-expand-btn:hover {
  background: rgba(250, 248, 244, 1);
  border-color: rgba(21, 20, 15, 0.32);
}

/* ── Fullscreen modal ── */
.arch-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  background: #faf8f4; /* matches page body — no dark overlay */
  z-index: 500;
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* Only become flex layout when the dialog is actually open */
.arch-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch-modal::backdrop { display: none; }

.arch-modal.is-open { opacity: 1; }

/* Close button — dark on light background */
.arch-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(21, 20, 15, 0.18);
  background: rgba(21, 20, 15, 0.05);
  color: rgb(21, 20, 15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 10;
}

.arch-modal__close:hover {
  background: rgba(21, 20, 15, 0.1);
  border-color: rgba(21, 20, 15, 0.32);
}

.arch-modal__body {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.5rem 1.5rem;
  box-sizing: border-box;
  touch-action: pan-x pan-y pinch-zoom;
}

/* Wrapper so the pinch hint overlays the image exactly */
.arch-modal__img-wrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(21, 20, 15, 0.12);
}

/* Pinch hint inside the modal — dark fingers on image */
.arch-modal__img-wrap .arch-pinch-hint {
  background: rgba(21, 20, 15, 0.32);
  border-radius: 0;
}

.arch-modal__img-wrap .arch-pinch-hint__label {
  color: rgba(250, 248, 244, 0.95);
}

.arch-modal__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y pinch-zoom;
}

/* ── Mobile pinch hint overlay ── */
.arch-pinch-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  background: rgba(21, 20, 15, 0.42);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.arch-pinch-hint.is-visible {
  animation: arch-hint-show 2.8s ease forwards;
}

@keyframes arch-hint-show {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

.arch-pinch-hint__fingers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arch-finger {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.arch-finger--l {
  animation: arch-finger-l 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s infinite;
}

.arch-finger--r {
  animation: arch-finger-r 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s infinite;
}

@keyframes arch-finger-l {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-11px); }
}

@keyframes arch-finger-r {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(11px); }
}

.arch-pinch-hint__label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: rgba(250, 248, 244, 0.92);
}

.cs-arch-enabled {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* ==================================================================
   Engineering Collaboration
================================================================== */
.cs-eng__intro {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(21, 20, 15, 0.68);
  max-width: 62ch;
  margin-top: 1.5rem;
}

.cs-eng__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem clamp(3rem, 6vw, 7rem);
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
  padding-top: 2.5rem;
}

.cs-eng-item__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  letter-spacing: 0.04em;
  color: rgb(21, 20, 15);
  margin-bottom: 0.5rem;
}

.cs-eng-item__body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(21, 20, 15, 0.6);
}

.cs-eng__note {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(21, 20, 15, 0.55);
  max-width: 54ch;
  margin-bottom: 2.5rem;
  font-style: italic;
}

/* Full-width media (video) */
.cs-media-full {
  margin-top: 2.5rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(21, 20, 15, 0.09);
}

.cs-media-full video { width: 100%; display: block; }

.cs-media-ambient {
  max-width: 960px;
  margin-top: 4rem;
  margin-right: auto;
  margin-bottom: 4rem;
  margin-left: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}

.cs-media-ambient video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .cs-media-ambient {
    animation: cs-vid-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  @keyframes cs-vid-reveal {
    from { transform: scale(0.92); border-radius: 28px; }
    to   { transform: scale(1);    border-radius: 20px; }
  }
}

/* ==================================================================
   Research & Insight
================================================================== */
.cs-research__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(2.5rem, 5vw, 6rem);
  margin-top: 2rem;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
  padding-top: 2.5rem;
}

.cs-research-col__label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  margin-bottom: 1.5rem;
  display: block;
}

.cs-research-col__item {
  padding: 1.125rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-research-col__item:last-child { border-bottom: none; }

.cs-research-col__item-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: rgb(21, 20, 15);
  margin-bottom: 0.375rem;
  line-height: 1.2;
}

.cs-research-col__item-body {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(21, 20, 15, 0.6);
}

/* Analytics images — pair, same aspect ratio */
.cs-research__analytics {
  margin-top: 3rem;
  margin-bottom: 3rem;
  max-width: 900px;
}

.cs-research__analytics--centered {
  margin-left: auto;
  margin-right: auto;
}

.cs-research__analytics .cs-img-frame img {
  height: auto; /* show full image, no crop */
}

.cs-insights {
  border-top: 1px solid rgba(21, 20, 15, 0.07);
  padding-top: 2.5rem;
  margin-top: 3rem;
}

.cs-insights-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  margin-bottom: 2rem;
  display: block;
}

.cs-insight {
  display: block;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-insight:last-child { border-bottom: none; }

.cs-insight__header {
  position: relative;
  padding-left: calc(3.5rem + 2rem);
  margin-bottom: 0.35rem;
  /* The reserved height below is taller than a one-line title. Left
     top-aligned, every pixel of that slack fell between the title and the
     body, opening a gap roughly as tall as the title itself. Centring splits
     it, which also lines the title up with the middle of the number. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The number is absolutely positioned and taller than a single-line title,
     so without a floor it hangs below the header and crowds whatever follows.
     Full-width blocks like .cs-hypothesis start at x=0 and collide with it;
     indented ones (.cs-insight__body) merely sit tight beside it. Reserving
     the number's own height keeps the spacing identical either way, and costs
     nothing once a title wraps to two lines. Must track the font-size
     overrides at the 860px and 640px breakpoints. */
  min-height: 3.25rem;
}

.cs-insight__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 3.5rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 3.25rem;
  line-height: 1;
  color: rgba(21, 20, 15, 0.06);
  text-align: right;
}

.cs-insight__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: rgb(21, 20, 15);
}

.cs-insight__body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(21, 20, 15, 0.65);
  padding-left: calc(3.5rem + 2rem);
}

/* ==================================================================
   Outcomes & Signals
================================================================== */
.cs-outcomes__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0;
}

.cs-stat {
  padding: clamp(1.375rem, 2vw, 2rem);
  background: rgba(21, 20, 15, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(21, 20, 15, 0.06);
}

.cs-stat__value {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.5rem, 3.8vw, 3.5rem);
  line-height: 1;
  color: rgb(var(--cs-fg));
  display: block;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.cs-stat__label {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(21, 20, 15, 0.6);
}

.cs-outcomes__list {
  margin: 2.5rem 0;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-outcomes__item {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(21, 20, 15, 0.68);
}

.cs-outcomes__item:last-child { border-bottom: none; }

.cs-outcomes__item::before {
  content: "—";
  color: rgba(21, 20, 15, 0.28);
  flex-shrink: 0;
  letter-spacing: 0;
}

.cs-outcomes__sub {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

/* ==================================================================
   Reflection
================================================================== */
.cs-reflection__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(4rem, 7vw, 8rem);
  margin-top: 3rem;
}

.cs-reflection-col__label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  margin-bottom: 1.75rem;
  display: block;
}

.cs-reflection-col__item {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(21, 20, 15, 0.68);
  padding: 1.125rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-reflection-col__item:last-child { border-bottom: none; }

/* ==================================================================
   Live site CTA section
================================================================== */
.cs-cta-section {
  padding: clamp(5rem, 9vw, 8rem) var(--cs-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.cs-cta-section .cs-section-title {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
}

.cs-cta-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(21, 20, 15, 0.6);
  max-width: 46ch;
}

.cs-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  letter-spacing: 1.8px;
  color: rgb(21, 20, 15);
  text-decoration: none;
  border: 1.5px solid rgba(21, 20, 15, 0.2);
  border-radius: 100px;
  /* Bebas Neue is all-caps with an asymmetric em box (ascent well above the
     cap height, descender space the glyphs never use). Symmetric padding
     therefore centres the em box, not the visible caps, leaving the text
     sitting high. Padding is offset to centre the caps instead; the vertical
     total is unchanged. */
  padding: 1.1875rem 2rem 0.8125rem;
  transition: border-color 0.2s, background 0.2s;
  line-height: 1;
}

.cs-cta-link:hover {
  border-color: rgba(21, 20, 15, 0.55);
  background: rgba(21, 20, 15, 0.03);
}

.cs-cta-link__arrow {
  display: inline-block;
  font-size: 24px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-cta-link:hover .cs-cta-link__arrow { transform: translateX(4px); }

/* ==================================================================
   Fixed visit button — 60px right/bottom desktop
================================================================== */
.cs-visit {
  position: fixed;
  bottom: 60px;
  right: 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid rgba(21, 20, 15, 0.2);
  background: rgba(250, 248, 244, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--cs-fg));
  text-decoration: none;
  z-index: 80;
  opacity: 0;
  transform: scale(0.82) translateY(6px);
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s;
}

.cs-visit.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.cs-visit:hover {
  border-color: rgba(21, 20, 15, 0.5);
  background: rgba(250, 248, 244, 1);
  transform: scale(1.06) rotate(-8deg);
}

/* ==================================================================
   Next Case Study Outro
   Mirrors the case study hero layout. The wrapper (200svh, -100svh
   margin) tucks behind .cs-content so the rounded body slides off
   and reveals the outro underneath.
================================================================== */
.cs-outro-wrap {
  position: relative;
  z-index: 0;
  height: 200svh;
  max-width: 1440px;
  margin-top: -100svh;
  margin-inline: auto;
}

.cs-outro {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* Title left, vertically centered — mirrors .cs-hero__title-wrap */
.cs-outro__title-wrap {
  position: absolute;
  left: clamp(1.75rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.cs-outro__title-anim {
  opacity: 0;
  transform: translateY(40px);
  /* will-change set dynamically by JS only while animating */
}

.cs-outro__title {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 6.1vw, 5.75rem);
  line-height: 0.92;
  white-space: nowrap;
  margin: 0;
}

.cs-outro__title--long {
  font-size: clamp(3rem, 5.6vw, 5.25rem);
}

.cs-outro__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.2s;
}
.cs-outro__link:hover { opacity: 0.55; }
.cs-outro__link .cta-label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  letter-spacing: 1.8px;
  color: rgb(var(--fg-rgb));
}
.cs-outro__link .cta-arrow {
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  color: rgb(var(--fg-rgb));
  transition: transform 0.3s var(--ease);
}
.cs-outro__link:hover .cta-arrow { transform: translateX(4px); }

/* Card right side — mirrors .cs-hero__card-wrap */
.cs-outro__card-wrap {
  position: absolute;
  left: clamp(300px, 43.4vw, 660px);
  right: clamp(1.75rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-50%);
}

.cs-outro__card {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.4);
  transform-origin: 50% 60%;
  /* will-change set dynamically by JS only while animating */
}

.cs-outro__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.cs-outro--dark {
  background: #181f2b;
  color: #ffffff;
  --fg-rgb: 255, 255, 255;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-outro--dark .cs-outro__card { border: 1px solid rgba(255, 255, 255, 0.1); }

.cs-outro--light {
  background: #faf8f4;
  color: rgb(21, 20, 15);
  --fg-rgb: 21, 20, 15;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-outro--light .cs-outro__card { border: 1px solid rgba(21, 20, 15, 0.12); }

.cs-outro--egg {
  background: #111111;
  color: #ffffff;
  --fg-rgb: 255, 255, 255;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-outro--egg .cs-outro__card { border: 1px solid rgba(255, 255, 255, 0.1); }

/* ==================================================================
   Responsive
================================================================== */
@media (max-width: 1100px) {
  .cs-arch-enabled { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .cs-overview { grid-template-columns: 1fr; gap: 3rem; }
  .cs-overview__headline { max-width: 24ch; }
  .cs-arch__principles { grid-template-columns: 1fr; }
  .cs-research__cols { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-arch-enabled { grid-template-columns: 1fr; }
  /* screens-4up already 2x2 on desktop */
}

@media (max-width: 860px) {
  /* Standalone ambient videos sit outside .cs-section so they need explicit side margins */
  .cs-media-ambient { margin-inline: var(--cs-pad); }
  .cs-section .cs-media-ambient { margin-inline: 0; }

  /* Hero: stacks vertically, content centered, hint at bottom */
  .cs-hero {
    position: relative;
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    padding: 5.5rem var(--cs-pad) 5.5rem; /* top: clear header, bottom: clear hint */
  }
  .cs-hero__title-wrap {
    position: relative;
    left: auto; top: auto;
    transform: none;
    padding: 0;
  }
  .cs-hero__card-wrap {
    position: relative;
    left: auto; right: auto; top: auto;
    transform: none;
    padding: 0;
  }
  .cs-hero__card { aspect-ratio: 16/9; }
  .cs-title { white-space: normal; font-size: clamp(2.5rem, 8vw, 4rem); }
  .cs-scroll-hint {
    position: absolute;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    animation: none;
  }

  .cs-tensions { grid-template-columns: 1fr; }
  .cs-tension:nth-child(odd) { padding-right: 0; border-right: none; border-bottom: 1px solid rgba(21,20,15,0.07); }
  .cs-tension:nth-child(even) { padding-left: 0; }
  .cs-tension:nth-last-child(-n+2) { border-bottom: 1px solid rgba(21,20,15,0.07); }
  .cs-tension:last-child { border-bottom: none; }

  /* Annotated rows collapse on mobile — aside note hides */
  .cs-annotated { grid-template-columns: 1fr; }
  .cs-aside-note { display: none; }

  .cs-impact__grid { grid-template-columns: 1fr; }
  .cs-challenge-grid { grid-template-columns: 1fr; }
  .cs-owned__item { grid-template-columns: 2.5rem 1fr; gap: 1.5rem; }
  .cs-arch-needs { grid-template-columns: 1fr; }
  .cs-eng__items { grid-template-columns: 1fr; gap: 2rem; }
  .cs-outcomes__stats { grid-template-columns: 1fr 1fr; }
  .cs-reflection__cols { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-research__analytics { grid-template-columns: 1fr; }
  .cs-collabs { grid-template-columns: repeat(3, 1fr); }

  .cs-visit { right: 20px; bottom: 20px; width: 52px; height: 52px; }

  .cs-outro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    padding: 5.5rem clamp(1.75rem, 4vw, 4rem);
  }
  .cs-outro__title-wrap {
    position: relative;
    left: auto; top: auto;
    transform: none;
  }
  .cs-outro__title-anim { transform: none !important; opacity: 1 !important; }
  .cs-outro__title { white-space: normal; font-size: clamp(2.5rem, 8vw, 4rem); }
  .cs-outro__card-wrap {
    position: relative;
    left: auto; right: auto; top: auto;
    transform: none;
  }
  .cs-outro__card { aspect-ratio: 16/9; }
}

@media (max-width: 640px) {
  .cs-screens-4up { grid-template-columns: 1fr; }
  .cs-outcomes__stats { grid-template-columns: 1fr; }
  .cs-arch-enabled { grid-template-columns: 1fr; }
  .cs-collabs { grid-template-columns: repeat(2, 1fr); }
  .cs-visit { right: 16px; bottom: 16px; }
}

/* ==================================================================
   Who We Designed For — 4-card audience grid
================================================================== */
.cs-audience-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(21, 20, 15, 0.68);
  max-width: 62ch;
  margin-top: 1.25rem;
}

.cs-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.cs-audience-card {
  padding: clamp(1.5rem, 2vw, 2rem);
  background: rgba(21, 20, 15, 0.025);
  border-radius: 16px;
  border: 1px solid rgba(21, 20, 15, 0.06);
}

.cs-audience-card__type {
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-bottom: 0.5rem;
}

.cs-audience-card__name {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: rgb(21, 20, 15);
  margin-bottom: 0.75rem;
}

.cs-audience-card__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(21, 20, 15, 0.65);
  margin-bottom: 1.25rem;
}

.cs-audience-card__needs {
  border-top: 1px solid rgba(21, 20, 15, 0.07);
  padding-top: 0.875rem;
}

.cs-audience-card__need {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(21, 20, 15, 0.55);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.05);
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.cs-audience-card__need:last-child { border-bottom: none; }

.cs-audience-card__need::before {
  content: "→";
  font-family: "Bebas Neue", sans-serif;
  color: rgba(21, 20, 15, 0.2);
  flex-shrink: 0;
  letter-spacing: 0;
  font-size: 0.875rem;
}

/* ==================================================================
   Hypothesis callout — inline within insights
================================================================== */
.cs-hypothesis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 1.25rem;
  border: 1px solid rgba(21, 20, 15, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(21, 20, 15, 0.018);
}

.cs-hypothesis__col {
  padding: 1rem 1.25rem;
  border-right: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-hypothesis__col:last-child { border-right: none; }

/* Four-column variant: same callout with an A/B Test step added between
   Hypothesis and Signal, used where the methodology itself is the point.
   Falls back to 2-up before the shared 860px rule stacks it to one column. */
.cs-hypothesis--4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 861px) and (max-width: 1100px) {
  .cs-hypothesis--4 { grid-template-columns: repeat(2, 1fr); }
  /* In a 2-up grid the second column sits on the container edge, so
     :last-child alone would leave a stray divider mid-row. */
  .cs-hypothesis--4 .cs-hypothesis__col:nth-child(2n) { border-right: none; }
  .cs-hypothesis--4 .cs-hypothesis__col:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(21, 20, 15, 0.07);
  }
}

.cs-hypothesis + .cs-insight__body { margin-top: 1.5rem; }

.cs-hypothesis__label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-bottom: 0.4rem;
}

.cs-hypothesis__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(21, 20, 15, 0.6);
}

/* ==================================================================
   Before / After structural diagram
================================================================== */
.cs-compare-wrap {
  margin-top: 3.5rem;
}

.cs-compare-wrap__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-bottom: 1.5rem;
}

.cs-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.cs-compare + .cs-compare {
  margin-top: 1.5rem;
}

.cs-compare__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.cs-compare__label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: rgba(21, 20, 15, 0.45);
}

.cs-compare__tag {
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  color: rgba(21, 20, 15, 0.38);
  background: rgba(21, 20, 15, 0.04);
  border: 1px solid rgba(21, 20, 15, 0.08);
  border-radius: 100px;
  /* Bebas Neue is all-caps with an asymmetric em box (ascent well above the
     cap height, descender space the glyphs never use). Symmetric padding
     therefore centres the em box, not the visible caps, leaving the text
     sitting high. Padding is offset to centre the caps instead; the vertical
     total is unchanged. */
  padding: 0.22rem 0.625rem 0.18rem;
  line-height: 1.5;
}

.cs-compare-stack {
  border: 1px solid rgba(21, 20, 15, 0.09);
  border-radius: 14px;
  overflow: hidden;
}

.cs-compare-block {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(21, 20, 15, 0.06);
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(21, 20, 15, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: transparent;
}

.cs-compare-block:last-child { border-bottom: none; }

.cs-compare-block--new {
  background: rgba(21, 20, 15, 0.035);
  color: rgba(21, 20, 15, 0.72);
}

.cs-compare-block--promoted {
  background: rgba(21, 20, 15, 0.05);
  color: rgba(21, 20, 15, 0.78);
  font-weight: 500;
}

.cs-compare-block--removed {
  color: rgba(21, 20, 15, 0.25);
  text-decoration: line-through;
  font-size: 0.8125rem;
}

.cs-compare-block__badge {
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: rgba(21, 20, 15, 0.4);
  background: rgba(21, 20, 15, 0.05);
  border: 1px solid rgba(21, 20, 15, 0.09);
  border-radius: 100px;
  /* Bebas Neue is all-caps with an asymmetric em box (ascent well above the
     cap height, descender space the glyphs never use). Symmetric padding
     therefore centres the em box, not the visible caps, leaving the text
     sitting high. Padding is offset to centre the caps instead; the vertical
     total is unchanged. */
  padding: 0.17rem 0.5rem 0.13rem;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}

.cs-compare-block--new .cs-compare-block__badge,
.cs-compare-block--promoted .cs-compare-block__badge {
  color: rgba(21, 20, 15, 0.55);
  background: rgba(21, 20, 15, 0.08);
  border-color: rgba(21, 20, 15, 0.12);
}

.cs-compare-divider {
  font-family: "Bebas Neue", sans-serif;
  /* Same job as .cs-compare-wrap__title, so it matches the section-label
     convention used site-wide (1rem / 0.3) rather than the smaller in-component
     label tier. Keeps its own margins: it divides two comparison blocks. */
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* ==================================================================
   What We Revised — course-correction stories
================================================================== */
.cs-revised-cards {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-revised-card {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-revised-card:last-child { border-bottom: none; }

.cs-revised-card__header {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 2.5rem;
  /* Same reasoning as .cs-insight__header: the number is taller than a
     one-line title, so start-alignment pushed the title to the top of an
     over-tall row. */
  align-items: center;
  margin-bottom: 1.5rem;
}

.cs-revised-card__num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 3.25rem;
  line-height: 1;
  color: rgba(21, 20, 15, 0.06);
  text-align: right;
  padding-top: 0.125rem;
}

.cs-revised-card__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: rgb(21, 20, 15);
}

.cs-revised-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(21, 20, 15, 0.07);
  border-radius: 12px;
  overflow: hidden;
  margin-left: 6rem;
}

.cs-revised-step {
  padding: 1.25rem 1.25rem;
  border-right: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-revised-step:last-child { border-right: none; }

.cs-revised-step__label {
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-bottom: 0.625rem;
}

.cs-revised-step__body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(21, 20, 15, 0.65);
}

/* Responsive additions */
@media (max-width: 860px) {
  .cs-audience-grid { grid-template-columns: 1fr; }
  .cs-hypothesis {
    grid-template-columns: 1fr;
    border-radius: 10px;
  }
  .cs-hypothesis__col {
    border-right: none;
    border-bottom: 1px solid rgba(21, 20, 15, 0.07);
  }
  .cs-hypothesis__col:last-child { border-bottom: none; }
  .cs-compare { grid-template-columns: 1fr; gap: 2rem; }
  .cs-revised-steps {
    grid-template-columns: repeat(2, 1fr);
    margin-left: 0;
  }
  .cs-revised-step:nth-child(2) { border-right: none; }
  .cs-revised-step:nth-child(1),
  .cs-revised-step:nth-child(2) { border-bottom: 1px solid rgba(21, 20, 15, 0.07); }
  .cs-revised-card__header { grid-template-columns: 2.5rem 1fr; gap: 1.5rem; }
  .cs-revised-card__num { font-size: 2.5rem; }
  .cs-insight__num { font-size: 2.5rem; }
  .cs-insight__header { min-height: 2.5rem; }
}

@media (max-width: 640px) {
  .cs-revised-steps { grid-template-columns: 1fr; }
  .cs-revised-step { border-right: none; border-bottom: 1px solid rgba(21, 20, 15, 0.07); }
  .cs-revised-step:last-child { border-bottom: none; }
  .cs-revised-step:nth-child(1),
  .cs-revised-step:nth-child(2) { border-bottom: 1px solid rgba(21, 20, 15, 0.07); }
  .cs-insight > .cs-insight__body { padding-left: 0; }
  /* Number is hidden here, so the reserved space must go with it. */
  .cs-insight__header { padding-left: 0; min-height: 0; }
  .cs-insight__num { display: none; }
}

/* ==================================================================
   Navigation evolution diagram — before/after tab-bar comparison
================================================================== */
.cs-nav-evo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.cs-nav-evo__item {
  border: 1px solid rgba(21, 20, 15, 0.08);
  border-radius: 14px;
  padding: 1.5rem;
  background: rgba(21, 20, 15, 0.015);
}

.cs-nav-evo__tag {
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: rgba(21, 20, 15, 0.3);
  display: block;
  margin-bottom: 1rem;
}

.cs-nav-bar {
  display: flex;
  background: rgba(21, 20, 15, 0.03);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(21, 20, 15, 0.07);
}

.cs-nav-tab {
  flex: 1;
  padding: 0.875rem 0.375rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(21, 20, 15, 0.5);
  border-right: 1px solid rgba(21, 20, 15, 0.06);
  line-height: 1.35;
}

.cs-nav-tab:last-child { border-right: none; }

.cs-nav-tab--dropped {
  opacity: 0.28;
  text-decoration: line-through;
  text-decoration-color: rgba(21, 20, 15, 0.4);
}

.cs-nav-evo__note {
  margin-top: 0.875rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(21, 20, 15, 0.42);
}

@media (max-width: 640px) {
  .cs-nav-evo { grid-template-columns: 1fr; }
}