/* THAT Production. The THAT family system from thatgroup.co (02_References/THPRD_Family-System-from-thatgroup_v01_20261102.md),
   directed as an edit suite (03_Concepts/THPRD_Direction_v01_20261102.md): a reel that cuts, a timecode that runs with the scroll,
   films shown in a 16:9 screening frame. Black and white; red only for the square, the playhead and what we did on a film.
   Two alignment lines: the 20 px gutter and the second column at 58%. No heading heavier than 600. */

/* While Switzer loads, Arial stands in at Switzer's measured size, so headlines wrap the same and nothing shifts. */
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: optional; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-600.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: optional; }
@font-face { font-family: "Switzer Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 101.9%; ascent-override: 96%; descent-override: 24.5%; line-gap-override: 0%; }
:root {
  --font: "Switzer", "Switzer Fallback", sans-serif;
  --black: #000;
  --ink: #241f21;
  --red: #ed2b36;
  --white: #fff;
  --muted: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.2);
  --gutter: 20px;
  --col2: 58%;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-curtain: cubic-bezier(0.12, 0.23, 0.13, 0.96);
  --head: 48px;
  --frame: min(1025px, calc(100vw - 2 * var(--gutter)));
}
@media (max-width: 700px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; background: var(--black); color: var(--white); font-family: var(--font); -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body { font-size: 14px; line-height: 1.4; letter-spacing: -0.02em; min-height: 100vh; display: flex; flex-direction: column; background: var(--black); }
main { flex: 1; }
img, video { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0,0,0,0.85); }
::selection { background: var(--red); color: var(--white); }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 80; background: var(--white); color: var(--black); padding: 8px 12px; }
.skip:focus { top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label { font-size: 12px; letter-spacing: 0; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }
.red { color: var(--red); }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 14px; }
.arrow-link > span[aria-hidden] { transition: transform 300ms var(--ease); }
.arrow-link:hover > span[aria-hidden] { transform: translateX(4px); }
.underline { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 300ms var(--ease); }
a:hover .underline, a.underline:hover { background-size: 100% 1px; }
.big { font-size: clamp(28px, 2.8vw, 44px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 400; max-width: 24ch; }
.display { font-size: clamp(42px, 5vw, 84px); line-height: 0.95; letter-spacing: -0.04em; font-weight: 500; }

/* ---------- Header: name, menu at 58%, and the timecode with its playhead (the signature) ---------- */
.head { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--head); display: flex; align-items: center; padding: 0 var(--gutter); font-size: 14px; }
.head::before { content: ""; position: absolute; inset: 0 0 -24px 0; z-index: -1; background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0)); pointer-events: none; transition: opacity 300ms; }
/* Once scrolled, the header takes a dark glass backing, as on thatgroup.co, so text never runs under it. */
.scrolled .head { background: rgba(5, 5, 5, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.scrolled .head::before { opacity: 0; }
.head .brand { padding: 12px 0; font-weight: 500; }
.head .nav { position: absolute; left: var(--col2); display: flex; align-items: center; gap: 14px; }
.head .menu-btn { padding: 12px 0; min-width: 44px; text-align: left; }
.head .menu { display: flex; gap: 14px; list-style: none; }
.head .menu a { display: inline-flex; align-items: center; padding: 12px 0; color: var(--muted); transition: color 200ms; }
.head .menu a:hover, .head .menu a[aria-current="page"] { color: var(--white); }
.js .head .menu li { opacity: 0; transform: translateX(-6px); visibility: hidden; transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s 260ms; transition-delay: calc(var(--i) * 40ms); }
.js .head.open .menu li { opacity: 1; transform: none; visibility: visible; transition-delay: calc(var(--i) * 40ms); }
/* Timecode: hours, minutes, seconds and frames at 25 fps; tabular digits so it never jitters. */
.head .tc { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.head .tc-l { color: var(--red); margin-right: 4px; font-size: 11px; }
/* The playhead: a hairline under the header with a red square that travels from the start of the page to its end. */
.playhead { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--line); pointer-events: none; }
.playhead i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--red); transform: translateX(calc(var(--ph, 0) * (100vw - 2 * var(--gutter) - 7px))); }
@media (max-width: 900px) {
  .head .nav { left: auto; right: var(--gutter); }
  .head .tc { margin-left: 0; position: absolute; left: 50%; transform: translateX(-50%); }
  .head .menu { position: fixed; inset: var(--head) 0 auto 0; flex-direction: column; gap: 0; padding: 12px var(--gutter) 28px; background: var(--black); border-bottom: 1px solid var(--line); }
  .js .head:not(.open) .menu { visibility: hidden; }
  .head .menu a { font-size: 28px; letter-spacing: -0.03em; padding: 6px 0; color: var(--white); }
}
@media (max-width: 420px) { .head .tc-l { display: none; } }
@media (max-width: 359px) { .head .tc { display: none; } }   /* at 320 the name and the timecode touch (review 💡6) */

