@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

@property --layer-offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* Crossfade between same-origin pages on link navigation.
   Browsers without View Transitions support fall back to instant nav. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ════════════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════════════ */
:root {
  /* ── Brand / fonts ──────────────────────────────────── */
  --purple:  #4D00C0;
  --text:    #1e2035;
  --muted:   #6b7280;
  --font-heading: 'Geist', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, sans-serif;
  --font:    var(--font-body);

  /* ── Type scale (desktop — overridden for mobile below) ── */
  --text-display:  100px;
  --text-h1:       40px;
  --text-h2:       32px;
  --text-h3:       24px;
  --text-h4:       18px;
  --text-lead:     24px;
  --text-body-lg:  18px;
  --text-body:     16px;
  --text-label:    16px;
  --text-caption:  15px;
  --text-overline: 16px;
  --text-tag:      16px;

  /* ── Weights ────────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Leading ────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.85;

  /* ── Tracking ───────────────────────────────────────── */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.025em;
  --tracking-snug:     -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.14em;

  /* ── Palette ────────────────────────────────────────── */
  --plum:     #5A02BF;
  --lavender: #4D00C0;
  --charcoal: #434343;
  --silver:   #959595;
  --ash:      #BDBDBD;
  --mist:     #DBDBDB;
  --white:    #FFFFFF;

  /* ── Semantic colours ───────────────────────────────── */
  --color-primary:   var(--lavender);
  --color-secondary: var(--silver);
  --color-tertiary:  var(--silver);
  --color-subtle:    var(--mist);
  --color-accent:    var(--lavender);
  --color-inverse:   var(--white);
}

/* ── Mobile type overrides — sizes only; everything that
   references these tokens scales automatically. ─────── */
@media (max-width: 768px) {
  :root {
    --text-display:  48px;
    --text-h1:       36px;
    --text-h2:       26px;
    --text-h3:       22px;
    --text-h4:       18px;
    --text-lead:     18px;
    --text-body-lg:  16px;
  }
}

/* ════════════════════════════════════════════════════════
   GLOBAL BASE
   ════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}
html, body {
  height: 100%; background: #ffffff;
  font-family: var(--font); color: var(--silver);
  overflow-x: clip;
}


/* ── Nav (shared across all pages) ─────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(40px, calc((100vw - 1200px) / 2 + 40px));
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06); z-index: 100;
  transition: transform 0.3s ease;
}
nav.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  nav { transition: none; }
}
.logo {
  color: var(--color-primary);
  text-decoration: none;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  color: var(--color-tertiary);
  text-decoration: none;
  transition: color 0.4s ease;
  font-weight: var(--weight-regular);
}
.nav-links a:hover { color: var(--color-primary); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 32px;
  height: 32px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
nav.is-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.is-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.is-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: 56px;
    left: 0; right: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  nav.is-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links a {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .nav-links a:last-child { border-bottom: none; }
}

/* ════════════════════════════════════════════════════════
   TEXT STYLES
   Standard naming used across the whole site.
   Apply directly to elements: <h1 class="h1">, <p class="lead">.
   Sizes scale to mobile via the :root @media block above.
   ════════════════════════════════════════════════════════ */

/* Headings — Geist heading font */
.display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  color: var(--charcoal);
}
.display {
  font-size: var(--text-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
}
.h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: 0em;
}
.h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0em;
}
.h4 {
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

/* Body styles — Open Sans (inherited from body) */
.lead {
  font-size: var(--text-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}
.body-lg {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  letter-spacing: 0em;
}

.body {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}
.label {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.overline {
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.8;
  letter-spacing: 0em;
}
.tag {
  font-family: var(--font-heading);
  font-size: var(--text-tag);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0em;
}

/* Colour utilities */
.color-primary   { color: var(--color-primary);   }
.color-secondary { color: var(--color-secondary); }
.color-tertiary  { color: var(--color-tertiary);  }
.color-subtle    { color: var(--color-subtle);    }
.color-accent    { color: var(--color-accent);    }
.color-inverse   { color: var(--color-inverse);   }

/* ════════════════════════════════════════════════════════
   HOMEPAGE
   ════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding-top: 56px;
  position: relative; overflow: hidden;
}
#dot-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-inner {
  max-width: 1300px; width: 100%; margin: 0 auto;
  padding: 0 40px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  position: relative; z-index: 1;
}

/* ── Splash overlay ──────────────────────────────────── */
#splash {
  position: fixed; inset: 0; z-index: 999;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  gap: 0.55em;
  pointer-events: none;
}
#spl-hi, #spl-name {
  color: var(--color-primary);
  will-change: transform, opacity;
}
#spl-hi   { opacity: 0; transform: translateY(-44px); }
#spl-name { opacity: 0; transform: translateX(-28px); }

/* ── Hero text (left col) ────────────────────────────── */
.hero h1 { margin-bottom: 26px; color: var(--lavender); }
.h1-hi, .h1-name { display: inline-block; }
.bio {
  color: var(--color-secondary);
  max-width: 620px;
  margin: 0 auto;
}

/* ── Hero avatar ─────────────────────────────────────── */
.hero-avatar {
  position: relative;
  width: 72px;
  height: 130px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
/* All four layers share the same rules — photo is just a layer with an image inside */
.hero-avatar-img,
.hero-avatar-layer {
  --layer-offset: 0px;
  --float-travel: 5px;
  position: absolute;
  left: 50%;
  width: 72px; height: 72px;
  margin-left: -36px;
  background: var(--lavender);
  border-radius: 14px;
  overflow: hidden;
  animation: avatar-diamond-float 2.8s ease-in-out infinite backwards;
}
/* Photo layer — sits on top, least travel (mirrors fw-diamond-layer--1) */
.hero-avatar-img { --layer-offset: 0px; --float-travel: 4px;  z-index: 4; animation-delay: 0s; }
.hero-avatar-img img {
  position: absolute;
  top: 50%; left: 50%;
  width: 145%; height: 145%;
  transform: translate(-50%, -50%) rotate(-45deg);
  object-fit: cover;
  object-position: center top;
}
/* Diamond layers — travel increases downward, matching fw-diamond motion */
.hero-avatar-layer--1 { --layer-offset: 16px; --float-travel: 8px;  opacity: 1.00; z-index: 3; animation-delay: 0.14s; }
.hero-avatar-layer--2 { --layer-offset: 32px; --float-travel: 14px; opacity: 0.50; z-index: 2; animation-delay: 0.30s; }
.hero-avatar-layer--3 { --layer-offset: 48px; --float-travel: 22px; opacity: 0.28; z-index: 1; animation-delay: 0.46s; }
@keyframes avatar-diamond-float {
  0%, 100% { transform: translateY(var(--layer-offset)) rotate(45deg); }
  50%       { transform: translateY(calc(var(--layer-offset) - var(--float-travel))) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-avatar-img,
  .hero-avatar-layer { animation: none; transform: translateY(var(--layer-offset)) rotate(45deg); }
}

/* ── Highlight (brush-stroke underline on bio) ────────── */
@keyframes hl-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.hl {
  display: inline;
  position: relative;
  color: var(--charcoal);
  font-weight: var(--weight-semibold);
}
.hl::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -2px;
  right: -2px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-3%25' y='-50%25' width='106%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018 0.28' numOctaves='2' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='3' y='4' width='294' height='9' rx='3' fill='%234D00C0' opacity='0.7' filter='url(%23f)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  clip-path: inset(0 100% 0 0);
  animation: hl-wipe 0.6s cubic-bezier(0.4, 0, 0.15, 1) both;
  animation-play-state: paused;
}
.hl-run::before {
  animation-play-state: running;
}

/* ── Right col / Album stack ─────────────────────────── */
.right-col {
  display: none; /* hidden — kept for future use */
}
.stack {
  position: relative;
  width: 520px; height: 532px;
  flex-shrink: 0;
}
.card-wrap {
  position: absolute; top: 0; left: 0;
  width: 440px; height: 440px;
  border-radius: 16px; overflow: hidden;
  transform-origin: 0 60%;
  transition: translate 0.60s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity 0.52s ease;
}
.card {
  width: 100%; height: 100%;
  border-radius: 16px;
}
.illus {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: flex-start;
  overflow: hidden;
}

@keyframes hb {
  0%,100% { transform: scale(1);    }
  15%     { transform: scale(1.14); }
  30%     { transform: scale(0.96); }
  45%     { transform: scale(1.08); }
}
.heart-shape {
  transform-origin: 220px 213px;
  animation: hb 1.3s ease-in-out infinite;
  animation-delay: 0.5s;
}

#prog-track {
  position: absolute;
  top: 516px;
  left: 180px;
  width: 220px;
  height: 5px;
  max-height: 5px;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-radius: 99px;
  z-index: 10;
  overflow: hidden;
}
#prog-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 99px;
  width: 0%;
  opacity: 0.65;
}

