/* ==========================================================================
   FEZEY · the homepage's own placement and blocks (V3e, approved 28 Oct 2026):
   acts I–III, from the ZAZA prototype's home-v3e/css/act1.css, act2.css and act3.css (@665be49). Builds on
   /assets/v3e/v3e.css (the text system, the glass, the motion grammar; act IV, the Closing and the credits).
   ========================================================================== */

/* ======================================================================== act1.css */
/* Homepage V3e · Act I · The table: hero, walk, services (acts/act1.js). Builds on css/base.css. */

/* ---- the hero: the title zone, a little wider for the title card; the scroll cue low on the right */
.xp[data-story="hero"] { gap: 18px; }
.xp__usp { color: rgba(236, 233, 241, 0.8); }
.xp__usp span { color: var(--signal, #ece9f1); }
html[data-layout="land"] .xp[data-land="cue"] { left: auto; right: var(--g-m); top: auto; bottom: var(--z-cap-bottom); }
html[data-layout="port"] .xp[data-port="cue"] { display: none; }

/* ---- the walk: each callout in the caption band, its counter beside the name (one row less in the band) */
.e-sec--walk .xp { grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; }
.e-sec--walk .xp > * { grid-column: 1 / -1; }
.e-sec--walk .xp > .xp__eb { grid-column: 2; grid-row: 1; align-self: start; margin-top: 3px; color: rgba(236, 233, 241, 0.94); }
.e-sec--walk .xp > .xp__h3 { grid-column: 1; grid-row: 1; max-width: 16ch; }
.e-sec--walk .xp__body { max-width: var(--m-body); }
.xp[data-story="walk-2"] .xp__h3 { max-width: 11ch; }
/* phone: the names as large text (24 px), over the close-ups' lit model */
html[data-layout="port"] .e-sec--walk .xp > .xp__h3 { font-size: 24px; line-height: 0.98; }

/* ---- services, desktop: the annotated table; each label on its leader, the deliverables on hover or focus */
html[data-layout="land"] .xp-svc .xp { gap: 3px; max-width: 24ch; }
html[data-layout="land"] .xp-svc .xp__h3 { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.02; max-width: 14ch; }
.xp__link { color: inherit; text-decoration: none; }
html[data-layout="land"] .xp-svc .xp__link::after { content: ''; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.3em; vertical-align: 0.08em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center / contain no-repeat; }
.xp__list { font: 400 13px/1.4 var(--v3-body); color: rgba(236, 233, 241, 0.8); max-width: 30ch; }
.xp__thumb { display: none; }
html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .xp-svc .xp__list { display: none; }
@media (hover: hover) and (pointer: fine) {
  html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .xp-svc .xp:hover .xp__list, html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .xp-svc .xp:focus-within .xp__list { display: block; }
  .xp-svc .xp__link:hover { color: var(--filament, #c9b6ea); }
}
.xp-svc .xp__link:focus-visible { outline: 2px solid var(--filament, #c9b6ea); outline-offset: 4px; border-radius: 2px; }

/* ---- services, phone: the eight disciplines as one list on one panel below the table, each with its object */
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .xp-svc { position: fixed; left: var(--g-m); right: var(--g-m); bottom: var(--z-cap-bottom); z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 14px; isolation: isolate; visibility: hidden; transition: visibility 0s linear calc(760ms * var(--rv-slow, 1)); }
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .xp-svc:has(.xp.is-on) { visibility: visible; transition-delay: 0s; }
html[data-layout="port"] .xp-svc::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--gl-r); background: var(--gl-tint); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow); opacity: 0; transform: scale(0.985); transition: opacity 260ms var(--v3-ease) 300ms, transform 260ms var(--v3-ease) 300ms; }
html.gl-blur[data-layout="port"] .xp-svc::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
html[data-layout="port"] .xp-svc:has(.xp.is-on)::before { opacity: 1; transform: none; transition-duration: 420ms; transition-delay: 0s; }
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .xp-svc .xp { position: relative; padding: 0; grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 40px; }
html[data-layout="port"] .xp-svc .xp::before { display: none; }
html[data-layout="port"] .xp-svc .xp__thumb { display: block; width: 46px; height: 34px; grid-column: 1; grid-row: 1; border-radius: 3px; background: rgba(18, 16, 23, 0.6); }
html[data-layout="port"] .xp-svc .xp__h3 { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 1.05; max-width: none; }
html[data-layout="port"] .xp-svc .xp__list { display: none; }
/* (X13) the phone motion tier (css/base.css §8b): the list is one cluster, so the list moves whole (as its first label
   arrives, until its last has left) and its eight lines stand in it; its blur is the list's own */
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .xp-svc { opacity: 0; translate: 0 12px; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease), translate calc(260ms * var(--rv-slow, 1)) var(--v3-ease), visibility 0s linear calc(260ms * var(--rv-slow, 1)); }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .xp-svc:has(.xp.is-on) { opacity: 1; translate: none; transition-duration: calc(420ms * var(--rv-slow, 1)), calc(420ms * var(--rv-slow, 1)), 0s; transition-delay: calc(120ms * var(--rv-slow, 1)), calc(120ms * var(--rv-slow, 1)), 0s; }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .xp-svc:not(:has(.xp.is-on)):has(.xp.is-post) { translate: 0 -8px; }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .xp-svc::before { opacity: 1; transform: none; transition: none; }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .xp-svc .xp { visibility: inherit; opacity: 1; translate: none; transition: none; will-change: auto; -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.rv-one.gl-blur[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .xp-svc { border-radius: var(--gl-r); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
  html.rv-one.gl-blur[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .xp-svc::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- reduced motion: the hero, the eight callouts and the annotated table as stills */
.v3-reduced .e-sec--walk, .v3-nogl .e-sec--walk { grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: end; }
.v3-reduced .e-sec--walk > h2, .v3-nogl .e-sec--walk > h2 { grid-column: 1 / -1; }
.v3-reduced .xp-svc, .v3-nogl .xp-svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1100px; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .v3-reduced .e-sec--walk, .v3-nogl .e-sec--walk, .v3-reduced .xp-svc, .v3-nogl .xp-svc { grid-template-columns: 1fr; }
}

/* ---- phone services: the title sits over the annotated table's far end (the lit model): its panel takes C3's tint-only
   density (0.46) over the blur, the one place the subtle fill does not carry the lead */
html.gl-blur[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .xp[data-story="svc-head"]::before { background: var(--gl-tint); }

/* ======================================================================== act2.css */
/* Homepage V3e · Act II · The system: system, loop, labs (acts/act2.js). Builds on css/base.css. */

/* ---- the system: "Hold to see the whole system", a real button (pointer, Space or Enter), low on the right, level
   with the caption band's foot (phone: under the caption band, at the foot of the frame) */
html[data-layout="land"] .xp[data-land="hint"] { left: auto; right: var(--g-m); top: auto; bottom: var(--z-cap-bottom); }
html[data-layout="port"] .xp[data-port="hint"] { left: auto; right: var(--g-m); top: auto; bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 8px)); }
.xp[data-story="sys-hint"] { padding: 0; }
.xp__hold { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border: 0; background: none; border-radius: var(--gl-r-s, 12px); font: 500 10.5px/1.4 var(--v3-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236, 233, 241, 0.92); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.xp__hold::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.25px solid var(--filament, #c9b6ea); box-shadow: 0 0 0 3px rgba(201, 182, 234, 0.12); transition: transform 160ms var(--v3-ease), background-color 160ms var(--v3-ease); }
.xp__hold[aria-pressed="true"]::before { background: var(--filament, #c9b6ea); transform: scale(1.25); }
.xp__hold:active { transform: scale(0.97); transition: transform 120ms var(--v3-ease); }
.xp__hold:focus-visible { outline: 2px solid var(--filament, #c9b6ea); outline-offset: 3px; }
html[data-layout="port"] .xp__hold { font-size: 10px; letter-spacing: 0.1em; padding: 10px 12px; }
/* while held: the words step back so the picture says it (the button stays); a long press never selects or calls out */
html:not(.v3-reduced):not(.v3-nogl) .e-sec--system .xp { transition: visibility 0s linear calc(760ms * var(--rv-slow, 1)), opacity 300ms var(--v3-ease); }
html:not(.v3-reduced):not(.v3-nogl) .e-sec--system .xp.is-on { transition: visibility 0s linear 0s, opacity 300ms var(--v3-ease); }
html.is-xray:not(.v3-reduced) .e-sec--system .xp:not([data-story="sys-hint"]), html.is-xray:not(.v3-reduced) .xp-lines { opacity: 0; }
.xp-lines { transition: opacity 300ms var(--v3-ease); }
html.is-sys { -webkit-touch-callout: none; }
html.is-xray { user-select: none; -webkit-user-select: none; }
/* the break: "Illustrative" read as a label, not a whisper */
.xp[data-story="sys-illus"] .xp__mono { font-size: 11.5px; letter-spacing: 0.14em; color: var(--signal, #ece9f1); }
/* the statement: its accent is the kit's violet, at display size only */
.xp[data-story="sys-statement"] .xp__h2 { max-width: var(--m-head); }
.xp__h2 em { color: var(--filament, #c9b6ea); }
/* the proof, pinned to the laptop: compact enough for the caption band */
.xp[data-story="sys-proof"] { gap: 5px; padding: 12px 16px; }
.xp[data-story="sys-proof"] .xp__eb { display: flex; justify-content: space-between; gap: 12px; }
.xp__figs { font: 400 16px/1.3 var(--v3-body); max-width: 40ch; }
.xp__figs .v3-gold { display: inline-block; font: 800 1.36em/1 var(--v3-title); letter-spacing: -0.02em; }
.xp__how { font-size: 13px; line-height: 1.35; color: rgba(236, 233, 241, 0.86); max-width: var(--m-body); }
/* EXPLORE FULL CASE STUDY ->, after the proof has played (data-wait in index.html) */
.xp__case { justify-self: start; padding: 4px 0 5px; font: 500 11px/1.4 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.xp__case::after { content: '→'; width: auto; height: auto; background: none; font: 400 14px/1 var(--v3-body); letter-spacing: 0; transform-origin: left center; }
@media (hover: hover) and (pointer: fine) { .xp__case:hover::after { transform: translateX(4px); } }

/* ---- the loop: the ring (a diagram, no words, no panel) low on the left, above the caption band on a desktop (the
   road and its signs have the right); on a phone top right */
html[data-layout="land"] .xp[data-land="ring"] { left: var(--g-m); right: auto; top: auto; bottom: calc(var(--z-cap-bottom) + var(--z-cap-max) + 18px); }
html[data-layout="port"] .xp[data-port="ring"] { left: auto; right: var(--g-m); top: var(--z-title-top); }
.xp__ring { width: 64px; height: 64px; overflow: visible; }
html[data-layout="port"] .xp__ring { width: 48px; height: 48px; }
.xp__ring-bg { fill: none; stroke: rgba(201, 182, 234, 0.22); stroke-width: 1.25; }
.xp__ring-fill { fill: none; stroke: var(--e-line); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 1; }
.xp__ring-node { fill: var(--void, #07060a); stroke: rgba(201, 182, 234, 0.5); stroke-width: 1.25; transition: fill 240ms var(--v3-ease), stroke 240ms var(--v3-ease); }
.xp__ring-node.is-lit { fill: var(--e-line); stroke: var(--e-line); }
/* each step: under its sign, then held in the caption band. The sign carries the step's name, so the caption shows
   its number and its line; the name stays in the page for search and screen readers (acts/act2.js gives it fz-sr) */
.e-sec--loop li.xp { gap: 6px; padding: 14px 18px; width: max-content; max-width: min(380px, calc(100vw - 2 * var(--z-label-gap))); --gl-r: var(--gl-r-s); }
.e-sec--loop li.xp .xp__body { max-width: var(--m-body); }
/* (they ride under their signs over the city's bokeh: their panels take C3's tint-only density over the blur) */
html.gl-blur:not(.v3-reduced):not(.v3-nogl) .e-sec--loop li.xp::before { background: var(--gl-tint); }

/* ---- Fezey Labs, desktop: the three tools in a row over their devices (phone left, laptop middle, tablet right) */
html[data-layout="land"] .xp[data-land="tools"] { top: auto; bottom: var(--z-cap-bottom); width: calc(var(--g-col, 74px) * 4 + var(--g-gut, 24px) * 3); grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
html[data-layout="land"] .xp[data-story="labs-socialpedia"] { left: var(--g-m); }
html[data-layout="land"] .xp[data-story="labs-seopanther"] { left: calc(var(--g-m) + (var(--g-col, 74px) + var(--g-gut, 24px)) * 4); }
html[data-layout="land"] .xp[data-story="labs-adcommander"] { left: calc(var(--g-m) + (var(--g-col, 74px) + var(--g-gut, 24px)) * 8); }
/* (X12, C1) AdCommander's callout rests over the paper on the table (the notebook and the prints on a desktop, the
   laptop's page on a phone): its glass takes a denser fill so its words and its illustrative-data label keep 4.5:1 */
html:not(.v3-reduced):not(.v3-nogl) .xp[data-story="labs-adcommander"]::before { background: rgba(14, 10, 22, 0.72); }
.xp__mark { width: 44px; height: 44px; }
.e-sec--labs .xp-tools .xp > .xp__mark { grid-row: 1 / span 3; }
.e-sec--labs .xp-tools .xp > :not(.xp__mark) { grid-column: 2; }
/* (X12, M2) each tool's name in its own official casing (SEOpanther, AdCommander, SocialPedia) */
.e-sec--labs .xp-tools .xp__h3 { font-size: clamp(18px, 1.4vw, 22px); text-transform: none; letter-spacing: -0.02em; max-width: none; }
/* (X12, M3) the dashboard's illustrative-data label at body size, in sentence case, so it reads as prominently as the line */
.e-sec--labs .xp-tools .xp__note { font: 500 13.5px/1.4 var(--v3-body); letter-spacing: 0; text-transform: none; color: rgba(236, 233, 241, 0.94); max-width: var(--m-body); margin-top: 2px; }
.e-sec--labs .xp-tools .xp__body { font-size: 14.5px; line-height: 1.4; max-width: var(--m-body); }
html[data-layout="port"] .e-sec--labs .xp-tools .xp { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
html[data-layout="port"] .e-sec--labs .xp-tools .xp__body { font-size: 15.5px; max-width: 22ch; }
html[data-layout="port"] .xp__mark { width: 36px; height: 36px; }
/* the three tools' marks on the devices' screens (acts/act2-labs.js): DOM mapped onto each screen with matrix3d,
   over the film, under the leader lines and the words */
.labs-screens { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; visibility: hidden; }
.labs-screens.is-on { visibility: visible; }
.labs-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: grid; place-items: center; overflow: hidden; opacity: 0; visibility: hidden; border-radius: 3px; backface-visibility: hidden; }
.v3-nogl .labs-screens { display: none; }
/* reduced motion: the page's words are in flow above the still (main's own layer); the screens sit between the two */
.v3-reduced .labs-screens { z-index: calc(var(--z-content, 1) - 1); }

/* ---- reduced motion: the wired table with every line; the loop's steps beside the ring; the three tools */
.v3-reduced .e-sec--system, .v3-nogl .e-sec--system { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; }
.v3-reduced .e-sec--system .xp--title, .v3-nogl .e-sec--system .xp--title { grid-column: 1 / -1; }
.v3-reduced .xp-steps, .v3-nogl .xp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1100px; }
.v3-reduced .xp-tools, .v3-nogl .xp-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 1100px; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .v3-reduced .e-sec--system, .v3-nogl .e-sec--system, .v3-reduced .xp-steps, .v3-nogl .xp-steps, .v3-reduced .xp-tools, .v3-nogl .xp-tools { grid-template-columns: 1fr; }
}

/* (the site, 28 Oct 2026) a phone's statement over the moving city as the loop begins: its glass a little denser
   (fill 0.30 -> 0.40), so its accented "the whole system" holds 3:1 (the prototype at b1bab27 read 2.99:1 at the
   mark "loop 0", T 6.28; the site 2.97:1) */
html[data-layout="port"] .xp[data-story="sys-statement"] { --gl-fill: rgba(14, 10, 22, 0.40); }
/* (mirrored from the prototype, 28 Oct) on a phone the walk's fifth caption sits over the laptop's screen as it cycles
   client websites: on a white page its small counter ("05 / 08") dipped to 4.21:1; with the denser fill the worst of 16
   samples is 5.15:1 (the site's check samples it 16 times: test_home_v3e RESAMPLE) */
html[data-layout="port"] .xp[data-story="walk-4"] { --gl-fill: rgba(14, 10, 22, 0.40); }

/* ======================================================================== act3.css */
/* Homepage V3e · Act III · The proof: record, world, work (acts/act3.js, run X10b). Builds on css/base.css.
   Motion: transform, opacity and clip-path only, on the kit's --ease-out (--rv-e); reduced motion: every piece still. */

/* ============================================================ the record */
/* the figures are lit type in the world (scene/numbers.js); their page text stays for screen readers only */
.xp__fig { display: flex; align-items: baseline; gap: 10px; font: 500 11px/1.3 var(--v3-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal, #ece9f1); }
.xp__num { font: 800 clamp(40px, 4.4vw, 72px)/0.9 var(--v3-title); letter-spacing: -0.045em; }
html:not(.v3-reduced):not(.v3-nogl)[data-layout="land"] .xp[data-land="figs"], html:not(.v3-reduced):not(.v3-nogl)[data-layout="port"] .xp[data-port="figs"] { left: 0; top: 0; width: 0; height: 0; padding: 0; overflow: hidden; }

/* the results: four windows, each on its own tower (acts/act3.js pins each to its tower's face every frame) */
html[data-layout="land"] .xp[data-land="results"] { left: 0; right: 0; top: 42vh; bottom: 0; padding: 0; display: block; --rw: clamp(204px, calc((100vw - 2 * var(--g-m) - 3 * 24px) / 4), 400px); }
html[data-layout="port"] .xp[data-port="results"] { left: 0; right: 0; top: 33svh; bottom: 0; padding: 0; display: block; --rw: calc(100vw - 40px); }
html:not(.v3-reduced):not(.v3-nogl) .v3-results { position: absolute; inset: 0; }
html:not(.v3-reduced):not(.v3-nogl) .v3-result { position: absolute; left: 0; top: 0; width: var(--rw); }
.v3-result { position: relative; isolation: isolate; display: grid; gap: 5px; align-content: start; padding: 10px 10px 12px; color: var(--signal, #ece9f1); }
/* the window's own panel: the glass, a little denser than a caption's (a lit window's words sit on it), with the
   window's warm edge */
.v3-result::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 12px; background: rgba(12, 9, 18, 0.62); border: 1px solid rgba(255, 226, 190, 0.12); box-shadow: inset 0 1px 0 var(--gl-hi), 0 0 0 1px rgba(7, 6, 10, 0.4), 0 14px 44px rgba(0, 0, 0, 0.34); }
/* (a window rides its tower every frame: a blurred backdrop would be blurred again each frame, so a phone keeps the
   tint-only panel for the windows and the wall's rests, which move too) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.gl-blur[data-layout="land"] .v3-result::before { background: rgba(12, 9, 18, 0.5); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
}
html:not(.v3-reduced):not(.v3-nogl) .v3-result::before { opacity: 0; transform: scale(0.985); transition: opacity calc(260ms * var(--rv-k, 1)) var(--v3-ease) calc(240ms * var(--rv-k, 1)), transform calc(260ms * var(--rv-k, 1)) var(--v3-ease) calc(240ms * var(--rv-k, 1)); }
html:not(.v3-reduced):not(.v3-nogl) .v3-result.is-on::before { opacity: 1; transform: none; transition-duration: calc(420ms * var(--rv-k, 1)); transition-delay: 0s; }
.v3-result__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--graphite, #121017); box-shadow: 0 0 0 1px rgba(255, 220, 180, 0.16); margin-bottom: 4px; }
.v3-result__media img, .v3-result__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* the two site captures keep their whole frame (their words would be cut); the reel and the creatives are cropped.
   (Spirit Events: its website capture, since the user retired the Google capture on 28 Oct 2026) */
.v3-result[data-res="1"] .v3-result__media { aspect-ratio: 1024 / 549; }
.v3-result[data-res="3"] .v3-result__media { aspect-ratio: 1024 / 556; }
.v3-result[data-res="1"] .v3-result__media img, .v3-result[data-res="3"] .v3-result__media img { object-position: 50% 0%; }
.v3-result__credit { position: absolute; left: 7px; bottom: 7px; right: 7px; width: max-content; max-width: calc(100% - 14px); margin: 0; font: 500 10px/1.25 var(--v3-mono); letter-spacing: 0.02em; text-transform: uppercase; color: rgba(236, 233, 241, 0.96); background: rgba(7, 6, 10, 0.8); padding: 4px 5px; white-space: nowrap; border-radius: 3px; }
.v3-result__fig { font: 800 clamp(26px, 2.25vw, 34px)/0.95 var(--v3-title); letter-spacing: -0.035em; white-space: nowrap; margin-top: 2px; }
.v3-result__what { font: 400 13.5px/1.36 var(--v3-body); color: var(--signal, #ece9f1); }
.v3-result__what .v3-gold { font-weight: 700; }
.v3-result__who { font: 500 12.5px/1.4 var(--v3-body); color: rgba(236, 233, 241, 0.86); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
/* a phone: a vertical run of windows on one tower, each its picture beside its words */
html[data-layout="port"] .v3-result { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 3px; padding: 8px 10px 8px 8px; }
html[data-layout="port"] .v3-result::before { border-radius: 10px; }
html[data-layout="port"] .v3-result__media { grid-row: 1 / 4; aspect-ratio: 1 / 1; margin: 0; align-self: start; }
html[data-layout="port"] .v3-result__credit { font: 600 10px/1.2 var(--v3-body); font-stretch: 90%; letter-spacing: 0.03em; left: 4px; right: 4px; bottom: 4px; padding: 3px 4px; white-space: normal; }
html[data-layout="port"] .v3-result__fig { font-size: 23px; white-space: normal; margin-top: 1px; }
html[data-layout="port"] .v3-result__what { font-size: 12.5px; line-height: 1.3; }
html[data-layout="port"] .v3-result__who { font-size: 11.5px; }

/* ============================================================ Dubai to the world: flags and names only (C6) */
html[data-layout="land"] .xp[data-land="board"] { left: var(--g-m); top: var(--z-title-top); width: min(var(--z-title-w), 430px); gap: 10px; padding: 18px 22px; }
html[data-layout="port"] .xp[data-port="board"] { left: var(--g-m); right: var(--g-m); top: 41svh; gap: 8px; padding: 14px 16px; }
.e-world__h2 { max-width: 16ch; }
.c-world__n { font-weight: 800; }
.d-board { width: 100%; border-top: 1px solid var(--v3-line-2); }
.d-board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 6px 34px; border-bottom: 1px solid var(--v3-line); font: 500 10px/1.2 var(--v3-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236, 233, 241, 0.8); }
.d-row { border-bottom: 1px solid var(--v3-line); }
.d-row__in { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; min-height: 28px; padding: 3px 0; }
.d-name { font: 600 clamp(13px, 1.05vw, 15.5px)/1.1 var(--v3-title); letter-spacing: 0; text-transform: uppercase; color: var(--signal, #ece9f1); hyphens: none; overflow-wrap: normal; word-break: normal; }
.rv-word { display: inline-block; white-space: nowrap; }
/* the flag in its own mask: it rises into it as its route lands and catches one faint light; never distorted */
.d-flagm { position: relative; display: block; width: 22px; height: 16.5px; overflow: clip; border-radius: 2px; box-shadow: 0 0 0 1px rgba(236, 233, 241, 0.18); }
.d-flag { display: block; width: 22px; height: 16.5px; object-fit: cover; }
.d-flagm::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(105deg, transparent 32%, rgba(255, 250, 240, 0.5) 50%, transparent 68%); transform: translate3d(-130%, 0, 0); pointer-events: none; }
/* the corner counter: two rolling digits (the ones' strip runs 0-9 then 0, so 9 -> 10 rolls on) */
.d-count { display: inline-flex; font: 600 22px/1 var(--v3-title); letter-spacing: -0.02em; color: var(--gold, #f2c27a); text-transform: none; }
html:not(.v3-reduced):not(.v3-nogl) .d-count__d { position: relative; display: inline-block; width: 0.6em; height: 1em; line-height: 1; -webkit-text-fill-color: transparent; clip-path: inset(0 -0.1em); text-align: center; }
html:not(.v3-reduced):not(.v3-nogl) .d-count__d::before { content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0'; position: absolute; left: 0; right: 0; top: 0; white-space: pre; line-height: 1; text-align: center; -webkit-text-fill-color: currentColor; transform: translate3d(0, calc(var(--v, 0) * -1em), 0); transition: transform calc(520ms * var(--rv-k, 1)) var(--rv-e, var(--v3-ease)); }
html[data-layout="port"]:not(.v3-reduced) .e-world__h2 { font-size: 24px; }
html[data-layout="port"]:not(.v3-reduced) .d-row__in { min-height: 24px; padding: 2px 0; }
html[data-layout="port"]:not(.v3-reduced) .d-name { font-size: 12.5px; }
html[data-layout="port"]:not(.v3-reduced) .d-count { font-size: 19px; }
/* the board's motion: each row as its route lands: the flag rises from its mask, then the name flips in letter by
   letter (split-flap), then the light crosses the flag once. Out: the whole row lifts out of its line */
.d-row { overflow: clip; }
.d-row__in { transition: transform calc(260ms * var(--rv-k)) var(--rv-e), opacity calc(260ms * var(--rv-k)) var(--rv-e); }
.d-row.is-post .d-row__in { transform: translate3d(0, -40%, 0); opacity: 0; }
.d-flag { transform: translate3d(0, 105%, 0); transition: transform calc(200ms * var(--rv-k)) var(--rv-e); }
.d-row.is-in .d-flag { transform: none; transition-duration: calc(420ms * var(--rv-k)); transition-delay: calc(var(--d, 0) * 1ms); }
.d-row.is-in .d-flagm::after { transform: translate3d(130%, 0, 0); transition: transform calc(900ms * var(--rv-k)) var(--rv-e) calc((var(--d, 0) + 420 * var(--rv-k)) * 1ms); }
.rv-flap { perspective: 320px; }
/* (X12, Task 7) the split-flap as a keyframe flip that ends on no transform: a letter is its own compositor layer only
   while it turns (a resting 3D turn kept every waiting letter on a layer of its own: 50-odd layers on the board) */
.rv-ch { display: inline-block; opacity: 0; transform-origin: 50% 60%; transition: opacity calc(144ms * var(--rv-k)) var(--rv-e); }
.d-row.is-in .rv-ch { opacity: 1; transition: none; animation: rv-flap calc(240ms * var(--rv-k)) var(--rv-e) both; animation-delay: calc((var(--d, 0) + (160 + var(--c, 0) * 24) * var(--rv-k)) * 1ms); }
@keyframes rv-flap { from { transform: rotateX(-90deg); } to { transform: none; } }
.v3-reduced .rv-ch, .v3-nogl .rv-ch { opacity: 1; animation: none; transform: none; }

/* ============================================================ the work: the wall fills the frame */
html[data-layout="land"] .xp[data-land="wall"], html[data-layout="port"] .xp[data-port="wall"] { inset: 0; z-index: 2; padding: 0; }
.wall { position: absolute; inset: 0; overflow: hidden; }
/* (X12, C2) the ground under the resting wall while the lens goes home behind it; the table's own near-black */
.wall__veil { position: absolute; inset: 0; background: #07060a; opacity: 0; visibility: hidden; pointer-events: none; }
.v3-reduced .wall__veil, .v3-nogl .wall__veil { display: none; }
.wall__col { position: absolute; top: 0; display: grid; gap: 22px; align-content: start; will-change: transform; }
/* (X12) four columns on a desktop, so each runs about one screen of tiles and the wall drifts near the scroll's own
   speed; a tile whose picture would stand taller than the frame allows is narrowed to its own aspect (work/wall.js).
   (P1, change 1) the wall runs the grid's full width: each column spans three of the twelve (up to 400px) */
html[data-layout="land"] .wall { --wc: min(400px, calc((100vw - 2 * var(--g-m) - 3 * 24px) / 4)); }
html[data-layout="land"] .wall__col { width: var(--wc); }
html[data-layout="land"] .wall__col[data-col="0"] { left: calc(50% - var(--wc) * 2 - 36px); }
html[data-layout="land"] .wall__col[data-col="1"] { left: calc(50% - var(--wc) - 12px); }
html[data-layout="land"] .wall__col[data-col="2"] { left: calc(50% + 12px); }
html[data-layout="land"] .wall__col[data-col="3"] { left: calc(50% + var(--wc) + 36px); }
.wall__tile.is-narrow { justify-self: center; }
.wall__tile.is-side { grid-template-columns: auto minmax(0, 1fr); }
.wall__tile.is-side .wall__cap { align-content: end; border-top: 1px solid var(--gl-edge); border-left: 0; border-radius: 0 8px 8px 0; }
.wall--two .wall__col { width: calc((100vw - 2 * var(--g-m) - 12px) / 2); gap: 16px; }
.wall--two .wall__col[data-col="0"] { left: var(--g-m); }
.wall--two .wall__col[data-col="1"] { left: calc(var(--g-m) + (100vw - 2 * var(--g-m) - 12px) / 2 + 12px); }
.wall--two .wall__col[data-col="2"], .wall--two .wall__col[data-col="3"], .wall--two .wall__tile--wide { display: none; }
.wall__tile { display: grid; gap: 0; color: var(--signal, #ece9f1); text-decoration: none; border-radius: 8px; overflow: hidden; }
/* T8: each tile opens out of one lit window of the night city: a small warm square somewhere in its frame (--wx,
   --wy: work/wall.js) grows into the picture, its own aspect kept, as the window's light fades and the picture settles
   from 1.06. (X12: a transform, run by the compositor; the clip-path it replaces was redrawn on the main thread every
   frame of every opening, the work section's slowest frames) */
.wall__media { display: block; position: relative; overflow: hidden; background: var(--graphite, #121017); transform-origin: calc(var(--wx, 46%) + 3%) calc(var(--wy, 46%) + 4.5%); transform: scale(0.07); transition: transform calc(420ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at calc(var(--wx, 46%) + 3%) calc(var(--wy, 46%) + 4.5%), #ffe2b8 0%, #ffb877 22%, rgba(255, 170, 100, 0.6) 46%, rgba(40, 24, 18, 0.9) 100%); opacity: 1; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease); pointer-events: none; }
.wall__media img, .wall__media video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform calc(420ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__tile.is-in .wall__media { transform: none; transition-duration: calc(760ms * var(--rv-slow, 1)); }
.wall__tile.is-in .wall__media::after { opacity: 0; transition-duration: calc(520ms * var(--rv-slow, 1)); transition-delay: calc(60ms * var(--rv-slow, 1)); }
.wall__tile.is-in .wall__media img, .wall__tile.is-in .wall__media video { transform: none; transition-duration: calc(760ms * var(--rv-slow, 1)); }
.wall__cap { display: grid; gap: 4px; padding: 10px 12px 11px; background: rgba(14, 10, 22, 0.74); border: 1px solid var(--gl-edge); border-top: 0; border-radius: 0 0 8px 8px; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity calc(280ms * var(--rv-slow, 1)) var(--v3-ease), transform calc(280ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__tile.is-in .wall__cap { opacity: 1; transform: none; transition-duration: calc(480ms * var(--rv-slow, 1)); transition-delay: calc(320ms * var(--rv-slow, 1)); }
.wall__client { font: 600 clamp(16px, 1.3vw, 20px)/1 var(--v3-title); letter-spacing: -0.02em; text-transform: uppercase; }
.wall__scopes { font: 500 10px/1.5 var(--v3-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236, 233, 241, 0.84); }
.wall__tile--feat .wall__client { font-size: clamp(18px, 1.6vw, 24px); }
/* the text rests: a discipline over a run of its work, on its own glass */
.wall__rest { position: relative; isolation: isolate; margin: 6px 0 2px; padding: 14px 16px 13px; font: 600 clamp(17px, 1.45vw, 21px)/1.05 var(--v3-title); letter-spacing: -0.015em; text-transform: uppercase; color: var(--signal, #ece9f1); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity calc(280ms * var(--rv-slow, 1)) var(--v3-ease), transform calc(280ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__rest::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--gl-tint); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html.gl-blur[data-layout="land"] .wall__rest::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); } }
.wall__rest::after { content: ''; display: block; width: 40px; height: 2px; margin-top: 10px; background: var(--filament, #c9b6ea); transform: scaleX(0); transform-origin: left; transition: transform calc(260ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__rest.is-in { opacity: 1; transform: none; transition-duration: calc(480ms * var(--rv-slow, 1)); }
.wall__rest.is-in::after { transform: none; transition-duration: calc(640ms * var(--rv-slow, 1)); transition-delay: calc(200ms * var(--rv-slow, 1)); }
.wall__all { position: absolute; left: 50%; top: 0; margin-left: -80px; opacity: 0; transition: opacity 300ms var(--v3-ease); padding: 8px 14px; background: var(--gl-tint); border-radius: 10px; }
.wall__all.is-in { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .wall__tile:hover .wall__media img, .wall__tile:hover .wall__media video { transform: scale(1.025); } }
.wall--two .wall__client { font-size: 14.5px; }
.wall--two .wall__scopes { font-size: 10px; letter-spacing: 0.04em; }
.wall--two .wall__cap { padding: 8px 9px 9px; }
.wall--two .wall__rest { font-size: 15px; padding: 11px 12px 10px; }

/* ============================================================ the phone motion tier (X13, css/base.css §8b)
   each window arrives whole as the lens passes it (one translate and opacity on the window: its picture, figure and
   words stand in it, the picture framed as at rest); the board moves as its cluster, and each row's flag and name fade
   in together as its route lands (no flag rising from its mask, no light across it, no letter turning: the
   split-flap's letters stand as they rest; the counter still rolls to 10); the wall's rests bring their line with
   them. Where a panel is blurred (a desktop-shaped phone: land), the blur is the piece's own */
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .v3-result { opacity: 0; translate: 0 12px; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease), translate calc(260ms * var(--rv-slow, 1)) var(--v3-ease); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .v3-result.is-on { opacity: 1; translate: none; transition-duration: calc(420ms * var(--rv-slow, 1)); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .v3-result.is-post { translate: 0 -8px; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .v3-result::before { opacity: 1; transform: none; transition: none; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .v3-result__media { clip-path: inset(0 0 0 0); }
/* (a row's slot, its flag's frame and its rule, stands as it does on a desktop; the flag and the name arrive together) */
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .d-row__in { opacity: 1; transform: none; transition: none; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .d-row :is(.d-flag, .d-name) { opacity: 0; transform: none; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .d-row:is(.is-in, .is-post) :is(.d-flag, .d-name) { opacity: 1; transition-duration: calc(420ms * var(--rv-slow, 1)); }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .d-flagm::after { content: none; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .rv-ch { opacity: 1; animation: none; transition: none; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .wall__rest::after { transform: none; transition: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.rv-one.gl-blur[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) body .v3-result { border-radius: 12px; -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
  html.rv-one.gl-blur[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) body .wall__rest { border-radius: 12px; -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
  html.rv-one.gl-blur:not(.v3-reduced):not(.v3-nogl) body :is(.v3-result, .wall__rest)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================ reduced motion and no WebGL: one still per section */
.v3-reduced .xp__fig, .v3-nogl .xp__fig { display: grid; gap: 4px; }
.v3-reduced .e-sec--record, .v3-nogl .e-sec--record { grid-template-columns: repeat(3, auto) 1fr; align-items: end; }
.v3-reduced .e-sec--record .xp--block, .v3-nogl .e-sec--record .xp--block, .v3-reduced .e-sec--record .xp--title, .v3-nogl .e-sec--record .xp--title { grid-column: 1 / -1; }
.v3-reduced .e-sec--record .xp--block, .v3-nogl .e-sec--record .xp--block { max-width: 1100px !important; }
.v3-reduced .v3-results, .v3-nogl .v3-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v3-reduced .v3-result, .v3-nogl .v3-result { transform: none !important; }
.v3-reduced .e-sec--world .xp, .v3-nogl .e-sec--world .xp { max-width: 460px !important; }
.v3-reduced :is(.d-flag, .d-flagm::after, .d-row__in, .wall__rest, .wall__rest::after), .v3-nogl :is(.d-flag, .d-flagm::after, .d-row__in, .wall__rest, .wall__rest::after) { transform: none; opacity: 1; transition: none; }
.v3-reduced .d-flagm::after, .v3-nogl .d-flagm::after { display: none; }
.v3-reduced .wall__media::after, .v3-nogl .wall__media::after { display: none; }
.v3-reduced .wall, .v3-nogl .wall { position: relative; inset: auto; overflow: visible; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.v3-reduced .wall__col, .v3-nogl .wall__col { position: relative; left: auto !important; width: auto !important; transform: none !important; }
.v3-reduced .wall__all, .v3-nogl .wall__all { position: relative; left: auto; margin: 0; opacity: 1; transform: none !important; grid-column: 1 / -1; justify-self: start; }
.v3-reduced .e-sec--work .xp--block, .v3-nogl .e-sec--work .xp--block { max-width: 1120px !important; width: 100% !important; }
@media (prefers-reduced-motion: reduce) {
  .d-flagm::after, .d-count__d::before, .wall__rest, .wall__rest::after, .wall__media::after, .v3-result::before { transition: none !important; }
}
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .v3-reduced .e-sec--record, .v3-nogl .e-sec--record { grid-template-columns: 1fr; }
  .v3-reduced .v3-results, .v3-nogl .v3-results { grid-template-columns: 1fr; gap: 10px; }
  .v3-reduced .wall, .v3-nogl .wall { grid-template-columns: 1fr 1fr; }
  .v3-reduced .wall__tile--wide, .v3-nogl .wall__tile--wide { display: none; }
}