/* case-study.css — shared layout and components for every case study.
   Project-specific styles belong in that project's folder. */

.cs-hero { padding-block: clamp(48px, 8vw, 104px) clamp(32px, 5vw, 56px); }
.crumb {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); font-size: 0.92rem;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), color 0.2s var(--ease);
}
.crumb:hover { color: var(--ink); }
/* the return arrow, drawn at the weight of the text beside it */
.i-back { flex: none; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.crumb:hover .i-back, .toc__back:hover .i-back { transform: translateX(-3px); }
/* at wide widths, scrolling slides the link left and out; it reappears at the top of the contents list (toc.js) */
.crumb.is-away { opacity: 0; transform: translateX(-40px); pointer-events: none; }
.cs-date { margin-top: 40px; color: var(--muted); font-size: 0.92rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
/* MM.YY that grows into MON.YYYY on hover (reveal.js builds the pieces): the digits slide out as the month name slides in,
   the century opens in front of the year, and the line darkens; it stays the same size */
.cs-date.is-ready { display: flex; width: max-content; height: 1.4em; cursor: default; -webkit-tap-highlight-color: transparent; }
.cs-date__in { display: inline-flex; align-items: flex-start; gap: 0.45em; line-height: 1.4; transform-origin: left center; transition: transform 0.55s var(--ease), color 0.3s var(--ease); }
.cd { display: inline-flex; align-items: flex-start; overflow: hidden; }
.cd > span { display: block; overflow: hidden; white-space: nowrap; }
.cd__s, .cd__l, .cd__c { transition: max-width 0.55s var(--ease), opacity 0.35s var(--ease), transform 0.5s var(--ease); }
.cd__s { max-width: 1.6em; }
.cd__l { max-width: 0; opacity: 0; transform: translateY(0.6em); }
.cd__c { max-width: 0; opacity: 0; }
.cs-date:hover .cs-date__in, .cs-date.is-open .cs-date__in { color: var(--ink); }
.cs-date:hover .cd__s, .cs-date.is-open .cd__s { max-width: 0; opacity: 0; transform: translateY(-0.6em); }
.cs-date:hover .cd__l, .cs-date.is-open .cd__l { max-width: 2.6em; opacity: 1; transform: none; }
.cs-date:hover .cd__c, .cs-date.is-open .cd__c { max-width: 1.4em; opacity: 1; }
.cs-title { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1.02; margin-top: 12px; max-width: 13em; }
.cs-lead { font-size: var(--fs-lead); max-width: 34em; margin-top: 22px; line-height: 1.55; color: var(--ink-2); }

.cs-cover { margin-top: clamp(36px, 5vw, 64px); }
.cs-cover .shot { border-radius: var(--radius-lg); }
.cs-cover figcaption { margin-top: 12px; color: var(--muted); font-size: var(--fs-small); }

/* impact */
.impact { padding-block: clamp(48px, 7vw, 96px); }
.impact__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .impact__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; } }
.impact__head h2 { font-size: var(--fs-h2); }
.impact__head p { color: var(--muted); max-width: 36em; }
.stats { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats li { background: var(--surface); padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 8px; align-content: start; }
.stats .big { font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.75rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.stats .term { font-size: 1rem; font-weight: 500; color: var(--accent); margin-top: 2px; }
.stats p { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }

/* layout with contents */
.cs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.cs-layout > article { min-width: 0; }
@media (min-width: 1080px) { .cs-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 64px; } }
.toc { display: none; }
@media (min-width: 1080px) {
  .toc { display: block; position: sticky; top: 96px; align-self: start; }
  .toc ol { list-style: none; border-left: 1px solid var(--line); }
  .toc__back {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; text-decoration: none; color: var(--muted); font-size: 0.9rem;
    opacity: 0; visibility: hidden; transform: translateX(36px);
    transition: opacity 0.35s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.55s, color 0.2s var(--ease);
  }
  .toc__back:hover { color: var(--ink); }
  .toc.has-back .toc__back { opacity: 1; visibility: visible; transform: none; transition-delay: 0.12s, 0.12s, 0s, 0s; }
  .toc a { display: flex; gap: 10px; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--muted); font-size: 0.9rem; }
  .toc a:hover { color: var(--ink); }
  .toc a.is-active { color: var(--ink); border-left-color: var(--accent); }
  .toc .n { color: var(--muted); font-size: 0.78rem; padding-top: 2px; min-width: 1.4em; }
  .toc a.is-active .n { color: var(--accent); }
}
/* very wide screens: "All work" and the contents leave the column and sit together in the left margin, so the
   article lines up with the title. "All work" flies in from the top of the page as you scroll (toc.js). */
