/* hyperionos.ai/agency — the Agency page.
   Built from the drawn page (KB #8607) in the showcase look. Three parts, in order:
     1. THE DRAWING   every frame as drawn at 1440, on the site's own Skyline tokens
     2. THE ART       one portrait or scene per class
     3. THE PAGE      how a 1440 drawing becomes a page: it scales to the window on a
                      desktop, and below 900 each frame is re-laid as one column
   site.css loads first and carries the header and the footer. */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · THE DRAWING
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── The drawings: the site's own Skyline tokens (site.css), scoped to a frame ── */
.frame { --ground: #02060d; --ground-up: #050b17;
    --text: #d6d8dd; --text-2: #babdc3; --muted: #9c9fa5; --eyebrow: #7d899d;
    --ivory-hi: #fffaf3; --ivory-mid: #f4e8d9; --ivory-lo: #ddc8ae; --cream: #f2ecdc;
    --gold: #dbc3aa; --gold-ink: #e6d6c0; --os: #8c9fd0;
    --hy: 242,236,220;            /* Hyperion's light */
    --hz: 144,133,200;            /* and the haze around it */
    --need: 236,214,160;          /* a call that is yours */
    --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
    position: relative; overflow: hidden; width: 1440px;
    background: var(--ground); color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px; line-height: 1.5; font-weight: 400; text-align: left;
    -webkit-font-smoothing: antialiased; }
