/* THAT Design Studio, English site (v2). Direction D, close to the current Framer site and built to beat it:
   03_Concepts/THWEB_Directions_v02_20261101.md and PROJECT.md "v2".
   Black and white only, colour comes from the work; one huge headline per page, everything else 12 to 25 px;
   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 (1.9% wider, ascent 98%, descent 25%,
   measured 2026-11-01), so headlines wrap the same before and after and nothing shifts when the font arrives. */
@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;
  --mist: #e3dbde;
  --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);   /* the curve Monica Ellis uses for every reveal (measured 2026-11-01) */
  --ease-curtain: cubic-bezier(0.12, 0.23, 0.13, 0.96);
  --head: 48px;
}
@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; }
main { flex: 1; }
img { 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; }
/* White ring with a black halo, so focus shows on black pages and on light photos alike. */
: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: 50; 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; }

/* Small text roles */
.label { font-size: 12px; letter-spacing: 0; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 14px; }
.arrow-link span { transition: transform 300ms var(--ease); }
.arrow-link:hover span { 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; }

/* ---------- Header ---------- */
.head { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--head); display: flex; align-items: center; padding: 0 var(--gutter); font-size: 14px; }
/* A soft dark fade behind the header keeps it readable over light photos (the Framer site has none). */
.head::before { content: ""; position: absolute; inset: 0 0 -24px 0; z-index: -1; background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0)); pointer-events: none; }
.head .brand { padding: 12px 0; }
.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: block; padding: 12px 0; color: var(--muted); transition: color 200ms; }
.head .menu a:hover, .head .menu a[aria-current="page"] { color: var(--white); }
/* The menu slides out on the same line, one link after another (no overlay, as on the Framer site). */
.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); }
.head .right { margin-left: auto; color: var(--white); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .head .nav { left: auto; right: var(--gutter); }
  .head .right { display: none; }
  .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); }
}

/* ---------- Hero (home) ---------- */
.hero { position: relative; height: 70vh; min-height: 460px; }
.hero h1 { position: absolute; left: var(--gutter); bottom: 14px; white-space: nowrap; font-size: clamp(44px, 5.1vw, 96px); font-weight: 600; line-height: 0.88; letter-spacing: -0.035em; }
.hero p { position: absolute; left: var(--col2); right: calc(var(--gutter) + 120px); bottom: 20px; max-width: 340px; font-size: 14px; line-height: 1.3; color: rgba(255,255,255,0.86); }
.hero .hint { position: absolute; right: var(--gutter); bottom: 20px; font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .hero .hint { display: none; } .hero p { right: var(--gutter); } }
@media (max-width: 900px) {
  .hero h1 { white-space: normal; }
  .hero { height: 88vh; }
  .hero h1 { bottom: 120px; right: var(--gutter); }
  .hero p { left: var(--gutter); bottom: 40px; max-width: none; }
}

