/* Mulholland. Every value is a token from tokens.css; scripts/check.mjs refuses anything else. Things are filled,
   never outlined; there are no shadows, glows or gradients. Footage carries grain; agents are ink with paper eyes. */

* { box-sizing: border-box; margin: 0; padding: 0; }

@view-transition { navigation: auto; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav); overscroll-behavior: none; }

body {
  overscroll-behavior: none;
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--regular);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; user-select: none; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
b { font-weight: var(--medium); }
i { font-style: normal; }
p { color: var(--ink-2); }
img, video, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
:focus-visible { outline: var(--hair) solid var(--ink); outline-offset: var(--hair); }
.defs { position: absolute; }

/* A thing's place among its siblings, for staggered motion and the stairs. */
:nth-child(1) { --i: 0; } :nth-child(2) { --i: 1; } :nth-child(3) { --i: 2; } :nth-child(4) { --i: 3; } :nth-child(5) { --i: 4; }
:nth-child(6) { --i: 5; } :nth-child(7) { --i: 6; } :nth-child(8) { --i: 7; } :nth-child(9) { --i: 8; } :nth-child(10) { --i: 9; }

/* Sections: one width, one gap between them. Footage sections meet the ones around them edge to edge. */
.frame { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
main > section + section { margin-top: var(--s-5); }
main > section:last-child:not(.hero) { margin-bottom: var(--s-5); }
.dark, .light { color: var(--ink); background: var(--paper); }

/* Type. Display is light and tight; reading text is regular; labels are small and quiet. */
.t-hero, .t-1, .t-2 { color: var(--ink); font-weight: var(--light); line-height: var(--lh-tight); letter-spacing: var(--track-tight); text-wrap: balance; }
.t-hero { font-size: var(--t-hero); }
.t-1 { font-size: var(--t-1); }
.t-2 { font-size: var(--t-2); line-height: var(--lh-snug); letter-spacing: var(--track-snug); }
.t-3, .lede { font-size: var(--t-3); line-height: var(--lh-snug); letter-spacing: var(--track-snug); }
.lede { max-width: var(--measure); text-wrap: pretty; }
.label { font-size: var(--t-small); line-height: var(--lh-snug); color: var(--mute); white-space: nowrap; }
.live { color: var(--ink); }
.mute { color: var(--mute); }

/* Controls: a button, a square tool and a chip. */
.button {
  display: inline-flex;
  align-items: center;
  height: var(--control);
  padding-inline: var(--s-2);
  border-radius: var(--r);
  font-size: var(--t-small);
  font-weight: var(--medium);
  color: var(--paper);
  background: var(--ink);
  white-space: nowrap;
  user-select: none;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.button:hover { transform: translateY(calc(var(--hair) * -1)); }
.button.veil { color: var(--ink); background: var(--veil-strong); backdrop-filter: blur(var(--blur)); }
.tool { display: grid; place-items: center; flex: none; width: var(--control); height: var(--control); border-radius: var(--r); background: var(--fog); transition: background var(--fast) var(--ease); }
.tool:hover { background: var(--fog-2); }
.chips, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.chip { display: inline-flex; align-items: center; gap: var(--s-1); padding-inline: var(--s-1); border-radius: var(--r); font-size: var(--t-small); color: var(--ink-2); background: var(--fog-2); white-space: nowrap; user-select: none; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
button.chip { height: var(--control); padding-inline: var(--s-2); }
.chip.on { color: var(--paper); background: var(--ink); }
.chip i { color: var(--mute); }
.arrow { width: var(--s-3); height: var(--s-3); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--fast) var(--ease); }
:is(.shot, .row):hover .arrow { transform: translate(calc(var(--hair) * 3), calc(var(--hair) * -3)); }
.logo { max-width: min(100%, var(--col)); max-height: var(--size-sm); object-fit: contain; object-position: left; filter: brightness(0) invert(var(--logo-ink)); }
.icon { width: var(--size); fill: var(--ink); }

/* Footage: a loop that covers its box, with a veil for type and grain on top. */
.film { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); }
.film video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform var(--crawl) var(--ease); }
.film::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--veil); }
.film::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 2;
  background-image: var(--grain);
  background-size: var(--grain-size);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grain var(--grain-step) steps(6) infinite;
}
.film.soft::before { background: var(--veil-strong); backdrop-filter: blur(var(--blur)) saturate(1.1); }
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-5%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-2%, 2%); }
  80% { transform: translate(4%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Words come in one at a time, out of a blur. */
.js [data-words] .w { display: inline-block; opacity: 0; filter: blur(var(--blur)); transform: translateY(0.25em); transition: opacity var(--slow) var(--ease), filter var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: calc(var(--i) * var(--step)); }
.js [data-words].in .w { opacity: 1; filter: blur(0); transform: none; }

/* Read: a statement whose words darken as it scrolls past. */
.statement p { max-width: 22em; }
[data-read] .w { color: var(--fog-2); transition: color var(--mid) var(--ease); }
[data-read] .w.on { color: var(--ink); }

/* Rise: blocks come up as they enter. */
.js .rise { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), background var(--fast) var(--ease); transition-delay: calc(var(--i, 0) * var(--step) * 2), calc(var(--i, 0) * var(--step) * 2), 0s; }
.js .rise.in { opacity: 1; transform: none; }

/* Navigation: over footage it is clear with white type; past it, paper. It steps aside while you read down. */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--nav); color: var(--ink); background: var(--paper); transition: transform var(--mid) var(--ease), background var(--mid) var(--ease), color var(--mid) var(--ease); }
.nav.away { transform: translateY(-100%); }
.nav.over:not(.solid) { background: transparent; }
.nav-in { display: flex; align-items: center; gap: var(--s-3); height: 100%; }
.home { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-3); font-weight: var(--medium); letter-spacing: var(--track-snug); }
.mark { width: var(--size-sm); height: auto; fill: none; stroke: currentColor; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }
.links { display: flex; gap: var(--s-3); margin-right: auto; font-size: var(--t-small); }
.links a { opacity: 0.72; transition: opacity var(--fast) var(--ease); }
.links a:hover, .links a[aria-current] { opacity: 1; }
.nav .tool { background: none; }
.nav .tool:hover { background: var(--fog); }
.theme svg { width: var(--s-2); height: var(--s-2); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun, [data-theme='dark'] .theme .moon { display: none; }
[data-theme='dark'] .theme .sun { display: block; }
.menu { display: none; width: var(--control); height: var(--control); flex-direction: column; justify-content: center; gap: var(--s-1); }
.menu i { display: block; height: var(--hair); background: currentColor; transition: transform var(--fast) var(--ease); }
.menu[aria-expanded='true'] i:first-child { transform: translateY(calc(var(--s-1) / 2 + var(--hair) / 2)) rotate(45deg); }
.menu[aria-expanded='true'] i:last-child { transform: translateY(calc(var(--s-1) / -2 - var(--hair) / 2)) rotate(-45deg); }
.sheet { position: fixed; inset: var(--nav) 0 0; z-index: 19; background: var(--paper); padding-top: var(--s-4); }
.sheet nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }

/* Hero: a section edge to edge, on footage or around drifting things; the line sits bottom left and what to do next
   bottom right. It opens a page, carries the platform and closes the page. */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero.short { min-height: var(--card); }
.hero .film video { transform: scale(1.12); }
.hero.in .film video { transform: scale(1); }
.hero-in { position: relative; z-index: 3; display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: var(--s-3); padding-block: calc(var(--nav) + var(--s-3)) var(--s-4); }
.hero-in > div:not(.full) { display: grid; justify-items: start; gap: var(--s-3); }
.hero .lede { color: var(--ink); }
.hero .logo { width: var(--measure); max-width: 100%; max-height: var(--size-lg); }
.full { grid-column: 1 / -1; }
/* A hero over a row of shots: open sky on top, where the line sits and the crew drifts, and the shots under it. */
.hero:has(.full) > .hero-in { align-self: stretch; grid-template-rows: minmax(var(--sky), 1fr) auto; align-items: center; }
.hero:has(.full) > .sky { bottom: calc(var(--tall) + var(--s-4)); }

/* The sky: things that drift behind a hero's line. */
.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sky > * { pointer-events: auto; }
.sky > .chip { position: absolute; left: var(--x, 50%); top: var(--y, 50%); padding: 0 var(--s-2) 0 0; transform: translate(-50%, -50%); transition: left var(--crawl) var(--ease), top var(--crawl) var(--ease), opacity var(--mid) var(--ease); }
.web .sky > .shot { position: absolute; left: var(--x); top: var(--y); width: calc(var(--size-lg) * 1.2 * var(--w)); min-height: 0; aspect-ratio: 1; padding: var(--s-2); font-size: var(--t-small); translate: -50% -50%; animation: wander calc(var(--drift) * (2 + var(--i) * 0.35)) var(--ease-in-out) infinite alternate; animation-delay: calc(var(--i) * var(--drift) * -0.7); }
.web h1 { max-width: 9em; }
.web .sky .ais { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding-bottom: var(--s-3); }
.web .sky .ai { grid-area: 1 / 1; width: var(--s-4); height: var(--s-4); opacity: 0; scale: 0.9; transition: opacity var(--mid) var(--ease), scale var(--mid) var(--ease); }
.web .sky .ai.on { opacity: 1; scale: 1; }
.web .sky .ai.claude { color: var(--ai-claude); }
.web .sky .ai.muse { color: var(--ai-muse); }
.web .sky .ai.gemini { color: var(--ai-gemini); }
.web .sky .turn { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding-bottom: var(--s-3); }
.web .sky .turn .one { grid-area: 1 / 1; display: grid; justify-items: center; gap: var(--s-1); opacity: 0; scale: 0.9; transition: opacity var(--mid) var(--ease), scale var(--mid) var(--ease); }
.web .sky .turn .one.on { opacity: 1; scale: 1; }
.web .sky > :nth-child(1) { --x: 12%; --y: 36%; --w: 1.5; }
.web .sky > :nth-child(2) { --x: 33%; --y: 19%; --w: 0.85; }
.web .sky > :nth-child(3) { --x: 22%; --y: 74%; --w: 1.2; }
.web .sky > :nth-child(4) { --x: 65%; --y: 18%; --w: 0.9; }
.web .sky > :nth-child(5) { --x: 88%; --y: 44%; --w: 1.15; }
.web .sky > :nth-child(6) { --x: 70%; --y: 82%; --w: 0.95; }
@keyframes wander { 0% { transform: none; } 35% { transform: translate(var(--s-3), calc(var(--s-2) * -1)) scale(1.07); } 70% { transform: translate(calc(var(--s-2) * -1), var(--s-2)) scale(0.94); } 100% { transform: translate(var(--s-2), var(--s-3)) scale(1.03); } }
.sat { position: absolute; left: 0; top: 0; width: var(--size-lg); will-change: transform; }
.sat .bot { width: 100%; }
.sat > .chip { position: absolute; left: 50%; bottom: 100%; opacity: 0; transform: translate(-50%, var(--s-1)) scale(0.6); transform-origin: 50% 100%; transition: opacity var(--fast) var(--ease), transform var(--mid) var(--ease); pointer-events: none; }
.sat > .chip.show { opacity: 1; transform: translate(-50%, calc(var(--s-1) * -1)) scale(1); }

/* A head: a title and a line, left; controls right. */
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.head > div:first-child, .page-head { display: grid; justify-items: start; gap: var(--s-3); }
.page-head { padding-top: calc(var(--nav) + var(--s-5)); }
.page-head h1 { max-width: 12em; }

/* Split: a sticky head on one side, the work on the other. */
.split { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: var(--s-4); }
.split .head { margin-bottom: 0; }
.stick { align-self: start; position: sticky; top: calc(var(--nav) + var(--s-3)); }

/* Centre: a section's words, and what goes with them, down the middle. */
.center { text-align: center; }
.hero.center { align-items: center; }
.center .hero-in { grid-template-columns: 1fr; }
.page-head.center, .center :is(.hero-in > div:not(.full), .head > div:first-child, .plate) { justify-items: center; }
.center :is(.head, .actions, .bots) { justify-content: center; }
.center [data-read] { margin-inline: auto; }
.center .stick { align-self: center; }

/* Grid: plates or shots side by side, as many to a row as fit. Stairs: each step holds everything below it. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col)), 1fr)); gap: var(--s-2); }
.grid + .grid { margin-top: var(--s-2); }
.stairs { align-items: end; }
.stairs > * { min-height: calc(var(--s-5) + var(--i) * var(--s-3)); }

/* A plate: a filled block of words. What sits on it is paper. */
.plate { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r); background: var(--fog); }
a.plate:hover { background: var(--fog-2); }

/* A shot: footage in a box, its words bottom left. A tall one holds a pane in the middle. */
.shot { position: relative; display: flex; text-align: start; align-items: flex-end; justify-content: space-between; gap: var(--s-3); min-height: var(--short); padding: var(--s-3); border-radius: var(--r); overflow: hidden; isolation: isolate; }
.shot > :not(.film) { position: relative; z-index: 3; }
.shot > div:not(.film, .pane, .bots) { display: grid; justify-items: start; gap: var(--s-1); max-width: var(--measure); }
.shot > :is(.icon, .bots) { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); transition: transform var(--mid) var(--ease); }
.shot > .bots { width: max-content; }
.shot:has(> :is(.icon, .bots)) { min-height: var(--tall); }
.shot:hover > .icon { transform: translate(-50%, -50%) scale(1.06) rotate(-4deg); }
.shot:hover video { transform: scale(1.08); }
.shot.tall { height: var(--card); align-items: center; justify-content: center; }

/* A pane: paper over footage or a plate, in the page's own theme. */
.pane { display: grid; align-content: start; gap: var(--s-2); width: 100%; max-width: var(--measure); padding: var(--s-2); border-radius: var(--r); }

