/* ITC Eras - Enrique's own typeface, taken from the four cuts shipped on his live site.
   His live CSS declares two aliases ("Eras" = ITC Eras LT Medium, "Eras-Bold" = ITC Eras LT
   Demi) with copy-pasted devanagari unicode-ranges the font has no glyphs for. This is one
   honest family across four real weights, so the fork can use light display type, book body
   copy, medium UI, and demi emphasis. Eras Light ships as a desktop TTF only and was
   converted to woff2 for the web (tools/ has the conversion). */
@font-face { font-family: "ITC Eras"; src: url("assets/fonts/eras-light.woff2") format("woff2");  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "ITC Eras"; src: url("assets/fonts/eras-book.woff2") format("woff2");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ITC Eras"; src: url("assets/fonts/eras-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ITC Eras"; src: url("assets/fonts/eras-demi.woff2") format("woff2");   font-weight: 600 700; font-style: normal; font-display: swap; }

/* Complete-package typography. Barlow is loaded by index.html from Google Fonts.
   The local system stack keeps the site readable if that request is blocked. */
: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: "ITC Eras", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-light: "ITC Eras", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "ITC Eras", "Segoe UI", "Helvetica Neue", Arial, 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; }

/* Desktop: the three hero panels ARE the reel control - each one opens its reel, and the tab
   strip beneath labels them, so a separate Watch Reels button is a second door to the same
   room. Phones keep it: there the panels collapse to a thin band where that is far less
   obvious. The button stays in the DOM (its listener is harmless) so nothing depends on it. */
@media (min-width: 821px) {
  .hero-actions .button[data-reel-open] { display: none; }
}
.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-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: 0; 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: 16px; left: 16px; color: rgba(255,255,255,.5); font-size: .56rem; letter-spacing: .18em; }
.project-name { position: absolute; z-index: 2; left: 16px; right: 14px; bottom: 44px; color: #f0ece4; font-size: .67rem; font-weight: 500; letter-spacing: .08em; line-height: 1.3; text-align: left; text-transform: uppercase; }
.project-role { position: absolute; z-index: 2; left: 16px; right: 14px; bottom: 22px; color: rgba(255,255,255,.55); font-size: .5rem; letter-spacing: .08em; line-height: 1.3; text-align: left; 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; }

/* The closing CTA no longer carries a paragraph, and that paragraph's margin was the only thing
   separating the heading from the buttons - they collapsed to the h2's own 12px. Give the action
   row its own spacing so it does not depend on copy that is no longer there. */
.contact-cta-actions { margin-top: 30px; }

 .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); }
/* Reel-sourced posters only. His reels letterbox the title and role into the frame, and the
   near-square modal crop cut the role line mid-phrase. Scaling past the slate removes it
   rather than showing a fragment. The source frames are 1920x1080 shown around 640px wide,
   so there is ample resolution for the tighter crop. Live-CMS posters are already clean
   stills and keep their full composition. */
/* A bar frame: the slate sits in black bands about 135 of 1080 rows deep, so scaling past them
   removes it and keeps the whole picture. Verified on EXODUS and Wreck-It Ralph. */
.project-dialog-media img[data-poster-slate="bars"] { transform: scale(1.34); transform-origin: center; }
/* An overlay frame paints the slate onto the image itself, so cropping would cut the shot (a
   1.34 scale on Hotel Transylvania lost the character entirely). Anchor left instead: his slate
   is set flush left, so the line reads from its start rather than as an orphaned fragment. */
.project-dialog-media img[data-poster-slate="overlay"] { object-position: left center; }
.project-dialog-media { overflow: hidden; }
.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; }

/* The project title was sized off the VIEWPORT (4vw, about 58px at desktop) but lives in a
   column roughly 278px wide. "EXODUS" fits; "HOTEL TRANSYLVANIA" needs 431px, so it overflowed
   the dialog and produced a horizontal scrollbar with the title clipped to "TRANSYLVAN".
   Size it off its own container instead, so a long title shrinks to fit rather than escaping.
   The upper bound keeps short titles as large as the design intends on a wide dialog. */
.project-dialog-copy { container-type: inline-size; }
.project-dialog-copy h2 {
  font-size: clamp(1.7rem, 12cqw, 4.25rem);
  overflow-wrap: break-word;
}
.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 { margin: 34px 0 40px; }
.filmography-item { padding: 14px 16px; }
.filmography-item strong { display: block; color: #cec9bf; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.filmography-item span { color: #777873; font-size: .64rem; }

.js [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; }
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); filter: brightness(1) saturate(1) blur(0); }

/* The featured cards carry data-reveal, so the rule directly above - specificity (0,3,0) - sets
   transform: translateY(0) on them and outranks `.project-card:hover` at (0,2,0). The designed
   8px hover lift has therefore never once fired; only the border and the image scale were
   responding. Restate both the resting offset and the lift at a specificity that wins, and
   confine it to >1080 so the <=1080 block that deliberately sets transform:none still holds. */
@media (min-width: 1081px) {
  .js .project-card[data-reveal].is-visible { transform: translateY(var(--card-offset)); }
  .js .project-card[data-reveal].is-visible:hover { transform: translateY(calc(var(--card-offset) - 8px)); }
}
.js .chapter-rule[data-reveal]::after { transform: scaleX(0); transform-origin: left center; transition: transform 1.2s .12s var(--ease); }
.js .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); }
    /* Below the desktop breakpoint the six-across volume bar stops working - cards would be
       ~140px wide - so this is where the 2x3 grid takes over. The staggered heights and offsets
       are a DESKTOP device; in an aligned grid they break the rows, so they reset here. */
    .project-strip {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: clamp(10px, 1.4vw, 18px);
      height: auto;
      align-items: stretch;
      padding: 0;
      margin-inline: 0;
      overflow: visible;
      scroll-snap-type: none;
    }
    .project-card {
      height: auto;
      min-height: 0;
      aspect-ratio: 4 / 3;
      scroll-snap-align: none;
    }
    .project-card:nth-child(n), .project-card:nth-child(n):hover {
      --card-height: auto; --card-offset: 0px; transform: none;
    }
    /* diagonal wavefront across the grid rather than the strip's left-to-right 1..6, which in
       two columns would wipe top-to-bottom in a Z and never relate the pair in a row */
    .js .project-card:nth-child(1).is-visible::before { animation-delay: .08s; }
    .js .project-card:nth-child(2).is-visible::before { animation-delay: .17s; }
    .js .project-card:nth-child(3).is-visible::before { animation-delay: .17s; }
    .js .project-card:nth-child(4).is-visible::before { animation-delay: .26s; }
    .js .project-card:nth-child(5).is-visible::before { animation-delay: .26s; }
    .js .project-card:nth-child(6).is-visible::before { animation-delay: .35s; }
  .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; }
  .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 { 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;
    }
  }
}

/* V10: Vimeo timecode editorial layer.
   One cue document drives a restrained hero lower-third and the expanded reel
   dossier. The mobile hero remains the tested three-strip Safari treatment. */

.reel-panel-label.reel-cue {
  left: clamp(34px, 4vw, 68px);
  right: auto;
  bottom: clamp(32px, 5.2vh, 54px);
  display: block;
  width: min(560px, calc(100% - 136px));
  max-width: 58%;
  gap: 0;
  pointer-events: none;
  text-align: left;
  text-shadow: 0 2px 22px rgba(0,0,0,.92);
}

.reel-panel[data-cue-dock="right"] .reel-panel-label.reel-cue {
  left: auto;
  right: clamp(46px, 4.7vw, 88px);
  text-align: right;
}

