/* Wolf Road, the home page only: the gate, the work board and dossier, the stack of screens and title cards, the
   hero, what we do, the logo band, the studio and the method, the close with its hologram. Loaded after door.css,
   which keeps the tokens, type, grain, top bar, footer, door, the work index and the case pages. */
/* Gate: built by JS only. The mark turns inside a thin ring, the studio line under it in the digital face. */
.gate { position: fixed; inset: 0; z-index: 100; background: var(--black); cursor: pointer; }
.gate__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gate__studio { position: absolute; left: 50%; top: calc(50% + 9vmin + 1.2rem); transform: translateX(-50%); margin: 0; text-align: center; font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); white-space: nowrap; transition: opacity 0.5s; }
.gate__line { display: block; }
.gate__line--sub { margin-top: 0.45em; color: var(--grey); }
.gate__label { position: absolute; left: 50%; bottom: calc(10vh + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; color: var(--dim); white-space: nowrap; font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; transition: opacity 0.4s; }
.gate__label.is-ready { color: var(--grey); animation: gatePulse 2.6s ease-in-out infinite; }
@keyframes gatePulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.ui { font-family: var(--body); font-size: var(--ui); letter-spacing: 0.01em; }

/* 3. The work: the same two columns. The films down the left in Inter, the chosen one white with its line and
   copy under the list; on the right one clean frame where the chosen film's loop plays over its still
   (js/work-stage.js). The wheel steps the films while the panel is the screen. */
.showcase__in {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
  padding: calc(5.2rem + env(safe-area-inset-top, 0px)) var(--gutter) clamp(1.6rem, 4vh, 3rem);
  max-width: 1600px; margin: 0 auto;
}
.films { display: grid; gap: 0; }
.film__link { display: block; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 5rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--dim); transition: color 0.6s var(--slow); }
.film__link.is-on { color: var(--white); }
.film__link:hover, .film__link.is-on:hover { color: var(--red-text); } /* hover chooses the film, so the chosen rule must not win over the hover */
/* The dossier: the chosen project as an engagement, not a clip. A board of the loop and two stills, then the scope
   and the client line. Problem, Solution and Result are on the case page. One is shown at a time. */
.dossier__board { display: grid; grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); gap: 0.7rem; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.dossier__stills { display: grid; grid-template-rows: 1fr 1fr; gap: 0.7rem; min-height: 0; }
.dossier__still { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; background: var(--frame); transition: opacity 0.6s var(--slow); }
.dossier__stills.is-swapping .dossier__still { opacity: 0; transition: none; }
.dossier { display: none; margin-top: auto; padding-top: clamp(0.8rem, 1.6vh, 1.2rem); }
.dossier.is-on { display: block; animation: dossierIn 0.6s var(--slow) both; }
@keyframes dossierIn { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
.dossier__scope { margin: 0.2rem 0 0; color: var(--white); line-height: 1.8; font-family: var(--digital); font-weight: 400; font-size: 0.76rem; letter-spacing: 0.14em; }
.dossier__scope .dot { color: var(--dim); margin: 0 0.1em; }
.dossier__k { color: var(--red-text); }
.dossier__meta { margin: 0.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; color: var(--white); line-height: 1.8; font-family: var(--digital); font-weight: 400; font-size: 0.76rem; letter-spacing: 0.14em; }
.dossier__scope.mono, .dossier__meta.mono, .dossier__scope, .dossier__meta { text-transform: none; letter-spacing: 0.04em; font-size: 0.82rem; }
.dossier__k { text-transform: uppercase; letter-spacing: 0.14em; } /* the keys stay capitals */
.dossier__link { margin-top: 0.6rem; }
.showcase__all { display: inline-block; margin-top: 2rem; padding: 0.3rem 0; font-family: var(--body); font-weight: 500; font-size: clamp(1.3rem, 1rem + 0.9vw, 1.9rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--white); }
.showcase__stage { position: relative; align-self: start; display: flex; flex-direction: column; padding-top: 0.6rem; } /* on desktop js/work-stage.js sets its height to the film list's, so the board and the dossier fill from BOSS to Maddix */
.showcase__frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--frame); }
@media (min-width: 1024px) { .showcase__stage.is-fitted .showcase__frame, .showcase__stage.is-fitted .dossier__still { aspect-ratio: auto; height: 100%; } }
.showcase__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--slow); pointer-events: none; }
.showcase__frame.is-playing .showcase__video { opacity: 1; }
/* Duotone at rest: the board's frame and stills are black and Wolf Road red until the pointer is over the board,
   then they fade to their own colour. Greyscale under a red multiply: shadows stay black, light goes red. */
.dossier__board img, .dossier__board video { filter: grayscale(1) brightness(1.12) contrast(1.05); transition: filter 0.8s var(--slow), opacity 0.7s var(--slow); }
.showcase__frame::after, .dossier__stills::after { content: ""; position: absolute; inset: 0; background: var(--red); mix-blend-mode: multiply; pointer-events: none; z-index: 2; transition: opacity 0.8s var(--slow); }
.dossier__stills { position: relative; }
.dossier__board:hover img, .dossier__board:hover video { filter: none; }
.dossier__board:hover .showcase__frame::after, .dossier__board:hover .dossier__stills::after { opacity: 0; }
@media (hover: none) { .dossier__board img, .dossier__board video { filter: none; } .showcase__frame::after, .dossier__stills::after { display: none; } }
/* The cursor over the frame becomes a mono tag that trails the pointer. */
.showcase__frame { cursor: none; }
.cursor-tag { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); white-space: nowrap; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.25s var(--ease); will-change: transform; }
.cursor-tag.is-on { opacity: 1; }
@media (hover: none) { .showcase__frame { cursor: pointer; } .cursor-tag { display: none; } }
.showcase__meta { position: relative; margin-top: 1rem; display: flex; gap: 1.6rem; align-items: baseline; font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }

