/* Case study pages — builds on styles.css */

.case {
  --c-bg: #000;
  --c-fg: #fff;
  --c-muted: #8f8f8f;
  --c-accent: var(--accent);
  --c-accent-ink: var(--accent);
  --c-soft: #141414;
  --c-line: rgba(255, 255, 255, .12);
  background: var(--c-bg);
  color: var(--c-fg);
}
.case--light {
  --c-bg: #fff;
  --c-fg: #111;
  --c-muted: #6b6b6b;
  --c-accent: #cae210;
  --c-accent-ink: #5f6f00; /* readable lime for text on white */
  --c-soft: #f4f9d4;
  --c-line: rgba(0, 0, 0, .1);
}

/* ---------- Hero + title band ---------- */
.c-hero__marquee { margin: 0; overflow: hidden; padding: 24px 0 8px; border-bottom: 1px solid var(--c-line); }
.c-hero__marquee .marquee__track { gap: .35em; }
.c-hero__marquee span { font: 600 clamp(96px, 14.5vw, 208px)/1 var(--f-display); letter-spacing: -0.045em; color: var(--c-fg); white-space: nowrap; }
.c-hero__marquee span::after { content: "✦"; font-size: .3em; vertical-align: middle; margin-left: .35em; color: var(--c-accent); }

/* ---------- Intro ---------- */
.c-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); padding-top: 96px; padding-bottom: 120px; }
.c-facts { position: sticky; top: 110px; align-self: start; }
.c-summary { font: 500 clamp(22px, 2vw, 28px)/1.35 var(--f-body); letter-spacing: -0.01em; margin-bottom: 40px; }
.c-facts dl { margin: 0; }
.c-facts dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid var(--c-line); font: 500 15px/1.5 var(--f-display); }
.c-facts dt { color: var(--c-muted); }
.c-facts dd { margin: 0; }
.c-facts__award { display: inline-flex; align-items: center; gap: 14px; margin-top: 32px; font: 500 15px/1.4 var(--f-display); }
.c-facts__award img { width: 64px; }
.c-facts__award:hover span { color: var(--c-accent-ink); }
.c-covers { display: grid; gap: 24px; }
.c-covers img { width: 100%; border-radius: 20px; aspect-ratio: 1051 / 881; object-fit: cover; background: var(--c-soft); }

/* ---------- Role ---------- */
.c-role { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); padding-bottom: 120px; }
.c-role__lead { font: 500 clamp(22px, 2vw, 28px)/1.45 var(--f-body); letter-spacing: -0.01em; }
.c-role__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.c-role__list li { padding: 8px 18px; border-radius: 99px; background: var(--c-soft); font-size: 15px; }

/* ---------- Section scaffolding ---------- */
.c-sec { padding-top: 100px; padding-bottom: 100px; }
.c-chapter { display: flex; align-items: baseline; gap: 16px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.c-chapter__num { font: 600 14px/1 var(--f-display); color: var(--c-accent-ink); }
.c-kicker { font: 500 15px/1.4 var(--f-body); color: var(--c-muted); letter-spacing: .01em; }
.c-head { margin-top: 20px; font: 600 clamp(28px, 3.4vw, 48px)/1.12 var(--f-display); letter-spacing: -0.03em; max-width: 18em; }
.c-text { margin-top: 20px; font-size: 18px; line-height: 1.65; max-width: 40em; color: var(--c-muted); }
.c-text strong { color: var(--c-fg); font-weight: 500; }
.c-figure { margin-top: 56px; }
.c-figure img, .c-figure video { width: 100%; border-radius: 20px; background: var(--c-soft); }
.c-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; margin-top: 56px; }
.c-split img { width: 100%; border-radius: 20px; }

/* Pull quote (replaces boxed statements) */
.c-quote { position: relative; margin-top: 56px; padding-left: clamp(28px, 4vw, 56px); font: 500 clamp(24px, 2.8vw, 40px)/1.3 var(--f-body); letter-spacing: -0.02em; max-width: 24em; }
.c-quote::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px; background: var(--c-accent); transform-origin: top; }
.js .c-quote.reveal::before { transform: scaleY(0); transition: transform 1.2s var(--ease) .2s; }
.js .c-quote.reveal.is-in::before { transform: none; }
.c-quote small { display: block; margin-bottom: 12px; font: 500 14px/1 var(--f-body); color: var(--c-muted); letter-spacing: .02em; }

/* Inline stats (no boxes) */
.c-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; margin-top: 56px; }
.c-stat { padding-top: 20px; border-top: 1px solid var(--c-line); }
.c-stat__num { display: block; font: 600 clamp(56px, 6vw, 96px)/1 var(--f-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.c-stat__label { display: block; margin-top: 12px; color: var(--c-muted); font-size: 15px; line-height: 1.4; }
.c-stat__label b { color: var(--c-accent-ink); font-weight: 500; }

/* ---------- Donut + bar charts ---------- */
.donut { --p: 50; width: min(220px, 56vw); aspect-ratio: 1; display: grid; place-items: center; position: relative; margin-inline: auto; }
.donut svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 14; }
.donut__track { stroke: currentColor; opacity: .18; }
.donut__val { stroke: var(--donut, currentColor); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s var(--ease) .1s; }
.donut.is-in .donut__val { stroke-dasharray: var(--p) 100; }
.donut__num { font: 600 clamp(32px, 3.2vw, 44px)/1 var(--f-display); letter-spacing: -0.02em; }
.bars { display: flex; align-items: flex-end; gap: clamp(16px, 2.5vw, 40px); height: 240px; }
.bar { --h: 50; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; font: 600 15px/1.2 var(--f-display); text-align: center; }
.bar i { display: block; width: clamp(40px, 5vw, 72px); height: calc(var(--h) * 1%); border-radius: 10px 10px 4px 4px; background: currentColor; transform: scaleY(0); transform-origin: bottom; transition: transform 1.2s var(--ease); }
.bar.is-in i { transform: none; }
.bar small { font-weight: 400; opacity: .7; }

/* ---------- Sticky card stack ---------- */
.c-stack { display: grid; gap: 32px; margin-top: 56px; }
.c-stack > * { position: sticky; top: calc(96px + var(--n, 0) * 18px); }
.c-stack > * > * { position: relative; transform-origin: 50% 0; will-change: transform; }
.c-stack > * > *::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.mcard { border-radius: 28px; padding: clamp(24px, 3vw, 40px); min-height: min(520px, 68vh); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; overflow: hidden; }
.mcard__copy { max-width: 380px; padding-left: clamp(0px, 3vw, 48px); }
.mcard__tag { display: inline-block; font: 600 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 20px; }
.mcard h3 { font: 600 clamp(28px, 3vw, 44px)/1.1 var(--f-display); letter-spacing: -0.03em; }
.mcard p { margin-top: 16px; font-size: 18px; line-height: 1.5; opacity: .85; }
.mcard__visual { display: grid; justify-items: center; gap: 16px; text-align: center; font: 500 18px/1.35 var(--f-body); }
.mcard--orange { background: #de6536; color: #fff; }
.mcard--white { background: #f4f1ee; color: #c4521f; }
.mcard--white .donut { --donut: #111; }
.mcard--green { background: #16201a; color: #b3ffcb; }
.mcard--yellow { background: #f9d949; color: #3d3b3b; }
.mcard--grey { background: #232323; color: #ddd; }
.mcard__icons { grid-template-columns: repeat(3, 1fr); font-size: 15px; }
.mcard__icons img { width: 100%; max-width: 130px; margin: 0 auto 10px; }

/* ---------- Findings list with pointer glow ---------- */
.c-list { margin-top: 56px; border-top: 1px solid var(--c-line); }
.c-list li { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: baseline; padding: 28px 8px; border-bottom: 1px solid var(--c-line); overflow: hidden; isolation: isolate; transition: padding .6s var(--ease); }
.c-list li::before { content: ""; position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 420px; height: 420px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 38%, transparent), transparent 65%); opacity: 0; transition: opacity .5s; z-index: -1; pointer-events: none; }
.c-list li:hover::before { opacity: 1; }
.c-list li:hover { padding-left: 24px; }
.js .c-list.reveal-stagger > li { transition: opacity .9s var(--ease) calc(var(--i, 0) * .08s), transform .9s var(--ease) calc(var(--i, 0) * .08s), padding .6s var(--ease); }
.c-list__num { font: 600 15px/1 var(--f-display); color: var(--c-accent-ink); }
.c-list__text { font: 500 clamp(20px, 2.2vw, 30px)/1.3 var(--f-body); letter-spacing: -0.015em; }

/* ---------- Opportunity equation ---------- */
.c-equation { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 48px); margin-top: 64px; }
.c-equation > * { flex: none; transition: transform 1.4s var(--ease), opacity 1s var(--ease); }
.c-equation img { width: clamp(80px, 14vw, 200px); }
.c-equation .op { font: 300 clamp(40px, 6vw, 96px)/1 var(--f-display); color: var(--c-muted); }
.c-equation .result { font: 600 clamp(32px, 4.6vw, 72px)/1 var(--f-display); letter-spacing: -0.04em; color: var(--accent); }
.js .c-equation:not(.is-in) > :nth-child(1) { transform: translateX(-80px); opacity: 0; }
.js .c-equation:not(.is-in) > :nth-child(3) { transform: translateX(80px); opacity: 0; }
.js .c-equation:not(.is-in) > :nth-child(2),
.js .c-equation:not(.is-in) > :nth-child(4),
.js .c-equation:not(.is-in) > :nth-child(5) { opacity: 0; transform: scale(.6); }
.c-equation > :nth-child(4) { transition-delay: .5s; }
.c-equation > :nth-child(5) { transition-delay: .7s; }

/* ---------- Scenes (visual-novel style, scroll advances the beats) ---------- */
.vn { --beats: 4; position: relative; height: calc(var(--beats) * 85vh + 100vh); }
.vn__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000; color: #fff; }
.vn__bg { position: absolute; inset: 0; }
.vn__bg > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.1s var(--ease), transform 7s cubic-bezier(.2,.6,.3,1); }
.vn__bg > .is-active { opacity: 1; transform: scale(1.02); }
.vn__bg--blur > * { filter: blur(10px) brightness(.45); }
.vn__bg > .is-dim { filter: brightness(.35) blur(3px); }
.in-scene .chapter.is-visible { translate: -50% 160%; }
.vn__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%),
  linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 45%); pointer-events: none; }
.vn__chapter { position: absolute; left: var(--gutter); top: 110px; font: 500 14px/1 var(--f-body); color: rgba(255,255,255,.7); display: flex; gap: 12px; align-items: center; }
.vn__chapter b { color: var(--accent); font: 600 14px/1 var(--f-display); }
.vn__title { position: absolute; left: var(--gutter); top: 140px; width: min(640px, 62vw); font: 600 clamp(32px, 4.4vw, 64px)/1.05 var(--f-display); letter-spacing: -0.035em; }
.vn__title > * { display: block; position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease); }
.vn__title > .is-active { opacity: 1; transform: none; filter: none; transition-delay: .15s; }

.vn__big { position: absolute; right: clamp(40px, 10vw, 180px); top: 50%; translate: 0 -55%; font: 700 clamp(160px, 26vw, 380px)/1 var(--f-display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); }
.vn__big > * { position: absolute; right: 0; top: 0; opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
.vn__big > .is-active { opacity: 1; transform: none; }

.vn__big--word { font-size: clamp(72px, 10vw, 160px); right: var(--gutter); }
.case--light .c-hero__pin::after { background: linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,0) 62%); }
.case--light .c-hero__media { filter: blur(calc(var(--p, 0) * 6px)); }
.case--light .c-hero__intro, .case--light .c-hero__cue { color: #111; }
.case--light .c-hero__intro small { color: #5f6f00; }

/* the "character": a phone that swaps screens */
/* phone fills the viewport height; the screen sets the size so the screenshot fits exactly */
.vn__sprite { --pad: clamp(8px, 1.1vh, 12px); --screen-h: calc(100vh - 56px - 2 * var(--pad)); position: absolute; right: clamp(24px, 8vw, 150px); top: 28px; padding: var(--pad); border-radius: calc(var(--screen-h) * .068 + var(--pad)); background: #0d0d0d; box-shadow: 0 40px 80px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(255,255,255,.14);
  transform: translate3d(0, calc((1 - var(--rise, 1)) * 110vh), 0) rotate(calc((1 - var(--rise, 1)) * 6deg)); will-change: transform; }
.vn__sprite::after { content: ""; position: absolute; left: 50%; top: calc(var(--pad) + var(--screen-h) * .014); width: calc(var(--screen-h) * .148); height: calc(var(--screen-h) * .043); translate: -50% 0; border-radius: 99px; background: #0d0d0d; }
.vn__screen { position: relative; height: var(--screen-h); aspect-ratio: 393 / 852; border-radius: calc(var(--screen-h) * .068); overflow: hidden; background: #f2f2f2; }
.vn__screen img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(4%); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.vn__screen img.is-active { opacity: 1; transform: none; }

/* dialogue box */
.vn__box { opacity: clamp(0, calc(var(--rise, 1) * 1.6 - .2), 1); position: absolute; left: var(--gutter); bottom: clamp(24px, 6vh, 64px); width: min(720px, calc(100% - 2 * var(--gutter) - 26vw)); min-height: 150px; padding: 30px 32px 34px; border-radius: 24px; background: rgba(12,12,12,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(18px) saturate(1.2); }
.vn__name { position: absolute; left: 24px; top: 0; translate: 0 -50%; padding: 8px 16px; border-radius: 99px; background: var(--accent); color: #fff; font: 600 13px/1 var(--f-display); letter-spacing: .02em; white-space: nowrap; }
.vn__name > * { display: none; }
.vn__name > .is-active { display: inline; }
.vn__lines { display: grid; }
.vn__lines > * { grid-area: 1 / 1; font: 400 clamp(17px, 1.45vw, 21px)/1.6 var(--f-body); opacity: 0; transition: opacity .4s; }
.vn__lines > .is-active { opacity: 1; }
.vn__lines .is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -0.15em; background: currentColor; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.vn__next { position: absolute; right: 22px; bottom: 16px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid rgba(255,255,255,.7); animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 4px; } }
.vn__dots { position: absolute; right: 24px; top: 50%; translate: 0 -50%; display: grid; gap: 10px; }
.vn__dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6); background: transparent; transition: background .4s, transform .4s var(--ease); }
.vn__dots button.is-active { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }
.vn__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.1); }
.vn__progress::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.case--light .vn__name, .case--light .vn__dots button.is-active, .case--light .vn__progress::after { background: #cae210; color: #111; border-color: #cae210; }
.case--light .vn__chapter b { color: #cae210; }

/* Hero scene: scroll scrubs zoom + title */
.c-hero { position: relative; height: 170vh; background: #000; }
.c-hero__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.c-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--p, 0) * .18)); filter: brightness(calc(1 - var(--p, 0) * .55)); will-change: transform; }
.c-hero__pin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 65%); opacity: clamp(0, calc(var(--p, 0) * 2.5), 1); pointer-events: none; }
.c-hero__intro { z-index: 1; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12vh; color: #fff; opacity: clamp(0, calc(var(--p, 0) * 3 - .4), 1); transform: translateY(calc((1 - min(1, var(--p, 0) * 2)) * 40px)); }
.c-hero__intro p { max-width: 640px; font: 500 clamp(26px, 3vw, 44px)/1.2 var(--f-display); letter-spacing: -0.03em; }
.c-hero__intro small { display: block; margin-bottom: 18px; font: 500 14px/1 var(--f-body); color: rgba(255,255,255,.7); letter-spacing: .04em; }
.c-hero__cue { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; font: 500 13px/1 var(--f-body); color: rgba(255,255,255,.8); letter-spacing: .1em; opacity: calc(1 - var(--p, 0) * 4); }
.c-hero__cue::after { content: ""; display: block; width: 1px; height: 36px; margin: 10px auto 0; background: currentColor; animation: cue 1.6s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Cinematic wipe-in for images */
.js .wipe { clip-path: inset(18% 8% 18% 8% round 28px); transition: clip-path 1.4s var(--ease); }
.js .wipe img, .js img.wipe { transition: transform 1.6s var(--ease), clip-path 1.4s var(--ease); }
.js .wipe.is-in { clip-path: inset(0 0 0 0 round 20px); }

/* ---------- Zoom-out reveal (screens board) ---------- */
.zoom-reveal { position: relative; height: 220vh; margin-top: 40px; }
.zoom-reveal__sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.zoom-reveal__frame { width: min(1240px, calc(100% - 2 * var(--gutter))); aspect-ratio: 1240 / 574; border-radius: 28px; overflow: hidden; }
.zoom-reveal img { width: 100%; height: 100%; object-fit: cover; transform-origin: 78% 50%; will-change: transform; }
.zoom-reveal__caption { position: absolute; left: 50%; bottom: 8vh; translate: -50% 0; font: 500 14px/1 var(--f-body); color: var(--c-muted); opacity: calc(1 - var(--p, 0) * 2); }

/* ---------- Media switcher (tabs over an image stage) ---------- */
.switcher { margin-top: 48px; }
.switcher__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; position: relative; }
.switcher__tabs button { padding: 10px 20px; border-radius: 99px; border: 1px solid var(--c-line); background: transparent; color: var(--c-muted); font: 500 15px/1.2 var(--f-body); transition: background .4s var(--ease), color .4s, border-color .4s; }
.switcher__tabs button:hover { color: var(--c-fg); border-color: var(--c-fg); }
.switcher__tabs button[aria-selected="true"] { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); }
.switcher__stage { display: grid; }
.switcher__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .6s var(--ease), transform .8s var(--ease), visibility 0s .6s; }
.switcher__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease), transform .8s var(--ease), visibility 0s; }
.switcher__panel img { width: 100%; border-radius: 20px; background: var(--c-soft); }
.switcher__panel p { margin-top: 16px; color: var(--c-muted); font-size: 16px; }

/* Process stepper (Brilliant iteration) */
.stepper .switcher__tabs { gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--c-line); margin-bottom: 32px; }
.stepper .switcher__tabs::-webkit-scrollbar { display: none; }
.stepper .switcher__tabs button { flex: 1 0 auto; border: 0; border-radius: 0; padding: 16px 20px 18px; text-align: left; position: relative; background: transparent; }
.stepper .switcher__tabs button span { display: block; font: 600 12px/1 var(--f-display); color: var(--c-accent-ink); margin-bottom: 8px; }
.stepper .switcher__tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.stepper .switcher__tabs button[aria-selected="true"] { background: transparent; color: var(--c-fg); }
.stepper .switcher__tabs button[aria-selected="true"]::after { transform: none; }

/* ---------- Data bars (Brilliant tags) ---------- */
.c-bars { margin-top: 8px; }
.c-bars li { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 16px; padding: 10px 0; font-size: 16px; }
.c-bars li span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.c-bars i { display: block; height: 10px; border-radius: 10px; background: var(--c-accent); width: calc(var(--w) * 1%); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) calc(var(--i, 0) * .07s); }
.c-bars.is-in i { transform: none; }
.c-rank { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.c-rank li { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px; background: var(--c-soft); font-size: 15px; }
.c-rank b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-fg); color: var(--c-bg); font: 600 12px/1 var(--f-display); }

