/* ==========================================================================
   case-study.css — modular editorial case-study system.
   Loaded by case-champions / case-tikomatata / case-yona / case-easygas,
   built from the Figma "Consultancy" case-study frames (462:38011, 528:10974,
   528:30761, 566:11736). Clean register like about.html's Figma port — the
   only torn edges are the .cs2-learned / .cs2-product / .cs2-cta dark islands,
   which reuse the site-wide slab masks. Every size/colour maps onto existing
   tokens: #250e13 = --c-ink, #4e4e4e = --c-grey-dark, #666 = --c-grey-soft,
   64px number = --fs-stat, 18px body = --fs-md, 15px = --fs-sm, 12px = --fs-3xs.
   ========================================================================== */

.cs2 {
  background: var(--c-white);
  --cs2-tint: #f5f4f2;
  --cs2-copy: 57rem;
  /* shared vertical rhythm: every section-level block (including the tint
     band and the dark "island" sections) uses this same padding-block, so
     the visual gap between any two adjacent sections is consistent across
     every case study, regardless of which section types happen to be
     adjacent. The dark islands add a fixed 19px for the torn-edge mask
     bleed, which is layout-neutral (an absolutely-positioned decoration),
     not extra breathing room. */
  --cs2-block-pad: clamp(2.75rem, 1.8rem + 4vw, 5rem);
  --cs2-island-pad: calc(var(--cs2-block-pad) + 19px);
}
/* running copy sits at ~3/4 of the content column on wide screens and relaxes
   to full width once the container is narrower than --cs2-copy */
.cs2-block { padding-block: var(--cs2-block-pad); }
.cs2-block--tight { padding-block: clamp(2rem, 1.4rem + 3vw, 4rem); }
.cs2-block--flush { padding-block: 0; }

.cs2-label {
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.083em;
  text-transform: uppercase;
  color: var(--c-grey-soft);
}

/* --- hero ------------------------------------------------------------- */
.cs2-hero { padding-top: calc(var(--section-pad-y) + 3rem); padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.cs2-hero .crumbs { margin-bottom: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }
.cs2-hero__eyebrow { color: var(--c-grey-dark); margin-bottom: var(--sp-4); }
.cs2-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.3125rem);
  line-height: 1.18;
  color: var(--c-ink);
  max-width: var(--cs2-copy);
  margin-bottom: var(--sp-4);
}
.cs2-hero__sub {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
  max-width: var(--cs2-copy);
}
.cs2-hero__media { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.cs2-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-xl);
}
/* a hero render shown whole, at its own aspect (no crop) */
.cs2-hero__media--wide { position: relative; }
.cs2-hero__media--wide img { aspect-ratio: auto; }
/* mask a stray "WORKSHOP PHOTOGRAPH" placeholder label baked into the Champions
   Figma Hero Image layer — % units track the image as it scales */
.cs2-hero__media--champions::after {
  content: "";
  position: absolute;
  left: 44.6%;
  top: 38.8%;
  width: 11.2%;
  height: 4%;
  background: #e3b3e5;
  pointer-events: none;
}
/* --- wide media container ------------------------------------------
   Same gutter as .container, but without the --content-max cap — lets a
   case-study's key visual (the YONA clip, the RSH figures) use more of a
   wide desktop viewport while the surrounding text keeps the normal
   measure. At the ~1440px+ viewports where --gutter has maxed at 111px,
   this resolves to exactly "viewport minus 111px each side". */
.container.container--wide { max-width: 100%; }
/* restore the figure's usual top margin when it is the sole child of a
   wide container (the plain :first-child reset below is for figures that
   open a section with nothing above them in the *same* container) */
.container--wide > .cs2-figure--bleed:first-child { margin-top: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); }

/* a looping hero clip (YONA). The <video> + still fallback sit in a block
   .cs2-hero__vwrap that fills its container, so the watermark cover
   (positioned in %) always tracks the video's own corner at any size. */
