/* ==========================================================================
   Case study concept: Trust
   Tokens come from the updated design system (Figma: Product Portfolio /
   Case Study - Trust). Self-contained on purpose so the live site's
   styles.css is not touched by the concept.
   ========================================================================== */
:root {
  /* Color: primitives from the design system (Figma: Design System, READ ME) */
  --brand-primary: #2c4636;
  --brand-secondary: #f2674b;
  --brand-tertiary: #ccec96;
  --table-rule: var(--border);   /* approach table lines: light grey (border/default) */
  --heading: var(--brand-primary);   /* headings, bold copy, key figures (switches in dark mode) */
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #cccccc;
  --gray-400: #aaaaaa;
  --gray-500: #999999;
  --gray-600: #666666;
  --gray-700: #4d4d4d;
  --gray-800: #333333;
  --gray-900: #1a1a1a;
  --status-success: #35c285;
  --status-warning: #ffc948;
  --status-error: #f2211c;
  --status-info: #2784ed;
  --status-link: #194ef2;

  /* Color: semantic */
  --text-default: #111111;
  --text-secondary: #1a1a1a;
  --text-helper: #666666;
  --text-disabled: #999999;
  --text-inverted: #ffffff;
  --surface: #ffffff;
  --surface-gray: #f5f5f5;          /* background/base */
  --border: #cccccc;                /* border/default */
  --border-strong: #666666;
  --border-stroke: #111111;
  --action-hover: rgba(44, 70, 54, 0.1);
  --control-bg: #f4f4f4;
  --control-border: #e3e3e3;

  /* Type */
  --font-sans: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --content-width: 1024px;
  --page-pad: clamp(24px, 5vw, 72px);
  --gap-block: 80px;
  --radius: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
video { background: var(--surface-gray); }   /* a soft panel, not a hole, in the instant before a poster frame arrives */
p, h1, h2, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
strong { font-weight: 700; color: var(--heading); }

:focus-visible { outline: 2px solid var(--text-default); outline-offset: 2px; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--text-helper);
}
.eyebrow--accent { color: var(--brand-secondary); }

.h1 { font-weight: 700; font-size: 48px; line-height: 56px; color: var(--heading); }
.h4 { font-weight: 700; font-size: 24px; line-height: 32px; color: var(--heading); }
.body-l { font-size: 16px; line-height: 24px; }
.body-m { font-size: 14px; line-height: 20px; }

.quote {
  color: #577161;
  font-weight: 300;
  font-style: italic;
  font-size: 24px;
  line-height: 32px;
}

/* ---------- Header + page frame ---------- */
.cs-page {
  max-width: calc(var(--content-width) + var(--page-pad) * 2);
  margin: 0 auto;
  padding: 112px var(--page-pad) 160px;
}

.cs-block { margin-top: var(--gap-block); }

/* ---------- Hero ---------- */
.cs-hero { display: flex; flex-direction: column; gap: 40px; }
.cs-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.cs-hero__intro { display: flex; flex-direction: column; gap: 24px; }
.cs-hero__titles { display: flex; flex-direction: column; gap: 8px; }
.cs-hero__subhead { font-weight: 700; font-size: 16px; line-height: 24px; color: var(--text-helper); }

.chips { display: flex; flex-wrap: wrap; gap: 12px 24px; }   /* tighter between rows when the chips wrap */
.chip {
  border: 1px solid var(--text-helper);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-helper);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.cs-hero__summary { display: flex; flex-direction: column; gap: 16px; }
.meta { display: flex; flex-wrap: wrap; gap: 16px 56px; margin-top: 0; }
.meta__item { display: flex; flex-direction: column; gap: 4px; min-width: 176px; }
.meta__item:first-child { min-width: 216px; }

.results { display: flex; flex-direction: column; gap: 16px; }
.results__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.result { position: relative; display: flex; flex-direction: column; gap: 8px; }
/* the rule above each percentage: drawn left to right when the result reveals */
.result::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--text-default);
  transform-origin: left;
}
.js .result::before {
  transform: scaleX(0);
  transition: transform 1200ms var(--ease);
  transition-delay: 150ms;
}
.js .result.is-visible::before { transform: scaleX(1); }
.js .result:nth-child(2)::before { transition-delay: 270ms; }
.js .result:nth-child(3)::before { transition-delay: 390ms; }
.result__figure { font-weight: 300; font-size: 48px; line-height: 56px; padding-top: 8px; color: var(--heading); }

