/* Case study pages. Loaded after styles.css and uses its tokens.
   Scroll-linked motion reads --p (0 to 1), set by case.js on each [data-scrub] element. */

.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 25; background: var(--lime); transform-origin: left; transform: scaleX(var(--page, 0)); }

.cnav { justify-content: space-between; }
.cnav__right { display: flex; align-items: center; gap: 24px; }
.cnav__back { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; text-decoration: none; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .cnav__back:hover { color: var(--lime); } }

/* ---------- opening ---------- */
.c-hero { height: 170vh; --p: 0; }
.c-hero__pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; align-items: flex-end; }
.c-hero__media {
  position: absolute; inset: 0; view-transition-name: case-media;
  clip-path: inset(calc(var(--p) * 11vh) calc(var(--p) * 7vw) round 2px);
}
.c-hero__media video, .c-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.1 - var(--p) * 0.1)); }
.c-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.25) 55%, rgba(10, 10, 10, 0.45) 100%); }
.c-hero__text { position: relative; width: 100%; padding: 0 var(--gutter) clamp(28px, 5vw, 64px); transform: translateY(calc(var(--p) * -9vh)); }
.c-hero__title { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(3rem, 10.5vw, 11.5rem); line-height: 0.88; letter-spacing: -0.03em; }
.c-hero__stand { max-width: 34ch; margin-top: clamp(18px, 2.4vw, 32px); font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.35; color: #e4e4e4; }
.c-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: clamp(20px, 2.6vw, 36px); font-size: 0.9375rem; }
.c-hero__facts div { display: flex; gap: 10px; }
.c-hero__skip { position: absolute; right: var(--gutter); bottom: clamp(28px, 5vw, 64px); gap: 10px; }
@media (max-width: 720px) { .c-hero__skip { position: static; margin-top: 24px; width: 100%; } }
.c-hero__facts dt { color: var(--muted); }

/* ---------- chapters ---------- */
.chapter { padding: clamp(64px, 6vw, 96px) 0 clamp(32px, 3vw, 48px); }
/* the pinned panel keeps a full screen of height with its graphic centred; start the next chapter inside its empty lower part */
.pin + .chapter { padding-top: 0; margin-top: -6vh; }
.chapter__grid { display: grid; grid-template-columns: 3fr 9fr; gap: 24px 32px; }
.chapter__label { position: sticky; top: 96px; align-self: start; color: var(--lime); font-weight: 600; }
.chapter__statement {
  font-family: var(--display); font-stretch: 82%; font-weight: 500;
  font-size: clamp(2rem, 5vw, 5rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance;
}
.js .chapter__statement .w { opacity: clamp(0.16, calc((var(--p, 0) - var(--t)) * 7 + 0.16), 1); }
.chapter__copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; margin-top: clamp(32px, 4.5vw, 64px); color: #d4d4d4; max-width: 1040px; }
.chapter__quote { margin-top: clamp(40px, 5vw, 72px); font-family: var(--display); font-stretch: 85%; font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.75rem); line-height: 1.18; max-width: 24ch; }

/* the idea: colour sweeps across the headline as it rises up the screen */
.js .chapter__statement--sweep { color: transparent; background: linear-gradient(90deg, var(--text) 0 50%, #333 50% 100%) 0 0 / 200% 100%; background-position-x: calc((1 - var(--p, 0)) * 100%); -webkit-background-clip: text; background-clip: text; }
.no-scrub .chapter__statement--sweep { background-position-x: 0; }
/* the film: the headline is uncovered from the left, once */
.js .chapter__statement--curtain { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-in-out); }
.js .chapter__statement--curtain.is-in, .no-scrub .chapter__statement--curtain { clip-path: inset(0 -2% 0 0); }

/* ---------- pinned graphic ---------- */
.pin { height: 220vh; --p: 0; }
.pin__inner { position: sticky; top: 0; height: 100dvh; display: grid; place-items: center; overflow: hidden; padding: 88px var(--gutter) 32px; }

/* two stories that meet (Khadijah Mellah) */
.converge { position: relative; width: min(1040px, 100%); height: min(64vh, 560px); }
.converge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.converge svg { clip-path: inset(0 0 calc((1 - min(var(--p) * 1.45, 1)) * 100%) 0); }
.converge path { fill: none; stroke: var(--lime); stroke-width: 2; vector-effect: non-scaling-stroke; }
.converge__side { position: absolute; top: 0; width: 38%; }
.converge__side--a { left: 0; transform: translateX(calc((1 - min(var(--p) * 2, 1)) * -6vw)); }
.converge__side--b { right: 0; text-align: right; transform: translateX(calc((1 - min(var(--p) * 2, 1)) * 6vw)); }
.converge__side b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: clamp(1.9rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; }
.converge__side span { display: block; margin-top: 12px; color: #c4c4c4; font-size: clamp(0.875rem, 1.1vw, 1.0625rem); line-height: 1.45; }
.converge__meet {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-family: var(--display); font-stretch: 78%; font-weight: 600; font-size: clamp(1.75rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -0.02em;
  opacity: clamp(0, calc((var(--p) - 0.62) * 5), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.62) * 5), 1)) * 18px));
}

