@font-face {
  font-family: "Oswald";
  src: url("assets/preview-oswald-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #070708;
  --surface: #111214;
  --surface-raised: #17191c;
  --text: #f7f7f5;
  --soft: #d7d7d3;
  --muted: #a7a8a7;
  --line: rgba(255,255,255,.14);
  --blue: rgb(0,174,255);
  --blue-rgb: 0,174,255;
  --violet: #9678ff;
  --violet-rgb: 150,120,255;
  --font: Inter, "Helvetica Neue", Arial, sans-serif;
  --headline: "Oswald", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); color-scheme: dark; scrollbar-color: #555a60 var(--ink); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); color: var(--text); font-family: var(--font); font-size: 16px; -webkit-font-smoothing: antialiased; }
::selection { color: var(--ink); background: #8edaff; }
[hidden] { display: none !important; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 14px 18px; border-radius: 8px; background: var(--text); color: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
a, button { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.home-site { min-height: 100svh; overflow: hidden; }
.home-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }

.site-header { position: absolute; z-index: 30; inset: 0 0 auto; min-height: 88px; padding: 0 clamp(24px,4vw,64px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: linear-gradient(180deg,rgba(5,5,6,.74),transparent); }
.site-brand { width: fit-content; display: inline-flex; }
.site-brand img { width: clamp(146px,13vw,188px); }
.site-location { margin: 0; justify-self: center; color: rgba(255,255,255,.68); font-size: 14px; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.menu-trigger { justify-self: end; width: 50px; height: 50px; padding: 0; display: grid; place-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(8,8,9,.3); backdrop-filter: blur(12px); cursor: pointer; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.menu-trigger span { width: 19px; height: 1px; background: #fff; transition: transform 180ms ease; }
.menu-trigger:hover,.menu-trigger:focus-visible { outline: none; border-color: rgba(var(--blue-rgb),.8); background: rgba(var(--blue-rgb),.14); transform: scale(1.04); }
.menu-trigger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.site-menu { position: fixed; z-index: 29; top: 76px; right: clamp(18px,4vw,64px); width: min(390px,calc(100vw - 36px)); max-height: calc(100dvh - 100px); overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-radius: 24px; background: rgba(17,18,20,.97); box-shadow: 0 34px 100px rgba(0,0,0,.58); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.985); transform-origin: top right; transition: opacity 180ms ease,visibility 180ms ease,transform 220ms ease; }
.site-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.site-menu__label { margin: 0; padding: 8px 8px 16px; color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.site-menu > a,.site-menu__disabled,.site-menu__contact { border-top: 1px solid var(--line); }
.site-menu > a,.site-menu__disabled { min-height: 62px; padding: 14px 9px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 11px; text-decoration: none; }
.site-menu > a { transition: color 160ms ease, background 160ms ease; }
.site-menu > a:hover,.site-menu > a:focus-visible { outline: none; color: var(--blue); background: rgba(255,255,255,.04); }
.site-menu strong { font-size: 16px; }
.site-menu__disabled { color: rgba(247,247,245,.52); }
.site-menu__disabled em { color: rgba(247,247,245,.42); font-size: 13px; font-style: normal; }
.site-menu__contact { padding: 17px 9px 4px; }
.site-menu__contact > p { margin: 0 0 9px; color: var(--muted); font-size: 14px; font-weight: 600; }
.site-menu__contact a { min-height: 44px; padding: 10px 0; display: grid; gap: 5px; color: var(--soft); font-size: 14px; overflow-wrap: anywhere; text-decoration: none; }
.site-menu__contact a:hover,.site-menu__contact a:focus-visible { outline: none; color: var(--blue); }
.site-menu__contact b { font-weight: 600; }

.film-hero { position: relative; min-height: 100svh; display: grid; isolation: isolate; overflow: hidden; background: #050506; }
.film-hero__image,.film-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.film-hero__image { z-index: -4; }
.film-hero__video { z-index: -3; }
.film-hero__shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg,rgba(3,3,4,.56) 0%,rgba(3,3,4,.3) 40%,rgba(3,3,4,.42) 62%,rgba(3,3,4,.95) 100%),linear-gradient(90deg,rgba(3,3,4,.52),rgba(3,3,4,.15) 58%,rgba(3,3,4,.34)); }
.film-hero__content { min-height: 100svh; padding: 200px 0 56px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 46px; }
.film-hero__copy { max-width: 720px; }
.film-hero h1 { margin: 0; font-family: var(--headline); font-size: clamp(52px,6.6vw,92px); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; }
.film-hero__statement { margin: 22px 0 0; color: var(--soft); font-size: clamp(18px,1.7vw,22px); line-height: 1.5; }
.film-hero__descriptor { margin: 18px 0 0; color: #b9bec3; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: .025em; }
.film-hero__controls { display: grid; gap: 12px; }
.film-toggle { justify-self: end; min-height: 44px; border: 0; padding: 10px 0 10px 12px; color: #c7ccd2; background: transparent; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.film-toggle:hover { color: #fff; }
.scroll-cue { min-width: 210px; min-height: 60px; padding: 15px 18px 15px 21px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid rgba(255,255,255,.28); border-radius: 17px; background: rgba(10,10,11,.44); box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 18px 44px rgba(0,0,0,.35); backdrop-filter: blur(16px); font-size: 16px; font-weight: 600; text-decoration: none; transition: transform 180ms ease,border-color 180ms ease,background 180ms ease; }
.scroll-cue .icon { color: var(--blue); }
.scroll-cue:hover,.scroll-cue:focus-visible { outline: none; border-color: rgba(var(--blue-rgb),.82); background: rgba(var(--blue-rgb),.14); transform: translateY(-4px); }

.studio-paths { scroll-margin-top: 28px; padding: clamp(58px,7vw,96px) 0 clamp(80px,8vw,112px); background: var(--ink); }
.home-contact h2 { margin: 0; font-family: var(--headline); font-size: clamp(40px,4.6vw,64px); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.space-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(22px,2.4vw,32px); }
.space-card { --card-rgb: var(--blue-rgb); position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: var(--surface); text-decoration: none; transition: transform 240ms cubic-bezier(.16,1,.3,1),border-color 220ms ease; }
.space-card--mothership { --card-rgb: var(--violet-rgb); }
.space-card:hover,.space-card:focus-visible { border-color: rgba(var(--card-rgb),.7); transform: translateY(-4px); }
.space-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #0a0a0b; }
.space-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.04) brightness(.8); transition: transform 900ms cubic-bezier(.16,1,.3,1),filter 500ms ease; }
.space-card--decks .space-card__media img { object-position: 52% center; filter: saturate(.78) contrast(1.08) brightness(.52); }
.space-card--mothership .space-card__media img { object-position: 52% center; }
.space-card:hover .space-card__media img,.space-card:focus-visible .space-card__media img { transform: scale(1.035); filter: saturate(1) contrast(1.03) brightness(.88); }
.space-card--decks:hover .space-card__media img,.space-card--decks:focus-visible .space-card__media img { filter: saturate(.86) contrast(1.08) brightness(.6); }
.space-card__wash { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(4,4,5,.18),rgba(4,4,5,.1) 45%,rgba(4,4,5,.87)); }
.space-card--decks .space-card__wash { background: linear-gradient(180deg,rgba(3,4,5,.46),rgba(3,4,5,.24) 42%,rgba(3,4,5,.94)); }
.space-card__label { position: absolute; left: 24px; right: 24px; bottom: 22px; padding: 0; color: #fff; font-size: clamp(14px,1.4vw,17px); font-weight: 700; line-height: 1.35; letter-spacing: .015em; text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.space-card__body { flex: 1; padding: clamp(24px,2.6vw,36px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.space-card h2 { margin: 0; font-family: var(--headline); font-size: clamp(34px,3.8vw,52px); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.space-card__body p { max-width: 485px; margin: 13px 0 0; color: var(--soft); font-size: 16px; line-height: 1.55; }
.space-card__body .space-card__category { margin-top: 16px; color: rgb(var(--card-rgb)); font-size: 14px; font-weight: 600; line-height: 1.6; }
.space-card__action { min-height: 60px; padding: 15px 17px 15px 19px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(var(--card-rgb),.54); border-radius: 16px; background: linear-gradient(180deg,rgba(var(--card-rgb),.18),rgba(var(--card-rgb),.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 10px 28px rgba(0,0,0,.28),0 0 24px rgba(var(--card-rgb),.08); font-size: 16px; transform: translateY(0); transition: background 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.space-card__action .icon { color: rgb(var(--card-rgb)); }
.space-card:hover .space-card__action,.space-card:focus-visible .space-card__action { background: linear-gradient(180deg,rgba(var(--card-rgb),.28),rgba(var(--card-rgb),.1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 15px 34px rgba(0,0,0,.34),0 0 32px rgba(var(--card-rgb),.16); transform: translateY(-3px); }

.home-contact { padding: clamp(72px,8vw,112px) 0; border-top: 1px solid var(--line); background: #0b0c0d; }
.home-contact__inner { display: grid; grid-template-columns: 1fr minmax(360px,.75fr); gap: clamp(48px,8vw,110px); align-items: center; }
.home-contact__details { margin: 18px 0 0; display: grid; gap: 6px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.home-contact__links { display: grid; gap: 12px; }
.home-contact__links a { min-height: 68px; padding: 16px 19px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.035); font-size: 16px; font-weight: 600; text-decoration: none; transition: transform 180ms ease,border-color 180ms ease,background 180ms ease; }
.home-contact__links a:hover,.home-contact__links a:focus-visible { outline: none; transform: translateX(4px); border-color: rgba(var(--blue-rgb),.54); background: rgba(var(--blue-rgb),.08); }
.home-contact__links .icon { color: var(--blue); }
.site-footer { min-height: 76px; padding: 0 clamp(24px,4vw,64px); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 1000px) {
  .space-grid { grid-template-columns: 1fr; }
}

/* Content is visible without JavaScript; the logo film supplies the motion. */
.home-site a:focus-visible,.home-site button:focus-visible,.skip-link:focus-visible { outline: 2px solid #8edaff; outline-offset: 5px; }

@media (max-width: 900px) {
  .space-grid { grid-template-columns: 1fr; }
  .film-hero__content { grid-template-columns: 1fr; align-content: end; }
  .film-hero__controls { width: fit-content; }
  .home-contact__inner { grid-template-columns: 1fr 1fr; gap: 38px; }
}

@media (max-width: 760px) {
  .home-shell { width: min(100% - 40px,620px); }
  .site-header { min-height: 76px; padding-inline: 18px; grid-template-columns: 1fr auto; }
  .site-brand img { width: 142px; }
  .site-location { display: none; }
  .menu-trigger { width: 46px; height: 46px; }
  .site-menu { top: 67px; right: 15px; width: calc(100vw - 30px); }
  .film-hero__image,.film-hero__video { object-position: 54% center; }
  .film-hero__shade { background: linear-gradient(180deg,rgba(3,3,4,.62),rgba(3,3,4,.34) 37%,rgba(3,3,4,.48) 58%,rgba(3,3,4,.96)); }
  .film-hero__content { padding: 220px 0 24px; gap: 28px; }
  .film-hero h1 { font-size: clamp(48px,12.5vw,72px); }
  .film-hero__statement { margin-top: 18px; font-size: 18px; }
  .film-hero__descriptor { margin-top: 12px; font-size: 13px; }
  .film-hero__controls { width: 100%; gap: 4px; }
  .scroll-cue { width: 100%; min-height: 58px; }
  .studio-paths { padding: 34px 0 92px; }
  .space-grid { grid-template-columns: 1fr; }
  .space-card { border-radius: 23px; }
  .space-card__body { padding: 26px 24px 28px; gap: 28px; }
  .space-card__action { min-height: 58px; }
  .home-contact__inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { padding: 24px 18px; display: grid; justify-items: center; text-align: center; }
  .site-footer span:nth-child(2) { display: none; }
}

@media (max-width: 420px) {
  .film-hero h1 { font-size: clamp(44px,12.5vw,52px); }
  .space-card__media { aspect-ratio: 4/3; }
  .space-card__label { left: 17px; bottom: 17px; font-size: 13px; }
  .space-card h2 { font-size: clamp(32px,9vw,38px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .space-card:hover,.space-card:focus-visible,.space-card:hover .space-card__media img,.space-card:focus-visible .space-card__media img,.space-card:hover .space-card__action,.space-card:focus-visible .space-card__action,.scroll-cue:hover,.home-contact__links a:hover { transform: none; }
}