/* Feature — text one side, media the other. V0.1 Home "Creative humans, intelligent agents.":
   text x48 w582 (heading Ekstra 65/110% → Display/3, 50 above the body, body Inter 22 #484848),
   media 380 wide at x≈820. Case-study rows reuse it with tags and a rounded image. */
.block--feature .feature {
  --media-w: calc(50% - var(--space-40));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--media-w);
  column-gap: var(--space-80);
  align-items: center;
}
.block--feature .feature--sm { --media-w: 380px; /* V0.1 Home */ }
.block--feature .feature--lg { --media-w: 58%; }
.block--feature .feature--left { grid-template-columns: var(--media-w) minmax(0, 1fr); }
.block--feature .feature--left .feature__media { order: -1; }
.block--feature .feature--text-only { grid-template-columns: minmax(0, 1fr); }

.block--feature .feature__text { max-width: 37.5rem; }
.block--feature .feature__eyebrow { margin-bottom: var(--space-32); }
.block--feature .feature__tags { margin-bottom: var(--space-32); max-width: 28rem; }
.block--feature .feature__heading { max-width: 12em; }
.block--feature .feature__heading.t-display-3 { letter-spacing: -0.06em; /* V0.1 */ }
.block--feature .feature__heading + .feature__body { margin-top: var(--space-48); }
.block--feature .feature__body { max-width: 33em; }
.block--feature .feature__body.t-body-lg { line-height: 1.3; letter-spacing: -0.045em; /* V0.1: Inter 22/120% -5% */ }
.block--feature .feature__heading.t-display-6 + .feature__body { margin-top: var(--space-24); }

@media (max-width: 1023px) {
  .block--feature .feature,
  .block--feature .feature--left { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-48); }
  .block--feature .feature--left .feature__media { order: 0; }
  .block--feature .feature--sm .feature__media { max-width: 480px; }
}

/* Home "Creative that grows smarter.": the copy, and the Workspace mock as its media. */
@media (min-width: 1024px) {
  .block--feature .feature--agents { grid-template-columns: minmax(28rem, 1fr) minmax(0, 54%); } /* the copy keeps room for a two-line headline down to 1024 */
}
.block--feature .feature--agents .feature__media { container-type: inline-size; } /* the mock's font-size is in cqw, so it needs a container above it */
@media (max-width: 767px) {
  .block--feature .feature--agents .feature__media { margin-inline: calc(-1 * var(--gutter)); } /* edge to edge */
}

/* ============ The Workspace mock (snippets/feature-agents.php) ============
   One 16s flow in Nick's touchstone look (11-05): a prompt, two check pills, a proposed brief,
   three concepts as stacked-layer shapes, the likely winner built out in four placements, and a
   spark carrying its results back to Creative performance. Abstract on purpose: no ads, no
   figures, no product chrome. Choreography: _handoffs/2026-11-05-nick-homepage-anim/choreo.md.
   A 4:3 stage (1:1 on phones), everything placed in cqw and sized in em off one cqw font-size.
   The resting styles are the finished frame (reduced motion, no JS). workspace.js adds .is-run,
   which plays each part once at its cue (delays are seconds into the loop), holds it with
   .is-held until it's 40% in view and again offscreen, and restarts it when ws-loop ends.
   Arrivals overshoot a little (--spring); the exit is expo-in. */