/* The stack. Every panel is a screen pinned to the top; the next one slides up over it while the pinned one
   fades and sinks (js/hud.js). Contact is the last, unpinned, and carries the footer. */
.stack { position: relative; }
.panel { position: relative; min-height: 100svh; background: var(--black); overflow: hidden; }
.panel__in { min-height: 100svh; }
/* Title cards: the section's name set huge and bold in the middle of a black screen, in the flow of the page.
   As a card leaves it drifts up a little slower than the page and settles a touch smaller (js/hud.js). */
.panel.title { display: grid; place-items: center; height: 54svh; min-height: 0; text-align: center; } /* short: the name lands, then zooms back and fades as the section comes up (js/hud.js) */
.panel.title .panel__in { position: relative; z-index: 1; will-change: transform, opacity; }
.title__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.title__name { transform-origin: center; will-change: transform; }
.title__in { min-height: 0; padding: 0 var(--gutter); }
.title__name { margin: 0; font-family: var(--head); font-weight: var(--head-weight); font-size: clamp(2.8rem, 9.6vw, 10.6rem); line-height: var(--head-leading); letter-spacing: var(--head-track); word-spacing: var(--head-word); text-transform: var(--head-case); color: var(--white); }
.title__line { margin: 1.4rem auto 0; max-width: 34ch; font-family: var(--body); font-weight: 500; font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--text-soft); }
.h2 { font-family: var(--head); font-weight: var(--head-weight); font-size: var(--h2); line-height: var(--head-leading); text-transform: var(--head-case); letter-spacing: var(--head-track); word-spacing: var(--head-word); max-width: 14ch; }
.rule { display: block; width: 2.2rem; height: 2px; background: var(--white); margin: 1.4rem 0 1.6rem; }
.lede { max-width: 38ch; color: var(--text-soft); }
.link { display: inline-block; margin-top: 1.4rem; color: var(--white); transition: color 0.4s var(--ease); padding: 0.8rem 0; margin-bottom: -0.8rem; }
.hero__link { padding: 0.8rem 0; margin-bottom: -0.8rem; }
.link:hover { color: var(--red-text); }

/* 1. The name: the lockup in the middle, the statement bottom-left, the one link bottom-right. */
.hero__in { position: relative; display: grid; place-items: center; padding: calc(6rem + env(safe-area-inset-top, 0px)) var(--gutter) 6rem; }
.hero__logo { width: min(56vw, 720px); }
.hero__logo img { width: 100%; height: auto; }
/* The lockup, in two parts placed exactly where the one image put them: the W as an object (js/hero-w.js), solid
   red at rest and the true wire on hover, and the word as a flat image that never changes. Percentages come from
   the lockup's own geometry: W at 0 to 31.9% of the width, the word from 37.3%, 13.9% down, 74.1% tall. */
.hero__mark { position: relative; aspect-ratio: 1920 / 546.4; }
.hero__w { position: absolute; left: 0; top: 0; width: 31.93%; height: 100%; }
.hero__mark .hero__w img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.3s; }
.hero__w.is-drawing img { opacity: 0; }
.hero__w-gl { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; display: block; pointer-events: none; }
.hero__mark .hero__word { position: absolute; left: 37.34%; top: 13.9%; width: 62.66%; height: 74.1%; display: block; object-fit: contain; }
.hero__glow { position: absolute; left: 16%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--red-glow) 0%, var(--red-glow-soft) 32%, transparent 62%); filter: blur(28px); pointer-events: none; animation: glowBreathe 7s ease-in-out infinite; }
@keyframes glowBreathe { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
/* The slogan, straight under the lockup, set wide in the digital face. */
.hero__slogan { margin: clamp(1.1rem, 2.2vw, 2rem) 0 0; text-align: center; font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1.05rem); letter-spacing: 0.42em; padding-left: 0.42em; color: var(--white); }
/* The statement in a ticked frame, top left. The ticks arrive with the decode pass,
   and a red caret waits at the end once the sentence has landed. */
.hero__who { position: absolute; left: calc(var(--gutter) - 1.3rem); top: calc(5rem + 3vh + env(safe-area-inset-top, 0px)); margin: 0; padding: 1.1rem 1.3rem 1.2rem; } /* the words sit on the gutter line; the ticks hang outside it */
.hero__statement { margin: 0; max-width: 30ch; font-family: var(--body); font-weight: 500; font-size: clamp(0.88rem, 0.68rem + 0.64vw, 1.36rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--white); }
.mx__w { white-space: nowrap; }
.mx__c { display: inline-block; text-align: center; }
.tick { display: none; } /* the frame's corner ticks are retired; the caret stays */
.tick--tl { left: 0; top: 0; color: var(--red-text); } .tick--tr { right: 0; top: 0; } .tick--bl { left: 0; bottom: 0; } .tick--br { right: 0; bottom: 0; }
.tick::before, .tick::after { content: ""; position: absolute; background: currentColor; transition: transform 0.4s var(--ease); }
.tick::before { width: 100%; height: 1px; } .tick::after { width: 1px; height: 100%; }
.tick--tl::before, .tick--tl::after { left: 0; top: 0; transform-origin: left top; }
.tick--tr::before, .tick--tr::after { right: 0; top: 0; transform-origin: right top; }
.tick--bl::before, .tick--bl::after { left: 0; bottom: 0; transform-origin: left bottom; }
.tick--br::before, .tick--br::after { right: 0; bottom: 0; transform-origin: right bottom; }
.hero__who.is-live .tick::before { transform: scaleX(0); } .hero__who.is-live .tick::after { transform: scaleY(0); }
.hero__who.is-drawing .tick::before, .hero__who.is-drawing .tick::after { transform: none; }
.hero__who.is-drawing .tick--tl::before, .hero__who.is-drawing .tick--tl::after, .hero__who.is-drawing .tick--bl::before, .hero__who.is-drawing .tick--bl::after { transition-delay: 0.25s; }
.hero__who.is-drawing .tick--tr::before, .hero__who.is-drawing .tick--tr::after, .hero__who.is-drawing .tick--br::before, .hero__who.is-drawing .tick--br::after { transition-delay: 1.25s; }
/* Short desktop screens: the frame steps down and in so it stays clear of the lockup. */
@media (max-height: 800px) and (min-width: 768px) { .hero__who { top: calc(4.4rem + 2vh); } .hero__statement { font-size: clamp(0.8rem, 0.64rem + 0.48vw, 1.08rem); } }
.hero__caret { display: inline-block; width: 0.5em; height: 0.95em; margin-left: 0.18em; vertical-align: -0.12em; background: var(--red-text); opacity: 0; }
.hero__who.is-done .hero__caret { opacity: 1; animation: caretBlink 1.1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.hero__link { position: absolute; right: var(--gutter); bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); margin: 0; color: var(--white); transition: color 0.4s var(--ease); }
.hero__link:hover { color: var(--red-text); }
/* The showreel (js/hero-reel.js). At rest, one 16:9 place under the name, holding a still until the
   script paints the reel into it. After the gate the hero is taller than the screen and its contents stick, so the
   first stretch of scrolling carries the reel from big in the middle down into place; once it lands the hero drops
   back to one screen and the reel stays down. */
