/* =========================================================
   SHAIVY BHATIA · CASE STUDY KIT  v1
   A reusable component layer for ALL case studies.

   Everything is scoped under .csk so it is fully self-contained
   and never collides with the light design-system page.

   • Real case study:  <body class="csk"> … </body>
   • Embedded demo:     <div class="csk csk-stage"> … </div>

   Dark, warm-neutral canvas · single coral accent · Bricolage + Caveat.
   Pair with the #ic-* duotone icon sprite.
   ========================================================= */

.csk {
  /* Text (light, on dark) */
  --ink:        #F4EEE4;
  --espresso:   #DED5C8;
  --graphite:   #ABA193;
  --stone:      #837A6D;

  /* Surfaces (dark) */
  --line:       rgba(244,238,228,0.12);
  --line-soft:  rgba(244,238,228,0.07);
  --sand:       #221A15;   /* raised neutral surface */
  --cream:      #100C0A;   /* canvas */
  --white:      #191410;   /* card surface */

  /* Coral — the single signature accent */
  --coral:      #FF6A3D;
  --coral-deep: #FF885E;
  --coral-soft: rgba(255,106,61,0.14);
  --coral-line: rgba(255,106,61,0.30);

  /* Elevated "feature" panel */
  --panel:      linear-gradient(165deg, #211913, #140F0C);
  --panel-line: rgba(255,106,61,0.22);

  --serif: "Bricolage Grotesque", system-ui, sans-serif;
  --hand:  "Caveat", cursive;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;
  --ease: cubic-bezier(.22,.68,.28,1);
  --ease-out: cubic-bezier(.16,.84,.30,1);
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.40);
  --shadow-md: 0 22px 46px -18px rgba(0,0,0,0.66);
  --shadow-lg: 0 36px 74px -28px rgba(0,0,0,0.74);

  font-family: var(--serif);
  color: var(--espresso);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.csk { background: var(--cream); overflow-x: hidden; }

.csk *, .csk *::before, .csk *::after { box-sizing: border-box; }
.csk h1, .csk h2, .csk h3, .csk h4, .csk p, .csk ul, .csk figure { margin: 0; }
.csk ul { padding: 0; list-style: none; }
.csk a { color: inherit; text-decoration: none; }
.csk em { font-style: italic; color: inherit; }
.csk ::selection { background: rgba(255,106,61,0.28); color: #fff; }

.csk .wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 68px); }
.csk .wrap--narrow { max-width: 880px; }

/* Embedded-demo stage: a framed dark canvas to drop one component into */
.csk-stage {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,106,61,0.05), transparent 60%),
    var(--cream);
  border: 1px solid rgba(255,106,61,0.16);
  border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 48px);
  overflow: hidden;
}

/* =========================================================
   ICONS
   ========================================================= */
.csk .ico { width: 24px; height: 24px; display: inline-block; flex: none; color: var(--espresso); }
.csk .ico--lg { width: 40px; height: 40px; }
.csk .ico--xl { width: 52px; height: 52px; }

/* =========================================================
   TYPE PRIMITIVES
   ========================================================= */
.csk .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--coral-deep);
}
.csk .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--coral); }
.csk .h2 { font-size: clamp(25px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; color: var(--ink); }
.csk .h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.csk .lede { font-size: clamp(16px, 1.6vw, 20px); color: var(--graphite); line-height: 1.6; text-wrap: pretty; max-width: 62ch; }
.csk .body { font-size: 16px; line-height: 1.68; color: var(--espresso); text-wrap: pretty; }
.csk .body b { font-weight: 700; color: var(--ink); }
.csk .hand { font-family: var(--hand); color: var(--graphite); }

.csk .sec-head { max-width: 660px; margin-bottom: clamp(28px, 4vw, 44px); }
.csk .sec-head .h2 { margin-top: 16px; }
.csk .sec-head .lede { margin-top: 18px; }

/* =========================================================
   IMAGE FIGURES · CAPTIONS · CAROUSEL · DEVICE FRAME
   ========================================================= */
.csk .figure {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(244,238,228,0.03) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, #1b1510, #120d0b);
  box-shadow: var(--shadow-sm); position: relative;
}
.csk .figure image-slot, .csk .figure img { width: 100%; height: 100%; display: block; object-fit: cover; }
.csk .figure--16-9 { aspect-ratio: 16 / 9; }
.csk .figure--wide { aspect-ratio: 16 / 7.4; }
.csk .figure--4-3  { aspect-ratio: 4 / 3; }
.csk .figure__cap { font-size: 13px; color: var(--stone); margin-top: 13px; display: flex; align-items: center; gap: 8px; }
.csk .figure__cap .ico { width: 15px; height: 15px; color: var(--stone); }

.csk .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px){ .csk .duo { grid-template-columns: 1fr; } }

