/* ==========================================================================
   CASE STUDY - "Dark Menu Editorial" design system
   Consumes tokens from styles.css. Full-bleed hero, deliverables band,
   challenge/strategy split, bento showcase, ghost-numbered impact ledger.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* atmospheric */
  --cs-bloom-1: radial-gradient(ellipse 60% 50% at 15% 20%, rgba(212,165,55,0.06) 0%, transparent 70%);
  --cs-bloom-2: radial-gradient(ellipse 50% 60% at 85% 75%, rgba(212,165,55,0.04) 0%, transparent 70%);
  /* scroll progress */
  --cs-progress: 0%;
  /* reveal */
  --cs-reveal-y: 28px;
}

/* --------------------------------------------------------------------------
   ATMOSPHERIC BACKDROP
   -------------------------------------------------------------------------- */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: var(--cs-bloom-1), var(--cs-bloom-2);
}
.bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
}
.bloom--1 {
  width: 600px;
  height: 600px;
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(212,165,55,0.08) 0%, transparent 70%);
}
.bloom--2 {
  width: 500px;
  height: 500px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(212,165,55,0.05) 0%, transparent 70%);
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* --------------------------------------------------------------------------
   REVEAL PRIMITIVES
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--cs-reveal-y));
  transition: opacity var(--dur-slow, 600ms) var(--ease-emphatic, cubic-bezier(0.22,1,0.36,1)),
              transform var(--dur-slow, 600ms) var(--ease-emphatic, cubic-bezier(0.22,1,0.36,1));
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }
.reveal[data-delay="4"] { transition-delay: 400ms; }
.reveal[data-delay="5"] { transition-delay: 500ms; }
.reveal[data-delay="6"] { transition-delay: 600ms; }
.reveal[data-delay="7"] { transition-delay: 700ms; }
.reveal[data-delay="8"] { transition-delay: 800ms; }
.reveal[data-delay="9"] { transition-delay: 900ms; }

/* --------------------------------------------------------------------------
   SCROLL PROGRESS RULE (fixed gold bar)
   -------------------------------------------------------------------------- */
