/* Motionbell site styles. Hidden-until-revealed states only apply under .js, so the pages read without scripts. */
:root {
  --char: #1a1a1a; --bone: #ecebe6; --yellow: #fbbe04; --mute: #8f8d86;
  /* --char again as red, green, blue, for the places that draw it part see-through. The admin's Appearance page sets both (render.mjs). */
  --char-rgb: 26, 26, 26;
  --line: rgba(236, 235, 230, 0.14);
  --pad: clamp(20px, 4vw, 56px);
  --gap: clamp(20px, 3vw, 48px);
  --ease: cubic-bezier(0.22, 0.8, 0.16, 1);
  --sans: "Inter Tight", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--char); color-scheme: dark; scrollbar-color: #3b3a37 var(--char); }
::selection { background: var(--yellow); color: var(--char); }
@view-transition { navigation: auto; }   /* pages cross-fade into each other where the browser can */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
h1, h2, h3, .say, .lead, .intro-line { text-wrap: balance; }
p, li { text-wrap: pretty; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 50; background: var(--yellow); color: var(--char); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 12px; }
body { margin: 0; background: var(--char); color: var(--bone); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.opening body { overflow: hidden; height: 100svh; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.sw { display: inline-block; transform-origin: 50% 0; will-change: transform; }
.mono { font: 400 11.5px/1.4 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute); }

/* Atmosphere: film grain over everything */
.grain { position: fixed; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 40; pointer-events: none; opacity: 0.07; animation: grain 0.9s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 -0.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, 2%); } 100% { transform: translate(0, 0); } }

/* Opening, on the home page only */
.gate { display: none; position: fixed; inset: 0; z-index: 10; background: var(--char); cursor: pointer; }
.opening .gate { display: block; }
.gate .hint { position: absolute; left: 0; right: 0; bottom: clamp(28px, 8vh, 72px); text-align: center; opacity: 0; transition: opacity 0.9s ease 1.1s; }
body.ready .gate .hint { opacity: 1; }
body.rung .gate { opacity: 0; pointer-events: none; transition: opacity 1.5s ease 1.7s; }
body.rung .gate .hint { opacity: 0; transition: opacity 0.4s ease; }

/* The mark: one, large, behind the hero. Five pieces that glow and ring when the cursor passes. */
/* A lit piece dips up to 6px, and the mask cuts off anything outside the mark's box. The clear border under the mark
   makes the box that much taller, so the round ends of the pieces are never cut flat while they dip. */
.mark { position: absolute; z-index: 12; right: var(--pad); top: 50%; --mk: min(76svh, 83vw); box-sizing: content-box; height: var(--mk); aspect-ratio: 640 / 580; margin-top: calc(var(--mk) * -0.5); border-bottom: 8px solid transparent; pointer-events: none; will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(circle 36vmin at var(--sx, 50%) var(--sy, 50%), #000 0%, rgba(0, 0, 0, var(--far, 0.5)) 100%);
          mask-image: radial-gradient(circle 36vmin at var(--sx, 50%) var(--sy, 50%), #000 0%, rgba(0, 0, 0, var(--far, 0.5)) 100%); }
.js .mark { opacity: 0; }   /* hidden until its five pictures are ready and it stands in its place; site.js fades it in */
body.done .mark, .no-js .mark { z-index: 0; }
body.rung .hero .text, body.rung .hero .meta { z-index: 13; }   /* the words arrive in front of the mark while it is still gliding into place */
.mark img { position: absolute; display: block; opacity: 0.2; transform-origin: 50% 0; will-change: transform, opacity; user-select: none; -webkit-user-drag: none; }
.mark .p1 { left: 0; top: 0; width: 21.56%; height: 100%; }
.mark .p2 { left: 26.25%; top: 0; width: 21.41%; height: 100%; }
.mark .p3 { left: 52.34%; top: 0; width: 21.41%; height: 100%; }
.mark .p4 { left: 67.5%; top: 0; width: 32.5%; height: 47.41%; }
.mark .p5 { left: 78.44%; top: 52.76%; width: 21.56%; height: 47.24%; }

/* Header: the logo sits large at the top left, the links float in a glass pill */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 21; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 14px var(--pad) 30px; pointer-events: none; }
header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(var(--char-rgb), 0.9) 45%, rgba(var(--char-rgb), 0)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); opacity: 0; transition: opacity 1s ease; }
/* The header arrives with the home page's opening only. On every other page it is there from the first frame, so it holds
   still while one page cross-fades into the next instead of vanishing and fading back in. */
html:not(.opening) header::before { opacity: 1; }
html:not(.opening) header > * { pointer-events: auto; }
body.on-yellow header::before { background: linear-gradient(rgba(251, 190, 4, 0.94) 45%, rgba(251, 190, 4, 0)); }
header .brand b, header .brand i, .pill, .pill a, header .btn { transition: color 0.3s, background 0.3s, border-color 0.3s; }
body.on-yellow header .brand b, body.on-yellow header .brand i { color: var(--char); }
body.on-yellow header .brand img { filter: brightness(0); }
body.on-yellow .pill { background: rgba(var(--char-rgb), 0.9); border-color: transparent; }
body.on-yellow header .sound, body.on-yellow header .menu-btn { color: var(--char); border-color: rgba(var(--char-rgb), 0.35); }
body.on-yellow header .sound .dot { background: var(--char); box-shadow: none; }
body.on-yellow header .btn.primary { background: var(--char); border-color: var(--char); color: var(--yellow); }
body.on-yellow header .btn.primary .ar { background: var(--yellow); color: var(--char); }
.brand { display: flex; align-items: center; gap: 12px; justify-self: start; }
.brand img { width: 58px; height: 58px; margin: -6px 0 -6px -8px; }
.brand b { display: block; font-weight: 700; font-size: 16px; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.1; }
.brand i { display: block; font: 400 10.5px/1.3 var(--mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-top: 3px; }
.pill { display: flex; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(236, 235, 230, 0.05); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); font-size: 13.5px; }
.pill a { padding: 8px 13px; border-radius: 999px; color: var(--mute); white-space: nowrap; transition: color 0.3s, background 0.3s; }
.pill a:hover, .pill a[aria-current] { color: var(--bone); background: rgba(236, 235, 230, 0.09); }
header .right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 10px 11px 10px 18px; border: 1px solid var(--line); font: 600 14px/1 var(--sans); color: var(--bone); background: transparent; cursor: pointer; white-space: nowrap; transition: border-color 0.3s, background 0.3s; }
.btn:hover { border-color: rgba(236, 235, 230, 0.5); }
.btn:active { transform: scale(0.97); }
.btn .ar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(236, 235, 230, 0.1); font-size: 12px; transition: transform 0.5s var(--ease); }
.btn:hover .ar { transform: rotate(-45deg); }
.btn.primary { background: var(--yellow); border-color: var(--yellow); color: var(--char); }
.btn.primary .ar { background: var(--char); color: var(--yellow); }
.sound { padding: 10px 14px; font-weight: 500; font-size: 13px; color: var(--mute); gap: 8px; }
.sound .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.sound[aria-pressed="true"] .dot { background: var(--yellow); }
.no-js .sound { display: none; }