.cs2-hero__media--video { line-height: 0; }
.cs2-hero__vwrap { position: relative; display: block; width: 100%; }
.cs2-hero__media--video video,
.cs2-hero__vwrap > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  background: #e8efe9;
}
.cs2-hero__vwrap > img { display: none; }   /* reduced-motion still fallback */
/* cover the "jitter.video" export stamp baked into the clip's bottom-right
   mint margin */
.cs2-hero__vwrap::after {
  content: "";
  position: absolute;
  right: 0.6%;
  bottom: 1%;
  width: 15%;
  height: 8%;
  background: #e8efe9;
  border-radius: 0 0 var(--r-xl) 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cs2-hero__media--video video { display: none; }
  .cs2-hero__vwrap > img { display: block; }
}

/* a generic full-width video clip (not the hero) — same width-only sizing
   and rounded corners as .cs2-hero__vwrap, without its hero-clip-specific
   watermark-cover patch */
.cs2-clip { position: relative; display: block; width: 100%; line-height: 0; }
.cs2-clip video, .cs2-clip > img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); }
.cs2-clip > img { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cs2-clip video { display: none; }
  .cs2-clip > img { display: block; }
}

/* --- hero built around the clip: full width, natural aspect -------------
   Used on case-yona. The clip lives in its own .container--wide (above) so
   it can use more of the viewport than the standard 1218px content column;
   it is sized by width only — never height-capped — so it scales with the
   viewport but is never cropped, stretched or distorted. The section's own
   top padding keeps it clear of the fixed nav regardless of how tall the
   clip ends up being, so there is nothing else to size against. */
.cs2-hero--video { padding-top: calc(var(--section-pad-y) + 3rem); padding-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.cs2-hero--video .cs2-hero__title { margin-bottom: 0; }
.cs2-hero--video .cs2-hero__media--video { margin-top: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); }
.cs2-hero__intro .cs2-hero__sub { margin: 0; }

/* --- stats ---------------------------------------------------------- */
.cs2-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  justify-content: space-between;
  border-block: 1px solid var(--c-hairline-light);
  padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
}
.cs2-stat { display: flex; flex-direction: column-reverse; gap: var(--sp-1); }
.cs2-stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--c-ink);
}
.cs2-stat__label { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--c-grey-dark); }

/* --- section text ------------------------------------------------------ */
.cs2-text__label { margin-bottom: var(--sp-4); }
.cs2-text__heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.22;
  color: var(--c-ink);
  max-width: var(--cs2-copy);
  margin-bottom: var(--sp-5);
}
.cs2-prose { max-width: var(--cs2-copy); }
.cs2-prose > * + * { margin-top: var(--sp-5); }
.cs2-prose p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
}
.cs2-prose strong { color: var(--c-ink); font-weight: 600; }
.cs2-prose em { font-style: italic; }
.cs2-prose a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cs2-prose ul {
  margin: 0;
  padding-left: 1.35em;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cs2-prose li {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
}
.cs2-prose li::before {
  content: "\2192";           /* → */
  position: absolute;
  left: -1.35em;
  color: var(--c-ink);
}

/* --- chapter (country sections) -------------------------------------- */
.cs2-chapter__label { margin-bottom: var(--sp-4); }
.cs2-chapter__heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 1.75rem);
  line-height: 1.26;
  color: var(--c-ink);
  max-width: var(--cs2-copy);
  margin-bottom: var(--sp-4);
}

/* --- split: two columns (Context | Challenge) --------------------- */
.cs2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.cs2-split__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  line-height: 1.26;
  color: var(--c-ink);
  margin: var(--sp-4) 0 var(--sp-5);
}
.cs2-numlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cs2-numlist li { display: flex; gap: var(--sp-3); align-items: baseline; }
.cs2-numlist__n {
  flex: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
.cs2-numlist p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-grey-dark);
}