/* ---------- Work stack (home) ---------- */
/* Each photo is full-bleed; its caption lives inside it, holds at mid-screen while the photo passes, and leaves with it. */
/* overflow: clip, not hidden: hidden makes the box a scroll container and position: sticky stops working (review 2026-11-01). */
.work { display: block; position: relative; height: 104vh; overflow: clip; }
.work picture, .work .media { position: absolute; inset: 0; }
.work img { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms var(--ease); }
.motion .work img { transform: translate3d(0, var(--py, 0%), 0) scale(1.14); will-change: transform; }
.work.dim img { opacity: 0.6; }
.work .cap { position: sticky; top: calc(45vh - 20px); z-index: 2; padding: 20px var(--gutter) 0; height: 45px; display: grid; grid-template-columns: 1fr; font-size: 25px; line-height: 1; letter-spacing: -0.05em; text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 2px 24px rgba(0,0,0,0.45); }
.work .cap > * { grid-area: 1 / 1; }
/* As a caption reaches the header it fades out, so it never runs under the studio name. */
.work .cap { transition: opacity 200ms var(--ease); }
.work .cap.out { opacity: 0; }
.work .cap h2 { font-size: inherit; font-weight: 600; white-space: nowrap; }
.work .cap .kind { margin-left: calc(var(--col2) - var(--gutter)); }
.work .cap .meta { justify-self: end; }
.work .view { position: absolute; z-index: 2; right: var(--gutter); bottom: 24px; font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
.work:hover .view, .work:focus-visible .view { opacity: 1; transform: none; }
.work:focus-visible { outline-offset: -6px; }
/* Under 1000 px the services would run into the sector, so the caption keeps name, sector and year. */
@media (max-width: 1000px) { .work .cap .kind { display: none; } }
@media (max-width: 700px) {
  .work { height: 92vh; }
  .work .cap { font-size: 20px; height: 68px; }
  /* Phones: sector and year drop to a small second line, so long names never collide with them. */
  .work .cap .meta { justify-self: start; align-self: end; margin-left: 56px; font-size: 13px; letter-spacing: -0.01em; }
  .ctrls button { display: none; }
  .work .view { opacity: 1; transform: none; }
}

/* ---------- Sections ---------- */
.section { margin: 0 var(--gutter); padding: 20px 0 0; border-top: 1px solid var(--line); }
.section + .section, .stack + .section { margin-top: 140px; }
.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; }
.big { font-size: clamp(30px, 2.8vw, 44px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 400; }
.display { font-size: clamp(42px, 5vw, 84px); line-height: 0.95; letter-spacing: -0.04em; font-weight: 500; }

/* Ethos */
.ethos { display: grid; grid-template-columns: 1fr minmax(0, 600px) 1fr; gap: 0 40px; padding-bottom: 40px; }
.ethos .label { color: var(--white); text-transform: none; font-size: 14px; }
.ethos .side { justify-self: end; width: 150px; }
@media (max-width: 900px) { .ethos { grid-template-columns: 1fr; gap: 20px; } .ethos .side { display: none; } }

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; list-style: none; }
.stats li { border-top: 1px solid var(--line); padding-top: 14px; }
.stats b { display: block; font-size: clamp(40px, 4.4vw, 72px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 10px; color: var(--muted); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Journal cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 10px; margin-top: 28px; list-style: none; }
.card a { display: block; }
.card .cover { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.card a:hover .cover img, .card a:hover .type-cover { transform: scale(1.03); }
.card .info { margin-top: 12px; }
.card .info .label { display: flex; gap: 8px; }
.card h3 { margin-top: 6px; font-size: 18px; line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; }
.card p { margin-top: 8px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .cards.row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .cards.row .card { flex: 0 0 72%; scroll-snap-align: start; }
}

/* Typographic covers: the post's title set large on a THAT colour, with the red square. Drawn in CSS, no image. */
.type-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; transition: transform 900ms var(--ease); background: var(--ink); color: var(--white); }
.type-cover .tc-top { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
.type-cover .tc-top i { width: 9px; height: 9px; background: var(--red); }
.type-cover .tc-title { font-size: clamp(20px, 1.9vw, 30px); line-height: 1; font-weight: 500; letter-spacing: -0.035em; }
.type-cover.t-mist { background: var(--mist); color: var(--black); }
/* Black on THAT red reads at about 5.3:1; white on it is under 4:1, too faint for small text. */
.type-cover.t-red { background: var(--red); color: var(--black); }
.type-cover.t-red .tc-top i { background: var(--black); }
.type-cover.t-black { background: #0d0d0d; border: 1px solid var(--line); }

/* ---------- Page tops (inner pages) ---------- */
.page-top { padding: calc(var(--head) + 22vh) var(--gutter) 28px; display: grid; grid-template-columns: 1fr; align-items: end; }
.page-top > * { grid-area: 1 / 1; }
.page-top .lead { margin-left: calc(var(--col2) - var(--gutter)); max-width: 380px; color: rgba(255,255,255,0.86); }
@media (max-width: 900px) { .page-top { padding-top: calc(var(--head) + 14vh); } .page-top > * { grid-area: auto; } .page-top .lead { margin: 20px 0 0; } }

/* Work index: a ruled table; pointing at a row shows its cover on the right. */
.index { list-style: none; margin: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.index li { border-top: 1px solid var(--line); }
.index a { position: relative; display: grid; grid-template-columns: 60px 1fr 1fr 120px; gap: 20px; align-items: baseline; padding: 18px 0; }
.index .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.index h2 { font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.index .s, .index .y { color: var(--muted); }
.index .y { text-align: right; }
.index .peek { position: absolute; right: 140px; top: 50%; width: 220px; aspect-ratio: 16 / 10; transform: translateY(-50%) scale(0.96); opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease), transform 250ms var(--ease); z-index: 3; }
.index .peek img { height: 100%; object-fit: cover; }
.index a:hover .peek, .index a:focus-visible .peek { opacity: 1; transform: translateY(-50%) scale(1); }
.index a:hover h2 { transform: translateX(6px); }
.index h2 { transition: transform 300ms var(--ease); }
@media (max-width: 800px) {
  .index a { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .index .n { display: none; } .index .s { grid-column: 1; } .index .y { grid-row: 1; grid-column: 2; }
  .index .peek { position: static; grid-column: 1 / -1; width: 100%; opacity: 1; transform: none; margin-top: 8px; }
}

/* ---------- Case study ---------- */
.case-top { position: relative; height: 62vh; min-height: 420px; }
.case-top .num { position: absolute; left: var(--gutter); bottom: 22px; font-size: clamp(42px, 4vw, 64px); font-weight: 400; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.case-top h1 { position: absolute; left: var(--col2); right: var(--gutter); bottom: 22px; font-size: clamp(42px, 4vw, 64px); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; }
@media (max-width: 700px) { .case-top h1 { left: var(--gutter); bottom: 90px; } .case-top .num { bottom: 22px; font-size: 22px; color: var(--muted); } }
.case-cover { height: 100vh; overflow: hidden; }
.case-cover img { height: 100%; object-fit: cover; }
@media (max-width: 700px) { .case-cover { height: auto; } .case-cover img { height: auto; } }

.spec { display: grid; grid-template-columns: 1fr; margin: 80px var(--gutter) 0; }
.spec dl { margin-left: calc(var(--col2) - var(--gutter)); }
.spec .row { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.spec dt { font-size: 12px; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.spec dd { font-size: 14px; }
.spec .about dd { font-size: 18px; line-height: 1.4; letter-spacing: -0.02em; }
@media (max-width: 900px) { .spec dl { margin-left: 0; } .spec .row { grid-template-columns: 100px 1fr; } }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 80px var(--gutter) 0; }
.gallery figure { overflow: hidden; background: var(--ink); }
.gallery .wide { grid-column: 1 / -1; }
.gallery img { height: 100%; object-fit: cover; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }

.quote { margin: 120px var(--gutter) 0; display: grid; grid-template-columns: 1fr; }
.quote blockquote { margin-left: calc(var(--col2) - var(--gutter)); }
.quote p { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.05; letter-spacing: -0.035em; }
.quote cite { display: block; margin-top: 18px; font-style: normal; color: var(--muted); }
@media (max-width: 900px) { .quote blockquote { margin: 0; } }
.credits { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; }

.next { display: block; position: relative; margin-top: 140px; height: 70vh; overflow: hidden; }
.next img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity 400ms var(--ease), transform 900ms var(--ease); }
.next:hover img { opacity: 0.75; transform: scale(1.02); }
.next .t { position: absolute; left: var(--gutter); bottom: 22px; right: var(--gutter); }
.next .t b { display: block; margin-top: 8px; font-size: clamp(42px, 5vw, 84px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; }

/* ---------- Journal page and article ---------- */
.filters { display: flex; gap: 6px; margin: 0 var(--gutter) 28px; }
.filters button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); }
.filters button[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
.feature { margin: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--line); padding-top: 20px; }
.feature .cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.feature .cover img { height: 100%; object-fit: cover; }
.feature .type-cover .tc-title { font-size: clamp(32px, 3.4vw, 56px); }
.feature h2 { margin-top: 10px; font-size: clamp(30px, 3vw, 48px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.feature p { margin-top: 16px; max-width: 46ch; color: rgba(255,255,255,0.8); font-size: 16px; }
@media (max-width: 800px) { .feature { grid-template-columns: 1fr; } }
.journal-grid { margin: 60px var(--gutter) 0; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .journal-grid { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }

.article-top { padding: calc(var(--head) + 16vh) var(--gutter) 0; }
.article-top .label { display: flex; gap: 10px; }
.article-top h1 { margin-top: 16px; max-width: 18ch; font-size: clamp(40px, 5vw, 84px); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; }
.byline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 48px var(--gutter) 0; padding-top: 14px; border-top: 1px solid var(--line); }
.byline dt { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.byline dd { margin-top: 4px; }
@media (max-width: 700px) { .byline { grid-template-columns: repeat(2, 1fr); } }
/* The only article photo we have is 589 px square: shown at its own size, lined up with the text, never stretched. */
.article-cover { position: relative; margin: 56px var(--gutter) 0 calc(var(--col2) - 12%); max-width: 589px; aspect-ratio: 1; overflow: hidden; background: var(--ink); }
@media (max-width: 900px) { .article-cover { margin-left: var(--gutter); } }
.article-cover img { height: 100%; object-fit: cover; }
.article-cover .type-cover { padding: 28px; }
.article-cover .type-cover .tc-title { font-size: clamp(36px, 5vw, 88px); max-width: 16ch; }
.prose { margin: 80px var(--gutter) 0; display: grid; grid-template-columns: 1fr; }
.prose .body { margin-left: calc(var(--col2) - var(--gutter) - 12%); max-width: 640px; }
.prose p { font-size: 19px; line-height: 1.55; letter-spacing: -0.015em; color: rgba(255,255,255,0.9); }
.prose p + p { margin-top: 1.1em; }
.prose blockquote { margin: 56px 0; padding-left: 20px; border-left: 2px solid var(--red); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -0.035em; }
@media (max-width: 900px) { .prose .body { margin-left: 0; } .prose p { font-size: 17px; } }
.share { display: flex; gap: 20px; align-items: center; margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--line); }
.share .label { margin-right: auto; }

/* About */
.services { list-style: none; margin-top: 28px; }
.services > li { display: grid; grid-template-columns: 60px 1fr 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.services .n { color: var(--muted); }
.services h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.services p { color: rgba(255,255,255,0.8); max-width: 44ch; }
.services ul { list-style: none; margin-top: 12px; color: var(--muted); }
@media (max-width: 800px) { .services > li { grid-template-columns: 1fr; gap: 8px; } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; margin-top: 28px; list-style: none; }
.steps li { border-top: 1px solid var(--line); padding-top: 14px; }
.steps b { display: block; font-size: 48px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: 18px; font-size: 18px; font-weight: 500; }
.steps p { margin-top: 8px; color: var(--muted); max-width: 36ch; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.names { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; margin-top: 28px; list-style: none; }
.names li { padding: 12px 0; border-top: 1px solid var(--line); }
@media (max-width: 800px) { .names { grid-template-columns: repeat(2, 1fr); } }

/* Careers and contact */
.roles { list-style: none; margin: 0 var(--gutter); }
.roles li { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.roles h2 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.roles p { max-width: 52ch; color: rgba(255,255,255,0.84); }
.roles .meta { margin-top: 10px; color: var(--muted); }
@media (max-width: 800px) { .roles li { grid-template-columns: 1fr; } }
.contact-big { display: inline-block; font-size: clamp(36px, 6vw, 104px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 60px var(--gutter) 0; }
.contact-grid > div { border-top: 1px solid var(--line); padding-top: 14px; }
.contact-grid a, .contact-grid p { display: block; margin-top: 6px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Call to action and footer ---------- */
.cta { margin: 160px var(--gutter) 0; padding-top: 20px; border-top: 1px solid var(--line); }
.cta a { display: inline-block; margin-top: 18px; }
.foot { position: relative; margin: 120px var(--gutter) 0; padding: 20px 0 24px; border-top: 1px solid var(--line); min-height: 380px; display: grid; grid-template-columns: 1fr; }
.foot > * { grid-area: 1 / 1; align-self: start; }
.foot .name { font-size: 25px; letter-spacing: -0.05em; }
.foot .cols { margin-left: calc(var(--col2) - var(--gutter)); display: flex; gap: 48px; }
.foot .cols a { display: block; line-height: 26px; }
.foot .cols .label { margin-bottom: 6px; }
.foot .base { align-self: end; display: flex; gap: 24px; font-size: 12px; color: var(--muted); padding-right: 24px; }
.foot .base .r { margin-left: auto; }
.foot .sq { align-self: end; justify-self: end; width: 8px; height: 8px; margin-bottom: 4px; background: var(--red); }
@media (max-width: 800px) {
  .foot { min-height: 0; } .foot > * { grid-area: auto; }
  .foot .cols { margin: 36px 0 0; flex-wrap: wrap; gap: 28px 40px; }
  .foot .base { margin-top: 56px; flex-direction: column; gap: 6px; }
  .foot .sq { margin-top: -14px; }
}

/* Error page */
.lost { min-height: 80vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) 40px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
  .work:hover img, .card a:hover .cover img, .next:hover img { transform: none; }
}

/* =====================================================================
   Motion (v2.1, 2026-11-01). Everything below only moves when <html> has
   the "motion" class: set in <head> unless the visitor asked for less motion.
   Durations follow web-craft 02: 240 ms small moves, 600 to 1100 ms for
   large reveals, entering eases out. One signature: titles that roll.
   ===================================================================== */

/* Masks for words and letters that rise into place */
/* Each word mask has room below for descenders (g, y) and a little on the right, because tight letter spacing pulls the
   last letter past the word box (the o of Studio was cut, 2026-11-01). The margins give the room back so spacing stays the same. */
.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; }

/* Blocks that fade up, and groups whose children follow one after another */
.motion [data-reveal] { clip-path: inset(0 0 100% 0); transform: translateY(28px); transition: clip-path 900ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.motion [data-reveal].in { clip-path: inset(-12px -12px -20% -12px); transform: 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: 90ms; } .motion .stagger.in > *:nth-child(3) { transition-delay: 180ms; }
.motion .stagger.in > *:nth-child(4) { transition-delay: 270ms; } .motion .stagger.in > *:nth-child(5) { transition-delay: 360ms; }
.motion .stagger.in > *:nth-child(6) { transition-delay: 450ms; }

/* Photos that uncover from the bottom edge */
.motion [data-unclip] { clip-path: inset(100% 0 0 0); transition: clip-path 1200ms cubic-bezier(0.7, 0, 0.2, 1); }
.motion [data-unclip].in { clip-path: inset(0 0 0 0); }
.motion [data-unclip] img { transform: scale(1.15); transition: transform 1600ms var(--ease); }
.motion [data-unclip].in img { transform: none; }

/* Home opening: name rises, line beside it fades up, header settles, first photo uncovers */
.motion .hero h1 .wi { transform: translateY(140%); transition: transform 950ms var(--ease); transition-delay: calc(var(--i) * 80ms); }
.motion.ready .hero h1 .wi { transform: none; }
.motion .hero p, .motion .hero .hint { opacity: 0; transition: opacity 900ms var(--ease) 500ms, transform 900ms var(--ease) 500ms; }
.motion .hero p { transform: translateY(14px); }
.motion.ready .hero p, .motion.ready .hero .hint { opacity: 1; transform: none; }
.motion .stack .work:first-child { clip-path: inset(100% 0 0 0); transition: clip-path 1000ms cubic-bezier(0.7, 0, 0.2, 1) 150ms; }
.motion.ready .stack .work:first-child { clip-path: inset(0); }

/* Work captions: index and red square in front of the name; the letters roll in when the project is "now" */
.work .cap .lead { display: flex; align-items: center; gap: 12px; }
.work .cap .idx { font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; opacity: 0.8; width: 22px; }
.work .cap .sq { width: 10px; height: 10px; background: var(--red); transform: scale(0); transition: transform 260ms var(--ease); }
.work.now .cap .sq { transform: scale(1); }
.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 .work .cap .kind, .motion .work .cap .meta, .motion .work .cap .idx { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease) 150ms, transform 500ms var(--ease) 150ms; }
.motion .work.now .cap .kind, .motion .work.now .cap .meta, .motion .work.now .cap .idx { opacity: 1; transform: none; }
.motion .work.now .cap .idx { opacity: 0.8; }

/* Statement that lights up word by word while you read */
/* Words not yet lit stay readable: 50% white on black is about 5:1 (22% was 1.9:1 and failed contrast whenever a check
   or a reader caught the paragraph halfway, review v2.19 and lab.py check 2026-11-02) */
.motion [data-words] .wi { color: rgba(255,255,255,0.5); transition: color 350ms var(--ease); }
.motion [data-words] .wi.on { color: var(--white); }

/* Pointer label over work and posts */
.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; } }

/* Thin red reading line under the header */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 30; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }

/* Moving band of services */
.marquee { overflow: clip; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 140px; padding: 22px 0; }
.marquee .track { display: flex; width: max-content; gap: 48px; }
.marquee span { font-size: clamp(32px, 4.4vw, 72px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.marquee span::after { content: ""; width: 0.22em; height: 0.22em; background: var(--red); }
.motion .marquee .track { transform: translate3d(var(--mx, 0px), 0, 0); will-change: transform; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Giant wordmark at the foot of every page; letters rise as it arrives */
.mega { overflow: clip; margin: 80px var(--gutter) 0; padding-bottom: 0.2em; font-size: 11.2vw; line-height: 0.92; letter-spacing: -0.055em; font-weight: 500; white-space: nowrap; }
.mega .w { padding-bottom: 0.3em; margin-bottom: -0.3em; }

/* Slider controls */
.ctrls { display: flex; gap: 10px; align-items: center; }
.ctrls button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background 200ms, color 200ms; }
.ctrls button:hover { background: var(--white); color: var(--black); }
.cards.row { scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: none; }
.cards.row::-webkit-scrollbar { display: none; }
@media (min-width: 701px) { .cards.row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 4); grid-template-columns: none; } .cards.row .card { scroll-snap-align: start; } }

/* Journal cards with photos */
.card .cover img { aspect-ratio: 4 / 5; }
.card .cover .tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 9px; background: var(--white); color: var(--black); font-size: 12px; text-transform: uppercase; }
.card .cover .tag.news { background: var(--red); color: var(--black); }

/* Work page: grid (default) or list */
.views-bar { display: flex; gap: 6px; margin: 0 var(--gutter) 24px; }
.views-bar button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); }
.views-bar button[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
.wgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 10px; margin: 0 var(--gutter); list-style: none; }
.wgrid a { display: block; }
.wgrid .ph { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.wgrid .ph img { height: 100%; object-fit: cover; transition: transform 1000ms var(--ease); }
.wgrid a:hover .ph img { transform: scale(1.04); }
.wgrid .row { display: grid; grid-template-columns: 1fr auto; margin-top: 12px; font-size: 18px; letter-spacing: -0.03em; }
.wgrid .row span { color: var(--muted); }
[data-views="grid"] .index, [data-views="list"] .wgrid { display: none; }
@media (max-width: 700px) { .wgrid { grid-template-columns: 1fr; } }

/* Case study cover drifts slower than the page */
/* Big photos marked data-drift move slower than the page (parallax) */
.motion [data-drift] img { transform: translate3d(0, var(--cy, 0%), 0) scale(1.12); will-change: transform; }

/* About */
.about-top { padding: calc(var(--head) + 18vh) var(--gutter) 0; }
.about-top h1 { max-width: 23ch; font-size: clamp(32px, 3.6vw, 60px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 500; }
.about-top h1 em { font-style: normal; color: var(--muted); }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 80px var(--gutter) 0; align-items: end; }
.strip figure { overflow: hidden; background: var(--ink); }
.strip figure:nth-child(1) { aspect-ratio: 4 / 5; } .strip figure:nth-child(2) { aspect-ratio: 4 / 4; }
.strip figure:nth-child(3) { aspect-ratio: 4 / 6; } .strip figure:nth-child(4) { aspect-ratio: 4 / 4.6; }
.strip img { height: 100%; object-fit: cover; }
@media (max-width: 700px) { .strip { grid-template-columns: 1fr 1fr; } }
.cols4 { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; list-style: none; }
.cols4 li { border-left: 1px solid var(--line); padding: 0 20px 40px; }
.cols4 li:nth-child(2) { margin-top: 80px; } .cols4 li:nth-child(3) { margin-top: 160px; } .cols4 li:nth-child(4) { margin-top: 240px; }
.cols4 h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -0.035em; }
.cols4 p { margin-top: 12px; color: rgba(255,255,255,0.8); }
.cols4 ul { list-style: none; margin-top: 14px; color: var(--muted); }
@media (max-width: 900px) { .cols4 { grid-template-columns: 1fr 1fr; gap: 28px 0; } .cols4 li { margin-top: 0 !important; } }
@media (max-width: 560px) { .cols4 { grid-template-columns: 1fr; } }
.pin { position: relative; height: 240vh; margin-top: 160px; }
.pin .stick { position: sticky; top: 0; height: 100vh; overflow: clip; }
.pin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.pin p { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); max-width: 18ch; margin-left: calc(var(--col2) - 40% ); font-size: clamp(34px, 4.4vw, 76px); line-height: 1; letter-spacing: -0.045em; }
@media (max-width: 900px) { .pin p { margin-left: 0; } }
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; list-style: none; }
/* Initials are decoration (no team photos yet), drawn by CSS so they are not read out. */
.partners .mono::before { content: attr(data-i); }
.partners .mono { aspect-ratio: 4 / 5; background: var(--ink); display: grid; place-items: center; font-size: clamp(56px, 7vw, 120px); font-weight: 400; letter-spacing: -0.06em; color: rgba(255,255,255,0.18); }
.partners b { display: block; margin-top: 12px; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.partners span { color: var(--muted); }
@media (max-width: 700px) { .partners { grid-template-columns: 1fr 1fr; } }
.bignames { list-style: none; margin-top: 28px; margin-left: calc(var(--col2) - var(--gutter) - 20%); }
.bignames li { font-size: clamp(28px, 3.4vw, 56px); letter-spacing: -0.04em; line-height: 1.08; color: rgba(255,255,255,0.58); transition: color 250ms; }
.bignames li:hover { color: var(--white); }
@media (max-width: 900px) { .bignames { margin-left: 0; } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.facts figure { aspect-ratio: 4 / 5; max-width: 380px; overflow: hidden; }
.facts img { height: 100%; object-fit: cover; }
.facts .stats { grid-template-columns: 1fr; margin-top: 0; }
@media (max-width: 800px) { .facts { grid-template-columns: 1fr; } }

/* Careers */
.wide-photo { margin: 40px var(--gutter) 0; aspect-ratio: 16 / 8; overflow: hidden; }
.wide-photo img { height: 100%; object-fit: cover; }
@media (max-width: 700px) { .wide-photo { aspect-ratio: 4 / 5; } }
.life { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.life .txt { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; color: rgba(255,255,255,0.84); }
.fade-slider { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.fade-slider figure { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.fade-slider figure.on { opacity: 1; }
.fade-slider img { height: 100%; object-fit: cover; }
.slider-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
@media (max-width: 900px) { .life, .life .txt { grid-template-columns: 1fr; } }
.roles-table { margin-top: 28px; }
.roles-table .dept { display: grid; grid-template-columns: 1fr 3fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.roles-table .dept > h3 { font-size: 14px; font-weight: 400; }
.roles-table .role { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 20px; align-items: baseline; padding: 0 0 14px; }
.roles-table .role + .role { border-top: 1px solid var(--line); padding-top: 14px; }
.roles-table .role p { grid-column: 1 / -1; color: var(--muted); max-width: 70ch; }
@media (max-width: 800px) { .roles-table .dept { grid-template-columns: 1fr; } .roles-table .role { grid-template-columns: 1fr 1fr; } }

/* Contact */
.contact-hero { position: relative; height: 92vh; overflow: clip; }
.contact-hero h1 { position: absolute; z-index: 2; left: var(--gutter); top: calc(var(--head) + 22vh); max-width: 14ch; font-size: clamp(40px, 4.6vw, 76px); line-height: 1; letter-spacing: -0.045em; font-weight: 500; }
.contact-hero figure { position: absolute; left: 0; right: 0; top: 46vh; bottom: 0; overflow: clip; }
.contact-hero img { height: 100%; object-fit: cover; }
.contact-body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 60px var(--gutter) 0; }
.contact-body h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 18px; }
.mailform { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.mailform label { display: grid; gap: 6px; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.mailform .full { grid-column: 1 / -1; }
.mailform input, .mailform textarea { font: inherit; font-size: 16px; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 10px 0; text-transform: none; letter-spacing: -0.01em; }
.mailform input:focus, .mailform textarea:focus { outline: none; border-bottom-color: var(--white); }
.mailform textarea { min-height: 120px; resize: vertical; }
.mailform button[type=submit] { justify-self: start; padding: 14px 22px; background: var(--white); color: var(--black); border-radius: 999px; font-size: 14px; transition: background 200ms, color 200ms; }
.mailform button[type=submit]:hover { background: var(--red); color: var(--black); }
.getin dl > div { padding: 14px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 140px 1fr; gap: 20px; }
.getin dt { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.getin dd a { display: block; line-height: 26px; }
@media (max-width: 800px) { .contact-body, .mailform { grid-template-columns: 1fr; } }

/* Journal extras: press line, wide article photo, next article */
.press { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 100px var(--gutter) 0; padding-top: 20px; border-top: 1px solid var(--line); }
.press p { font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; line-height: 1.15; }
@media (max-width: 800px) { .press { grid-template-columns: 1fr; } }
.article-wide { margin: 48px 0 0; height: 82vh; overflow: clip; }
.article-wide img { width: 100%; height: 100%; object-fit: cover; }
.next-post { display: block; margin: 140px var(--gutter) 0; padding-top: 20px; border-top: 1px solid var(--line); }
.next-post b { display: block; margin-top: 12px; max-width: 20ch; font-size: clamp(36px, 4.6vw, 76px); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; transition: transform 400ms var(--ease); }
.next-post:hover b { transform: translateX(10px); }

/* Page to page: a short cross-fade where the browser supports it (Chrome, Safari) */
@media not (prefers-reduced-motion) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 350ms; animation-timing-function: var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
}


/* =====================================================================
   v2.2 (2026-11-01): second review fixes and new signature moves
   ===================================================================== */

/* Focus on a full-bleed project: the photo would cover a normal outline, so the ring sits on a layer above it. */
.work:focus-visible { outline: none; }
.work:focus-visible::after { content: ""; position: absolute; inset: 10px; z-index: 4; outline: 2px solid var(--white); box-shadow: 0 0 0 6px rgba(0,0,0,0.85); }

/* Captions stay readable on cream photos: a soft dark band sits behind the caption line only. */
.work .cap::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 130px; z-index: -1; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.38) 45%, rgba(0,0,0,0)); pointer-events: none; }

/* Journal filter: show the new set at once, no re-staggering */
.filtered > * { transition: none !important; clip-path: none !important; transform: none !important; }

/* Picture inside the headline: a small box between THAT and Design, cycling through the work */
.inpic { position: relative; display: inline-block; width: 1.12em; height: 0.72em; margin: 0 0.06em 0 0.16em; vertical-align: -0.02em; overflow: clip; background: var(--ink); }
.inpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease); }
.inpic img.on { opacity: 1; }
.motion .inpic { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease) 650ms; }
.motion.ready .inpic { clip-path: inset(0 0 0 0); }

/* What we do: pinned scenes. One huge word per service, rolling in letter by letter over a darkened photo. */
.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.4) 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: 34ch; font-size: 16px; color: rgba(255,255,255,0.86); }
.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; }
/* Calm or no-script version: a plain list of four statements on black. */
html:not(.motion) .scene-bg { display: none; }
html:not(.motion) .scene-word { padding: 28px 0; border-top: 1px solid var(--line); }
html:not(.motion) .scene-count { display: none; }
/* Motion version: the section is four screens tall, the stage stays put and the words take turns. */
.motion .scenes { height: 420vh; }
.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); }

