/* 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");
  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");
  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");
  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(72px, 6.4vw, 96px);
  --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(38px, 3.5vw, 52px); }

.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 { --focused-panel-width: 62.5vw; position: relative; isolation: isolate; min-height: min(810px, 100svh); overflow: hidden; background: #000; }
 .hero-panels { position: absolute; inset: 0 0 56px; display: flex; width: 100%; overflow: hidden; }
.reel-panel { position: relative; flex: 0 0 auto; width: calc((100% - 4px) / 3); min-width: 0; height: 100%; margin: 0; overflow: hidden; cursor: pointer; border: 0; background: #000; contain: paint; will-change: width; transition: width .62s var(--ease), filter .45s ease; }
 .hero[data-focus] .reel-panel.is-focused { width: var(--focused-panel-width); }
.hero[data-focus] .reel-panel:not(.is-focused) { width: calc((100% - var(--focused-panel-width) - 4px) / 2); }
.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; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; will-change: inset, transform; transition: inset .62s var(--ease), transform .62s var(--ease), background .45s ease; }
.reel-media iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; border: 0; background: #000 !important; transform: translate(-50%, -50%); pointer-events: none; transition: width .62s var(--ease), height .62s var(--ease), min-width .62s var(--ease), min-height .62s var(--ease), transform .62s var(--ease); }
 .reel-panel.is-focused .reel-media { inset: 0; transform: none; background: #000; }
.reel-panel.is-focused .reel-media iframe { width: 100%; min-width: 0; height: 100%; min-height: 0; background: #000 !important; }
.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: cover; background: #050606; filter: saturate(.88) contrast(1.05) brightness(.82); transform: scale(1.015); }
.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: 38px; right: 38px; bottom: 44px; z-index: 9; display: grid; gap: 6px; opacity: 0; transform: translateY(14px); text-shadow: 0 2px 16px rgba(0,0,0,.9); transition: opacity .24s ease, transform .45s var(--ease); }
.reel-panel.is-focused { z-index: 8; }
.reel-panel.is-focused .reel-panel-label { opacity: 1; transform: translateY(0); }
 .reel-panel-label span { color: rgba(255,255,255,.42); font: 300 2.7rem/1 var(--font-display); }
.reel-panel-label strong { color: #f4f0e8; font-size: .84rem; letter-spacing: .22em; text-transform: uppercase; }
.reel-panel-label small { color: #ddb34f; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }
 .hero-vignette { position: absolute; inset: 0 0 56px; 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 4.3s .5s var(--ease) forwards; }
.hero-vignette::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 58%, rgba(208,164,61,.08), transparent 42%), linear-gradient(180deg, transparent, rgba(208,164,61,.02) 78%, transparent); opacity: 0; filter: none; animation: heroBloom 3.1s .6s var(--ease) forwards; }
@keyframes heroBloom { 0% { opacity: 0; transform: scale(.985); } 36% { opacity: .34; } 100% { opacity: .18; transform: scale(1); } }
@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(810px, 100svh); padding-top: 150px; padding-bottom: clamp(125px, 14vh, 165px); text-align: center; pointer-events: none; opacity: 1; }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.hero-message { display: grid; justify-items: center; opacity: 1; transform: translateY(0); filter: blur(0); transition: opacity .32s cubic-bezier(.22,.61,.36,1), transform .56s var(--ease), filter .48s ease; will-change: opacity, transform, filter; }
.hero[data-focus] .hero-message { opacity: 0; transform: translateY(8px); filter: blur(2px); }
.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: #e2ddd4; text-shadow: 0 2px 18px rgba(0,0,0,.55); 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: #d0cbc3; text-shadow: 0 2px 16px rgba(0,0,0,.48); 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; opacity: 1; transform: translateY(0); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .58s var(--ease); will-change: opacity, transform; }
.hero[data-focus] .hero-actions { opacity: .25; transform: translateY(3px); transition-duration: 5s, .58s; transition-timing-function: cubic-bezier(.22,.61,.36,1), var(--ease); }
.hero[data-focus] .hero-actions:hover,
.hero[data-focus] .hero-actions:focus-within,
.hero[data-focus].is-actions-engaged .hero-actions { opacity: 1; transform: translateY(0); transition-duration: .55s, .58s; }
.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: 56px; padding-inline: var(--gutter); background: rgba(7,8,8,.95); border-top: 1px solid rgba(255,255,255,.075); backdrop-filter: none; }
.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)); grid-auto-rows: 1fr; border-top: 1px solid var(--gold-line); }
 .media-item { display: grid; grid-template-columns: 48px 1fr; align-content: start; gap: 18px; min-height: 186px; padding: 24px 24px 22px; background: linear-gradient(180deg, rgba(208,164,61,.03), rgba(208,164,61,.012) 22%, transparent 55%); }
.media-item > div { display: flex; flex-direction: column; min-height: 100%; }
.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: #a8a49c; font-size: .77rem; line-height: 1.52; }
.media-item em { color: #bbb7ae; font-style: normal; }
.media-item a { display: inline-flex; margin-top: auto; padding-top: 16px; 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 40px; 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 17px; color: #aaa79f; font-size: clamp(.96rem, .12vw + .92rem, 1.02rem); line-height: 1.66; }
.about-copy .about-detail { color: #91918c; font-size: clamp(.88rem, .1vw + .84rem, .94rem); line-height: 1.65; }
.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(.88) brightness(.88) contrast(1.06); 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, 41vw, 590px); }
.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, 28vw, 405px); margin-top: clamp(-112px, -7vw, -72px); }
.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 32px; 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: 510px; 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(.84) brightness(.9) contrast(1.03); 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,.06), rgba(7,8,8,.18) 32%, rgba(7,8,8,.44) 58%, rgba(7,8,8,.86)); }
.expertise-card:hover::before { transform: scale(1.035); filter: saturate(.9) brightness(.96) contrast(1.02); }
.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 22px; color: #aaa79f; font-size: clamp(.86rem, .08vw + .83rem, .91rem); line-height: 1.58; }
.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: 32px; }
.featured-heading .section-title { margin-bottom: 0; }
 .project-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: clamp(13px, 1.55vw, 22px); height: 545px; align-items: center; }
.project-card { --card-height: 92%; --card-offset: 4px; position: relative; min-width: 0; height: var(--card-height); overflow: hidden; padding: 0; color: inherit; background: #0b0c0c; border: 1px solid rgba(203,158,56,.24); border-radius: clamp(48px, 5.2vw, 74px); cursor: pointer; text-align: left; transform: translateY(var(--card-offset)); transition: transform .55s var(--ease), border-color .4s ease, filter .4s ease; }
.project-card:nth-child(2) { --card-height: 84%; --card-offset: 24px; }
.project-card:nth-child(3) { --card-height: 100%; --card-offset: -8px; }
.project-card:nth-child(4) { --card-height: 89%; --card-offset: 13px; }
.project-card:nth-child(5) { --card-height: 83%; --card-offset: 28px; }
.project-card:nth-child(6) { --card-height: 95%; --card-offset: 1px; }
.project-card:hover { border-color: rgba(216,170,62,.68); transform: translateY(calc(var(--card-offset) - 8px)); }
.project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) brightness(.82) contrast(1.03); transition: transform .9s var(--ease), filter .65s ease; }
.project-card:hover img { transform: scale(1.06); filter: saturate(.96) brightness(.91) contrast(1.02); }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.04) 12%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.68) 79%, rgba(0,0,0,.48)); }
.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.section { padding-block: clamp(48px, 4.2vw, 62px); }
.career-grid { display: grid; grid-template-columns: minmax(300px,.86fr) minmax(0,1.55fr); gap: clamp(42px,5vw,72px); 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: #a9a69f; font-size: clamp(.9rem, .12vw + .86rem, .97rem); line-height: 1.65; }
.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: 116px; padding: 22px; 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: 250px; 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; filter: saturate(.78) brightness(.76) contrast(1.08); }
.contact-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,7,7,.88), rgba(6,7,7,.22) 18%, rgba(6,7,7,.14) 50%, rgba(6,7,7,.22) 82%, rgba(6,7,7,.88)), linear-gradient(180deg, rgba(6,7,7,.18), rgba(6,7,7,.58)); }
 .contact-content { padding-block: 48px; }
.contact-content h2 { margin: 0 0 12px; color: #d8d2c8; font-family: var(--font-light); font-size: clamp(2rem, 3.45vw, 3.5rem); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; }

 .contact-content > p { margin: 0 0 19px; color: #b0ada5; font-size: .9rem; line-height: 1.55; }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 64px; 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(18px); filter: brightness(.82) saturate(.86) blur(1px); transition: opacity .82s ease, transform .92s var(--ease), filter 1s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); filter: brightness(1) saturate(1) blur(0); }
.chapter-rule[data-reveal]::after { transform: scaleX(0); transform-origin: left center; transition: transform 1.2s .12s var(--ease); }
.chapter-rule[data-reveal].is-visible::after { transform: scaleX(1); }
.media-range, .about, .expertise, .featured, .career { position: relative; }
.media-range::before, .about::before, .expertise::before, .featured::before, .career::before { content: ""; position: absolute; z-index: 4; top: 0; left: var(--gutter); width: min(430px, 38vw); height: 1px; pointer-events: none; opacity: 0; transform: translateX(-14%) scaleX(.42); transform-origin: left center; background: linear-gradient(90deg, transparent, rgba(208,164,61,.18) 18%, rgba(239,220,174,.5) 48%, rgba(208,164,61,.16) 76%, transparent); filter: drop-shadow(0 0 7px rgba(208,164,61,.18)); }
.media-range.is-lit::before, .about.is-lit::before, .expertise.is-lit::before, .featured.is-lit::before, .career.is-lit::before { animation: sectionLightTrace 1.55s var(--ease) forwards; }
@keyframes sectionLightTrace { 0% { opacity: 0; transform: translateX(-14%) scaleX(.42); } 32% { opacity: .68; } 100% { opacity: .2; transform: translateX(0) scaleX(1); } }

@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; width: 180px; height: 490px; min-height: 490px; transform: none; scroll-snap-align: center; }
  .project-card:nth-child(n), .project-card:nth-child(n):hover { transform: none; }
  .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; background: #050606; }
  .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-message { opacity: 1; transform: none; filter: none; }
  .hero[data-focus] .hero-actions { opacity: 1; transform: 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: 78px; }
  .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; background: none; }
  .media-item p { font-size: .79rem; }
  .about-copy p { font-size: .94rem; }
  .about-copy .about-detail { font-size: .88rem; }
  .career-copy p { font-size: .91rem; }
  .expertise-content > p:not(.expertise-kicker) { font-size: .87rem; line-height: 1.58; }
  .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; width: 156px; height: 450px; 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) {
  .hero-message, .hero-actions { transition-duration: .01ms !important; }
  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; filter: none; }
  .media-range::before, .about::before, .expertise::before, .featured::before, .career::before { opacity: .16; 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; }

/* V6 — full-bleed media bridge between the cinematic hero and the inset editorial body. */
.media-range.section-compact {
  padding-block: 0;
}