/* ── Featured Work ───────────────────────────────────── */
.featured-work {
  background: #ffffff;
  padding: 100px 0 120px;
}
.fw-inner {
  max-width: 1200px; width: 100%;
  margin: 0 auto; padding: 0 40px;
}
.fw-heading {
  margin-bottom: 52px;
}
.fw-heading .fw-diamond {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 16px;
  position: relative;
}
.fw-diamond-layer {
  --layer-offset: 0px;
  --float-travel: 8px;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--color-accent);
  border-radius: 3px;
  animation: fw-diamond-float 2.8s ease-in-out infinite;
}
.fw-diamond-layer--1 { --layer-offset: -8px; --float-travel: 4px;  opacity: 1.00; z-index: 3; animation-delay: 0s; }
.fw-diamond-layer--2 { --layer-offset:  0px; --float-travel: 8px;  opacity: 0.40; z-index: 2; animation-delay: 0.14s; }
.fw-diamond-layer--3 { --layer-offset:  8px; --float-travel: 12px; opacity: 0.24; z-index: 1; animation-delay: 0.30s; }
@keyframes fw-diamond-float {
  0%, 100% { transform: translateY(var(--layer-offset)) rotate(45deg); }
  50%       { transform: translateY(calc(var(--layer-offset) - var(--float-travel))) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fw-diamond-layer { animation: none; transform: translateY(var(--layer-offset)) rotate(45deg); }
}
.fw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px 40px;
}
.fw-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-decoration: none; color: inherit; }
.fw-card:hover .fw-image img { transform: scale(1.03); }
.fw-company {
  color: var(--color-tertiary);
}
.fw-title {
}
.fw-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 2px;
}
.fw-tag {
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: 99px;
  padding: 3px 10px;
}
.fw-image {
  margin-top: 6px;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
}
.fw-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Scroll-in fade for featured work */
.fw-heading,
.fw-card {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.56s ease,
              transform 0.56s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fw-heading.in-view,
.fw-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Homepage-only keyframes ─────────────────────────── */
@keyframes prog-anim {
  from { width: 0%; }
  to   { width: 100%; }
}
@keyframes bounce-scale {
  0%   { transform: scale(1);    }
  55%  { transform: scale(1.04); }
  80%  { transform: scale(0.99); }
  100% { transform: scale(1);    }
}

/* ════════════════════════════════════════════════════════
   CASE STUDIES
   ════════════════════════════════════════════════════════ */

.cs-page { padding-top: 56px; }

/* ── Cover image — full-bleed, max 600px tall ────────── */
.cs-cover {
  width: 100%;
  height: 600px;
  overflow: hidden;
  margin: 0 0 64px 0;
}
.cs-cover img {
  width: 100%;
  height: 130%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.cs-placeholder-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Body — 1400px max width centered ────────────────── */
.cs-body {
  max-width: 1200px; margin: 0 auto;
  padding: 0 40px 120px;
}

/* ── Hero text block (lives inside .cs-body) ─────────── */
.cs-hero {
  margin-bottom: 120px;
  scroll-margin-top: 72px;
}
.cs-company {
  color: var(--color-tertiary);
  margin-bottom: 14px;
}
.cs-title {
  color: var(--charcoal);
  margin-bottom: 20px;
}
.cs-summary {
  color: var(--color-secondary);
  margin-bottom: 24px;
}

.cs-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cs-tag {
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: 99px;
  padding: 3px 12px;
}

/* ── Meta row (Role / Timeline / Platform) ───────────── */
.cs-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid color-mix(in srgb, var(--lavender) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--lavender) 20%, transparent);
  padding: 16px 0;
  margin-top: 24px;
  margin-bottom: 32px;
}
.cs-meta-item p:first-child {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 6px;
}
.cs-meta-item p:last-child {
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-secondary);
}

/* ── Two-column layout: TOC sidebar + sections ───────── */

.cs-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0 60px;
  align-items: start;
}

.cs-toc {
  position: sticky;
  top: 80px;
  padding-top: 10px;
}

.toc-track {
  position: relative;
}

.cs-toc ul {
  list-style: none;
}

.toc-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.toc-indicator-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  background: var(--lavender);
  border-radius: 3px;
  transform: rotate(45deg);
  will-change: transform;
  --float-travel: 3px;
  --layer-offset: 0px;
  animation: toc-diamond-idle 2.8s ease-in-out infinite;
  animation-fill-mode: backwards;
  animation-play-state: paused;
  transition: opacity 0.3s ease;
}
@keyframes toc-diamond-idle {
  0%, 100% { transform: translateY(calc(var(--toc-layer-y, 0px) + var(--layer-offset, 0px))) rotate(45deg); }
  50%       { transform: translateY(calc(var(--toc-layer-y, 0px) + var(--layer-offset, 0px) - var(--float-travel))) rotate(45deg); }
}
.toc-indicator-layer--1 { opacity: 1.00; z-index: 5; --float-travel: 2px;  animation-delay: 0s; }
.toc-indicator-layer--2 { opacity: 0.40; z-index: 4; --float-travel: 5px;  animation-delay: 0.14s; --layer-offset: 4px; }
.toc-indicator-layer--3 { opacity: 0.24; z-index: 3; --float-travel: 8px;  animation-delay: 0.28s; --layer-offset: 8px; }
.toc-indicator-layer--4 { opacity: 0;    z-index: 2; --float-travel: 8px;  animation-delay: 0.42s; }
.toc-indicator-layer--5 { opacity: 0;    z-index: 1; --float-travel: 10px; animation-delay: 0.56s; }
@media (prefers-reduced-motion: reduce) {
  .toc-indicator-layer { animation: none; will-change: auto; transform: rotate(45deg); }
}

.toc-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-tertiary);
  text-decoration: none;
  margin-bottom: 29px;
  transition: color 0.3s ease;
}
.toc-back:hover { color: var(--color-primary); }
.toc-back svg { flex-shrink: 0; }