/* --- approach: tint band, intro + four step cards ---------------- */
.cs2-approach {
  background: var(--cs2-tint);
  padding-block: var(--cs2-block-pad);
}
.cs2-approach__heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.24;
  color: var(--c-ink);
  max-width: var(--cs2-copy);
  margin: var(--sp-4) 0 var(--sp-4);
}
.cs2-approach__lede {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
  max-width: var(--cs2-copy);
  margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3rem);
}
.cs2-approach__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.cs2-step {
  background: var(--c-white);
  border-radius: var(--r-sm);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cs2-step__k {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-3xs);
  letter-spacing: 0.083em;
  text-transform: uppercase;
  color: var(--c-grey-soft);
}
.cs2-step__t { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; color: var(--c-ink); }
.cs2-step__d { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.55; color: var(--c-grey-dark); margin: calc(-1 * var(--sp-2)) 0 0; }

/* --- pullquote ----------------------------------------------------- */
.cs2-pullquote {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3.6vw, 5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  max-width: var(--cs2-copy);
  margin: 0;
}

/* --- images ------------------------------------------------------- */
.cs2-figure { margin: 0; }
.cs2-figure img { display: block; width: 100%; border-radius: var(--r-xl); object-fit: cover; }
.cs2-figure--full img { aspect-ratio: 16 / 10; }
.cs2-figcaption {
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--c-grey-soft);
}
.cs2-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.cs2-pair .cs2-figure img { aspect-ratio: 4 / 3; }

/* full Figma section renders (diagrams, screen carousels, mockup panels) —
   shown at their own aspect, no crop; house 20px radius like every other image */
.cs2-figure--bleed { margin-block: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); }
.cs2-figure--bleed img { border-radius: var(--r-xl); aspect-ratio: auto; }
.cs2-figure--bleed:first-child { margin-top: 0; }
/* when a figure is the last thing in its section, its own bottom margin
   would stack on top of the section's padding-bottom, making that section's
   trailing gap read as bigger than a section that ends in plain prose. drop
   it so every section-to-section gap comes from padding alone and stays
   consistent regardless of what kind of content each section happens to
   end with. */
.cs2-figure--bleed:last-child { margin-bottom: 0; }
/* wide diagrams: let them scroll horizontally on narrow screens rather than
   shrink into illegibility (design-system rule for wide content) */
.cs2-figure--scroll { max-width: 100%; }
@media (max-width: 900px) {
  .cs2-figure--scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cs2-figure--scroll img { min-width: 840px; }
}

/* --- what I learned (dark reflection) --------------------------- */
/* dark island between two light sections — VERITE torn top + bottom edges
   cut from the section's own #0B0B0C ground by an alpha mask, so white shows
   through the notches (design-system §5.5, matching .services / .closing) */
.cs2-learned {
  position: relative;
  background: transparent;
  color: #fff;
  padding-block: var(--cs2-island-pad);
}
.cs2-learned::before {
  content: "";
  position: absolute;
  inset: -15px 0;
  z-index: 0;
  pointer-events: none;
  background: var(--c-ink-3);
  -webkit-mask:
    url("../assets/mask-slab-top.svg?v=8")    top    / 100% 29px no-repeat,
    url("../assets/mask-slab-bottom.svg?v=8") bottom / 100% 29px no-repeat,
    linear-gradient(#000, #000)               center / 100% calc(100% - 54px) no-repeat;
          mask:
    url("../assets/mask-slab-top.svg?v=8")    top    / 100% 29px no-repeat,
    url("../assets/mask-slab-bottom.svg?v=8") bottom / 100% 29px no-repeat,
    linear-gradient(#000, #000)               center / 100% calc(100% - 54px) no-repeat;
}
.cs2-learned > .container { position: relative; z-index: 1; }
.cs2-learned__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-3xs);
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--c-mint);
  margin-bottom: var(--sp-5);
}
.cs2-learned__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
  line-height: 1.24;
  color: #fff;
  max-width: var(--cs2-copy);
  margin: 0 0 var(--sp-6);
}
.cs2-learned__body { max-width: var(--cs2-copy); }
.cs2-learned__body p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.8);
}
.cs2-learned__body p + p { margin-top: var(--sp-5); }