.ws {
  --card: #151515;
  --line: rgb(255 255 255 / 0.1);
  --ghost: rgb(255 255 255 / 0.16); /* placeholder bars, unlit dots */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --exit: cubic-bezier(0.7, 0, 0.84, 0);
  --cx-ease: cubic-bezier(.3, 0, .25, 1); --cy-ease: cubic-bezier(.55, 0, .45, 1); /* cursor travel: an arc */
  --bx: 34; --by: 62; /* Concept B's centre: where the build-out comes from */
  --cx: 25; --cy: 37.5; /* the brief's centre: where the concepts come from */
  --cl: 4; --cs: 20.5; --cw: 19; --ct: 51.5; --ch: 21; /* the concepts: first left, step, width, top, height */
  position: relative;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-black);
  background-image: /* the touchstone's long diagonal hairlines */
    linear-gradient(118deg, transparent calc(38% - 1px), rgb(255 255 255 / 0.07) 38%, transparent calc(38% + 1px)),
    linear-gradient(118deg, transparent calc(81% - 1px), rgb(255 255 255 / 0.05) 81%, transparent calc(81% + 1px));
  font-family: var(--font-ui);
  font-size: max(1.8cqw, 9px); /* 11.5px at 1280 */
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-white);
  isolation: isolate;
}
.ws > *, .ws-scene > * { position: absolute; margin: 0; }
.ws-scene { inset: 0; }
:where(.ws) p { margin: 0; }
.ws-card { background: var(--card); border: 1px solid var(--line); border-radius: 1em; }