.toc-link {
  display: block;
  padding: 7px 0 7px 24px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-tertiary);
  text-decoration: none;
  text-transform: none;
  transition: color 0.4s ease, font-size 0.3s ease, font-weight 0.3s ease;
  line-height: 1.4;
}

.toc-link:hover {
  color: var(--color-primary);
}

.toc-link.active {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

/* ── Sections (Overview / Challenge / etc.) ──────────── */
.cs-section { margin-bottom: 120px; scroll-margin-top: 80px; }
.h5, .cs-section h5 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-tertiary);
  margin-bottom: 8px;
}
.cs-section h5 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lavender);
}
.cs-section-icon {
  width: 28px;
  height: 28px;
  color: var(--lavender);
  flex-shrink: 0;
  transform: scale(0);
  stroke-width: 1.5;
}

/* Book — left page fades in, right page flips open from its left edge */
.cs-section-icon--book {
  transform: scale(1);
  /* perspective gives the right-page flip a sense of depth instead of a
     flat horizontal squash */
  perspective: 200px;
}
.cs-section-icon--book path {
  opacity: 0;
}
.cs-section-icon--book path:last-child {
  /* rotate around the spine (left edge of the right-page bounding box) */
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: rotateY(-180deg);
}
.cs-section.in-view .cs-section-icon--book path:first-child {
  animation: cs-icon-book-fade 0.45s ease 0.2s forwards;
}
.cs-section.in-view .cs-section-icon--book path:last-child {
  animation: cs-icon-book-flip 0.8s cubic-bezier(0.45, 0, 0.55, 1) 0.55s forwards;
}
@keyframes cs-icon-book-fade {
  to { opacity: 1; }
}
@keyframes cs-icon-book-flip {
  0%   { transform: rotateY(-180deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: rotateY(0deg);    opacity: 1; }
}


/* Magnifying glass — pop, then sweep clockwise around a circle.
   8 keyframes (cardinal + ordinal) approximate a circle; linear
   timing between scan keyframes keeps the speed constant around
   the loop instead of "pulsing" via ease re-applying each segment. */
.cs-section.in-view .cs-section-icon--search {
  animation: cs-icon-search 1.1s ease 0.3s forwards;
}
@keyframes cs-icon-search {
  0%   { transform: scale(0) translate(0, 0); }
  25%  { transform: scale(1.15) translate(0, 0); }
  33%  { transform: scale(1) translate(0, -3px);            animation-timing-function: linear; } /* 12 */
  41%  { transform: scale(1) translate(2.12px, -2.12px);    animation-timing-function: linear; } /* 1:30 */
  49%  { transform: scale(1) translate(3px, 0);             animation-timing-function: linear; } /* 3 */
  57%  { transform: scale(1) translate(2.12px, 2.12px);     animation-timing-function: linear; } /* 4:30 */
  65%  { transform: scale(1) translate(0, 3px);             animation-timing-function: linear; } /* 6 */
  73%  { transform: scale(1) translate(-2.12px, 2.12px);    animation-timing-function: linear; } /* 7:30 */
  81%  { transform: scale(1) translate(-3px, 0);            animation-timing-function: linear; } /* 9 */
  89%  { transform: scale(1) translate(-2.12px, -2.12px);   animation-timing-function: linear; } /* 10:30 */
  95%  { transform: scale(1) translate(0, -3px); }                                              /* close loop at 12 */
  100% { transform: scale(1) translate(0, 0); }                                                 /* settle to center */
}

/* Stacked bar chart — bars grow from baseline, then dividers fade in */
.cs-section-icon--chart {
  transform: scale(1);
}
.cs-section-icon--chart rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.cs-section-icon--chart path:nth-of-type(1),
.cs-section-icon--chart path:nth-of-type(2) { opacity: 0; }
.cs-section.in-view .cs-section-icon--chart rect:nth-of-type(1) { animation: cs-bar-grow 0.4s ease 0.1s forwards; }
.cs-section.in-view .cs-section-icon--chart rect:nth-of-type(2) { animation: cs-bar-grow 0.4s ease 0.2s forwards; }
.cs-section.in-view .cs-section-icon--chart path:nth-of-type(1) { animation: cs-bar-fade 0.3s ease 0.55s forwards; }
.cs-section.in-view .cs-section-icon--chart path:nth-of-type(2) { animation: cs-bar-fade 0.3s ease 0.65s forwards; }
@keyframes cs-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes cs-bar-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lightbulb — pop and flicker */
.cs-section.in-view .cs-section-icon--bulb {
  animation: cs-icon-bulb 0.9s ease 0.3s forwards;
}
@keyframes cs-icon-bulb {
  0%   { transform: scale(0); opacity: 0; }
  40%  { transform: scale(1.2); opacity: 1; }
  55%  { transform: scale(1.05); opacity: 0.3; }
  65%  { transform: scale(1.05); opacity: 1; }
  75%  { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* Trend (up & down) — draw the line */
.cs-section-icon--trend,
.cs-section-icon--trend-down,
.cs-section-icon--puzzle {
  transform: scale(1);
}
.cs-section-icon--trend polyline,
.cs-section-icon--trend-down polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.cs-section.in-view .cs-section-icon--trend polyline:first-child,
.cs-section.in-view .cs-section-icon--trend-down polyline:first-child {
  animation: cs-icon-draw 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
.cs-section.in-view .cs-section-icon--trend polyline:last-child,
.cs-section.in-view .cs-section-icon--trend-down polyline:last-child {
  animation: cs-icon-draw 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.95s forwards;
}
@keyframes cs-icon-draw {
  to { stroke-dashoffset: 0; }
}

/* Check circle — circle draws first, then checkmark strokes in */
.cs-section-icon--check {
  transform: scale(1);
}
.cs-section-icon--check circle,
.cs-section-icon--check polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.cs-section.in-view .cs-section-icon--check circle {
  animation: cs-icon-draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
.cs-section.in-view .cs-section-icon--check polyline {
  animation: cs-icon-draw 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.85s forwards;
}

/* Cycle — spin in (used for iteration / second-release sections) */
.cs-section.in-view .cs-section-icon--cycle {
  animation: cs-icon-cycle 0.9s cubic-bezier(0.34, 1.5, 0.64, 1) 0.3s forwards;
}
@keyframes cs-icon-cycle {
  0%   { transform: scale(0) rotate(-180deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Speech bubble — bounce in from below */
.cs-section.in-view .cs-section-icon--speech {
  animation: cs-icon-speech 0.8s cubic-bezier(0.34, 1.5, 0.64, 1) 0.3s forwards;
}
@keyframes cs-icon-speech {
  0%   { transform: scale(0) translateY(10px); }
  55%  { transform: scale(1.2) translateY(-3px); }
  78%  { transform: scale(0.95) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}


@media (prefers-reduced-motion: reduce) {
  .cs-section-icon { transform: none; }
  .cs-section-icon--trend polyline,
  .cs-section-icon--trend-down polyline { stroke-dashoffset: 0; }
  .cs-section-icon--book path { opacity: 1; transform: none; }
  .cs-section.in-view .cs-section-icon { animation: none; }
  .cs-section.in-view .cs-section-icon--trend polyline,
  .cs-section.in-view .cs-section-icon--trend-down polyline,
  .cs-section.in-view .cs-section-icon--book path,
  .cs-section.in-view .cs-section-icon--check circle,
  .cs-section.in-view .cs-section-icon--check polyline { animation: none; }
  .cs-section-icon--check circle,
  .cs-section-icon--check polyline { stroke-dashoffset: 0; }
  .cs-section-icon--chart rect { transform: scaleY(1); }
  .cs-section-icon--chart path:nth-of-type(1),
  .cs-section-icon--chart path:nth-of-type(2) { opacity: 1; }
}
.cs-section h2 {
  color: var(--charcoal);
  margin-bottom: 8px;
}
.cs-section h3 {
  color: var(--charcoal);
  margin-top: 40px;
  margin-bottom: 8px;
}
.cs-section h4 {
  color: var(--charcoal);
  margin-top: 24px;
  margin-bottom: 8px;
}
/* Inline emphasis on metric phrases (numbers, %, $, durations) within
   case study body copy — semibold + charcoal for legibility against the
   graphite body. */
.cs-hero strong,
.cs-section strong {
  font-weight: var(--weight-bold);
  color: var(--lavender);
}
.cs-section p {
  color: var(--color-secondary);
  margin-bottom: 16px;
}
.cs-section p:last-child { margin-bottom: 0; }
.cs-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-list li {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-secondary);
  padding-left: 20px;
  position: relative;
}
.cs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

/* ── Arrow list (Key Deciding Factors) ───────────────────── */
.cs-arrow-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-arrow-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-secondary);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-arrow-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.cs-arrow-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--lavender);
  stroke-width: 1.5;
}

/* ── Customer-segment comparison cards ────────────────── */
.cs-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.cs-compare-card {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-compare-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cs-compare-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--white);
  background: var(--lavender);
  margin-bottom: 16px;
}
.cs-compare-tag-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  stroke-width: 1.5;
}
.cs-compare-card .cs-compare-subtitle {
  color: var(--color-secondary);
  margin-bottom: 28px;
}
.cs-compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.cs-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--charcoal);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-compare-card.is-visible .cs-compare-list li { opacity: 1; transform: translateX(0); }
.cs-compare-card.is-visible .cs-compare-list li:nth-child(1) { transition-delay: 0.15s; }
.cs-compare-card.is-visible .cs-compare-list li:nth-child(2) { transition-delay: 0.25s; }
.cs-compare-card.is-visible .cs-compare-list li:nth-child(3) { transition-delay: 0.35s; }
.cs-compare-card.is-visible .cs-compare-list li:nth-child(4) { transition-delay: 0.45s; }
.cs-compare-card.is-visible .cs-compare-list li:nth-child(5) { transition-delay: 0.55s; }
.cs-compare-check {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--lavender);
  stroke-width: 1.5;
}

/* ── Feature grid (e.g. Solution approach) ────────────── */
.cs-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
  margin-bottom: 60px;
}
.cs-feature {
  display: flex;
  flex-direction: column;
}
.cs-feature-title { margin-top: 8px; }
.cs-feature-desc { margin-top: 8px; }
/* Icon → title gap for card-icon components (overrides .cs-section h4 40px) */
.cs-section .cs-feature-title,
.cs-section .cs-issue-title { margin-top: 24px; margin-bottom: 8px; }
.cs-feature-icon {
  width: 28px;
  height: 28px;
  color: var(--lavender);
  flex-shrink: 0;
  stroke-width: 1.5;
}
.cs-section .cs-feature-desc {
  margin: 0;
}
.cs-features--2col { grid-template-columns: repeat(2, 1fr); }
.cs-features--1col { grid-template-columns: 1fr; }
.cs-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.cs-2col > div {
  display: flex;
  flex-direction: column;
}
.cs-2col > div > :first-child {
  margin-top: 0;
}
.cs-2col {
  margin-top: 24px;
}
.cs-2col + .cs-placeholder {
  margin-top: 40px;
}
.cs-2col h3 {
  margin-bottom: 8px;
}
.cs-features + .cs-placeholder {
  margin-top: 40px;
}

