:root { --studio-paper: var(--color-black); --studio-ink: var(--color-light); --studio-line: rgb(255 255 255 / 22%); }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
html.studio-document, html.studio-document body { background: var(--studio-paper); }
html.studio-document.fixed-site-header #main-container { padding-top: 0 !important; }
.studio-page { color: var(--studio-ink); background: var(--studio-paper); }
.studio-site-header { position: absolute !important; color: #fff; }
.studio-site-header .headerbar::before { display: none; }
.studio-site-header #logo, .studio-site-header #menu-open { color: #fff; text-shadow: 0 1px 18px rgb(0 0 0 / 35%); }
.studio-cover { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; padding: clamp(2rem, 4vw, 6rem) clamp(2rem, 4vw, 7rem) 11rem; color: #fff; background: #161616; isolation: isolate; }
.studio-cover__media, .studio-cover__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio-cover__media { z-index: -2; object-fit: cover; }
.studio-cover__shade { z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 20%), rgb(0 0 0 / 12%) 45%, rgb(0 0 0 / 68%)); }
.studio-cover__content { width: 100%; }
.studio-cover__eyebrow, .studio-section-label { margin: 0 0 2rem; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 600;}
.studio-cover h1 { max-width: 160rem; margin: 0; color: #fff; font-size: clamp(6rem, 11.5vw, 17rem); font-weight: 600; line-height: .78; letter-spacing: -0.05em; }
.studio-nav { position: sticky; z-index: 350; top: 0; min-height: 7rem; margin-top: -7rem; display: flex; align-items: stretch; padding: 0 clamp(2rem, 4vw, 7rem); border-top: 1px solid rgb(255 255 255 / 28%); background: rgb(18 18 18 / 88%); backdrop-filter: blur(18px); }
.studio-nav a { display: flex; align-items: center; padding: 0 2.2rem; color: rgb(255 255 255 / 58%); font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
.studio-nav a:first-child { padding-left: 0; }
.studio-nav a:hover, .studio-nav a.is-active { color: #fff; }
.studio-nav__contact { margin-left: auto; margin-right: calc(clamp(2rem, 4vw, 7rem) * -1); padding: 0 clamp(2rem, 4vw, 7rem) !important; background: #d7ff38; color: var(--color-black) !important; transition: background-color .2s ease, color .2s ease; }
.studio-nav__contact:hover, .studio-nav__contact:focus-visible { background: var(--color-white); color: var(--color-black) !important; outline: none; }
.studio-statement, .studio-showreel { padding: clamp(10rem, 14vw, 20rem) clamp(2rem, 4vw, 7rem); }
.studio-statement h2, .studio-showreel h2, .studio-contact h2 { margin: 0; font-size: clamp(5rem, 9.2vw, 13rem); font-weight: 400; line-height: .88; letter-spacing: -.065em; }
.studio-statement { color: var(--color-light); background: var(--color-black); }
.studio-statement__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); gap: clamp(5rem, 10vw, 16rem); align-items: start; }
.studio-statement__copy { max-width: 78rem; min-height: 24rem; margin: clamp(6rem, 8vw, 10rem) 0 0; font-size: clamp(1.7rem, 2vw, 2.5rem); line-height: 1.55; }
.studio-statement__copy p { margin: 0; }
.studio-statement__copy p + p { margin-top: 2.5rem; }
.studio-statement__lead { font-size: clamp(2.4rem, 3.2vw, 4.5rem); line-height: 1.18 !important; letter-spacing: -.025em; }
.studio-values { display: flex; flex-direction: column; align-items: flex-start; padding-top: clamp(7rem, 11vw, 14rem); }
.studio-values button { width: auto; padding: .25rem 0; border-bottom: 1px solid transparent; background: none; color: var(--color-muted); font: inherit; font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.3; }
.studio-values button:hover, .studio-values button:focus-visible, .studio-values button.is-active { color: var(--color-light); border-bottom-color: currentColor; outline: none; }
.studio-manifesto { margin: clamp(8rem, 12vw, 16rem) 0 0; font-size: clamp(3.6rem, 6.5vw, 9rem); line-height: 1; letter-spacing: -.05em; }
.studio-manifesto strong { font-weight: 400; color: var(--color-muted); }
.studio-showreel { background: #111; color: #eee; }
.studio-showreel__header { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: end; margin-bottom: clamp(6rem, 9vw, 12rem); }
.studio-showreel__header .studio-section-label { grid-column: 1 / -1; }
.studio-showreel__header h2 { color: #fff; }
.studio-showreel__header > p:last-child { max-width: 40rem; margin: 0; color: #8e8e8e; font-size: 1.5rem; line-height: 1.6; }
.reel-grid { display: flex; flex-wrap: wrap; gap: 1px; background: #3b3b3b; }
.reel-card { min-width: 0; display: flex; background: #181818; transition: opacity .3s ease, transform .3s ease; }
.reel-grid > a { color: inherit; }
.reel-card--wide { flex: 1 1 calc(62% - 1px); }
.reel-card--compact { flex: 1 1 calc(38% - 1px); }
.reel-card.is-hidden { display: none; }
.reel-card__media { flex: 0 1 66%; min-width: 0; overflow: hidden; background: #222; }
.reel-card__media--landscape { aspect-ratio: 16 / 9; }
.reel-card__media--square { aspect-ratio: 1; }
.reel-card__media--portrait { aspect-ratio: 4 / 5; }
.reel-card__media img, .reel-card__media video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.reel-card:hover .reel-card__media img, .reel-card:hover .reel-card__media video { transform: scale(1.025); }
.reel-card__info { flex: 1 1 34%; min-width: 15rem; padding: clamp(2rem, 3vw, 4rem); display: flex; flex-direction: column; justify-content: flex-end; }
.reel-card__info span { color: #777; font-size: .95rem; font-weight: 700; letter-spacing: .12em; }
.reel-card__info h3 { margin: 1.2rem 0 2rem; color: #fff; font-size: clamp(2.5rem, 3.3vw, 5rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.reel-card__info p { margin: 0; color: #999; font-size: 1.25rem; line-height: 1.55; }
.reel-card__info b { margin-top: 2.5rem; color: var(--color-light); font-size: 1.1rem; font-weight: 500; }
.reel-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #666; background: #202020; }
.reel-empty { width: 100%; margin: 0; padding: 8rem 3rem; color: #777; background: #181818; font-size: clamp(1.8rem, 2.5vw, 3rem); }
.studio-contact { padding: clamp(10rem, 15vw, 22rem) clamp(2rem, 4vw, 7rem); background: #d7ff38; color: #151515; }
.studio-contact h2 { margin-bottom: clamp(6rem, 9vw, 11rem); }
.studio-contact a { color: #151515; font-size: clamp(2rem, 3vw, 4rem); border-bottom: 1px solid; }
@media (max-width: 780px) {
  .studio-cover { padding-bottom: 10rem; }
  .studio-cover__scroll { display: none; }
  .studio-nav { overflow-x: auto; padding-inline: 1.5rem; }
  .studio-nav a { padding-inline: 1.2rem; }
  .studio-nav__contact { display: none !important; }
  .studio-statement__layout, .studio-showreel__header { grid-template-columns: 1fr; }
  .studio-statement__copy { min-height: 0; }
  .studio-values { order: -1; flex-direction: row; gap: 2rem; padding-top: 0; overflow-x: auto; }
  .studio-values button { font-size: 2.2rem; }
  .reel-card--wide, .reel-card--compact { flex-basis: 100%; }
  .reel-card { flex-direction: column; }
  .reel-card__media { flex-basis: auto; width: 100%; }
  .reel-card__info { min-height: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel-card__media img, .reel-card__media video { transition: none; }
}