.hero__reel { position: relative; display: block; width: auto; height: clamp(88px, 19vh, 210px); aspect-ratio: 16 / 9; margin: clamp(1.6rem, 3.4vh, 2.8rem) auto 0; }
.hero__slot { position: absolute; inset: 0; display: block; border-radius: 6px; background: url("../assets/reel/showreel-standin.jpg") center / cover no-repeat; }
.hero.has-reel .hero__slot { background: none; }
.hero.has-reel .hero__in { z-index: 1; }
.hero.is-tall { height: 190svh; overflow: clip; }
.hero.is-tall .hero__in { position: sticky; top: 0; height: 100svh; min-height: 0; z-index: 1; }
.hero-reel-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none; }
.hero.has-reel .hero__mark, .hero.has-reel .hero__slogan, .hero.has-reel .hero__link, .hero.has-reel .hero__slot { opacity: var(--reel-in, 1); }
/* Over the full-bleed reel, the statement sits bottom left beside a small spinning wire W (drawn by hero-reel.js into
   .hero__lockw), with the year under it. It steps out while the reel goes down and returns once it lands. Without the script it stays top left. */
.hero__lockw, .hero__est { display: none; }
.hero.has-reel .hero__who { top: auto; left: var(--gutter); bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 0; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(1rem, 1.6vw, 1.6rem); align-items: start; max-width: min(100% - 2 * var(--gutter), 62rem); opacity: var(--lock, 1); }
.hero.has-reel .hero__lockw { display: block; width: clamp(4.4rem, 6.6vw, 7.6rem); aspect-ratio: 1280 / 1142; align-self: center; } /* sized to the paragraph and centred on it */
.hero.has-reel .hero__statement { max-width: 30ch; font-size: clamp(1.25rem, 0.8rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.hero.has-reel .hero__est { display: block; grid-column: 2; margin: 0.9rem 0 0; font-size: 0.7rem; letter-spacing: 0.16em; color: var(--white); opacity: 0.7; }
.hero.has-reel .hero__caret { display: none; }
.hero.has-reel .hero__in::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--shade-hero), transparent 55%), linear-gradient(to bottom, var(--shade-top), transparent 16%); opacity: var(--shade, 1); } /* keeps the words and the header readable on any frame */

/* 2. What we do: the three things set huge in Inter down the left, the lit one white, and one red wire object on
   the right that becomes each of them in turn (js/objects.js). It cycles on its own; hover takes over. */
.services__in {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding: calc(6rem + env(safe-area-inset-top, 0px)) var(--gutter) clamp(2rem, 5vh, 4rem);
  max-width: 1600px; margin: 0 auto;
}
.svc { display: grid; gap: 0; }
.svc__link { display: block; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: clamp(2.6rem, 6.2vw, 6.8rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--dim); transition: color 0.7s var(--slow), transform 0.7s var(--slow); transform-origin: left center; }
.svc__link:hover { color: var(--grey); }
.svc__link.is-on { color: var(--white); }
.services__stage { position: relative; display: grid; justify-items: center; }
.services__gl { width: min(100%, 62vh); aspect-ratio: 1; display: block; touch-action: pan-y; }
.services__meta { position: relative; margin-top: 0.4rem; display: flex; gap: 1.6rem; align-items: baseline; font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.svc__copy { display: grid; margin-top: clamp(1.6rem, 3.5vh, 2.8rem); max-width: 34rem; }
.svc__text { grid-area: 1 / 1; opacity: 0; transform: translateY(0.6rem); transition: opacity 0.6s var(--slow), transform 0.6s var(--slow); pointer-events: none; }
.svc__text.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.15s; }
.svc__title { margin: 0 0 0.6rem; color: var(--red-text); font-weight: 400; }
.svc__text p { margin: 0; color: var(--text-soft); font-size: var(--ui); line-height: 1.5; }

/* 4. Clients: the heading left, the marks lit one at a time on the right. */
/* The band: who trusts the studio, as one line of white marks between what we do and the work, always moving
   (js/band.js). */