/* ── Results cards (e.g. Impact section) ──────────────── */
.cs-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}
.cs-result {
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 16px;
}
.cs-section .cs-result-title {
  color: var(--lavender);
  margin: 0 0 24px;
}
.cs-result-row + .cs-result-row {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--mist);
}
.cs-section .cs-result-row-platform {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--weight-medium);
  color: var(--silver);
  margin: 0 0 8px;
}
.cs-result-row-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-section .cs-result-row-values {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-medium);
  color: var(--charcoal);
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
}
.cs-result-arrow {
  color: var(--lavender);
  margin: 0 6px;
  font-weight: var(--weight-regular);
}
.cs-result-lift {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--lavender);
  background: color-mix(in srgb, var(--lavender) 12%, transparent);
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── 3-month retention line chart ─────────────────────── */
.cs-retention { margin: 40px 0; }
.cs-section .cs-retention p {
  margin: 0;
}
.cs-retention-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 24px;
}
.cs-retention-chart {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 24px;
  row-gap: 12px;
}
.cs-retention-meta {
  grid-column: 1;
  margin: 0;
}
/* Scoped under .cs-section so it wins specificity against .cs-section h4
   (which sets a 28px top + 8px bottom margin for sub-sub headings). */
.cs-section .cs-retention-platform {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--charcoal);
  line-height: 24px;
  margin: 0 0 4px;
}
.cs-section .cs-retention-visitors {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--silver);
  line-height: 24px;
  margin: 0;
}
.cs-retention-legend {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
}
.cs-retention-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--charcoal);
}
.cs-retention-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.cs-retention-swatch--with    { background: var(--lavender); }
.cs-retention-swatch--without { background: var(--ash); }
.cs-retention-svg {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  margin-top: 12px;
}
.cs-retention-grid-line {
  stroke: var(--mist);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.cs-retention-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  /* Top corners rounded, bottom flat — clip-path lets us round per-corner
     since SVG rect's `rx` rounds all four. */
  clip-path: inset(0 round 3px 3px 0 0);
}
.cs-retention-bar--with    { fill: var(--lavender); }
.cs-retention-bar--without { fill: var(--ash); }
/* HVSSA chart distinguishes its with-onboarding bars in plum to read as a
   sibling metric rather than a duplicate of the retention chart. */
.cs-retention--hvssa .cs-retention-bar--with    { fill: var(--lavender); }
.cs-retention--hvssa .cs-retention-swatch--with { background: var(--lavender); }
.cs-retention-label {
  font-family: var(--font-heading);
  /* JS sets --chart-label-fs per-SVG so on-screen size stays fixed across
     breakpoints (viewBox-relative font would shrink with the container). */
  font-size: var(--chart-label-fs, 16px);
  font-weight: var(--weight-semibold);
  fill: var(--charcoal);
  opacity: 0;
}
.cs-retention-label--without { fill: var(--silver); }
.cs-retention-axis-label {
  font-family: var(--font-body);
  font-size: var(--chart-label-fs, 16px);
  fill: var(--charcoal);
}

/* Bar growth — staggered group-by-group, "without" leads "with" within each group */
/* Trigger off .cs-retention (each chart block) instead of .cs-section, so
   the retention chart and the HVSSA chart each animate when they
   individually enter view, not both at once. */