/* Rows: filled bars, a name, a line and what is at the end. */
.rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) fit-content(50%); gap: var(--hair) var(--s-2); }
.rows > * { grid-column: 1 / -1; }
.row { display: grid; grid-template-columns: subgrid; align-items: center; min-height: var(--control); padding: var(--s-1) var(--s-2); border-radius: var(--r); background: var(--fog); transition: background var(--fast) var(--ease), color var(--mid) var(--ease), opacity var(--mid) var(--ease); }
.row > :first-child:nth-last-child(2) { grid-column: span 2; }
.row > :only-child { grid-column: 1 / -1; }
.row > :last-child:not(:only-child) { justify-self: end; }
.row > span:nth-child(2) { color: var(--ink-2); }
.row i { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); transition: opacity var(--fast) var(--ease); }
.row i.on { color: var(--ink); font-weight: var(--medium); }
a.row:hover { background: var(--fog-2); }
.plate :is(.row, .say) { background: var(--paper); }

/* Who: an agent's body beside a name and a line under it. */
.who { display: flex; align-items: center; gap: var(--s-1); min-width: 0; line-height: var(--lh-snug); }
.who b { display: block; }

/* A chat: the visitor's lines on ink, the assistant's on paper. */
.say { justify-self: start; max-width: 85%; padding: var(--s-1) var(--s-2); border-radius: var(--r); color: var(--ink); background: var(--fog); }
.say.you { justify-self: end; color: var(--paper); background: var(--ink); }

/* Agents' bodies: blobs of ink with paper eyes that blink, look at the pointer, glance around at work and smile under
   the pointer. site.js draws them. */
.bot { display: inline-block; flex: none; width: var(--size); aspect-ratio: 1; }
.bot.sm { width: var(--size-sm); }
.bot.lg { width: var(--size-lg); }
.bot.xl { width: var(--size-xl); }
.bots { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.bot svg { width: 100%; height: 100%; overflow: visible; }
.body { fill: var(--ink); }
.look { transition: transform var(--mid) var(--ease); }
.eyes { fill: var(--paper); transform-box: fill-box; transform-origin: center; animation: wink var(--drift) var(--ease-in-out) infinite; animation-delay: calc(var(--i, 0) * var(--grain-step) * -1); transition: transform var(--fast) var(--ease); }
.eyes rect { transition: transform var(--slow) var(--ease-in-out); }
.busy .look { animation: glance var(--drift) var(--ease-in-out) infinite; }
.happy .eyes { animation: none; transform: scaleY(0.4); }
@keyframes wink { 0%, 93%, 100% { transform: none; } 96% { transform: scaleY(0.1); } }
@keyframes glance { 0%, 100% { transform: translate(-2.5%, -1.5%); } 30% { transform: translate(2.5%, -2.5%); } 60% { transform: translate(1.5%, 1.5%); } }

/* An agent at work: its steps lighting up in turn. */
[data-agent] .row { color: var(--mute); }
[data-agent] .row.done { color: var(--ink-2); }
[data-agent] .row.on { color: var(--ink); background: var(--fog-2); }

/* Approvals: three at a time, each fading once approved. */
[data-approvals] > :nth-child(n + 4) { display: none; }
.done .button { color: var(--ink); background: var(--fog-2); }
.gone { opacity: 0; }

/* The stack: a stage that holds while the page scrolls through it, one screen per agent. Cards slide up over the last
   one, which sinks back; the line beside them crossfades. Pairs: the same line and card, sides alternating. */
.stack { --n: 1; height: calc(var(--n) * 100svh); }
.stack:has(.shot:nth-child(2)) { --n: 2; }
.stack:has(.shot:nth-child(3)) { --n: 3; }
.stack:has(.shot:nth-child(4)) { --n: 4; }
.stage { position: sticky; top: 0; height: 100svh; overflow: clip; grid-template-columns: 1fr 1fr; }
.stage > .lines { order: 2; }
.lines, .cards { display: grid; }
.line { display: grid; align-content: center; justify-items: start; gap: var(--s-3); }
.line h3 { max-width: 10em; }
.lines > .line { grid-area: 1 / 1; opacity: 0; filter: blur(var(--blur)); transform: translateY(var(--rise)); transition: opacity var(--mid) var(--ease), filter var(--mid) var(--ease), transform var(--mid) var(--ease); pointer-events: none; }
.lines > .line.on { opacity: 1; filter: none; transform: none; pointer-events: auto; }
.cards > .shot { grid-area: 1 / 1; transform-origin: 50% 0; transform: translateY(calc((1 - var(--enter, 1)) * 115%)) scale(calc(1 - var(--cover, 0) * 0.08)); filter: brightness(calc(1 - var(--cover, 0) * 0.5)); }
.pairs { display: grid; gap: var(--s-5); }
.pairs > :nth-child(even) > .line { order: 2; }

/* The flow: cards fanned out behind the one in front, smaller and further back the further out they sit. */
.flow-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); }
.flow { position: relative; height: var(--card); overflow-x: clip; }
.flow > .shot { position: absolute; left: 50%; top: 50%; width: var(--card-wide); height: 100%; transform: translate(-50%, -50%) translateX(calc(var(--d, 0) * 52%)) scale(calc(1 - var(--a, 0) * 0.14)); filter: brightness(calc(1 - var(--a, 0) * 0.25)); opacity: var(--o, 1); transition: transform var(--slow) var(--ease), filter var(--slow) var(--ease), opacity var(--slow) var(--ease); }

/* The rail: cards that scroll sideways and snap. */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-wide); gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail > .shot { height: var(--card); scroll-snap-align: start; }

/* Names: the clients' logos in two marquees running opposite ways; they stop under the pointer. */
.marquee { overflow: hidden; }
.marquee + .marquee { margin-top: var(--hair); }
.names > .frame { padding-bottom: var(--s-2); }
.track { display: flex; width: max-content; animation: slide var(--marquee) linear infinite; }
.marquee.back .track { animation-direction: reverse; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.track > .plate { width: var(--col); margin-right: var(--hair); place-items: center; align-content: center; color: var(--ink-2); }
.track .logo { object-position: center; opacity: 0.72; transition: opacity var(--fast) var(--ease); }
.track a:hover .logo { opacity: 1; }

/* A model: the workspace and its roles on top, then its tables in ranks from what stands alone to what links to it,
   joined by lines. The chosen role's view shows in place: its own rows tagged, what it can't see faded. */
.graph { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2); }
.rank { position: relative; z-index: 1; display: grid; align-content: center; gap: var(--s-2); }
.edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.edges path { fill: none; stroke: var(--mute); stroke-width: 1.25; transition: opacity var(--mid) var(--ease); }
.edges path.off { opacity: 0.12; }
.node { transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease); }
.node .scope { display: none; justify-self: start; }
.node.own .scope { display: inline-flex; }
.node.none { opacity: 0.28; transform: scale(0.97); }
.js [data-model] .node { opacity: 0; transform: translateY(var(--rise)); }
.js [data-model].in .node { opacity: 1; transform: none; }
.js [data-model].in .node.none { opacity: 0.28; transform: scale(0.97); }

/* A program: what an agent writes, typed in. */
.loc { white-space: pre-wrap; tab-size: var(--s-3); }
.js [data-program] .loc { opacity: 0; transform: translateX(calc(var(--s-1) * -1)); transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease); }
.js [data-program] .loc.in { opacity: 1; transform: none; }