/* The menu, for screens too narrow for the pill */
.menu-btn { display: none; padding: 10px 16px; font-weight: 500; font-size: 13px; }
.menu { position: fixed; inset: 0; z-index: 20; background: rgba(var(--char-rgb), 0.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 110px var(--pad) 40px; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu a { font-size: clamp(30px, 8.4vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; padding: 14px 0; border-bottom: 1px solid var(--line); }
.menu a.hot { color: var(--yellow); border-bottom: 0; }

/* Home hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 130px var(--pad) 0; }
.hero .text { position: relative; z-index: 1; }
h1 { margin: 0 0 clamp(22px, 4vh, 44px); font-weight: 500; font-size: clamp(56px, 11.4vw, 196px); line-height: 0.88; letter-spacing: -0.055em; }
h1 .line { display: block; overflow: hidden; padding: 0.04em 0.12em 0.16em 0; margin-bottom: -0.16em; }
.js #h1 .line { white-space: nowrap; width: max-content; max-width: 100%; }   /* the script sizes the headline so its widest line fits */
h1 .ch { display: inline-block; transform: translateY(118%) rotate(6deg); transform-origin: 0 100%; }
h1 em { letter-spacing: -0.035em; font-size: 1.07em; color: var(--yellow); }
body.rung h1 .ch { transform: none; transition: transform 1.4s var(--ease); transition-delay: calc(2.15s + var(--c) * 0.035s); }
.hero .foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: end; }
.lead { margin: 0; font-size: clamp(17px, 1.55vw, 23px); line-height: 1.38; max-width: 31em; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hero .string { margin-top: calc(clamp(28px, 5vh, 56px) - 20px); }
.meta { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; padding: 16px 0 20px; }
.meta b { color: var(--bone); font-weight: 400; font-variant-numeric: tabular-nums; }
.js .rise { opacity: 0; transform: translateY(22px); }
.js body.rung .rise { opacity: 1; transform: none; transition: opacity 1.3s ease, transform 1.5s var(--ease); transition-delay: calc(2.6s + var(--i, 0) * 0.12s); }
body.quick h1 .ch { transition-delay: calc(0.1s + var(--c) * 0.03s); }
.js body.quick .rise { transition-delay: calc(0.25s + var(--i, 0) * 0.08s); }
html:not(.opening) header .rise { opacity: 1; transform: none; }   /* see the header above */

/* The top of every other page */
.page-hero { position: relative; padding: clamp(120px, 16vh, 180px) var(--pad) clamp(44px, 9vh, 110px); }
.page-hero .mono { margin: 0 0 22px; }
.page-hero .mono a:hover { color: var(--bone); }
.page-hero h1 { font-size: clamp(46px, 9vw, 150px); line-height: 0.92; max-width: 11em; margin-bottom: clamp(22px, 0.42em, 64px); }   /* the gap under the title grows with the title */
.page-hero .lead { font-size: clamp(18px, 1.8vw, 27px); max-width: 34em; }
.page-hero h1 em { color: inherit; }   /* only the home hero's accent word is yellow */
.page-hero .credit { margin: clamp(26px, 2.2vw, 40px) 0 0; }
.page-hero .madeby { margin: 16px 0 0; max-width: 40em; color: var(--mute); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; }
.page-hero .lead + .madeby { margin-top: clamp(26px, 2.2vw, 40px); }
.page-hero .madeby a {color: var(--bone); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.page-hero .madeby a:hover { text-decoration-color: var(--bone); }
.page-hero h1.split { opacity: 1; transform: none; }
.wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.08em 0.1em 0.2em 0; margin: -0.08em -0.1em -0.2em 0; }
.wi { display: inline-block; transform: translateY(118%); }
body.rung .wi { transform: none; transition: transform 1.2s var(--ease); transition-delay: calc(0.1s + var(--c) * 0.07s); }
.page-hero .actions { justify-content: flex-start; margin-top: 34px; }

/* Hairlines that behave like strings */
.string { display: block; width: 100%; height: 40px; margin: -20px 0; position: relative; z-index: 1; pointer-events: none; overflow: visible; }
.string path { fill: none; stroke: rgba(236, 235, 230, 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 0.6s; }
.string.live path { stroke: var(--yellow); transition: none; }

/* Sections sit on a two-column grid: a small label on the left that stays in view, the content on the right */
.sec { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); column-gap: var(--gap); padding: clamp(72px, 13vh, 170px) var(--pad); }
.sec.wide { grid-template-columns: minmax(0, 1fr); }
.label { margin: 0; position: sticky; top: 104px; align-self: start; }
.label a:hover { color: var(--bone); }
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 0.08s); }   /* quick enough that nobody waits for words to arrive */
.js .rv.in { opacity: 1; transform: none; }

/* Experience ticker: companies the work was done at or for, not Motionbell clients. It is a section like the others, with a heading and a
   sentence saying whose experience it is, and the row of logos runs past the page margins to both edges of the screen */
.marquee { margin: 0 calc(-1 * var(--pad)); overflow: hidden; white-space: nowrap; }
.marquee .track { display: inline-flex; gap: 0.55em; font-size: clamp(34px, 6vw, 100px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; will-change: transform; }
/* A company with no logo is shown as its name, in solid type at the same weight as the logos beside it */
.marquee .track span { color: rgba(236, 235, 230, 0.72); letter-spacing: -0.04em; }
.marquee .track { align-items: center; }
.marquee .track img { display: block; width: auto; flex: none; opacity: 0.72; }
.marquee .track i { font-style: normal; color: var(--yellow); font-size: 0.5em; align-self: center; }

/* Statement: the words light up as the page scrolls */
.say { margin: 0; font-size: clamp(28px, 4.3vw, 72px); font-weight: 500; line-height: 1.06; letter-spacing: -0.04em; max-width: 17em; }
.say .w { opacity: 0.16; transition: opacity 0.35s ease; }
.say.still { margin-bottom: clamp(28px, 5vh, 56px); }
.say + .practices { margin-top: clamp(30px, 5vh, 52px); }
/* What we do, from a small tablet up: the heading stands over the first of the three practice columns and the
   statement runs across the other two, their first lines on one baseline, so the row is used from edge to edge. */
@media (min-width: 760px) {
  .sec.duo { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: first baseline; }
  .sec.duo > .sec-head { grid-column: 1; margin-bottom: 0; }
  .sec.duo > .say { grid-column: 2 / -1; max-width: none; }
  .sec.duo > .practices { grid-column: 1 / -1; }
}
.say.still em { color: var(--yellow); }   /* only the brand line on the About page; the home statement stays one colour */

/* Practices, on the home page under the statement: three side by side from a small tablet, one under another on a
   phone. Each is its icon, name, a few lines and its list of offers, and the whole card is the link. Yellow rises
   through a card under the pointer; the card reaches a little past its text, so the text keeps to the page's lines. */
.practices { display: grid; grid-template-columns: minmax(0, 1fr); }
.practice { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 22px 14px 24px; margin: 0 -14px; overflow: hidden; border-radius: 8px; }
.practice::before { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.65s var(--ease); z-index: -1; }
.practice::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--line); }
.practice * { transition: color 0.35s, transform 0.65s var(--ease), opacity 0.4s; }
.practice .top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }   /* on a phone the icon sits beside the name */
.practice h3 { margin: 0; font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.practice p { margin: 0 0 14px; color: var(--mute); max-width: 30em; }
.practice p b { color: var(--bone); font-weight: 500; }
.practice .tags { margin: auto 0 0; font-size: 11px; line-height: 1.7; }   /* the lists of offers sit level across the three */
.practice .go { position: absolute; right: 16px; top: 20px; font-size: 24px; transform: translate(-12px, 0); opacity: 0; }
@media (hover: hover) {
  .practice:hover::before { transform: scaleY(1); }
  .practice:hover, .practice:hover p, .practice:hover p b { color: var(--char); }
  .practice:hover .go { transform: none; opacity: 1; }
}
@media (min-width: 760px) {
  .practices { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .practice { padding: 24px 18px 26px; margin: 0 -18px; }
  .practice::after { left: 18px; right: 18px; }
  .practice .top { display: block; margin-bottom: 14px; }
  .practice h3 { font-size: clamp(21px, 2.6vw, 40px); }   /* small enough at a tablet's width that each name keeps to one line, so the three texts start level */
}

/* Figures */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.figure { border-top: 1px solid var(--line); padding-top: 18px; }
.figure .num { font-size: clamp(52px, 6.4vw, 112px); font-weight: 500; letter-spacing: -0.055em; line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; margin-top: clamp(28px, 6vh, 72px); }
.figure p { margin: 14px 0 0; color: var(--mute); max-width: 22em; }
.figure p b { color: var(--bone); font-weight: 500; }

.steps h3 em { color: var(--yellow); }   /* the italic part of each term, on the home page and the practice pages */

/* Icons: line drawings on a 24 by 24 grid (render.mjs, ICONS), in the colour of the text around them. The line keeps
   one weight whatever size the icon is drawn at. */
.ico { display: block; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; overflow: visible; }
.ico * { vector-effect: non-scaling-stroke; }
.steps .ico { width: 38px; height: 38px; margin: 0 0 18px -2px; }
.practice .ico { flex: none; width: 34px; height: 34px; }
@media (min-width: 760px) { .practice .ico { width: clamp(34px, 2.8vw, 42px); height: clamp(34px, 2.8vw, 42px); margin: 0 0 clamp(14px, 1.4vw, 20px) -3px; } }

/* Work page: large stills on an even two-column grid */
.intro-line { margin: 0 0 clamp(36px, 7vh, 80px); font-size: clamp(18px, 1.7vw, 25px); line-height: 1.35; max-width: 34em; color: var(--mute); }
.intro-line b { color: var(--bone); font-weight: 400; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); row-gap: clamp(48px, 9vh, 110px); }
.card { display: block; }
.card.hide { display: none; }
.shot { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; border-radius: 10px; background: #111; }
.js .shot { clip-path: inset(0 0 100% 0 round 10px); transition: clip-path 1.5s var(--ease); }
.js .card.in .shot { clip-path: inset(0 0 0 0 round 10px); }
.shot .zoom { position: absolute; inset: 0; transition: transform 1.8s var(--ease); }
.js .shot .zoom { transform: scale(1.18); }
.js .card.in .shot .zoom { transform: none; }
.shot img { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; object-fit: cover; display: block; filter: saturate(0.78) brightness(0.86); transition: filter 0.8s ease; will-change: transform; }
.shot .blank { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; text-align: center; background: #151515; }
.shot .blank span { font-size: clamp(26px, 3.6vw, 60px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; color: rgba(236, 235, 230, 0.32); }
.shot .chip { position: absolute; left: 12px; top: 12px; padding: 7px 10px; border-radius: 999px; background: rgba(20, 20, 20, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--bone); font-size: 11px; }
.cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; padding-top: 18px; align-items: baseline; }
.cap h2, .cap h3 { margin: 0; font-size: clamp(24px, 2.8vw, 44px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; transition: color 0.3s; }
.cap .badge { font-size: 11px; text-align: right; }
.cap p { grid-column: 1 / -1; margin: 0; color: var(--mute); max-width: 30em; }
@media (hover: hover) { .card:hover .shot img { filter: none; } .js .card.in:hover .shot .zoom { transform: scale(1.04); transition-duration: 1.2s; } .card:hover h3 { color: var(--yellow); } }
.all { display: inline-flex; margin-top: clamp(40px, 8vh, 90px); }

/* Selected work, on the home page and the service pages: cards side by side, each its picture, name, a line and a
   foot with the badge and an arrow. Two across from a small tablet, three on a wide window; exactly four go two and
   two, then all four in a row. They scroll with the page: nothing sticks or stacks. On a phone they are one row,
   swiped sideways (below). */
.feats, .feats-foot { grid-column: 1 / -1; }
.feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 7vh, 64px) var(--gap); }
.feat { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; }
.js .feat.in .shot { clip-path: inset(0 0 0 0 round 10px); }
.js .feat.in .shot .zoom { transform: none; }
.feat .shot .chip { max-width: calc(100% - 24px); border-radius: 12px; line-height: 1.35; }   /* a long credit takes two lines on a small card */
.feat .info { display: flex; flex-direction: column; min-width: 0; }
.feat .info > div { display: flex; flex-direction: column; height: 100%; }
.feat h3 { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; transition: color 0.3s; }
.feat p { margin: 0 0 16px; color: var(--mute); max-width: 26em; font-size: 15.5px; line-height: 1.45; }
.feat .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }   /* the feet sit level across a row */
.feat .badge { color: var(--bone); font-size: 11px; }
.feat .go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(236, 235, 230, 0.1); transition: transform 0.5s var(--ease), background 0.3s, color 0.3s; }
@media (hover: hover) { .feat:hover .shot img { filter: none; } .js .feat.in:hover .shot .zoom { transform: scale(1.04); transition-duration: 1.2s; } .feat:hover h3 { color: var(--yellow); } .feat:hover .go { background: var(--yellow); color: var(--char); transform: translateX(4px); } }
/* On a phone the cards are one row that is swiped sideways, each settling at the page margin, with the next card
   showing at the edge so it is plain there are more. The row runs to both edges of the screen. Cards in the row are
   drawn at once: one waiting off to the side would otherwise arrive blank and fade in under the thumb. */