/* --- testimonial ------------------------------------------------- */
.cs2-testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.75rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 var(--sp-6);
  max-width: var(--cs2-copy);
}
.cs2-testimonial__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-ink);
}
.cs2-testimonial__role { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--c-grey-dark); }

/* --- attribution ---------------------------------------------------- */
.cs2-attribution { margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.cs2-attribution p {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--c-grey-soft);
  max-width: var(--cs2-copy);
}
.cs2-attribution p + p { margin-top: var(--sp-3); }
.cs2-attribution strong { color: var(--c-grey-dark); font-weight: 600; }

/* ======================================================================
   Tikomatata additions — brand + product + website case study.
   Same clean .cs2 register; new patterns are generic, not project-locked.
   ====================================================================== */

/* lead grid: a narrow heading column beside a wider body column
   (The Opportunity, The Outcome) */
.cs2-leadgrid {
  display: grid;
  grid-template-columns: minmax(0, 24rem) 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.cs2-leadgrid__h {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.22;
  color: var(--c-ink);
  margin: var(--sp-3) 0 0;
}
.cs2-leadgrid__body { display: flex; flex-direction: column; gap: var(--sp-5); }
.cs2-leadgrid__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
}
.cs2-leadgrid__body p:first-child { color: var(--c-ink); }

/* problem pillars — three hairline cards */
.cs2-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.cs2-pillar {
  border: 1px solid var(--c-hairline-light);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.cs2-pillar__t {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-3xs);
  letter-spacing: 0.083em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.cs2-pillar__d {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-grey-dark);
}

/* discovery insights — label + heading beside a paragraph, hairline rules */
.cs2-insights { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--c-hairline-light); }
.cs2-insight {
  display: grid;
  grid-template-columns: minmax(0, 20rem) 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-bottom: 1px solid var(--c-hairline-light);
}
.cs2-insight__k {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-3xs);
  letter-spacing: 0.083em;
  text-transform: uppercase;
  color: var(--c-grey-soft);
}
.cs2-insight__t {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.26;
  color: var(--c-ink);
  margin: var(--sp-2) 0 0;
}
.cs2-insight__d {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
}

/* 2×2 card grid with a mint keyline (The Outcome, The Reflection) */
.cs2-cardgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.cs2-mcard {
  border: 3px solid var(--c-mint);
  border-radius: var(--r-xl);
  background: var(--c-white);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cs2-mcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.cs2-mcard__t { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-md); color: var(--c-ink); }
.cs2-mcard__n { flex: none; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-3xs); color: #9f63a1; }
.cs2-mcard__d {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
}

/* mobile screen carousel — a horizontal row of plain screen previews with
   no device chrome, each clipped to a fixed "viewport" height so it reads
   like a stack of phone screens peeked from the top, exactly the Figma
   treatment (screens shown edge-to-edge, no bezel/buttons). It always
   scrolls horizontally rather than shrinking screens down to fit, so every
   card stays legible; the next card peeking in at the right edge signals
   there's more to scroll to. */
.cs2-mobile-carousel {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: var(--sp-3);
}
.cs2-mobile-carousel::-webkit-scrollbar { height: 10px; }
.cs2-mobile-carousel::-webkit-scrollbar-thumb {
  background: var(--c-grey-soft);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
.cs2-mobile-carousel__card {
  flex: none;
  width: clamp(220px, 24vw, 300px);
  height: clamp(480px, 52vw, 640px);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #055959; /* Tikomatata brand teal, matting the screens */
  box-shadow: var(--shadow-card);
  padding: var(--sp-3);
}
.cs2-mobile-carousel__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--r-xl) - var(--sp-3));
}