/* Work page: the floating View pill (1, 2 or 3 columns, or a list), as on the Framer case-studies page */
.view-pill { position: fixed; left: 50%; bottom: 20px; z-index: 25; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; background: rgba(20,20,20,0.82); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; }
.view-pill span { margin-right: 6px; color: var(--muted); }
.view-pill button { min-width: 36px; height: 30px; padding: 0 8px; border-radius: 999px; display: flex; gap: 2px; align-items: center; justify-content: center; color: var(--muted); }
.view-pill button i { width: 6px; height: 10px; background: currentColor; }
.view-pill button[aria-pressed="true"] { background: var(--white); color: var(--black); }
[data-cols="1"] .wgrid { grid-template-columns: 1fr; }
[data-cols="3"] .wgrid, .wgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wgrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { [data-cols] .wgrid, .wgrid.cols-3, .wgrid.cols-2 { grid-template-columns: 1fr; } .view-pill button[data-c="3"] { display: none; } }
/* Case-study tiles open downward from their top edge, 1.5 s, as measured on Monica Ellis */
.motion .wgrid .ph { clip-path: inset(0 0 100% 0); transition: clip-path 1500ms var(--ease); }
.motion .stagger.in .ph, .motion [data-unclip].in.ph, .motion .ph[data-unclip].in { clip-path: inset(0 0 0 0); }

