/* ── Case study pages ─────────────────────────────────────────────────────────
   Shared by the four pages in /projects.
   Same type and colours as the home page: Fustat throughout, heavy headings, maroon ink on pale blue.
   Each page sets its own colours on <body style="--accent: …"> (see the tokens below). */

:root {
  --bg: #D6F1FF;            /* page background: each page sets a pale tint of its own colour */
  --ink: #4D1722;           /* text (home page ink) */
  --ink-soft: #96552F;      /* labels, frame names */
  --card: #FFFFFF;
  --accent: #069FFC;        /* full-bleed band, hypothesis card, filled tag, numbers */
  --accent-ink: #FFFFFF;    /* text on --accent */
  --accent-deep: #14467D;   /* dark surfaces (placeholders, slider knob) */
  --accent-soft: #A9DCFF;   /* video band */
  /* --label: colour of the small section labels; set it when --accent is too light to read as text */

  --font-body: 'Fustat', system-ui, -apple-system, sans-serif;

  --gutter: 2.5rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

/* Everything below is sized in rem, and the root size follows the window width, so the
   page keeps the same proportions on laptop and desktop screens (1rem = 16px at a 1316px
   window). It stops growing at 17px (a 1400px window); wider screens just get more margin. */
html { font-size: clamp(11.5px, 1.2154vw, 17px); scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }

.cs-wrap { width: 100%; max-width: 82rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Top bar: same behaviour as the other case study pages ── */
nav.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  height: 6rem; padding: 0 var(--gutter);
  transition: height 260ms cubic-bezier(.2,.8,.2,1), background 200ms ease, backdrop-filter 200ms ease;
}
nav.top-nav.scrolled {
  height: 3.5rem;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
nav.top-nav a {
  position: relative;
  padding: 0.25rem 0;
  font-size: 1.125rem; font-weight: 500;
  text-transform: lowercase; text-decoration: none; white-space: nowrap;
  color: var(--ink);
}
nav.top-nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
nav.top-nav a:hover::after,
nav.top-nav a:focus-visible::after { transform: scaleX(1); }

/* ── Section labels: small bold capitals, like the labels on the home page ── */
.cs-tag {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 700;
  line-height: 1.2; letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--label, var(--accent));
}
.cs-card--accent .cs-tag { color: inherit; }

/* ── Hero: title, project facts, video ── */
.cs-hero {
  padding: 9.75rem 0 5rem;
}
.cs-title {
  max-width: 47rem;
  padding-bottom: 3rem;
  font-size: 2.75rem; font-weight: 800;
  line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance;
}

/* logo on the left, facts starting 30% in, as two label/value groups */
.cs-facts {
  display: grid;
  grid-template-columns: 30.5% 1fr 1fr;
  align-items: start;
  padding: 2rem 0;
}
.cs-logo { height: 4.5rem; width: auto; margin-top: -1.25rem; }
.cs-logo--icon { height: 4rem; margin-top: 0; border-radius: 22%; }   /* a square app icon */
.cs-logo--wordmark { height: 2.5rem; margin-top: 0.1rem; }                 /* icon and name on one line */
.cs-logo--text { height: auto; margin-top: 0.3rem; font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.cs-facts-col { display: grid; gap: 1.125rem; padding-right: 1.5rem; }
.cs-fact {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  align-items: start;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.45;
}
.cs-fact dd:not(.cs-pills) { padding-top: 0.2rem; }
.cs-fact dt {
  padding-top: 0.45rem;
  font-size: 0.8125rem; font-weight: 700;
  line-height: 1.2; letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--label, var(--accent));
}
/* the same pastel pills as the project tags on the home page:
   purple for industry, blue for platform, green for tools */
.cs-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-pill {
  padding: 0.375rem 0.95rem;
  border-radius: 999px;
  background: #EDE4FD; color: #8A63D2;
  font-size: 0.84rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em;
  white-space: nowrap;
}
.cs-pill--platform { background: #DFEEFB; color: #3D8FE0; }
.cs-pill--tool { background: #DFF3E4; color: #3FA45C; }
/* set aspect-ratio inline to the media's own size, so nothing is cropped and the space is held while it loads */
.cs-hero-media { width: 100%; height: auto; object-fit: cover; background: var(--card); }

/* ── Figma-style frame around every piece of media, as on the home page ──
   <div class="cs-frame" data-frame="Layer name"> … one media element … </div>
   case-study.js adds the label, edges, corner handles and the size chip shown on hover. */
.cs-frame { position: relative; margin-top: 6.5rem; }
.cs-frame > .cs-media, .cs-frame > .cs-compare { margin-top: 0; }
.cs-frame > img, .cs-frame > video { width: 100%; height: auto; }
.cs-hero .cs-frame { margin-top: 1.5rem; }
/* trims stray edges off an export without touching the file:
   <div class="cs-trim" style="--w: width; --h: height; --l: …; --t: …; --r: …; --b: …;"><img></div> */
.cs-trim {
  --cw: calc(var(--w) - var(--l) - var(--r));
  overflow: hidden;
  aspect-ratio: calc(var(--w) - var(--l) - var(--r)) / calc(var(--h) - var(--t) - var(--b));
}
.cs-frame .cs-trim > img,
.cs-videoband .cs-trim > video {
  display: block;
  width: calc(100% * var(--w) / var(--cw)); max-width: none; height: auto;
  margin-left: calc(-100% * var(--l) / var(--cw));
  margin-top: calc(-100% * var(--t) / var(--cw));
  object-fit: fill;
}
/* an image that needs air around it: a white panel with the image inset */
.cs-frame--pad { padding: 3.5rem; background: var(--card); }
.cs-grid3 > .cs-frame { margin-top: 0; }
.cs-grid3 > .cs-frame > .cs-frame-media { width: 100%; height: 100%; object-fit: cover; }

.cs-frame-label {
  position: absolute; top: -1.5rem; left: 0;
  font-size: 0.75rem; font-weight: 500; line-height: 1.2;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 200ms ease;
}
.cs-frame-line {
  position: absolute; z-index: 4;
  background: var(--line, var(--ink));
  transition: background 200ms ease;
  pointer-events: none;
}
.cs-frame-line.t { top: -1px; left: -1px; right: -1px; height: 1px; transform-origin: left; }
.cs-frame-line.r { top: -1px; bottom: -1px; right: -1px; width: 1px; transform-origin: top; }
.cs-frame-line.b { bottom: -1px; left: -1px; right: -1px; height: 1px; transform-origin: right; }
.cs-frame-line.l { top: -1px; bottom: -1px; left: -1px; width: 1px; transform-origin: bottom; }
.cs-frame-handle {
  position: absolute; z-index: 5;
  width: 9px; height: 9px;
  background: var(--bg); border: 1px solid var(--line, var(--ink));
  transition: border-color 200ms ease, background 200ms ease;
  pointer-events: none;
}
.cs-frame-handle.tl { top: -5px; left: -5px; }
.cs-frame-handle.tr { top: -5px; right: -5px; }
.cs-frame-handle.br { bottom: -5px; right: -5px; }
.cs-frame-handle.bl { bottom: -5px; left: -5px; }

/* hover: reads like a selected layer, with its size underneath */
.cs-frame:hover { --line: var(--accent); }
.cs-frame:hover .cs-frame-label { color: var(--accent); }
.cs-frame:hover .cs-frame-handle { background: var(--accent); }
.cs-frame-size {
  position: absolute; left: 50%; bottom: -1.9rem; z-index: 5;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 600; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -4px);
  transition: opacity 150ms ease, transform 200ms ease;
  pointer-events: none;
}
.cs-frame:hover .cs-frame-size { opacity: 1; transform: translate(-50%, 0); }

/* ── Before/after slider ──
   --pos is the handle position: "before" shows to its left, "after" to its right. */
.cs-compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--accent-deep);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.cs-compare-layer { position: absolute; inset: 0; }
.cs-compare-layer > * { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cs-compare-layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.cs-compare-label {
  position: absolute; top: 1.25rem; z-index: 2;
  padding: 0.35rem 0.6rem 0.3rem;
  background: var(--card); color: var(--ink);
  font-size: 0.75rem; font-weight: 700; line-height: 1.15; letter-spacing: 0.09em;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.cs-compare-label--before { left: 1.25rem; }
.cs-compare-label--after { right: 1.25rem; background: var(--accent); color: var(--accent-ink); }
.cs-compare[data-edge="start"] .cs-compare-label--before,
.cs-compare[data-edge="end"] .cs-compare-label--after { opacity: 0; }

.cs-compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3;
  width: 2px; margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 70, 125, 0.12);
  pointer-events: none;
}
.cs-compare-knob {
  position: absolute; top: 50%; left: 50%;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: #fff; color: var(--accent-deep);
  box-shadow: 0 0.5rem 1.75rem rgba(20, 70, 125, 0.28);
  transform: translate(-50%, -50%);
  transition: transform 200ms var(--ease);
}
.cs-compare-knob svg { width: 1.5rem; height: 1.5rem; }
.cs-compare:hover .cs-compare-knob,
.cs-compare.is-dragging .cs-compare-knob { transform: translate(-50%, -50%) scale(1.1); }
.cs-compare.is-dragging .cs-compare-knob { box-shadow: 0 0.25rem 1rem rgba(20, 70, 125, 0.34); }

/* the range input is the keyboard/screen reader control; the pointer drags the whole image */
.cs-compare-range {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.cs-compare:has(.cs-compare-range:focus-visible) .cs-compare-knob {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

/* ── Full-bleed accent band: illustration + one-sentence summary ── */
.cs-band {
  position: relative;
  padding: 10rem 0 11rem;
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
}
.cs-band-art {
  display: flex; justify-content: center; align-items: center; gap: 1.75rem;
  margin-bottom: 3rem;
}
.cs-band-art img { height: 7.5rem; width: auto; }
/* the objects sway slowly, each at its own pace, and hold still while hovered */
.cs-band-art img {
  --tilt: 5deg;
  animation: cs-sway 5.5s ease-in-out infinite alternate;
  transform-origin: 50% 85%;
}
.cs-band-art img:nth-of-type(2) { --tilt: -7deg; animation-duration: 4.2s; animation-delay: -1.5s; }
.cs-band-art img:nth-of-type(3) { --tilt: 3deg; animation-duration: 6.5s; animation-delay: -3s; }
.cs-band-art img:hover { animation-play-state: paused; }
/* one illustration instead of a row of objects: larger, and it stays still */
.cs-band-art--single img { height: auto; width: min(38rem, 100%); animation: none; }
@keyframes cs-sway {
  from { transform: rotate(calc(var(--tilt) * -1)) translateY(0); }
  to   { transform: rotate(var(--tilt)) translateY(-0.25rem); }
}
.cs-band-art span {
  font-size: 3.25rem; font-weight: 300; line-height: 1;
}
.cs-band p {
  max-width: 53rem; margin: 0 auto;
  font-size: 2.25rem; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: balance;
}
/* the summary lights up word by word as it scrolls through the screen (case-study.js) */
.cs-band p .cs-word { opacity: 0.28; transition: opacity 260ms ease; }
.cs-band p .cs-word.is-lit { opacity: 1; }

/* ── Two-column rows: 5 columns of text, a gap, then 6 columns ── */
.cs-row {
  display: grid;
  grid-template-columns: 40.6% 49%;
  justify-content: space-between;
}

/* card + text pair (challenges / problem, takeaways / hypothesis) */
.cs-pair { margin-top: 6.5rem; align-items: stretch; }
/* the two cards touch: white takeaways on the left, accent hypothesis on the right */
.cs-pair--flush { grid-template-columns: 46% 54%; }
.cs-card { padding: 3.25rem 3.25rem 3.5rem; background: var(--card); }
.cs-card--accent {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--accent); color: var(--accent-ink);
}
/* ── What people said: hand-drawn speech bubbles, two by two ── */
.cs-bubbles {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem 3rem;
  margin-top: 5rem;
}
.cs-bubble { position: relative; }
.cs-bubble:nth-child(even) { margin-top: 2.5rem; }
.cs-bubble img { width: 100%; height: auto; }
.cs-bubble p {
  position: absolute;
  display: flex; align-items: center;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
}
.cs-bubble--1 p { left: 6%; width: 64%; top: 8%; bottom: 10%; }
.cs-bubble--2 p { left: 38%; width: 58%; top: 0; bottom: 10%; }
.cs-bubble--3 p { left: 8%; width: 58%; top: 5%; bottom: 10%; }
.cs-bubble--4 p { left: 40%; width: 54%; top: 2%; bottom: 6%; }
.cs-bubbles + .cs-frame { margin-top: 5rem; }

.cs-card--plain { padding: 3.25rem 0 0; background: none; }

.cs-list { display: grid; gap: 1.5rem; margin-top: 1.75rem; list-style: none; counter-reset: cs; }
.cs-list li {
  position: relative;
  padding-left: 1.75rem;
  counter-increment: cs;
}
.cs-list li::before {
  content: counter(cs, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.75;
  font-variant-numeric: tabular-nums;
  color: var(--label, var(--accent));
}

.cs-lead { margin-top: 2rem; font-size: 1.5rem; line-height: 1.25; }
.cs-lead-more { margin-top: 1.25rem; }
/* an intro on its own, when there is no highlights card beside it */
.cs-intro { margin-top: 6.5rem; max-width: 60rem; }
.cs-intro .cs-lead { margin-top: 1.25rem; }
.cs-pair--tight { margin-top: 4.5rem; }
.cs-pair--last { margin-bottom: 8rem; }
.cs-statement--sm { font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; }
.cs-statement {
  margin: auto 0;
  padding: 2rem 0 0.5rem;
  font-size: 2rem; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: balance;
}

/* section: tag, header on the left, copy on the right, media underneath */
.cs-section { margin-top: 8rem; }
.cs-section-head { margin-top: 0.875rem; align-items: start; }
.cs-section h2 {
  font-size: 2.125rem; font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em;
  text-wrap: balance;
}
.cs-copy p + p { margin-top: 0.875rem; }
.cs-copy p + ul { margin-top: 1.25rem; }
.cs-copy ul { display: grid; gap: 0.625rem; list-style: none; }
.cs-copy li { position: relative; padding-left: 1.25rem; }
.cs-copy li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 0.3rem; height: 0.3rem; background: var(--accent);
}

/* numbered points: findings, steps */
.cs-points {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
  margin-top: 5rem;
  list-style: none; counter-reset: pt;
}
.cs-points--stack { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.75rem; }
.cs-point { position: relative; padding-left: 2.75rem; counter-increment: pt; }
.cs-point::before {
  content: counter(pt, decimal-leading-zero);
  position: absolute; left: 0; top: 0.2rem;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.75;
  font-variant-numeric: tabular-nums;
  color: var(--label, var(--accent));
}
.cs-point-art { height: 5rem; width: auto; margin-bottom: 0.875rem; }   /* optional small drawing above a point */
.cs-point h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.cs-point p { margin-top: 0.4rem; }
.cs-steps { margin-top: 0.875rem; align-items: start; }
.cs-section > h2 { margin-top: 0.875rem; }
.cs-section--last { margin-bottom: 8rem; }

/* ── Media ── */
.cs-media { margin-top: 6.5rem; }
.cs-media > img, .cs-media > video { width: 100%; height: auto; }

/* a framed image with a caption underneath */
.cs-figure { margin-top: 6.5rem; }
.cs-figure > .cs-frame { margin-top: 0; }
.cs-figure figcaption { margin-top: 0.875rem; font-size: 0.875rem; color: var(--ink-soft); text-align: center; }

/* two framed images side by side */
.cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; margin-top: 6.5rem; align-items: start; }
.cs-grid2 + .cs-figure, .cs-figure + .cs-figure { margin-top: 4.5rem; }
.cs-grid2 > .cs-figure { margin-top: 0; }

/* phone screen recordings on a soft accent panel */
.cs-phonebox, .cs-phones { background: var(--accent-soft); }
.cs-phonebox { display: grid; place-items: center; padding: 3.5rem 2rem; }
.cs-phones { display: flex; justify-content: center; gap: 6rem; margin-top: 6.5rem; padding: 4.5rem 2rem 3.5rem; }
.cs-phones figure { max-width: 17rem; text-align: center; }
.cs-phones figcaption { margin-top: 1rem; font-size: 0.875rem; }
.cs-phonebox video, .cs-phones video {
  height: 34rem; width: auto; max-width: 100%;
  margin: 0 auto;
  border-radius: 1.75rem;
  background: var(--accent-deep);
}

/* three images: two 16:9 stacked on the left, one tall on the right */
.cs-grid3 {
  display: grid;
  grid-template-columns: 638fr 554fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.5rem 1.5rem;  /* the row gap leaves room for the frame names */
  margin-top: 6.5rem;
  aspect-ratio: 1215 / 757;
}
.cs-grid3 > * { min-width: 0; min-height: 0; }
.cs-grid3 > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.cs-grid3 img { width: 100%; height: 100%; object-fit: cover; }
/* same arrangement, but the left images keep their own shapes (a short one over a taller one) */
.cs-grid3--auto { grid-template-columns: 614fr 577fr; grid-template-rows: auto auto; aspect-ratio: auto; }
.cs-grid3--auto { align-items: start; }
.cs-grid3--auto > .cs-frame > .cs-frame-media { height: auto; }   /* never cropped */

/* video on a soft accent band */
.cs-videoband {
  margin-top: 6.5rem;
  padding: 5rem var(--gutter);
  background: var(--accent-soft);
}
.cs-videoband video,
.cs-videoband .cs-ph {
  width: 62%; max-width: 48rem; margin: 0 auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2.5rem;
  background: var(--accent-deep);
}

/* a trimmed video in the band: the box takes the size and the tablet's rounded corners */
.cs-videoband .cs-trim { width: 62%; max-width: 48rem; margin: 0 auto; }
.cs-videoband .cs-trim--tablet { border-radius: 4.4% / 6.5%; }
.cs-videoband .cs-trim > video { aspect-ratio: auto; border-radius: 0; background: none; }

/* stand-in for an image that isn't exported yet: swap the whole element for an <img> */
.cs-ph {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 14px, transparent 14px 28px),
    var(--accent-deep);
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; text-align: center;
}
.cs-media > .cs-ph, .cs-ph.cs-media { aspect-ratio: 16 / 9; height: auto; }

