/* AEVYX Motion (21 Oct 2026 redesign): a cinematic, scroll driven page. Anton for display, Instrument Sans for text,
   the system mono for HUD labels. No serif, no italic. Previous version: studio.before-motion-redesign.css.bak */
@font-face { font-family: Anton; src: url(/motion/fonts/anton.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/motion/fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Anton Fallback"; src: local("Impact"), local("Arial Narrow Bold"), local("Arial"); size-adjust: 92%; }

:root {
  --ink: #0a0a0a;
  --ink-2: #141414;
  --ink-3: #1e1e1e;
  --bone: #ecebe6;
  --bone-2: #dddcd5;
  --text: #f2f1ec;
  --text-2: #b3b2ac;
  --text-3: #85847f;
  --line: rgba(242, 241, 236, .14);
  --line-strong: rgba(242, 241, 236, .3);
  --rec: #ff3b30;
  --hot: #ff4d6d;
  --blue: #3d5cff;
  --green: #00c26e;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --display: Anton, "Anton Fallback", Impact, "Arial Narrow", sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --jtxt: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --jbig: "Arial Black", "Helvetica Neue", Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
  --gut: 16px;
  --max: 1360px;
  color-scheme: dark;
}
@media (min-width: 640px) { :root { --gut: 28px; } }
@media (min-width: 1024px) { :root { --gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ic { width: 1.2em; height: 1.2em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; top: 16px; left: 16px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--text); color: var(--ink); font-weight: 600; transform: translateY(-200%); transition: transform .4s var(--ease); }
.skip:focus { transform: none; }
.mono { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.light { background: var(--bone); color: var(--ink); color-scheme: light; }
.light .mono { color: #6d6c66; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--text); color: var(--ink); font: 600 15px/1.2 var(--sans); cursor: pointer; white-space: nowrap; transition: transform .5s var(--ease), background-color .3s, color .3s; -webkit-tap-highlight-color: transparent; }
.btn .ic { width: 18px; height: 18px; stroke-width: 2; transition: transform .5s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--line:hover { background: var(--ink); color: var(--bone); box-shadow: none; }
.btn--dark { background: var(--ink); color: var(--bone); }
.btn--dark:hover { background: #262626; }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.btn--ghost { background: var(--ink-3); color: var(--text); }
.link { display: inline-flex; align-items: center; gap: 6px; padding-block: 10px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link .ic { width: 16px; height: 16px; }

/* AEVYX site menu (as on the other pages) */
.jn { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 4vw; background: var(--ink); transition: box-shadow .4s var(--ease); }
.scrolled .jn { box-shadow: 0 1px 0 var(--line); }
.jn a { font: 800 11.5px/1 var(--jtxt); letter-spacing: .1em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.jn .jb img { display: block; width: 44px; height: 44px; border-radius: 10px; }
.jn .nl { flex: 1; display: flex; justify-content: center; gap: clamp(14px, 2.2vw, 32px); }
.jn .nl a:hover, .jn .nl a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.jn .nd { border: 1.5px solid var(--text); border-radius: 10px; padding: 0 14px; transition: background-color .25s, color .25s; }
.jn .nd:hover { background: var(--text); color: var(--ink); }
.nvb { display: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid #2a2a2a; border-radius: 10px; background: var(--ink); cursor: pointer; place-items: center; padding: 0; }
.nvb i { position: relative; display: block; width: 15px; height: 1.5px; background: var(--text); transition: background-color .3s; }
.nvb i::before, .nvb i::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background: var(--text); transition: transform .7s var(--ease); }
.nvb i::before { transform: translateY(-5px); }
.nvb i::after { transform: translateY(5px); }
body.nvopen .nvb i { background-color: transparent; }
body.nvopen .nvb i::before { transform: rotate(45deg); }
body.nvopen .nvb i::after { transform: rotate(-45deg); }
.nvm { display: none; }
@media (min-width: 901px) { .jn { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 16px; } .jn .jb { justify-self: start; } .jn .nl { justify-self: center; } .jn .nd { justify-self: end; } }
@media (max-width: 900px) {
  .jn .nl, .jn .nd { display: none; } .nvb { display: grid; }
  .nvm { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 58; padding: 78px 6vw 30px; background: var(--ink); overflow: auto; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
  .nvm a { padding: 14px 0; border-bottom: 1px solid #2a2a2a; font: 400 clamp(30px, 9vw, 46px)/1 var(--display); text-transform: uppercase; opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .nvm a.go { margin-top: 24px; padding: 16px; border: 1.5px solid var(--text); border-radius: 10px; font: 800 12.5px/1 var(--jtxt); letter-spacing: .1em; text-align: center; }
  body.nvopen .nvm { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }
  body.nvopen .nvm a { opacity: 1; transform: none; }
}
.jn .nl a.nv-new, .nvm a.nv-new { color: var(--hot) !important; }
.jn .nl a.nv-new::after, .nvm a.nv-new::after { content: 'new'; display: inline-block; margin-left: 6px; padding: 3px 6px 2px; border-radius: 5px; background: var(--hot); color: #fff; font: 800 8.5px/1 var(--jtxt); letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }
.nvm a.nv-new::after { font-size: 11px; padding: 5px 8px 4px; border-radius: 6px; position: relative; top: -.25em; }

/* film finish: grain, exposure flash, a running timecode */
.grain { position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .075; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; will-change: transform; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(-2%, 6%); } }
.flash { position: fixed; inset: 0; z-index: 79; pointer-events: none; background: #fffdf6; opacity: 0; }
.flash.on { animation: flash .42s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: .92; } 100% { opacity: 0; } }
.tc { position: fixed; right: 18px; bottom: 16px; z-index: 50; display: none; align-items: center; gap: 8px; color: #fff; mix-blend-mode: difference; font: 500 11px/1 var(--mono); letter-spacing: .14em; pointer-events: none; opacity: 0; transition: opacity .5s; }
.tc i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: rec 1.2s steps(1) infinite; }
.tc.on { opacity: .8; }
@media (min-width: 1024px) { .tc { display: flex; } }
@keyframes rec { 50% { opacity: .15; } }

/* reveal on enter */
.js .rise { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }

/* ── 01 hero ── */
.hero { position: relative; height: 240vh; background: var(--bone); color: var(--ink); }
.hero__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bone); }
.hero__film { position: absolute; inset: 0; z-index: 1; background: #000; clip-path: inset(50% 50% 50% 50% round 999px); will-change: clip-path; }
.no-js .hero__film, html:not(.js) .hero__film { display: none; }
.hero__vid { width: 100%; height: 100%; object-fit: contain; background: #000; }
.hero__cap { position: absolute; left: var(--gut); right: var(--gut); bottom: 64px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; color: #fff; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.hero__cap b { font: 400 clamp(34px, 6vw, 84px)/.9 var(--display); letter-spacing: 0; flex-basis: 100%; }
.hero.full .hero__cap { opacity: 1; transform: none; }
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 76px var(--gut) 64px; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; }
.status { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(16px, 3vh, 32px); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #55544f; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0, 194, 110, .18); }
.hero__title { font: 400 min(15.2vw, 25vh)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); }
.hl { display: block; white-space: nowrap; will-change: transform, opacity; }
.hl--2 { display: flex; align-items: center; gap: .14em; }
.pill { display: inline-block; flex: none; width: 2.05em; height: .74em; border-radius: 999px; background: #111 center / cover no-repeat; background-image: url(/motion/work/knot-poster.jpg); transform: translateY(-.02em); }
.js .pill { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(10, 10, 10, .15); }
.hero__foot { display: grid; gap: 22px; margin-top: clamp(20px, 4vh, 44px); max-width: 1100px; }
.hero__sub { max-width: 34ch; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.45; color: #3b3a36; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__acts .btn:first-child { background: var(--ink); color: var(--bone); }
@media (min-width: 900px) { .hero__foot { grid-template-columns: 1fr auto; align-items: end; } }
.hero__hint { position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%); font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; opacity: .7; }
.hero__hint::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: currentColor; transform-origin: top; animation: hint 1.8s var(--ease-io) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* camcorder HUD: four corner labels and viewfinder brackets; difference blend keeps them legible on bone and on film */
.hud { position: absolute; inset: 64px 14px 14px; z-index: 3; pointer-events: none; color: #fff; mix-blend-mode: difference; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hud__c { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; opacity: .85; }
.hud__tl { top: 0; left: 0; } .hud__tr { top: 0; right: 0; } .hud__bl { bottom: 0; left: 0; } .hud__br { bottom: 0; right: 0; }
.rec { width: 7px; height: 7px; border-radius: 50%; background: #00c4cf; animation: rec 1.2s steps(1) infinite; } /* difference blend: cyan reads as red on bone */
.hud__k { position: absolute; width: 18px; height: 18px; border: 0 solid currentColor; opacity: .7; }
.hud__k--tl { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .hud__k--tr { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.hud__k--bl { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; } .hud__k--br { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }
@media (max-width: 639px) { .hud { inset: 62px 8px 8px; font-size: 9.5px; letter-spacing: .1em; } .hud__c { padding: 8px 9px; } .hud__bl { display: none; } .hero__hint { display: none; } }

/* ── 02 mosaic (22 Oct, mosaic fix) ──────────────────────────────────────────────
   Was: cells of arbitrary size from four grid-template-areas layouts, every clip letterboxed
   with object-fit:contain, and the headline absolutely positioned across the whole grid behind
   a soft radial scrim. That gave uneven tiles, wide black bars that read as empty cells, and a
   headline sitting on top of tile content (the 'green glow' was the Blinkit clip showing through
   the scrim). Now: one even grid of identical SQUARE modules, every clip shown WHOLE inside its
   module with object-fit:contain, and the headline in its own full-width band (its own grid row)
   that no tile can ever enter.

   Why square + contain: the films are a genuine mix of 1:1, 9:16, 4:5 and 16:9 masters. Cropping
   them to a common shape destroys them (captions cut mid-word, phone UI sliced), so nothing is
   cropped — each clip is letterboxed inside its module. A square module is the one shape that
   treats portrait and landscape masters symmetrically, so the raggedness is even rather than
   lopsided. The letterbox is the page's own black, and each module carries a faint hairline, so a
   narrow 9:16 clip reads as a film centred in a deliberate frame instead of a half-empty cell. */
.mosaic { position: relative; padding: 66px 10px 10px; background: var(--ink); }
.mosaic__grid {
  --cols: 6; --gap: 10px; --ar: 1 / 1; --split: 6;
  position: relative; display: grid; gap: var(--gap);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
.tile {
  position: relative; z-index: 1; min-width: 0; overflow: hidden; border-radius: 4px;
  aspect-ratio: var(--ar);
  background: var(--ink) center/contain no-repeat;      /* the page's own black, so the letterbox is not a 'cell' */
  box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .09); /* the module stays legible when the clip is narrow */
}
.tile video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; }
.tile--fg { z-index: 1; }
/* no-JS placement of the band: the first --split tiles sit above it, the rest below.
   studio.js overrides these with inline order values when it reshuffles. */
.tile { order: 1; }
.mosaic__grid > .tile:nth-child(-n+6) { order: -1; }
.mosaic__title {
  grid-column: 1 / -1; order: 0; display: grid; justify-items: center; gap: 14px;
  text-align: center; padding: clamp(40px, 5.2vw, 96px) 16px;
}
/* .92 leading, not .84: at this size the two lines of the headline touched each other. */
.mosaic__title h2 { font: 400 clamp(64px, 13vw, 230px)/.92 var(--display); text-transform: uppercase; color: #fff; }
.mosaic__title .mono { color: rgba(255, 255, 255, .85); }
@media (max-width: 1023px) {
  .mosaic__grid { --cols: 4; --split: 8; }
  .mosaic__grid > .tile:nth-child(-n+6) { order: 1; }
  .mosaic__grid > .tile:nth-child(-n+8) { order: -1; }
}
@media (max-width: 767px) {
  .mosaic { padding: 62px 6px 6px; }
  .mosaic__grid { --cols: 2; --gap: 6px; --split: 4; }
  .mosaic__grid > .tile:nth-child(-n+8) { order: 1; }
  .mosaic__grid > .tile:nth-child(-n+4) { order: -1; }
  .mosaic__title { padding: clamp(32px, 9vw, 64px) 12px; }
  .mosaic__title h2 { font-size: 22vw; }
  .tile--desk { display: none; }
}

/* ── 03 work strip: pinned, moves sideways as you scroll ── */
.strip { position: relative; background: var(--ink); }
.strip__stick { position: relative; }
.strip__track { display: flex; flex-direction: column; }
.panel { position: relative; display: grid; align-content: center; gap: 18px; min-height: 100svh; padding: 84px var(--gut) 56px; overflow: hidden; }
.panel--intro { gap: 22px; }
.panel__intro { font: 400 clamp(72px, 11vw, 200px)/.88 var(--display); text-transform: uppercase; }
.panel__note { max-width: 40ch; color: var(--text-2); }
.panel__go { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.panel__name { position: absolute; left: var(--gut); top: 72px; z-index: 0; font: 400 clamp(84px, 15vw, 280px)/.82 var(--display); text-transform: uppercase; color: var(--text); white-space: nowrap; pointer-events: none; }
.panel__frame { position: relative; z-index: 1; justify-self: end; align-self: center; width: auto; max-width: min(100%, 980px); border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, .55); }
.panel__frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.panel__meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.panel__meta .mono:first-child { color: var(--text); }
.panel__meta .nf { color: var(--hot); }
.panel__name--ghost { color: transparent; -webkit-text-stroke: 1.5px rgba(242, 241, 236, .55); z-index: 2; }
.is-pin .strip { height: var(--strip-h, 1000vh); }
.is-pin .strip__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.is-pin .strip__track { flex-direction: row; height: 100%; will-change: transform; }
.is-pin .panel { flex: none; width: 82vw; min-height: 0; height: 100%; }
.is-pin .panel--intro { width: 64vw; }
.strip__bar { position: absolute; left: var(--gut); right: var(--gut); bottom: 22px; height: 1px; background: var(--line); display: none; }
.strip__bar i { display: block; height: 100%; background: var(--text); transform-origin: left; transform: scaleX(0); }
.is-pin .strip__bar { display: block; }
@media (max-width: 767px) {
  .is-pin .panel { width: 100vw; }
  .is-pin .panel--intro { width: 100vw; }
  .panel { padding: 76px var(--gut) 52px; align-content: center; }
  .panel__name { top: 74px; font-size: clamp(64px, 21vw, 120px); }
  .panel__frame { justify-self: center; }
}

/* ── 04 statement ── */
.say { padding: clamp(120px, 22vh, 220px) 0; }
.say__k { margin-bottom: 26px; }
.say__t { font: 400 clamp(72px, 14.5vw, 270px)/.88 var(--display); text-transform: uppercase; }
.say__t .w { display: inline-block; opacity: .12; transition: opacity .5s var(--ease); }
.say__t .w.lit { opacity: 1; }
.say__s { max-width: 34ch; margin-top: 34px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.4; color: #3b3a36; }

/* ── 05 stats ── */
.stats { padding: clamp(96px, 16vh, 160px) 0; border-bottom: 1px solid var(--line); }
.stats__big { display: grid; gap: 34px; }
.stats__big li { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 18px; }
.stats__big strong { font: 400 clamp(84px, 13vw, 210px)/.84 var(--display); text-transform: uppercase; font-weight: 400; }
@media (min-width: 900px) { .stats__big { grid-template-columns: 1fr 1fr 1fr; gap: 28px; } }
.why { display: grid; gap: 22px; margin-top: clamp(64px, 10vh, 110px); }
.why__t { font: 400 clamp(34px, 4.4vw, 64px)/.95 var(--display); text-transform: uppercase; }
.why__l { max-width: 52ch; color: var(--text-2); }
.why__list { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.why__list li { display: grid; gap: 4px; padding: 18px 0; background: var(--ink); }
.why__list b { font: 400 30px/1 var(--display); text-transform: uppercase; }
.why__list span { color: var(--text-2); font-size: 15px; }
@media (min-width: 900px) { .why { grid-template-columns: 1fr 1fr; column-gap: 60px; } .why__list { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); border: 0; background: none; gap: 24px; } .why__list li { border-top: 1px solid var(--line); } }

/* ── 06 services ── */
.svcs { padding: clamp(96px, 16vh, 170px) 0; }
.head { display: grid; gap: 14px; margin-bottom: clamp(36px, 6vh, 64px); }
.head__t { font: 400 clamp(54px, 8vw, 130px)/.86 var(--display); text-transform: uppercase; }
.svc-list { border-top: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: 38px 1fr; gap: 6px 14px; padding: 22px 0; border-bottom: 1px solid var(--line); transition: background-color .4s; }
.svc h3 { font: 400 clamp(34px, 5.2vw, 84px)/.92 var(--display); text-transform: uppercase; transition: transform .6s var(--ease), color .3s; }
.svc p { grid-column: 2; max-width: 46ch; color: var(--text-2); }
.svc__n { padding-top: .6em; }
@media (min-width: 900px) {
  .svc { grid-template-columns: 70px 1.3fr 1fr; align-items: center; padding: 26px 0; }
  .svc p { grid-column: 3; }
  .svc:hover h3 { transform: translateX(14px); color: var(--hot); }
}
.lists { display: grid; gap: 48px; margin-top: clamp(64px, 10vh, 110px); }
.lists__v { margin-top: 12px; font: 400 clamp(40px, 5vw, 76px)/.95 var(--display); }
.lists__s { margin-top: 10px; color: var(--text-2); max-width: 36ch; }
.steps { margin-top: 14px; border-top: 1px solid var(--line); }
.steps li { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.steps b { font: 400 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.steps span { color: var(--text-2); font-size: 15px; }
@media (min-width: 900px) { .lists { grid-template-columns: 1fr 1.5fr; gap: 80px; } .steps li { grid-template-columns: 220px 1fr; gap: 20px; } }

/* ── 07 challenge ── */
.chal { padding: 0 0 clamp(80px, 12vh, 130px); background: var(--hot); color: var(--ink); overflow: hidden; }
.chal__marq { padding: 16px 0; border-bottom: 2px solid var(--ink); overflow: hidden; }
.chal__run { display: flex; width: max-content; animation: marq 26s linear infinite; }
.chal__run span { padding-right: .35em; font: 400 clamp(26px, 3.4vw, 48px)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
@keyframes marq { to { transform: translateX(-50%); } }
.chal__in { display: grid; gap: 28px; padding-top: clamp(56px, 9vh, 96px); }
.chal__t { font: 400 clamp(72px, 9.6vw, 180px)/.88 var(--display); text-transform: uppercase; }
.chal__side { display: grid; gap: 20px; align-content: end; max-width: 42ch; font-size: 18px; }
.chal__side .btn { justify-self: start; }
.days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.days li { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px solid rgba(10, 10, 10, .35); border-radius: 4px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: rgba(10, 10, 10, .7); }
.days li.d1 { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.days li.d1 small { display: block; margin-top: 3px; font-size: 8px; letter-spacing: .1em; }
@media (min-width: 900px) { .chal__in { grid-template-columns: 1.3fr 1fr; } .days { grid-column: 1 / -1; grid-template-columns: repeat(15, 1fr); } }

/* ── 08 founder ── */
.founder { padding: clamp(96px, 16vh, 170px) 0; }
.founder__in { display: grid; gap: 48px; }
/* align-items: start — grid items stretch to the row by default, and a stretched item ignores its
   aspect-ratio, which let each still sit in a tall box with black above and below it. */
.founder__board { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-self: start; align-items: start; }
/* 22 Oct: contain, not cover - these stills are whole frames pulled from the master and must stay
   whole. The square cell matches the 1:1 master exactly, and contain guarantees that a still of any
   other shape letterboxes onto the page black instead of having its captions sliced. */
.founder__board img { width: 100%; height: auto; align-self: start; aspect-ratio: 1; object-fit: contain; background: var(--ink); border-radius: 4px; filter: grayscale(.2) contrast(1.05); }
.founder__board img:nth-child(2) { transform: translateY(18px); }
.founder__board figcaption { grid-column: 1 / -1; margin-top: 26px; }
.founder__txt { display: grid; gap: 26px; align-content: start; }
.founder__p { max-width: 44ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--text-2); }
.quote p { font: 400 clamp(40px, 5.6vw, 96px)/.92 var(--display); text-transform: uppercase; }
.quote footer { margin-top: 18px; }
@media (min-width: 900px) { .founder__in { grid-template-columns: 1fr 1.4fr; gap: 80px; } }

/* ── 09 teaser ── */
.teaser { padding: clamp(110px, 18vh, 200px) 0; }
.teaser__in { display: grid; gap: 26px; }
.tag { display: inline-block; margin-right: 8px; padding: 4px 8px 3px; border-radius: 4px; background: var(--hot); color: #fff; letter-spacing: .12em; }
.teaser__t { font: 400 clamp(68px, 12.5vw, 220px)/.88 var(--display); text-transform: uppercase; }
.teaser__l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 40ch; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35; color: #2e2d2a; }
.teaser__l .ic { width: 22px; height: 22px; }
.teaser__row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.slots { display: inline-flex; gap: 6px; }
.slots i { width: 22px; height: 8px; border-radius: 2px; background: var(--ink); }
.promises { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 22px; border-top: 1px solid rgba(10, 10, 10, .18); color: #3b3a36; font-size: 15px; }
.promises li { display: inline-flex; align-items: center; gap: 8px; }

/* ── 10 brief ── */
.brief { padding: clamp(96px, 16vh, 170px) 0; }
.brief__grid { display: grid; gap: 48px; }
.brief__intro { display: grid; gap: 22px; align-content: start; }
.brief__lead { max-width: 42ch; color: var(--text-2); font-size: 18px; }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: center; color: var(--text-2); }
.ticks .ic { color: var(--green); }
.brief__more { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.brief__card { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); }
@media (min-width: 640px) { .brief__card { padding: 34px; } }
@media (min-width: 1024px) { .brief__grid { grid-template-columns: 1fr 1.25fr; gap: 72px; } .brief__intro { position: sticky; top: 96px; } }

/* form (same fields and behaviour as before, restyled) */
.form { display: grid; gap: 24px; }
.form__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.form__head span:first-child { color: var(--text); }
.form__row { display: grid; gap: 24px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; gap: 16px; } .form__row--3 { grid-template-columns: 1fr 1fr 1fr; gap: 16px; } }
.field { display: grid; gap: 8px; align-content: start; }
.field > label, .field legend { padding: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.field legend { margin-bottom: 8px; }
.field__opt { color: var(--text-3); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="date"], .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink); font-size: 16px; line-height: 24px; transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 136px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(242, 241, 236, .14); }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; filter: invert(1); cursor: pointer; }
.field.bad input, .field.bad textarea { border-color: var(--hot); }
.field__err { display: none; color: var(--hot); font-size: 14px; line-height: 20px; }
.field.bad .field__err { display: block; }
.field__hint { color: var(--text-3); font-size: 13px; }
.seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 8px; background: var(--ink); border: 1px solid var(--line); }
.seg label, .chips label { position: relative; cursor: pointer; }
.seg input, .chips input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 8px 12px; border-radius: 5px; color: var(--text-2); font-size: 14px; line-height: 24px; font-weight: 500; text-align: center; transition: background-color .3s, color .3s; }
.seg input:checked + span { background: var(--text); color: var(--ink); }
.seg input:focus-visible + span, .chips input:focus-visible + span { outline: 2px solid var(--hot); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font-size: 14px; line-height: 20px; font-weight: 500; transition: background-color .3s, border-color .3s, color .3s; }
.chips label:hover span { border-color: var(--line-strong); color: var(--text); }
.chips input:checked + span { border-color: var(--text); background: var(--text); color: var(--ink); }
.chips .chip-free span { border-color: rgba(255, 77, 109, .6); color: #ffb3c1; }
.chips .chip-free input:checked + span { background: var(--hot); border-color: var(--hot); color: #fff; }
.field.bad .chips span { border-color: rgba(255, 77, 109, .45); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status:empty { display: none; }
.form__status { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--line-strong); font-size: 14px; line-height: 20px; }
.form__status.is-bad { border-color: rgba(255, 77, 109, .5); }
.form__status a { text-decoration: underline; text-underline-offset: 2px; }
.form__send { position: relative; overflow: hidden; }
.form__send[aria-busy="true"] { pointer-events: none; opacity: .72; }
.form__note { color: var(--text-3); font-size: 12px; line-height: 16px; text-align: center; }
.done { display: grid; justify-items: center; gap: 16px; padding: 64px 16px; text-align: center; outline: none; }
.done__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 194, 110, .12); color: var(--green); }
.done__ic .ic { width: 32px; height: 32px; stroke-width: 2.2; }
.done h3 { font: 400 44px/1 var(--display); text-transform: uppercase; }
.done p { max-width: 380px; color: var(--text-2); }

/* ── 11 contact ── */
.contact { padding: clamp(80px, 12vh, 140px) 0 clamp(80px, 12vh, 120px); overflow: hidden; }
.contact__t { font: 400 25vw/.8 var(--display); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.contact__grid { display: grid; gap: 36px; margin-top: clamp(36px, 6vh, 64px); }
.contact__links { display: grid; border-top: 1px solid rgba(10, 10, 10, .2); }
.contact__links li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(10, 10, 10, .2); }
.contact__links a { font: 400 clamp(30px, 4vw, 58px)/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; transition: color .3s; }
.contact__links a:hover { color: var(--hot); }
.contact__end { display: grid; gap: 18px; align-content: start; }
.contact__line { font: 400 clamp(30px, 3vw, 44px)/.95 var(--display); text-transform: uppercase; }
.contact__end .btn { justify-self: start; }
.contact__img { overflow: hidden; border-radius: 4px; background: var(--ink); }
.contact__img img { width: 100%; height: 100%; object-fit: contain; }
/* 22 Oct: each still box matches its source ratio, so cover crops nothing.
   boat-poster.jpg is 720x720 (was in a 16/9 box), spotify-poster.jpg is 720x1280. */
.contact__img--a { aspect-ratio: 1 / 1; }
.contact__img--b { aspect-ratio: 9 / 16; max-width: 240px; }
@media (max-width: 899px) { .contact__img--b { display: none; } }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1.3fr 1fr .55fr; grid-template-areas: "l a b" "l e b"; align-items: start; }
  .contact__links { grid-area: l; } .contact__end { grid-area: e; } .contact__img--a { grid-area: a; } .contact__img--b { grid-area: b; }
}

/* footer */
.foot { padding: 44px 0 36px; background: var(--ink); color: var(--text-2); font-size: 14px; }
.foot__in { display: grid; gap: 18px; }
.foot__brand { display: grid; gap: 4px; }
.foot__brand strong { color: var(--text); font: 400 26px/1 var(--display); text-transform: uppercase; }
.foot__brand a, .foot__links a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot__links a { padding-block: 8px; }
.foot__copy { color: var(--text-3); font-size: 12.5px; }
@media (min-width: 900px) { .foot__in { grid-template-columns: 1fr auto; align-items: end; } .foot__copy { grid-column: 1 / -1; } }

/* reduced motion: no grain movement, no flashes, no pinning or reshuffles; everything is simply laid out */
@media (prefers-reduced-motion: reduce) {
  .grain, .chal__run, .rec, .tc i, .hero__hint::after { animation: none; }
  .flash { display: none; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  .hero { height: auto; }
  .hero__stick { position: relative; height: auto; min-height: 100svh; }
  .hero__film { display: none; }
  .js .pill { background: #111 center / cover no-repeat url(/motion/work/knot-poster.jpg); }
  .say__t .w { opacity: 1; }
  .btn, .svc h3 { transition: none; }
}

/* work strip frame size: the film keeps its own shape (never cropped), as large as the panel allows */
.panel { --pw: 100vw; }
.is-pin .panel { --pw: 82vw; }
.panel__frame { height: min(60vh, 60svh, calc((var(--pw) - var(--gut) * 2) / var(--r))); }
@media (max-width: 767px) { .is-pin .panel { --pw: 100vw; } .panel__frame { height: min(56svh, calc((var(--pw) - var(--gut) * 2) / var(--r))); } }

/* phones: the headline fills the width */
@media (max-width: 639px) { .hero__title { font-size: 18.6vw; } .hero__copy { justify-content: center; padding-bottom: 40px; } }
@media (max-width: 767px) { .panel { padding: 150px var(--gut) 64px; } }
/* the film sits in the middle of its panel, the brand name runs behind it */
.panel__frame { justify-self: center; }

/* ── 21 Oct, pass 2: black everywhere (as on the rest of the site), off-white type; the mosaic title always on top ── */
.light { background: var(--ink); color: var(--text); color-scheme: dark; }
.light .mono { color: var(--text-3); }
.hero, .hero__stick { background: var(--ink); color: var(--text); }
.hero__title { color: var(--text); }
.status { color: var(--text-3); }
.hero__sub, .say__s, .teaser__l, .promises { color: var(--text-2); }
.hero__acts .btn:first-child { background: var(--text); color: var(--ink); }
.btn--line:hover { background: var(--text); color: var(--ink); }
.btn--dark { background: var(--text); color: var(--ink); }
.btn--dark:hover { background: #fff; }
.js .pill { box-shadow: inset 0 0 0 1.5px rgba(242, 241, 236, .22); }
.hud, .hero__hint { mix-blend-mode: normal; }
.hud { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.rec { background: var(--rec); }
.say, .teaser, .contact, .chal { border-top: 1px solid var(--line); }
.promises { border-top-color: var(--line); }
.contact__links, .contact__links li { border-color: var(--line); }
.contact__img { background: var(--ink-2); }
.chal { background: var(--ink); color: var(--text); }
.chal__marq { border-bottom: 1px solid var(--line); }
.chal__run span { color: var(--hot); }
.days li { border-color: var(--line-strong); color: var(--text-3); }
.days li.d1 { background: var(--hot); border-color: var(--hot); color: #fff; }
.slots i { background: var(--hot); }
.tile--fg { z-index: 1; }
/* removed 22 Oct: the radial scrim behind the headline (it lit the clip underneath into a soft colour blob); the headline has its own band now */
.mosaic__title h2 { text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }

/* 21 Oct, pass 3: no brand is highlighted. The big titles name the kind of work; the brand is only a tiny, low-contrast caption */
.brand { font: 500 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 241, 236, .32) !important; }
.panel__meta .mono:first-child { color: var(--text); }
.panel__name { font-size: clamp(64px, 10.5vw, 200px); }
@media (max-width: 767px) { .panel__name { font-size: clamp(48px, 14.5vw, 84px); white-space: normal; max-width: 92vw; line-height: .9; } }
.panel__name { white-space: normal; max-width: 76vw; line-height: .88; }
@media (max-width: 767px) { .panel__name { max-width: 92vw; } }

/* ── 21 Oct, pass 4: quieter scale (about two thirds), own film in the hero, no HUD, no challenge ── */
.hero__film { background: #0b0f12; }
.hero__vid { position: absolute; left: 0; top: 0; width: 720px; height: 720px; object-fit: contain; background: #000; transform-origin: 0 0; will-change: transform; }
.hero__title { font-size: min(9.8vw, 16vh); }
.hero__cap b { font-size: clamp(24px, 3.9vw, 54px); }
.mosaic__title h2 { font-size: clamp(44px, 8.4vw, 150px); }
.panel__intro { font-size: clamp(48px, 7vw, 130px); }
.panel__name { font-size: clamp(42px, 6.8vw, 130px); }
.panel__frame--small { height: auto !important; width: min(560px, 100%); }
.say { padding: clamp(80px, 14vh, 140px) 0; }
.say__t { font-size: clamp(48px, 9.4vw, 176px); }
.say__s { font-size: clamp(16px, 1.3vw, 19px); margin-top: 24px; }
.stats, .svcs, .founder, .brief { padding: clamp(64px, 10vh, 110px) 0; }
.stats__big strong { font-size: clamp(56px, 8.4vw, 136px); }
.why { margin-top: clamp(44px, 7vh, 72px); }
.why__t { font-size: clamp(24px, 2.9vw, 42px); }
.why__list b { font-size: 22px; }
.head { margin-bottom: clamp(26px, 4vh, 44px); }
.head__t { font-size: clamp(38px, 5.2vw, 84px); }
.svc { padding: 16px 0; }
.svc h3 { font-size: clamp(24px, 3.4vw, 54px); }
.lists { margin-top: clamp(44px, 7vh, 72px); }
.lists__v { font-size: clamp(28px, 3.3vw, 50px); }
.steps b { font-size: 18px; }
.quote p { font-size: clamp(28px, 3.6vw, 62px); }
.teaser { padding: clamp(72px, 12vh, 130px) 0; }
.teaser__t { font-size: clamp(46px, 8vw, 144px); }
.teaser__l { font-size: clamp(16px, 1.4vw, 20px); }
.done h3 { font-size: 32px; }
.contact { padding: clamp(56px, 8vh, 90px) 0; }
.contact__t { font-size: clamp(72px, 16vw, 300px); }
.contact__links a { font-size: clamp(22px, 2.6vw, 38px); }
.contact__line { font-size: clamp(22px, 2vw, 30px); }
@media (max-width: 767px) {
  .mosaic__title h2 { font-size: 14vw; }
  .panel__name { font-size: clamp(32px, 10vw, 56px); }
  .panel { padding-top: 120px; }
  .panel__frame--small { width: 100%; }
}
@media (max-width: 639px) { .hero__title { font-size: 12.6vw; } }

/* 21 Oct, pass 6: the hero is type only (no reel pill, no expanding film); it sits at its natural height */
.hero { height: auto; }
.hero__stick { position: relative; height: auto; overflow: visible; }
.hero__copy { height: auto; padding: clamp(120px, 18vh, 190px) var(--gut) clamp(56px, 9vh, 96px); }
/* the pill: a small field of drifting, twinkling dots (studio.js draws it on a canvas); no video */
.pill, .js .pill { position: relative; overflow: hidden; background: #0d0d0d; box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .16); }
.pill__cv { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 21 Oct, pass 7: the work strip. No scrollbar and no progress line; native sideways scrolling on touch screens */
.strip__bar { display: none !important; }
.strip__track { scrollbar-width: none; -ms-overflow-style: none; }
.strip__track::-webkit-scrollbar { display: none; }
.is-pin .strip__track { will-change: transform; }
.is-swipe .strip__track { flex-direction: row; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-padding-inline: 7vw; }
.is-swipe .panel { --pw: 86vw; flex: none; width: 86vw; min-height: 0; padding: 120px 12px 44px; scroll-snap-align: center; }
.is-swipe .panel--intro { width: 86vw; padding-left: var(--gut); }
.is-swipe .panel__name { left: 12px; }
@media (min-width: 768px) { .is-swipe .panel { --pw: 60vw; width: 60vw; } .is-swipe .panel--intro { width: 50vw; } }

/* ── 21 Oct, pass 8: formats, one piece reframed live on an editor's canvas (ported from the 14 Oct page, restyled) ── */
.morph { position: relative; height: 280vh; border-top: 1px solid var(--line); }
.morph__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: 20px; padding-top: 80px; padding-bottom: 20px; overflow: hidden; }
.morph__head { display: grid; justify-items: center; gap: 10px; text-align: center; }
.morph__body { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-height: 0; }
.canvas { position: relative; display: grid; grid-template-rows: 34px minmax(0, 1fr); min-height: 240px; border-radius: 10px; overflow: hidden; background: #0a0a0a; box-shadow: 0 0 0 1px var(--line), 0 40px 80px rgba(0, 0, 0, .5); }
.canvas__bar { display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #101010; color: var(--text-3); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; }
.canvas__tool { padding: 5px 8px; border-radius: 5px; background: rgba(255, 77, 109, .16); color: #ffb3c1; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.canvas__file { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas__zoom { font-variant-numeric: tabular-nums; }
.canvas__board { position: relative; overflow: hidden; contain: strict; background: #0a0a0a; }
.canvas__fill { position: absolute; inset: 0; z-index: 0; background: #0b0f12; transform-origin: 50% 50%; }
.frame-ov { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.frame-tag { position: absolute; left: 0; top: 0; z-index: 3; padding: 4px 8px; border-radius: 4px; background: var(--text); color: var(--ink); font: 600 10.5px/14px var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; will-change: transform; }
.canvas__win { position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; overflow: hidden; transform-origin: 50% 50%; background: #0b0f12; }
.canvas__media { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 50% 50%; overflow: hidden; background: #0b0f12; }
.canvas__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fmt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 18px; }
.fmt__ratio { display: grid; grid-row: span 2; font: 400 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.fmt__ratio span, .fmt__list li { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.fmt__ratio span.on, .fmt__list li.on { opacity: 1; transform: none; }
.fmt__list { display: grid; }
.fmt__list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fmt__list b { display: none; }
.fmt__list span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font-size: 12.5px; line-height: 18px; }
.fmt__note { grid-column: 2; color: var(--text-3); font-size: 12.5px; line-height: 18px; }
@media (min-width: 1024px) {
  .morph__head { justify-items: start; text-align: left; }
  .morph__pin { padding-top: 76px; grid-template-rows: minmax(0, 1fr); }
  .morph__pin > .morph__head { position: absolute; left: 0; right: 0; top: 80px; pointer-events: none; }
  .morph__body { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr); gap: 40px; padding-top: 150px; }
  .fmt { grid-template-columns: 1fr; align-self: end; gap: 20px; padding-bottom: 8px; }
  .fmt__ratio { grid-row: auto; font-size: 64px; }
  .fmt__list { gap: 12px; }
  .fmt__list li, .fmt__list li.on { grid-area: auto; opacity: .32; transform: none; }
  .fmt__list li.on { opacity: 1; }
  .fmt__list li.on span { border-color: rgba(255, 77, 109, .5); color: var(--text); background: rgba(255, 77, 109, .1); }
  .fmt__list b { display: block; width: 100%; margin-bottom: 2px; color: var(--text-3); font: 600 10.5px/16px var(--mono); letter-spacing: .12em; }
  .fmt__list li span { transition: border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease); }
  .fmt__note { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .morph { height: auto; padding-block: 80px; }
  .morph__pin { position: static; height: auto; padding: 0; display: block; }
  .morph__pin > .morph__head { position: static; }
  .morph__body { padding-top: 32px; }
  .canvas { height: 520px; }
  .fmt__ratio span, .fmt__list li { transition: none; }
}
.morph__head .head__t { line-height: 1; }
@media (min-width: 1024px) { .morph__body { padding-top: 176px; } }

/* ───────────────── 22 Oct: ad-traffic conversion (SEO/ads pass) ─────────────────
   Nothing here changes the layout of the existing sections; it only adds the trust
   rows and the persistent brief CTA that a cold visitor from an Instagram ad needs. */

/* hero: the three promises already made further down the page, said once above the fold */
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; color: var(--text-3); font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust .ic { width: 15px; height: 15px; stroke-width: 2; color: var(--green); }
@media (min-width: 900px) { .hero__trust { grid-column: 1 / -1; margin-top: 10px; } }
@media (max-width: 420px) { .hero__trust { gap: 7px 14px; font-size: 10.5px; letter-spacing: .05em; } }

/* the same promises again, this time attached to the form itself */
.form__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(242, 241, 236, .035); color: var(--text-2); font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; list-style: none; }
.form__trust li { display: inline-flex; align-items: center; gap: 7px; }
.form__trust .ic { width: 15px; height: 15px; stroke-width: 2; color: var(--green); }

/* persistent brief CTA. The fixed site menu already carries "Start a brief" from 901px up,
   so this only appears on the phone widths where that button is behind the hamburger.
   It hides itself once the brief is on screen, and lifts clear of the iOS home bar. */
.cta-dock { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 55; display: none; transform: translate(-50%, 0); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.cta-dock .btn { min-height: 46px; padding: 11px 20px; font-size: 14.5px; background: var(--text); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(10, 10, 10, .5); }
.cta-dock[hidden] { display: none; }
.cta-dock.off { opacity: 0; transform: translate(-50%, 130%); pointer-events: none; }
@media (max-width: 900px) { .cta-dock { display: block; } body.nvopen .cta-dock { opacity: 0; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .cta-dock { transition: none; } }

/* ── 22 Oct, platform pass: the poster has to stand in when autoplay is refused ──
   iOS Low Power Mode, a Data Saver setting or a decode error all reject play(). studio.js then puts
   the clip's poster on the figure and marks the <video> .vfail, so the tile shows the still frame
   instead of a black box. Nothing below depends on hover. */
.tile, .panel__frame, .canvas__media { background-repeat: no-repeat; background-position: center; background-size: contain; }
video.vfail { opacity: 0; }
video { -webkit-backface-visibility: hidden; backface-visibility: hidden; }