.reel-cue span,
.reel-cue strong,
.reel-cue small,
.reel-cue p {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.reel-cue [hidden] { display: none !important; }

.reel-cue__fallback {
  display: grid;
  gap: 6px;
}

.reel-cue__fallback > span {
  color: rgba(255,255,255,.42);
  font: 300 2.7rem/1 var(--font-display);
}

.reel-cue__fallback > strong {
  color: #f4f0e8;
  font: 500 .84rem/1.3 var(--font-display);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.reel-cue__fallback > small {
  color: #ddb34f;
  font: 500 .62rem/1.3 var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.reel-cue__timed {
  display: grid;
  justify-items: start;
  gap: 0;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .14s ease, transform .34s var(--ease), filter .25s ease;
}

.reel-panel[data-cue-dock="right"] .reel-cue__timed {
  justify-items: end;
}

.reel-cue__meta {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  color: var(--gold-bright);
  font: 500 .57rem/1.2 var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.reel-cue__meta span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.reel-cue__meta span + span {
  position: relative;
  padding-left: 12px;
  color: rgba(233,225,208,.68);
}

.reel-cue__meta span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-bright);
  transform: translateY(-50%);
}

.reel-cue__title {
  display: block;
  max-width: 100%;
  margin: 0;
  color: #eee9df !important;
  font: 300 clamp(1.75rem, 2.15vw, 2.55rem)/.98 var(--font-light) !important;
  letter-spacing: .075em !important;
  text-wrap: balance;
  text-transform: uppercase !important;
}

.reel-cue__credit {
  margin: 12px 0 0;
  color: rgba(232,227,217,.72) !important;
  font: 500 .62rem/1.45 var(--font-display) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.reel-cue__summary {
  max-width: 48ch;
  margin: 11px 0 0;
  color: rgba(224,219,209,.72) !important;
  font: 400 clamp(.72rem, .78vw, .84rem)/1.55 var(--font-body) !important;
  letter-spacing: .012em !important;
}

.reel-panel[data-cue-dock="right"] .reel-cue__summary {
  margin-left: auto;
}

.reel-cue__trace {
  display: block;
  width: 92px;
  height: 1px;
  margin-top: 17px;
  opacity: .38;
  background: linear-gradient(90deg, var(--gold-bright), rgba(208,164,61,.22), transparent);
  transform-origin: left center;
  filter: drop-shadow(0 0 5px rgba(208,164,61,.28));
}

.reel-panel[data-cue-dock="right"] .reel-cue__trace {
  margin-left: auto;
  background: linear-gradient(270deg, var(--gold-bright), rgba(208,164,61,.22), transparent);
  transform-origin: right center;
}

.reel-panel.is-cue-changing .reel-cue__timed {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(1.5px);
}

.reel-panel.is-cue-changing .reel-cue__trace {
  animation: reelCueTrace .48s var(--ease) both;
}

.reel-panel.is-cue-resolving .reel-cue__timed {
  animation: reelCueResolve .38s var(--ease) both;
}

.reel-cue[data-cue-mode="silent"] .reel-cue__timed,
.reel-cue[data-cue-mode="silent"] .reel-cue__trace {
  opacity: 0;
}

@keyframes reelCueTrace {
  0% { opacity: .16; transform: scaleX(.2); }
  46% { opacity: .86; transform: scaleX(1.35); }
  100% { opacity: .38; transform: scaleX(1); }
}

@keyframes reelCueResolve {
  from { opacity: 0; transform: translateY(7px); filter: blur(1.5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.reel-progress {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  background: rgba(208,164,61,.2);
  box-shadow: 0 -1px 0 rgba(255,255,255,.05), 0 -8px 22px rgba(208,164,61,.08);
  transition: opacity .3s ease;
}

.reel-panel.is-focused .reel-progress { opacity: 1; }

.reel-progress > i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #9e7327 0%, var(--gold-bright) 72%, #f1d477 100%);
  box-shadow: 0 0 12px rgba(208,164,61,.58), 0 -4px 14px rgba(208,164,61,.16);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.reel-progress > span {
  position: absolute;
  inset: 0;
}

.reel-progress b {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 12px;
  opacity: .62;
  background: rgba(231,211,165,.82);
  box-shadow: 0 0 5px rgba(208,164,61,.22);
  transform: translateX(-1px);
}

.reel-progress b.is-active {
  height: 18px;
  opacity: 1;
  background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(208,164,61,.72);
}

.hero[data-focus] .hero-actions {
    transform: translateY(5px);
    /* Tyler: start fading at once, but stay barely visible 1-2s longer before it goes.
       A transition cannot do this. Any monotonic easing that ENDS at 0 spends its tail
       asymptotically near 0, and measured on the live page a 2.9s cubic-bezier was already
       down to .06 by 1.4s - invisible against this hero, so the extra time bought nothing.
       Keyframes can hold a floor: down to .20 almost immediately, held at .20-.13 for about
       1.4s while you aim at it, then out. */
    animation: em-hero-actions-recede 2.8s cubic-bezier(.4, 0, .5, 1) forwards;
}

@keyframes em-hero-actions-recede {
  0%   { opacity: 1; }
  14%  { opacity: .20; }
  62%  { opacity: .13; }
  100% { opacity: 0; }
}

/* The <=820 and reduced-motion blocks that keep these controls visible both sit EARLIER in this
   file, and a media query adds no specificity, so the recede above would beat them on source
   order and fade out controls that are meant to stay put. Restate the cancel after it. */
@media (max-width: 820px) {
  .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 { animation: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-focus] .hero-actions { animation: none; opacity: 1; }
}

.hero[data-focus] .hero-actions:hover,
.hero[data-focus] .hero-actions:focus-within,
.hero[data-focus].is-actions-engaged .hero-actions {
    /* cancel the recede outright: a forwards-filled animation outranks a transition, so
       without this the controls could never come back once it had run */
    animation: none;
  opacity: 1;
  transform: translateY(0);
  transition-duration: .36s, .5s;
}

.hero.is-actions-engaged .reel-panel-label,
.hero.is-actions-engaged .reel-progress {
  opacity: .14;
}

/* Expanded reel dossier */
.reel-dialog {
  width: min(1420px, calc(100vw - 34px));
  max-height: calc(100vh - 34px);
  max-height: calc(100dvh - 34px);
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 82% 16%, rgba(173,132,45,.055), transparent 30%),
    #070808;
}

.reel-dialog .dialog-topbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 22px;
  min-height: 76px;
  padding: 13px 17px 13px 24px;
  background: rgba(7,8,8,.97);
}

.reel-dialog__status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(205,201,192,.54);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.reel-dialog__status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(208,164,61,.5);
  box-shadow: 0 0 0 0 rgba(208,164,61,.2);
}

.reel-dialog.is-playing .reel-dialog__status i {
  background: var(--gold-bright);
  box-shadow: 0 0 9px rgba(208,164,61,.52);
  animation: reelStatusPulse 2.1s ease-in-out infinite;
}

@keyframes reelStatusPulse {
  0%, 100% { opacity: .55; box-shadow: 0 0 0 0 rgba(208,164,61,.18); }
  50% { opacity: 1; box-shadow: 0 0 0 5px rgba(208,164,61,0); }
}

.reel-dialog__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 466px);
  min-height: 0;
}

.reel-stage-wrap {
  min-width: 0;
  background: #020303;
}

.reel-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-right: 1px solid var(--line);
}

.reel-stage-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #030404;
  pointer-events: none;
  filter: saturate(.84) contrast(1.06) brightness(.67);
  transition: opacity .8s ease, filter .8s ease;
}

.reel-dialog.is-playing .reel-stage-poster {
  opacity: 0;
  filter: saturate(.9) contrast(1.02) brightness(.78);
}

.reel-stage iframe {
  position: relative;
  z-index: 1;
  background: #020303;
}

.reel-stage-shade {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), transparent 26%),
    linear-gradient(0deg, rgba(0,0,0,.2), transparent 23%);
  opacity: 1;
  transition: opacity .55s ease;
}

.reel-dialog.is-playing .reel-stage-shade { opacity: .28; }

.reel-timecode {
  display: grid;
  grid-template-columns: auto minmax(40px,1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 34px;
  padding: 0 16px;
  color: rgba(207,203,195,.44);
  border-top: 1px solid rgba(255,255,255,.045);
  border-right: 1px solid var(--line);
  font: 500 .49rem/1 var(--font-display);
  letter-spacing: .13em;
}

.reel-timecode i {
  height: 1px;
  background: linear-gradient(90deg, rgba(208,164,61,.22), rgba(255,255,255,.055));
}

.reel-dossier {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 3.2vw, 48px) clamp(25px, 3vw, 42px) 27px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(208,164,61,.3) transparent;
  background:
    linear-gradient(180deg, rgba(208,164,61,.035), transparent 34%),
    #0a0b0b;
  border-left: 1px solid rgba(208,164,61,.1);
}

.reel-dossier::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(25px, 3vw, 42px);
  width: 94px;
  height: 1px;
  opacity: .45;
  background: linear-gradient(90deg, var(--gold-bright), transparent);
  box-shadow: 0 0 8px rgba(208,164,61,.22);
}

.reel-dossier__chapter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--gold-bright);
  font: 500 .55rem/1.2 var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.reel-dossier__chapter span:last-child {
  overflow: hidden;
  color: rgba(214,210,201,.5);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reel-dossier__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
  padding: 25px 0 30px;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .14s ease, transform .32s var(--ease), filter .24s ease;
}

.reel-dossier.is-changing .reel-dossier__copy {
  opacity: 0;
  transform: translateY(7px);
  filter: blur(1.4px);
}

.reel-dossier.is-resolving .reel-dossier__copy {
  animation: reelDossierResolve .4s var(--ease) both;
}