/* ---------- Segmented controls ---------- */
.seg {
  display: inline-flex;
  align-items: flex-start;
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  max-width: 100%;
}
.seg__tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-helper);
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.seg__tab:hover { color: var(--gray-900); }
.seg__tab.is-active { font-weight: 500; cursor: default; }

/* ---------- Switcher (tabs + panels) ---------- */
.switcher { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.switcher__panels { width: 100%; }
.switcher__panel { display: flex; flex-direction: column; gap: 21px; }
.switcher__panel[hidden] { display: none; }
/* Match phases: carousel with dynamic captions */
.match-phases { display: flex; flex-direction: column; gap: 21px; }
.match-carousel video.is-contain { object-fit: contain; background: var(--surface); }
.match-phases__captions > .caption[hidden] { display: none; }


/* ---------- Device stage (Before / After) ---------- */
body { overflow-x: clip; }

.stage-switcher { gap: 21px; align-items: stretch; }
.stage {
  position: relative;
  /* full bleed: break out of the 1024 column to the full viewport width */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 72px 24px 92px;
  display: flex;
  justify-content: center;
  isolation: isolate;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 32%),
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    url('Assets/trust-stage-bg.jpg') center / cover no-repeat,
    #1a1210;
}
.stage__toggle {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.device {
  width: min(960px, 100%);
  padding: 9px;
  background: #0d0d0f;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 40px 80px -16px rgba(0, 0, 0, 0.6),
    0 14px 28px -8px rgba(0, 0, 0, 0.45);
}
.device__screen {
  aspect-ratio: 1972 / 1206;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-gray);
}
.device__panel { width: 100%; height: 100%; }
.device__panel[hidden] { display: none; }
.device__panel video { width: 100%; height: 100%; object-fit: cover; }
[data-caption][hidden] { display: none; }

/* Minimal glass toggle that sits on the photo */
.seg--glass {
  padding: 2px;
  gap: 2px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.seg--glass .seg__tab {
  height: 22px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}
.seg--glass .seg__tab:hover { color: #fff; }
.seg--glass .seg__tab.is-active,
.seg--glass .seg__tab.is-active:hover {
  background: #fff;
  border-color: #fff;
  color: var(--gray-900);
}


/* ---------- Media ---------- */
.media {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-gray);
}
/* very light stroke around every visual, drawn above the media */
.media { position: relative; }
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--control-border);
  border-radius: inherit;
  pointer-events: none;
}
.media video, .media img { width: 100%; height: 100%; object-fit: cover; }
.media--square { aspect-ratio: 1 / 1; }
.media--wide { aspect-ratio: 1972 / 1206; }

.caption { color: var(--text-default); }
.caption--m { font-size: 14px; line-height: 20px; }