/* Layers: Marzy's parts, stacked like the product is, sliding into place. */
[data-layers] { perspective: var(--page); }
.js [data-layers] .row { opacity: 0; transform: translateY(calc(var(--rise) * -3)) rotateX(30deg); transform-origin: 50% 100%; transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), background var(--fast) var(--ease); transition-delay: calc((4 - var(--i)) * var(--step) * 3), calc((4 - var(--i)) * var(--step) * 3), 0s; }
.js [data-layers].in .row { opacity: 1; transform: none; }

/* Rising in. */
@keyframes show { from { opacity: 0; transform: translateY(var(--rise)); } }

/* The collage: a count in the middle of the screen, footage and agents around it, spreading out as it passes. */
.collage { position: relative; display: grid; place-items: center; min-height: 100svh; overflow: clip; }
.collage > .frame { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--s-2); }
.collage .count { font-size: calc(var(--t-hero) * 2); font-weight: var(--light); line-height: 1; letter-spacing: var(--track-tight); color: var(--ink); }
.collage .ticks { display: grid; }
.collage .ticks > * { grid-area: 1 / 1; opacity: 0; translate: 0 var(--s-1); transition: opacity var(--mid) var(--ease), translate var(--mid) var(--ease); }
.collage .ticks > .on { opacity: 1; translate: none; }
.scatter { position: absolute; inset: 0; }
.scatter > * { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 1; translate: -50% -50%; transform: translate(calc((var(--x) - 50) * (var(--p, 0.5) - 0.5) * 2%), calc((var(--y) - 50) * (var(--p, 0.5) - 0.5) * 3%)); }
.scatter > .shot { width: var(--col); aspect-ratio: 4 / 5; min-height: 0; padding: 0; }
.scatter > .pane { width: max-content; background: var(--fog); }
.scatter > :nth-child(1) { --x: 12; --y: 24; }
.scatter > :nth-child(2) { --x: 12; --y: 32; }
.scatter > :nth-child(3) { --x: 85; --y: 20; }
.scatter > :nth-child(4) { --x: 85; --y: 28; }
.scatter > :nth-child(5) { --x: 86; --y: 74; }
.scatter > :nth-child(6) { --x: 86; --y: 82; }
.scatter > :nth-child(7) { --x: 14; --y: 76; }
.scatter > :nth-child(8) { --x: 14; --y: 84; }

/* Strips: shots side by side, one open wide; the rest narrow with their name up the side. */
.strips { display: flex; gap: var(--s-1); height: var(--card); }
.strips > .shot { flex: 1 1 0; min-width: 0; min-height: 0; transition: flex var(--slow) var(--ease), height var(--slow) var(--ease); }
.strips > .on { flex-grow: 7; }
.strips > .shot > :not(.film) { transition: opacity var(--mid) var(--ease); }
.strips > :not(.on) > :not(.film, .tag) { opacity: 0; }
.strips .tag { position: absolute; left: var(--s-3); top: var(--s-3); display: flex; align-items: center; height: var(--size-sm); white-space: nowrap; }
.strips .logo { width: var(--col); height: var(--size-sm); max-width: none; }
.strips > :not(.on) .tag { left: 50%; transform-origin: 0 0; rotate: 90deg; translate: calc(var(--size-sm) / 2) 0; }

/* A reel: panes in a row over the hero's footage, the middle one large, the others smaller at its sides. */
.hero-in > div.reel { order: -1; position: relative; display: block; width: 100%; height: var(--tall); }
.reel > .pane { position: absolute; left: 50%; top: 50%; text-align: start; transform: translate(-50%, -50%) translateX(calc(var(--d, 0) * 82%)) scale(calc(1 - var(--a, 1) * 0.22)); opacity: clamp(0, 1.6 - var(--a, 1) * 0.8, 1); transition: transform var(--slow) var(--ease), opacity var(--slow) var(--ease); }
.reel > :first-child { --a: 0; }
.reel > .on { z-index: 1; }

/* A feed: five steps at a time, the newest dropping in on top. */
[data-feed] > :nth-child(n + 6) { display: none; }
[data-feed] > .new { animation: show var(--mid) var(--ease); }

/* A matrix: roles down the side, what each can do across, as filled bars. */
.matrix { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); gap: var(--hair) var(--s-2); }
.matrix > * { grid-column: 1 / -1; }
.matrix > .row > :not(:first-child) { justify-self: center; text-align: center; }
.matrix > .top { background: none; }
/* The subpages' heroes. */

/* Bands: two strips of footage and the line across the seam, which slides as the page scrolls. */
.band { position: absolute; inset: 0 0 auto; height: calc(var(--seam, 50) * 1%); overflow: hidden; }
.band + .band { inset: auto 0 0; height: calc(100% - var(--seam, 50) * 1%); }
.band + .band::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 3; height: var(--hair); background: var(--ink); opacity: 0.5; }
.bands h1 { max-width: 7em; }
.bands :is(.lede, .label) { color: var(--ink); }

/* The net: what an assistant can reach, around the line and joined to it. */
.net .sky > * { position: absolute; left: var(--x); top: var(--y); width: max-content; max-width: var(--col); background: var(--fog); translate: -50% -50%; }
.net .sky > :nth-child(1) { --x: 13%; --y: 28%; }
.net .sky > :nth-child(2) { --x: 36%; --y: 22%; }
.net .sky > :nth-child(3) { --x: 66%; --y: 21%; }
.net .sky > :nth-child(4) { --x: 88%; --y: 32%; }
.net .sky > :nth-child(5) { --x: 11%; --y: 68%; }
.net .sky > :nth-child(6) { --x: 89%; --y: 70%; }
.net .sky > :nth-child(7) { --x: 30%; --y: 84%; }
.net .sky > :nth-child(8) { --x: 70%; --y: 85%; }
.net .core { justify-self: center; max-width: var(--measure); }
.net .edges { z-index: 1; }
.js .net .sky > * { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: calc(var(--i) * var(--step) * 3); }
.js .net.in .sky > * { opacity: 1; transform: none; }
.net .edges path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--crawl) var(--ease); }
.net.in .edges path { stroke-dashoffset: 0; }

/* The case: a client's head, then its footage in a card that opens out to the page's width as it comes up. */
.hero.case { display: block; min-height: 0; padding-top: calc(var(--nav) + var(--s-4)); }
.case .hero-in { padding: 0 0 var(--s-4); }
.case h1 { max-width: 16em; }
.case .shot { height: var(--card); justify-content: center; align-items: center; text-align: center; transform: scale(calc(0.88 + var(--p, 0) * 0.12)); transform-origin: 50% 0; }
.case .shot .logo { width: var(--measure); max-height: var(--size-lg); object-position: center; }

/* Beat: what is live now. */
@keyframes beat { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 0.3; transform: scale(0.6); } }

/* The subpages' sections. */

/* Hairlines over counted things. */
.counted > li::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--hair); background: var(--fog-2); }