.band { position: relative; overflow: hidden; padding: clamp(2.4rem, 5vh, 3.6rem) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--black); }
.band__in { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(1.5rem, 3vw, 3rem); padding: 0 0 0 var(--gutter); }
.band__label { margin: 0; color: var(--white); white-space: nowrap; font-family: var(--body); font-weight: 500; font-size: var(--ui); letter-spacing: -0.01em; }
.band__track { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, var(--black) 8%, var(--black) 92%, transparent); mask-image: linear-gradient(to right, transparent, var(--black) 8%, var(--black) 92%, transparent); }
.band__set { display: flex; align-items: center; gap: clamp(3rem, 6vw, 6rem); list-style: none; margin: 0; padding: 0 clamp(1.5rem, 3vw, 3rem) 0 0; flex: none; will-change: transform; }
.band__set li { flex: none; display: grid; place-items: center; }
.band__set img { display: block; height: clamp(1.4rem, 2.4vw, 2.4rem); width: auto; max-width: 11rem; object-fit: contain; filter: brightness(0) invert(1); opacity: 1; }
@media (max-width: 767px) { .band__in { grid-template-columns: 1fr; row-gap: 1rem; } }

/* 5. The two directors, and the W turning in wire. */
/* The method is built like the services; five names, so they run at the film list's size. */
.method .svc__link { font-size: clamp(2.2rem, 4.6vw, 5rem); }
.method__alt { margin: clamp(1.4rem, 3vh, 2.2rem) 0 0; padding-top: 1rem; max-width: 34rem; border-top: 1px solid var(--hairline); font-size: var(--ui); line-height: 1.5; color: var(--grey); }
.studio__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(2rem, 4vw, 5rem); padding: calc(6rem + env(safe-area-inset-top, 0px)) var(--gutter) 4rem; }
.people { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); max-width: 46rem; }
.person { margin: 0; }
.person img { width: 100%; aspect-ratio: 4 / 5; max-height: 32vh; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.person figcaption { margin-top: 0.9rem; }
.person__name { margin: 0; color: var(--white); }
.person__role { margin: 0; color: var(--grey); }
.person__bio { margin: 0.9rem 0 0; font-family: var(--body); font-weight: 400; font-size: 0.92rem; line-height: 1.55; color: var(--grey); max-width: 44ch; }
.studio__side { display: grid; gap: 1rem; justify-items: stretch; }
/* The studio statement, under the turning W. */
.studio__statement { display: grid; gap: 0.7rem; }
.studio__line { margin: 0; font-family: var(--head); font-weight: var(--head-weight); font-size: clamp(2.2rem, 4.4vw, 4.8rem); line-height: var(--head-leading); text-transform: var(--head-case); letter-spacing: var(--head-track); word-spacing: var(--head-word); color: var(--white); }
.studio__sub { margin: 0; font-family: var(--body); font-weight: 500; font-size: var(--ui); line-height: 1.45; color: var(--grey); max-width: 34ch; }
.studio__sub.is-white { color: var(--white); }   

/* 6. Get in touch: the words huge, the email, the address, then the page turns white for the footer. */
/* The close: the heading in Compacta Light, then one tight column on the left (the details as keyed HUD rows,
   the form as hairline fields and a thin send bar) and the studio's block as a hologram on the right; then the
   footer links. */
.contact { position: relative; z-index: 6; background: var(--black); }
.contact__in { padding: calc(5.4rem + env(safe-area-inset-top, 0px)) var(--gutter) 0; }
.contact__title { margin: 0 0 clamp(1.6rem, 4vh, 2.8rem) -0.02em; font-family: var(--head); font-weight: var(--head-weight); font-size: clamp(3.4rem, 8vw, 8.6rem); line-height: var(--head-leading); text-transform: var(--head-case); letter-spacing: var(--head-track); word-spacing: var(--head-word); color: var(--white); }
.frame { position: relative; padding: clamp(1rem, 3vh, 2.5rem) 0; }
.frame__in { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: center; }
.contact__left { display: grid; gap: clamp(2.2rem, 5vh, 3.4rem); align-content: center; }
.contact__lede { margin: 0; max-width: 30ch; font-family: var(--body); font-weight: 500; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--white); }
/* The hologram: a canvas, the street names laid over it, a HUD line and the way out to a real map. */
.contact__map { position: relative; height: clamp(26rem, 68vh, 46rem); min-width: 0; }
.contact__map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--scanline) 2px 3px); }
.map__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s var(--slow); }
.contact__map.is-on .map__gl { opacity: 1; }
.map__labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.map__label { position: absolute; left: 0; top: 0; margin: -0.6em 0 0 0.6rem; font-family: var(--digital); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: var(--red-text); text-shadow: 0 0 8px var(--map-glow); will-change: transform; }
.map__label--us { display: grid; gap: 0.25rem; margin: -2.6em 0 0 0.9rem; color: var(--white); text-shadow: 0 0 10px var(--map-glow-us); }
@media (max-width: 599px) { .map__label:not(.map__label--us) { display: none; } } /* on a phone the street names crowd; the studio flag stays */
.map__label--us b { font-weight: 400; color: var(--red-text); }
.map__hud { position: absolute; left: 0; bottom: 0; margin: 0 0 -0.8rem; padding: 0.85rem 0; color: var(--grey); z-index: 1; } /* on the Open in Maps line, opposite it */
.map__open { position: absolute; right: 0; bottom: 0; z-index: 1; padding: 0.85rem 0 0.85rem 0.6rem; color: var(--grey); }
/* The contact column, drawn like the map's HUD: red mono keys, hairlines, no boxes. */
.contact__details { margin: 0; display: grid; gap: 0.55rem; }
.contact__details div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; }
.contact__details dt { color: var(--red-text); font-size: 0.7rem; }
.contact__details dd { margin: 0; font-family: var(--body); font-weight: 400; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.5; color: var(--white); }
.contact__email { display: inline-block; padding: 0.7rem 0; margin: -0.7rem 0; color: var(--white); transition: color 0.4s var(--ease); }
.contact__email:hover { color: var(--red-text); }
.contact__form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.35rem; }
.field__k { color: var(--grey); font-size: 0.7rem; transition: color 0.4s var(--ease); }
.field:focus-within .field__k { color: var(--red-text); }
.field input, .field textarea { display: block; width: 100%; min-height: 2.75rem; margin: 0; padding: 0.45rem 0 0.6rem; background: linear-gradient(var(--red-text), var(--red-text)) left bottom / 0 1px no-repeat, linear-gradient(var(--hairline), var(--hairline)) left bottom / 100% 1px no-repeat; border: 0; border-radius: 0; color: var(--white); font-family: var(--body); font-weight: 400; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.5; outline: none; caret-color: var(--red-text); transition: background-size 0.7s var(--slow); }
.field input:focus, .field textarea:focus { background-size: 100% 1px, 100% 1px; }
.field textarea { resize: none; min-height: 4.8rem; }
.send { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 0.6rem; padding: 1rem 1.1rem; background: transparent; border: 1px solid var(--hairline-strong); border-radius: 0; color: var(--white); cursor: pointer; transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background-color 0.4s var(--ease); }
.send span:last-child { transition: transform 0.4s var(--ease); }
.send:hover, .send:focus-visible { border-color: var(--red-text); color: var(--red-text); background: var(--red-wash); }
.send:hover span:last-child { transform: translateX(0.3rem); }
.send:active { transform: scale(0.99); }
.contact__note { margin: 0; min-height: 1.2em; color: var(--grey); font-size: 0.7rem; }
.contact__note.is-ok { color: var(--white); } .contact__note.is-bad { color: var(--red-text); }

