/* ───────────────────────────────────────────────────────────────────── HOME — THE PHONE EDITION Same two-step method as metagenus-mobile.css, because the home page has the same problem: it is a 1440px stage built out of pinned scroll scenes (300vh, 540vh and 600vh containers whose contents are position:absolute inside a sticky 100vh viewport). Overriding that piece by piece is what makes a phone feel forced. STEP 1 flatten every staging container to ordinary block flow STEP 2 lay the content out again with ONE structure The structure, applied to all nine beats: eyebrow 11px label headline 28px, tight body 16px, full column measure media full width, aspect reserved, always AFTER the words ─── 128px ─── One gutter (20px). One spacing scale (8/12/20/40/128). Three interaction patterns: a swipe rail, a stacked list, a plain statement. Gated on html[data-touch] — remove the and desktop is untouched. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 860px) { /* ═══════════════════════════════════════════════════════════════════════ STEP 1 · FLATTEN The three tall scroll containers collapse to their content, and the sticky viewports inside them stop being viewports. ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .wwa-scroll, html[data-touch] .reelwwd, html[data-touch] .whofor-scroll, html[data-touch] .wwa-stage, html[data-touch] .rw-stage, html[data-touch] .rw-reel, html[data-touch] .rw-wwd, html[data-touch] .whofor, html[data-touch] .wf-body, html[data-touch] .conv-vp, html[data-touch] .sb-in, html[data-touch] .cb-in, html[data-touch] .close-center { display: block !important; position: static !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: auto !important; max-width: none !important; inset: auto !important; transform: none !important; opacity: 1 !important; overflow: visible !important; grid-template-columns: none !important; margin: 0 !important; padding: 0 !important; } /* home.js writes inline transform and opacity onto these every scroll frame for the recede-and-emerge choreography. Without !important the reel stays scaled to nothing and the "what we do" block stays invisible. */ html[data-touch] #rwReel, html[data-touch] #rwWwd { transform: none !important; opacity: 1 !important; scale: none !important; } /* ═══════════════════════════════════════════════════════════════════════ STEP 2 · THE PAGE FRAME ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .wwa-stage, html[data-touch] .rw-stage, html[data-touch] .whofor, html[data-touch] .conv-section, html[data-touch] .spaces-band, html[data-touch] .collective-band, html[data-touch] .breath { padding: 64px 20px !important; } html[data-touch] .wf-body, html[data-touch] .sb-in, html[data-touch] .cb-in { padding: 0 !important; } /* the spacing scale: group gap by default, tighter relationships on top */ html[data-touch] .wwa-stage > * + *, html[data-touch] .rw-stage > * + *, html[data-touch] .wf-body > * + *, html[data-touch] .sb-in > * + *, html[data-touch] .cb-in > * + *, html[data-touch] .close-center > * + *, html[data-touch] .conv-section > * + * { margin-top: 40px !important; } html[data-touch] .eyebrow, html[data-touch] .wf-eyebrow, html[data-touch] .sb-eyebrow, html[data-touch] .cb-eyebrow, html[data-touch] .conv-eyebrow, html[data-touch] .c-eyebrow { margin-bottom: 0 !important; } html[data-touch] .eyebrow + *, html[data-touch] .wf-eyebrow + *, html[data-touch] .sb-eyebrow + *, html[data-touch] .cb-eyebrow + *, html[data-touch] .c-eyebrow + * { margin-top: 12px !important; } html[data-touch] h2 + p, html[data-touch] h2 + .body { margin-top: 20px !important; } /* ═══════════════════════════════════════════════════════════════════════ TYPE — four sizes ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .eyebrow, html[data-touch] .wf-eyebrow, html[data-touch] .sb-eyebrow, html[data-touch] .cb-eyebrow, html[data-touch] .conv-eyebrow, html[data-touch] .c-eyebrow, html[data-touch] .blabel, html[data-touch] .conv-count, html[data-touch] .wf-count, html[data-touch] .wf-imgtag, html[data-touch] .sb-hint, html[data-touch] .reel-tag, html[data-touch] .rl-s, html[data-touch] .sr-num, html[data-touch] .wnum, html[data-touch] .sn, html[data-touch] .lbl { font-size: 11px !important; letter-spacing: .18em !important; text-transform: uppercase; } /* Monument Extended is a wide face — 28px is the ceiling at 375px */ html[data-touch] .wwa-stage h2, html[data-touch] .wf-body h2, html[data-touch] .conv-head h2, html[data-touch] .sb-in h2, html[data-touch] .cb-in h2 { font-size: 28px !important; line-height: 1.12 !important; letter-spacing: -.01em !important; } /* NOTE: authored
breaks stay. Hiding them glued the words either side together ("We render worldsbefore they exist") because a
is a line break, not a space. At 28px on a 348px column the authored break lands in a reasonable place anyway. */ html[data-touch] .wwa-foot .body, html[data-touch] .wf-body p, html[data-touch] .sb-in > p, html[data-touch] .cb-in > p, html[data-touch] .wwd-slide p, html[data-touch] .cb-step p, html[data-touch] .sr-desc, html[data-touch] .wwd-method { font-size: 18px !important; line-height: 1.62 !important; letter-spacing: 0 !important; max-width: none !important; text-align: left !important; } /* ═══════════════════════════════════════════════════════════════════════ 01 · HERO — one claim, and nothing on top of it Every hero part is absolutely positioned against the 1440px stage: .center at left 26%/top 51%, the wordmark at left 52px/top 52%, the scroll cue at right 52px/top 52%. At 390px they all land on the same spot and print over the headline. ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .hero { height: auto !important; min-height: 100svh !important; display: flex !important; align-items: flex-end !important; padding: 0 !important; } html[data-touch] .hero .center { position: static !important; transform: none !important; width: 100%; /* 104px cleared an 88px topbar. Under a notch inset the bar is 147px, so the fixed number stopped doing what this comment says it does and the title card sat under the header again. The inset is added rather than assumed: env() is 0 on a handset without one, so this is still exactly 104px everywhere else. */ padding: calc(104px + env(safe-area-inset-top, 0px)) 20px 44px !important; flex: 0 0 auto !important; align-self: flex-end !important; } html[data-touch] .hero .center .kick { font-size: 13px !important; letter-spacing: .02em !important; line-height: 1.4 !important; margin: 0 0 14px !important; color: #c7cede !important; } html[data-touch] .hero h1 { /* nowrap is what forces "ACROSS EVERY REALITY." off the screen */ white-space: normal !important; font-size: 34px !important; line-height: 1.02 !important; letter-spacing: 0 !important; } /* the wordmark, the rotated scroll cue and the two register dots are stage furniture for a wide screen — on a phone they land on the headline */ html[data-touch] .hero .wm, html[data-touch] .hero .rr, html[data-touch] .hero .topdot, html[data-touch] .hero .botdot { display: none !important; } /* .hero is a flex ROW, so position:static made this link a second COLUMN beside .center instead of a line under the claim: it was pushed to the right edge, under the fixed ambience pill (85x26px of overlap at 700/768/834) and at 390 it sat at x=390, entirely off screen. Absolute positioning fixed that but then sat the link ON the headline once the hero bottom-aligns its content. The hero stacks as a COLUMN instead, so the link is genuinely a line under the claim, and the whole block is given enough bottom padding to clear the fixed ambience pill (44px tall, 18px from the edge). */ html[data-touch] .hero { flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; padding-bottom: 78px !important; } html[data-touch] .hero .seeall { position: static !important; display: inline-flex !important; align-self: flex-start !important; align-items: center; min-height: 44px; margin: 18px 20px 0 !important; font-size: 11px !important; letter-spacing: .2em !important; } @media (min-width: 641px) { html[data-touch] .hero .seeall { margin-inline: 40px !important; } } /* ═══════════════════════════════════════════════════════════════════════ 02 · WHO WE ARE — the four lines become one statement The desktop reveals them one at a time across 300vh of scroll. Flattened, that mechanism has no travel left, so the lines are simply all present. ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .wwa-line { opacity: 1 !important; transform: none !important; filter: none !important; font-size: 26px !important; line-height: 1.16 !important; letter-spacing: -.01em !important; display: block; } html[data-touch] .wwa-lines { max-width: none !important; } html[data-touch] .wwa-line + .wwa-line { margin-top: 6px !important; } html[data-touch] .wwa-foot { margin-top: 40px !important; } html[data-touch] .wwa-foot .il-btn { margin-top: 24px !important; } /* ═══════════════════════════════════════════════════════════════════════ 03 · REEL → WHAT WE DO — a frame, then a list Desktop: the reel scales away while the four service slides cycle in place over 600vh. On a phone the reel is a 16:9 frame and all four services are simply listed. Nothing cycles, so nothing is unreachable. ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .reel-frame { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; overflow: hidden; } html[data-touch] .reel-media { position: absolute !important; inset: 0 !important; } /* corner brackets and the tape-counter marks are 1440px decoration */ html[data-touch] .reel-frame .brk, html[data-touch] .reel-marks, html[data-touch] .reel-marks-r { display: none !important; } html[data-touch] .reel-tag { position: static !important; display: block; padding-top: 12px; } html[data-touch] .rw-wwd { margin-top: 40px !important; } html[data-touch] .wwd-head { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; } html[data-touch] .wwd-slides { margin-top: 24px !important; } html[data-touch] .wwd-slide { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 6px !important; position: static !important; opacity: 1 !important; transform: none !important; visibility: visible !important; padding: 20px 0 !important; border-top: 1px solid rgba(255, 255, 255, .1); } html[data-touch] .wwd-slide > .wnum { grid-column: 1 !important; grid-row: 1 !important; } html[data-touch] .wwd-slide > div { grid-column: 2 !important; } html[data-touch] .wwd-slide h2 { font-size: 19px !important; line-height: 1.2 !important; letter-spacing: 0 !important; margin-bottom: 8px !important; } /* a progress indicator for a sequence that no longer sequences */ html[data-touch] .wwd-progress { display: none !important; } html[data-touch] .wwd-method { margin-top: 32px !important; padding-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, .1); } /* ═══════════════════════════════════════════════════════════════════════ 04 · WHO WE DO IT FOR — media first, then all six sectors Desktop is a 46/54 split pinned for 540vh, with the image advancing as you scroll. Flattened there is no scroll range to read, so the stage holds one image and the six sectors are a list instead of a stepper. ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .wf-visual { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; overflow: hidden !important; border-right: 0 !important; perspective: none !important; order: -1; } html[data-touch] .wf-stage { position: absolute !important; inset: 0 !important; transform: none !important; transform-style: flat !important; transition: none !important; } html[data-touch] .wf-img { background-size: cover !important; background-position: center !important; } /* with the stepper gone, the first sector's image is the one on show */ html[data-touch] .wf-img:not(.on) { opacity: 0 !important; } html[data-touch] .wf-img.on { opacity: 1 !important; } /* pointer sheen, film grain and the frame line are hover-stage dressing */ html[data-touch] .wf-sheen, html[data-touch] .wf-grain, html[data-touch] .wf-frame { display: none !important; } html[data-touch] .wf-imgtag { position: absolute !important; inset: auto 0 0 0 !important; padding: 40px 20px 14px !important; background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent); color: #fff !important; } html[data-touch] .wf-count { display: none !important; } html[data-touch] .wf-body { margin-top: 40px !important; } html[data-touch] .wf-sectors { margin-top: 32px !important; } html[data-touch] .srow { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 6px !important; opacity: 1 !important; transform: none !important; padding: 20px 0 !important; border-top: 1px solid #e4e7ec; } html[data-touch] .srow > .sr-num { grid-column: 1 !important; grid-row: 1 !important; } html[data-touch] .srow > div { grid-column: 2 !important; } html[data-touch] .sr-name { font-size: 17px !important; line-height: 1.2 !important; letter-spacing: 0 !important; margin-bottom: 6px !important; } html[data-touch] .wf-div { margin-top: 32px !important; } /* the client ribbon: a marquee is fine, it just must not widen the page */ html[data-touch] .wf-clients { margin-top: 20px !important; overflow: hidden !important; max-width: 100% !important; } html[data-touch] .wf-ribbon { min-width: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ 05 · BREATH — a label, not a screen ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .breath { height: auto !important; min-height: 0 !important; display: block !important; padding: 64px 20px 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ 06 · SELECTED WORK — the conveyor becomes a swipe rail Desktop keeps nine 80px slivers and expands whichever is active, on a 3-second timer. Tap has no hover, so on a phone every card is the same size and you swipe: one card per screen, snapped. ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .conv-section { height: auto !important; min-height: 0 !important; display: block !important; } html[data-touch] .conv-head { display: block !important; margin-bottom: 0 !important; } html[data-touch] .conv-count { display: none !important; } html[data-touch] .conv-vp { overflow: visible !important; } html[data-touch] .conv { display: flex !important; height: auto !important; min-height: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; column-gap: 14px !important; margin-inline: -20px !important; padding: 0 20px 8px !important; } html[data-touch] .conv::-webkit-scrollbar { display: none; } html[data-touch] .ccard { flex: 0 0 82% !important; width: auto !important; min-width: 0 !important; height: auto !important; aspect-ratio: 3 / 4; scroll-snap-align: center; position: relative !important; overflow: hidden !important; } /* the active-card expansion is a hover affordance; every card is legible */ html[data-touch] .ccard.active, html[data-touch] .ccard:not(.active) { width: auto !important; } html[data-touch] .ccard > * { max-width: 100% !important; min-width: 0 !important; } html[data-touch] .conv-foot { display: flex !important; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 24px !important; } /* nine dots driving a rail you can already swipe */ html[data-touch] .conv-dots { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ 07 · SPACES — the claim and the way in, not a live 3D embed .sb-frame mounts projects/illusorr-spaces.html in an iframe: a live multi-user 3D environment running behind the copy. That is the single heaviest thing on the page and on a phone it costs the whole page its frame rate. The section still makes its case in words, and "Step inside" opens the real thing. ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .spaces-band { min-height: 0 !important; display: block !important; } html[data-touch] .sb-stage { display: none !important; } html[data-touch] .sb-stats { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 40px !important; } html[data-touch] .sb-stat { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; align-items: baseline; column-gap: 16px !important; padding: 18px 0 !important; border-top: 1px solid rgba(255, 255, 255, .1); } html[data-touch] .sb-stat b { font-size: 28px !important; line-height: 1 !important; } html[data-touch] .sb-stat span { font-size: 13px !important; line-height: 1.4 !important; } html[data-touch] .sb-actions { display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px !important; margin-top: 40px !important; } /* ═══════════════════════════════════════════════════════════════════════ 08 · THE COLLECTIVE — three steps as a list ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .collective-band { min-height: 0 !important; display: block !important; } html[data-touch] .cb-glow { display: none !important; } html[data-touch] .cb-steps { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 40px !important; } html[data-touch] .cb-step { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 6px !important; padding: 20px 0 !important; border-top: 1px solid rgba(255, 255, 255, .1); } html[data-touch] .cb-step > .sn { grid-column: 1 !important; grid-row: 1 !important; } html[data-touch] .cb-step h4 { grid-column: 2 !important; grid-row: 1 !important; font-size: 17px !important; letter-spacing: 0 !important; } html[data-touch] .cb-step p { grid-column: 2 !important; } html[data-touch] .cb-line { margin-top: 32px !important; } html[data-touch] .cb-cta { margin-top: 24px !important; } /* ═══════════════════════════════════════════════════════════════════════ 09 · CLOSE — the one beat that stays centred Everything else on the phone is left-set, but this is a title card: the symmetry is the design, not an accident of a wide layout. ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .close-sec { height: auto !important; min-height: 100svh !important; display: flex !important; align-items: center !important; padding: 0 !important; } html[data-touch] .close-center { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 104px 20px 64px !important; width: 100%; } html[data-touch] .close-center h2 { font-size: 32px !important; line-height: 1.06 !important; letter-spacing: -.02em !important; } html[data-touch] .close-center .c-sub { font-size: 16px !important; margin-top: 20px !important; } html[data-touch] .close-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch; gap: 12px !important; margin-top: 40px !important; } html[data-touch] .close-actions > * { min-height: 48px; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; } /* ═══════════════════════════════════════════════════════════════════════ REMOVED ON A PHONE ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .rr, html[data-touch] .scroll-cue { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ TABLET TIER · 641–1024px, touch Same structure, larger frame — an iPad is not a big phone. ═════════════════════════════════════════════════════════════════════ */ @media (min-width: 641px) and (max-width: 1024px) { html[data-touch] .wwa-stage, html[data-touch] .rw-stage, html[data-touch] .whofor, html[data-touch] .conv-section, html[data-touch] .spaces-band, html[data-touch] .collective-band, html[data-touch] .breath { padding: 96px 40px !important; } /* Same reasoning as the 104px phone rule above: the bar grows by the status-bar inset on an island phone, so this clearance has to grow with it or the kicker tucks in behind the brand. env() is 0 without an inset, so this stays exactly 120px everywhere else. */ html[data-touch] .hero .center { padding: calc(120px + env(safe-area-inset-top, 0px)) 40px 64px !important; } html[data-touch] .close-center { padding: 120px 40px 88px !important; } /* A flat 62px across the whole 641-1024 band, with no fluidity: at 768 "Across every reality." measured 1073px against a 768px viewport and ran off the right edge. Fluid, and allowed to wrap. */ html[data-touch] .hero h1 { font-size: clamp(34px, 6.2vw, 62px) !important; white-space: normal !important; max-width: 100% !important; } /* .center is a flex item with flex:0 0 auto - shrink factor ZERO - so it sized to the min-content width of an uppercase headline and measured 904px inside a 768px hero, running the text off the right edge. It has to be allowed to shrink, and min-width:auto has to be cleared for shrinking to reach below min-content. */ html[data-touch] .hero .center { flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; } html[data-touch] .hero .center .kick { font-size: 16px !important; } html[data-touch] .wwa-line { font-size: 42px !important; } html[data-touch] .wwa-stage h2, html[data-touch] .wf-body h2, html[data-touch] .conv-head h2, html[data-touch] .sb-in h2, html[data-touch] .cb-in h2 { font-size: 44px !important; } html[data-touch] .close-center h2 { font-size: 52px !important; } html[data-touch] .wwa-foot .body, html[data-touch] .wf-body p, html[data-touch] .sb-in > p, html[data-touch] .cb-in > p, html[data-touch] .wwd-slide p, html[data-touch] .cb-step p, html[data-touch] .sr-desc, html[data-touch] .wwd-method { font-size: 18px !important; line-height: 1.66 !important; max-width: 68ch !important; } html[data-touch] .wwd-slide h2, html[data-touch] .sr-name, html[data-touch] .cb-step h4 { font-size: 22px !important; } /* the section gap scales with the type */ html[data-touch] .wwa-stage > * + *, html[data-touch] .rw-stage > * + *, html[data-touch] .wf-body > * + *, html[data-touch] .sb-in > * + *, html[data-touch] .cb-in > * + *, html[data-touch] .close-center > * + *, html[data-touch] .conv-section > * + * { margin-top: 56px !important; } /* media gets a landscape frame at this width */ html[data-touch] .wf-visual { aspect-ratio: 16 / 11; } /* two work cards visible instead of one and a sliver */ html[data-touch] .conv { column-gap: 28px !important; margin-inline: -40px !important; padding: 0 40px 10px !important; } html[data-touch] .ccard { flex: 0 0 44% !important; aspect-ratio: 4 / 5; } /* the number column can afford to be wider */ html[data-touch] .srow, html[data-touch] .wwd-slide, html[data-touch] .cb-step { grid-template-columns: 56px minmax(0, 1fr) !important; column-gap: 20px !important; padding: 26px 0 !important; } html[data-touch] .sb-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } html[data-touch] .sb-stat { display: block !important; padding: 20px 0 0 !important; } html[data-touch] .sb-stat b { font-size: 34px !important; } html[data-touch] .close-actions { flex-direction: row !important; align-self: center; gap: 16px !important; } html[data-touch] .close-actions > * { padding-inline: 28px; } } html[data-touch] .wwd-slide p { color: #fff !important; } @media (min-width: 641px) and (max-width: 1024px) { html[data-touch] .hero .center { left: 40px !important; right: 40px !important; width: auto !important; } /* .hero .rr is hidden across the whole touch tier (DESKTOP STAGE FURNITURE, below); the reposition that stood here had nothing left to place. */ } /* The STEP 1 flatten lives inside the phone query, so at 641-1024 these containers kept their desktop grid + 100vh + overflow:hidden and clipped most of "who we do it for". Same flatten, tablet tier. */ @media (min-width: 641px) and (max-width: 1024px) { html[data-touch] .wwa-scroll, html[data-touch] .reelwwd, html[data-touch] .whofor-scroll, html[data-touch] .wwa-stage, html[data-touch] .rw-stage, html[data-touch] .rw-reel, html[data-touch] .rw-wwd, html[data-touch] .whofor, html[data-touch] .wf-body, html[data-touch] .conv-vp, html[data-touch] .sb-in, html[data-touch] .cb-in, html[data-touch] .close-center { display: block !important; position: static !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: auto !important; max-width: none !important; inset: auto !important; transform: none !important; opacity: 1 !important; overflow: visible !important; grid-template-columns: none !important; margin: 0 !important; } html[data-touch] #rwReel, html[data-touch] #rwWwd { transform: none !important; opacity: 1 !important; scale: none !important; } } /* Flattening the stages removed their positioning context, so these absolutely positioned children escaped to the page bottom. */ @media (min-width: 641px) and (max-width: 1024px) { html[data-touch] .wwa-foot, html[data-touch] .wwd-method, html[data-touch] .rw-band { position: static !important; inset: auto !important; width: auto !important; max-width: none !important; } html[data-touch] .wwa-foot { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; margin-top: 40px !important; } html[data-touch] .wwd-method { margin-top: 40px !important; } } /* The rotated vertical title is a rule for the 80px collapsed desktop card. On touch the card is ~287px wide, so set it horizontally where there is room to read it. The sector colour now carries the identification, so the number can sit quietly in the corner. */ html[data-touch] .ccard .cvlabel{ writing-mode: horizontal-tb; transform: none; left: 20px; right: 20px; bottom: 20px; font-size: 25px; line-height: 1.1; white-space: normal; text-align: left; } html[data-touch] .ccard .cvnum{ left: 20px; transform: none; top: 18px; } /* ═════════════════════════════════════════════════════════════════════ WHO WE DO IT FOR — every sector open on touch The descriptions reveal one at a time, driven by scroll position through a tall sticky section, so on a phone the line you want is either still off screen or already gone. All six are open here, and every row reads at full strength instead of dimming the five that are not "current". ═════════════════════════════════════════════════════════════════════ */ html[data-touch] .wf-sectors .sr-desc{ max-height: none !important; opacity: 1 !important; margin-top: 6px !important; overflow: visible !important; } html[data-touch] .wf-sectors .sr-name{ color: var(--cream-ink) !important; } html[data-touch] .wf-sectors .sr-num{ color: var(--indigo) !important; } html[data-touch] .wf-sectors .srow{ padding: 14px 0 !important; } /* .wf-all is a pill now, not an underlined link, so it takes the button system's own type. The 14px here outranked it through !important and made "Discover" the only CTA on the phone at a different size. Margin stays. */ html[data-touch] .wf-all{ margin-top: 18px !important; } /* ═════════════════════════════════════════════════════════════════════ SELECTED WORK RAIL — the 861 to 1024 gap The rail is 4002px wide. Desktop clips it with .conv-vp{overflow:hidden}; the phone tier lets .conv scroll itself, but that rule sits inside (max-width: 860px). Between 861 and 1024 the touch layer had already cleared the desktop clip while the phone rule did not yet apply, so NOTHING contained the rail and it dragged the whole document sideways: measured 2611px of horizontal page scroll at 900 and 2978px at 1024. The band gets the same self-scrolling treatment as the phone. ═════════════════════════════════════════════════════════════════════ */ @media (min-width: 861px) and (max-width: 1024px) { html[data-touch] .conv { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; column-gap: 16px !important; margin-inline: -40px !important; padding: 0 40px 8px !important; } html[data-touch] .conv::-webkit-scrollbar { display: none; } html[data-touch] .ccard { flex: 0 0 62% !important; width: auto !important; min-width: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════ SCROLL JITTER ON iOS · stale compositing layers ═══════════════════════════════════════════════════════════════════════ Symptom: the reel video does not hold its position while scrolling. It drifts up and down against its own frame, and the same shudder appears across all three sticky-stage sections. Cause. main.css promotes four elements for the desktop choreography: .rw-reel { will-change: transform, opacity } .rw-wwd { will-change: opacity } .wf-stage { will-change: transform } .tile { will-change: transform, opacity } STEP 1 above flattens those sections and sets transform:none !important, but it never cleared will-change. So on a phone they are still promoted to their own compositing layers with nothing left to animate. That is free on most engines and not on iOS: a cross-origin iframe living inside a promoted layer, clipped by an overflow:hidden ancestor, is composited asynchronously from the page scroll, so it lags and then catches up on every momentum frame. The video appears to float against its frame. will-change is a promise about what is ABOUT to change. Once the choreography is off, the promise is a lie and the layer is pure cost. ═════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { html[data-touch] .rw-reel, html[data-touch] .rw-wwd, html[data-touch] #rwReel, html[data-touch] #rwWwd, html[data-touch] .wf-stage, html[data-touch] .wf-img, html[data-touch] .wwa-line, html[data-touch] .pnl, html[data-touch] #workGrid .tile { will-change: auto !important; } /* The reel's own layer contract. .reel-media clips with overflow:hidden and lays a radial scrim over the iframe through ::after. On a desktop that is a vignette; on a phone it forces the iframe's layer to be re-clipped and re-composited every scroll frame. The frame already holds the 16/9 box, so the clip is redundant here. */ html[data-touch] .reel-media { overflow: visible !important; background: none !important; } html[data-touch] .reel-media::after { display: none !important; } /* 3D context on the sector stage: preserve-3d plus a perspective ancestor keeps that subtree on the GPU for a transform that no longer runs. */ html[data-touch] .wf-stage { transform-style: flat !important; perspective: none !important; } html[data-touch] .wf-visual { perspective: none !important; } html[data-touch] .wf-img { backface-visibility: visible !important; transition: opacity .45s ease !important; /* Measured on the test copy at 924px: this was still the one element reporting a live transform, because main.css only clears it at 860px and below. scale(1.14) translateZ(-150px) keeps six full-bleed layers on the GPU for a parallax that the flatten already switched off, and the reel iframe sits in the same scrolling region. Cleared across the whole touch tier so the tablet width matches the phone. */ transform: none !important; } html[data-touch] .wf-img.on { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ DESKTOP STAGE FURNITURE · HIDDEN ACROSS THE WHOLE TOUCH TIER ═══════════════════════════════════════════════════════════════════════ The wordmark, the rotated scroll cue and the two register dots are hidden inside the 860px block above, but the touch tier runs to 1024px: the page's own gate sets data-touch at innerWidth <= 1024 and this file has a tablet tier at 641–1024. Between 861 and 1024 with data-touch set, .hero .wm kept its desktop absolute position while the tablet tier had already moved .center, and the orb and the ILLUSORR wordmark printed straight across "Across every reality." Measured at 924px: .wm at x52 y325 on .hero h1 at x80 y311. iPad landscape included. apply-field-fix widens the phone block to 1024px wholesale. Done that way, .hero .seeall would also be restyled in a tier where the hero is still a desktop row, so the gap gets its own tier instead: the furniture is hidden, nothing at or under 860px moves, and the link keeps the placement it has today. */ @media (min-width: 861px) and (max-width: 1024px) { html[data-touch] .hero .wm, html[data-touch] .hero .rr, html[data-touch] .hero .topdot, html[data-touch] .hero .botdot { display: none !important; } } /* The block that stood here gave this one beat a cream ground on touch as a trial, while the field still scanned the scroll and painted its own white behind it. That is why a white sliver still peeked out above the block as it moved: two whites, two clocks. field.js now freezes the field to one dark state on touch, so the grounds below are the only grounds. */ /* ═══════════════════════════════════════════════════════════════════════ SECTION GROUNDS ON TOUCH · CSS, NOT THE FIELD ═══════════════════════════════════════════════════════════════════════ main.css sets these beats to background:transparent under #p-landing so the field can paint their light and dark grounds itself. That is what made the field scroll-dependent, and on a phone that dependency is the jitter (see the TOUCH note in field.js). With the field frozen to a single dark state on touch, the light beats need their ground back. A background-color is composited: it moves with its element, exactly in step, and can never lag. The field stays as the texture behind the dark beats, which is where it reads best anyway. Desktop keeps the field-painted grounds: every rule here is inside a max-width query and scoped to data-touch. ═════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { html[data-touch] #p-landing .wwa-scroll, html[data-touch] #p-landing .wwa-stage, html[data-touch] #p-landing .whofor, html[data-touch] #p-landing .whofor-scroll, html[data-touch] #p-landing .breath, html[data-touch] #p-landing .conv-section { background: var(--cream) !important; } html[data-touch] #p-landing .hero, html[data-touch] #p-landing .reelwwd, html[data-touch] #p-landing .rw-stage { background: transparent !important; } /* The dark beats that sit over their own artwork or glow keep an opaque ground, so the frozen field is not showing through two layers. */ html[data-touch] #p-landing .spaces-band, html[data-touch] #p-landing .collective-band, html[data-touch] #p-landing .close-sec { background: var(--bg) !important; } }