/* loud to quiet (Abid Ambre Elixir) */
.quiet { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.quiet__loud { position: absolute; inset: 0; opacity: clamp(0, calc(1 - var(--p) * 2.6), 1); transform: scale(calc(1 + var(--p) * 0.5)); }
.quiet__loud span { position: absolute; font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(2.5rem, 9vw, 9rem); line-height: 1; letter-spacing: -0.02em; color: #3d3d3d; white-space: nowrap; }
.quiet__square { width: min(52vh, 76vw); aspect-ratio: 1; background: #6f1320; border-radius: 2px; display: grid; place-items: center; padding: 8%; transform: scale(clamp(0.3, calc(0.3 + var(--p) * 1.25), 1)); }
.quiet__square p { font-family: var(--display); font-stretch: 85%; font-weight: 500; font-size: clamp(1.125rem, 2.3vh + 0.5vw, 2rem); line-height: 1.2; text-align: center; opacity: clamp(0, calc((var(--p) - 0.6) * 5), 1); }

/* the list (Not Even Water) */
.litany { width: min(980px, 100%); }
.litany__q { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(2.75rem, 9vw, 8.5rem); line-height: 0.9; letter-spacing: -0.03em; opacity: clamp(0.22, calc(1 - var(--p) * 2.2), 1); }
.litany ul { margin-top: clamp(24px, 4vh, 48px); display: grid; gap: clamp(6px, 1.2vh, 14px); }
.litany li { font-family: var(--display); font-stretch: 82%; font-weight: 500; font-size: clamp(1.4rem, 4.2vh, 3rem); line-height: 1.08; letter-spacing: -0.015em; opacity: clamp(0.14, calc((var(--p) - var(--t)) * 14 + 0.14), 1); transform: translateX(calc((1 - clamp(0, calc((var(--p) - var(--t)) * 14), 1)) * 22px)); }
.litany li.is-brand { color: var(--lime); }

/* the weekend (Hadley Simpson) */
.chart { position: relative; width: min(1100px, 100%); height: min(62vh, 560px); }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart .chart__axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .chart__line { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; clip-path: inset(-10px calc((1 - min(var(--p) * 1.12, 1)) * 100%) -10px -10px); }
.chart__label { position: absolute; max-width: 15ch; font-size: clamp(0.8125rem, 1.15vw, 1.0625rem); line-height: 1.25; opacity: clamp(0, calc((var(--p) - var(--t)) * 12), 1); }
.chart__label b { display: block; font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(1.0625rem, 1.9vw, 1.75rem); line-height: 1.05; }
.chart__label span { color: #c4c4c4; }
.chart__y { position: absolute; left: 0; color: var(--muted); font-size: 0.75rem; }

/* beats in order (Porsche) and the donation's journey (As-Subah Outreach) */
.beats { width: min(1120px, 100%); }
.beats ol { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 32px; }
.beats ol::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--lime); transform-origin: left; transform: scaleX(min(var(--p) * 1.15, 1)); }
.beats li { opacity: clamp(0.14, calc((var(--p) - var(--t)) * 10 + 0.14), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - var(--t)) * 10), 1)) * 16px)); }
.beats li b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: clamp(1.75rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.beats li span { display: block; margin-top: 12px; color: #c4c4c4; font-size: clamp(0.875rem, 1.1vw, 1.0625rem); line-height: 1.45; max-width: 22ch; }
.beats__ends { display: flex; justify-content: space-between; gap: 24px; margin-bottom: clamp(20px, 4vh, 48px); font-family: var(--display); font-stretch: 78%; font-size: clamp(1.25rem, 2.4vw, 2.25rem); line-height: 1; color: var(--muted); }
.beats__ends b { font-weight: 600; }
.beats__ends b:last-child { color: var(--text); opacity: clamp(0.25, calc((var(--p) - 0.8) * 6 + 0.25), 1); }

/* built in the order it is cooked (The Fatty Patty) */
.stack { text-align: center; }
.stack ul { display: grid; gap: clamp(2px, 0.8vh, 10px); }
.stack li { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(2.5rem, 11vh, 7.5rem); line-height: 0.92; letter-spacing: -0.03em; opacity: clamp(0, calc((var(--p) - var(--t)) * 9), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - var(--t)) * 9), 1)) * -56px)); }
.stack p { margin-top: clamp(20px, 4vh, 44px); color: var(--lime); font-family: var(--display); font-stretch: 85%; font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 2rem); opacity: clamp(0, calc((var(--p) - var(--t)) * 9), 1); }