/* CTA without a photo backdrop — the dark slab still carries the torn edges */
.cs2-cta--flat .cs2-cta__bg { background: var(--c-ink-3); }
.cs2-cta--flat .cs2-cta__bg::after { display: none; }

/* --- cta (over a dark landscape photo) -------------------------- */
/* same VERITE torn top + bottom edges as .cs2-learned — the photo panel is
   cut to the torn silhouette by the slab masks, so it tears into the white
   sections above and below instead of meeting them on a hard line */
.cs2-cta {
  position: relative;
  text-align: center;
  padding-block: var(--cs2-island-pad);
  color: #fff;
  background: transparent;
}
.cs2-cta__bg {
  position: absolute;
  inset: -15px 0;
  background: var(--c-ink-3);
  -webkit-mask:
    url("../assets/mask-slab-top.svg?v=8")    top    / 100% 29px no-repeat,
    url("../assets/mask-slab-bottom.svg?v=8") bottom / 100% 29px no-repeat,
    linear-gradient(#000, #000)               center / 100% calc(100% - 54px) no-repeat;
          mask:
    url("../assets/mask-slab-top.svg?v=8")    top    / 100% 29px no-repeat,
    url("../assets/mask-slab-bottom.svg?v=8") bottom / 100% 29px no-repeat,
    linear-gradient(#000, #000)               center / 100% calc(100% - 54px) no-repeat;
}
.cs2-cta__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.cs2-cta__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.cs2-cta > .container { position: relative; z-index: 1; }
.cs2-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.22;
  color: #fff;
  margin: 0 auto var(--sp-4);
  max-width: 22ch;
}
.cs2-cta__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto var(--sp-6);
  max-width: 34ch;
}
.cs2-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.5rem;
  border-radius: var(--r-pill);
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out);
}
.cs2-cta__btn:hover { transform: translateY(-2px); }
.cs2-cta__btn:active { transform: scale(0.99); }
.cs2-cta__btn:focus-visible { outline: 3px solid var(--c-mint); outline-offset: 2px; }

/* --- next project -------------------------------------------------- */
.cs2-next { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 5rem); }
.cs2-next__divider { border: 0; border-top: 1px solid var(--c-hairline-light); margin: 0 0 var(--sp-7); }
.cs2-next__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); text-decoration: none; }
.cs2-next__label { margin-bottom: var(--sp-2); }
.cs2-next__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  color: var(--c-ink);
  line-height: 1.18;
}
.cs2-next__desc { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--c-grey-dark); margin-top: var(--sp-2); }
.cs2-next__arrow {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  color: var(--c-ink);
  flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.cs2-next__link:hover .cs2-next__arrow,
.cs2-next__link:focus-visible .cs2-next__arrow { transform: translateX(6px); }

/* ======================================================================
   YONA + EasyGas additions — same clean .cs2 register.
   ====================================================================== */

/* YONA — numbered operational-friction list inside the tint band */
.cs2-oplist { display: flex; flex-direction: column; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.cs2-op { padding-block: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-top: 1px solid var(--c-hairline-light); }
.cs2-op:first-child { border-top: 0; padding-top: 0; }
.cs2-op__head { display: flex; align-items: baseline; gap: var(--sp-4); }
.cs2-op__n {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1;
  color: var(--c-ink);
}
.cs2-op__t { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; color: var(--c-ink); }
.cs2-op__d {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
  max-width: var(--cs2-copy);
}
.cs2-approach__note {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-ink);
  max-width: var(--cs2-copy);
}

/* --- discovery: research method, comparative journeys, role cards ------
   YONA "02 · Discovery" — a run of labelled sub-groups (heading + body),
   two 3-up card grids (journey cards with an embedded callout, and role
   cards with a number + pill badge), and a validated-insight statement
   set larger than body copy. Built from the same tint/rounded-card
   language as .cs2-pillar / .cs2-mcard rather than a new visual system. */
.cs2-subgroup { display: flex; flex-direction: column; gap: var(--sp-4); }
.cs2-subgroup + .cs2-subgroup { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.cs2-subgroup__h {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--c-ink);
}
.cs2-subgroup > p { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-grey-dark); max-width: var(--cs2-copy); }