@keyframes reelDossierResolve {
  from { opacity: 0; transform: translateY(8px); filter: blur(1.5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.reel-dossier__copy h2 {
  max-width: 100%;
  margin: 0;
  color: #ded8cd;
  font: 300 clamp(2rem, 3vw, 3.35rem)/.95 var(--font-light);
  letter-spacing: .07em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
  text-transform: uppercase;
}

.reel-dossier[data-title-fit="long"] .reel-dossier__copy h2 {
  font-size: clamp(1.75rem, 2vw, 2.3rem);
  line-height: 1;
  letter-spacing: .055em;
}

.reel-dossier[data-title-fit="extended"] .reel-dossier__copy h2 {
  font-size: clamp(1.35rem, 1.7vw, 1.9rem);
  line-height: 1.04;
  letter-spacing: .038em;
}

.reel-dossier__credit {
  margin: 15px 0 0;
  color: rgba(215,210,199,.68);
  font: 500 .59rem/1.55 var(--font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.reel-dossier__note {
  max-width: 39ch;
  margin: 22px 0 0;
  color: #98968f;
  font-size: .79rem;
  line-height: 1.68;
}

/* A cue detail is optional now: most cues let the title and the reel's own role line speak, so
   this paragraph is often empty. Flex items do not collapse margins, so an empty one still
   contributed its 22px and opened a gap under the credit line. */
.reel-dossier__note:empty,
.reel-cue__summary:empty,
.project-dialog-copy p:empty { display: none; }

.reel-dossier__project {
  align-self: flex-start;
  color: var(--gold-bright);
}

.reel-dossier__project[hidden] { display: none !important; }

.reel-dossier__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 24px;
}

.reel-dossier__resume {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #d8c084;
  white-space: nowrap;
}

.reel-dossier__resume-icon {
  width: 16px;
  height: 16px;
  margin-left: 9px;
  opacity: .82;
  filter: invert(84%) sepia(20%) saturate(1041%) hue-rotate(355deg) brightness(88%);
}

.reel-dossier[data-cue-mode="silent"] .reel-dossier__copy {
  opacity: 0;
  pointer-events: none;
}

.reel-dossier__timeline {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.reel-dossier__timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(213,208,198,.45);
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.reel-dossier__track {
  position: relative;
  min-height: 38px;
  margin-top: 9px;
  cursor: default;
}

.reel-dossier__track > i {
  display: none;
}

.reel-dossier__track > div {
  display: grid;
  grid-template-columns: repeat(var(--chapter-columns, 10), minmax(0, 1fr));
  gap: 7px 0;
  background:
    linear-gradient(90deg, rgba(208,164,61,.14), rgba(255,255,255,.08), rgba(208,164,61,.14))
      center 16px / calc(100% - 22px) 1px no-repeat;
}

.reel-dossier__track > div[data-chapter-rows="2"] {
  background:
    linear-gradient(90deg, rgba(208,164,61,.14), rgba(255,255,255,.08), rgba(208,164,61,.14))
      center 16px / calc(100% - 22px) 1px no-repeat,
    linear-gradient(90deg, rgba(208,164,61,.14), rgba(255,255,255,.08), rgba(208,164,61,.14))
      center 55px / calc(100% - 22px) 1px no-repeat;
}

.reel-dossier__marker {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.reel-dossier__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(218,212,200,.44);
  border-radius: 50%;
  background: #0a0b0b;
  box-shadow: 0 0 0 3px #0a0b0b;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.reel-dossier__marker:hover,
.reel-dossier__marker:focus-visible {
  outline: 1px solid rgba(208,164,61,.72);
  outline-offset: -5px;
}

.reel-dossier__marker:hover::after,
.reel-dossier__marker:focus-visible::after {
  width: 9px;
  height: 9px;
  border-color: var(--gold-bright);
  background: rgba(208,164,61,.34);
  box-shadow: 0 0 0 3px #0a0b0b, 0 0 10px rgba(208,164,61,.28);
}

.reel-dossier__marker.is-active::after {
  width: 11px;
  height: 11px;
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  box-shadow: 0 0 0 3px #0a0b0b, 0 0 13px rgba(208,164,61,.52);
}

.reel-dossier__marker.is-past:not(.is-active)::after {
  border-color: rgba(208,164,61,.62);
  background: rgba(208,164,61,.22);
}

.reel-dossier__cue-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.reel-dossier__cue-nav button {
  padding: 6px 0;
  color: rgba(211,206,196,.52);
  background: none;
  border: 0;
  font-size: .49rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.reel-dossier__cue-nav button:last-child { text-align: right; }
.reel-dossier__cue-nav button:hover { color: var(--gold-bright); }

.reel-dossier__cue-nav span {
  color: rgba(222,216,205,.7);
  font: 300 .8rem/1 var(--font-light);
  letter-spacing: .08em;
}

.reel-dialog .reel-nav {
  min-height: 58px;
  background: rgba(7,8,8,.98);
}

@media (max-width: 1100px) and (min-width: 821px) {
  .reel-dialog__body {
    grid-template-columns: minmax(0,1fr) minmax(300px, 330px);
  }

  .reel-dossier {
    padding: 30px 27px 24px;
  }

  .reel-dossier::before { left: 27px; }
  .reel-dossier__copy { min-height: 220px; }
  .reel-dossier__copy h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
  .reel-dossier[data-title-fit="long"] .reel-dossier__copy h2 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); }
  .reel-dossier[data-title-fit="extended"] .reel-dossier__copy h2 { font-size: clamp(1.25rem, 2.15vw, 1.8rem); }
  .reel-dossier__note { font-size: .73rem; }
}

@media (max-width: 820px) {
  .reel-progress { display: none !important; }

  .reel-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
    max-height: calc(100dvh - 18px);
  }

  .reel-dialog .dialog-topbar {
    grid-template-columns: minmax(0,1fr) auto;
    min-height: 66px;
    padding: 11px 11px 11px 16px;
  }

  .reel-dialog .reel-dialog__status { display: none; }

  .reel-dialog__body {
    display: block;
  }

  .reel-stage {
    border-right: 0;
  }

  .reel-timecode {
    border-right: 0;
  }

  .reel-dossier {
    min-height: 335px;
    padding: 29px 24px 22px;
    overflow-y: visible;
    border-top: 1px solid rgba(208,164,61,.12);
    border-left: 0;
  }

  .reel-dossier::before { left: 24px; }
  .reel-dossier__copy { min-height: 188px; padding-block: 22px 24px; }
  .reel-dossier__copy h2 { font-size: clamp(1.85rem, 8vw, 2.7rem); }
  .reel-dossier[data-title-fit="long"] .reel-dossier__copy h2 { font-size: clamp(1.65rem, 6.7vw, 2.3rem); }
  .reel-dossier[data-title-fit="extended"] .reel-dossier__copy h2 { font-size: clamp(1.35rem, 5.8vw, 1.95rem); }
  .reel-dossier__note { max-width: 52ch; font-size: .76rem; line-height: 1.58; }
  .reel-dialog .reel-nav { min-height: 58px; padding-inline: 15px; }
}

@media (max-width: 560px) {
  .reel-dossier {
    min-height: 315px;
    padding: 25px 19px 19px;
  }

  .reel-dossier::before { left: 19px; }
  .reel-dossier__copy { min-height: 170px; padding-block: 20px; }
  .reel-dossier__copy h2 { font-size: clamp(1.7rem, 9vw, 2.3rem); }
  .reel-dossier[data-title-fit="long"] .reel-dossier__copy h2 { font-size: clamp(1.52rem, 7.6vw, 2rem); }
  .reel-dossier[data-title-fit="extended"] .reel-dossier__copy h2 { font-size: clamp(1.23rem, 6.3vw, 1.66rem); }
  .reel-dossier__credit { margin-top: 11px; font-size: .53rem; }
  .reel-dossier__note { margin-top: 15px; font-size: .71rem; }
  .reel-dossier__actions { margin-top: 17px; }
  .reel-dossier__timeline { padding-top: 16px; }
  .reel-dialog .reel-nav button { font-size: .47rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-panel.is-cue-changing .reel-cue__trace,
  .reel-panel.is-cue-resolving .reel-cue__timed,
  .reel-dossier.is-resolving .reel-dossier__copy,
  .reel-dialog.is-playing .reel-dialog__status i {
    animation: none !important;
  }

  .reel-cue__timed,
  .reel-dossier__copy,
  .reel-stage-poster,
  .reel-progress,
  .hero-actions {
    transition-duration: .001ms !important;
  }
}

/* Compact landscape / short-tablet reel viewer.
   The homepage remains in its tested mobile triptych mode through 820px, but a
   short viewport has enough horizontal room to keep the reel dossier beside
   the film and avoid forcing the chapter rail below the fold. */
@media (min-width: 720px) and (max-width: 820px) and (max-height: 950px) {
  .reel-dialog__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(282px, 310px);
  }

  .reel-stage { border-right: 1px solid var(--line); }
  .reel-timecode { border-right: 1px solid var(--line); }

  .reel-dossier {
    min-height: 0;
    padding: 22px 20px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid rgba(208,164,61,.1);
  }

  .reel-dossier::before { left: 20px; }

  .reel-dossier__copy {
    min-height: 0;
    padding: 17px 0 18px;
  }

  .reel-dossier__copy h2 {
    font-size: clamp(1.65rem, 4vw, 2rem);
  }

  .reel-dossier[data-title-fit="long"] .reel-dossier__copy h2 {
    font-size: clamp(1.35rem, 3.25vw, 1.65rem);
  }

  .reel-dossier[data-title-fit="extended"] .reel-dossier__copy h2 {
    font-size: clamp(1.12rem, 2.7vw, 1.38rem);
  }

  .reel-dossier__credit {
    margin-top: 10px;
    font-size: .5rem;
  }

  .reel-dossier__note {
    margin-top: 14px;
    font-size: .67rem;
    line-height: 1.5;
  }

  .reel-dossier__actions { margin-top: 13px; }
  .reel-dossier__timeline { padding-top: 12px; }
}

/* Silent timeline ranges are genuinely silent. These declarations outrank the
   cue-resolve keyframes so an animation cannot temporarily re-expose the timed
   container at the exact moment a silent beat begins. */
.reel-cue[data-cue-mode="silent"] .reel-cue__timed,
.reel-cue[data-cue-mode="silent"] .reel-cue__trace,
.reel-dossier[data-cue-mode="silent"] .reel-dossier__copy {
  opacity: 0 !important;
  animation: none !important;
}

.reel-dossier__cue-nav button {
  min-height: 40px;
  margin-block: -8px;
  display: inline-flex;
  align-items: center;
}

.reel-dossier__cue-nav button:last-child {
  justify-content: flex-end;
}

.reel-dialog .reel-nav button {
  min-height: 44px;
}

.reel-dossier__project {
  min-height: 44px;
}


/* ---- project modal: gallery + routes out ------------------------------------ */
/* The modal stays a preview. The gallery is a compact strip and the actions give a way
   into the reel at the verified timestamp and on to the full project page. */
.project-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.project-gallery figure { margin: 0; }
.project-gallery img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); }
.project-gallery figcaption { margin-top: 6px; color: #777873; font-size: .58rem; line-height: 1.35; }
.project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 28px; }
.project-actions .text-action { color: var(--gold-bright); }

/* ---- full work index -------------------------------------------------------- */
.filmography-group { margin-bottom: 34px; }
.filmography-group h3 { margin: 0 0 14px; color: var(--gold-bright); font-family: var(--font-display); font-size: .62rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.filmography-group .filmography-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .25s ease, padding-left .25s var(--ease); }
.filmography-group .filmography-item:hover,
.filmography-group .filmography-item:focus-visible { background: rgba(208,164,61,.06); padding-left: 26px; }
.filmography-group .filmography-item:hover strong,
.filmography-group .filmography-item:focus-visible strong { color: var(--gold-bright); }

/* 27 credits in a single column wasted the dialog's width and buried the film section
   under a long scroll; pair them up once there is room. */
@media (min-width: 900px) {
  .filmography-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .filmography-group h3 { grid-column: 1 / -1; }
}

/* Project modal layout fix (defect predates this work: verified against the untouched
   delivery build, where the close button lands in grid cell 1/1 and shoves the media into
   the right column and the copy onto a second row). `float` does nothing to a grid item, so
   place the two real panes explicitly and let the close button share the copy cell. */
.project-dialog-media { grid-area: 1 / 1; }
.project-dialog-copy  { grid-area: 1 / 2; }
.project-dialog > .dialog-close {
  grid-area: 1 / 2; justify-self: end; align-self: start;
  position: sticky; top: 16px; z-index: 5; float: none; margin: 16px;
}
@media (max-width: 900px) {
  /* stacked layout: the panes return to normal flow */
  .project-dialog-media, .project-dialog-copy, .project-dialog > .dialog-close { grid-area: auto; }
  .project-dialog > .dialog-close { justify-self: end; margin: 16px 16px -62px 0; }
}

/* Tap-target sizing. These eleven controls sit under the 40px comfortable minimum on a
   phone (verified identical in the pre-change build, so this is a standing issue rather
   than a regression). Adding min-height and centring keeps the visual weight identical
   while giving the touch area room. */
.brand,
.media-item a,
.expertise-content button,
.site-footer a,
.menu-meta a { display: inline-flex; align-items: center; min-height: 44px; }
.media-item a { margin-top: auto; }

@media (hover: none) and (pointer: coarse) {
  /* on touch, give the footer and menu rows a little breathing space too */
  .site-footer a, .menu-meta a { padding-block: 4px; }
}

/* Hero triptych: crop past the reel's burned-in captions.
   Enrique's reels print the project title near the top of the frame and the role near the
   bottom. The cover-fill sizing above leaves both inside the visible band, so fragments like
   "EXODUS", "| 2" and "& Compositing" were showing through the hero, clipped by the panel edges
   and reading as broken text rather than as his titling. Scaling the media in crops those bands
   away; the panels are narrow, so the extra horizontal crop costs nothing. The focused state is
   excluded because it deliberately shows the whole frame. */
.hero .reel-panel:not(.is-focused) .reel-media iframe {
  transform: translate(-50%, -50%) scale(1.28);
  transform-origin: center;
}

/* Expertise cards: keep the icon and eyebrow on one line across all three.
   The card content is bottom-anchored to the "Learn more" link, so a heading that wraps to one
   line instead of two pushed that card's icon and label 23px lower than its neighbours
   (measured: icons at 441 / 464 / 441). Reserving two lines for the heading realigns them
   without moving the link row. */
.expertise-content h3 { min-height: 2.6em; }

@media (max-width: 900px) {
  /* stacked cards have no neighbour to align to; let the heading collapse naturally */
  .expertise-content h3 { min-height: 0; }
}

/* "I AM ENRIQUE MUNOZ": give the tilde somewhere to live.
   The 0.95 line-height was set against the previous fallback face. ITC Eras Light carries its
   tilde high above the cap line, so at 101px the accent on the N in MUNOZ collided with the
   line above. 1.04 clears it and keeps the stacked display tight. */
.about-copy h2 { line-height: 1.04; }

/* Mobile hero: crop past the reel's burned-in captions.
   The desktop fix scales the iframe, but on phones an earlier iPhone layout fix sets
   `transform: none !important` on this stack and must stay, so the crop is done with size and
   offset instead. The iframe is sized to exactly the stage height there, which leaves both the
   title and the role text visible - fragments like "eo 3D" and "mpositing" were showing under
   the panels. Oversizing by --hero-zoom and pulling it up by half the overflow crops both bands.
   The panel already has overflow:hidden, so nothing escapes. */
@media (max-width: 820px) {
  .hero .reel-panel:not(.is-focused) .reel-media iframe {
    --hero-zoom: 1.32;
    width: calc(var(--mobile-video-width) * var(--hero-zoom)) !important;
    height: calc(var(--mobile-hero-stage) * var(--hero-zoom)) !important;
    top: calc(var(--mobile-hero-stage) * (1 - var(--hero-zoom)) / 2) !important;
    margin: 0 0 0 calc(var(--mobile-video-width) * var(--hero-zoom) / -2) !important;
  }
}

/* Menu panel: let a full nav reach the bottom of a short window.
   The panel is a fixed-height flex column with overflow visible, so once a seventh entry
   (Resume) was added the meta block - the resume download and the email address - sat 12px
   below the fold at 900px tall with no way to scroll to it. Making the panel scroll keeps every
   entry reachable at any window height, and the extra bottom padding clears iOS home-indicator
   space. */
.site-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* ---- expertise CTA: give it something to do on hover -----------------------
   These read "Learn More" three times over and had no hover state at all, so they looked
   inert next to cards that visibly respond. Each now names what it opens, and the rule
   underlines it from the left and carries the arrow with it, echoing the card's own lift. */
.expertise-content button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 5px;
  transition: color .3s ease, letter-spacing .35s var(--ease);
}
.expertise-content button::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.expertise-content button:hover,
.expertise-content button:focus-visible { color: #f0d79a; letter-spacing: .185em; }
.expertise-content button:hover::after,
.expertise-content button:focus-visible::after { transform: scaleX(1); }
.expertise-content button:hover .action-arrow,
.expertise-content button:focus-visible .action-arrow { transform: translateX(4px); opacity: 1; }

/* ---- featured projects: shimmer while the still loads ----------------------
   These cards are lazy-loaded stills on a near-black ground, so before they arrive the strip
   reads as a row of empty slots. A gold-tinted sweep over the placeholder says "loading" in the
   site's own palette rather than the usual grey skeleton. The class is removed the moment the
   image decodes, so a cached visit never shows it. */
@keyframes em-shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

.project-card.is-loading { background: #121213; }
.project-card.is-loading img { opacity: 0; }
.project-card img { transition: opacity .7s ease, transform .9s var(--ease), filter .65s ease; }

.project-card.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(208,164,61,.07), transparent 70%),
    #121213;
}
.project-card.is-loading::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0; bottom: 0; left: 0;
  width: 62%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(208,164,61,.05) 34%,
    rgba(233,201,132,.16) 50%,
    rgba(208,164,61,.05) 66%,
    transparent 100%);
  filter: blur(2px);
  animation: em-shimmer 1.9s var(--ease) infinite;
}
/* the resting gradient scrim must stay above the shimmer once the image lands */
.project-card:not(.is-loading)::after { animation: none; }