@media (max-width: 699px) {
  .feats { display: flex; gap: 14px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .feats::-webkit-scrollbar { display: none; }
  .feat { flex: 0 0 82%; scroll-snap-align: start; }
  .feats[data-n="1"] .feat { flex-basis: 100%; }
  .js .feat.rv { opacity: 1; transform: none; }
  .js .feat .shot { clip-path: inset(0 0 0 0 round 10px); }
  .js .feat .shot .zoom { transform: none; }
}
@media (min-width: 700px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feats[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .feats[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .feats[data-n="4"] .feat h3 { font-size: clamp(24px, 1.7vw, 30px); } .feats[data-n="4"] .feat p { font-size: 15px; } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(36px, 7vh, 72px); }
.filters button { font: 400 11.5px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 11px 15px; cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s; }
.filters button:hover { color: var(--bone); border-color: rgba(236, 235, 230, 0.5); }
.filters button.on { background: var(--yellow); border-color: var(--yellow); color: var(--char); }
.no-js .filters { display: none; }

/* A project page */
.film-wrap { padding: clamp(8px, 3vw, 52px) var(--pad) clamp(48px, 9vh, 110px); }   /* a little more air between a project's opening words and its film */
.film { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; }
.film iframe, .film img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
/* a player whose video is not 16:9 takes the video's shape, so the player has no bars to fill; an upright one stays within the screen's height */
.film.is-shaped { aspect-ratio: var(--ratio, 16 / 9); width: min(100%, calc(84svh * var(--ratio, 1.778))); margin-inline: auto; }
.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap); align-items: start; }
.prose p { margin: 0 0 1.1em; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; max-width: 34em; color: rgba(236, 235, 230, 0.9); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { margin: 2em 0 0.7em; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; max-width: 26em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.4em; padding: 0; list-style: none; max-width: 46em; }
.prose li { border-top: 1px solid var(--line); padding: 12px 0; color: rgba(236, 235, 230, 0.82); }
.prose li:last-child { border-bottom: 1px solid var(--line); }
.prose a:not(.btn) { color: var(--yellow); }
.results ul, .points { list-style: none; margin: 0; padding: 0; }
.results li { border-top: 1px solid var(--line); padding: 14px 0; font-size: clamp(16px, 1.3vw, 19px); }
.results li:last-child { border-bottom: 1px solid var(--line); }

/* A project's gallery, and the team list on the About page */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); padding: 0 var(--pad) clamp(72px, 13vh, 170px); }
.gallery figure { margin: 0; border-radius: 10px; overflow: hidden; background: #111; }
.gallery img { display: block; width: 100%; height: auto; }
/* A page shown live in place of the header picture: taller than a film, and scrolled inside */
.film.frame { aspect-ratio: auto; height: clamp(440px, 84svh, 920px); }
.frame-note { margin: 14px 0 0; }

/* A picture that opens in the viewer */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; }
.zoom img { transition: transform 0.9s var(--ease); }
.zoom:hover img { transform: scale(1.015); }
.zoom:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
.film .zoom { position: absolute; inset: 0; height: 100%; }