/* ---------- Gallery ---------- */
.gallery { padding: 80px 0 120px; overflow: hidden; }
.gallery__track { display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--gutter) 24px; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery__track img { flex: none; height: min(600px, 62vh); width: auto; max-width: 88vw; object-fit: contain; border-radius: 20px; scroll-snap-align: center; user-select: none; background: var(--c-soft); transition: transform .8s var(--ease); }
.gallery__track.is-dragging img { transform: scale(.97); }
.gallery__hint { text-align: center; font: 500 14px/1 var(--f-body); letter-spacing: .08em; color: var(--c-muted); }
.gallery__hint.has-zoom { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.gallery__hint .gallery__zoom { letter-spacing: 0; }

/* ---------- Next project ---------- */
.c-next { display: block; border-top: 1px solid var(--c-line); padding: 80px 0 100px; text-align: center; }
.c-next .eyebrow { margin-bottom: 20px; }
.c-next__title { font: 600 clamp(56px, 9vw, 140px)/1 var(--f-display); letter-spacing: -0.045em; transition: color .5s var(--ease), letter-spacing .8s var(--ease); }
.c-next:hover .c-next__title { color: var(--next, var(--c-accent-ink)); letter-spacing: -0.02em; }
.c-next .pill__arrow { transition: transform .3s var(--ease), background-color .4s var(--ease); }
.case .c-next:hover .pill__arrow { background-color: var(--next-bg, var(--c-accent)); }
.c-next .pill { margin-top: 32px; }
.case--light .c-next .pill--ghost { background: transparent; color: var(--c-fg); border-color: var(--c-line); }
.case--light .c-next .pill__arrow { background-color: #111; }

/* ---------- Chapter indicator ---------- */
.chapter { position: fixed; left: 50%; bottom: 20px; z-index: 40; translate: -50% 160%; transition: translate .7s var(--ease); }
.chapter.is-visible { translate: -50% 0; }
.chapter__toggle { display: flex; align-items: center; gap: 14px; padding: 12px 18px 14px; min-width: 300px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(18,18,18,.88); color: #fff; backdrop-filter: blur(14px); position: relative; overflow: hidden; }
.chapter__num { font: 600 12px/1 var(--f-display); color: var(--chapter-accent, var(--accent)); font-variant-numeric: tabular-nums; }
.chapter__label { flex: 1; text-align: left; font: 500 14px/1.2 var(--f-body); }
.chapter__toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg); transition: transform .4s var(--ease); }
.chapter.is-open .chapter__toggle::after { transform: rotate(45deg); }
.chapter__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.1); }
.chapter__bar span { display: block; height: 100%; background: var(--chapter-accent, var(--accent)); transform-origin: left; transform: scaleX(0); }
.case--light .chapter { --chapter-accent: #cae210; }
.chapter__list { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); padding: 8px; border-radius: 18px; background: rgba(18,18,18,.94); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.chapter.is-open .chapter__list { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
.chapter__list a { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; color: rgba(255,255,255,.7); font-size: 14px; }
.chapter__list a span { font: 600 12px/1.6 var(--f-display); color: rgba(255,255,255,.4); }
.chapter__list a:hover, .chapter__list a.is-current { background: rgba(255,255,255,.08); color: #fff; }

/* Light theme header */
.case--light .topbar__inner { background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.08); color: #111; }
.case--light .topbar__loc { color: rgba(0,0,0,.55); }

@media (max-width: 1024px) {
  .c-intro, .c-role, .c-split { grid-template-columns: 1fr; }
  .c-facts { position: static; }
  .mcard { grid-template-columns: 1fr; min-height: 0; }
  .mcard__copy { padding-left: 0; }
  .vn__sprite { --screen-h: calc(100svh - 120px - 2 * var(--pad)); right: auto; left: 50%; top: 60px; translate: -50% 0; }
  .vn:has(.vn__sprite) .vn__title, .vn:has(.vn__sprite) .vn__chapter { display: none; }
  .vn__box { width: auto; right: var(--gutter); }
  .vn__title { width: 55vw; }
  .vn__dots { right: auto; left: var(--gutter); top: auto; bottom: calc(clamp(24px, 6vh, 64px) + 190px); translate: 0 0; display: flex; }
  .zoom-reveal { height: 160vh; }
}
@media (max-width: 640px) {
  .c-hero { height: 140vh; }
  .vn__box { padding: 26px 20px 28px; min-height: 0; background: rgba(12,12,12,.9); }
  /* on phones: the whole phone, as tall as the space above a compact dialogue box allows */
  .vn__sprite { --pad: 7px; --screen-h: calc(100svh - 64px - 178px - 2 * var(--pad)); left: 0; right: 0; top: 60px; width: fit-content; margin-inline: auto; translate: none; }
  .vn__sprite + .vn__box { bottom: 16px; padding: 22px 18px 22px; }
  .vn__sprite + .vn__box .vn__lines > * { font-size: 15px; line-height: 1.5; }
  .vn:has(.vn__sprite) .vn__dots { display: none; }
  .vn__chapter { top: 84px; }
  .vn__title { font-size: 28px; top: 112px; width: 52vw; }
  .c-intro { padding-top: 64px; padding-bottom: 80px; }
  .c-role { padding-bottom: 80px; }
  .c-sec { padding-top: 64px; padding-bottom: 64px; }
  .c-list li { grid-template-columns: 44px 1fr; gap: 12px; padding: 22px 4px; }
  .mcard__icons { font-size: 13px; }
  .c-stack > * { top: calc(80px + var(--n, 0) * 10px); }
  .gallery__track img { height: auto; width: 86vw; max-width: none; }
  .c-bars li { grid-template-columns: 90px 1fr 32px; }
  .chapter { bottom: 12px; }
  .chapter__toggle { min-width: 0; width: calc(100vw - 32px); }
  .zoom-reveal__frame { aspect-ratio: 4 / 3; }
}

/* Title-card video heroes (Brilliant, SwiftHome): show the whole frame below the header, no zoom */
.c-hero--title .c-hero__pin { background: var(--hero-bg, #fff); }
.c-hero--title .c-hero__media { top: 76px; height: calc(100% - 76px); object-fit: contain; object-position: 50% 40%; transform: none; filter: none; }
.c-hero--title .c-hero__pin::after { background: linear-gradient(0deg, var(--hero-bg, #fff) 0%, color-mix(in srgb, var(--hero-bg, #fff) 60%, transparent) 30%, transparent 55%); }
.c-hero--title .c-hero__intro, .c-hero--title .c-hero__cue { color: #111; }
@media (max-width: 640px) { .c-hero--title { height: 120vh; } }

/* Warm theme (SwiftHome) */
.case--warm {
  --c-bg: #fff6ef;
  --c-fg: #2b1a10;
  --c-muted: #8a6a55;
  --c-accent: #885835;
  --c-accent-ink: #885835;
  --c-soft: #f5e6d8;
  --c-line: rgba(80, 40, 15, .12);
  --accent: #885835;
}
.case--warm .topbar__inner { background: rgba(255,246,239,.8); border-color: rgba(80,40,15,.1); color: #2b1a10; }
.case--warm .topbar__loc { color: rgba(43,26,16,.55); }
.case--warm .c-next .pill--ghost { background: transparent; color: var(--c-fg); border-color: var(--c-line); }
.case--warm .c-next .pill__arrow { background-color: #2b1a10; }
.case--warm .chapter { --chapter-accent: #d9a57a; }

/* SCAMPER letters */
.scamper .switcher__tabs { gap: 10px; }
.scamper .switcher__tabs button { width: clamp(52px, 8vw, 96px); aspect-ratio: 1; padding: 0; border-radius: 24px; font: 600 clamp(26px, 3.4vw, 44px)/1 var(--f-display); color: var(--c-accent-ink); border-color: var(--c-line); }
.scamper .switcher__tabs button[aria-selected="true"] { background: var(--c-accent); color: #fff6ef; border-color: var(--c-accent); transform: translateY(-4px); }
.scamper .switcher__panel { padding: 28px 0 0; }
.scamper .switcher__panel h3 { font: 600 clamp(24px, 2.4vw, 34px)/1.2 var(--f-display); letter-spacing: -0.02em; }
.scamper .switcher__panel ul { margin-top: 16px; display: grid; gap: 10px; max-width: 46em; }
.scamper .switcher__panel li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.55; color: var(--c-muted); }
.scamper .switcher__panel li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }

/* Screen strip gallery (phone screens) */
.gallery__track.is-phones img { height: auto; width: min(300px, 62vw); max-width: none; aspect-ratio: 402 / 874; object-fit: cover; border-radius: 28px; box-shadow: 0 20px 40px rgba(80,40,15,.14); }
.c-hero--title .c-hero__intro, .c-hero--title .c-hero__pin::after { display: none; }

/* Cinematic opener: a video card that grows to full bleed as you scroll */
.cine { position: relative; height: 230vh; }
.cine__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.cine__frame { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--p, 0) * 1.6) * 16%) calc((1 - var(--p, 0) * 1.6) * 22%) round calc((1 - var(--p, 0) * 1.6) * 32px)); }
.cine__frame video { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.15 - var(--p, 0) * .15)); }
.cine__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%); opacity: clamp(0, calc(var(--p, 0) * 2.5 - .9), 1); }
.cine__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12vh; color: #fff; opacity: clamp(0, calc(var(--p, 0) * 3 - 1.4), 1); transform: translateY(calc((1 - min(1, var(--p, 0) * 1.7)) * 40px)); }
.cine__text small { display: block; margin-bottom: 16px; font: 600 14px/1 var(--f-display); letter-spacing: .08em; color: var(--accent); }
.cine__text p { max-width: 15em; font: 600 clamp(36px, 5vw, 72px)/1.05 var(--f-display); letter-spacing: -0.035em; }
.cine__text p span { color: rgba(255,255,255,.55); }
@media (max-width: 640px) { .cine { height: 190vh; } .cine__frame { clip-path: inset(calc((1 - var(--p, 0) * 1.6) * 20%) calc((1 - var(--p, 0) * 1.6) * 8%) round calc((1 - var(--p, 0) * 1.6) * 24px)); } }
.case--light .gallery__track img { box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.07); }
/* Fill variant: the video covers the whole hero (its content is framed to survive cropping) */
.c-hero--fill .c-hero__media { top: 0; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 640px) {
  /* portrait phones: show the whole 16:9 video under the header instead of a narrow crop */
  .c-hero--fill { height: calc(56.25vw + 84px); }
  .c-hero--fill .c-hero__pin { position: relative; height: 100%; }
  .c-hero--fill .c-hero__media { top: 76px; height: 56.25vw; object-fit: cover; }
  .c-hero--fill .c-hero__cue { display: none; }
}

/* Research sheets exported from Miro: show each at its own ratio, never upscaled past its pixels */
.switcher--sheets .switcher__panel > img { width: auto; max-width: min(100%, 1022px); max-height: 82vh; margin: 0 auto; object-fit: contain; background: #fff; }
.switcher--sheets .switcher__panel > p { text-align: center; }
.c-figure--sheet img { width: auto; max-width: min(100%, 1022px); display: block; margin: 0 auto; background: #000; }

/* ---------- Deck: a stack of sheets, click to deal the next one ---------- */
.deck { --gap: 16px; display: grid; justify-items: center; overflow-x: clip; overflow-y: visible; padding-top: calc(var(--gap) * 2); margin-top: calc(var(--gap) * -2); }
.deck__stage { position: relative; display: block; width: min(100%, 1200px); aspect-ratio: 1022 / 694; padding: 0; border: 0; background: none; cursor: pointer; transition: width .7s var(--ease), height .7s var(--ease); -webkit-tap-highlight-color: transparent; }
.deck__stage:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 10px; border-radius: 20px; }
.deck__stage img {
  --k: 0;
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  background: #fff; border-radius: 18px; box-shadow: 0 1px 0 rgba(60, 35, 20, .06), 0 18px 40px -18px rgba(60, 35, 20, .35);
  z-index: calc(20 - var(--k));
  --kk: min(var(--k), 3);
  transform: translate3d(calc(var(--kk) * var(--gap)), calc(var(--kk) * var(--gap) * -.8), 0) rotate(calc(var(--kk) * 1.6deg)) scale(calc(1 - var(--kk) * .035));
  transform-origin: 50% 100%;
  opacity: calc(1 - max(0, var(--k) - 2));
  transition: transform .75s var(--ease), opacity .5s var(--ease), filter .5s;
  filter: brightness(calc(1 - var(--k) * .04));
}
/* the hidden sheets peek out a little more on hover, inviting the click */
.deck__stage:hover img { --gap: 22px; }
.deck__stage img.is-out { transform: translate3d(-34%, 6%, 0) rotate(-9deg) scale(.92); opacity: 0; transition-duration: .5s, .4s, .5s; }
.deck__stage img.no-anim { transition: none; }
.deck__bar { display: flex; align-items: center; gap: 16px; margin-top: 22px; font-size: 14px; color: var(--c-muted); }
.deck__count { font: 500 14px/1 var(--f-display); letter-spacing: .04em; }
.deck__count b { color: var(--c-fg); font-weight: 600; }
.deck__label { min-width: 11em; }
.deck__dots { display: flex; gap: 6px; }
.deck__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: var(--c-line); transition: width .5s var(--ease), background .4s; }
.deck__dots button[aria-current="true"] { width: 22px; background: var(--c-accent); }
@media (max-width: 700px) {
  .deck { --gap: 8px; }
  .deck__label { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .deck__stage, .deck__stage img { transition: none; }
}
/* only the open tab sets the height, so short sheets don't leave a gap below */
.switcher--sheets .switcher__stage { position: relative; align-items: start; }
.switcher--sheets .switcher__panel:not(.is-active) { position: absolute; inset: 0 0 auto; }

/* ---------- Lightbox ---------- */
img.is-zoomable { cursor: zoom-in; }

.lb-open, .lb-open body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(14, 10, 8, .94); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.lb__stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.lb__img { max-width: 92vw; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: 10px; background: #fff; cursor: zoom-in; user-select: none; -webkit-user-drag: none; transform-origin: 50% 50%; transition: transform .45s var(--ease); scale: .96; }
.lb.is-open .lb__img { scale: 1; transition: transform .45s var(--ease), scale .45s var(--ease); }
.lb.is-zoomed .lb__img { cursor: grab; }
.lb.is-zoomed .lb__img:active { cursor: grabbing; }
.lb__btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 400 20px/1 var(--f-body); transition: background .3s; }
.lb__btn:hover { background: rgba(255, 255, 255, .24); }
.lb__close { top: 20px; right: 20px; }
.lb__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lb__next { right: 20px; top: 50%; translate: 0 -50%; }
.lb.is-single .lb__prev, .lb.is-single .lb__next { display: none; }
.lb.is-zoomed .lb__prev, .lb.is-zoomed .lb__next, .lb.is-zoomed .lb__bar { opacity: 0; pointer-events: none; }
.lb__bar { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; align-items: center; gap: 16px; color: rgba(255, 255, 255, .72); font-size: 14px; pointer-events: none; transition: opacity .3s; }
.lb__count { font: 500 14px/1 var(--f-display); color: #fff; letter-spacing: .04em; }
.lb__hint { color: rgba(255, 255, 255, .45); }
.deck__zoom { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--c-line); border-radius: 99px; background: transparent; color: var(--c-muted); font: 500 13px/1 var(--f-body); transition: color .3s, border-color .3s; }
.deck__zoom svg { width: 14px; height: 14px; }
.deck__zoom:hover { color: var(--c-fg); border-color: var(--c-fg); }
@media (max-width: 700px) {
  .lb__prev, .lb__next { top: auto; bottom: 12px; translate: none; width: 42px; height: 42px; }
  .lb__hint { display: none; }
  .lb__bar { bottom: 24px; }
  .deck__zoom span { display: none; }
}

/* The footer stays dark on every theme, so its text stays white like the homepage */
.case .footer { color: #fff; --c-fg: #fff; }

/* ---------- Olive theme (Safe Dining) — colours from the white paper ---------- */
.case--olive {
  --c-bg: #faf7f0;
  --c-fg: #262c22;
  --c-muted: #69705f;
  --c-accent: #f2b84b;
  --c-accent-ink: #9a6a10;
  --c-soft: #efeadc;
  --c-line: rgba(38, 44, 34, .13);
  --accent: #f2b84b;
  --olive: #424d3d;
}
.case--olive .topbar__inner { background: rgba(250,247,240,.82); border-color: rgba(38,44,34,.1); color: #262c22; }
.case--olive .topbar__loc { color: rgba(38,44,34,.55); }
.case--olive .c-next .pill--ghost { background: transparent; color: var(--c-fg); border-color: var(--c-line); }
.case--olive .c-next .pill__arrow { background-color: #262c22; }
.case--olive .chapter { --chapter-accent: #f2b84b; }
.case--olive .vn__name, .case--olive .vn__dots button.is-active, .case--olive .vn__progress::after { color: #262c22; }
.case--olive .scamper .switcher__tabs button[aria-selected="true"] { color: #262c22; }

/* Olive band: a full-width dark section, like the white paper's olive spreads */
.c-band { background: var(--olive, #424d3d); color: #faf7f0; --c-fg: #faf7f0; --c-muted: rgba(250,247,240,.7); --c-line: rgba(250,247,240,.16); --c-accent-ink: #f2b84b; --c-soft: rgba(250,247,240,.08); }
.c-band .switcher__tabs button[aria-selected="true"] { color: #262c22; }

/* Big 9 allergens */
.allergens { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; margin-top: 48px; }
@media (max-width: 1100px) { .allergens { grid-template-columns: repeat(3, 1fr); } }
.allergen { position: relative; padding: 18px 18px 16px; border-radius: 18px; background: var(--c-soft); overflow: hidden; isolation: isolate; }
.allergen::before { content: ""; position: absolute; inset: auto 0 0 0; height: calc(var(--w) * 3.2%); max-height: 100%; background: var(--c-accent); opacity: .5; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform 1.2s var(--ease) calc(var(--i, 0) * .06s); }
.allergen.is-in::before, .is-in .allergen::before { transform: none; }
.allergen b { display: block; font: 600 clamp(26px, 2.6vw, 38px)/1 var(--f-display); letter-spacing: -0.03em; }
.allergen span { display: block; margin-top: 8px; font-size: 15px; color: var(--c-muted); }
.allergen small { position: absolute; right: 16px; top: 16px; font: 600 12px/1 var(--f-display); color: var(--c-accent-ink); }

/* Persona card */
.persona { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; margin-top: 56px; }
.persona__main { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--c-soft); }
.persona__main img { width: 100%; aspect-ratio: 588 / 248; object-fit: cover; border-radius: 18px; margin: 20px 0; }
.persona__name { font: 600 clamp(32px, 3.6vw, 52px)/1 var(--f-display); letter-spacing: -0.03em; color: #c96f3b; }
.persona__sub { margin-top: 10px; font-weight: 500; }
.persona__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.persona__facts li { padding: 7px 14px; border-radius: 99px; background: var(--c-bg); font-size: 14px; }
.persona__quote { margin-top: 20px; font: italic 400 clamp(18px, 1.6vw, 22px)/1.45 var(--f-body); color: var(--c-muted); }
.persona__side { display: grid; gap: 20px; }
.persona__card { padding: clamp(22px, 2.6vw, 34px); border-radius: 24px; border: 1px solid var(--c-line); }
.persona__card h3 { font: 600 22px/1.2 var(--f-display); margin-bottom: 14px; }
.persona__card li { position: relative; padding: 6px 0 6px 22px; color: var(--c-muted); }
.persona__card li::before { content: ""; position: absolute; left: 2px; top: 1em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.persona__story { grid-column: 1 / -1; padding: clamp(22px, 2.6vw, 34px); border-radius: 24px; background: var(--olive, #424d3d); color: #faf7f0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
@media (max-width: 860px) { .persona { grid-template-columns: 1fr; } }

/* Two printed posters side by side */
.posters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.posters figure img { width: 100%; border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); }
.posters figcaption { margin-top: 14px; font-size: 15px; color: var(--c-muted); }
@media (max-width: 760px) { .posters { grid-template-columns: 1fr; } }

/* ---------- Flipbook: the white paper as a real book ---------- */
.flip { margin-top: 56px; --pw: min(46vw, 620px); --ph: calc(var(--pw) * 1566 / 2026); }
.flip__book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); margin: 0 auto; perspective: 2600px; transition: transform .9s var(--ease); }
/* a closed book shows only its cover (right half) or back cover (left half), centred */
.flip.is-start .flip__book { transform: translateX(calc(var(--pw) * -.5)); }
.flip.is-end .flip__book { transform: translateX(calc(var(--pw) * .5)); }
.flip__leaf { position: absolute; left: 50%; top: 0; width: var(--pw); height: var(--ph); transform-origin: left center; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.645,.045,.355,1); cursor: pointer; }
.flip__leaf.is-flipped { transform: rotateY(-180deg); }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #f4efe3; }
.flip__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip__face--back { transform: rotateY(180deg); }
/* paper shading: a soft gutter shadow on each side of the spine */
.flip__face--front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 7%); pointer-events: none; }
.flip__face--back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,0) 7%); pointer-events: none; }
.flip__book::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -34px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0)); pointer-events: none; }
.flip__bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 48px; flex-wrap: wrap; }
.flip__btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-line); background: transparent; color: inherit; font-size: 18px; transition: background .3s, color .3s, opacity .3s; }
.flip__btn:hover:not(:disabled) { background: var(--c-fg); color: var(--c-bg); }
.flip__btn:disabled { opacity: .3; cursor: default; }
.flip__count { min-width: 9em; text-align: center; font: 500 14px/1 var(--f-display); letter-spacing: .04em; }
.flip__range { width: min(360px, 60vw); accent-color: #f2b84b; }
.flip__hint { margin-top: 14px; text-align: center; font-size: 13px; color: var(--c-muted); }
@media (max-width: 700px) { .flip { --pw: 46vw; } }
@media (prefers-reduced-motion: reduce) { .flip__leaf, .flip__book { transition: none; } }
.flip.is-start .flip__book::after { left: 53%; }
.flip.is-end .flip__book::after { right: 53%; }
.flip__book::after { transition: left .9s var(--ease), right .9s var(--ease); }
/* Tall and square maps: keep them readable without filling the whole screen */
.c-figure--tall { max-width: 980px; margin-left: auto; margin-right: auto; }
.c-figure--map { margin-top: 56px; }
.c-figure--map img { background: #fff; padding: clamp(8px, 2vw, 28px); }
.c-figure--map figcaption { margin-top: 14px; font-size: 15px; color: var(--c-muted); }

/* Sound toggle on a hero film */
.c-hero__sound { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(20px, 4vh, 40px); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border: 0; border-radius: 99px; background: rgba(20, 24, 18, .55); color: #faf7f0; font: 500 14px/1 var(--f-body); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: calc(1 - var(--p, 0) * 3); transition: background .3s; }
.c-hero__sound:hover { background: rgba(20, 24, 18, .8); }
.c-hero__sound-icon { position: relative; width: 18px; height: 14px; }
.c-hero__sound-icon::before { content: ""; position: absolute; left: 0; top: 3px; width: 6px; height: 8px; background: currentColor; clip-path: polygon(0 25%, 45% 25%, 100% -40%, 100% 140%, 45% 75%, 0 75%); }
.c-hero__sound-icon::after { content: ""; position: absolute; right: 0; top: 1px; width: 7px; height: 12px; border: 2px solid currentColor; border-left: 0; border-radius: 0 12px 12px 0; opacity: .35; }
.c-hero__sound.is-on .c-hero__sound-icon::after { opacity: 1; }
.c-hero__sound.is-on { background: #f2b84b; color: #262c22; }

/* ---------- Safe Dining: web-native research & ecosystem ---------- */
.c-covers--natural img { aspect-ratio: auto; height: auto; object-fit: contain; background: transparent; }
.research .switcher__panel { padding-top: 8px; }
.rs-lead { max-width: 44em; font: 500 clamp(19px, 1.6vw, 23px)/1.5 var(--f-body); letter-spacing: -0.01em; }
.rs-lead b, .rs-close b { color: var(--c-accent-ink); font-weight: 600; }
.rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.rs-grid li { padding: 26px 24px; border-radius: 20px; background: var(--c-soft); transition: transform .5s var(--ease), background .4s; }
.rs-grid li:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--c-accent) 22%, var(--c-soft)); }
.rs-grid b { font: 600 15px/1 var(--f-display); color: var(--c-accent-ink); }
.rs-grid h3 { margin: 14px 0 10px; font: 600 21px/1.25 var(--f-display); letter-spacing: -0.015em; }
.rs-grid p { color: var(--c-muted); font-size: 15.5px; line-height: 1.55; }
.rs-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.rs-split > img { width: 100%; border-radius: 20px; }
.rs-points { margin-top: 24px; display: grid; gap: 12px; }
.rs-points li { position: relative; padding-left: 24px; color: var(--c-muted); font-size: 17px; line-height: 1.55; }
.rs-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); }
.rs-close { margin-top: 24px; font-size: 17px; line-height: 1.6; color: var(--c-muted); }
.rs-quotes { display: grid; gap: 14px; }
.rs-quotes blockquote { position: relative; padding: 26px 26px 26px 54px; border-radius: 20px; background: #424d3d; color: #faf7f0; font: italic 400 19px/1.5 var(--f-body); }
.rs-quotes blockquote::before { content: "“"; position: absolute; left: 20px; top: 8px; font: 600 54px/1 var(--f-display); color: #f2b84b; }
.rs-quotes cite { font-style: normal; font-size: 14px; color: var(--c-muted); }
.rs-bubbles { display: grid; gap: 10px; margin-top: 24px; }
.rs-bubbles li { position: relative; justify-self: start; max-width: 32em; padding: 14px 20px; border: 1.5px solid #f2b84b; border-radius: 18px 18px 18px 4px; font-weight: 500; }
.rs-bubbles li:nth-child(even) { margin-left: 28px; }
.rs-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.rs-photos__wide { grid-column: 1 / -1; }
.rs-workshops { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rs-workshops article { padding: 16px 16px 26px; border-radius: 24px; background: var(--c-soft); }
.rs-workshops img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 58%; border-radius: 16px; margin-bottom: 20px; }
.rs-workshops small, .breaks small { display: block; font: 600 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-ink); }
.rs-workshops h3 { margin: 10px 0 10px; font: 600 24px/1.2 var(--f-display); letter-spacing: -0.02em; }
.rs-workshops p { color: var(--c-muted); line-height: 1.6; }
@media (max-width: 860px) { .rs-grid, .rs-split, .rs-workshops { grid-template-columns: 1fr; } }

/* Micro / meso / macro layers */
.layers { margin-top: 28px; display: grid; gap: 14px; }
.layers li { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; padding: 22px 0; border-top: 1px solid var(--c-line); }
.layers__ring { display: grid; place-items: center; height: 70px; border-radius: 50%; border: 1.5px solid currentColor; background: var(--c); color: #262c22; }
.layers li:nth-child(1) .layers__ring { width: 120px; margin: 0 auto; }
.layers li:nth-child(2) .layers__ring { width: 160px; margin: 0 auto; }
.layers li:nth-child(3) .layers__ring { width: 200px; }
.layers__ring b { font: 600 18px/1 var(--f-display); }
.layers h4, .breaks h4 { font: 600 clamp(20px, 1.9vw, 26px)/1.25 var(--f-display); letter-spacing: -0.02em; }
.layers p { margin-top: 6px; color: var(--c-muted); line-height: 1.55; max-width: 44em; }
.layers .layers__who { font-size: 14px; color: var(--c-accent-ink); }
.c-pull { margin: 96px auto 0; max-width: 20em; text-align: center; font: 300 clamp(30px, 3.6vw, 52px)/1.2 var(--f-body); letter-spacing: -0.02em; }
.c-pull em { font-style: normal; color: #f2b84b; }
.breaks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 72px; }
.breaks > div { padding: 26px; border-radius: 20px; background: var(--c-soft); }
.breaks h4 { margin: 12px 0 10px; }
.breaks p { color: var(--c-muted); line-height: 1.55; font-size: 15.5px; }
@media (max-width: 860px) { .layers li { grid-template-columns: 1fr; } .layers__ring { margin: 0 !important; } .breaks { grid-template-columns: 1fr; } }

/* Vision film */
.film { margin-top: 48px; }
.film video { width: 100%; border-radius: 20px; background: #000; display: block; }

/* Light desk for the book, so pages read clearly */
.c-desk { background: radial-gradient(120% 80% at 50% 60%, #f3efe6, #e4ded0); color: #262c22; }
.c-desk .flip__btn:hover:not(:disabled) { background: #262c22; color: #faf7f0; }
.c-desk .flip__book::after { background: radial-gradient(closest-side, rgba(60,50,30,.32), rgba(0,0,0,0)); }
/* page drag */
.flip__book { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.flip__leaf { cursor: grab; }
.flip__book.is-dragging, .flip__book.is-dragging .flip__leaf { cursor: grabbing; }
.flip__leaf.is-dragging { transition: none; }
.flip__face img { pointer-events: none; -webkit-user-drag: none; }
/* paper darkens as it lifts off the spine and lightens as it lands */
.flip__face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: calc(var(--bend, 0) * .9); transition: opacity .3s; }
.flip__face--front::before { background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 45%, rgba(255,255,255,.18) 100%); }
.flip__face--back::before { background: linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,0) 45%, rgba(255,255,255,.18) 100%); }
.flip__leaf.is-dragging .flip__face::before { transition: none; }
/* Wide stats (e.g. 53.9%) sit in the upper right, clear of the dialogue box */
.vn__big--stat { font-size: clamp(96px, 13vw, 230px); top: 24vh; translate: none; right: var(--gutter); white-space: nowrap; }
@media (max-width: 760px) { .vn__big--stat { font-size: 22vw; top: 24vh; } }

/* Relay cone: micro / meso / macro */
/* hovering a layer lights its ring and dims the others */
/* keep research photos within one screen */
.rs-split > img { aspect-ratio: 4 / 5; max-height: min(68vh, 640px); object-fit: cover; object-position: 50% 40%; justify-self: center; }
.rs-photos { max-width: 620px; }
.rs-photos .rs-photos__wide { aspect-ratio: 16 / 10; }
.rs-photos img:not(.rs-photos__wide) { aspect-ratio: 4 / 3; height: auto; }
/* one sage green at three strengths */

/* Relay cone (after the white paper's "How trust travels"): rows line up with rings */
.relay { --row: 200px; position: relative; display: grid; grid-template-columns: 470px minmax(0, 1fr); margin-top: 40px; }
.relay__cone { width: 470px; height: calc(var(--row) * 3); overflow: visible; }
.relay__edge { fill: none; stroke: rgba(250,247,240,.28); stroke-width: 1.2; }
.relay__flow { fill: none; stroke: #f2b84b; stroke-width: 2; stroke-dasharray: 5 7; animation: relay-flow 1.6s linear infinite; }
@keyframes relay-flow { to { stroke-dashoffset: -24; } }
.relay__layer { --a: .22; transition: opacity .5s var(--ease); }
.relay__layer ellipse { fill: #b5bd93; stroke: rgba(250,247,240,.45); stroke-width: 1.2; transition: fill-opacity .5s, stroke .5s; }
.relay__outer { fill-opacity: calc(var(--a) * .35); }
.relay__inner { fill-opacity: var(--a); }
.relay__inner--dash { stroke-dasharray: 4 5; }
.relay__name { font: 600 17px var(--f-display); fill: #faf7f0; text-anchor: middle; transition: fill .5s; }
.relay__actor circle { fill: #faf7f0; }
.relay__actor text { font: 500 12px var(--f-body); fill: rgba(250,247,240,.8); }
.relay__link { stroke: rgba(250,247,240,.3); stroke-width: 1.2; transition: stroke .5s; }
.relay__list { display: grid; grid-template-rows: repeat(3, var(--row)); }
.relay__list > li { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 64px; outline: none; transition: opacity .5s var(--ease); }
.relay__list > li::before { content: ""; position: absolute; left: 0; top: 50%; width: 48px; height: 1.2px; background: rgba(250,247,240,.3); transition: background .5s; }
.relay__list > li::after { content: ""; position: absolute; left: 44px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: rgba(250,247,240,.5); transition: background .5s, transform .5s var(--ease); }
.relay__list small { font: 600 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: #f2b84b; }
.relay__list h4 { margin: 10px 0 8px; font: 600 clamp(20px, 2vw, 28px)/1.2 var(--f-display); letter-spacing: -0.02em; }
.relay__list p { max-width: 32em; color: var(--c-muted); line-height: 1.55; }
/* the active layer lights up, the rest step back */
.relay[data-active] .relay__layer, .relay[data-active] .relay__list > li { opacity: .35; }
.relay[data-active="0"] .relay__layer[data-layer="0"], .relay[data-active="1"] .relay__layer[data-layer="1"], .relay[data-active="2"] .relay__layer[data-layer="2"],
.relay[data-active="0"] .relay__list > li[data-layer="0"], .relay[data-active="1"] .relay__list > li[data-layer="1"], .relay[data-active="2"] .relay__list > li[data-layer="2"] { opacity: 1; }
.relay[data-active="0"] .relay__layer[data-layer="0"], .relay[data-active="1"] .relay__layer[data-layer="1"], .relay[data-active="2"] .relay__layer[data-layer="2"] { --a: .95; }
.relay[data-active="0"] [data-layer="0"] .relay__inner, .relay[data-active="1"] [data-layer="1"] .relay__inner, .relay[data-active="2"] [data-layer="2"] .relay__inner { stroke: #f2b84b; stroke-width: 2; }
.relay[data-active="0"] [data-layer="0"] .relay__name, .relay[data-active="1"] [data-layer="1"] .relay__name, .relay[data-active="2"] [data-layer="2"] .relay__name { fill: #262c22; }
.relay[data-active="0"] [data-layer="0"] .relay__link, .relay[data-active="1"] [data-layer="1"] .relay__link, .relay[data-active="2"] [data-layer="2"] .relay__link { stroke: #f2b84b; }
.relay[data-active="0"] li[data-layer="0"]::before, .relay[data-active="1"] li[data-layer="1"]::before, .relay[data-active="2"] li[data-layer="2"]::before,
.relay[data-active="0"] li[data-layer="0"]::after, .relay[data-active="1"] li[data-layer="1"]::after, .relay[data-active="2"] li[data-layer="2"]::after { background: #f2b84b; }
.relay[data-active="0"] li[data-layer="0"]::after, .relay[data-active="1"] li[data-layer="1"]::after, .relay[data-active="2"] li[data-layer="2"]::after { transform: scale(1.4); }
@media (max-width: 980px) {
  .relay { grid-template-columns: 1fr; }
  .relay__cone { width: 100%; max-width: 470px; height: auto; justify-self: center; }
  .relay__list { grid-template-rows: none; gap: 28px; margin-top: 32px; }
  .relay__list > li { padding-left: 24px; }
  .relay__list > li::before { display: none; }
  .relay__list > li::after { left: 0; top: 6px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .relay__flow { animation: none; } }
@media (max-width: 980px) { .relay__link { display: none; } .relay__list > li::after { left: 2px; } }

/* Wide stats sit low on the right, beside the dialogue box, like the other projects */
.vn__big--stat { top: auto; bottom: clamp(24px, 6vh, 64px); right: calc(var(--gutter) + 36px); translate: none; height: 1em; line-height: 1; font-size: clamp(90px, 11.5vw, 230px); }
@media (max-width: 1024px) { .vn__big--stat { bottom: auto; top: 26vh; height: 1em; font-size: 19vw; right: var(--gutter); } }

/* Relay diagram centred as one composition */
@media (min-width: 981px) { .relay { grid-template-columns: 470px minmax(0, 480px); justify-content: center; column-gap: 48px; } .relay__list > li::before { left: -48px; width: 92px; } }
#ecosystem .relay-head { text-align: center; }
/* Compact variant: whole-frame video on desktop, and on phones a tight 16:9 band under the header */
@media (max-width: 640px), (max-aspect-ratio: 4/3) {
  .c-hero--compact { height: calc(56.25vw + 84px); }
  .c-hero--compact .c-hero__pin { position: relative; height: 100%; }
  .c-hero--compact .c-hero__media { top: 76px; height: 56.25vw; object-fit: cover; }
  .c-hero--compact .c-hero__cue { display: none; }
}

/* Project colours for the round cursor label */
.case { --theme-bg: #de6536; --theme-fg: #fff; }
.case--light { --theme-bg: #cae210; --theme-fg: #111; }
.case--warm { --theme-bg: #885835; --theme-fg: #fff6ef; }
.case--olive { --theme-bg: #424d3d; --theme-fg: #faf7f0; }
/* Full-screen hero film anchored bottom-right, so the logo that lands there is never cropped */
.c-hero--br .c-hero__media { object-position: 50% 50%; transform-origin: 50% 50%; transform: scale(calc(1.03 - var(--p, 0) * .03)); }
@media (max-width: 640px), (max-aspect-ratio: 4/3) {
  .c-hero--compact .c-hero__media { transform: none; object-position: 50% 50%; }
  .c-hero--compact .c-hero__pin::after, .c-hero--compact .c-hero__intro { display: none; }
}

/* ---------- RECO theme: cream, BoKnee yellow and red ---------- */
.case--reco {
  --c-bg: #fff3e3; --c-fg: #1d1b19; --c-muted: #6f5f50;
  --c-accent: #e8392d; --c-accent-ink: #c92b20; --c-soft: #ffe7c9;
  --c-line: rgba(60, 30, 10, .12); --accent: #e8392d;
  --theme-bg: #e8392d; --theme-fg: #fff;
}
.case--reco .topbar__inner { background: rgba(255,243,227,.85); border-color: rgba(60,30,10,.1); color: #1d1b19; }
.case--reco .topbar__loc { color: rgba(29,27,25,.55); }
.case--reco .c-next .pill--ghost { background: transparent; color: var(--c-fg); border-color: var(--c-line); }
.case--reco .c-next .pill__arrow { background-color: #1d1b19; }
.case--reco .chapter { --chapter-accent: #f5b849; }
.case--reco .c-hero__marquee span { font-family: 'Holtwood One SC', var(--f-display); letter-spacing: 0; color: #e8392d; }
.reco-covers img { background: transparent; }

.reco-big { font: 600 clamp(80px, 11vw, 168px)/1 var(--f-display); letter-spacing: -0.05em; color: #e8392d; }
.reco-chart svg { width: 100%; max-width: 520px; overflow: visible; }
.reco-chart__axis { fill: none; stroke: rgba(29,27,25,.35); stroke-width: 1.5; }
.reco-chart__line { fill: none; stroke: #e8392d; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.reco-chart.is-in .reco-chart__line { stroke-dashoffset: 0; }
.reco-chart__dot { fill: #e8392d; }
.reco-chart text { font: 500 13px var(--f-body); fill: var(--c-muted); }
.reco-chart figcaption { margin-top: 12px; font-size: 15px; color: var(--c-muted); }

.sdt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.sdt li { padding: 28px 26px; border-radius: 24px; background: var(--c-soft); transition: transform .5s var(--ease); }
.sdt li:hover { transform: translateY(-6px) rotate(-.6deg); }
.sdt b { display: inline-block; padding: 7px 16px; border-radius: 99px; background: #fff; font: 600 15px/1 var(--f-display); }
.sdt li:nth-child(1) b { color: #3b8bd9; } .sdt li:nth-child(2) b { color: #c98a14; } .sdt li:nth-child(3) b { color: #e8392d; }
.sdt h3 { margin: 18px 0 8px; font: 600 23px/1.25 var(--f-display); letter-spacing: -0.02em; }
.sdt p { color: var(--c-muted); line-height: 1.55; }
@media (max-width: 860px) { .sdt { grid-template-columns: 1fr; } }

/* Try it: live simulated app beside the recorded walkthrough */
.reco-try { background: #050505; color: #fff3e3; --c-fg: #fff3e3; --c-muted: rgba(255,243,227,.68); --c-line: rgba(255,243,227,.14); --c-accent-ink: #f5b849; }
.reco-demo { display: grid; grid-template-columns: auto minmax(0, 340px) auto; gap: clamp(24px, 3vw, 48px); align-items: start; justify-content: center; margin-top: 48px; }
.reco-demo__item { margin: 0; text-align: center; }
.reco-device { position: relative; overflow: hidden; }
.reco-device--app { width: 344px; height: 720px; }
.reco-device--app iframe { position: absolute; left: 0; top: 0; width: 430px; height: 900px; border: 0; transform: scale(.8); transform-origin: 0 0; background: transparent; }
.reco-device--video { width: 344px; height: 720px; display: grid; place-items: center; }
.reco-device--video video { height: 712px; width: auto; max-width: 100%; border-radius: 42px; border: 6px solid #000; background: #000; }
.reco-demo figcaption { margin-top: 16px; font-size: 14px; color: var(--c-muted); }
.reco-tag { display: block; width: max-content; margin: 0 auto 8px; padding: 6px 14px; border-radius: 99px; background: #f5b849; color: #1d1b19; font: 600 13px/1 var(--f-display); }
.reco-tag--live { background: #e8392d; color: #fff; }
.reco-demo__note { align-self: center; }
.reco-demo__note h3 { font: 600 24px/1.2 var(--f-display); margin-bottom: 14px; }
.reco-demo__note p { color: var(--c-muted); line-height: 1.6; margin-bottom: 12px; }
.reco-demo__note strong { color: #fff3e3; font-weight: 500; }
.reco-demo__hint { padding: 14px 16px; border-radius: 14px; background: rgba(255,243,227,.07); font-size: 14px; }
@media (max-width: 1180px) {
  .reco-demo { grid-template-columns: auto auto; }
  .reco-demo__note { grid-column: 1 / -1; grid-row: 1; max-width: 640px; }
}
@media (max-width: 760px) {
  .reco-demo { grid-template-columns: 1fr; justify-items: center; }
}

.reco-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 56px; }
.reco-feature--flip > :first-child { order: 2; }
.reco-feature img { width: 100%; max-width: 480px; justify-self: center; }
.reco-feature__media { justify-self: center; }
.reco-feature__media video { width: min(300px, 70vw); border-radius: 24px; background: #fff; }
.reco-feature small { font: 600 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-ink); }
.reco-feature h3 { margin: 12px 0 12px; font: 600 clamp(26px, 2.6vw, 38px)/1.15 var(--f-display); letter-spacing: -0.03em; }
.reco-feature p { color: var(--c-muted); line-height: 1.65; max-width: 34em; }
.reco-ticks { margin-top: 18px; display: grid; gap: 8px; }
.reco-ticks li { position: relative; padding-left: 26px; }
.reco-ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 50%; background: #f5b849; box-shadow: inset 0 0 0 4px #fff3e3; outline: 2px solid #f5b849; }
@media (max-width: 860px) { .reco-feature, .reco-feature--flip { grid-template-columns: 1fr; } .reco-feature--flip > :first-child { order: 0; } }

/* Two-lane tech pipeline */
.flow { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin-top: 48px; }
.flow__start, .flow__end { display: grid; place-items: center; min-width: 110px; padding: 22px 18px; border-radius: 18px; background: #1d1b19; color: #fff3e3; font: 600 17px/1.2 var(--f-display); text-align: center; }
.flow__end small { display: block; font: 400 12px var(--f-body); opacity: .7; margin-top: 4px; }
.flow__lanes { display: grid; gap: 18px; }
.flow__lane { display: flex; align-items: stretch; gap: 0; }
.flow__lane li { position: relative; flex: 1; display: grid; align-content: center; padding: 16px 14px; margin-right: 26px; border-radius: 14px; background: #f5b849; font: 600 14px/1.25 var(--f-display); text-align: center; }
.flow__lane li small { display: block; margin-top: 4px; font: 400 12px/1.3 var(--f-body); color: rgba(29,27,25,.7); }
.flow__lane li.is-key { background: #e8392d; color: #fff; }
.flow__lane li::after { content: ""; position: absolute; right: -22px; top: 50%; width: 18px; height: 2px; background: #c98a14; }
.flow__lane li::before { content: ""; position: absolute; right: -24px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-top: 2px solid #c98a14; border-right: 2px solid #c98a14; transform: rotate(45deg); }
.tech-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.tech-chips li { padding: 12px 18px; border-radius: 16px; background: var(--c-soft); font-size: 14px; color: var(--c-muted); }
.tech-chips b { display: block; color: var(--c-fg); font: 600 16px var(--f-display); }
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr; }
  .flow__lane { flex-direction: column; gap: 22px; }
  .flow__lane li { margin-right: 0; }
  .flow__lane li::after { right: auto; left: 50%; top: auto; bottom: -18px; width: 2px; height: 14px; }
  .flow__lane li::before { right: auto; left: 50%; top: auto; bottom: -20px; margin-left: -3.5px; transform: rotate(135deg); }
}

.reco-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.reco-next article { padding: 14px 14px 26px; border-radius: 24px; background: var(--c-soft); }
.reco-next img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin-bottom: 18px; }
.reco-next h3 { font: 600 21px/1.25 var(--f-display); margin: 0 6px 8px; }
.reco-next p { margin: 0 6px; color: var(--c-muted); line-height: 1.55; }
@media (max-width: 860px) { .reco-next { grid-template-columns: 1fr; } }
/* clip the embed to the phone's own outline, so the app's dim overlay never shows around it */
.reco-device--app { clip-path: inset(4px 5px 4px 5px round 39px); }
/* the recording already has its own phone mockup */
.reco-device--video video { border: 0; border-radius: 0; background: transparent; height: 720px; }
.reco-covers { grid-template-columns: 1fr 1fr; align-items: center; }
/* Enable real AI control */
.reco-ai { max-width: 344px; margin: 18px auto 0; text-align: center; }
.reco-ai__btn { padding: 12px 22px; border: 0; border-radius: 99px; background: #fff3e3; color: #1d1b19; font: 600 15px/1 var(--f-display); transition: transform .3s var(--ease), background .3s; }
.reco-ai__btn:hover:not(:disabled) { transform: translateY(-2px); background: #f5b849; }
.reco-ai__btn:disabled { opacity: .7; cursor: default; }
.reco-ai__btn.is-on { background: #e8392d; color: #fff; opacity: 1; }
.reco-ai__note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: rgba(255,243,227,.6); }
.reco-ai__bar { height: 4px; margin-top: 12px; border-radius: 4px; background: rgba(255,243,227,.15); overflow: hidden; }
.reco-ai__bar span { display: block; height: 100%; width: 0; background: #f5b849; transition: width .3s; }
/* Try RECO: fit the whole demo in one screen */
.reco-try .c-sec { padding-top: 56px; padding-bottom: 48px; }
.reco-try .c-head { margin-top: 10px; }
.reco-try { --dev-h: 630px; --dev-s: .7; }
@media (max-height: 860px) { .reco-try { --dev-h: 560px; --dev-s: .6222; } }
@media (max-height: 760px) { .reco-try { --dev-h: 500px; --dev-s: .5556; } }
.reco-demo { margin-top: 28px; align-items: center; }
.reco-demo__item { display: flex; flex-direction: column; align-items: center; }
.reco-device--app, .reco-device--video { width: calc(var(--dev-h) * 430 / 900); height: var(--dev-h); margin: 0 auto; }
.reco-device--app iframe { transform: scale(var(--dev-s)); }
.reco-device--app { clip-path: inset(calc(var(--dev-s) * 5px) calc(var(--dev-s) * 6px) calc(var(--dev-s) * 5px) calc(var(--dev-s) * 6px) round calc(var(--dev-s) * 48px)); }
.reco-device--video video { height: var(--dev-h); }
.reco-demo figcaption { margin-top: 12px; }
.reco-demo__note h3 { font-size: 21px; }
.reco-demo__note p { font-size: 15px; margin-bottom: 10px; }
.reco-demo__note .reco-ai { margin: 16px 0 0; max-width: none; text-align: left; }
.reco-demo__note .reco-ai__note { margin-top: 8px; }
/* Features: one centred composition */
.reco-feature { max-width: 1040px; margin-left: auto; margin-right: auto; }
.reco-feature > :last-child { justify-self: start; }

/* How it works: a calm, centred pipeline */
.pipe { --line: rgba(29,27,25,.22); max-width: 940px; margin: 56px auto 0; display: grid; justify-items: center; }
.pipe__node { position: relative; padding: 14px 28px; border-radius: 99px; background: #1d1b19; color: #fff3e3; font: 600 17px/1.2 var(--f-display); text-align: center; }
.pipe__node small { display: block; margin-top: 4px; font: 400 13px var(--f-body); opacity: .7; }
.pipe__lanes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; width: 100%; padding: 44px 0; }
/* fork lines: node → both lanes, both lanes → end node */
.pipe__lanes::before, .pipe__lanes::after { content: ""; position: absolute; left: 25%; right: 25%; height: 22px; border: 2px solid var(--line); }
.pipe__lanes::before { top: 0; border-bottom: 0; border-radius: 0; border-top: 2px solid var(--line); }
.pipe__lanes::after { bottom: 0; border-top: 0; border-bottom: 2px solid var(--line); }
.pipe__node:first-child::after, .pipe__node--end::before { content: ""; position: absolute; left: 50%; width: 2px; height: 22px; margin-left: -1px; background: var(--line); }
.pipe__node:first-child::after { top: 100%; }
.pipe__node--end::before { bottom: 100%; }
.pipe__lane { padding: 26px 26px 22px; border-radius: 24px; background: var(--c-soft); }
.pipe__lane h3 { display: flex; align-items: center; gap: 12px; font: 600 22px/1.2 var(--f-display); letter-spacing: -0.02em; margin-bottom: 18px; }
.pipe__lane h3 span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e8392d; color: #fff; font-size: 13px; }
.pipe__lane:nth-child(2) h3 span { background: #f5b849; color: #1d1b19; }
.pipe__lane ol { position: relative; display: grid; gap: 16px; padding-left: 26px; }
.pipe__lane ol::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 11px); }
.pipe__lane li { position: relative; }
.pipe__lane li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fff3e3; border: 3px solid #e8392d; }
.pipe__lane:nth-child(2) li::before { border-color: #f5b849; }
.pipe__lane b { display: block; font: 600 16px/1.3 var(--f-display); }
.pipe__lane li span { display: block; margin-top: 2px; font-size: 14px; color: var(--c-muted); line-height: 1.45; }
.tech-chips { justify-content: center; margin-top: 36px; }
@media (max-width: 760px) {
  .pipe__lanes { grid-template-columns: 1fr; }
  .pipe__lanes::before, .pipe__lanes::after { left: 50%; right: auto; width: 2px; border: 0; background: var(--line); }
}
.reco-try .c-sec { padding-top: 36px; padding-bottom: 28px; }
.reco-try { --dev-h: 580px; --dev-s: .6444; }
@media (max-height: 860px) { .reco-try { --dev-h: 500px; --dev-s: .5556; } }
@media (max-height: 760px) { .reco-try { --dev-h: 440px; --dev-s: .4889; } }
.reco-try .c-head { font-size: clamp(26px, 2.6vw, 38px); }
/* crop the recording's black side margins so both phones show at the same size */
.reco-device--video video { width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Try RECO: phones as tall as the screen allows */
.reco-try { --dev-h: clamp(440px, calc(100vh - 200px), 760px); }
@media (max-height: 860px), (max-height: 760px) { .reco-try { --dev-h: clamp(440px, calc(100vh - 200px), 760px); } }
.reco-try .c-sec { padding-top: 32px; padding-bottom: 24px; }
.reco-demo { margin-top: 20px; }
.reco-demo__note .reco-demo__title { font: 600 clamp(30px, 2.8vw, 42px)/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--c-fg); margin-bottom: 18px; }
@media (max-width: 760px) { .reco-try { --dev-h: 600px; } }

/* ---------- Zen Bloom VR theme: night wood, ink and a red seal ---------- */
.case--zen {
  --c-bg: #0f0b08; --c-fg: #f1e9dd; --c-muted: #a39583;
  --c-accent: #cea662; --c-accent-ink: #dcb877; --c-soft: #1b1510;
  --c-line: rgba(241, 233, 221, .12); --accent: #cea662;
  --theme-bg: #cea662; --theme-fg: #1a120b;
}
.case--zen .chapter { --chapter-accent: #cea662; }
.case--zen .c-hero__marquee span { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.case--zen .c-covers--natural img { border-radius: 16px; }

.zen-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.zen-cards li { padding: 28px 26px; border-radius: 22px; background: var(--c-soft); border: 1px solid var(--c-line); }
.zen-cards b { display: inline-block; font: 500 13px var(--f-body); color: var(--c-accent-ink); letter-spacing: .08em; margin-bottom: 18px; }
.zen-cards h3 { font: 600 22px/1.2 var(--f-display); margin-bottom: 10px; }
.zen-cards p { color: var(--c-muted); line-height: 1.6; }


.zen-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; counter-reset: zp; }
.zen-pipe li { position: relative; }
.zen-pipe img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; border-radius: 18px; background: var(--c-soft); margin-bottom: 18px; }
.zen-pipe li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 30%; transform: translate(50%, -50%); z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); color: #1a120b; font-size: 15px; }
.zen-pipe b { font: 500 13px var(--f-body); color: var(--c-accent-ink); letter-spacing: .08em; }
.zen-pipe h3 { font: 600 20px/1.2 var(--f-display); margin: 6px 0 8px; }
.zen-pipe p { color: var(--c-muted); line-height: 1.55; font-size: 15px; }

.zen-scroll { margin-top: 44px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 0 max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))) 14px; }
.zen-scroll { cursor: grab; }
.zen-scroll.is-dragging { cursor: grabbing; }
.zen-scroll img { user-select: none; -webkit-user-drag: none; display: block; height: clamp(220px, 26vw, 315px); width: auto; max-width: none; border-radius: 14px; }


@media (max-width: 900px) {
  .zen-cards { grid-template-columns: 1fr; }
  .zen-pipe { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .zen-pipe li:not(:last-child)::after { display: none; }
}

/* Experience: captions sit where the original slides placed them */
.zen-exp .vn__bg img { object-position: 50% 50%; }
.zen-exp__shade { position: absolute; inset: 0; pointer-events: none; transition: background .8s var(--ease);
  background: linear-gradient(90deg, rgba(10,7,5,.72), rgba(10,7,5,.15) 45%, rgba(10,7,5,0) 60%); }
.zen-exp[data-beat="1"] .zen-exp__shade, .zen-exp[data-beat="3"] .zen-exp__shade, .zen-exp[data-beat="4"] .zen-exp__shade {
  background: linear-gradient(270deg, rgba(10,7,5,.72), rgba(10,7,5,.15) 45%, rgba(10,7,5,0) 60%); }
.zen-cap { position: absolute; top: var(--y); max-width: min(34vw, 560px); color: #efead7; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease); pointer-events: none; }
.zen-cap--l { left: var(--x); }
.zen-cap--r { right: var(--x); text-align: right; }
.zen-cap.is-active { opacity: 1; transform: none; transition-delay: .15s; }
.zen-cap h3 { font: italic 500 clamp(34px, 3.4vw, 64px)/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: 0; margin-bottom: .35em; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.zen-cap p { font: 200 clamp(17px, 1.55vw, 30px)/1.3 'Josefin Sans', var(--f-body); color: #fff0db; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
@media (max-width: 760px) {
  .zen-exp__shade, .zen-exp[data-beat] .zen-exp__shade { background: linear-gradient(0deg, rgba(10,7,5,.92), rgba(10,7,5,.6) 30%, rgba(10,7,5,0) 60%); }
  .zen-cap, .zen-cap--l, .zen-cap--r { left: 20px; right: 20px; top: auto; bottom: 64px; max-width: none; text-align: left; }
}

/* Gestures: one looping clip per gesture */
.zen-gest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 18px; margin-top: 44px; }
.zen-gest__media { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--c-soft); margin-bottom: 16px; }
.zen-gest__media video, .zen-gest__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zen-gest h3 { display: flex; align-items: center; gap: 10px; font: 600 19px/1.3 var(--f-display); margin-bottom: 6px; }
.zen-gest h3::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--c-accent); flex: none; }
.zen-gest p { color: var(--c-muted); line-height: 1.55; font-size: 15px; }

/* How we built it */
.zen-unity { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.zen-unity img { width: 100%; border-radius: 16px; display: block; }
.zen-unity figcaption { margin-top: 12px; font-size: 15px; color: var(--c-muted); }
.zen-sub { font: 600 clamp(22px, 2vw, 28px)/1.25 var(--f-display); margin: 80px 0 14px; }
@media (max-width: 900px) { .zen-gest { grid-template-columns: 1fr 1fr; } .zen-unity { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .zen-gest { grid-template-columns: 1fr; } }
/* Unity shots share one frame size so they line up */
.zen-unity figure { margin: 0; }
.zen-unity img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 0; }
/* Closing logo animation, keyed onto the page colour */
.zen-end { padding: clamp(40px, 8vw, 120px) 0 clamp(20px, 4vw, 60px); background: var(--c-bg); }
.zen-end video { display: block; width: min(100%, 1200px); margin: 0 auto; aspect-ratio: 1600 / 634; object-fit: cover; background: var(--c-bg); -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }

/* ---------- FINRA theme: navy, ticket gradient, sky blue ---------- */
.case--finra {
  --c-bg: #06192f; --c-fg: #f2f7fc; --c-muted: #93a8bf;
  --c-accent: #82cfff; --c-accent-ink: #82cfff; --c-soft: #0c2643;
  --c-line: rgba(130, 207, 255, .16); --accent: #82cfff;
  --theme-bg: #82cfff; --theme-fg: #041327;
}
.case--finra .chapter { --chapter-accent: #82cfff; }
.case--finra .c-covers--natural img { border-radius: 16px; }

.fin-note { margin-top: 14px; color: var(--c-muted); font-size: 15px; }
.fin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.fin-cards--2 { grid-template-columns: 1fr 1fr; }
.fin-cards article { padding: 28px 26px; border-radius: 22px; background: var(--c-soft); border: 1px solid var(--c-line); }
.fin-cards small { display: block; font: 500 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; }
.fin-cards h3 { font: 600 22px/1.2 var(--f-display); margin-bottom: 10px; }
.fin-cards p { color: var(--c-muted); line-height: 1.6; }


.fin-wf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.fin-wf figure { margin: 0; }
.fin-wf img { width: 100%; aspect-ratio: 1440 / 1024; object-fit: cover; object-position: 50% 0; border-radius: 14px; background: #fff; display: block; }
.fin-wf figcaption { margin-top: 12px; color: var(--c-muted); font-size: 15px; line-height: 1.5; }
.fin-wf figcaption b { display: block; color: var(--c-fg); font-weight: 600; }
.fin-sub { font: 600 clamp(22px, 2vw, 28px)/1.25 var(--f-display); margin-bottom: 12px; }
.fin-insights { display: grid; gap: 12px; }
.fin-insights li { padding: 20px 22px; border-radius: 16px; background: var(--c-soft); border: 1px solid var(--c-line); font: 500 18px/1.4 var(--f-display); }
.fin-pivot { margin-top: 56px; padding: 30px 32px; border-radius: 22px; background: linear-gradient(120deg, #0b4a8c, #06274f); }
.fin-pivot small { display: block; font: 500 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 10px; }
.fin-pivot p { font: 500 clamp(18px, 1.6vw, 22px)/1.5 var(--f-display); max-width: 60em; }

/* Prototype with a step guide that follows along */
.fin-try-sec .c-sec { padding-top: 36px; padding-bottom: 28px; }
.fin-demo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; margin-top: 24px; align-items: start; }
.fin-browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); max-width: calc((100vh - 230px) * 1.6); width: 100%; justify-self: center; }
.fin-browser__bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #e9eef3; color: #4b5d70; font-size: 12px; }
.fin-browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #c6d0da; display: block; }
.fin-browser__bar span { margin-left: 8px; }
.fin-restart { margin-left: auto; border: 0; background: #fff; color: #06274f; border-radius: 99px; padding: 4px 12px; font: 500 12px var(--f-body); cursor: pointer; }
.fin-browser__view { --fs: .6; position: relative; aspect-ratio: 1440 / 900; overflow: hidden; }
.fin-browser__view iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform: scale(var(--fs)); transform-origin: 0 0; }
.fin-guide { position: relative; padding: 4px 0; }
.fin-guide__count { font: 500 13px var(--f-body); letter-spacing: .08em; color: var(--c-muted); margin-bottom: 14px; }
.fin-guide__count span { color: var(--c-accent); }
.fin-step { display: none; }
.fin-step.is-active { display: block; animation: fin-in .45s var(--ease) both; }
@keyframes fin-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fin-step h3 { font: 600 clamp(24px, 2.1vw, 30px)/1.15 var(--f-display); letter-spacing: -0.02em; margin-bottom: 12px; }
.fin-step p { color: var(--c-muted); line-height: 1.6; }
.fin-try { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--c-soft); border: 1px solid var(--c-line); color: var(--c-fg) !important; font-size: 15px; }
.fin-try b { display: block; font: 500 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 4px; }
.fin-guide__list { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px; }
.fin-guide__list li { font-size: 12px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--c-line); color: var(--c-muted); transition: all .3s var(--ease); }
.fin-guide__list li.is-done { color: var(--c-fg); border-color: rgba(130,207,255,.4); }
.fin-guide__list li.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #041327; font-weight: 600; }
.fin-disclaimer { margin-top: 14px; font-size: 13px; color: var(--c-muted); }
@media (max-width: 1000px) {
  .fin-demo { grid-template-columns: 1fr; }
  .fin-browser { max-width: none; }
  .fin-cards, .fin-wf { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .fin-cards--2 { grid-template-columns: 1fr; } }

/* FINRA research, made interactive */


.fin-split2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 72px); align-items: center; margin-top: 80px; }
.fin-forum { border-radius: 22px; background: #f4f7fb; color: #14243a; padding: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.fin-forum__head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 14px; border-bottom: 1px solid #dde4ec; }
.fin-forum__head b { font-weight: 700; }
.fin-forum__head span { font-size: 12px; color: #6b7c90; }
.fin-forum__list { display: grid; gap: 10px; margin-top: 14px; }
.fin-forum__list li { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #e3e9f0; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.fin-forum__list li.is-on { opacity: 1; transform: none; }
.fin-forum__list i { font-style: normal; font-size: 12px; color: #6b7c90; }
.fin-forum__list p { margin-top: 3px; font: 500 16px/1.4 var(--f-display); }
.fin-forum__typing { display: flex; gap: 4px; padding: 10px 14px 2px; height: 22px; }
.fin-forum__typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aaabb; animation: fin-dot 1s infinite; }
.fin-forum__typing span:nth-child(2) { animation-delay: .15s; } .fin-forum__typing span:nth-child(3) { animation-delay: .3s; }
.fin-forum.is-done .fin-forum__typing { visibility: hidden; }
@keyframes fin-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.fin-forum__foot { margin-top: 6px; padding: 0 6px; font-size: 13px; font-weight: 600; color: #c0392b; opacity: 0; transition: opacity .5s; }
.fin-forum.is-done .fin-forum__foot { opacity: 1; }


.fin-lessons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-top: 70px; }
.fin-lessons p { padding-top: 18px; border-top: 2px solid #82cfff; font: 500 17px/1.5 var(--f-display); color: var(--c-fg); }
.fin-lessons small { display: block; font: 500 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }

/* Synthesis: 700 notes cluster into 6 problems as you scroll */
.fin-aff { position: relative; height: 420vh; }
.fin-aff__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.fin-aff__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fin-aff__copy { position: relative; padding-top: 96px; pointer-events: none; }
.fin-aff__num { font: 600 clamp(72px, 10vw, 150px)/1 var(--f-display); letter-spacing: -0.05em; margin-top: 18px; text-shadow: 0 4px 30px rgba(6,25,47,.8); }
.fin-aff__label { margin-top: 10px; font-size: clamp(16px, 1.4vw, 20px); color: var(--c-muted); max-width: 26em; text-shadow: 0 2px 16px rgba(6,25,47,.9); }
.fin-aff__tags li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, 0); width: min(26vw, 260px); text-align: center; font: 600 clamp(13px, 1.25vw, 18px)/1.3 var(--f-display); color: #fff; opacity: 0; transition: opacity .5s var(--ease); text-shadow: 0 2px 14px rgba(6,25,47,.9); }
.fin-aff.is-final .fin-aff__tags li { opacity: 1; }
.fin-aff-after { padding-top: 40px; }
@media (max-width: 900px) {
  .fin-lessons { grid-template-columns: 1fr; gap: 28px; }
  .fin-aff__tags li { width: 30vw; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .fin-aff { height: auto; } .fin-aff__stage { position: relative; } }

/* Maze vs path: the same U4 task before and after */
.fin-mz { margin-top: 40px; }
.fin-mz__toggle { display: inline-flex; padding: 5px; border-radius: 99px; background: var(--c-soft); border: 1px solid var(--c-line); gap: 4px; }
.fin-mz__toggle button { border: 0; border-radius: 99px; padding: 11px 20px; background: transparent; color: var(--c-muted); font: 500 15px var(--f-body); cursor: pointer; transition: background .3s, color .3s; }
.fin-mz[data-mode="before"] [data-maze-to="before"] { background: #ff8a7a; color: #2a0b06; }
.fin-mz[data-mode="after"] [data-maze-to="after"] { background: #82cfff; color: #041327; }
.fin-mz__board { position: relative; aspect-ratio: 2 / 1; border-radius: 22px; background: radial-gradient(ellipse 70% 80% at 50% 50%, #0b3a6e, #06192f 80%); overflow: hidden; }
.fin-mz__board svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fin-mz__walls { fill: none; stroke: rgba(130,207,255,.18); stroke-width: 5; stroke-linecap: round; }
.fin-mz__route { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); opacity: 0; }
.fin-mz__route--before { stroke: #ff8a7a; }
.fin-mz__route--after { stroke: #82cfff; stroke-width: 8; filter: drop-shadow(0 0 10px rgba(130,207,255,.7)); }
.fin-mz.is-play[data-mode="before"] .fin-mz__route--before, .fin-mz.is-play[data-mode="after"] .fin-mz__route--after { opacity: 1; animation: fin-draw var(--dur, 3.6s) cubic-bezier(.45,.05,.4,1) forwards; }
.fin-mz[data-mode="after"] .fin-mz__route--after { --dur: 1.6s; }
@keyframes fin-draw { to { stroke-dashoffset: 0; } }
.fin-mz__nodes { position: absolute; inset: 0; pointer-events: none; }
.fin-mz__n { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; opacity: 0; }
.fin-mz__n::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #dff1ff; box-shadow: 0 0 0 4px rgba(6,25,47,.8); }
.fin-mz__n.is-pain::before { background: #ff8a7a; }
.fin-mz__n span { position: absolute; left: 12px; top: 10px; width: max-content; max-width: 15vw; font: 500 clamp(11px, 1.05vw, 15px)/1.3 var(--f-display); color: #e6f2fc; text-shadow: 0 1px 8px rgba(6,25,47,.95); }
.fin-mz__n.is-pain span { color: #ffb3a8; }
.fin-mz__nodes--after .fin-mz__n span { left: 50%; top: 18px; transform: translateX(-50%); text-align: center; max-width: 18vw; font-size: clamp(12px, 1.25vw, 18px); }
.fin-mz__nodes--before .fin-mz__n:last-child span, .fin-mz__nodes--after .fin-mz__n:last-child span { left: auto; right: 0; transform: none; text-align: right; }
.fin-mz.is-play[data-mode="before"] .fin-mz__nodes--before .fin-mz__n { animation: fin-node .4s var(--ease) both; animation-delay: calc(var(--i) * .33s); }
.fin-mz.is-play[data-mode="after"] .fin-mz__nodes--after .fin-mz__n { animation: fin-node .4s var(--ease) both; animation-delay: calc(var(--i) * .45s); }
.fin-mz__stats { display: grid; grid-template-rows: repeat(4, 1fr); align-content: stretch; }
.fin-mz__stats div { padding: 10px 0 10px 20px; border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line); display: flex; flex-direction: column; justify-content: center; }
.fin-mz__stats div:first-child { border-top: 0; }
.fin-mz__stats dt { color: var(--c-muted); font-size: 14px; }
.fin-mz__stats dd { font: 600 clamp(34px, 3.6vw, 56px)/1.05 var(--f-display); letter-spacing: -0.03em; margin-top: 6px; transition: color .4s; }
.fin-mz[data-mode="before"] .fin-mz__stats dd { color: #ff8a7a; }
.fin-mz[data-mode="after"] .fin-mz__stats dd { color: #82cfff; }
.fin-mz__stats span { display: inline-block; animation: fin-in .45s var(--ease) both; }
@media (max-width: 760px) {
  .fin-mz__n span { max-width: 26vw; font-size: 10px; }
  .fin-mz__nodes--before .fin-mz__n:not(.is-pain):not(:first-child):not(:last-child) span { display: none; }
  .fin-mz__stats { grid-template-columns: 1fr 1fr; grid-template-rows: none; margin-top: 16px; }
  .fin-mz__stats div { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-line) !important; }
  .fin-mz__toggle button { padding: 9px 12px; font-size: 13px; }
}

.fin-mz__nodes--after .fin-mz__n:nth-child(even) span { top: auto; bottom: 18px; }
.fin-mz__pains { display: none; }
@media (max-width: 760px) {
  .fin-mz__nodes--before .fin-mz__n:not(:first-child):not(:last-child) span { display: none; }
  .fin-mz[data-mode="before"] .fin-mz__pains { display: grid; gap: 6px; margin-top: 14px; counter-reset: pn; }
  .fin-mz__pains li { counter-increment: pn; display: flex; gap: 10px; font-size: 14px; color: #ffb3a8; }
  .fin-mz__pains li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #ff8a7a; }
}

/* Research map: an orbit beside the copy, on one screen */
.fin-orbit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: calc(100vh - 160px); }
.fin-orbit .c-head { margin-top: 0; }
.fin-orbit__info { margin-top: 28px; min-height: 96px; padding: 18px 20px; border-radius: 16px; background: var(--c-soft); border: 1px solid var(--c-line); }
.fin-orbit__info p { display: none; color: var(--c-muted); line-height: 1.55; }
.fin-orbit__info p.is-active { display: block; animation: fin-in .35s var(--ease) both; }
.fin-orbit__info b { display: block; color: var(--c-fg); font: 600 20px/1.3 var(--f-display); margin-bottom: 4px; }
.fin-orb { position: relative; aspect-ratio: 1; width: min(100%, calc(100vh - 220px)); justify-self: center; }
.fin-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fin-orb__ring { fill: none; stroke: rgba(130,207,255,.22); stroke-width: .3; stroke-dasharray: 1 1.4; transform-origin: 50% 50%; animation: fin-spin 90s linear infinite; }
.fin-orb__ring--in { stroke: rgba(130,207,255,.12); animation-direction: reverse; animation-duration: 60s; }
@keyframes fin-spin { to { transform: rotate(360deg); } }
.fin-orb__spokes line { stroke: #82cfff; stroke-width: .35; opacity: 0; transition: opacity .3s; }
.fin-orb__spokes line.is-hot { opacity: .9; }
.fin-orb__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #cfe9ff); color: #06274f; font: 700 clamp(18px, 2vw, 30px) var(--f-display); letter-spacing: .04em; box-shadow: 0 0 0 10px rgba(130,207,255,.08), 0 0 80px rgba(130,207,255,.45); }
.fin-orb__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(.6); opacity: 0; padding: 10px 16px; border-radius: 99px; border: 1px solid rgba(130,207,255,.5); background: #0c2643; color: #dff1ff; font: 500 clamp(12px, 1.15vw, 16px) var(--f-display); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.fin-orb.is-in .fin-orb__node { animation: fin-orb-in .7s var(--ease) both; animation-delay: calc(.2s + var(--i) * .12s); }
@keyframes fin-orb-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.fin-orb__node:hover, .fin-orb__node.is-active { background: #82cfff; border-color: #82cfff; color: #041327; }

/* Emotional journey: a dot travels the curve, stages light up */
.fin-jr { margin-top: 100px; }
.fin-jr__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.fin-jr__cols { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.fin-jr__col { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 10px; border: 0; border-bottom: 2px solid var(--c-line); background: transparent; color: var(--c-muted); font: 600 clamp(14px, 1.3vw, 18px) var(--f-display); cursor: pointer; transition: color .3s, border-color .3s; }
.fin-jr__col svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fin-jr__col.is-active { color: var(--c-fg); border-color: #82cfff; }
.fin-jr__col:nth-child(2).is-active { border-color: #ffb37a; } .fin-jr__col:nth-child(3).is-active { border-color: #ff6b6b; }
.fin-jr__chart { position: relative; margin-top: 8px; }
.fin-jr__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.fin-jr__chart { padding-left: 96px; }
.fin-jr__axis { position: absolute; left: 0; top: var(--ay); transform: translateY(-50%); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.fin-jr__axis::after { content: ""; display: inline-block; width: 16px; height: 1px; margin-left: 8px; vertical-align: middle; background: var(--c-line); }
.fin-jr__sep { stroke: var(--c-line); stroke-width: 1; stroke-dasharray: 4 6; }
.fin-jr__area { fill: url(#jrFill); }
.fin-jr__line { fill: none; stroke: url(#jrStroke); stroke-width: 5; stroke-linecap: round; }
.fin-jr__dot { fill: #fff; stroke: #82cfff; stroke-width: 5; filter: drop-shadow(0 0 10px rgba(130,207,255,.9)); transition: stroke .3s; }
.fin-jr[data-at="1"] .fin-jr__dot { stroke: #ffb37a; filter: drop-shadow(0 0 10px rgba(255,179,122,.9)); }
.fin-jr[data-at="2"] .fin-jr__dot { stroke: #ff6b6b; filter: drop-shadow(0 0 12px rgba(255,107,107,.9)); }
.fin-jr__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 10px; }
.fin-jr__cards p { padding: 16px 18px; color: var(--c-muted); line-height: 1.55; opacity: .35; transition: opacity .4s; }
.fin-jr__cards p.is-active { opacity: 1; }
.fin-jr__cards b { display: block; font: 500 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 6px; }

/* Usability testing: a task board */

/* Maze vs path on one screen */
.fin-mz-sec { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.fin-mz { margin-top: 18px; }
.fin-mz__headrow { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fin-mz__headrow .c-head { margin-top: 0; }
.fin-mz__sub { margin-top: 6px; color: var(--c-muted); }
.fin-mz__main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 16vw, 230px); gap: 0 24px; margin-top: 22px; align-items: stretch; }
.fin-mz__board { width: min(100%, calc((100vh - 330px) * 2)); justify-self: center; }
@media (max-width: 900px) {
  .fin-orbit { grid-template-columns: 1fr; min-height: 0; }
  .fin-orb { width: min(100%, 460px); }
  .fin-jr__cards { grid-template-columns: 1fr; }
  .fin-jr__cards p { display: none; opacity: 1; padding: 14px 0; }
  .fin-jr__cards p.is-active { display: block; }
  .fin-jr__col span { font-size: 12px; }
  .fin-mz__main { grid-template-columns: 1fr; }
  .fin-mz__board { width: 100%; }
}
@keyframes fin-node { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) { .fin-jr__axis { display: none; } .fin-jr__chart { padding-left: 0; } }
.fin-mz__nodes--before .fin-mz__n.is-a span { top: auto; bottom: 12px; }
.fin-mz__nodes--before .fin-mz__n.is-l span { left: auto; right: 12px; text-align: right; }
.fin-mz__nodes--before .fin-mz__n:last-child.is-a span { right: 0; }
.fin-mz__board { width: min(100%, calc((100vh - 400px) * 2)); }
.fin-mz-sec.c-sec { padding-top: 40px; padding-bottom: 30px; }
@media (max-width: 760px) { .fin-split2 { grid-template-columns: 1fr; gap: 28px; } }
/* maze: never stretch the board, so dots stay on the route */
.fin-mz__main { align-items: center; }
.fin-mz__board { align-self: center; }
.fin-mz__nodes--after .fin-mz__n span { white-space: nowrap; max-width: none; }
.fin-mz__nodes--after .fin-mz__n:first-child span { left: -6px; transform: none; text-align: left; }
.fin-mz__auto { margin-left: 12px; font-size: 12px; color: var(--c-muted); }
/* usability board in the FINRA blues */

/* 100 visitors, 62 leave */
.fin-bounce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 36px; }
.fin-bounce__num { font: 600 clamp(80px, 11vw, 168px)/1 var(--f-display); letter-spacing: -0.05em; color: #82cfff; font-variant-numeric: tabular-nums; }
.fin-bounce__label { margin-top: 12px; font: 500 clamp(18px, 1.7vw, 24px)/1.4 var(--f-display); max-width: 20em; }
.fin-bounce__label b { color: #82cfff; font-weight: 600; }
.fin-bounce__punch { margin-top: 26px; color: var(--c-muted); font-size: 17px; opacity: 0; transition: opacity .8s var(--ease) 2.2s; }
.fin-bounce__punch em { font-style: normal; color: var(--c-fg); font-weight: 600; }
.fin-bounce.is-in .fin-bounce__punch { opacity: 1; }
.fin-bounce__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(6px, 1vw, 12px); width: min(100%, 460px); justify-self: center; }
.fin-bounce__grid i { aspect-ratio: 1; border-radius: 50%; background: #dff1ff; transition: transform 1s var(--ease), opacity .9s var(--ease), background .4s; transition-delay: var(--d, 0s); }
.fin-bounce__grid i.is-gone { transform: translate(var(--dx, 30px), var(--dy, -20px)) scale(.4); opacity: .08; }
.fin-bounce__grid i.is-stay { background: #82cfff; }

/* usability: one clear chart */
.fin-ut2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 100px; }
.fin-ut2__big { font: 600 clamp(28px, 3vw, 44px)/1.12 var(--f-display); letter-spacing: -0.03em; margin: 6px 0 14px; }
.fin-ut2__big em { font-style: normal; color: #82cfff; }
.fin-ut2__nums { display: flex; gap: 40px; margin-top: 24px; }
.fin-ut2__nums p { color: var(--c-muted); font-size: 14px; }
.fin-ut2__nums b { display: block; font: 600 clamp(36px, 3.6vw, 52px)/1 var(--f-display); color: var(--c-fg); margin-bottom: 4px; }
.fin-ut2__chart { padding: clamp(22px, 2.6vw, 34px); border-radius: 24px; background: var(--c-soft); border: 1px solid var(--c-line); }
.fin-ut2__cap { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 18px; }
.fin-ut2__chart ol { display: grid; gap: 16px; }
.fin-ut2__chart li { display: grid; grid-template-columns: minmax(0, 1fr) 54px; grid-template-areas: "name num" "bar bar"; gap: 6px 12px; align-items: baseline; }
.fin-ut2__name { grid-area: name; font: 500 16px var(--f-display); }
.fin-ut2__chart li b { grid-area: num; text-align: right; font: 600 18px var(--f-display); color: #82cfff; }
.fin-ut2__bar { grid-area: bar; height: 10px; border-radius: 99px; background: rgba(130,207,255,.12); overflow: hidden; }
.fin-ut2__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(130,207,255,.55), #82cfff); transition: width 1.2s var(--ease); }
.fin-ut2.is-in .fin-ut2__bar i { width: calc(var(--v) * 1%); }
.fin-ut2__chart li:nth-child(2) .fin-ut2__bar i { transition-delay: .1s; } .fin-ut2__chart li:nth-child(3) .fin-ut2__bar i { transition-delay: .2s; } .fin-ut2__chart li:nth-child(4) .fin-ut2__bar i { transition-delay: .3s; } .fin-ut2__chart li:nth-child(5) .fin-ut2__bar i { transition-delay: .4s; }
.fin-ut2__take { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-line); color: var(--c-muted); line-height: 1.55; }

/* maze labels scale with the board so they never collide */
.fin-mz__board { container-type: inline-size; }
.fin-mz__n span { font-size: clamp(9px, 1.25cqw, 14px) !important; max-width: 22cqw !important; }
.fin-mz__nodes--after .fin-mz__n span { font-size: clamp(10px, 1.5cqw, 16px) !important; max-width: none !important; }
@media (max-width: 900px) {
  .fin-bounce, .fin-ut2 { grid-template-columns: 1fr; }
}

/* 100 visitors: the 38 who stay form a clear block */
.fin-bounce__viz { justify-self: center; width: min(100%, 460px); }
.fin-bounce__grid { width: 100%; }
.fin-bounce__grid i.is-gone { transform: translateY(-46px) scale(.5); opacity: 0; }
.fin-bounce__legend { display: flex; gap: 22px; margin-top: 18px; font-size: 14px; color: var(--c-muted); }
.fin-bounce__legend span { display: inline-flex; align-items: center; gap: 8px; }
.fin-bounce__legend i { width: 12px; height: 12px; border-radius: 50%; background: #82cfff; }
.fin-bounce__legend i.is-gone-key { background: transparent; border: 1.5px dashed rgba(223,241,255,.5); }
.fin-orbit__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.fin-orbit__stats p { border-top: 1px solid var(--c-line); padding-top: 12px; }
.fin-orbit__stats b { display: block; font: 600 clamp(40px, 4vw, 60px)/1 var(--f-display); letter-spacing: -0.04em; color: #82cfff; margin-bottom: 6px; }
.fin-orbit__stats span { display: block; color: var(--c-muted); font-size: 14px; line-height: 1.45; }

/* Jargon: terms light up with a plain translation */
.fin-jg { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 100px; }
.fin-jg__card { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: #f4f7fb; color: #14243a; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.fin-jg__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6b7c90; margin-bottom: 14px; }
.fin-jg__text { font: 500 clamp(19px, 1.8vw, 26px)/1.6 var(--f-display); color: #14243a; }
.fin-jg__t { border: 0; padding: 0 3px; margin: 0 1px; font: inherit; color: #0b4a8c; background: linear-gradient(transparent 62%, rgba(130,207,255,.45) 62%); border-radius: 3px; cursor: help; transition: background .3s, color .3s; }
.fin-jg__t.is-active { background: #0b4a8c; color: #fff; }
.fin-jg__defs { margin-top: 22px; min-height: 74px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #dde4ec; }
.fin-jg__defs p { display: none; color: #3d4f64; line-height: 1.5; font-size: 15px; }
.fin-jg__defs p.is-active { display: block; animation: fin-in .35s var(--ease) both; }
.fin-jg__defs b { display: block; color: #0b4a8c; font: 600 16px var(--f-display); margin-bottom: 2px; }
@media (max-width: 900px) { .fin-jg { grid-template-columns: 1fr; } }

/* ---------- Password page for confidential case studies ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.is-unlocking .lock, .is-unlocking .lock-more { visibility: hidden; }
.lock { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 40%, #0a2f57, #06192f 70%); }
.lock__maze { position: absolute; inset: 0; width: 100%; height: 100%; }
.lock__inner { position: relative; display: grid; justify-items: center; padding-top: 96px; padding-bottom: 84px; pointer-events: none; }
.lock__card { pointer-events: auto; width: min(100%, 520px); padding: clamp(24px, 3vw, 38px); border-radius: 28px; background: rgba(6, 25, 47, .78); border: 1px solid rgba(130,207,255,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.lock__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #82cfff; }
.lock__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(130,207,255,.14); }
.lock__icon svg { width: 16px; height: 16px; fill: none; stroke: #82cfff; stroke-width: 2; stroke-linecap: round; }
.lock__title { margin-top: 16px; font: 600 clamp(32px, 3.5vw, 50px)/1.02 var(--f-display); white-space: nowrap; letter-spacing: -0.04em; }
.lock__lead { margin-top: 12px; color: #cfe0f0; line-height: 1.6; }
.lock__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.lock__facts li { padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 13px; color: var(--c-muted); line-height: 1.4; }
.lock__facts b { display: block; color: var(--c-fg); font: 600 15px var(--f-display); }
.lock__why { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: rgba(130,207,255,.08); border: 1px solid rgba(130,207,255,.18); color: #cfe0f0; font-size: 15px; line-height: 1.55; }
.lock__form { display: flex; gap: 10px; margin-top: 22px; }
.lock__form input { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 99px; border: 1px solid rgba(130,207,255,.35); background: rgba(255,255,255,.06); color: #fff; font: 500 16px var(--f-body); outline: none; transition: border-color .2s, box-shadow .2s; }
.lock__form input:focus { border-color: #82cfff; box-shadow: 0 0 0 4px rgba(130,207,255,.18); }
.lock__form button { display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; border: 0; border-radius: 99px; background: #82cfff; color: #041327; font: 600 15px var(--f-body); cursor: pointer; }
.lock__form button .pill__arrow { background-color: #041327; }
.lock__form.is-wrong { animation: lock-shake .45s; }
.lock__form.is-wrong input { border-color: #ff8a7a; }
@keyframes lock-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.lock__msg { min-height: 22px; margin-top: 10px; font-size: 14px; color: #ffb3a8; }
.lock__contact { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.lock__contact > p:first-child { color: var(--c-muted); font-size: 15px; }
.lock__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.lock__mail { margin-top: 10px; font-size: 13px; color: var(--c-muted); }
.lock__hint { margin-top: 22px; font-size: 13px; letter-spacing: .06em; color: rgba(207,224,240,.55); }
.lock-more { padding-top: 80px; padding-bottom: 100px; }
.lock-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 760px) {
  .lock__facts { grid-template-columns: 1fr 1fr; }
  .lock__form { flex-direction: column; }
  .lock__form button { justify-content: center; padding: 14px 20px; }
  .lock-more__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.lock__contact { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 15px; line-height: 1.55; }
.lock__contact a { color: #82cfff; text-decoration: underline; text-underline-offset: 3px; }
.lock__more { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #cfe0f0; font-size: 14px; letter-spacing: .04em; z-index: 1; }
.lock__more i { width: 26px; height: 40px; border-radius: 99px; border: 1.5px solid rgba(207,224,240,.55); position: relative; }
.lock__more i::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #82cfff; animation: lock-scroll 1.6s var(--ease) infinite; }
@keyframes lock-scroll { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.lock__more:hover { color: #fff; }

/* Other projects: one at a time */
.sc { --pc: #82cfff; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 24px; outline: none; }
.sc__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #0c2643; box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.sc__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.sc__slide.is-active { opacity: 1; transform: none; }
.sc__slide img, .sc__slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc__slide video { opacity: 0; transition: opacity .6s; }
.sc__slide.is-playing video { opacity: 1; }
.sc__nav { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 2; }
.sc__nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(6,25,47,.72); backdrop-filter: blur(8px); cursor: pointer; position: relative; transition: background .25s; }
.sc__nav button::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.sc__nav button[data-step="1"]::after { transform: scaleX(-1); }
.sc__nav button:hover { background: var(--pc); }
.sc__side { position: relative; min-height: 300px; }
.sc__count { font-size: 14px; letter-spacing: .08em; color: var(--c-muted); }
.sc__count b { color: var(--pc); font-weight: 600; transition: color .4s; }
.sc__info { position: absolute; left: 0; right: 0; top: 34px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.sc__info.is-active { position: relative; top: auto; margin-top: 18px; opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.sc__tag { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.sc__name { margin-top: 8px; font: 600 clamp(36px, 4vw, 60px)/1 var(--f-display); letter-spacing: -0.04em; }
.sc__desc { margin-top: 14px; color: var(--c-muted); line-height: 1.6; font-size: 17px; max-width: 26em; }
.sc__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 13px 14px 13px 22px; border-radius: 99px; background: var(--pc); color: var(--pf); font: 600 15px var(--f-body); transition: transform .3s var(--ease); }
.sc__cta:hover { transform: translateY(-2px); }
.sc__cta i { width: 28px; height: 28px; border-radius: 50%; background: var(--pf); position: relative; }
.sc__cta i::after { content: ""; position: absolute; inset: 0; background: var(--pc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.sc__tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 30px; }
.sc__tabs button { width: 100%; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: var(--c-muted); font: 500 15px var(--f-display); transition: color .3s; }
.sc__tabs button span { display: block; padding-bottom: 10px; }
.sc__tabs button i { display: block; height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.sc__tabs button i::after { content: ""; position: absolute; inset: 0; background: var(--pc); transform-origin: left; transform: scaleX(0); }
.sc__tabs button:hover, .sc__tabs button[aria-current] { color: var(--c-fg); }
.sc__tabs button[aria-current] i::after { transform: scaleX(var(--prog, 0)); }
@media (max-width: 900px) {
  .sc { grid-template-columns: 1fr; }
  .sc__side { min-height: 0; }
  .sc__tabs { grid-template-columns: repeat(4, 1fr); row-gap: 16px; }
  .sc__tabs button { font-size: 13px; }
  .sc__desc { font-size: 15px; }
}
.fin-yt { margin-top: 40px; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.fin-yt iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Bandy theme: cream paper, block colours, electric purple ---------- */
.case--bandy {
  --c-bg: #faf6e8; --c-fg: #1d1b19; --c-muted: #6b6457;
  --c-accent: #5b47c9; --c-accent-ink: #4a37b4; --c-soft: #f1ead2;
  --c-line: rgba(29, 27, 25, .12); --accent: #5b47c9;
  --theme-bg: #5b47c9; --theme-fg: #fff;
}
.case--bandy .topbar__inner { background: rgba(250,246,232,.85); border-color: rgba(29,27,25,.1); color: #1d1b19; }
.case--bandy .topbar__loc { color: rgba(29,27,25,.55); }
.case--bandy .c-next .pill--ghost { background: transparent; color: var(--c-fg); border-color: var(--c-line); }
.case--bandy .c-next .pill__arrow { background-color: #1d1b19; }
.case--bandy .chapter { --chapter-accent: #f4c51c; }
.case--bandy .c-hero__marquee span { font-family: 'Rubik', var(--f-display); font-weight: 900; letter-spacing: 0; }
.case--bandy .c-hero__marquee span:nth-child(5n+1) { color: #0e4a37; } .case--bandy .c-hero__marquee span:nth-child(5n+2) { color: #c0402a; } .case--bandy .c-hero__marquee span:nth-child(5n+3) { color: #5b47c9; } .case--bandy .c-hero__marquee span:nth-child(5n+4) { color: #e0b100; } .case--bandy .c-hero__marquee span:nth-child(5n) { color: #0b3a8c; }
.case--bandy .c-covers--natural img { border-radius: 18px; }
.bd-film video { border-radius: 22px; }

/* the idea: three layers */
.bd-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.bd-layers li { padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--c-line); }
.bd-layers__stack { display: flex; flex-direction: column; width: 84px; margin-bottom: 20px; }
.bd-layers__stack img { width: 84px; height: 84px; border-radius: 12px; display: block; transition: opacity .4s, transform .4s var(--ease); }
.bd-layers__stack img.dim { opacity: .22; filter: grayscale(1); }
.bd-layers li:hover .bd-layers__stack img:not(.dim) { transform: translateX(6px) rotate(-3deg); }
.bd-layers b { font: 600 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.bd-layers h3 { font: 800 26px/1.15 'Rubik', var(--f-display); margin: 6px 0 8px; }
.bd-layers p { color: var(--c-muted); line-height: 1.55; }

/* builder */
.bd-build { background: #fff7d6; }
.bd-build__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 28px; }
.bd-stage { position: relative; display: grid; justify-items: center; padding: 40px 0 20px; }
.bd-member { position: relative; display: flex; flex-direction: column; animation: bd-bob 1.25s ease-in-out infinite; transform-origin: 50% 100%; z-index: 1; }
@keyframes bd-bob { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-4px); } }
.bd-block { width: clamp(120px, 14vw, 170px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 22px rgba(29,27,25,.16); }
.bd-block img { width: 100%; height: 100%; display: block; }
.bd-block.is-swap { animation: bd-swap .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes bd-swap { 0% { transform: translateX(0) scale(1); } 35% { transform: translateX(-30px) rotate(-10deg) scale(.86); opacity: .4; } 100% { transform: none; opacity: 1; } }
.bd-floor { width: clamp(150px, 18vw, 220px); height: 18px; margin-top: 6px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(29,27,25,.2), transparent 70%); }
.bd-tip { margin-top: 14px; font-size: 14px; color: var(--c-muted); }
.bd-notes { position: absolute; inset: 0; pointer-events: none; }
.bd-notes i { position: absolute; left: 50%; top: 40%; font: 800 28px 'Rubik', sans-serif; font-style: normal; color: var(--n, #5b47c9); animation: bd-note 1.8s ease-out forwards; }
@keyframes bd-note { from { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), -170px) scale(1.15) rotate(var(--r)); } }
.bd-read { display: grid; gap: 12px; }
.bd-read__head { font: 600 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.bd-read__row { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--c-line); transition: transform .4s var(--ease), box-shadow .4s; }
.bd-read__row.is-new { transform: translateX(8px); box-shadow: 0 10px 24px rgba(91,71,201,.16); }
.bd-read__row small { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.bd-read__row b { display: block; margin-top: 4px; font: 800 22px 'Rubik', var(--f-display); }
.bd-read__row span { display: block; margin-top: 2px; color: var(--c-muted); line-height: 1.5; }
.bd-read__combo { margin-top: 6px; color: var(--c-muted); }
.bd-read__combo b { font: 900 30px 'Rubik', sans-serif; color: var(--c-fg); margin-right: 6px; }
.bd-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.bd-shelf small { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.bd-shelf > div > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bd-shelf button { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: none; cursor: pointer; transition: transform .25s var(--ease), border-color .25s; }
.bd-shelf button img { width: 100%; display: block; }
.bd-shelf button:hover { transform: translateY(-3px); }
.bd-shelf button.is-on { border-color: #1d1b19; }

/* stage gallery */
.bd-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.bd-gallery img { width: 100%; border-radius: 18px; display: block; }

/* how it works */
.bd-flow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; margin-top: 40px; padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: #1d1b19; color: #faf6e8; }
.bd-flow__stack { display: flex; flex-direction: column; gap: 6px; }
.bd-flow__stack img { width: 110px; height: 110px; border-radius: 14px; display: block; transition: transform .5s var(--ease), box-shadow .5s; }
.bd-flow.is-in .bd-flow__stack img { animation: bd-pulse 2.4s ease-in-out infinite; }
.bd-flow.is-in .bd-flow__stack img:nth-child(2) { animation-delay: .25s; } .bd-flow.is-in .bd-flow__stack img:nth-child(3) { animation-delay: .5s; }
@keyframes bd-pulse { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(244,197,28,0); } 20% { box-shadow: 0 0 0 6px rgba(244,197,28,.85); } }
.bd-flow__steps { counter-reset: st; display: grid; gap: 14px; }
.bd-flow__steps li { counter-increment: st; position: relative; padding: 14px 16px 14px 56px; border-radius: 16px; background: rgba(255,255,255,.06); opacity: .35; transition: opacity .5s, background .5s; }
.bd-flow__steps li::before { content: counter(st); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f4c51c; color: #1d1b19; font: 800 14px 'Rubik', sans-serif; }
.bd-flow__steps li.is-on { opacity: 1; background: rgba(255,255,255,.1); }
.bd-flow__steps b { display: block; font: 700 18px var(--f-display); }
.bd-flow__steps span { display: block; margin-top: 2px; color: rgba(250,246,232,.7); line-height: 1.5; font-size: 15px; }
.bd-build-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.bd-build-photos figure { margin: 0; }
.bd-build-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; }
.bd-build-photos figcaption { margin-top: 8px; font-size: 14px; color: var(--c-muted); }
@media (max-width: 900px) {
  .bd-layers, .bd-build__grid, .bd-shelf { grid-template-columns: 1fr; }
  .bd-gallery { grid-template-columns: 1fr; }
  .bd-flow { grid-template-columns: 1fr; justify-items: center; }
  .bd-flow__stack { flex-direction: row; }
  .bd-flow__stack img { width: 80px; height: 80px; }
  .bd-build-photos { grid-template-columns: 1fr 1fr; }
}

/* ---------- Bandy v2 ---------- */
.bd-layers li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bd-layers__stack { margin-left: auto; margin-right: auto; }
.bd-start { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.bd-principles { display: grid; gap: 12px; margin-top: 26px; counter-reset: pr; }
.bd-principles li { counter-increment: pr; position: relative; padding: 14px 16px 14px 58px; border-radius: 16px; background: #fff; border: 1px solid var(--c-line); color: var(--c-muted); line-height: 1.5; }
.bd-principles li::before { content: counter(pr); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #5b47c9; color: #fff; font: 800 15px 'Rubik', sans-serif; }
.bd-principles b { display: block; color: var(--c-fg); font: 700 17px var(--f-display); }
.bd-start__fig { margin: 0; }
.bd-start__fig img { width: 100%; border-radius: 22px; display: block; }
.bd-start__fig figcaption { margin-top: 10px; font-size: 14px; color: var(--c-muted); }

/* how to play diagram */
.bd-play { position: relative; margin-top: 36px; aspect-ratio: 16 / 8; border-radius: 26px; overflow: hidden; background: #e9f4fb; }
.bd-play__bg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 72%; object-fit: cover; object-position: 50% 30%; }
.bd-play__base { position: absolute; left: 6%; right: 6%; bottom: 7%; height: 15%; border-radius: 18px; background: #f6f1e2; box-shadow: 0 -10px 0 #ebe4cf inset, 0 16px 30px rgba(29,27,25,.15); }
.bd-play__band { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%); display: flex; gap: 1.6%; width: 78%; justify-content: center; align-items: flex-end; z-index: 1; }
.bd-m { display: flex; flex-direction: column; width: 11%; }
.bd-m img { width: 100%; aspect-ratio: 1; display: block; border-radius: 8px; box-shadow: 0 4px 10px rgba(29,27,25,.15); }
.bd-m--ghost { aspect-ratio: 1 / 3; border: 3px dashed rgba(29,27,25,.25); border-radius: 12px; }
.bd-play .bd-m:not(.bd-m--ghost) { opacity: 0; transform: translateY(-40px); transition: opacity .6s var(--ease), transform .9s cubic-bezier(.2,1.3,.4,1); }
.bd-play.is-in .bd-m:not(.bd-m--ghost) { opacity: 1; transform: none; }
.bd-play.is-in .bd-m:nth-child(2) { transition-delay: .35s; } .bd-play.is-in .bd-m:nth-child(3) { transition-delay: .7s; } .bd-play.is-in .bd-m:nth-child(4) { transition-delay: 1.05s; }
.bd-play__v, .bd-play__h, .bd-play__s { position: absolute; z-index: 2; display: flex; gap: 12px; align-items: center; opacity: 0; transition: opacity .6s var(--ease); }
.bd-play.is-in .bd-play__v { opacity: 1; transition-delay: 1.5s; } .bd-play.is-in .bd-play__h { opacity: 1; transition-delay: 2.1s; } .bd-play.is-in .bd-play__s { opacity: 1; transition-delay: 2.7s; }
.bd-play__v, .bd-play__h, .bd-play__s { pointer-events: none; }
.bd-play p { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(29,27,25,.12); font-size: 14px; line-height: 1.4; color: var(--c-muted); max-width: 260px; }
.bd-play p b { display: block; color: var(--c-fg); font: 800 16px 'Rubik', var(--f-display); }
.bd-play__v { left: 2%; bottom: 20%; flex-direction: row; }
.bd-play__v i { width: 6px; height: 34vh; max-height: 260px; border-radius: 6px; background: #5b47c9; position: relative; }
.bd-play__v i::before, .bd-play__v i::after { content: ""; position: absolute; left: -6px; width: 18px; height: 6px; border-radius: 3px; background: #5b47c9; }
.bd-play__v i::before { top: 0; } .bd-play__v i::after { bottom: 0; }
.bd-play__h { left: 50%; bottom: 1.5%; transform: translateX(-50%); flex-direction: column; gap: 6px; width: 70%; }
.bd-play__h i { width: 100%; height: 6px; border-radius: 6px; background: #f4c51c; }
.bd-play__h p { max-width: none; text-align: center; }
.bd-play__s { right: 2%; top: 5%; }
.bd-play__s i { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #2a8fd0; background: #fff; flex: none; animation: bd-ping 1.8s ease-out infinite; }
@keyframes bd-ping { 0% { box-shadow: 0 0 0 0 rgba(42,143,208,.5); } 100% { box-shadow: 0 0 0 22px rgba(42,143,208,0); } }

/* builder on one screen */
.bd-build .c-sec { padding-top: 32px; padding-bottom: 28px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.bd-build__grid { margin-top: 14px; align-items: center; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.bd-block { width: clamp(92px, 15vh, 150px); }
.bd-floor { width: clamp(120px, 19vh, 200px); }
.bd-side { display: grid; gap: 16px; }
.bd-read { gap: 8px; }
.bd-read__row { padding: 10px 14px; border-radius: 14px; }
.bd-read__row b { font-size: 18px; margin-top: 2px; }
.bd-read__row span { font-size: 14px; }
.bd-side .bd-shelf { grid-template-columns: 1fr; gap: 10px; margin-top: 0; }
.bd-side .bd-shelf > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }
.bd-side .bd-shelf small { margin: 0; }
.bd-side .bd-shelf > div > div { gap: 6px; }
.bd-side .bd-shelf button { max-width: 58px; border-radius: 10px; }
.bd-read__combo { margin-top: 0; }

/* scene boards */
.bd-sb { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: 36px; }
.bd-sb__stage { position: relative; aspect-ratio: 1491 / 1055; border-radius: 24px; overflow: hidden; background: #1d1b19; box-shadow: 0 30px 70px rgba(29,27,25,.2); }
.bd-sb__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-8%); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.2,1.2,.4,1); }
.bd-sb__bg.is-on { opacity: 1; transform: none; }
.bd-sb__band { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); display: flex; gap: 3%; width: 70%; justify-content: center; z-index: 2; }
.bd-sb__band .bd-m { width: 17%; animation: bd-bob 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
.bd-sb__band .bd-m:nth-child(2) { animation-delay: .2s; } .bd-sb__band .bd-m:nth-child(3) { animation-delay: .4s; } .bd-sb__band .bd-m:nth-child(4) { animation-delay: .6s; }
.bd-sb__base { position: absolute; left: 4%; right: 4%; bottom: 3%; height: 12%; border-radius: 16px; background: #f6f1e2; box-shadow: 0 -8px 0 #ebe4cf inset; z-index: 1; }
.bd-sb__nfc { position: absolute; right: 6%; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 4px solid #2a8fd0; }
.bd-sb.is-ping .bd-sb__nfc { animation: bd-ping .9s ease-out 2; }
.bd-sb__ping { position: absolute; right: 4%; bottom: 17%; z-index: 3; padding: 6px 12px; border-radius: 99px; background: #2a8fd0; color: #fff; font: 700 13px var(--f-body); opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); }
.bd-sb.is-ping .bd-sb__ping { opacity: 1; transform: none; }
.bd-sb__info p { display: none; color: var(--c-muted); line-height: 1.55; font-size: 16px; }
.bd-sb__info p.is-on { display: block; animation: fin-in .4s var(--ease) both; }
.bd-sb__info b { display: block; color: var(--c-fg); font: 900 clamp(30px, 3vw, 44px)/1.05 'Rubik', var(--f-display); margin-bottom: 8px; }
.bd-sb__tabs { display: grid; gap: 8px; margin-top: 20px; }
.bd-sb__tabs button { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 8px; border-radius: 14px; border: 2px solid transparent; background: #fff; cursor: pointer; transition: border-color .25s, transform .25s var(--ease); }
.bd-sb__tabs button:hover { transform: translateX(4px); }
.bd-sb__tabs button[aria-current] { border-color: var(--bc); }
.bd-sb__chip { grid-row: 1 / 3; width: 54px; height: 38px; border-radius: 8px; overflow: hidden; }
.bd-sb__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-sb__tabs b { font: 800 16px 'Rubik', var(--f-display); color: var(--c-fg); }
.bd-sb__tabs small { font-size: 12px; color: var(--c-muted); }

/* x-ray */
.bd-x { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: 30px; }
.bd-x__fig { position: relative; border-radius: 26px; background: #fff; padding: 12px; box-shadow: 0 24px 60px rgba(29,27,25,.12); }
.bd-x__fig svg { display: block; width: 100%; height: auto; }
.bd-x__layer { opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.bd-x[data-at="block"] [data-x="block"], .bd-x[data-at="pins"] [data-x="pins"], .bd-x[data-at="base"] [data-x="base"], .bd-x[data-at="board"] [data-x="board"] { opacity: 1; }
.bd-x__flow { animation: bd-flow 1s linear infinite; }
@keyframes bd-flow { to { stroke-dashoffset: -36; } }
.bd-x__waves { animation: bd-wave 1.4s ease-in-out infinite; }
@keyframes bd-wave { 50% { opacity: .3; } }
.bd-x__hot { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 0; background: #5b47c9; cursor: pointer; z-index: 2; box-shadow: 0 0 0 0 rgba(91,71,201,.5); animation: bd-hot 1.8s ease-out infinite; }
.bd-x__hot::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 18px 'Rubik', sans-serif; }
@keyframes bd-hot { 0% { box-shadow: 0 0 0 0 rgba(91,71,201,.55); } 100% { box-shadow: 0 0 0 16px rgba(91,71,201,0); } }
.bd-x__hot span { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 99px; background: #1d1b19; color: #fff; font: 600 12px var(--f-body); opacity: 0; transition: opacity .25s; pointer-events: none; }
.bd-x__hot:hover span, .bd-x__hot.is-on span { opacity: 1; }
.bd-x__hot.is-on { background: #f4c51c; } .bd-x__hot.is-on::after { color: #1d1b19; }
.bd-x__side { display: grid; gap: 10px; }
.bd-x__info { display: none; }
.bd-x__info.is-on { display: block; animation: fin-in .4s var(--ease) both; }
.bd-x__info img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; display: block; margin-bottom: 12px; }
.bd-x__info b { display: block; font: 800 20px 'Rubik', var(--f-display); margin-bottom: 4px; }
.bd-x__info p { color: var(--c-muted); line-height: 1.55; font-size: 15px; }
.bd-x__tip { font-size: 13px; color: var(--c-muted); }
@media (max-width: 900px) {
  .bd-start, .bd-sb, .bd-x { grid-template-columns: 1fr; }
  .bd-play { aspect-ratio: 3 / 4; }
  .bd-play__bg { height: 70%; }
  .bd-play__band { width: 94%; }
  .bd-m { width: 15%; }
  .bd-play p { font-size: 12px; max-width: 170px; padding: 8px 10px; }
  .bd-play p b { font-size: 13px; }
  .bd-play__v { bottom: 24%; } .bd-play__v i { height: 120px; }
  .bd-build .c-sec { min-height: 0; }
  .bd-x__hot span { display: none; }
}

/* ---------- Bandy: playable band (assets/projects/bandy/band.js) ---------- */
.bs { margin-top: 24px; }
.bs-main { display: grid; grid-template-columns: minmax(0, 1fr) 204px; gap: 18px; align-items: center; width: min(100%, calc((100vh - 330px) * 1.6 + 222px)); margin: 0 auto; }
.bs-stage { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: radial-gradient(80% 70% at 50% 35%, #f4f6f8, #dfe4ea); box-shadow: 0 20px 50px -24px rgba(29,27,25,.35); touch-action: pan-y; }
/* the scene board stands upright behind the base, as on the prototype */
.bs-bg { position: absolute; left: 18cqw; top: 3cqw; width: 64cqw; aspect-ratio: 16 / 9; border-radius: 2.6cqw; overflow: hidden; box-shadow: 0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.3); }
.bs-bg__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bs-base { position: absolute; inset: 0; pointer-events: none; }
.bs-base svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bs-body { fill: #2a2a2e; }
.bs-rim { fill: #3ec68f; }
.bs-lid { fill: #2f9e71; }
.bs-insert { fill: #f3f1ec; }
.bs-cell { fill: #e4e1d9; stroke: #d3cfc4; stroke-width: 2; transition: fill .2s; }
.bs-cell.is-now { fill: #ffe27a; }
.bs-num { fill: rgba(255,255,255,.55); font: 600 30px/1 system-ui, sans-serif; text-anchor: middle; transition: fill .2s; }
.bs-num.is-now { fill: #ffe27a; }
.bs-arrow { fill: rgba(255,255,255,.55); font: 600 22px/1 system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.bs-slots { position: absolute; inset: 0; pointer-events: none; }
.bs-pad { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--b) * 1cqw); pointer-events: auto; }
.bs-pad.is-full { transform: translate(-50%, -100%); }
.bs-pad:not(.is-full) { transform: translate(-50%, -70%); }
.bs-member { position: relative; width: 100%; display: flex; flex-direction: column; transform-origin: 50% 100%; cursor: grab; touch-action: none; }
.bs-member.is-hit { animation: bs-hit .28s ease-out; }
@keyframes bs-hit { 40% { transform: scaleY(.93) scaleX(1.05); } }
.bs-member { transition: translate .25s; }
.bs.is-playing .bs-pad.is-now .bs-member { translate: 0 -0.6cqw; }
.bs-block { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10%; transition: transform .2s; }
.bs-block img { display: block; width: 100%; aspect-ratio: 1; border-radius: 10%; box-shadow: 0 2px 5px rgba(0,0,0,.22); pointer-events: none; -webkit-user-drag: none; user-select: none; }
.bs-block:hover { transform: translateX(2px) rotate(-2deg); }
.bs-block.is-sel { position: relative; z-index: 1; transform: translateX(4px); }
.bs-block.is-sel img { outline: 3px solid #5b47c9; outline-offset: 1px; }
.bs-block:focus-visible { outline: 3px solid #5b47c9; outline-offset: 2px; }
.bs-block.is-swap { animation: bs-swap .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes bs-swap { from { transform: scale(.7) rotate(-8deg); } }
.bs-add { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: transparent; font-size: clamp(12px, 1.8cqw, 22px); line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.bs-add:hover, .bs-add:focus-visible, .bs-pad.is-over .bs-add { background: rgba(91,71,201,.18); color: #5b47c9; }
@media (hover: none) { .bs-add { color: rgba(91,71,201,.4); } }
.bs-pad.is-over .bs-member { outline: 3px dashed #5b47c9; outline-offset: 3px; border-radius: 8px; }
.bs-remove { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: #1d1b19; color: #fff; font-size: 13px; line-height: 20px; cursor: pointer; opacity: 0; transition: opacity .2s; }
.bs-member:hover .bs-remove, .bs-remove:focus-visible { opacity: 1; }
@media (hover: none) { .bs-remove { opacity: .8; } }
.bs.is-dragging .bs-remove { opacity: 0; }
.bs.is-dragging .bs-member { opacity: .45; }
.bs.is-dragging .bs-pad.is-over .bs-member { opacity: .8; }
/* block tray */
.bs-tray { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.6); }
.bs-tray__row small { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.bs-tray__row > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bs-tray__row { padding: 4px; border-radius: 12px; transition: background .25s; }
.bs-tray__row.is-target { background: rgba(91,71,201,.12); }
.bs.has-sel .bs-tray__row:not(.is-target) { opacity: .45; }
.bs-chip { padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; cursor: grab; touch-action: none; transition: transform .2s, border-color .2s; }
.bs-chip img { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.bs-chip:hover { transform: translateY(-2px); }
.bs-chip.is-on { border-color: #5b47c9; }
.bs-ghost { position: fixed; left: 0; top: 0; z-index: 1000; width: 64px; margin: -32px 0 0 -32px; pointer-events: none; opacity: 0; filter: drop-shadow(0 10px 16px rgba(0,0,0,.3)); }
.bs-ghost.is-on { opacity: .95; }
.bs-ghost img { display: block; width: 100%; border-radius: 8px; }
.bs-ghost.is-member { width: 56px; margin: -84px 0 0 -28px; }
.bs-ghost .bs-block { pointer-events: none; }
/* sound-on gate */
.bs-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: rgba(250,246,232,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .5s, visibility .5s; }
.bs.is-on .bs-gate { opacity: 0; visibility: hidden; }
.bs-gate b { font-size: clamp(20px, 2.4vw, 30px); }
.bs-gate p { max-width: 34ch; margin: 0; color: var(--c-muted); }
.bs-gate__icon { width: 56px; height: 56px; color: #5b47c9; }
.bs-gate__icon .w1, .bs-gate__icon .w2 { animation: bs-wave 1.6s ease-in-out infinite; }
.bs-gate__icon .w2 { animation-delay: .25s; }
@keyframes bs-wave { 50% { opacity: .2; } }
.bs-go { margin-top: 8px; padding: 14px 26px; border: 0; border-radius: 99px; background: #5b47c9; color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.bs-go:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px #5b47c9; }
/* controls */
.bs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; width: min(100%, calc(104vh + 250px)); margin: 16px auto 0; }
.bs-play { width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 50%; background: #1d1b19; color: #fff; cursor: pointer; }
.bs-play svg { width: 100%; height: 100%; display: block; }
.bs-play .i-pause, .bs.is-playing .bs-play .i-play { display: none; }
.bs.is-playing .bs-play .i-pause { display: block; }
.bs-genres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-genres small { margin-right: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.bs-genres button, .bs-shuffle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1.5px solid rgba(29,27,25,.18); border-radius: 99px; background: #fff; color: inherit; font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.bs-genres i { width: 9px; height: 9px; border-radius: 50%; background: var(--gc); }
.bs-genres button[aria-current] { border-color: var(--gc); background: var(--gc); color: #fff; }
.bs-genres button[aria-current] i { background: #fff; }
.bs-shuffle:hover, .bs-genres button:hover { border-color: #1d1b19; }
.bs-tip { display: grid; gap: 4px; width: min(100%, calc(104vh + 250px)); margin: 10px auto 0; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.bs-tip b { color: var(--c-ink, #1d1b19); font-weight: 600; }
@media (max-width: 900px) {
  .bs-main { grid-template-columns: 1fr; }
  .bs-tray { flex-direction: row; gap: 8px; padding: 10px; }
  .bs-tray__row { flex: 1; min-width: 0; }
  .bs-tray__row > div { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}
@media (max-width: 700px) {
  .bs-stage { border-radius: 16px; }
  .bs-num { font-size: 40px; }
  .bs-arrow { display: none; }
  .bs-tray__row small { font-size: 9px; letter-spacing: .04em; }
  .bs-genres { justify-content: center; }
  .bs-genres small { width: 100%; text-align: center; margin: 0; }
  .bs-genres button, .bs-shuffle { padding: 8px 12px; font-size: 13px; }
  .bs-remove { width: 18px; height: 18px; line-height: 18px; top: -7px; right: -7px; }
}

/* ---------- Bandy v3: research gap, rules map, member cards ---------- */
.bd-gap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; }
.bd-gap__grp { padding: 22px 24px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--c-line); }
.bd-gap__grp > small { display: block; margin-bottom: 14px; font: 600 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.bd-gap__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.bd-gap__pair > i { font-style: normal; font-size: 28px; color: var(--c-muted); }
.bd-ring { position: relative; display: grid; justify-items: center; text-align: center; }
.bd-ring svg { width: min(100%, 150px); height: auto; transform: rotate(-90deg); }
.bd-ring circle { fill: none; stroke: #f1ecdc; stroke-width: 11; }
.bd-ring .bd-ring__v { stroke: #5b47c9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.bd-ring.is-low .bd-ring__v { stroke: #e0565b; transition-delay: .3s; }
.bd-gap.is-in .bd-ring__v { stroke-dashoffset: calc(100 - var(--p)); }
.bd-ring__c { position: relative; width: min(100%, 150px); }
.bd-ring__c svg { width: 100%; }
.bd-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(26px, 2.8vw, 38px)/1 'Rubik', var(--f-display); color: #5b47c9; }
.bd-ring.is-low b { color: #e0565b; }
.bd-ring span { margin-top: 8px; font-size: 15px; line-height: 1.3; color: var(--c-muted); max-width: 16ch; }
.bd-gap__line { margin: 34px 0 30px; font: 700 clamp(22px, 2.4vw, 30px)/1.3 var(--f-display); max-width: 30ch; }
.bd-start .bd-principles { margin-top: 0; }
.bd-start .c-text b { color: var(--c-fg); }

.bd-rules { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 28px; padding: clamp(18px, 3vw, 36px); border-radius: 28px; background: #fff; border: 1px solid var(--c-line); }
.bd-rules__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.bd-rules__map text { font: 700 15px 'Rubik', sans-serif; fill: #6b6457; text-anchor: middle; letter-spacing: .06em; }
.r-cell { fill: #e4e1d9; transition: fill .25s; }
.r-cell.is-now { fill: #ffe27a; }
.r-sweep { fill: rgba(255,214,70,.25); transition: x .35s cubic-bezier(.3,.7,.3,1); }
.r-tile { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); transition: opacity .4s var(--d), transform .5s cubic-bezier(.2,1.5,.4,1) var(--d); }
.bd-rules.is-in .r-tile { opacity: 1; transform: none; }
.bd-rules.is-in .r-tile.is-now { animation: r-pop .4s ease-out; }
@keyframes r-pop { 40% { transform: scale(1.14); } }
.r-num.is-now { fill: #5b47c9; }
.r-time path, .r-pitch path { fill: none; stroke: #6b6457; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.r-board rect { fill: #6aa84f; }
.r-stack circle { fill: none; stroke: #5b47c9; stroke-width: 4; stroke-dasharray: 8 7; opacity: 0; transition: opacity .25s; }
.bd-rules [data-hl] { transition: opacity .25s; }
.bd-rules[data-hl] .bd-rules__map [data-hl] { opacity: .25; }
.bd-rules[data-hl="cols"] .bd-rules__map [data-hl="cols"], .bd-rules[data-hl="rows"] .bd-rules__map [data-hl="rows"], .bd-rules[data-hl="board"] .bd-rules__map [data-hl="board"] { opacity: 1; }
.bd-rules[data-hl="cols"] .r-time text, .bd-rules[data-hl="rows"] .r-pitch text { fill: #5b47c9; }
.bd-rules[data-hl="stack"] .r-stack circle { opacity: 1; }
.bd-rules__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bd-rules__list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 12px 14px; border-radius: 16px; color: var(--c-muted); line-height: 1.45; transition: background .2s; cursor: default; }
.bd-rules__list li:hover { background: #f6f2e4; }
.bd-rules__list b { display: block; color: var(--c-fg); font: 700 17px var(--f-display); }
.bd-rules__k { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #5b47c9; color: #fff; font: 800 18px 'Rubik', sans-serif; }

.bd-mem { margin-top: 44px; }
.bd-mem__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 16px; }
.bd-mem__t b { font: 800 26px 'Rubik', var(--f-display); }
.bd-mem__t span { color: var(--c-muted); }
.bd-mem__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.bd-mem__card { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 22px 22px; border-radius: 24px; background: #fff; border: 1px solid var(--c-line); color: inherit; font: inherit; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.bd-mem__card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -24px rgba(29,27,25,.4); }
.bd-mem__card.is-new { animation: bd-mem-new .6s ease-out; }
@keyframes bd-mem-new { 30% { box-shadow: 0 0 0 4px rgba(91,71,201,.25); } }
.bd-mem__stack { display: flex; flex-direction: column; width: 84px; margin-bottom: 18px; }
.bd-mem__stack img { width: 84px; height: 84px; border-radius: 12px; display: block; transition: opacity .4s; }
.bd-mem__stack img.dim { opacity: .22; filter: grayscale(1); }
.bd-mem__stack img.is-swap { animation: bs-swap .45s cubic-bezier(.2,1.4,.4,1); }
.bd-mem__card small { font: 600 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.bd-mem__card h3 { font: 800 26px/1.15 'Rubik', var(--f-display); margin: 6px 0 10px; }
.bd-mem__card > b { display: inline-block; padding: 4px 12px; border-radius: 99px; background: #f1ecdc; font-weight: 600; }
.bd-mem__card p { margin: 10px 0 0; color: var(--c-muted); line-height: 1.5; min-height: 3em; }
.bd-mem__combo { margin: 16px 0 0; text-align: center; color: var(--c-muted); }
.bd-mem__combo b { font: 800 22px 'Rubik', var(--f-display); color: #5b47c9; }
@media (max-width: 900px) {
  .bd-gap, .bd-rules { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bd-mem__cards { grid-template-columns: 1fr; }
  .bd-mem__card { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: start; justify-items: start; text-align: left; padding: 18px; }
  .bd-mem__stack { width: 56px; margin: 0; grid-row: 1 / span 4; }
  .bd-mem__stack img { width: 56px; height: 56px; border-radius: 9px; }
  .bd-mem__card h3 { font-size: 21px; margin: 2px 0 6px; }
  .bd-mem__card p { min-height: 0; }
  .bd-ring span { font-size: 13px; }
}

.bd-x__hit { fill: transparent; pointer-events: all; cursor: zoom-in; }
.bd-x__t { font: 800 19px 'Rubik', sans-serif; fill: #1d1b19; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.bd-x__t--s { font-weight: 600; font-size: 15px; fill: #6b6457; }
.bd-x__part { transition: opacity .4s; }
.bd-x[data-at="base"] .bd-x__lid { opacity: .35; }
.bd-x[data-at="block"] [data-part="board"], .bd-x[data-at="pins"] [data-part="board"] { opacity: .3; }

/* cutaway side panel: every panel shares one cell, so switching never changes the height */
.bd-x__side { display: grid; grid-template-rows: auto auto; align-content: center; }
.bd-x__info { display: block; grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s, visibility .35s; }
.bd-x__info.is-on { visibility: visible; opacity: 1; animation: none; }
.bd-x__tip { grid-area: 2 / 1; }
/* band demo: loading the recordings */
.bs.is-loading .bs-stage::after { content: "Loading the band…"; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 99px; background: rgba(29,27,25,.85); color: #fff; font-size: 14px; z-index: 6; }
.bd-build--demo { background: transparent; }

/* build a member: big member on the left, "now playing" on the right, the block shelf underneath */
.bd-build--member .bd-shelf { margin-top: 22px; gap: 24px; }
.bd-build--member .bd-shelf > div > div { gap: 8px; }
.bd-build--member .bd-shelf button { max-width: 64px; }
.bd-build--member .bd-read { gap: 12px; }
.bd-build--member .bd-read__row { padding: 16px 18px; border-radius: 18px; }
.bd-build--member .bd-read__row b { font-size: 22px; margin-top: 4px; }
.bd-build--member .bd-read__row span { font-size: 15px; }
.bd-gap__pair { align-items: start; }
.bd-gap__pair > i { margin-top: clamp(44px, 4.6vw, 60px); }
/* each layer's job, shown on the stack and in "now playing" */
.bd-build--member [data-slot="hat"], .bd-build--member [data-read="hat"] { --role: #5b47c9; }
.bd-build--member [data-slot="face"], .bd-build--member [data-read="face"] { --role: #e07a2a; }
.bd-build--member [data-slot="outfit"], .bd-build--member [data-read="outfit"] { --role: #2a8fd0; }
.bd-build--member .bd-block { position: relative; overflow: visible; }
.bd-build--member .bd-block img { border-radius: 20px; }
.bd-build--member .bd-block::after { content: attr(data-tag); position: absolute; right: calc(100% + 22px); top: 50%; transform: translateY(-50%); padding: 7px 14px; border-radius: 99px; background: var(--role); color: #fff; font: 700 15px var(--f-body); white-space: nowrap; }
.bd-build--member .bd-block::before { content: ""; position: absolute; right: 100%; top: 50%; width: 22px; height: 2px; background: var(--role); }
.bd-build--member .bd-read__row { border-left: 5px solid var(--role); }
.bd-build--member .bd-read__row small { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.bd-build--member .bd-read__row em { font-style: normal; padding: 3px 11px; border-radius: 99px; background: var(--role); color: #fff; font-weight: 700; font-size: 14px; }
@media (max-width: 700px) {
  .bd-build--member .bd-block::after { font-size: 12px; padding: 5px 10px; right: calc(100% + 14px); }
  .bd-build--member .bd-block::before { width: 14px; }
}
.bd-build--member .bd-read__row em { white-space: nowrap; }
@media (max-width: 900px) {
  .bd-build--member .bd-build__grid { grid-template-columns: 1fr; }
  .bd-build--member .bd-stage { padding-top: 10px; }
}
/* build a member, centred: role tag on the left of each block, what it does on the right */
.bd-mb { position: relative; display: grid; justify-items: center; margin-top: 8px; }
.bd-mb__grid { --bs: clamp(96px, 15vh, 150px); display: grid; grid-template-columns: minmax(0, 1fr) var(--bs) minmax(0, 1fr); grid-template-rows: repeat(3, var(--bs)); column-gap: 30px; width: 100%; }
.bd-mb .bd-member { grid-column: 2; grid-row: 1 / span 3; }
.bd-mb .bd-block { width: var(--bs); }
.bd-mb .bd-read__row { grid-column: 3; align-self: center; position: relative; padding: 0 0 0 14px; border: 0; border-left: 3px solid var(--role); border-radius: 0; background: none; box-shadow: none; max-width: 360px; }
.bd-mb .bd-read__row[data-read="hat"] { grid-row: 1; } .bd-mb .bd-read__row[data-read="face"] { grid-row: 2; } .bd-mb .bd-read__row[data-read="outfit"] { grid-row: 3; }
.bd-mb .bd-read__row.is-new { transform: translateX(6px); box-shadow: none; }
.bd-mb .bd-read__row small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.bd-mb .bd-read__row b { font-size: 22px; margin-top: 2px; }
.bd-mb .bd-read__row span { font-size: 15px; }
.bd-mb .bd-tip { margin-top: 10px; }
.bd-mb .bd-floor { margin-top: 4px; }
.bd-build--member [data-read] { --role: #5b47c9; }
.bd-build--member [data-read="face"] { --role: #e07a2a; }
.bd-build--member [data-read="outfit"] { --role: #2a8fd0; }
.bd-mb__combo { margin-top: 18px; text-align: center; }
.bd-build--member .bd-shelf { max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) {
  .bd-mb__grid { --bs: 92px; grid-template-columns: var(--bs) minmax(0, 1fr); column-gap: 16px; }
  .bd-mb .bd-member { grid-column: 1; }
  .bd-mb .bd-read__row { grid-column: 2; }
  .bd-build--member .bd-block::after, .bd-build--member .bd-block::before { display: none; }
  .bd-mb .bd-read__row b { font-size: 18px; }
  .bd-mb .bd-read__row span { font-size: 13px; }
}
.bd-mb .bd-read__row small i { font-style: normal; display: none; }
@media (max-width: 700px) {
  .bd-mb .bd-read__row small i { display: inline; color: var(--role); font-weight: 700; }
  .bd-mb .bd-floor { display: none; }
}
/* principles: three icon tiles and the first form study */
.bd-pr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.bd-pr li { display: flex; flex-direction: column; padding: 26px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--c-line); }
.bd-pr__i { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 26px; border-radius: 18px; background: #efeafc; color: #5b47c9; }
.bd-pr li:nth-child(2) .bd-pr__i { background: #fdeee2; color: #e07a2a; }
.bd-pr li:nth-child(3) .bd-pr__i { background: #e4f1fa; color: #2a8fd0; }
.bd-pr__i svg { width: 40px; height: 40px; }
.bd-pr b { font: 700 20px/1.25 var(--f-display); }
.bd-pr p { margin: 8px 0 0; color: var(--c-muted); line-height: 1.5; }
.bd-pr .bd-pr__fig { position: relative; padding: 0; overflow: hidden; }
.bd-pr__fig img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 220px; }
.bd-pr__fig small { position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.85); font-size: 12px; color: var(--c-muted); }
.bd-gap__grp { position: relative; }
.bd-gap__src { position: absolute; right: 22px; top: 22px; font-size: 11px; color: var(--c-muted); text-decoration: none; }
.bd-gap__src:hover { text-decoration: underline; }
@media (max-width: 900px) { .bd-pr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bd-pr { grid-template-columns: 1fr; } .bd-gap__src { position: static; display: block; margin: -6px 0 10px; } }
.bs-song { display: none; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; }
.bs.is-playing .bs-song { display: inline-flex; }
.bs-song span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.bs-song b { font-weight: 700; }
/* build a member, larger: still one screen */
.bd-mb__grid { --bs: clamp(104px, 18.5vh, 190px); column-gap: clamp(32px, 4vw, 64px); }
.bd-mb .bd-read__row { padding-left: 18px; max-width: 420px; }
.bd-mb .bd-read__row b { font-size: clamp(22px, 2vw, 28px); }
.bd-mb .bd-read__row span { font-size: 16px; }
.bd-build--member .bd-block::after { font-size: 16px; padding: 8px 16px; right: calc(100% + 30px); }
.bd-build--member .bd-block::before { width: 30px; }
.bd-build--member .bd-shelf { margin-top: 18px; }
.bd-build--member .c-sec { padding-top: 24px; padding-bottom: 20px; }
@media (max-width: 700px) {
  .bd-mb__grid { --bs: 96px; }
  .bd-mb .bd-read__row b { font-size: 19px; }
  .bd-mb .bd-read__row span { font-size: 14px; }
}
/* scene boards: pick by picture, beside the stage */
.bs-main { grid-template-columns: 128px minmax(0, 1fr) 204px; width: min(100%, calc((100vh - 330px) * 1.6 + 370px)); }
.bs-boards { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.6); }
.bs-boards small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); padding: 2px 4px 0; }
.bs-boards button { position: relative; display: block; padding: 0; border: 3px solid transparent; border-radius: 12px; overflow: hidden; background: none; cursor: pointer; transition: border-color .2s, transform .2s; }
.bs-boards button:hover { transform: translateY(-2px); }
.bs-boards button[aria-current] { border-color: var(--gc); }
.bs-boards img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bs-boards span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: 12px; font-weight: 600; text-align: left; }
.bs-boards button[aria-current] span { background: linear-gradient(transparent, var(--gc)); }
@media (max-width: 900px) {
  .bs-main { grid-template-columns: 1fr; }
  .bs-boards { flex-direction: row; overflow-x: auto; order: 2; }
  .bs-boards small { display: none; }
  .bs-boards button { flex: 0 0 104px; }
  .bs-stage { order: 1; } .bs-tray { order: 3; }
}
/* reaching the back rows */
.bs-pad.is-ghost { opacity: .28; pointer-events: none; transition: opacity .2s; }
.bs-pad.is-peek { z-index: 9 !important; }
.bs-pad { transition: opacity .2s; }
/* the grid from above: add or pick any cell, even ones hidden behind the front row */
.bs-map { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.7); }
.bs-map small { font-size: 10px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.bs-map [data-band-map] { display: grid; grid-template-columns: repeat(6, 26px); grid-auto-rows: 26px; gap: 3px; padding: 4px; border-radius: 9px; background: #3ec68f; }
.bs-map button { display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: #f3f1ec; color: #9a9384; font: 600 14px/1 var(--f-body); cursor: pointer; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.bs-map button:hover { transform: scale(1.12); box-shadow: 0 0 0 2px #5b47c9; }
.bs-map button.is-now { background: #ffe27a; }
.bs-map button.is-sel { box-shadow: 0 0 0 2px #5b47c9; }
.bs-map button img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .bs-map [data-band-map] { grid-template-columns: repeat(6, 30px); grid-auto-rows: 30px; } }
/* grid map: in the stage's top-right corner on wide screens, above the scene boards on phones */
.bs-main { position: relative; }
.bs-map { position: absolute; z-index: 4; top: 12px; right: calc(204px + 18px + 12px); flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 7px 7px; border-radius: 12px; background: rgba(255,255,255,.85); box-shadow: 0 6px 18px -10px rgba(0,0,0,.35); }
.bs-map small { font-size: 9px; text-align: center; }
.bs-map [data-band-map] { grid-template-columns: repeat(6, 18px); grid-auto-rows: 18px; gap: 2px; padding: 3px; border-radius: 7px; }
.bs-map button { border-radius: 4px; font-size: 11px; }
@media (max-width: 900px) {
  .bs-map { position: static; order: 2; flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
  .bs-map small { font-size: 10px; }
  .bs-map [data-band-map] { grid-template-columns: repeat(6, 30px); grid-auto-rows: 30px; gap: 3px; }
  .bs-boards { order: 3; } .bs-tray { order: 4; }
}
.bs.is-on .bs-gate { pointer-events: none; }
/* grid map sits on top of the scene-board column, clear of the stage */
.bs-left { display: flex; flex-direction: column; gap: 10px; }
.bs-left .bs-map { position: static; box-shadow: none; background: rgba(255,255,255,.6); padding: 8px 6px; border-radius: 18px; }
.bs-left .bs-map small { font-size: 10px; }
.bs-left .bs-map [data-band-map] { grid-template-columns: repeat(6, 16px); grid-auto-rows: 16px; justify-content: center; }
@media (max-width: 900px) {
  .bs-left { display: contents; }
  .bs-left .bs-map [data-band-map] { grid-template-columns: repeat(6, 30px); grid-auto-rows: 30px; }
}
/* nothing to edit until the band is started */
.bs:not(.is-on) .bs-left, .bs:not(.is-on) .bs-tray, .bs:not(.is-on) .bs-bar { opacity: .45; pointer-events: none; filter: saturate(.6); transition: opacity .4s, filter .4s; }
.bs-left, .bs-tray, .bs-bar { transition: opacity .4s, filter .4s; }
/* a block that changes turns like a real cube (built by window.__cubeTurn) */
.cturn { position: absolute; inset: 0; z-index: 3; perspective: 1500px; pointer-events: none; }
.cturn__c { position: absolute; inset: 0; transform-style: preserve-3d; }
.cturn__f { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 12%; backface-visibility: hidden; }

/* ---------- One hero mask for every project, in that page's own colour ----------
   As you scroll, the hero video settles under a wash of the page colour (never plain black),
   with the intro text fading in on top: dark text on light pages, light text on dark ones. */
.c-hero { --mask: var(--hero-bg, var(--c-bg)); --mask-ink: #fff; background: var(--mask); }
.c-hero__pin { background: var(--mask); }
.c-hero__media, .case--light .c-hero__media { filter: none; }
.c-hero__pin::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--mask); opacity: clamp(0, calc(var(--p, 0) * .9), .45); pointer-events: none; }
.c-hero__pin::after, .case--light .c-hero__pin::after, .c-hero--title .c-hero__pin::after {
  display: block; z-index: 1;
  background: linear-gradient(0deg, var(--mask) 0%, color-mix(in srgb, var(--mask) 72%, transparent) 34%, color-mix(in srgb, var(--mask) 0%, transparent) 64%);
}
.c-hero__intro, .c-hero--title .c-hero__intro { display: block; z-index: 2; color: var(--mask-ink); }
.c-hero__intro small, .case--light .c-hero__intro small { color: color-mix(in srgb, var(--mask-ink) 70%, transparent); }
.c-hero__cue, .case--light .c-hero__cue, .c-hero--title .c-hero__cue { z-index: 2; color: color-mix(in srgb, var(--mask-ink) 80%, transparent); }
/* light pages get dark text */
.case--bandy .c-hero, .case--light .c-hero, .case--reco .c-hero, .case--warm .c-hero { --mask-ink: #1d1b19; }
/* phones show the video at its own size: the band around it is the page colour, and no mask is needed */
@media (max-width: 640px), (max-aspect-ratio: 4/3) {
  .c-hero--compact .c-hero__pin::before, .c-hero--compact .c-hero__pin::after, .c-hero--compact .c-hero__intro { display: none; }
}
@media (max-width: 640px) {
  .c-hero--fill .c-hero__pin::before, .c-hero--fill .c-hero__pin::after, .c-hero--fill .c-hero__intro { display: none; }
}

/* Fitfido: two clickable phone prototypes, each with a guide that follows along */
.ff-try { margin-top: 80px; }
.ff-try__tag { max-width: 1040px; margin: 0 auto; font: 500 14px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.ff-try__tag b { display: inline-block; margin-right: 10px; padding: 4px 12px; border-radius: 99px; background: #f0611f; color: #fff; font-weight: 600; }
.ff-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: 1040px; margin: 28px auto 0; }
.ff-phone__col { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ff-phone { --ph: clamp(520px, calc(100vh - 150px), 720px); --fs: .8; position: relative; width: calc(var(--ph) * 393 / 852); height: var(--ph); border-radius: calc(var(--ph) * .068); overflow: hidden; background: #efefef; box-shadow: 0 0 0 9px #141414, 0 0 0 10px #3a3a3a, 0 40px 90px -20px rgba(0,0,0,.6); margin: 10px; }
.ff-phone iframe { position: absolute; left: 0; top: 0; width: 393px; height: 852px; border: 0; transform: scale(var(--fs)); transform-origin: 0 0; }
.ff-restart { border: 1px solid var(--c-line); background: transparent; color: var(--c-muted); border-radius: 99px; padding: 6px 16px; font: 500 13px var(--f-body); cursor: pointer; transition: color .2s, border-color .2s; }
.ff-restart:hover { color: var(--c-fg); border-color: var(--c-fg); }
.ff-demo .fin-guide__list li.is-active { background: #f0611f; border-color: #f0611f; color: #fff; }
.ff-demo .fin-guide__list li.is-done { border-color: rgba(240,97,31,.5); }
.ff-demo .fin-guide__count span, .ff-demo .fin-try b { color: #f0611f; }
.ff-chg { margin-top: 14px; padding: 12px 14px; border-left: 3px solid #f0611f; border-radius: 4px 12px 12px 4px; background: rgba(240,97,31,.08); color: var(--c-fg) !important; font-size: 15px; line-height: 1.5; animation: fin-in .5s var(--ease) both .15s; }
.ff-chg b { display: block; font: 500 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #f0611f; margin-bottom: 4px; }
@media (max-width: 760px) {
  .ff-demo { grid-template-columns: 1fr; }
  .ff-phone { --ph: min(600px, calc(100svh - 240px)); }
}

/* SwiftHome prototype: a 402 x 874 phone and the guide in the brand's browns */
.sh-phone { width: calc(var(--ph) * 402 / 874); border-radius: calc(var(--ph) * .07); }
.sh-phone iframe { width: 402px; height: 874px; }
.sh-demo .fin-guide__count span, .sh-demo .fin-try b { color: #a5734f; }
.sh-demo .fin-guide__list li.is-active { background: #3f2c1f; border-color: #3f2c1f; color: #fff; }
.sh-demo .fin-guide__list li.is-done { border-color: rgba(63,44,31,.45); color: #3f2c1f; }

/* Enlarge button under drag galleries (the images themselves keep the drag) */
.gallery__bar { display: flex; justify-content: flex-end; margin-top: 14px; }
.gallery__zoom { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--c-line); border-radius: 99px; background: transparent; color: var(--c-fg); font: 500 13px var(--f-body); cursor: pointer; transition: background .2s, border-color .2s; }
.gallery__zoom:hover { background: var(--c-soft); border-color: var(--c-fg); }
.gallery__zoom svg { width: 15px; height: 15px; }

/* ---------- Prototype veil ---------- */
.proto-veil { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; border: 0; border-radius: inherit; background: rgba(20, 16, 12, .42); -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9); color: #fff; font: inherit; cursor: pointer; transition: opacity .45s ease, backdrop-filter .45s ease; }
.proto-veil__tag { padding: 6px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.proto-veil__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 99px; background: #fff; color: #1d1712; font-size: 16px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.proto-veil__note { font-size: 13px; opacity: .85; }
.proto-veil:hover .proto-veil__btn, .proto-veil:focus-visible .proto-veil__btn { transform: scale(1.05); }
.proto-veil:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.proto-veil.is-gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .proto-veil, .proto-veil__btn { transition: none; } }