/* ---- featured projects: a sheen as they scroll into view --------------------
   The shimmer above is a LOADING state, so on a fast or cached visit it never appears and the
   strip just fades in. This is the pass Tyler asked for: one gold sweep across each card as it
   enters the viewport, the same light the hero uses for its cue trace. It rides ::before, which
   is otherwise only used while loading, so a card still waiting on its image keeps the
   placeholder and does not run both. Staggered per card so the strip lights up in sequence
   rather than flashing as one block. */
@keyframes em-card-sheen {
  from { transform: translateX(-130%); opacity: 0; }
  14%  { opacity: 1; }
  to   { transform: translateX(130%); opacity: 0; }
}

.js .project-card:not(.is-loading).is-visible::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0; bottom: 0; left: 0;
  width: 46%;
  pointer-events: none;
  /* Same specular profile the studio glint uses - a tight core inside broad dim shoulders -
     because a single soft band is a loading-skeleton shape wherever it appears. Wider and softer
     than the logo version on purpose: that one crosses flat marks on near-black, this one crosses
     a photograph, so the core stays broad enough to read as light raking a frame rather than a
     hard line scoring it. Blend stays `screen`; color-dodge would blow out the highlights already
     in the still. */
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(190,158,86,.03) 18%,
    rgba(226,205,150,.11) 38%,
    rgba(250,238,208,.46) 50%,
    rgba(226,205,150,.11) 62%,
    rgba(190,158,86,.03) 82%,
    transparent 100%);
  /* screen, so this reads as light passing OVER the still rather than a grey veil laid on top.
     The loading shimmer used .17 on a flat placeholder; over a photographic card at that value
     it was measurably animating and still invisible. */
  mix-blend-mode: screen;
  filter: blur(1.5px);
  animation: em-card-sheen .95s var(--ease) both;
}
/* Left to right across the six-across strip, which IS the wavefront in a single row. The 2x3
   grid below 1080 overrides these with a diagonal, because 1..6 in two columns is a Z. */