/* ---------- Carousel (swipe between videos) ---------- */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -2px; }
.carousel__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.carousel__slide video { pointer-events: none; }
.carousel__slide img.is-contain { object-fit: contain; background: var(--surface-gray); }   /* photos of different shapes: show the whole photo, no cropping */

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
  transition: background-color 180ms var(--ease), opacity 180ms var(--ease);
}
.carousel__btn:hover { background: rgba(0, 0, 0, 0.7); }
.carousel__btn--prev { left: 12px; }
.carousel__btn--next { right: 12px; }
.carousel__btn[hidden] { display: none; }
.carousel__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
}
.carousel__dot {
  appearance: none;
  border: 0;
  padding: 0;
  height: 6px;
  width: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 220ms var(--ease), background-color 220ms var(--ease);
}
.carousel__dot.is-active { width: 16px; background: #fff; cursor: default; }

/* ---------- The problem ---------- */
.problem { display: flex; gap: 40px; align-items: center; }
.problem__lead { display: flex; flex-direction: column; gap: 24px; flex: 0 0 494px; max-width: 100%; }
.problem__body { flex: 1 1 0; min-width: 0; }
.quote { align-self: stretch; }

/* Quote cycler: every quote sits in one grid cell so the box is as tall as the longest,
   and nothing around it shifts when the quote changes. */
.quote-cycle { display: grid; align-self: stretch; }
.quote-cycle > .quote { grid-area: 1 / 1; }
.js .quote-cycle > .quote {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js .quote-cycle > .quote.is-active { opacity: 1; transform: translateY(0); }

/* ---------- Approach table ---------- */
.approach { display: flex; flex-direction: column; gap: 20px; }
.approach__lead { display: flex; flex-direction: column; gap: 8px; max-width: 669px; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table thead th {
  text-align: left;
  padding: 8px 0;
  border-top: 1px solid var(--table-rule);
  border-bottom: 1px solid var(--table-rule);
}
.table tbody th, .table tbody td {
  text-align: left;
  vertical-align: middle;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--table-rule);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
.table th, .table td { width: 50%; }
/* each question appears as you scroll to it, then its response answers a beat later */
.js .table tbody th, .js .table tbody td {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .table tbody td { transition-delay: calc(var(--d, 0ms) + 450ms); }
.js .table tbody tr.is-visible th, .js .table tbody tr.is-visible td { opacity: 1; transform: none; }

/* ---------- Chapters ---------- */
.chapter { display: flex; flex-direction: column; gap: 40px; }
.chapter__head { display: flex; flex-direction: column; gap: 24px; }
.chapter__head > .h4, .chapter__lede, .call { max-width: 670px; }
.chapter--match .chapter__head { gap: 20px; }
.chapter--match { gap: 20px; }

.call {
  position: relative;
  padding-left: 24px;   /* 4px stroke + 20px gap */
  --p: 1;               /* stroke progress, driven by scroll (1 = fully drawn) */
}
.call::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand-secondary);
  transform: scaleY(var(--p));
  transform-origin: top;
  will-change: transform;
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.tile { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Reflection ---------- */
.reflection { display: flex; flex-direction: column; gap: 20px; }
.reflection__body { display: flex; flex-direction: column; gap: 24px; max-width: 670px; }

/* ---------- Reveal on scroll (carried over from the live site) ---------- */
:root { --duration-reveal: 1100ms; }
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-reveal) var(--ease), transform var(--duration-reveal) var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 120ms; }
[data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 240ms; }
[data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 360ms; }
.result__figure { font-variant-numeric: tabular-nums; }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  :root { --gap-block: 64px; }
  .h1 { font-size: 36px; line-height: 44px; }
  .cs-hero__grid, .pair { grid-template-columns: minmax(0, 1fr); }
  /* phones: compact rows (number left, label right) instead of three tall stacked blocks */
  .results { gap: 12px; }
  .results__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .result { flex-direction: row; align-items: center; gap: 16px; padding: 12px 0; }
  .result__figure { flex: 0 0 4.2ch; font-size: 32px; line-height: 40px; padding-top: 0; }
  .result .body-m { flex: 1 1 0; min-width: 0; }
  .problem { flex-direction: column; align-items: flex-start; }
  .problem__lead { flex-basis: auto; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: 100%; }
  .table tbody tr { padding: 16px 0; border-bottom: 1px solid var(--table-rule); }
  .table tbody th, .table tbody td { border: 0; padding: 0; }
  .table tbody th { margin-bottom: 4px; font-weight: 700; }
  .seg--glass:not(.stage__toggle) { display: flex; overflow-x: auto; }
  .stage { padding: 40px 16px 72px; }
  .stage__toggle { bottom: 20px; }
  .device { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .seg__tab { transition: none; }
  .carousel__dot, .carousel__btn { transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .table tbody th, .js .table tbody td { opacity: 1; transform: none; transition: none; }
  .js .quote-cycle > .quote { transition: none; transform: none; }
  .js .result::before { transform: none; transition: none; }
}

/* "On this page" menu that flies up from the dock */
.cs-toc {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: 248px;
  padding: 16px 8px 8px;
  border: 1px solid var(--control-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 180ms var(--ease), transform 220ms var(--ease);
}
.cs-toc.is-open { opacity: 1; transform: translate(-50%, 0); }
.cs-toc[hidden] { display: none; }
.cs-toc .eyebrow { padding: 0 8px 8px; }
.cs-toc .eyebrow, .cs-toc__next .eyebrow { color: var(--brand-secondary); }   /* the accent eyebrow colour: coral in light, lime in dark */
.cs-toc__list { list-style: none; margin: 0; padding: 0; }
.cs-toc__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--text-helper);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.cs-toc__list a:hover { background: var(--surface-gray); color: var(--text-default); }
.cs-toc__list a.is-current { color: var(--text-default); font-weight: 600; }
.cs-toc__n {
  width: 18px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-helper);
}
.cs-toc__list a.is-current .cs-toc__n { color: var(--brand-secondary); }
.cs-toc__mail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 10px 8px 6px;
  border-top: 1px solid var(--control-border);
  color: var(--text-default);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}
.cs-toc__mail:hover { color: var(--brand-secondary); }
.cs-toc__next { align-items: flex-start; }
.cs-toc__next .eyebrow { padding: 0; }   /* the menu's own eyebrow padding would push it 8px right of "On this page" */
.cs-toc__nextt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cs-toc__nexttitle { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
section[id] { scroll-margin-top: 96px; }

@media (max-width: 560px) {
  .cs-page { padding-top: 96px; }
  .cs-dock { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
      .cs-toc { width: min(280px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-dock__btn, .cs-toc, .cs-toc__list a { transition: none; }
}

/* ---------- Floating dock: home, on this page, light / dark ---------- */
.cs-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.cs-dock > * { pointer-events: auto; }
.cs-dock__inner { position: relative; }
.cs-dock__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);     /* no live backdrop blur: re-blurring moving content and video every frame made scrolling heavy */
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.06);
  will-change: transform;
}
.cs-dock__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-helper);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms, color 150ms, transform 150ms var(--ease);
}
.cs-dock__btn:hover { background: var(--surface-gray); color: var(--text-default); }
.cs-dock__btn:active { transform: scale(0.92); }
.cs-dock__nav[aria-expanded="true"] { background: var(--surface-gray); color: var(--text-default); }
.cs-theme .icon-sun { display: none; }
html[data-theme="dark"] .cs-theme .icon-sun { display: block; }
html[data-theme="dark"] .cs-theme .icon-moon { display: none; }