/* Gallery: a single shot keeps its own width */
.gallery .single { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); aspect-ratio: 4 / 5; }
@media (max-width: 700px) { .gallery .single { width: 100%; } }

/* Buttons lean toward the pointer (site.js part 13) */
.magnet { transition: transform 400ms var(--ease); }

/* Film grain: a still layer of fine noise over everything, 5% strong, for the photographic feel */
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"); }

/* Page to page: the new page rises over the old one like a curtain (Chrome and Safari; elsewhere a normal page change) */
@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); } }

/* Gallery pairs keep each photo's own shape, top-aligned */
.gallery { align-items: start; }
.gallery .pair img { height: auto; }

/* Page headlines (the first thing on inner pages) rise straight from CSS, without waiting for the script,
   so they paint on the first frame and count early for load speed. Split at build time (build.py presplit). */
@keyframes rise { from { transform: translateY(140%); } to { transform: none; } }
.motion h1[data-split] .wi, .motion h1[data-split] .ci { animation: rise 1000ms var(--ease) both; animation-delay: calc(100ms + var(--i) * 55ms); transition: none; }
.motion h1[data-split="chars"] .ci { animation-duration: 800ms; animation-delay: calc(100ms + var(--i) * 24ms); }

/* Case-studies grid (top of /work/): the tiles rise and open from CSS on load, one after another, no script needed */
@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 .wgrid.intro > li { animation: tile-in 1100ms var(--ease) both; }
.motion .wgrid.intro > li:nth-child(2) { animation-delay: 90ms; } .motion .wgrid.intro > li:nth-child(3) { animation-delay: 180ms; }
.motion .wgrid.intro > li:nth-child(4) { animation-delay: 270ms; } .motion .wgrid.intro > li:nth-child(5) { animation-delay: 360ms; }
.motion .wgrid.intro .ph { clip-path: none; }