@media (min-width: 1640px) {
  .cs-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-layout > .toc {
    position: fixed; top: 104px; left: calc(50% - 796px); width: 176px; z-index: 20; visibility: hidden;
    transform: translateX(var(--shift, 0px)); /* steps further left beside wide blocks (toc.js) */
    transition: opacity 0.35s var(--ease), visibility 0s linear 0.6s, transform 0.7s var(--ease);
  }
  .cs-layout > .toc.has-back { visibility: visible; transition: opacity 0.35s var(--ease), visibility 0s, transform 0.7s var(--ease); }
  /* in the margin the contents only hide at the end of the article, or when a wide block leaves no room (toc.js) */
  html.toc-hidden .cs-layout > .toc { opacity: 1; pointer-events: auto; }
  html .cs-layout > .toc.is-past, html .cs-layout > .toc.is-cramped { opacity: 0; pointer-events: none; }
  .toc ol { border-left-color: transparent; transition: border-color 0.4s var(--ease); }
  .toc ol li { opacity: 0; transform: translateX(14px); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
  .toc.has-back ol { border-left-color: var(--line); }
  .toc.has-back ol li { opacity: 1; transform: none; transition-delay: calc(0.32s + var(--i, 0) * 0.05s); }
  .toc.is-undocking ol li { opacity: 0; transform: translateX(14px); transition-delay: 0s; }
}

.cs-section { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.cs-section:first-child { border-top: 0; padding-top: 0; }
.cs-section > .label { display: block; margin-bottom: 14px; color: var(--accent); }
.cs-section h2 { font-size: var(--fs-h2); max-width: 17em; }
.prose { display: grid; gap: 1em; max-width: 42em; margin-top: 22px; color: var(--ink-2); }
.prose ul { padding-left: 1.15em; display: grid; gap: 0.45em; }
.prose li::marker { color: var(--accent); }

.callout-q {
  display: grid; gap: 10px; align-content: center;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.2vw, 40px);
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.callout-q .label { display: block; color: var(--accent); }
.callout-q p.q { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: 400; line-height: 1.32; letter-spacing: -0.015em; color: var(--ink); max-width: 30em; }

/* figures */
.fig { margin: clamp(28px, 4vw, 44px) 0 0; }
.fig figcaption { margin-top: 12px; display: flex; gap: 12px; align-items: baseline; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; max-width: 52em; }
.fig figcaption .label { flex: none; color: var(--ink-2); }
.figs-2 { display: grid; gap: clamp(20px, 3vw, 32px); margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 860px) { .figs-2 { grid-template-columns: 1fr 1fr; } }
.figs-2 .fig { margin: 0; }
.fig figcaption strong { color: var(--ink); font-weight: 500; }

/* product map */
.pmap { margin-top: clamp(28px, 4vw, 40px); display: grid; gap: 14px; }
@media (min-width: 860px) { .pmap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: stretch; } }
.pmap__col { display: flex; flex-direction: column; gap: 10px; }
.pmap__col > .pcard, .pmap__col > .pmap__adds { flex: 1; }
.pmap__col > .label { margin-bottom: 2px; }
.pcard { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px 20px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.pcard--primary { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface); }
.pcard h3 { font-size: 1.1rem; }
.pcard p { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.pcard--out { opacity: 0.55; border-style: dashed; }
.pcard .tag { align-self: flex-start; margin-top: auto; padding-top: 3px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.pmap__adds { display: grid; gap: 10px; align-items: stretch; }
@media (min-width: 600px) { .pmap__adds { grid-template-columns: repeat(3, 1fr); } }

/* persona / context cards */
.duo { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 28px); background: var(--surface); }
.panel > .label { display: block; margin-bottom: 10px; }
.panel h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.panel p { color: var(--ink-2); }
.panel ul { padding-left: 1.1em; display: grid; gap: 0.45em; color: var(--ink-2); }
.panel li::marker { color: var(--accent); }
.panel--accent { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* before → after systems */
.shift { display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 40px); align-items: stretch; }
@media (min-width: 860px) { .shift { grid-template-columns: 1fr auto 1fr; } }
.shift__arrow { display: grid; place-items: center; color: var(--accent); font-size: 1.5rem; }
@media (max-width: 859px) { .shift__arrow { transform: rotate(90deg); } }

/* parameters */
.params { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 760px) { .params { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .params { grid-template-columns: repeat(4, 1fr); } }
.param { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; display: grid; gap: 12px; align-content: start; }
.param--cond { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.param h3 { font-size: 1.1rem; }
.param dl { margin: 0; display: grid; gap: 10px; }
.param dt { font-size: 0.8rem; color: var(--muted); }
.param dd { margin: 0; font-size: 0.95rem; color: var(--ink-2); line-height: 1.4; }

/* wireframe rounds */
.round { display: grid; gap: 4px; margin-top: clamp(32px, 4.5vw, 52px); }
.round__text { display: grid; gap: 8px; max-width: 42em; }
.round__text h3 { font-size: var(--fs-h3); }
.round__text p { color: var(--muted); }
.round .figs-2 { margin-top: 20px; }
.round .shot { background: #fff; }

/* final flow */
.flow { list-style: none; display: grid; gap: 0; margin-top: clamp(28px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 860px) { .flow { grid-template-columns: repeat(5, 1fr); } }
.flow li { padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; align-content: start; }
.flow .d { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
@media (min-width: 860px) { .flow li { border-bottom: 0; border-right: 1px solid var(--line); } .flow li:last-child { border-right: 0; } }
.flow .n { font-size: 0.78rem; color: var(--accent); font-weight: 500; }
.flow strong { font-weight: 500; }

.screens { display: grid; gap: clamp(48px, 7vw, 88px); margin-top: clamp(40px, 6vw, 72px); }
.screen { display: grid; gap: 18px; }
/* Safari (iPad) can size a grid's automatic column to a screenshot's full pixel width (1600px), stretching everything
   below it past the screen. One-column grids that hold screenshots get a column that always shrinks to fit instead. */
.screens, .screen, .stack, .carousel__slide { grid-template-columns: minmax(0, 1fr); }
.screen__head { display: grid; gap: 8px; max-width: 44em; }
.screen__head h3 { font-size: var(--fs-h3); }
.screen__head p { color: var(--muted); }
.screen__head .label { color: var(--accent); }
.figs-2--top { align-items: start; margin-top: 0; }

/* team */
.team { list-style: none; display: grid; gap: 0; margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-strong); }
@media (min-width: 760px) { .team { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
.team li { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.team strong { font-weight: 500; }
.team span { color: var(--muted); font-size: var(--fs-small); }

/* next */
.also { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); }
.also > .label { font-size: var(--fs-label); }
.also__grid { display: grid; gap: 36px; margin-top: 24px; }
@media (min-width: 760px) { .also__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.also__item { display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--ink); }
.also__item:hover { color: var(--ink); }
.also__n { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.also__title { max-width: 15em; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; transition: color 0.3s var(--ease); }
.also__title .arrow { display: inline-block; transition: transform 0.25s var(--ease); }
/* the title takes its project's colour on hover (colours in work-art.css) */
.also__item:hover .also__title, .also__item:focus-visible .also__title { color: var(--proj, var(--accent)); }
.also__item:hover .arrow, .also__item:focus-visible .arrow { transform: translateX(6px); }

/* the preview that trails the pointer (peek.js); desktop with a mouse only */
.peek {
  position: fixed; left: 0; top: 0; z-index: 60; width: 280px; aspect-ratio: 16 / 11; pointer-events: none;
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.peek.is-on { opacity: 1; }
.peek__art {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--proj, var(--accent)) 40%, transparent); border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.5);
  transform: scale(0.92); transition: transform 0.35s var(--ease);
}
.peek.is-on .peek__art { transform: none; }
.peek__art--nt { background: radial-gradient(120% 90% at 20% 0%, rgba(35, 108, 255, 0.2), transparent 60%), var(--surface); }
.peek__art.mc-stage { aspect-ratio: auto; min-height: 0; padding: 0; }
.peek__art.mc-stage .mc-stage__float { width: 76px; }
.peek .art-table { width: 100%; font-size: 0.62rem; }
.peek .art-table th, .peek .art-table td { padding: 7px 6px; }
.peek .art-nt { width: 100%; gap: 10px; font-size: 0.7rem; }
:root[data-theme="light"] .peek__art { box-shadow: 0 24px 48px -24px rgba(20, 20, 30, 0.35); }
@media not all and (hover: hover) and (pointer: fine) and (min-width: 1080px) { .peek { display: none; } }

.banner { display: flex; gap: 12px; align-items: baseline; border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: var(--radius); padding: 14px 16px; margin-top: 28px; max-width: 46em; font-size: var(--fs-small); color: var(--ink-2); }
.banner .label { color: var(--accent); white-space: nowrap; }


/* overview snapshot */
.overview { padding-block: clamp(48px, 7vw, 88px); }
.overview__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 900px) { .overview__grid { grid-template-columns: repeat(3, 1fr); } }
.overview__grid > div { background: var(--surface); padding: clamp(22px, 2.8vw, 32px); display: grid; gap: 10px; align-content: start; }
.overview__grid h3 { font-size: var(--fs-h3); }
.overview__grid p { color: var(--ink-2); }
.overview__grid .is-solution { background: linear-gradient(180deg, var(--accent-soft), transparent 75%), var(--surface); }
.overview__grid .label { color: var(--accent); }

/* compact metrics strip */
.cs-section:has(+ .metrics) { padding-bottom: clamp(28px, 3vw, 40px); }
.metrics { padding-bottom: clamp(48px, 7vw, 88px); }
.metrics + .cs-section { border-top: 1px solid var(--line); }
.metrics > .label { display: block; margin-bottom: 14px; }
.stats--compact .big { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); }
.stats--compact li { padding: clamp(18px, 2vw, 24px); gap: 6px; }
@media (min-width: 1000px) { .cs-layout .stats--compact { grid-template-columns: repeat(4, 1fr); } }

/* stacked large figures */
.stack { display: grid; gap: clamp(32px, 4vw, 48px); margin-top: clamp(24px, 3vw, 36px); }
.stack .fig { margin: 0; width: 100%; max-width: 900px; }

/* carousel */
.carousel { margin-top: clamp(24px, 3vw, 36px); }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; border-radius: var(--radius);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel:not(.is-ready) .carousel__track { scrollbar-width: thin; padding-bottom: 8px; }
.carousel__slide { scroll-snap-align: start; margin: 0; display: grid; gap: 14px; align-content: start; }
.carousel__slide figcaption { display: flex; gap: 12px; align-items: baseline; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; max-width: 52em; }
.carousel__slide figcaption .label { flex: none; color: var(--ink-2); }
.carousel__slide figcaption strong { color: var(--ink); font-weight: 500; }
.carousel__nav { display: none; align-items: center; gap: 16px; margin-top: 16px; }
.carousel.is-ready .carousel__nav { display: flex; }
/* one slim pill per image: the current one is longer and in the project colour */
.carousel__pills { display: flex; align-items: center; gap: 6px; }
.carousel__pill { position: relative; flex: none; width: 18px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.35s var(--ease); }
.carousel__pill::before { content: ""; position: absolute; inset: 50% 0 auto; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--line-strong); transition: background-color 0.25s var(--ease); }
.carousel__pill:hover::before { background: var(--muted); }
.carousel__pill.is-on { width: 40px; }
.carousel__pill.is-on::before { background: var(--accent); }
.carousel__count { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* lightbox (enlarge any screen) — the image always fits the area between the close button and the hint */
img.is-zoomable { cursor: zoom-in; }
html.lb-open { overflow: hidden; }
.lb {
  --lb-top: 72px; --lb-bottom: 52px; --lb-side: clamp(12px, 4vw, 64px);
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 8, 10, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__frame {
  position: absolute; top: var(--lb-top); bottom: var(--lb-bottom); left: var(--lb-side); right: var(--lb-side);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lb__img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 8px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
  cursor: zoom-in; transition: transform 0.35s var(--ease);
}
.lb.is-zoomed .lb__img { cursor: zoom-out; border-radius: 0; }
.lb.is-zoomed .lb__frame { touch-action: none; }
.lb__close {
  position: fixed; top: 16px; right: clamp(12px, 3vw, 28px); z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: transparent; border: 1px solid transparent; color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 300; cursor: pointer;
}
.lb__close:hover { border-color: var(--line-strong); }
.lb__x { font-size: 1.5rem; line-height: 1; font-weight: 200; }
.lb__back { letter-spacing: 0.02em; }
.lb__hint { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 0.78rem; white-space: nowrap; }

.overview h2 { font-size: var(--fs-h2); max-width: 20em; }

/* reflection */
.lessons { list-style: none; display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); counter-reset: lesson; }
@media (min-width: 900px) { .lessons { grid-template-columns: repeat(3, 1fr); } }
.lessons li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 10px; align-content: start; counter-increment: lesson; }
.lessons li::before { content: "0" counter(lesson); color: var(--accent); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.09em; }
.lessons h3 { font-size: var(--fs-h3); }
.lessons p { color: var(--ink-2); font-size: 0.98rem; }

/* success measures band (inside overview) */
.measures-band { display: grid; gap: 1px; margin-top: 14px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .measures-band { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } }
.measures-band > * { background: var(--surface); padding: clamp(22px, 2.8vw, 32px); }
.measures-band__head { display: grid; gap: 10px; align-content: start; }
.measures-band__head .label { color: var(--accent); }
.measures-band__head p { color: var(--ink-2); }
.measures-band__list { list-style: none; display: grid; gap: 18px 28px; }
@media (min-width: 640px) { .measures-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .measures-band__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.measures-band__list li { display: grid; gap: 6px; align-content: start; border-left: 2px solid var(--accent); padding-left: 14px; }
.measures-band__list strong { font-weight: 500; }
.measures-band__list span { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }

/* title text effect (reveal.js): characters fade in one by one */
.js [data-text-fade]:not(.tf-ready) { opacity: 0; animation: tf-failsafe 0s linear 2.5s forwards; }
[data-text-fade] .tf-word { white-space: nowrap; }
[data-text-fade].tf-ready .tf-char { opacity: 0; }
[data-text-fade].tf-run .tf-char { animation: tf-fade 0.5s ease forwards; animation-delay: calc(var(--i) * 30ms); }
@keyframes tf-fade { to { opacity: 1; } }
@keyframes tf-failsafe { to { opacity: 1; } }

/* in-view reveal (reveal.js): images scale up from a soft blur, text rises gently */
[data-reveal] { transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.1, 1), filter 0.6s ease; }
[data-reveal="visual"]:not(.is-in) { opacity: 0; transform: scale(0.92); filter: blur(10px); }
[data-reveal="text"]:not(.is-in) { opacity: 0; transform: translateY(14px); filter: blur(6px); }

@media (prefers-reduced-motion: reduce) {
  .js [data-text-fade] { opacity: 1; animation: none; }
  [data-text-fade] .tf-char { opacity: 1 !important; animation: none !important; }
}

/* ============ shared case-study components (moved from mailchimp.css, 17 Oct 2026) ============ */
/* ---------- sub-section headings inside a section ---------- */
.cs-subhead { margin-top: clamp(48px, 6vw, 72px); }
.cs-section > h2 + .cs-subhead { margin-top: clamp(28px, 3.5vw, 40px); }
.cs-subhead h3 { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.2; }

/* ---------- spacing: one steady rhythm between sections (about 160px on desktop) ---------- */
.overview { padding-block: clamp(48px, 6vw, 80px); }
.wrap.section:has(> .cs-layout) { padding-block: clamp(48px, 6vw, 80px); }
.cs-section { padding-block: clamp(48px, 6vw, 80px); }
.metrics { padding-bottom: clamp(48px, 6vw, 80px); }
.screens { gap: clamp(44px, 6vw, 72px); margin-top: clamp(32px, 4.5vw, 56px); }

/* ---------- process strip: tool logos, arrows, a left-to-right reveal when it arrives (reveal.js) ---------- */
.process { list-style: none; display: grid; gap: 14px; margin-top: clamp(22px, 3vw, 32px); }
@media (min-width: 760px) { .process { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.process li { position: relative; z-index: calc(10 - var(--i, 0)); display: grid; gap: 4px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.process__icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); }
.process__icon img, .process__icon svg { display: block; width: 18px; height: 18px; object-fit: contain; }
.process__icon--moqups { overflow: hidden; border-color: transparent; }
.process__icon--moqups img { width: 100%; height: 100%; }
.process__icon--handoff svg { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.process__tool { color: var(--ink); font-weight: 500; }
.process li > span:last-child { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.process__note { margin-top: 12px; color: var(--muted); font-size: var(--fs-small); max-width: 44em; }
/* arrow in the gap between steps: down on phones, right on wider screens */
.process li:not(:last-child)::after { content: "↓"; position: absolute; left: 27px; bottom: -15px; width: 14px; height: 16px; display: grid; place-items: center; color: var(--accent); font-size: 0.85rem; line-height: 1; }
@media (min-width: 760px) { .process li:not(:last-child)::after { content: "→"; left: auto; right: -24px; bottom: auto; top: 24px; width: 24px; } }
@media (max-width: 759px) {
  /* phones: logo beside the text, so each step stays one compact row */
  .process li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; }
  .process__icon { grid-row: 1 / span 2; margin: 2px 0 0; }
}
/* the reveal: steps fade in from the left one after another, then each arrow appears */
.js .process[data-process]:not(.is-in) li { opacity: 0; }
.js .process[data-process]:not(.is-in) li::after { opacity: 0; }
.process.is-in li { animation: proc-in 0.6s var(--ease) both; animation-delay: calc(var(--i) * 180ms); }
.process.is-in li:not(:last-child)::after { animation: proc-arrow 0.4s var(--ease) both; animation-delay: calc(var(--i) * 180ms + 260ms); }
@keyframes proc-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes proc-arrow { from { opacity: 0; transform: translateX(-6px) scale(0.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .process[data-process]:not(.is-in) li, .js .process[data-process]:not(.is-in) li::after { opacity: 1; }
  .process.is-in li, .process.is-in li::after { animation: none; }
}

/* ---------- decision cards: chose / over / why ---------- */
.decision { display: grid; gap: 10px; margin-top: clamp(24px, 3vw, 32px); padding: clamp(18px, 2.4vw, 26px); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius); background: var(--surface); }
.decision h4 { margin: 0; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.decision dl { display: grid; gap: 8px; margin: 4px 0 0; }
.decision dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.decision dt { padding-top: 3px; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.decision dd { margin: 0; color: var(--ink-2); }

/* ---------- reflection: small labels above the team list and lessons ---------- */
.outcome__label { display: block; margin-top: clamp(28px, 3.5vw, 40px); }
.outcome__label + .team, .outcome__label + .lessons { margin-top: 12px; }

/* ---------- tabs (tabs.js): a pill switcher with panels ---------- */
.tabs { margin-top: clamp(18px, 2.4vw, 24px); }
.tabs__list { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.tabs__tab {
  appearance: none; border: 0; border-radius: 999px; padding: 7px 16px; background: transparent; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 0.92rem; transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] { background: rgba(var(--fg), 0.09); color: var(--ink); }
.tabs__panel { margin-top: 20px; }
.tabs__panel[hidden] { display: none; }
.tabs__panel .carousel { margin-top: 18px; }
.tabs__panel .round__text h4 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
.tabs__panel.is-entering { animation: tab-in 0.45s var(--ease); }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabs:not(.is-ready) .tabs__list { display: none; }
.tabs:not(.is-ready) .tabs__panel + .tabs__panel { margin-top: clamp(32px, 4.5vw, 48px); }
.tabs.is-ready .tabs__fallback { display: none; }

/* ---------- spacing hygiene: blocks that follow text get room to breathe ---------- */
.cs-section > .callout-q { margin-top: clamp(20px, 2.6vw, 28px); }
.screen__head + .figs-2--top { margin-top: clamp(18px, 2.4vw, 24px); }

/* ---------- themes: the lightbox is always a dark viewing room ---------- */
.lb { --ink: #f2f1ed; --muted: #a09fa6; --line-strong: rgba(255, 255, 255, 0.18); color-scheme: dark; }