/* Link hover from the family (Framer "Text Link Dot"): a small square grows before the word and nudges it right. */
.head .menu a::before, .foot .cols a::before, .getin dd a::before {
  content: ""; flex: none; width: 0; height: 0.42em; margin-right: 0; background: currentColor; opacity: 0;
  transition: width 300ms var(--ease), margin-right 300ms var(--ease), opacity 200ms var(--ease);
}
.head .menu a:hover::before, .head .menu a:focus-visible::before, .foot .cols a:hover::before, .foot .cols a:focus-visible::before,
.getin dd a:hover::before, .getin dd a:focus-visible::before { width: 0.42em; margin-right: 0.32em; opacity: 1; }

/* ---------- Hero: the reel cuts frame to frame behind the headline ---------- */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: clip; }
.reel { position: absolute; inset: 0; }
.reel img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.reel img.on, .reel video { opacity: 1; }
/* A dark wash at the bottom keeps the white headline readable on any frame. */
.hero::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.78)); pointer-events: none; }
.hero h1 { position: absolute; z-index: 2; left: var(--gutter); bottom: 18px; font-size: clamp(56px, 9.4vw, 176px); font-weight: 500; line-height: 0.86; letter-spacing: -0.05em; }
.hero h1 .l { display: block; white-space: nowrap; }
.hero .lede { position: absolute; z-index: 2; left: var(--col2); right: var(--gutter); bottom: 64px; max-width: 380px; font-size: 15px; line-height: 1.35; color: rgba(255,255,255,0.9); }
.reel-ctrl { position: absolute; z-index: 2; left: var(--col2); bottom: 22px; display: flex; gap: 18px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.reel-ctrl button { padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.reel-n { color: var(--muted); }
/* Two doors that sort the visitor (The Mill, THPRD_References §2): agencies first, brands and government second. */
.doors { position: absolute; z-index: 2; right: var(--gutter); bottom: 22px; display: flex; gap: 8px; }
.doors a { padding: 8px 14px; border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; font-size: 13px; background: rgba(0,0,0,0.35); transition: background 200ms, color 200ms; }
.doors a:hover { background: var(--white); color: var(--black); }
.motion .doors { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--ease) 650ms, transform 800ms var(--ease) 650ms; }
.motion.ready .doors { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .hero h1 { bottom: 170px; }
  .hero .lede { left: var(--gutter); bottom: 60px; max-width: none; }
  .reel-ctrl { left: var(--gutter); bottom: 22px; }
  .hero h1 { bottom: 210px; } .hero .lede { bottom: 104px; } .reel-ctrl { bottom: 62px; }
  .doors { left: var(--gutter); right: auto; bottom: 18px; }
}
@media (max-width: 380px) { .doors a { padding: 8px 10px; font-size: 12px; } }

/* ---------- Numbers ---------- */
.section { margin: 0 var(--gutter); padding: 20px 0 0; border-top: 1px solid var(--line); }
.section + .section, .stack + .section, .scenes + .section { margin-top: 140px; }
.intro { margin-top: 100px; }
.sec-head { display: grid; grid-template-columns: 1fr; align-items: baseline; }
.sec-head > * { grid-area: 1 / 1; }
.sec-head .label { color: var(--white); text-transform: none; font-size: 14px; }
.sec-head .more { justify-self: end; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; }
.stats li { padding-top: 6px; }
.stats b { display: block; font-size: clamp(52px, 6.4vw, 112px); font-weight: 400; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 12px; max-width: 30ch; color: var(--muted); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Selected films: each film sits in a 16:9 screening frame; its title holds at mid-screen and rolls ---------- */
.stack-head { margin: 140px var(--gutter) 0; padding-top: 20px; border-top: 1px solid var(--line); }
.stack { margin-top: 20px; }
/* overflow: clip, not hidden, so the sticky caption keeps working (LESSONS 2026-11-01). */
.work { position: relative; display: grid; place-items: center; height: 100vh; min-height: 560px; overflow: clip; }
.work .screen { width: var(--frame); aspect-ratio: 16 / 9; background: var(--ink); overflow: clip; position: relative; }
/* A soft dark band across the middle of the frame, where the caption holds, so a light frame never washes the title out (review ⚠️2). */
.work .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 70%); }
.work .screen img, .work .screen video { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms var(--ease), transform 1000ms var(--ease); }
.motion .work .screen img, .motion .work .screen video { transform: scale(1.06); }
.motion .work.now .screen img, .motion .work.now .screen video { transform: none; }
.work.dim .screen img, .work.dim .screen video { opacity: 0.55; }
.work .cap { position: absolute; z-index: 2; inset: 0 0 auto 0; height: 100%; pointer-events: none; }
.work .cap > * { position: sticky; top: calc(50vh - 14px); }
.work .cap { display: grid; grid-template-columns: 1fr; padding: 0 var(--gutter); font-size: 25px; line-height: 1; letter-spacing: -0.05em; text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 24px rgba(0,0,0,0.5); }
.work .cap > * { grid-area: 1 / 1; align-self: start; transition: opacity 200ms var(--ease); }
.work .cap.out > * { opacity: 0; }
.work .cap h2 { font-size: inherit; font-weight: 600; white-space: nowrap; margin-left: 52px; }
.work .cap .num { font-size: 13px; letter-spacing: 0; padding-top: 7px; color: var(--muted); font-variant-numeric: tabular-nums; }
.work .cap .meta { justify-self: end; font-size: 14px; letter-spacing: -0.01em; padding-top: 6px; }
.work .cap .sq { width: 10px; height: 10px; margin: 8px 0 0 36px; background: var(--red); transform: scale(0); transition: transform 300ms var(--ease); }
.work.now .cap .sq { transform: scale(1); }
/* What we did (red) and the views sit under the frame, on black, where red text keeps its contrast. */
.work .views { position: absolute; left: 50%; top: calc(50% + var(--frame) * 9 / 32 + 12px); transform: translateX(-50%); width: var(--frame); display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--muted); }
.work .views b { color: var(--white); font-weight: 400; }
.work:focus-visible { outline-offset: -8px; }
@media (max-width: 700px) {
  .work { height: 62vh; min-height: 440px; }   /* less black around the 16:9 frame on phones (review ⚠️3) */
  .work .cap { font-size: 20px; }
  .work .cap h2 { white-space: normal; max-width: calc(100vw - 2 * var(--gutter) - 52px); }
  .work .cap .meta { display: none; }
}

