/* ==========================================================================
   STUDIO 20 — premium layer
   Loaded after main.css on every non-admin page. Two kinds of rule live here:
     · layouts (gallery grid, numbered rows, ticker, footer wordmark, loader) — these work with no JavaScript;
     · motion — everything that hides or pre-positions something is gated on `html.motion`, which boot.js sets only
       when the visitor allows motion AND motion.js is about to run. Without it the page is simply the static design.
   ========================================================================== */

/* Page transitions -------------------------------------------------------------------------------------------------- */
/* Where the browser supports cross-document view transitions, the new page wipes up over the old one while that
   one eases back. Elsewhere navigation is simply instant, as it always was. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 0.7s var(--ease) both vt-recede; }
  ::view-transition-new(root) { animation: 0.7s var(--ease) both vt-wipe; }
  ::view-transition-group(site-header) { animation-duration: 0.4s; }
}
@keyframes vt-recede { to { opacity: 0.35; transform: scale(0.97) translateY(-2%); } }
@keyframes vt-wipe { from { clip-path: inset(100% 0 0 0); transform: translateY(3%); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* Loading screen ---------------------------------------------------------------------------------------------------- */
/* The loader is a copy of the hero (same frame, type and position) with the "20" replaced by a counter that rolls up
   from 00 as the page loads. When it lands the screen fades and the real hero is left behind, lined up exactly. It exists
   only while boot.js has put `intro-run` on <html>; otherwise it is display:none. */
.loader { display: none; }
html.intro-run { overflow: hidden; scrollbar-gutter: stable; }
html.intro-run .loader { display: block; position: fixed; inset: 0; z-index: 5000; padding-top: var(--header-h); background: var(--bg); }
.loader.is-leaving { opacity: 0; transition: opacity 0.9s var(--ease); pointer-events: none; }
.loader__hero { opacity: 0; transition: opacity 0.6s var(--ease); }
.loader.is-ready .loader__hero { opacity: 1; }
/* These are only here to hold the hero's layout; the real ones fade in after the loader has gone. */
/* The real title is an <h1>, which the base styles set in the display face; the copy is a <div>. */
.loader .hero__title { font-family: var(--font-display); }
.loader__spacer { visibility: hidden; }
.loader__pill { pointer-events: none; }
.loader__dot { background: var(--red-2); animation: pulse-red 1.4s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(255, 47, 71, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(255, 47, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 47, 71, 0); } }
.loader__state--done { display: none; }
.loader.is-done .loader__state--wait { display: none; }
.loader.is-done .loader__state--done { display: inline; color: var(--red-2); }
/* The counter. Each digit is a window the height of one line of the title; a ghost digit (the final value, invisible)
   gives the window the right width and baseline, and the strip of numbers slides behind it. */
.loader__digit { position: relative; clip-path: inset(0 -0.14em); transition: color 0.3s; }
.loader__ghost { visibility: hidden; }
.loader__strip { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
.loader__strip > span { display: block; }
.loader__strip--ones { transform: translateY(calc(var(--n, 0) * -0.94em)); }
.loader__strip--tens { transform: translateY(calc(var(--tens, 0) * -0.94em)); }
/* No glow here: the words are masks (overflow:hidden), which would crop any shadow into a box. */
.loader.is-done .loader__digits { color: var(--red-2); }
/* The loader's letters hold still; the real hero's ripple of light is for the real hero. */
html.motion .loader__hero:not(.is-lit) .hl { animation: none; }
/* Progress, along the bottom between the corner brackets. */
.loader__bar { position: absolute; left: 50%; bottom: calc(var(--frame) + 2.6rem); width: min(520px, calc(100% - 2 * var(--frame) - 6rem)); height: 2px; margin-left: calc(min(520px, calc(100% - 2 * var(--frame) - 6rem)) / -2); background: rgba(255, 255, 255, 0.1); }
.loader__bar > span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--red), var(--red-2)); box-shadow: 0 0 14px var(--red-glow); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* Focus: while one card in a row is hovered, its neighbours step back ------------------------------------------------- */
@media (hover: hover) {
  .staff-grid:has(.staff-card:hover) .staff-card:not(:hover),
  .card-grid:has(.class-card:hover) .class-card:not(:hover),
  .plan-grid:has(.plan-card:hover) .plan-card:not(:hover) { opacity: 0.55; filter: saturate(0.75); }
  .staff-card, .class-card { transition: opacity 0.4s, filter 0.4s, transform 0.4s var(--ease), border-color 0.3s; }
}

/* Film grain -------------------------------------------------------------------------------------------------- */
/* A fine, slowly shifting grain over everything. It sits above the page but takes no clicks, and is subtle enough
   that it reads as texture rather than noise. */