/* Steps: the count rolls to the step in view; a line fills down beside them. */
.steps { align-items: start; }
.steps .count { display: flex; align-items: baseline; gap: var(--s-1); }
.roll { display: grid; height: calc(var(--lh-snug) * 1em); font-size: var(--t-hero); line-height: var(--lh-snug); overflow: hidden; }
.roll > span { line-height: var(--lh-snug); transform: translateY(calc(var(--at, 0) * -100%)); transition: transform var(--mid) var(--ease); }
.trail { position: relative; padding-left: var(--s-4); }
.trail::before, .trail::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--hair); background: var(--fog-2); }
.trail::after { background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.step { display: grid; align-content: center; min-height: var(--short); }
.step h3 { margin-bottom: var(--s-2); }
.js [data-steps] .step { opacity: 0.25; transition: opacity var(--mid) var(--ease); }
.js [data-steps] .step.on { opacity: 1; }

/* Counted: a few things side by side, each under its number. */
.counted { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col)), 1fr)); gap: var(--s-3) var(--s-2); }
.counted > li { position: relative; padding-top: var(--s-3); }
.counted > li > * { display: grid; align-content: start; justify-items: start; gap: var(--s-3); height: 100%; }
.counted p { margin-top: var(--s-1); }

@keyframes appear { from { opacity: 0; transform: translateY(calc(var(--s-1) * -1)); } }

/* Compare: plans side by side, their names held at the top. */
.compare { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--hair) var(--s-2); }
.compare > * { grid-column: 1 / -1; }
.compare .row > :nth-child(n) { justify-self: start; }
.compare .top { position: sticky; top: 0; z-index: 2; background: var(--paper); }

/* The cast: the picked agent's line open, its footage and steps beside. */
.cast { align-items: stretch; }
.cast .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-2); text-align: start; }
.cast .row.on { background: var(--fog-2); }
.cast .row > .label { justify-self: end; }
.cast .row > p:last-child { grid-column: 1 / -1; justify-self: start; display: none; }
.cast .row.on > p:last-child { display: block; animation: appear var(--mid) var(--ease); }
.cast .shot { height: auto; min-height: var(--card); }
.cast .shot > :is(.film, .pane):not(.on) { display: none; }
.cast .shot > .on { animation: appear var(--mid) var(--ease); }


/* Ask: one question typed in at a time, the answer under it. */
[data-ask] .turn { display: grid; gap: var(--s-1); }
[data-ask] .turn:not(.on) { display: none; }
[data-ask] .turn:not(.said) .say:not(.you) { opacity: 0; }
[data-ask] .say { transition: opacity var(--mid) var(--ease); }
[data-ask] .say.you:empty { display: none; }

/* The week: a dot for every hour, the one we are in beating. */
.week { display: grid; gap: var(--s-1); width: 100%; }
.week > div { display: grid; grid-template-columns: var(--size-sm) minmax(0, 1fr); align-items: center; gap: var(--s-1); }
.hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: var(--hair); }
.hours i { aspect-ratio: 1; border-radius: calc(var(--r) / 2); background: var(--ink-2); transform: scale(0.6); transition: transform var(--mid) var(--ease); transition-delay: calc(var(--n, 0) * var(--step) / 6); }
.js .week:not(.in) .hours i { transform: scale(0); }
.hours i.now { background: var(--ink); transform: none; animation: beat var(--crawl) var(--ease-in-out) infinite; }

/* Footer. */
.footer { padding-top: var(--s-4); overflow: hidden; }
.foot { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-3); }
.foot > div, .foot nav { display: grid; align-content: start; justify-items: start; gap: var(--s-1); }
.foot nav { font-size: var(--t-small); }
.foot nav a { color: var(--ink-2); transition: color var(--fast) var(--ease); }
.foot nav a:hover { color: var(--ink); }
.cluster { display: grid; grid-template-columns: repeat(5, var(--size-sm)); gap: var(--hair) var(--s-1); margin-bottom: var(--s-2); }
.cluster a { transform: translateY(calc(var(--i) * var(--hair) * (1 - 2 * mod(var(--i), 2)))) rotate(calc((mod(var(--i), 3) - 1) * 8deg)); transition: transform var(--fast) var(--ease); }
.cluster a:hover { transform: translateY(calc(var(--hair) * -2)) scale(1.15); }
.cluster .bot { width: 100%; }
.base { display: flex; justify-content: space-between; margin-top: var(--s-4); }
.giant { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); margin-bottom: -0.45em; font-size: var(--t-giant); font-weight: var(--medium); letter-spacing: var(--track-tight); line-height: 1; white-space: nowrap; }
.giant .mark { width: 1.1em; stroke-width: 56; }

/* Policies. */
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-top: var(--s-2); }
.prose h2, .prose h3 { margin-top: var(--s-3); font-size: var(--t-3); font-weight: var(--medium); color: var(--ink); }
.prose ul { list-style: disc; padding-left: var(--s-3); }
.prose a { text-decoration: underline; text-underline-offset: var(--hair); }

@media (max-width: 64rem) {
  .links, .nav-in > .button { display: none; }
  .menu { display: flex; margin-left: auto; }
  .hero-in, .split { grid-template-columns: 1fr; }
  .stage { align-content: center; gap: var(--s-3); }
  .stage > .lines, .pairs > :nth-child(even) > .line { order: 0; }
  .shot.tall { height: auto; }
  .stick { position: static; }
  .sat { width: var(--size); }
  .web .sky { display: none; }
  .graph { grid-auto-flow: row; }
  .edges { display: none; }
  .flow > .shot { transform: translate(-50%, -50%) translateX(calc(var(--d, 0) * 88%)) scale(calc(1 - var(--a, 0) * 0.1)); }
  .foot { grid-template-columns: repeat(2, 1fr); }
  .foot > div { grid-column: 1 / -1; }
  .net .edges { display: block; }
  .net .sky .chips { display: none; }
  .net .sky > :nth-child(n + 5) { display: none; }
  .net .sky > :nth-child(odd) { --x: 27%; }
  .net .sky > :nth-child(even) { --x: 73%; }
  .net .sky > :nth-child(-n + 2) { --y: 22%; }
  .net .sky > :nth-child(n + 3) { --y: 80%; }
  .steps .stick { position: static; }
  .step { min-height: 0; padding-block: var(--s-3); }
  .js [data-steps] .step { opacity: 1; }
  .steps .count { display: none; }
}