/* Device frame — for screen mockups */
.csk .phone {
  width: 270px; max-width: 100%; aspect-ratio: 9 / 19.5; flex: none;
  border-radius: 38px; padding: 11px;
  background: linear-gradient(160deg, #2a221c, #15100d);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  position: relative;
}
.csk .phone::before {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 7px; border-radius: var(--r-pill); background: rgba(0,0,0,0.55); z-index: 3;
}
.csk .phone__screen { width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: #0d0a08; }
.csk .phone__screen image-slot, .csk .phone__screen img { width: 100%; height: 100%; display: block; }

/* Carousel */
.csk .carousel { position: relative; }
.csk .carousel__viewport { overflow: hidden; border-radius: var(--r-lg); }
.csk .carousel__track { display: flex; transition: transform .6s var(--ease-out); }
.csk .carousel__slide { flex: 0 0 100%; aspect-ratio: 16 / 8; }
.csk .carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(20,15,12,0.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--espresso); font-size: 24px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.csk .carousel__arrow:hover { background: rgba(244,238,228,0.08); border-color: var(--stone); }
.csk .carousel__arrow--prev { left: 16px; }
.csk .carousel__arrow--next { right: 16px; }
.csk .carousel__dots { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.csk .carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .3s var(--ease), width .3s var(--ease); }
.csk .carousel__dot.is-active { background: var(--coral); width: 26px; border-radius: var(--r-pill); }

/* =========================================================
   1 · HERO  (title · tags · lede · meta · cover)
   ========================================================= */
.csk .cs-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); }
.csk .cs-hero__tags { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.csk .chip-clean {
  font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--graphite); background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 18px; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.csk .chip-clean:hover { border-color: var(--stone); color: var(--espresso); }
.csk .cs-hero__title { font-size: clamp(40px, 6vw, 78px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; color: var(--ink); }
.csk .cs-hero__lede { margin-top: 22px; max-width: 64ch; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.45; color: var(--ink); font-weight: 500; }
.csk .cs-hero__lede em { color: var(--coral); }

.csk .meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  margin-top: clamp(34px, 5vw, 52px); padding-top: 28px; border-top: 1px solid var(--line);
}
.csk .meta__item { display: flex; flex-direction: column; gap: 9px; }
.csk .meta__k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep); display: inline-flex; align-items: center; gap: 7px; }
.csk .meta__k .ico { width: 16px; height: 16px; color: var(--coral-deep); }
.csk .meta__v { font-size: 16px; color: var(--espresso); line-height: 1.45; font-weight: 500; }
@media (max-width: 720px){ .csk .meta { grid-template-columns: 1fr 1fr; gap: 22px; } }

/* =========================================================
   2 · TABLE OF CONTENTS  (sticky section index)
   ========================================================= */
.csk .toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 10px 12px;
}
.csk .toc a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--graphite);
  padding: 8px 15px; border-radius: var(--r-pill); transition: background .3s var(--ease), color .3s var(--ease);
}
.csk .toc a .n { font-family: var(--hand); font-size: 16px; color: var(--coral); }
.csk .toc a:hover, .csk .toc a.is-active { background: var(--coral-soft); color: var(--ink); }

/* =========================================================
   3 · PROCESS TIMELINE  (double-diamond phases)
   ========================================================= */