.media-range {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(208,164,61,.018), transparent 34%),
    linear-gradient(180deg, #0a0b0b 0%, #080909 100%);
  border-top: 1px solid rgba(255,255,255,.065);
  border-bottom: 1px solid rgba(208,164,61,.17);
  box-shadow: 0 28px 72px rgba(0,0,0,.18);
}

.media-range > .page-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.media-range .chapter-rule {
  min-height: 54px;
  margin: 0;
  padding: 17px var(--gutter) 15px;
  background: rgba(4,5,5,.34);
  border-bottom: 1px solid rgba(208,164,61,.16);
}

.media-range .chapter-rule::before {
  width: clamp(34px, 3.2vw, 58px);
}

.media-range .chapter-rule::after {
  background: linear-gradient(90deg, rgba(208,164,61,.3), rgba(208,164,61,.08) 52%, transparent 100%);
}

.media-range .media-grid {
  width: 100%;
  border-top: 0;
  border-bottom: 0;
}

.media-range .media-item {
  position: relative;
  min-height: 218px;
  padding: 31px clamp(28px, 3.25vw, 62px) 29px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 38%),
    linear-gradient(90deg, rgba(208,164,61,.015), transparent 46%);
  transition: background .8s var(--ease);
}

.media-range .media-item::after {
  content: "";
  position: absolute;
  left: clamp(28px, 3.25vw, 62px);
  right: clamp(28px, 3.25vw, 62px);
  bottom: 0;
  height: 1px;
  opacity: 0;
  transform: scaleX(.34);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(208,164,61,.42), transparent 78%);
  transition: opacity .55s ease, transform .9s var(--ease);
}