/* ---------- Dark mode ----------
   Values come from the Dark mode of the Color collection in the design system
   (background base = gray/900, surface = gray/800, border = gray/700,
   text = gray/100 to gray/400). Headings and bold copy turn white because the
   green is too dark on dark, and the coral accent is swapped for the tertiary lime. */
html[data-theme="dark"] {
  --heading: #ffffff;
  --table-rule: var(--gray-600);   /* quieter than the bright header text in dark mode */
  --brand-secondary: var(--brand-tertiary);   /* accent becomes the lime in dark mode */
  --text-default: #f5f5f5;
  --text-secondary: #e5e5e5;
  --text-helper: #aaaaaa;
  --text-disabled: #666666;
  --text-inverted: #1a1a1a;
  --surface: #1a1a1a;          /* page background (background/base) */
  --surface-gray: #333333;     /* tiles, chips, active states (background/surface) */
  --border: #4d4d4d;
  --border-strong: #999999;
  --border-stroke: #f5f5f5;
  --control-bg: #262626;
  --control-border: #4d4d4d;
}
html[data-theme="dark"] .seg:not(.seg--glass) .seg__tab:hover { color: var(--text-default); }
body { transition: background-color 250ms var(--ease), color 250ms var(--ease); }
html[data-theme="dark"] .quote { color: var(--gray-300); }
html[data-theme="dark"] .cs-dock__pill {
  background: rgba(26, 26, 26, 0.95);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .cs-toc {
  background: rgba(26, 26, 26, 0.94);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* ---------- Page transition: home -> case study eases in from the right; back eases in from the left ---------- */
@view-transition { navigation: auto; }
html:active-view-transition-type(to-case)::view-transition-old(root) {
  animation: slide-out-left 520ms cubic-bezier(0.5, 0, 0.75, 0) both;
}
html:active-view-transition-type(to-case)::view-transition-new(root) {
  animation: slide-in-right 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
html:active-view-transition-type(to-home)::view-transition-old(root) {
  animation: slide-out-right 520ms cubic-bezier(0.5, 0, 0.75, 0) both;
}
html:active-view-transition-type(to-home)::view-transition-new(root) {
  animation: slide-in-left 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes slide-in-right { from { opacity: 0; transform: translateX(14vw); } to { opacity: 1; transform: none; } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-14vw); } to { opacity: 1; transform: none; } }
@keyframes slide-out-left { to { opacity: 0; transform: translateX(-8vw); } }
@keyframes slide-out-right { to { opacity: 0; transform: translateX(8vw); } }
@media (prefers-reduced-motion: reduce) {
  html:active-view-transition-type(to-case)::view-transition-old(root),
  html:active-view-transition-type(to-case)::view-transition-new(root),
  html:active-view-transition-type(to-home)::view-transition-old(root),
  html:active-view-transition-type(to-home)::view-transition-new(root) { animation: none; }
}

/* ---------- Brand case study helpers ---------- */
.media--auto { background: none; }
.media--auto img { height: auto; object-fit: contain; display: block; }
.stack { display: flex; flex-direction: column; gap: 40px; }
.sub { display: flex; flex-direction: column; gap: 24px; }
.sub__head { display: flex; flex-direction: column; gap: 12px; max-width: 670px; }
.sub__title { font-weight: 700; font-size: 20px; line-height: 28px; color: var(--heading); margin: 0; }
.reflection__list { margin: 0; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; }
.reflection__list li { display: list-item; }
.cs-next__link { display: flex; flex-direction: column; gap: 8px; padding-top: 32px; border-top: 1px solid var(--table-rule); max-width: 670px; color: inherit; text-decoration: none; }
.cs-next__title { font-weight: 700; font-size: 24px; line-height: 32px; color: var(--heading); transition: color .2s var(--ease); }
.cs-next__link:hover .cs-next__title, .cs-next__link:focus-visible .cs-next__title { color: var(--brand-secondary); }
.cs-link { color: var(--heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-secondary); text-underline-offset: 4px; text-decoration-thickness: 2px; transition: color .2s var(--ease); }
.cs-link:hover, .cs-link:focus-visible { color: var(--brand-secondary); }
.cs-link--text { font-weight: inherit; color: inherit; text-decoration-thickness: 1px; }   /* a link inside running text */
.cs-link--text:hover, .cs-link--text:focus-visible { color: var(--brand-secondary); }

/* a visual that links out: the image eases in and a small "View live" pill appears on hover or keyboard focus */
.media-link { position: relative; display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.media-link .media img { transition: transform 600ms var(--ease); }
.media-link__pill {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px -6px rgba(0, 0, 0, 0.25);
  color: #1a1a1a;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease), transform 240ms var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .media-link:hover .media img { transform: scale(1.015); }
  .media-link:hover .media-link__pill { opacity: 1; transform: none; }
}
.media-link:focus-visible .media-link__pill { opacity: 1; transform: none; }
html[data-theme="dark"] .media-link__pill { background: rgba(38, 38, 38, 0.7); border-color: rgba(255, 255, 255, 0.16); color: #f5f5f5; }
@media (prefers-reduced-motion: reduce) { .media-link .media img, .media-link__pill { transition: none; } .media-link:hover .media img { transform: none; } }
.chapter__head > .reflection__list { max-width: 670px; }
.sub > .reflection__list { max-width: 670px; }
.media__chip { position: absolute; top: 12px; left: 12px; z-index: 1; }   /* a small label laid over the corner of an image */

/* tabbed viewer: a segmented control above a frame whose panels scroll (campaign dashboard) */
.seg--tabs { border: 1px solid var(--control-border); background: var(--surface); }
.seg--tabs .seg__tab.is-active { background: var(--surface-gray); color: var(--text-default); }
.scroll-panel { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: #fff; }
.scroll-panel img { display: block; width: 100%; height: auto; object-fit: initial; }
.scroll-panel:focus-visible { outline-offset: -2px; }
@media (max-width: 860px) {
  .seg--tabs { display: flex; overflow-x: auto; }
  /* phones: a taller window onto the report, shown at a readable width and scrollable both ways */
  .media.scroll-view { aspect-ratio: auto; height: min(72vh, 560px); }
  .scroll-panel { overflow: auto; overscroll-behavior: auto; }
  .scroll-panel img { width: 880px; max-width: none; }
}
.result__link { display: block; color: inherit; text-decoration: none; }
.result__link:hover .result__figure, .result__link:focus-visible .result__figure { color: var(--brand-secondary); }
.result__link .result__figure { transition: color .2s var(--ease); }