.csk .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: ph; }
@media (max-width: 820px){ .csk .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .csk .process { grid-template-columns: 1fr; } }
.csk .phase { position: relative; padding: 26px 22px; }
.csk .phase + .phase { border-left: 1px solid var(--line); }
@media (max-width: 820px){ .csk .phase:nth-child(odd) { border-left: 0; } }
.csk .phase__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px var(--coral-soft); }
.csk .phase__rail { position: absolute; top: 31px; left: calc(22px + 12px); right: 0; height: 1px; background: var(--line); }
.csk .phase:last-child .phase__rail { display: none; }
.csk .phase__k { margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--coral-deep); }
.csk .phase__t { margin-top: 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.csk .phase__d { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--graphite); }

/* =========================================================
   4 · OVERVIEW / TL;DR  (split: context vs at-a-glance)
   ========================================================= */
.csk .overview { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 860px){ .csk .overview { grid-template-columns: 1fr; gap: 28px; } }
.csk .overview__body { display: flex; flex-direction: column; gap: 18px; }
.csk .tldr {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-xl);
  padding: clamp(26px, 3.5vw, 38px);
}
.csk .tldr__k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep); }
.csk .tldr__rows { margin-top: 18px; display: flex; flex-direction: column; }
.csk .tldr__row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.csk .tldr__row:first-child { border-top: 0; padding-top: 0; }
.csk .tldr__rk { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); padding-top: 3px; }
.csk .tldr__rv { font-size: 14px; line-height: 1.5; color: var(--ink); }
.csk .tldr__rv b { color: var(--coral-deep); }

/* =========================================================
   5 · IMPACT METRIC GRID  (results-first stat cards)
   ========================================================= */