.media-range .media-item:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), transparent 40%),
    radial-gradient(circle at 18% 32%, rgba(208,164,61,.038), transparent 48%);
}

.media-range .media-item:hover::after {
  opacity: .52;
  transform: scaleX(1);
}

.media-range .media-item + .media-item {
  border-left-color: rgba(255,255,255,.09);
}

.media-range .media-icon {
  margin-top: 1px;
  opacity: .92;
}

@media (max-width: 1080px) {
  .media-range .media-item {
    min-height: 205px;
    padding-inline: clamp(28px, 5vw, 54px);
  }

  .media-range .media-item::after {
    left: clamp(28px, 5vw, 54px);
    right: clamp(28px, 5vw, 54px);
  }
}

@media (max-width: 560px) {
  .media-range .chapter-rule {
    min-height: 50px;
    padding-inline: var(--gutter);
  }

  .media-range .media-item {
    min-height: 0;
    padding: 27px var(--gutter) 26px;
  }

  .media-range .media-item::after {
    left: var(--gutter);
    right: var(--gutter);
  }
}

/* V9 — iPhone/Safari mobile hero rebuilt around simple clipping.
   No transformed parent stacks, no viewport-height sizing, and no backdrop
   filters in the hero. Each Vimeo frame is cropped by a masked bar. */
