/* Enrique's original Eras typography. The same relative asset paths are kept
   so this static page can reuse the font files already present on his site. */
@font-face {
  font-family: "Eras";
  src: local("Eras"), local("ITC Eras Book"),
       url("assets/fonts/Eras.woff") format("woff"),
       url("https://www.enriquemunoz.com/assets/fonts/Eras.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Eras Light";
  src: local("Eras Light"), local("ITC Eras Light"),
       url("assets/fonts/ERASLGHT.TTF") format("truetype"),
       url("https://www.enriquemunoz.com/assets/fonts/ERASLGHT.TTF") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Eras-Bold";
  src: local("Eras Bold"), local("ITC Eras Demi"),
       url("assets/css/fonts/a64c9e98476ec57c83b6edcdc6f76f74.woff2") format("woff2"),
       url("https://www.enriquemunoz.com/assets/css/fonts/a64c9e98476ec57c83b6edcdc6f76f74.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #070808;
  --surface: #0b0c0c;
  --surface-2: #111212;
  --text: #d7d2c8;
  --muted: #9b9992;
  --soft: #74746f;
  --gold: #ad842d;
  --gold-bright: #d0a43d;
  --gold-line: rgba(208, 164, 61, .24);
  --line: rgba(255, 255, 255, .085);
  --shell: 1320px;
  --gutter: clamp(22px, 4.4vw, 72px);
  --section: clamp(92px, 10vw, 160px);
  --font-display: "Eras-Bold", "Eras", "Trebuchet MS", sans-serif;
  --font-light: "Eras Light", "Eras", "Trebuchet MS", sans-serif;
  --font-body: "Eras", "ITC Eras Book", "Trebuchet MS", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.58; letter-spacing: .008em; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: #070808; background: var(--gold-bright); }

.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10000; transform: translateY(-150%); padding: 10px 14px; color: #070808; background: var(--gold-bright); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 5px; }

.page-shell { width: min(calc(100% - (var(--gutter) * 2)), var(--shell)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-compact { padding-block: clamp(50px, 5vw, 76px); }

.site-header { position: absolute; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: 86px; padding-inline: var(--gutter); transition: height .3s ease, background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.site-header.is-scrolled { position: fixed; height: 70px; background: rgba(7, 8, 8, .86); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: inline-flex; gap: .31em; color: #d7d4cd; font-family: var(--font-display); font-size: .9rem; font-weight: 500; letter-spacing: .015em; text-transform: uppercase; }
.brand strong { color: var(--gold-bright); font-weight: 600; }
.header-nav { display: flex; align-items: center; gap: clamp(22px, 3.4vw, 48px); }
.header-nav > a, .menu-toggle { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: #d7d5ce; background: none; border: 0; font-family: var(--font-display); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.header-nav > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 1px; background: var(--gold-bright); transition: right .35s var(--ease); }
.header-nav > a:hover::after { right: 0; }
.menu-toggle { gap: 10px; }
.menu-mark { display: grid; gap: 5px; width: 18px; }
.menu-mark i { display: block; height: 1px; background: var(--gold-bright); }
.menu-mark i:last-child { width: 11px; }

.hero { position: relative; isolation: isolate; min-height: min(860px, 100svh); overflow: hidden; background: #060707; }
.hero-panels { position: absolute; inset: 0 0 58px; display: flex; width: 100%; overflow: hidden; }
.reel-panel { position: relative; flex: 0 1 auto; width: 33.333%; min-width: 0; height: 100%; margin: 0; overflow: hidden; cursor: pointer; border: 0; background: #050606; transition: width .75s var(--ease), filter .55s ease; }
.hero[data-focus] .reel-panel.is-focused { width: 60%; }
.hero[data-focus] .reel-panel:not(.is-focused) { width: 20%; }
.reel-panel--left { clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
.reel-panel--center { clip-path: polygon(28px 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
.reel-panel--right { clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%); }
.reel-separator { position: relative; z-index: 6; flex: 0 0 2px; height: 100%; background: linear-gradient(to bottom, transparent 4%, rgba(208,164,61,.08) 18%, rgba(208,164,61,.3) 50%, rgba(208,164,61,.08) 82%, transparent 96%); transform: skewX(-2deg); pointer-events: none; }
.reel-media { position: absolute; inset: -12%; z-index: 0; overflow: hidden; transition: inset .7s var(--ease), width .7s var(--ease), height .7s var(--ease), padding-bottom .7s var(--ease), transform .7s var(--ease); }
.reel-media iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; border: 0; transform: translate(-50%, -50%); pointer-events: none; }
.reel-panel.is-focused .reel-media { inset: auto; top: 50%; left: 0; width: 100%; height: 0; padding-bottom: 56.25%; transform: translateY(-50%); }
.reel-panel.is-focused .reel-media iframe { top: 0; left: 0; width: 100% !important; min-width: 0; height: 100% !important; min-height: 0; transform: none; }
.reel-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.07) brightness(.7); transition: opacity 1.1s ease, filter .65s ease, transform 1.2s var(--ease), object-fit .3s ease; }
.reel-panel.is-playing .reel-poster { opacity: 0; }
.reel-panel.is-focused:not(.is-playing) .reel-poster { object-fit: contain; background: #050606; filter: saturate(.86) contrast(1.04) brightness(.78); }
.reel-panel-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.12) 38%, rgba(0,0,0,.62)); transition: background .55s ease; }
.hero[data-focus] .reel-panel:not(.is-focused) .reel-panel-shade { background: rgba(0,0,0,.74); }
.reel-panel.is-focused .reel-panel-shade { background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 42%, rgba(0,0,0,.64)); }
.reel-panel-label { position: absolute; left: 34px; right: 34px; bottom: 34px; z-index: 4; display: grid; gap: 5px; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .55s var(--ease); }
.reel-panel.is-focused .reel-panel-label { opacity: 1; transform: translateY(0); }
.reel-panel-label span { color: rgba(255,255,255,.2); font: 300 2.65rem/1 var(--font-display); }
.reel-panel-label strong { color: #f0ede6; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; }
.reel-panel-label small { color: var(--gold-bright); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; }
.hero-vignette { position: absolute; inset: 0 0 58px; z-index: 5; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 25%), linear-gradient(to top, rgba(4,5,5,.95), rgba(4,5,5,.54) 31%, transparent 63%), radial-gradient(ellipse at 50% 59%, transparent 0, rgba(0,0,0,.18) 43%, rgba(0,0,0,.52) 100%); }
.hero-light { position: absolute; z-index: 7; top: 17%; left: -38%; width: 36%; height: 55%; pointer-events: none; opacity: 0; transform: skewX(-13deg); background: linear-gradient(90deg, transparent, rgba(234,205,144,.04), rgba(234,205,144,.25), rgba(255,241,205,.08), transparent); filter: blur(9px); animation: lightPass 8.6s 1s var(--ease) forwards; }
@keyframes lightPass { 0% { left: -38%; opacity: 0; } 18% { opacity: .55; } 72% { opacity: .34; } 100% { left: 112%; opacity: 0; } }
.hero-copy { position: relative; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: min(860px, 100svh); padding-top: 150px; padding-bottom: clamp(125px, 14vh, 165px); text-align: center; pointer-events: none; transition: opacity 1.05s ease, transform 1.05s var(--ease), filter 1.05s ease; animation: heroCopySettle 8.8s 1.25s forwards; }
.hero-copy a, .hero-copy button { pointer-events: auto; }
@keyframes heroCopySettle { 0%, 48% { opacity: 1; } 100% { opacity: .46; filter: saturate(.88); } }
.hero[data-focus] .hero-copy { opacity: 0 !important; transform: translateY(9px); filter: blur(3px); pointer-events: none; }
.eyebrow, .chapter-label, .chapter-rule { color: var(--gold-bright); font-family: var(--font-display); font-size: .67rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.hero-copy .eyebrow { margin: 0 0 18px; }
.hero h1 { margin: 0; color: #d8d2c8; font-family: var(--font-light); font-size: clamp(2.55rem, 4.85vw, 5.05rem); font-weight: 300; letter-spacing: .205em; line-height: 1.04; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero h1 small { display: block; margin-top: 22px; color: #c9c5bd; font-family: var(--font-display); font-size: .33em; font-weight: 500; letter-spacing: .43em; }
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(22px, 3vw, 42px); margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 48px; padding: 0 24px; color: #d9d5cd; background: rgba(0,0,0,.2); border: 1px solid var(--gold-line); font-family: var(--font-display); font-size: .69rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s var(--ease); }
.button:hover { color: #080808; background: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-2px); }
.play-triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--gold-bright); }
.button:hover .play-triangle { border-left-color: #080808; }
.text-action { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0; color: #cbc8c0; background: none; border: 0; font-size: .63rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.text-action::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 1px; background: currentColor; transition: right .35s var(--ease); }
.text-action:hover::after { right: 0; }
.text-action--gold { color: var(--gold-bright); }
.hero-reel-bar { position: absolute; inset: auto 0 0; z-index: 15; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 58px; padding-inline: var(--gutter); background: rgba(7,8,8,.88); border-top: 1px solid rgba(255,255,255,.075); backdrop-filter: blur(12px); }
.hero-reel-bar button { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding: 0 18px; color: rgba(215,213,206,.48); background: none; border: 0; cursor: pointer; transition: color .35s ease, background .35s ease; }
.hero-reel-bar button + button { border-left: 1px solid rgba(255,255,255,.055); }
.hero-reel-bar button::after { content: ""; position: absolute; left: 22%; right: 78%; bottom: 0; height: 2px; background: var(--gold-bright); opacity: 0; transition: left .45s var(--ease), right .45s var(--ease), opacity .3s ease; }
.hero-reel-bar button span { color: rgba(255,255,255,.22); font: 300 .72rem/1 var(--font-display); letter-spacing: .08em; }
.hero-reel-bar button strong { overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: .58rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; }
.hero-reel-bar button.is-active { color: #e5dfd4; background: rgba(173,132,45,.055); }
.hero-reel-bar button.is-active span { color: var(--gold-bright); }
.hero-reel-bar button.is-active::after { left: 12%; right: 12%; opacity: 1; }
.mobile-reel-tabs { display: none; }

.media-range { position: relative; background: radial-gradient(circle at 50% 0, rgba(166,119,35,.07), transparent 43%), #090a0a; }
.chapter-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; white-space: nowrap; }
.chapter-rule::before, .chapter-rule::after { content: ""; height: 1px; background: var(--gold-line); }
.chapter-rule::before { width: 42px; }
.chapter-rule::after { flex: 1; }
.chapter-rule--short::after { display: none; }
.chapter-rule--short { margin-bottom: 10px; }
.media-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--gold-line); }
.media-item { display: grid; grid-template-columns: 48px 1fr; align-content: start; gap: 18px; min-height: 190px; padding: 27px 24px 24px; }
.media-item + .media-item { border-left: 1px solid var(--line); }
.media-item h2 { margin: 1px 0 7px; color: #d3cfc7; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.media-item p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.56; }
.media-item em { color: #bbb7ae; font-style: normal; }
.media-item a { display: inline-flex; margin-top: 15px; color: var(--gold-bright); font-size: .62rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }

.about { position: relative; overflow: clip; background: linear-gradient(180deg,#090a0a,#0b0c0c 68%,#090a0a); }
.about::after { content: ""; position: absolute; right: -8vw; bottom: 4%; width: min(42vw, 650px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(165,116,43,.065), transparent 67%); pointer-events: none; }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-template-rows: auto auto; align-items: start; }
.about-copy { grid-column: 1 / span 5; grid-row: 1; z-index: 3; padding-top: 8px; }
.about-copy h2 { margin: 0 0 54px; color: #d5cdc1; font-family: var(--font-light); font-size: clamp(3.9rem, 7vw, 7.25rem); font-weight: 300; letter-spacing: .045em; line-height: .95; text-transform: uppercase; }
.chapter-label { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.chapter-label::before { content: ""; width: 31px; height: 1px; background: var(--gold-bright); }
.about-copy p { max-width: 34ch; margin: 0 0 16px; color: var(--muted); font-size: .92rem; }
.about-copy .about-detail { color: #7f807b; font-size: .78rem; }
.about-copy .text-action { margin-top: 10px; }
.about-image { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); background: #0b0c0c; }
.about-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) brightness(.83) contrast(1.08); transition: transform 1.1s var(--ease), filter 1s ease; }
.about-image:hover img { transform: scale(1.025); filter: saturate(.96) brightness(.94) contrast(1.05); }
.about-image--top { grid-column: 6 / -1; grid-row: 1; z-index: 1; height: clamp(430px, 48vw, 655px); }
.about-image--top img { object-position: center 30%; }
.about-image--wide { grid-column: 2 / span 10; grid-row: 2; z-index: 2; height: clamp(300px, 35vw, 475px); margin-top: clamp(-124px, -8vw, -68px); }
.about-image figcaption { position: absolute; left: 22px; bottom: 18px; max-width: 62ch; color: rgba(235,230,218,.68); font-size: .58rem; letter-spacing: .02em; text-shadow: 0 1px 4px #000; }

.expertise { background: radial-gradient(circle at 10% 20%, rgba(145,103,34,.055), transparent 30%), #090a0a; }
.section-title { margin: 0 0 40px; color: #d2cbc1; font-family: var(--font-light); font-size: clamp(2.35rem, 4vw, 4.25rem); font-weight: 300; letter-spacing: .125em; line-height: 1; text-transform: uppercase; }
.expertise-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--gold-line); }
.expertise-card { position: relative; isolation: isolate; min-height: 490px; overflow: hidden; padding: 38px 32px; }
.expertise-card + .expertise-card { border-left: 1px solid var(--gold-line); }
.expertise-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--card-image) center / cover no-repeat; filter: saturate(.66) brightness(.69) contrast(1.06); transition: transform 1s var(--ease), filter .8s ease; }
.expertise-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,8,8,.24), rgba(7,8,8,.49) 43%, rgba(7,8,8,.96)); }
.expertise-card:hover::before { transform: scale(1.035); filter: saturate(.82) brightness(.79) contrast(1.04); }
.expertise-number { position: absolute; top: 24px; left: 26px; color: rgba(224,209,177,.11); font: italic 300 5.5rem/1 Georgia, serif; }
.expertise-content { position: absolute; left: 32px; right: 32px; bottom: 32px; }
.expertise-kicker { margin: 0 0 7px; color: var(--gold-bright); font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.expertise-content h3 { max-width: 18ch; margin: 0 0 12px; color: #d8d4ca; font-family: var(--font-body); font-size: 1.08rem; font-weight: 400; letter-spacing: .025em; line-height: 1.3; text-transform: none; }
.expertise-content > p:not(.expertise-kicker) { max-width: 36ch; margin: 0 0 20px; color: #a19f98; font-size: .78rem; }
.expertise-content button { padding: 0; color: var(--gold-bright); background: none; border: 0; font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }

.featured { background: linear-gradient(180deg,#090a0a,#080909); }
.featured-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.featured-heading .section-title { margin-bottom: 0; }
.project-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: clamp(13px, 1.7vw, 25px); align-items: end; }
.project-card { position: relative; min-width: 0; min-height: clamp(390px, 44vw, 535px); overflow: hidden; padding: 0; color: inherit; background: #0b0c0c; border: 1px solid rgba(203,158,56,.24); border-radius: 999px; cursor: pointer; text-align: left; transition: transform .55s var(--ease), border-color .4s ease, filter .4s ease; }
.project-card:nth-child(even) { transform: translateY(18px); }
.project-card:hover { border-color: rgba(216,170,62,.68); transform: translateY(-5px); }
.project-card:nth-child(even):hover { transform: translateY(10px); }
.project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.79) brightness(.74) contrast(1.05); transition: transform .9s var(--ease), filter .65s ease; }
.project-card:hover img { transform: scale(1.06); filter: saturate(.94) brightness(.86) contrast(1.03); }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 15%, rgba(0,0,0,.06) 43%, rgba(0,0,0,.84) 75%, rgba(0,0,0,.58)); }
.project-index { position: absolute; z-index: 2; top: 29px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.53); font-size: .56rem; letter-spacing: .18em; }
.project-name { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 92px; color: #f0ece4; font-size: .67rem; font-weight: 500; letter-spacing: .08em; line-height: 1.35; text-align: center; text-transform: uppercase; }
.project-role { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 54px; color: rgba(255,255,255,.55); font-size: .5rem; letter-spacing: .08em; line-height: 1.35; text-align: center; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s var(--ease); }
.project-card:hover .project-role, .project-card:focus-visible .project-role { opacity: 1; transform: translateY(0); }

.career { background: #080909; border-top: 1px solid var(--gold-line); }
.career-grid { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.7fr); gap: clamp(54px,7vw,110px); align-items: stretch; }
.career-copy h2 { margin: 0 0 20px; color: #d4cec3; font-family: var(--font-light); font-size: clamp(2.1rem, 3.25vw, 3.45rem); font-weight: 300; letter-spacing: .075em; line-height: 1.12; text-transform: uppercase; }
.career-copy p { max-width: 47ch; margin: 0; color: var(--muted); font-size: .82rem; }
.studio-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.studio-logo { display: grid; place-items: center; min-height: 145px; padding: 29px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio-logo img { max-width: 78%; max-height: 58px; object-fit: contain; filter: grayscale(1) brightness(1.32); opacity: .76; transition: opacity .35s ease, transform .4s var(--ease), filter .35s ease; }
.studio-logo:hover img { opacity: .95; transform: scale(1.035); filter: grayscale(1) brightness(1.45); }

.contact-cta { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 330px; overflow: hidden; text-align: center; border-top: 1px solid var(--line); }
.contact-cta > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; filter: saturate(.72) brightness(.60) contrast(1.08); }
.contact-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,7,7,.94), rgba(6,7,7,.36), rgba(6,7,7,.94)), linear-gradient(180deg, rgba(6,7,7,.35), rgba(6,7,7,.72)); }
.contact-content { padding-block: 72px; }
.contact-content .eyebrow { margin: 0 0 15px; }
.contact-content h2 { margin: 0 0 25px; color: #d8d2c8; font-family: var(--font-light); font-size: clamp(2rem, 3.45vw, 3.5rem); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 86px; padding-inline: var(--gutter); color: #747570; background: #070808; border-top: 1px solid var(--line); font-size: .58rem; letter-spacing: .05em; }
.site-footer p { margin: 0; }
.site-footer p:nth-child(2) { text-align: center; }
.site-footer nav { display: flex; justify-content: flex-end; gap: 19px; }
.site-footer a { min-height: 38px; display: inline-flex; align-items: center; transition: color .3s ease; }
.site-footer a:hover { color: var(--gold-bright); }

.menu-backdrop { position: fixed; inset: 0; z-index: 980; visibility: hidden; opacity: 0; background: rgba(0,0,0,.68); backdrop-filter: blur(5px); transition: opacity .45s ease, visibility .45s; }
.menu-backdrop.is-open { visibility: visible; opacity: 1; }
.site-menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 990; display: flex; flex-direction: column; width: min(92vw, 500px); padding: 28px clamp(26px,5vw,54px) 40px; background: radial-gradient(circle at 100% 0, rgba(173,132,45,.11), transparent 36%), #0b0c0c; border-left: 1px solid var(--gold-line); transform: translateX(102%); transition: transform .65s var(--ease); }
.site-menu.is-open { transform: translateX(0); }
.site-menu-top { display: flex; align-items: center; justify-content: space-between; }
.icon-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; color: #d9d5cc; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 50%; font-size: 1.45rem; cursor: pointer; transition: border-color .3s ease, background .3s ease; }
.icon-button:hover { background: rgba(208,164,61,.12); border-color: var(--gold-line); }
.menu-links { display: grid; margin-block: auto; }
.menu-links a { display: grid; grid-template-columns: 43px 1fr; align-items: baseline; padding: 15px 0; color: #d6d0c6; font-family: var(--font-light); font-size: clamp(2rem,4.5vw,3.9rem); font-weight: 300; letter-spacing: .05em; line-height: 1.05; text-transform: uppercase; border-bottom: 1px solid var(--line); transition: color .3s ease, padding-left .45s var(--ease); }
.menu-links a:hover { color: var(--gold-bright); padding-left: 8px; }
.menu-links span { color: var(--gold); font: 600 .55rem/1 var(--font-body); letter-spacing: .12em; }
.menu-meta { display: grid; gap: 9px; color: #85857f; font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.menu-meta a:hover { color: var(--gold-bright); }

/* Dialogs */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(8px); }
.reel-dialog { width: min(1000px, calc(100vw - 34px)); max-width: none; padding: 0; background: #070808; border: 1px solid var(--gold-line); }
.dialog-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 80px; padding: 15px 18px 15px 24px; border-bottom: 1px solid var(--line); }
.dialog-topbar > div { display: grid; }
.dialog-kicker { color: var(--gold-bright); font-size: .57rem; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; }
.dialog-topbar strong { color: #d9d4ca; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
.reel-stage { aspect-ratio: 16/9; background: #000; }
.reel-stage iframe { width: 100%; height: 100%; border: 0; }
.reel-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; padding: 0 24px; border-top: 1px solid var(--line); }
.reel-nav button { color: #9b9992; background: none; border: 0; font-size: .61rem; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
.reel-nav button:last-child { text-align: right; }
.reel-nav button:hover { color: var(--gold-bright); }
.reel-nav span { color: #d8d3c9; font: 300 1.2rem/1 var(--font-display); letter-spacing: .08em; }
.content-dialog { width: min(1080px, calc(100vw - 34px)); max-width: none; max-height: min(850px, calc(100svh - 34px)); padding: 0; overflow: auto; background: #0a0b0b; border: 1px solid var(--gold-line); }
.dialog-close { position: sticky; float: right; top: 16px; right: 16px; z-index: 5; margin: 16px 16px -62px 0; }
.project-dialog { grid-template-columns: minmax(0,1.18fr) minmax(330px,.82fr); }
.project-dialog[open] { display: grid; }
.project-dialog-media { min-height: 620px; background: #050505; }
.project-dialog-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) brightness(.74) contrast(1.08); }
.project-dialog-copy { align-self: center; padding: clamp(45px,6vw,82px); }
.project-dialog-copy h2, .expertise-dialog h2, .filmography-dialog h2 { margin: 12px 0 22px; color: #d8d1c7; font-family: var(--font-light); font-size: clamp(2.3rem,4vw,4.25rem); font-weight: 300; letter-spacing: .075em; line-height: 1; text-transform: uppercase; }
.project-dialog-copy p { color: var(--muted); font-size: .9rem; }
.project-logline { color: #c6c1b7 !important; font-size: 1.02rem !important; }
.project-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.project-facts div { min-width: 0; }
.project-facts dt { color: var(--gold-bright); font-size: .55rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }
.project-facts dd { margin: 4px 0 0; color: #bbb7ae; font-size: .75rem; }
.expertise-dialog-inner, .filmography-inner { padding: clamp(48px,7vw,90px); }
.expertise-dialog-inner > p { max-width: 64ch; color: var(--muted); }
.expertise-dialog ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.expertise-dialog li { padding: 16px 0; color: #aaa79f; border-bottom: 1px solid var(--line); font-size: .84rem; }
.expertise-dialog li::before { content: "—"; margin-right: 10px; color: var(--gold-bright); }
.filmography-list { display: grid; grid-template-columns: 1fr 1fr; margin: 34px 0 40px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.filmography-item { padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filmography-item strong { display: block; color: #cec9bf; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.filmography-item span { color: #777873; font-size: .64rem; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  .media-grid { grid-template-columns: repeat(2,1fr); }
  .media-item:nth-child(3) { border-left: 0; }
  .media-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .project-strip { display: flex; gap: 20px; overflow-x: auto; padding: 8px var(--gutter) 36px; margin-inline: calc(var(--gutter) * -1); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--gold) #090a0a; }
  .project-card { flex: 0 0 180px; min-height: 490px; scroll-snap-align: center; }
  .career-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .site-header { height: 72px; }
  .header-nav > a { display: none; }
  .hero { min-height: 760px; }
  .hero-panels { inset: 0; display: block; }
  .reel-panel { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: none; opacity: 0; visibility: hidden; transition: opacity .85s ease, visibility .85s; }
  .hero[data-focus] .reel-panel, .hero[data-focus] .reel-panel.is-focused { width: 100%; }
  .reel-panel.is-mobile-active { opacity: 1; visibility: visible; }
  .reel-separator, .hero-reel-bar { display: none; }
  .reel-media, .reel-panel.is-focused .reel-media { inset: -12%; top: auto; left: auto; width: auto; height: auto; padding-bottom: 0; transform: none; }
  .reel-panel.is-focused .reel-media iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh !important; min-width: 100%; height: 56.25vw !important; min-height: 100%; transform: translate(-50%, -50%); }
  .hero-vignette { inset: 0; }
  .hero-copy { min-height: 760px; padding: 130px var(--gutter) 120px; animation: none; opacity: 1; pointer-events: none; }
  .hero-copy a, .hero-copy button { pointer-events: auto; }
  .hero[data-focus] .hero-copy { opacity: 1 !important; transform: none; filter: none; }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 4.2rem); letter-spacing: .13em; }
  .hero h1 small { margin-top: 20px; letter-spacing: .25em; }
  .hero-actions { gap: 12px 20px; }
  .hero-actions .button { flex-basis: 100%; width: min(270px,100%); }
  .mobile-reel-tabs { position: absolute; z-index: 12; left: var(--gutter); right: var(--gutter); bottom: 24px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
  .mobile-reel-tabs button { min-height: 44px; padding: 0 6px; color: #85857f; background: rgba(5,6,6,.55); border: 0; border-bottom: 1px solid transparent; font-size: .53rem; letter-spacing: .1em; text-transform: uppercase; }
  .mobile-reel-tabs button.is-active { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
  .reel-panel-label { display: none; }
  .about-grid { display: flex; flex-direction: column; }
  .about-copy { order: 1; width: 100%; }
  .about-copy h2 { font-size: clamp(4rem,18vw,7rem); margin-bottom: 42px; }
  .about-image--top { order: 2; width: 88%; height: 520px; align-self: flex-end; margin-top: 52px; }
  .about-image--wide { order: 3; width: 100%; height: 330px; margin-top: -35px; }
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-card + .expertise-card { border-left: 0; border-top: 1px solid var(--gold-line); }
  .featured-heading { align-items: flex-start; flex-direction: column; }
  .studio-grid { grid-template-columns: repeat(2,1fr); }
  .site-footer { grid-template-columns: 1fr; padding-block: 28px; text-align: center; }
  .site-footer p:nth-child(2) { order: 3; }
  .site-footer nav { justify-content: center; flex-wrap: wrap; }
  .project-dialog[open] { display: block; }
  .project-dialog-media { min-height: 340px; height: 43vh; }
  .project-facts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; --section: 88px; }
  .hero { min-height: 720px; }
  .hero-copy { min-height: 720px; padding-bottom: 124px; }
  .hero-copy .eyebrow { font-size: .55rem; letter-spacing: .26em; }
  .hero h1 { font-size: clamp(2.1rem, 11.4vw, 3.55rem); }
  .text-action { font-size: .56rem; }
  .media-grid { grid-template-columns: 1fr; }
  .media-item + .media-item, .media-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .media-item { min-height: 0; padding: 24px 10px; }
  .about-image--top { height: 410px; }
  .about-image--wide { height: 265px; }
  .section-title { font-size: clamp(2.35rem,12vw,3.7rem); letter-spacing: .09em; }
  .expertise-card { min-height: 440px; }
  .project-card { flex-basis: 156px; min-height: 450px; }
  .career-copy h2 { font-size: 2.35rem; }
  .studio-logo { min-height: 115px; padding: 20px; }
  .contact-content h2 { font-size: 2.2rem; letter-spacing: .08em; }
  .menu-links a { grid-template-columns: 34px 1fr; font-size: 2.2rem; }
  .reel-dialog { width: calc(100vw - 18px); }
  .dialog-topbar { min-height: 68px; padding-left: 16px; }
  .reel-nav { padding-inline: 14px; }
  .reel-nav button { font-size: .53rem; }
  .content-dialog { width: calc(100vw - 18px); max-height: calc(100svh - 18px); }
  .project-dialog-copy, .expertise-dialog-inner, .filmography-inner { padding: 45px 24px; }
  .expertise-dialog ul, .filmography-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-copy { opacity: 1; }
}

/* Original source SVG/icon system */
.media-icon { display:grid; place-items:center; width:48px; height:48px; color:#d6d2c9; flex:0 0 auto; }
.media-icon svg { width:42px; height:42px; overflow:visible; }
.media-icon .source-icon--fill, .media-icon .source-icon--fill * { fill:currentColor; }
.media-icon .source-icon--line, .media-icon .source-icon--line * { fill:none; stroke:currentColor; }
.expertise-icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:18px; color:#ded9cf; }
.expertise-icon svg { width:52px; height:52px; overflow:visible; }
.expertise-icon svg:not([viewBox^="0 -19.5"]) path { fill:currentColor; }
.expertise-icon svg[viewBox^="0 -19.5"] g { stroke:currentColor !important; fill:transparent !important; }
.expertise-icon svg[viewBox^="0 -19.5"] path, .expertise-icon svg[viewBox^="0 -19.5"] ellipse { stroke:currentColor !important; fill:none !important; }
.expertise-card:first-child .expertise-icon { color:var(--gold-bright); }
.action-arrow { width:13px; height:13px; object-fit:contain; opacity:.78; transition:transform .3s var(--ease), opacity .3s ease; }
.text-action:hover .action-arrow, .button:hover .action-arrow { transform:translateX(3px); opacity:1; }
.download-icon { width:17px; height:17px; object-fit:contain; filter:invert(84%) sepia(20%) saturate(1041%) hue-rotate(355deg) brightness(88%); }
.nav-arrow { width:14px; height:14px; filter:invert(70%); vertical-align:middle; }
.reel-nav button { display:inline-flex; align-items:center; gap:8px; }
.reel-nav button:last-child { justify-content:flex-end; }
.media-item h2, .expertise-kicker, .project-name, .project-role, .dialog-kicker, .dialog-topbar strong, .filmography-item strong { font-family:var(--font-display); font-weight:500; }
.media-item p, .about-copy p, .career-copy p, .expertise-content > p:not(.expertise-kicker), .project-dialog-copy p { font-family:var(--font-body); font-weight:400; }