/* Careers top photo uncovers from CSS on load (it is the biggest thing on screen, so it must not wait for the script) */
@keyframes photo-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.motion .wide-photo.intro-photo { animation: photo-in 1200ms var(--ease) 150ms both; }
.motion .wide-photo.intro-photo img { animation: rise-img 1600ms var(--ease) 150ms both; }
@keyframes rise-img { from { transform: scale(1.12); } to { transform: none; } }

/* About, What we do (v2.4): one ruled row per service. Number, large title, then the description and the
   services as small outlined tags. Pointing at a row brightens it and shows the red square. */
.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); transition: background 300ms var(--ease); }
.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.78); 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.84); }
.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.8); }
.svc-rows > li > .sq { position: absolute; left: 0; top: -5px; width: 10px; height: 10px; background: var(--red); 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 12px; padding: 26px 0 30px; }
  .svc-rows > li > div { grid-column: 2; }
  .svc-rows > li > .n { padding-top: 6px; }
}

/* About, Sectors (v2.4): the ten sectors run as one large line of type, split by small red squares, beside a big count.
   They light up one after another when the section arrives; pointing at one brings it to full white. */
.sectors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 20px 40px; }
.sec-side .label { color: var(--white); text-transform: none; font-size: 14px; }
.sec-side b { display: block; margin-top: 18px; font-size: clamp(72px, 8vw, 140px); font-weight: 400; letter-spacing: -0.06em; line-height: 0.85; font-variant-numeric: tabular-nums; }
.sec-side span { display: block; margin-top: 12px; max-width: 18ch; }
.sector-flow { list-style: none; display: flex; flex-wrap: wrap; gap: 0.12em 0.7em; font-size: clamp(28px, 3.3vw, 56px); line-height: 1.12; letter-spacing: -0.04em; }
/* Each sector stays whole on its line and carries its own red square, so no square is left hanging at a line end. */
.sector-flow li { display: inline-flex; align-items: center; gap: 0.32em; white-space: nowrap; color: rgba(255,255,255,0.9); transition: color 250ms var(--ease); }
.sector-flow li::before { content: ""; flex: none; width: 0.2em; height: 0.2em; background: var(--red); }
.motion .sector-flow li { color: rgba(255,255,255,0.58); transition: color 500ms var(--ease) calc(var(--k) * 70ms); }
.motion .sector-flow.in li { color: rgba(255,255,255,0.92); }
.sector-flow li:hover { color: var(--white) !important; transition-delay: 0s; }
@media (max-width: 800px) { .sectors { grid-template-columns: 1fr; } .sec-side b { margin-top: 10px; } }

/* Phones swipe the journal row; the arrows would crowd the heading (this rule sits last so it wins). */
@media (max-width: 700px) { .sec-head .ctrls button { display: none; } }


/* =====================================================================
   v2.5 (2026-11-01): self-audit redesigns. Partners, clients, method,
   careers. Rule from Muhannad's feedback: no empty scattered layouts;
   a section reads as ruled rows or as large connected type.
   ===================================================================== */

/* Shared row pattern: number, big title, then detail; the red square marks the row you point at */
.people, .role-rows { list-style: none; margin-top: 28px; border-bottom: 1px solid var(--line); }
.people > li, .role-rows > li { position: relative; display: grid; gap: 20px; align-items: baseline; border-top: 1px solid var(--line); transition: background 300ms var(--ease); }
.people > li > .sq, .role-rows > li > .sq { position: absolute; left: 0; top: -5px; width: 10px; height: 10px; background: var(--red); transform: scale(0); transition: transform 260ms var(--ease); }
.people > li:hover > .sq, .role-rows > li:hover > .sq { transform: scale(1); }
.people .n, .role-rows .n { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The partners: names set large, role on the right */
.people > li { grid-template-columns: 64px 1fr auto; padding: 26px 0 30px; }
.people b { font-size: clamp(34px, 4.6vw, 80px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; color: rgba(255,255,255,0.8); transition: color 300ms var(--ease), transform 400ms var(--ease); }
.people .role { font-size: 16px; color: rgba(255,255,255,0.75); text-align: right; }
.people > li:hover b { color: var(--white); transform: translateX(8px); }
@media (max-width: 800px) { .people > li { grid-template-columns: 36px 1fr; } .people .role { grid-column: 2; text-align: left; } }

/* Selected clients: the logo wall from the company profile; tiles rise in one after another */
/* 27 logos and the red tile make 28: seven across on screens, four on phones, so every row is full */
.logo-wall { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 28px; }
.logo-wall li { overflow: clip; border-radius: 10px; transition: transform 400ms var(--ease); }
.logo-wall li:hover { transform: translateY(-4px); }
.motion .logo-wall li { transform: translateY(24px); clip-path: inset(0 0 100% 0 round 10px); transition: transform 800ms var(--ease) calc(var(--k) * 35ms), clip-path 800ms var(--ease) calc(var(--k) * 35ms); }
.motion .logo-wall.in li { transform: none; clip-path: inset(0 0 0 0 round 10px); }
.motion .logo-wall.in li:hover { transform: translateY(-4px); transition-delay: 0s; }
.logo-wall img { width: 100%; height: auto; }
@media (max-width: 700px) { .logo-wall { grid-template-columns: repeat(4, 1fr); gap: 5px; } .logo-wall li { border-radius: 7px; } }

/* How we work: heading and counter stay put on the left; the six steps scroll by on the right and light up in turn */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px 40px; }
.how-side { position: sticky; top: calc(var(--head) + 30px); align-self: start; }
.how-count { display: block; margin-top: 24px; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.how-count b { font-size: clamp(64px, 7vw, 120px); font-weight: 400; letter-spacing: -0.06em; line-height: 0.85; color: var(--white); }
.how-steps { list-style: none; }
.how-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; padding: 30px 0 34px; border-top: 1px solid var(--line); }
.how-steps .n { grid-row: span 2; padding-top: 8px; font-size: 14px; color: var(--muted); }
.how-steps h3 { font-size: clamp(28px, 3vw, 48px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.how-steps p { max-width: 46ch; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.84); }
.motion .how-steps li { transition: opacity 400ms var(--ease); opacity: 0.62; }
.motion .how-steps li.on { opacity: 1; }
@media (max-width: 800px) { .how { grid-template-columns: 1fr; } .how-side { position: static; } .how-count { display: none; } .motion .how-steps li { opacity: 1; } }

/* Careers: studio life as one big statement, roles as large rows with an Apply pill */
.life .txt { display: block; }
.life .txt .big { max-width: 22ch; }
.life .txt .small { margin-top: 24px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.84); }
.role-rows > li { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr); padding: 30px 0 34px; }
.role-rows h3 { font-size: clamp(34px, 4vw, 64px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; }
.role-rows .meta { margin-top: 10px; color: var(--muted); }
.role-rows p { max-width: 50ch; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.84); }
.pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 18px; border-radius: 999px; background: var(--white); color: var(--black); font-size: 14px; transition: background 200ms; }
.pill:hover { background: var(--red); }
@media (max-width: 800px) { .role-rows > li { grid-template-columns: 36px 1fr; } .role-rows > li > div:last-of-type { grid-column: 2; } }