@media (max-width: 1023px) {
  .studio__in { grid-template-columns: 1fr; }
  .services__in { grid-template-columns: 1fr; row-gap: 2rem; align-content: center; }
  .services__stage { order: -1; }
  .services__gl { width: min(20rem, 55vw); }
  .showcase__in { grid-template-columns: 1fr; row-gap: 2rem; align-content: center; }
  .showcase__stage { order: -1; }
}

@media (max-width: 767px) {
  :root { --statement: clamp(3rem, 13vw, 5.2rem); --row: clamp(1.7rem, 7.5vw, 2.4rem); }
  .panel { min-height: 0; }
  .panel__in { min-height: 0; }
  .panel.title { height: auto; min-height: 0; padding: 5rem 0 3rem; }
  .panel.title .panel__in { transform: none !important; opacity: 1 !important; }
  .hero__in { min-height: 100svh; }
  .hero__logo { width: 82vw; }
  .hero__who { position: relative; top: auto; left: auto; margin: 2.4rem 0 0 -0.9rem; padding: 0.9rem 0.9rem 1rem; justify-self: start; } /* relative, so the ticks frame the block and not the whole hero */
  .hero__link { position: static; margin-top: 1.2rem; justify-self: start; }
  .services__in { padding-top: calc(5rem + env(safe-area-inset-top, 0px)); }
  .services__meta { white-space: normal; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
  .people { grid-template-columns: 1fr; }
  .person img { max-height: 44vh; }
  .frame__in { grid-template-columns: 1fr; row-gap: 2.4rem; }
  .contact__map { height: auto; aspect-ratio: 5 / 4; } /* the tilted table is wider than tall; a phone-shaped box left half of it empty */
  .film__link, .svc__link { padding: 0.25rem 0; margin: -0.25rem 0; } /* 44px hit areas, the list's rhythm unchanged */
  .showcase__in { padding-top: calc(5rem + env(safe-area-inset-top, 0px)); }
  .showcase__meta { white-space: normal; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gate__label.is-ready { animation: none; }
  .hero__who.is-done .hero__caret { animation: none; }
  .hero__glow { animation: none; opacity: 0.7; }
  .film__link { transition: none; }
  .dossier.is-on { animation: none; }
}

/* The close, tightened (2026-09-29): less air above the footer. */
.contact .foot { margin-top: clamp(3rem, 7vh, 5rem); }


/* No showreel box under the slogan (2026-09-29): the reel plays full screen on arrival, then pulls back and fades. */
.hero__reel { display: none; }

/* The statement as the hero piece (2026-09-29): the line and its wire W set big along the bottom, the lockup smaller
   above. The line stands as blocks and decodes through X O ! # when the page opens and again when the reel has gone. */
.hero.has-reel .hero__who { bottom: clamp(2.4rem, 7vh, 5rem); max-width: calc(100% - 2 * var(--gutter)); column-gap: clamp(1.2rem, 2.4vw, 3rem); }
.hero.has-reel .hero__lockw { width: clamp(5rem, 16vw, 19rem); }
.hero.has-reel .hero__statement { max-width: 24ch; font-size: clamp(2rem, 0.6rem + 3.8vw, 6rem); line-height: 1.02; letter-spacing: -0.035em; }
.hero.has-reel .hero__est { margin-top: 1.2rem; }
.hero.has-reel .hero__in { place-items: start center; }
.hero.has-reel .hero__logo { width: min(30vw, 400px); margin-top: clamp(0.5rem, 5vh, 3.5rem); }
.mx__c.is-cover { color: var(--red); }
/* No reel (2026-09-29): the full lockup big in the top left, the statement long and low across the bottom. */
.hero.has-reel .hero__in::after { display: none; }
@media (min-width: 768px) {
  .hero.has-reel .hero__logo { position: absolute; left: var(--gutter); top: calc(5.2rem + env(safe-area-inset-top, 0px)); width: min(46vw, 820px); margin: 0; }
  .hero.has-reel .hero__slogan { text-align: left; padding-left: 0; }
}
.hero.has-reel .hero__who { max-width: calc(100% - 2 * var(--gutter) - 12rem); }
.hero.has-reel .hero__lockw { width: clamp(4.4rem, 10vw, 12rem); }
.hero.has-reel .hero__statement { max-width: none; font-size: clamp(1.5rem, 2.8vw, 4.6rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
/* The lockup as the word alone (2026-09-30): no W, no glow; the word fills the mark. */
.hero .hero__w, .hero .hero__glow { display: none; }
.hero .hero__mark { aspect-ratio: 1280 / 430; }
.hero .hero__mark .hero__word { left: 0; top: 0; width: 100%; height: 100%; }
.has-nebula .stack { z-index: 1; }
.has-nebula .panel, .has-nebula .band, .has-nebula .contact { background: transparent; }

/* The work, scrolled (2026-10-01, js/work-scroll.js). Without the pin: a plain stack of linked frames, each with its
   name and scope under it. */
.rw { position: relative; z-index: 1; padding: clamp(2rem, 6vh, 4rem) var(--gutter) clamp(3rem, 8vh, 5rem); }
.rw__ruler, .rw__text { display: none; }
.rw__strip { display: grid; gap: clamp(2.4rem, 6vh, 3.6rem); max-width: 1100px; margin: 0 auto; }
.rw__frame { position: relative; display: block; color: var(--white); }
.rw__frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--frame); }
.rw__cap { display: grid; gap: 0.35rem; margin-top: 0.9rem; }
.rw__cap-t { font-weight: 600; font-size: clamp(1.7rem, 5vw, 2.8rem); line-height: 1.02; letter-spacing: -0.04em; }
.rw__cap-s, .rw__scope { font-family: var(--digital); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.rw__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--slow); pointer-events: none; }
.rw__video.is-playing { opacity: 1; }
.rw__all { display: table; margin: clamp(2.4rem, 6vh, 3.6rem) auto 0; }

/* Pinned (desktop): one window a little right of centre, the strip running up through it; the name of the
   project in view on the left, over the window's edge; the ruler of numbers beside it; the way to all work under. */
.rw.is-pinned { height: calc(100svh + (var(--n) - 1) * 72svh); padding: 0; }
.rw.is-pinned .rw__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.rw.is-pinned .rw__window { position: absolute; left: 52%; top: 50%; width: min(49vw, calc(62svh * 1.6)); aspect-ratio: 16 / 10; transform: translate(-50%, -50%); overflow: hidden; background: var(--frame); }
.rw.is-pinned .rw__strip { display: block; max-width: none; margin: 0; height: 100%; will-change: transform; }
.rw.is-pinned .rw__frame { height: 100%; overflow: hidden; }
.rw.is-pinned .rw__frame img { height: 100%; aspect-ratio: auto; will-change: transform; transform: scale(1.18); }
.rw.is-pinned .rw__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--shade-frame), transparent 38%); pointer-events: none; }
.rw.is-pinned .rw__cap { display: none; }
.rw.is-pinned .rw__text { display: block; position: absolute; z-index: 3; left: calc(var(--gutter) + 4.2rem); top: calc(50% - clamp(4.5rem, 9vh, 7rem)); max-width: min(40rem, 42vw); pointer-events: none; }
.rw__k { margin: 0 0 1rem; color: var(--white); text-shadow: 0 1px 12px var(--shade); }
.rw__k span { color: var(--text-soft); }
.rw__title { margin: 0; font-weight: 600; font-size: clamp(2.2rem, 3.9vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; text-shadow: 0 2px 30px var(--shade); }
.rw__scope { margin: 1rem 0 0; color: var(--white); text-shadow: 0 1px 12px var(--shade); }
.rw.is-pinned .rw__ruler { display: flex; gap: 0.7rem; position: absolute; z-index: 3; left: var(--gutter); top: 50%; height: min(46svh, 26rem); transform: translateY(-50%); }
.rw__marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.rw__mark { display: block; padding: 0.2rem 0; font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.14em; line-height: 1; color: var(--mark-rest); transition: color 0.4s var(--ease); }
.rw__mark.is-on, .rw__mark:hover { color: var(--white); }
.rw__track { position: relative; width: 6px; height: 100%; container-type: size; background: repeating-linear-gradient(to bottom, var(--hairline-strong) 0 1px, transparent 1px 9px); background-position: 0 0.35rem; }
.rw__marker { position: absolute; left: -3px; top: 0; width: 12px; height: 2px; margin-top: 0.3rem; background: var(--red); box-shadow: 0 0 10px var(--red-glow); will-change: transform; }
.rw.is-pinned .rw__all { position: absolute; left: 52%; bottom: clamp(1.4rem, 5svh, 3rem); transform: translateX(-50%); margin: 0; z-index: 3; }




/* The work's dossier (2026-10-01): under each project's name its scope and its client, in the mono. In the stack it
   sits in the caption; pinned, js/work-scroll.js copies the current one under the title. */
.rw__dossier, .rw__dossier-live { display: grid; gap: 0.5rem; margin-top: 0.9rem; font-family: var(--digital); font-size: 0.78rem; line-height: 1.7; letter-spacing: 0.04em; color: var(--white); text-shadow: 0 1px 12px var(--shade); }
.rw__scopeline .dot { color: var(--grey); margin: 0 0.1em; }
.rw__meta { display: flex; flex-wrap: wrap; gap: 0.1rem 1.4rem; }
.rw__dossier .dossier__k, .rw__dossier-live .dossier__k { color: var(--red-text); text-transform: uppercase; letter-spacing: 0.14em; }
.rw.is-pinned .rw__dossier-live { max-width: max(15rem, calc(27vw - var(--gutter) - 5rem)); }
.rw__dossier-live:empty { display: none; }
.rw__dossier-live.is-in { animation: dossierIn 0.6s var(--slow) both; }
.rw:not(.is-pinned) .rw__dossier-live { display: none; }
@media (prefers-reduced-motion: reduce) { .rw__dossier-live.is-in { animation: none; } }


/* The wire forms behind the title cards are gone (2026-10-01); the names stand as plain type. */
.title__gl { display: none; } /* the wire forms behind the cards are gone (2026-10-01) */

/* The lockup as a split-flap board (js/lockup-flap.js): its canvas lies over the wordmark, which stays in the page
   (for its size and for anyone without WebGL) but goes clear once the tiles are up. */
.flap-gl { position: absolute; display: block; pointer-events: none; z-index: 2; }
.hero__mark.is-flap .hero__word { opacity: 0; }

/* What we do and the method, scrolled (js/pin-steps.js): the section pins while the scroll steps through its names,
   a ruler of numbers down the left of the names with a red marker riding the scroll, like the work's. */
.panel.services.is-steps { height: calc(100svh + (var(--steps) - 1) * 60svh); min-height: 0; overflow: clip; }
.panel.services.is-steps > .panel__in { position: sticky; top: 0; height: 100svh; min-height: 0; }
.services__left { position: relative; }
.steps__ruler { display: none; }
.is-steps .steps__ruler { display: flex; gap: 0.7rem; position: absolute; left: -3.8rem; top: 0; height: 100%; }
.steps__marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.steps__mark { display: block; padding: 0.2rem 0; font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.14em; line-height: 1; color: var(--mark-rest); transition: color 0.4s var(--ease); }
.steps__mark.is-on { color: var(--white); }
.steps__track { position: relative; width: 6px; height: 100%; container-type: size; background: repeating-linear-gradient(to bottom, var(--hairline-strong) 0 1px, transparent 1px 9px); background-position: 0 0.35rem; }
.steps__marker { position: absolute; left: -3px; top: 0; width: 12px; height: 2px; margin-top: 0.3rem; background: var(--red); box-shadow: 0 0 10px var(--red-glow); will-change: transform; }
.is-steps .svc__link { cursor: pointer; }

/* The work, pinned, as a grid (2026-10-01): ruler, words, window in three columns, so a long name wraps inside its
   own column and can never run over the picture. The window keeps its 16:10 and sits centred in its column. */
.rw.is-pinned .rw__pin { display: grid; grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; padding: 0 var(--gutter); max-width: 1600px; margin: 0 auto; }
.rw.is-pinned .rw__ruler { position: static; transform: none; align-self: center; }
.rw.is-pinned .rw__text { position: static; max-width: none; transform: none; align-self: center; }
.rw.is-pinned .rw__window { position: relative; left: auto; top: auto; transform: none; width: 100%; max-height: 68svh; justify-self: center; }
.rw.is-pinned .rw__dossier-live { max-width: none; }
.rw.is-pinned .rw__all { left: 50%; }
.rw__title { text-wrap: balance; }

/* The Trusted by band's rules, as a measuring rule (2026-10-01): each line inset to the gutter and stopped at both
   ends, fine ticks along it with a taller one every 120px, all pointing into the band; a short red segment scans
   along the top one, and back along the bottom one. A small tag top right counts the marks. */
.band { border-top: 0; border-bottom: 0; }
.band::before, .band::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); height: 9px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--red), var(--red)) 0 0 / 56px 1px no-repeat,
    linear-gradient(var(--grey), var(--grey)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--grey), var(--grey)) 100% 0 / 1px 9px no-repeat,
    linear-gradient(var(--hairline-strong), var(--hairline-strong)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--hairline-strong) 0 1px, transparent 1px 120px) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(to right, var(--hairline) 0 1px, transparent 1px 12px) 0 0 / 100% 3px no-repeat;
  animation: bandScan 14s linear infinite;
}
.band::before { top: 0; }
.band::after { bottom: 0; transform: scaleY(-1); animation-direction: reverse; }
@keyframes bandScan {
  from { background-position: 0% 0, 0 0, 100% 0, 0 0, 0 0, 0 0; }
  to { background-position: 100% 0, 0 0, 100% 0, 0 0, 0 0, 0 0; }
}
.band__hud { position: absolute; top: 14px; right: var(--gutter); z-index: 1; font-size: 0.58rem; letter-spacing: 0.16em; color: var(--grey); }
@media (prefers-reduced-motion: reduce) { .band::before, .band::after { animation: none; } }


