/* Layout: wireframe of full-screen sections on a four-column, two-row hairline grid. Every slot is a labelled placeholder. */
:root {
  --grey: #888c8f;
  --card: rgba(104, 108, 112, 0.78);
  --black: #000000;
  --white: #ffffff;
  --soft: rgba(255, 255, 255, 0.6);
  --line: rgba(255, 255, 255, 0.32);
  --ph-fill: rgba(0, 0, 0, 0.16);
  --ph-x: rgba(255, 255, 255, 0.22);
  --ink: #111214;
  --inset: max(6px, 0.65vw);
  --giant: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--grey); color: var(--white);
  font: 400 clamp(11px, 0.97vw, 18px)/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.01em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Grid lines over the whole page */
.lines { position: fixed; top: 0; bottom: 0; left: var(--inset); right: var(--inset); pointer-events: none; z-index: 30; }
.lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.lines i:nth-child(1) { left: 0; } .lines i:nth-child(2) { left: 25%; } .lines i:nth-child(3) { left: 50%; }
.lines i:nth-child(4) { left: 75%; } .lines i:nth-child(5) { left: 100%; }

/* Section shell: 4 columns x 2 rows, with a hairline across the middle */
.sec {
  --pt: 0px;
  position: relative; height: 100vh; height: 100svh; min-height: 460px;
  padding: var(--pt) var(--inset) 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr 1fr;
}
.sec.black { background: var(--black); }
.sec.rows2::after { content: ""; position: absolute; left: var(--inset); right: var(--inset); top: calc(var(--pt) + (100% - var(--pt)) / 2); height: 1px; background: var(--line); z-index: 29; pointer-events: none; }
.marks { position: absolute; left: var(--inset); right: var(--inset); height: 0; z-index: 31; pointer-events: none; }
.marks i { position: absolute; top: 0; width: 7px; height: 7px; background: var(--white); transform: translate(-50%, -50%); }
.marks i:nth-child(1) { left: 0; } .marks i:nth-child(2) { left: 25%; } .marks i:nth-child(3) { left: 50%; }
.marks i:nth-child(4) { left: 75%; } .marks i:nth-child(5) { left: 100%; }

/* Section number tags so we can talk about each one */
.tag {
  position: absolute; z-index: 32; top: calc(var(--pt, 0px) + 10px); left: calc(var(--inset) + 10px);
  background: #e2463a; color: var(--white); font: 500 10.5px/1 var(--mono); padding: 5px 8px; border-radius: 3px;
}

/* Placeholders */
.ph {
  position: relative; overflow: hidden; background-color: var(--ph-fill);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.6px), var(--ph-x) 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--ph-x) 50%, transparent calc(50% + 0.6px));
  display: grid; place-items: center;
}
.ph > span { background: rgba(0, 0, 0, 0.55); padding: 6px 10px; font-size: 11px; border-radius: 3px; text-align: center; }
.ph.light { background-color: rgba(255, 255, 255, 0.55); }
.ph.light > span { background: rgba(0, 0, 0, 0.6); }
.bleed { position: absolute; inset: var(--pt) var(--inset) 0; z-index: 0; }
.txt-ph { color: var(--soft); }