/* The last tile of the client wall invites the next one: THAT red, links to Contact */
.logo-wall .next-tile { background: var(--red); }
.logo-wall .next-tile a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; aspect-ratio: 360 / 324; padding: 12px; color: var(--black); font-size: clamp(12px, 1.1vw, 17px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.logo-wall .next-tile a span:last-child { align-self: flex-end; font-size: 1.4em; transition: transform 300ms var(--ease); }
.logo-wall .next-tile a:hover span:last-child { transform: translateX(4px); }

/* Step numbers start brighter, because the whole step is dimmed to 62% until it is lit (contrast stays above 4.5:1) */
.how-steps .n { color: rgba(255,255,255,0.9); }

/* Home and About figures (v2.5): the numbers are the point, so they are set large, with the label underneath */
.stats b { font-size: clamp(64px, 8.4vw, 144px); letter-spacing: -0.06em; line-height: 0.88; }
.stats span { margin-top: 14px; font-size: 15px; max-width: 22ch; }
.stats li { padding-top: 20px; }
.facts .stats b { font-size: clamp(56px, 6vw, 104px); }
/* Ethos photo: bigger, so the statement has a picture to stand beside */
.ethos .side { width: 240px; }
@media (max-width: 900px) { .ethos .side { display: none; } }

/* =====================================================================
   v2.6 (2026-11-01): work grid feature, case details, article rail, 404
   ===================================================================== */

/* Case studies grid: the first project leads at full width, the rest pair up; each tile carries its number and year */
.wgrid.intro > li:first-child { grid-column: 1 / -1; }
.wgrid.intro > li:first-child .ph { aspect-ratio: 21 / 9; }
[data-cols="1"] .wgrid.intro > li:first-child .ph { aspect-ratio: 16 / 10; }
.wgrid .row b { display: flex; gap: 14px; align-items: baseline; font-weight: 500; }
.wgrid .row .tn { font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Project details: the About text large on the left, the details table on the right */
.spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.spec dl { margin-left: 0; }
.case-about { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.12; letter-spacing: -0.035em; max-width: 24ch; }
@media (max-width: 900px) { .spec { grid-template-columns: 1fr; } }

/* Article: a side rail on desktop with the author, date and share links, staying in view while you read */
.prose.with-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 0.6fr); gap: 40px; }
.prose.with-rail .body { margin-left: 0; grid-column: 2; }
.rail { grid-column: 1; position: sticky; top: calc(var(--head) + 30px); align-self: start; justify-self: end; width: min(220px, 100%); }
.prose .rail p { font-size: 15px; line-height: 1.4; letter-spacing: 0; margin-top: 4px; }
.prose .rail p.label { font-size: 12px; color: var(--muted); margin-top: 26px; }
.prose .rail p.label:first-child { margin-top: 0; }
.rail-share .arrow-link { padding: 3px 0; }
.rail-share { display: flex; flex-direction: column; }
@media (max-width: 1000px) { .prose.with-rail { grid-template-columns: 1fr; } .prose.with-rail .body { grid-column: 1; } .rail { display: none; } }
.next-post + .section { margin-top: 140px; }

/* 404: a large number, a photo, and the main ways back */
.lost { min-height: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; padding: calc(var(--head) + 12vh) var(--gutter) 0; }
.lost-n { font-size: clamp(96px, 16vw, 260px); font-weight: 400; letter-spacing: -0.07em; line-height: 0.8; color: var(--red); }
.lost-copy h1 { margin-top: 24px; }
.lost-copy .muted { margin-top: 18px; max-width: 44ch; font-size: 16px; }
.lost-ways { list-style: none; margin-top: 32px; border-bottom: 1px solid var(--line); }
.lost-ways a { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); font-size: 20px; letter-spacing: -0.02em; transition: padding 300ms var(--ease); }
.lost-ways a:hover { padding-left: 10px; }
.lost-photo { aspect-ratio: 4 / 5; overflow: hidden; }
.lost-photo img { height: 100%; object-fit: cover; }
@media (max-width: 800px) { .lost { grid-template-columns: 1fr; } .lost-photo { display: none; } }

/* ==========================================================================
   v2.7 (2026-11-01): contact page, numbers rule
   ========================================================================== */
/* Home numbers: the section line and the first stat line sat 40px apart, so keep only the stat lines */
.numbers { border-top: 0; padding-top: 0; }
.numbers .stats { margin-top: 0; }

/* Contact: headline left, the email as the biggest thing on the right, then a wide photo */
.contact-top { padding: calc(var(--head) + 18vh) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 0; align-items: end; }
.contact-top h1 { max-width: 12ch; font-size: clamp(44px, 5.1vw, 96px); }
.contact-side { display: grid; justify-items: start; gap: 14px; }
.contact-side p { color: rgba(255,255,255,0.86); max-width: 34ch; }
.contact-top .contact-big { font-size: clamp(30px, 3.6vw, 60px); letter-spacing: -0.045em; position: relative; }
.contact-top .contact-big::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1); }
.contact-top .contact-big:hover::after, .contact-top .contact-big:focus-visible::after { transform: scaleX(1); }
.contact-photo { margin: 0 var(--gutter); aspect-ratio: 21 / 9; overflow: clip; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .contact-top { grid-template-columns: 1fr; padding-top: calc(var(--head) + 12vh); gap: 28px; }
  .contact-photo { aspect-ratio: 4 / 3; }
}

/* Interest pills: real checkboxes drawn as pills, white when ticked */
.chips { border: 0; padding: 0; margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: 12px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; padding: 0; }
.mailform .chips label { display: inline-flex; font-size: 14px; text-transform: none; color: var(--white); cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { padding: 9px 16px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; transition: background 200ms, color 200ms, border-color 200ms; }
.chips label:hover span { border-color: var(--white); }
.chips input:checked + span { background: var(--white); color: var(--black); border-color: var(--white); }
.chips input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

/* What happens next: three short steps under the contact details */
.next-h { margin-top: 56px; }
.next-steps { list-style: none; }
.next-steps li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.next-steps .n { font-size: 12px; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   v2.8 (2026-11-01): small 3D touches and a details pass. All CSS 3D, no library.
   Every 3D movement needs html.motion and a fine pointer; with less motion asked for, nothing turns.
   ========================================================================== */
/* Headlines break into even lines, paragraphs avoid a lone last word */
h1, h2, h3, .display, .big, .case-about { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }

/* Tilt: photos lean toward the pointer (site.js part 19 sets --rx, --ry and the glare spot --gx, --gy) */
.tilt { position: relative; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 700ms var(--ease); }
.motion .wgrid .ph.tilt { transition: clip-path 1500ms var(--ease), transform 700ms var(--ease); }
.tilt::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.28), rgba(255,255,255,0) 55%); mix-blend-mode: soft-light; }
.tilt:hover::after { opacity: 1; }

/* Client logos keep the rise-and-uncover entrance: Muhannad preferred it to a 3D board flip (2026-11-01) */