/* Built for (2026-10-02; js/gate.js): after the click on the gate, the W and the studio line clear and one mono line
   stands in the middle, "Built for" in red and the rest decoding through three kinds of people. */
.gate.is-built .gate__canvas, .gate.is-built .gate__studio { opacity: 0; transition: opacity 0.35s var(--ease); }
.gate__built { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); font-family: var(--digital); font-size: clamp(0.9rem, 0.7rem + 0.8vw, 1.5rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); white-space: nowrap; text-align: center; animation: builtIn 0.4s var(--ease) both; }
.gate__built-k { color: var(--white); }
.gate__built-r { color: var(--red); } /* the key words, in the deep Wolf Red (Daniel, 2026-10-02) */
.gate__built-v { display: inline-block; min-width: 26ch; text-align: left; }
.gate__built.is-out { opacity: 0; transition: opacity 1.1s var(--slow); animation: none; } /* fades slowly as the dots come in */
@keyframes builtIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) { .gate__built { white-space: normal; } .gate__built-v { display: block; min-width: 0; text-align: center; margin-top: 0.5em; } }

/* The services' title card holds a full line (2026-10-02), so it sets a size down and wraps in balance. */
.title__name--line { max-width: 22ch; margin-inline: auto; font-size: clamp(2.4rem, 6.2vw, 7.4rem); line-height: var(--head-leading); text-wrap: balance; }
.svc__text p + p { margin-top: 0.8em; }

