/* Motion patterns: travelling type, masked words and directional sweeps. */
:root { --motion-ease:cubic-bezier(.625,.05,0,1); }
:focus-visible { outline:2px solid var(--red); outline-offset:6px; }
.hero-film { transform:translateY(var(--hero-pan,0px)) scale(1.045); animation:none; filter:contrast(1.02) brightness(.78); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#050505d8 0%,#05050558 46%,#0505050c 78%),linear-gradient(0deg,#050505d3 0%,transparent 50%); }
.hero-shade { background:linear-gradient(90deg,#050505e3,#05050573 58%,transparent),linear-gradient(0deg,#070707e3 0,transparent 48%); }
.soundline { overflow:visible; box-shadow:none; background:#ffffff28; display:flex; justify-content:space-between; padding-top:9px; color:#ffffff73; font:400 .62rem 'DM Mono',monospace; letter-spacing:.08em; }
.soundline::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--red),#fff,transparent); transform:translateX(-110%); animation:signal-scan 3.8s var(--motion-ease) infinite; }
@keyframes signal-scan { 0%,35%{transform:translateX(-110%)} 78%,100%{transform:translateX(110%)} }
h1 { font-size:clamp(3.25rem,8.8vw,9.5rem); line-height:.98; margin-bottom:5vh; letter-spacing:-.06em; }
.nav .brand { font:600 1.4rem Inter,Arial,sans-serif; letter-spacing:-.06em; gap:12px; }
.brand .dot { width:7px; height:7px; box-shadow:none; }
.hero .eyebrow { top:17%; }
.hero { padding-top:180px; }
.contact-intro { font-size:clamp(1.1rem,1.7vw,1.7rem); line-height:1.5; margin-top:40px; }
.contact-email { display:inline-block; align-self:flex-start; font-size:clamp(1.2rem,2vw,2rem); border-bottom:2px solid var(--red); padding:10px 0; margin-bottom:65px; overflow-wrap:anywhere; }
.hero-line { display:block; transform-origin:left bottom; }
.hero-center { display:block; }
.hero-bottom { gap:20px; }
.motion-toggle { margin-left:auto; padding:12px 0; background:none; border:0; font:400 .75rem 'DM Mono',monospace; text-transform:uppercase; cursor:pointer; }
.nav a:hover { opacity:1; }
.rolling-label { display:inline-flex; overflow:hidden; line-height:1.3; vertical-align:bottom; }
.rolling-char { position:relative; display:inline-block; white-space:pre; transition:transform .5s var(--motion-ease); transition-delay:calc(var(--char-index)*15ms); }
.rolling-char::after { content:attr(data-char); position:absolute; left:0; top:110%; }
a:hover .rolling-char,a:focus-visible .rolling-char { transform:translateY(-110%); }
.statement { padding-top:85px; }
.statement .section-index { margin-bottom:65px; }
.kinetic-grid { overflow:hidden; border-top:1px solid #b4b1ac; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.6667% - 1px),#b4b1ac calc(16.6667% - 1px),#b4b1ac 16.6667%); }
.grid-ruler { display:grid; grid-template-columns:repeat(6,1fr); padding:9px 0 24px; font:400 .75rem 'DM Mono',monospace; }
.grid-ruler span { padding-left:10px; }
.statement .kinetic-grid h2 { font-size:clamp(2rem,8.6vw,9rem); line-height:1.03; letter-spacing:-.065em; }
.statement .kinetic-grid h2 span { color:#0c0c0b; }
.kinetic-row { display:block; border-bottom:1px solid #b4b1ac; overflow:hidden; }
.kinetic-track { display:flex; align-items:center; width:max-content; gap:.17em; padding:.06em .04em .13em; will-change:transform; }
.kinetic-row:nth-child(2) .kinetic-track { margin-left:34%; }
.kinetic-row:nth-child(3) .kinetic-track { margin-left:14%; }
.kinetic-row:nth-child(4) .kinetic-track { margin-left:3%; }
.kinetic-track i { display:block; width:.62em; height:.62em; flex:none; background:var(--red); border-radius:50%; }
.kinetic-row:nth-child(2) i { border-radius:0; background:#151515; }
.services>div,.method-row { position:relative; isolation:isolate; overflow:hidden; transition:color .3s; }
.hover-fill { position:absolute; inset:0; background:#121212; z-index:-1; transform:translateY(102%); transition:transform .45s var(--motion-ease); pointer-events:none; }
.services>div.is-hovered,.method-row.is-hovered { color:var(--fg); }
.services>div.is-hovered>span:not(.hover-fill) { color:#bbb; }
.services p,.method-row h3,.method-row p { transition:translate .4s var(--motion-ease); }
.services>div.is-hovered p,.method-row.is-hovered h3,.method-row.is-hovered p { translate:10px 0; }
.word-mask { display:inline-block; overflow:clip; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em; }
.word-reveal { display:inline-block; transform-origin:left bottom; }
.media video,.media:hover video { transform:translateY(var(--media-pan,0px)) scale(1.12); transition:filter .4s; }
.motion-cursor { display:none; }
@media(hover:hover) and (pointer:fine) {
  .motion-cursor { display:grid; place-items:center; position:fixed; top:0; left:0; width:94px; height:94px; border-radius:50%; background:var(--red); color:#fff; font:400 .75rem 'DM Mono',monospace; z-index:50; pointer-events:none; opacity:0; transition:opacity .2s; }
  .motion-cursor.visible { opacity:1; }
  html.motion-enabled .media { cursor:none; }
  html.motion-enabled .media:hover .play { opacity:0; }
}
@media(max-width:760px) {
  h1 { font-size:clamp(2rem,10.9vw,5.2rem); margin-bottom:7vh; }
  .hero { min-height:88svh; }
  .hero .eyebrow { top:135px; right:var(--pad); font-size:.7rem; line-height:1.6; }
  .nav .brand { font-size:1.1rem; gap:8px; }
  .hero { padding-top:230px; }
  .hero-film { object-position:58% center; }
  .hero-bottom { flex-wrap:wrap; }
  .hero-bottom p { flex:1 1 65%; }
  .motion-toggle { order:3; margin:0; }
  .hero-bottom .circle-link { width:44px; height:44px; }
  .statement { padding-top:65px; }
  .statement .kinetic-grid h2 { font-size:clamp(1.8rem,7.8vw,3.6rem); }
  .grid-ruler { padding-bottom:14px; }
  .kinetic-track { gap:.13em; padding-top:.15em; padding-bottom:.2em; }
}
html.motion-disabled { scroll-behavior:auto; }
html.motion-disabled *,html.motion-disabled *::before,html.motion-disabled *::after { animation:none!important; transition:none!important; }
html.motion-disabled .motion-cursor { display:none; }
html.motion-disabled .hero-film,html.motion-disabled .kinetic-track,html.motion-disabled .media video { transform:none!important; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .motion-cursor { display:none; }
  .hero-film,.kinetic-track,.media video { transform:none!important; }
}