/* The footer square is a small cube that rolls as you scroll (part 20). Without motion it stays a flat red square. */
.foot .cube { align-self: end; justify-self: end; position: relative; width: 22px; height: 22px; margin-bottom: 0; --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; }
.foot .base { padding-right: 46px; }
/* The cube sits in a 44 px tap area (a finger needs that much), centred where the 22 px cube used to be */
.foot .cube-hit { 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 .cube { align-self: auto; justify-self: auto; }
/* Phones: the address lines up left with the rest, and the cube takes the right end of that line instead of covering it */
@media (max-width: 800px) { .foot .base { padding-right: 0; } .foot .base .r { margin-left: 0; } .foot .cube-hit { margin-top: -38px; } }

/* v2.10: on phones a plain note beside a section title ("27 brands we have worked with") ran into the title; it drops below */
@media (max-width: 700px) { .sec-head > span.more { grid-area: auto; justify-self: start; margin-top: 8px; } }

/* Film & production on the Work page: two films, then three, then two (six-column grid), one column on phones.
   The play button stays on every film (no pointer label here, so the two never overlap). */
.section.films-sec { margin-top: 160px; }
.films-lead { max-width: 52ch; margin-top: 14px; color: rgba(255,255,255,0.86); }
.films { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px 10px; margin-top: 36px; }
.films > li { grid-column: span 3; }
.films > li:nth-child(3), .films > li:nth-child(4), .films > li:nth-child(5) { grid-column: span 2; }
.films a { display: block; }
.films .ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.films .ph img { width: 100%; height: 100%; object-fit: cover; }
.films a:hover .ph img { transform: scale(1.04); transition: transform 1000ms var(--ease); }
.films .play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,0.92); transition: transform 500ms var(--ease); }
.films .play::after { content: ""; position: absolute; left: 26px; top: 21px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--black); }
.films a:hover .play { transform: scale(1.15); }
.films .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 12px; }
.films .row b { font-weight: 500; font-size: 18px; letter-spacing: -0.03em; line-height: 1.2; }
.films .views { flex: none; font-size: 18px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.films .views small { font-size: 12px; color: var(--muted); letter-spacing: 0; }
.films .meta { margin-top: 6px; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .films { grid-template-columns: 1fr; gap: 36px; } .films > li, .films > li:nth-child(n) { grid-column: auto; } }

/* The view switch slides down out of sight below the case studies (site.js part 9) */
.view-pill { transition: transform 500ms var(--ease), opacity 300ms, visibility 0s; }
.view-pill.away { transform: translate(-50%, 160%); opacity: 0; visibility: hidden; transition: transform 500ms var(--ease), opacity 300ms, visibility 0s 500ms; }

/* What we did on each film, in THAT red (Muhannad, 2026-11-01). #ED2B36 on black is about 5:1, fine for small text. */
/* It sits on the title line, right after the title, and wraps under it when the card is narrow */
.films .row .t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; line-height: 1.2; }
.films .did { color: var(--red); font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.films .views { line-height: 1.2; }

/* Work grid, two columns: when the projects after the first one come out odd, the last one runs full width as well,
   so the grid closes on a wide picture instead of a lone half tile */
[data-cols="2"] .wgrid.intro > li:last-child:nth-child(even) { grid-column: 1 / -1; }
[data-cols="2"] .wgrid.intro > li:last-child:nth-child(even) .ph { aspect-ratio: 21 / 9; }

/* v2.21 (review v2.19) */
/* Phones: the header gets a dark backing once the page moves, so captions and buttons never run under "Menu" */
@media (max-width: 700px) {
  .head { transition: background 300ms var(--ease); }
  html.scrolled .head { background: rgba(5, 5, 5, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .view-pill button[data-c="2"] { display: none; }        /* one column is all a phone shows, so no two-column button */
}

/* v2.23 (review v2.19, nice to have) */
/* Contact fields: a clear 2 px white line when focused, not 1 px */
.mailform input:focus-visible, .mailform textarea:focus-visible { border-bottom: 2px solid var(--white); padding-bottom: 9px; }
/* Buttons ease when they move or change, instead of snapping */
.mailform button[type=submit], .ctrls button { transition: background 200ms, color 200ms, transform 400ms var(--ease); }
/* Phones: 4 px more room between a project's name and its sector line */
@media (max-width: 700px) { .work .cap { height: 72px; } }

/* v2.24: Work grid captions. When a column is narrow (phones, three columns), the name takes its own line and the
   services and year sit under it, instead of squeezing the name into three lines beside them. */
.wgrid .row { gap: 4px 16px; }
@media (max-width: 700px) { .wgrid .row { grid-template-columns: 1fr; } }
[data-cols="3"] .wgrid .row { grid-template-columns: 1fr; }
.wgrid .row > span { line-height: 1.3; }

/* THAT Group page: one big row per company, the name large, what it does, and its address */
.group-rows { list-style: none; border-bottom: 1px solid var(--line); }
.group-rows > li { position: relative; border-top: 1px solid var(--line); }
.group-rows > li:first-child { border-top: 0; }
.group-rows a { display: grid; grid-template-columns: 60px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 34px 0; }
.group-rows .n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.group-rows h2 { font-size: clamp(32px, 4.4vw, 72px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; transition: transform 500ms var(--ease); }
.group-rows p { color: rgba(255,255,255,0.86); max-width: 40ch; }
.group-rows .dom { font-size: 14px; color: var(--muted); white-space: nowrap; transition: color 300ms; }
.group-rows a:hover h2 { transform: translateX(10px); }
.group-rows a:hover .dom { color: var(--white); }
.group-rows > li > .sq { position: absolute; left: 0; top: -5px; width: 10px; height: 10px; background: var(--red); transform: scale(0); transition: transform 260ms var(--ease); }
.group-rows > li:hover > .sq { transform: scale(1); }
@media (max-width: 800px) { .group-rows a { grid-template-columns: 40px 1fr; gap: 10px 14px; padding: 26px 0; } .group-rows p, .group-rows .dom { grid-column: 2; } }

/* v2.25: case study chapters (logo, colour, type, elements, print, social, applications), after the reference studios
   in Muhannad's list (FutureBrand, Pentagram): a numbered head with a short line, then the system itself. */
.chapter { margin: 150px var(--gutter) 0; }
.chapter .gallery { margin: 36px 0 0; }
.ch-head { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 20px; }
.ch-head .n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-head h2 { font-size: clamp(32px, 4vw, 64px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.ch-head p { color: rgba(255,255,255,0.86); max-width: 46ch; }
@media (max-width: 800px) { .ch-head { grid-template-columns: 34px 1fr; } .ch-head p { grid-column: 2; } .chapter { margin-top: 100px; } }
/* Logo and guideline pages are flat artwork: they sit on their own background, never cropped */
.chapter .gallery img { object-fit: contain; }
/* Colour: real swatches, tall blocks side by side, each with its name and code in a colour that reads on it */
.swatches { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-top: 36px; }
.swatches li { background: var(--sw); color: var(--ink); min-height: 340px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.swatches b { font-weight: 500; font-size: 18px; letter-spacing: -0.02em; }
.swatches span { font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .swatches { grid-auto-flow: row; grid-template-columns: 1fr; } .swatches li { min-height: 110px; } }
/* Typography: the faces and what each one does */
.fonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; margin-top: 30px; }
.fonts > div { border-top: 1px solid var(--line); padding-top: 12px; }
.fonts dt { font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.04em; line-height: 1.05; }
.fonts dd { margin-top: 6px; color: var(--muted); }
/* Guideline artwork keeps its own shape: no dark box behind it, pairs align at the top, a lone portrait sits centred */
.gallery.flat { align-items: start; }
.gallery.flat figure { background: transparent; }
.gallery.flat img { height: auto; }
.gallery.flat .single.own { aspect-ratio: auto; }

/* v2.26: case galleries never crop (Muhannad: everything centred, nothing cut on a phone).
   Every image keeps its own shape; a pair shares one row at the same height, each as wide as its proportions. */
.gallery img, .gallery.flat img { width: 100%; height: auto; object-fit: initial; }
.gallery figure { background: transparent; }
.gallery .single, .gallery.flat .single { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); aspect-ratio: auto; }
.gallery .duo { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; }
.gallery .duo > figure { flex: var(--r) 1 0; min-width: 0; }
@media (max-width: 700px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .duo { flex-direction: column; }
  .gallery .duo > figure, .gallery .single, .gallery.flat .single { width: 100%; flex: none; }
}
.gallery .single.mid, .gallery.flat .single.mid { width: 75%; }
@media (max-width: 700px) { .gallery .single.mid, .gallery.flat .single.mid { width: 100%; } }

/* v2.27, made minimal (Muhannad, 2026-11-02): the chapter index is one quiet line of small links at the start of the
   chapters. No pills, no band, and it does not float over the images. */
.ch-nav { margin: 120px var(--gutter) -80px; }
.ch-nav ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ch-nav a { display: flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--muted); transition: color 200ms; }
.ch-nav a span { font-size: 12px; font-variant-numeric: tabular-nums; }
.ch-nav a:hover, .ch-nav a:focus-visible { color: var(--white); }
.chapter { scroll-margin-top: calc(var(--head) + 20px); }
/* Work filter: the same pills as the Journal; a filtered grid drops the wide first and last tiles */
.work-filters { flex-wrap: wrap; margin-top: 10px; }
.wgrid.intro.filtered > li { grid-column: auto; }
.wgrid.intro.filtered > li .ph { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .work-filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .work-filters button { flex: none; } }
/* Group rows for sites not live yet: the same layout, no link */
.group-rows .soon .row { display: grid; grid-template-columns: 60px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 34px 0; }
.group-rows .soon h2 { color: rgba(255,255,255,0.75); }
@media (max-width: 800px) { .group-rows .soon .row { grid-template-columns: 40px 1fr; gap: 10px 14px; padding: 26px 0; } .group-rows .soon p, .group-rows .soon .dom { grid-column: 2; } }

/* v2.30: on phones a guideline's type specimen is too small to read, so only the font names show */
@media (max-width: 700px) { #ch-typography .gallery { display: none; } }

/* v2.31: link hover from the Framer site (Muhannad, 2026-11-02; measured on its "Text Link Dot"): a small white square
   grows at the start of the link and nudges the word right, about 300 ms, and shrinks back on leave.
   Our own CSS: the square is a ::before that widens from 0, so the text moves with it. */
.head .nav a { display: inline-flex; align-items: center; }
.foot .cols a { display: flex; align-items: center; width: max-content; }
.getin dd a, .press a.feed { display: flex; align-items: center; width: max-content; max-width: 100%; }
.press p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.press a.feed { margin-top: 14px; font-size: 14px; color: var(--muted); transition: color 200ms; }
.press a.feed:hover { color: var(--white); }
.foot .cols a::before, .head .nav a::before, .getin dd a::before, .press a.feed::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);
}
.foot .cols a:hover::before, .foot .cols a:focus-visible::before,
.head .nav a:hover::before, .head .nav a:focus-visible::before,
.getin dd a:hover::before, .getin dd a:focus-visible::before, .press a.feed:hover::before, .press a.feed:focus-visible::before { width: 0.42em; margin-right: 0.32em; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .getin dd a, .press a.feed { display: flex; align-items: center; width: max-content; max-width: 100%; }
.press p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.press a.feed { margin-top: 14px; font-size: 14px; color: var(--muted); transition: color 200ms; }
.press a.feed:hover { color: var(--white); }
.foot .cols a::before, .head .nav a::before, .getin dd a::before, .press a.feed::before { transition: none; } }

/* v2.31: About strip now holds upright work shots (9:16); the steps in height stay, nothing is cut */
.strip figure, .strip figure:nth-child(n) { aspect-ratio: 9 / 16; }
.strip figure:nth-child(1) { margin-bottom: 60px; } .strip figure:nth-child(3) { margin-bottom: 30px; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
/* Home "What we do" on phones: the word fits the width (Marketing & campaigns was cut at the right edge) */
@media (max-width: 700px) { .scene-word h3 { font-size: 8.2vw; } }

/* A typographic cover inside a card: the card's tag already names the category, so the cover shows the title only */
.card .cover .type-cover .tc-top { visibility: hidden; }
/* Every width: once the page moves, the header gets the same dark backing as on phones, so its text never sits on
   top of body text (seen on the Journal at 1440) */
.head { transition: background 300ms var(--ease); }
html.scrolled .head { background: rgba(5, 5, 5, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* v2.32: the wordmark sits in the footer's empty left side, smaller (Muhannad, 2026-11-02), not as a band above it */
.foot .mega { margin: 0; align-self: start; font-size: min(2.2vw, 34px); max-width: calc(var(--col2) - var(--gutter) - 40px); }
@media (max-width: 800px) { .foot .mega { font-size: 6vw; max-width: none; margin-bottom: 8px; } }

/* v2.33: smaller footer wordmark (Muhannad: «صغر… اكثر»), copyable swatches, opening covers, cube to top */
.swatches li { display: flex; flex-direction: row; }
/* Swatches only show the colour: no copying (Muhannad, 2026-11-02) */
.swatches .sw { box-sizing: border-box; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px; color: var(--ink); }
.swatches li { padding: 0; transition: flex-grow 500ms var(--ease); }
@media (hover: hover) and (min-width: 701px) { .swatches { display: flex; } .swatches li { flex: 1 1 0; } .swatches li:hover { flex-grow: 1.6; } }
.foot .cube-hit { background: none; border: 0; padding: 0; color: inherit; }
.foot .cube-hit:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Swatch hover, animated (Muhannad: «do animation when you hover»). The stagger entrance set its own transition on the
   list items and cancelled the widening, so the swatches carry their entrance on the button and the item keeps flex. */
.swatches.stagger > li, .motion .swatches.stagger > li { transition: flex-grow 650ms var(--ease) !important; transform: none !important; clip-path: none !important; }
.motion .swatches.stagger .sw { transform: translateY(28px); opacity: 0; transition: transform 900ms var(--ease), opacity 700ms var(--ease); }
.motion .swatches.stagger.in .sw { transform: none; opacity: 1; }
.swatches .sw b, .swatches .sw span { transition: transform 550ms var(--ease); }
@media (hover: hover) {
  .swatches li:hover .sw b, .swatches li:hover .sw span { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .swatches li, .swatches .sw, .swatches .sw * { transition: none !important; } }

/* v2.37: phones get tap targets about 40 px tall (footer links, contact details, chapter index, feed link were 18 to 26 px) */
@media (max-width: 700px) {
  .foot .cols a { line-height: 1.2; padding: 9px 0; }
  .foot .cols .label { margin-bottom: 0; }
  .getin dd a { line-height: 1.3; padding: 8px 0; }
  .ch-nav ol { gap: 0 18px; }
  .ch-nav a { padding: 10px 0; }
  .press a.feed { padding: 10px 0; margin-top: 4px; }
}

/* v2.38: small things in the spirit of the footer cube (Muhannad, 2026-11-02) */
/* Letter roll on the name and Menu: each letter carries a copy of itself one line below (text-shadow) and the two roll up */
.roll .roll-in { display: inline-flex; overflow: clip; line-height: 1.3; height: 1.3em; vertical-align: top; }
.roll .roll-in > span { display: inline-block; text-shadow: 0 1.3em currentColor; transition: transform 520ms var(--ease); transition-delay: calc(var(--i) * 16ms); }
.roll:hover .roll-in > span, .roll:focus-visible .roll-in > span { transform: translateY(-1.3em); }
.roll .roll-in { white-space: pre; }

/* A cube made of six faces from one colour (--c): the sides darker, the top lighter */
.mini, .bc { position: relative; display: block; transform-style: preserve-3d; }
.mini i, .bc i { position: absolute; inset: 0; background: var(--c); backface-visibility: hidden; }
.mini i:nth-child(2), .bc i:nth-child(2) { background: color-mix(in srgb, var(--c) 70%, #000); }
.mini i:nth-child(3), .mini i:nth-child(4), .bc i:nth-child(3), .bc i:nth-child(4) { background: color-mix(in srgb, var(--c) 82%, #000); }
.mini i:nth-child(5), .bc i:nth-child(5) { background: color-mix(in srgb, var(--c) 80%, #fff); }
.mini i:nth-child(6), .bc i:nth-child(6) { background: color-mix(in srgb, var(--c) 55%, #000); }
.mini i:nth-child(1), .bc i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.mini i:nth-child(2), .bc i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.mini i:nth-child(3), .bc i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.mini i:nth-child(4), .bc i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.mini i:nth-child(5), .bc i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.mini i:nth-child(6), .bc i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* Group: a small cube per company, red for the studio, white and grey for the others; it turns a quarter on hover */
.group-rows .n { display: flex; align-items: center; }
.mini { --s: 20px; width: var(--s); height: var(--s); transform: rotateX(-24deg) rotateY(36deg); transition: transform 900ms var(--ease); }
.mini.c1 { --c: var(--red); } .mini.c2 { --c: #e8e6e1; } .mini.c3 { --c: #8a8a8a; }
.group-rows li:hover .mini { transform: rotateX(-24deg) rotateY(216deg); }

/* 404: a big cube to spin */
.lost-cube { --s: min(15vw, 210px); display: grid; place-items: center; gap: 34px; align-self: center; padding: 40px 0; }
.spin { --s: min(15vw, 210px); width: var(--s); height: var(--s); perspective: 1200px; cursor: grab; touch-action: none; outline-offset: 30px; }
.spin.grab { cursor: grabbing; }
.bc { --c: var(--red); width: 100%; height: 100%; transform: rotateX(-22deg) rotateY(34deg); }
.lost-cube .hint { font-size: 13px; color: var(--muted); margin-top: calc(var(--s, 200px) * 0.35); }
@media (max-width: 800px) { .spin { --s: 34vw; } .lost-cube { padding: 70px 0 30px; } }
@media (prefers-reduced-motion: reduce) { .mini { transition: none; } .roll .roll-in > span { transition: none; } }

/* v2.39: footer bottom row, redesigned (Muhannad, 2026-11-02). Its own rule; the copyright on the left; the address with
   Riyadh's live time, Privacy and THAT Group lined up with the Sitemap column above; the cube stays at the far right. */
.foot .base { display: grid; grid-template-columns: calc(var(--col2) - var(--gutter)) 1fr; align-items: baseline; gap: 0;
  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 .loc { display: inline-flex; align-items: baseline; gap: 14px; color: rgba(255,255,255,0.8); }
.foot .base .time { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; color: var(--muted); }
.foot .base .time i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.foot .base a { display: inline-flex; align-items: center; color: var(--muted); 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; }
@media (max-width: 800px) {
  .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 .loc { flex-direction: column; gap: 4px; }
  .foot .base a { padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) { .foot .base a::before { transition: none; } }

/* No rule, no office address; THAT Group is a link, and on hover the THAT Group logo rises above it (Muhannad, 2026-11-02) */
.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 (prefers-reduced-motion: reduce) { .foot .base .tg-logo { transition: none; } }

/* v2.40 Daily films in a case chapter (Oatra): three hosted films side by side, one per row on phones */
.clips { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.clips figure { margin: 0; }
.clips .clip { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.clips video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clips figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 14px; }
.clips figcaption span { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .clips { grid-template-columns: 1fr; gap: 26px; } }
.clips .clip { position: relative; }
.clip-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.92); cursor: pointer; transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.clip-play::after { content: ""; position: absolute; left: 26px; top: 21px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--black); }
.clip-play:hover, .clip-play:focus-visible { transform: scale(1.15); }
.clip-play:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.clip.playing .clip-play { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .clip-play { transition: none; } }