/* The title cards as quiet dividers (2026-10-02): the name in small spaced mono capitals between two hairlines, its
   line under it in small Inter, the card itself short. They break the page between sections without competing with
   the services, the work or the method beside them. */
.panel.title { height: 50svh; } /* taller (2026-10-02): the divider stays on screen longer as the page passes */
.panel.title .title__name, .panel.title .title__name--line {
  display: flex; align-items: center; justify-content: center; gap: clamp(0.9rem, 2vw, 1.6rem);
  max-width: none; margin: 0 auto; font-family: var(--digital); font-weight: 400; font-size: clamp(0.78rem, 0.62rem + 0.45vw, 1.05rem);
  line-height: 1.4; letter-spacing: 0.22em; word-spacing: normal; text-transform: uppercase; white-space: nowrap; color: var(--white);
}
.panel.title .title__name::before, .panel.title .title__name::after { content: ""; flex: 0 0 clamp(2.5rem, 10vw, 9rem); height: 1px; background: var(--grey); opacity: 0.6; }
.panel.title .title__line { margin-top: 0.9rem; font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem); color: var(--text-soft); }
@media (max-width: 767px) { .panel.title { height: auto; padding: 6rem 0 5rem; } .panel.title .title__name, .panel.title .title__name--line { white-space: normal; } .panel.title .title__name::before, .panel.title .title__name::after { flex-basis: 1.5rem; } }