.cs-retention.is-visible .cs-retention-bar { animation: cs-retention-grow 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; }
.cs-retention.is-visible .cs-retention-bar--g1-without { animation-delay: 0.20s; }
.cs-retention.is-visible .cs-retention-bar--g1-with    { animation-delay: 0.30s; }
.cs-retention.is-visible .cs-retention-bar--g2-without { animation-delay: 0.50s; }
.cs-retention.is-visible .cs-retention-bar--g2-with    { animation-delay: 0.60s; }
.cs-retention.is-visible .cs-retention-bar--g3-without { animation-delay: 0.80s; }
.cs-retention.is-visible .cs-retention-bar--g3-with    { animation-delay: 0.90s; }

/* Labels fade in just after each bar finishes growing */
.cs-retention.is-visible .cs-retention-label--g1-without { animation: cs-retention-fade 0.35s ease 0.95s forwards; }
.cs-retention.is-visible .cs-retention-label--g1-with    { animation: cs-retention-fade 0.35s ease 1.05s forwards; }
.cs-retention.is-visible .cs-retention-label--g2-without { animation: cs-retention-fade 0.35s ease 1.25s forwards; }
.cs-retention.is-visible .cs-retention-label--g2-with    { animation: cs-retention-fade 0.35s ease 1.35s forwards; }
.cs-retention.is-visible .cs-retention-label--g3-without { animation: cs-retention-fade 0.35s ease 1.55s forwards; }
.cs-retention.is-visible .cs-retention-label--g3-with    { animation: cs-retention-fade 0.35s ease 1.65s forwards; }

@keyframes cs-retention-grow { to { transform: scaleY(1); } }
@keyframes cs-retention-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cs-retention-bar   { transform: scaleY(1); }
  .cs-retention-label { opacity: 1; }
  .cs-retention.is-visible .cs-retention-bar,
  .cs-retention.is-visible .cs-retention-label { animation: none; }
}

/* Staggered entry: text first, then icons pop in */
.cs-features .cs-feature-title,
.cs-features .cs-feature-desc {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-features .cs-feature-icon {
  opacity: 0;
  transform: scale(0.6);
}
.cs-features.is-animated .cs-feature-title,
.cs-features.is-animated .cs-feature-desc {
  opacity: 1;
  transform: none;
}
.cs-features.is-animated .cs-feature-icon {
  animation: cs-feature-icon-pop 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}
.cs-features.is-animated .cs-feature:nth-child(1) .cs-feature-title,
.cs-features.is-animated .cs-feature:nth-child(1) .cs-feature-desc  { transition-delay: 0ms; }
.cs-features.is-animated .cs-feature:nth-child(2) .cs-feature-title,
.cs-features.is-animated .cs-feature:nth-child(2) .cs-feature-desc  { transition-delay: 300ms; }
.cs-features.is-animated .cs-feature:nth-child(3) .cs-feature-title,
.cs-features.is-animated .cs-feature:nth-child(3) .cs-feature-desc  { transition-delay: 600ms; }
.cs-features.is-animated .cs-feature:nth-child(1) .cs-feature-icon  { animation-delay: 300ms; }
.cs-features.is-animated .cs-feature:nth-child(2) .cs-feature-icon  { animation-delay: 600ms; }
.cs-features.is-animated .cs-feature:nth-child(3) .cs-feature-icon  { animation-delay: 900ms; }
.cs-features.is-animated .cs-feature:nth-child(4) .cs-feature-title,
.cs-features.is-animated .cs-feature:nth-child(4) .cs-feature-desc  { transition-delay: 900ms; }
.cs-features.is-animated .cs-feature:nth-child(5) .cs-feature-title,
.cs-features.is-animated .cs-feature:nth-child(5) .cs-feature-desc  { transition-delay: 1200ms; }
.cs-features.is-animated .cs-feature:nth-child(4) .cs-feature-icon  { animation-delay: 1200ms; }
.cs-features.is-animated .cs-feature:nth-child(5) .cs-feature-icon  { animation-delay: 1500ms; }
@keyframes cs-feature-icon-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  55%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-features .cs-feature-title,
  .cs-features .cs-feature-desc,
  .cs-features .cs-feature-icon {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* ── Per-element fade-up for hero + section children ─────
   Each child fades in independently when it reaches 30% from the
   bottom of the viewport. JS observes each child and adds .is-visible
   to it directly (not to the parent section), so long sections don't
   reveal everything at once. */
.cs-hero > *,
.cs-section > * {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-hero > *.is-visible,
.cs-section > *.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero title + summary fade in eagerly on page load (no scroll trigger).
   The cover image often pushes them below the IO trigger zone on
   first paint, so they could otherwise sit invisible until you scrolled. */
.cs-hero > .cs-title {
  animation: cs-hero-eager 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.cs-hero > .cs-summary {
  transition-delay: 0.15s;
}
@keyframes cs-hero-eager {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero > *, .cs-section > * { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ── Stat grid ──────────────────────────────────────── */
.cs-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin: 32px 0;
}
.cs-stat {
  background: #f8f7ff;
  border-radius: 12px;
  padding: 24px;
}
.cs-stat-val {
  color: var(--color-accent);
  margin-bottom: 8px;
}
.cs-stat-label {
  color: var(--color-secondary);
}

/* ── Survey hero stats ────────────── */
/* ── Research findings card (matches cs-compare-card surface) ── */
.cs-research-card {
  background: var(--white);
  border-radius: 16px;
  padding: 48px;
  margin-top: 32px;
  box-shadow:
    0 -2px 8px -2px rgba(0, 0, 0, 0.04),
    0 12px 32px -12px rgba(74, 0, 192, 0.08),
    0 4px 10px -2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-research-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cs-research-divider {
  border: none;
  height: 1px;
  background: color-mix(in srgb, var(--lavender) 14%, transparent);
  margin: 48px 0;
}
.cs-research-subhead {
  margin-bottom: 24px;
  color: var(--color-primary);
}

/* ── Survey overview (lives inside cs-research-card) ───── */
.cs-survey-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.cs-survey-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-survey-stat-label {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  color: var(--color-tertiary);
  line-height: 1.3;
}
.cs-survey-stat-num {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ── Channel breakdown (Where Restaurants Focus Their Discounts) ── */
.cs-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}
.cs-channel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-channel.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cs-channel-val {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.cs-channel-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
}
.cs-channel-icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  stroke-width: 1.5;
}
.cs-channel-label {
  color: var(--color-primary);
  white-space: nowrap;
}

/* ── Issue cards (Problems with Current Experience) ──────────── */
/* ── Split layout (two stacked content units side-by-side) ── */
.cs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 28px;
}
.cs-split--3 {
  grid-template-columns: repeat(3, 1fr);
}
.cs-split-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-split-item .cs-placeholder {
  margin-top: 0;
}
/* Scope tighter h4 spacing inside split items: video→h4 = 28px, h4→p = 16px */
.cs-section .cs-split-item h4 {
  margin-top: 12px;
  margin-bottom: -4px;
}

.cs-issues {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 60px;
}
.cs-issue {
  display: flex;
  flex-direction: column;
}

/* Staggered entry: text first, then icons pop in (matches cs-features) */
.cs-issues .cs-issue-title,
.cs-issues .cs-issue-desc {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-issues .cs-issue-icon {
  opacity: 0;
  transform: scale(0.6);
}
.cs-issues.is-animated .cs-issue-title,
.cs-issues.is-animated .cs-issue-desc {
  opacity: 1;
  transform: none;
}
.cs-issues.is-animated .cs-issue-icon {
  animation: cs-feature-icon-pop 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}
.cs-issues.is-animated .cs-issue:nth-child(1) .cs-issue-title,
.cs-issues.is-animated .cs-issue:nth-child(1) .cs-issue-desc { transition-delay: 0ms; }
.cs-issues.is-animated .cs-issue:nth-child(2) .cs-issue-title,
.cs-issues.is-animated .cs-issue:nth-child(2) .cs-issue-desc { transition-delay: 300ms; }
.cs-issues.is-animated .cs-issue:nth-child(3) .cs-issue-title,
.cs-issues.is-animated .cs-issue:nth-child(3) .cs-issue-desc { transition-delay: 600ms; }
.cs-issues.is-animated .cs-issue:nth-child(1) .cs-issue-icon { animation-delay: 300ms; }
.cs-issues.is-animated .cs-issue:nth-child(2) .cs-issue-icon { animation-delay: 600ms; }
.cs-issues.is-animated .cs-issue:nth-child(3) .cs-issue-icon { animation-delay: 900ms; }
@media (prefers-reduced-motion: reduce) {
  .cs-issues .cs-issue-title,
  .cs-issues .cs-issue-desc,
  .cs-issues .cs-issue-icon {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}
.cs-issue-icon {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  stroke-width: 1.5;
  flex-shrink: 0;
}
.cs-issue-title {
  color: var(--color-primary);
}
.cs-issue-desc {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-secondary);
  margin: 0;
}

/* ── Customer quote ───────────────────────────────────────── */
.cs-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
  opacity: 1 !important;
  transform: none !important;
}
.cs-quotes .cs-quote { margin-top: 0; }
@media (max-width: 768px) {
  .cs-quotes { grid-template-columns: 1fr; }
}

.cs-quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0 0;
  padding: 32px 36px;
  border-radius: 0 12px 12px 0;
  position: relative;
  overflow: hidden;
}
/* Purple left border — draws top to bottom */
.cs-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top center;
}
/* Background fill — sweeps left to right */
.cs-quote::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lavender) 4%, transparent);
  clip-path: inset(0 100% 0 0);
}
/* Keep content above the pseudo-element layers */
.cs-quote > * {
  position: relative;
  z-index: 1;
}
/* Content starts hidden */
.cs-quote .cs-quote-text,
.cs-quote .cs-quote-attr {
  opacity: 0;
}