.cs-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: var(--cs-progress);
  background: linear-gradient(90deg, var(--c-gold, #d4a537) 0%, rgba(212,165,55,0.55) 100%);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px rgba(212,165,55,0.35);
  transition: width 0.15s linear;
  z-index: 1200;
}

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
  margin-bottom: var(--space-8);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.breadcrumb li {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-small, 0.875rem);
  color: var(--c-fg-dim, rgba(255,255,255,0.55));
  letter-spacing: 0.02em;
}
.breadcrumb li::after {
  content: "/";
  margin-left: 6px;
  opacity: 0.35;
  color: var(--c-fg-dim, rgba(255,255,255,0.55));
}
.breadcrumb li:last-child::after {
  display: none;
}
.breadcrumb a {
  color: var(--c-fg-muted, rgba(255,255,255,0.60));
  text-decoration: none;
  transition: color var(--dur-fast, 180ms) var(--ease-out);
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   HERO - full-bleed, bottom-anchored editorial spread
   -------------------------------------------------------------------------- */
.cs-hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-bottom: clamp(64px, 9vw, 120px);
}
.cs-hero__media {
  position: absolute;
  inset: 0;
}
.cs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateY(var(--parallax, 0)) scale(1.08);
  will-change: transform;
}
.cs-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--c-bg, #0a0a0a) 8%, rgba(10,10,10,0.62) 42%, rgba(10,10,10,0.12) 70%, rgba(10,10,10,0.4) 100%);
}
.cs-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.cs-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: end;
}
.cs-hero__text {
  max-width: 820px;
}
.cs-hero__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-mini, 0.75rem);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow, 0.18em);
  text-transform: uppercase;
  color: var(--c-gold, #d4a537);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.cs-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--c-gold, #d4a537);
  flex-shrink: 0;
}
.cs-hero__title {
  font-family: var(--font-serif, Fraunces, serif);
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--c-fg, #fff);
  margin: var(--space-5) 0 var(--space-6);
}
.cs-hero__accent {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--c-gold, #d4a537);
  font-size: 0.42em;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: var(--space-3);
}
.cs-hero__lead {
  max-width: 56ch;
  font-size: var(--fs-lead, 1.15rem);
  line-height: var(--lh-loose, 1.7);
  color: var(--c-fg-soft, rgba(255,255,255,0.78));
  margin: 0;
}
.cs-hero__meta {
  margin: 0;
  display: flex;
  gap: var(--space-7);
  border-left: 1px solid var(--c-line-strong, rgba(255,255,255,0.24));
  padding-left: var(--space-7);
  padding-block: var(--space-4);
  flex-shrink: 0;
}
.cs-hero__meta-item dt {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-mini, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-gold, #d4a537);
  margin: 0 0 var(--space-2);
}
.cs-hero__meta-item dd {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: var(--fs-20, 1.25rem);
  font-weight: 600;
  color: var(--c-fg, #fff);
  margin: 0;
}

/* --------------------------------------------------------------------------
   BAND - deliverables + quick stats
   -------------------------------------------------------------------------- */
.cs-band {
  position: relative;
  z-index: 2;
  background: var(--c-bg-elevated, #111);
  border-block: 1px solid var(--c-line, rgba(255,255,255,0.12));
  padding-block: var(--space-8, 64px);
}
.cs-band__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-8, 64px);
  align-items: start;
}
.cs-band__label {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-mini, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-gold, #d4a537);
  margin: 0 0 var(--space-5);
}
.cs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3, 12px);
}
.cs-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  color: var(--c-fg-soft, rgba(255,255,255,0.78));
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-normal, 1.55);
}
.cs-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold, #d4a537);
  flex-shrink: 0;
}
.cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 16px);
}
.cs-stat {
  background: var(--c-bg-soft, #161616);
  border: 1px solid var(--c-line, rgba(255,255,255,0.12));
  border-radius: var(--radius-md, 14px);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  min-height: 160px;
  transition: border-color var(--dur-base, 320ms) var(--ease-out),
              transform var(--dur-base, 320ms) var(--ease-out);
}
.cs-stat:hover {
  border-color: rgba(212,165,55,0.3);
  transform: translateY(-4px);
}
.cs-stat__num {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
}
.cs-stat__num > span:first-child {
  display: inline-flex;
  align-items: baseline;
}
.cs-stat__sign {
  color: var(--c-gold, #d4a537);
  font-weight: 600;
}
.cs-stat__icon {
  color: var(--c-gold, #d4a537);
  flex-shrink: 0;
}
.cs-stat__label {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-mini, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-fg-muted, rgba(255,255,255,0.60));
}

/* --------------------------------------------------------------------------
   SPLIT - challenge & strategy
   -------------------------------------------------------------------------- */
.cs-split {
  position: relative;
  z-index: 2;
  padding-block: clamp(88px, 12vw, 160px);
}
.cs-split__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(var(--space-7, 48px), 6vw, var(--space-9, 96px));
  align-items: center;
}
.cs-split__media {
  position: relative;
  margin: 0;
}
.cs-split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg, 24px);
  filter: grayscale(1);
  transition: filter 0.7s var(--ease-soft, cubic-bezier(0.25,0.46,0.45,0.94));
}
.cs-split__media:hover img {
  filter: grayscale(0);
}
.cs-split__media::after {
  content: "";
  position: absolute;
  top: -48px;
  right: -48px;
  width: 260px;
  height: 260px;
  background: rgba(212,165,55,0.09);
  filter: blur(90px);
  border-radius: 50%;
  z-index: -1;
}
.cs-split__blocks {
  display: grid;
}
.cs-num-block {
  padding-block: var(--space-7, 48px);
}
.cs-num-block + .cs-num-block {
  border-top: 1px solid var(--c-line, rgba(255,255,255,0.12));
}
.cs-num-block__tag {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-mini, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-gold, #d4a537);
  display: block;
  margin-bottom: var(--space-4, 16px);
}
.cs-num-block h2 {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-fg, #fff);
  margin: 0 0 var(--space-5, 24px);
}
.cs-num-block p {
  color: var(--c-fg-soft, rgba(255,255,255,0.78));
  line-height: var(--lh-loose, 1.7);
  max-width: 52ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   BENTO - visual showcase
   -------------------------------------------------------------------------- */
.cs-bento {
  position: relative;
  z-index: 2;
  background: var(--c-bg-elevated, #111);
  border-block: 1px solid var(--c-line, rgba(255,255,255,0.12));
  padding-block: clamp(88px, 12vw, 160px);
}
.cs-bento__head {
  max-width: 720px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.cs-bento__head h2 {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: var(--fs-h2, clamp(2.2rem, 4.5vw, 3.6rem));
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-fg, #fff);
  margin: 0 0 var(--space-4, 16px);
}
.cs-bento__head p {
  color: var(--c-fg-muted, rgba(255,255,255,0.60));
  font-size: var(--fs-lead, 1.15rem);
  line-height: var(--lh-loose, 1.7);
  margin: 0;
}
.cs-bento__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, minmax(300px, 1fr));
  gap: var(--space-4, 16px);
}
.cs-bento__tile {
  position: relative;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  border: 1px solid var(--c-line, rgba(255,255,255,0.12));
}
.cs-bento__tile--wide {
  grid-column: span 8;
  grid-row: span 2;
}
.cs-bento__tile--stat {
  grid-column: span 4;
  grid-row: span 1;
  background: var(--c-bg-soft, #161616);
  padding: var(--space-6, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}
.cs-bento__tile--menu {
  grid-column: span 4;
  grid-row: span 1;
  background: linear-gradient(160deg, var(--c-bg-elevated, #111), var(--c-bg-soft, #161616));
  padding: var(--space-6, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}
.cs-bento__tile--wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-soft, cubic-bezier(0.25,0.46,0.45,0.94));
}
.cs-bento__tile--wide:hover img {
  transform: scale(1.04);
}
.cs-bento__tag {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-mini, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-gold, #d4a537);
}
.cs-bento__stat {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-fg, #fff);
  display: flex;
  align-items: baseline;
}
.cs-bento__stat .cs-stat__sign {
  color: var(--c-gold, #d4a537);
}
.cs-bento__stat-label {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-mini, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-fg-muted, rgba(255,255,255,0.60));
}
.cs-menu {
  list-style: none;
  margin: var(--space-4, 16px) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3, 12px);
}
.cs-menu li {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-small, 0.875rem);
  color: var(--c-fg-soft, rgba(255,255,255,0.78));
  position: relative;
  padding-left: 18px;
  line-height: var(--lh-normal, 1.55);
}
.cs-menu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--c-gold, #d4a537);
}

/* --------------------------------------------------------------------------
   IMPACT LEDGER - sticky headline + ghost-numbered rows
   -------------------------------------------------------------------------- */
.cs-impact {
  position: relative;
  z-index: 2;
  padding-block: clamp(88px, 12vw, 160px);
}
.cs-impact__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-9, 96px);
  align-items: start;
}
.cs-impact__head {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-fg, #fff);
  margin: 0;
  position: sticky;
  top: calc(var(--nav-height, 76px) + 32px);
}
.cs-impact__head em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--c-gold, #d4a537);
  font-size: 0.7em;
}
.cs-impact__list {
  display: grid;
}
.cs-impact__row {
  display: flex;
  gap: var(--space-6, 32px);
  align-items: flex-start;
  padding-block: var(--space-8, 64px);
}
.cs-impact__row + .cs-impact__row {
  border-top: 1px solid var(--c-line, rgba(255,255,255,0.12));
}
.cs-impact__ghost {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 0.8;
  color: var(--c-gold, #d4a537);
  opacity: 0.18;
  flex-shrink: 0;
  min-width: 1.2em;
}
.cs-impact__body h3 {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: var(--fs-h3, clamp(1.4rem, 2.2vw, 1.8rem));
  font-weight: 600;
  color: var(--c-fg, #fff);
  margin: 0 0 var(--space-3, 12px);
}
.cs-impact__body p {
  color: var(--c-fg-soft, rgba(255,255,255,0.78));
  line-height: var(--lh-loose, 1.7);
  max-width: 56ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.cs-faq {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-inline: auto;
  padding: 0 var(--container-pad, 40px) clamp(88px, 10vw, 128px);
}
.cs-faq > h2 {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: var(--fs-h2, clamp(2.2rem, 4.5vw, 3.6rem));
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-fg, #fff);
  margin: 0 0 var(--space-6, 32px);
}
.case-study-faq-item {
  border: 1px solid var(--c-line, rgba(255,255,255,0.12));
  border-radius: var(--radius-md, 14px);
  margin-bottom: var(--space-3, 12px);
  overflow: hidden;
  background: var(--c-bg-elevated, #111);
  transition: border-color var(--dur-base, 320ms) var(--ease-out);
}
.case-study-faq-item[open] {
  border-color: rgba(212,165,55,0.25);
}
.case-study-faq-item summary {
  padding: var(--space-5, 24px) var(--space-6, 32px);
  cursor: pointer;
  font-weight: 600;
  color: var(--c-fg, #fff);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-body, 1rem);
  transition: color var(--dur-fast, 180ms) var(--ease-out);
}
.case-study-faq-item summary:hover {
  color: var(--c-gold);
}
.case-study-faq-item[open] summary {
  color: var(--c-gold);
}
.case-study-faq-item summary::after {
  content: "+";
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  color: var(--c-gold);
  transition: transform var(--dur-base, 320ms) var(--ease-out);
  flex-shrink: 0;
  margin-left: var(--space-4, 16px);
}
.case-study-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.case-study-faq-item summary::-webkit-details-marker {
  display: none;
}
.case-study-faq-item summary::marker {
  display: none;
  content: "";
}
.case-study-faq-item p {
  padding: 0 var(--space-6, 32px) var(--space-5, 24px);
  color: var(--c-fg-muted, rgba(255,255,255,0.60));
  line-height: var(--lh-normal, 1.55);
  font-size: var(--fs-body, 1rem);
}

/* --------------------------------------------------------------------------
   PREV / NEXT NAV
   -------------------------------------------------------------------------- */
.cs-nav {
  position: relative;
  z-index: 2;
  border-block: 1px solid var(--c-line, rgba(255,255,255,0.12));
  background: var(--c-bg-elevated, #111);
}
.cs-nav__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5, 24px);
  padding-block: var(--space-6, 32px);
}
.cs-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 12px);
  text-decoration: none;
  color: var(--c-fg, #fff);
  transition: color var(--dur-fast, 180ms) var(--ease-out);
}
.cs-nav__link:hover {
  color: var(--c-gold, #d4a537);
}
.cs-nav__link--next {
  text-align: right;
}
.cs-nav__label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-mini, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-fg-muted, rgba(255,255,255,0.60));
  margin-bottom: var(--space-2, 8px);
}
.cs-nav__name {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: var(--fs-20, 1.25rem);
  font-weight: 600;
}
.cs-nav__arrow {
  color: var(--c-gold, #d4a537);
  transition: transform var(--dur-base, 320ms) var(--ease-out);
}
.cs-nav__link--prev:hover .cs-nav__arrow {
  transform: translateX(-4px);
}
.cs-nav__link--next:hover .cs-nav__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cs-cta {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: clamp(96px, 14vw, 180px);
}
.cs-cta__bg {
  position: absolute;
  inset: 0;
}
.cs-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: blur(6px) saturate(0.8);
}
.cs-cta__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(10,10,10,0.55), var(--c-bg, #0a0a0a));
}
.cs-cta__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.cs-cta__inner h2 {
  font-family: var(--font-serif, Fraunces, serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-fg, #fff);
  margin: 0 0 var(--space-4, 16px);
}
.cs-cta__inner h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--c-gold, #d4a537);
}
.cs-cta__inner p {
  color: var(--c-fg-soft, rgba(255,255,255,0.78));
  font-size: var(--fs-lead, 1.15rem);
  line-height: var(--lh-loose, 1.7);
  max-width: 48ch;
  margin: 0 auto var(--space-7, 48px);
}
.cs-cta__actions {
  display: flex;
  gap: var(--space-4, 16px);
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cs-progress {
    transition: none;
  }
  .cs-split__media img,
  .cs-bento__tile--wide img {
    filter: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .cs-band__grid,
  .cs-impact__grid {
    gap: var(--space-7, 48px);
  }
}

@media (max-width: 960px) {
  .cs-hero__row {
    grid-template-columns: 1fr;
    gap: var(--space-6, 32px);
  }
  .cs-hero__meta {
    border-left: none;
    border-top: 1px solid var(--c-line-strong, rgba(255,255,255,0.24));
    padding-left: 0;
    padding-top: var(--space-5, 24px);
    flex-wrap: wrap;
  }
  .cs-hero__title {
    font-size: clamp(2.6rem, 9vw, 4.5rem);
  }
  .cs-band__grid,
  .cs-impact__grid {
    grid-template-columns: 1fr;
  }
  .cs-impact__head {
    position: static;
  }
  .cs-split__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7, 48px);
  }
  .cs-split__media {
    order: 2;
  }
  .cs-split__blocks {
    order: 1;
  }
  .cs-bento__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: none;
  }
  .cs-bento__tile--wide {
    grid-column: span 6;
    grid-row: span 1;
    min-height: 320px;
  }
  .cs-bento__tile--stat,
  .cs-bento__tile--menu {
    grid-column: span 3;
    min-height: 220px;
  }
  .cs-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Defuse the 1.08x scale on the hero image so it cannot bleed past the
     viewport edges at tablet/narrow widths (was causing horizontal overflow
     at 360px and 768px because viewport * 1.08 > viewport). */
  .cs-hero__media img { transform: translateY(var(--parallax, 0)) scale(1); }
  /* Defensive: prevent any decorative overflow (e.g. .bloom--2 with
     right:-100px) from creating a horizontal scrollbar on the document. */
  html, body { overflow-x: clip; }
}