.csk .impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px){ .csk .impact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .csk .impact-grid { grid-template-columns: 1fr; } }
.csk .metric {
  background: var(--coral-soft); border: 1px solid var(--coral-line); border-radius: var(--r-lg);
  padding: 26px 24px 24px; display: flex; flex-direction: column; min-height: 188px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.csk .metric:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.csk .metric__ic { width: 38px; height: 38px; margin-bottom: 16px; color: var(--ink); }
.csk .metric__num { font-size: clamp(38px, 4.2vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.csk .metric__num small { font-size: 0.46em; font-weight: 600; letter-spacing: 0; color: var(--coral-deep); }
.csk .metric__label { margin-top: auto; padding-top: 14px; font-size: 14px; line-height: 1.45; color: var(--espresso); }
.csk .metric__label b { color: var(--ink); }

/* Evidence band — compact validation row */
.csk .evidence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 820px){ .csk .evidence { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .csk .evidence { grid-template-columns: 1fr; } }
.csk .ev { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px; box-shadow: var(--shadow-sm); }
.csk .ev__num { font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.csk .ev__num .u { color: var(--coral); }
.csk .ev__label { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--graphite); }

/* =========================================================
   6 · BITE CARDS  (secondary-research data points + source)
   ========================================================= */
.csk .bites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.csk .bites--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px){ .csk .bites, .csk .bites--2 { grid-template-columns: 1fr; } }
.csk .bite {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.csk .bite:hover { transform: translateY(-5px); border-color: var(--stone); }
.csk .bite__ic { width: 36px; height: 36px; margin-bottom: 18px; }
.csk .bite__stat { font-size: clamp(34px, 4vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.csk .bite__stat .u { color: var(--coral); }
.csk .bite__line { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--graphite); }
.csk .bite__line b { color: var(--ink); }
.csk .bite__src { margin-top: 14px; font-size: 12px; color: var(--stone); letter-spacing: 0.02em; }

/* Research method strip */
.csk .method-strip {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 16px 26px;
}
.csk .method-strip__item { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--espresso); }
.csk .method-strip__item .ico { width: 18px; height: 18px; }
.csk .method-strip__item b { color: var(--ink); font-weight: 700; }
.csk .method-strip__div { width: 1px; height: 20px; background: var(--line); }

/* =========================================================
   7 · SURVEY FINDINGS  (big % + implication)
   ========================================================= */
.csk .findings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px){ .csk .findings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .csk .findings { grid-template-columns: 1fr; } }
.csk .finding {
  border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column;
  min-height: 190px; background: var(--white); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.csk .finding:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.csk .finding--lead { background: var(--coral-soft); border-color: var(--coral-line); }
.csk .finding__num { font-size: clamp(40px, 5vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; color: var(--ink); }
.csk .finding__stat { margin-top: 12px; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.csk .finding__impl {
  margin-top: auto; padding-top: 14px; font-size: 13px; line-height: 1.45; font-weight: 600;
  color: var(--graphite); display: flex; gap: 8px; align-items: flex-start;
}
.csk .finding__impl::before { content: "→"; color: var(--coral); font-weight: 700; flex: none; }

/* =========================================================
   8 · INSIGHT → DESIGN-MOVE PAIRS
   ========================================================= */
.csk .iv-list { display: flex; flex-direction: column; gap: 16px; }
.csk .iv-pair {
  display: grid; grid-template-columns: 0.46fr 0.54fr; align-items: stretch;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.csk .iv-pair:hover { transform: translateY(-4px); border-color: var(--stone); }
@media (max-width: 820px){ .csk .iv-pair { grid-template-columns: 1fr; } }
.csk .iv-insight { padding: 26px 28px; background: var(--sand); display: flex; flex-direction: column; gap: 10px; }
.csk .iv-design  { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.csk .iv-num { font-family: var(--hand); font-size: 26px; color: var(--graphite); line-height: 1; }
.csk .iv-k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.csk .iv-insight .iv-k { color: var(--graphite); }
.csk .iv-design .iv-k { color: var(--coral-deep); }
.csk .iv-k .ico { width: 15px; height: 15px; }
.csk .iv-txt { font-size: 14px; line-height: 1.55; color: var(--espresso); }
.csk .iv-txt b { color: var(--ink); font-weight: 700; }
.csk .iv-feat { margin-top: 2px; font-family: var(--hand); font-size: 18px; color: var(--coral); }

/* =========================================================
   9 · QUOTE / VERBATIM
   ========================================================= */
.csk .quote {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 52px); position: relative;
}
.csk .quote::before {
  content: "\201C"; position: absolute; top: clamp(6px,2vw,14px); left: clamp(22px,3vw,38px);
  font-family: Georgia, serif; font-size: 120px; line-height: 1; color: var(--coral-soft);
}
.csk .quote__p { position: relative; font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.csk .quote__p em { color: var(--coral); font-style: normal; }
.csk .quote__by { margin-top: 22px; display: flex; align-items: center; gap: 13px; }
.csk .quote__av { width: 44px; height: 44px; border-radius: 50%; background: var(--sand); border: 1px solid var(--line); overflow: hidden; flex: none; }
.csk .quote__av image-slot, .csk .quote__av img { width: 100%; height: 100%; }
.csk .quote__nm { font-size: 14px; font-weight: 700; color: var(--ink); }
.csk .quote__role { font-size: 13px; color: var(--graphite); }

/* =========================================================
   10 · AFFINITY / THEME CLUSTERS
   ========================================================= */
.csk .affinity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px){ .csk .affinity { grid-template-columns: 1fr; } }
.csk .cluster { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.csk .cluster__h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.csk .cluster__count { font-family: var(--hand); font-size: 22px; color: var(--coral); }
.csk .cluster__t { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.csk .cluster__notes { display: flex; flex-direction: column; gap: 9px; }
.csk .note-card {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 13px; line-height: 1.4; color: var(--espresso);
}

/* =========================================================
   11 · PERSONA CARD
   ========================================================= */
.csk .personas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px){ .csk .personas { grid-template-columns: 1fr; } }
.csk .persona {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px;
}
.csk .persona__top { display: flex; gap: 16px; align-items: center; }
.csk .persona__avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none; border: 1px solid var(--line); background: var(--sand); }
.csk .persona__avatar image-slot, .csk .persona__avatar img { width: 100%; height: 100%; }
.csk .persona__name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.csk .persona__role { font-size: 13px; color: var(--graphite); margin-top: 2px; }
.csk .persona__quote { font-family: var(--hand); font-size: 23px; line-height: 1.3; color: var(--ink); }
.csk .persona__quote .q { color: var(--coral); }
.csk .persona__rows { display: flex; flex-direction: column; gap: 13px; }
.csk .persona__row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
.csk .persona__rk { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral-deep); padding-top: 2px; }
.csk .persona__rv { font-size: 14px; line-height: 1.5; color: var(--espresso); }
.csk .persona__rv b { color: var(--ink); }

/* =========================================================
   12 · EMPATHY MAP  (says / thinks / does / feels)
   ========================================================= */
.csk .empathy { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
@media (max-width: 620px){ .csk .empathy { grid-template-columns: 1fr; } }
.csk .empathy__q {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; min-height: 140px;
}
.csk .empathy__k { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 12px; }
.csk .empathy__k .ico { width: 17px; height: 17px; color: var(--coral-deep); }
.csk .empathy__list { display: flex; flex-direction: column; gap: 8px; }
.csk .empathy__list li { font-size: 14px; line-height: 1.45; color: var(--espresso); display: flex; gap: 9px; }
.csk .empathy__list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); flex: none; margin-top: 8px; }

/* =========================================================
   13 · USER JOURNEY MAP  (stages · emotion curve · rows)
   ========================================================= */
.csk .journey { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px,3vw,34px); overflow-x: auto; }
.csk .journey__grid { display: grid; gap: 0; min-width: 640px; }
.csk .journey__row { display: grid; grid-template-columns: 128px repeat(var(--stages, 4), 1fr); }
.csk .journey__rk {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--coral-deep); display: flex; align-items: center; padding: 16px 16px 16px 0;
}
.csk .journey__cell { padding: 16px 14px; border-left: 1px solid var(--line); }
.csk .journey__row--stage .journey__cell { font-size: 14px; font-weight: 700; color: var(--ink); }
.csk .journey__row--stage { border-bottom: 1px solid var(--line); }
.csk .journey__cell--txt { font-size: 13px; line-height: 1.45; color: var(--espresso); }
.csk .journey__row + .journey__row:not(.journey__row--emotion) { border-top: 1px solid var(--line-soft); }
/* emotion curve */
.csk .journey__row--emotion { position: relative; height: 92px; }
.csk .journey__emo { grid-column: 2 / -1; position: relative; }
.csk .journey__emo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.csk .journey__emo path { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; }
.csk .journey__emo .dot { fill: var(--coral); }
.csk .pain { color: var(--coral-deep) !important; }
.csk .opp  { color: var(--ink); }
.csk .opp::before { content: "↗ "; color: var(--coral); }

/* =========================================================
   14 · PROBLEM STATEMENT · HMW · CHALLENGE · MIND MAP
   ========================================================= */
.csk .statement {
  border-radius: var(--r-xl); padding: clamp(30px, 4.5vw, 56px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 36px); align-items: start;
  background: var(--white); border: 1px solid var(--line);
}
@media (max-width: 680px){ .csk .statement { grid-template-columns: 1fr; gap: 18px; } }
.csk .statement__ic { width: 56px; height: 56px; color: var(--coral); }
.csk .statement__k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep); }
.csk .statement__p { margin-top: 14px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.26; text-wrap: balance; color: var(--ink); }
.csk .statement__p em { color: var(--coral); font-style: italic; }
.csk .statement__sub { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--graphite); max-width: 64ch; }