/* The pack, cleaned up (2026-10-02): the two directors as portraits (4:5, full column width, never squashed), the name
   in Inter under a hairline, the role a small spaced label, the bio a calm paragraph. */
.people { gap: clamp(1.6rem, 3vw, 3rem); max-width: 44rem; align-items: start; }
.person img { width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }
.person figcaption { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); display: grid; gap: 0.35rem; }
.person__name { font-family: var(--body); font-weight: 600; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem); letter-spacing: -0.02em; text-transform: none; }
.person__role { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--red-text); }
.person__bio { margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.6; color: var(--text-soft); max-width: 46ch; }
@media (max-width: 767px) { .person img { max-height: none; } }

/* The work's dossier, livelier (2026-10-02): the mono a size up, a touch more air, the agency on its own line where
   there is one. */
.rw__dossier, .rw__dossier-live { gap: 0.55rem; font-size: clamp(0.84rem, 0.72rem + 0.32vw, 1.02rem); line-height: 1.65; letter-spacing: 0.05em; color: var(--white); }
.rw__agency { display: block; }

/* The studio and the close in the wordmark's own type (2026-10-02): The Wolf Pack, A creative powerhouse. and Join the
   Pack set as the WOLF ROAD lockup is, Compacta Light with its tightened letters and narrow word space (--display-*,
   measured from assets/brand/wordmark-white.svg), whatever the other headings are trying. */
#studio-title.h2, .studio__line, .contact__title {
  font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase;
  letter-spacing: var(--display-track); word-spacing: var(--display-word); line-height: 0.88;
}


/* The work's project name morphs into the next (js/work-scroll.js): both names share one place, the old one blurring
   away as the new one sharpens in. */
.rw__title { display: grid; align-items: end; } /* the name on the bottom line of its reserved space (js/work-scroll.js) */
.rw__word { grid-area: 1 / 1; opacity: 0; filter: blur(14px); transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.rw__word.is-in { opacity: 1; filter: blur(0); }
.rw__word.is-out { opacity: 0; filter: blur(14px); transition-duration: 0.45s; }
@media (prefers-reduced-motion: reduce) { .rw__word { transition: none; } }

/* The hero on a phone (2026-10-02), laid out as on desktop: the wordmark across the top left with the slogan under
   it, the statement low on the left beside its wire W with the year under it, [See the work] bottom right. */
@media (max-width: 767px) {
  .hero.has-reel .hero__logo { position: absolute; left: var(--gutter); top: calc(5.2rem + env(safe-area-inset-top, 0px)); width: calc(100% - 2 * var(--gutter)); margin: 0; }
  .hero.has-reel .hero__slogan { text-align: left; padding-left: 0; }
  .hero.has-reel .hero__who { position: absolute; left: var(--gutter); top: auto; bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 2 * var(--gutter)); margin: 0; padding: 0; }
  .hero.has-reel .hero__statement { font-size: clamp(1.35rem, 5.6vw, 2rem); }
  .hero.has-reel .hero__link { position: absolute; left: auto; right: var(--gutter); bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); margin: 0; }
}
/* On a narrow phone the map's coordinates and [Open in Maps] share a line and collide: the coordinates step up one line. */
@media (max-width: 599px) { .map__hud { bottom: 2.4rem; } }

/* Section jumps (js/jump.js): the page dips to black over everything but the header, moves, and comes back up. */
.jump { position: fixed; inset: 0; z-index: 10; background: var(--black); opacity: 0; pointer-events: none; transition: opacity 0.75s var(--slow); }
.jump.is-on { opacity: 1; transition-duration: 0.42s; }
@media (prefers-reduced-motion: reduce) { .jump, .jump.is-on { transition-duration: 0.2s; } }

/* The way in (js/gate.js): the gate's black breaks into the background's 3px dots and dissolves to the page; the
   Built for line fades above it. */
.gate__dissolve { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.gate__built { z-index: 1; }
/* the line dissolving, letter by letter, as the dots come in (js/gate.js) */
.gate__ch { display: inline-block; white-space: pre; transition: opacity 0.9s var(--slow), filter 0.9s var(--slow); }
.gate__built.is-dissolving .gate__ch { opacity: 0; filter: blur(6px); }