:root {
  --ink: #050506;
  --paper: #f2f1ed;
  --muted: rgba(244, 244, 241, .68);
  --hairline: rgba(244, 244, 241, .18);
  --violet: #aa91c2;
  --violet-deep: #75647f;
  --magenta: #b86b9f;
  --mist: #9fb5b7;
  --accent-gradient: linear-gradient(90deg, #bba2cf 0%, #8277a9 48%, #68899d 100%);
  --petrol: #07171b;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --page-pad: clamp(1.25rem, 3.8vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--ink); }
body { margin: 0; min-width: 320px; color: var(--paper); background: var(--ink); font-family: "Space Grotesk", Arial, sans-serif; overflow-x: clip; }
body { cursor: default; }
h1, h2, h3 { font-family: "Space Grotesk", Arial, sans-serif; }
a, button, summary, select { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { color: var(--ink); background: #d9c7e7; }

.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: .75rem 1rem; color: var(--ink); background: var(--paper); transform: translateY(-200%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 6rem; padding: 0 var(--page-pad); border-bottom: 1px solid transparent; transition: height .5s var(--ease-out), background .5s ease, border-color .5s ease; }
.site-header.is-compact { height: 4.75rem; background: rgba(5, 5, 6, .9); border-color: var(--hairline); backdrop-filter: blur(18px) saturate(130%); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--paper); text-decoration: none; font-family: "Syncopate", "Space Grotesk", sans-serif; font-size: .66rem; font-weight: 700; letter-spacing: .12em; }
.brand img { width: 2.3rem; height: 2.3rem; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.7rem); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.site-nav a { position: relative; text-decoration: none; }
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.45rem; height: 1px; background: var(--paper); transition: right .45s var(--ease-out); }
.site-nav a:not(.nav-cta):hover::after, .site-nav a:not(.nav-cta):focus-visible::after { right: 0; }
.language-switch { display: inline-flex; align-items: center; gap: .42rem; color: rgba(244,244,241,.48); font: 500 .62rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; }
.language-switch > span { color: var(--paper); }
.language-switch i { color: rgba(244,244,241,.24); font-style: normal; }
.language-switch a { color: rgba(244,244,241,.58); transition: color .25s ease; }
.language-switch a:hover, .language-switch a:focus-visible { color: var(--paper); }
.nav-cta { padding: .8rem 1rem; border: 1px solid rgba(244,244,241,.38); transition: color .35s ease, background .35s ease; }
.nav-cta:hover, .nav-cta:focus-visible { color: var(--ink); background: var(--paper); }

.genesis { --hero-progress: 0; --smoke-intensity: 0; --smoke-x: -24%; position: relative; height: 430svh; isolation: isolate; background: #030304; }
.genesis-sticky { position: sticky; top: 0; min-height: 100svh; display: grid; align-items: end; isolation: isolate; overflow: hidden; background: #030304; }
.genesis-media, .genesis-media > * { position: absolute; inset: 0; }
.genesis-media { z-index: -2; overflow: hidden; background: #020304; }
.genesis-frame { margin: 0; opacity: 0; overflow: hidden; transform: translateZ(0); will-change: opacity, clip-path, transform; }
.genesis-frame:first-child { opacity: 1; }
.genesis-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 59% 50%; transform: scale(1.02); will-change: transform; }
.genesis-frame[data-genesis-frame="1"] img { object-position: 61% 50%; }
.genesis-frame[data-genesis-frame="2"] img { object-position: 62% 50%; }
.genesis-frame[data-genesis-frame="3"] img { object-position: 60% 49%; }
.genesis-grade { z-index: 8; background: linear-gradient(90deg, rgba(3,3,5,.96) 0%, rgba(3,3,5,.76) 27%, rgba(3,3,5,.22) 56%, rgba(3,3,5,.1) 100%), linear-gradient(0deg, rgba(3,3,5,.84), transparent 44%), radial-gradient(circle at 72% 24%, rgba(179,146,201,.14), transparent 31%); pointer-events: none; }
.genesis-light { z-index: 5; opacity: .55; background: linear-gradient(164deg, transparent 0 27%, rgba(229,226,246,.13) 34%, rgba(166,137,195,.055) 42%, transparent 54%); mix-blend-mode: screen; transform: translate3d(calc(var(--hero-progress) * -8%), calc(var(--hero-progress) * 4%), 0); pointer-events: none; }
.genesis-smoke { z-index: 6; background-image: url('assets/matter/smoke-volumetric.webp'); background-repeat: no-repeat; background-size: cover; mix-blend-mode: screen; pointer-events: none; }
.genesis-smoke--back { opacity: .12; background-position: 78% 45%; filter: blur(7px) saturate(.45); transform: scale(1.2) translate3d(4%, -2%, 0); }
.genesis-smoke--wipe { z-index: 7; inset: -18%; opacity: var(--smoke-intensity); background-position: 52% 50%; filter: blur(2px) saturate(.4) contrast(1.1); transform: translate3d(var(--smoke-x), 0, 0) scale(1.4); mix-blend-mode: screen; will-change: opacity, transform; }
.genesis-smoke--front { opacity: .16; background-position: 56% 52%; filter: blur(3px) saturate(.42); transform: scale(1.34) translate3d(12%, 4%, 0); }

.genesis-content { position: relative; z-index: 3; width: min(57rem, calc(100% - 2 * var(--page-pad))); margin: 0 var(--page-pad) clamp(7rem, 14vh, 10rem); }
.eyebrow { margin: 0 0 1.25rem; color: rgba(244,244,241,.73); font: 500 .68rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .15em; }
.genesis h1 { margin: 0; font-size: clamp(3.2rem, 8.8vw, 9.3rem); font-weight: 470; line-height: .84; letter-spacing: -.065em; text-transform: uppercase; text-wrap: balance; }
.genesis h1 span { display: block; }
.title-accent { color: rgba(244,244,241,.94); }
.hero-copy { max-width: 39rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.55; letter-spacing: -.015em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.button { min-height: 3.35rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding: 0 1.25rem; border: 1px solid var(--hairline); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transition: transform .45s var(--ease-out), color .35s ease, background .35s ease, border-color .35s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button--primary { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.button--primary:hover, .button--primary:focus-visible { color: var(--paper); background: rgba(5,5,6,.42); }
.button--quiet { background: rgba(5,5,6,.18); backdrop-filter: blur(10px); }
.button--quiet:hover, .button--quiet:focus-visible { border-color: rgba(244,244,241,.58); }

.hero-status { position: absolute; z-index: 4; right: var(--page-pad); bottom: 2.15rem; display: grid; grid-template-columns: auto minmax(4rem, 8rem) minmax(10rem, auto); align-items: center; gap: 1rem; color: rgba(244,244,241,.58); font: .64rem/1 "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.status-index { color: rgba(244,244,241,.94); font-variant-numeric: tabular-nums; }
.status-line { position: relative; height: 1px; overflow: hidden; background: rgba(244,244,241,.2); }
.status-line i { position: absolute; inset: 0; display: block; background: var(--accent-gradient); transform: scaleX(.01); transform-origin: left; will-change: transform; }
.genesis-rail { position: absolute; z-index: 4; right: var(--page-pad); top: 50%; display: grid; gap: .8rem; width: min(9rem, 12vw); margin: 0; padding: 0; list-style: none; transform: translateY(-50%); }
.genesis-rail li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .55rem; align-items: center; padding-top: .55rem; color: rgba(244,244,241,.28); border-top: 1px solid rgba(244,244,241,.16); font: .54rem/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; transition: color .35s ease, border-color .35s ease, transform .6s var(--ease-out); }
.genesis-rail li em { overflow: hidden; font-style: normal; white-space: nowrap; }
.genesis-rail li.is-active { color: rgba(244,244,241,.92); border-color: #b28fc4; transform: translateX(-.45rem); }
.scroll-cue { position: absolute; left: var(--page-pad); bottom: 2rem; display: flex; align-items: center; gap: .8rem; color: rgba(244,244,241,.58); font: .63rem/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.scroll-cue-line { width: 3rem; height: 1px; overflow: hidden; background: rgba(244,244,241,.24); }
.scroll-cue-line::after { content: ""; display: block; width: 50%; height: 100%; background: var(--paper); animation: cue 1.8s var(--ease-in-out) infinite; }

[data-reveal] { opacity: 0; transform: translateY(1.6rem); }
.is-ready [data-reveal] { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.is-ready [data-reveal]:nth-child(1) { transition-delay: .38s; }
.is-ready [data-reveal]:nth-child(2) { transition-delay: .56s; }
.is-ready [data-reveal]:nth-child(3) { transition-delay: .74s; }
.is-ready [data-reveal]:nth-child(4) { transition-delay: .9s; }
.is-ready .genesis-light { opacity: 1; transition: opacity 1.3s .15s ease; }
.is-ready .genesis-smoke--back { animation: smoke-back 13s ease-in-out infinite alternate; }
.is-ready .genesis-smoke--front { animation: smoke-front 10s ease-in-out infinite alternate; }
.intro-complete [data-reveal] { transition-delay: 0s !important; transition-duration: .22s !important; }

.proof-first { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(20rem, .72fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; padding: clamp(7rem, 11vw, 11rem) var(--page-pad); background: #0b0d0d; }
.proof-first::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 40%, rgba(30,92,91,.14), transparent 36%), linear-gradient(180deg, #050607, transparent 15%); }
.proof-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; clip-path: inset(0 12% 0 0); opacity: 0; transform: translateY(2rem); transition: clip-path 1.4s var(--ease-out), opacity .8s ease, transform 1s var(--ease-out); }
.proof-media.is-visible { clip-path: inset(0); opacity: 1; transform: none; }
.proof-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.proof-media:hover img { transform: scale(1.015); }
.proof-media-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,7,8,.68), transparent 48%); }
.proof-label { position: absolute; inset: auto 1.25rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; font: .65rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.proof-copy { position: relative; max-width: 36rem; opacity: 0; transform: translateY(2rem); transition: opacity .9s .15s ease, transform 1.1s .15s var(--ease-out); }
.proof-copy.is-visible { opacity: 1; transform: none; }
.section-kicker { margin: 0 0 1.4rem; color: #9fb3b6; font: .66rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .16em; }
.proof-copy h2 { margin: 0; font-size: clamp(2.45rem, 5vw, 6.5rem); font-weight: 450; line-height: .98; letter-spacing: -.055em; }
.proof-copy h2 em { color: #aec3c2; font-style: normal; }
.proof-copy > p:not(.section-kicker) { max-width: 31rem; margin: 2rem 0; color: rgba(244,244,241,.63); font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.65; }
.text-link { display: inline-flex; gap: .75rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(244,244,241,.32); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
[data-reveal-observer] { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform 1s var(--ease-out); }
[data-reveal-observer].is-visible { opacity: 1; transform: none; }

.studio { position: relative; padding: clamp(8rem, 14vw, 14rem) var(--page-pad) clamp(5rem, 9vw, 9rem); color: #101111; background: #ebeae5; overflow: hidden; }
.studio::after { content: "GMX"; position: absolute; right: -3vw; top: 7%; color: rgba(10,12,12,.035); font-size: clamp(10rem, 32vw, 38rem); font-weight: 700; line-height: .8; letter-spacing: -.1em; pointer-events: none; }
.studio .section-kicker { color: #686c69; }
.studio-intro { position: relative; z-index: 1; max-width: 80rem; }
.studio-intro h2 { max-width: 77rem; margin: 0; font-size: clamp(3.1rem, 7.8vw, 9rem); font-weight: 430; line-height: .88; letter-spacing: -.07em; text-transform: uppercase; }
.studio-intro h2 em { color: #7f728a; font-style: normal; }
.studio-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(5rem, 10vw, 11rem); border-top: 1px solid rgba(12,14,14,.2); }
.studio-principle { min-height: 21rem; padding: 1.5rem clamp(1.25rem, 2.8vw, 3.25rem) 2.25rem 0; border-right: 1px solid rgba(12,14,14,.16); transition-delay: calc(var(--order, 0) * 90ms); }
.studio-principle + .studio-principle { padding-left: clamp(1.25rem, 2.8vw, 3.25rem); }
.studio-principle:last-child { border-right: 0; }
.principle-index { color: #777d79; font: .65rem/1 "IBM Plex Mono", monospace; }
.studio-principle h3 { margin: 6.5rem 0 1rem; font-size: clamp(1.45rem, 2.1vw, 2.25rem); font-weight: 510; letter-spacing: -.035em; }
.studio-principle p { max-width: 25rem; margin: 0; color: #555b57; font-size: 1rem; line-height: 1.65; }
.studio-signature { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 1.4rem; margin-top: 5rem; color: #737875; font: .62rem/1 "IBM Plex Mono", monospace; letter-spacing: .16em; }
.studio-signature i { height: 1px; background: rgba(12,14,14,.18); }

.worlds { position: relative; background: #070808; }
.worlds-head { display: grid; grid-template-columns: 1.15fr .55fr; column-gap: 4rem; padding: clamp(8rem, 13vw, 13rem) var(--page-pad) clamp(5rem, 8vw, 8rem); }
.worlds-head .section-kicker { grid-column: 1 / -1; }
.worlds-head h2 { margin: 0; font-size: clamp(3.3rem, 7vw, 8.2rem); font-weight: 440; line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
.worlds-head h2 em { color: #b8a5c5; font-style: normal; }
.worlds-head > p:last-child { align-self: end; max-width: 31rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.world { position: relative; min-height: 124svh; display: grid; isolation: isolate; }
.world-media, .world-copy { grid-area: 1 / 1; position: sticky; top: 0; height: 100svh; }
.world-media { z-index: -1; overflow: hidden; background: #050606; }
.world-media picture { display: contents; }
.world-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease-out), filter 1.4s ease; }
.world:not(.is-current) .world-media img { transform: none; }
.world.is-current .world-media img { transform: none; }
.world--carmel .world-media img { object-position: 58% center; }
.world--poti .world-media img { object-position: center; }
.world--miami .world-media img { object-position: center 46%; }
.world-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,4,4,.9), rgba(3,4,4,.28) 48%, rgba(3,4,4,.13)), linear-gradient(0deg, rgba(3,4,4,.75), transparent 42%); }
.world-material { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.2s ease, transform 2s var(--ease-out); }
.world-material--water { opacity: .13; background: url('assets/matter/water-glass.webp') left center / cover no-repeat; mix-blend-mode: screen; }
.world-material--heat { opacity: .15; background: radial-gradient(ellipse at 50% 80%, rgba(255,188,104,.4), transparent 42%), repeating-linear-gradient(88deg, transparent 0 6%, rgba(255,244,218,.035) 7%, transparent 8%); filter: blur(3px); mix-blend-mode: screen; }
.world-material--glass { opacity: .18; background: url('assets/matter/water-glass.webp') right center / cover no-repeat; mix-blend-mode: screen; transform: rotate(180deg) scale(1.08); }
.world-copy { z-index: 2; display: grid; grid-template-columns: minmax(4rem, .25fr) minmax(22rem, 1fr) auto; align-items: end; gap: 3rem; padding: 0 var(--page-pad) clamp(4.5rem, 8vh, 7rem); }
.world-number { align-self: start; padding-top: 7rem; font: .68rem/1 "IBM Plex Mono", monospace; letter-spacing: .14em; }
.world-copy p { margin: 0 0 1.1rem; color: rgba(244,244,241,.64); font: .65rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .15em; }
.world-copy h3 { margin: 0; font-size: clamp(3.4rem, 7.3vw, 8.8rem); font-weight: 430; line-height: .82; letter-spacing: -.07em; text-transform: uppercase; }
.world-copy h3 em { color: #d0bccf; font-style: normal; }
.world--poti .world-copy h3 em { color: #dcc29f; }
.world--miami .world-copy h3 em { color: #b9c9d8; }
.world-copy > div:nth-child(2) > span { display: block; margin-top: 1.5rem; color: rgba(244,244,241,.68); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.world-action { align-self: end; display: inline-flex; align-items: center; gap: 1rem; min-height: 3.1rem; margin-bottom: .25rem; padding: 0 1rem; color: var(--paper); border: 1px solid rgba(244,244,241,.35); background: rgba(5,5,6,.25); font: 600 .65rem/1 "Space Grotesk", sans-serif; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; backdrop-filter: blur(10px); transition: color .3s ease, background .3s ease, border-color .3s ease; }
button.world-action { appearance: none; }
.world-action:hover, .world-action:focus-visible { color: var(--ink); background: var(--paper); border-color: var(--paper); }

.digital-work { position: relative; padding: clamp(8rem, 13vw, 13rem) var(--page-pad) clamp(7rem, 11vw, 11rem); overflow: clip; background: #050607; isolation: isolate; }
.digital-work::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .11; background: url('assets/matter/water-glass.webp') right 6% / min(68rem, 72vw) auto no-repeat; filter: grayscale(1) contrast(1.1); mix-blend-mode: screen; mask-image: linear-gradient(90deg, transparent 22%, #000 72%, transparent 100%); pointer-events: none; }
.digital-work::after { content: ""; position: absolute; z-index: -1; inset: 18% -18% auto 46%; height: 42rem; opacity: .08; background: url('assets/matter/smoke-volumetric.webp') center / cover no-repeat; filter: blur(12px) grayscale(1); transform: rotate(-10deg); mix-blend-mode: screen; pointer-events: none; }
.digital-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .48fr); gap: 4rem; align-items: end; max-width: 100rem; margin-bottom: clamp(6rem, 11vw, 12rem); }
.digital-head .section-kicker { grid-column: 1 / -1; }
.digital-head h2 { margin: 0; font-size: clamp(3.3rem, 7vw, 8.2rem); font-weight: 430; line-height: .87; letter-spacing: -.07em; text-transform: uppercase; }
.digital-head h2 em { color: #b59ec4; font-style: normal; }
.digital-head > p:last-child { max-width: 32rem; margin: 0; color: rgba(244,244,241,.6); font-size: 1rem; line-height: 1.7; }
.experience-list { border-top: 1px solid var(--hairline); }
.experience { --experience-accent: #b498c4; position: relative; min-height: 122svh; display: grid; grid-template-columns: minmax(19rem, .58fr) minmax(35rem, 1.42fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; padding: clamp(4rem, 7vw, 7rem) 0; border-bottom: 1px solid var(--hairline); }
.experience--asl { --experience-accent: #c9aa66; }
.experience-copy { position: sticky; top: 8rem; align-self: start; max-width: 37rem; }
.experience-code { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hairline); color: rgba(244,244,241,.42); font: .58rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .12em; }
.experience-name { margin: clamp(3.5rem, 7vh, 6.5rem) 0 1.25rem; color: rgba(244,244,241,.6); font: .62rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .15em; }
.experience-copy h3 { margin: 0; font-size: clamp(3.3rem, 5.8vw, 7rem); font-weight: 430; line-height: .82; letter-spacing: -.07em; text-transform: uppercase; }
.experience-copy h3 em { color: var(--experience-accent); font-style: normal; }
.experience-summary { max-width: 32rem; margin: 2rem 0; color: rgba(244,244,241,.6); font-size: 1rem; line-height: 1.7; }
.experience-copy ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.2rem; margin: 0 0 2.25rem; padding: 0; list-style: none; }
.experience-copy li { position: relative; padding-left: 1rem; color: rgba(244,244,241,.48); font: .58rem/1.45 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.experience-copy li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: 1px; background: var(--experience-accent); }
.experience-link { position: relative; min-height: 3.4rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 2.4rem; padding: 0 1.15rem; overflow: hidden; color: var(--paper); border: 1px solid rgba(244,244,241,.3); font: 600 .65rem/1 "Space Grotesk", sans-serif; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; isolation: isolate; transition: color .45s ease, border-color .45s ease; }
.experience-link::before { content: ""; position: absolute; z-index: -1; right: 1.15rem; top: 50%; width: .45rem; height: .45rem; border-radius: 50%; background: var(--experience-accent); transform: translateY(-50%) scale(1); transition: transform .65s cubic-bezier(.16,1,.3,1); }
.experience-link:hover, .experience-link:focus-visible { color: #070808; border-color: var(--experience-accent); }
.experience-link:hover::before, .experience-link:focus-visible::before { transform: translateY(-50%) scale(72); }
.experience-link span { position: relative; z-index: 1; }
.experience-browser { position: sticky; top: 9svh; display: block; align-self: start; min-width: 0; color: var(--paper); border: 1px solid rgba(244,244,241,.2); background: #090b0c; box-shadow: 0 3rem 8rem rgba(0,0,0,.46); text-decoration: none; transform: perspective(1600px) rotateX(.7deg) translateY(2rem); transform-origin: center top; opacity: .82; transition: transform 1.2s var(--ease-out), opacity 1s ease, border-color .5s ease, box-shadow .8s ease; }
.experience.is-visible .experience-browser { opacity: 1; transform: perspective(1600px) rotateX(0) translateY(0); }
.experience-browser:hover, .experience-browser:focus-visible { border-color: rgba(244,244,241,.42); box-shadow: 0 3.6rem 9rem rgba(0,0,0,.6); }
.browser-bar { height: 2.9rem; display: grid; grid-template-columns: repeat(3, .48rem) 1fr auto; align-items: center; gap: .48rem; padding: 0 1rem; border-bottom: 1px solid rgba(244,244,241,.14); background: rgba(11,13,14,.86); }
.browser-bar i { width: .42rem; height: .42rem; border-radius: 50%; background: rgba(244,244,241,.25); }
.browser-bar b { justify-self: center; font: 400 .53rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.browser-bar em { font: normal .65rem/1 "IBM Plex Mono", monospace; }
.experience-screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #050607; isolation: isolate; }
.screen-main { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); transition: transform 1.8s var(--ease-out); }
.experience-browser:hover .screen-main, .experience-browser:focus-visible .screen-main { transform: scale(1); }
.screen-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3,5,6,.88), rgba(3,5,6,.12) 55%), linear-gradient(0deg, rgba(3,5,6,.72), transparent 52%); }
.screen-brand { position: absolute; z-index: 3; left: 6%; top: 9%; display: grid; color: #f2f0eb; font-size: clamp(2.4rem, 5vw, 6.4rem); font-weight: 500; line-height: .76; letter-spacing: -.08em; }
.screen-brand small { margin-left: .2em; font: 500 .48rem/1 "IBM Plex Mono", monospace; letter-spacing: .25em; }
.screen-brand--asl { line-height: .7; }
.screen-brand--asl small { margin-top: .7rem; margin-left: .15rem; }
.screen-line { position: absolute; z-index: 3; left: 6%; bottom: 8%; color: rgba(244,244,241,.62); font: .56rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .15em; }
.screen-inset { position: absolute; z-index: 2; object-fit: cover; border: 1px solid rgba(244,244,241,.42); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.52); transition: transform 1s var(--ease-out); }
.screen-inset--landscape { right: 5%; bottom: 7%; width: 42%; aspect-ratio: 16 / 9; }
.screen-inset--material { right: 8%; top: 8%; width: 18%; aspect-ratio: 1; }
.experience--asl .screen-inset--material { object-position: 78% 44%; }
.experience-browser:hover .screen-inset--landscape, .experience-browser:focus-visible .screen-inset--landscape { transform: translate3d(-.5rem,-.35rem,0); }
.experience-browser:hover .screen-inset--material, .experience-browser:focus-visible .screen-inset--material { transform: translate3d(.35rem,.5rem,0); }
.digital-note { margin: clamp(5rem, 10vw, 10rem) 0 0; color: rgba(244,244,241,.22); font-size: clamp(2.7rem, 7.7vw, 9rem); font-weight: 450; line-height: .85; letter-spacing: -.07em; text-transform: uppercase; }

.capabilities { padding: clamp(8rem, 13vw, 13rem) var(--page-pad); color: #111313; background: #e8e8e3; }
.capabilities .section-kicker { color: #666c69; }
.capabilities-head { display: grid; grid-template-columns: .3fr minmax(30rem, .95fr) minmax(18rem, .42fr); gap: clamp(2rem, 4vw, 5rem); align-items: end; margin-bottom: clamp(4rem, 7vw, 7rem); }
.capabilities-head .section-kicker { align-self: start; padding-top: .6rem; }
.capabilities-head h2 { margin: 0; font-size: clamp(3.2rem, 6.3vw, 7.5rem); font-weight: 430; line-height: .89; letter-spacing: -.065em; }
.capabilities-head h2 em { color: var(--violet-deep); font-style: normal; }
.capabilities-lead { max-width: 29rem; margin: 0; color: #555c58; font-size: 1rem; line-height: 1.68; }
.film-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.film-model { position: relative; min-height: clamp(31rem, 42vw, 42rem); display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 3rem); overflow: hidden; border: 1px solid rgba(13,15,14,.18); background: #deded8; isolation: isolate; }
.film-model::before { content: ""; position: absolute; z-index: -1; inset: auto -20% -44% 25%; height: 88%; opacity: .12; background: url('assets/matter/water-glass.webp') center / cover no-repeat; filter: grayscale(1) contrast(1.2); transform: rotate(-8deg); mix-blend-mode: multiply; }
.film-model--ultra { color: var(--paper); border-color: rgba(244,244,241,.18); background: #0c0d0e; box-shadow: 0 2.5rem 6rem rgba(17,15,19,.18); }
.film-model--ultra::before { inset: -12% -8% auto 28%; height: 116%; opacity: .16; filter: hue-rotate(14deg) saturate(.7) contrast(1.15); mix-blend-mode: screen; }
.film-model--ultra::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 82% 17%, rgba(164,126,193,.18), transparent 31%), linear-gradient(145deg, transparent 58%, rgba(78,115,126,.1)); }
.film-model-meta { display: flex; justify-content: space-between; gap: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(13,15,14,.18); color: #656b68; font: .64rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .12em; }
.film-model--ultra .film-model-meta { color: rgba(244,244,241,.57); border-color: var(--hairline); }
.film-model h3 { max-width: 38rem; margin: clamp(5rem, 10vw, 9rem) 0 1rem; font-size: clamp(3rem, 5.4vw, 6.5rem); font-weight: 450; line-height: .83; letter-spacing: -.065em; text-transform: uppercase; }
.film-model--ultra h3 { color: #d5c6de; }
.film-model-statement { margin: 0 0 1rem; font-size: clamp(1.15rem, 1.6vw, 1.55rem); font-weight: 520; letter-spacing: -.025em; }
.film-model > p:not(.film-model-statement) { max-width: 35rem; margin: 0; color: #555d59; font-size: 1rem; line-height: 1.65; }
.film-model--ultra > p:not(.film-model-statement) { color: rgba(244,244,241,.62); }
.film-model ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: auto 0 0; padding: 2.5rem 0 0; list-style: none; }
.film-model li { padding: .65rem .75rem; border: 1px solid rgba(13,15,14,.18); color: #5b625e; font: .62rem/1 "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.film-model--ultra li { color: rgba(244,244,241,.63); border-color: var(--hairline); background: rgba(244,244,241,.025); }
.film-compare-note { max-width: 56rem; margin: 1.4rem 0 clamp(5rem, 8vw, 8rem); color: #69706c; font: .7rem/1.65 "IBM Plex Mono", monospace; letter-spacing: .06em; }
.capability-list { border-top: 1px solid rgba(14,16,15,.22); }
.capability-row { display: grid; grid-template-columns: .12fr .7fr 1fr auto; align-items: center; gap: 2rem; min-height: 9rem; border-bottom: 1px solid rgba(14,16,15,.2); }
.capability-row > span { color: #6d7470; font: .65rem/1 "IBM Plex Mono", monospace; }
.capability-row h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; }
.capability-row p { max-width: 42rem; margin: 0; color: #59605c; font-size: 1rem; line-height: 1.55; }
.capability-row .capability-mark { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; color: #151717; border: 1px solid rgba(14,16,15,.25); border-radius: 50%; font: 1rem/1 "Space Grotesk", sans-serif; transition: transform .45s var(--ease-out), color .3s ease, background .3s ease; }
.capability-row:hover .capability-mark { color: var(--paper); background: #171919; transform: rotate(45deg); }

.archive { position: relative; padding: clamp(8rem, 13vw, 13rem) var(--page-pad); overflow: hidden; background: #070808; isolation: isolate; }
.archive::before { content: ""; position: absolute; z-index: -1; inset: 7% -18% auto 44%; height: 44rem; opacity: .055; background: url('assets/matter/smoke-volumetric.webp') center / cover no-repeat; filter: blur(14px) grayscale(1); transform: rotate(-9deg); mix-blend-mode: screen; pointer-events: none; }
.archive-head { display: grid; grid-template-columns: 1.1fr .5fr; gap: 4rem; align-items: end; margin-bottom: clamp(4rem, 7vw, 7rem); }
.archive-head h2 { margin: 0; font-size: clamp(3.2rem, 6.4vw, 7.6rem); font-weight: 430; line-height: .9; letter-spacing: -.065em; }
.archive-head h2 em { color: #b39fc1; font-style: normal; }
.archive-head > p { max-width: 31rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.motion-premieres { display: grid; gap: .85rem; }
.motion-card { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; color: var(--paper); border: 1px solid rgba(244,244,241,.14); background: #0b0d0d; text-align: left; isolation: isolate; }
.motion-card:focus-visible { outline: 2px solid #d9c6e7; outline-offset: 3px; }
.motion-card--feature, .motion-card--landscape { aspect-ratio: 16 / 9; }
.motion-card--feature { max-height: 86svh; }
.motion-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 1.4s var(--ease-out); }
.motion-card:hover img, .motion-card:focus-visible img { transform: scale(1.02); }
.motion-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,4,4,.42), transparent 34%), linear-gradient(0deg, rgba(2,3,3,.93), transparent 58%); }
.motion-meta { position: absolute; inset: 1.25rem 1.25rem auto; display: flex; justify-content: space-between; gap: 1rem; color: rgba(244,244,241,.7); font: .66rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .12em; }
.motion-copy { position: absolute; inset: auto 1.35rem 1.4rem; display: grid; gap: .55rem; }
.motion-copy small { color: rgba(244,244,241,.64); font: .66rem/1.35 "IBM Plex Mono", monospace; letter-spacing: .12em; }
.motion-copy strong { max-width: 18ch; font-size: clamp(2rem, 4vw, 5.2rem); font-weight: 460; line-height: .9; letter-spacing: -.055em; text-wrap: balance; }
.motion-copy em { display: flex; align-items: center; gap: .65rem; color: rgba(244,244,241,.72); font: normal .67rem/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.motion-copy b { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding-left: .12rem; border: 1px solid rgba(244,244,241,.4); border-radius: 50%; font-size: .52rem; font-weight: 400; }
.motion-card--feature .motion-copy { inset: auto clamp(1.35rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem); }
.motion-card--feature .motion-meta { inset: clamp(1.25rem, 2.4vw, 2.5rem) clamp(1.35rem, 3vw, 3rem) auto; }
.motion-card--feature .motion-copy strong { font-size: clamp(3.3rem, 7.5vw, 9rem); }
.motion-landscape-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: .85rem; }
.motion-landscape-grid .motion-copy strong { font-size: clamp(2.1rem, 3.4vw, 4.4rem); }
.archive-chapter { display: grid; grid-template-columns: 1.15fr .5fr; gap: 4rem; align-items: end; margin: clamp(7rem, 12vw, 12rem) 0 clamp(3rem, 6vw, 6rem); }
.archive-chapter > div > span { display: block; margin-bottom: 1.25rem; color: #a9b5b5; font: .66rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .15em; }
.archive-chapter h3 { margin: 0; font-size: clamp(2.8rem, 5vw, 6.2rem); font-weight: 430; line-height: .9; letter-spacing: -.06em; }
.archive-chapter h3 em { color: #b39fc1; font-style: normal; }
.archive-chapter > p { max-width: 31rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.motion-portrait-rail { --portrait-width: clamp(15.5rem, 20vw, 22rem); display: flex; align-items: stretch; gap: .8rem; overflow-x: auto; overscroll-behavior-inline: contain; padding: .2rem .2rem 1.5rem; scroll-snap-type: x proximity; scrollbar-color: rgba(244,244,241,.28) transparent; scrollbar-width: thin; }
.motion-portrait-rail:focus-visible { outline: 1px solid rgba(217,198,231,.75); outline-offset: .35rem; }
.motion-card--portrait { flex: 0 0 var(--portrait-width); aspect-ratio: 9 / 16; scroll-snap-align: start; }
.motion-card--portrait .motion-meta { inset: 1rem 1rem auto; font-size: .6rem; }
.motion-card--portrait .motion-copy { inset: auto 1rem 1.15rem; gap: .48rem; }
.motion-card--portrait .motion-copy small { font-size: .6rem; }
.motion-card--portrait .motion-copy strong { font-size: clamp(1.7rem, 2.5vw, 2.8rem); line-height: .94; }
.motion-series { position: relative; flex: 0 0 calc(var(--portrait-width) * 2 + .8rem); min-width: 0; scroll-snap-align: start; }
.motion-series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.motion-series-grid .motion-card { height: 100%; }
.motion-series-grid .motion-meta { top: 3.9rem; }
.motion-series-head { position: absolute; z-index: 4; left: 1rem; right: 1rem; top: 1rem; display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; color: rgba(244,244,241,.88); border: 1px solid rgba(244,244,241,.2); background: rgba(6,7,7,.55); font: .6rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; backdrop-filter: blur(12px); pointer-events: none; }
.motion-series-head small { color: rgba(244,244,241,.58); font: inherit; }
.archive-chapter--legacy { padding-top: clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--hairline); }
.archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(30rem, 66vh); gap: .8rem; }
.archive-card { position: relative; padding: 0; overflow: hidden; color: var(--paper); border: 0; background: #0c0e0e; text-align: left; isolation: isolate; }
.archive-card:focus-visible { outline: 2px solid #d9c6e7; outline-offset: 3px; }
.archive-card--wide { grid-column: span 2; }
.archive-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 1.3s var(--ease-out); }
.archive-card:hover img, .archive-card:focus-visible img { transform: scale(1.02); }
.archive-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(2,3,3,.9), transparent 62%); }
.archive-index { position: absolute; left: 1.2rem; top: 1.2rem; font: .67rem/1 "IBM Plex Mono", monospace; letter-spacing: .13em; }
.archive-copy { position: absolute; inset: auto 1.2rem 1.2rem; display: grid; gap: .45rem; }
.archive-copy small { color: rgba(244,244,241,.64); font: .65rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .11em; }
.archive-copy strong { font-size: clamp(1.5rem, 2.8vw, 3rem); font-weight: 470; letter-spacing: -.045em; }
.archive-copy em { color: rgba(244,244,241,.68); font: normal .65rem/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }

.proof-system { padding: clamp(8rem, 13vw, 13rem) var(--page-pad) 0; color: #111313; background: #e2e4e0; }
.proof-system .section-kicker { color: #626966; }
.proof-system-copy h2 { max-width: 75rem; margin: 0; font-size: clamp(3.2rem, 7vw, 8.2rem); font-weight: 430; line-height: .88; letter-spacing: -.07em; text-transform: uppercase; }
.proof-system-copy h2 em { color: #667a78; font-style: normal; }
.proof-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(5rem, 9vw, 9rem); border-top: 1px solid rgba(14,16,15,.2); }
.proof-steps article { min-height: 20rem; padding: 1.5rem 2rem 2rem 0; border-right: 1px solid rgba(14,16,15,.17); }
.proof-steps article + article { padding-left: 2rem; }
.proof-steps article:last-child { border-right: 0; }
.proof-steps span { color: #727a76; font: .62rem/1 "IBM Plex Mono", monospace; }
.proof-steps h3 { margin: 6rem 0 1rem; font-size: 1.65rem; font-weight: 530; letter-spacing: -.03em; text-transform: uppercase; }
.proof-steps p { margin: 0; color: #59615d; font-size: .95rem; line-height: 1.6; }
.client-showcase { position: relative; margin: clamp(5rem, 9vw, 9rem) calc(-1 * var(--page-pad)) 0; padding: clamp(3rem, 5vw, 5.5rem) 0 2rem; color: var(--paper); background: #070709; isolation: isolate; overflow: hidden; }
.client-showcase::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .15; background: url('assets/matter/water-glass.webp') 74% 47% / 72% auto no-repeat; filter: grayscale(1) contrast(1.25); mix-blend-mode: screen; mask-image: linear-gradient(90deg, transparent 20%, #000 72%, transparent); }
.client-showcase::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 74% 36%, rgba(165,136,190,.14), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.035), transparent 32%); pointer-events: none; }
.client-showcase__head { display: grid; grid-template-columns: .55fr 1.15fr .8fr; align-items: end; gap: clamp(2rem, 5vw, 6rem); padding: 0 var(--page-pad) clamp(3rem, 5vw, 5rem); }
.client-showcase .section-kicker { align-self: start; margin: .5rem 0 0; color: rgba(244,244,241,.48); }
.client-showcase__head h3 { margin: 0; font-size: clamp(2.2rem, 4.2vw, 5rem); font-weight: 430; line-height: .92; letter-spacing: -.06em; }
.client-showcase__head h3 em { color: #a994bb; font-style: normal; }
.client-showcase__head > p:last-child { max-width: 25rem; margin: 0 0 .35rem; color: rgba(244,244,241,.58); font-size: .92rem; line-height: 1.65; }
.client-marquee { position: relative; padding: .5rem 0; overflow: hidden; outline: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.client-marquee:focus-visible { box-shadow: inset 0 0 0 1px rgba(213,195,229,.65); }
.client-marquee__track { display: flex; width: max-content; will-change: transform; animation: client-flow 34s linear infinite; }
.client-marquee:hover .client-marquee__track, .client-marquee:focus-within .client-marquee__track { animation-play-state: paused; }
.client-list { display: flex; flex: none; align-items: center; gap: clamp(2.8rem, 5vw, 6.5rem); min-width: max-content; margin: 0; padding: 1.75rem clamp(1.4rem, 3.25vw, 4rem); list-style: none; }
.client-list li { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: clamp(8.5rem, 11vw, 12rem); height: 6.75rem; }
.client-list li::after { content: ""; position: absolute; top: 12%; right: calc(clamp(2.8rem, 5vw, 6.5rem) * -.5); width: 1px; height: 76%; background: linear-gradient(180deg, transparent, rgba(244,244,241,.16), transparent); }
.client-list img { width: auto; max-width: 100%; max-height: 4.3rem; object-fit: contain; opacity: .72; filter: drop-shadow(0 0 1.2rem rgba(179,151,201,.08)); transition: opacity .35s ease, transform .55s var(--ease-out), filter .35s ease; }
.client-list li[data-mark="betacon"] { width: clamp(14rem, 19vw, 21rem); }
.client-list li[data-mark="fidelity"], .client-list li[data-mark="mc"] { width: clamp(11.5rem, 15vw, 16rem); }
.client-list li[data-mark="rocha-riva"] img, .client-list li[data-mark="elo"] img { max-height: 5.2rem; }
.client-list li:hover img { opacity: 1; transform: scale(1.035); filter: drop-shadow(0 0 1.6rem rgba(193,164,216,.2)); }
.client-showcase__foot { margin: 1.5rem var(--page-pad) 0; color: rgba(244,244,241,.42); font: .58rem/1.6 "IBM Plex Mono", monospace; letter-spacing: .13em; text-align: right; }

.faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(3rem, 9vw, 10rem); padding: clamp(8rem, 13vw, 13rem) var(--page-pad); background: #0a0b0b; }
.faq-head { align-self: start; position: sticky; top: 8rem; }
.faq-head h2 { margin: 0; font-size: clamp(3rem, 5.7vw, 6.7rem); font-weight: 430; line-height: .9; letter-spacing: -.06em; }
.faq-list { border-top: 1px solid var(--hairline); }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary { min-height: 6.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-size: clamp(1.08rem, 1.55vw, 1.45rem); font-weight: 480; letter-spacing: -.025em; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex: 0 0 auto; color: #baa4c8; font-size: 1.5rem; transition: transform .35s var(--ease-out); }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 45rem; margin: -1rem 0 2rem; color: var(--muted); font-size: 1rem; line-height: 1.7; }

.application { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 9rem); padding: clamp(8rem, 13vw, 13rem) var(--page-pad); color: #111313; background: #eeede8; overflow: hidden; }
.application-atmosphere { position: absolute; inset: 0; opacity: .13; background: url('assets/matter/water-glass.webp') left center / 62% 100% no-repeat; filter: grayscale(1); mix-blend-mode: multiply; pointer-events: none; mask-image: linear-gradient(90deg, #000, transparent 68%); }
.application-copy, .application-form { position: relative; z-index: 1; }
.application .section-kicker { color: #68706c; }
.application-copy h2 { margin: 0; font-size: clamp(3.1rem, 6.1vw, 7rem); font-weight: 430; line-height: .89; letter-spacing: -.065em; }
.application-copy h2 em { color: #76677f; font-style: normal; }
.application-copy > p:not(.section-kicker) { max-width: 34rem; margin: 2rem 0; color: #545b57; font-size: 1.05rem; line-height: 1.65; }
.application-copy ul { display: grid; gap: .75rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.application-copy li { position: relative; padding-left: 1.5rem; color: #4d5450; font-size: .9rem; line-height: 1.5; }
.application-copy li::before { content: ""; position: absolute; left: 0; top: .62em; width: .48rem; height: 1px; background: #75627d; }
.application-form { display: grid; grid-template-columns: 1fr 1fr; align-self: start; column-gap: 1rem; row-gap: 1.5rem; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid rgba(15,17,16,.18); background: rgba(248,247,243,.74); backdrop-filter: blur(18px); }
.application-form label { display: grid; gap: .55rem; }
.application-form label span { color: #5e6561; font: .62rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.application-form input, .application-form select, .application-form textarea { width: 100%; min-height: 3.1rem; padding: .75rem 0; color: #101212; border: 0; border-bottom: 1px solid rgba(15,17,16,.25); border-radius: 0; outline: 0; background: transparent; font: 1rem/1.4 "Space Grotesk", sans-serif; transition: border-color .25s ease, box-shadow .25s ease; }
.application-form textarea { resize: vertical; }
.application-form input:focus, .application-form select:focus, .application-form textarea:focus { border-color: #765e80; box-shadow: 0 1px 0 #765e80; }
.application-form [aria-invalid="true"] { border-color: #a2324a; }
.form-wide { grid-column: 1 / -1; }
.form-submit { min-height: 4.15rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; color: var(--paper); border: 1px solid #111313; background: #111313; font: 600 .7rem/1 "Space Grotesk", sans-serif; letter-spacing: .13em; text-transform: uppercase; transition: color .3s ease, background .3s ease; }
.form-submit:hover, .form-submit:focus-visible { color: #111313; background: transparent; }
.form-submit:disabled { opacity: .55; }
.form-legal { margin: -.4rem 0 0; color: #737a76; font-size: .72rem; line-height: 1.5; }
.form-status { grid-column: 1 / -1; min-height: 0; color: #53615a; font-size: .86rem; line-height: 1.5; }
.form-status:not(:empty) { min-height: 2.5rem; padding: .75rem; border: 1px solid rgba(69,102,84,.25); background: rgba(104,145,121,.08); }
.form-status.is-error { color: #8d2d40; border-color: rgba(141,45,64,.25); background: rgba(141,45,64,.07); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 2rem; padding: 4rem var(--page-pad) 2rem; border-top: 1px solid var(--hairline); background: #060707; }
.footer-brand { display: inline-flex; align-items: center; gap: .75rem; width: max-content; font-size: .72rem; font-weight: 650; letter-spacing: .18em; text-decoration: none; }
.footer-brand img { width: 2.8rem; height: 2.8rem; }
.footer > p { color: var(--muted); font-size: .9rem; }
.footer > div { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.footer > div a { text-decoration: none; }
.footer small { grid-column: 1 / -1; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); color: rgba(244,244,241,.4); font: .58rem/1.5 "IBM Plex Mono", monospace; letter-spacing: .1em; }

.video-dialog { width: min(94vw, 88rem); max-width: none; max-height: 92svh; padding: 0; color: var(--paper); border: 1px solid rgba(244,244,241,.22); background: #050606; box-shadow: 0 2rem 8rem rgba(0,0,0,.7); }
.video-dialog::backdrop { background: rgba(2,3,3,.88); backdrop-filter: blur(12px); }
.video-dialog-bar { min-height: 3.8rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 1px solid var(--hairline); font: .62rem/1 "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.video-dialog-bar button { padding: .65rem; color: var(--paper); border: 0; background: transparent; font: inherit; text-transform: uppercase; }
.video-dialog video { display: block; width: 100%; max-height: calc(92svh - 3.8rem); aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.video-dialog.is-portrait { width: min(94vw, 31rem); }
.video-dialog.is-portrait video { aspect-ratio: 9 / 16; max-height: calc(92svh - 3.8rem); }

.ambient-system { position: fixed; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; isolation: isolate; }
.ambient-system i { position: absolute; display: block; inset: -12%; will-change: transform; }
.ambient-smoke { opacity: .045; background: url('assets/matter/smoke-volumetric.webp') 78% 44% / cover no-repeat; filter: blur(6px) grayscale(1); mix-blend-mode: screen; transform: translate3d(0, var(--ambient-smoke-y, 0), 0) scale(1.16); mask-image: linear-gradient(90deg, transparent 0 18%, #000 55%, transparent 100%); }
.ambient-glass { opacity: .026; background: url('assets/matter/water-glass.webp') right center / 68% 100% no-repeat; filter: grayscale(1) contrast(1.15); mix-blend-mode: luminosity; transform: translate3d(0, var(--ambient-glass-y, 0), 0) scale(1.06); mask-image: linear-gradient(90deg, transparent 38%, #000 78%, transparent 100%); }

.film-grain { position: fixed; inset: -30%; z-index: 50; pointer-events: none; opacity: .024; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: grain .22s steps(2) infinite; }

@keyframes cue { 0% { transform: translateX(-105%); } 55%, 100% { transform: translateX(205%); } }
@keyframes smoke-back { from { transform: scale(1.18) translate3d(4%, -2%, 0); opacity: .1; } to { transform: scale(1.25) translate3d(-2%, 2%, 0); opacity: .21; } }
@keyframes smoke-front { from { transform: scale(1.32) translate3d(12%, 4%, 0); opacity: .13; } to { transform: scale(1.38) translate3d(-7%, -1%, 0); opacity: .25; } }
@keyframes grain { 0% { transform: translate(0); } 25% { transform: translate(3%, -2%); } 50% { transform: translate(-2%, 3%); } 75% { transform: translate(1%, 2%); } 100% { transform: translate(-3%, -1%); } }
@keyframes client-flow { to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 860px) {
  .site-header { height: 5rem; }
  .site-nav > a:not(.nav-cta) { display: none; }
  .brand span { display: none; }
  .genesis { height: 370svh; }
  .genesis-frame img { object-position: 69% 50%; }
  .genesis-frame[data-genesis-frame="1"] img { object-position: 68% 50%; }
  .genesis-frame[data-genesis-frame="2"] img { object-position: 70% 50%; }
  .genesis-frame[data-genesis-frame="3"] img { object-position: 72% 50%; }
  .genesis-grade { background: linear-gradient(90deg, rgba(3,3,5,.86), rgba(3,3,5,.28)), linear-gradient(0deg, rgba(3,3,5,.92) 0, rgba(3,3,5,.15) 68%); }
  .genesis-content { margin-bottom: 7rem; }
  .genesis h1 { font-size: clamp(3rem, 14vw, 5.7rem); line-height: .88; }
  .eyebrow { max-width: 20rem; line-height: 1.6; }
  .hero-copy { max-width: 31rem; }
  .hero-status, .genesis-rail { display: none; }
  .proof-first { grid-template-columns: 1fr; gap: 3.5rem; min-height: auto; }
  .proof-media { aspect-ratio: 4 / 5; }
  .proof-media img { object-position: 55% center; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-principle, .studio-principle + .studio-principle { min-height: auto; padding: 1.5rem 0 3rem; border-right: 0; border-bottom: 1px solid rgba(12,14,14,.16); }
  .studio-principle h3 { margin-top: 3rem; }
  .worlds-head { grid-template-columns: 1fr; gap: 2rem; }
  .worlds-head > p:last-child { align-self: auto; }
  .world { min-height: 116svh; }
  .world-copy { grid-template-columns: 1fr; align-content: end; gap: 1.5rem; }
  .world-number { position: absolute; top: 6rem; left: var(--page-pad); padding: 0; }
  .world-copy h3 { font-size: clamp(3.1rem, 12vw, 6.4rem); }
  .world-action { justify-self: start; }
  .digital-head { grid-template-columns: 1fr; gap: 2rem; }
  .digital-head .section-kicker { grid-column: auto; }
  .experience { min-height: auto; grid-template-columns: 1fr; gap: 4rem; padding-block: 5rem; }
  .experience-copy, .experience-browser { position: relative; top: auto; }
  .experience-copy { max-width: 44rem; }
  .experience-browser { width: 100%; }
  .capabilities-head { grid-template-columns: 1fr; gap: 2rem; }
  .capabilities-head .section-kicker { padding-top: 0; }
  .capabilities-lead { max-width: 38rem; }
  .capability-row { grid-template-columns: 3rem 1fr auto; gap: 1rem; padding: 1.5rem 0; }
  .capability-row > span:first-child { grid-column: 1; grid-row: 1; }
  .capability-row h3 { grid-column: 2; grid-row: 1; }
  .capability-row p { grid-column: 2 / 4; grid-row: 2; }
  .capability-row .capability-mark { grid-column: 3; grid-row: 1; }
  .archive-head { grid-template-columns: 1fr; gap: 2rem; }
  .archive-chapter { grid-template-columns: 1fr; gap: 1.5rem; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(27rem, 60vh); }
  .proof-steps { grid-template-columns: repeat(2, 1fr); }
  .proof-steps article:nth-child(2) { border-right: 0; }
  .client-showcase__head { grid-template-columns: 1fr 1fr; }
  .client-showcase .section-kicker { grid-column: 1 / -1; }
  .faq { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .application { grid-template-columns: 1fr; }
  .application-atmosphere { background-size: 100% 55%; mask-image: linear-gradient(180deg, #000, transparent 58%); }
  .footer { grid-template-columns: 1fr auto; }
  .footer > p { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .nav-cta { padding: .7rem .8rem; font-size: .62rem; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .scroll-cue { bottom: 1.4rem; }
  .genesis-content { margin-bottom: 6.7rem; }
  .genesis { height: 340svh; }
  .genesis-frame img { object-position: 73% 50%; }
  .genesis-frame[data-genesis-frame="1"] img { object-position: 72% 50%; }
  .genesis-frame[data-genesis-frame="2"] img { object-position: 74% 50%; }
  .genesis-frame[data-genesis-frame="3"] img { object-position: 76% 50%; }
  .studio-signature { gap: .6rem; font-size: .52rem; }
  .world-copy { padding-bottom: 3rem; }
  .world-copy > div:nth-child(2) > span { font-size: .62rem; line-height: 1.55; }
  .digital-work { padding-inline: 1rem; }
  .experience-copy h3 { font-size: clamp(3.2rem, 14vw, 5rem); }
  .experience-copy ul { grid-template-columns: 1fr; }
  .experience-screen { aspect-ratio: 4 / 5; }
  .screen-main { object-position: 58% center; }
  .screen-brand { top: 7%; font-size: 18vw; }
  .screen-inset--landscape { right: 5%; bottom: 7%; width: 68%; }
  .screen-inset--material { right: 6%; top: 25%; width: 29%; }
  .film-compare { grid-template-columns: 1fr; }
  .film-model { min-height: 34rem; }
  .film-model h3 { margin-top: 5rem; }
  .motion-card--feature { aspect-ratio: 4 / 3; }
  .motion-landscape-grid { grid-template-columns: 1fr; }
  .motion-card--landscape { aspect-ratio: 16 / 10; }
  .motion-card--feature .motion-copy strong { font-size: clamp(2.7rem, 13vw, 5rem); }
  .motion-meta { inset: .9rem .9rem auto; font-size: .58rem; }
  .motion-copy { inset: auto .95rem 1rem; }
  .motion-copy small { font-size: .6rem; }
  .motion-portrait-rail { margin-inline: calc(-1 * var(--page-pad)); padding-inline: var(--page-pad); scrollbar-width: none; }
  .motion-series-grid .motion-meta { top: 3.9rem; }
  .archive-grid { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--page-pad)); padding-inline: var(--page-pad); scrollbar-width: none; }
  .archive-card, .archive-card--wide { flex: 0 0 82vw; height: 70svh; scroll-snap-align: center; }
  .proof-steps { grid-template-columns: 1fr; }
  .proof-steps article, .proof-steps article + article { min-height: auto; padding: 1.5rem 0 2.5rem; border-right: 0; border-bottom: 1px solid rgba(14,16,15,.17); }
  .proof-steps h3 { margin-top: 3rem; }
  .site-nav { gap: .8rem; }
  .language-switch { gap: .3rem; }
  .client-showcase__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .client-showcase__head > p:last-child { max-width: 31rem; }
  .client-list { gap: 2.8rem; }
  .client-list li { width: 8.5rem; height: 5.5rem; }
  .client-list li[data-mark="betacon"] { width: 14rem; }
  .client-list li[data-mark="fidelity"], .client-list li[data-mark="mc"] { width: 11.5rem; }
  .client-showcase__foot { text-align: left; }
  .application-form { grid-template-columns: 1fr; }
  .application-form label, .form-wide, .form-status { grid-column: 1; }
  .footer { grid-template-columns: 1fr; }
  .footer > div { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .client-marquee { overflow-x: auto; mask-image: none; scrollbar-width: thin; }
  .client-marquee__track { animation: none !important; transform: none !important; }
  .client-list[aria-hidden="true"] { display: none; }
  [data-reveal], [data-reveal-observer], .proof-media, .proof-copy { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .genesis { height: 100svh; }
  .genesis-sticky { position: relative; }
  .genesis-frame { display: none; opacity: 0 !important; clip-path: none !important; transform: none !important; }
  .genesis-frame:first-child { display: block; opacity: 1 !important; }
  .genesis-frame img { transform: none !important; }
  .genesis-smoke--wipe, .genesis-smoke--front { display: none; }
  .genesis-rail { display: none; }
  .ambient-system { opacity: .45; }
}

@media (forced-colors: active) {
  .button, .nav-cta, .text-link { border: 1px solid ButtonText; }
}

/* GMX Matter Engine v4 — Primeira Matéria */
:root {
  --matter-field-opacity: .16;
  --matter-velocity: 0;
  --matter-pointer-x: .5;
  --matter-pointer-y: .5;
  --matter-transition: 0;
}

:focus-visible { outline: 2px solid #d9c8e8; outline-offset: 4px; }
.brand, .language-switch, .language-switch a, .nav-cta, .intro-replay { min-height: 2.75rem; }
.brand, .language-switch a, .intro-replay { min-width: 2.75rem; }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; padding-inline: .3rem; }
.nav-cta { display: inline-flex; align-items: center; }

.matter-field {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  opacity: var(--matter-field-opacity);
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .9s ease;
}
.matter-field__canvas, .matter-field__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.matter-field__canvas { display: block; }
.matter-field__fallback {
  display: block;
  inset: -12%;
  opacity: .55;
  background: url('assets/matter/smoke-volumetric.webp') 66% 48% / cover no-repeat;
  filter: blur(5px) saturate(.55) contrast(1.12);
  transform: scale(1.14);
  animation: matter-fallback-drift 18s ease-in-out infinite alternate;
}
.has-webgl .matter-field__fallback { opacity: 0; }
.intro-active .matter-field { z-index: 89; opacity: .92; }
.no-js .matter-field, .no-js .matter-intro, .no-js .intro-replay { display: none; }

html.intro-active, html.intro-active body { overflow: hidden; }
.matter-intro {
  --intro-duration: 2900ms;
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  color: #f4f4f1;
  background:
    radial-gradient(circle at 72% 18%, rgba(125, 103, 151, .16), transparent 30%),
    linear-gradient(105deg, rgba(2, 3, 5, .93) 0%, rgba(3, 4, 7, .64) 48%, rgba(2, 3, 5, .86) 100%);
  opacity: 1;
  transform: translateZ(0);
  transition: opacity .58s ease, visibility 0s .6s;
}
.matter-intro[hidden] { display: none; }
.matter-intro__world, .matter-intro__world::after, .matter-intro__aperture, .matter-intro__light { position: absolute; inset: 0; }
.matter-intro__world { overflow: hidden; }
.matter-intro__world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% 48%;
  opacity: .58;
  filter: saturate(.58) brightness(.36) contrast(1.2);
  transform: scale(1.1);
}
.matter-intro__world::after {
  content: "";
  background: linear-gradient(90deg, rgba(2,3,5,.94), rgba(2,3,5,.18) 58%, rgba(2,3,5,.5)), linear-gradient(0deg, rgba(2,3,5,.86), transparent 44%);
}
.matter-intro__aperture {
  opacity: 0;
  background: url('assets/matter/smoke-volumetric.webp') center / cover no-repeat;
  filter: blur(2px) saturate(.32) contrast(1.28);
  mix-blend-mode: screen;
  transform: scale(1.28) translate3d(9%, 3%, 0);
}
.matter-intro__light {
  opacity: 0;
  background: linear-gradient(157deg, transparent 0 33%, rgba(230,224,245,.2) 40%, rgba(167,137,194,.07) 47%, transparent 56%);
  mix-blend-mode: screen;
  transform: translate3d(14%, -9%, 0);
}
.matter-intro__interface { position: absolute; inset: 0; z-index: 2; padding: clamp(1.35rem, 3.8vw, 4.5rem); }
.matter-intro__system {
  position: absolute;
  inset: clamp(1.4rem, 3vw, 3.2rem) var(--page-pad) auto;
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: rgba(244,244,241,.62);
  font: 500 .68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 0;
}
.matter-intro__mark {
  position: absolute;
  left: 50%;
  top: 47%;
  width: clamp(5.5rem, 9vw, 9rem);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  filter: drop-shadow(0 0 2.4rem rgba(206,187,222,.24));
}
.matter-intro__mark img { width: 100%; height: 100%; object-fit: contain; }
.matter-intro__statement {
  position: absolute;
  left: var(--page-pad);
  bottom: clamp(5.8rem, 10vh, 8rem);
  margin: 0;
  font-size: clamp(2.5rem, 6.4vw, 7.4rem);
  font-weight: 430;
  line-height: .86;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.matter-intro__statement span { display: block; overflow: hidden; opacity: 0; transform: translateY(110%); }
.matter-intro__statement span:last-child { color: #bca8cb; }
.matter-intro__phase {
  position: absolute;
  right: var(--page-pad);
  bottom: clamp(2rem, 4vh, 3.5rem);
  display: grid;
  grid-template-columns: minmax(5rem, 9rem) auto;
  align-items: center;
  gap: 1rem;
  color: rgba(244,244,241,.58);
  font: 500 .65rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
}
.matter-intro__phase i { height: 1px; overflow: hidden; background: rgba(244,244,241,.2); }
.matter-intro__phase i::after { content: ""; display: block; width: 100%; height: 100%; background: var(--accent-gradient); transform: scaleX(0); transform-origin: left; }
.matter-intro__skip {
  position: absolute;
  left: var(--page-pad);
  bottom: clamp(1.15rem, 2.4vh, 2rem);
  min-width: 11rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0;
  color: rgba(244,244,241,.64);
  border: 0;
  border-bottom: 1px solid rgba(244,244,241,.28);
  background: transparent;
  font: 500 .66rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(.65rem);
  transition: color .3s ease, border-color .3s ease;
}
.matter-intro__skip:hover, .matter-intro__skip:focus-visible { color: #fff; border-color: rgba(244,244,241,.75); }

.intro-playing .matter-intro__system { animation: intro-system var(--intro-duration) ease both; }
.intro-playing .matter-intro__world img { animation: intro-world var(--intro-duration) cubic-bezier(.2,.72,.24,1) both; }
.intro-playing .matter-intro__aperture { animation: intro-smoke var(--intro-duration) cubic-bezier(.2,.72,.24,1) both; }
.intro-playing .matter-intro__light { animation: intro-light var(--intro-duration) ease both; }
.intro-playing .matter-intro__mark { animation: intro-mark var(--intro-duration) cubic-bezier(.16,1,.3,1) both; }
.intro-playing .matter-intro__statement span:first-child { animation: intro-line var(--intro-duration) cubic-bezier(.16,1,.3,1) both; }
.intro-playing .matter-intro__statement span:last-child { animation: intro-line-two var(--intro-duration) cubic-bezier(.16,1,.3,1) both; }
.intro-playing .matter-intro__phase { animation: intro-phase var(--intro-duration) ease both; }
.intro-playing .matter-intro__phase i::after { animation: intro-progress var(--intro-duration) linear both; }
.intro-playing .matter-intro__skip { animation: intro-skip var(--intro-duration) ease both; }
.intro-exiting .matter-intro { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-active .site-header { opacity: 0; transform: translateY(-1rem); pointer-events: none; }
.site-header { opacity: 1; transform: none; transition: height .5s var(--ease-out), background .5s ease, border-color .5s ease, opacity .7s ease, transform .8s var(--ease-out); }

.intro-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0 .25rem;
  color: rgba(244,244,241,.58);
  border: 0;
  background: transparent;
  font: 500 .61rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  transition: color .25s ease;
}
.intro-replay:hover, .intro-replay:focus-visible { color: #fff; }
.intro-replay i { color: #bca7ca; font-size: .9rem; font-style: normal; }

.genesis-frame::after {
  content: "";
  position: absolute;
  inset: -5%;
  opacity: calc(var(--refraction, 0) * .34);
  background: url('assets/matter/water-glass.webp') 78% center / 72% 120% no-repeat;
  filter: contrast(1.25) saturate(.5);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--refraction, 0) * -3%), 0, 0) scale(1.08);
  pointer-events: none;
}
.genesis-frame img[data-hero-src] { opacity: 0; }
.genesis-frame img[data-hero-src].is-hydrated { opacity: 1; }
.genesis-content, .genesis-rail, .hero-status { will-change: opacity, transform; }
.genesis-rail li { font-size: .61rem; }
.hero-status { font-size: .68rem; }
.has-webgl .ambient-system { opacity: .35; }

@keyframes matter-fallback-drift {
  from { transform: translate3d(4%, -2%, 0) scale(1.14); opacity: .42; }
  to { transform: translate3d(-4%, 3%, 0) scale(1.22); opacity: .7; }
}
@keyframes intro-system { 0%, 7% { opacity: 0; } 14%, 88% { opacity: 1; } 100% { opacity: .25; } }
@keyframes intro-world { 0% { opacity: .06; filter: saturate(.25) brightness(.12) contrast(1.4); transform: scale(1.14); } 42% { opacity: .34; } 74%, 100% { opacity: .67; filter: saturate(.64) brightness(.4) contrast(1.16); transform: scale(1.035); } }
@keyframes intro-smoke { 0% { opacity: .05; transform: scale(1.45) translate3d(20%, 7%, 0); } 28% { opacity: .64; } 68% { opacity: .25; transform: scale(1.23) translate3d(-5%, -2%, 0); } 100% { opacity: .1; transform: scale(1.18) translate3d(-10%, 0, 0); } }
@keyframes intro-light { 0%, 12% { opacity: 0; transform: translate3d(18%, -13%, 0); } 42% { opacity: .78; } 100% { opacity: .23; transform: translate3d(-8%, 8%, 0); } }
@keyframes intro-mark { 0%, 22% { opacity: 0; transform: translate(-50%, -50%) scale(.76); filter: blur(12px) drop-shadow(0 0 2rem rgba(206,187,222,0)); } 48%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) drop-shadow(0 0 2.4rem rgba(206,187,222,.26)); } 100% { opacity: .24; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes intro-line { 0%, 48% { opacity: 0; transform: translateY(110%); } 67%, 100% { opacity: 1; transform: none; } }
@keyframes intro-line-two { 0%, 57% { opacity: 0; transform: translateY(110%); } 76%, 100% { opacity: 1; transform: none; } }
@keyframes intro-phase { 0%, 13% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-skip { 0%, 19% { opacity: 0; transform: translateY(.65rem); } 30%, 100% { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .intro-replay span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .intro-replay { width: 2.75rem; padding: 0; }
  .matter-intro__statement { bottom: 7rem; font-size: clamp(2.5rem, 10vw, 5rem); }
  .matter-intro__mark { top: 42%; width: clamp(5rem, 16vw, 7rem); }
  .matter-intro__phase { right: var(--page-pad); left: var(--page-pad); bottom: 4.3rem; grid-template-columns: 1fr auto; }
  .matter-intro__skip { bottom: .85rem; }
}

@media (max-width: 560px) {
  .matter-intro__system { font-size: .6rem; }
  .matter-intro__system span:last-child { display: none; }
  .matter-intro__world img { object-position: 70% 50%; }
  .matter-field__canvas { display: none; }
  .matter-field__fallback { opacity: .5; animation-duration: 12s; }
  .site-nav { gap: .35rem; }
  .language-switch { min-width: 2.75rem; justify-content: center; }
  .nav-cta { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .matter-intro { display: none !important; }
  .matter-field__canvas { display: none !important; }
  .matter-field__fallback { animation: none !important; opacity: .22; transform: scale(1.08); }
}

/* Directed continuity, cinematic Engine and live film surface */
.matter-field::after {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: calc(var(--matter-transition) * .28);
  background: url('assets/matter/water-glass.webp') 78% 48% / 72% 118% no-repeat;
  filter: saturate(.45) contrast(1.3) blur(1px);
  mix-blend-mode: screen;
  transform: translate3d(calc((var(--matter-pointer-x) - .5) * 2.5%), calc((var(--matter-pointer-y) - .5) * 1.5%), 0) scale(1.08);
  transition: opacity .12s linear;
}

.no-js [data-reveal], .no-js [data-reveal-observer], .no-js .proof-media, .no-js .proof-copy {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.intro-active [data-reveal] { opacity: 0 !important; transform: translateY(1.2rem) !important; }

.site-nav { font-size: .72rem; }
.language-switch, .section-kicker, .eyebrow { font-size: .7rem; }
.scroll-cue { min-height: 2.75rem; font-size: .68rem; }
.world-action, .experience-link { min-height: 3.25rem; }
.video-dialog-bar button { min-width: 2.75rem; min-height: 2.75rem; }
.video-dialog-bar { min-height: 4.1rem; font-size: .68rem; }

.world { --world-progress: .5; }
.world-media img {
  transform: translate3d(0, calc((var(--world-progress) - .5) * -2.5%), 0) scale(1.045);
  transition: filter .8s ease;
}
.world:not(.is-current) .world-media img { transform: translate3d(0, calc((var(--world-progress) - .5) * -2.5%), 0) scale(1.055); }
.world.is-current .world-media img { transform: translate3d(0, calc((var(--world-progress) - .5) * -2.5%), 0) scale(1.035); }
.world-material { transform: translate3d(calc((var(--world-progress) - .5) * 2%), calc((var(--world-progress) - .5) * -1%), 0) scale(1.04); }

.experience-code, .experience-name, .experience-copy li, .browser-bar b, .screen-line { font-size: .68rem; }
.experience-link::before {
  inset: 100% 0 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(115deg, var(--experience-accent), color-mix(in srgb, var(--experience-accent) 62%, #eef4f2));
  transform: none;
  transition: inset .62s cubic-bezier(.16,1,.3,1);
}
.experience-link:hover::before, .experience-link:focus-visible::before { inset: 0; transform: none; }
.browser-bar i { width: .42rem; height: 1px; border-radius: 0; }
.capability-row .capability-mark { border-radius: 0; }
.motion-copy b { width: 2rem; height: 2rem; border-radius: 0; }

.motion-card img { transition: opacity .45s ease, transform 1.4s var(--ease-out), filter .8s ease; }
.motion-preview {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .45s ease, transform 1.2s var(--ease-out);
  pointer-events: none;
}
.motion-card.is-previewing .motion-preview { opacity: 1; transform: scale(1); }
.motion-card.is-previewing img { opacity: 0; }
.motion-card.is-previewing .motion-shade { background: linear-gradient(180deg, rgba(3,4,4,.34), transparent 38%), linear-gradient(0deg, rgba(2,3,3,.88), transparent 54%); }

.client-showcase__head { position: relative; }
.client-marquee-toggle {
  position: absolute;
  z-index: 3;
  right: var(--page-pad);
  top: clamp(1.2rem, 2.4vw, 2.2rem);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .85rem;
  color: rgba(244,244,241,.68);
  border: 1px solid rgba(244,244,241,.2);
  background: rgba(6,7,9,.36);
  font: 500 .66rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.client-marquee-toggle:hover, .client-marquee-toggle:focus-visible { color: #fff; border-color: rgba(244,244,241,.55); }
.client-marquee-toggle i { color: #bba5ca; font-style: normal; }
.client-showcase.is-marquee-paused .client-marquee__track { animation-play-state: paused !important; }
.client-list img { opacity: .82; }

/* Readable microtype without losing the editorial density. */
.brand, .site-nav, .button, .text-link,
.world-action, .experience-link,
.proof-label, .application-form label span,
.motion-meta, .motion-copy small, .motion-copy em,
.motion-card--portrait .motion-meta,
.motion-card--portrait .motion-copy small,
.motion-series-head, .archive-chapter > div > span,
.client-marquee-toggle, .footer-brand, .footer > div {
  font-size: .75rem;
}
.language-switch, .section-kicker, .eyebrow, .scroll-cue, .video-dialog-bar { font-size: .75rem; }

@media (max-width: 900px) {
  .client-marquee-toggle { position: relative; right: auto; top: auto; margin: 0 var(--page-pad) 1rem; }
}

@media (max-width: 560px) {
  .site-nav, .language-switch, .nav-cta { font-size: .75rem; }
  .film-grain { animation: none; opacity: .014; }
  .ambient-system { opacity: .35; }
  .motion-preview { display: none; }
  .client-marquee-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .client-marquee-toggle { width: 2.75rem; justify-content: center; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {.matter-field::after, .motion-preview { display: none !important; }
  .world { min-height: 100svh; }
  .world-media, .world-copy { position: relative; top: auto; height: 100svh; }
  .experience { min-height: auto; }
  .experience-copy, .experience-browser { position: relative; top: auto; }
  .client-marquee-toggle { display: none; }
}

.matter-intro { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-pending .matter-intro, .intro-active:not(.intro-exiting) .matter-intro { opacity: 1; visibility: visible; pointer-events: auto; }
.intro-exiting .matter-intro { opacity: 0; visibility: hidden; pointer-events: none; }
.experience-link::before { background: var(--experience-accent); background: linear-gradient(115deg, var(--experience-accent), color-mix(in srgb, var(--experience-accent) 62%, #eef4f2)); }

/* Cinema / 05 — one volume, a large mark, then the world behind it. */
.matter-field { opacity: var(--matter-field-opacity); mix-blend-mode: screen; transition: none; }
.has-webgl .matter-field { opacity: 1; mix-blend-mode: normal; }
.has-webgl .matter-field__fallback { display: none; animation: none; }
.intro-active .matter-field { z-index: 89; opacity: 1; }
.matter-intro { background: #030205; transition: none; }
.has-cinema-volume:not(.intro-dom-fallback):not(.intro-waiting) .matter-intro { background: transparent; }
.has-cinema-volume:not(.intro-dom-fallback):not(.intro-waiting) .matter-intro__world,
.has-cinema-volume:not(.intro-dom-fallback):not(.intro-waiting) .matter-intro__mark { display: none; }
.matter-intro__statement, .matter-intro__system,
.matter-intro__aperture, .matter-intro__light, .matter-intro__phase i { display: none; }
.matter-intro__world::after { background: radial-gradient(ellipse, transparent 30%, #030205 80%); }
.matter-intro__smoke { position: absolute; inset: -35%; background: url('assets/matter/smoke-volumetric.webp') center / cover; mix-blend-mode: screen; filter: sepia(.2) saturate(2.5) hue-rotate(220deg); }
.matter-intro__smoke--front { opacity: .65; }
.intro-playing .matter-intro__smoke--back { animation: opening-cloud var(--intro-duration) ease-in-out both; }
.intro-playing .matter-intro__smoke--front { animation: opening-cloud-front var(--intro-duration) ease-in-out both; }
.matter-intro__mark { top: 48%; width: min(88vw, 88svh); filter: drop-shadow(0 0 3rem #9462ba66); }
.intro-playing .matter-intro__mark { animation: opening-mark var(--intro-duration) ease both; }
.matter-intro__phase { inset: auto 1rem 13svh; display: block; text-align: center; font-size: .72rem; letter-spacing: .42em; color: #c8b4de; }
.intro-playing .matter-intro__phase { animation: none; opacity: clamp(0, calc(var(--intro-progress, 0) * 12), 1); }
.matter-intro[data-phase="reveal"] .matter-intro__phase { opacity: 0; transition: opacity .35s ease; }
.intro-playing .matter-intro__skip { animation: none; opacity: .8; transform: none; }
.intro-handoff .site-header { opacity: 1; transform: none; }
.intro-handoff [data-reveal] { opacity: 1 !important; transform: none !important; }
.intro-complete [data-reveal] { transition-duration: 1.1s !important; }
.intro-handoff [data-reveal]:nth-child(1) { transition-delay: 0s; }
.intro-handoff [data-reveal]:nth-child(2) { transition-delay: .14s; }
.intro-handoff [data-reveal]:nth-child(3) { transition-delay: .28s; }
.intro-handoff [data-reveal]:nth-child(4) { transition-delay: .4s; }
.genesis-grade { background: linear-gradient(90deg, #030305d9 0%, #03030585 35%, #0303050a 70%), linear-gradient(0deg, #030305c9, transparent 52%); }
.genesis-frame img { object-position: 64% center; }
.genesis-content { width: min(68rem, calc(100% - 2 * var(--page-pad))); }
.genesis h1 { font-size: clamp(3.2rem, 8.6vw, 9.8rem); }
.genesis-chapter { position: absolute; z-index: 4; left: var(--page-pad); bottom: 17svh; opacity: 0; pointer-events: none; }
.genesis-chapter > span { display: block; font-size: clamp(4rem, 9vw, 10rem); font-weight: 430; letter-spacing: -.07em; line-height: .9; text-transform: uppercase; }
.genesis-chapter small { display: block; margin-top: 1.5rem; color: #c8b6d8; font: .72rem/1.4 "IBM Plex Mono", monospace; letter-spacing: .2em; }

/* A material interval lets one project leave before the next arrives. */
.cinema-passage { --passage-progress: .5; position: relative; height: 43svh; min-height: 14rem; display: grid; place-items: center; overflow: hidden; background: #060608; isolation: isolate; }
.cinema-passage i { position: absolute; z-index: -1; inset: -70% -15%; background: url('assets/matter/smoke-volumetric.webp') center / cover no-repeat; mix-blend-mode: screen; opacity: .56; transform: translate3d(calc(16% - var(--passage-progress) * 32%), calc(12% - var(--passage-progress) * 24%), 0) rotate(-14deg) scale(1.1); }
.cinema-passage i:nth-child(2) { inset: -35% -10%; opacity: .22; background-image: url('assets/matter/water-glass.webp'); transform: translate3d(calc(-10% + var(--passage-progress) * 20%), 0, 0) scale(1.15); }
.cinema-passage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#070808, transparent 40%, transparent 60%, #070808); }
.cinema-passage span { color: #e0d6e8; font: .7rem/1.5 "IBM Plex Mono", monospace; letter-spacing: .24em; text-align: center; padding: 1.5rem; }
.world { min-height: 128svh; }
.world-media { mask-image: linear-gradient(transparent, #000 7%, #000 89%, transparent); }
.world.is-current .world-media img, .world:not(.is-current) .world-media img { transform: translate3d(0, calc((var(--world-progress) - .5) * -12%), 0) scale(1.11); }
.world-copy { gap: 2rem; grid-template-columns: minmax(1rem, .12fr) minmax(0, 1fr) auto; }
.world-copy h3 { font-size: clamp(3.2rem, 6.6vw, 8rem); }
.world-material { opacity: .1; }

/* Real scene backgrounds for the two distinct film treatments. */
.film-compare { display: flex; flex-direction: column; gap: 0; margin-left: calc(-1 * var(--page-pad)); margin-right: calc(-1 * var(--page-pad)); }
.film-model { --passage-progress: .5; min-height: 100svh; padding: clamp(6rem, 7vw, 7rem) var(--page-pad) clamp(2rem, 5vw, 5rem); color: #f2f1ed; border: 0; background: #050509; box-shadow: none; }
.film-model-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.film-model-media img { width: 100%; height: 100%; object-fit: cover; object-position: 74% center; transform: translate3d(0, calc((var(--passage-progress) - .5) * -6%), 0) scale(1.09); }
.film-model.is-in-view .film-model-media img { animation: scene-breath 18s ease-in-out infinite alternate; }
@keyframes scene-breath { from { transform: translate3d(0, calc((var(--passage-progress) - .5) * -6%), 0) scale(1.09); } to { transform: translate3d(calc((var(--matter-pointer-x) - .5) * -1%), calc((var(--passage-progress) - .5) * -6% - 1%), 0) scale(1.045); } }
.film-model::before, .film-model--ultra::before { inset: 0; height: auto; opacity: 1; transform: none; filter: none; mix-blend-mode: normal; background: linear-gradient(90deg, #040408e8 0%, #040408a3 36%, #04040815 70%), linear-gradient(0deg, #040408d9, transparent 40%, transparent 90%, #04040888); z-index: -2; }
.film-model::after, .film-model--ultra::after { content: ""; position: absolute; inset: -20%; z-index: -1; opacity: .11; background: url('assets/matter/smoke-volumetric.webp') center / cover; mix-blend-mode: screen; transform: translate3d(calc((var(--passage-progress) - .5) * 14%), 0, 0); }
.film-model--ultra { border-top: 1px solid #b9a2ca26; }
.film-model h3 { max-width: 46rem; margin: clamp(4rem, 14vh, 10rem) 0 1.4rem; font-size: clamp(4rem, 8.2vw, 10rem); }
.film-model--ultra h3 { color: #d6c4e9; font-size: clamp(3.5rem, 7.4vw, 8.8rem); }
.film-model-statement { max-width: 33rem; font-size: clamp(1.2rem, 1.7vw, 1.8rem); }
.film-model > p:not(.film-model-statement), .film-model--ultra > p:not(.film-model-statement) { max-width: 31rem; color: #d3cadb; }
.film-model-meta, .film-model--ultra .film-model-meta { color: #c7bbd2; border-color: #ffffff33; font-size: .7rem; }
.film-model ul { max-width: 42rem; padding-top: 3rem; }
.film-model li, .film-model--ultra li { color: #d9d1e3; border-color: #ffffff33; background: #09070e66; font-size: .67rem; }
.film-compare-note { padding: 1rem 0; }
.experience { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); }
.experience-copy, .experience-browser { min-width: 0; }
.experience-copy h3 { font-size: clamp(3rem, 4.9vw, 6.4rem); overflow-wrap: normal; }

@keyframes opening-cloud { 0% { opacity: .25; transform: perspective(900px) rotateY(-30deg) rotate(-24deg) scale(1.3); } 25% { opacity: .92; } 47% { opacity: .3; transform: perspective(900px) rotateY(14deg) rotate(12deg) scale(.85); } 65% { opacity: .75; } 100% { opacity: 0; transform: perspective(900px) rotateY(35deg) rotate(34deg) scale(1.7); } }
@keyframes opening-cloud-front { 0% { opacity: .4; transform: rotate(26deg) scale(1.45); } 40% { opacity: .28; } 66% { opacity: .85; transform: rotate(-12deg) scale(1.1); } 100% { opacity: 0; transform: rotate(-34deg) scale(2); } }
@keyframes opening-mark { 0%, 17% { opacity: 0; filter: blur(24px); transform: translate(-50%, -50%) scale(.86); } 39%, 56% { opacity: 1; filter: blur(0) drop-shadow(0 0 3rem #9060b866); transform: translate(-50%, -50%) scale(1); } 82%, 100% { opacity: 0; filter: blur(22px); transform: translate(-50%, -50%) scale(1.18); } }
@media (max-width: 1100px) {
  .experience { grid-template-columns: minmax(0, 1fr); }
  .experience-copy, .experience-browser { position: relative; top: auto; }
  .experience-copy h3 { font-size: clamp(3rem, 7.5vw, 6rem); }
  .world-copy { grid-template-columns: minmax(0, 1fr) auto; }
  .world-number { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .world-copy { grid-template-columns: 1fr; align-content: end; gap: 1.8rem; }
  .world-number { display: none; }
  .world-action { justify-self: start; }
  .world-copy h3 { font-size: clamp(2.9rem, 10vw, 4.5rem); }
  .film-model { min-height: 58rem; padding-top: 2rem; padding-bottom: 2.5rem; }
  .film-model h3, .film-model--ultra h3 { font-size: clamp(3.3rem, 12vw, 5rem); margin-top: 19rem; }
  .film-model-media img { object-position: 76% top; }
  .film-model--ultra .film-model-media img { object-position: 82% top; }
  .film-model::before, .film-model--ultra::before { background: linear-gradient(0deg, #040408 0%, #040408ee 33%, #04040855 60%, #04040811 80%, #04040877); }
  .film-model-meta { font-size: .61rem; }
  .film-model li { line-height: 1.35; }
  .cinema-passage { height: 30svh; min-height: 12rem; }
  .genesis-content { margin-bottom: 9rem; }
  .genesis-grade { background: linear-gradient(0deg, #030305ed 0%, #0303058c 45%, #03030533 100%); }
  .hero-copy { color: #ded9e4; }
  .genesis-chapter > span { font-size: clamp(3.4rem, 13vw, 5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-replay { display: none; }
  .genesis { height: 100svh !important; }
  .film-model-media img, .world-media img, .cinema-passage i { transform: none !important; }
  .cinema-passage { height: 12rem; }
}.no-js .genesis { height: auto; }