/* The image viewer. Swipes in it are the page's own: sideways between pictures, down to close. */
.viewer { position: fixed; inset: 0; z-index: 25; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 14px var(--pad) 18px; background: rgba(20, 20, 20, 0.97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); touch-action: none; overflow: hidden; }
.viewer[hidden] { display: none; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.viewer-actions { display: flex; gap: 8px; }
.vpill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(236, 235, 230, 0.05); color: var(--bone); font: 600 13.5px/1 var(--sans); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.vpill.mono { font: 400 11.5px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute); padding: 11px 15px; }
button.vpill { cursor: pointer; transition: border-color 0.3s, background 0.3s; }
button.vpill:hover { border-color: rgba(236, 235, 230, 0.5); }
.vpill .ic { display: inline-flex; }
.vpill[hidden] { display: none; }
/* The picture fits the space under the bar, whole, and stays clear of the arrows on either side. The stage's one
   grid cell has a definite size, so the picture's 100% limits resolve against it. */
.viewer-stage { --nav-room: calc(52px + 20px); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; margin: 12px var(--nav-room); }
.viewer-stage img { display: block; max-width: min(100%, 1800px); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; cursor: zoom-in; will-change: transform; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.viewer.zoomed .viewer-stage img { cursor: grab; }
.viewer.panning .viewer-stage img { cursor: grabbing; }
.viewer-nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--char); background: var(--bone); cursor: pointer; transition: transform 0.25s var(--ease), background 0.2s, opacity 0.25s var(--ease); }
.viewer-nav svg { width: 20px; height: 20px; stroke-width: 2; }
.viewer-nav:hover { background: var(--yellow); transform: scale(1.06); }
/* Their own names: a bare .next is the "Next project" link, and its layout was bending the right arrow */
.viewer-prev { left: var(--pad); }
.viewer-next { right: var(--pad); }
.viewer-nav[hidden] { display: none; }
.viewer.zoomed .viewer-nav { opacity: 0; pointer-events: none; }

/* A clip or a player in the gallery. It starts at 16:9; a looping clip takes its own shape once it has loaded. */
.gallery .vid { position: relative; aspect-ratio: 16 / 9; }
.gallery .vid video, .gallery .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
/* Who runs it, on the About page. The heading and the words are on the left; the portrait stands on the right beside
   both, starting level with the heading, so the space next to the heading is not left empty. The portrait is the whole
   bust, cut out with no background, uncropped and with no fade, toned down a little because its white cloth is
   otherwise the brightest thing on the page. The picture file has empty space above the head (about 15% of its
   width), so it is pulled up by nearly that much to bring the head itself level with the heading. On a phone the
   portrait sits between the heading and the words, smaller. */
.founder.with-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-rows: auto 1fr; column-gap: var(--gap); align-items: start; }
.founder.with-photo .sec-head, .founder.with-photo .prose { grid-column: 1; }
.portrait { grid-column: 2; grid-row: 1 / span 2; display: block; width: 100%; height: auto; margin-top: -13%; filter: brightness(0.9) saturate(0.92); }
@media (max-width: 699px) {
  .founder.with-photo { grid-template-columns: minmax(0, 1fr); }
  .portrait { grid-column: 1; grid-row: auto; max-width: 260px; margin: -4% 0 26px; }
}
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 5vh, 48px) var(--gap); }
.team li { border-top: 1px solid var(--line); padding-top: 16px; }
.team img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 14px; filter: saturate(0.8); }
.team b { display: block; font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.02em; }
.team .mono { display: block; margin-top: 4px; }