html.motion body::after {
  content: ""; position: fixed; inset: -12%; z-index: 4000; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px; animation: grain 0.9s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Headings: words rise out of a mask ----------------------------------------------------------------------------- */
html.motion :is(.display, .display-sm, .h2):not(.split-heading):not(.hero__title) { opacity: 0; }
html.motion .split-heading .w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.08em 0.06em 0.18em; margin: -0.08em -0.06em -0.18em; }
html.motion .split-heading .w__i { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.05s var(--ease); transition-delay: calc(var(--i, 0) * 65ms); }
html.motion .split-heading.is-in .w__i { transform: none; }
/* The red words get one pass of light across them as they settle. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  html.motion .split-heading .text-red .w__i {
    background: linear-gradient(100deg, var(--red-2) 0 40%, #ffc7ce 50%, var(--red-2) 60% 100%) 100% 0 / 280% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
  html.motion .split-heading.is-in .text-red .w__i { animation: shine 1.9s var(--ease) 0.7s 1 both; }
}
@keyframes shine { to { background-position: 0 0; } }

/* Eyebrows draw their rule in */
html.motion .eyebrow.reveal::before { width: 30px; transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.2s; }
html.motion .eyebrow.reveal.is-visible::before { transform: none; }

/* Hero: the wordmark responds to the pointer ----------------------------------------------------------------------- */
.hl { display: inline-block; }
html.motion .hero__inner { will-change: transform, opacity; }
/* A slow red haze drifting behind the type, so the black is never quite still. */
html.motion .hero::before { content: ""; position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(38% 42% at 24% 62%, rgba(224, 19, 43, 0.11), transparent 70%), radial-gradient(34% 36% at 78% 34%, rgba(224, 19, 43, 0.08), transparent 70%); animation: haze 20s ease-in-out infinite alternate; }
@keyframes haze { to { transform: translate3d(4%, -3%, 0) scale(1.1); } }
/* With no pointer to follow, a ripple of light passes through the letters every so often. */
html.motion .hero:not(.is-lit) .hl { animation: hl-sweep 11s ease-in-out infinite; animation-delay: calc(4.5s + var(--i, 0) * 110ms); }
@keyframes hl-sweep { 0%, 13%, 100% { color: #fff; } 6.5% { color: var(--red-2); } }
html.motion .hero.is-lit .hl { color: color-mix(in srgb, var(--red-2) calc(var(--k, 0) * 100%), #fff); translate: 0 calc(var(--k, 0) * -0.035em); }

/* Hero entrance: as the loading screen fades (boot.js / motion.js add `intro-reveal`) the parts of the hero the loader did not
   show come in around the wordmark. Every keyframe animates TO the element's natural style, so if the class is ever left on or
   never removed nothing is stuck hidden. Scoped to [data-hero] so the loader's own copy of the hero is left alone. */
html.intro-reveal [data-hero] .hero-status { animation: intro-up 0.9s var(--ease) 0.35s both; }
html.intro-reveal [data-hero] .hero__lead { animation: intro-up 0.9s var(--ease) 0.5s both; }
html.intro-reveal [data-hero] .btn-row { animation: intro-up 0.9s var(--ease) 0.65s both; }
html.intro-reveal [data-hero] .hero-dock { animation: intro-fade 1.1s var(--ease) 0.9s both; }
html.intro-reveal .site-header { animation: intro-drop 1s var(--ease) 0.5s both; }
html.intro-reveal [data-hero] .hero__glow { animation: intro-glow 3s var(--ease) 0.2s both; }
@keyframes intro-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes intro-glow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

/* Images: curtain reveal, parallax, and the video that grows into place ------------------------------------------------ */
html.motion .curtain { clip-path: inset(0 0 100% 0 round var(--radius-lg)); transition: clip-path 1.3s var(--ease); }
html.motion .curtain.is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
html.motion .curtain.is-done { clip-path: none; }
/* The hero photo on inner pages runs edge to edge, so its curtain has square corners. */
html.motion .page-hero__media.curtain { clip-path: inset(0 0 100% 0); }
html.motion .page-hero__media.curtain.is-in { clip-path: inset(0 0 0 0); }
html.motion .page-hero__media.curtain.is-done { clip-path: none; }
html.motion .parallax { scale: 1.16; transition: scale 1.8s var(--ease); will-change: translate; }
html.motion .curtain:not(.is-in) .parallax { scale: 1.45; }
html.motion .media-frame:hover img, html.motion .feature:hover img { transform: none; scale: 1.22; }

/* Gallery — a stage that the page scroll carries sideways -------------------------------------------------------------- */
.gallery {
  position: relative; background: #050506;
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --card-h: clamp(300px, calc(100svh - 24.5rem), 520px);
  --stagger: clamp(0.75rem, 5.5vh, 3rem);
  --cw: min(76vw, calc(var(--card-h) * 0.75));
}
/* clip, not hidden: a hidden box can still be scrolled by focus, which would drag the stage sideways under the transform */
.gallery__pin { position: relative; overflow: hidden; overflow: clip; padding-block: var(--section); }
.gallery__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.gallery__count { display: none; margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 5rem); font-weight: 900; line-height: 0.9; color: #fff; font-variant-numeric: tabular-nums; }
.gallery__of { font-size: 0.4em; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.gallery__list { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1rem; width: min(var(--container), 100% - var(--gutter) * 2); margin: 0 auto; padding: 0; list-style: none; }
.gallery__item { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); isolation: isolate; }
.gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04); transition: scale 1s var(--ease), filter 0.5s; -webkit-user-drag: none; }
.gallery__item:hover img, .gallery__item:focus-visible img { scale: 1.06; filter: saturate(1) contrast(1.04); }
.gallery__num { position: absolute; top: 1rem; left: 1.1rem; z-index: 2; font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
.gallery__label { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: 0.25rem; padding: 4rem 1.15rem 1.15rem; background: linear-gradient(0deg, rgba(7, 7, 8, 0.95), rgba(7, 7, 8, 0.6) 55%, transparent); }
.gallery__label strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.gallery__label span { font-size: 0.84rem; line-height: 1.45; color: var(--text-2); }
.gallery__bar { display: none; }
/* Pinned: the section is made tall, the stage sticks to the screen, and the list slides as you scroll through it. */
.gallery.is-pinned { height: var(--pin-h); }
.gallery.is-pinned .gallery__pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 3.2vh, 2.25rem); height: 100vh; height: 100svh; padding: calc(var(--header-h) + 0.5rem) 0 1.5rem; }
.gallery.is-pinned .gallery__list { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.75rem); width: max-content; max-width: none; margin: 0; padding: 0 var(--edge) var(--stagger); will-change: transform; }
.gallery.is-pinned .gallery__cell { flex: none; width: var(--cw); }
.gallery.is-pinned .gallery__cell:nth-child(even) { translate: 0 var(--stagger); }
.gallery.is-pinned .gallery__item img { inset: 0 auto 0 -16%; width: 132%; max-width: none; will-change: translate; }
.gallery.is-pinned .gallery__count { display: block; }
.gallery.is-pinned .gallery__bar { position: relative; display: block; height: 2px; margin-inline: var(--edge); background: rgba(255, 255, 255, 0.12); }
.gallery.is-pinned .gallery__bar span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--red), var(--red-2)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 14px var(--red-glow); }