.js .project-card:nth-child(1).is-visible::before { animation-delay: .10s; }
.js .project-card:nth-child(2).is-visible::before { animation-delay: .19s; }
.js .project-card:nth-child(3).is-visible::before { animation-delay: .28s; }
.js .project-card:nth-child(4).is-visible::before { animation-delay: .37s; }
.js .project-card:nth-child(5).is-visible::before { animation-delay: .46s; }
.js .project-card:nth-child(6).is-visible::before { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  .js .project-card:not(.is-loading).is-visible::before { animation: none; content: none; }
}

/* ---- studio wall: one fast light, and the marks answer it ------------------
   Five passes to get here, and the last two failures were both structural rather than cosmetic.

   Pass 4 hid the marks completely and wiped them in, which read as a reveal, not as lighting.
   Pass 5 was slow, and its mask edge ran on an ease while the beam ran linear - so the light and
   the edge it was supposedly cutting travelled at different rates. That is what "disjointed"
   was: two systems with their own clocks, pretending to be one.

   The fix is to stop animating the flare at all. `mix-blend-mode: color-dodge` blows out
   highlights while leaving dark tones untouched (robbowen.digital, on CSS blend-mode shaders),
   and these are near-white glyphs on a near-black cell - so the beam lights the MARK and leaves
   the ground alone, by itself, with no second animation to fall out of sync. The only thing the
   marks animate now is a mask that opens them from dim to full, on the SAME linear timing as
   the beam. One light, one rate.

   Speed: the whole pass is .85s, under the featured-card sheen's 1.15s, because a glint should
   be over before you have finished registering it. Derived from that: the core's centre travels
   -17% -> 117% of the grid in .85s = 157.6%/s, so a column edge at E is reached at (E + 17)/157.6.
   Three columns give crossings beginning at .11 / .32 / .53s, each lasting .21s, plus the beam's
   own .05s start. */
@keyframes em-studio-beam {
  from { transform: translateX(0) skewX(-9deg); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  to   { transform: translateX(394%) skewX(-9deg); opacity: 0; }
}
@keyframes em-studio-etch {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}

.studio-grid { position: relative; overflow: hidden; }

/* TWO layers, travelling locked together, because a single gradient cannot do what metal does.

   The roll-off (::before, `multiply`) darkens the glyph JUST BEFORE and JUST AFTER the core
   passes, and is transparent at the centre so it never fights the highlight. That dark-bright-dark
   sequence is the whole trick - Effect Labs' chrome breakdown puts it plainly, "alternate between
   very dark and very light tones" - and it is what separates a reflective surface from a lamp
   shining on a flat one. On a #0a0a0a cell multiply is a no-op, so only the marks roll off.

   The core (::after, `color-dodge`) is the specular spike, tight and hot. Dodge divides by
   (1 - blend) so it blows out a near-white glyph and leaves the ground alone.

   Compositing two blend modes rather than stacking one gradient is Robb Owen's point about
   CSS-only shaders, and it is the difference here between "a light passed over that" and "that
   is made of metal". The core also carries a slight chromatic lean - warmer entering, cooler
   leaving - because a real highlight disperses rather than staying neutral white. */
.js .studio-grid.is-visible::before,
.js .studio-grid.is-visible::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -12%; bottom: -12%;
  left: -34%;
  width: 34%;
  pointer-events: none;
  animation: em-studio-beam .85s linear .05s both;
}

/* the dark roll-off, flanking the core on both sides */
.js .studio-grid.is-visible::before {
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 24%,
    rgba(0,0,0,.42) 39%,
    rgba(0,0,0,.10) 47%,
    transparent 50%,
    rgba(0,0,0,.10) 53%,
    rgba(0,0,0,.38) 61%,
    transparent 76%,
    transparent 100%);
  mix-blend-mode: multiply;
  filter: blur(2px);
}

/* the specular core */
.js .studio-grid.is-visible::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(198,158,74,.02) 30%,
    rgba(236,214,168,.07) 42%,
    rgba(255,248,232,.40) 49%,
    rgba(252,250,246,.44) 50.5%,
    rgba(226,222,232,.07) 58%,
    rgba(168,172,196,.02) 70%,
    transparent 100%);
  mix-blend-mode: color-dodge;
  filter: blur(1px);
}

/* The mask rides the mark permanently, parked open at rest so nothing shifts once it is done.
   Ahead of the light it is parked at .2 alpha - dim, but PRESENT. The mark is never absent, so
   the light lifts it rather than conjuring it. */
.studio-logo img {
  -webkit-mask-image: linear-gradient(99deg, #000 0%, #000 40%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.2) 100%);
          mask-image: linear-gradient(99deg, #000 0%, #000 40%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.2) 100%);
  -webkit-mask-size: 300% 100%;  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0;    mask-position: 0% 0;
}
.js .studio-grid:not(.is-visible) .studio-logo img {
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}

/* linear, so the mask edge and the beam move at exactly the same rate */
.js .studio-grid.is-visible .studio-logo img {
  animation: em-studio-etch var(--etch-dur, .21s) linear var(--etch-delay, 0s) backwards;
}
.studio-logo:nth-child(3n+1) { --etch-delay: .16s; }
.studio-logo:nth-child(3n+2) { --etch-delay: .37s; }
.studio-logo:nth-child(3n+3) { --etch-delay: .58s; }

@media (max-width: 820px) {
  /* two columns: each is 50% wide, so each crossing takes .51s and the second starts later */
  .studio-logo { --etch-dur: .32s; }
  .studio-logo:nth-child(2n+1) { --etch-delay: .16s; }
  .studio-logo:nth-child(2n)   { --etch-delay: .48s; }
}

@media (prefers-reduced-motion: reduce) {
  .js .studio-grid.is-visible::before,
  .js .studio-grid.is-visible::after { animation: none; content: none; }
  .js .studio-grid.is-visible .studio-logo img { animation: none; }
  /* never leave a mark stranded behind a closed mask when the animation is disabled */
  .js .studio-grid:not(.is-visible) .studio-logo img { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}


@media (prefers-reduced-motion: reduce) {
  /* keep the placeholder, drop the travelling highlight */
  .project-card.is-loading::after { animation: none; opacity: .5; }
  .project-card.is-loading img { opacity: 0; transition: none; }
}

/* ---- contact form ----------------------------------------------------------
   Lives inside the contact dialog. Hairline underlines that strike gold on focus, labels that
   ride up out of the field. The layout rules for the old inline section were removed when the
   form moved into the dialog; only the field mechanics below are still in use. */
.contact-form { display: grid; gap: clamp(24px, 3vw, 34px); }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; padding: 22px 2px 12px; color: #e2ddd4; background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font-family: var(--font-body); font-size: .95rem; line-height: 1.5;
  transition: border-color .35s ease;
}
.field textarea { resize: vertical; min-height: 132px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: transparent; }
/* ...but put the keyboard ring back. Blanket `outline:none` on :focus also strips the site's
   global :focus-visible ring, so a keyboard user was left with only a 1px underline. Mouse focus
   still gets the clean underline treatment; keyboard focus gets the ring as well. */
.field input:focus-visible, .field textarea:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 5px; }
.field label {
  position: absolute; left: 2px; top: 22px; transform-origin: left top;
  color: var(--soft); font-family: var(--font-display); font-size: .8rem; letter-spacing: .04em;
  pointer-events: none; transition: transform .4s var(--ease), color .3s ease;
}
/* placeholder=" " makes :placeholder-shown a reliable "is empty" test */
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-20px) scale(.72); color: var(--gold-bright);
}
.field-optional { color: var(--soft); font-size: .82em; letter-spacing: .02em; text-transform: none; }
.field-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-bright); transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--ease); }
.field input:focus ~ .field-line, .field textarea:focus ~ .field-line { transform: scaleX(1); }