html,
body {
  width: 100%;
  max-width: 100%;
}

.about {
  overflow: hidden;
  overflow: clip;
}

.site-menu {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: max(28px, env(safe-area-inset-top));
  padding-right: max(clamp(26px,5vw,54px), env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  padding-left: max(clamp(26px,5vw,54px), env(safe-area-inset-left));
}

.content-dialog {
  max-height: calc(100vh - 34px);
  max-height: calc(100dvh - 34px);
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px) {
  :root {
    /* Width-driven sizing stays stable while Safari's browser chrome expands
       and collapses. This avoids the giant/zoomed hero caused by vh/svh. */
    --mobile-hero-stage: clamp(350px, 108vw, 470px);
    --mobile-video-width: calc(var(--mobile-hero-stage) * 1.777778);
  }

  .site-header {
    height: calc(70px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-left: max(var(--gutter), env(safe-area-inset-left));
  }

  .site-header.is-scrolled {
    height: calc(62px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: rgba(7,8,8,.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hero {
    min-height: 0;
    overflow: hidden;
    background: #000;
  }

  .hero-panels {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
    width: 100%;
    height: var(--mobile-hero-stage);
    overflow: hidden;
    background: #000;
  }

  .reel-panel,
  .hero[data-focus] .reel-panel,
  .hero[data-focus] .reel-panel.is-focused,
  .reel-panel.is-mobile-active {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    clip-path: none !important;
    contain: none !important;
    transform: none !important;
    transition: none !important;
    background: #000;
    isolation: isolate;
    /* Forces WebKit to clip the cross-origin iframe to the narrow bar without
       promoting three huge transformed parent layers. */
    -webkit-mask-image: linear-gradient(#fff,#fff);
    mask-image: linear-gradient(#fff,#fff);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .reel-separator {
    position: relative;
    z-index: 8;
    display: block !important;
    width: 1px;
    min-width: 1px;
    height: 100%;
    transform: none !important;
    background: linear-gradient(180deg, transparent 4%, rgba(208,164,61,.24) 20%, rgba(255,255,255,.12) 50%, rgba(208,164,61,.22) 80%, transparent 96%);
  }

  .reel-media,
  .reel-panel.is-focused .reel-media {
    position: absolute;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    transform: none !important;
    background: #000;
    -webkit-mask-image: linear-gradient(#fff,#fff);
    mask-image: linear-gradient(#fff,#fff);
  }

  .reel-media iframe,
  .reel-panel.is-focused .reel-media iframe {
    position: absolute;
    top: 0 !important;
    left: 50% !important;
    width: var(--mobile-video-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--mobile-hero-stage) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 0 calc(var(--mobile-video-width) / -2) !important;
    border: 0;
    background: #000 !important;
    transform: none !important;
    -webkit-transform: none !important;
    pointer-events: none;
  }

  .reel-poster,
  .reel-panel.is-mobile-active .reel-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    visibility: visible;
    filter: saturate(.82) contrast(1.06) brightness(.78);
    transform: none !important;
  }

  .reel-panel.is-playing .reel-poster {
    opacity: 0;
  }

  .reel-panel--left .reel-poster { object-position: 48% center; }
  .reel-panel--center .reel-poster { object-position: 52% center; }
  .reel-panel--right .reel-poster { object-position: 58% center; }

  .reel-panel-shade,
  .hero[data-focus] .reel-panel:not(.is-focused) .reel-panel-shade,
  .reel-panel.is-focused .reel-panel-shade {
    background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.035) 32%, rgba(0,0,0,.1) 72%, rgba(0,0,0,.32));
  }

  .hero-vignette {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: var(--mobile-hero-stage);
    background:
      linear-gradient(180deg, rgba(0,0,0,.34), transparent 24%),
      linear-gradient(0deg, rgba(0,0,0,.28), transparent 24%);
  }

  .hero-vignette::after { display: none; }

  .hero-light {
    top: calc(env(safe-area-inset-top) + 10%);
    height: 46%;
    filter: blur(5px);
  }

  .hero-copy {
    position: relative;
    z-index: 20;
    min-height: 0;
    width: 100%;
    padding: 30px max(var(--gutter), env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    justify-content: center;
    background: linear-gradient(180deg, rgba(208,164,61,.035), transparent 38%), #080909;
    border-top: 1px solid rgba(208,164,61,.18);
    text-align: center;
    pointer-events: auto;
  }

  .hero-message,
  .hero[data-focus] .hero-message {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hero-actions,
  .hero[data-focus] .hero-actions,
  .hero[data-focus] .hero-actions:hover,
  .hero[data-focus] .hero-actions:focus-within,
  .hero[data-focus].is-actions-engaged .hero-actions {
    opacity: 1;
    transform: none;
    transition-duration: .4s;
  }

  .hero-copy .eyebrow {
    margin-bottom: 12px;
    font-size: .56rem;
    letter-spacing: .25em;
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 3rem);
    letter-spacing: .115em;
    line-height: 1.02;
  }

  .hero h1 small {
    margin-top: 14px;
    font-size: .31em;
    letter-spacing: .23em;
  }

  .hero-actions {
    gap: 10px 18px;
    margin-top: 24px;
  }

  .hero-actions .button {
    flex-basis: auto;
    width: auto;
    min-height: 44px;
    padding-inline: 20px;
  }

  .hero-reel-bar,
  .mobile-reel-tabs,
  .reel-panel-label {
    display: none !important;
  }

  .project-strip,
  .content-dialog {
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 560px) {
  :root {
    --mobile-hero-stage: clamp(340px, 106vw, 440px);
  }

  .hero-copy {
    padding-top: 27px;
    padding-bottom: max(30px, env(safe-area-inset-bottom));
  }

  .hero h1 {
    font-size: clamp(1.82rem, 9.4vw, 2.65rem);
  }

  .hero-actions {
    display: grid;
    justify-items: center;
    gap: 7px;
  }

  .hero-actions .button { margin-bottom: 2px; }
}

/* Keep Safari's compositing path intentionally boring. Backdrop filters and
   translateZ/translate3d on the iframe stack caused the actual iPhone layout
   to escape its bars even though Chromium emulation looked correct. */
@supports (-webkit-touch-callout: none) {
  body { min-height: -webkit-fill-available; }

  @media (max-width: 820px) {
    .hero-panels,
    .reel-panel,
    .reel-media,
    .reel-media iframe {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-transform: none !important;
      transform: none !important;
      will-change: auto !important;
    }

    .site-header.is-scrolled,
    .menu-backdrop,
    dialog::backdrop {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
  }
}