/* Large names: products on the home page, the next project */
.products a, .next { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.products .name, .next .name { font-size: clamp(44px, 8.6vw, 150px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; color: var(--bone); transition: color 0.5s, transform 0.7s var(--ease); }
.next .name { font-size: clamp(40px, 6.6vw, 116px); }
.products .what, .next .what { color: var(--mute); max-width: 22em; text-align: right; font-size: 15px; }
@media (hover: hover) { .products a:hover .name, .next:hover .name { color: var(--yellow); transform: translateX(16px); } }

/* The products page: a grid of cards, each its picture, name, words, list and links. One across on a phone, two from
   a small tablet, three on a wide window. A product with a long list (spread) leads across the full width, with its
   list in columns beside it. */
.prods { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 8vh, 84px) var(--gap); }
.product { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 110px; }
.product .name { margin: 0 0 12px; font-size: clamp(28px, 2.9vw, 34px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.product p { margin: 0 0 1em; font-size: 16.5px; line-height: 1.5; max-width: 34em; }
.product .pshot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 20px; background: #111; }
.points { margin: 4px 0 20px; font-size: 14.5px; }
.points li { border-top: 1px solid var(--line); padding: 10px 0; color: var(--mute); }
.points li b { color: var(--bone); font-weight: 500; margin-right: 6px; }
/* A product's name, picture and each tool in its list open that product's page under Work. A tool's whole row is the link. */
.product .name a { transition: color 0.5s; }
.product .pshot-link { display: block; }
.points li a { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: -10px 0; padding: 10px 0; }
.points li a b { transition: color 0.3s; }
.points li a .ar { flex: none; color: var(--bone); transition: transform 0.5s var(--ease); }
.product .plinks { display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0; padding-top: 4px; }   /* the links sit at the foot of the card, level across a row */
@media (hover: hover) { .product .name a:hover, .points li a:hover b { color: var(--yellow); } .points li a:hover .ar { transform: translateX(4px); } }
@media (min-width: 700px) {
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product.spread { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap); }
  .product.spread .pinfo { grid-column: 1; grid-row: 1; }
  .product.spread .plinks { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
  /* the list beside the picture: its lines are under each tool, so a second column starts level with the first */
  .product.spread .points { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: -10px 0 0; }
  .product.spread .points li { border-top: 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
}
@media (min-width: 1100px) {
  .prods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product .name { font-size: 28px; }
  .product p { font-size: 16px; }
  .product.spread { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product.spread .points { grid-column: 2 / span 2; columns: 2; column-gap: var(--gap); }
}

/* Practice pages: a large heading over each section, then offers, steps, questions */
.sec-head { margin: 0 0 clamp(30px, 6vh, 70px); font-size: clamp(40px, 6.6vw, 112px); font-weight: 500; line-height: 0.94; letter-spacing: -0.05em; }
.sec-head em { font-size: 1.06em; letter-spacing: -0.03em; }
.sec-head + .feats { margin-top: 0; }

/* Offers stand side by side: two across from a small tablet, three on a wide window, one under another on a phone
   (with a string between them). An offer is its pane, then its name, then its words, and the three line up across a
   row: each offer borrows the grid's rows (subgrid), so the panes in a row share one height and the names sit level.
   The row nearest the middle of the screen is lit and its models play; the other rows step back. */
.offer { padding: clamp(26px, 5vh, 44px) 0; }
.offer h3 { margin: 0 0 22px; font-size: clamp(28px, 7.4vw, 32px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.offer p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 34em; }
.offer .note { margin-top: 12px; color: var(--mute); font-size: 14.5px; }
.offer .pane { margin: 0 0 20px; }
@media (min-width: 700px) {
  /* the space between rows is under each offer's words, not a row gap: a gap would also open between the name and the words */
  .offers { --row: clamp(48px, 8vh, 84px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; margin-bottom: calc(-1 * var(--row)); }
  .offers > .string { display: none; }
  .offer { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 3; padding: 0; }
  .offer .pane { grid-row: 1; align-self: stretch; display: grid; margin: 0 0 22px; }
  .offer .pane .model { min-height: 100%; }
  .offer h3 { grid-row: 2; margin: 0 0 10px; font-size: clamp(24px, 2.7vw, 30px); }
  .offer .words { grid-row: 3; padding-bottom: var(--row); }
  .offer p { font-size: 16.5px; }
  .js .offer h3, .js .offer .words { opacity: 0.62; transition: opacity 0.6s ease; }
  .js .offer.on h3, .js .offer.on .words { opacity: 1; }
  /* the pane wipes in once, when its row arrives, as the stills on the Work page do */
  .js .offer .pane { clip-path: inset(0 0 100% 0 round 10px); transition: clip-path 1.2s var(--ease) 0.1s, opacity 0.6s ease; }
  .js .offer.in .pane { clip-path: inset(0 0 0 0 round 10px); }
  /* the row in focus has its pictures in full colour and its models awake */
  .js .offer.on .pic img { filter: none; }
  .js .offer:not(.on) .pane:not(.pics) { opacity: 0.7; }
}
@media (min-width: 1100px) {
  .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer h3 { font-size: 28px; }
  .offer p { font-size: 16px; }
}
/* exactly four offers would leave one alone on a second row of three: they go two and two, then all four in a row */
@media (min-width: 1100px) { .offers[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .offers[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .offers[data-n="4"] .offer h3 { font-size: 25px; } .offers[data-n="4"] .offer p { font-size: 15.5px; } }

/* A pane holds pictures of the work or a small working model. Pictures keep their own shape, so nothing is cropped
   to fill a tall box; a model is as tall as its contents and sized to the pane, not to the window. */
.pane { position: relative; border-radius: 10px; overflow: hidden; background: #111; container-type: inline-size; }
.pane.pics { aspect-ratio: 16 / 10; }
/* The next picture fades in over the last, which stays solid underneath, so the frame never dips to dark */
.pic { position: absolute; inset: 0; display: block; opacity: 0; background: #111; }
.pic.prev { opacity: 1; z-index: 1; }
.pic.on { opacity: 1; z-index: 2; transition: opacity 1.2s ease; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: saturate(0.78) brightness(0.86); transition: transform 7s linear, filter 0.8s ease; will-change: transform; }
.js .pic img { transform: scale(1.05); }
.js .pic.on img { transform: none; }
@media (hover: hover) { .pic:hover img { filter: none; } }
/* no blur behind these labels: a blurred backdrop inside a pane that is fading or wiping in flickers */
.pic .chip { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); padding: 7px 10px; border-radius: 999px; background: rgba(20, 20, 20, 0.84); color: var(--bone); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pic .chip.go { top: auto; bottom: 12px; }
.pic .chip b { font-weight: 400; margin-left: 4px; }
/* in a narrow pane a credit runs onto a second line and keeps all its words: it says whose work the picture is */
@container (max-width: 440px) { .pic .chip { white-space: normal; border-radius: 12px; line-height: 1.35; } }

/* Working models. A row or a line shows once the model carries its class (s1, s2, ...); the page is written with all
   of them, so the finished state is what shows without scripts or with reduced motion. */
.model { position: relative; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.9cqw, 16px); padding: clamp(14px, 5cqw, 44px); background: #141414; font-size: clamp(12px, 2.15cqw, 17px); line-height: 1.4; }
.model p { margin: 0; font-size: inherit; line-height: inherit; max-width: none; }
.model .mh, .model .foot { display: flex; justify-content: space-between; gap: 16px; }
.model .mh { padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.model > :not(.mh) { transition: opacity 0.4s ease; }
.model .foot { padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--line); opacity: 0; }
.model .foot b { font-weight: 400; color: var(--yellow); white-space: nowrap; }
.model.rest > :not(.mh) { opacity: 0 !important; }   /* a breath between one run of a model and the next */
.model.snap, .model.snap *, .model.snap *::before, .model.snap *::after { transition: none !important; }   /* set back to the start in one step, while faded out */
.model .r, .m-cto .d { opacity: 0.26; transition: opacity 0.5s ease; }
.model .r i { font-style: normal; font-size: 10px; text-align: right; opacity: 0; transition: opacity 0.4s ease; }
.model.s1 .r1, .model.s2 .r2, .model.s3 .r3, .model.s4 .r4, .model.s1 .r1 i, .model.s2 .r2 i, .model.s3 .r3 i, .model.s4 .r4 i { opacity: 1; }
.m-doc.s5 .foot, .m-ops.s5 .foot, .m-cto.s5 .foot, .m-train.s5 .foot, .m-agent.s4 .foot { opacity: 1; }

.m-doc .r { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 14px; align-items: baseline; }
.m-doc .bad i { color: var(--yellow); }
.m-doc [lang="ar"] { font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", sans-serif; line-height: 1.6; }
.m-doc mark { padding: 0 0.15em; border-radius: 3px; background: transparent; color: inherit; transition: background 0.4s ease, color 0.4s ease; }
.m-doc.s2 mark { background: var(--yellow); color: var(--char); }
@container (max-width: 520px) {   /* in a narrow pane the Arabic sits under the English */
  .m-doc .r { grid-template-columns: 26px minmax(0, 1fr) 36px; gap: 2px 12px; }
  .m-doc .r p[lang="ar"] { grid-column: 2; grid-row: 2; }
  .m-doc .r i { grid-column: 3; grid-row: 1; }
}

.m-agent .mh [data-k="who"] { color: var(--yellow); }   /* which agent is answering: the one accent in this model, as "For review" and "Approved" are in the others */
.m-agent .thread { display: flex; flex-direction: column; gap: 12px; min-height: 13em; justify-content: center; }
.m-agent .thread p { max-width: 86%; padding: 12px 16px; border-radius: 16px; opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.7s var(--ease); }
.m-agent .q { align-self: flex-start; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.m-agent .reply { display: grid; justify-items: end; align-items: start; }
.m-agent .reply > * { grid-area: 1 / 1; }
.m-agent .a { background: var(--bone); color: var(--char); border-bottom-right-radius: 4px; }
.m-agent .typing { display: flex; gap: 5px; border: 1px solid var(--line); border-bottom-right-radius: 4px; }
.m-agent .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); animation: beat 1s infinite; }
.m-agent .typing i:nth-child(2) { animation-delay: 0.15s; }
.m-agent .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes beat { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.m-agent.s1 .q, .m-agent.s2 .typing, .m-agent.s3 .a { opacity: 1; transform: none; }
.m-agent.s3 .typing { opacity: 0; }

.m-ops .days, .m-ops .lane { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); align-items: center; }
.m-ops .days { grid-template-columns: 5.4em repeat(5, minmax(0, 1fr)); font-size: 10px; }
.m-ops .track { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.m-ops .track i { height: 1.5em; border-radius: 4px; background: rgba(236, 235, 230, 0.2); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--ease), background 0.5s ease, box-shadow 0.5s ease; }
.m-ops .track i + i { transition-delay: 0.15s, 0s, 0s; }
.m-ops .track .ask { background: transparent; box-shadow: inset 0 0 0 1px rgba(236, 235, 230, 0.6); }   /* a request waiting for a person */
.m-ops .lane > span { opacity: 0.26; transition: opacity 0.5s ease; }
.m-ops.s1 .l1 > span, .m-ops.s2 .l2 > span, .m-ops.s3 .l3 > span, .m-ops.s4 .l4 > span { opacity: 1; }
.m-ops.s1 .l1 i, .m-ops.s2 .l2 i, .m-ops.s3 .l3 i, .m-ops.s4 .l4 i { transform: none; }
.m-ops.s5 .track .ask { background: var(--yellow); box-shadow: none; }

.m-cto .d, .m-host .d { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.m-cto .opt { display: flex; gap: 6px; }
.m-cto .opt b { font-weight: 400; padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; transition: border-color 0.5s ease, color 0.5s ease, opacity 0.5s ease; }
.m-cto.s1 .d1, .m-cto.s2 .d2, .m-cto.s3 .d3, .m-cto.s4 .d4 { opacity: 1; }
.m-cto.s1 .d1 .pick, .m-cto.s2 .d2 .pick, .m-cto.s3 .d3 .pick, .m-cto.s4 .d4 .pick { border-color: rgba(236, 235, 230, 0.6); color: var(--bone); }
.m-cto.s1 .d1 b:not(.pick), .m-cto.s2 .d2 b:not(.pick), .m-cto.s3 .d3 b:not(.pick), .m-cto.s4 .d4 b:not(.pick) { opacity: 0.4; }

.m-train .r { display: grid; grid-template-columns: 30px minmax(0, 1fr) 40px; gap: 14px; align-items: baseline; position: relative; padding-bottom: 10px; }
.m-train .r::before, .m-train .r::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.m-train .r::after { background: rgba(236, 235, 230, 0.75); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease); }   /* each stage's line fills as the stage is done */
.m-train.s1 .r1::after, .m-train.s2 .r2::after, .m-train.s3 .r3::after, .m-train.s4 .r4::after { transform: none; }

.m-host .pulse { display: block; width: 100%; height: clamp(50px, 9vh, 90px); overflow: visible; }
.m-host .pulse path { fill: none; stroke: rgba(236, 235, 230, 0.6); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.m-host .clock { font-weight: 400; color: var(--bone); font-variant-numeric: tabular-nums; }
.m-host .d { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.7s var(--ease); }
.m-host .d .mono::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--bone); vertical-align: 1px; animation: beat 2.4s infinite; }
.m-host.s1 .d1, .m-host.s2 .d2, .m-host.s3 .d3, .m-host.s4 .d4 { opacity: 1; transform: none; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 7vh, 72px) var(--gap); }
.steps li { position: relative; padding-top: clamp(26px, 4.5vh, 44px); }
.steps li::before, .steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.steps li::after { background: rgba(236, 235, 230, 0.75); transform-origin: 0 50%; transition: transform 1.2s var(--ease); }   /* the rule draws across as the step arrives */
.js .steps li::after { transform: scaleX(0); }
.js .steps li.on::after { transform: none; }
.steps li:nth-child(even)::after { transition-delay: 0.18s; }
/* On the home page and the service pages the steps go three across, then all in one row where the page is wide (abreast) */
@media (min-width: 900px) { .steps.abreast { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps.abreast p { font-size: 15.5px; } }
@media (min-width: 1240px) { .steps.abreast { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps.abreast:has(li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .steps.abreast p { font-size: 15px; } }
.steps h3 { margin: 0 0 14px; font-size: clamp(26px, 3vw, 50px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.steps p { margin: 0; color: var(--mute); max-width: 26em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; cursor: pointer; list-style: none; padding: 24px 0; font-size: clamp(20px, 2.2vw, 34px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { color: var(--yellow); font-weight: 400; transition: transform 0.4s var(--ease); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p { margin: 0 0 26px; color: var(--mute); font-size: clamp(17px, 1.4vw, 20px); max-width: 36em; }

/* Recognition */
.awards { margin: 0; padding: 0; list-style: none; }
.awards li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) 60px; gap: var(--gap); padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.awards li:first-child { border-top: 1px solid var(--line); }
.awards .a { font-size: clamp(18px, 1.9vw, 28px); letter-spacing: -0.02em; font-weight: 500; }
.awards .p { color: var(--mute); }
.awards .y { text-align: right; color: var(--yellow); }

/* Testimonials on the About page */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vh, 64px) var(--gap); }
.quote { margin: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.quote blockquote { margin: 0 0 20px; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; }
.quote figcaption b { display: block; font-weight: 500; }
.quote figcaption .mono { display: block; margin-top: 4px; }

/* Contact */
/* The form, the portfolio's way: boxed fields two to a row, then the code step, then the thank-you */
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-content: start; max-width: 760px; }
.field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.field.half { grid-column: span 1; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; background: rgba(236, 235, 230, 0.05); color: var(--bone); border: 1px solid var(--line); border-radius: 12px; font: 400 16px/1.4 var(--sans); outline: none; transition: border-color 0.2s, background-color 0.2s; }
/* Our own chevron: the native one sits hard against the right edge in Safari */
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ecebe6' stroke-opacity='0.66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; background-size: 12px 8px; }
.field select option { background: var(--char); color: var(--bone); }
.field textarea { resize: vertical; min-height: 150px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(236, 235, 230, 0.36); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(236, 235, 230, 0.3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--yellow); background-color: rgba(236, 235, 230, 0.08); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.form-status { margin: 0; font-size: 15px; color: rgba(236, 235, 230, 0.86); }
.form button:disabled { opacity: 0.6; cursor: default; }
/* The second step: the message waits while the sender fetches the code from their inbox */
.verify, .sent { display: none; grid-column: 1 / -1; }
.form[data-step] > :not(.verify, .sent) { display: none; }
.form[data-step="verify"] .verify { display: grid; gap: 18px; }
.verify-lead { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; max-width: 36ch; color: rgba(236, 235, 230, 0.86); }
.verify-lead strong, .sent-text strong { font-weight: 500; color: var(--bone); overflow-wrap: anywhere; }
.verify-code input { max-width: 260px; font-family: var(--mono); font-size: 24px; letter-spacing: 0.3em; }
.verify-help { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mute); }
.text-btn { padding: 0; border: 0; border-bottom: 1px solid var(--yellow); background: none; color: var(--bone); font: inherit; cursor: pointer; transition: color 0.2s; }
.text-btn:hover { color: var(--yellow); }
/* Sent: the form gives way to a thank-you by name, so a sent message can't pass unnoticed. The check pops in and draws. */
.form[data-step="sent"] .sent { display: grid; justify-items: start; align-content: start; animation: sent-in 0.6s var(--ease) both; }
.sent { scroll-margin-top: 120px; }   /* taking focus scrolls it into view, clear of the header */
.sent:focus { outline: none; }
.sent-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 26px; border-radius: 50%; background: var(--yellow); color: var(--char); animation: sent-pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s both; }
.sent-mark path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: sent-draw 0.4s var(--ease) 0.4s forwards; }
.sent-title { margin: 0 0 18px; font-size: clamp(44px, 4.8vw, 72px); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; }
.sent-text { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; max-width: 34ch; color: rgba(236, 235, 230, 0.86); }
.sent-more { margin: 28px 0 0; font-size: 15px; }
@keyframes sent-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes sent-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes sent-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sent-mark path { stroke-dashoffset: 0; } }
@media (max-width: 599px) { .field.half { grid-column: 1 / -1; } }
.direct { margin: clamp(36px, 7vh, 64px) 0 0; color: var(--mute); }
.direct a { color: var(--yellow); }

/* Closing: yellow floods out from the button */
.closing { position: relative; background: var(--yellow); color: var(--char); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; min-height: 92svh; padding: clamp(72px, 13vh, 170px) var(--pad); }
.closing h2 { margin: 0; font-size: clamp(40px, 7.4vw, 128px); font-weight: 500; line-height: 0.93; letter-spacing: -0.055em; max-width: 9.5em; }
.inner .closing { min-height: 70svh; }
.magnet { display: grid; place-items: center; text-align: center; width: clamp(150px, 16vw, 230px); aspect-ratio: 1; border-radius: 50%; background: var(--char); color: var(--yellow); font-weight: 600; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.15; will-change: transform; }

/* Footer */
.cols { display: grid; grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2fr)); gap: var(--gap); padding: clamp(56px, 10vh, 120px) var(--pad) 0; }
.cols .line1 { font-size: clamp(22px, 2.4vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
.cols .line1 em { color: var(--yellow); }
.cols .places { display: block; margin-top: 18px; letter-spacing: 0.09em; }
.cols .head { margin: 0 0 14px; }
.cols a { display: block; padding: 3px 0; color: var(--bone); opacity: 0.85; }
.cols a:hover { opacity: 1; color: var(--yellow); }
footer { padding: 28px var(--pad) 44px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer button { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* Every page except the home page reads in a narrower column: the side margins grow on a wide screen so the words and
   the media never run wider than 1000px. The header, the lines between sections, the closing and the footer stay full
   width. Headings here are sized by the window, so on a wide screen they are capped to suit the column. */
.inner main { --pad: max(clamp(20px, 4vw, 56px), calc(50vw - 500px)); }
.inner.broad main { --pad: max(clamp(20px, 4vw, 56px), calc(50vw - 660px)); }   /* the service pages are laid out in columns, so their column is 1320px */
.inner .closing { --pad: clamp(20px, 4vw, 56px); }
.inner .sec { grid-template-columns: minmax(0, 1fr); }   /* on a project page the back link sits above the story, which then has the whole column */
.inner .label { position: static; margin-bottom: 28px; }
.inner main .page-hero h1 { font-size: clamp(46px, 9vw, 112px); }
.inner main .sec-head { font-size: clamp(40px, 6.6vw, 84px); }
.inner main .steps h3 { font-size: clamp(26px, 3vw, 38px); }
@media (min-width: 900px) { .inner main .steps.abreast h3 { font-size: clamp(22px, 2.3vw, 28px); } }
@media (min-width: 1240px) { .inner main .steps.abreast h3 { font-size: 23px; } }
@media (min-width: 1240px) { .inner main .feats[data-n="4"] .feat h3 { font-size: 24px; } }   /* four cards in the service pages' column are narrower than the home page's */
.inner main .cap h2, .inner main .cap h3 { font-size: clamp(24px, 2.8vw, 34px); }
.inner main .next .name { font-size: clamp(40px, 6.6vw, 80px); }
.inner main .say { font-size: clamp(28px, 4.3vw, 54px); }
.inner main .faq summary { font-size: clamp(20px, 2.2vw, 27px); }

/* The home page keeps the full width; its display type and the space between its sections are set here, about a
   fifth under the sizes the same parts would otherwise take. */
.home .sec { padding-top: clamp(44px, 6.5vh, 76px); padding-bottom: clamp(44px, 6.5vh, 76px); }
.home .sec-head { font-size: clamp(36px, 5vw, 84px); margin-bottom: clamp(22px, 3.2vh, 36px); }
.home .marquee .track { font-size: clamp(30px, 4.6vw, 76px); }
.home .say { font-size: clamp(26px, 3.4vw, 56px); }
.home .intro-line { font-size: clamp(17px, 1.4vw, 21px); margin-bottom: clamp(24px, 3.5vh, 40px); }
.home .steps h3 { font-size: clamp(24px, 2.1vw, 34px); }
@media (min-width: 900px) { .home .steps.abreast h3 { font-size: clamp(22px, 2.3vw, 30px); } }
@media (min-width: 1240px) { .home .steps.abreast h3 { font-size: clamp(22px, 1.75vw, 30px); } }
.home .all { margin-top: clamp(28px, 4.5vh, 48px); }
.home .closing { min-height: 56svh; }

@media (max-width: 1180px) {
  .pill { display: none; }
  header { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-flex; }
  .no-js .menu-btn { display: none; }
}
@media (max-width: 760px) { header .cta { display: none; } }   /* the header keeps its button for as long as it has room */
/* On a touch screen everything that is pressed is at least 40px tall */
@media (hover: none) {
  header .sound, header .menu-btn { min-height: 40px; }
  .filters button { padding-top: 13px; padding-bottom: 14px; }
  .cols a { padding: 9px 0; }
  .label a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  footer button { padding: 12px 0; margin: -12px 0; }
}
@media (max-width: 860px) {
  .brand img { width: 50px; height: 50px; }
  .mark { top: 37%; right: var(--pad); --mk: 68vw; }
  .hero .foot { grid-template-columns: 1fr; }
  .actions { justify-content: flex-start; }
  .meta { flex-wrap: wrap; gap: 6px 18px; }
  .sec { grid-template-columns: 1fr; }
  .label { position: static; margin-bottom: 28px; }
  .figures { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .products a, .next { flex-direction: column; gap: 6px; padding-bottom: 20px; }
  .products .what, .next .what { text-align: left; }
  .awards li { grid-template-columns: 1fr 50px; gap: 4px 16px; }
  .awards .p { grid-column: 1; grid-row: 2; }
  .closing { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr 1fr; }
  .cols .line1 { grid-column: 1 / -1; }
  .story, .quotes { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  /* a framed page leaves room above and below it, so a thumb can still scroll the page past it */
  .film.frame { height: 72svh; }
  /* On a phone the arrows sit under the picture, so the picture can use the full width */
  .viewer { padding-bottom: 68px; }
  .viewer-stage { --nav-room: 0px; }
  .viewer-nav { top: auto; bottom: 12px; margin-top: 0; width: 44px; height: 44px; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { gap: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .grain { animation: none; }
  .say .w { opacity: 1 !important; }
  @view-transition { navigation: none; }
}
/* the terms stay two across down to a small tablet, then stack: on a phone a step's icon stands beside its words, and the steps sit closer */
@media (max-width: 599px) {
  .steps { grid-template-columns: 1fr; row-gap: 26px; }
  .steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; padding-top: 24px; }
  .steps li > * { grid-column: 2; }
  .steps li > .ico { grid-column: 1; grid-row: 1 / span 2; margin: 2px 0 0 -2px; }
  .steps li:not(:has(.ico)) > * { grid-column: 1 / -1; }
}

/* ---------- Cards ----------
   Every grid of items is a grid of cards, in one style: the home practices and steps, the offers, selected work, the
   products and the Work page. A card is a faint lighter surface under a hairline, with no shadow. A picture or a
   working model is framed inside it, a little in from the edge, and the two corner curves share a centre (18 less 8
   is 10, the pictures' own radius). Cards sit one gutter apart in both directions. This block is last in the file
   on purpose: it restyles parts that are laid out above, and taking it out returns every grid to bare items. */
:root { --card: rgba(236, 235, 230, 0.04); --card-line: rgba(236, 235, 230, 0.08); --card-r: 18px; --card-in: 8px; --card-gap: 18px; --card-text: 14px; }
.practice, .steps li, .offer, .feat, .product, .card { background-color: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-r); }
@media (hover: hover) { a.practice:hover, a.feat:hover, a.card:hover { border-color: rgba(236, 235, 230, 0.26); } }

/* practices: the yellow that rises under the pointer fills the card */
.practices { gap: 12px; }
.practice { margin: 0; padding: 20px 18px 20px; }
.practice::after { display: none; }
.practice .go { right: 20px; top: 20px; }
@media (min-width: 760px) {
  .practices { gap: var(--card-gap); }
  .practice { margin: 0; padding: 24px 22px 22px; }
  .sec.duo { column-gap: var(--card-gap); }   /* the statement starts where the second card starts */
}

/* steps: the card's own edge stands in for the rule that used to draw across */
.steps { gap: var(--card-gap); }
.steps li { padding: 22px 20px 24px; }
.steps li::before, .steps li::after { display: none; }
@media (max-width: 599px) { .steps { row-gap: 12px; } .steps li { padding: 18px 16px 20px; } }

/* offers: the pane is framed at the top of the card. The space between rows is a margin under each card, because the
   offers borrow the grid's rows and a row gap would open inside them too. */
.offers > .string { display: none; }
.offer { padding: var(--card-in); margin-bottom: 12px; }
.offer h3 { margin: 12px var(--card-text) 14px; }
.offer .pane { margin: 0 0 16px; }
.offer .words { padding: 0 var(--card-text) 14px; }
@media (min-width: 700px) {
  .offers { --row: var(--card-gap); column-gap: var(--card-gap); }
  .offer { padding: var(--card-in); margin-bottom: var(--row); }
  .offer .pane { margin: 0 0 16px; }
  .offer h3 { margin: 0 var(--card-text) 10px; }
  .offer.plain h3 { margin-top: 12px; }
  .offer .words { padding: 0 var(--card-text) 16px; }
}

/* selected work and the Work page */
.feats, .cards { gap: var(--card-gap); }
.feat { padding: var(--card-in); gap: 0; }
.feat .info { padding: 16px var(--card-text) 8px; }
.card { padding: var(--card-in); }
.card .cap { padding: 16px var(--card-text) 12px; }

/* products */
.prods { gap: var(--card-gap); }
.product { padding: var(--card-in); }
.product .pshot { margin-bottom: 16px; }
.product .name, .product .pinfo > p, .product > .points { margin-left: var(--card-text); margin-right: var(--card-text); }
.product > .plinks { margin: auto var(--card-text) 12px; }
@media (min-width: 700px) {
  .product.spread .plinks { margin: 0 var(--card-text) 12px; }
  .product.spread .points { margin: 0 var(--card-text) 10px 0; }
}