.csk .hmw { display: flex; flex-direction: column; gap: 14px; }
.csk .hmw__card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.csk .hmw__card:hover { transform: translateX(5px); border-color: var(--stone); }
.csk .hmw__no { font-family: var(--hand); font-size: 30px; color: var(--graphite); line-height: 1; flex: none; width: 34px; }
.csk .hmw__q { font-size: 16px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.csk .hmw__q b { color: var(--coral-deep); font-weight: 700; }

.csk .challenge-card {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 64px); text-align: center; color: var(--ink);
}
.csk .challenge-card__k { display: inline-flex; align-items: center; gap: 9px; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral-deep); }
.csk .challenge-card__k .ico { width: 18px; height: 18px; color: var(--coral-deep); }
.csk .challenge-card__q { margin: 18px auto 0; max-width: 26ch; font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; text-wrap: balance; }
.csk .challenge-card__q em { color: var(--coral); font-style: italic; }
.csk .challenge-card__hmw { font-family: var(--hand); font-size: clamp(30px, 4vw, 46px); display: block; margin-bottom: 4px; color: var(--coral); }

.csk .mindmap { position: relative; padding: clamp(16px, 3vw, 32px) 0; }
.csk .mm-core {
  margin: 0 auto; width: max-content; max-width: 460px; text-align: center;
  background: var(--panel); color: var(--ink); border: 1px solid var(--panel-line);
  border-radius: var(--r-lg); padding: 24px 32px; box-shadow: var(--shadow-md); position: relative; z-index: 2;
}
.csk .mm-core .lbl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 8px; }
.csk .mm-core .txt { font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.25; color: var(--ink); }
.csk .mm-branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; position: relative; z-index: 2; }
@media (max-width: 880px){ .csk .mm-branches { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .csk .mm-branches { grid-template-columns: 1fr; } }
.csk .mm-node {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 20px; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.csk .mm-node:hover { transform: translateY(-6px); border-color: var(--stone); }
.csk .mm-node__ic { width: 38px; height: 38px; margin-bottom: 12px; }
.csk .mm-node__gap { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.csk .mm-node__t { font-size: 18px; font-weight: 600; margin: 5px 0 8px; letter-spacing: -0.01em; color: var(--ink); }
.csk .mm-node__d { font-size: 14px; line-height: 1.5; color: var(--graphite); }

/* =========================================================
   15 · VERSUS  ·  COMPETITOR MATRIX  ·  DECISIONS
   ========================================================= */
.csk .versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
@media (max-width: 760px){ .csk .versus { grid-template-columns: 1fr; } }
.csk .versus__col { background: var(--white); border: 1px solid var(--line); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.csk .versus__col:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.csk .versus__col:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
@media (max-width: 760px){
  .csk .versus__col:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .csk .versus__col:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
.csk .versus__col--win { background: linear-gradient(165deg, var(--coral-soft), var(--white) 62%); border-color: var(--coral-line); }
.csk .versus__k { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.csk .versus__col--win .versus__k { color: var(--coral-deep); }
.csk .versus__t { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.csk .versus__rows { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.csk .versus__rows li { font-size: 14px; line-height: 1.45; color: var(--espresso); display: flex; gap: 9px; }
.csk .versus__rows li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stone); flex: none; margin-top: 7px; }
.csk .versus__col--win .versus__rows li::before { background: var(--coral); }
.csk .versus__mid { display: grid; place-items: center; width: 56px; }
@media (max-width: 760px){ .csk .versus__mid { width: auto; height: 50px; } }
.csk .versus__vs { font-family: var(--hand); font-size: 26px; color: var(--coral); background: var(--cream); border: 1px solid var(--line); border-radius: 50%; width: 50px; height: 50px; display: grid; place-items: center; }

/* Competitor matrix (table) */
.csk .matrix { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.csk .matrix th, .csk .matrix td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
.csk .matrix thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); background: var(--sand); }
.csk .matrix tbody th { font-weight: 600; color: var(--ink); }
.csk .matrix td { text-align: center; color: var(--graphite); }
.csk .matrix tr:last-child td, .csk .matrix tr:last-child th { border-bottom: 0; }
.csk .matrix__col-you { background: var(--coral-soft); }
.csk .matrix thead .matrix__col-you { background: rgba(255,106,61,0.22); color: var(--coral-deep); }
.csk .yes { color: var(--coral); font-weight: 700; }
.csk .no { color: var(--stone); }

.csk .decision { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: clamp(26px,4vw,38px) 0; border-top: 1px solid var(--line); }
.csk .decision:first-of-type { border-top: 0; }
.csk .decision__no { font-family: var(--hand); font-size: 42px; color: var(--graphite); line-height: 0.9; }
.csk .decision__t { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.018em; margin-bottom: 18px; color: var(--ink); }
.csk .decision__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px){ .csk .decision { grid-template-columns: 1fr; gap: 14px; } .csk .decision__cols { grid-template-columns: 1fr; } }
.csk .dcol { border-radius: var(--r-md); padding: 20px; border: 1px solid var(--line); }
.csk .dcol--considered { background: var(--sand); }
.csk .dcol--chose { background: var(--coral-soft); border-color: var(--coral-line); }
.csk .dcol--why { background: var(--white); }
.csk .dcol__k { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 9px; display: inline-flex; align-items: center; gap: 7px; }
.csk .dcol__k .ico { width: 14px; height: 14px; }
.csk .dcol--considered .dcol__k { color: var(--graphite); }
.csk .dcol__v { font-size: 14px; line-height: 1.55; color: var(--espresso); }
.csk .dcol__v b { color: var(--ink); font-weight: 700; }

/* Compact one-line design-decision strip */
.csk .dimp-strip {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px,3vw,32px); align-items: center;
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--coral);
  border-radius: var(--r-lg); padding: 22px 28px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.csk .dimp-strip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (max-width: 720px){ .csk .dimp-strip { grid-template-columns: 1fr; gap: 12px; } }
.csk .dimp-strip__ic { width: 40px; height: 40px; }
.csk .dimp-strip__k { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 6px; }
.csk .dimp-strip__d { font-size: clamp(16px,1.8vw,20px); font-weight: 600; letter-spacing: -0.012em; color: var(--ink); line-height: 1.25; }
.csk .dimp-strip__i { font-family: var(--hand); font-size: 22px; color: var(--coral); white-space: nowrap; }
@media (max-width: 720px){ .csk .dimp-strip__i { white-space: normal; } }

/* =========================================================
   16 · BEFORE / AFTER  (annotated)
   ========================================================= */
.csk .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px){ .csk .ba { grid-template-columns: 1fr; } }
.csk .ba__item { display: flex; flex-direction: column; gap: 12px; }
.csk .ba__fig { aspect-ratio: 4 / 3.2; }
.csk .ba__head { display: flex; align-items: center; gap: 10px; }
.csk .ba__head span { color: var(--graphite); font-size: 14px; }
.csk .ba__badge { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); }
.csk .ba__badge--before { background: var(--sand); color: var(--graphite); }
.csk .ba__badge--after { background: var(--coral-soft); color: var(--coral-deep); }
.csk .ba__notes { display: flex; flex-direction: column; gap: 9px; }
.csk .ba__notes li { font-size: 14px; line-height: 1.5; color: var(--espresso); display: flex; gap: 10px; }
.csk .ba__notes li b { color: var(--ink); }
.csk .ba__notes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--stone); flex: none; margin-top: 7px; }

