/*! Layer8 site styles v1.9.1 · 2026-11-04
 * One stylesheet for every page, linked from Site settings > Custom code > Head.
 * Layout, type and colour live in Webflow classes. This file only holds what Webflow cannot express:
 * browser surfaces, states set by layer8.js, and the three generated components (player, collage, well).
 * Sections: 1 base · 2 loader · 3 navigation · 4 forms · 5 background video · 6 project player
 *           6b full film overlay · 6c city clocks · 7 signal links · 8 about page · 9 reduced motion
 */

/* 1 · Base: browser surfaces themed to the studio */
:root { --l8-ease-out: cubic-bezier(.16, 1, .3, 1); }
html { background-color: #000; color-scheme: dark; scrollbar-color: #3a3a3a #000; scrollbar-width: thin; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }
input, textarea { caret-color: #fff; }
a { text-underline-offset: .25em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-kerning: normal; }
a, button, label, .w-nav-button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, .w-nav-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Inline text links keep one continuous underline when a reading reveal splits them into words */
.text-link-inline > .gsap_split_word { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* 2 · Loader: resting state before the intro runs. Skipped after the first visit in a session, except on Layers.
 * The page holds still while it plays. */
.loader { display: flex; }
.loader_text, .loader_track { transform: translateY(1em); }
html.loader-seen .loader { display: none !important; }
html.is-intro, html.is-intro body { overflow: hidden; }
html.is-intro .loader_content { will-change: transform; }

/* 3 · Navigation */
/* The logo's 8 is cut from the artwork and inverts whatever sits behind it */
.navbar16_logo-eight { -webkit-mask: url("https://cdn.prod.website-files.com/6a8f48c4269403dcf0ad6854/6ad095dc6d2fce799147e229_layer8-logo-eight.svg") center / 100% 100% no-repeat; mask: url("https://cdn.prod.website-files.com/6a8f48c4269403dcf0ad6854/6ad095dc6d2fce799147e229_layer8-logo-eight.svg") center / 100% 100% no-repeat; }
/* Menu: featured film and studio details fade in as the links land; the page stays still behind it */
.navbar16_feature, .navbar16_meta { opacity: 0; }
html.menu-open .navbar16_feature, html.menu-open .navbar16_meta { opacity: 1; transition: opacity .3s ease .25s; }
html.menu-open, html.menu-open body { overflow: hidden; }
/* Over light sections the bar turns dark (html.has-light-nav and .is-dark are set by layer8.js) */
.has-light-nav .navbar16_component, .has-light-nav .navbar16_component * { transition: color .3s ease, background-color .3s ease, border-color .3s ease, fill .3s ease; }
.navbar16_component.is-dark, .navbar16_component.is-dark a, .navbar16_component.is-dark .nav-link, .navbar16_component.is-dark .text-color-white { color: #000 !important; }
.navbar16_component.is-dark svg, .navbar16_component.is-dark path { fill: currentColor; }
.navbar16_component.is-dark .menu-icon_line-big, .navbar16_component.is-dark .menu-icon_line-sm { background-color: #000 !important; }
/* The open menu is always dark, so its contents stay white even over light sections */
html.menu-open .navbar16_component.is-dark, html.menu-open .navbar16_component.is-dark a { color: #fff !important; }
html.menu-open .navbar16_component.is-dark .menu-icon_line-big, html.menu-open .navbar16_component.is-dark .menu-icon_line-sm { background-color: #fff !important; }
html.menu-open .navbar16_component.is-dark .navbar16_link:hover { color: rgba(255, 255, 255, .55) !important; }
/* Logo on scroll (.is-compact and .is-tucked on the nav, set by layer8.js). No bar: the page stays clear to the edges.
 * Past the top the stacked logo folds into the horizontal one (the 8 rises beside "layer" and fills white).
 * Scrolling down tucks the logo away, up and out, leaving only the menu button; any scroll up brings it back. */
:root { --nav-lift: .9375rem; --l8-logo-compact: 52px; } /* lift centres the horizontal logo on the menu button */
@media screen and (max-width: 767px) { :root { --nav-lift: 1rem; --l8-logo-compact: 46px; } }
/* --l8-logo-compact matches the Webflow combo .navbar16_logo.is-scrolled width (52px, 46px on phones). The 8's travel is
 * set from it in pixels, because Safari fixes percentage moves against the logo's size when the move starts. */
.navbar16_component .navbar16_logo-link {
  transition: opacity .7s var(--l8-ease-out), transform .9s var(--l8-ease-out), margin-top .8s var(--l8-ease-out);
}
.navbar16_component.is-compact .navbar16_logo-link { margin-top: var(--nav-lift); }
.navbar16_component.is-tucked .navbar16_logo-link {
  opacity: 0; transform: translateY(-1rem); pointer-events: none;
  transition: opacity .45s cubic-bezier(.55, .085, .68, .53), transform .5s cubic-bezier(.55, .085, .68, .53), margin-top .8s var(--l8-ease-out);
}
html.menu-open .navbar16_component.is-tucked .navbar16_logo-link, .navbar16_component.is-tucked .navbar16_logo-link:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.navbar16_logo-link .navbar16_logo { transition: width .8s var(--l8-ease-out), filter .3s ease; }
/* The inverse 8 stays still (Safari misplaces a moved element that inverts what's behind it). A plain copy of the 8
 * (::after) takes over past the top and glides by its place in the 145 x 105 artwork: across by 101.5% of the width
 * to sit after the r, up by 52% of the height (37.66% of the width) onto the baseline of "layer". */
.navbar16_logo-link .navbar16_logo-eight { transition: opacity .3s ease; }
.navbar16_component.is-compact .navbar16_logo-link .navbar16_logo-eight { opacity: 0; }
.navbar16_component .navbar16_logo-link::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  background-color: #fff; -webkit-mask: url("https://cdn.prod.website-files.com/6a8f48c4269403dcf0ad6854/6ad095dc6d2fce799147e229_layer8-logo-eight.svg") center / 100% 100% no-repeat; mask: url("https://cdn.prod.website-files.com/6a8f48c4269403dcf0ad6854/6ad095dc6d2fce799147e229_layer8-logo-eight.svg") center / 100% 100% no-repeat;
  opacity: 0; transform: translate3d(0, 0, 0);
  transition: transform .8s var(--l8-ease-out), opacity .3s ease, background-color .3s ease;
}
.navbar16_component.is-compact .navbar16_logo-link::after { opacity: 1; transform: translate3d(calc(var(--l8-logo-compact) * 1.015), calc(var(--l8-logo-compact) * -.3766), 0); }
/* Over a light section the logo turns black with the menu button */
.navbar16_component.is-dark .navbar16_logo-link .navbar16_logo { filter: invert(1); }
.navbar16_component.is-dark .navbar16_logo-link::after { background-color: #000; }

/* 4 · Forms: selected and keyboard-focused choice pills on the contact intake */
.form_choice:has(input:checked) { background-color: #fff; border-color: #fff; color: #000; }
.form_choice:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }

/* 5 · Background video (mounted by layer8.js into [data-video]) */
.hero_video { position: absolute; inset: 0; overflow: hidden; }
.hero_video .video { position: absolute; inset: 0; }
.hero_video video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s cubic-bezier(.25, 1, .5, .8); }
.hero_video video.is-loaded { opacity: 1; }

/* 6 · Project player (built by layer8.js around #hero-video) */
.l8p { position: relative; display: block; line-height: 0; color: #fff; }
.l8p.is-idle, .l8p.is-idle * { cursor: none; }
.l8p:fullscreen { display: flex; align-items: center; background: #000; }
.l8p:fullscreen video { width: 100%; height: 100%; object-fit: contain; }
.l8p-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 2.5rem 1.75rem; line-height: 1.2; opacity: 0; transform: translateY(.5rem); transition: opacity .45s var(--l8-ease-out), transform .45s var(--l8-ease-out); pointer-events: none; }
.l8p-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 10rem; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); pointer-events: none; }
.l8p.is-started.is-awake .l8p-bar, .l8p.is-started.is-paused .l8p-bar { opacity: 1; transform: none; pointer-events: auto; }
.l8p.is-started ~ .header154_play-overlay { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.l8p-scrub { position: relative; height: 1.25rem; margin-bottom: .5rem; cursor: pointer; touch-action: none; }
.l8p-track, .l8p-buf, .l8p-fill { position: absolute; left: 0; top: 50%; height: 1px; transform: translateY(-50%); transition: height .25s var(--l8-ease-out); }
.l8p-track { right: 0; background: rgba(255, 255, 255, .22); }
.l8p-buf { width: 0; background: rgba(255, 255, 255, .32); }
.l8p-fill { width: 0; background: #fff; }
.l8p-head { position: absolute; top: 50%; left: 0; width: 1px; height: .875rem; background: #fff; opacity: 0; transform: translate(-50%, -50%) scaleY(.6); transition: opacity .25s ease, transform .25s var(--l8-ease-out); }
.l8p-scrub:hover :is(.l8p-track, .l8p-buf, .l8p-fill), .l8p-scrub.is-drag :is(.l8p-track, .l8p-buf, .l8p-fill) { height: 3px; }
.l8p-scrub:hover .l8p-head, .l8p-scrub.is-drag .l8p-head, .l8p-scrub:focus-visible .l8p-head { opacity: 1; transform: translate(-50%, -50%) scaleY(1); }
.l8p-tip { position: absolute; bottom: 1.4rem; left: 0; padding: .3rem .5rem; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--_typography---font-size--tiny, .75rem); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transform: translateX(-50%); transition: opacity .2s ease; pointer-events: none; }
.l8p-scrub:hover .l8p-tip, .l8p-scrub.is-drag .l8p-tip { opacity: 1; }
.l8p-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.l8p-group { display: flex; align-items: center; gap: .25rem; }
.l8p-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 2.75rem; height: 2.75rem; margin: 0; padding: 0 .5rem; border: 0; background: none; color: #fff; font: inherit; font-size: var(--_typography---font-size--small, .875rem); letter-spacing: .02em; text-transform: lowercase; cursor: pointer; opacity: .8; transition: opacity .25s ease; }
.l8p-btn:hover { opacity: 1; }
.l8p-btn svg { display: block; width: 1.125rem; height: 1.125rem; overflow: visible; }
.l8p-time { padding-left: .25rem; font-size: var(--_typography---font-size--small, .875rem); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.l8p-time b { font-weight: 400; }
.l8p-time span { color: rgba(255, 255, 255, .55); }
.l8p-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: .75rem; }
.l8p-eq i { display: block; width: 2px; height: 30%; background: currentColor; transition: height .3s ease; }
.l8p.is-sound.is-playing .l8p-eq i { animation: l8pEq 1s ease-in-out infinite; }
.l8p-eq i:nth-child(2) { animation-delay: -.4s; }
.l8p-eq i:nth-child(3) { animation-delay: -.7s; }
.l8p-eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes l8pEq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
/* Play button over the poster: a thin ring with a drawn triangle */
.lightbox-play-icon { display: flex; align-items: center; justify-content: center; width: 5.5rem !important; height: 5.5rem !important; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; transition: transform .5s var(--l8-ease-out), border-color .3s ease, background-color .3s ease; }
.lightbox-play-icon svg { display: none; }
.lightbox-play-icon::after { content: ""; width: 1rem; height: 1.15rem; margin-left: .2rem; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.header154_play-overlay:hover .lightbox-play-icon { border-color: #fff; background-color: rgba(255, 255, 255, .08); transform: scale(1.08); }
@media (max-width: 767px) {
  .l8p-bar { padding: 0 1rem .75rem; }
  .l8p-label { display: none; }
  .lightbox-play-icon { width: 4.25rem !important; height: 4.25rem !important; }
}
@media (hover: none) { .l8p-head { opacity: 1; transform: translate(-50%, -50%) scaleY(1); } }

/* 6b · Full film overlay (opened by [data-film-open]; layout lives in the Webflow classes hero_film and film-modal) */
.hero_film-icon::after { content: ""; width: .6rem; height: .7rem; margin-left: .12rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transition: background-color .3s ease; }
.hero_film:hover .hero_film-icon, .hero_film:focus-visible .hero_film-icon { background-color: #fff; border-color: #fff; color: #000; transform: scale(1.08); }
.hero_film-icon { transition: transform .5s var(--l8-ease-out), background-color .3s ease, border-color .3s ease, color .3s ease; }
.film-modal.is-open { display: flex; animation: l8FilmIn .45s var(--l8-ease-out) both; }
@keyframes l8FilmIn { from { opacity: 0; } to { opacity: 1; } }
html.film-open, html.film-open body { overflow: hidden; }
.film-modal_frame .l8p { width: 100%; height: 100%; }
.film-modal_video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-modal_close { transition: opacity .25s ease; }
/* The close link is a plain x: two thin lines, the same weight as the play ring */
.film-modal_close::before, .film-modal_close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.375rem; height: 1px; background: currentColor; }
.film-modal_close::before { transform: translate(-50%, -50%) rotate(45deg); }
.film-modal_close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.film-modal_close:hover { opacity: .6; }

/* 6c · City clocks (contact). Ring and hands live in the Webflow classes city-clock*; layer8.js sets the hands
 * and syncs this sweep to the real second */
@keyframes l8ClockSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.city-clock_sweep { animation: l8ClockSweep 60s linear infinite; }

/* 7 · Signal links: any element with [data-signal] (About intro link, footer line).
 * At rest a faint line and a raised 8. On arrival, hover or focus the words decode out of the loader's digits,
 * the line draws in and the 8 turns into infinity. Optional data-signal-alt holds a second line to decode into. */
[data-signal] {
  --sig-r: 1;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor calc(var(--sig-r) * 30%), transparent), color-mix(in srgb, currentColor calc(var(--sig-r) * 30%), transparent));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .04em);
  background-size: 0% 1px, 100% 1px;
  transition: background-size .9s var(--l8-ease-out);
}
[data-signal] > .gsap_split_word { text-decoration: none; }
a[data-signal]:is(:hover, :focus-visible), a:is(:hover, :focus-visible) [data-signal]:not([data-signal-self]), a:focus-visible [data-signal-self], [data-signal-self]:hover, [data-signal].is-decoding { background-size: 100% 1px, 100% 1px; }
[data-signal]:not(:has(.gsap_split_word))::after, [data-signal] > .gsap_split_word:last-of-type::after {
  content: "8"; content: "8" / "";
  display: inline-block; margin-left: .16em; font-size: .5em; line-height: 1; vertical-align: 1em;
  opacity: .55; transition: transform .9s var(--l8-ease-out), opacity .4s ease;
}
a[data-signal]:is(:hover, :focus-visible) > .gsap_split_word:last-of-type::after,
a[data-signal]:not(:has(.gsap_split_word)):is(:hover, :focus-visible)::after,
a:is(:hover, :focus-visible) [data-signal]:not([data-signal-self]):not(:has(.gsap_split_word))::after,
a:focus-visible [data-signal-self]::after, [data-signal-self]:hover::after,
[data-signal].is-decoding > .gsap_split_word:last-of-type::after,
[data-signal].is-decoding:not(:has(.gsap_split_word))::after { transform: rotate(90deg); opacity: 1; }
.sig-ch { white-space: pre; }
.sig-ch.is-noise { opacity: .4; }
.sig-ch.is-fixed { display: inline-block; }
.sig-ch.is-fixed.is-noise { text-align: center; clip-path: inset(-.3em 0); }

/* 8 · About page */
/* Infinite collage (built by layer8.js inside .byq-gem--infinite-collage-scroll-01; also on Work) */
.byq-gem--infinite-collage-scroll-01 { --byq-bg: #070708; --byq-fg: #f6f3ec; --byq-card: #18191a; position: absolute; inset: 0; overflow: hidden; color: var(--byq-fg); background: var(--byq-bg); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.byq-gem--infinite-collage-scroll-01.is-dragging { cursor: grabbing; }
.byq-gem--infinite-collage-scroll-01::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(125% 125% at 50% 50%, transparent 52%, color-mix(in srgb, var(--byq-bg) 82%, transparent) 100%); }
.byq-gem--infinite-collage-scroll-01__stage { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.byq-gem--infinite-collage-scroll-01__tile { position: absolute; top: 0; left: 0; overflow: hidden; border-radius: .5rem; background: var(--byq-card); box-shadow: 0 10px 30px -12px color-mix(in srgb, #000 65%, transparent); will-change: transform; }
.byq-gem--infinite-collage-scroll-01__tile--lg { border-radius: 1rem; }
.byq-gem--infinite-collage-scroll-01__media { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) saturate(.95); transform: scale(1.001); }
/* Tool wall: each slot slowly trades one logo for another, staggered across the row */
@keyframes toolWallA { 0%, 40% { opacity: .6; filter: blur(0); } 50%, 90% { opacity: 0; filter: blur(6px); } 100% { opacity: .6; filter: blur(0); } }
@keyframes toolWallB { 0%, 40% { opacity: 0; filter: blur(6px); } 50%, 90% { opacity: .6; filter: blur(0); } 100% { opacity: 0; filter: blur(6px); } }
.tool-wall_mark { animation: toolWallA 16s cubic-bezier(.45, 0, .2, 1) infinite; }
.tool-wall_alt { animation: toolWallB 16s cubic-bezier(.45, 0, .2, 1) infinite; }
.tool-wall_slot:nth-child(2) :is(.tool-wall_mark, .tool-wall_alt) { animation-delay: -15.2s; }
.tool-wall_slot:nth-child(3) :is(.tool-wall_mark, .tool-wall_alt) { animation-delay: -14.4s; }
.tool-wall_slot:nth-child(4) :is(.tool-wall_mark, .tool-wall_alt) { animation-delay: -13.6s; }
.tool-wall_slot:nth-child(5) :is(.tool-wall_mark, .tool-wall_alt) { animation-delay: -12.8s; }
.tool-wall_slot:nth-child(6) :is(.tool-wall_mark, .tool-wall_alt) { animation-delay: -12s; }

/* Team (layout lives in the Webflow classes team_list, team_person, team_photo*, team_chip*). Portraits sit in
   matched black and white; hover, keyboard focus or (on touch) the middle of the screen brings the colour back and
   draws the line above the name. layer8.js team sets .is-lit on touch screens. */
.team_photo-img { filter: grayscale(1) contrast(1.06) brightness(.9); transition: filter .9s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.team_person::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.team_person:focus-within::before, .team_person.is-lit::before { transform: scaleX(1); }
.team_person:focus-within .team_photo-img, .team_person.is-lit .team_photo-img { filter: none; }
@media (hover: hover) {
  .team_person:hover::before { transform: scaleX(1); }
  .team_person:hover .team_photo-img { filter: none; transform: scale(1.04); }
}
.team_chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 8b · Layers page: the slow loops run as CSS, so the browser's compositor handles them and no script runs per frame */
@keyframes l8Breathe { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes l8Glow { from { opacity: .45; } to { opacity: 1; } }
@keyframes l8Cue { from { transform: translateY(-8px); } to { transform: translateY(50px); } }
.descent_portal-video { animation: none; } /* held still: scaling the film under a hairline crack shimmers */
/* The first layer tucks under the last screen of the tear, so its line is in place the moment the film dissolves
   (layer8.js tear keeps it hidden until then) */
.descent_threshold + .chamber { margin-top: -100svh; }
/* The seventh layer on the white: layer8.js world sets its colour (.is-inked) as the field turns; the ring and ghost number follow */
.chamber.is-inked .chamber_aperture { border-color: rgba(11, 11, 12, .3); }
.chamber.is-inked .chamber_ghost { color: rgba(11, 11, 12, .05); }
.section_descent { transition: background-color .4s ease; }
/* The tear (layer8.js tear): its torn edge is drawn on this canvas; the colour world (layer8.js world) on the other */
.descent_tear-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.descent_world-canvas { display: block; width: 100%; height: 100%; }
.chamber_aperture { animation: l8Glow 2.4s ease-in-out infinite alternate; }
.chamber_cue-dot { animation: l8Cue 1.8s ease-in-out infinite; }

/* 9 · Reduced motion: keep every state, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .tool-wall_mark, .tool-wall_alt, .l8p-eq i, .descent_portal-video, .chamber_aperture, .chamber_cue-dot, .film-modal.is-open { animation: none !important; }
  .city-clock_sweep { display: none; }
  .tool-wall_alt { display: none; }
  .team_photo-img, .team_person::before { transition: none; }
  .navbar16_component .navbar16_logo-link, .navbar16_logo-link .navbar16_logo, .navbar16_logo-link .navbar16_logo-eight, .navbar16_component .navbar16_logo-link::after { transition: none !important; }
  .navbar16_component.is-tucked .navbar16_logo-link { transform: none; }
  .l8p-bar, .l8p-head, .l8p-track, .l8p-fill, .l8p-buf, [data-signal], [data-signal] *::after, [data-signal]::after { transition: none; }
}