block via GSAP autoAlpha). Everything inside always shows. Covers: [data-fade] — sections + footer (pages.js focus-fade) [data-split] .word — hero title stagger (sphere.js bindReveals) [data-rise] — subtitle rise (sphere.js bindReveals) .claim__text — claim scale+fade (sphere.js bindReveals) [data-pin-body] — statement band rise (sphere.js line 1354) !important overrides both CSS base states (opacity: 0 / transform: translateY(...)) and any GSAP-inline autoAlpha writes. Desktop path is untouched. */ @media (max-width: 560px) { [data-fade], [data-split] .word, [data-rise], .claim__text, [data-pin-body] { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; } /* MSFO "Who it's for" section has its own dedicated JS opacity writer (pages.js:543 msfoWho.style.opacity = op) that runs on the msfo page only — not covered by [data-fade]. Force opacity 1 to override that writer. Transform is NOT reset here so the scroll-stack scale on .ss-card and the __head translateY tracking still work. */ .msfo-who { opacity: 1 !important; } /* Full-viewport HERO only. Hero fills the phone screen; every other section below hugs its natural content height, using each section's own padding for inter-section spacing. dvh handles iOS Safari's collapsible URL bar cleanly; vh is the fallback for older browsers. */ .hero, .page-hero { min-height: 100vh !important; min-height: 100dvh !important; } /* Undo any pre-existing per-section min-height that would keep a below-hero section viewport-tall on mobile after this change. Applied only to sections known to force full-viewport by class (.cine — 68dvh, .claim--lg — 100svh at min-width:561px). */ .cine, .claim--lg { min-height: 0 !important; } /* Uniform vertical rhythm between sections. Every below-hero section gets the same block padding so the gap between adjacent sections is always ~112px (56+56). Sections that measured wildly different spacing before (.cine at 153/68, .claim--lg at 119/119, .msfo-bento at 64/64) all collapse to the same rhythm. Horizontal padding is left untouched so each section keeps its own gutter/max-width. */ main > section:not(.hero):not(.page-hero) { padding-top: 56px !important; padding-bottom: 56px !important; } /* iOS overscroll bleed fix. Vertical bounce is disabled so the rubber-band exposure can't happen. The per-page background color on is set inline in each HTML file (style="background:...") so it's present on the first byte — no flash of the wrong colour while CSS parses. Don't set html background here: an !important rule would win over the inline per-page value and paint every page the same colour. */ html { overscroll-behavior-y: none; } /* iOS 26 Safari "Liquid Glass" URL bar fix. Safari 26 composites a translucent frost over pixels near the top and bottom edges of the viewport for its URL bar / status bar chrome. On this site .atmos__glow paints radial gradients across the whole viewport, and on interior pages those gradients are a different hue than the page canvas (e.g. msfo's mid glow is light violet on aubergine canvas). The frost picks up the glow colour → chrome reads as a mismatched "purple box" at both edges. Fix on mobile only: push .atmos__glow's paint region inward so it stops touching the top and bottom edges. Safari's frost then samples only the body canvas colour → chrome tint matches the page on every route. Desktop untouched. */ .atmos__glow { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%); } /* Mobile header: burger to the true right edge. Base .nav__inner uses grid-template-columns: 1fr auto 1fr — with .nav__links display:none on mobile, the empty middle column collapses but leaves the meta column stuck at ~50% instead of the right edge. Switch to auto/1fr/auto so brand hugs the left, empty middle absorbs slack, meta (burger) sits flush right. */ .nav__inner { grid-template-columns: auto 1fr auto; } /* Neutralize every negative-margin "hero-footprint pull". These rules make each content section overlap the previous section on desktop, relying on the focus-fade module to keep the previous section invisible until the user scrolls close. Fade is disabled on mobile per product decision, so the overlaps became visible stacks. Reset to margin-top:0 so sections lay out sequentially, one per screen. Enumerated (rather than a global reset) to avoid touching intentional negative margins in unrelated layout code. */ .pin, .page-about main > .section, body.page-msfo .page-hero + .msfo-bento, .timeline, .svc-run, .svc-sec, .turnkey, body.page-services main > .claim { margin-top: 0 !important; } } /* Services .turnkey — section-level custom fade. The diagram + items list is 6000px+ tall, so the universal focus-fade engine (centre-based winner) mis-times its entry. Instead, fade the section as a whole based on simple viewport overlap (visible if ANY part is in view). */ .turnkey__wrap { opacity: 0; transition: opacity .55s cubic-bezier(.22,.61,.36,1); } .turnkey.in-view .turnkey__wrap { opacity: 1; } /* ================================================================== Outro — when home scroll reaches max, apply contact-page atmosphere (plum canvas + violet glow vars), nav fades out. Sphere swaps mode via sphere.js (driven by .is-outro). Footer keeps its normal data-fade="in" behavior. All driven by CSS transitions for smooth in/out as scroll crosses the threshold. ================================================================== */ /* Outro transitions apply on every page that participates in the outro (everything except page-contact, which IS the destination). Sphere swap is driven via JS class flip in sphere.js; the CSS here handles bg + glow + nav. */ /* Outro transitions apply on every page that participates in the outro (everything except page-contact, which IS the destination). About is excluded from the bg + canvas swap only (page is white by design; plum swap reads as disruptive). Sphere swap is driven via JS class flip in sphere.js; the CSS here handles bg + glow + nav. */ body:not(.page-contact) { transition: background-color .8s ease, --canvas .8s ease; } body:not(.page-contact) .atmos__glow { transition: --canvas .8s ease, --glow-mid .8s ease, --glow-deep .8s ease, --glow-fade .8s ease, --glow-vignette .8s ease, --glow-vignette-fade .8s ease; } body:not(.page-contact) .nav { transition: opacity .55s ease; } body.is-outro:not(.page-contact):not(.page-about) { background-color: #0E0A1F; --canvas: #0E0A1F; } body.is-outro:not(.page-contact) .atmos__glow { --glow-mid: rgba(140, 100, 200, 0.50); --glow-deep: rgba(80, 55, 130, 0.30); --glow-fade: rgba(14, 10, 31, 0); --glow-vignette: rgba(5, 3, 14, 0.92); --glow-vignette-fade: rgba(5, 3, 14, 0); } body.is-outro:not(.page-contact) .nav { opacity: 0; pointer-events: none; } /* ================================================================== Services bookcase — homepage section 10. Horizontal expanding spines. ================================================================== */ .services-case { padding: clamp(120px, 18vh, 220px) var(--gutter) clamp(120px, 16vh, 200px); position: relative; z-index: 3; } .services-case .case { display: flex; gap: 8px; height: clamp(300px, 40vh, 380px); max-width: var(--container); margin: 0 auto; } .services-case .book { flex: 1 1 0; background: rgba(255,255,255,0.022); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(244,237,223,0.10); border-radius: var(--r-card); cursor: pointer; overflow: hidden; transition: flex .55s cubic-bezier(.22,.61,.36,1), background .35s ease, border-color .35s ease; display: flex; flex-direction: row; align-items: stretch; min-width: 0; } .services-case .book:hover { border-color: rgba(244,237,223,0.22); } .services-case .book.is-active { flex: 6 1 0; background: rgba(255,255,255,0.05); border-color: rgba(244,237,223,0.30); } .services-case .book__spine { flex: none; width: clamp(56px, 6vw, 72px); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--s-6) 0; border-right: 1px solid rgba(244,237,223,0); transition: border-color .35s ease; } .services-case .book.is-active .book__spine { border-right-color: rgba(244,237,223,0.10); } .services-case .book__num { font-family: var(--num); font-style: normal; font-weight: 400; font-size: 13px; letter-spacing: 0.08em; font-feature-settings: "tnum" 1, "lnum" 1; color: rgba(244,237,223,0.45); transition: color .35s ease; } .services-case .book.is-active .book__num { color: rgba(244,237,223,0.95); } .services-case .book__t { font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.2; letter-spacing: 0.02em; color: rgba(244,237,223,0.82); margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; transition: color .25s ease; } .services-case .book:hover .book__t { color: rgba(244,237,223,1); } .services-case .book.is-active .book__t { color: rgba(244,237,223,1); } .services-case .book__panel { flex: 1 1 0; min-width: 0; opacity: 0; transform: translateX(8px); transition: opacity .35s ease .1s, transform .45s ease .1s; padding: var(--s-7) var(--s-8); display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .services-case .book.is-active .book__panel { opacity: 1; transform: none; } .services-case .book__panel-t { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.02em; color: var(--fg); margin: 0 0 16px; } .services-case .book__panel-b { font-family: var(--sans); font-size: 14px; line-height: 1.75; color: var(--fg-muted); margin: 0; max-width: 52ch; } @media (max-width: 560px) { /* Nine-books stacked vertical. Old rule kept row-flex with spine 100% width, which forced sibling .book__panel to computed width 0; panel text then wrapped one glyph per line, ballooning each book to 3-4k px (index total: 33k px). Column stack + panel hidden until .is-active (JS toggle) gives ~600-900px total. */ .services-case { padding: clamp(64px, 12vh, 120px) var(--gutter); } .services-case .case { flex-direction: column; height: auto; gap: 6px; } .services-case .book { flex: 0 0 auto; flex-direction: column; height: auto; min-height: 56px; align-items: stretch; } .services-case .book.is-active { flex: 0 0 auto; } .services-case .book__spine { width: 100%; flex: 0 0 auto; flex-direction: row; padding: 16px 20px; border-right: none; border-bottom: 1px solid rgba(244,237,223,0); justify-content: space-between; align-items: center; } .services-case .book.is-active .book__spine { border-bottom-color: rgba(244,237,223,0.10); } .services-case .book__t { writing-mode: horizontal-tb; transform: none; } .services-case .book__panel { display: none; flex: 0 0 auto; opacity: 1; transform: none; padding: 18px 22px 22px; } .services-case .book.is-active .book__panel { display: flex; } .services-case .book__panel-t { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { [data-fade] { opacity: 1 !important; } } /* ================================================================== Page-to-page fade is handled by the SPA router (transitions.js): it swaps only