/* ── Quote entrance animations ── */
@keyframes cs-quote-line {
  to { transform: scaleY(1); }
}
@keyframes cs-quote-bg {
  to { clip-path: inset(0 0% 0 0); }
}
@keyframes cs-quote-fade {
  to { opacity: 1; }
}

/* Card 1 */
.cs-quotes.is-visible .cs-quote:nth-child(1)::before {
  animation: cs-quote-line 0.4s ease forwards;
}
.cs-quotes.is-visible .cs-quote:nth-child(1)::after {
  animation: cs-quote-bg 0.5s ease 0.4s forwards;
}
.cs-quotes.is-visible .cs-quote:nth-child(1) .cs-quote-text,
.cs-quotes.is-visible .cs-quote:nth-child(1) .cs-quote-attr {
  animation: cs-quote-fade 0.6s ease 0.5s forwards;
}

/* Card 2 — offset by 0.15s */
.cs-quotes.is-visible .cs-quote:nth-child(2)::before {
  animation: cs-quote-line 0.4s ease 0.15s forwards;
}
.cs-quotes.is-visible .cs-quote:nth-child(2)::after {
  animation: cs-quote-bg 0.5s ease 0.55s forwards;
}
.cs-quotes.is-visible .cs-quote:nth-child(2) .cs-quote-text,
.cs-quotes.is-visible .cs-quote:nth-child(2) .cs-quote-attr {
  animation: cs-quote-fade 0.6s ease 0.65s forwards;
}
.cs-quote-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--charcoal);
  margin: 0;
  font-style: normal;
}
.cs-quote-text::before {
  content: "\201C";
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 0.2em;
  color: var(--color-accent);
  opacity: 0.7;
}
.cs-quote-text::after {
  content: "\201D";
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-left: 0.2em;
  color: var(--color-accent);
  opacity: 0.7;
}
.cs-quote-attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.cs-quote-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
.cs-quote-role {
  font-size: 16px;
  color: var(--color-tertiary);
}


/* ── Lightbox ────────────── */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9000;
  cursor: zoom-out;
  transition: background 0.3s ease;
}
.lb-overlay.is-open {
  background: rgba(0, 0, 0, 0.88);
}
.lb-overlay img {
  max-width: min(2800px, 100%);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  cursor: default;
  transform: scale(0.7);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease;
}
.lb-overlay.is-open img {
  transform: scale(1);
  opacity: 1;
}
.lb-overlay.is-closing img {
  transform: scale(0.88);
  opacity: 0;
  transition:
    transform 0.2s ease-in,
    opacity 0.2s ease-in;
}

/* ── Todo list (e.g. Things to Improve) ────────────── */
.cs-todo {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 1 !important;
  transform: none !important;
}
.cs-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lavender) 10%, transparent);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-todo-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.cs-todo-item:last-child { border-bottom: none; }
.cs-todo-check {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--lavender) 45%, transparent);
  stroke-width: 1.5;
}

/* ── Motivations ranked list ────────────── */
.cs-motivations {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-motivation {
  display: grid;
  grid-template-columns: 44px 1fr 36px;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lavender) 10%, transparent);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-motivation.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.cs-motivation:last-child { border-bottom: none; }
.cs-motivation-icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
  color: color-mix(in srgb, var(--lavender) 30%, transparent);
  flex-shrink: 0;
}
.cs-motivation-rank {
  width: 44px;
  height: 44px;
  background: var(--lavender);
  color: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  flex-shrink: 0;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease 0.3s;
}
.cs-motivation.is-visible .cs-motivation-rank {
  transform: scale(1);
  color: var(--white);
}
.cs-motivation-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-motivation-label {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--charcoal);
}
.cs-motivation-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  color: var(--color-secondary);
  line-height: 1.4;
}

/* ── Metrics cards (e.g. Top Call Drivers) ────────────── */
.cs-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
  margin-bottom: 32px;
}
.cs-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px;
  min-height: 240px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--white) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--lavender) 80%, black);
  border: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 38%, transparent),
    0 12px 40px -12px color-mix(in srgb, var(--lavender) 45%, transparent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(-100px);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1);
}
.cs-metric.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cs-metric { opacity: 1; transform: none; transition: none; }
}
.cs-metric::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: -1;
}
.cs-metric:nth-child(1)::before {
  background:
    radial-gradient(circle at 25% 25%, var(--plum), transparent 55%),
    radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--white) 22%, transparent), transparent 55%);
  animation: cs-metric-gradient 14s linear infinite;
}
.cs-metric:nth-child(2)::before {
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--white) 25%, transparent), transparent 50%),
    radial-gradient(circle at 30% 70%, var(--plum), transparent 60%);
  animation: cs-metric-gradient 18s linear infinite reverse;
}
.cs-metric:nth-child(3)::before {
  background:
    radial-gradient(circle at 50% 20%, var(--plum), transparent 55%),
    radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--white) 20%, transparent), transparent 45%),
    radial-gradient(circle at 80% 60%, color-mix(in srgb, var(--plum) 70%, transparent), transparent 50%);
  animation: cs-metric-gradient 11s linear infinite;
}
@keyframes cs-metric-gradient {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-metric::before { animation: none; }
}
.cs-metric-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.cs-metric-rank {
  color: var(--white);
}
.cs-metric .cs-metric-label {
  color: var(--white);
  margin: 0;
}
.cs-metric-value {
  margin: 0;
}
.cs-metric-number {
  display: block;
  color: var(--white);
}
.cs-metric-unit {
  display: block;
  color: var(--white);
  margin-top: 10px;
}

