/* LOCAL REVISION 08 — maximum THREE designed font families; use only TWO.
   Manrope: headings, large navigation and project names.
   DM Sans: paragraphs, controls, labels and metadata.
   Arial is the shared fallback, not a third design choice.
   Approved wordmark is SVG paths; it does not load a font.
   Reuse these tokens rather than adding a family to individual components. */
:root {
  --font-heading: 'Manrope', Arial, sans-serif;
  --font-body: 'DM Sans', Arial, sans-serif;
}
    :root{--bg:#111110;--fg:#f1f0eb;--muted:#96958d;--line:#33332f;--ease:cubic-bezier(.22,1,.36,1)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);-webkit-font-smoothing:antialiased}body.lock{overflow:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:6px}::selection{background:#e7e5db;color:#111} .shell{padding-left:clamp(20px,3.6vw,72px);padding-right:clamp(20px,3.6vw,72px)}
    .site-header{height:90px;position:fixed;top:0;left:0;width:100%;z-index:30;display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;pointer-events:none}.site-header>*{pointer-events:auto}.brand{font-weight:800;font-family:var(--font-heading);font-size:clamp(16px,1.5vw,23px);letter-spacing:-.085em;white-space:nowrap}.brand span{font-weight:400;letter-spacing:-.04em}.header-end{display:flex;align-items:center;gap:35px;font-size:12px}.availability{display:flex;align-items:center;gap:8px;color:#d6d6d1}.dot{width:6px;height:6px;background:#d6e0c0;border-radius:50%;box-shadow:0 0 8px #d6e0c055}.menu-toggle{color:inherit;border:0;background:none;display:flex;align-items:center;gap:12px;text-transform:uppercase;font-size:11px;letter-spacing:.15em;padding:12px 0}.menu-toggle .symbol{font-size:23px;font-weight:300;line-height:10px}.menu-toggle .symbol:after{content:'+'}.menu-open .menu-toggle .symbol:after{content:'×'}
    .page{min-height:100vh}.view{display:none}.view.active{display:block;animation:pageIn .65s var(--ease)}@keyframes pageIn{from{opacity:.1;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
    .hero{height:min(860px,100svh);min-height:580px;position:relative;display:flex;flex-direction:column;justify-content:end;overflow:hidden}.hero-visual{position:absolute;inset:0;background:#282522 none center 45%/cover;transform:scale(1.09);animation:heroIn 1.9s var(--ease) forwards}.hero-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 65%),linear-gradient(90deg,rgba(0,0,0,.35),transparent 65%)}@keyframes heroIn{to{transform:scale(1)}}.hero-content{position:relative;z-index:1;padding-bottom:clamp(44px,7vw,100px)}.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}.eyebrow.light{color:#dbd9d2}.hero h1{font:500 clamp(66px,13.8vw,220px)/.91 var(--font-heading);letter-spacing:-.095em;margin:22px 0 18px;text-transform:uppercase}.hero-line{display:flex;align-items:end;justify-content:space-between;gap:20px}.hero-line p{margin:0;max-width:330px;font-size:clamp(12px,1.2vw,15px);line-height:1.7;color:#ddd}.scroll-indicator{font-size:11px;text-transform:uppercase;letter-spacing:.17em;display:flex;align-items:center;gap:20px}.scroll-indicator:after{content:'↓';font-size:21px}
    .section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;padding-top:105px;padding-bottom:30px}.section-heading h2{font:500 clamp(44px,8vw,114px)/.95 var(--font-heading);letter-spacing:-.085em;margin:10px 0 0}.section-heading .kicker{color:var(--muted);font-size:12px;letter-spacing:.14em}.small-link{font-size:12px;letter-spacing:.07em;border-bottom:1px solid #666;padding-bottom:7px;transition:opacity .3s}.small-link:hover{opacity:.5}
    .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px 18px}.project-card{min-width:0;display:block;text-align:left;border:0;background:transparent;color:inherit;padding:0}.project-card:nth-child(4n+2){padding-top:90px}.project-card:nth-child(4n+3){padding-right:15%}.project-image{aspect-ratio:1.45;position:relative;overflow:hidden;background:#292926}.project-image img{height:100%;width:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease),filter .6s;filter:saturate(.75)}.project-card:hover img{transform:scale(1.07);filter:saturate(1)}.project-image:after{content:'';position:absolute;inset:0;background:#000;opacity:.03;transition:opacity .5s}.project-card:hover .project-image:after{opacity:.2}.project-arrow{position:absolute;top:19px;right:22px;font-size:25px;line-height:1;opacity:0;transform:translate(-8px,8px);transition:.35s var(--ease);z-index:1}.project-card:hover .project-arrow{opacity:1;transform:none}.project-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:19px}.project-caption h3{font:500 clamp(18px,2.25vw,32px)/1.1 var(--font-heading);letter-spacing:-.055em;margin:0}.project-caption span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.section-bottom{display:flex;justify-content:center;padding:90px 0 135px}.pill-link{border:1px solid #777;background:transparent;color:inherit;border-radius:100px;padding:18px 32px;font-size:12px;text-transform:uppercase;letter-spacing:.13em;transition:background .3s,color .3s}.pill-link:hover{background:var(--fg);color:var(--bg)}
    .work-page,.about-page{padding-top:160px}.page-intro{padding-bottom:64px}.page-intro h1,.about-title{font:500 clamp(66px,13vw,190px)/.9 var(--font-heading);letter-spacing:-.09em;margin:20px 0}.page-intro p{color:#a8a69e;font-size:13px}.filter-bar{display:flex;flex-wrap:wrap;gap:8px 18px;padding-bottom:45px}.filter{background:transparent;border:0;color:#888;font-size:12px;padding:7px 0;transition:.2s}.filter.active{color:#fff;text-decoration:underline;text-underline-offset:8px}.filter:hover{color:#fff}.all-grid{padding-bottom:160px}.all-grid .project-card:nth-child(4n+2){padding-top:0}.all-grid .project-card:nth-child(4n+3){padding-right:0}.all-grid .project-image{aspect-ratio:1.54}
    .about-layout{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:30px 0 170px}.about-portrait{aspect-ratio:.86;background:#353533 none center/cover}.about-copy{padding-top:8vw}.about-copy h2{font:500 clamp(29px,3.5vw,58px)/1.15 var(--font-heading);letter-spacing:-.065em;margin:0 0 42px}.about-copy p{max-width:570px;font-size:15px;line-height:1.9;color:#aeadab}.about-facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:50px;padding-top:22px;gap:20px}.about-facts .label{color:#777;font-size:10px;text-transform:uppercase;letter-spacing:.13em}.about-facts .value{font-size:15px;margin-top:13px}
    .detail-page{padding-top:125px}.detail-top{padding-bottom:45px}.back-btn{border:none;color:#aaa;background:transparent;font-size:12px;text-transform:uppercase;letter-spacing:.13em;padding:12px 0}.back-btn:hover{color:#fff}.detail-title{font:500 clamp(58px,10.5vw,165px)/.94 var(--font-heading);letter-spacing:-.085em;margin:35px 0 22px;max-width:1100}.detail-category{color:#a7a6a1;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.detail-hero{width:100%;height:min(68vw,760px);min-height:370px;object-fit:cover;display:block}.detail-info{display:grid;grid-template-columns:1.15fr 1fr;gap:10vw;padding-top:75px;padding-bottom:145px}.detail-summary{font:400 clamp(26px,3vw,45px)/1.3 var(--font-heading);letter-spacing:-.04em;margin:0}.credits{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid var(--line);padding-top:22px}.credits .label{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.13em}.credits .value{font-size:14px;margin-top:10px}.next-project{border-top:1px solid var(--line);padding:65px 0 90px;display:block}.next-project .eyebrow{color:#aaa}.next-project strong{display:block;font:500 clamp(48px,9vw,130px)/1 var(--font-heading);letter-spacing:-.075em;margin-top:16px}.next-project:hover strong{opacity:.65}
    .footer{border-top:1px solid var(--line);padding-top:55px;padding-bottom:30px}.footer-intro{display:flex;justify-content:space-between;gap:25px;align-items:start}.footer-intro h2{font:500 clamp(50px,10vw,145px)/.95 var(--font-heading);letter-spacing:-.09em;margin:10px 0 80px}.footer-intro h2 a{border-bottom:2px solid currentColor}.footer-meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#999;font-size:11px}.footer-meta a:hover{color:#fff}
    .nav-overlay{position:fixed;inset:0;background:#e9e8e2;color:#171715;z-index:25;display:flex;flex-direction:column;justify-content:center;padding:120px clamp(20px,7vw,110px) 45px;opacity:0;visibility:hidden;transform:translateY(-25px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s}.menu-open .nav-overlay{opacity:1;visibility:visible;transform:none}.nav-item{display:flex;align-items:baseline;gap:25px;width:fit-content;background:transparent;border:0;color:inherit;padding:12px 0;text-align:left;font:500 clamp(64px,10.5vw,165px)/.98 var(--font-heading);letter-spacing:-.09em;transition:opacity .2s,transform .4s var(--ease)}.nav-item:hover{opacity:.5;transform:translateX(12px)}.nav-item small{font:500 12px var(--font-body);letter-spacing:0}.nav-foot{margin-top:auto;display:flex;justify-content:space-between;font-size:12px;color:#666}.menu-open .site-header{mix-blend-mode:normal;color:#141413}.menu-open .dot{background:#333}
    .reveal{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.reveal.visible{opacity:1;transform:none}.hidden{display:none!important}
    @media(max-width:800px){.site-header{height:74px}.availability{display:none}.hero{min-height:660px;height:100svh}.hero h1{font-size:clamp(58px,14vw,110px)}.hero-line{align-items:start;flex-direction:column;gap:36px}.hero-content{padding-bottom:47px}.section-heading{padding-top:75px}.work-grid{grid-template-columns:1fr;gap:42px}.project-card:nth-child(4n+2){padding-top:0}.project-card:nth-child(4n+3){padding-right:0}.project-image{aspect-ratio:1.28}.project-caption h3{font-size:24px}.section-bottom{padding:65px 0 85px}.work-page,.about-page{padding-top:125px}.page-intro{padding-bottom:35px}.all-grid{padding-bottom:85px}.about-layout{grid-template-columns:1fr;padding-bottom:90px}.about-copy{padding-top:15px}.detail-page{padding-top:105px}.detail-title{margin:22px 0}.detail-hero{height:57vh;min-height:280px}.detail-info{grid-template-columns:1fr;gap:40px;padding:55px 0 90px}.footer-intro h2{margin-bottom:70px}.nav-item{gap:18px;font-size:clamp(58px,13vw,100px)}.nav-overlay{padding-top:100px}}
    @media(max-width:450px){.hero h1{font-size:13.4vw}.hero{min-height:540px}.section-heading h2{font-size:48px}.section-heading .small-link{display:none}.page-intro h1,.about-title{font-size:65px}.project-caption span{font-size:10px}.filter-bar{gap:8px 14px}.footer-intro h2{font-size:12vw}.nav-item{font-size:14vw}.nav-foot{flex-direction:column;gap:12px}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* V3 — native-ratio video portfolio enhancements */

:root{--soft:#c4c1b8;--accent:#e7e5db}
[hidden]{display:none!important}
html{scroll-padding-top:100px}
body{overflow-x:hidden}
button,input,select{font:inherit}
input,select{color:inherit}
.skip-link{position:fixed;top:12px;left:12px;padding:14px 22px;background:var(--fg);color:var(--bg);z-index:100;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.site-header{mix-blend-mode:normal;background:linear-gradient(#111110b3,transparent);color:#f1f0eb}
.site-header .brand{letter-spacing:-.075em}
.hero-visual{background:#171716;animation:heroIn 1.9s var(--ease)}
.hero-visual img,.hero-visual video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-visual video{opacity:0;transition:opacity .7s}
.hero-visual.is-playing video{opacity:1}
.hero-visual:after{background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.03) 75%),linear-gradient(90deg,rgba(0,0,0,.35),transparent 85%)}
.hero-content{pointer-events:none}
.hero-content a,.hero-content button{pointer-events:auto}
.hero h1{font-size:clamp(58px,13.1vw,210px);font-weight:500;letter-spacing:-.086em}
.hero-line p{max-width:380px}
.hero-controls{position:absolute;right:clamp(20px,3.6vw,72px);top:115px;z-index:2;display:flex;align-items:center;gap:18px}
.hero-film-link{font-size:11px;letter-spacing:.13em;text-transform:uppercase;text-shadow:0 1px 12px #000}
.hero-motion{width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:#0003;color:#fff;display:grid;place-items:center}
.hero-motion:hover{background:#fff;color:#111}
.scroll-indicator{border:0;background:none;color:inherit;padding:10px 0;text-align:left}
.section-heading h2{font-size:clamp(42px,7.6vw,106px)}
.index-count{font:500 .22em/1.3 var(--font-body);letter-spacing:0;vertical-align:top;display:inline-block;margin-left:12px;padding-top:5px}
.page-intro h1{font-size:clamp(66px,11.5vw,170px)}
.page-intro{padding-bottom:38px}
.work-page{padding-top:146px}
.work-tools{margin-bottom:34px;border-bottom:1px solid var(--line)}
.filter-bar{gap:8px 28px;padding-bottom:23px;align-items:center}
.filter{min-height:44px;font-size:13px;display:inline-flex;gap:7px;align-items:center;color:#b1afa7}
.filter .filter-count{color:#8d8b83;font-size:10px;align-self:center}
.filter.active{color:var(--fg);text-decoration:none}
.filter.active:after{content:'';width:5px;height:5px;background:var(--fg);border-radius:50%;margin-left:2px}
.filter.active .filter-count{color:var(--fg)}
.utility-bar{display:flex;flex-wrap:wrap;gap:16px 25px;align-items:center;justify-content:space-between;padding-bottom:23px}
.utility-start,.utility-end{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:10px;min-width:180px}
.search-icon{font-size:22px;color:#9d9b93;line-height:1}
.search-box input{width:205px;border:0;border-bottom:1px solid transparent;background:none;padding:10px 0;font-size:12px;border-radius:0}
.search-box input::placeholder{color:#8e8d85}
.search-box input:focus{outline:0;border-bottom-color:#888}
.format-label{display:flex;align-items:center;gap:8px;font-size:11px;color:#a8a69e}
.format-label select{background:#171715;color:var(--fg);border:1px solid #45453d;border-radius:0;padding:10px 24px 10px 12px;font-size:12px;max-width:180px;min-height:42px}
.motion-switch,.reset-filter{min-height:44px;border:0;background:none;color:#b8b5ad;font-size:11px;letter-spacing:.04em;padding:5px 0}
.motion-switch:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#888;margin-right:8px}
.motion-switch[aria-pressed=true]:before{background:#d6e0c0}
.motion-switch:disabled{opacity:.7;cursor:default}
.reset-filter{text-decoration:underline;text-underline-offset:4px}
.results-label{font-size:11px;letter-spacing:.04em;color:#929088;margin:0 0 25px;min-height:15px}
.media-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:50px 22px;align-items:start}
.media-grid .project-card{grid-column:span 3;padding:0!important;align-self:start;min-width:0;position:relative}
.media-grid .project-card[data-orientation=landscape]{grid-column:span 6}
.media-grid .project-image{width:100%;height:auto;aspect-ratio:var(--ratio);background:#20201d;isolation:isolate}
.media-grid .project-image img,.media-grid .project-image video{width:100%;height:100%;object-fit:contain;display:block;position:absolute;inset:0;filter:none;transform:none!important}
.media-grid .project-image img{transition:opacity .35s}
.media-grid .project-image video{opacity:0;transition:opacity .35s;pointer-events:none}
.media-grid .project-card.is-playing video{opacity:1}
.media-grid .project-card.is-playing img{opacity:0}
.media-grid .project-image:after{background:linear-gradient(transparent 60%,#0005);opacity:.65;pointer-events:none;z-index:1}
.media-grid .project-card:hover .project-image:after{opacity:.3}
.media-grid .project-image:before{content:'';position:absolute;inset:0;border:1px solid #ffffff12;z-index:3;pointer-events:none}
.media-badge{position:absolute;z-index:2;padding:6px 8px;font-size:9px;font-weight:500;letter-spacing:.08em;background:#1119;color:#f4f3ef;backdrop-filter:blur(8px)}
.ratio-badge{left:12px;top:12px}
.duration-badge{left:12px;bottom:12px;letter-spacing:.04em}
.media-grid .project-arrow{right:14px;top:auto;bottom:15px;font-size:20px;z-index:2;opacity:1;transform:none}
.media-grid .project-caption{display:block;padding-top:15px}
.media-grid .project-caption h3{font-size:clamp(18px,1.6vw,25px);letter-spacing:-.045em;line-height:1.12;overflow-wrap:anywhere}
.media-grid .project-caption span{display:block;font-size:10px;margin-top:8px;white-space:normal;line-height:1.4}
.media-grid .project-card:focus-visible{outline-offset:8px}
.media-grid .project-card:hover .project-caption h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
#featuredGrid .project-card{grid-column:span 4}
#featuredGrid .project-card[data-orientation=landscape]{grid-column:span 8}
#featuredGrid .project-card:nth-child(even){margin-top:8vw}
#featuredGrid .project-caption h3{font-size:clamp(25px,3vw,40px)}
.all-grid{padding-bottom:115px}
.empty-state{border-top:1px solid var(--line);padding:60px 0 120px;min-height:300px}
.empty-state h2{font:500 clamp(32px,4vw,60px)/1.1 var(--font-heading);letter-spacing:-.05em;margin:0 0 20px}
.empty-state p{font-size:14px;line-height:1.8;color:#b1aea5;max-width:510px}
.empty-state .pill-link{display:inline-block;margin-top:18px}
.detail-page{padding-top:118px}
.detail-title{font-size:clamp(45px,8.2vw,116px);max-width:1250px;overflow-wrap:anywhere;margin-top:24px}
.detail-category{line-height:1.8;font-size:11px}
.detail-top{padding-bottom:32px}
.player-shell{padding:0 clamp(20px,3.6vw,72px);display:flex;justify-content:center}
.film-frame{width:min(100%,calc(80svh * var(--ratio)),1440px);aspect-ratio:var(--ratio);position:relative;background:#080808;border:1px solid #ffffff10}
.film-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#080808}
.film-frame video:fullscreen{object-fit:contain}
.film-frame .watch-button{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;border:0;background:#0002;color:#fff;cursor:pointer;transition:background .3s}
.watch-button:hover{background:#0004}
.play-disc{display:grid;place-items:center;width:82px;height:82px;border:1px solid #fff9;border-radius:50%;background:#0003;backdrop-filter:blur(8px);font-size:24px;padding-left:3px;transition:transform .3s}
.watch-button:hover .play-disc{transform:scale(1.08)}
.watch-label{font-size:10px;letter-spacing:.18em;text-shadow:0 2px 12px #000}
.player-notes{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#a4a198;font-size:11px;padding-top:18px}
.player-notes a{border-bottom:1px solid #666;padding-bottom:4px}
.player-status{max-width:780px;margin:16px 0 0;color:#d7d0bf;font-size:13px;line-height:1.7}
.detail-info{padding-top:60px;padding-bottom:95px;gap:8vw}
.detail-summary{font-size:clamp(24px,2.7vw,39px)}
.credits .value{line-height:1.6;overflow-wrap:anywhere}
.credits .label{color:#a5a297}
.about-title{font-size:clamp(64px,10vw,140px)}
.about-portrait{background:#20201e;position:relative;overflow:hidden}
.about-portrait img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.8)}
.about-portrait span{position:absolute;bottom:20px;left:20px;right:20px;font-size:10px;letter-spacing:.16em;color:#fff;text-shadow:0 2px 8px #000}
.footer-intro>span{max-width:180px;line-height:1.8;font-size:10px}
.nav-overlay{overflow-y:auto}
.nav-foot{padding-top:35px;gap:20px;flex-wrap:wrap}
.menu-open .site-header{background:#e9e8e2;color:#141413}
.menu-open .availability{color:#333}
.nav-item{padding:10px 0;font-size:clamp(58px,10vw,145px)}
.notice-box{margin:90px 20px;padding:30px;border:1px solid #777;line-height:1.8}
@media(min-width:1700px){.shell{max-width:1920px;margin-left:auto;margin-right:auto}.site-header{max-width:none}.hero-content{width:100%}.media-grid{gap:65px 28px}.media-grid .project-caption h3{font-size:27px}}
@media(max-width:1000px){
 .media-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:42px 20px}
 .media-grid .project-card{grid-column:span 2}
 .media-grid .project-card[data-orientation=landscape]{grid-column:span 4}
 #featuredGrid .project-card{grid-column:span 2}
 #featuredGrid .project-card[data-orientation=landscape]{grid-column:span 4}
 .filter-bar{gap:4px 21px}
 .utility-start{gap:18px}
}
@media(max-width:800px){
 .hero-controls{top:94px}
 .hero{min-height:580px}
 .hero-line{gap:22px}
 .hero h1{font-size:13.1vw}
 .section-heading .small-link{font-size:10px}
 .work-page{padding-top:113px}
 .detail-title{font-size:clamp(43px,9vw,75px)}
 .film-frame{width:min(100%,calc(76svh * var(--ratio)))}
 .detail-info{grid-template-columns:1fr;gap:40px;padding-top:46px;padding-bottom:70px}
 .about-layout{gap:30px}
 .utility-bar{gap:5px}
 .utility-start{justify-content:space-between;width:100%}
 .utility-end{width:100%;justify-content:space-between}
 .nav-foot{margin-top:40px}
}
@media(max-width:600px){
 .media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:31px 14px}
 .media-grid .project-card{grid-column:span 1}
 .media-grid .project-card[data-orientation=landscape]{grid-column:span 2}
 #featuredGrid .project-card{grid-column:span 1}
 #featuredGrid .project-card[data-orientation=landscape]{grid-column:span 2}
 #featuredGrid .project-card:nth-child(even){margin-top:0}
 #featuredGrid .project-card[data-orientation=portrait]{grid-column:span 2;width:min(100%,300px);justify-self:center}
 #featuredGrid .project-caption h3{font-size:26px}
 .media-grid .project-caption h3{font-size:18px}
 .media-grid .project-caption span{font-size:9px;letter-spacing:.05em}
 .ratio-badge{left:8px;top:8px}
 .duration-badge{left:8px;bottom:8px}
 .media-badge{font-size:8px;padding:5px 6px}
 .media-grid .project-arrow{right:9px;bottom:12px;font-size:18px}
 .filter-bar{gap:2px 16px;padding-bottom:14px}
 .filter{font-size:12px}
 .page-intro{padding-bottom:22px}
 .page-intro h1{font-size:clamp(63px,15.3vw,92px)}
 .utility-start{gap:6px}
 .search-box{min-width:130px}
 .search-box input{width:136px}
 .format-label>span{display:none}
 .format-label select{max-width:148px;font-size:11px}
 .all-grid{padding-bottom:75px}
 .player-shell{padding-left:18px;padding-right:18px}
 .play-disc{width:65px;height:65px;font-size:20px}
 .watch-label{font-size:9px}
 .detail-title{font-size:clamp(43px,10.6vw,65px)}
 .detail-top{padding-bottom:24px}
 .detail-category{font-size:10px;letter-spacing:.08em}
 .player-notes{font-size:10px}
 .detail-summary{font-size:26px}
 .footer-intro>span{display:none}
 .footer-intro h2{font-size:14vw}
 .about-title{font-size:15vw}
 .about-facts{gap:25px 15px}
 .hero-film-link{font-size:9px}
 .hero-content{padding-bottom:42px}
 .hero-controls{gap:13px}
 .hero-motion{width:40px;height:40px}
}
@media(max-height:540px) and (orientation:landscape){
 .hero{height:100svh;min-height:340px}
 .hero-content{padding-bottom:24px}
 .hero h1{font-size:11vw;margin:12px 0}
 .hero-line{flex-direction:row}
 .hero-line p{font-size:11px}
 .hero-controls{top:84px}
 .nav-overlay{padding-top:80px;justify-content:flex-start}
 .nav-item{font-size:50px;padding:6px 0}
 .nav-foot{margin-top:15px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .hero-visual{transform:none}
 .hero-visual video,.project-image video{display:none!important}
 .reveal{opacity:1;transform:none}
}

/* Focus targets are headings, not interactive controls. */
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus{outline:none}

.hero-motion:disabled{opacity:.55;cursor:default}

@media(max-width:600px){
 .work-page{padding-top:105px}
 .page-intro{padding-bottom:8px}
 .page-intro h1{margin:12px 0 16px}
 .page-intro p{font-size:12px;line-height:1.6;margin-bottom:8px}
 .filter-bar{padding-bottom:6px;gap:0 16px}
 .filter{min-height:38px}
 .utility-bar{padding-bottom:10px}
 .utility-end .motion-switch,.utility-end .reset-filter{min-height:34px}
 .work-tools{margin-bottom:18px}
 .results-label{margin-bottom:18px}
}

/* LOCAL REVISION 02: preserve the original site, limit Selected Work to three previews. */
.selected-placeholder { cursor: default; }
.selected-placeholder .placeholder-message {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 13px;
  color: #b1afa7; text-align: center; padding: 20px;
  font-size: 10px; letter-spacing: .18em;
}
.selected-placeholder .placeholder-note { font-size: 11px; letter-spacing: .02em; color: #96958d; }
.media-grid .selected-placeholder:hover .project-caption h3 { text-decoration: none; }
.media-grid .selected-placeholder .project-image::after { display: none; }


/* LOCAL REVISION 03: All Work category scaffolding; home/Selected Work unchanged. */
#allGrid .category-placeholder { cursor: default; }
#allGrid .category-placeholder .placeholder-message {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 13px;
  text-align: center; padding: 20px; color: #b1afa7;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
#allGrid .category-placeholder .placeholder-note {
  font-size: 11px; letter-spacing: .02em; color: #96958d; text-transform: none;
}
#allGrid .category-placeholder:hover .project-caption h3 { text-decoration: none; }
#allGrid .category-placeholder .project-image::after { display: none; }
#allGrid.category-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px 22px;
}
#allGrid.category-slots .category-placeholder { grid-column: auto; }
#work .search-box input:disabled, #work .format-label select:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 1000px) {
  #allGrid.category-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 20px; }
}
@media (max-width: 600px) {
  #allGrid.category-slots { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  #allGrid.category-slots .category-placeholder { width: min(100%, 300px); justify-self: center; }
}

/* LOCAL REVISION 05 — blue and white are the general palette.
   Color changes only: preserve all layout, animation and media assignments.
   Sky blue #0099FF, cloudy white #FDFDFE, reference-matched red #FB2502.
   Darker blues are used for legible text; pale blues replace grey surfaces. */
:root {
  --brand-blue: #0099FF;
  --brand-white: #FDFDFE;
  --brand-red: #FB2502;
  --blue-strong: #006DB6;
  --ink: #073B60;
  --bg: var(--brand-white);
  --fg: var(--ink);
  --muted: #496C86;
  --line: #C7DFF0;
  --soft: #EAF5FF;
  --surface: #EAF5FF;
  --surface-border: #BEDCF2;
  --accent: var(--brand-red);
}
html { color-scheme: light; background: var(--bg); }
body { background: var(--bg); color: var(--fg); }
::selection { background: var(--brand-blue); color: #07314F; }
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible { outline-color: var(--blue-strong); }
.skip-link { background: var(--ink); color: var(--brand-white); }

/* A light fixed header works over every page and section. */
.site-header {
  background: var(--brand-white);
  color: var(--ink);
  mix-blend-mode: normal;
  box-shadow: 0 1px 0 #0099FF20;
}
.brand { color: var(--blue-strong); }
.availability { color: var(--ink); }
.dot { background: var(--brand-red); box-shadow: none; }
.menu-toggle .symbol { color: var(--brand-red); }
.menu-toggle:hover { color: var(--blue-strong); }

/* Sky blue replaces the old near-black hero. A blue shade beneath the
   white lettering improves readability without bringing back grey. */
.hero { background: var(--brand-blue); color: var(--brand-white); }
.hero-visual {
  background: linear-gradient(155deg, #0099FF 0%, #0099FF 28%, #0074C4 100%);
}
.hero-visual::after { background: none; }
.hero h1, .hero-line p, .hero .eyebrow.light,
.hero .scroll-indicator { color: var(--brand-white); }
.hero .scroll-indicator::after { color: var(--brand-white); }
.hero .scroll-indicator:hover { color: var(--brand-white); text-decoration: underline; text-underline-offset: 5px; }
.hero :focus-visible { outline-color: var(--brand-white); }
.hero-film-link { color: var(--brand-white); text-shadow: none; }
.hero-motion { border-color: #FDFDFE99; background: #006DB650; color: var(--brand-white); }
.hero-motion:hover { background: var(--brand-white); color: var(--blue-strong); border-color: var(--brand-white); }

/* White editorial sections and blue-toned typography. */
#selected, .work-page, .about-page, .detail-page { background: var(--brand-white); }
.section-heading h2, .page-intro h1, .about-title,
.detail-title, .about-copy h2, .detail-summary, .next-project strong { color: var(--blue-strong); }
.section-heading .kicker, .page-intro p, .results-label,
.detail-category, .project-caption span, .about-copy p,
.about-facts .label, .credits .label, .player-notes,
.next-project .eyebrow { color: var(--muted); }
.eyebrow { color: var(--muted); }
.index-count { color: var(--blue-strong); }
.small-link { color: var(--blue-strong); border-bottom-color: var(--brand-red); }
.small-link:hover { color: var(--ink); opacity: 1; }
.pill-link {
  color: #052C49;
  background: var(--brand-red);
  border-color: var(--brand-red);
}
.pill-link:hover { color: var(--brand-white); background: var(--blue-strong); border-color: var(--blue-strong); }

/* All previous dark/grey media placeholders become pale blue. */
.project-image, .media-grid .project-image, .about-portrait,
.film-frame, .film-frame video { background: var(--surface); }
.media-grid .project-image::before { border-color: var(--surface-border); }
.media-grid .project-image::after { background: linear-gradient(transparent 60%, #006DB626); }
.project-caption h3 { color: var(--ink); }
.media-grid .project-card:not(.selected-placeholder):not(.category-placeholder):hover .project-caption h3 { color: var(--blue-strong); }
.selected-placeholder .placeholder-message,
#allGrid .category-placeholder .placeholder-message { color: var(--blue-strong); }
.selected-placeholder .placeholder-note,
#allGrid .category-placeholder .placeholder-note { color: var(--muted); }
.media-badge { background: var(--brand-white); color: var(--blue-strong); backdrop-filter: none; }
.project-arrow, .media-grid .project-arrow { color: var(--blue-strong); }
.about-portrait span { color: var(--blue-strong); text-shadow: none; }

/* Category navigation and disabled tools keep their original behavior. */
.filter, .filter .filter-count { color: var(--muted); }
.filter:hover, .filter.active, .filter.active .filter-count { color: var(--blue-strong); }
.filter.active::after { background: var(--brand-red); }
.search-icon, .format-label, .motion-switch, .reset-filter { color: var(--muted); }
.search-box input { color: var(--ink); }
.search-box input::placeholder { color: var(--muted); }
.search-box input:focus { border-bottom-color: var(--blue-strong); }
.format-label select { background: var(--surface); color: var(--ink); border-color: var(--surface-border); }
.motion-switch::before { background: var(--blue-strong); }
.motion-switch[aria-pressed=true]::before { background: var(--brand-red); }
#work .search-box input:disabled, #work .format-label select:disabled,
.motion-switch:disabled { opacity: 1; color: var(--muted); }
.reset-filter:hover, .back-btn:hover, .player-notes a:hover,
.about-facts a:hover { color: var(--blue-strong); }
.back-btn { color: var(--muted); }
.empty-state h2 { color: var(--blue-strong); }
.empty-state p, .player-status { color: var(--muted); }
.player-notes a { border-bottom-color: var(--brand-red); }
.film-frame { border-color: var(--surface-border); }
.film-frame .watch-button { background: #006DB61A; color: var(--ink); }
.film-frame .watch-button:hover { background: #006DB62E; }
.play-disc { background: var(--brand-red); color: #052C49; border-color: var(--brand-red); backdrop-filter: none; }
.watch-label { color: var(--ink); text-shadow: none; }
.next-project:hover strong { color: var(--ink); opacity: 1; }
.notice-box { background: var(--surface); border-color: var(--line); color: var(--ink); }

/* Original full-screen navigation, now entirely white and blue. */
.nav-overlay, .menu-open .site-header { background: var(--brand-white); color: var(--blue-strong); }
.nav-overlay { color-scheme: light; }
.menu-open .availability { color: var(--ink); }
.menu-open .dot { background: var(--brand-red); }
.nav-item { color: var(--blue-strong); }
.nav-item:hover { color: var(--ink); opacity: 1; }
.nav-item small { color: var(--brand-red); }
.nav-foot { color: var(--muted); }
.nav-foot a:hover { color: var(--blue-strong); text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 4px; }

/* Blue replaces the dark footer; the contact underline is the red accent. */
.footer { background: var(--blue-strong); color: var(--brand-white); border-top-color: var(--blue-strong); }
.footer .eyebrow, .footer-meta, .footer-intro h2,
.footer-intro h2 a, .footer-intro > span { color: var(--brand-white); }
.footer-intro h2 a { border-bottom-color: var(--brand-red); }
.footer-intro h2 a:hover { color: var(--brand-white); border-bottom-color: var(--brand-white); }
.footer-meta a:hover { color: var(--brand-white); text-decoration: underline; text-underline-offset: 4px; }
.footer :focus-visible { outline-color: var(--brand-white); }


/* LOCAL REVISION 06 — sky blue dissolves into cloudy white.
   Color-only update to revision 05. No media, layout or route changes.
   The hero ends in the exact page white, so there is no hard color seam.
   Use dark blue lettering over the pale part of the gradient. */
:root {
  --blue-white-gradient: linear-gradient(
    180deg,
    #0099FF 0%,
    #72C7FF 38%,
    #DCF0FF 72%,
    #FDFDFE 100%
  );
}
.hero {
  background: var(--brand-white);
  color: var(--ink);
}
.hero-visual {
  background: var(--blue-white-gradient);
}
.hero-visual::after { background: none; }
.hero h1 { color: var(--blue-strong); }
.hero-line p, .hero .eyebrow.light,
.hero .scroll-indicator, .hero .scroll-indicator::after {
  color: var(--ink);
}
.hero .scroll-indicator:hover { color: var(--blue-strong); }
.hero :focus-visible { outline-color: var(--ink); }
.hero-film-link { color: var(--ink); }
.hero-motion { color: var(--ink); background: #FDFDFE80; border-color: var(--ink); }
.hero-motion:hover { background: var(--brand-white); color: var(--blue-strong); }

/* Carry the same blue-to-white fade into the closing contact section. */
.footer {
  background: var(--blue-white-gradient);
  color: #052C49;
  border-top-color: var(--brand-blue);
}
.footer .eyebrow, .footer-meta, .footer-intro h2,
.footer-intro h2 a, .footer-intro > span {
  color: #052C49;
}
.footer-intro h2 a { border-bottom-color: var(--brand-red); }
.footer-intro h2 a:hover { color: #052C49; border-bottom-color: var(--blue-strong); }
.footer-meta a:hover { color: #052C49; }
.footer :focus-visible { outline-color: #052C49; }


/* LOCAL REVISION 07 — approved A01 / bold extended CINEJAYVEE wordmark.
   Inline path-based SVGs work offline and never rely on a downloaded font.
   Keep the hero title's original line-box height and all page/section layouts. */
.logo-accessible-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.brand-logo {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  width: clamp(165px, 17vw, 245px); min-height: 44px;
  color: var(--brand-blue); line-height: 1;
}
.brand-logo .brand-wordmark { display: block; width: 100%; height: auto; }
.brand-logo:hover { color: var(--blue-strong); }
.menu-open .brand-logo { color: var(--brand-blue); }
.hero h1.hero-wordmark { color: var(--brand-blue); }
.hero-wordmark > .brand-wordmark {
  display: block; width: 100%; height: .91em;
}
@media (max-width: 450px) {
  .brand-logo { width: 165px; }
}

/* Keep native controls and any future text fields in the body typeface. */
button, input, select, textarea { font-family: var(--font-body); }

/* LOCAL REVISION 09 — Option 1: a smaller, left-aligned hero signature.
   Change only the hero wordmark scale. The header logo, SVG paths, gradient,
   introduction, section geometry, fonts, categories and media remain unchanged.
   Desktop: 480–560px. Tablet: 300–480px. Phone: 220–260px, capped by its container. */
.hero h1.hero-wordmark {
  width: clamp(480px, 40vw, 560px);
  max-width: 100%;
  font-size: inherit;
  line-height: 1;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.hero-wordmark > .brand-wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 426 / 42;
}
@media (max-width: 1000px) {
  .hero h1.hero-wordmark { width: clamp(300px, 48vw, 480px); }
}
@media (max-width: 600px) {
  .hero h1.hero-wordmark { width: clamp(220px, 62vw, 260px); }
}


/* LOCAL REVISION 10 — one red interaction color for every clickable label.
   Scoped !important is intentional for COLOR ONLY: earlier component rules have
   deeply nested blue text selectors. It does not affect layout or disabled UI.
   Empty media articles and the non-clickable hero wordmark are NOT targets.
   Mouse hover is gated to hover-capable devices to avoid sticky touch states. */
:root { --interactive-red: var(--brand-red); }
:where(a[href], button, select, summary, [role="button"], [role="link"]) {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.brand-logo { transition: color .18s ease; }
.nav-item { transition: color .18s ease, opacity .2s, transform .4s var(--ease); }
.small-link { transition: color .18s ease, opacity .3s; }
.project-caption h3, .project-caption span, .filter-count {
  transition: color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  :is(a[href], button, select, summary, [role="button"], [role="link"], input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not([aria-disabled="true"]):hover,
  :is(a[href], button, select, summary, [role="button"], [role="link"], input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not([aria-disabled="true"]):hover :where(span, small, strong, em, b, i, p, h1, h2, h3, h4, h5, h6, svg, .eyebrow) {
    color: var(--interactive-red) !important;
  }
  .hero .scroll-indicator:hover::after { color: var(--interactive-red); }
  .filter:enabled:hover::after { background-color: var(--interactive-red); }
  .footer-intro h2 a:hover { border-bottom-color: var(--interactive-red); }
  /* Red lettering stays visible: never red text on a red/blue filled button. */
  .pill-link:not(:disabled):not([aria-disabled="true"]):hover,
  .skip-link:hover {
    background: var(--brand-white);
    border-color: var(--interactive-red);
  }
  .watch-button:enabled:hover .play-disc {
    background: var(--brand-white);
    border-color: var(--interactive-red);
  }
  .project-card[href]:hover .media-badge {
    background: var(--brand-white);
  }
  .nav-item:hover, .small-link:hover, .next-project:hover strong { opacity: 1; }
}

/* Matching keyboard focus retains the site's existing visible focus outline. */
:is(a[href], button, select, summary, [role="button"], [role="link"], input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not([aria-disabled="true"]):focus-visible,
:is(a[href], button, select, summary, [role="button"], [role="link"], input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not([aria-disabled="true"]):focus-visible :where(span, small, strong, em, b, i, p, h1, h2, h3, h4, h5, h6, svg, .eyebrow) {
  color: var(--interactive-red) !important;
}
:is(a[href], button, select, summary, [role="button"], [role="link"], input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not([aria-disabled="true"]):focus-visible { outline-color: var(--interactive-red); }
.hero .scroll-indicator:focus-visible::after { color: var(--interactive-red); }
.pill-link:not(:disabled):not([aria-disabled="true"]):focus-visible,
.skip-link:focus-visible {
  background: var(--brand-white);
  border-color: var(--interactive-red);
}
.watch-button:focus-visible .play-disc,
.project-card[href]:focus-visible .media-badge { background: var(--brand-white); }
.footer-intro h2 a:focus-visible { border-bottom-color: var(--interactive-red); }


/* LOCAL REVISION 12 — Revision 09 Explore button + hover-revealed category titles.
   Only the category media surface reveals the red title and approved stills.
   Captions stay visible, and every category remains a real, keyboard-accessible link. */
:root { --category-fade-duration: 650ms; --category-title-fade-duration: 280ms; }

/* Preserve Revision 11's whole-heading contact link. */
.footer-intro h2 .contact-cta { display: inline-block; border-bottom: 0; }
.contact-cta .contact-ending { border-bottom: 2px solid var(--brand-red); }
.contact-cta span { transition: color .18s ease; }

/* Exact Revision 09 resting / hover colors. This single CTA is deliberately
   exempt from the general red-on-hover text rule introduced in Revision 10. */
#selected .explore-projects {
  color: #052C49 !important;
  background: var(--brand-red);
  border-color: var(--brand-red);
  transition: background .3s, color .3s;
}
@media (hover: hover) and (pointer: fine) {
  #selected .explore-projects:hover {
    color: var(--brand-white) !important;
    background: var(--blue-strong);
    border-color: var(--blue-strong);
  }
}
#selected .explore-projects:focus-visible {
  color: var(--brand-white) !important;
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.category-back { display: block; width: fit-content; margin-bottom: 22px; min-height: 44px; }
#workHeading { overflow-wrap: anywhere; }
#allGrid .category-card { cursor: pointer; }
#allGrid .category-card .project-image { isolation: isolate; }
#allGrid .category-card .project-image::after { display: none; }
#allGrid .category-card .project-caption h3 {
  color: var(--blue-strong); text-decoration: none; display: flex; gap: 12px; align-items: baseline;
}
#allGrid .category-card .category-arrow { font: inherit; font-size: .75em; margin: 0; }
#allGrid .category-card .project-caption > span { color: var(--muted); }

/* Empty at rest: no permanently visible duplicate name or placeholder message. */
#allGrid .category-card .category-hover-title {
  position: absolute; inset: 0; z-index: 4; margin: 0; padding: 20px 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: clamp(24px, 2.6vw, 42px);
  font-weight: 600; line-height: 1.15; letter-spacing: .10em;
  text-transform: uppercase; text-align: center;
  color: var(--brand-red) !important; opacity: 0; pointer-events: none;
  transition: opacity var(--category-title-fade-duration) ease;
}
#allGrid .category-card .category-stills {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1;
}
#allGrid .category-card .category-still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: none !important; filter: none;
  transition: opacity var(--category-fade-duration) ease; background: transparent;
}
#allGrid .category-card .category-still.is-current { opacity: 1; }
#allGrid .category-card .project-image.is-previewing .category-stills { opacity: 1; }
/* A soft central veil supports the red title without adding a boxed label. */
#allGrid .category-card .category-hover-shade {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 62% at center, rgba(2, 7, 12, .86) 0%, rgba(2, 7, 12, .65) 33%, rgba(2, 7, 12, .08) 85%, transparent 100%);
  transition: opacity var(--category-title-fade-duration) ease;
}
/* Stills are cleared immediately on leave; the title fades back to empty. */
#allGrid .category-card .project-image:not(.is-previewing) .category-still {
  opacity: 0; transition: none;
}
@media (hover: hover) and (pointer: fine) {
  #allGrid .category-card .project-image:hover .category-hover-title { opacity: 1; }
  #allGrid .category-card .project-image:hover.is-previewing .category-hover-shade { opacity: 1; }
  #allGrid .category-card:hover .project-image::before { border-color: var(--brand-red); }
}
/* Keyboard focus reveals the label, never an automatic image slideshow. */
#allGrid .category-card:focus-visible .category-hover-title { opacity: 1; }
#allGrid .category-card:focus-visible { outline-color: var(--brand-red); }
@media (prefers-reduced-motion: reduce) {
  #allGrid .category-card .category-still,
  #allGrid .category-card .category-hover-title,
  #allGrid .category-card .category-hover-shade { transition: none !important; }
}
#allGrid.category-slots .category-card { grid-column: auto; }
@media (max-width: 600px) {
  #allGrid.category-slots .category-card { width: min(100%, 300px); justify-self: center; }
}

/* All Work dissolves between stills. The poster stays underneath on entry and exit. */
.media-grid .scrub-surface { position: relative; }
.media-grid .scrub-surface .media-poster {
  opacity: 1 !important; object-fit: contain; transition: none; transform: none !important;
}
.media-grid .scrub-surface .scrub-canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: contain; z-index: 1; opacity: 0; pointer-events: none;
  transition: opacity 240ms ease-in-out; background: transparent;
}
.media-grid .scrub-surface.is-scrubbing .scrub-canvas { opacity: 1; }
.media-grid .scrub-surface.is-scrubbing .project-arrow { opacity: 0; }
#allGrid .category-card .category-poster { object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
  .scrub-surface.has-thumbnail:hover { cursor: ew-resize; }
  #allGrid .category-card .project-image.has-thumbnail:hover .category-hover-shade { opacity: 1; }
}
#allGrid .category-card:focus-visible .project-image.has-thumbnail .category-hover-shade { opacity: 1; }


/* Hero film and its still share the same frame. The existing wordmark sits on a light fade. */
#heroVisual { transform: none; animation: none; }
#heroVisual > img, #heroVisual > video { object-position: 50% 45%; }
/* The poster is the opening frame. Switch directly to the playing picture. */
#heroVisual > video { transition: none; }
#heroVisual.has-frame > video { opacity: 1; }
#heroVisual::after {
  pointer-events: none;
  background: linear-gradient(to top, rgba(253,253,254,.98) 0%, rgba(253,253,254,.86) 14%, rgba(253,253,254,.38) 31%, transparent 54%);
}
#heroVisual.allow-motion > video { display: block !important; }
.hero-controls { top: 110px; }
.banner-toggle {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(8,17,27,.6);
  color: white; font: 600 14px/1 var(--font-body);
}
.banner-toggle:hover, .banner-toggle:focus-visible { background: white; color: var(--brand-red); }
@media (max-width:800px) {
  .hero-controls { top: 90px; }
  #heroVisual::after { background: linear-gradient(to top, rgba(253,253,254,.98), rgba(253,253,254,.83) 22%, transparent 56%); }
}


/* Brand marks sit between the selected films and the inquiry section. */
#selected .section-bottom { padding-bottom: 90px; }
.brands-section { padding-bottom: 105px; }
.brands-inner { border-top: 1px solid var(--line); padding-top: 56px; }
.brands-heading { margin-bottom: 42px; }
.brands-heading h2 {
  font: 500 clamp(36px, 4.7vw, 68px)/1.05 var(--font-heading);
  letter-spacing: -.065em; color: var(--blue-strong); margin: 16px 0 0;
}
.brand-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px; row-gap: 8px;
}
.brand-grid li {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; height: 128px; padding: 22px 16px;
}
.brand-grid img {
  display: block; width: var(--logo-width, 160px); max-width: 100%;
  height: var(--logo-height, 66px); object-fit: contain;
  filter: grayscale(1); opacity: .88;
}
.brand-grid img.logo-ink { filter: brightness(0); }
.brand-grid img.logo-detail { filter: grayscale(1) brightness(.65); }
.brand-grid img.logo-paper { mix-blend-mode: multiply; }
@media (max-width: 800px) {
  .brand-grid { column-gap: 14px; }
  .brand-grid li { height: 112px; padding: 20px 10px; }
}
@media (max-width: 600px) {
  #selected .section-bottom { padding-bottom: 64px; }
  .brands-section { padding-bottom: 68px; }
  .brands-inner { padding-top: 36px; }
  .brands-heading { margin-bottom: 20px; }
  .brands-heading h2 { font-size: clamp(32px, 8.9vw, 46px); }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 2px; }
  .brand-grid li { height: 108px; padding: 12px 6px; }
  .brand-grid img { height: min(var(--logo-height, 66px), 84px); }
}

#brandsTitle:focus { outline: none; }


/* Jayvee’s biography, with the introduction carrying the emphasis. */
.about-copy .about-lead {
  font: 500 clamp(26px, 2.8vw, 42px)/1.25 var(--font-heading);
  letter-spacing: -.045em; color: var(--blue-strong); margin: 0 0 30px;
}
.about-invitation a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brand-red); }
.about-portrait:empty { display: none; }
.about-layout:has(.about-portrait:empty) { grid-template-columns: minmax(0, 820px); }
.about-layout:has(.about-portrait:empty) .about-copy { padding-top: 0; }

/* Give project roles and equipment room to wrap naturally. */
.credits .credit-wide { grid-column: 1 / -1; }
.detail-info.shell, .next-project.shell { padding-inline: clamp(20px, 3.6vw, 72px); }
.detail-info .credits { align-self: start; }
.next-project strong { overflow-wrap: anywhere; }

/* Services use the same editorial rhythm as the brand section. */
.services-section { padding-bottom: 105px; }
.services-inner { border-top: 1px solid var(--line); padding-top: 56px; }
.services-heading {
  display: flex; align-items: end; justify-content: space-between;
  gap: 28px; margin-bottom: 48px;
}
.services-heading h2 {
  font: 500 clamp(36px, 4.7vw, 68px)/1.05 var(--font-heading);
  letter-spacing: -.065em; color: var(--blue-strong); margin: 16px 0 0;
}
.services-contact { flex-shrink: 0; margin-bottom: 5px; }
.services-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}
.services-grid .service-item { min-width: 0; }
.services-grid .service-number {
  color: var(--brand-red); font-size: 11px; letter-spacing: .12em;
}
.services-grid h3 {
  font: 500 clamp(26px, 2.6vw, 38px)/1.15 var(--font-heading);
  color: var(--ink); letter-spacing: -.055em; margin: 17px 0 16px;
}
.services-grid p {
  max-width: 390px; color: var(--muted); font-size: 15px;
  line-height: 1.8; margin: 0;
}
#servicesTitle:focus { outline: none; }
@media (max-width: 800px) {
  .services-grid { grid-template-columns: 1fr; gap: 28px; }
  .services-grid .service-item + .service-item {
    border-top: 1px solid var(--line); padding-top: 28px;
  }
  .services-grid h3 { margin-top: 12px; }
  .services-grid p { max-width: 580px; }
}
@media (max-width: 600px) {
  .services-section { padding-bottom: 68px; }
  .services-inner { padding-top: 36px; }
  .services-heading { align-items: start; flex-direction: column; gap: 24px; margin-bottom: 34px; }
  .services-heading h2 { font-size: clamp(32px, 8.9vw, 46px); }
}

/* Clear inquiries with a direct email route. */
.nav-project-link { align-self: flex-start; width: fit-content; margin-top: 24px; }
.contact-page { padding-top: 155px; padding-bottom: 100px; }
.contact-page h1 {
  font: 500 clamp(58px, 9vw, 130px)/.98 var(--font-heading);
  color: var(--blue-strong); letter-spacing: -.075em; margin: 22px 0 30px;
}
.contact-intro { max-width: 680px; font-size: clamp(18px, 2vw, 26px); line-height: 1.6; color: var(--muted); margin: 0 0 54px; }
.contact-email-block { border-top: 1px solid var(--line); padding-top: 28px; }
.contact-email { display: block; width: fit-content; font: 500 clamp(18px, 3.3vw, 44px)/1.3 var(--font-heading); letter-spacing: -.035em; color: var(--blue-strong); margin: 18px 0 26px; overflow-wrap: anywhere; }
.contact-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.copy-email { border: 0; border-bottom: 1px solid var(--brand-red); padding: 12px 0; background: transparent; color: var(--ink); font-size: 12px; }
.contact-status { min-height: 24px; margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.contact-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1000px; margin-top: 40px; }
.contact-notes p { font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 480px; }
.contact-notes .small-link { display: inline-block; margin-top: 8px; }
#contactTitle:focus { outline: none; }
@media (max-width: 800px) {
  .contact-page { padding-top: 120px; padding-bottom: 75px; }
  .contact-page h1 { margin-bottom: 24px; }
  .contact-intro { margin-bottom: 36px; }
  .contact-notes { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
}
@media (max-height: 650px) {
  .nav-overlay { justify-content: flex-start; }
  .nav-project-link { margin-top: 14px; }
}