.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: rgba(193,106,85,.75); }
.field.is-invalid .field-line { background: #c16a55; }
.field-error { margin: 8px 0 0; color: #c98a76; font-size: .7rem; letter-spacing: .04em; }

/* a real input, positioned out of reach of people but not of bots */
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 6px; }
.contact-form-status { margin: 0; color: var(--muted); font-size: .76rem; letter-spacing: .03em; }
.contact-form-status.is-error { color: #c98a76; }
.contact-form-status.is-ok { color: #9dbb86; }
.contact-form.is-sending [data-contact-submit] { opacity: .55; pointer-events: none; }

/* Sent state: retire the fields rather than leaving a used form on screen. */
.contact-form.is-sent .field, .contact-form.is-sent .contact-form-actions .button { display: none; }
.contact-form-sent { display: none; }
.contact-form.is-sent .contact-form-sent { display: block; }
.contact-form-sent h3 { margin: 0 0 10px; color: #d6d0c5; font-family: var(--font-light); font-size: 1.6rem; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; }
.contact-form-sent p { margin: 0; color: var(--muted); font-size: .88rem; }


/* ---- reel dossier: matching actions, and a scrubber that shows the chapters ------------
   The two actions were different colours and stacked, which read as two unrelated things. They
   are now one pair of matching outline buttons on a single line. */
.reel-dossier__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dossier-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 40px; padding: 0 16px;
  color: #d9d5cd; background: rgba(0,0,0,.22);
  border: 1px solid var(--gold-line); border-radius: 0;
  font-family: var(--font-display); font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.dossier-btn:hover, .dossier-btn:focus-visible {
  color: var(--gold-bright); background: rgba(208,164,61,.08); border-color: rgba(216,170,62,.6);
}
.dossier-btn:hover .action-arrow { transform: translateX(3px); opacity: 1; }
.dossier-btn__icon { width: 13px; height: 13px; object-fit: contain; opacity: .8;
  /* The SVG strokes in currentColor, which an <img> resolves to black. The hero copy of
     this icon is tinted gold by its own filter; here it sits beside the white VIEW PROJECT
     arrow, so it is inverted to white instead to match its neighbour rather than fight it. */
  filter: invert(1); }
.dossier-btn:hover .dossier-btn__icon { opacity: 1; }

/* The hero bar marks every chapter, but the modal's own scrubber did not, so inside the reel
   there was no sense of where the breaks fall. Same ticks, same meaning, on both. */
.reel-timecode i { position: relative; overflow: visible; }
.reel-timecode i > b[data-reel-stage-fill] {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(90deg, #9e7327, var(--gold-bright));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .18s linear;
}
.reel-timecode i > span[data-reel-stage-markers] { position: absolute; inset: 0; }
.reel-timecode i > span[data-reel-stage-markers] b {
  position: absolute; bottom: -3px; width: 1px; height: 7px;
  background: rgba(231,211,165,.6); transform: translateX(-.5px);
}
.reel-timecode i > span[data-reel-stage-markers] b.is-active {
  height: 11px; background: var(--gold-bright); box-shadow: 0 0 6px rgba(208,164,61,.6);
}

/* ---- hero progress bar becomes a real scrub target ------------------------------------
   It already draws every chapter break, so people aim at it to skip. It was
   pointer-events:none, so the click fell through to the panel and the reel opened at zero.
   It now opens at the point that was actually clicked. */
.reel-panel.is-focused .reel-progress { pointer-events: auto; cursor: pointer; }
.reel-progress::before {
  /* a taller invisible hit area: the bar itself is 3px, which is not a target */
  content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -6px;
}
.reel-panel.is-focused .reel-progress:hover > i { filter: brightness(1.15); }

/* ---- featured projects on a phone -------------------------------------------------------
   The horizontal strip is right on a desktop and tolerable on a tablet, but on a phone the
   cards collapse to 156x450 pills and sideways scrolling is not something you can signal
   without bolting on a carousel widget: arrows, dots, a "swipe" label. All of those cheapen it.

   So the phone does not scroll sideways at all. The same six projects become full-width
   letterbox frames stacked down the page, which is how a shot list or a contact sheet reads,
   and vertical scrolling needs no affordance because it is the only thing a phone does. The
   pill silhouette is a desktop signature; at this width it was already lost. */
@media (max-width: 820px) {
    /* stays 2-up; only the gap tightens */
    .project-strip { gap: 10px; }

  .project-card {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 0;
    transform: none;
  }
  .project-card:nth-child(n) { --card-height: auto; --card-offset: 0px; }

  /* caption reads along the bottom edge like a frame slate, not centred like a poster */
  .project-index {
    top: auto;
    bottom: 14px;
    left: 16px;
    transform: none;
    font-size: .58rem;
    letter-spacing: .2em;
  }
  .project-name {
    left: 46px;
    right: 16px;
    bottom: 30px;
    text-align: left;
    font-size: .78rem;
    line-height: 1.25;
    letter-spacing: .07em;
  }
  /* Keep the line break. Hiding it closes the gap with no space in its place and the caption
     reads "OVERWATCH:DRAGONS" - the same trap as the contact heading. Two lines is fine here;
     the card has the height for it. */
  .project-role {
    left: 46px;
    right: 16px;
    bottom: 12px;
    text-align: left;
    font-size: .58rem;
    opacity: 1;                 /* no hover on a phone, so the credit is always readable */
    transform: none;
  }
  /* weight the scrim to the bottom edge where the caption now sits */
  .project-card::after {
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.78) 100%);
  }
}

/* ---- contact dialog --------------------------------------------------------------------
   The form used to sit hardcoded in the page, which put a data-entry block at the end of a
   portfolio. It is a dialog now, and treated like a frame: a graded still on the left with a
   slate along its bottom edge, the form on the right. Same split and proportions as the project
   dialog, so it belongs to the same set rather than arriving as a web form. */
.contact-dialog { grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); }
.contact-dialog[open] { display: grid; }


/* ---- about dialog ----------------------------------------------------------
   The site never showed his face anywhere. This is the one place it does, so the
   portrait gets real size rather than the half-column it had on the old about page,
   where it read as a smudge. The still is already graded to black and vignetted, so
   it composites onto the dialog ground with no cutout or mask needed. */
/* display MUST be scoped to [open], exactly as .project-dialog and .contact-dialog do it.
   A closed <dialog> is display:none from the UA stylesheet; an unscoped author `display: grid`
   beats that, and the dialog renders inline in the page flow at the bottom of the document. */
.about-dialog {
  background: #000;
  width: min(1080px, 94vw);
  max-height: min(90vh, 900px);
  padding: 0;
  overflow: hidden;
}
.about-dialog[open] {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
}
/* The base .dialog-close uses position:sticky with float:right. Floats do not apply to grid
   items, so inside this grid it became a cell of its own and landed at the bottom left. Pin it. */
.about-dialog > .dialog-close {
  position: absolute;
  top: 14px; right: 14px;
  float: none;
  margin: 0;
  z-index: 6;
}
.about-dialog { position: relative; }

/* The plate is a vignette: it falls off to pure #000 so he emerges from the page with no edge.
   That only works if the black BEHIND it is the same black. It was not - the cell was #050505
   and the dialog #0a0b0b, so three blacks met and the falloff read as a rectangle. And covering
   a 1.78:1 frame into a portrait cell cropped the falloff away entirely, which is what turned a
   floating portrait into a boxed, over-scaled head. Match the black, contain instead of cover,
   and leave the grade alone. */
.about-dialog__portrait {
  position: relative;
  grid-area: 1 / 1;
  align-self: stretch;
  min-height: 460px;
  margin: 0;
  overflow: hidden;
  background: transparent;
}
/* COVER, not contain. The original works because its panel is tall and covers, showing the
   centre of the 1.78 frame at close to native size; the sides it crops are pure black, so the
   crop is invisible. Contain instead scales the whole frame down to the column width and leaves
   him a thumbnail. The only thing that must be true is that the ground behind is the same #000
   the plate falls off to, which is why .about-dialog sets it. No filter: lifting or crushing the
   grade is what separates the plate's black from the page's. */
.about-dialog__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}
.about-dialog__panel {
  grid-area: 1 / 2;
  align-self: center;
  padding: clamp(30px, 3.4vw, 54px) clamp(24px, 3vw, 46px);
  overflow-y: auto;
}
.about-dialog__panel h2 {
  margin: 10px 0 20px;
  color: #d8d1c7;
  font-family: var(--font-light);
  font-size: clamp(1.8rem, 2.6vw, 2.9rem);
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1.04;
  text-transform: uppercase;
}
.about-dialog__panel p {
  max-width: 46ch;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.72;
}
.about-dialog__actions { margin-top: 26px; }

/* An about should consolidate the facts that are otherwise scattered: where he is, what he is
   doing now, who he has done it for, and the two awards. All from his own resume. */
.about-facts { margin: 24px 0 0; padding: 0; }
.about-facts > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(208,164,61,.14);
}
.about-facts dt {
  margin: 0;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.7;
}
.about-facts dd {
  margin: 0;
  color: rgba(214,208,197,.78);
  font-size: .78rem;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .about-facts > div { grid-template-columns: 1fr; gap: 3px; }
}