/* ── Inline section image ───────────────────────────── */
.cs-img {
  width: 100%; border-radius: 12px;
  aspect-ratio: 16 / 9; object-fit: cover;
  display: block; margin: 24px 0;
}
.cs-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--mist);
  display: flex; align-items: center; justify-content: center;
  margin: 28px 0 0;
  border: 2px dashed var(--silver);
}
/* Caption h4 sits tight to the image above it */
.cs-section .cs-placeholder + h4,
.cs-section .cs-placeholder + .h4 { margin-top: 16px; }
/* More separation before the next image/grid after copy */
.cs-section p + .cs-placeholder,
.cs-section p + .cs-2col,
.cs-section p + .cs-features { margin-top: 48px; }
.cs-placeholder span {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--silver);
}
/* When the placeholder contains an image or video, drop the empty-state
   styling and let the media fill 100% of the container width with its
   own intrinsic height — no letterboxing, no fixed 16:9 box. */
.cs-placeholder:has(img),
.cs-placeholder:has(video) {
  background: none;
  border: none;
  aspect-ratio: auto;
  display: block;
}
.cs-placeholder:has(img) .cs-placeholder-inner,
.cs-placeholder:has(video) .cs-placeholder-inner {
  height: auto;
  display: block;
}
.cs-placeholder-inner img,
.cs-placeholder-inner video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ── Legacy back link (for case studies not yet on the
   cover-first template) ─────────────────────────────── */
.cs-back {
  max-width: 820px; margin: 0 auto;
  padding: 40px 40px 0;
}
.cs-back a {
  color: var(--color-tertiary);
  text-decoration: none;
  transition: color .2s;
}
.cs-back a:hover { color: var(--color-primary); }

/* ── More Projects (bottom of case study pages) ─────── */
.cs-more {
  background: #111;
  padding: 80px 40px;
  margin-top: 0;
}
.cs-more-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.cs-more-heading {
  color: var(--silver);
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.cs-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.cs-more-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-more-card:hover .cs-more-img img {
  transform: scale(1.03);
}
.cs-more-img {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #222;
}
.cs-more-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cs-more-company {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--silver);
}
.cs-more-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  color: var(--white);
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   Each media query is annotated with which page section
   each rule belongs to.
   ════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* homepage */
  .hero-inner {
    padding: 40px 40px 60px;
  }
  .bio { max-width: 560px; }
  h1 { font-size: clamp(36px, 6vw, var(--text-h1)); }
  .fw-inner { padding: 0 40px; }
  .fw-heading { font-size: var(--text-h2); }

  /* case study — retention/HVSSA charts stack vertically on tablet so the
     header (meta + legend) has enough horizontal room not to wrap */
  .cs-retention-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Research card — tighten paddings and collapse survey stats to 2 columns
     since the TOC sidebar still consumes horizontal space at tablet widths. */
  .cs-research-card { padding: 36px; }
  .cs-research-divider { margin: 36px 0; }
  .cs-survey-overview { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* homepage — scale album stack so the hero fits within 100vh on short viewports */
@media (min-width: 1025px) and (max-height: 820px) { .stack { zoom: 0.92; } }
@media (min-width: 1025px) and (max-height: 740px) { .stack { zoom: 0.82; } }
@media (min-width: 1025px) and (max-height: 660px) { .stack { zoom: 0.72; } }
@media (min-width: 1025px) and (max-height: 580px) { .stack { zoom: 0.62; } }

@media (max-width: 768px) {
  /* shared */
  nav { padding: 0 24px; }

  /* homepage */
  .fw-grid { grid-template-columns: 1fr; }
  .fw-inner { padding: 0 16px; }
  .featured-work { padding: 64px 0 80px; }

  /* case study */
  .cs-back, .cs-body { padding-left: 24px; padding-right: 24px; }
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-meta-item { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--lavender) 20%, transparent); }
  .cs-meta-item:nth-last-child(-n+2) { border-bottom: none; }
  .cs-stats { grid-template-columns: 1fr 1fr; }
  .cs-layout { grid-template-columns: 1fr; }
  .cs-toc { display: none; }
  .cs-more { padding: 60px 24px; }
  .cs-more-grid { grid-template-columns: 1fr; }
  .cs-metrics { grid-template-columns: 1fr; }
  .cs-research-card { padding: 32px 24px; }
  .cs-research-divider { margin: 32px 0; }
  .cs-2col { grid-template-columns: 1fr; }
  .cs-survey-overview { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cs-survey-stat-num { font-size: var(--text-h4); }
  .cs-channels { grid-template-columns: 1fr; gap: 24px; }
  .cs-issues { grid-template-columns: 1fr; gap: 16px; }
  .cs-split { grid-template-columns: 1fr; gap: 32px; }
  .cs-quote { padding: 24px; }
  .cs-quote-text { font-size: 18px; }
  .cs-features { grid-template-columns: 1fr; gap: 24px; }
  .cs-results { grid-template-columns: 1fr; }
  .cs-retention-grid { grid-template-columns: 1fr; gap: 28px; }
  .cs-compare { grid-template-columns: 1fr; }
  .cs-metric-number { font-size: 36px; }
}