/* boxes passed along the line (As-Subah Outreach) */
.relay { width: min(1120px, 100%); --b: clamp(34px, 5vw, 60px); }
.relay__ends { display: flex; justify-content: space-between; gap: 24px; font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: clamp(1.9rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; }
.relay__ends b:last-child { opacity: clamp(0.22, calc((var(--p) - 0.72) * 6 + 0.22), 1); }
.relay__line { position: relative; height: calc(var(--b) + 28px); margin-top: clamp(20px, 4vh, 44px); border-bottom: 2px solid var(--lime); }
.relay__lane { position: absolute; left: 0; bottom: 6px; height: var(--b); width: calc(100% - var(--b) - var(--n) * (var(--b) + 8px)); transform: translateX(calc(clamp(0, calc((var(--p) - var(--t)) * 3.2), 1) * 100%)); }
.relay__lane i { position: absolute; left: 0; bottom: 0; width: var(--b); height: var(--b); background: #f4f4f0; border-radius: 2px; }
.relay__lane i::after { content: ''; position: absolute; left: 18%; right: 18%; top: 30%; height: 26%; background: #1362a1; }
.relay p { margin-top: clamp(18px, 3vh, 32px); color: #d4d4d4; font-size: clamp(1rem, 1.4vw, 1.25rem); opacity: clamp(0, calc((var(--p) - 0.8) * 6), 1); }

/* one bottle, three hands (Abid Ambre) */
.pass { width: min(1080px, 100%); }
.pass__track { position: relative; height: clamp(86px, 16vh, 150px); border-bottom: 1px solid var(--line); }
.pass__bottle { position: absolute; left: 0; bottom: 14px; width: 33.333%; height: 100%; transform: translateX(calc(var(--p) * 200%)); }
.pass__bottle::before { content: ''; position: absolute; left: 0; bottom: 0; width: clamp(34px, 4.4vw, 60px); height: 78%; border-radius: 3px; background: linear-gradient(180deg, #d9a441 0%, #8a4b16 70%, #3b1f0a 100%); }
.pass__bottle::after { content: ''; position: absolute; left: calc(clamp(34px, 4.4vw, 60px) * 0.3); bottom: 78%; width: calc(clamp(34px, 4.4vw, 60px) * 0.4); height: 18%; background: #1c1c1c; border: 1px solid #5c5c5c; }
.pass ol { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: clamp(18px, 3vh, 32px); }
.pass li { opacity: clamp(0.18, calc(1 - max(var(--p) - var(--c), var(--c) - var(--p)) * 3.2), 1); padding-right: 16px; }
.pass li b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: clamp(1.9rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -0.02em; }
.pass li span { display: block; margin-top: 10px; color: #c4c4c4; font-size: clamp(0.875rem, 1.1vw, 1.0625rem); line-height: 1.45; max-width: 22ch; }

/* photographs dealt onto a table (Kyrgyzstan) */
.deal { position: relative; width: min(1100px, 100%); height: min(72vh, 660px); }
.deal figure { position: absolute; left: 50%; top: 50%; width: clamp(150px, 27vw, 380px); padding: 8px 8px 0; background: #f4f4f0; border-radius: 2px; --k: clamp(0, calc((var(--p) - var(--t)) * 6), 1); opacity: var(--k); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + (1 - var(--k)) * 46vh)) rotate(calc(var(--r) + (1 - var(--k)) * 14deg)); }
.deal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.deal figcaption { padding: 8px 2px 10px; color: #1c1c1c; font-size: clamp(0.6875rem, 0.95vw, 0.875rem); font-weight: 500; }

/* still, then moving (BMW M3) */
.ignite { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 64px); width: min(1180px, 100%); }
.ignite__half { flex: 1; }
.ignite__half b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(2.75rem, 9.5vw, 9.5rem); line-height: 0.9; letter-spacing: -0.03em; }
.ignite__half span { display: block; margin-top: 14px; color: #c4c4c4; font-size: clamp(0.875rem, 1.1vw, 1.0625rem); line-height: 1.45; max-width: 26ch; }
.ignite__half--still { text-align: right; opacity: clamp(0.22, calc(1 - (var(--p) - 0.42) * 5), 1); }
.ignite__half--still span { margin-left: auto; }
.ignite__half--move { opacity: clamp(0.14, calc((var(--p) - 0.5) * 5 + 0.14), 1); transform: translateX(calc((1 - clamp(0, calc((var(--p) - 0.5) * 3), 1)) * 7vw)) skewX(-7deg); }
.ignite__btn { position: relative; flex: none; width: clamp(48px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; border: 2px solid #5c5c5c; transform: scale(calc(0.88 + clamp(0, calc((var(--p) - 0.36) * 8), 1) * 0.12)); }
.ignite__btn::after { content: ''; position: absolute; inset: 16%; border-radius: 50%; background: #d21f2b; opacity: clamp(0, calc((var(--p) - 0.36) * 8), 1); }

/* built for, filmed on (Porsche 911 GT3 RS) */
.swap { width: min(1080px, 100%); }
.swap__heads, .swap li { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(24px, 5vw, 80px); }
.swap__heads { color: var(--muted); font-size: 0.9375rem; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.swap li { padding: clamp(12px, 2.4vh, 26px) 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-stretch: 78%; font-weight: 600; font-size: clamp(1.6rem, 4.6vw, 4.25rem); line-height: 1; letter-spacing: -0.02em; --k: clamp(0, calc((var(--p) - var(--t)) * 8), 1); }
.swap s { position: relative; justify-self: start; text-decoration: none; color: color-mix(in srgb, var(--text), #4a4a4a calc(var(--k) * 100%)); }
.swap s::after { content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; background: var(--lime); transform-origin: left; transform: scaleX(var(--k)); }
.swap b { font-weight: 600; opacity: var(--k); transform: translateX(calc((1 - var(--k)) * 24px)); }

/* the sun goes down (Desert Safari) */
.dusk { position: relative; width: min(1120px, 100%); height: min(66vh, 600px); overflow: hidden; border-radius: 2px; background: linear-gradient(180deg, #04050b 0%, #1a1222 60%, #3a1e1c 100%); }
.dusk::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #5f7f98 0%, #c9a77c 100%); opacity: clamp(0, calc(1 - var(--p) * 2.1), 1); }
.dusk::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 64% 72%, #f08a3c 0%, #a0402c 38%, transparent 70%); opacity: clamp(0, calc(1 - max(var(--p) - 0.4, 0.4 - var(--p)) * 3.4), 1); }
.dusk__sun { position: absolute; z-index: 1; left: 64%; top: calc(6% + var(--p) * 70%); width: clamp(64px, 10vw, 140px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, #fff6d8 0%, #ffc061 55%, #f0702a 100%); box-shadow: 0 0 90px 20px rgba(255, 150, 60, 0.45); }
.dusk__dune { position: absolute; z-index: 2; inset: auto 0 -2px 0; height: 38%; }
.dusk__dune svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dusk__dune path { fill: color-mix(in srgb, #b9824e, #0a0a0c calc(min(var(--p) * 1.5, 1) * 100%)); }
.dusk__dune i { position: absolute; top: 42%; width: 6px; height: 6px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 14px 4px rgba(255, 190, 90, 0.55); opacity: clamp(0, calc((var(--p) - 0.58) * 6), 1); }
.dusk__words { position: absolute; z-index: 3; left: clamp(20px, 4vw, 56px); top: clamp(20px, 6vh, 56px); display: grid; }
.dusk__words li { grid-area: 1 / 1; --k: clamp(0, calc(1 - max(var(--p) - var(--c), var(--c) - var(--p)) * 6), 1); opacity: var(--k); transform: translateY(calc((var(--c) - var(--p)) * 90px)); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.dusk__words b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(2.75rem, 9vw, 8rem); line-height: 0.9; letter-spacing: -0.03em; }
.dusk__words span { display: block; margin-top: 12px; font-size: clamp(0.9375rem, 1.2vw, 1.125rem); line-height: 1.45; max-width: 26ch; }

/* shot on a phone (Mercedes-Benz showroom): the film plays back inside a phone turned on its side */
.phone { width: min(1040px, 100%, calc((100dvh - 300px) * 19.5 / 9)); }
.phone__body { position: relative; aspect-ratio: 19.5 / 9; padding: clamp(8px, 1vw, 13px); border-radius: clamp(20px, 3.4vw, 44px); background: #1a1a1a; box-shadow: inset 0 0 0 2px #3a3a3a, 0 30px 80px rgba(0, 0, 0, 0.5); }
.phone__island { position: absolute; z-index: 2; left: clamp(18px, 2.6vw, 34px); top: 50%; translate: 0 -50%; width: clamp(9px, 1.1vw, 14px); height: clamp(44px, 7vw, 92px); border-radius: 999px; background: #000; }
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: clamp(13px, 2.5vw, 32px); background: #000; }
.phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: clamp(0, calc((var(--p) - var(--c, -1)) * 6), 1); }
.phone__time { position: absolute; z-index: 2; left: 50%; top: 6%; translate: -50% 0; padding: 4px 10px; border-radius: 999px; background: #d21f2b; color: #fff; font-size: clamp(0.6875rem, 1vw, 0.875rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.phone__bar { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 8%; height: 3px; background: rgba(255, 255, 255, 0.28); }
.phone__bar::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p)); }
.phone__shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(20px, 3.5vh, 40px); }
.phone__shots li { --k: clamp(0, calc(1 - max(var(--p) - var(--c), var(--c) - var(--p)) * 3.2), 1); opacity: calc(0.28 + var(--k) * 0.72); }
.phone__shots b { display: block; font-family: var(--display); font-stretch: 78%; font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -0.02em; }
.phone__shots span { display: block; margin-top: 8px; color: #c4c4c4; font-size: clamp(0.8125rem, 1vw, 1rem); line-height: 1.4; max-width: 22ch; }

/* one needle, two scales (Mille Miglia): a rev counter that also reads as the espresso machine's bar gauge */
.rev { width: min(900px, 100%, calc((100dvh - 320px) * 1000 / 620)); }
.rev__dial { display: block; width: 100%; height: auto; overflow: visible; }
.rev__track { fill: none; stroke: #3a3a3a; stroke-width: 14; }
.rev__red { fill: none; stroke: #d21f2b; stroke-width: 14; }
.rev__inner { fill: none; stroke: #333; stroke-width: 2; }
.rev__nine { fill: var(--lime); }
.rev__tick { stroke: #555; stroke-width: 3; }
.rev__tick--major { stroke: #8a8a8a; stroke-width: 5; }
.rev__rpm, .rev__bar { font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 58px; fill: var(--text); text-anchor: middle; dominant-baseline: central; opacity: clamp(0.28, calc((var(--p) - var(--t)) * 10 + 0.28), 1); }
.rev__bar { font-size: 40px; fill: var(--lime); }
.rev__needle { fill: var(--lime); transform-box: view-box; transform-origin: 500px 400px; transform: rotate(calc(-120deg + var(--p) * 240deg)); }
.rev__hub { fill: #b5742c; stroke: #0a0a0a; stroke-width: 6; }
.rev__legend { display: flex; justify-content: space-between; gap: 24px; margin-top: -3%; padding: 0 8%; color: var(--muted); font-size: 0.9375rem; }
.rev__legend b { display: block; color: var(--text); font-weight: 600; }
.rev__legend span:last-child { text-align: right; }
.rev__legend--bar { color: var(--lime); }
.rev__note { margin-top: clamp(18px, 3vh, 32px); text-align: center; font-family: var(--display); font-stretch: 85%; font-weight: 500; font-size: clamp(1.125rem, 2.2vw, 2rem); line-height: 1.2; text-wrap: balance; }

/* a court at the foot of the towers (Padel Pro): the skyline rises, then the ball crosses the net */
.court { width: min(1000px, 100%); --q: clamp(0, calc((var(--p) - 0.58) * 2.4), 1); }
.court__sky { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1.2vw, 14px); height: min(42vh, 380px); padding: 0 6%; }
.court__sky i { display: block; flex: none; width: calc(clamp(18px, 4.2vw, 52px) * var(--w, 1)); height: var(--h); background: #262626; border-top: 2px solid #484848; transform-origin: bottom; transform: scaleY(clamp(0, calc((var(--p) - var(--t)) * 4), 1)); }
.court__sky .court__ring { width: clamp(44px, 8.5vw, 112px); height: clamp(44px, 8.5vw, 112px); margin-bottom: clamp(10px, 2vh, 24px); border: clamp(9px, 1.8vw, 24px) solid #2e2e2e; border-top-color: #4a4a4a; border-radius: 50%; background: transparent; transform-origin: center; transform: scale(clamp(0, calc((var(--p) - var(--t)) * 4), 1)); }
.court__sky .court__twin { background: #2c2c2c; }
.court__twin--a { clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%); }
.court__twin--b { clip-path: polygon(0 0, 100% 16%, 100% 100%, 0 100%); }
.court__floor { position: relative; height: clamp(110px, 22vh, 210px); }
.court__floor::before { content: ''; position: absolute; inset: 0; background: #1d4fa3; clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.court__floor::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: rgba(255, 255, 255, 0.8); }
.court__net { position: absolute; z-index: 1; left: 16%; right: 16%; top: 42%; height: clamp(22px, 4vh, 40px); border-top: 3px solid #fff; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 1px, transparent 1px 7px); }
.court__ball { position: absolute; z-index: 2; left: calc(14% + var(--q) * 72%); bottom: calc(14% + var(--q) * 40%); width: clamp(12px, 1.6vw, 20px); aspect-ratio: 1; border-radius: 50%; background: var(--lime); translate: -50% 0; transform: translateY(calc(var(--q) * (var(--q) - 1) * 4 * clamp(80px, 14vh, 140px))); opacity: clamp(0, calc(var(--q) * 10), 1); }
.court__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(20px, 3.5vh, 40px); }
.court__labels li { --k: clamp(0, calc(1 - max(var(--p) - var(--c), var(--c) - var(--p)) * 3), 1); opacity: calc(0.28 + var(--k) * 0.72); }
.court__labels b { display: block; font-family: var(--display); font-stretch: 78%; font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -0.02em; }
.court__labels span { display: block; margin-top: 8px; color: #c4c4c4; font-size: clamp(0.8125rem, 1vw, 1rem); line-height: 1.4; }

/* ---------- filmstrip ---------- */
.reel { height: 300vh; --p: 0; --shift: 0; }
.reel__pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; align-items: center; }
.reel__track { display: flex; gap: clamp(14px, 2vw, 28px); padding: 0 var(--gutter); transform: translateX(calc(var(--p) * var(--shift) * -1px)); will-change: transform; }
.reel__track figure { flex: none; width: min(64vw, 920px); }
.reel__track img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; background: var(--surface); }
.reel__track figcaption { margin-top: 12px; color: #c4c4c4; font-size: 0.9375rem; }
/* the pinned reel keeps a full screen of height with the stills centred; start the film inside its empty lower part
   (still height = figure width / 1.6, plus room for a two-line caption) */
html:not(.no-scrub) .reel + .watch { margin-top: min(0px, calc((min(64vw, 920px) / 1.6 + 112px - 100dvh) / 2)); }

/* ---------- watch + next ---------- */
.watch { padding: clamp(24px, 2.6vw, 40px) 0 clamp(40px, 4.5vw, 64px); --h: clamp(260px, min(50vw, 100svh - 160px), 780px); }
.watch .film { width: 100%; }
.watch .film__play { display: block; white-space: nowrap; opacity: 1; transform: none; left: 50%; bottom: 50%; translate: -50% 50%; padding: 16px 28px; font-size: 1.0625rem; }
.next { display: block; text-decoration: none; border-top: 1px solid var(--line); padding: clamp(36px, 3.5vw, 56px) 0 clamp(48px, 7vw, 104px); }
.next__grid { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.next small { display: block; color: var(--muted); font-size: 0.9375rem; margin-bottom: 14px; }
.next b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(2.5rem, 8vw, 8rem); line-height: 0.9; letter-spacing: -0.03em; transition: color 250ms ease; }
.next img { width: clamp(120px, 22vw, 340px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .next:hover b { color: var(--lime); }
  .next:hover img { transform: scale(1.05) rotate(-1.5deg); }
}

/* ---------- case studies index ---------- */
.lib { padding: clamp(112px, 12vw, 180px) 0 clamp(48px, 7vw, 104px); }
.lib__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 4vw, 72px); align-items: end; }
.lib__title { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(3.9rem, 11vw, 12rem); line-height: 0.86; letter-spacing: -0.03em; }
.lib__title i { font-style: normal; color: var(--lime); }
.lib__stand { max-width: 44ch; margin-top: clamp(24px, 3vw, 44px); font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.45; color: #d4d4d4; }
/* showreel: hard cuts between the films' preview loops; the bar fills until the next cut */
.showreel { display: block; text-decoration: none; }
.showreel__frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--surface); }
.showreel video { width: 100%; height: 100%; object-fit: cover; }
.showreel__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
.showreel.is-running .showreel__bar { animation: reel-bar var(--cut, 3200ms) linear; }
@keyframes reel-bar { to { transform: scaleX(1); } }
.showreel__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; font-size: 0.9375rem; color: var(--muted); }
.showreel__cap b { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.1; color: var(--text); transition: color 200ms ease; }
.showreel__cap > span { flex: none; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .showreel:hover .showreel__cap b { color: var(--lime); } }
@media (max-width: 1000px) { .lib__top { grid-template-columns: 1fr; } }
.card { text-decoration: none; }
.card .film__meta b { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.1; transition: color 200ms ease; }
.card__stand { display: block; margin-top: 6px; color: #c4c4c4; font-size: 0.9375rem; line-height: 1.5; max-width: 46ch; }
@media (hover: hover) and (pointer: fine) { .card:hover .film__meta b { color: var(--lime); } }

/* ---------- reduced motion: no pinning, everything in its end state ---------- */
.no-scrub .c-hero, .no-scrub .pin, .no-scrub .reel { height: auto; --p: 1; }
.no-scrub .c-hero__pin, .no-scrub .pin__inner, .no-scrub .reel__pin { position: static; }
.no-scrub .c-hero { --p: 0; }
.no-scrub .pin__inner { height: auto; min-height: 70vh; }
.no-scrub .reel__pin { height: auto; overflow-x: auto; padding: 40px 0; }
.no-scrub .reel__track { transform: none; }
.no-scrub .chapter__statement .w { opacity: 1; }
.no-scrub .progress { display: none; }

@media (max-width: 900px) {
  .chapter__grid { grid-template-columns: 1fr; }
  .chapter__label { position: static; }
  .chapter__copy { grid-template-columns: 1fr; }
  .pin { height: 210vh; }
  .converge { height: min(70vh, 520px); }
  .converge__side { width: 46%; }
  .reel__track figure { width: 82vw; }
  .chart { height: min(58vh, 460px); }
  .chart__label { max-width: 12ch; }
  .beats ol { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .deal figure { width: 46vw; }
  .deal figure:nth-child(odd) { --x: -52%; }
  .deal figure:nth-child(even) { --x: 52%; }
  .deal figure:nth-child(3) { --x: 0%; }
  .pass li span { display: none; }
  .ignite { flex-direction: column; gap: 24px; }
  .ignite__half, .ignite__half--still { text-align: center; }
  .ignite__half span, .ignite__half--still span { margin: 12px auto 0; }
  .phone__shots { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .phone__shots span, .court__labels span { display: none; }
  .rev__legend { font-size: 0.8125rem; padding: 0 2%; }
  .court__sky { height: min(32vh, 280px); }
  .court__floor { height: clamp(90px, 16vh, 150px); }
  .court__labels { gap: 10px; }
  .court__labels b { font-size: 1.0625rem; }
  .cnav .btn { display: none; }
  .next__grid { flex-direction: column; align-items: flex-start; }
}

/* laptops (13–14in): a step smaller, matching styles.css */
@media (min-width: 1001px) and (max-width: 1600px) {
  .c-hero__title { font-size: 8.6vw; }
  .lib__title { font-size: 9.6vw; }
  .c-hero__stand { font-size: 1.4vw; }
  .chapter__statement { font-size: 4vw; }
  .chapter__quote { font-size: 2.3vw; }
  .converge__side b { font-size: 4vw; }
  .quiet__loud span, .litany__q { font-size: 7.4vw; }
  .beats li b { font-size: 3.4vw; }
  .rev__note { font-size: 1.7vw; }
  .phone__shots b, .court__labels b { font-size: 1.9vw; }
}