/* Type */
.giant { font: 400 clamp(80px, 16vw, 300px)/0.82 var(--giant); margin: 0; white-space: nowrap; }
.title { font: 400 clamp(22px, 2.3vw, 46px)/0.9 var(--serif); text-transform: none; letter-spacing: 0; margin: 0; }
.title em { display: block; font-style: italic; }
.pill { justify-self: start; display: inline-block; background: rgba(255, 255, 255, 0.14); padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--white); color: var(--ink); padding: 18px 34px; font-size: 14px; text-transform: none; }
.btn:hover { background: var(--ink); color: var(--white); }
.cell { position: relative; z-index: 2; padding: 40px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cell .body { margin-top: auto; max-width: 46ch; }
.cell.top .body { margin-top: 40px; }

/* Marquee helper */
.run { display: inline-block; white-space: nowrap; animation: run 26s linear infinite; }
.run.slow { animation-duration: 40s; }
.run.rev { animation-direction: reverse; }
@keyframes run { to { transform: translateX(-50%); } }

/* S00 Loader */
.loader {
  position: fixed; inset: 0; z-index: 60;
  clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.77, 0, .18, 1), visibility 0s linear 1s;
  background: linear-gradient(180deg, #333c46 0%, #6f7d86 45%, #b9c8c9 100%);
}
.loader.done { clip-path: inset(0 0 100% 0); visibility: hidden; }
.loader > * { transition: opacity .35s ease, translate .5s ease; }
.loader.done > * { opacity: 0; translate: 0 -16px; }
.loader .lpill { position: absolute; left: 50%; top: 7vh; transform: translateX(-50%); background: var(--white); color: var(--ink); padding: 8px 12px; border-radius: 6px; font-size: 15px; }
.loader .cellbox { position: absolute; left: 50%; top: 50%; width: 10.5vw; min-width: 120px; aspect-ratio: 1; transform: translate(-50%, -40%); border: 1px solid var(--line); }
.loader .cellbox::before { content: ""; position: absolute; inset: -4px; background:
  linear-gradient(var(--white), var(--white)) left top / 7px 7px no-repeat,
  linear-gradient(var(--white), var(--white)) right top / 7px 7px no-repeat,
  linear-gradient(var(--white), var(--white)) left bottom / 7px 7px no-repeat,
  linear-gradient(var(--white), var(--white)) right bottom / 7px 7px no-repeat; }
.loader .cellbox .ph { position: absolute; inset: 18%; }
.loader .vline, .loader .hline { position: absolute; background: var(--line); }
.loader .vline { top: 0; bottom: 0; width: 1px; }
.loader .hline { left: 0; right: 0; height: 1px; }

/* Header */
.bar {
  position: fixed; z-index: 40; top: calc(var(--inset) + 0.05vw); left: 50%; transform: translateX(-50%);
  width: 31.3vw; min-width: 300px; border-radius: 0.5vw; overflow: hidden;
  background: rgba(118, 122, 126, 0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
/* Dark-to-light panel colour fades in when the menu opens */
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(180deg, #1f2327 0%, #3b4248 36%, #78828a 74%, #9aa2a6 100%);
}
.bar.open::before { opacity: 1; }
.bar-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 4.2vw; min-height: 46px; padding-inline: 1.25vw; }
.menu-btn { justify-self: start; width: 1.6vw; min-width: 22px; height: 2vw; min-height: 22px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; align-content: center; gap: max(4px, 0.4vw); }
.menu-btn { --g: max(4px, 0.4vw); --h: max(1.5px, 0.12vw); }
.menu-btn span { display: block; width: 100%; height: var(--h); background: var(--white); transition: transform .3s ease; }
.bar.open .menu-btn span:first-child { transform: translateY(calc((var(--g) + var(--h)) / 2)) rotate(45deg); }
.bar.open .menu-btn span:last-child { transform: translateY(calc((var(--g) + var(--h)) / -2)) rotate(-45deg); }
.logo { font: 400 clamp(24px, 2.15vw, 46px)/1 var(--giant); }
.bar-link { justify-self: end; font: inherit; font-size: clamp(11px, 0.97vw, 18px); color: inherit; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; }

/* Music button: sits before "Services +"; its bars move while the track plays */
.bar-end { justify-self: end; display: flex; align-items: center; gap: max(14px, 1.1vw); }
.music-btn { display: flex; align-items: center; color: inherit; background: none; border: 0; padding: 4px 2px; cursor: pointer; }
.music-btn[hidden] { display: none; }
.music-bars { display: flex; align-items: flex-end; gap: max(2px, 0.14vw); height: max(12px, 0.9vw); }
.music-bars i { width: max(2px, 0.14vw); height: 30%; background: var(--white); opacity: .7; transform-origin: bottom; }
.music-bars i:nth-child(2) { height: 55%; }
.music-bars i:nth-child(3) { height: 40%; }
.music-bars i:nth-child(4) { height: 65%; }
.music-btn.is-playing .music-bars i { opacity: 1; animation: music-bar .9s ease-in-out infinite alternate; }
.music-btn.is-playing .music-bars i:nth-child(2) { animation-delay: -.3s; }
.music-btn.is-playing .music-bars i:nth-child(3) { animation-delay: -.6s; }
.music-btn.is-playing .music-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes music-bar { from { height: 20%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .music-btn.is-playing .music-bars i { animation: none; height: 80%; } }
@media (max-width: 820px) { .music-btn { padding: 8px 4px; } }

/* Drop-down panel: rows animate open from 0 to full height */
.bar-drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
.bar.open .bar-drop { grid-template-rows: 1fr; }
.bar-panel { min-height: 0; overflow: hidden; padding-inline: 1.25vw; }
.bar.open .bar-panel { overflow-y: auto; max-height: calc(100svh - 4.2vw - 2 * var(--inset) - 12px); }
.bar-panel > * + *, .bar-panel > :first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.menu-cards { display: grid; grid-template-columns: 1fr 1fr; padding: 2.2vw 0 2.4vw; }
.menu-card { display: flex; flex-direction: column; align-items: center; gap: 1.1vw; text-align: center; padding-inline: 0.9vw; }
.menu-card + .menu-card { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.menu-card img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; display: block; transition: opacity .2s; }
.menu-card:hover img { opacity: .85; }
.menu-card-title { font: 400 clamp(17px, 1.75vw, 32px)/0.95 var(--serif); text-transform: none; letter-spacing: 0; }
.menu-card-title em { display: block; font-style: italic; }
.menu-links { display: grid; justify-items: center; gap: 1.2vw; padding: 4.2vw 0; }
.menu-links a { font: 400 clamp(24px, 2.2vw, 40px)/1.1 var(--serif); text-transform: none; letter-spacing: 0; }
.menu-links a:hover, .menu-card:hover .menu-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.menu-mail { display: block; text-align: center; padding: 1.9vw 0 1.7vw; font-size: clamp(11px, 0.97vw, 18px); text-transform: none; }
.menu-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .bar-drop, .bar::before, .menu-btn span { transition: none; } }

/* Real video boxes */
.media { position: relative; overflow: hidden; background: #5f6366; }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vlabel { position: absolute; z-index: 2; left: 10px; bottom: 10px; background: rgba(0, 0, 0, 0.55); padding: 4px 8px; border-radius: 3px; font-size: 10.5px; }

/* S01 Hero: 4 x 2 boxes. Row 1: video, title, video, video. Row 2: video, call-to-action card (under the title), wide video (cols 3-4) */
.s01 { --pt: var(--inset); }
.s01 .h-v1 { grid-column: 1; grid-row: 1; }
.s01 .h-t1 { grid-column: 1; grid-row: 2; }
.s01 .h-v2 { grid-column: 3; grid-row: 1; }
.s01 .h-v3 { grid-column: 4; grid-row: 1; }
.s01 .h-v4 { grid-column: 2; grid-row: 1; }
.s01 .h-t2 { grid-column: 2; grid-row: 2; }
.s01 .h-v5 { grid-column: 3 / 5; grid-row: 2; }
.s01 .h-v5 video { object-position: center 30%; }
.s01 .cell { padding: 2.3vw 3vw 2.1vw 1.85vw; }
.title.bold { font: 400 4.1vw/0.86 var(--giant); text-transform: uppercase; letter-spacing: 0.005em; }
.s01 .h-t1 { padding-right: 1.85vw; }

/* S01 Text 2: call-to-action card, smoky grey glass */
.s01 .h-t2 { padding: 2.3vw 1.85vw 2.1vw; }
.cta-card {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  padding: 0;
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: 0;
}
.cta-title { margin: 0; font: 500 clamp(18px, 1.75vw, 32px)/1.15 "Geist", "Helvetica Neue", Arial, sans-serif; color: var(--white); letter-spacing: -0.01em; }
.cta-desc { margin-top: 1.1vw; font-size: clamp(13px, 1.05vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.cta-meta { margin-top: auto; font-size: clamp(11px, 0.9vw, 16px); color: rgba(255, 255, 255, 0.66); }
.cta-foot { margin-top: 1.3vw; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.status {
  display: inline-flex; align-items: center; gap: 0.55vw;
  padding: 0.75vw 1.05vw; border-radius: 999px; background: rgba(0, 0, 0, 0.22);
  font-size: clamp(12px, 0.95vw, 17px); color: var(--white);
}
.status svg { width: clamp(13px, 1.05vw, 18px); height: auto; }
.status svg circle { fill: #4cc26a; }
.status svg path { fill: none; stroke: #0f2a17; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 0.5vw;
  padding: 0.75vw 1.25vw; border-radius: 999px; background: var(--white); color: var(--ink);
  font-size: clamp(12px, 0.95vw, 17px); font-weight: 500;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); transition: transform .2s, box-shadow .2s;
}
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.s01 .h-t1 { padding-top: clamp(48px, 4.5vw, 90px); }

/* S02-S03 Feature cards over video */
.card {
  grid-row: 2; z-index: 2; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; padding: 40px 30px 24px;
}
.card .title { font-size: clamp(28px, 2.6vw, 44px); }
.card .thumb { width: 52%; aspect-ratio: 5 / 3; }
.s02 .card { grid-column: 2; }
.s03 .card { grid-column: 3; }

/* S04 Giant words + .01 + image */
.s04 .words { grid-column: 1 / 5; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; align-content: space-between; overflow: hidden; padding-top: 6px; }
.s04 .w1 { grid-column: 1; }
.s04 .w2 { grid-column: 2; }
.s04 .w3 { grid-column: 3 / 5; text-align: right; }
.s04 .w4 { grid-column: 3; grid-row: 2; overflow: hidden; }
.s04 .c01 { grid-column: 1; grid-row: 2; }
.s04 .img { grid-column: 3; grid-row: 2; }

.s04 .giant, .s07 .giant { font-size: clamp(64px, 12vw, 230px); }

/* S05 */
.s05 .img { grid-column: 1 / 3; grid-row: 1 / 3; }
.s05 .c02 { grid-column: 4; grid-row: 1; }
.s05 .c03 { grid-column: 3; grid-row: 2; }

/* S06 */
.s06 .img-a { grid-column: 3 / 5; grid-row: 1 / 3; }
.s06 .img-b { grid-column: 1; grid-row: 2; }

/* S07 Giant words on black + emblem */
.s07 .words { grid-column: 1 / 5; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: space-between; overflow: hidden; }
.s07 .w1 { grid-column: 1; }
.s07 .w2 { grid-column: 2 / 4; overflow: hidden; }
.s07 .w3 { grid-column: 4; }
.s07 .w4 { grid-column: 2 / 4; text-align: center; }
.s07 .emblem { grid-column: 2 / 4; grid-row: 2; justify-self: center; align-self: center; width: 26%; aspect-ratio: 3 / 4; }

/* S08 Quote, logos, .01 and .02 */
.s08 .top { grid-column: 2 / 4; grid-row: 1; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; text-align: center; padding-inline: 20px; }
.s08 .quote { position: relative; font: 400 clamp(22px, 2.3vw, 38px)/1.2 var(--serif); text-transform: none; padding-inline: 44px; }
.s08 .quote::before, .s08 .quote::after { position: absolute; top: 50%; transform: translateY(-50%); font: 300 clamp(80px, 8vw, 150px)/1 var(--serif); color: var(--white); }
.s08 .quote::before { content: "("; left: -10px; }
.s08 .quote::after { content: ")"; right: -10px; }
.s08 .label { width: 200px; overflow: hidden; background: rgba(255,255,255,.12); border-radius: 6px; padding: 6px 0; }
.s08 .logos { display: flex; gap: 22px; width: 100%; justify-content: space-between; }
.s08 .logos .ph { flex: 1; height: 44px; }
.s08 .c01 { grid-column: 1; grid-row: 2; background: #0c0c0c; }
.s08 .c02 { grid-column: 4; grid-row: 2; background: #0c0c0c; }

/* S09 */
.s09 .c03 { grid-column: 3; grid-row: 1; background: #0c0c0c; }
.s09 .vid { grid-column: 2 / 4; grid-row: 2; }

/* S10 Sticky video that grows */
.s10-wrap { position: relative; height: 220vh; background: var(--black); }
.s10 { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.s10 .vid { width: 50%; height: 50%; transition: none; }

/* S11-S14 Gallery with a sticky ticker */
.gallery { position: relative; }
.s11 .img { grid-column: 1 / 3; grid-row: 1 / 3; }
.s13 .img { grid-column: 3 / 5; grid-row: 1 / 3; }
.ticker { position: sticky; bottom: 20vh; z-index: 33; height: 44px; margin-top: -44px; background: var(--black); overflow: hidden; display: flex; align-items: center; font-size: 16px; }

/* S15 Giant statement + video + running words */
.s15 { height: auto; min-height: 150vh; display: block; padding-block: 0 80px; }
.s15 .center { width: 50%; margin-inline: auto; display: grid; gap: 0; }
.s15 .giant.center-txt { text-align: center; font-size: clamp(80px, 13vw, 250px); line-height: 0.86; white-space: normal; }
.s15 .vid { width: 50%; margin: 30px auto 0; aspect-ratio: 16 / 8.5; }
.s15 .runrow { width: 50%; margin-inline: auto; overflow: hidden; }
.s15 .runrow .giant { font-size: clamp(80px, 13vw, 250px); }
.s15 .para { width: 50%; margin: 18vh auto 0; text-align: center; }

/* S16 Team */
.s16 { height: auto; grid-template-rows: 50vh 52vh 52vh; }
.s16 .para { grid-column: 2 / 4; grid-row: 1; align-self: start; padding: 120px 30px 0; text-align: center; }
.s16 .person { position: relative; }
.s16 .person .ph { position: absolute; inset: 0; }
.s16 .person .name { position: absolute; z-index: 2; left: 0; right: 0; bottom: 36px; text-align: center; font: 400 clamp(26px, 2.4vw, 40px)/1 var(--serif); text-transform: none; }
.s16 .sig { display: grid; place-items: center; }
.s16 .sig .ph { width: 70%; height: 34%; }
.s16 .p1 { grid-column: 1; grid-row: 2; } .s16 .s1 { grid-column: 2; grid-row: 2; }
.s16 .s2 { grid-column: 3; grid-row: 2; } .s16 .p2 { grid-column: 4; grid-row: 2; }
.s16 .p3 { grid-column: 2; grid-row: 3; } .s16 .s3 { grid-column: 3; grid-row: 3; }

/* S17 Footer */
.s17 .nav { grid-column: 1; grid-row: 1; z-index: 2; padding: 30px 26px; display: grid; align-content: start; gap: 0; }
.s17 .nav a { font: 400 22px/1.25 var(--serif); text-transform: none; }
.s17 .contacts { grid-column: 4; grid-row: 1; z-index: 2; padding: 30px 26px; display: grid; align-content: start; gap: 18px; }
.s17 .contacts .lbl { justify-self: start; background: var(--white); color: var(--ink); padding: 4px 8px; font-size: 11px; }
.s17 .foot-run { position: absolute; z-index: 2; left: var(--inset); right: var(--inset); bottom: 40px; overflow: hidden; }
.s17 .foot-run .giant { font-size: clamp(120px, 20vw, 380px); line-height: 0.78; }
.s17 .socials { position: absolute; z-index: 3; right: calc(var(--inset) + 24px); bottom: 70px; display: flex; gap: 10px; }
.s17 .socials span { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 10px; }
.s17 .legal { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 40px; background: var(--black); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding-inline: var(--inset); font-size: 11px; }
.s17 .legal span { padding-left: 14px; }

/* Phones */
@media (max-width: 820px) {
  .lines i:nth-child(2), .lines i:nth-child(3), .lines i:nth-child(4), .marks i:nth-child(2), .marks i:nth-child(4) { display: none; }
  .bar { top: calc(var(--inset) + 12px + env(safe-area-inset-top, 0px)); width: calc(100% - 24px); min-width: 0; border-radius: 6px; }
  .bar-row { height: 56px; padding-inline: 18px; }
  .bar-panel { padding-inline: 18px; }
  .bar.open .bar-panel { max-height: calc(100svh - 56px - 2 * var(--inset) - 12px); }
  .menu-cards { padding: 22px 0 24px; }
  .menu-card { gap: 12px; padding-inline: 10px; }
  .menu-links { gap: 14px; padding: 36px 0; }
  .menu-mail { padding: 20px 0 18px; }
  .logo { font-size: 30px; }
  .cell { padding: 24px; }
  .giant { font-size: clamp(60px, 15vw, 120px); }
  .card { grid-column: 1 / 5 !important; margin: 0 6%; }
  /* S01 on phones: preserve the original single-column order */
  .s01 { height: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .s01 > .media, .s01 > .cell { grid-column: 1 !important; grid-row: auto !important; }
  .s01 > .media { aspect-ratio: 4 / 5; height: auto; }
  .s01 > .media + *, .s01 > .cell + * { border-top: 1px solid var(--line); }
  .s01::after, .s01 .marks.mid { display: none; }
  .s01 > .media { overflow: visible; }
  .s01 > :is(.media, .cell) + :is(.media, .cell)::after {
    content: ""; position: absolute; z-index: 31; pointer-events: none;
    top: -3.5px; left: -3.5px; right: -3.5px; height: 7px;
    background:
      linear-gradient(var(--white), var(--white)) left / 7px 7px no-repeat,
      linear-gradient(var(--white), var(--white)) right / 7px 7px no-repeat;
  }
  .marks i:nth-child(3) { display: none; }
  .s01 .h-t1 { padding: 36px 20px 40px; }
  .s01 .title.bold { font-size: 13vw; }
  .s01 .h-t2 { padding: 32px 20px 36px; }
  .cta-card { padding: 0; } .cta-desc { margin-top: 12px; } .cta-meta { margin-top: 22px; } .cta-foot { margin-top: 14px; }
  .status, .cta-btn { padding: 10px 14px; gap: 7px; }
  .s04 .c01 { grid-column: 1 / 3; }
  .s04 .img { grid-column: 3 / 5; }
  .s05 .img { grid-column: 1 / 3; grid-row: 1; }
  .s05 .c02 { grid-column: 3 / 5; }
  .s05 .c03 { grid-column: 1 / 5; }
  .s07 .emblem { width: 50%; }
  .s08 .top { grid-column: 1 / 5; }
  .s08 .c01 { grid-column: 1 / 3; }
  .s08 .c02 { grid-column: 3 / 5; }
  .s09 .c03 { grid-column: 1 / 5; }
  .s09 .vid { grid-column: 1 / 5; }
  .s15 .center, .s15 .vid, .s15 .runrow, .s15 .para { width: 100%; }
  .s16 { grid-template-rows: auto 40vh 40vh; }
  .s16 .para { grid-column: 1 / 5; padding-top: 100px; padding-bottom: 30px; }
  .s16 .p1 { grid-column: 1 / 3; } .s16 .s1 { grid-column: 3 / 5; }
  .s16 .s2 { grid-column: 1 / 3; grid-row: 3; } .s16 .p2 { grid-column: 3 / 5; grid-row: 3; }
  .s16 .p3, .s16 .s3 { display: none; }
  .s17 .nav { grid-column: 1 / 3; }
  .s17 .contacts { grid-column: 3 / 5; }
  .s17 .legal { grid-template-columns: 1fr 1fr; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .run { animation: none; }
}

/* S02 project process */
.s02 > .media { grid-row: 1; min-height: 0; }
.s02 .s02-v1 { grid-column: 1 / 3; }
.s02 .s02-v3 { grid-column: 3; }
.s02 .s02-v4 { grid-column: 4; }
.s02 .s02-v5 { grid-column: 4; grid-row: 2; }
.project-process { grid-column: 1 / 4; grid-row: 2; min-width: 0; padding: 22px 0; }
.project-process > h2 { margin: 0 24px 20px; font: 400 clamp(24px, 2.5vw, 42px)/1 var(--giant); }
.step-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.step-column { padding: 0 24px; display: grid; gap: 20px; }
.project-step h3 { font: 500 17px/1.2 "Geist",sans-serif; margin: 4px 0 6px; text-transform: none; }
.project-step p { font: 400 13px/1.45 "Geist",sans-serif; text-transform: none; margin: 0; max-width: 28ch; }
.step-number { font-size: 11px; opacity: .65; }
@media(max-width:820px) {
 .s02 { height: auto; min-height: 0; display: flex; flex-direction: column; }
 .s02 > .media { aspect-ratio: 4/5; flex: none; }
 .s02 .project-process { padding: 32px 0; }
 .step-columns { grid-template-columns: 1fr; gap: 24px; }
 .step-column { gap: 24px; }
 .s02::after, .s02 .marks.mid { display: none; }
 .s02 > .media, .s02 > .project-process { position: relative; border-top: 1px solid var(--line); overflow: visible; }
 .s02 > .media::after, .s02 > .project-process::after { content: ""; position: absolute; z-index: 31; pointer-events: none; top: -3.5px; left: -3.5px; right: -3.5px; height: 7px; background: linear-gradient(var(--white),var(--white)) left/7px 7px no-repeat,linear-gradient(var(--white),var(--white)) right/7px 7px no-repeat; }
}


/* S03 About Nothink */
.s03 { height: auto; min-height: 100svh; grid-template-rows: repeat(2,minmax(50svh,auto)); }
.s03 > .media { min-height: 0; }
.s03 .about-copy { grid-column: 1; grid-row: 1; }
.s03 .about-wide { grid-column: 2 / 4; grid-row: 1; }
.s03 .about-top-video { grid-column: 4; grid-row: 1; }
.s03 .about-bottom-video { grid-column: 1; grid-row: 2; }
.s03 .skills-copy { grid-column: 2; grid-row: 2; }
.s03 .skills-video { grid-column: 3 / 5; grid-row: 2; }
.s03 .about-last-video { grid-column: 4; grid-row: 2; }
.about-copy,.skills-copy { padding: 36px 24px 28px; min-width: 0; position: relative; }
.about-copy h2,.skills-copy h2 { font: 400 clamp(28px,2.5vw,42px)/1 var(--giant); margin: 0 0 18px; }
.about-copy p,.skills-copy li { font: 400 14px/1.55 "Geist",sans-serif; text-transform: none; }
.about-copy p { margin: 0; }
.skills-copy ul { padding-left: 16px; margin: 0; list-style: disc; }
.skills-copy li + li { margin-top: 7px; }
@media(max-width:820px) {
 .s03 { display: flex; flex-direction: column; min-height: 0; }
 .s03 > .media { aspect-ratio: 4/5; flex: none; }
 .s03::after,.s03 .marks.mid { display:none; }
 .s03 > .media,.s03 > .about-copy,.s03 > .skills-copy { position:relative; border-top:1px solid var(--line); overflow:visible; }
 .s03 > .media::after,.s03 > .about-copy::after,.s03 > .skills-copy::after { content:"";position:absolute;z-index:31;pointer-events:none;top:-3.5px;left:-3.5px;right:-3.5px;height:7px;background:linear-gradient(var(--white),var(--white)) left/7px 7px no-repeat,linear-gradient(var(--white),var(--white)) right/7px 7px no-repeat; }
}


/* S03 top boundary and S04 content draft */
.s03::before,.tools-training::before { content:"";position:absolute;top:0;left:var(--inset);right:var(--inset);height:1px;background:var(--line);z-index:29;pointer-events:none; }
.tools-training { height:auto; min-height:0; display:block; padding:60px max(24px,4vw); }
.tools-content { position:relative; }
.tools-content h2 { margin:0 0 24px; font:400 30px/1 var(--giant); }
.tool-list { list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 44px;padding:0; }
.tool-list li { border:1px solid var(--line);padding:10px 14px;text-transform:none; }
.training-entry { border-block:1px solid var(--line);padding:20px 0;text-transform:none; }
.training-entry h3 { margin:0 0 8px;font:500 22px/1.3 "Geist",sans-serif; }
.tools-footer { display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);margin-top:44px;padding-top:24px;text-transform:none; }


/* S04 testimonials above video placeholders */
.testimonials-section::before { content:""; position:absolute;top:0;left:var(--inset);right:var(--inset);height:1px;background:var(--line);z-index:29;pointer-events:none; }
.testimonial-placeholder { position:relative;min-width:0;padding:48px 24px 28px;display:flex;flex-direction:column; }
.testimonial-number { opacity:.6;font-size:12px; }
.testimonial-placeholder h2 { font:400 32px/1 var(--giant);margin:18px 0; }
.testimonial-placeholder p { font:400 22px/1.4 var(--serif);text-transform:none; }
.client-placeholder { margin-top:auto;padding-top:24px;font-size:12px;line-height:1.7;opacity:.65; }
.testimonial-video { min-height:0; }
@media(max-width:820px) {
 .testimonials-section { height:auto;min-height:0;display:flex;flex-direction:column; }
 .testimonial-placeholder { min-height:280px; }
 .testimonial-video { aspect-ratio:4/5;flex:none; }
 .testimonials-section::after,.testimonials-section .marks.mid { display:none; }
 .testimonials-section > :is(.testimonial-placeholder,.media) { border-top:1px solid var(--line);position:relative;overflow:visible; }
 .testimonials-section > :is(.testimonial-placeholder,.media)::after { content:"";position:absolute;z-index:31;pointer-events:none;top:-3.5px;left:-3.5px;right:-3.5px;height:7px;background:linear-gradient(var(--white),var(--white)) left/7px 7px no-repeat,linear-gradient(var(--white),var(--white)) right/7px 7px no-repeat; }
}


/* S04b: one row of four boxes holding two wide videos (two boxes each), same height as a testimonial row */
.wide-row { height: 50vh; height: 50svh; min-height: 230px; grid-template-rows: 1fr; }
.wide-row > .media { min-height: 0; }
.wide-row .wide-v1 { grid-column: 1 / 3; }
.wide-row .wide-v2 { grid-column: 3 / 5; }
@media(max-width:820px) {
 .wide-row { height:auto;min-height:0;display:flex;flex-direction:column; }
 .wide-row > .media { aspect-ratio:16/9;flex:none; }
 .wide-row > .media + .media { border-top:1px solid var(--line);position:relative;overflow:visible; }
 .wide-row > .media + .media::after { content:"";position:absolute;z-index:31;pointer-events:none;top:-3.5px;left:-3.5px;right:-3.5px;height:7px;background:linear-gradient(var(--white),var(--white)) left/7px 7px no-repeat,linear-gradient(var(--white),var(--white)) right/7px 7px no-repeat; }
}


/* Final section: invitation, expanding film, compact contact footer */
.closing-intro { display:grid;height:auto;min-height:65svh;grid-template-rows:auto;border-top:1px solid var(--line);background:#17191a; }
.closing-message { grid-column:2 / 4;padding:90px 32px 60px;text-align:center;text-transform:none; }
.closing-eyebrow { font:12px var(--mono);text-transform:uppercase;opacity:.65; }
.closing-message h2 { font:400 clamp(48px,6vw,100px)/.95 var(--serif);margin:24px 0; }
.closing-message p { font:400 17px/1.6 "Geist",sans-serif;max-width:44ch;margin:0 auto 28px; }
.closing-scroll { position:relative;height:220svh;background:#17191a; }
.closing-sticky { position:sticky;top:0;height:100svh;margin:0 var(--inset);display:flex;align-items:flex-start;justify-content:center; }
.closing-film { position:relative;width:50%;height:50%;overflow:hidden;outline:1px solid var(--line); }
.closing-film video { width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block; }
.film-caption { position:absolute;bottom:20px;left:20px;font:11px var(--mono);background:rgba(0,0,0,.5);padding:8px 12px; }
.closing-footer { height:auto;min-height:0;grid-template-rows:auto;padding:48px max(24px,3vw);gap:24px;border-top:1px solid var(--line); }

.closing-footer h2 { font:400 64px/1 var(--giant);margin:0 0 16px; }
.closing-footer p { font:400 13px/1.7 "Geist",sans-serif;text-transform:none; }
.contact-options { grid-column:3; }
.closing-footer > a { justify-self:end;align-self:end; }
@media(max-width:820px) {
 .closing-intro { display:block;min-height:0; }
 .closing-message { padding:70px 24px 48px; }
 .closing-scroll { height:160svh; }
 .closing-film { width:100%; }
 .closing-footer { display:flex;flex-direction:column;padding:36px 24px; }
 .closing-footer > a { align-self:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .closing-scroll { height:100svh; } }


/* Keep the framing grid stationary while the closing video grows behind it. */
.film-grid-overlay { position:absolute;inset:0;pointer-events:none;z-index:31; }
.film-grid-row { position:absolute;left:0;right:0;height:1px;background:var(--line); }
.film-grid-row i { position:absolute;top:0;width:7px;height:7px;background:var(--white);transform:translate(-50%,-50%); }
.film-grid-row i:nth-child(1) { left:0; }
.film-grid-row i:nth-child(2) { left:25%; }
.film-grid-row i:nth-child(3) { left:50%; }
.film-grid-row i:nth-child(4) { left:75%; }
.film-grid-row i:nth-child(5) { left:100%; }
.closing-film { border-radius:0; }
.sec::before { content:"";position:absolute;top:var(--pt,0px);left:var(--inset);right:var(--inset);height:1px;background:var(--line);z-index:29;pointer-events:none; }
.closing-footer::after { content:"";position:absolute;bottom:0;left:var(--inset);right:var(--inset);height:1px;background:var(--line); }
@media(max-width:820px) {
 .film-grid-row i:nth-child(2),.film-grid-row i:nth-child(3),.film-grid-row i:nth-child(4) { display:none; }
}


/* Match the closing invitation to one standard desktop grid row. */
.lines i:nth-child(3) { background:rgba(255,255,255,.10); }
@media(min-width:821px) {
 .closing-intro { height:50svh;min-height:230px;grid-template-rows:minmax(0,1fr); }
 .closing-message { padding:28px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0; }
 .closing-message h2 { font-size:clamp(34px,4.2vw,64px);margin:12px 0; }
 .closing-message p { font-size:clamp(12px,1vw,16px);line-height:1.45;margin-bottom:16px; }
 .closing-message .cta-btn { flex-shrink:0; }
 .closing-eyebrow { font-size:10px; }
}


/* Shared descriptive captions for all video tiles. */
.vlabel,.film-caption {
 position:absolute;z-index:2;left:14px;bottom:14px;max-width:calc(100% - 28px);
 padding:8px 11px;border-radius:0;background:rgba(0,0,0,.5);color:#fff;
 font:400 10.5px/1.45 var(--mono);text-transform:uppercase;letter-spacing:.015em;
 white-space:normal;pointer-events:none;
}
@media(max-width:820px) {
 .vlabel,.film-caption { left:12px;bottom:12px;max-width:calc(100% - 24px);font-size:10px; }
}


/* Minimal oversized wordmark footer */
.closing-footer { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0;padding:0 var(--inset); }
.closing-footer > .footer-invitation { grid-column:1 / 3;padding:40px 28px; }
.footer-invitation > span,.footer-email > span,.footer-whatsapp > span { display:block;font:11px/1.4 var(--mono);opacity:.65;margin-bottom:12px; }
.closing-footer .footer-invitation p { font:400 clamp(18px,1.8vw,28px)/1.3 "Geist",sans-serif;max-width:28ch; }
.footer-email { grid-column:3;padding:40px 24px; }
.footer-whatsapp { grid-column:4;padding:40px 24px; }
.footer-email a,.footer-whatsapp a { font:400 clamp(14px,1.4vw,22px)/1.4 "Geist",sans-serif;text-transform:none;overflow-wrap:anywhere; }
.footer-email a:hover,.footer-whatsapp a:hover { text-decoration:underline;text-underline-offset:5px; }
.closing-footer .footer-wordmark { grid-column:1 / -1;margin:0;padding:18px 20px 0;font:400 clamp(90px,24vw,500px)/.83 var(--giant);letter-spacing:.01em;text-align:center; }
.closing-footer .footer-bottom { grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 24px;font:10px/1.5 var(--mono); }
@media(max-width:820px) {
 .closing-footer { display:grid;grid-template-columns:1fr; }
 .closing-footer > .footer-invitation,.footer-email,.footer-whatsapp { grid-column:1;padding:24px; }
 .closing-footer .footer-wordmark { padding:20px 8px 0;font-size:24vw; }
 .closing-footer .footer-bottom { flex-wrap:wrap;padding:24px; }
}


/* Video descriptions appear only while their video container is hovered. */
.vlabel,.film-caption { opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease; }
@media(hover:hover) {
 .media:hover > .vlabel,.closing-film:hover > .film-caption { opacity:1;visibility:visible; }
}


/* Footer: one dedicated box per item, aligned to the four-column grid. */
.closing-footer { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;padding:0 var(--inset);gap:0; }
.closing-footer > .footer-brand,
.closing-footer > .footer-invitation,
.closing-footer > .footer-email,
.closing-footer > .footer-whatsapp { grid-column:auto;min-width:0;padding:36px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px; }
.closing-footer .footer-brand h2 { font:400 clamp(32px,4.3vw,76px)/1 var(--giant);margin:0; }
.closing-footer .footer-brand p { font-size:12px; }
.footer-brand > span { font:10px/1.5 var(--mono);opacity:.65; }
.closing-footer .footer-invitation p { font:400 clamp(16px,1.35vw,22px)/1.4 "Geist",sans-serif;margin:0; }
.footer-invitation > a { margin-top:auto;font:10px/1.5 var(--mono); }
.footer-invitation > span,.footer-email > span,.footer-whatsapp > span { margin:0; }
.footer-email a,.footer-whatsapp a { font-size:clamp(13px,1.25vw,20px);max-width:100%; }
@media(max-width:820px) {
 .closing-footer { grid-template-columns:1fr; }
 .closing-footer > .footer-brand,.closing-footer > .footer-invitation,.closing-footer > .footer-email,.closing-footer > .footer-whatsapp { padding:28px 24px;position:relative; }
 .closing-footer > div + div { border-top:1px solid var(--line); }
 .closing-footer > div + div::after { content:"";position:absolute;top:-3.5px;left:-3.5px;right:-3.5px;height:7px;background:linear-gradient(var(--white),var(--white)) left/7px 7px no-repeat,linear-gradient(var(--white),var(--white)) right/7px 7px no-repeat; }
 .closing-footer .footer-brand h2 { font-size:52px; }
}


@media(min-width:821px) {
 footer.closing-footer > .footer-brand { grid-column:1;grid-row:1; }
 footer.closing-footer > .footer-invitation { grid-column:2;grid-row:1; }
 footer.closing-footer > .footer-whatsapp { grid-column:3;grid-row:1; }
 footer.closing-footer > .footer-email { grid-column:4;grid-row:1; }
}


/* ===== Motion: entrance, scroll reveals, menu, hover ===== */
/* Header drops in as the loader wipes away */
.bar { transition: translate .9s cubic-bezier(.2, .7, .2, 1) .35s, opacity .5s ease .35s; }
html.js:not(.ready) .bar { translate: 0 calc(-100% - 24px); opacity: 0; }

/* Text and boxes rise into place */
[data-reveal="rise"] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), translate 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .2s, box-shadow .2s; }
html.js [data-reveal="rise"]:not(.is-in) { opacity: 0; translate: 0 28px; }

/* Videos open like a shutter from the bottom, then settle from a slow zoom.
   The clip sits on the video, not the box, so the box stays measurable while it waits to appear. */
[data-reveal="wipe"] { transition: background-color .4s ease var(--d, 0ms); }
html.js [data-reveal="wipe"]:not(.is-in) { background-color: transparent; }
.media video { clip-path: inset(0 0 0 0); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1) var(--d, 0ms), scale 1.7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform 1.2s cubic-bezier(.2, .7, .2, 1); }
html.js [data-reveal="wipe"]:not(.is-in) video { clip-path: inset(100% 0 0 0); scale: 1.18; }
/* Phones let boxes overflow for the joint squares, so skip the zoom there */
@media (max-width: 820px) { html.js [data-reveal="wipe"]:not(.is-in) video { scale: 1; } }

/* Grid hairlines draw across from the left */
.sec[data-reveal="draw"]::before, .sec[data-reveal="draw"]::after { transform-origin: left center; transition: transform 1.3s cubic-bezier(.77, 0, .18, 1) .1s; }
html.js .sec[data-reveal="draw"]:not(.is-in)::before, html.js .sec[data-reveal="draw"]:not(.is-in)::after { transform: scaleX(0); }

/* White squares pop in at the joints, left to right */
[data-reveal="pop"] i { transition: transform .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0ms) + 250ms + var(--k, 0) * 70ms); }
[data-reveal="pop"] i:nth-child(2) { --k: 1; } [data-reveal="pop"] i:nth-child(3) { --k: 2; }
[data-reveal="pop"] i:nth-child(4) { --k: 3; } [data-reveal="pop"] i:nth-child(5) { --k: 4; }
html.js [data-reveal="pop"]:not(.is-in) i { transform: translate(-50%, -50%) scale(0); }

/* Menu: items appear one after another when the panel opens */
.menu-card, .menu-links a, .menu-mail { opacity: 0; translate: 0 12px; transition: opacity .3s ease, translate .4s ease; }
.bar.open .menu-card, .bar.open .menu-links a, .bar.open .menu-mail { opacity: 1; translate: 0 0; transition: opacity .45s ease var(--md), translate .55s cubic-bezier(.2, .7, .2, 1) var(--md); }
.menu-card:nth-child(1) { --md: .14s; } .menu-card:nth-child(2) { --md: .2s; }
.menu-links a:nth-child(1) { --md: .26s; } .menu-links a:nth-child(2) { --md: .31s; } .menu-links a:nth-child(3) { --md: .36s; }
.menu-mail { --md: .42s; }

/* Hover: videos lean in slightly */
@media (hover: hover) { .media:hover video { transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  .loader, .loader > *, .bar, [data-reveal], [data-reveal] i, .media video, .sec[data-reveal]::before, .sec[data-reveal]::after,
  .menu-card, .menu-links a, .menu-mail { transition: none !important; }
}


/* ===== Shared additions for all pages ===== */
/* Page curtain: wipes up over the page before moving to another page */
.curtain { position: fixed; inset: 0; z-index: 70; pointer-events: none; clip-path: inset(100% 0 0 0); transition: clip-path .6s cubic-bezier(.77, 0, .18, 1); background: linear-gradient(180deg, #333c46 0%, #6f7d86 45%, #b9c8c9 100%); }
.curtain.show { clip-path: inset(0 0 0 0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .curtain { transition: none; } }

/* "Read more" links from the home page sections */
.more-link { font: 400 clamp(10px, .85vw, 14px)/1.4 var(--mono); text-decoration: underline; text-underline-offset: 4px; }
.more-link:hover { opacity: .75; }
.project-process .more-link { display: inline-block; margin: 20px 24px 0; }
.about-copy .more-link { display: inline-block; margin-top: 16px; }

/* Still images inside media boxes behave like the videos (shutter reveal, hover lean) */
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; clip-path: inset(0 0 0 0); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1) var(--d, 0ms), scale 1.7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform 1.2s cubic-bezier(.2, .7, .2, 1); }
html.js [data-reveal="wipe"]:not(.is-in) img { clip-path: inset(100% 0 0 0); scale: 1.18; }
@media (hover: hover) { .media:hover > img { transform: scale(1.04); } }
.media.contain { background: #e9ebec; }
.media.contain > img { object-fit: contain; padding: 12%; }

/* ===== Inner pages: How we work, About ===== */
.box { position: relative; min-width: 0; }
.pad { padding: 2.3vw 1.85vw 2.1vw; display: flex; flex-direction: column; gap: 1vw; }
.under-bar { padding-top: calc(4.2vw + 2.6vw); }
.page-hero { --pt: var(--inset); }
.eyebrow, .small-label, .step-no { font: 400 clamp(10px, .82vw, 14px)/1.4 var(--mono); opacity: .7; }
.page-title { font: 400 clamp(56px, 8.6vw, 180px)/.84 var(--giant); margin: 0; }
.big-name { font: 400 clamp(40px, 4.6vw, 96px)/.86 var(--giant); margin: 0; }
.serif-title { font: 400 clamp(24px, 2.3vw, 44px)/1 var(--serif); text-transform: none; letter-spacing: 0; margin: 0; }
.prose { font: 400 clamp(14px, 1.12vw, 20px)/1.55 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: 0; max-width: 46ch; margin: 0; }
.at-bottom { margin-top: auto; }
.pad .cta-btn { align-self: flex-start; }

/* How we work: hero step index */
.step-index { list-style: none; margin: 0; padding: 0; width: 100%; }
.step-index a { display: flex; justify-content: space-between; gap: 12px; padding: .8vw 0; border-top: 1px solid var(--line); font-size: clamp(11px, .9vw, 16px); transition: padding .2s ease; }
.step-index li:last-child a { border-bottom: 1px solid var(--line); }
.step-index a:hover { padding-left: 6px; }

/* How we work: two steps per screen; the second row mirrors the first */
.step-pair .a-title { grid-column: 1; grid-row: 1; } .step-pair .a-desc { grid-column: 2; grid-row: 1; }
.step-pair .a-get { grid-column: 3; grid-row: 1; }   .step-pair .a-media { grid-column: 4; grid-row: 1; }
.step-pair .b-media { grid-column: 1; grid-row: 2; } .step-pair .b-title { grid-column: 2; grid-row: 2; }
.step-pair .b-desc { grid-column: 3; grid-row: 2; }  .step-pair .b-get { grid-column: 4; grid-row: 2; }
.step-name { font: 400 clamp(44px, 5vw, 100px)/.86 var(--giant); margin: auto 0 0; }
.get-text { font: 500 clamp(15px, 1.35vw, 24px)/1.3 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: -.005em; margin: 0; }
[id^="step-"] { scroll-margin-top: 90px; }

/* How we work: approval checkpoints */
.checkpoints .cp-head { grid-column: 1 / 5; grid-row: 1; justify-content: flex-end; }
.giant-line { font: 400 clamp(64px, 11vw, 220px)/.84 var(--giant); margin: 0; }
.checkpoints .cp1 { grid-column: 1 / 3; grid-row: 2; }
.checkpoints .cp2 { grid-column: 3 / 5; grid-row: 2; }

/* Single-row sections (headings, formats, tools) */
.sec.one-row { grid-template-rows: auto; height: auto; min-height: 0; }
.formats-head .f-title { grid-column: 1 / 3; }
.formats-head .f-note { grid-column: 3 / 5; justify-content: flex-end; }
.formats { min-height: 62svh; grid-template-rows: 1fr; }
.format { align-items: center; justify-content: center; text-align: center; gap: 1.3vw; }
.format .frame { width: min(80%, calc(34vh * var(--arw))); aspect-ratio: var(--ar); border: 1px solid rgba(255, 255, 255, .8); display: grid; place-items: center; font: 400 clamp(10px, .8vw, 14px)/1 var(--mono); }
.format-name { font: 400 clamp(26px, 2.4vw, 46px)/1 var(--giant); margin: 0; }

/* About: hero, statement, founder, services, work, tools */
.about-hero .ah-title { grid-column: 1 / 3; grid-row: 1; justify-content: flex-end; }
.about-hero .ah-v1 { grid-column: 3; grid-row: 1; } .about-hero .ah-i1 { grid-column: 4; grid-row: 1; }
.about-hero .ah-i2 { grid-column: 1; grid-row: 2; } .about-hero .ah-wide { grid-column: 2 / 4; grid-row: 2; }
.about-hero .ah-intro { grid-column: 4; grid-row: 2; }
.how-hero .hh-v1 { grid-column: 1; grid-row: 1; } .how-hero .hh-title { grid-column: 2 / 4; grid-row: 1; justify-content: flex-end; }
.how-hero .hh-v2 { grid-column: 4; grid-row: 1; } .how-hero .hh-intro { grid-column: 1; grid-row: 2; }
.how-hero .hh-wide { grid-column: 2 / 4; grid-row: 2; } .how-hero .hh-index { grid-column: 4; grid-row: 2; }
.statement .st-head { grid-column: 1 / 5; grid-row: 1; justify-content: flex-end; }
.statement .st-text { grid-column: 2 / 4; grid-row: 2; justify-content: center; align-items: center; text-align: center; }
.statement .st-text .prose { max-width: 40ch; }
.statement .st-v { grid-column: 4; grid-row: 2; }
.founder .f-portrait { grid-column: 1; grid-row: 1 / 3; }
.founder .f-name { grid-column: 2; grid-row: 1; }
.founder .f-bio { grid-column: 3 / 5; grid-row: 1; justify-content: flex-end; }
.founder .f-v1 { grid-column: 2; grid-row: 2; } .founder .f-train { grid-column: 3; grid-row: 2; } .founder .f-v2 { grid-column: 4; grid-row: 2; }
.services .svc { grid-row: 1; }
.services .svc-m { grid-row: 2; }
.work .w-cap { justify-content: space-between; }
.work .w1 { grid-column: 1; grid-row: 1; } .work .w1a { grid-column: 2; grid-row: 1; } .work .w1b { grid-column: 3; grid-row: 1; } .work .w1c { grid-column: 4; grid-row: 1; }
.work .w2a { grid-column: 1; grid-row: 2; } .work .w2 { grid-column: 2; grid-row: 2; } .work .w3a { grid-column: 3; grid-row: 2; } .work .w3 { grid-column: 4; grid-row: 2; }
.tools .t-head { grid-column: 1; }
.tools .t-list { grid-column: 2 / 5; justify-content: center; }
.tool-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tool-pills li { border: 1px solid var(--line); padding: 10px 14px; font: 400 clamp(12px, .95vw, 17px)/1 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; }
.ph.box > span { position: relative; z-index: 1; }

/* Inner pages on phones: one box per row, a line and two squares at every joint */
@media (max-width: 820px) {
  .sub-page .sec:not(.closing-intro):not(.closing-footer) { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .sub-page .sec.rows2::after, .sub-page .sec .marks.mid { display: none; }
  .sub-page .sec > .box ~ .box { border-top: 1px solid var(--line); }
  .sub-page .sec > .box ~ .box::after {
    content: ""; position: absolute; z-index: 31; pointer-events: none; top: -3.5px; left: -3.5px; right: -3.5px; height: 7px;
    background: linear-gradient(var(--white), var(--white)) left / 7px 7px no-repeat, linear-gradient(var(--white), var(--white)) right / 7px 7px no-repeat;
  }
  .sub-page .sec > .media, .sub-page .sec > .ph { aspect-ratio: 4 / 5; flex: none; overflow: visible; }
  .sub-page .pad { padding: 28px 20px 30px; gap: 12px; }
  .sub-page .under-bar { padding-top: 96px; }
  .page-title { font-size: 19vw; }
  .giant-line { font-size: 16vw; }
  .step-name { font-size: 15vw; }
  .step-pair .a-media { order: 1; } .step-pair .a-title { order: 2; } .step-pair .a-desc { order: 3; } .step-pair .a-get { order: 4; }
  .step-pair .b-media { order: 5; } .step-pair .b-title { order: 6; } .step-pair .b-desc { order: 7; } .step-pair .b-get { order: 8; }
  /* Steps are reordered on phones (picture first), so every box but the picture gets the joint line and squares */
  .sub-page .step-pair > .box { border-top: 1px solid var(--line); }
  .sub-page .step-pair > .box::after {
    content: ""; position: absolute; z-index: 31; pointer-events: none; top: -3.5px; left: -3.5px; right: -3.5px; height: 7px;
    background: linear-gradient(var(--white), var(--white)) left / 7px 7px no-repeat, linear-gradient(var(--white), var(--white)) right / 7px 7px no-repeat;
  }
  .sub-page .sec.step-pair > .box.a-media { border-top: 0; }
  .sub-page .sec.step-pair > .box.a-media::after { content: none; }
  /* About services: each description followed by its picture */
  .services > :nth-child(2) { order: 1; } .services > :nth-child(6) { order: 2; }
  .services > :nth-child(3) { order: 3; } .services > :nth-child(7) { order: 4; }
  .services > :nth-child(4) { order: 5; } .services > :nth-child(8) { order: 6; }
  .services > :nth-child(5) { order: 7; } .services > :nth-child(9) { order: 8; }
  /* About work: each caption followed by its pictures */
  .work .w1 { order: 1; } .work .w1a { order: 2; } .work .w1b { order: 3; } .work .w1c { order: 4; }
  .work .w2 { order: 5; } .work .w2a { order: 6; } .work .w3 { order: 7; } .work .w3a { order: 8; }
  .formats .format { padding-block: 36px; }
  .format .frame { width: min(60%, calc(36vh * var(--arw))); }
}

/* ===== Additions: menu with five links, packages, FAQ, Work page, Privacy page ===== */
.menu-links { gap: .8vw; padding: 2.8vw 0; }
.menu-links a { font-size: clamp(22px, 2vw, 38px); }
.menu-links a:nth-child(4) { --md: .41s; } .menu-links a:nth-child(5) { --md: .46s; }
.menu-mail { --md: .52s; }
.footer-brand span a { text-decoration: underline; text-underline-offset: 3px; }

/* Lists used in packages and case studies */
.made-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.made-list li { padding: .6vw 0; border-top: 1px solid var(--line); font: 400 clamp(13px, 1vw, 18px)/1.4 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: 0; }
.made-list li:last-child { border-bottom: 1px solid var(--line); }

/* Packages: heading box, then one box per package */
.packages { min-height: 70svh; }
.packages .pkg { gap: 1vw; }
.packages .pkg .made-list { margin-top: 1vw; }

/* FAQ: heading box, then a list that opens one answer at a time per click */
.faq .faq-head { grid-column: 1; }
.faq .faq-list { grid-column: 2 / 5; padding-block: 2.3vw 3vw; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 1.25vw 0; font: 500 clamp(16px, 1.35vw, 26px)/1.3 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: -.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 clamp(18px, 1.6vw, 28px)/1 var(--mono); transition: transform .3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { opacity: .8; }
.faq details p { padding: 0 0 1.4vw; max-width: 62ch; }
.faq details[open] p { animation: faq-in .4s ease; }
@keyframes faq-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .faq details[open] p { animation: none; } .faq summary::after { transition: none; } }

/* Work page: hero and case studies (row 1: about the project, row 2: the work) */
.work-hero .wh-title { grid-column: 1 / 3; grid-row: 1; justify-content: flex-end; }
.work-hero .wh-v1 { grid-column: 3; grid-row: 1; } .work-hero .wh-i1 { grid-column: 4; grid-row: 1; }
.work-hero .wh-intro { grid-column: 1; grid-row: 2; } .work-hero .wh-wide { grid-column: 2 / 4; grid-row: 2; }
.work-hero .wh-index { grid-column: 4; grid-row: 2; }
.case .c-head { grid-column: 1; grid-row: 1; }
.case .c-brief { grid-column: 2; grid-row: 1; }
.case .c-made { grid-column: 3; grid-row: 1; }
.case .c-r1 { grid-column: 4; grid-row: 1; }
.case .c-row2 { grid-row: 2; }
.case .span2 { grid-column: span 2; }
.case .c-head .big-name { margin-top: auto; }
[id^="case-"] { scroll-margin-top: 0; }

/* Privacy page */
.privacy .pv-head { grid-column: 1; }
.privacy .pv-body { grid-column: 2 / 5; gap: 2.2vw; padding-bottom: 4vw; }
.privacy .pv-body .serif-title { margin-bottom: .6vw; }
.privacy .pv-body .prose { max-width: 62ch; }

@media (max-width: 820px) {
  .menu-links { gap: 10px; padding: 26px 0; }
  .made-list li { padding: 9px 0; }
  .faq summary { padding: 16px 0; }
  .faq details p { padding-bottom: 18px; }
  .packages .pkg { gap: 12px; }
  .privacy .pv-body { gap: 26px; }
}

/* Loading frame: one shared size positions the box, lines and corner markers. */
.loader { --loader-box: max(120px, 10.5vw); }
.loader .cellbox { width:var(--loader-box);height:var(--loader-box);min-width:0;aspect-ratio:auto;transform:translate(-50%,-50%);border:0; }
.loader .vline[style*="44.8"] { left:calc(50% - var(--loader-box)/2) !important; }
.loader .vline[style*="55.2"] { left:calc(50% + var(--loader-box)/2) !important; }
.loader .hline[style*="44%"] { top:calc(50% - var(--loader-box)/2) !important; }
.loader .hline[style*="60.2"] { top:calc(50% + var(--loader-box)/2) !important; }
.loader .cellbox::before { inset:-3px; }
.loader-symbol { position:absolute;left:18%;top:18%;width:64%;height:64%;object-fit:contain; }

/* Draw the crossing lines and squares from the very same box edges. */
.loader > .vline,.loader > .hline { display:none !important; }
.loader .cellbox { overflow:visible; }
.loader .cellbox::before {
 content:"";position:absolute;inset:auto;left:0;right:0;top:50%;height:200vh;
 transform:translateY(-50%);background:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.loader .cellbox::after {
 content:"";position:absolute;inset:auto;top:0;bottom:0;left:50%;width:200vw;
 transform:translateX(-50%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);pointer-events:none;
}
.loader-joint { position:absolute;width:7px;height:7px;background:#fff;z-index:2;transform:translate(-50%,-50%); }
.loader-joint.tl { left:.5px;top:.5px; }
.loader-joint.tr { left:calc(100% - .5px);top:.5px; }
.loader-joint.bl { left:.5px;top:calc(100% - .5px); }
.loader-joint.br { left:calc(100% - .5px);top:calc(100% - .5px); }

/* Loader entrance: keep all frame geometry fixed while revealing it. */
@keyframes loader-logo-enter {
 from { opacity:0;transform:translateY(8px) scale(.88); }
 to { opacity:1;transform:translateY(0) scale(1); }
}
@keyframes loader-frame-enter { from { opacity:0; } to { opacity:1; } }
.loader-symbol { animation:loader-logo-enter .45s cubic-bezier(.2,.7,.25,1) both; }
.loader .cellbox::before,.loader .cellbox::after { animation:loader-frame-enter .3s ease-out both; }
.loader-joint { animation:loader-frame-enter .25s ease-out .06s both; }
.loader .lpill { animation:loader-frame-enter .3s ease-out both; }
@media(prefers-reduced-motion:reduce) {
 .loader-symbol,.loader .cellbox::before,.loader .cellbox::after,.loader-joint,.loader .lpill { animation:none; }
}

/* Explicit pseudo-element sizing keeps right/bottom line centres aligned to joints. */
.loader .cellbox::before,.loader .cellbox::after { box-sizing:border-box; }
@media(max-width:820px) {
 .loader { --loader-box:120px; }
 .loader .cellbox { width:var(--loader-box);height:var(--loader-box);padding:0; }
 .loader .loader-joint { display:block;width:7px;height:7px;margin:0; }
}

/* Final footer utilities: always the last visible row. */
.closing-footer > .footer-final { grid-column:1 / -1;grid-row:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;border-top:1px solid var(--line); }
/* Bottom strip sits on the page grid: © under the brand, Privacy under the invitation, Back to top under Email */
.footer-final > :nth-child(1) { grid-column:1; } .footer-final > :nth-child(2) { grid-column:2; } .footer-final > :nth-child(3) { grid-column:4; }
.footer-final > * { display:flex;align-items:center;justify-content:center;min-height:58px;padding:16px 10px;font:12px/1.4 var(--mono);text-align:center; }

.footer-brand h2 { width:100%; }
.footer-logo { display:block;width:170px;max-width:100%;height:auto; }
@media(max-width:820px) {
 .closing-footer { height:auto;overflow:visible; }
 .closing-footer > .footer-brand { min-height:180px; }
 .closing-footer .footer-brand h2 { display:block;min-height:64px; }
 .closing-footer .footer-logo { width:190px;height:auto;max-height:none;opacity:1;visibility:visible; }
 .closing-footer .footer-brand p,.closing-footer .footer-invitation p { font-size:17px;line-height:1.5; }
 .footer-email a,.footer-whatsapp a { font-size:20px; }
 .footer-invitation > span,.footer-email > span,.footer-whatsapp > span { font-size:13px; }
 .closing-footer > .footer-final { grid-column:1; }
 .footer-final > * { font-size:11px;min-height:64px;padding:14px 5px; }
 .closing-footer > .footer-final { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .footer-final > :nth-child(n) { grid-column:auto; }
 .closing-film video { object-fit:cover;width:100%;height:100%; }
 .closing-film { max-width:100%; }
}

/* Package prices */
.pkg-price { margin: 0; font: 500 clamp(18px, 1.6vw, 30px)/1.2 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: -.01em; }
.pkg-price strong { font-weight: 600; }
.pkg-price.muted { opacity: .6; font-size: clamp(15px, 1.15vw, 21px); }

/* Footer frame: squares at every joint, and a gap below the footer equal to the side gaps */
.closing-footer { margin-bottom: var(--inset); }
.closing-footer > .footer-final { position: relative; }
.closing-footer::after {
  content: ""; position: absolute; z-index: 31; pointer-events: none;
  top: auto; bottom: -3.5px; left: calc(var(--inset) - 3.5px); right: calc(var(--inset) - 3.5px); height: 7px;
  background:
    linear-gradient(var(--line), var(--line)) 50% 50% / calc(100% - 7px) 1px no-repeat,
    linear-gradient(var(--white), var(--white)) 0% 0 / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) 25% 0 / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) 50% 0 / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) 75% 0 / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) 100% 0 / 7px 7px no-repeat;
}
.closing-footer > .footer-final::before {
  content: ""; position: absolute; z-index: 31; pointer-events: none;
  top: -3.5px; left: -3.5px; right: -3.5px; height: 7px;
  background:
    linear-gradient(var(--white), var(--white)) 0% 0 / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) 25% 0 / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) 50% 0 / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) 75% 0 / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) 100% 0 / 7px 7px no-repeat;
}
@media (max-width: 820px) {
  /* Phones only have the two edge lines, so joints sit at the two ends */
  .closing-footer::after {
    background:
      linear-gradient(var(--line), var(--line)) 50% 50% / calc(100% - 7px) 1px no-repeat,
      linear-gradient(var(--white), var(--white)) 0% 0 / 7px 7px no-repeat,
      linear-gradient(var(--white), var(--white)) 100% 0 / 7px 7px no-repeat;
  }
  .closing-footer > .footer-final::before { display: none; }
}

/* Phones: nothing may widen the page, so the right grid line always stays on screen.
   clip (not hidden) keeps the sticky closing film working. */
html, body { overflow-x: clip; }
@media (max-width: 820px) {
  /* The slow zoom-settle on still images would push them past the screen edge on phones */
  html.js [data-reveal="wipe"]:not(.is-in) img { scale: 1; }
}

/* Phones: big two-word names sit on one line (the break only suits the narrow desktop column) */
@media (max-width: 820px) { .big-name br { display: none; } }

/* Social links inside a case study heading box */
.case-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5vw 1.1vw; margin-top: .4vw; }
.case-links a { font: 500 clamp(13px, 1vw, 18px)/1.3 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; text-decoration: underline; text-underline-offset: 4px; }
.case-links a:hover { opacity: .75; }
@media (max-width: 820px) { .case-links { gap: 8px 16px; margin-top: 6px; } }

/* ===== Clipping page, and a third service card in the menu ===== */
.menu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu-card-title { font-size: clamp(15px, 1.45vw, 28px); }
.menu-card:nth-child(3) { --md: .26s; }

/* Hero: a 9:16 window drifts across the wide video, everything outside it dimmed */
.crop-demo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.crop-window {
  position: absolute; top: 8%; height: 84%; aspect-ratio: 9 / 16; left: 50%; translate: -50% 0;
  border: 1px solid var(--white); box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .45);
  background:
    linear-gradient(var(--white), var(--white)) left top / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) right top / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) left bottom / 7px 7px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 7px 7px no-repeat;
  animation: crop-pan 9s ease-in-out infinite alternate;
}
.crop-window::before { content: "9:16"; position: absolute; top: 12px; left: 50%; translate: -50% 0; padding: 3px 7px; border-radius: 3px; background: rgba(0, 0, 0, .55); font: 400 clamp(10px, .75vw, 13px)/1 var(--mono); }
@keyframes crop-pan { from { left: 28%; } to { left: 72%; } }

/* Step graphics: long-video timeline and three vertical tiles */
.clip-art { display: grid; place-items: center; }
.timeline { width: 84%; display: grid; gap: 1.2vw; }
.tl-track { position: relative; height: clamp(54px, 5vw, 96px); border-block: 1px solid var(--line); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 8px); }
.tl-track i { position: absolute; top: 18%; bottom: 18%; left: var(--s); width: var(--w); background: var(--white); }
.tl-track b { position: absolute; bottom: calc(100% + 6px); left: 0; font: 400 clamp(9px, .7vw, 12px)/1 var(--mono); }
.tl-head { position: absolute; top: -6px; bottom: -6px; left: 0; width: 1px; background: var(--white); animation: tl-play 8s linear infinite; }
.tl-scale { display: flex; justify-content: space-between; gap: 8px; font: 400 clamp(9px, .7vw, 12px)/1.3 var(--mono); opacity: .7; }
@keyframes tl-play { to { left: 100%; } }
.clip-tiles { display: flex; justify-content: center; gap: 4%; width: 100%; margin: 0; }
.clip-tiles figure { margin: 0; width: 26%; display: grid; gap: 8px; }
.clip-tiles .tile { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgba(255, 255, 255, .8); }
.clip-tiles figcaption { text-align: center; font: 400 clamp(9px, .7vw, 12px)/1 var(--mono); opacity: .8; }

/* Step 03: a hook title sits on top of the clip */
.hook-demo { position: absolute; z-index: 1; top: 12%; left: 10%; right: 10%; margin: 0; padding: .55em .7em; border-radius: 4px; background: var(--white); color: var(--black); text-align: center; font: 600 clamp(13px, 1.2vw, 21px)/1.25 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: -.01em; animation: hook-pop 3.6s ease-in-out infinite; }
@keyframes hook-pop { 0%, 6% { opacity: 0; scale: .92; } 12%, 88% { opacity: 1; scale: 1; } 94%, 100% { opacity: 0; scale: .96; } }

/* Step 05: captions light up word by word */
.cap-demo { position: absolute; z-index: 1; left: 8%; right: 8%; bottom: 16%; margin: 0; text-align: center; font: 600 clamp(13px, 1.25vw, 22px)/1.35 "Geist", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.cap-demo b { padding: 0 .18em; border-radius: 3px; animation: cap-word 3.6s linear infinite; animation-delay: calc(var(--i) * .6s - 3.6s); }
@keyframes cap-word { 0%, 16.6% { background: var(--white); color: var(--black); text-shadow: none; } 16.7%, 100% { background: transparent; color: var(--white); } }

/* Who it's for: four equal boxes */
.sec.clip-for { min-height: 38svh; grid-template-rows: 1fr; }
.clip-for .format-name { margin-top: auto; }

@media (max-width: 820px) {
  .menu-card { padding-inline: 6px; }
  .timeline { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .crop-window, .tl-head, .cap-demo b, .hook-demo { animation: none; }
}

/* Visible shot descriptions on phones; hover captions on desktop. */
@media (max-width: 820px) {
 .media > .vlabel, .closing-film > .film-caption { opacity:1; visibility:visible; font-size:12px; line-height:1.4; pointer-events:none; }
}

/* AI photoshoots: four portrait cells, then two landscape cells. */
.product-photoshoots { margin:0 var(--inset); scroll-margin-top:90px; }
.photoshoot-intro { padding:38px 24px; border-top:1px solid var(--line); }
.photoshoot-intro h2 { margin:0 0 16px; font:400 clamp(32px,4vw,64px)/1 var(--giant); }
.photoshoot-intro p { max-width:620px; font:16px/1.5 "Geist",sans-serif; text-transform:none; }
.photoshoot-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); }
.photoshoot-grid .photo-card { position:relative;min-width:0;aspect-ratio:9/16;border-top:1px solid var(--line); }
.photoshoot-grid .photo-landscape { grid-column:span 2;aspect-ratio:2720/1536; }
.photoshoot-grid .photo-card img { display:block;width:100%;height:100%;object-fit:cover; }
.photoshoot-grid .photo-card::after { content:"";position:absolute;z-index:31;pointer-events:none;left:0;right:0;top:0;bottom:0;background:linear-gradient(white,white) left top/7px 7px no-repeat,linear-gradient(white,white) right top/7px 7px no-repeat,linear-gradient(white,white) left bottom/7px 7px no-repeat,linear-gradient(white,white) right bottom/7px 7px no-repeat; }
@media(max-width:820px) { .photoshoot-grid { grid-template-columns:minmax(0,1fr); } .photoshoot-grid .photo-landscape { grid-column:1; } .photoshoot-intro { padding:32px 20px; } }

/* Photos fill the six free cells; the growing film covers them. */
/* Keep intersection markers outside the media clipping bounds. */
.closing-sticky { isolation:isolate; overflow:visible; }
.closing-photos { position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));z-index:0; }
.closing-photo { min-height:0;min-width:0;overflow:hidden; }
.closing-photo:nth-child(1) { grid-column:1;grid-row:1; }
.closing-photo:nth-child(2) { grid-column:4;grid-row:1; }
.closing-photo:nth-child(3) { grid-column:1;grid-row:2; }
.closing-photo:nth-child(4) { grid-column:2;grid-row:2; }
.closing-photo:nth-child(5) { grid-column:3;grid-row:2; }
.closing-photo:nth-child(6) { grid-column:4;grid-row:2; }
.closing-photo img { width:100%;height:100%;display:block;object-fit:cover; }
.closing-film { z-index:1; }
@media(max-width:820px) {
 .closing-photos { top:50%;grid-template-columns:repeat(3,minmax(0,1fr)); }
 .closing-photos .closing-photo { grid-column:auto;grid-row:auto; }
}

/* Show the complete MSL screen compositions at every viewport size. */
#case-msl .media { background:#17191a; }
#case-msl .media > img,
#case-msl .media > video { object-fit:contain;object-position:50% 50%;transform:none;scale:1; }
#case-msl .media:hover > img,
#case-msl .media:hover > video { transform:none;scale:1; }

/* Shared gallery intersections, drawn once per row rather than per image. */
.product-photoshoots,.photoshoot-grid { position:relative;overflow:visible; }
.photoshoot-grid .photo-card::after { content:none; }
.gallery-joints { position:absolute;left:0;right:0;height:1px;background:var(--line);z-index:31;pointer-events:none; }
.gallery-joints i { position:absolute;top:0;width:7px;height:7px;background:#fff;transform:translate(-50%,-50%); }
@media(min-width:821px) {
 #case-msl { height:auto;min-height:0;grid-template-rows:minmax(340px,50svh) calc((100vw - 2 * var(--inset)) / 4 * .75); }
 #case-msl::after { top:var(--msl-row,50%); }
 #case-msl > .marks.mid { top:var(--msl-row,50%) !important; }
}
#case-msl .media > img,#case-msl .media > video { object-position:center top; }
@media(max-width:820px) {
 #case-msl > .media { aspect-ratio:4/3; }
}

@media(min-width:821px) and (hover:hover) {
 .media.portrait-video:hover > video { object-fit:contain;object-position:center;transform:none;scale:1; }
 .media.portrait-video:hover { background:#17191a; }
}
@media(max-width:820px) {
 .sec .media.video-proportions { aspect-ratio:var(--video-ratio);height:auto;min-height:0;flex:none; }
 .sec .media.video-proportions > video { object-fit:contain;object-position:center;transform:none;scale:1; }
}

/* Landscape films occupy two desktop columns; portrait films occupy one. */
@media(min-width:821px) {
 .s01 .h-v4 { grid-column:2 / 4;grid-row:1; }
 .s01 .h-v2 { grid-column:4;grid-row:1; }
 .expanded-video-row > .landscape-slot { grid-column:span 2; }
 .expanded-video-row > .portrait-slot { grid-column:span 1; }
 .testimonials-only { height:50svh;min-height:300px;grid-template-rows:1fr; }
}
@media(max-width:820px) {
 .testimonials-only { height:auto; }
 .expanded-video-row > .portrait-slot { aspect-ratio:9/16; }
}

/* MSL campaign: uncropped product images and an accessible film player. */
.msl-summary { align-items:stretch; }
.msl-summary .box { min-height:300px; }
.msl-summary .big-name { margin:24px 0; }
.msl-summary .msl-campaign-film { grid-column:span 2;aspect-ratio:16/9; }
.msl-campaign-film video { object-fit:contain!important;position:absolute; }
.msl-image-row { background:#17191a; }
.msl-image-row .msl-photo { aspect-ratio:1/1;min-width:0; }
.msl-image-row .msl-photo:nth-child(2) { grid-column:span 2;aspect-ratio:2/1; }
.msl-photo img { width:100%;height:100%;object-fit:contain;display:block; }
@media(max-width:820px) {
 .msl-summary,.msl-image-row { display:flex;flex-direction:column; }
 .msl-summary .msl-campaign-film { width:100%;flex:none;aspect-ratio:16/9; }
 .msl-image-row .msl-photo,.msl-image-row .msl-photo:nth-child(2) { aspect-ratio:auto; }
 .msl-photo img { height:auto;max-height:85svh;object-fit:contain; }
}
:focus-visible { outline:2px solid white;outline-offset:4px; }

#case-msl.msl-summary { height:auto;min-height:0;grid-template-rows:auto; }
.msl-summary .msl-campaign-film { min-width:0;width:100%; }
.msl-image-row .msl-photo { background:#17191a; }

/* ===== Menu: one image-led panel on every page =====
   Three rows of three matching cards: the services, then the pages, then FAQ, Clients and a black box.
   Same layout on every screen size. The panel grows smoothly from the closed bar, never shrinks,
   and scales with the screen like the rest of the site. White squares sit wherever the menu's lines cross. */
.bar {
  --menu-top: calc(var(--inset) + .05vw);
  --menu-header: max(46px, 4.2vw);
  /* Never narrower than the closed bar; wide enough for the cards, short enough to fit the screen's height */
  --menu-w: max(31.3vw, min(clamp(640px, 46vw, 1180px), calc(100% - 32px), calc((100vh - 390px) * 1.62)));
  --menu-line: rgba(255, 255, 255, 0.2);
  top: var(--menu-top);
  transition: width .45s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1) .35s, opacity .5s ease .35s;
}
.bar.open { width: var(--menu-w); }
.bar-row { height: var(--menu-header); }
.bar-link { white-space: nowrap; }
/* A little room above the first line so its squares are not clipped */
.bar-panel { padding: 4px clamp(16px, 1.4vw, 32px) 0; }
.bar.open .bar-panel {
  max-height: calc(100dvh - var(--menu-top) - var(--menu-header) - 16px - env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.bar-panel > * + *, .bar-panel > :first-child { border-top: 1px solid var(--menu-line); }

/* Cards: the dividers run the full row height, so they meet the lines above and below */
.menu-cards { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
/* Outer side lines close every card into a full box, so the end squares sit on real corners */
.menu-cards { box-shadow: inset 1px 0 var(--menu-line), inset -1px 0 var(--menu-line); }
.menu-card { min-width: 0; gap: clamp(10px, .85vw, 20px); padding: clamp(16px, 1.5vw, 36px) clamp(8px, .75vw, 18px); }
.menu-card + .menu-card { border-left: 0; box-shadow: inset 1px 0 var(--menu-line); }
.menu-card img { aspect-ratio: 5 / 3; }
.menu-card-title { font-size: clamp(18px, 1.5vw, 40px); line-height: 1.12; text-wrap: balance; }
.menu-card-title em { font-size: .78em; line-height: 1.25; margin-top: .2em; }
.menu-card-blank i { display: block; width: 100%; aspect-ratio: 5 / 3; background: var(--black); }

/* The page you are on */
.menu-card[aria-current="page"] img { outline: 1px solid var(--white); outline-offset: 3px; }
.menu-card[aria-current="page"] .menu-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.menu-mail { position: relative; font-size: clamp(13px, .95vw, 22px); padding: clamp(16px, 1.4vw, 32px) 0; }

/* Square joints, matching the page grid */
.menu-joints { position: absolute; z-index: 2; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; }
.menu-joints i { position: absolute; top: .5px; width: 7px; height: 7px; background: var(--white); opacity: 0; transform: translate(-50%, -50%) scale(.3); transition: opacity .25s ease, transform .3s ease; }
.bar.open .menu-joints i { opacity: 1; transform: translate(-50%, -50%); transition: opacity .3s ease var(--jd), transform .45s cubic-bezier(.2, .7, .2, 1) var(--jd); }
.menu-cards:nth-child(1) .menu-joints { --jd: .1s; }
.menu-cards:nth-child(2) .menu-joints { --jd: .18s; }
.menu-cards:nth-child(3) .menu-joints { --jd: .26s; }
.menu-mail .menu-joints { --jd: 0s; }

/* Cards fade in place (so their dividers stay on the joints); their contents rise, row by row */
.menu-card { translate: none; }
.menu-card > * { translate: 0 12px; transition: translate .4s ease; }
.bar.open .menu-card > * { translate: 0 0; transition: translate .55s cubic-bezier(.2, .7, .2, 1) var(--md); }
.menu-cards:nth-child(2) .menu-card:nth-child(1) { --md: .22s; }
.menu-cards:nth-child(2) .menu-card:nth-child(2) { --md: .28s; }
.menu-cards:nth-child(2) .menu-card:nth-child(3) { --md: .34s; }
.menu-cards:nth-child(3) .menu-card:nth-child(1) { --md: .3s; }
.menu-cards:nth-child(3) .menu-card:nth-child(2) { --md: .36s; }
.menu-cards:nth-child(3) .menu-card:nth-child(3) { --md: .42s; }
.menu-mail { --md: .5s; }
@media (prefers-reduced-motion: reduce) {
  .menu-joints i, .menu-card > * { transition: none !important; }
}

@media (max-width: 820px) {
  .bar { --menu-top: calc(var(--inset) + 12px + env(safe-area-inset-top, 0px)); --menu-header: 56px; --menu-w: calc(100% - 24px); }
  .bar-row { padding-inline: 14px; }
  .bar-end { gap: 8px; }
  .bar-panel { padding-inline: 12px; }
  .menu-card { padding: 14px 6px; gap: 8px; }
  .menu-card-title { font-size: clamp(15px, 3.9vw, 22px); }
  .menu-card-title em { font-size: clamp(11.5px, 3vw, 16px); }
  .menu-mail { font-size: 14px; padding: 16px 0; }
}
@media (max-width: 360px) {
  .bar-row .logo { font-size: 26px; }
  .bar-row { padding-inline: 10px; }
  .bar-end { gap: 4px; }
  .menu-card { padding-inline: 4px; }
}

/* Vantis rows follow the grid: markers always sit on real boundaries. */
.sec.vantis-row { height:auto; min-height:0; grid-template-rows:auto; }
.vantis-row > .box { min-width:0; grid-row:auto; }
.vantis-summary > .pad { padding:36px 28px; min-height:380px; }
.vantis-summary .big-name { font-size:clamp(44px,5vw,90px); overflow-wrap:anywhere; }
.vantis-summary .made-list { margin-top:20px; }
.vantis-summary .case-links { flex-wrap:wrap; }
.vantis-row > .media { overflow:visible; background:#efefeb; }
.vantis-row > .media > img { inset:24px; width:calc(100% - 48px); height:calc(100% - 48px); padding:0; object-fit:contain; transform:none; scale:1; }
.vantis-summary .c-r1 { background:#fff; }
.vantis-gallery .vantis-website { grid-column:span 2; }
.vantis-gallery > .media { min-height:480px; }
.vantis-details > .media { aspect-ratio:3/4; }
.vantis-row .vlabel { left:24px; bottom:8px; font-size:9px; }
@media(max-width:820px) {
 .vantis-summary > .pad { min-height:0; padding:32px 24px; }
 .sub-page .vantis-summary > .media { aspect-ratio:2/1; }
 .sub-page .vantis-gallery > .media { min-height:0; aspect-ratio:3/4; }
 .sub-page .vantis-gallery > .vantis-website { aspect-ratio:1440/1080; }
 .sub-page .vantis-details > .media { aspect-ratio:3/4; }
}

/* Keep the project anchor clear of the fixed navigation. */
#case-vantis { scroll-margin-top:100px; }
@media(min-width:821px) {
 .sec.vantis-summary { height:auto; min-height:0; grid-template-rows:minmax(420px,auto); align-items:stretch; }
 .vantis-summary > .c-r1 { height:auto; min-height:0; aspect-ratio:auto; align-self:stretch; }
 .sec.vantis-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto; }
 .vantis-gallery > .vantis-website { grid-column:1 / 3; }
 .vantis-gallery > .media { height:auto; min-height:0; aspect-ratio:auto; }
 .vantis-gallery > .vantis-website { aspect-ratio:1440 / 1000; }
}

/* Catalogue pair shares one box; lower frames follow the artwork height. */
.vantis-gallery > .vantis-stack { grid-column:3 / 5; display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); min-height:0; background:#efefeb; }
.vantis-stack > .media { min-height:0; background:transparent; }
.vantis-stack > .media > img { inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); padding:0; object-fit:contain; transform:none; scale:1; }
.vantis-stack > .media + .media { border-top:1px solid var(--line); }
.sec.vantis-details > .media { aspect-ratio:auto; height:auto; min-height:0; padding:24px; }
.sec.vantis-details > .media > img { position:relative; inset:auto; display:block; width:100%; height:auto; padding:0; object-fit:contain; }
@media(max-width:820px) {
 .vantis-gallery > .vantis-stack { display:flex; flex-direction:column; }
 .vantis-stack > .media { padding:18px; }
 .vantis-stack > .media > img { position:relative; inset:auto; width:100%; height:auto; }
 .sub-page .sec.vantis-details > .media { aspect-ratio:auto; padding:18px; }
}

/* Each catalogue pair occupies its own column. Keep grid strokes outside artwork. */
.vantis-gallery > .vantis-stack { grid-column:3; }
.vantis-gallery > .vantis-stack-extra { grid-column:4; }
.vantis-gallery > .box { position:relative; z-index:31; }
.vantis-gallery > .vantis-stack { border-left:1px solid var(--line); }
.vantis-gallery > .marks { z-index:32; }
.vantis-gallery > .vantis-website { border-right:1px solid var(--line); }

/* MONDO uses content-sized rows and unobstructed artwork. */
.sec.mondo-summary,.sec.mondo-gallery { height:auto; min-height:0; grid-template-rows:auto; }
#case-mondo { scroll-margin-top:100px; }
.mondo-summary > .pad { min-height:360px; padding:36px 28px; }
.mondo-summary > .media { background:#efefeb; }
.mondo-summary > .media > img { padding:24px; object-fit:contain; transform:none; scale:1; }
.mondo-gallery > .media { height:auto; min-height:0; padding:24px; background:#efefeb; overflow:visible; }
.mondo-gallery > .media > img { position:relative; inset:auto; width:100%; height:auto; padding:0; object-fit:contain; transform:none; scale:1; }
/* Junction squares stay in the gutter between each stacked pair. */
.vantis-stack { position:relative; }
.vantis-stack::before,.vantis-stack::after { content:""; position:absolute; top:50%; width:7px; height:7px; background:#fff; transform:translate(-50%,-50%); z-index:33; pointer-events:none; }
.vantis-stack::before { left:0; }
.vantis-stack::after { left:100%; }
@media(max-width:820px) {
 .mondo-summary > .pad { min-height:0; padding:32px 24px; }
 .sub-page .mondo-gallery > .media { aspect-ratio:auto; padding:18px; }
}

/* Clear enquiry destination within the existing menu grid. */
.menu-start-art { display:grid; place-items:center; width:100%; aspect-ratio:5/3; background:#101213; color:#fff; font:400 clamp(32px,4vw,64px)/1 Arial,sans-serif; }
.menu-start:hover .menu-start-art { background:#fff; color:#111; }
.menu-card:focus-visible { outline:2px solid white; outline-offset:-4px; }
.portfolio-lightbox { border:1px solid #777; padding:48px 16px 16px; background:#181a1b; color:white; max-width:94vw; max-height:94dvh; }
.portfolio-lightbox::backdrop { background:rgba(0,0,0,.85); }
.portfolio-lightbox img { display:block; max-width:88vw; max-height:78dvh; object-fit:contain; }
.portfolio-lightbox button { position:absolute; right:12px; top:8px; min-width:44px; min-height:36px; background:#fff; border:0; color:#111; cursor:pointer; }
.media > img[data-expand] { cursor:zoom-in; }

/* Services: readable descriptions and real row boundaries. */
.sec.services-clear { height:auto; min-height:0; grid-template-rows:auto auto; scroll-margin-top:100px; }
.services-clear .svc { padding:32px 26px; gap:20px; }
.services-clear .svc .serif-title { font-size:clamp(24px,2.2vw,38px); line-height:1.12; }
.services-clear .svc .more-link { margin-top:auto; }
.services-clear .svc-m { aspect-ratio:4/3; border-top:1px solid var(--line); overflow:visible; }
.services-clear .svc-m::before,.services-clear .svc-m::after { content:""; position:absolute; top:0; width:7px; height:7px; background:white; transform:translate(-50%,-50%); z-index:31; }
.services-clear .svc-m::before { left:0; }.services-clear .svc-m::after { left:100%; }
.services-clear .svc-m:nth-child(7),.services-clear .svc-m:nth-child(8) { background:#efefeb; }
.services-clear .svc-m:nth-child(7) img,.services-clear .svc-m:nth-child(8) img { object-fit:contain; padding:20px; }
.services-package-note { padding:24px; text-align:center; font-size:14px; text-transform:none; border-bottom:1px solid var(--line); }
@media(max-width:820px) {
 .services-clear > .svc:nth-child(1) { order:0; }.services-clear > .svc-m:nth-child(5) { order:1; }
 .services-clear > .svc:nth-child(2) { order:2; }.services-clear > .svc-m:nth-child(6) { order:3; }
 .services-clear > .svc:nth-child(3) { order:4; }.services-clear > .svc-m:nth-child(7) { order:5; }
 .services-clear > .svc:nth-child(4) { order:6; }.services-clear > .svc-m:nth-child(8) { order:7; }
 .sub-page .services-clear > .svc-m { aspect-ratio:4/3; }
}