/* Subpages: re-skin the original pages to match the cinematic homepage.
   Loaded last on every subpage. Keeps each page's layout and tools; changes type, buttons, nav, accents and media.
   Green (gain) and red (loss) stay: they carry meaning in the demos. Everything else is black and white. */

@font-face { font-family: "Valtier Display"; font-style: normal; font-display: swap; font-weight: 700; src: url(/cine/fonts/archivo-700-w72.woff2) format("woff2"); }
@font-face { font-family: "Valtier Head"; font-style: normal; font-display: swap; font-weight: 600; src: url(/cine/fonts/archivo-600-w80.woff2) format("woff2"); }

:root {
  --ink: #070707;
  --surface: #0e0e0e;
  --surface-2: #141414;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.3);
  --muted: #a6a6a6;
  --signal: #ffffff;
  --signal-glow: rgba(255,255,255,.16);
  --f-display: "Valtier Display", "Arial Narrow", Impact, sans-serif;
  --f-serif: "Valtier Head", "Arial Narrow", sans-serif;
  --stretch-head: 100%;
  --stretch-wide: 100%;
  --r-pill: 0px;
  --r-lg: 0px;
  --r-md: 0px;
  --r-sm: 0px;
}
html, body { background: var(--ink); }
body { cursor: auto !important; }
a, button, [role="button"], label { cursor: pointer !important; }
input, textarea { cursor: text !important; }

/* Old page effects that the homepage doesn't use */
.cursor, .section-hud { display: none !important; }

/* Type: condensed display face for headlines, same as the homepage */
h1, h2, .h1, .h2, .statement, .phead__title, .statement * { font-family: var(--f-display) !important; font-weight: 700 !important; font-stretch: normal !important; letter-spacing: -.005em !important; line-height: .95 !important; }
h3, h4, .h3, .h4, .serif { font-family: var(--f-serif) !important; font-weight: 600 !important; font-stretch: normal !important; letter-spacing: 0 !important; }
.label, .hud { letter-spacing: .14em; }

