/* ==========================================================================
   kikku.css — Kikku E-commerce Case Study page
   Layout: full-width hero → two-column grid (content left | sticky sidebar right)
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE BACKGROUND
   -------------------------------------------------------------------------- */
body {
  background-color: #EBEBEB;
}

/* --------------------------------------------------------------------------
   NEXT PROJECT — override the shared .cs-next-project card for this page
   to match the Figma spec: padding+gap inside the card instead of the
   mockup image bleeding edge-to-edge, and an uncropped icon.
   -------------------------------------------------------------------------- */
.cs-next-project__card {
  align-items: center;
  padding: 16px 32px;
  gap: 32px;
}

.cs-next-project__image {
  background: transparent;
  align-self: stretch;
  border-radius: var(--radius-xl);
}

.cs-next-project__icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
  overflow: visible;
}

.cs-next-project__icon-img {
  object-fit: contain;
}

@media (max-width: 900px) {
  .cs-next-project__card {
    padding: 16px;
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   PAGE TITLE — centred above the grid
   -------------------------------------------------------------------------- */
.cs-page-title-wrap {
  padding: 120px 48px 48px;
  text-align: center;
}

.cs-page-title {
  font-family: 'Emilys Candy', cursive;
  font-size: 48px;
  font-weight: 400;
  color: #1C1C1C;
  line-height: 1.15;
  margin: 0 0 16px;
}

.cs-page-subtitle {
  font-family: 'Urbanist', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #6B6B6B;
  margin: 0;
}

/* --------------------------------------------------------------------------
   TWO-COLUMN LAYOUT
   Left (1fr) = main content; Right (200px) = sticky TOC sidebar pinned to right edge
   No max-width so the sidebar always sits close to the viewport right edge
   -------------------------------------------------------------------------- */
.case-study-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 48px;
  padding: 0 48px 120px 80px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   HERO IMAGE — first item in the left column, beside the TOC from page top
   -------------------------------------------------------------------------- */
.cs-hero-image-wrap {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 60px;
}

.cs-hero-image {
  width: 100%;
  height: auto;
  display: block;
}

.cs-main-content {
  min-width: 0; /* prevent grid blowout */
}

/* --------------------------------------------------------------------------
   SECTION SHARED STYLES
   -------------------------------------------------------------------------- */
.cs-section {
  padding: 60px 0 0;
  scroll-margin-top: 110px;
}

.cs-section:first-child {
  padding-top: 0;
}

.cs-section--coming {
  padding: 0;
  min-height: 0;
  border-bottom: none;
}

.cs-section__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.cs-section__title {
  font-family: 'Emilys Candy', cursive;
  font-size: 32px;
  font-weight: 400;
  color: #1C1C1C;
  margin: 0;
}

/* --------------------------------------------------------------------------
   STAR ICON — PNG star images from project assets
   -------------------------------------------------------------------------- */
.cs-star-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   SECTION 1 — OVERVIEW: plain vertical list (no table, no card)
   -------------------------------------------------------------------------- */
.cs-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-overview__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-overview__label {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #6B6B6B;   /* Grey 600 */
  margin: 0;
  line-height: 1.3;
}

.cs-overview__value {
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1C1C1C;   /* Grey 900 */
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------------------------------
   PROBLEM FRAMING LABEL — Challenges section subtitle
   -------------------------------------------------------------------------- */
.cs-problem-label {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #6B6B6B;
  margin: 0 0 16px;
}

/* --------------------------------------------------------------------------
   FULL-WIDTH IMAGE — Highlights, Research Summary
   -------------------------------------------------------------------------- */
.cs-full-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.cs-full-image--mb {
  margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   CHALLENGES / SOLUTIONS — text card + image side-by-side
   --text-left:  text card LEFT, image RIGHT  (Challenges)
   --img-left:   image LEFT, text card RIGHT  (Solutions)
   -------------------------------------------------------------------------- */
.cs-split-card {
  display: grid;
  align-items: stretch;
  border-radius: 32px;
  overflow: hidden;
}

.cs-split-card--text-left {
  grid-template-columns: 2fr 3fr;
}

.cs-split-card--img-left {
  grid-template-columns: 3fr 2fr;
}

.cs-split-card__text {
  background: #FAFAFA;
  padding: 32px 24px;
  display: flex;
  align-items: flex-start;
}

.cs-split-card__text p {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #5C5C5C;
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Image cell: fills the grid row height and never squishes */
.cs-split-card__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   SPLIT LAYOUT — (legacy, kept for backward compat)
   -------------------------------------------------------------------------- */
.cs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.cs-split--reverse {
  direction: rtl;
}

.cs-split--reverse > * {
  direction: ltr;
}

.cs-split__subheading {
  font-family: 'Urbanist', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0 0 16px;
}

.cs-split__body {
  font-family: 'Urbanist', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #3C3C3C;
  line-height: 1.75;
  margin: 0;
}

.cs-split__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   DESIGN PROCESS — 5-step zigzag layout with orange arrow connectors
   -------------------------------------------------------------------------- */
.dp-steps {
  display: flex;
  flex-direction: column;
  margin-bottom: 64px;
}

.dp-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.dp-step__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-step__num {
  font-family: 'Urbanist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #FA7319;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dp-step__heading {
  font-family: 'Urbanist', sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #1C1C1C;
  margin: 0;
  line-height: 1.2;
}

.dp-step__card {
  /* No background or border — text sits directly on page background */
}

.dp-step__card-text {
  font-family: 'Urbanist', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #3C3C3C;
  line-height: 1.6;
  margin: 0;
}

/* Research Summary — crop baked-in title/description from PNG, show diagram only */
.cs-rs-diagram {
  overflow: hidden;
  position: relative;
  aspect-ratio: 5 / 2;
}

.cs-rs-diagram__img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Clip container for how-we-solved PNG — removes grey circle artifact at bottom */
.dp-solved-clip {
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.dp-solved-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Orange arrow connector — inset horizontally so arrow runs description-to-description */
.dp-connector {
  display: block;
  line-height: 0;
  padding: 0 10%;
}

.dp-arrow {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

.dp-arrow--flip {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   DESIGN PROCESS — subsection steps (CSS kept for future use)
   -------------------------------------------------------------------------- */
.cs-process-step {
  padding: 48px 0;
  border-bottom: 1px solid #E6E6E6;
}

.cs-process-step:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.cs-process-step--img-left,
.cs-process-step--img-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.cs-process-step--img-right .cs-process-step__image { order: 2; }
.cs-process-step--img-right .cs-process-step__text  { order: 1; }

.cs-process-step__heading {
  font-family: 'Urbanist', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0 0 16px;
}

.cs-process-step__body {
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #3C3C3C;
  line-height: 1.75;
  margin: 0;
}

.cs-process-step__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   PROCESS CIRCLE — "How we solved the problem"
   Pure CSS orange donut with 4 cardinal labels
   -------------------------------------------------------------------------- */
.cs-circle-heading {
  font-family: 'Urbanist', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1C1C1C;
  text-align: center;
  margin: 64px 0 48px;
}

.process-circle-wrap {
  position: relative;
  width: 520px;
  height: 520px;
  margin: 0 auto 80px;
}

.process-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 52px solid #FA7319;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-circle__text {
  font-family: 'Urbanist', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #FA7319;
  text-align: center;
}

.process-circle__label {
  position: absolute;
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1C1C1C;
  white-space: nowrap;
}

/* Diagonal corner positions matching the design reference */
.process-circle__label--tl { top: 48px;    left: 24px;  text-align: left;  }
.process-circle__label--tr { top: 48px;    right: 24px; text-align: right; }
.process-circle__label--br { bottom: 48px; right: 24px; text-align: right; }
.process-circle__label--bl { bottom: 48px; left: 24px;  text-align: left;  }

/* --------------------------------------------------------------------------
   USER PERSONAS — structured card: SVG photo LEFT/RIGHT + text content
   -------------------------------------------------------------------------- */
.cs-personas-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cs-persona-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  background: #FFFFFF;
  box-shadow: 0 3px 36px rgba(0, 0, 0, 0.05);
  border-radius: 40px;
  padding: 40px;
}

/* Persona 2 reversal is handled purely by source order */

.cs-persona-img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 28px;
}

.cs-persona-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}

.cs-persona-bio {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #5C5C5C;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0;
}

.cs-persona-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-persona-section__title {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: 0.02em;
}

.cs-persona-section__body {
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5C5C5C;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0;
}

.cs-persona-goals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-persona-goals li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #4A5565;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.cs-persona-goals li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(120.57deg, #F79E1B -45.54%, #FF4F4F 123.38%);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
  flex-shrink: 0;
}

.cs-persona-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-persona-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Urbanist', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #5C5C5C;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.cs-persona-list li::before {
  content: '·';
  font-size: 20px;
  line-height: 1.2;
  color: #9B9B9B;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   RESEARCH SUMMARY — intro text + waffle charts + stats
   -------------------------------------------------------------------------- */
.cs-intro-text {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #3C3C3C;
  line-height: 1.75;
  margin: 0 0 48px;
}

.cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Waffle dot chart — 5-column grid, grey → orange fill from top → bottom */
.cs-waffle {
  display: grid;
  grid-template-columns: repeat(5, 18px);
  gap: 6px;
}

.cs-waffle__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.cs-waffle__dot--grey   { background: #DEDEDE; }
.cs-waffle__dot--orange { background: #FA7319; }

.cs-stat__number {
  font-family: 'Urbanist', sans-serif;
  font-size: 120px;
  font-weight: 400;
  color: #1C1C1C;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cs-stat__pct {
  font-size: 56px;
  font-weight: 400;
  vertical-align: super;
  line-height: 0;
}

.cs-stat__desc {
  font-family: 'Urbanist', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #3C3C3C;
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------------------------------
   STICKY SIDEBAR — Compact, minimal design with smooth active state
   -------------------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 120px;
  align-self: start;
  background: transparent;
  padding: 0;
}

.sidebar__label {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #AB87FF;
  margin: 0 0 14px;
  display: block;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar__link {
  display: block;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #6B6B6B;
  text-decoration: none;
  line-height: 1.6;
  padding: 4px 0 4px 12px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.sidebar__link:hover {
  color: #1C1C1C;
  border-left-color: #AB87FF;
  padding-left: 16px;
}

/* Active state: prominent left border indicator */
.sidebar__link.active {
  color: #1C1C1C;
  font-weight: 500;
  border-left-color: #7D52F4;
  padding-left: 16px;
}

#back-to-top-link {
  color: #6B6B6B;
  margin-top: 8px;
  border-left-color: transparent;
}

#back-to-top-link:hover {
  border-left-color: #AB87FF;
}

/* --------------------------------------------------------------------------
   KEY FEATURES — alternating two-column layout with dashed connectors
   -------------------------------------------------------------------------- */

#key-features {
  padding-top: 80px;
}

/* ── Each feature block flows top-to-bottom ── */
.kf-block {
  padding: 60px 0;
  overflow: visible;
}

/* Full-width block — image fills the content column with no side text */
.kf-block--full {
  padding: 40px 0;
}

.kf-block--full .kf-frame-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Top row: UI frame image LEFT, description text RIGHT ── */
.kf-block__top {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}

/* Flat UI screenshot */
.kf-frame-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Description text column */
.kf-block__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

.kf-para {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #333333;
  line-height: 1.75;
  margin: 0;
}

/* Block 1: hero composition image needs more room */
.kf-block__top--hero {
  grid-template-columns: 4fr 2fr;
  align-items: start;
}

/* Block 2: product card stacked above text (matches Figma column layout) */
.kf-block__top--stacked {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.kf-block__top--stacked .kf-frame-img {
  max-width: 65%;
  margin: 0 auto;
}

/* Block 4: smaller image column so the map doesn't overpower the text */
.kf-block__top--sm-img {
  grid-template-columns: 2fr 3fr;
}

/* Block 3: text left (~40%), timeline card right (~60%) */
.kf-block__top--reversed {
  grid-template-columns: 2fr 3fr;
}

/* ── Down arrow, centered ── */
.kf-block__arrow {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.kf-arrow-img {
  display: block;
  width: auto;
  height: auto;
  max-height: 64px;
}

/* ── Phone mockup, centered at 50% width ── */
.kf-block__mockup {
  width: 50%;
  margin: 0 auto;
}

.kf-mockup-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── VISUAL DESIGNS ────────────────────────────────────────────── */
.vd-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vd-hero {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* ── DESIGN OUTCOME ─────────────────────────────────────────────── */
.do-intro {
  font-family: 'Urbanist', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #5C5C5C;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 0 40px;
}

.do-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.do-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.do-card p {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #1C1C1C;
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 0;
}

.do-mockup {
  width: 100%;
  height: auto;
  display: block;
}

/* Shared mockup row base */
.vd-mockups {
  width: 115%;
  height: auto;
  display: block;
  border-radius: 16px;
  overflow: visible;
}

/* First row — bleeds from the right */
.vd-mockups--left {
  margin-left: 0;
  margin-right: -15%;
}

/* Second row — bleeds from the left */
.vd-mockups:not(.vd-mockups--left) {
  margin-left: -15%;
}

/* Live map phone — right-aligned, bleeds off the right edge */
.kf-block__mockup--right {
  width: 70%;
  margin-left: auto;
  margin-right: -8%;
  overflow: visible;
}

/* Order screen — hand bleeds out of the column, bg matches page so it blends seamlessly */
.kf-block__mockup--order {
  width: 115%;
  margin-left: -18%;
  overflow: visible;
}


/* ── Dashed divider between blocks ── */
.kf-hr {
  border: none;
  border-top: 1.5px dashed #D0D0D0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   IMPACT — staggered metric cards + style-guide row
   -------------------------------------------------------------------------- */
.impact-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.impact-card {
  width: 60%;
  height: auto;
  display: block;
  border-radius: 20px;
}

.impact-card--left  { margin-right: auto; }
.impact-card--right { margin-left: auto;  }

.impact-typography {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 32px;
}

.impact-typography__card {
  width: 100%;
  height: auto;
  display: block;
}

.impact-typography__scale {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: right;
}

.impact-type-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.impact-type-row__specimen {
  font-family: 'Urbanist', sans-serif;
  color: #1A1C29;
  margin: 0;
  line-height: 1.4;
}

.impact-type-row__specimen--heading    { font-size: 24px; font-weight: 700; }
.impact-type-row__specimen--subheading { font-size: 18px; font-weight: 600; }
.impact-type-row__specimen--body       { font-size: 16px; font-weight: 400; }

.impact-type-row__label {
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6B6B6B;
}

.impact-colors {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Tablet (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cs-page-title-wrap {
    padding: 120px 40px 40px;
  }

  .cs-page-title {
    font-size: 36px;
  }

  .case-study-layout {
    grid-template-columns: 1fr;
    padding: 32px 40px 80px;
    gap: 0;
  }

  /* Sidebar moves above content on tablet */
  .sidebar {
    position: static;
    order: -1;
    margin-bottom: 40px;
  }

  .sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .sidebar__link {
    font-size: 15px;
    padding: 6px 16px;
    border: 1px solid #D9D9D9;
    border-radius: 100px;
    background: #FFFFFF;
  }

  .sidebar__link.active,
  .sidebar__link:hover {
    border-color: #7D52F4;
    color: #7D52F4;
    background: #F4F0FF;
  }

  #back-to-top-link {
    margin-top: 0;
  }

  /* Split cards stack vertically on tablet */
  .cs-split-card--text-left,
  .cs-split-card--img-left {
    grid-template-columns: 1fr;
  }

  .cs-split-card--img-left .cs-split-card__img {
    order: -1;
  }

  .cs-split-card__img {
    min-height: 240px;
  }

  .cs-personas {
    grid-template-columns: 1fr;
  }

  .cs-stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .process-circle-wrap {
    width: 420px;
    height: 420px;
  }

  .process-circle {
    width: 240px;
    height: 240px;
    border-width: 42px;
  }

  /* Persona cards: stack vertically on tablet */
  .cs-persona-card {
    grid-template-columns: 1fr;
    padding: 28px;
    border-radius: 28px;
  }

  /* Image always on top when stacked, regardless of source order */
  .cs-persona-card .cs-persona-img {
    order: -1;
    min-height: 320px;
  }

  /* Key Features: narrow the mockup on tablet */
  .kf-block__mockup {
    width: 65%;
  }

  .kf-block__top--hero {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Mobile (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .cs-page-title-wrap {
    padding: 100px 24px 32px;
  }

  .cs-page-title {
    font-size: 28px;
  }

  .cs-page-subtitle {
    font-size: 12px;
  }

  .case-study-layout {
    padding: 24px 24px 64px;
  }

  /* ── Hero image → Overview gap ── */
  .cs-hero-image-wrap {
    margin-bottom: 0;
  }

  /* ── All sections: 24px top gap, no bottom ── */
  .cs-section {
    padding: 24px 0 0;
  }

  .cs-section__title {
    font-size: 26px;
  }

  .cs-persona-card {
    padding: 20px;
    border-radius: 24px;
  }

  .cs-persona-card .cs-persona-img {
    min-height: 260px;
  }

  .cs-split,
  .cs-split--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .cs-split--reverse > * {
    direction: ltr;
  }

  .cs-process-step--img-left,
  .cs-process-step--img-right {
    grid-template-columns: 1fr;
  }

  .cs-process-step--img-right .cs-process-step__image,
  .cs-process-step--img-right .cs-process-step__text {
    order: unset;
  }

  .cs-metadata {
    grid-template-columns: 1fr;
  }

  .cs-metadata__row {
    border-right: none;
  }

  .cs-metadata__row:nth-last-child(-n+2) {
    border-bottom: 1px solid #E6E6E6;
  }

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

  .process-circle-wrap {
    width: 310px;
    height: 310px;
  }

  .process-circle {
    width: 180px;
    height: 180px;
    border-width: 32px;
  }

  .process-circle__text {
    font-size: 16px;
  }

  .process-circle__label {
    font-size: 12px;
  }

  .cs-stat__number {
    font-size: 52px;
  }

  /* Key Features: stack frame and text on mobile */
  .kf-block {
    padding: 20px 0;
  }

  .kf-block__top {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 20px;
  }

  .kf-block__mockup {
    width: 90%;
  }

  /* Keep subtle bleed on mobile — hand/phone still feels like it comes from inside */
  .kf-block__mockup--order {
    width: 80%;
    margin-left: -5%;
    overflow: visible;
  }

  .kf-block__mockup--right {
    width: 108%;
    margin-left: 8%;
    margin-right: -8%;
    overflow: visible;
  }

  /* Impact: full-width cards, 16px gap between each ── */
  .impact-cards {
    gap: 16px;
  }

  .impact-card {
    width: 88%;
  }

  .impact-typography {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .impact-typography__scale {
    text-align: left;
  }

  /* Hide TOC sidebar on mobile */
  .sidebar {
    display: none;
  }

  /* Challenges: image above text on mobile */
  .cs-split-card--text-left .cs-split-card__img {
    order: -1;
  }

  /* Design Outcome: stack card above mockup on mobile */
  .do-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .do-intro {
    font-size: 14px;
  }

  .do-card p {
    font-size: 14px;
  }

  .kf-para {
    font-size: 14px;
  }

  /* ── Next Project card — matches home page project card style ── */
  .cs-next-project {
    padding: 24px 16px 40px;
  }

  .cs-next-project__label {
    font-size: 14px;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
  }

  .cs-next-project__star {
    width: 14px;
    height: 14px;
  }

  .cs-next-project__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    gap: 10px;
    width: 100%;
    max-width: 355px;
    height: auto;
    border-radius: 17px;
    margin: 0 auto;
    overflow: hidden;
  }

  .cs-next-project__image {
    width: 100%;
    height: 256px;
    background: #EBEBEB;
    border-radius: 13px;
    overflow: hidden;
  }

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

  .cs-next-project__text {
    padding: 0 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .cs-next-project__title-row {
    gap: 8px;
  }

  .cs-next-project__icon {
    width: 28px;
    height: 28px;
  }

  .cs-next-project__title {
    font-size: 16px;
  }

  .cs-next-project__category {
    font-size: 14px;
    margin-top: 6px;
  }

  .cs-next-project__description {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 8px;
  }

  .cs-next-project__btn {
    margin-top: 10px;
    align-self: stretch;
    text-align: center;
    padding: 12px 16px;
    font-size: 16px;
    width: 100%;
    background: #7D52F4;
    border-width: 0.5px 4px 4px 0.5px;
    border-style: solid;
    border-color: #171717;
    border-radius: 8px;
    color: #F7F7F7;
    display: block;
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Small Mobile (≤ 393px)
   -------------------------------------------------------------------------- */
@media (max-width: 393px) {
  .cs-page-title {
    font-size: 24px;
  }

  .process-circle-wrap {
    width: 270px;
    height: 270px;
  }

  .process-circle {
    width: 158px;
    height: 158px;
    border-width: 28px;
  }
}