/* ── Outcome note + three learnings ── */
.cs-note { margin-top: 6.5rem; max-width: 60rem; font-size: 1.5rem; line-height: 1.25; }
.cs-learnings {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  margin: 4rem 0 8rem;
}
/* a label above the learnings when they stand on their own, outside a section */
.cs-learnings-head { margin-top: 5rem; }
.cs-learnings-head + .cs-learnings { margin-top: 2rem; }
.cs-learning img { height: 9.5rem; width: auto; margin-bottom: 1.25rem; transform: rotate(-4deg); }
.cs-learning:nth-child(even) img { transform: rotate(4deg); }
.cs-learning h3 {
  font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em;
}
.cs-learning p { margin-top: 0.875rem; max-width: 22rem; }
.cs-section .cs-learnings { margin: 3.5rem 0 0; }
.cs-section .cs-learning h3 { max-width: 18rem; }

/* ── Loading ──
   Everything arrives the same way: out of a slight blur, rising a few pixels.
   The hero plays it on load; the rest plays as it scrolls in (classes added by case-study.js). */
.pt-arriving { --cs-start: 520ms; }  /* arriving through the colour loader (transition.js) */
.cs-hero .cs-title,
.cs-hero .cs-logo,
.cs-hero .cs-fact,
.cs-hero .cs-frame {
  animation: cs-in 900ms var(--ease) both;
  animation-delay: calc(var(--cs-start, 80ms) + var(--i, 0) * 70ms);
}
.cs-hero .cs-logo { --i: 2; }
.cs-hero .cs-facts-col:nth-of-type(1) .cs-fact:nth-child(1) { --i: 3; }
.cs-hero .cs-facts-col:nth-of-type(1) .cs-fact:nth-child(2) { --i: 4; }
.cs-hero .cs-facts-col:nth-of-type(2) .cs-fact:nth-child(1) { --i: 5; }
.cs-hero .cs-facts-col:nth-of-type(2) .cs-fact:nth-child(2) { --i: 6; }
.cs-hero .cs-frame { --i: 7; }
@keyframes cs-in {
  from { opacity: 0; filter: blur(4px); transform: translateY(0.75rem); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
.cs-reveal {
  opacity: 0; filter: blur(3px); transform: translateY(0.625rem);
  transition: opacity 700ms var(--ease), filter 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.cs-reveal.is-in { opacity: 1; filter: none; transform: none; }
.cs-reveal--plain { filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cs-hero * { animation: none !important; }
  .cs-reveal { opacity: 1; filter: none; transform: none; transition: none; }
  .cs-band p .cs-word { opacity: 1; transition: none; }
  nav.top-nav, .cs-compare-knob, .cs-learning img { transition: none; }
  .cs-band-art img { animation: none; }
}

/* ── Smaller screens: fixed type size, one column ── */
@media (max-width: 720px) {
  html { font-size: 16px; }
  :root { --gutter: 1.25rem; }
  nav.top-nav { height: 4.5rem; }
  nav.top-nav a { font-size: 1rem; }
  .cs-hero { padding: 6.5rem 0 3rem; }
  .cs-title { font-size: 2rem; padding-bottom: 1.5rem; }
  .cs-copy p, .cs-copy li, .cs-list li { line-height: 1.5; }
  .cs-facts { grid-template-columns: 1fr; gap: 1.25rem; padding: 1rem 0 2rem; }
  .cs-facts-col { padding-right: 0; }
  .cs-fact { grid-template-columns: 6.5rem 1fr; }
  /* pills read as plain text here: four rows of coloured chips crowd the header */
  .cs-pills { gap: 0; padding-top: 0.2rem; }
  .cs-pill { padding: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
  .cs-pill:not(:last-child)::after { content: ',\00a0'; }
  /* corner handles poke into the gutter on a narrow screen */
  .cs-frame-handle { display: none; }
  .cs-hero-media { aspect-ratio: 4 / 3; }
  .cs-compare-knob { width: 3rem; height: 3rem; }
  .cs-compare-label { top: 0.75rem; }
  .cs-compare-label--before { left: 0.75rem; }
  .cs-compare-label--after { right: 0.75rem; }
  .cs-band { padding: 5.5rem 0 6rem; }
  .cs-band-art { gap: 1rem; margin-bottom: 2rem; }
  .cs-band-art img { height: 5rem; }
  .cs-band-art--single img { height: auto; }
  .cs-band-art span { font-size: 2.25rem; }
  .cs-band p { font-size: 1.5rem; line-height: 1.3; }
  .cs-row, .cs-pair--flush { grid-template-columns: 1fr; gap: 1.25rem; }
  .cs-pair { margin-top: 3.5rem; gap: 2rem; }
  .cs-pair--flush { gap: 0; }
  .cs-card { padding: 1.75rem 1.5rem 2rem; }
  .cs-card--plain { padding: 0; }
  .cs-lead, .cs-note { font-size: 1.125rem; line-height: 1.45; }
  .cs-intro { margin-top: 3.5rem; }
  .cs-logo--text { margin-top: 0; }
  .cs-points { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.5rem; }
  .cs-frame--pad { padding: 1.25rem; }
  .cs-grid2 { grid-template-columns: 1fr; margin-top: 3rem; }
  .cs-phonebox { padding: 2rem 1.25rem; }
  .cs-phones { flex-direction: column; align-items: center; gap: 2.5rem; margin-top: 3rem; padding: 2.5rem 1.25rem; }
  .cs-phonebox video, .cs-phones video { height: 28rem; }
  .cs-section--last, .cs-pair--last { margin-bottom: 5rem; }
  .cs-statement { font-size: 1.375rem; line-height: 1.3; }
  .cs-bubbles { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 2.5rem; }
  .cs-bubble:nth-child(even) { margin-top: 0; }
  .cs-bubble p { font-size: 0.8125rem; }
  .cs-bubbles + .cs-frame { margin-top: 3rem; }
  .cs-section { margin-top: 4rem; }
  .cs-section h2 { font-size: 1.625rem; }
  .cs-media, .cs-grid3, .cs-videoband, .cs-frame, .cs-figure { margin-top: 3rem; }
  .cs-frame > .cs-media, .cs-grid3 > .cs-frame, .cs-figure > .cs-frame { margin-top: 0; }
  .cs-grid3 { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; gap: 2.25rem; }
  .cs-grid3 > * { aspect-ratio: 16 / 9; }
  .cs-grid3 > :nth-child(3) { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
  .cs-grid3--auto > *, .cs-grid3--auto > :nth-child(3) { aspect-ratio: auto; }
  .cs-grid3--auto > .cs-frame > .cs-frame-media { height: auto; }
  .cs-videoband { padding: 2rem var(--gutter); }
  .cs-videoband video, .cs-videoband .cs-ph { width: 100%; border-radius: 1.5rem; }
  .cs-videoband .cs-trim { width: 100%; }
  .cs-videoband .cs-trim > video { width: calc(100% * var(--w) / var(--cw)); border-radius: 0; }
  .cs-logo { height: 3.5rem; margin-top: 0; }
  .cs-note { margin-top: 3.5rem; }
  .cs-learnings { grid-template-columns: 1fr; gap: 2.5rem; margin: 3rem 0 5rem; }
  .cs-learnings-head { margin-top: 3rem; }
  .cs-learnings-head + .cs-learnings { margin-top: 1.5rem; }
  .cs-learning img { height: 6rem; margin-bottom: 1rem; }
}