/* ── Survey results visualization ───────────────────────── */
.srv-viz {
  margin-top: 56px;
  margin-bottom: 60px;
  padding: 48px;
  background: var(--white);
  border-radius: 20px;
  box-shadow:
    0 -2px 8px -2px rgba(0, 0, 0, 0.04),
    0 12px 32px -12px rgba(74, 0, 192, 0.08),
    0 4px 10px -2px rgba(0, 0, 0, 0.04);
}
.srv-viz > .srv-block {
  margin-bottom: 32px;
}
.srv-viz > .srv-2col {
  margin-bottom: 0;
  padding-top: 32px;
}
.srv-viz-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 8px;
}
.srv-viz-title {
  color: var(--charcoal);
  margin-bottom: 6px;
}
.srv-viz-desc {
  color: var(--color-secondary);
  margin-bottom: 48px;
}
.srv-insight {
  padding: 28px 32px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lavender) 7%, transparent);
  border-left: 3px solid var(--lavender);
  margin-bottom: 48px;
}
.srv-insight-label {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 6px;
}
.srv-insight-text {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--charcoal);
}
.srv-block { margin-bottom: 48px; }
.srv-block-title {
  color: var(--charcoal);
  margin-top: 0;
  margin-bottom: 16px;
}
.srv-viz .srv-block-title {
  margin-top: 0;
}
.srv-2col .srv-block-title {
  margin-bottom: 24px;
}
.srv-block-sub {
  color: var(--color-tertiary);
  margin-bottom: 24px;
}
.srv-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.srv-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 48px;
  align-items: center;
  gap: 20px;
}
.srv-bar-label {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  color: var(--charcoal);
  text-align: right;
}
.srv-bar-track {
  height: 10px;
  background: color-mix(in srgb, var(--lavender) 12%, transparent);
  border-radius: 99px;
  overflow: hidden;
}
.srv-bar-fill {
  height: 100%;
  width: 0;
  background: var(--lavender);
  border-radius: 99px;
  transition: width 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0s);
}
.srv-bar-fill.is-animated { width: var(--pct); }
.srv-bar-rank {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  color: var(--lavender);
  letter-spacing: var(--tracking-wide);
}
.srv-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.srv-channels {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.srv-channel {
  display: flex;
  align-items: center;
  gap: 20px;
}
.srv-channel-pct {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--lavender);
  min-width: 60px;
}
.srv-channel-info { flex: 1; }
.srv-channel-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  color: var(--charcoal);
  margin-bottom: 8px;
}
.srv-channel-track {
  height: 8px;
  background: color-mix(in srgb, var(--lavender) 12%, transparent);
  border-radius: 99px;
  overflow: hidden;
}
.srv-channel-fill {
  height: 100%;
  width: 0;
  background: var(--lavender);
  border-radius: 99px;
  transition: width 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0s);
}
.srv-channel-fill.is-animated { width: var(--pct); }
.srv-freq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.srv-freq-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--mist);
}
.srv-freq-rank {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  color: var(--lavender);
  min-width: 28px;
}
.srv-freq-label {
  flex: 1;
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  color: var(--charcoal);
}
.srv-freq-badge {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--lavender);
  background: color-mix(in srgb, var(--lavender) 10%, transparent);
  padding: 4px 12px;
  border-radius: 99px;
}
.srv-needs {
  display: flex;
  flex-direction: column;
}
.srv-need {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lavender) 10%, transparent);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease var(--delay, 0s),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0s);
}
.srv-need:first-child { border-top: 1px solid color-mix(in srgb, var(--lavender) 10%, transparent); }
.srv-need:last-child { padding-bottom: 0; border-bottom: none; }
.srv-need.is-animated { opacity: 1; transform: translateX(0); }
.srv-need-text {
  font-size: var(--text-body-lg);
  color: var(--charcoal);
}
/* Infographic callout cards */
.srv-callouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.srv-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
  background: color-mix(in srgb, var(--lavender) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--lavender) 14%, transparent);
  border-radius: 16px;
  gap: 10px;
}
.srv-callout-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lavender) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.srv-callout-icon svg {
  width: 24px;
  height: 24px;
  color: var(--lavender);
}
.srv-callout-num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--lavender);
  line-height: 1;
  letter-spacing: -0.02em;
}
.srv-callout-label {
  display: block;
  font-size: var(--text-body-lg);
  color: var(--color-secondary);
  line-height: 1.4;
}

/* 3-column data grid */
.srv-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

/* Motivation ranked rows */
.srv-2col > .srv-block {
  display: flex;
  flex-direction: column;
}
.srv-motive-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.srv-motive-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lavender) 10%, transparent);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease var(--delay, 0s),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0s);
}
.srv-motive-row:first-child { border-top: 1px solid color-mix(in srgb, var(--lavender) 10%, transparent); }
.srv-motive-row:last-child { padding-bottom: 0; border-bottom: none; }
.srv-motive-row.is-animated {
  opacity: 1;
  transform: translateX(0);
}
.srv-motive-rank {
  width: 44px;
  display: block;
  text-align: center;
  color: transparent;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--delay, 0s) + 0.1s),
              color 0.2s ease calc(var(--delay, 0s) + 0.35s);
}
.srv-motive-rank.is-animated {
  transform: scale(1);
  color: var(--lavender);
}
.srv-motive-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.srv-motive-label {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--charcoal);
}
.srv-motive-desc {
  font-size: var(--text-label);
  color: var(--color-secondary);
}
.srv-3col .srv-channel-cards {
  flex: 1;
  align-content: center;
}

/* Channel infographic cards */
.srv-channel-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.srv-channel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  border-radius: 16px;
  gap: 8px;
}
.srv-channel-card-icon {
  width: 32px;
  height: 32px;
  color: var(--lavender);
  stroke-width: 1.5;
  margin-bottom: 4px;
}
.srv-channel-card-pct {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--lavender);
  line-height: 1;
  letter-spacing: -0.02em;
}
.srv-channel-card-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--charcoal);
}
.srv-channel-card-desc {
  font-size: var(--text-label);
  color: var(--color-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.srv-channel-card .srv-channel-track {
  width: 100%;
  margin-top: 4px;
}

/* Frequency item icon box */
.srv-freq-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lavender) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.srv-freq-icon svg {
  width: 18px;
  height: 18px;
  color: var(--lavender);
}

/* Need row icon */
.srv-need-icon {
  width: 24px;
  height: 24px;
  color: var(--lavender);
  stroke-width: 1.5;
  margin: 0 auto;
  display: block;
}

/* Survey methodology overview — 4-stat horizontal strip */
.srv-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 48px;
}
.srv-overview-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 24px;
}
.srv-overview-num {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--lavender);
  line-height: 1.2;
}
.srv-overview-label {
  font-size: var(--text-label);
  color: var(--color-secondary);
}
.srv-overview-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background: var(--silver);
}

@media (max-width: 768px) {
  .srv-2col { grid-template-columns: 1fr; gap: 40px; }
  .srv-3col { grid-template-columns: 1fr; gap: 40px; }
  .srv-3col > * { grid-column: span 1 !important; }
  .srv-overview { grid-template-columns: repeat(2, 1fr); }
  .srv-needs { grid-template-columns: 1fr; }
  .srv-bar-row { grid-template-columns: 120px 1fr 44px; gap: 12px; }
  .srv-callouts { grid-template-columns: repeat(2, 1fr); }
  .srv-channel-cards { grid-template-columns: 1fr; }
  .srv-motive-row { grid-template-columns: 44px 1fr; gap: 12px; }
}

@media (max-width: 600px) {
  /* homepage */
  nav { padding: 0 16px; }
  .hero-inner { padding: 32px 16px 48px; gap: 36px; }
  .stack { zoom: 0.62; }
}

@media (max-width: 480px) {
  /* case study */
  .cs-meta { grid-template-columns: 1fr; }
  .cs-meta-item { padding: 10px 0; }
  .cs-meta-item:nth-last-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--lavender) 20%, transparent); }
  .cs-meta-item:last-child { border-bottom: none; }
  .cs-stats { grid-template-columns: 1fr; }
}

/* ── About page ───────────────────────────────────────── */
.about-page {
  padding-top: 56px;
  padding-bottom: 120px;
}
.about-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 40px;
}
.about-hero {
  padding: 80px 0 64px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.about-greeting {
  color: var(--charcoal);
  margin-bottom: 20px;
}
.about-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--color-secondary);
}
.about-section {
  padding: 48px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.about-section-title {
  color: var(--lavender);
  margin-bottom: 16px;
}
.about-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
  padding: 12px 28px;
  background: var(--lavender);
  color: var(--white);
  border-radius: 99px;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.about-cta:hover { opacity: 0.85; }

@media (max-width: 768px) {
  .about-inner { padding: 0 24px; }
  .about-hero { padding: 48px 0 40px; }
  .about-section { padding: 36px 0; }
}