.frame *, .frame *::before, .frame *::after { box-sizing: border-box; }
.frame b { font-weight: 500; color: inherit; }
.frame i { font-style: normal; }
.frame svg.i { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.abs { position: absolute; }
/* .r keeps the field off the left column, where a star beside a word reads as a full stop */
.stars.r { -webkit-mask: linear-gradient(90deg, transparent 0, transparent 42%, #000 56%); mask: linear-gradient(90deg, transparent 0, transparent 42%, #000 56%); }
.stars.b { transform: scale(-1, 1); opacity: .75; }
.stars.c { transform: rotate(180deg) scale(1.35); opacity: .55; }
.stars { position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(1.2px 1.2px at 25% 39%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 88%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 19% 22%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 6% 88%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 84%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 71% 66%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 72% 93%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 96% 18%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 63% 97%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 36% 55%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 65%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 3% 4%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 56% 43%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 85%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 15% 93%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 44% 18%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 21% 80%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 59% 56%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 68% 64%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 27% 47%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 5% 65%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 11% 13%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 3%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 81% 31%, rgba(235,240,255,.6) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 91% 52%, rgba(235,240,255,.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 48% 74%, rgba(235,240,255,.5) 50%, transparent 100%); }
/* the city along the bottom of a frame: the hero's own strip */
.city { position: absolute; left: 0; right: 0; bottom: 0; height: 320px; pointer-events: none; -webkit-mask: linear-gradient(to bottom, transparent 0, #000 30%); mask: linear-gradient(to bottom, transparent 0, #000 30%);
    background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 100%; }
.city::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--ground)); }
.fadeb { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none; background: linear-gradient(to bottom, rgba(2,6,13,0), var(--ground)); }
/* type */
.eb { font-size: 12.5px; font-weight: 400; line-height: 1.75; letter-spacing: .42em; text-transform: uppercase; color: #9aa5b8; }
.h { font-size: 68px; font-weight: 460; line-height: 1; letter-spacing: -.042em; color: var(--ivory-mid); }
.h span { display: block; width: max-content; padding-bottom: .14em; margin-bottom: -.14em;
    background: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ld { font-size: 20px; font-weight: 300; line-height: 1.5; color: #d4d1cc; }
.ld span { display: block; }
.lb { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #b0b5be; }
.pill { display: inline-flex; align-items: center; gap: 14px; padding: 15px 28px; border-radius: 999px; color: #fdfcfa; font-size: 18px; line-height: 1.3;
    background: linear-gradient(to bottom, rgba(219,195,170,.1), rgba(219,195,170,.04)), #0e0f13;
    box-shadow: inset 0 0 0 1.5px #e3bf8e, 0 0 24px -4px rgba(227,184,122,.45); }
.pill::after, .tl::after { content: '\2192'; font-size: 1.05em; }
.tl { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; font-size: 15px; color: #a8b0bb;
    background: linear-gradient(rgba(182,175,170,.75), rgba(182,175,170,.75)) left bottom / 100% 1px no-repeat; }
.acts { display: flex; align-items: center; gap: 34px; }
/* glass, lit along the top edge */
.gl { border-radius: 8px; background-color: rgba(30,38,60,.6);
    background-image: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 46%);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.11), 0 24px 60px -24px rgba(0,0,0,.85); }
/* a call that is yours: the same glass under a warm lamp */
.call { border-radius: 8px;
    background: radial-gradient(72% 120px at 50% -18px, rgba(var(--need),.26), transparent),
    linear-gradient(to bottom, rgba(191,162,95,.11), rgba(191,162,95,.04)), rgba(13,14,18,.86);
    box-shadow: inset 0 1px 0 rgba(var(--need),.5), inset 0 0 0 1px rgba(var(--need),.16), 0 24px 60px -24px rgba(0,0,0,.85), 0 0 50px -12px rgba(191,162,95,.5); }
.call .k { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #e6d29c; }
.bt { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13.5px; white-space: nowrap; }
.bt.pri { color: #15130f; font-weight: 500; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.bt.sec { color: #efe9db; background: rgba(255,255,255,.13); }
/* faces: every portrait is the Synth's own, cropped to the head */
.fc { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; background-color: #0b0f18; background-repeat: no-repeat; filter: brightness(1.2) saturate(1.05);
    background-size: var(--fz, 150%) auto; background-position: var(--fx, 50%) var(--fy, 18%); }
.faces { display: inline-flex; }
.faces .fc { box-shadow: 0 0 0 2px #0a0d14, 0 0 0 3px rgba(255,255,255,.14); }
.faces .fc + .fc { margin-left: -8px; }
.ph { background-repeat: no-repeat; background-size: cover; background-position: 50% 14%; background-color: #0b0f18; }
.you { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    color: #15130f; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.im-p-severus { --fz:164%;--fx:29%;--fy:13%;--tz:145%;--tx:29%;--ty:13%;--nx:29% }
.im-p-athena { --fz:241%;--fx:44%;--fy:25%;--tz:145%;--tx:39%;--ty:16%;--nx:42% }
.im-p-hadrian { --fz:122%;--fx:26%;--fy:16%;--tz:105%;--tx:0%;--ty:0%;--nx:40% }
.im-p-hermes { --fz:193%;--fx:58%;--fy:7%;--tz:145%;--tx:63%;--ty:0%;--nx:59% }
.im-p-iris { --fz:160%;--fx:35%;--fy:17%;--tz:138%;--tx:30%;--ty:9%;--nx:37% }
.im-p-juno { --fz:128%;--fx:97%;--fy:6%;--tz:104%;--tx:100%;--ty:0%;--nx:74% }
.im-p-kestrel { --fz:145%;--fx:71%;--fy:16%;--tz:125%;--tx:83%;--ty:4%;--nx:65% }
.im-p-lucian { --fz:118%;--fx:62%;--fy:25%;--tz:104%;--tx:97%;--ty:27%;--nx:54% }
.im-p-minos { --fz:149%;--fx:50%;--fy:7%;--tz:128%;--tx:50%;--ty:0%;--nx:50% }
.im-p-mira { --fz:110%;--fx:91%;--fy:25%;--tz:104%;--tx:100%;--ty:42%;--nx:59% }
.im-p-octavia { --fz:104%;--fx:50%;--fy:22%;--tz:104%;--tx:50%;--ty:39%;--nx:50% }
.im-p-phidias { --fz:169%;--fx:99%;--fy:23%;--tz:139%;--tx:100%;--ty:18%;--nx:97% }
.im-p-sable { --fz:168%;--fx:51%;--fy:10%;--tz:145%;--tx:51%;--ty:0%;--nx:51% }
.im-p-silas { --fz:136%;--fx:51%;--fy:19%;--tz:118%;--tx:53%;--ty:9%;--nx:51% }
.im-p-thea { --fz:149%;--fx:27%;--fy:30%;--tz:129%;--tx:16%;--ty:36%;--nx:32% }
.im-p-vero { --fz:124%;--fx:52%;--fy:18%;--tz:107%;--tx:56%;--ty:0%;--nx:51% }
.im-p-vitruvia { --fz:161%;--fx:76%;--fy:27%;--tz:139%;--tx:86%;--ty:28%;--nx:74% }
.im-p-zeuxis { --fz:136%;--fx:8%;--fy:6%;--tz:118%;--tx:0%;--ty:0%;--nx:24% }
@keyframes hy-glint { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes hy-flow { to { stroke-dashoffset: -24; } }
svg.threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thr { fill: none; stroke: rgba(var(--hy),.9); stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(var(--hy),.5)); }
.thr.run { stroke-dasharray: 5 7; animation: hy-flow 1.1s linear infinite; }
.thr.dim { stroke: rgba(var(--hy),.28); stroke-width: 1.2; filter: none; }
.thr.gold { stroke: #f3dc9c; stroke-width: 2.8; filter: drop-shadow(0 0 6px rgba(226,190,110,.95)) drop-shadow(0 0 16px rgba(191,162,95,.6)); }
/* a handoff: one bead on the seam between two Synths */
.bead-n { position: absolute; z-index: 4; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; display: grid; place-items: center; color: rgb(var(--hy));
    background: #171d2e; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1.5px rgba(var(--hy),.7), 0 0 26px 0 rgba(var(--hy),.65); }
.bead-n svg.i { width: 15px; height: 15px; stroke-width: 2.6; }
.bead-n.gold { color: #f6e2a8; background: #2a2414; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1.5px rgba(var(--need),.95), 0 0 28px 2px rgba(226,190,110,.85); }
/* her ask bar */
.askbar { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 10px 0 20px; border-radius: 10px;
    background-color: rgba(20,26,40,.52); background-image: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
    -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(var(--hy),.12), 0 24px 60px -18px rgba(0,0,0,.85), 0 0 50px -8px rgba(var(--hy),.22); }
.askbar .typed { flex: 1; font-size: 17px; color: var(--text); white-space: nowrap; }
.askbar .caret { display: inline-block; width: 1.5px; height: 20px; background: rgb(var(--hy)); vertical-align: -4px; margin-left: 2px; animation: hy-glint 1.1s steps(2) infinite; }
.askbar .scope { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 4px; background: rgba(255,255,255,.13); font-size: 13px; color: #e4e2dd; white-space: nowrap; }
.askbar .go { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: #15130f; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.askbar .go svg.i { width: 17px; height: 17px; stroke-width: 2.3; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.dot.pulse { animation: hy-glint 1.2s ease-in-out infinite; }
/* ═══ D · A team's room ══════════════════════════════════════════════════ */
.fD { height: 940px; }
.fD .plate { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: 50% 42%; filter: brightness(1.45) saturate(1.2); }
.fD .veil { position: absolute; inset: 0; background:
    radial-gradient(520px 520px at 236px 600px, rgba(60,200,190,.2), transparent 70%),
    radial-gradient(520px 420px at 1180px 560px, rgba(200,80,180,.12), transparent 70%),
    linear-gradient(to bottom, rgba(2,6,13,.84) 0, rgba(2,6,13,.46) 28%, rgba(2,6,13,.16) 58%, rgba(2,6,13,.62) 90%, var(--ground) 100%); }
.fD .head { left: 96px; top: 84px; }
.fD .h { font-size: 64px; margin-top: 20px; }
.fD .ld { left: 836px; top: 100px; }
.tab { height: 38px; padding: 0 17px; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: #c9ccd2; background-color: rgba(10,14,22,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.tab.on { color: #e6faf7; background-color: rgba(60,160,152,.45); box-shadow: inset 0 1px 0 rgba(180,255,245,.35), 0 0 24px -6px rgba(95,200,192,.6); }
.tab .dot { width: 6px; height: 6px; }
.leadcard { left: 96px; top: 326px; width: 280px; height: 548px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(95,200,192,.25), 0 30px 70px -30px #000, 0 0 70px -20px rgba(95,200,192,.5); }
.leadcard .ph { position: absolute; inset: 0; background-position: 50% 8%; filter: brightness(1.15); }
.leadcard .sh { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,8,14,0) 46%, rgba(4,8,14,.8) 74%, rgba(4,8,14,.96) 100%); }
.leadcard .tx { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.leadcard .nm { font-size: 42px; font-weight: 460; letter-spacing: -.035em; line-height: 1.05; margin-top: 10px; }
.leadcard .rl { font-size: 14.5px; color: #c9ccd2; margin-top: 4px; }
.leadcard .now { margin-top: 16px; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border-radius: 6px; background: rgba(60,160,152,.34); font-size: 13.5px; color: #e6faf7; }
.leadcard .now .dot { color: #8fe6db; }
.mate { position: absolute; top: 326px; width: 126px; height: 548px; border-radius: 10px; overflow: hidden; background-color: rgba(10,14,22,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.05), 0 24px 60px -28px #000; }
.mate .ph { height: 360px; background-size: auto 100%; background-position: var(--nx, 50%) 0; filter: brightness(1.2);
    -webkit-mask: linear-gradient(to bottom, #000 76%, transparent 100%); mask: linear-gradient(to bottom, #000 76%, transparent 100%); }
.mate .sn { position: absolute; left: 12px; top: 12px; font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #e9e6e0; padding: 5px 7px; border-radius: 4px; background: rgba(6,9,15,.6); }
.mate .tx { position: absolute; left: 14px; right: 12px; top: 352px; }
.mate .nm { font-size: 19px; letter-spacing: -.015em; color: var(--ivory-mid); }
.mate .rl { font-size: 13px; color: #c0c3c9; margin-top: 1px; }
.mate .got { margin-top: 14px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #a6ece3; }
.mate .now { margin-top: 7px; font-size: 13.5px; line-height: 1.4; color: #dedcd7; }
.mate .done { margin-top: 13px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #a9d3bd; }
.mate .done svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.mate .done.run { color: #8fe6db; }
.wall { left: 990px; top: 326px; width: 354px; height: 548px; padding: 22px 22px; }
.wall .wt { display: flex; align-items: baseline; gap: 10px; }
.wall .wt b { font-size: 18px; color: #eceae6; }
.wall .wt span { font-size: 13.5px; color: #b0b5be; }
.stage-r { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; column-gap: 12px; height: 31px; font-size: 14px; color: #c9ccd2; }
.stage-r .v { text-align: right; color: #eceae6; font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(95,200,192,.6), #a6f0e7); box-shadow: 0 0 10px rgba(95,200,192,.7); }
.wall .call { margin-top: 18px; padding: 16px 16px 15px; }
.wall .call .tq { margin-top: 11px; font-size: 16.5px; color: #f3ecda; line-height: 1.3; }
.wall .call .sm { margin-top: 5px; font-size: 13.5px; color: #e4e2dd; }
.wall .call .bts { display: flex; gap: 8px; margin-top: 14px; }
.wall .call .bt { height: 36px; font-size: 14px; }
.hof { display: flex; align-items: center; gap: 12px; height: 29px; font-size: 13.5px; color: #c9ccd2; }
.hof em { font: 500 11.5px/1 var(--mono); font-style: normal; color: #9aa5b8; width: 40px; flex: none; }
.hof b { color: #eceae6; }
/* ═══ F · Rooms ══════════════════════════════════════════════════════════ */
.fF { height: 1090px; }
.fF .head { left: 96px; top: 84px; }
.fF .h { font-size: 64px; margin-top: 20px; }
.fF .ld { left: 836px; top: 160px; }
.win { left: 64px; top: 298px; width: 1312px; height: 580px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 1px rgba(95,200,192,.14), 0 40px 90px -40px #000, 0 0 90px -30px rgba(60,200,200,.35); }
.win .plate { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: 50% 74%; filter: brightness(1.32) saturate(1.15); }
.win .veil { position: absolute; inset: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); border-radius: 12px; background:
    linear-gradient(90deg, rgba(2,6,13,.6) 0, rgba(2,6,13,.2) 32%, rgba(2,6,13,0) 52%),
    linear-gradient(to bottom, rgba(2,6,13,.2), rgba(2,6,13,0) 26%, rgba(2,6,13,0) 78%, rgba(2,6,13,.3) 100%); }
.chat { left: 28px; top: 24px; width: 350px; padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 13px; }
.chd { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.09); }
.chd .fc { width: 46px; height: 46px; box-shadow: 0 0 0 2px rgba(95,200,192,.85), 0 0 18px rgba(95,200,192,.5); }
.chd b { display: block; font-size: 19px; letter-spacing: -.01em; color: var(--ivory-mid); line-height: 1.2; }
.chd span { display: block; font-size: 13.5px; color: #c9ccd2; line-height: 1.25; }
.chd .state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: #e6faf7; background: rgba(60,160,152,.46); white-space: nowrap; }
.chd .state .dot { color: #8fe6db; }
.msg { display: flex; gap: 11px; align-items: flex-start; }
.msg .fc, .msg .you { width: 30px; height: 30px; font-size: 10.5px; margin-top: 2px; }
.msg .you { background: #1b2030; color: #f2ecdc; box-shadow: inset 0 0 0 1.5px rgba(242,236,220,.75); }
.msg .bub { font-size: 15px; line-height: 1.45; color: #eceae6; }
.msg .bub .wh { display: block; font-size: 12.5px; color: #c9ccd2; margin-bottom: 1px; }
.msg .bub span.l { display: block; }
.drafts { margin-left: 41px; border-radius: 8px; background: rgba(255,255,255,.07); padding: 3px 12px; }
.drafts .d { display: flex; align-items: center; gap: 8px; height: 40px; font-size: 13.5px; color: #c9ccd2; }
.drafts .d + .d { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.drafts .d b { color: #eceae6; font-weight: 500; }
.drafts .d .bt { margin-left: auto; height: 28px; font-size: 12.5px; padding: 0 11px; }
.composer { margin-top: 4px; height: 46px; border-radius: 8px; background: rgba(255,255,255,.08); display: flex; align-items: center; padding: 0 8px 0 14px; font-size: 14.5px; color: #b0b5be; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.composer .go { margin-left: auto; width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: #15130f; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.side { right: 28px; top: 24px; width: 250px; padding: 18px 18px 12px; }
.side .lb { margin-bottom: 10px; }
.side .lb.b { margin-top: 14px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.step { display: flex; align-items: center; gap: 11px; height: 34px; font-size: 14.5px; color: #c9ccd2; }
.step .mk { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.12); color: transparent; }
.step .mk svg.i { width: 10px; height: 10px; stroke-width: 3; }
.step.ok { color: #a3a8b0; }
.step.ok .mk { background: rgba(106,160,136,.36); color: #b9e2cd; }
.step.on { color: #f6f1e4; }
.step.on .mk { background: rgba(95,200,192,.34); box-shadow: 0 0 0 2px rgba(95,200,192,.65), 0 0 12px rgba(95,200,192,.6); }
.side .note { font-size: 14px; line-height: 1.4; color: #dedcd7; padding: 8px 0; }
.side .note + .note { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
/* ═══ G · How work moves ═════════════════════════════════════════════════ */
.fG { height: 944px; }
.fG .haze { position: absolute; inset: 0; background:
    radial-gradient(900px 420px at 1180px 380px, rgba(191,162,95,.1), transparent 70%),
    radial-gradient(1100px 380px at 620px 920px, rgba(70,110,220,.12), transparent 70%); }
.fG .head { left: 96px; top: 84px; }
.fG .h { font-size: 60px; margin-top: 20px; }
.fG .ld { left: 900px; top: 152px; }
.lanes { left: 96px; top: 344px; width: 1248px; height: 532px; }
.lane { position: absolute; left: 0; right: 0; height: 76px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.lane .ll { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #c3cad8; }
.lane:nth-child(odd) { background: linear-gradient(90deg, rgba(110,121,201,.07), rgba(110,121,201,.03)); }
.lane.me { background: linear-gradient(90deg, rgba(242,236,220,.08), rgba(242,236,220,.03)); }
.lane.me .ll { color: var(--gold-ink); }
.night { position: absolute; left: 520px; width: 506px; top: -78px; bottom: 0; border-radius: 12px; background: linear-gradient(to bottom, rgba(120,132,230,.24), rgba(120,132,230,.08));
    -webkit-mask: linear-gradient(90deg, transparent, #000 24%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 24%, #000 82%, transparent); }
.night-l { position: absolute; left: 520px; width: 506px; top: -62px; text-align: center; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #c3caf6; }
.tk { position: absolute; top: -28px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: #b0b5be; transform: translateX(-50%); }
.nd { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
.nd .fc, .nd .you { width: 50px; height: 50px; box-shadow: 0 0 0 2px rgba(var(--hy),.9), 0 0 20px rgba(var(--hy),.45); }
.nd .fc { filter: brightness(1.35) saturate(1.05); }
.nd .you { font-size: 13px; }
.ncap { position: absolute; z-index: 2; width: 220px; }
.ncap b { display: block; font-size: 15.5px; color: #eceae6; white-space: nowrap; line-height: 1.35; }
.ncap b span { color: #b0b5be; font-weight: 400; }
.ncap i { display: block; font-size: 15px; color: #efe9db; line-height: 1.3; white-space: nowrap; }
.gate { position: absolute; z-index: 3; left: 1034px; top: 0; width: 214px; padding: 16px 16px 15px; }
.gate .k { display: flex; justify-content: space-between; }
.gate .tq { margin-top: 12px; font-size: 17.5px; line-height: 1.25; color: #f6f0de; }
.gate .sm { margin-top: 5px; font-size: 13.5px; color: #e4e2dd; }
.gate .bts { display: flex; gap: 8px; margin-top: 13px; }
.gate .bt { height: 36px; font-size: 14px; }
.key { position: absolute; left: 0; top: 556px; display: flex; gap: 44px; font-size: 15px; color: #dedcd7; }
.key div { display: flex; align-items: center; gap: 12px; }
.key .sw { width: 34px; height: 2.5px; flex: none; border-radius: 2px; background: rgb(var(--hy)); box-shadow: 0 0 8px rgba(var(--hy),.7); }
.key .sw.g { background: #f3dc9c; box-shadow: 0 0 8px rgba(226,190,110,.9); }
/* ═══════════════════════════════════════════════════════════════════════════
   THE AGENCY PAGE — eleven frames drawn in the showcase's own system.
   Everything above this line is ../showcase/parts (tokens, glass, faces, the
   D, F and G frames). f1 rides on fD, f2 on fF and f4 on fG; the rest are new.
   ═══════════════════════════════════════════════════════════════════════════ */
.ag .head { left: 96px; top: 84px; }
.ag .h { font-size: 60px; margin-top: 20px; }
.ag .ld { left: 836px; top: 150px; }
.ag .haze { position: absolute; inset: 0; background:
    radial-gradient(900px 420px at 1180px 380px, rgba(110,121,201,.1), transparent 70%),
    radial-gradient(1100px 380px at 420px 900px, rgba(70,110,220,.12), transparent 70%); }
.eb .no { color: var(--gold-ink); margin-right: 14px; }
/* a glass panel and what goes in it */
.pn { padding: 22px; }
.pn .ttl { display: flex; align-items: baseline; gap: 10px; }
.pn .ttl b { font-size: 18px; color: #eceae6; }
.pn .ttl span { font-size: 13.5px; color: #b0b5be; }
.pn .lb { margin: 20px 0 9px; }
.pn .lb.f { margin-top: 16px; }
.pn .note { font-size: 14.5px; line-height: 1.4; color: #dedcd7; padding: 7px 0; }
.pn .note + .note { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.rw { display: flex; align-items: center; gap: 11px; height: 42px; font-size: 14.5px; color: #c9ccd2; white-space: nowrap; }
.rw + .rw { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.rw b { color: #eceae6; }
.rw .fc, .rw .you { width: 30px; height: 30px; font-size: 10.5px; }
.rw .end { margin-left: auto; }
.cp { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; color: #dedcd7; background: rgba(255,255,255,.1); white-space: nowrap; }
.cp.t { color: #e6faf7; background: rgba(60,160,152,.42); }
.cp.t .dot { color: #8fe6db; }
.cp.g { color: #f6e6b8; background: #2b2413; }
.cp.g .dot { color: #ecd6a0; }
.cp .dot { width: 6px; height: 6px; }
/* ═══ H · the hero ══════════════════════════════════════════════════════════ */
.fH { height: 900px; }
.fH .haze { position: absolute; inset: 0; background:
    radial-gradient(760px 520px at 1040px 420px, rgba(var(--hy),.08), rgba(var(--hz),.08) 46%, transparent 74%),
    radial-gradient(900px 500px at 1200px 780px, rgba(70,110,220,.14), transparent 70%),
    radial-gradient(700px 500px at 180px 120px, rgba(110,121,201,.07), transparent 70%); }
.fH .city { bottom: -110px; }
.fH .copy { left: 96px; top: 150px; }
.fH .ld { margin-top: 34px; }
.fH .acts { margin-top: 44px; }
.fH .trail { left: 96px; top: 668px; display: flex; align-items: center; gap: 12px; }
.fH .trail .lb { color: #c3cad8; }
.fH .trail i { width: 18px; height: 1px; background: rgba(var(--hy),.5); display: block; }
.fH .mate { top: 196px; height: 500px; width: 118px; }
.fH .mate .ph { height: 330px; }
.fH .mate .tx { top: 322px; }
.fH .mate .got { color: var(--gold-ink); }
/* ═══ 1 · find clients — rides on D ═════════════════════════════════════════ */
.f1 .askbar { left: 96px; top: 254px; width: 640px; }
.f1 .leadcard, .f1 .mate, .f1 .wall { top: 344px; height: 530px; }
.f1 .mate .done.wait { color: #f3dc9c; }
.f1 .mate .done.next { color: #b0b5be; }
.f1 .hof em { width: 44px; }
/* ═══ 2 · sell — rides on F ═════════════════════════════════════════════════ */
.f2 { height: 950px; }
.f2 .win .plate { background-position: 50% 40%; }
.f2 .win .veil { background:
    linear-gradient(90deg, rgba(2,6,13,.62) 0, rgba(2,6,13,.18) 34%, rgba(2,6,13,.1) 66%, rgba(2,6,13,.5) 100%),
    linear-gradient(to bottom, rgba(2,6,13,.2), rgba(2,6,13,0) 26%, rgba(2,6,13,.1) 70%, rgba(2,6,13,.6) 100%); }
.f2 .side { width: 270px; }
.f2 .step.need { color: #f6e6b8; }
.f2 .step.need .mk { background: #2b2413; box-shadow: 0 0 0 2px rgba(var(--need),.8), 0 0 12px rgba(226,190,110,.6); }
.pipe { left: 402px; bottom: 24px; width: 584px; height: 86px; padding: 14px 8px; display: grid; grid-template-columns: repeat(4, 1fr); }
.pipe > div { padding: 0 14px; }
.pipe > div + div { box-shadow: inset 1px 0 0 rgba(255,255,255,.09); }
.pipe .lb { display: block; }
.pipe b { display: block; margin-top: 10px; font-size: 15px; color: #eceae6; white-space: nowrap; }
.pipe .hot b { color: #f6e6b8; }
/* ═══ 3 · sign them — a machine ═════════════════════════════════════════════ */
.f3 { height: 880px; }
.mach { left: 96px; top: 320px; width: 812px; height: 470px; }
.mach .ttl .cp { margin-left: auto; align-self: center; }
.stgs { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stg { position: relative; height: 322px; border-radius: 8px; padding: 14px 13px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.pn .stg .lb { display: flex; justify-content: space-between; margin: 0; }
.stg .nm { margin-top: 12px; font-size: 17px; color: var(--ivory-mid); letter-spacing: -.01em; white-space: nowrap; }
.stg.ok .lb span { color: #b9e2cd; }
.stg.on { background: rgba(60,160,152,.16); box-shadow: inset 0 1px 0 rgba(180,255,245,.3), 0 0 0 1.5px rgba(95,200,192,.55), 0 0 30px -8px rgba(95,200,192,.6); }
.stg.on .lb span { color: #a6ece3; }
.tk2 { margin-top: 14px; display: grid; gap: 4px; }
.tk2 > div { display: flex; align-items: center; gap: 8px; height: 38px; font-size: 13.5px; color: #c9ccd2; white-space: nowrap; }
.tk2 .fc, .tk2 .you { width: 22px; height: 22px; font-size: 8px; }
.tk2 .ck { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(106,160,136,.36); color: #b9e2cd; flex: none; }
.tk2 .ck svg.i { width: 9px; height: 9px; stroke-width: 3; }
.tk2 .ck.run { background: rgba(95,200,192,.3); box-shadow: 0 0 0 1.5px rgba(95,200,192,.7); }
.tk2 .ck.no { background: rgba(255,255,255,.1); }
.tk2 .ckp { height: 44px; padding: 0 9px; margin: 2px -4px 0; border-radius: 6px; color: #f6e6b8; background: #2b2413; box-shadow: inset 0 0 0 1px rgba(var(--need),.35); }
.mach .ft { position: absolute; left: 22px; right: 22px; bottom: 20px; font-size: 13.5px; color: #b0b5be; }
.f3 .leadcard { left: 932px; top: 320px; width: 200px; height: 470px; }
.f3 .leadcard .nm { font-size: 34px; }
.place { left: 1148px; top: 320px; width: 196px; height: 470px; padding: 20px 18px; }
.place .lb { margin-bottom: 8px; }
.place .lb + .note { padding-top: 2px; }
.place .lb.b { margin-top: 16px; padding-top: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.place .note { font-size: 14px; line-height: 1.4; color: #dedcd7; padding: 6px 0; }
.place .note + .note { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
/* ═══ 4 · the team delivers — rides on G, eight lanes ═══════════════════════ */
.f4 { height: 1010px; }
.f4 .lanes { height: 560px; }
.f4 .lane { height: 70px; }
.f4 .key { top: 590px; }
.f4 .night { left: 546px; width: 474px; }
.f4 .night-l { left: 546px; width: 474px; }
.f4 .gate { top: -6px; }
.nd .wk, .nd .dr { width: 50px; height: 50px; display: grid; place-items: center; color: rgb(var(--hy)); background: #121829; }
.nd .wk { border-radius: 50%; box-shadow: 0 0 20px rgba(var(--hy),.3); outline: 2px dashed rgba(var(--hy),.75); outline-offset: -2px; }
.nd .dr { border-radius: 12px; box-shadow: 0 0 0 2px rgba(var(--hy),.9), 0 0 20px rgba(var(--hy),.45); }
.nd svg.i { width: 20px; height: 20px; stroke-width: 1.8; }
/* ═══ T · the ladder ════════════════════════════════════════════════════════ */
.fT { height: 900px; }
.fT .ld { top: 150px; }
.rung { position: absolute; left: 96px; height: 76px; padding: 0 22px 0 0; display: flex; align-items: center; gap: 0; border-radius: 8px;
    background-color: rgba(30,38,60,.5); background-image: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px -28px #000; }
.rung .rk { width: 214px; flex: none; padding-left: 22px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #c3cad8; }
.rung .ds { font-size: 15.5px; color: #dedcd7; white-space: nowrap; }
.rung .who { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-left: 24px; }
.rung .faces .fc { width: 40px; height: 40px; }
.dr2, .wk2 { width: 34px; height: 34px; display: grid; place-items: center; color: #c9d2e6; background: #121829; flex: none; }
.dr2 { border-radius: 9px; box-shadow: inset 0 0 0 1.5px rgba(200,210,235,.55); }
.dr2 svg.i, .wk2 svg.i { width: 15px; height: 15px; stroke-width: 1.8; }
.wk2 { border-radius: 50%; outline: 1.5px dashed rgba(200,210,235,.6); outline-offset: -2px; }
.above { left: 968px; top: 320px; width: 376px; height: 152px; padding: 20px 22px; }
.above .lb { margin-bottom: 10px; }
.above .note { font-size: 14.5px; line-height: 1.45; color: #dedcd7; }
.above .note b { color: #f1eee8; }
/* ═══ 5, 7, 8 · three panels ════════════════════════════════════════════════ */
.f5, .f7, .f8 { height: 900px; }
.p3 { position: absolute; top: 320px; width: 400px; height: 500px; }
.p3.a { left: 96px; }
.p3.b { left: 520px; }
.p3.c { left: 944px; }
.mail { margin-top: 16px; border-radius: 8px; padding: 13px 14px; background: rgba(255,255,255,.07); font-size: 14.5px; line-height: 1.45; color: #eceae6; }
.mail .wh { display: block; font-size: 12.5px; color: #c9ccd2; margin-bottom: 3px; }
.mail.dr { margin-top: 10px; background: rgba(60,160,152,.2); box-shadow: inset 0 0 0 1px rgba(95,200,192,.35); }
.mail.dr .wh { color: #a6ece3; }
.mail span.l { display: block; }
.bts { display: flex; gap: 8px; margin-top: 14px; }
.hold { margin-top: 14px; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #c9ccd2; }
.p3 .call { margin-top: 16px; padding: 16px 16px 15px; }
.p3 .call .tq { margin-top: 11px; font-size: 17px; color: #f3ecda; line-height: 1.3; }
.p3 .call .sm { margin-top: 5px; font-size: 13.5px; color: #e4e2dd; }
.p3 .step { height: 36px; }
.p3 .step.need { color: #f6e6b8; }
.p3 .step.need .mk { background: #2b2413; box-shadow: 0 0 0 2px rgba(var(--need),.8), 0 0 12px rgba(226,190,110,.6); }
.who2 { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.who2 .fc { width: 46px; height: 46px; box-shadow: 0 0 0 2px rgba(95,200,192,.85), 0 0 18px rgba(95,200,192,.5); }
.who2 b { display: block; font-size: 19px; color: var(--ivory-mid); line-height: 1.2; }
.who2 span { display: block; font-size: 13.5px; color: #c9ccd2; }
.cps { display: flex; flex-wrap: wrap; gap: 7px; }
.mk2 { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mk2 svg.i { width: 11px; height: 11px; stroke-width: 3; }
.mk2.y { background: rgba(106,160,136,.36); color: #b9e2cd; }
.mk2.n { background: rgba(200,110,110,.3); color: #f0c4c4; }
.rw .why { color: #b0b5be; font-size: 13.5px; }
.diff { margin-top: 10px; border-radius: 8px; padding: 11px 13px; background: rgba(6,9,15,.55); font: 400 12.5px/1.7 var(--mono); color: #c9ccd2; white-space: nowrap; overflow: hidden; }
.diff .m { color: #e3b1b1; }
.diff .p { color: #b9e2cd; }
.bars { margin-top: 4px; }
.bars .stage-r { grid-template-columns: 74px 1fr 30px; }
.bars .low .bar > i { background: linear-gradient(90deg, rgba(191,162,95,.6), #f3dc9c); box-shadow: 0 0 10px rgba(226,190,110,.7); }
.bars .low .v { color: #f6e6b8; }
.file { margin-top: 16px; border-radius: 8px; overflow: hidden; background: rgba(6,9,15,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.file .fn { height: 36px; padding: 0 13px; display: flex; align-items: center; font: 500 12px/1 var(--mono); color: #c3cad8; background: rgba(255,255,255,.06); }
.file pre { margin: 0; padding: 13px 14px; font: 400 13px/1.75 var(--mono); color: #dedcd7; white-space: pre; }
.file pre i { color: #8f97a8; }
.file pre b { color: #a6ece3; font-weight: 400; }
.f8 .askbar { margin-top: 16px; height: 54px; padding: 0 8px 0 16px; gap: 10px; }
.f8 .askbar .typed { font-size: 14.5px; }
.f8 .askbar .go { width: 36px; height: 36px; }
.tbl { margin-top: 12px; border-radius: 8px; background: rgba(255,255,255,.06); padding: 3px 13px; }
.tbl .rw { height: 37px; font-size: 14px; }
.tbl .rw span.end { color: #eceae6; font-variant-numeric: tabular-nums; }
/* ═══ 6 · run the agency — one window, many views ═══════════════════════════ */
.f6 { height: 990px; }
.f6 .win { top: 310px; height: 620px; }
.f6 .win .plate { background-position: 50% 50%; filter: brightness(1.2) saturate(1.1); }
.f6 .win .veil { background: linear-gradient(to bottom, rgba(2,6,13,.55), rgba(2,6,13,.38) 40%, rgba(2,6,13,.6)); }
.vt { left: 28px; right: 28px; top: 22px; display: flex; align-items: center; gap: 8px; }
.vt .tab { height: 36px; padding: 0 15px; font-size: 14px; }
.f6 .pn { position: absolute; top: 80px; height: 516px; padding: 20px; }
.f6 .pn.a { left: 28px; width: 372px; }
.f6 .pn.b { left: 416px; width: 480px; }
.f6 .pn.c { left: 912px; width: 372px; }
.f6 .call { margin-top: 12px; padding: 14px 15px; }
.f6 .call .tq { margin-top: 10px; font-size: 16px; color: #f3ecda; line-height: 1.3; }
.f6 .call .bts { margin-top: 12px; }
.f6 .call .bt { height: 32px; font-size: 13.5px; }
.cls { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl { height: 130px; border-radius: 8px; padding: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.cl b { display: block; font-size: 16px; color: #f1eee8; white-space: nowrap; }
.cl .lt { margin-top: 9px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c9ccd2; white-space: nowrap; }
.cl .lt .fc { width: 24px; height: 24px; }
.cl .cp { margin-top: 12px; }
.f6 .rw { height: 44px; font-size: 14px; }
.f6 .rw span.r { color: #b0b5be; }
.sw2 { margin-top: 16px; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-radius: 8px; background: rgba(255,255,255,.07); font-size: 14px; color: #eceae6; white-space: nowrap; }
.sw2 .tg { margin-left: auto; width: 40px; height: 22px; border-radius: 999px; background: rgba(60,160,152,.55); position: relative; flex: none; box-shadow: 0 0 14px -2px rgba(95,200,192,.7); }
.sw2 .tg::after { content: ''; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #f3eee2; }
/* ═══ X · the close ═════════════════════════════════════════════════════════ */
.fX { height: 780px; }
.fX .haze { position: absolute; inset: 0; background: radial-gradient(900px 380px at 50% 430px, rgba(120,132,230,.26), transparent 70%), radial-gradient(700px 300px at 50% 300px, rgba(var(--hy),.07), transparent 70%); }
.fX .city { bottom: -120px; }
.fX .mid { left: 0; right: 0; top: 96px; text-align: center; }
.fX .mid .h { font-size: 60px; margin-top: 22px; }
.fX .mid .h span { margin-left: auto; margin-right: auto; }
.fX .mid .ld { margin-top: 30px; }
.fX .mid .pill { margin-top: 40px; }
.fX .mid .sm { margin-top: 22px; font-size: 15px; color: var(--text-2); }
.fX .made { left: 0; right: 0; top: 588px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 15px; color: #dedcd7; }
.fX .made .fc { width: 38px; height: 38px; }
/* ═══ ROUND 2 — after the first grading pass ════════════════════════════════
   Panels fit their content. Titles follow the showcase's three-card frame (a mono
   number over a 23px title). A scene sits behind every flat-panel frame. Gold is
   only ever a call that is yours; no red anywhere. */
.ag > .plate { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; filter: brightness(1.3) saturate(1.15); }
.ag > .veil { position: absolute; inset: 0; background:
    linear-gradient(to bottom, rgba(2,6,13,.9) 0, rgba(2,6,13,.66) 32%, rgba(2,6,13,.52) 60%, rgba(2,6,13,.74) 90%, var(--ground) 100%); }
.pn .no { font: 500 12px/1 var(--mono); letter-spacing: .16em; color: #9aa5b8; }
.pn .tt { margin-top: 10px; font-size: 23px; letter-spacing: -.02em; color: var(--ivory-mid); white-space: nowrap; }
.pn .lb { color: #c3cad8; }
.rw .why { color: #c0c3c9; }
.fH .mate { width: 136px; height: 468px; }
.f1 .leadcard, .f1 .mate, .f1 .wall { height: 540px; }
.f1 .mate .tx { bottom: 16px; display: flex; flex-direction: column; }
.f1 .mate .done { margin-top: auto; align-self: flex-start; }
.f1 .mate .done.next { color: #c9ccd2; }
.f1 .askbar { width: 716px; }
.pipe .hot b { color: #f1eee8; }
.pipe .hot { border-radius: 6px; background: rgba(255,255,255,.07); }
.f3 { height: 770px; }
.mach { width: 804px; height: 380px; }
.stg { height: 232px; }
.f3 .leadcard { left: 924px; height: 380px; }
.f3 .leadcard .lb { color: #e9e6e0 !important; }
.place { height: 380px; }
.rung.lt .fc { width: 50px; height: 50px; box-shadow: 0 0 0 2px rgba(var(--hy),.9), 0 0 18px rgba(var(--hy),.45); }
.rung .faces .fc { width: 44px; height: 44px; }
.rung .faces .fc + .fc { margin-left: -6px; }
.above { height: 162px; }
.mail .wh .fc { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.step .fc, .step .you { margin-left: auto; width: 24px; height: 24px; font-size: 8.5px; }
.mk2.n { background: rgba(255,255,255,.13); color: #dedcd7; }
.diff .m { color: #9aa5b8; text-decoration: line-through; text-decoration-color: rgba(154,165,184,.6); }
.bars .low .bar > i { background: linear-gradient(90deg, rgba(200,205,215,.35), rgba(225,228,235,.7)); box-shadow: none; }
.bars .low .v { color: #eceae6; }
.file pre i { color: #9aa5b8; }
.file .fn { color: #d2d8e4; }
.seat { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 16px; color: #a6ece3; outline: 1.5px dashed rgba(143,230,219,.7); outline-offset: -2px; }
.kb { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kb > div { border-radius: 6px; background: rgba(255,255,255,.05); padding: 10px 7px 10px; min-height: 104px; }
.pn .kb .lb { display: block; margin: 0 0 9px 2px; font-size: 10px; }
.kb .cd { height: 28px; border-radius: 5px; background: rgba(255,255,255,.1); font-size: 12px; color: #eceae6; display: flex; align-items: center; padding: 0 7px; white-space: nowrap; overflow: hidden; }
.kb .cd + .cd { margin-top: 6px; }
.kb .cd.on { background: rgba(60,160,152,.42); color: #e6faf7; box-shadow: 0 0 14px -4px rgba(95,200,192,.7); }
.f6 { height: 966px; }
.f6 .win { height: 596px; }
.f6 .pn { height: 492px; }
.f6 .win .veil { background: linear-gradient(to bottom, rgba(2,6,13,.8), rgba(2,6,13,.72) 40%, rgba(2,6,13,.84)); }
.fX .made { top: 566px; }
.fX .made .faces .fc + .fc { margin-left: -6px; }
/* panel heights, set from tools/check.py's measured room */
.f5 { height: 862px; }
.f5 .p3 { height: 482px; }
.f7 { height: 825px; }
.f7 .p3 { height: 445px; }
.f8 { height: 810px; }
.f8 .p3 { height: 430px; }
.kb > div { min-height: 180px; }
/* ═══ ROUND 3 — after the second grading pass ═══════════════════════════════ */
.fH .mate { width: 132px; }
.fH .mate .now { white-space: nowrap; }
.fH .trail .lb { font-size: 12px; }
.pipe .hot { margin: -8px 0; padding: 8px 14px; }
.f4 .gate { top: 0; }
.above { height: 114px; }
.ag > .plate { filter: brightness(1.15) saturate(.85); }
.who2 + .lb { margin-top: 24px; }
.diff .m { color: #b0b5be; }
.kb { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kb .cd { text-overflow: ellipsis; }
.cl { height: 118px; }
.cl .lt { margin-top: 7px; }
.cl .cp { margin-top: 10px; }
.f6 { height: 930px; }
.f6 .win { height: 560px; }
.f6 .pn { height: 456px; }
.f6 .win .veil { background: linear-gradient(to bottom, rgba(2,6,13,.9), rgba(2,6,13,.76) 30%, rgba(2,6,13,.86)); }
.f7 { height: 833px; }
.f7 .p3 { height: 453px; }
.fX .made { top: 536px; }
.fX .made .faces .fc + .fc { margin-left: -4px; }
/* ═══ ROUND 4 — sign-off nits ═══════════════════════════════════════════════ */
.f4 .ld { left: 836px; }
.f1 .mate .done.next { color: #dedcd7; }
.fT > .veil { background: linear-gradient(to bottom, rgba(2,6,13,.95) 0, rgba(2,6,13,.82) 32%, rgba(2,6,13,.72) 60%, rgba(2,6,13,.84) 90%, var(--ground) 100%); }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · THE ART
   ═══════════════════════════════════════════════════════════════════════════ */
.im-p-severus { background-image: url(../assets/agency/p-severus.webp); }
.im-p-athena { background-image: url(../assets/agency/p-athena.webp); }
.im-p-axiom { background-image: url(../assets/agency/p-axiom.webp); }
.im-p-hadrian { background-image: url(../assets/agency/p-hadrian.webp); }
.im-p-hermes { background-image: url(../assets/agency/p-hermes.webp); }
.im-p-iris { background-image: url(../assets/agency/p-iris.webp); }
.im-p-juno { background-image: url(../assets/agency/p-juno.webp); }
.im-p-kestrel { background-image: url(../assets/agency/p-kestrel.webp); }
.im-p-lucian { background-image: url(../assets/agency/p-lucian.webp); }
.im-p-minos { background-image: url(../assets/agency/p-minos.webp); }
.im-p-mira { background-image: url(../assets/agency/p-mira.webp); }
.im-p-octavia { background-image: url(../assets/agency/p-octavia.webp); }
.im-p-phidias { background-image: url(../assets/agency/p-phidias.webp); }
.im-p-sable { background-image: url(../assets/agency/p-sable.webp); }
.im-p-silas { background-image: url(../assets/agency/p-silas.webp); }
.im-p-thea { background-image: url(../assets/agency/p-thea.webp); }
.im-p-vero { background-image: url(../assets/agency/p-vero.webp); }
.im-p-vitruvia { background-image: url(../assets/agency/p-vitruvia.webp); }
.im-p-zeuxis { background-image: url(../assets/agency/p-zeuxis.webp); }
.im-r-kestrel { background-image: url(../assets/agency/r-kestrel.webp); }
.im-r-vero { background-image: url(../assets/agency/r-vero.webp); }
.im-s-city { background-image: url(../assets/agency/s-city.webp); }
.im-s-floor-gallery { background-image: url(../assets/agency/s-floor-gallery.webp); }
.im-s-floor-teams { background-image: url(../assets/agency/s-floor-teams.webp); }
.im-s-floor-units { background-image: url(../assets/agency/s-floor-units.webp); }
.im-s-ground { background-image: url(../assets/agency/s-ground.webp); }
.im-s-signal-room { background-image: url(../assets/agency/s-signal-room.webp); }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · THE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fit to width. Every frame is drawn at 1440 and scaled as one piece, so nothing
   inside it is re-measured. --fit is the window over 1440, capped at 1.5; the
   page's script sets the same number, exactly, where scripts run. */
@property --agency-w { syntax: '<length>'; inherits: true; initial-value: 1440px; }
:root { --agency-w: 100vw; --fit: min(1.5, tan(atan2(var(--agency-w), 1440px))); }
.frame { margin: 0 auto; zoom: var(--fit); }

/* what the drawing never had to say, because it was not a page yet. The frames sit in
   .frames, one step inside main, so site.css's section grid (main > section) never
   reaches them; its heading and paragraph rules do, and are handed back here. */
.frame p { margin: 0; }
.frame h2.h { background: none; -webkit-text-fill-color: currentcolor; padding-bottom: 0; }
.frame a { text-decoration: none; }
.frame .city::before { content: none; }   /* site.css lights its own city; this one is the drawing's */
.fH .copy .h { margin-top: 26px; }
.fH .trail a:hover, .frame .tl:hover { color: #fff; }
.relay { display: contents; }

/* past 2160 the drawing stops growing and sits centred, its edges let go into the ground */
@media (min-width: 2200px) {
  .frame { -webkit-mask: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
                   mask: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .frame *, .frame *::before, .frame *::after { animation: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Below 900 a 1440 drawing scaled to fit is too small to read, so each frame is
   re-laid as one column: the words first, then its panels in reading order, each
   at the size it was drawn. Nothing is left out. The relay wraps into two columns;
   the ten views across the cockpit scroll sideways. One
   frame is turned: the delivery job runs down the page instead of across it.

   The drawing places everything by coordinate, some of it inline, so the first rule
   here lets go of every coordinate at once. That is what the !important is for.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .frame { --gut: max(22px, calc(50vw - 280px));
    zoom: 1; width: auto; height: auto; display: flex; flex-direction: column; gap: 20px; padding: 80px var(--gut) 64px; }
  .frame :is(.head, .ld, .copy, .trail, .askbar, .leadcard, .wall, .win, .mach, .place, .above, .p3, .rung, .mid, .made, .chat, .pipe, .side, .vt, .pn, .lanes) {
    position: relative !important; inset: auto !important; width: auto !important; height: auto !important; }

  /* type: one step down, and a headline line may wrap */
  .frame .eb { font-size: 11px; letter-spacing: .34em; }
  .frame .head .h, .frame .copy .h, .frame .mid .h { font-size: clamp(34px, 9.6vw, 50px); line-height: 1.04; margin-top: 16px; }
  .frame .h span { width: auto; text-wrap: balance; }
  .frame .ld { font-size: 18px; } .frame .ld span, .frame .note, .frame .bub .l { text-wrap: pretty; }
  .frame .pn .tt { white-space: normal; line-height: 1.2; }
  .frame .rw { height: auto; min-height: 42px; padding: 6px 0; white-space: normal; text-wrap: balance; }
  .frame .call .tq { text-wrap: balance; }
  /* the star field was laid out around a left column of words; under a full column it is turned down */
  .frame .stars { opacity: .4; } .frame .stars.b, .frame .stars.c { opacity: .28; }
  /* the city keeps its drawn scale and is cut to the window, where 100% wide would shrink it to a strip */
  .frame .city { background-size: auto 100%; }

  /* Keep all four relay cards in the reading flow, in numbered order. */
  .relay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 8px 0 30px; }
  .relay .mate { position: relative; left: auto !important; top: auto; width: auto !important; }
  .relay .bead-n { display: none; }

  /* a lead's card: the portrait as a band, the words on its foot */
  .frame .leadcard { height: 320px !important; }

  /* H · the hero */
  .frame.fH { padding-top: 116px; padding-bottom: 40px; }
  .fH .copy .h { margin-top: 20px; }
  .fH .ld { margin-top: 24px; } .fH .acts { margin-top: 32px; flex-wrap: wrap; gap: 20px 28px; }
  .fH .trail { flex-wrap: wrap; gap: 10px 16px; } .fH .trail i { display: none; }
  .fH .trail .lb { padding: 6px 0; }

  /* 1 · find clients */
  .f1 .askbar { height: 56px !important; } .f1 .askbar .typed { font-size: 15.5px; }
  .f1 .relay .mate { height: 420px; } .f1 .relay .mate .ph { height: 240px; } .f1 .relay .mate .tx { top: 232px; }

  /* 2 · sell, and 6 · run: the window becomes a column, its scene still behind it */
  .frame .win { display: flex; flex-direction: column; gap: 12px; padding: 10px; }
  .f2 .side { order: 2; } .f2 .pipe { order: 3; }
  .frame .pipe { grid-template-columns: 1fr 1fr; row-gap: 18px; padding: 16px 12px; }
  .frame .pipe > div:nth-child(odd) { box-shadow: none; } .frame .pipe .hot { margin: -8px 8px -8px 0; }
  .frame .drafts { margin-left: 0; } .drafts .d { white-space: nowrap; }
  .frame .vt { margin: 0 -10px; padding: 4px 34px 4px 10px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, #000 82%, transparent); mask: linear-gradient(90deg, #000 82%, transparent); }
  .frame .vt::-webkit-scrollbar { display: none; } .vt .tab { flex: none; }
  /* the floor: a Synth's role drops under its name, so the status keeps its own column */
  .f6 .pn.c .rw { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 11px; row-gap: 0; padding: 7px 0; }
  .f6 .pn.c .rw .fc { grid-row: 1 / span 2; } .f6 .pn.c .rw b { grid-column: 2; line-height: 1.25; }
  .f6 .pn.c .rw .r { grid-column: 2; grid-row: 2; font-size: 13px; line-height: 1.25; } .f6 .pn.c .rw .cp { grid-column: 3; grid-row: 1 / span 2; }

  /* 3 · sign them: the four stages, one under the other */
  .mach .ttl { flex-wrap: wrap; row-gap: 10px; } .mach .ttl .cp { margin-left: 0; }
  .stgs { grid-template-columns: 1fr; } .frame .stg { height: auto; }
  .mach .ft { position: static; margin-top: 16px; }
  .f3 .leadcard .ph { background-position: 50% 48%; }   /* her face sits lower in the portrait than Sable's */

  /* 4 · the team delivers: the same job, turned to run down the page. One row per hand:
     when, who, what. The lanes and the drawn threads go; a thread drops from each node to
     the next instead. The hours you are with clients keep their tint, and the one call
     that is yours ends the run in gold. Rows are placed by count, so the order in the
     page is the order of the job. */
  .f4 .lanes { display: grid; grid-template-columns: 46px 50px minmax(0, 1fr); gap: 22px 12px; margin-top: 6px; }
  .f4 .lanes > .lane, .f4 .lanes > .threads { display: none; }
  .f4 .lanes > :is(.tk, .nd, .ncap, .night, .night-l, .bead-n, .gate, .key) { position: relative; left: auto !important; top: auto !important; transform: none; }
  .f4 .tk { grid-column: 1; height: 50px; display: flex; align-items: center; justify-content: flex-end; text-align: right; line-height: 1.25; color: #c3cad8; }
  .f4 .nd { grid-column: 2; } .f4 .ncap { grid-column: 3; width: auto; align-self: center; }
  .f4 .ncap i { white-space: normal; line-height: 1.35; margin-top: 2px; }
  .f4 .nd::after { content: ''; position: absolute; left: 24px; top: 50px; bottom: -22px; width: 2px; border-radius: 2px; background: rgba(var(--hy),.85); box-shadow: 0 0 8px rgba(var(--hy),.45); }
  .f4 .lanes > :nth-child(1 of .tk), .f4 .lanes > :nth-child(1 of .nd), .f4 .lanes > :nth-child(1 of .ncap) { grid-row: 1; }
  .f4 .lanes > :nth-child(2 of .tk), .f4 .lanes > :nth-child(2 of .nd), .f4 .lanes > :nth-child(2 of .ncap) { grid-row: 2; }
  .f4 .lanes > :nth-child(3 of .tk), .f4 .lanes > :nth-child(3 of .nd), .f4 .lanes > :nth-child(3 of .ncap) { grid-row: 3; }
  .f4 .lanes > :nth-child(4 of .nd), .f4 .lanes > :nth-child(4 of .ncap) { grid-row: 4; }
  .f4 .lanes > :nth-child(4 of .tk), .f4 .lanes > :nth-child(5 of .nd), .f4 .lanes > :nth-child(5 of .ncap) { grid-row: 6; }
  .f4 .lanes > :nth-child(5 of .tk), .f4 .lanes > :nth-child(6 of .nd), .f4 .lanes > :nth-child(6 of .ncap) { grid-row: 7; }
  .f4 .lanes > :nth-child(6 of .tk), .f4 .lanes > :nth-child(7 of .nd), .f4 .lanes > :nth-child(7 of .ncap) { grid-row: 8; }
  .f4 .lanes > :nth-child(7 of .tk), .f4 .lanes > :nth-child(8 of .nd), .f4 .lanes > :nth-child(8 of .ncap) { grid-row: 9; }
  .f4 .lanes > :nth-child(8 of .tk) { grid-row: 10; }
  .f4 .lanes > :nth-child(4 of .nd)::after { bottom: -58px; }                    /* across the "with clients" line */
  .f4 .lanes > :nth-child(8 of .nd)::after { bottom: -40px; background: linear-gradient(to bottom, rgba(var(--hy),.85), #f3dc9c); }
  .f4 .night-l { grid-column: 3; grid-row: 5; width: auto; height: 14px; text-align: left; line-height: 14px; }
  .f4 .night { grid-column: 1 / -1; grid-row: 5 / 9; width: auto; margin: -12px -10px -6px; border-radius: 12px; -webkit-mask: none; mask: none;
    background: linear-gradient(to bottom, rgba(120,132,230,.2), rgba(120,132,230,.09)); }
  .f4 .lanes > .bead-n { grid-column: 2; grid-row: 10; align-self: start; justify-self: center; margin: 18px 0 0 !important; }
  .frame.f4 .gate { grid-column: 3; grid-row: 10; width: auto; }
  .frame.f4 .key { grid-column: 1 / -1; grid-row: 11; flex-direction: column; gap: 10px; margin-top: 8px; font-size: 14px; }
  .f4 .key div { align-items: flex-start; } .f4 .key .sw { margin-top: 9px; }

  /* T · the ladder: each rung a step narrower than the one under it */
  .frame .above { margin-right: 26%; padding: 16px 18px; }
  .frame .rung { display: block; padding: 16px 18px; }
  .rung .rk { display: block; width: auto; padding-left: 0; } .rung .ds { display: block; margin-top: 8px; white-space: normal; line-height: 1.4; }
  .rung .who { margin: 12px 0 0; padding-left: 0; } .frame .rung .faces .fc, .frame .rung.lt .fc { width: 36px; height: 36px; }
  .rung.lt { margin-right: 20%; } .rung.lt + .rung { margin-right: 16%; } .rung.lt + .rung + .rung { margin-right: 12%; }
  .rung.lt + .rung + .rung + .rung { margin-right: 8%; } .rung.lt + .rung + .rung + .rung + .rung { margin-right: 4%; }

  /* 8 · make it yours */
  .frame .kb { gap: 6px; } .frame .kb > div { min-height: 104px; padding: 10px 4px; } .frame .kb .cd { padding: 0 5px; font-size: 11.5px; }
  .f8 .askbar .typed { font-size: 13.5px; }

  /* X · the close: room under the offer for the city */
  .frame.fX { padding-bottom: 210px; }
  .fX .mid .ld { margin-top: 22px; } .fX .mid .pill { margin-top: 32px; padding: 14px 24px; font-size: 17px; }
  .fX .made { flex-direction: column; gap: 12px; margin-top: 28px; text-align: center; }
}

@media (max-width: 899px) and (min-width: 600px) {
  .stgs { grid-template-columns: 1fr 1fr; }
}
/* a client card on a phone: the name and who runs it on the left, its state on the right */
@media (max-width: 599px) {
  .cls { grid-template-columns: 1fr; gap: 8px; }
  .frame .cl { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 12px; padding: 12px 14px; }
  .frame .cl .lt { grid-column: 1; margin-top: 0; } .frame .cl .cp { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 440px) {
  .f1 .askbar .scope { display: none; }
}
@media (max-width: 380px) {
  .frame .cl .cp { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · V3 (task #8413)
   ═══════════════════════════════════════════════════════════════════════════ */
/* The page in the new Home's shape (../assets/v3.css): a v3 hero, the problem,
   the turn, the whole run in one picture, then each drawing as a beat. A beat's
   words come out of the drawing and sit over it, centred, as Home sets them; the
   drawing is lifted by --crop, the drawn px where its own words used to end, so
   the panels follow the headline the way they followed it in the drawing. */

/* the run: five Synths for one client, in the order the work moves */
body.v3 main > section.b-run[id] {
  --b-bg:
    radial-gradient(40% 30% at 50% 30%, rgba(242, 236, 220, 0.08), rgba(144, 133, 200, 0.05) 45%, transparent 75%),
    radial-gradient(60% 30% at 50% 100%, rgba(70, 110, 220, 0.18), transparent 70%),
    var(--ground);
}
body.v3 .b-run .display { --d: clamp(46px, 6.6vw, 100px); }
body.v3 .b-run .crew {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(56px, 6vw, 88px);
  text-align: left;
  counter-reset: none;
}
body.v3 .b-run .mate-v3 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 2 / 3.1;
  padding: 18px 18px 20px;
  overflow: hidden;
  border-radius: 18px;
  background: #0b0f18;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 48px 90px -42px rgba(0, 0, 0, 0.95);
  isolation: isolate;
}
body.v3 .b-run .mate-v3 img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--nx, 50%) 0;
  filter: brightness(1.12);
}
body.v3 .b-run .mate-v3::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 6, 13, 0) 34%, rgba(2, 6, 13, 0.7) 62%, rgba(2, 6, 13, 0.96) 100%);
}
body.v3 .b-run .mate-v3 .no {
  position: absolute;
  left: 18px;
  top: 16px;
  font: 500 12px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  color: var(--gold-ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
body.v3 .b-run .mate-v3 .got { font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); }
body.v3 .b-run .mate-v3 b { margin-top: 8px; font-size: clamp(22px, 1.9vw, 27px); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; color: var(--ivory-mid); }
body.v3 .b-run .mate-v3 .rl { margin-top: 2px; font-size: 14px; color: #b9bcc2; }
body.v3 .b-run .mate-v3 .now { margin-top: 12px; font-size: 15.5px; line-height: 1.35; color: #e4e1db; }
body.v3 .b-run .at-sable   { --nx: 50%; }
body.v3 .b-run .at-kestrel { --nx: 65%; }
body.v3 .b-run .at-severus { --nx: 29%; }
body.v3 .b-run .at-phidias { --nx: 90%; }
body.v3 .b-run .at-vero    { --nx: 50%; }
/* the run's steps, each a way down the page */
body.v3 .b-run .trail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(40px, 4vw, 56px);
}
body.v3 .b-run .trail a {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 16px;
  line-height: 1.2;
  color: #e4e1db;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: background .15s;
}
body.v3 .b-run .trail a:hover { background: rgba(219, 195, 170, 0.16); color: #fff; }

/* a drawing's beat: its words over it, centred, then the drawing at full width */
body.v3 main > section.feat[id] {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(96px, 10vw, 152px) 0 0;
  background: var(--ground);
  text-align: center;
}
.feat .feat-head {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding: 0 var(--pad);
}
.feat .feat-head .kicker .no { margin-right: 14px; color: var(--cream); }
.feat .feat-head .display {
  font-size: clamp(42px, 5.4vw, 80px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.feat .feat-head .display span { width: auto; }
.feat .feat-head .lede {
  max-width: 34em;
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  font-size: clamp(19px, 1.6vw, 23px);
  color: #d4d1cc;
}
.feat .feat-head .lede span { display: block; }

@media (min-width: 900px) {
  body.v3 .feat .frame {
    margin-top: calc(var(--crop, 0) * -1px + 24px);
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--crop, 0) * 1px - 24px), #000 calc(var(--crop, 0) * 1px + 72px));
            mask-image: linear-gradient(to bottom, transparent calc(var(--crop, 0) * 1px - 24px), #000 calc(var(--crop, 0) * 1px + 72px));
  }
}
body.v3 .feat .frame > .head { display: none; }

@media (max-width: 1100px) {
  body.v3 .b-run .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 899px) {
  body.v3 .feat .frame { padding-top: 28px; }
}
@media (max-width: 760px) {
  body.v3 .b-run .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.v3 .b-run .mate-v3 { padding: 14px 14px 16px; border-radius: 14px; }
  body.v3 .b-run .mate-v3 .no { left: 14px; top: 12px; }
  body.v3 .b-run .mate-v3 .now { font-size: 14px; }
  body.v3 .b-run .crew > :last-child { grid-column: 1 / -1; aspect-ratio: auto; min-height: 300px; }
  .feat .feat-head .display { font-size: clamp(34px, 10vw, 44px); }
  .feat .feat-head .display span { text-wrap: balance; }
  .feat .feat-head .lede { font-size: 18px; }
  .feat .feat-head .lede span { display: inline; }
}