@media (max-width: 40rem) {
  .loc { tab-size: var(--s-2); }
  .shot.tall { padding: var(--s-1); }
  .sat:nth-child(n + 7) { display: none; }
  .bot.xl { width: var(--size-lg); }
  .stairs > * { min-height: 0; }
  .scatter > :nth-child(even) { display: none; }
  .scatter > .shot { width: var(--size-lg); }
  .scatter > :nth-child(1) { --x: 20; --y: 13; }
  .scatter > :nth-child(3) { --x: 80; --y: 16; }
  .scatter > :nth-child(5) { --x: 78; --y: 86; }
  .scatter > :nth-child(7) { --x: 22; --y: 84; }
  .strips { flex-direction: column; height: auto; }
  .strips > .shot { flex: none; height: var(--s-5); }
  .strips > .on { height: var(--card); }
  .strips > :not(.on) .tag { left: var(--s-3); top: 50%; rotate: none; translate: 0 -50%; }
  .reel > :not(.on) { opacity: 0; }
  .reel > .pane { width: 100%; }
  .matrix > .top { display: none; }
  .matrix > .row { display: flex; flex-wrap: wrap; gap: var(--s-1); padding-block: var(--s-2); }
  .matrix > .row > :first-child { flex-basis: 100%; }
  .matrix i:not(.on) { display: none; }
  .matrix i.on { font-size: 0; }
  .matrix i.on::after { content: attr(data-k); padding-inline: var(--s-1); border-radius: var(--r); font-size: var(--t-small); background: var(--fog-2); }
  .rows { grid-template-columns: minmax(0, 1fr) fit-content(50%); }
  .row > :first-child:nth-last-child(2) { grid-column: auto; }
  .row > span:nth-child(2):not(:last-child) { grid-column: 1 / -1; order: 3; }
  .cast .row > span.label { grid-column: auto; order: 0; }
  .compare { column-gap: var(--s-1); }
  .compare .row { padding-inline: var(--s-1); font-size: var(--t-small); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-words] .w, .js .rise, .js [data-model] .node, .js [data-layers] .row, .js [data-program] .loc { opacity: 1; filter: none; transform: none; }
  .scatter > * { transform: none; }
  .js .net .sky > *, .js [data-steps] .step { opacity: 1; transform: none; }
  .net .edges path { stroke-dashoffset: 0; }
  .js .week:not(.in) .hours i { transform: scale(0.6); }
}

/* The drawings: each model's pipeline, as mulholland.ai draws it, in the page's ink over the plate. */
.models > .model:not(.on) { display: none; }
.models .tabs { margin-bottom: var(--s-3); }
.model { display: grid; gap: var(--s-3); }
.model > div:first-child { display: grid; justify-items: start; gap: var(--s-1); max-width: var(--measure); }
.dx { --dx-bg: var(--fog); display: block; width: 100%; height: auto; color: var(--ink); }
.dx text { fill: currentColor; font-family: var(--font); font-weight: var(--medium); }
.dx .ln, .dx .ghost, .dx .ghost-d, .dx .rule, .dx .flow, .dx .flow-q, .dx .lead, .dx .plane-open { fill: none; stroke: currentColor; stroke-width: var(--dx-hairline); stroke-linecap: round; stroke-linejoin: round; }
.dx .plane-open, .dx .flow, .dx .flow-q, .dx .ghost-d { stroke-dasharray: var(--dx-dash); stroke-linecap: butt; }
.dx .face, .dx .ring, .dx .stg-box { fill: var(--dx-bg); stroke: currentColor; stroke-width: var(--dx-hairline); stroke-linejoin: round; }
.dx .shade { fill: color-mix(in srgb, currentColor calc(var(--dx-area) * 100%), var(--dx-bg)); stroke: currentColor; stroke-width: var(--dx-hairline); stroke-linejoin: round; }
.dx .plane, .dx .tint { fill: currentColor; fill-opacity: var(--dx-area); stroke: none; }
.dx .plane-ln { fill: currentColor; fill-opacity: var(--dx-area); stroke: currentColor; stroke-width: var(--dx-hairline); stroke-linejoin: round; }
.dx .solid, .dx .fig-ink, .dx .dot { fill: currentColor; stroke: none; }
.dx .solid-ln { fill: currentColor; stroke: currentColor; stroke-width: var(--dx-hairline); stroke-linejoin: round; }
.dx .knock { fill: var(--dx-bg); stroke: none; }
.dx .fig { fill: currentColor; opacity: var(--dx-faint); }
.dx .ghost, .dx .rule { stroke-opacity: var(--dx-faint); }
.dx .ghost-d, .dx .flow-q { stroke-opacity: var(--dx-soft); }
.dx .lead { stroke-opacity: var(--dx-muted); }
.dx .f-top, .dx .f-front, .dx .f-side, .dx .a-top, .dx .a-front, .dx .a-side { stroke: currentColor; stroke-opacity: var(--dx-muted); stroke-width: var(--dx-hairline); stroke-linejoin: round; }
.dx .f-top { fill: color-mix(in srgb, currentColor calc(var(--dx-face-lit) * 100%), var(--dx-bg)); }
.dx .f-front { fill: color-mix(in srgb, currentColor calc(var(--dx-face-half) * 100%), var(--dx-bg)); }
.dx .f-side { fill: color-mix(in srgb, currentColor calc(var(--dx-face-shadow) * 100%), var(--dx-bg)); }
.dx .a-top { fill: color-mix(in srgb, currentColor calc(var(--dx-face-lit) * 100%), var(--dx-accent)); }
.dx .a-front { fill: color-mix(in srgb, currentColor calc(var(--dx-face-half) * 100%), var(--dx-accent)); }
.dx .a-side { fill: color-mix(in srgb, currentColor calc(var(--dx-face-shadow) * 100%), var(--dx-accent)); }
.dx .acc { fill: var(--dx-accent); stroke: none; }
.dx .acc-zone { fill: var(--dx-accent); fill-opacity: var(--dx-area); stroke: var(--dx-accent); stroke-width: var(--dx-hairline); stroke-dasharray: var(--dx-dash); }
.dx .acc-flow { fill: none; stroke: var(--dx-accent); stroke-width: var(--dx-stroke); stroke-dasharray: var(--dx-dash); stroke-linecap: butt; }
.dx .lab, .dx .cap, .dx .call { font-size: var(--dx-text-md); font-weight: var(--regular); }
.dx .tag, .dx .num, .dx .stg { font-size: var(--dx-text); letter-spacing: var(--dx-tracking); }
.dx .ttl { font-size: var(--dx-text-lg); letter-spacing: var(--dx-tracking); }


/* The contact form on /book: the ask on one side, the fields on the other, two to a row. */
.ask { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-4); align-items: start; }
.ask > div { display: grid; gap: var(--s-2); }
.ask .small { font-size: var(--t-small); }
.ask a { text-decoration: underline; text-underline-offset: var(--s-1); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-2); }
.contact .wide { grid-column: 1 / -1; }
.field { display: grid; gap: var(--s-1); font-size: var(--t-small); }
.field i { font-style: normal; color: var(--mute); }
.field input, .field select, .field textarea { width: 100%; min-height: var(--control); padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r); font: inherit; font-size: var(--t-body); color: var(--ink); background: var(--fog); transition: background var(--fast) var(--ease); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--fog-2); }
.field.bad span { color: var(--dx-accent); }
.send { display: flex; align-items: center; gap: var(--s-2); }
.send .button { border: 0; cursor: pointer; font: inherit; font-size: var(--t-small); font-weight: var(--medium); }
.send .button:disabled { opacity: 0.5; cursor: default; }
.note { font-size: var(--t-small); }
@media (max-width: 64rem) {
  .ask, .contact { grid-template-columns: 1fr; }
}