/* The tool marks are the vendors' own, monochrome on black, so they need no treatment
   beyond a size and a resting opacity that lifts on hover. */
.about-tools { margin-top: 26px; }
.about-tools__label {
  display: block;
  margin-bottom: 14px;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.about-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-tools__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.about-tools__grid img {
  width: 42px; height: 42px;
  object-fit: contain;
  opacity: .72;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.about-tools__grid li:hover img { opacity: 1; transform: translateY(-2px); }
.about-tools__grid span {
  color: rgba(214,208,197,.62);
  font-family: var(--font-display);
  font-size: .55rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .about-dialog { max-height: 92vh; }
  .about-dialog[open] { grid-template-columns: 1fr; }
  .about-dialog__portrait { grid-area: auto; min-height: 0; aspect-ratio: 16 / 10; }
  /* Single column makes the panel as wide as the dialog (844px at a 900 viewport) while the
     prose keeps its 46ch measure, so the text hugged the left edge with up to 427px of dead
     space beside it across the whole tablet band. Cap the panel to a reading column and center
     it: the measure survives, and the block reads as deliberate instead of unfinished. */
  .about-dialog__panel { grid-area: auto; align-self: start; max-width: 30rem; margin-inline: auto; }
  .about-dialog__panel p { max-width: none; }
}
@media (max-width: 560px) {
  .about-tools__grid { gap: 14px 8px; }
  .about-tools__grid img { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-tools__grid img { transition: none; }
  .about-tools__grid li:hover img { transform: none; }
}

.contact-dialog__plate { position: relative; grid-area: 1 / 1; min-height: 520px; overflow: hidden; background: #050505; }
.contact-dialog__plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.86) contrast(1.06); }
.contact-dialog__grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.06) 42%, rgba(5,5,5,.78) 100%),
    radial-gradient(120% 80% at 30% 40%, rgba(208,164,61,.08), transparent 70%);
}
/* the letterbox bars are the point: it should read as a frame, not a photo */
.contact-dialog__plate::before,
.contact-dialog__plate::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34px; background: #050505; z-index: 2;
}
.contact-dialog__plate::before { top: 0; }
.contact-dialog__plate::after { bottom: 0; }

.contact-dialog__slate {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center;
  height: 34px; padding: 0 18px;
  color: rgba(214,208,197,.62);
  font-family: var(--font-display); font-size: .52rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}
.contact-dialog__slate span + span { position: relative; padding-left: 18px; }
.contact-dialog__slate span + span::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px;
  background: var(--gold-line); transform: translateY(-50%);
}

/* The slate is a fixed 34px band, so wrapping clips the second line AND draws the separator
   rule at the start of it, which reads as a dangling dash. Keep it to one line and drop the
   location on narrow screens; the footer already carries it. */
@media (max-width: 640px) {
  .contact-dialog__slate { flex-wrap: nowrap; gap: 0 12px; font-size: .46rem; letter-spacing: .14em; }
  .contact-dialog__slate span + span { padding-left: 12px; }
  .contact-dialog__slate span:nth-child(3) { display: none; }
}

.contact-dialog__panel { grid-area: 1 / 2; align-self: center; padding: clamp(34px, 4vw, 60px) clamp(26px, 3.4vw, 54px); }
.contact-dialog__panel h2 {
  margin: 12px 0 14px; color: #d8d1c7; font-family: var(--font-light);
  font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 300; letter-spacing: .06em;
  line-height: 1.04; text-transform: uppercase;
}
.contact-dialog__lede { max-width: 40ch; margin: 0 0 26px; color: var(--muted); font-size: .84rem; }
.contact-dialog .contact-form { gap: clamp(20px, 2.4vw, 28px); }
.contact-dialog > .dialog-close { grid-area: 1 / 2; justify-self: end; align-self: start; position: sticky; top: 16px; z-index: 5; float: none; margin: 16px; }

.contact-noscript { margin-top: 14px; color: var(--muted); font-size: .8rem; }
.contact-noscript a { color: var(--gold-bright); }

@media (max-width: 900px) {
  .contact-dialog[open] { display: block; }
  /* The plate still is 1920x787 (2.44:1). Sizing it with 30vh made the box height depend on the
   phone, so on a tall handset object-fit:cover cropped it to a narrow vertical slice and the
   conductor read as stretched. Give it the source's own ratio instead: the band is then
   proportionate at every width and nothing is cropped or distorted. */
.contact-dialog__plate { min-height: 0; height: auto; aspect-ratio: 1920 / 787; }
  .contact-dialog__panel { padding: 30px 24px 40px; }
  /* the line break stays: hiding it would render "Tell me aboutthe show." */
  .contact-dialog > .dialog-close { position: absolute; top: 10px; right: 10px; margin: 0; }
}

/* ---- featured strip on a phone, 2-up ---------------------------------------
   These have to live at the END of the file. The <=820 block sets the frame-slate caption and
   sits later in source order than the <=560 block up near the other mobile rules, and a media
   query adds no specificity - so anything written up there loses to it and silently does
   nothing. That is exactly what happened on the first attempt: the index stayed pinned to the
   bottom edge and the name kept its 46px indent.

   At 2-up a card is about 163px wide. Indenting the name 46px to clear the index leaves roughly
   100px of measure, so the index returns to the top corner and the caption takes the full width.
   The portrait aspect is here for the same reason: 4/3 at this width is only ~122px tall and the
   stills lose all presence. */
@media (max-width: 560px) {
  .project-card { aspect-ratio: 3 / 4; }
  .project-index { top: 10px; bottom: auto; left: 11px; font-size: .5rem; }
  .project-name { left: 11px; right: 11px; bottom: 26px; font-size: .6rem; line-height: 1.22; }
  .project-role { left: 11px; right: 11px; bottom: 9px; font-size: .46rem; }
}

/* ---- Expertise cards: lit surfaces, not photographs --------------------------------------
   The three cards used to sit on generated stills (a hanging lamp, a comp viewer, a chrome
   sphere). None of those frames were Enrique's, so they are gone and nothing photographic
   replaces them. Each card is now a dark plate with a texture drawn from its own discipline:

     01 Lighting          a warm key falling from the bulb icon into a pool on the floor
     02 Compositing       fine scan lines and a viewer grid, the surface a comp is judged on
     03 Look Development  brushed hairlines with a specular band that sweeps across on hover

   Grain is a 180px SVG noise tile at a constant 4.5% alpha, so it reads as surface rather than
   as an effect. The icon, the numeral and the copy are laid out as a column (head at the top,
   copy at the bottom) instead of floating over an image, which is what leaves the card full.

   This block lives at the END of the file on purpose. A media query adds no specificity, so a
   breakpoint rule written above a later base rule silently loses (that trap cost three bugs in
   this stylesheet already). Keep every expertise override below this line. */
.expertise-card {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 520px;
  padding: 34px 32px 30px;
  background: linear-gradient(180deg, #0c0d0d, #090a0a 58%, #0a0a0a);
}
.expertise-card::before,
.expertise-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.expertise-card::before { z-index: -2; transition: filter .8s ease, background-position 1.5s var(--ease); }
.expertise-card::after {
  z-index: -1;
  opacity: 0;
  background: radial-gradient(360px circle at var(--lx, 50%) var(--ly, -40%), rgba(240,215,154,.085), rgba(208,164,61,.03) 42%, transparent 70%);
  transition: opacity .6s ease;
}
.expertise-grid.is-lit .expertise-card::after { opacity: 1; }
.expertise-card:hover::before { filter: brightness(1.4); }

/* 01 - the bulb is the key light */
.expertise-card--lighting::before {
  background:
    var(--grain),
    radial-gradient(ellipse 46% 13% at 20% 100%, rgba(240,215,154,.13), rgba(208,164,61,.05) 45%, transparent 75%);
}
/* the beam hangs from the bulb, so it is anchored to the icon rather than to card coordinates */
.expertise-card--lighting .expertise-icon::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 640px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .78;
  background: conic-gradient(from 157deg at 50% 0, transparent 0deg, rgba(208,164,61,.06) 8deg, rgba(240,215,154,.15) 23deg, rgba(208,164,61,.06) 38deg, transparent 46deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 6%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.3) 100%);
          mask-image: linear-gradient(180deg, #000 6%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.3) 100%);
  transition: opacity .8s ease;
}
.expertise-card--lighting:hover .expertise-icon::after { opacity: 1; }
.expertise-card--lighting .expertise-icon::before { background: radial-gradient(circle, rgba(240,215,154,.2), rgba(208,164,61,.06) 60%, transparent 72%); }