@media (max-width: 720px) {
  .cs-hero__title {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }
  .cs-hero__accent {
    font-size: 0.5em;
  }
  .cs-stats {
    grid-template-columns: 1fr;
  }
  .cs-stat {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cs-bento__grid {
    grid-template-columns: 1fr;
  }
  .cs-bento__tile--wide,
  .cs-bento__tile--stat,
  .cs-bento__tile--menu {
    grid-column: span 1;
    min-height: 240px;
  }
  .cs-impact__ghost {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }
  .cs-nav__inner {
    flex-direction: column;
    gap: var(--space-5, 24px);
  }
  .cs-nav__link--next {
    text-align: left;
  }
  .cs-faq {
    padding-left: var(--container-pad, 20px);
    padding-right: var(--container-pad, 20px);
  }
  .bloom--1 {
    width: 300px;
    height: 300px;
  }
  .bloom--2 {
    width: 250px;
    height: 250px;
  }
}

@media (max-width: 480px) {
  .cs-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cs-cta__actions .btn {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .cs-hero__media,
  .cs-cta__bg,
  .ambient,
  .grain,
  .cs-progress {
    display: none;
  }
  .cs-hero {
    min-height: auto;
    justify-content: flex-start;
    padding-bottom: 0;
  }
  .cs-hero__scrim {
    display: none;
  }
  .cs-bento,
  .cs-band,
  .cs-nav {
    background: none;
    border-color: #ddd;
  }
  body {
    background: #fff;
    color: #000;
  }
  .cs-hero__title,
  .cs-hero__accent,
  .cs-num-block h2,
  .cs-bento__head h2,
  .cs-impact__head,
  .cs-impact__body h3,
  .cs-faq > h2 {
    color: #000;
  }
  .cs-hero__meta {
    border-color: #ddd;
  }
  .cs-hero__eyebrow::before {
    background: #000;
  }
  .cs-hero__eyebrow,
  .cs-hero__accent,
  .cs-num-block__tag,
  .cs-band__label,
  .cs-bento__tag,
  .cs-bento__stat .cs-stat__sign {
    color: #000;
  }
  .cs-impact__ghost {
    opacity: 0.15;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Hallmark stamp - case-study - theme: Bizspaces Dark Menu Editorial -
   full-bleed hero - Fraunces display + Inter body + JetBrains Mono accent -
   warm gold accent - deliverables band - asymmetric split - bento showcase -
   ghost-numbered impact ledger - gold scroll-progress rule - prev/next nav
   ========================================================================== */