/* Buttons: square, solid white or outlined, like the homepage */
.pill { border-radius: 0 !important; box-shadow: none !important; font-weight: 500; }
.pill--primary, .pill--primary:hover, .pill--primary:focus-visible { box-shadow: none !important; }
.pill--primary { background: #fff; color: #000; border: 1px solid #fff; }
.pill--primary:hover { background: transparent !important; color: #fff !important; }
.pill--glass { background: transparent !important; border: 1px solid rgba(255,255,255,.55) !important; color: #fff; }
.pill--glass:hover, .pill--glass:focus-visible { background: #fff !important; color: #000 !important; border-color: #fff !important; box-shadow: none !important; }
.light .pill--primary, .on-paper .pill--primary { background: #000; color: #fff; border-color: #000; }
.light .pill--primary:hover { background: transparent !important; color: #000 !important; }
.light .pill--glass { border-color: rgba(0,0,0,.45) !important; color: #000; }
.chip, .tag { border-radius: 0 !important; }

/* Panels and cards: square corners, flat glass */
.glass, .calc__panel, .app__chrome, [class*="card"], [class*="panel"], [class*="tile"] { border-radius: 0 !important; }

/* Nav: flat bar like the homepage, white with difference blending */
.nav { padding: calc(14px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px)) !important; justify-content: stretch !important; mix-blend-mode: difference; }
.nav__pill, .nav.is-condensed .nav__pill { width: 100% !important; max-width: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; gap: 28px !important; box-shadow: none !important; justify-content: flex-start !important; color: #fff; }
.nav__brand { order: 0; width: 150px !important; padding: 0 !important; color: #fff !important; }
.nav__links { order: 1; margin-left: auto !important; margin-right: 0 !important; gap: 24px !important; }
.nav__link { height: auto !important; padding: 0 !important; font-size: 14px !important; color: #fff !important; opacity: .85; border-radius: 0 !important; }
.nav__link:hover, .nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after { left: 0 !important; right: 0 !important; bottom: -6px !important; }
.nav__clock { order: 2; border: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; opacity: .7 !important; color: #fff; font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; }
.nav__clock .dot { display: none; }
.nav__cta { order: 3; background: #fff !important; color: #000 !important; border: 1px solid #fff !important; min-height: 38px !important; }
.nav__cta:hover { background: transparent !important; color: #fff !important; }
.nav__menu { order: 4; color: #fff; }
.nav__progress { display: none !important; }
.menu { background: #000 !important; mix-blend-mode: normal; }
.menu__link { font-family: var(--f-display) !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.menu__link[aria-current="page"] { color: #fff !important; text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 760px) {
  .nav__pill { justify-content: space-between !important; }
  .nav__brand { width: 120px !important; }
}

/* Page heads: the film stills sit behind the title, with the homepage's scrim */
.phead__media img, .page-head img, [data-media] img, picture img { filter: grayscale(1); }
video { filter: grayscale(1); }

/* Accent glows and the pale blue signal become white; red and green are kept */
.nav__progress i, [class*="glow"] { background-image: none; }

/* Film grain, same as the homepage */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; opacity: .06; } .grain::before { content: ""; position: absolute; inset: -160px; will-change: transform; animation: subgrain 1.2s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes subgrain { 0% { transform: translate(0,0); } 20% { transform: translate(-37px,21px); } 40% { transform: translate(29px,-17px); } 60% { transform: translate(-13px,-41px); } 80% { transform: translate(43px,11px); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* Footer: same as the homepage */
.footer__mark .wordmark, .footer__mark svg { max-width: 520px; }
.footer__law a:hover { text-decoration: underline !important; }

:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; }
.light :focus-visible, .on-paper :focus-visible { outline-color: #000 !important; }

/* Ambient loops: sit on the still, fade in once playing */
.ft, .ph__media, .sbanner__media { overflow: hidden; isolation: isolate; }
video.bgloop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); opacity: 0; transition: opacity 1.2s cubic-bezier(.2,.7,.1,1); filter: none; }
video.bgloop.is-ready { opacity: 1; }
/* A steady shade so headings and forms always read over moving footage */
.ft::after, .ph__media::after, .sbanner__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(7,7,7,1) 100%); }
.contact form, .contact .form { background: rgba(8,8,8,.88); border: 1px solid var(--line); padding: clamp(18px, 3vw, 32px);  }
.calcpage .lead, .contact .lead, .ph__lead, .sbanner .lead { color: rgba(255,255,255,.86) !important; }
@media (max-width: 900px) {
  .ft::after, .ph__media::after, .sbanner__media::after { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72) 60%, rgba(7,7,7,1)); }
}

/* ---------- Page transitions ---------- */
html.vt-screen-in::after, html.vt-slide-in::after { content: ""; position: fixed; inset: 0; z-index: 999; background: #070707; }
.vt { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #070707; color: #fff; pointer-events: none; }
.vt--screen { clip-path: inset(100% 0 0 0); transition: clip-path .55s cubic-bezier(.65,0,.35,1); }
.vt--screen.is-on { clip-path: inset(0 0 0 0); }
.vt--screen.is-leaving { clip-path: inset(0 0 100% 0); transition: clip-path .8s cubic-bezier(.65,0,.35,1) .05s; }
.vt__inner { display: grid; justify-items: center; gap: 18px; }
.vt__mark { width: min(56vw, 640px); height: auto; color: #fff; opacity: 0; transform: scale(.965); transition: opacity .45s cubic-bezier(.2,.7,.1,1) .18s, transform .9s cubic-bezier(.2,.7,.1,1) .18s; }
.vt.is-on .vt__mark { opacity: 1; transform: none; }
.vt.is-still, .vt.is-still .vt__mark, .vt.is-still .vt__line { transition: none !important; }
.vt.is-leaving .vt__mark { opacity: 0; transform: translateY(-14px); transition: opacity .35s ease, transform .6s ease; }
.vt__line { display: block; width: min(56vw, 640px); height: 1px; background: rgba(255,255,255,.22); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.1,1) .25s; }
.vt.is-on .vt__line { transform: scaleX(1); }
.vt--slide { clip-path: inset(0 0 0 100%); transition: clip-path .3s cubic-bezier(.65,0,.35,1); }
.vt--slide.is-on { clip-path: inset(0 0 0 0); }
.vt--slide.is-leaving { clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.65,0,.35,1); }
@media (prefers-reduced-motion: reduce) { .vt, html.vt-screen-in::after, html.vt-slide-in::after { display: none !important; } }

/* Leadership on the Studio page: the same even rows as the homepage */
.roles__list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; border-top: 1px solid var(--line); }
.roles__list .role { display: grid !important; grid-template-columns: 44px minmax(0, 300px) minmax(0, 1fr) !important; gap: 6px 28px !important; align-items: start !important; padding: 22px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: none !important; }
.roles__list .role > .label { padding-top: 6px; }
.roles__list .role__t { display: grid; gap: 3px; margin: 0; }
.roles__list .role > p { margin: 0 !important; max-width: 62ch; grid-column: 3 !important; grid-row: 1 !important; }
.roles__list .role > .label { grid-column: 1 !important; grid-row: 1 !important; }
.roles__list .role__t { grid-column: 2 !important; grid-row: 1 !important; }
@media (max-width: 760px) {
  .roles__list .role { grid-template-columns: 36px minmax(0, 1fr) !important; }
  .roles__list .role > p { grid-column: 2 !important; grid-row: 2 !important; }
}
/* Mobile menu: readable on any background */
.nav:has(.menu:not([hidden])), .nav:has(.menu.is-open) { mix-blend-mode: normal !important; }