/* =========================================================
   17 · INFORMATION ARCHITECTURE / SITEMAP
   ========================================================= */
.csk .ia { display: flex; flex-direction: column; align-items: center; gap: 0; }
.csk .ia__root {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-md);
  padding: 14px 26px; font-size: 16px; font-weight: 700; color: var(--ink);
}
.csk .ia__trunk { width: 1px; height: 26px; background: var(--line); }
.csk .ia__row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.csk .ia__node {
  display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative;
}
.csk .ia__node::before { content: ""; position: absolute; top: -26px; width: 1px; height: 26px; background: var(--line); }
.csk .ia__box {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 20px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.csk .ia__box--accent { background: var(--coral-soft); border-color: var(--coral-line); color: var(--coral-deep); }
.csk .ia__leaves { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; }
.csk .ia__leaf { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 14px; font-size: 13px; color: var(--espresso); text-align: center; }

/* =========================================================
   18 · USER FLOW  (node → node)
   ========================================================= */
.csk .flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.csk .flow__node {
  flex: 1; min-width: 120px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.csk .flow__node--start { background: var(--coral-soft); border-color: var(--coral-line); }
.csk .flow__node--decision { background: var(--sand); }
.csk .flow__ic { width: 30px; height: 30px; }
.csk .flow__t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.csk .flow__s { font-size: 11px; color: var(--graphite); }
.csk .flow__arrow { display: grid; place-items: center; padding: 0 6px; color: var(--coral); font-size: 20px; flex: none; }
@media (max-width: 720px){
  .csk .flow { flex-direction: column; }
  .csk .flow__arrow { transform: rotate(90deg); padding: 6px 0; }
}

/* =========================================================
   19 · FEATURE SPOTLIGHT  (alternating image + text)
   ========================================================= */
.csk .spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.csk .spotlight--rev .spotlight__media { order: 2; }
@media (max-width: 820px){ .csk .spotlight, .csk .spotlight--rev { grid-template-columns: 1fr; gap: 26px; } .csk .spotlight--rev .spotlight__media { order: 0; } }
.csk .spotlight__media { display: flex; justify-content: center; }
.csk .spotlight__no { font-family: var(--hand); font-size: 30px; color: var(--coral); }
.csk .spotlight__t { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 10px 0 0; }
.csk .spotlight__d { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--graphite); }
.csk .spotlight__d b { color: var(--ink); }
.csk .spotlight__tags { margin-top: 18px; display: flex; gap: 9px; flex-wrap: wrap; }

/* =========================================================
   20 · REFLECTION  ·  POV  ·  NEXT
   ========================================================= */
.csk .reflect {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start;
}
@media (max-width: 640px){ .csk .reflect { grid-template-columns: 1fr; gap: 16px; } }
.csk .reflect__ic { width: 52px; height: 52px; color: var(--coral); }
.csk .reflect__t { font-size: clamp(20px, 2.3vw, 27px); font-weight: 600; letter-spacing: -0.018em; color: var(--ink); }
.csk .reflect__p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--espresso); max-width: 62ch; }
.csk .reflect__p b { color: var(--ink); font-weight: 700; }
.csk .reflect__score { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.csk .reflect__score .n { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; color: var(--coral-deep); line-height: 1; }
.csk .reflect__score .o { font-size: 14px; color: var(--graphite); }

.csk .pov {
  background: var(--panel); color: var(--ink); border: 1px solid var(--panel-line); border-radius: var(--r-xl);
  padding: clamp(44px, 6vw, 76px) clamp(28px, 6vw, 72px); text-align: center;
}
.csk .pov .eyebrow { color: var(--coral-deep); justify-content: center; }
.csk .pov__p { margin: 22px auto 0; max-width: 40ch; font-size: clamp(22px, 3vw, 34px); font-weight: 500; line-height: 1.32; letter-spacing: -0.015em; color: var(--ink); }
.csk .pov__p em { color: var(--coral); font-style: normal; }
.csk .pov__sign { margin-top: 26px; font-family: var(--hand); font-size: 30px; color: var(--coral); }

.csk .next {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 36px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(18px, 2.5vw, 26px); box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.csk .next:hover { transform: translateY(-5px); border-color: var(--stone); box-shadow: var(--shadow-md); }
@media (max-width: 620px){ .csk .next { grid-template-columns: auto 1fr; } }
.csk .next__thumb {
  width: clamp(96px, 12vw, 150px); aspect-ratio: 4 / 3; flex: none;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--sand);
}
.csk .next__thumb image-slot, .csk .next__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s var(--ease); }
.csk .next:hover .next__thumb image-slot, .csk .next:hover .next__thumb img { transform: scale(1.06); }
.csk .next__k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 12px; }
.csk .next__t { font-size: clamp(26px, 4vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; transition: color .35s var(--ease); color: var(--ink); }
.csk .next__sub { margin-top: 10px; font-size: 14px; color: var(--graphite); }
.csk .next:hover .next__t { color: var(--coral); }
@media (max-width: 620px){ .csk .next__arrow { display: none; } }
.csk .next__arrow { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 22px; color: var(--coral); flex: none; transition: background .35s var(--ease), transform .35s var(--ease); }
.csk .next:hover .next__arrow { background: var(--coral-soft); transform: translateX(5px); }

/* =========================================================
   CHIPS (shared)
   ========================================================= */
.csk .chips { display: flex; gap: 10px; flex-wrap: wrap; }
.csk .chip { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--coral-line); color: var(--coral-deep); background: var(--coral-soft); }
.csk .chip--neutral { color: var(--graphite); background: var(--sand); border-color: var(--line); }

/* =========================================================
   REVEAL (optional, progressive enhancement)
   ========================================================= */
.csk .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.csk .reveal.in { opacity: 1; transform: none; }
.csk [data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.csk [data-stagger].in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .csk .reveal, .csk [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}