.cs2-insight-stmt {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--c-ink);
  max-width: var(--cs2-copy);
}

.cs2-journeygrid, .cs2-rolegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.cs2-journey, .cs2-role {
  background: var(--cs2-tint);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.cs2-journey__n, .cs2-role__n {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--c-ink);
}
.cs2-journey__t {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-ink);
  margin-top: var(--sp-2);
}
.cs2-journey__steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.cs2-journey__steps p { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; color: var(--c-grey-dark); }
.cs2-journey__callout {
  background: var(--c-white);
  border: 1px solid var(--c-hairline-light);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cs2-journey__callout-k {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.083em;
  text-transform: uppercase;
  color: var(--c-grey-soft);
}
.cs2-journey__callout p { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-grey-dark); }

.cs2-role__head { display: flex; align-items: center; justify-content: space-between; }
.cs2-role__badge {
  background: var(--c-white);
  border: 1px solid var(--c-hairline-light);
  border-radius: var(--r-pill);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--c-ink);
}
.cs2-role__t { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; color: var(--c-ink); margin: 0; }
.cs2-role__d { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-grey-dark); margin: 0; }

@media (max-width: 900px) {
  .cs2-journeygrid, .cs2-rolegrid { grid-template-columns: 1fr; }
}

/* a centred sub-label above a figure (e.g. "LO-FI WIREFRAMES") */
.cs2-figlabel {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-3xs);
  letter-spacing: 0.083em;
  text-transform: uppercase;
  color: var(--c-grey-soft);
  text-align: center;
}

/* dark product-showcase island (YONA "Pixel perfect") — same torn treatment
   as .cs2-learned, but sized for a heading + body + figures */
.cs2-product {
  position: relative;
  background: transparent;
  color: #fff;
  padding-block: var(--cs2-island-pad);
}
.cs2-product::before {
  content: "";
  position: absolute;
  inset: -15px 0;
  z-index: 0;
  pointer-events: none;
  background: var(--c-ink-3);
  -webkit-mask:
    url("../assets/mask-slab-top.svg?v=8")    top    / 100% 29px no-repeat,
    url("../assets/mask-slab-bottom.svg?v=8") bottom / 100% 29px no-repeat,
    linear-gradient(#000, #000)               center / 100% calc(100% - 54px) no-repeat;
          mask:
    url("../assets/mask-slab-top.svg?v=8")    top    / 100% 29px no-repeat,
    url("../assets/mask-slab-bottom.svg?v=8") bottom / 100% 29px no-repeat,
    linear-gradient(#000, #000)               center / 100% calc(100% - 54px) no-repeat;
}
.cs2-product > .container { position: relative; z-index: 1; }
.cs2-product__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-3xs);
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--c-mint);
  margin-bottom: var(--sp-5);
}
.cs2-product__heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  line-height: 1.22;
  color: #fff;
  margin: 0 0 var(--sp-5);
  max-width: var(--cs2-copy);
}
.cs2-product__body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.8);
  max-width: var(--cs2-copy);
  margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3rem);
}
.cs2-product .cs2-figcaption { color: rgba(255, 255, 255, 0.55); }

@media (max-width: 900px) {
  .cs2-approach__grid { grid-template-columns: repeat(2, 1fr); }
  .cs2-pillars { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .cs2-leadgrid { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 760px) {
  .cs2-pair { grid-template-columns: 1fr; }
  .cs2-split { grid-template-columns: 1fr; }
  .cs2-approach__grid { grid-template-columns: 1fr; }
  .cs2-cardgrid { grid-template-columns: 1fr; }
  .cs2-insight { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .cs2-cta__btn, .cs2-next__arrow, .cs2-viewer__tab { transition: none; }
}