/* ---------- Statement, words light up as you read ---------- */
.statement { display: grid; grid-template-columns: 1fr; gap: 24px; }
.statement .label, .ai .label, .next-steps .label { color: var(--white); text-transform: none; font-size: 14px; }
.statement .big { margin-left: calc(var(--col2) - var(--gutter)); max-width: 22ch; }
@media (max-width: 900px) { .statement .big { margin-left: 0; } }

/* ---------- What we do: pinned scenes, one craft per screen ---------- */
.scenes { position: relative; margin-top: 140px; }
.scenes .stick { position: relative; }
.scene-bg { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.scene-bg.on { opacity: 1; }
.scene-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.38) saturate(0.9); transform: scale(1.06); transition: transform 2400ms var(--ease); }
.scene-bg.on img { transform: scale(1); }
.scene-copy { position: relative; z-index: 2; height: 100%; padding: calc(var(--head) + 20px) var(--gutter) 28px; display: flex; flex-direction: column; }
.scene-copy > .label { color: var(--white); text-transform: none; font-size: 14px; }
.scene-words { list-style: none; position: relative; flex: 1; }
.scene-word h3 { font-size: clamp(48px, 8.4vw, 150px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; }
.scene-word p { margin-top: 22px; max-width: 36ch; font-size: 16px; color: rgba(255,255,255,0.88); }
.scene-count { align-self: flex-end; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.scene-count b { color: var(--white); font-weight: 400; }
html:not(.motion) .scenes { margin-left: var(--gutter); margin-right: var(--gutter); }
html:not(.motion) .scene-bg { display: none; }
html:not(.motion) .scene-copy { padding: 20px 0 0; border-top: 1px solid var(--line); }
html:not(.motion) .scene-word { padding: 28px 0; border-top: 1px solid var(--line); }
html:not(.motion) .scene-word:first-child { border-top: 0; }
html:not(.motion) .scene-count { display: none; }
.motion .scenes { height: 620vh; }
.motion .scenes .stick { position: sticky; top: 0; height: 100vh; overflow: clip; }
.motion .scene-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.motion .scene-word p { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.motion .scene-word.on p { opacity: 1; transform: none; transition-delay: 300ms; }
.motion .scene-word:not(.on) p { transition-duration: 180ms; }
.motion .scene-word.reset .ci { transition: none !important; }
.motion .scene-word .ci { transform: translateY(140%); transition: transform 800ms var(--ease); transition-delay: calc(var(--i) * 22ms); }
.motion .scene-word.on .ci { transform: none; }
.motion .scene-word.was .ci { transform: translateY(-140%); transition-duration: 500ms; transition-delay: calc(var(--i) * 10ms); }
@media (max-width: 700px) { .motion .scenes { height: 560vh; } }

/* ---------- How we work: the step nearest mid-screen is lit; the counter is pinned beside them ---------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; }
.steps-side { position: sticky; top: calc(var(--head) + 24px); align-self: start; }
.steps-side .label { color: var(--white); text-transform: none; font-size: 14px; }
.step-n { margin-top: 16px; font-size: clamp(60px, 8vw, 140px); line-height: 0.9; letter-spacing: -0.05em; color: var(--muted); font-variant-numeric: tabular-nums; }
.step-n b { color: var(--white); font-weight: 400; }
.steps-list { list-style: none; }
.steps-list li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 26px 0 30px; border-top: 1px solid var(--line); }
.steps-list li:first-child { border-top: 0; padding-top: 0; }
.steps-list .n { font-size: 14px; color: var(--muted); padding-top: 10px; font-variant-numeric: tabular-nums; }
.steps-list h3 { font-size: clamp(28px, 3.4vw, 56px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; }
.steps-list p { margin-top: 12px; max-width: 44ch; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.84); }
/* The resting steps dim by colour, not opacity, so they keep 4.5:1 contrast on black (LESSONS 2026-11-02). */
.motion .steps-list li h3, .motion .steps-list li p { color: rgba(255,255,255,0.52); transition: color 400ms var(--ease); }
.motion .steps-list li.on h3 { color: var(--white); }
.motion .steps-list li.on p { color: rgba(255,255,255,0.88); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } .steps-side { position: static; } .step-n { display: none; } }

/* ---------- What we need: a checklist with red squares ---------- */
.needs-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 24px; margin-left: calc(var(--col2) - var(--gutter)); }
.needs-list li { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 18px; letter-spacing: -0.03em; }
.needs-list .sq, .svc-rows .sq { flex: none; width: 8px; height: 8px; background: var(--red); }
@media (max-width: 1100px) { .needs-list { margin-left: 0; } }
@media (max-width: 700px) { .needs-list { grid-template-columns: 1fr; } }

.stack-credit { margin: 12px var(--gutter) 0; max-width: 60ch; font-size: 13px; }
.credit { margin-top: 18px; max-width: 60ch; font-size: 14px; }
p.section.credit { border-top: 0; margin-top: 60px; }

/* ---------- Inner page tops ---------- */
.top { padding: calc(var(--head) + 18vh) var(--gutter) 0; }
.top h1 { margin-top: 14px; font-size: clamp(48px, 7.6vw, 140px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; max-width: 15ch; }
.top .lede { margin-top: 28px; margin-left: calc(var(--col2) - var(--gutter)); max-width: 46ch; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.86); }
@media (max-width: 900px) { .top { padding-top: calc(var(--head) + 12vh); } .top .lede { margin-left: 0; } }

/* ---------- Work page: filter and grid ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 60px var(--gutter) 0; padding-top: 20px; border-top: 1px solid var(--line); }
.filters button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: rgba(255,255,255,0.82); transition: background 200ms, color 200ms, border-color 200ms; }
.filters button:hover { border-color: rgba(255,255,255,0.6); }
.filters button[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
.fgrid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 10px; margin: 28px var(--gutter) 0; }
.fgrid a { display: block; }
.fgrid .ph { aspect-ratio: 16 / 9; overflow: clip; background: var(--ink); }
.fgrid .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease); }
.fgrid a:hover .ph img { transform: scale(1.04); }
.fgrid h3 { margin-top: 14px; font-size: 20px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }
.fgrid p { margin-top: 4px; font-size: 14px; }
.fgrid .role { color: var(--red); }
.fgrid [hidden] { display: none; }
@media (max-width: 700px) { .fgrid { grid-template-columns: 1fr; gap: 40px; } }
@keyframes tile-in { from { transform: translateY(32px); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(-12px -12px -20% -12px); } }
.motion .fgrid > li { animation: tile-in 1100ms var(--ease) both; }
.motion .fgrid > li:nth-child(2) { animation-delay: 90ms; } .motion .fgrid > li:nth-child(3) { animation-delay: 180ms; } .motion .fgrid > li:nth-child(4) { animation-delay: 270ms; }

/* ---------- Film page ---------- */
.film-page .top h1 { max-width: 18ch; font-size: clamp(40px, 6vw, 112px); }
.big-screen { width: var(--frame); aspect-ratio: 16 / 9; margin: 60px auto 0; background: var(--ink); overflow: clip; }
.big-screen img, .big-screen video { width: 100%; height: 100%; object-fit: cover; }
.watch { display: flex; align-items: center; gap: 14px; width: var(--frame); margin: 18px auto 0; font-size: 16px; }
.watch .play { flex: none; position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--white); transition: transform 400ms var(--ease); }
.watch .play::after { content: ""; position: absolute; left: 21px; top: 17px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--black); }
a.watch:hover .play { transform: scale(1.08); }
.watch.off { color: var(--muted); font-size: 15px; }
.watch.off a { color: var(--white); }
.film-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: 40px; margin-top: 120px; }
.film-info .big { max-width: 26ch; }
.facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; padding-top: 6px; }
.facts dt { color: var(--muted); }
@media (max-width: 900px) { .film-info { grid-template-columns: 1fr; } }
.strip { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.strip li { width: min(325px, calc((100% - 20px) / 3)); }
@media (max-width: 700px) { .strip li { width: calc((100% - 10px) / 2); } }
.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); gap: 20px; align-items: end; margin: 140px var(--gutter) 0; padding-top: 20px; border-top: 1px solid var(--line); }
.next .label { grid-column: 1 / -1; }
.next-t { font-size: clamp(32px, 4.4vw, 76px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; transition: transform 400ms var(--ease); }
.next:hover .next-t { transform: translateX(10px); }
.next-ph { aspect-ratio: 16 / 9; overflow: clip; }
.next-ph img { height: 100%; object-fit: cover; transition: transform 1000ms var(--ease); }
.next:hover .next-ph img { transform: scale(1.05); }
@media (max-width: 700px) { .next { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.svc-rows { list-style: none; margin-top: 28px; border-bottom: 1px solid var(--line); }
.svc-rows > li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; padding: 34px 0 38px; border-top: 1px solid var(--line); }
.svc-rows > li > .n { padding-top: 10px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-rows > li > h3 { font-size: clamp(32px, 3.6vw, 60px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; color: rgba(255,255,255,0.8); transition: color 300ms var(--ease), transform 400ms var(--ease); }
.svc-rows > li > div > p { max-width: 42ch; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.86); }
.svc-rows .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.svc-rows .tags li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: rgba(255,255,255,0.82); }
.svc-rows > li > .sq { position: absolute; left: 0; top: -4px; transform: scale(0); transition: transform 260ms var(--ease); }
.svc-rows > li:hover > h3 { color: var(--white); transform: translateX(8px); }
.svc-rows > li:hover > .sq { transform: scale(1); }
@media (max-width: 800px) {
  .svc-rows > li { grid-template-columns: 40px 1fr; gap: 12px; padding: 26px 0 30px; }
  .svc-rows > li > div { grid-column: 2; }
}
.ways { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.ways li { padding-top: 16px; border-top: 1px solid var(--line); }
.ways .n { display: block; margin-bottom: 18px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ways h3 { font-size: clamp(26px, 2.4vw, 40px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.ways p { margin-top: 14px; max-width: 34ch; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.84); }
@media (max-width: 800px) { .ways { grid-template-columns: 1fr; gap: 32px; } }
/* For brands and government: the anchor lands below the fixed header (review ⚠️5), then the films made for them. */
.brands { scroll-margin-top: calc(var(--head) + 24px); }
.brands .big { margin-left: calc(var(--col2) - var(--gutter)); max-width: 30ch; font-size: clamp(22px, 2vw, 32px); line-height: 1.15; }
@media (max-width: 900px) { .brands .big { margin-left: 0; } }
.brand-films { list-style: none; margin-left: calc(var(--col2) - var(--gutter)); border-bottom: 1px solid var(--line); }
.brand-films a { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); font-size: 18px; letter-spacing: -0.03em; transition: padding 300ms var(--ease); }
.brand-films a .muted { font-size: 14px; letter-spacing: -0.01em; }
.brand-films a:hover { padding-left: 10px; }
@media (max-width: 900px) { .brand-films { margin-left: 0; } .brand-films a { grid-template-columns: 1fr 20px; } .brand-films a .muted { display: none; } }
.ai { display: grid; gap: 24px; }
.ai .big { margin-left: calc(var(--col2) - var(--gutter)); max-width: 30ch; font-size: clamp(24px, 2.2vw, 34px); }
@media (max-width: 900px) { .ai .big { margin-left: 0; } }

/* ---------- Contact ---------- */
.getin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: 40px; margin-top: 80px; }
.getin .mail { margin-top: 8px; font-size: clamp(32px, 4.4vw, 76px); letter-spacing: -0.05em; line-height: 1; overflow-wrap: anywhere; }
.getin .mail a { background: linear-gradient(var(--red), var(--red)) 0 100% / 0 3px no-repeat; transition: background-size 400ms var(--ease); }
.getin .mail a:hover { background-size: 100% 3px; }
.copy { margin-top: 18px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.copy:hover { border-color: rgba(255,255,255,0.6); }
.getin dl > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.getin dl > div:first-child { border-top: 0; }
.getin dt { color: var(--muted); }
.getin dd a { display: flex; align-items: center; width: max-content; max-width: 100%; }
@media (max-width: 900px) { .getin { grid-template-columns: 1fr; } }
.ns { list-style: none; margin-top: 24px; margin-left: calc(var(--col2) - var(--gutter)); }
.ns li { display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--line); font-size: 18px; letter-spacing: -0.03em; }
.ns .n { font-size: 14px; color: var(--muted); padding-top: 3px; }
@media (max-width: 1100px) { .ns { margin-left: 0; } }
.next-steps { display: grid; }

.prose { margin-top: 80px; }
.prose p { max-width: 60ch; margin-left: calc(var(--col2) - var(--gutter)); font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.86); }
.prose p + p { margin-top: 16px; }
@media (max-width: 900px) { .prose p { margin-left: 0; } }

/* ---------- 404 ---------- */
.lost { min-height: 86vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) 40px; }
.lost .code { color: var(--red); font-size: clamp(80px, 14vw, 240px); letter-spacing: -0.06em; line-height: 0.85; }
.lost h1 { margin-top: 18px; font-size: clamp(32px, 4.4vw, 76px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; max-width: 18ch; }
.lost-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 30px; font-size: 18px; }
.lost-links a:hover { color: var(--red); }

/* ---------- Call to action and footer ---------- */
.cta { margin: 180px var(--gutter) 0; padding-top: 20px; border-top: 1px solid var(--line); }
.cta h2 { max-width: 14ch; }
.cta .big-mail { margin-top: 24px; font-size: 18px; }
/* Footer from thatgroup.co v2.39 (Muhannad, 2026-11-02): the wordmark small in the empty left side; columns at 58%;
   a bottom row with no rule and no office address: the copyright on the left, then Riyadh's live time, Privacy and
   THAT Group lined up with the Sitemap column; THAT Group shows the group logo on hover; the cube at the far right. */
.foot { position: relative; margin: 120px var(--gutter) 0; padding: 20px 0 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; }
.foot > .mega, .foot > .cols { grid-area: 1 / 1; align-self: start; }
.foot .mega { margin: 0; font-size: min(2.2vw, 34px); line-height: 0.92; letter-spacing: -0.055em; font-weight: 500; white-space: nowrap; max-width: calc(var(--col2) - var(--gutter) - 40px); }
.foot .mega .w { padding-bottom: 0.3em; margin-bottom: -0.3em; }
.motion .foot .mega .ci { transform: translateY(140%); transition: transform 700ms var(--ease); transition-delay: calc(var(--i) * 22ms); }
.motion .foot .mega.in .ci { transform: none; }
.foot .cols { margin-left: calc(var(--col2) - var(--gutter)); display: flex; gap: 48px; }
.foot .cols a { display: flex; align-items: center; width: max-content; line-height: 26px; }
.foot .cols .label { margin-bottom: 6px; }
.foot .base { grid-area: 2 / 1; display: grid; grid-template-columns: calc(var(--col2) - var(--gutter)) 1fr; align-items: baseline;
  margin-top: 70px; padding: 18px 0 0; font-size: 13px; color: var(--muted); }
.foot .base .mid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 30px; padding-right: 64px; }
.foot .base .time { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.foot .base .time i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.foot .base a { display: inline-flex; align-items: center; transition: color 200ms; }
.foot .base a:hover, .foot .base a:focus-visible { color: var(--white); }
.foot .base a::before { content: ""; width: 0; height: 0.42em; margin-right: 0; background: currentColor; opacity: 0; transition: width 300ms var(--ease), margin-right 300ms var(--ease), opacity 200ms var(--ease); }
.foot .base a:hover::before, .foot .base a:focus-visible::before { width: 0.42em; margin-right: 0.32em; opacity: 1; }
.foot .base .tg { position: relative; }
.foot .base .tg-logo { position: absolute; left: 0; bottom: calc(100% + 14px); width: 200px; padding: 16px 18px; background: #141414; border-radius: 4px;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 300ms var(--ease), transform 450ms var(--ease); }
.foot .base .tg-logo img { display: block; width: 100%; height: auto; }
.foot .base .tg:hover .tg-logo, .foot .base .tg:focus-visible .tg-logo { opacity: 1; transform: none; }
@media (max-width: 800px) {
  .foot > .mega, .foot > .cols, .foot .base { grid-area: auto; }
  .foot .mega { font-size: 6vw; max-width: none; margin-bottom: 8px; }
  .foot .cols { margin: 36px 0 0; flex-wrap: wrap; gap: 28px 40px; }
  /* Bigger tap targets on phones (thatgroup.co v2.37: footer links were 18 to 26 px tall) */
  .foot .cols a { line-height: 1.2; padding: 9px 0; }
  .foot .cols .label { margin-bottom: 0; }
  .foot .base { grid-template-columns: 1fr; gap: 10px; margin-top: 48px; }
  .foot .base .mid { gap: 0 24px; padding-right: 54px; }
  .foot .base .time { flex-basis: 100%; margin-bottom: 4px; }
  .foot .base a { padding: 8px 0; }
}

/* The footer cube from the family: rolls when it comes into view, follows the pointer, and takes you back to the top. */
.foot .cube-hit { grid-area: 2 / 1; align-self: end; justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -11px -11px 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.foot .cube-hit:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.foot .cube { position: relative; width: 22px; height: 22px; --a: 0deg; }
.foot .cube i { position: absolute; inset: 0; background: var(--red); }
.foot .cube i + i { display: none; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --tx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ty { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cube-roll { from { --spin: 0deg; } to { --spin: 720deg; } }
.motion .foot .cube { transform-style: preserve-3d; transition: --tx 500ms var(--ease), --ty 500ms var(--ease);
  transform: rotateX(calc(-24deg + var(--tx))) rotateY(calc(var(--a) + var(--ty) + var(--spin))) rotateZ(calc(var(--a) * 0.25)); }
.motion .foot .cube.roll { animation: cube-roll 2400ms var(--ease); }
.motion .foot .cube i { display: block; backface-visibility: hidden; }
.motion .foot .cube i:nth-child(1) { transform: translateZ(11px); }
.motion .foot .cube i:nth-child(2) { transform: rotateY(180deg) translateZ(11px); background: #b81f29; }
.motion .foot .cube i:nth-child(3) { transform: rotateY(90deg) translateZ(11px); background: #c9232e; }
.motion .foot .cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(11px); background: #c9232e; }
.motion .foot .cube i:nth-child(5) { transform: rotateX(90deg) translateZ(11px); background: #ff5a63; }
.motion .foot .cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(11px); background: #8f1820; }
@media (max-width: 800px) { .foot .cube-hit { position: absolute; right: 0; bottom: 16px; margin: 0; } }

/* ---------- Pointer label, reading line, grain ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--white); color: var(--black); display: grid; place-items: center; font-size: 13px; scale: 0; transition: scale 260ms var(--ease); }
.cursor.on { scale: 1; }
@media (pointer: fine) { .motion [data-cursor] { cursor: none; } }
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 50; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
/* Film grain at 5%, still, for the photographic feel (from the family). */
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* =====================================================================
   Motion. Everything below moves only when <html> has the "motion" class.
   One curve for every reveal (--ease), as on thatgroup.co.
   ===================================================================== */
/* Word and letter masks: room below for descenders and on the right for tight spacing (LESSONS 2026-11-01: 140%, not 108%). */
.w { display: inline-block; overflow: clip; vertical-align: top; padding: 0 0.08em 0.2em 0; margin: 0 -0.08em -0.2em 0; }
.wi, .ci { display: inline-block; }
.motion [data-split] .wi, .motion [data-split] .ci { transform: translateY(140%); transition: transform 900ms var(--ease); transition-delay: calc(var(--i) * 45ms); }
.motion [data-split="chars"] .ci { transition-duration: 700ms; transition-delay: calc(var(--i) * 22ms); }
.motion [data-split].in .wi, .motion [data-split].in .ci { transform: none; }
/* Page headlines rise straight from CSS (split at build time), so they paint on the first frame. */
@keyframes rise { from { transform: translateY(140%); } to { transform: none; } }
.motion h1[data-split] .ci { animation: rise 800ms var(--ease) both; animation-delay: calc(100ms + var(--i) * 24ms); transition: none; }
.motion .stagger > * { clip-path: inset(0 0 100% 0); transform: translateY(32px); transition: clip-path 800ms var(--ease), transform 800ms var(--ease); }
.motion .stagger.in > * { clip-path: inset(-12px -12px -20% -12px); transform: none; }
.motion .stagger.in > :nth-child(2) { transition-delay: 80ms; } .motion .stagger.in > :nth-child(3) { transition-delay: 160ms; }
.motion .stagger.in > :nth-child(4) { transition-delay: 240ms; } .motion .stagger.in > :nth-child(5) { transition-delay: 320ms; }
.motion .stagger.in > :nth-child(6) { transition-delay: 400ms; }
/* The big film frame opens from the bottom like a curtain, from CSS on load (it is the largest thing on screen). */
@keyframes unclip { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
.motion .big-screen[data-unclip] { animation: unclip 1200ms cubic-bezier(0.7, 0, 0.2, 1) 150ms both; }
.motion .big-screen[data-unclip] img, .motion .big-screen[data-unclip] video { animation: settle 1600ms var(--ease) 150ms both; }
/* Work titles roll letter by letter when their film reaches mid-screen, and roll on out when it leaves. */
.motion .work .cap h2 .ci { transform: translateY(140%); transition: transform 650ms var(--ease); transition-delay: calc(var(--i) * 24ms); }
.motion .work.now .cap h2 .ci { transform: none; }
.motion .work.past .cap h2 .ci { transform: translateY(-140%); transition-duration: 400ms; transition-delay: calc(var(--i) * 12ms); }
.motion [data-words] .wi { color: rgba(255,255,255,0.5); transition: color 350ms var(--ease); }
.motion [data-words] .wi.on { color: var(--white); }
/* The hero headline is the largest text on screen, so it is visible from the first frame (LESSONS 2026-10-30, LCP);
   see the next rule for the line beside it. */
/* The line beside it is the largest paint on phones (measured 2026-11-02: the reel frame is too low-detail to count), so it is
   there from the first frame too; only the small reel controls fade in. */
.motion .reel-ctrl { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--ease) 500ms, transform 800ms var(--ease) 500ms; }
.motion.ready .reel-ctrl { opacity: 1; transform: none; }

/* Page to page: the new page rises over the old one like a curtain (Chrome and Safari). */
@view-transition { navigation: auto; }
@media not (prefers-reduced-motion) {
  ::view-transition-old(root) { animation: 700ms var(--ease-curtain) both vt-out; }
  ::view-transition-new(root) { animation: 700ms var(--ease-curtain) both vt-in; }
}
@keyframes vt-out { to { opacity: 0.4; transform: translateY(-6%); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .foot .base a::before, .foot .base .tg-logo { transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}