/* The blog: a featured post, rows of the rest, and a reading column for each post. */
.post-row { padding-block: var(--s-2); }
.post-row b { font-weight: var(--regular); color: var(--ink); }
.feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-4); align-items: center; }
.feature > div:last-child { display: grid; justify-items: start; gap: var(--s-2); }
.feature .arrow { width: var(--s-3); height: var(--s-3); }
.cover { overflow: hidden; border-radius: var(--r); background: var(--fog); }
.cover :is(img, video) { display: block; width: 100%; height: auto; }
.post-head h1 { max-width: 18em; }
.post-head .lede { max-width: var(--measure); }
.post-cover .cover { max-width: calc(var(--measure) * 1.5); }
.post { font-size: var(--t-body); line-height: var(--lh-body); }
.post h2 { margin-top: var(--s-4); font-size: var(--t-2); font-weight: var(--light); }
.post :is(figure, .note, table, pre) { margin-block: var(--s-3); }
.post figure :is(img, video) { display: block; width: 100%; height: auto; border-radius: var(--r); background: var(--fog); }
.post figcaption { margin-top: var(--s-1); font-size: var(--t-small); color: var(--mute); }
.post blockquote { font-size: var(--t-3); line-height: var(--lh-snug); color: var(--ink); }
.post .note { display: grid; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r); background: var(--fog); }
.post .note p { font-size: var(--t-small); }
.post ol { list-style: decimal; padding-left: var(--s-3); }
.post li + li { margin-top: var(--s-1); }
.post table { width: 100%; font-size: var(--t-small); border-collapse: collapse; }
.post :is(th, td) { padding: var(--s-1); text-align: left; vertical-align: top; }
.post tr:nth-child(even) td { background: var(--fog); }
.post th { color: var(--ink); font-weight: var(--medium); }
.post pre { overflow-x: auto; padding: var(--s-2); border-radius: var(--r); font-size: var(--t-small); background: var(--fog); }
.post strong { color: var(--ink); font-weight: var(--medium); }

/* About: logos of where the team has worked, and the office. */
.past { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hair); }
.past > .plate { place-items: center; aspect-ratio: 2; padding: var(--s-3); }
.past .logo { width: 100%; max-width: var(--size-lg); max-height: var(--s-4); object-fit: contain; filter: brightness(0) invert(var(--logo-ink)); opacity: 0.72; }
.photo { overflow: hidden; border-radius: var(--r); }
.photo img { display: block; width: 100%; height: auto; }
@media (max-width: 64rem) {
  .feature { grid-template-columns: 1fr; }
  .past { grid-template-columns: repeat(2, 1fr); }
}
.why { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-4); align-items: start; }
.why .lede { max-width: var(--measure); }
@media (max-width: 64rem) { .why { grid-template-columns: 1fr; } }

/* The database as objects: one record's properties, links and actions side by side. */
.object { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr; gap: var(--s-3); margin-bottom: var(--s-2); padding: var(--s-3); border-radius: var(--r); background: var(--fog); }
.object > div { display: grid; align-content: start; gap: var(--s-1); }
.object .rows { grid-template-columns: minmax(0, 1fr); }
.object .row { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; padding-block: var(--s-1); background: var(--paper); font-size: var(--t-small); }
.object .row > :nth-child(n) { grid-column: 1 / -1; justify-self: start; text-align: left; }
.object .row b { font-weight: var(--regular); color: var(--ink); }
.object .row.link b { text-decoration: underline; text-underline-offset: var(--s-1); }
.object .row.act b { font-weight: var(--medium); }
@media (max-width: 64rem) {
  .object { grid-template-columns: 1fr; }
}

/* The agreements: the words of the pinned /legal tree, a contents list held beside the long ones. */
.legal { display: grid; gap: var(--s-4); align-items: start; }
.legal.toc { grid-template-columns: var(--col) minmax(0, 1fr); }
.legal-toc { position: sticky; top: calc(var(--nav) + var(--s-2)); max-height: calc(100svh - var(--nav) - var(--s-3)); overflow-y: auto; }
.legal-toc-title { margin-bottom: var(--s-1); font-size: var(--t-small); color: var(--mute); }
.legal-toc a { display: block; padding: var(--hair) 0; font-size: var(--t-small); line-height: var(--lh-snug); color: var(--mute); transition: color var(--fast) var(--ease); }
.legal-toc a:hover { color: var(--ink); }
.legal-article { max-width: calc(var(--measure) * 1.4); }
.legal-meta { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.legal-meta h1 { font-size: var(--t-1); line-height: var(--lh-tight); letter-spacing: var(--track-tight); font-weight: var(--regular); }
.legal-eyebrow, .legal-version, .legal-note, .legal-hash { font-size: var(--t-small); color: var(--mute); }
.legal-eyebrow { order: -1; }
.legal-note, .legal-version { max-width: var(--measure); }
.legal-meta a, .legal-body a, .legal-note a { text-decoration: underline; text-underline-offset: var(--hair); }
.legal-body { color: var(--ink-2); }
.legal-body > * + * { margin-top: var(--s-2); }
.legal-body :is(h2, h3) { margin-top: var(--s-4); font-size: var(--t-3); font-weight: var(--medium); color: var(--ink); scroll-margin-top: calc(var(--nav) + var(--s-2)); }
.legal-body h3 { margin-top: var(--s-3); }
.legal-body :is(ul, ol) { padding-left: var(--s-3); }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li + li { margin-top: var(--s-1); }
.legal-body code { font-size: var(--t-small); overflow-wrap: anywhere; }
.legal-body table { width: 100%; border-collapse: separate; border-spacing: var(--hair); font-size: var(--t-small); }
.legal-body :is(th, td) { padding: var(--s-1); vertical-align: top; text-align: left; background: var(--fog); }
.legal-body th { font-weight: var(--medium); color: var(--ink); background: var(--fog-2); }
.legal-rule { height: var(--hair); margin: var(--s-4) 0 var(--s-2); border: 0; background: var(--fog); }
.legal-hash code { overflow-wrap: anywhere; }
@media (max-width: 64rem) {
  .legal.toc { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
}

/* A card over footage is glass: the footage shows through it, blurred and brighter, and stays sharp around it. */
.shot > .pane.light { background: color-mix(in srgb, var(--paper) 62%, transparent); backdrop-filter: blur(calc(var(--blur) * 3)) saturate(1.6) brightness(1.08); }
.shot > .pane.light .row:not(.on) { background: color-mix(in srgb, var(--fog) 55%, transparent); }

/* Ivy's warehouse is cold blue; in the collage only, warm it a touch. */
.scatter video[src*='agent-ivy'] { filter: sepia(0.1) saturate(1.05); }
/* The wordmark, as on mulholland.ai: the live lockup file used as a mask, so it takes the nav's colour. */
.home .word { display: block; height: calc(var(--size-sm) * 0.8); aspect-ratio: 1599 / 300; background: currentColor; mask: url('/site/art/brand/wordmark.svg') left center / contain no-repeat; }
/* The stack's cards blur their agent's footage the way the product cards do, under the glass pane. */
.stack .shot:has(> .pane) > .film.soft::before { backdrop-filter: blur(calc(var(--blur) * 1.08)) saturate(1.2); }
/* The blog index: the featured post with its words left and picture right, then a row per post, packed close: words
   left, a small picture at the far right, rows parted by a hair of page, each rising in as it scrolls into view. */
.feature.flip { grid-template-columns: 1fr 1.3fr; }
.more { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-small); color: var(--ink); }
.more .arrow { width: var(--s-2); height: var(--s-2); }
.post-list { display: grid; gap: var(--hair); }
.post-card { display: grid; grid-template-columns: 1fr var(--col); gap: var(--s-4); align-items: center; padding: var(--s-2); border-radius: var(--r); background: var(--fog); transition: background var(--fast) var(--ease); }
.post-card > div:first-child { display: grid; justify-items: start; gap: var(--s-1); max-width: var(--measure); }
.post-card .cover { aspect-ratio: 16 / 9; }
.post-card .cover img { height: 100%; object-fit: cover; transition: transform var(--crawl) var(--ease); }
.post-card:hover .cover img { transform: scale(1.04); }
@media (max-width: 64rem) { .feature.flip { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .post-card { grid-template-columns: 1fr var(--size-lg); gap: var(--s-2); } }
/* Related conversations: two to a row, each a still from the talk under a glass card. Play swaps the still for the
   video itself, in place; the card steps aside while it plays. */
.talks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--col) * 2)), 1fr)); gap: var(--s-2); }
.talk { aspect-ratio: 4 / 3; align-items: flex-end; }
.talk .film img { width: 100%; height: 100%; object-fit: cover; }
.talk > .pane { display: grid; justify-items: start; gap: var(--s-1); width: 100%; }
.talk > .pane p { color: var(--ink-2); }
.talk .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.talk .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.talk.playing > .pane, .talk.playing .film::before, .talk.playing .film::after { display: none; }
/* Nav menus: Platform and Company open a panel the width of the page under the bar, on hover, focus or a click. Each
   item is its name with a line under it. The bar turns solid while a panel is open. */