/* 02 - the viewer: scan lines over a faint grid, lit from the upper right */
.expertise-card--compositing::before {
  background:
    var(--grain),
    radial-gradient(ellipse 78% 58% at 78% 18%, rgba(208,164,61,.075), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px),
    linear-gradient(rgba(208,164,61,.05) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(208,164,61,.05) 1px, transparent 1px) 0 0 / 44px 100%;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 70% 20%, #000 30%, rgba(0,0,0,.45) 100%);
          mask-image: radial-gradient(ellipse 120% 90% at 70% 20%, #000 30%, rgba(0,0,0,.45) 100%);
}

/* 03 - brushed surface; the specular band crosses it on hover */
.expertise-card--look::before {
  background:
    var(--grain),
    linear-gradient(124deg, transparent 34%, rgba(240,215,154,.025) 42%, rgba(240,215,154,.09) 50%, rgba(240,215,154,.025) 58%, transparent 66%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,.08) 1px 2px),
    radial-gradient(ellipse 72% 52% at 82% 16%, rgba(208,164,61,.08), transparent 70%);
  background-size: auto, 260% 100%, auto, auto;
  background-position: 0 0, 30% 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, repeat, no-repeat;
}
.expertise-card--look:hover::before { background-position: 0 0, 74% 0, 0 0, 0 0; }

/* head: icon in a lens ring on the left, the numeral set as an outline on the right */
.expertise-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.expertise-icon {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 14px 0 0 14px;          /* the ring (inset -14px) then starts on the text column */
  transition: color .45s ease;
}
.expertise-icon::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(208,164,61,.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208,164,61,.09), transparent 68%);
  transition: border-color .45s ease, transform .8s var(--ease);
}
.expertise-icon svg { position: relative; width: 50px; height: 50px; }
.expertise-card:hover .expertise-icon { color: var(--gold-bright); }
.expertise-card:hover .expertise-icon::before { border-color: rgba(208,164,61,.45); transform: scale(1.06); }
.expertise-number {
  position: static;
  margin-top: -8px;
  color: rgba(224,209,177,.11);
  font: italic 300 clamp(4.6rem, 5.4vw, 6.2rem)/.9 Georgia, serif;
  letter-spacing: -.02em;
}
@supports (-webkit-text-stroke: 1px #000) {
  .expertise-number { color: transparent; -webkit-text-stroke: 1px rgba(208,164,61,.3); }
}

/* copy: larger display line, a rule between the summary and the action */
.expertise-content { position: static; }
.expertise-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.expertise-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .7; }
.expertise-content h3 {
  max-width: 15ch;
  min-height: 2.4em;
  margin: 0 0 16px;
  color: #e4dfd5;
  font-family: var(--font-light);
  font-size: clamp(1.35rem, 1.15vw + .9rem, 1.95rem);
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.2;
}
.expertise-content > p:not(.expertise-kicker) {
  max-width: 36ch;
  margin: 0 0 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

/* Side by side, the three cards share rows through subgrid: head / light / kicker / heading /
   summary / action. The copy used to be bottom-anchored per card, so whenever one summary wrapped
   to a different line count than its neighbours (every width between about 821 and 1200) that
   card's kicker and heading sat a full line lower than the other two. Shared rows make the
   alignment structural instead of a min-height guess tuned to one width. */
@media (min-width: 821px) {
  .expertise-grid { grid-template-rows: auto minmax(40px, 1fr) repeat(4, auto); min-height: 520px; }
  /* justify-content from the flex rule above would pin the single column to its content width */
  .expertise-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 0; min-height: 0; }
  .expertise-content { display: grid; grid-row: 3 / span 4; grid-template-rows: subgrid; }
  .expertise-content h3 { min-height: 0; }
  /* a grid item stretches by default, which centred a wrapped label and threw the arrow to the far edge */
  .expertise-content button { justify-self: start; align-self: start; text-align: left; }
}

@media (max-width: 820px) {
  .expertise-card { min-height: 0; gap: 48px; padding: 30px 24px 24px; }
  .expertise-content h3 { min-height: 0; max-width: 18ch; }
  .expertise-icon { width: 56px; height: 56px; }
  .expertise-icon svg { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .expertise-card::before, .expertise-card::after, .expertise-icon::before, .expertise-icon::after { transition: none; }
  .expertise-card--look:hover::before { background-position: 0 0, 50% 0, 0 0, 0 0; }
}

/* ---- reel dialog: the one-line description each reel carries on his live Reels page ---- */
.reel-dialog__descriptor { margin-top: 3px; color: rgba(205,201,192,.6); font-size: .7rem; letter-spacing: .04em; }
.reel-dialog__descriptor:empty { display: none; }

/* ---- project dialog: a credit with no reel chapter has nothing to watch ----
   script.js sets [hidden] on the watch button, but .button's display:inline-flex outranks the
   browser's own [hidden] rule, so the grid-only credits showed an empty bordered box. */
.project-actions [hidden] { display: none !important; }

/* ---- hero, trimmed (2026-09-23, Enrique's request) ----
   The "I Create Emotion / Through Light & Image" statement is gone. The artist title is now the
   page's one H1 and carries the hero on its own: a gold signature line held between two fine
   rules, with the two text actions paired beneath it and a hairline between them. The reel
   panels do the talking; the copy is a caption. Specificity (.hero .hero-title) outranks every
   earlier `.hero h1` rule at every breakpoint, so the old display sizes cannot leak back in. */
.hero .hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 1.7vw, 28px);
  margin: 0;
  color: var(--gold-bright);
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
  font-family: var(--font-display);
  font-size: clamp(.78rem, .86vw, 1rem);
  font-weight: 500;
  letter-spacing: .42em;
  line-height: 1.5;
  text-transform: uppercase;
}
/* letter-spacing trails the last glyph; pull it back so both rules sit the same distance away */
.hero .hero-title span { display: block; margin-right: -.42em; }
.hero .hero-title::before,
.hero .hero-title::after {
  content: "";
  flex: 0 0 clamp(46px, 4.6vw, 86px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208,164,61,.62));
}
.hero .hero-title::after { background: linear-gradient(270deg, transparent, rgba(208,164,61,.62)); }

.hero-actions { margin-top: clamp(20px, 2.1vw, 28px); }
.hero-links { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 1.9vw, 28px); }
.hero-links-divider { width: 1px; height: 14px; background: rgba(208,164,61,.42); }

@media (max-width: 820px) {
  .hero .hero-title { font-size: .7rem; letter-spacing: .34em; gap: 16px; }
  .hero .hero-title span { margin-right: -.34em; }
  .hero .hero-title::before,
  .hero .hero-title::after { flex-basis: 34px; }
  .hero-actions { margin-top: 20px; }
}

/* Phone: the title needs the full width, so the side rules become one short rule beneath it,
   Watch Reels keeps its own row, and the two text actions share the row under it. */
@media (max-width: 560px) {
  .hero .hero-title { display: grid; justify-items: center; gap: 13px; font-size: .64rem; letter-spacing: .3em; }
  .hero .hero-title span { margin-right: -.3em; }
  .hero .hero-title::before { display: none; }
  .hero .hero-title::after { width: 38px; background: linear-gradient(90deg, transparent, rgba(208,164,61,.7), transparent); }
  .hero-actions { gap: 12px; margin-top: 18px; }
  .hero-links { gap: 16px; }
  .hero-links-divider { height: 12px; }
}

/* ---- footer credit (2026-09-23) ----
   One quiet signature line under the footer, home page only: flanked by the same fading gold
   rules as the hero title, the studio name brightening to gold with a centre-out underline on
   hover. Branded anchor, no keywords. */
.site-footer .site-credit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: -22px 0 0;
  padding-bottom: 10px;
}
.site-footer .site-credit::before,
.site-footer .site-credit::after {
  content: "";
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208,164,61,.32));
}
.site-footer .site-credit::after { background: linear-gradient(270deg, transparent, rgba(208,164,61,.32)); }
.site-footer .site-credit a {
  position: relative;
  gap: .6em;
  padding-left: .3em;
  color: #5d5e59;
  font-family: var(--font-display);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.site-footer .site-credit strong { color: #a19d94; font-weight: 500; transition: color .35s ease; }
.site-footer .site-credit a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 11px;
  height: 1px;
  background: var(--gold-bright);
  opacity: .8;
  transition: left .45s var(--ease), right .45s var(--ease);
}
.site-footer .site-credit a:hover,
.site-footer .site-credit a:focus-visible { color: #7a7a74; }
.site-footer .site-credit a:hover strong,
.site-footer .site-credit a:focus-visible strong { color: var(--gold-bright); }
.site-footer .site-credit a:hover::after,
.site-footer .site-credit a:focus-visible::after { left: .3em; right: .3em; }

@media (max-width: 820px) {
  .site-footer .site-credit { order: 4; margin-top: 2px; padding-bottom: 0; }
}