/* Hand-made touches ---------------------------------------------------------------------------------------------------- */
/* A scribbled note in marker pen. Used sparingly: it is the one thing on the page that looks like a person wrote it. */
.note { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-family: "Permanent Marker", "Segoe Print", "Comic Sans MS", cursive; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.1; color: var(--red-2); rotate: -4deg; }
.note .icon { rotate: 55deg; }
.note--arrow { gap: 0.75rem; }
.note--arrow::after { content: ""; width: 64px; height: 44px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M3 6 C 14 34, 38 40, 58 24 M47 21 L59 23 L56 35' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M3 6 C 14 34, 38 40, 58 24 M47 21 L59 23 L56 35' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* A hand-drawn underline that draws itself in once the heading has arrived. */
.scribble { position: relative; display: inline-block; }
.scribble::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.2em; height: 0.3em; background: var(--red-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 28 4, 52 17, 84 8 S 140 16, 170 7 S 192 9, 197 6' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 28 4, 52 17, 84 8 S 140 16, 170 7 S 192 9, 197 6' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html.motion .scribble::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) 0.7s; }
html.motion .split-heading.is-in .scribble::after, html.motion .scribble.is-in::after { clip-path: inset(0 0 0 0); }
/* A round sticker with its text running round the edge. */
.sticker { --sticker: 140px; position: relative; display: inline-grid; place-items: center; width: var(--sticker); aspect-ratio: 1; border-radius: 50%; background: var(--red); color: #fff; rotate: -8deg; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.8); }
.sticker__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sticker-spin 18s linear infinite; }
.sticker__text { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; fill: #fff; }
.sticker__core { position: relative; display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #0a0a0c; color: #fff; }
@keyframes sticker-spin { to { transform: rotate(360deg); } }
/* Tape across the join between two sections. */
.tape { position: relative; z-index: 4; margin: -1.4rem 0; padding: 1.8rem 0; overflow: clip; pointer-events: none; }
.tape__band { width: 106%; margin-left: -3%; padding: 0.75rem 0; overflow: hidden; background: var(--red); color: #fff; rotate: -1.6deg; box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.9); }
.tape__track { display: flex; width: max-content; animation: tape 46s linear infinite; }
.tape__group { display: flex; flex: none; align-items: center; gap: 1.5rem; padding-right: 1.5rem; }
.tape__group span { font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.55rem); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tape__group i { display: grid; color: #0a0a0c; }
@keyframes tape { to { transform: translateX(-50%); } }
.section__tools { display: flex; align-items: center; gap: 1.75rem; }

/* Drone tour: a viewfinder ------------------------------------------------------------------------------------------------------------- */
.cinema { position: relative; overflow: clip; background: #050506; padding-top: var(--section); }
.cinema__intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.cinema__intro .eyebrow { margin: 0; }
/* --p (0 to 1, set from the scroll position by motion.js) opens the frame out from a rounded card to the full screen width. */
.cinema__stage { position: relative; margin: 0; clip-path: inset(0 calc((1 - var(--p, 1)) * 11vw) round calc((1 - var(--p, 1)) * 30px)); }
.cinema__stage .video { max-height: 90svh; margin: 0; }
.cinema__stage .video__poster { filter: saturate(0.9) contrast(1.06); }
.cinema__shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(5, 5, 6, 0.55)), linear-gradient(180deg, rgba(5, 5, 6, 0.5), transparent 26%, transparent 40%, rgba(5, 5, 6, 0.92)); }
.cinema__hud { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: clamp(0.62rem, 1vw, 0.76rem); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); pointer-events: none; }
.cinema__hud--tl { top: clamp(1.5rem, 3.4vw, 2.6rem); left: clamp(2.2rem, 4.4vw, 3.6rem); }
.cinema__hud--tr { top: clamp(1.5rem, 3.4vw, 2.6rem); right: clamp(2.2rem, 4.4vw, 3.6rem); }
.cinema__hud i { width: 9px; height: 9px; border-radius: 50%; background: var(--red-2); animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: 0.15; } }
.cinema__corner { position: absolute; z-index: 2; width: clamp(22px, 3vw, 40px); height: clamp(22px, 3vw, 40px); border: 2px solid rgba(255, 255, 255, 0.75); pointer-events: none; }
.cinema__corner--tl { top: clamp(0.9rem, 2vw, 1.6rem); left: clamp(0.9rem, 2vw, 1.6rem); border-right: 0; border-bottom: 0; }
.cinema__corner--tr { top: clamp(0.9rem, 2vw, 1.6rem); right: clamp(0.9rem, 2vw, 1.6rem); border-left: 0; border-bottom: 0; }
.cinema__corner--bl { bottom: clamp(0.9rem, 2vw, 1.6rem); left: clamp(0.9rem, 2vw, 1.6rem); border-right: 0; border-top: 0; }
.cinema__corner--br { bottom: clamp(0.9rem, 2vw, 1.6rem); right: clamp(0.9rem, 2vw, 1.6rem); border-left: 0; border-top: 0; }
.cinema__title { position: absolute; inset-inline: 0; bottom: clamp(2rem, 4vw, 3.4rem); z-index: 2; width: max-content; max-width: 92%; margin-inline: auto; font-size: clamp(2.4rem, 7.2vw, 7rem); line-height: 0.92; text-align: center; pointer-events: none; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5); }
.cinema__stage:has(iframe) :is(.cinema__title, .cinema__hud, .cinema__corner, .cinema__shade) { display: none; }
.video__play { position: absolute; left: 50%; top: 50%; z-index: 3; translate: -50% -50%; display: grid; place-items: center; width: clamp(128px, 15vw, 200px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; }
.video__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sticker-spin 16s linear infinite; }
.video__ring text { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; fill: #fff; }
.video__disc { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 10px rgba(224, 19, 43, 0.3), 0 24px 60px -10px var(--red-glow); transition: scale 0.4s var(--ease), background 0.2s; }
.video__disc .icon { margin-left: 4px; }
.video__play:hover .video__disc, .video__play:focus-visible .video__disc { scale: 1.12; background: var(--red-2); }

/* Why Studio 20: a pinboard ---------------------------------------------------------------------------------------------------------------- */
.why { overflow: clip; }
.why__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.why__text .display { font-size: clamp(2.8rem, 6.2vw, 5.8rem); line-height: 0.96; }
.why__text .lead { max-width: 32ch; margin-top: 1.5rem; }
.why__text .note { margin-top: 1.75rem; }
.collage { position: relative; aspect-ratio: 1 / 1.08; min-height: 380px; }
.collage::before { content: ""; position: absolute; left: -3%; top: 7%; width: 62%; height: 84%; border-radius: var(--radius-lg); background: var(--red); }
.collage__fig { position: absolute; margin: 0; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9); }
.collage__fig img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.collage__a { left: 2%; top: 3%; width: 62%; height: 84%; }
.collage__b { right: 0; top: 0; width: 38%; height: 41%; rotate: 4deg; }
.collage__c { right: 3%; bottom: 0; width: 45%; height: 46%; rotate: -3.5deg; }
.collage .sticker { position: absolute; left: 47%; bottom: 3%; z-index: 3; --sticker: clamp(104px, 11vw, 150px); }