/* The prompt */
.ws-prompt {
  left: 4cqw; top: 4cqw; right: 4cqw; height: 7cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 0 .55em 0 1.3em;
  background: #0d0d0d; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--radius-pill);
  font-size: 1.05em; white-space: nowrap; color: rgb(255 255 255 / 0.85);
}
.ws-type { overflow: hidden; text-overflow: clip; }
.ws-send { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--color-white); }
.ws-send svg { width: 1.1em; fill: none; stroke: var(--color-black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The checks: a wire from the prompt to each pill. The wire's box runs from the prompt's foot to
   the second pill's middle; the first pill's middle is halfway down it. */
.ws-wire { left: 31cqw; top: 11cqw; width: 4cqw; height: 10.15cqw; overflow: visible; fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ws-wire path { vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.ws-pill {
  left: 35cqw; top: 14cqw;
  display: flex; align-items: center; gap: .55em;
  height: 2.4em; padding: 0 .4em 0 .9em;
  background: #0d0d0d; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--radius-pill);
  font-size: .95em; white-space: nowrap;
}
.ws-pill--perf { top: 19.1cqw; }
.ws-pill > i { width: .5em; height: .5em; border-radius: 50%; background: var(--c); }
.ws-check { width: 1.35em; height: 1.35em; flex: none; }
.ws-check circle { fill: var(--color-green); }
.ws-check path { fill: none; stroke: var(--color-black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The brief */
.ws-brief { left: 4cqw; top: 27cqw; width: 42cqw; z-index: 2; padding: 1.1em 1.2em 1em; }
.ws-brief__head { display: flex; align-items: center; gap: .5em; }
.ws-brief__head svg { width: 1.1em; fill: none; stroke: var(--color-gray-500); stroke-width: 1.3; stroke-linejoin: round; }
.ws-tag {
  margin-left: auto; padding: .3em .7em; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-amber) 16%, transparent); color: var(--color-amber);
  font-size: .8em;
}
.ws-brief__note { margin: .5em 0 .9em; font-size: .8em; font-style: italic; color: var(--color-gray-500); }
.ws-bar { font-size: .75em; color: rgb(255 255 255 / 0.75); }
.ws-bar i { display: block; width: calc(var(--w) * 100%); height: .5em; margin: .45em 0 .75em; border-radius: var(--radius-pill); background: var(--ghost); transform-origin: left; }
.ws-bar:last-child i { margin-bottom: 0; }

/* Concepts: abstract stacked layers, a label and two dots (client knowledge, creative performance). */
.ws-concept {
  left: calc((var(--cl) + var(--k) * var(--cs)) * 1cqw); top: calc(var(--ct) * 1cqw); width: calc(var(--cw) * 1cqw); height: calc(var(--ch) * 1cqw);
  display: flex; flex-direction: column;
  --fx: calc((var(--cx) - var(--cl) - var(--k) * var(--cs) - var(--cw) / 2) * 1cqw); --fy: calc((var(--cy) - var(--ct) - var(--ch) / 2) * 1cqw);
}
.ws-concept p { display: flex; align-items: center; justify-content: space-between; padding: 0 .9em .9em; font-size: .85em; }
.ws-dots { display: flex; gap: .3em; }
.ws-dots i { width: .5em; height: .5em; border-radius: 50%; background: var(--color-green); }
.ws-dots i + i { background: var(--color-blue); }
.ws-concept:not(.ws-concept--b) > :not(.ws-ring, .ws-win) { opacity: .45; } /* B is the pick */
.ws-ring { inset: -.35em; border: 1.5px solid var(--color-blue); border-radius: 1.25em; pointer-events: none; }
.ws-win { left: .7em; top: .7em; padding: .35em .7em; border-radius: var(--radius-pill); background: var(--color-blue); color: var(--color-black); font-size: .75em; white-space: nowrap; }
.ws-concept > .ws-ring, .ws-concept > .ws-win { position: absolute; }

/* The art: a size container, so a shape fits its frame whatever the ratio. */
.ws-art { position: relative; display: block; flex: 1; container-type: size; }
.ws-shape { position: absolute; inset: 0; margin: auto; width: 72cqmin; height: 72cqmin; }
.ws-shape i {
  position: absolute; border-radius: 9%;
  background: linear-gradient(140deg, #6e6e6e, #2c2c2c 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 .6em 1.2em rgb(0 0 0 / 0.5);
}
.ws-shape--a i { left: 20%; width: 60%; aspect-ratio: 1; top: calc(var(--j) * 14%); z-index: calc(3 - var(--j)); transform: rotateX(60deg) rotate(45deg); }
.ws-shape--b i { left: calc(14% + var(--j) * 24%); top: calc(16% + var(--j) * 10%); width: 46%; height: 60%; transform: skewY(-16deg); }
.ws-shape--c i { left: calc(12% + var(--j) * 19%); top: calc(12% + var(--j) * 11%); width: 38%; height: 54%; transform: skewY(-16deg); }

/* The build-out: the pick in four placements. Placed in unitless cqw (--x, --y, --w; --h is the
   frame's height) so each knows where Concept B is from it. */
.ws-out {
  left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw);
  --fx: calc((var(--bx) - var(--x) - var(--w) / 2) * 1cqw); --fy: calc((var(--by) - var(--y) - var(--h) / 2) * 1cqw);
}
.ws-out .ws-art { aspect-ratio: var(--r); border-radius: .7em; }
.ws-out p { display: flex; align-items: center; gap: .4em; margin-top: .5em; font-size: .8em; white-space: nowrap; color: rgb(255 255 255 / 0.7); }
.ws-out p i { flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--color-teal); }
.ws-out--1 { --x: 68; --y: 15; --w: 9.5; --r: 9 / 16; --h: 16.9; }
.ws-out--2 { --x: 80; --y: 15; --w: 16; --r: 1; --h: 16; }
.ws-out--3 { --x: 68; --y: 38.5; --w: 28; --r: 16 / 9; --h: 15.75; }
.ws-out--4 { --x: 68; --y: 59.5; --w: 12; --r: 6 / 5; --h: 10; }

/* The results' way home: from the build-out to Creative performance's dot. Hidden at rest. */
.ws-spark { left: 0; top: 0; z-index: 3; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border-radius: 50%; background: var(--color-blue); box-shadow: 0 0 1em .3em color-mix(in srgb, var(--color-blue) 70%, transparent); opacity: 0;
  --s1: 68cqw 46cqw; --s2: 56cqw 30cqw; --s3: 36.9cqw 21.15cqw; }

/* The cursors (the ones from before 11-05, back after the staging review): the tip sits at the
   element's origin and the label hangs below-right, so the arrow is at the pill's top-left corner,
   always (Tucker 10-22). Agents carry a robot, the lead a photo inset in the pill's round end. Each
   walks its own points (--xN --yN, unitless cqw, phones below) on two clocks, x easing out and y
   in-out, so it travels on an arc; the arrow squashes on a click and stays down through a drag.
   They come in from off the stage and leave again; at rest they're gone. */
.ws-cur { left: 0; top: 0; z-index: 4; width: 0; height: 0; color: var(--cursor); opacity: 0; }
.ws-cur__arrow { position: absolute; left: -.19em; top: -.14em; width: 1.9em; max-width: none; height: auto; overflow: visible; transform-origin: .19em .14em; fill: currentColor; stroke: var(--color-white); stroke-width: 1.3; stroke-linejoin: round; }
.ws-cur span {
  position: absolute; left: 1.4em; top: 1.9em;
  display: flex; align-items: center; gap: .4em; width: max-content;
  padding: .55em 1em; border-radius: var(--radius-pill);
  background: var(--cursor); color: var(--color-black);
  font-size: 1.05em; line-height: 1; white-space: nowrap;
}
.ws-cur__icon { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ws-cur__icon circle { fill: currentColor; stroke: none; }
.ws-cur--lead span { padding-left: .35em; } /* the photo's inset is even all round (Tucker 10-22) */
.ws-cur__avatar { width: 1.5em; height: 1.5em; margin-block: -.25em; flex: none; max-width: none; border-radius: 50%; object-fit: cover; }
/* The lead clicks into the prompt and stays while it types, then comes back to pick B. */
.ws-cur--lead { --cursor: var(--color-white); --x0: -36; --y0: 40; --x1: 7.5; --y1: 8.2; --x2: 26; --y2: 9.5; --x3: -36; --y3: 30; --x4: 20; --y4: 80; --x5: 33; --y5: 60; --x6: 30; --y6: 80; }
.ws-cur--lead .ws-cur__arrow { stroke: var(--color-black); }
/* Research ticks both checks, marks the brief Proposed, and later carries the results home. */
.ws-cur--research { --cursor: var(--color-blue); --x0: -36; --y0: 18; --x1: 55.1; --y1: 16; --x2: 58.8; --y2: 21.1; --x3: 38; --y3: 30.4; --x4: 104; --y4: 26; --x5: 104; --y5: 50; --x6: 68.3; --y6: 46.3; --x7: 56.3; --y7: 30.3; --x8: 37.2; --y8: 21.45; --x9: -36; --y9: 30; }
/* Design deals the concepts out of the brief, and later drags the pick out into its placements. */
.ws-cur--design { --cursor: var(--color-chartreuse); --x0: 20; --y0: 80; --x1: 25; --y1: 44; --x2: -36; --y2: 70; --x3: 40; --y3: 80; --x4: 40; --y4: 64; --x5: 66; --y5: 52; --x6: 104; --y6: 30; }

/* ---------- The flow ---------- */
.ws.is-held, .ws.is-held * { animation-play-state: paused !important; }
.ws.is-run { animation: ws-loop 16s linear both; }
.ws.is-run .ws-scene { animation: ws-fade 0.6s var(--exit) 15s both; }
.ws.is-run .ws-type { animation: ws-type 16s linear both; }
.ws.is-run .ws-send { animation: ws-press .3s var(--ease-out) 2.5s; }
.ws.is-run .ws-wire path { animation: ws-draw .7s var(--ease-out) 2.7s both; }
.ws.is-run .ws-pill { --dx: -1.5cqw; --s0: .9; animation: ws-in .5s var(--spring) calc(2.9s + var(--k) * .3s) both; }
.ws.is-run .ws-check { --s0: .3; animation: ws-in .4s var(--spring) calc(3.4s + var(--k) * .4s) both; }
.ws.is-run .ws-pill--perf .ws-check { animation: ws-in .4s var(--spring) 3.8s both, ws-repop .5s var(--ease-out) 13.2s; } /* the results land: ticked again */
.ws.is-run .ws-pill--perf > i { animation: ws-repop .5s var(--ease-out) 13.1s; }
.ws.is-run .ws-brief { --dy: 2cqw; animation: ws-in .7s var(--ease-out) 4.2s both; }
.ws.is-run .ws-tag { --s0: .5; animation: ws-in .4s var(--spring) 5s both; }
.ws.is-run .ws-bar i { animation: ws-grow .6s var(--ease-out) calc(5.2s + var(--k) * .2s) both; }
/* Dealt from under the brief on an arc: x eases out, y eases in. */
.ws.is-run .ws-concept { animation: ws-x .8s var(--ease-out) calc(6.6s + var(--k) * .15s) both, ws-y .8s cubic-bezier(.5, 0, .3, 1.25) calc(6.6s + var(--k) * .15s) both; }
.ws.is-run .ws-concept .ws-shape i { --dy: -40%; animation: ws-in .5s var(--spring) calc(7.3s + var(--k) * .15s + var(--j) * .12s) both; }
.ws.is-run .ws-dots i { animation: ws-lit .3s var(--ease-out) calc(8.6s + var(--k) * .25s + var(--j) * .12s) both; }
.ws.is-run .ws-concept:not(.ws-concept--b) > :not(.ws-ring, .ws-win) { animation: ws-dim .5s var(--ease-out) 9.6s both; }
.ws.is-run .ws-ring { --s0: 1.08; animation: ws-in .45s var(--ease-out) 9.6s both; }
.ws.is-run .ws-win { --s0: .6; animation: ws-in .4s var(--spring) 9.8s both; }
.ws.is-run .ws-out { animation: ws-x .9s var(--ease-out) calc(10.4s + var(--k) * .12s) both, ws-y .9s cubic-bezier(.5, 0, .3, 1.15) calc(10.4s + var(--k) * .12s) both, ws-grow-in .9s var(--spring) calc(10.4s + var(--k) * .12s) both; }
.ws.is-run .ws-out p { --dy: .4em; animation: ws-in .4s var(--ease-out) calc(11.2s + var(--k) * .12s) both; }
.ws.is-run .ws-spark { animation: ws-spark 1s var(--ease-in-out) 12.2s both; }
.ws.is-run .ws-cur--lead { animation: ws-lead-x 16s var(--cx-ease) both, ws-lead-y 16s var(--cy-ease) both; }
.ws.is-run .ws-cur--lead .ws-cur__arrow { animation: ws-lead-tap 16s linear both; }
.ws.is-run .ws-cur--research { animation: ws-research-x 16s var(--cx-ease) both, ws-research-y 16s var(--cy-ease) both; }
.ws.is-run .ws-cur--research .ws-cur__arrow { animation: ws-research-tap 16s linear both; }
.ws.is-run .ws-cur--design { animation: ws-design-x 16s var(--cx-ease) both, ws-design-y 16s var(--cy-ease) both; }
.ws.is-run .ws-cur--design .ws-cur__arrow { animation: ws-design-tap 16s linear both; }

@keyframes ws-loop { from, to { opacity: 1; } }
@keyframes ws-fade { to { opacity: 0; } }
@keyframes ws-type { /* starts on the lead's click (0.8s); Enter sends, since a cursor at the send button would push its pill off the stage */
  0%, 5.6% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(46, end); }
  15%, 93.75% { clip-path: inset(0); animation-timing-function: var(--exit); }
  97.5%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes ws-press { 50% { scale: .82; } }
@keyframes ws-draw { from { stroke-dashoffset: 1; opacity: 0; } 10% { opacity: 1; } to { stroke-dashoffset: 0; } }
@keyframes ws-in { from { opacity: 0; translate: var(--dx, 0) var(--dy, 0); scale: var(--s0, 1); } }
@keyframes ws-repop { 50% { scale: 1.4; } }
@keyframes ws-grow { from { scale: 0 1; } }
@keyframes ws-x { from { translate: var(--fx) 0; } }
@keyframes ws-y { from { transform: translateY(var(--fy)); opacity: 0; } 25% { opacity: 1; } }
@keyframes ws-grow-in { from { scale: .25; } }
@keyframes ws-lit { from { background: var(--ghost); } }
@keyframes ws-dim { from { opacity: 1; } }
/* Cursor tracks: times are % of the 16s loop (t × 6.25). Opacity only hides the jumps between
   exits and entrances, which happen off the stage. */
@keyframes ws-lead-x {
  0% { translate: calc(var(--x0) * 1cqw) 0; opacity: 1; } 4.7%, 5.9% { translate: calc(var(--x1) * 1cqw) 0; } 15% { translate: calc(var(--x2) * 1cqw) 0; } 21.9% { translate: calc(var(--x3) * 1cqw) 0; opacity: 1; }
  22%, 53.7% { opacity: 0; } 53.75% { translate: calc(var(--x4) * 1cqw) 0; opacity: 1; } 58.75%, 61.25% { translate: calc(var(--x5) * 1cqw) 0; } 65.6%, 100% { translate: calc(var(--x6) * 1cqw) 0; opacity: 1; }
}
@keyframes ws-lead-y { 0% { transform: translateY(calc(var(--y0) * 1cqw)); } 4.7%, 5.9% { transform: translateY(calc(var(--y1) * 1cqw)); } 15% { transform: translateY(calc(var(--y2) * 1cqw)); } 21.9% { transform: translateY(calc(var(--y3) * 1cqw)); } 53.75% { transform: translateY(calc(var(--y4) * 1cqw)); } 58.75%, 61.25% { transform: translateY(calc(var(--y5) * 1cqw)); } 65.6%, 100% { transform: translateY(calc(var(--y6) * 1cqw)); } }
@keyframes ws-lead-tap { 0%, 4.95%, 5.5%, 59.3%, 59.85%, 100% { scale: 1; } 5.15%, 59.5% { scale: .8; } }
@keyframes ws-research-x {
  0%, 16.25% { translate: calc(var(--x0) * 1cqw) 0; opacity: 1; } 20.3%, 20.9% { translate: calc(var(--x1) * 1cqw) 0; } 23.1%, 23.6% { translate: calc(var(--x2) * 1cqw) 0; } 30.3%, 31.25% { translate: calc(var(--x3) * 1cqw) 0; } 36.9% { translate: calc(var(--x4) * 1cqw) 0; opacity: 1; }
  37%, 71.8% { opacity: 0; } 71.9% { translate: calc(var(--x5) * 1cqw) 0; opacity: 1; } 75.6% { translate: calc(var(--x6) * 1cqw) 0; } 76.25% { translate: calc(var(--x6) * 1cqw) 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 79.4% { translate: calc(var(--x7) * 1cqw) 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  82.5%, 83.75% { translate: calc(var(--x8) * 1cqw) 0; } 88.75%, 100% { translate: calc(var(--x9) * 1cqw) 0; opacity: 1; }
}
@keyframes ws-research-y {
  0%, 16.25% { transform: translateY(calc(var(--y0) * 1cqw)); } 20.3%, 20.9% { transform: translateY(calc(var(--y1) * 1cqw)); } 23.1%, 23.6% { transform: translateY(calc(var(--y2) * 1cqw)); } 30.3%, 31.25% { transform: translateY(calc(var(--y3) * 1cqw)); } 36.9% { transform: translateY(calc(var(--y4) * 1cqw)); } 71.9% { transform: translateY(calc(var(--y5) * 1cqw)); }
  75.6% { transform: translateY(calc(var(--y6) * 1cqw)); } 76.25% { transform: translateY(calc(var(--y6) * 1cqw)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 79.4% { transform: translateY(calc(var(--y7) * 1cqw)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 82.5%, 83.75% { transform: translateY(calc(var(--y8) * 1cqw)); } 88.75%, 100% { transform: translateY(calc(var(--y9) * 1cqw)); }
}
@keyframes ws-research-tap { 0%, 20.45%, 20.95%, 23.25%, 23.75%, 30.45%, 30.95%, 75.75%, 82.65%, 100% { scale: 1; } 20.6%, 23.4%, 30.6%, 75.9%, 82.5% { scale: .8; } }
@keyframes ws-design-x {
  0%, 35.6% { translate: calc(var(--x0) * 1cqw) 0; opacity: 1; } 40%, 41.25% { translate: calc(var(--x1) * 1cqw) 0; } 46.25% { translate: calc(var(--x2) * 1cqw) 0; opacity: 1; } 46.3%, 60.55% { opacity: 0; }
  60.6% { translate: calc(var(--x3) * 1cqw) 0; opacity: 1; } 64%, 64.7% { translate: calc(var(--x4) * 1cqw) 0; } 69.7%, 70.6% { translate: calc(var(--x5) * 1cqw) 0; } 75%, 100% { translate: calc(var(--x6) * 1cqw) 0; opacity: 1; }
}
@keyframes ws-design-y { 0%, 35.6% { transform: translateY(calc(var(--y0) * 1cqw)); } 40%, 41.25% { transform: translateY(calc(var(--y1) * 1cqw)); } 46.25% { transform: translateY(calc(var(--y2) * 1cqw)); } 60.6% { transform: translateY(calc(var(--y3) * 1cqw)); } 64%, 64.7% { transform: translateY(calc(var(--y4) * 1cqw)); } 69.7%, 70.6% { transform: translateY(calc(var(--y5) * 1cqw)); } 75%, 100% { transform: translateY(calc(var(--y6) * 1cqw)); } }
@keyframes ws-design-tap { 0%, 40.15%, 40.65%, 64.25%, 70%, 100% { scale: 1; } 40.3%, 64.4%, 69.85% { scale: .8; } }
@keyframes ws-spark {
  0% { opacity: 0; translate: var(--s1); scale: .4; }
  15% { opacity: 1; scale: 1; }
  50% { translate: var(--s2); }
  85% { opacity: 1; scale: 1; }
  100% { opacity: 0; translate: var(--s3); scale: .4; }
}

/* ---------- Phones: square, laid out again. The prompt's line gets smaller, the brief loses its
   note, the build-out sits beside the brief (three small, CTV under), the concepts run along the
   foot, and the frames say their placement only. ---------- */
@media (max-width: 767px) {
  .ws {
    aspect-ratio: 1; font-size: 2.5cqw; border-radius: 0; /* edge to edge */
    --cx: 31; --cy: 45.5; --cl: 4; --cs: 31.35; --cw: 29.3; --ct: 66; --ch: 30;
    --bx: 50; --by: 81;
  }
  .ws-prompt { top: 4cqw; height: 10cqw; font-size: .85em; }
  .ws-wire { left: 29cqw; top: 14cqw; height: 13.1cqw; }
  .ws-pill { left: 33cqw; top: 17.7cqw; }
  .ws-pill--perf { top: 24.25cqw; }
  .ws-brief { top: 34cqw; width: 54cqw; }
  .ws-brief__note { display: none; }
  .ws-brief__head { margin-bottom: .8em; }
  .ws-out p span { display: none; }
  /* Stories, Feed and Display share a foot line; CTV sits under them. Every label is under its tile. */
  .ws-out--1 { --x: 61; --y: 33; --w: 7.5; --h: 13.3; }
  .ws-out--2 { --x: 71; --y: 34.8; --w: 11.5; --h: 11.5; }
  .ws-out--4 { --x: 85; --y: 37.1; --w: 11; --h: 9.2; }
  .ws-out--3 { --x: 61; --y: 51.5; --w: 17; --h: 9.6; }
  .ws-spark { --s1: 61cqw 57cqw; --s2: 50cqw 40cqw; --s3: 35.8cqw 27.1cqw; }
  .ws-cur--lead { --x0: -44; --y0: 50; --x1: 8; --y1: 9.5; --x2: 30; --y2: 11; --x3: -44; --y3: 40; --x4: 20; --y4: 105; --x5: 46; --y5: 78; --x6: 40; --y6: 108; }
  .ws-cur--research { --x0: -44; --y0: 22; --x1: 61; --y1: 20.5; --x2: 66.2; --y2: 27.1; --x3: 47; --y3: 38.8; --x4: 104; --y4: 30; --x5: 104; --y5: 60; --x6: 61.3; --y6: 57.3; --x7: 50.3; --y7: 40.3; --x8: 36.1; --y8: 27.4; --x9: -44; --y9: 40; }
  .ws-cur--design { --x0: 15; --y0: 105; --x1: 31; --y1: 52; --x2: -44; --y2: 80; --x3: 50; --y3: 105; --x4: 55; --y4: 80; --x5: 57; --y5: 61; --x6: 104; --y6: 40; }
}