.links { align-self: stretch; align-items: center; }
.drop { display: flex; align-items: center; align-self: stretch; }
.drop > button { display: inline-flex; align-items: center; gap: var(--s-1); font: inherit; color: inherit; background: none; opacity: 0.72; transition: opacity var(--fast) var(--ease); }
.drop > button svg { width: var(--s-2); height: var(--s-2); fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--fast) var(--ease); }
.drop:is(:hover, :focus-within) > button, .drop > button:is([aria-expanded='true'], [aria-current]) { opacity: 1; }
.drop .panel { position: fixed; inset: var(--nav) 0 auto; z-index: 19; padding-block: var(--s-3) var(--s-4); color: var(--ink); background: var(--paper); opacity: 0; visibility: hidden; transform: translateY(calc(var(--s-1) * -1)); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast); }
.drop:is(:hover, :focus-within) .panel, .drop:has(> [aria-expanded='true']) .panel { opacity: 1; visibility: visible; transform: none; }
.drop:is(:hover, :focus-within) > button svg, .drop > [aria-expanded='true'] svg { transform: rotate(180deg); }
.drop .panel .frame { padding-left: var(--drop-x, var(--gutter)); display: grid; grid-template-columns: repeat(2, minmax(0, calc(var(--col) * 1.5))); gap: var(--s-3) var(--s-4); }
.drop .panel a { display: grid; gap: var(--hair); padding: var(--s-1); margin: calc(var(--s-1) * -1); border-radius: var(--r); opacity: 1; transition: background var(--fast) var(--ease); }
.drop .panel a:hover, .drop .panel a[aria-current] { background: var(--fog); }
.drop .panel b { font-size: var(--t-small); font-weight: var(--regular); color: var(--ink); }
.drop .panel span { font-size: var(--t-small); color: var(--mute); }
.nav:has(.drop:hover, .drop:focus-within, [data-drop][aria-expanded='true']) { background: var(--paper); }
.sheet { overflow-y: auto; padding-bottom: var(--s-4); }
.sheet nav > div { display: grid; justify-items: start; gap: var(--s-1); }
.sheet nav { gap: var(--s-3); }
/* The banner over the nav (home page): a slim strip of fog, one offer at a time, each fading into the next. The nav
   grows by the strip's height, and everything placed under the nav moves with it. */
html:has(.nav .banner) { --nav: calc(var(--nav-bare) + var(--bar)); }
.nav:has(.banner) .nav-in { height: var(--nav-bare); }
.banner { position: relative; height: var(--bar); color: var(--ink-2); background: var(--fog); font-size: var(--t-small); }
.banner a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--s-1); padding-inline: var(--gutter); opacity: 0; visibility: hidden; transition: opacity var(--mid) var(--ease), visibility var(--mid), color var(--fast) var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner a.on { opacity: 1; visibility: visible; }
.banner a:hover { color: var(--ink); }
.banner .arrow { flex: none; width: var(--s-2); height: var(--s-2); }

/* The featured post's words, now on the left: room between date, title, summary and link, like the lead story on
   anduril.com/news. */
.feature.flip > div:first-child { display: grid; justify-items: start; gap: var(--s-2); }
/* Marzy Dental: the sample morning report, and the comparison with a typical service in three even columns. */
.report .rows { grid-template-columns: fit-content(30%) minmax(0, 1fr) fit-content(30%); }
.report-row { align-items: start; }
.report-row span:nth-child(2) { color: var(--ink-2); }
.report a { text-decoration: underline; text-underline-offset: var(--hair); }
.rows.vs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--s-2); }
.rows.vs .row > :last-child { justify-self: start; color: var(--ink); }
.rows.vs .row.top { background: none; }
@media (max-width: 40rem) {
  .rows.vs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows.vs .row > span:nth-child(n) { grid-column: auto; order: 0; align-self: start; }
  .rows.vs .row > :first-child:nth-child(n) { grid-column: 1 / -1; font-weight: var(--medium); }
  .rows.vs .row.top > :first-child { display: none; }
  .rows.vs .row > span:nth-child(2) { color: var(--ink-2); }
}

/* Phone pass: agents shrink and keep clear of the words, the crew sits two across, code and talks fit the screen. */
.talks > * { min-width: 0; }
@media (max-width: 40rem) {
  .sat { width: var(--size); }
  .sat .bot.lg { width: 100%; }
  .sat > .chip { display: none; }
  .grid.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
  .grid.duo > .plate { gap: var(--s-1); padding: var(--s-2) var(--s-1); }
  .grid.duo .bot.lg { width: var(--size); }
  [data-approvals] .row { min-height: calc(var(--size) * 1.3); }
  [data-program] { padding: var(--s-2); }
  .talk .label { white-space: normal; }
  .banner a { white-space: normal; text-align: center; text-wrap: balance; line-height: var(--lh-snug); }
  .hero:has(.full) > .sky { bottom: auto; height: calc(var(--nav) + var(--s-3) + var(--sky)); }
  .hero:has(.full) > .sky > .chip { gap: 0; padding: 0; font-size: 0; }
  .hero:has(.full) > .sky > .chip .bot { width: var(--s-3); }
  .past { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .past > .plate { min-width: 0; padding: var(--s-2); }
  .post-card { grid-template-columns: minmax(0, 1fr) var(--size-lg); }
  .post-card > div:first-child { min-width: 0; }
  .post-card .label { white-space: normal; }
  .split > * { min-width: 0; }
  .report { padding: var(--s-2); }
  .report .label { white-space: normal; }
  .report .rows { grid-template-columns: minmax(0, 1fr) auto; }
  .talk { aspect-ratio: auto; min-height: var(--short); padding: var(--s-1); }
}