@media (max-width: 860px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .collage { width: min(100%, 520px); margin-inline: auto; }
}
@media (max-width: 700px) {
  /* On a phone the headline sits under the picture instead of on it, so it never fights the play button. */
  .cinema__stage { clip-path: inset(0 calc((1 - var(--p, 1)) * 4vw) round calc((1 - var(--p, 1)) * 20px)); }
  .cinema__title { position: static; width: auto; max-width: none; padding: 1.4rem var(--gutter) 0; font-size: clamp(2.4rem, 12vw, 3.6rem); text-shadow: none; }
  .cinema__hud--tr { display: none; }
  .cinema__hud--tl { left: 1.6rem; }
  .cinema__shade { background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(5, 5, 6, 0.5)), linear-gradient(180deg, rgba(5, 5, 6, 0.45), transparent 30%); }
  .cinema { padding-bottom: 1rem; }
}

/* Ladies-only gym: the photo bleeds off the screen --------------------------------------------------------------------------------------- */
.ladies { position: relative; overflow: clip; isolation: isolate; background: radial-gradient(60% 90% at 0% 30%, rgba(224, 19, 43, 0.22), transparent 70%), #12070b; }
.ladies__photo { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 54%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); background: var(--surface); }
.ladies__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.ladies__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #12070b 0%, rgba(18, 7, 11, 0.55) 18%, transparent 42%); }
.ladies__inner { padding-block: clamp(4rem, 8.5vw, 7rem); }
.ladies__text { max-width: 580px; }
.ladies .display { font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 0.96; }
.ladies .lead { margin-top: 1.4rem; max-width: 34ch; }
.ladies .sticker { position: absolute; right: 46%; bottom: 9%; z-index: 2; translate: 50% 0; --sticker: clamp(104px, 11vw, 150px); rotate: 9deg; }
@media (max-width: 860px) {
  .ladies__photo { position: relative; inset: auto; z-index: auto; width: 100%; height: min(72vw, 420px); clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
  .ladies__photo::after { background: linear-gradient(0deg, #12070b 0%, transparent 40%); }
  .ladies__inner { padding-block: 1rem 3.5rem; }
  .ladies .sticker { right: 5%; top: calc(min(72vw, 420px) - 100px); bottom: auto; translate: 0; }
}

/* Opening hours: a live ring, and the whole week on one clock ------------------------------------------------------------------------------ */
.hours-board { --hb: var(--red-2); --hb-glow: rgba(224, 19, 43, 0.16); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 55%), var(--surface); }
.hours-board--open { --hb: #4ade80; --hb-glow: rgba(34, 197, 94, 0.14); }
.hours-board--closing_soon { --hb: #fbbf24; --hb-glow: rgba(245, 158, 11, 0.16); }
.hours-board__now { display: grid; justify-items: center; align-content: center; gap: 1.2rem; padding: clamp(1.6rem, 3vw, 2.6rem); text-align: center; border-right: 1px solid var(--border); background: radial-gradient(80% 70% at 50% 0%, var(--hb-glow), transparent 70%); }
.hours-board__state { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.45rem 1rem; border: 1px solid color-mix(in srgb, var(--hb) 50%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--hb) 14%, transparent); color: var(--hb); font-family: var(--font-display); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.hours-board__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hours-board--open .hours-board__dot { animation: pulse 2s infinite; }
.hours-board__ring { position: relative; width: min(250px, 72%); aspect-ratio: 1; }
/* overflow: the glow on the arc would otherwise be cropped to the svg's square. */
.hours-board__ring svg { display: block; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.hours-board__track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 5; }
.hours-board__arc { fill: none; stroke: var(--hb); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--hb) 60%, transparent)); transition: stroke-dashoffset 1.6s var(--ease), stroke 0.6s; }
.hours-board__centre { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.35rem; margin: 0; padding: 0 12%; }
.hours-board__day { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.hours-board__special { font-size: 0.7rem; font-style: normal; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fbbf24; }
.hours-board__range { font-family: var(--font-display); font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hours-board__sub { margin: 0; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.hours-board__soon { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.4rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--border-strong); font-size: 0.84rem; line-height: 1.45; color: var(--muted); text-align: left; }
.hours-board__soon .icon { flex: none; margin-top: 0.15rem; color: var(--amber); }
.hours-board__soon strong { color: var(--text-2); }
.hours-board__week { display: grid; align-content: center; gap: 0.5rem; padding: clamp(1.6rem, 3vw, 2.6rem); }
.hours-board__eta { margin: -0.4rem 0 0; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hours-board__eta[hidden] { display: none; }
.hours-board__eta strong { color: var(--hb); font-weight: 800; }
.hours-board__caption { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.hb__rows { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.hb__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 5.2rem; align-items: center; gap: 1rem; padding: 1.05rem 0.9rem 1.05rem 1.1rem; border-bottom: 1px solid var(--border); }
.hb__row.is-today { background: linear-gradient(90deg, rgba(224, 19, 43, 0.14), transparent 80%); }
.hb__row.is-today::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red-2); }
.hb__days { display: grid; gap: 0.15rem; min-width: 0; }
.hb__name { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.05; color: var(--text-2); }
.hb__row.is-today .hb__name { color: #fff; }
.hb__times { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 0.15rem 0.6rem; text-align: right; }
.hb__span { display: inline-flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: #fff; }
.hb__span i { font-style: normal; font-weight: 600; color: var(--muted); }
.hb__amp { color: var(--muted); font-size: 1rem; }
.hb__closed { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hb__flag { display: flex; justify-content: flex-end; }
.hb__tag { display: inline-block; padding: 0.22rem 0.6rem; border-radius: 2px; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 0.8rem; font-style: normal; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.hb__tag--special { justify-self: start; background: rgba(245, 158, 11, 0.16); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.45); }
.hours-board__link { display: inline-flex; align-items: center; gap: 0.35rem; justify-self: start; margin: 0.8rem 0 0 0.7rem; font-size: 0.85rem; font-weight: 600; color: var(--red-2); }
.hours-board__link .icon { transition: transform 0.25s var(--ease); }
.hours-board__link:hover .icon { transform: translateX(3px); }
@media (max-width: 900px) {
  .hours-board { grid-template-columns: minmax(0, 1fr); }
  .hours-board__now { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .hb__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.45rem; padding: 0.95rem 0.2rem 0.95rem 0.9rem; }
  .hb__times { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
  .hb__flag { grid-column: 2; grid-row: 1; }
}
}


/* Page heroes: a sticker slapped across the corner of the photo ---------------------------------------------------------------------------------- */
.page-hero { overflow: clip; }
/* Phones have no spare corner: the stickers would sit on the text, so they only appear from tablet width up. */
.page-hero > .sticker { display: none; }
@media (min-width: 760px) { .page-hero > .sticker { position: absolute; z-index: 2; display: inline-grid; right: max(var(--gutter), calc((100vw - var(--container)) / 2)); bottom: clamp(1.5rem, 4vw, 3rem); --sticker: 128px; rotate: 10deg; } }

/* About: one line from the page, set big -------------------------------------------------------------------------------------------------------------- */
.pull { position: relative; overflow: clip; padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--red); color: #fff; }
.pull__quote { position: relative; max-width: 22ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 6.4vw, 6rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; }
.pull__quote::before { content: "\201C"; position: absolute; left: -0.06em; top: -0.55em; font-size: 2.2em; line-height: 1; color: rgba(0, 0, 0, 0.22); }
.pull__quote em { font-style: normal; color: #0a0a0c; }
/* White, not black: near-black on this red is under 4.5:1 at handwriting size. */
.pull .note { margin-top: 1.5rem; color: #fff; }
.pull .sticker { position: absolute; right: max(var(--gutter), 6%); top: 50%; translate: 0 -50%; --sticker: clamp(110px, 14vw, 190px); background: #0a0a0c; }
.pull .sticker__core { background: var(--red); }
@media (max-width: 760px) { .pull .sticker { top: auto; bottom: 1.2rem; translate: 0; --sticker: 92px; } }

/* Staff page: a big name, set well clear of the photo -------------------------------------------------------------------------------------------- */
.staff-profile__body { position: relative; }
.staff-profile__num { position: absolute; top: -0.2em; right: 0; font-family: var(--font-display); font-size: clamp(5rem, 14vw, 12rem); font-weight: 900; line-height: 0.8; letter-spacing: -0.05em; color: var(--bg); -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.12); paint-order: stroke fill; pointer-events: none; user-select: none; }
.staff-profile__name { position: relative; margin: 0.4rem 0 0.25rem; font-size: clamp(3.4rem, 9vw, 8rem); font-weight: 900; line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; }
.staff-profile__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.staff-profile__chips li { padding: 0.35rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.staff-profile__chips .lbl { padding: 0; border: 0; font-family: "Permanent Marker", "Segoe Print", cursive; font-size: 1.05rem; font-weight: 400; color: var(--red-2); rotate: -3deg; }

/* Contact ---------------------------------------------------------------------------------------------------------------------------------------------- */
.contact-details .h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.contact-form-wrap { position: sticky; top: calc(var(--sticky-top) + 1.5rem); }
.contact-form-wrap .auth-card { background: linear-gradient(160deg, rgba(224, 19, 43, 0.1), transparent 45%), var(--surface); }
@media (max-width: 860px) { .contact-form-wrap { position: static; } }

/* Ticker — the six words on the wall -------------------------------------------------------------------------------------- */
.ticker { display: grid; gap: clamp(0.4rem, 1.2vw, 1rem); padding-block: clamp(1.5rem, 4vw, 3.25rem); overflow: hidden; border-block: 1px solid var(--border); background: var(--bg); }
.ticker__row { overflow: hidden; }
.ticker__track { display: flex; width: max-content; will-change: transform; animation: ticker 52s linear infinite; }
.ticker__row[data-dir="1"] .ticker__track { animation-direction: reverse; }
.ticker.is-driven .ticker__track { animation: none; }
.ticker__group { display: flex; flex: none; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); padding-right: clamp(1.5rem, 4vw, 3.5rem); }
.ticker__word { font-family: var(--font-display); font-size: clamp(2.8rem, 8vw, 7.5rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.ticker__row--outline .ticker__word { color: var(--bg); -webkit-text-stroke: calc(1.2px + 0.14vw) rgba(255, 255, 255, 0.62); paint-order: stroke fill; }
.ticker__mark { flex: none; display: grid; place-items: center; color: var(--red-2); }
.ticker__mark .icon { width: clamp(1.3rem, 2.6vw, 2.2rem); height: auto; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Class panels: hover one and it opens while the other makes room ------------------------------------------------------------ */
@media (min-width: 861px) and (hover: hover) {
  .feature-grid { display: flex; gap: 1.5rem; }
  .feature { flex: 1 1 0; min-width: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), flex-grow 0.9s var(--ease), border-color 0.3s; }
  .feature-grid:hover .feature:not(:hover) { flex-grow: 0.72; }
  .feature-grid .feature:hover { flex-grow: 1.5; border-color: var(--border-strong); }
}

/* Ticks draw themselves in --------------------------------------------------------------------------------------------------- */
html.motion :is(.check-list.reveal, .plan-card.reveal .plan-card__features) .icon-check path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.7s var(--ease) calc(0.35s + var(--n, 0) * 0.12s); }
html.motion :is(.check-list.reveal.is-visible, .plan-card.reveal.is-visible .plan-card__features) .icon-check path { stroke-dashoffset: 0; }
:is(.check-list, .plan-card__features) li:nth-child(2) { --n: 1; }
:is(.check-list, .plan-card__features) li:nth-child(3) { --n: 2; }
:is(.check-list, .plan-card__features) li:nth-child(4) { --n: 3; }
:is(.check-list, .plan-card__features) li:nth-child(5) { --n: 4; }
:is(.check-list, .plan-card__features) li:nth-child(6) { --n: 5; }

/* Timeline: a line that fills as you read, years that light up as they are reached ------------------------------------------------ */
.timeline__fill { position: absolute; left: 7px; top: 0; width: 2px; height: 0; border-radius: 2px; background: linear-gradient(180deg, var(--red), var(--red-2)); box-shadow: 0 0 18px var(--red-glow); pointer-events: none; }
html.motion .timeline::before { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14) 6%, rgba(255, 255, 255, 0.14) 94%, transparent); }
html.motion .timeline__marker { border-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition: background 0.5s, border-color 0.5s, box-shadow 0.5s, scale 0.5s var(--ease); }
html.motion .timeline__item.is-reached .timeline__marker { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 6px var(--red-soft), 0 0 26px var(--red-glow); scale: 1.18; }
html.motion .timeline__item.is-reached .timeline__year { color: var(--red); -webkit-text-stroke-color: var(--red); }
html.motion .timeline__item.is-reached .timeline__img { filter: none; }

/* Plan cards: tilt toward the pointer; the featured plan gets a light that circles its edge -------------------------------------- */
@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
html.motion .plan-card.reveal.is-visible { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s var(--ease), opacity 0.7s var(--ease), border-color 0.3s, box-shadow 0.4s, translate 0.4s var(--ease); }
html.motion .plan-card.reveal.is-visible:hover { translate: 0 -8px; }
html.motion .plan-card--featured::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 1;
  background: conic-gradient(from var(--beam), transparent 0 58%, rgba(255, 47, 71, 0.15) 66%, var(--red-2) 88%, #fff 95%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam 6.5s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }
html.motion .plan-card__badge { z-index: 3; }

/* Buttons and nav links: the label rolls up and an identical one rolls in ---------------------------------------------------------- */
/* flex: none — an overflow:hidden flex item may otherwise shrink below its text and clip the last letter. */
html.motion .roll { position: relative; display: inline-flex; flex: none; overflow: hidden; vertical-align: bottom; }
html.motion .roll__a { display: block; transition: transform 0.55s var(--ease); }
/* The `/ ""` gives the generated copy an empty accessible name, so assistive tech doesn't read the label twice. */
html.motion .roll::after { content: attr(data-label); content: attr(data-label) / ""; position: absolute; left: 0; top: 0; transform: translateY(105%); transition: transform 0.55s var(--ease); }
html.motion :is(a, button):is(:hover, :focus-visible) > .roll .roll__a { transform: translateY(-105%); }
html.motion :is(a, button):is(:hover, :focus-visible) > .roll::after { transform: none; }

/* Mobile menu: the links rise in one after another as the sheet wipes open ----------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  html.motion .site-nav .site-nav__list li { opacity: 0; translate: 0 1.6rem; transition: opacity 0.5s var(--ease), translate 0.8s var(--ease); }
  html.motion .site-nav.is-open .site-nav__list li { opacity: 1; translate: 0 0; transition-delay: calc(0.22s + var(--i, 0) * 0.055s); }
  html.motion .site-nav .site-nav__actions { opacity: 0; translate: 0 1.2rem; transition: opacity 0.5s var(--ease), translate 0.8s var(--ease); }
  html.motion .site-nav.is-open .site-nav__actions { opacity: 1; translate: 0 0; transition-delay: 0.6s; }
}
.site-nav__list li:nth-child(2) { --i: 1; }
.site-nav__list li:nth-child(3) { --i: 2; }
.site-nav__list li:nth-child(4) { --i: 3; }
.site-nav__list li:nth-child(5) { --i: 4; }
.site-nav__list li:nth-child(6) { --i: 5; }
.site-nav__list li:nth-child(7) { --i: 6; }

/* Cursor ring ------------------------------------------------------------------------------------------------------------------------ */
.cursor { position: fixed; left: 0; top: 0; z-index: 2500; display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid #fff; border-radius: 50%; background: transparent; mix-blend-mode: difference; opacity: 0; pointer-events: none; will-change: transform; transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), opacity 0.3s, background-color 0.3s; }
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(255, 255, 255, 0.14); }
.cursor.has-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: #fff; }
.cursor.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cursor__label { font-family: var(--font-display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity 0.2s; }
.cursor.has-label .cursor__label { opacity: 1; }

/* Footer wordmark ----------------------------------------------------------------------------------------------------------------------- */
.footer-mark { overflow: hidden; padding: clamp(1rem, 3vw, 2.5rem) var(--gutter) 0; text-align: center; line-height: 0.8; user-select: none; }
.footer-mark__t { display: block; font-family: var(--font-display); font-size: clamp(3rem, 14.4vw, 17rem); font-weight: 900; letter-spacing: -0.045em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 85%); -webkit-background-clip: text; background-clip: text; }
/* Once motion.js has split it into letters, each letter carries the gradient itself. */
.footer-mark.is-split .footer-mark__t { background: none; }
.footer-mark__l { display: inline-block; padding-bottom: 0.14em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-mark__l--num { background-image: linear-gradient(180deg, rgba(255, 47, 71, 0.55), rgba(224, 19, 43, 0) 85%); }
html.motion .footer-mark__l { transform: translateY(105%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
html.motion .footer-mark.is-in .footer-mark__l { transform: none; }

/* About: the six words as large numbered rows --------------------------------------------------------------------------------------------- */
.value-rows { border-top: 1px solid var(--border); }
.value-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 4rem minmax(0, 1.5fr) minmax(0, 1fr) 3rem; align-items: center; gap: 1.5rem; padding-block: clamp(1.4rem, 3vw, 2.4rem); border-bottom: 1px solid var(--border); overflow: hidden; }
.value-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--red-soft), transparent 75%); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
.value-row:hover::before { transform: scaleX(1); }
.value-row__num { font-family: var(--font-display); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.2em; color: var(--muted); }
.value-row__title { font-size: clamp(2rem, 4.9vw, 4.1rem); font-weight: 900; line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; color: var(--bg-2); -webkit-text-stroke: calc(1.2px + 0.14vw) rgba(255, 255, 255, 0.5); paint-order: stroke fill; transition: color 0.5s, -webkit-text-stroke-color 0.5s, translate 0.7s var(--ease); }
.value-row:hover .value-row__title { color: #fff; -webkit-text-stroke-color: #fff; translate: 1.25rem 0; }
.value-row__text { margin: 0; max-width: 38ch; color: var(--text-2); }
.value-row__icon { justify-self: end; color: var(--red-2); transition: rotate 0.7s var(--ease), scale 0.7s var(--ease); }
.value-row:hover .value-row__icon { rotate: -14deg; scale: 1.2; }
@media (max-width: 860px) {
  .value-row { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.4rem 1rem; }
  .value-row__title { grid-column: 2; }
  .value-row__text { grid-column: 2; }
  .value-row__icon { display: none; }
}

/* Closing call-to-action: a deep vignette and an outsized 20 on the red ------------------------------------------------------------------------------ */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: -30%; z-index: -2; background: radial-gradient(40% 46% at 88% 100%, rgba(0, 0, 0, 0.42), transparent 70%), radial-gradient(34% 40% at 6% 0%, rgba(255, 255, 255, 0.16), transparent 70%); animation: haze 16s ease-in-out infinite alternate; }
.cta-band::after { content: "20"; position: absolute; right: -2%; bottom: -16%; z-index: -1; font-family: var(--font-display); font-size: clamp(15rem, 46vw, 46rem); font-weight: 900; line-height: 0.72; letter-spacing: -0.06em; color: rgba(0, 0, 0, 0.16); pointer-events: none; user-select: none; }
/* On the red band the accent words are near-black, so the light-sweep used on other red words would vanish. */
html.motion .cta-band .split-heading .text-red .w__i { background: none; -webkit-text-fill-color: #0a0a0c; color: #0a0a0c; animation: none; }

@media print {
  html.motion body::after, .cursor, .footer-mark, .ticker { display: none !important; }
}