@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');

:root{
  --black:#091212; --black2:#101918; --paper:#f1ead8; --paper2:#cfc7b7;
  --orange:#fe7e3c; --red:#e4201b; --teal:#0e6873; --copper:#61413c;
  --line:rgba(241,234,216,.16); --pad:clamp(20px,3.5vw,58px); --radius:2px;
}
*{box-sizing:border-box} html{background:var(--black);scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--paper);font-family:'Instrument Sans',Arial,Helvetica,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.105;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none} img,video{display:block;max-width:100%} button{font:inherit;color:inherit}
::selection{background:var(--red);color:var(--paper)}
.page{min-height:100vh}.frame{border-left:1px solid var(--line);border-right:1px solid var(--line);max-width:1680px;margin:0 auto;position:relative}
.nav{position:fixed;z-index:100;left:50%;top:14px;transform:translateX(-50%);width:min(calc(100% - 28px),1652px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 22px;background:rgba(9,18,18,.74);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:999px;transition:.35s ease}
.nav.scrolled{background:rgba(9,18,18,.92)}.brand{font-family:Impact,'Arial Narrow',sans-serif;font-size:24px;letter-spacing:-.04em}.navlinks{display:flex;gap:34px;align-items:center}.navlinks a,.nav-meta{font-family:monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}.navlinks a{position:relative}.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--red);transition:.25s}.navlinks a:hover::after,.navlinks a.active::after{right:0}.nav-meta{justify-self:end;color:var(--red)}
.mobile-menu{display:none}.eyebrow,.mono{font-family:monospace;text-transform:uppercase;letter-spacing:.11em;font-size:11px}.eyebrow{color:var(--red)}
.display{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-.035em;line-height:.84;font-weight:900}.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}
.hero{height:max(720px,100svh);position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#000}.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04) brightness(.76)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,10,.92) 0%,rgba(5,10,10,.48) 46%,rgba(5,10,10,.1) 75%),linear-gradient(0deg,rgba(5,10,10,.82),transparent 42%)}
.hero-aura{position:absolute;inset:-20%;z-index:1;background:radial-gradient(circle at 78% 40%,rgba(254,126,60,.24),transparent 28%),radial-gradient(circle at 58% 8%,rgba(14,104,115,.15),transparent 26%);mix-blend-mode:screen;pointer-events:none}
.hero-copy{position:absolute;z-index:3;left:var(--pad);bottom:8vh;width:min(850px,74vw)}.hero-title{font-size:clamp(68px,11.5vw,176px);margin:14px 0 22px}.hero-line{font-size:clamp(17px,1.5vw,24px);max-width:620px;line-height:1.42;color:var(--paper)}
.reel-cta{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-family:monospace;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--red)}.play-circle{width:58px;height:58px;border:1px solid var(--orange);border-radius:50%;display:grid;place-items:center;transition:.3s}.reel-cta:hover .play-circle{background:var(--orange);color:var(--black);transform:scale(.94)}
.scroll-note{position:absolute;z-index:3;right:var(--pad);bottom:7vh;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--red);writing-mode:vertical-rl;display:flex;gap:10px;align-items:center}.scroll-note::after{content:"";width:1px;height:68px;background:var(--orange)}
.section{padding:clamp(80px,10vw,150px) var(--pad);border-bottom:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px}.section-head h2{font-size:clamp(44px,6vw,86px);margin:4px 0 0}.text-link{font-family:monospace;color:var(--red);font-size:11px;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid currentColor;padding-bottom:4px}
.featured{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}.project-card{position:relative}.project-card:first-child{grid-column:1/-1}.project-card .media{position:relative;overflow:hidden;background:var(--black2);aspect-ratio:4/3;border:1px solid var(--line)}.project-card:first-child .media{aspect-ratio:16/8.2}.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s}.project-card:hover img{transform:scale(1.035);filter:saturate(1.1)}.preview-ui{position:absolute;inset:auto 14px 14px 14px;display:flex;justify-content:space-between;align-items:center;font-family:monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;z-index:2}.preview-ui span{padding:7px 9px;background:rgba(5,10,10,.65);backdrop-filter:blur(8px)}.card-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:16px}.card-title{font-size:clamp(38px,4.5vw,68px);margin:0}.card-year{color:var(--red);font-family:monospace;font-size:11px}.card-role{margin-top:8px;color:#79a8a8;font:11px/1.3 monospace;text-transform:uppercase;letter-spacing:.1em}.card-copy{max-width:590px;color:var(--paper2);line-height:1.55;margin:10px 0 0;font-size:15px}
.marquee{overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--copper),#281717,var(--teal),var(--black));position:relative}.marquee-track{display:flex;width:max-content;animation:marquee 24s linear infinite;padding:15px 0}.marquee-track span{font:11px monospace;text-transform:uppercase;letter-spacing:.13em;margin-right:45px;color:var(--paper)}.marquee-track b{color:var(--orange);font-weight:400}@keyframes marquee{to{transform:translateX(-50%)}}
.about-tease{display:grid;grid-template-columns:minmax(240px,.7fr) 1.35fr .8fr;gap:clamp(28px,5vw,80px);align-items:center}.about-tease .still{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}.about-tease .still img{width:100%;height:100%;object-fit:cover}.about-tease h2{font-size:clamp(52px,7.6vw,112px);margin:0}.about-tease p{line-height:1.6;color:var(--paper2)}
.footer{padding:36px var(--pad);display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:end;font:10px/1.4 monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--paper2)}.footer .center{text-align:center}.footer .right{text-align:right}.footer a:hover{color:var(--orange)}
.loader{position:fixed;inset:0;background:var(--black);z-index:10000;display:grid;place-items:center;transition:opacity .6s,visibility .6s}.loader.hide{opacity:0;visibility:hidden}.loader-inner{width:min(520px,72vw);text-align:center}.loader-frame{height:160px;overflow:hidden;filter:blur(14px) saturate(1.2);opacity:.56;border:1px solid var(--line)}.loader-frame img{width:100%;height:100%;object-fit:cover}.loader-row{display:flex;justify-content:space-between;margin-top:16px;font:10px monospace;text-transform:uppercase;letter-spacing:.15em;color:var(--red)}.loader-line{height:1px;background:rgba(241,234,216,.2);margin-top:12px;overflow:hidden}.loader-line i{display:block;width:0;height:100%;background:var(--orange);transition:width .15s}
.cursor{position:fixed;width:14px;height:14px;border:1px solid var(--orange);border-radius:50%;z-index:9999;pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}.cursor.hot{width:52px;height:52px;background:rgba(254,126,60,.16)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}
/* Work */
.page-hero{padding:180px var(--pad) 60px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(78px,15vw,220px);margin:12px 0 0}.page-intro{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:end}.page-intro p{font-size:clamp(20px,2.2vw,34px);line-height:1.35;max-width:840px;margin:0;color:var(--paper2)}.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.filter{border:1px solid var(--line);background:transparent;border-radius:999px;padding:9px 15px;font:10px monospace;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.filter.active,.filter:hover{background:var(--paper);color:var(--black)}
.work-grid{padding:60px var(--pad) 140px;display:grid;grid-template-columns:repeat(12,1fr);gap:55px 28px}.work-item{grid-column:span 6}.work-item:nth-child(3n+1){grid-column:span 7}.work-item:nth-child(3n+2){grid-column:span 5}.work-item .media{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);position:relative;background:var(--black2)}.work-item.vertical .media{aspect-ratio:4/5}.work-item img{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.8,.2,1)}.work-item:hover img{transform:scale(1.035)}.work-meta{display:flex;justify-content:space-between;gap:20px;margin-top:13px}.work-meta h2{font-size:clamp(32px,4vw,58px);margin:0}.work-meta .side{text-align:right;font:10px/1.5 monospace;text-transform:uppercase;color:var(--red)}
/* About */
.about-hero{min-height:96svh;padding:170px var(--pad) 90px;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,100px);align-items:end;border-bottom:1px solid var(--line)}.about-hero h1{font-size:clamp(62px,10vw,148px);margin:10px 0 0}.about-copy{font-size:clamp(19px,2vw,28px);line-height:1.48;color:var(--paper2)}.about-copy p:first-child{color:var(--paper)}.manifesto{padding:120px var(--pad);display:grid;grid-template-columns:.6fr 1.4fr;gap:60px;border-bottom:1px solid var(--line)}.manifesto blockquote{margin:0;font-family:Georgia,serif;font-style:italic;font-size:clamp(42px,6.2vw,92px);line-height:1.03}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.fact{background:var(--black);padding:55px var(--pad)}.fact strong{display:block;font-size:clamp(36px,5vw,72px);font-family:Impact,'Arial Narrow',sans-serif;font-weight:400}.fact span{font:10px monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
/* Contact */
.contact-wrap{min-height:100svh;padding:180px var(--pad) 70px;display:flex;flex-direction:column;justify-content:space-between}.contact-title{font-size:clamp(82px,16vw,250px);margin:0;max-width:1200px}.contact-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:70px}.contact-cell{background:var(--black);padding:28px}.contact-cell .label{font:10px monospace;text-transform:uppercase;color:var(--red);letter-spacing:.1em}.contact-cell .value{font-size:clamp(18px,2vw,28px);margin-top:18px;line-height:1.3}.email-big{font-family:Georgia,serif;font-style:italic}
/* Reel */
.reel-page{min-height:100svh;padding:130px var(--pad) 70px}.reel-shell{height:calc(100svh - 190px);min-height:540px;position:relative;border:1px solid var(--line);background:#000;overflow:hidden}.reel-shell video{width:100%;height:100%;object-fit:contain}.reel-overlay{position:absolute;inset:0;pointer-events:none;border:1px solid transparent}.reel-caption{position:absolute;left:20px;bottom:18px;font:10px monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--red)}
/* Project */
.project-hero{min-height:92svh;padding:145px var(--pad) 52px;display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(36px,5vw,80px);align-items:end;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.project-hero-copy{padding-bottom:2vw}.back{display:inline-block;margin-bottom:30px;font:10px monospace;text-transform:uppercase;color:var(--red);letter-spacing:.1em}.project-hero h1{font-size:clamp(68px,10vw,150px);margin:12px 0 18px}.project-thesis{font-size:clamp(17px,1.6vw,24px);line-height:1.45;color:var(--paper2);max-width:600px}.project-media{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:#000}.project-media img{width:100%;height:100%;object-fit:cover}.project-media .watch{position:absolute;left:20px;bottom:20px;padding:12px 14px;background:rgba(5,10,10,.7);backdrop-filter:blur(8px);font:10px monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--paper);border:1px solid var(--line)}.project-media .watch:hover{background:var(--orange);color:var(--black)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.stat{background:var(--black);padding:26px var(--pad)}.stat b{display:block;font:10px monospace;text-transform:uppercase;color:var(--red);letter-spacing:.1em;margin-bottom:10px}.stat span{font-size:clamp(18px,2vw,27px)}
.preview-section{padding:95px 0 105px;border-bottom:1px solid var(--line)}.preview-section .section-head{padding:0 var(--pad);margin-bottom:28px}.drag-strip{display:flex;gap:14px;overflow-x:auto;padding:0 var(--pad) 18px;scrollbar-width:none;cursor:grab;user-select:none}.drag-strip:active{cursor:grabbing}.drag-strip::-webkit-scrollbar{display:none}.drag-card{flex:0 0 clamp(320px,46vw,760px);aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:var(--black2)}.drag-card.vertical{flex-basis:clamp(260px,30vw,500px);aspect-ratio:4/5}.drag-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}.gallery-count{padding:0 var(--pad);font:10px monospace;color:var(--red);text-transform:uppercase;letter-spacing:.1em;text-align:right}
.case-copy{padding:110px var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.case-block{background:var(--black);padding:0 clamp(22px,3vw,52px);min-height:270px}.case-block:first-child{padding-left:0}.case-block:last-child{padding-right:0}.case-block h3{font:11px monospace;text-transform:uppercase;color:var(--red);letter-spacing:.11em}.case-block p{font-size:clamp(17px,1.5vw,23px);line-height:1.55;color:var(--paper2)}
.film-section{padding:110px var(--pad);border-bottom:1px solid var(--line)}.film-frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);overflow:hidden}.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.film-frame img{width:100%;height:100%;object-fit:cover}.coming-soon{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,10,10,.2);font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(50px,9vw,130px);text-transform:uppercase;text-shadow:0 0 40px rgba(254,126,60,.35)}
.role-section{padding:110px var(--pad);display:grid;grid-template-columns:.65fr 1.35fr;gap:60px;border-bottom:1px solid var(--line)}.role-section h2{font-size:clamp(54px,8vw,118px);margin:0}.role-section p{font-size:clamp(18px,1.7vw,25px);line-height:1.55;color:var(--paper2)}.credits{padding:80px var(--pad);border-bottom:1px solid var(--line)}.credit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:35px}.credit b{font:10px monospace;text-transform:uppercase;color:var(--red);letter-spacing:.1em;display:block;margin-bottom:8px}.credit span{color:var(--paper2);line-height:1.45}.project-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.project-nav a{background:var(--black);padding:45px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:20px}.project-nav a:hover{background:var(--black2)}.project-nav .next{text-align:right}.project-nav small{font:10px monospace;text-transform:uppercase;color:var(--red);letter-spacing:.1em;display:block;margin-bottom:10px}.project-nav strong{font-size:clamp(26px,3vw,44px);font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-weight:400}
@media(max-width:900px){
 .nav{grid-template-columns:1fr auto}.navlinks,.nav-meta{display:none}.mobile-menu{display:block;background:none;border:0;font:10px monospace;text-transform:uppercase;letter-spacing:.1em}.mobile-drawer{position:fixed;inset:0;z-index:99;background:var(--black);padding:100px var(--pad) 40px;display:none;flex-direction:column;justify-content:center;gap:15px}.mobile-drawer.open{display:flex}.mobile-drawer a{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(56px,18vw,100px);text-transform:uppercase}
 .hero-copy{width:82vw}.featured{grid-template-columns:1fr}.project-card:first-child{grid-column:auto}.project-card:first-child .media{aspect-ratio:4/3}.about-tease,.about-hero,.manifesto,.project-hero,.role-section{grid-template-columns:1fr}.about-tease{align-items:start}.facts{grid-template-columns:1fr}.page-intro{grid-template-columns:1fr}.filters{justify-content:flex-start}.work-grid{display:block}.work-item{margin-bottom:52px}.contact-grid{grid-template-columns:1fr}.case-copy{grid-template-columns:1fr;gap:1px;padding:1px 0}.case-block{padding:42px var(--pad)!important;min-height:auto}.credit-grid{grid-template-columns:1fr 1fr}.project-hero{padding-top:130px}.project-media{aspect-ratio:4/3}.footer{grid-template-columns:1fr;text-align:left}.footer .center,.footer .right{text-align:left}.cursor{display:none}
}
@media(max-width:560px){.nav{top:8px;width:calc(100% - 16px);padding:12px 16px}.hero-title{font-size:18vw}.section{padding-top:74px;padding-bottom:74px}.section-head{align-items:flex-start;flex-direction:column}.page-hero{padding-top:145px}.page-hero h1{font-size:22vw}.contact-title{font-size:22vw}.credit-grid{grid-template-columns:1fr}.project-nav{grid-template-columns:1fr}.project-nav .next{text-align:left}.drag-card{flex-basis:82vw}.reel-page{padding-left:10px;padding-right:10px}.reel-shell{height:78svh;min-height:0}.stats{grid-template-columns:1fr}.stat{padding-top:20px;padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* ===== 2026-08-07 refinement pass ===== */
body{font-family:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;letter-spacing:-.012em}
.display{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;letter-spacing:-.025em}
.serif{font-family:'Libre Caslon Display',Georgia,serif;font-style:italic}
.eyebrow,.mono,.navlinks a,.preview-ui,.card-year,.card-role,.text-link,.filter,.footer,.back,.gallery-count,.credit b,.case-block h3,.project-nav small,.contact-cell .label,.proof span,.transition-label,.loader-row{font-family:'IBM Plex Mono',monospace}
.mobile-drawer{display:none}
.nav{grid-template-columns:1fr auto 1fr}.nav-spacer{justify-self:end;width:30px}.brand{display:flex;align-items:center;width:34px;height:34px;font-size:0}.navlinks a{font-size:10px}.nav-meta{display:none!important}

/* custom eclipse / shutter sigil */
.sigil{--sigil-size:30px;display:inline-block;width:var(--sigil-size);height:var(--sigil-size);position:relative;isolation:isolate;filter:drop-shadow(0 0 8px rgba(254,126,60,.28))}
.sigil::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 12deg,transparent 0 10%,var(--orange) 10% 19%,transparent 19% 35%,var(--red) 35% 46%,transparent 46% 66%,#65a9aa 66% 76%,transparent 76% 100%);-webkit-mask:radial-gradient(circle,transparent 0 37%,#000 39% 57%,transparent 59%);mask:radial-gradient(circle,transparent 0 37%,#000 39% 57%,transparent 59%);animation:sigilSpin 1.45s linear infinite}
.sigil::after{content:"";position:absolute;inset:35%;border-radius:50%;background:var(--paper);box-shadow:-6px 0 14px rgba(228,32,27,.95),6px 0 14px rgba(14,104,115,.9),0 0 20px rgba(254,126,60,.65);animation:sigilPulse 1.1s ease-in-out infinite alternate}
.sigil i,.sigil b{position:absolute;left:50%;top:50%;width:70%;height:1px;background:var(--orange);transform-origin:center;opacity:.78}.sigil i{transform:translate(-50%,-50%) rotate(28deg);animation:sigilSlash 1.7s ease-in-out infinite}.sigil b{transform:translate(-50%,-50%) rotate(-36deg);background:var(--red);animation:sigilSlash 1.7s .2s ease-in-out infinite reverse}
.sigil--nav{--sigil-size:27px}.sigil--loader{--sigil-size:112px;filter:drop-shadow(0 0 18px rgba(254,126,60,.4)) drop-shadow(0 0 32px rgba(228,32,27,.18))}
@keyframes sigilSpin{to{transform:rotate(360deg)}}@keyframes sigilPulse{to{transform:scale(.68);opacity:.72}}@keyframes sigilSlash{0%,100%{width:64%;opacity:.35}50%{width:118%;opacity:1}}
.brand:hover .sigil{filter:drop-shadow(0 0 14px rgba(254,126,60,.75))}

/* global between-page transition */
.page-transition{position:fixed;inset:0;z-index:12000;background:rgba(4,10,10,.96);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s;overflow:hidden;pointer-events:none}
.page-transition::before,.page-transition::after{content:"";position:absolute;inset:-15%;background:linear-gradient(100deg,transparent 35%,rgba(228,32,27,.12) 44%,rgba(254,126,60,.2) 49%,rgba(14,104,115,.16) 54%,transparent 63%);transform:translateX(-55%) skewX(-12deg);animation:transitionSweep 1.1s linear infinite}.page-transition::after{animation-delay:.33s;opacity:.55}
.page-transition.is-active{opacity:1;visibility:visible;pointer-events:auto}.transition-core{position:relative;z-index:2;display:grid;justify-items:center;gap:22px}.transition-label{font-size:10px;letter-spacing:.25em;color:var(--red);text-transform:uppercase;animation:glitchText .8s steps(2,end) infinite}
@keyframes transitionSweep{to{transform:translateX(55%) skewX(-12deg)}}@keyframes glitchText{0%,80%,100%{transform:none;text-shadow:none}84%{transform:translateX(3px);text-shadow:-3px 0 var(--teal)}88%{transform:translateX(-2px);text-shadow:3px 0 var(--orange)}}

/* homepage buffering loader: same symbol, blurry reel behind */
.loader{background:rgba(4,10,10,.92);overflow:hidden}.loader::before{content:"";position:absolute;inset:-40px;background:linear-gradient(rgba(4,10,10,.38),rgba(4,10,10,.76)),url('images/reel-poster.jpg') center/cover no-repeat;filter:blur(25px) saturate(1.1);transform:scale(1.08);opacity:.58}.loader-inner{position:relative;z-index:2;width:min(520px,74vw);display:grid;justify-items:center}.loader-symbol{height:150px;display:grid;place-items:center}.loader-row{width:100%;font-size:9px}.loader-line{width:100%}.loader-frame{display:none}

/* give the reel more room */
.hero-title{font-size:clamp(54px,6vw,96px);line-height:.88;margin:12px 0 18px}.hero-copy{width:min(650px,64vw);bottom:7.5vh}.hero-line{font-size:clamp(15px,1.1vw,19px);max-width:530px}.reel-cta{margin-top:22px}.play-circle{width:52px;height:52px}

/* actual moving covers with still fallback */
.motion-cover{isolation:isolate}.motion-cover .cover-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s}.motion-layer{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease;pointer-events:none;background:transparent}.motion-layer.ready{opacity:1}.vimeo-motion iframe{position:absolute;inset:-2%;width:104%;height:104%;border:0;pointer-events:none}.motion-cover:hover .cover-poster{transform:scale(1.025)}.project-card:hover .motion-layer,.work-item:hover .motion-layer{filter:none}.motion-cover .preview-ui{z-index:3}.motion-cover::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 62%,rgba(4,10,10,.34));opacity:.6}

/* homepage featured rhythm */
.featured{gap:clamp(28px,2.6vw,46px)}.project-card .media{border-color:rgba(241,234,216,.2)}.card-copy{font-size:14px;line-height:1.62}.about-tease{grid-template-columns:minmax(280px,.85fr) 1.15fr .8fr}.about-tease .still{aspect-ratio:4/5}.about-tease .still img{object-position:center 38%}.about-tease p{font-size:15px;line-height:1.7}

/* denser, more cohesive work page */
.page-hero{padding:132px var(--pad) 42px}.page-hero h1{font-size:clamp(70px,9vw,140px);margin:6px 0 18px}.page-intro{grid-template-columns:1fr auto;gap:32px}.page-intro p{font-size:clamp(17px,1.4vw,22px);max-width:720px}.work-grid{padding:38px var(--pad) 110px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 20px;grid-auto-flow:dense}.work-item,.work-item:nth-child(3n+1),.work-item:nth-child(3n+2){grid-column:auto}.work-item .media,.work-item.vertical .media{aspect-ratio:4/3}.work-meta{margin-top:12px}.work-meta h2{font-size:clamp(32px,3vw,50px);line-height:.92}.work-meta .side{font-size:9px}.card-role{font-size:9.5px}

/* rebuilt About: use the page instead of empty space */
.about-hero-new{min-height:auto;padding:128px var(--pad) 64px;grid-template-columns:minmax(340px,.92fr) minmax(440px,1.08fr);gap:clamp(34px,5vw,74px);align-items:center}.about-portrait{height:min(690px,70vh);min-height:520px;overflow:hidden;border:1px solid var(--line);position:relative}.about-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(4,10,10,.22));pointer-events:none}.about-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 46%}.about-panel{text-align:center;padding:28px clamp(0px,2vw,30px)}.about-hero-new h1{font-size:clamp(58px,7.2vw,112px);line-height:.87;margin:10px 0 30px}.about-copy{font-size:clamp(15px,1.15vw,18px);line-height:1.68;color:var(--paper2);max-width:620px;margin:0 auto}.about-copy p{margin:0 0 18px}.about-copy p:first-child{color:var(--paper)}.manifesto-new{padding:78px var(--pad);grid-template-columns:.35fr 1.65fr;gap:50px;align-items:start}.manifesto-new blockquote{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(38px,4.5vw,72px);line-height:1.05}.proof-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.proof{background:var(--black);padding:32px var(--pad)}.proof strong{display:block;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(34px,3.8vw,58px);line-height:.95;font-weight:700;text-transform:uppercase}.proof span{display:block;margin-top:10px;font-size:9px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}.facts{display:none}.about-services .section-head h2{font-size:clamp(48px,6vw,84px)}

/* contact refinement */
.contact-wrap{padding-top:145px;min-height:95svh}.contact-title{font-size:clamp(70px,13.6vw,212px);max-width:1050px;line-height:.84}.contact-cell .value{font-size:clamp(16px,1.55vw,23px);line-height:1.45}.email-big{font-family:'Instrument Sans','Helvetica Neue',sans-serif;font-style:normal;letter-spacing:-.025em}.contact-grid{margin-top:54px}

/* full-length reel */
.reel-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.full-reel{aspect-ratio:16/9;height:auto;min-height:0;max-height:calc(100svh - 190px)}

@media(max-width:1100px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-hero-new{grid-template-columns:.9fr 1.1fr}.about-portrait{min-height:480px}}
@media(max-width:900px){.nav{grid-template-columns:1fr auto}.nav-spacer{display:none}.brand{width:30px}.mobile-drawer{display:none}.mobile-drawer.open{display:flex}.hero-copy{width:78vw}.hero-title{font-size:clamp(54px,12vw,84px)}.work-grid{grid-template-columns:1fr 1fr;display:grid}.work-item{margin:0}.about-hero-new{grid-template-columns:1fr;padding-top:112px}.about-portrait{height:62svh;min-height:440px;max-height:620px}.about-panel{padding:0;text-align:center}.manifesto-new{grid-template-columns:1fr;gap:22px;padding:64px var(--pad)}.proof-strip{grid-template-columns:1fr}.proof{padding-top:26px;padding-bottom:26px}.about-tease{grid-template-columns:1fr 1fr}.about-tease>div:last-child{grid-column:1/-1}.contact-title{font-size:clamp(68px,18vw,150px)}}
@media(max-width:640px){.work-grid{grid-template-columns:1fr;gap:42px}.page-hero{padding-top:120px}.hero-copy{width:84vw}.hero-title{font-size:15vw}.hero-line{font-size:15px}.about-portrait{height:58svh;min-height:390px}.about-hero-new h1{font-size:16vw}.about-copy{font-size:15.5px}.contact-title{font-size:19vw}.about-tease{grid-template-columns:1fr}.about-tease>div:last-child{grid-column:auto}.sigil--loader{--sigil-size:88px}.loader-symbol{height:124px}}


/* ===== Aug 07 media + responsive refinement ===== */
/* Motion covers use original supplied MP4 pixels. No color filters. */
.motion-layer.local-motion{object-fit:cover;object-position:center;background:#000;filter:none!important;transform:none!important}
.motion-cover .cover-poster{filter:none!important}
.motion-cover.still-only .cover-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.motion-cover.still-only:hover .cover-poster{transform:scale(1.018)}
.corvette-preview .motion-layer{object-fit:cover;object-position:center center}

/* Work: three deliberate rows (films / social / personal) in source-site order. */
.work-grid{padding:48px var(--pad) 110px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:54px 22px;align-items:start}
.work-item{grid-column:auto!important;min-width:0;margin:0!important}
.work-item .media{aspect-ratio:16/9;width:100%;overflow:hidden}
.work-item.vertical .media{aspect-ratio:4/5}
.work-meta{align-items:flex-start;min-width:0}
.work-meta>div:first-child{min-width:0;flex:1}
.work-meta h2{font-size:clamp(30px,3vw,50px);overflow-wrap:normal;word-break:normal}
.work-meta .side{flex:0 0 auto;max-width:40%;white-space:normal}
.page-hero{padding-bottom:46px}
.page-intro{margin-top:26px;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}
.page-intro p{font-size:clamp(18px,1.75vw,28px);max-width:760px}

/* Homepage featured film covers share a cinema-friendly frame. */
.featured .project-card .media{aspect-ratio:16/9}
.featured .project-card:first-child .media{aspect-ratio:16/9}

/* Prevent any layout child from forcing horizontal overflow. */
.frame,.section,.page-hero,.about-hero-new,.about-panel,.about-copy,.work-grid,.work-item,.project-card,.contact-wrap,.contact-grid{min-width:0}
.about-panel h1,.contact-title,.page-hero h1{max-width:100%;overflow-wrap:normal;word-break:normal}
.email-big,.contact-cell .value{overflow-wrap:anywhere}

/* About: less empty space and controlled editorial scale. */
.about-hero-new{padding-top:118px;padding-bottom:54px;align-items:center}
.about-portrait{height:min(660px,68vh)}
.about-panel h1{font-size:clamp(54px,6.4vw,100px);text-wrap:balance}
.about-copy{font-size:clamp(15px,1.05vw,17px);max-width:590px}
.manifesto-new{padding-top:66px;padding-bottom:66px}
.proof{min-width:0}

@media (max-width:1100px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px}
  .work-item:nth-child(3){grid-column:1/-1}
  .work-item:nth-child(3) .media{aspect-ratio:16/9}
  .work-item:nth-child(n+4){grid-column:auto}
}

@media (max-width:900px){
  :root{--pad:clamp(18px,4.5vw,30px)}
  .frame{width:100%;max-width:100%;overflow:hidden}
  .nav{width:calc(100% - 20px);top:10px;padding:13px 18px}
  .navlinks{display:none}.mobile-menu{display:block;justify-self:end;border:0;background:none;font:11px monospace;text-transform:uppercase;letter-spacing:.14em;cursor:pointer}
  .mobile-drawer{position:fixed;z-index:99;top:78px;left:10px;right:10px;padding:24px;background:rgba(9,18,18,.98);border:1px solid var(--line);border-radius:24px;flex-direction:column;gap:18px;font:13px monospace;text-transform:uppercase;letter-spacing:.12em}
  .mobile-drawer a{padding:7px 2px;border-bottom:1px solid var(--line)}
  .hero{height:max(650px,92svh)}
  .hero-copy{left:var(--pad);bottom:7vh;width:min(88vw,620px)}
  .hero-title{font-size:clamp(56px,15vw,90px);line-height:.86}
  .hero-line{max-width:34ch;font-size:15px}
  .section{padding-left:var(--pad);padding-right:var(--pad)}
  .page-hero{padding:118px var(--pad) 34px}
  .page-hero h1{font-size:clamp(74px,20vw,120px);line-height:.82}
  .page-intro{display:flex!important;flex-direction:column;align-items:flex-start;gap:24px;margin-top:22px}
  .page-intro p{width:100%;max-width:31ch!important;font-size:20px!important;line-height:1.38!important;margin:0}
  .filters{width:100%;justify-content:flex-start;gap:8px}
  .filter{padding:10px 14px}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:38px var(--pad) 88px;gap:42px 16px}
  .work-item:nth-child(3){grid-column:auto}
  .work-meta{display:block;margin-top:11px}
  .work-meta .side{text-align:left;max-width:none;margin-top:8px}
  .work-meta h2{font-size:clamp(28px,5.6vw,40px)}
  .card-role{font-size:10px}
  .about-hero-new{grid-template-columns:1fr;padding:105px var(--pad) 52px;gap:34px}
  .about-portrait{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:4/5}
  .about-panel{padding:0 2px;text-align:center;width:100%}
  .about-hero-new h1{font-size:clamp(48px,11vw,76px);line-height:.9;margin:12px auto 24px;max-width:9.5em;text-wrap:balance}
  .about-copy{font-size:16px;line-height:1.62;width:min(100%,36rem);margin-inline:auto}
  .manifesto-new{padding:58px var(--pad);gap:20px}
  .manifesto-new blockquote{font-size:clamp(34px,8vw,58px)}
  .proof-strip{grid-template-columns:repeat(3,1fr);gap:1px}
  .proof{padding:24px 16px}
  .proof strong{font-size:clamp(26px,5vw,42px)}
  .proof span{font-size:8px}
  .about-services .section-head h2{font-size:clamp(42px,10vw,68px)}
  .contact-wrap{padding-left:var(--pad);padding-right:var(--pad)}
  .contact-title{font-size:clamp(64px,16vw,110px)!important;line-height:.84}
  .contact-grid{width:100%}
  .contact-cell{min-width:0}
}

@media (max-width:640px){
  :root{--pad:18px}
  body{font-size:16px}
  .nav{width:calc(100% - 16px);left:50%;padding:12px 16px}
  .sigil--nav{--sigil-size:25px}
  .hero{height:max(600px,88svh)}
  .hero-copy{bottom:6vh;width:calc(100% - 46px)}
  .hero-title{font-size:clamp(54px,15.5vw,74px);margin:10px 0 18px}
  .scroll-note{display:none}
  .featured{gap:42px}
  .featured .project-card .media,.featured .project-card:first-child .media{aspect-ratio:16/9}
  .section-head{margin-bottom:30px}
  .section-head h2{font-size:clamp(44px,14vw,70px)}
  .card-title{font-size:clamp(34px,10vw,48px)}
  .card-copy{font-size:14px}
  .page-hero{padding-top:106px;padding-bottom:28px}
  .page-hero .eyebrow{margin-bottom:6px}
  .page-hero h1{font-size:clamp(72px,22vw,98px);margin-top:8px}
  .page-intro{gap:20px;margin-top:20px}
  .page-intro p{max-width:25ch!important;font-size:19px!important;line-height:1.38!important}
  .filters{display:grid;grid-template-columns:repeat(2,max-content);gap:8px}
  .work-grid{grid-template-columns:1fr;gap:38px;padding-top:32px;padding-bottom:74px}
  .work-item,.work-item:nth-child(3){grid-column:1!important;width:100%}
  .work-item .media{aspect-ratio:16/9}
  .work-item.vertical .media{aspect-ratio:4/5}
  .work-meta{display:flex;align-items:flex-start;gap:14px}
  .work-meta .side{text-align:right;max-width:38%;margin-top:2px;font-size:9px}
  .work-meta h2{font-size:clamp(30px,9vw,44px);line-height:.9}
  .preview-ui{inset:auto 9px 9px 9px;font-size:8px}
  .preview-ui span{padding:6px 7px}
  .about-hero-new{padding:100px 18px 46px;gap:28px}
  .about-portrait{aspect-ratio:4/5;width:100%}
  .about-hero-new h1{font-size:clamp(43px,12vw,59px)!important;max-width:8.8em;line-height:.92;margin:10px auto 22px}
  .about-hero-new h1 .serif{display:inline}
  .about-copy{font-size:15px;line-height:1.62;max-width:33ch}
  .manifesto-new{padding:50px 18px}
  .manifesto-new blockquote{font-size:clamp(34px,10vw,48px);line-height:1.04}
  .proof-strip{grid-template-columns:1fr}
  .proof{padding:22px 18px}
  .proof strong{font-size:36px}
  .about-services .section-head h2{font-size:clamp(40px,12vw,56px);line-height:.95}
  .contact-wrap{padding:112px 18px 70px!important}
  .contact-title{font-size:clamp(60px,17vw,82px)!important;max-width:100%;margin-bottom:44px!important}
  .contact-grid{grid-template-columns:1fr!important}
  .contact-cell{padding:28px 0!important;border-left:0!important;border-right:0!important}
  .contact-cell .value{font-size:clamp(24px,7.5vw,36px)!important;line-height:1.15}
  .email-big{font-size:clamp(18px,5.4vw,28px)!important}
  .footer{padding-left:18px;padding-right:18px;gap:14px}
  .footer .center,.footer .right{text-align:left}
}

@media (max-width:390px){
  .about-hero-new h1{font-size:43px!important}
  .page-intro p{font-size:18px!important}
  .work-meta h2{font-size:30px}
  .filters{grid-template-columns:repeat(2,1fr)}
  .filter{width:100%}
}

/* =====================================================================
   Aug 07 — art-direction refinement pass
   ===================================================================== */

/* Preserve the supplied reel's color/quality and let substantially more frame show. */
.hero video{filter:none!important}
.hero::after{
  background:
    linear-gradient(90deg,rgba(5,10,10,.36) 0%,rgba(5,10,10,.16) 27%,rgba(5,10,10,.055) 43%,transparent 59%),
    linear-gradient(0deg,rgba(5,10,10,.30) 0%,rgba(5,10,10,.09) 18%,transparent 31%)!important;
}
.hero-aura{inset:-8%;opacity:.72;background:radial-gradient(circle at 82% 38%,rgba(254,126,60,.17),transparent 20%),radial-gradient(circle at 57% 9%,rgba(14,104,115,.10),transparent 20%)}

/* The reel CTA should read as a secondary invitation, not a hero graphic. */
.play-circle{width:40px!important;height:40px!important;font-size:10px}
.reel-cta{gap:11px;margin-top:18px}

/* Grungier art mark: irregular film-burn / ink-star, with stepped jitter instead of tech rotation. */
.sigil{
  --sigil-size:30px;
  width:var(--sigil-size);height:var(--sigil-size);position:relative;display:inline-block;isolation:isolate;
  filter:drop-shadow(0 0 8px rgba(228,32,27,.28));
  transform:rotate(-7deg);
}
.sigil::before{
  content:"";position:absolute;inset:2%;border-radius:0;
  background:var(--red);
  clip-path:polygon(47% 0,57% 32%,82% 12%,70% 42%,100% 48%,68% 57%,88% 86%,58% 70%,48% 100%,39% 69%,8% 88%,30% 58%,0 47%,34% 40%,17% 13%,42% 31%);
  -webkit-mask:none;mask:none;
  animation:markJitter 1.15s steps(4,end) infinite;
}
.sigil::after{
  content:"";position:absolute;left:36%;top:36%;width:29%;height:29%;
  background:var(--paper);border-radius:45% 55% 48% 52%;
  box-shadow:-4px 2px 0 rgba(254,126,60,.8),4px -2px 0 rgba(14,104,115,.65);
  animation:markBlink 1.15s steps(2,end) infinite;
}
.sigil i,.sigil b{position:absolute;display:block;height:22%;transform-origin:center;opacity:.95}
.sigil i{width:46%;left:3%;top:19%;background:var(--teal);clip-path:polygon(5% 30%,86% 0,100% 50%,78% 84%,0 70%);transform:rotate(-21deg);animation:shardOne 1.15s steps(3,end) infinite}
.sigil b{width:43%;right:-2%;bottom:10%;background:var(--orange);clip-path:polygon(0 18%,84% 0,100% 67%,28% 100%);transform:rotate(-18deg);animation:shardTwo 1.15s steps(4,end) infinite}
.sigil--nav{--sigil-size:27px}.sigil--loader{--sigil-size:92px;filter:drop-shadow(0 0 14px rgba(228,32,27,.34)) drop-shadow(7px 2px 18px rgba(254,126,60,.15))}
@keyframes markJitter{0%,100%{transform:translate(0,0) rotate(0) scale(1)}25%{transform:translate(1px,-1px) rotate(4deg) scale(.97)}50%{transform:translate(-1px,1px) rotate(-3deg) scale(1.03)}75%{transform:translate(1px,0) rotate(1deg) scale(.99)}}
@keyframes markBlink{0%,48%,100%{opacity:1;transform:scale(1)}49%,65%{opacity:.45;transform:scale(.72)}}
@keyframes shardOne{0%,100%{transform:rotate(-21deg) translate(0)}45%{transform:rotate(-14deg) translate(2px,-1px)}70%{transform:rotate(-25deg) translate(-1px,1px)}}
@keyframes shardTwo{0%,100%{transform:rotate(-18deg) translate(0)}38%{transform:rotate(-26deg) translate(1px,1px)}72%{transform:rotate(-12deg) translate(-2px,0)}}

/* No text beneath any loading / transition mark. */
.transition-label,.loader-row{display:none!important}
.transition-core{gap:0!important}.loader-inner{width:auto!important}.loader-symbol{height:auto!important}
.loader-line{width:74px!important;margin-top:22px!important;opacity:.7}
.page-transition::before,.page-transition::after{opacity:.42}

/* Home featured work now resolves in one compact row, including Emery. */
.home-work{padding-top:clamp(72px,8vw,108px);padding-bottom:clamp(72px,8vw,108px)}
.featured{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.project-card:first-child{grid-column:auto!important}.featured .project-card .media,.featured .project-card:first-child .media{aspect-ratio:16/9!important}
.card-title{font-size:clamp(32px,3.4vw,54px)}
.card-copy{font-size:13.5px;line-height:1.55}

/* Stats are the moving content system across the shell pages. */
.stats-marquee{background:linear-gradient(92deg,#2c1716 0%,var(--copper) 26%,#142e30 55%,var(--teal) 76%,#151515 100%)}
.stats-marquee .marquee-track{padding:14px 0;animation-duration:29s}
.stats-marquee .marquee-track span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;margin-right:52px}

/* Smooth the closing half of the homepage: less competing giant type, clearer hierarchy. */
.home-about{padding-top:clamp(68px,7vw,98px);padding-bottom:clamp(68px,7vw,98px)}
.home-about .about-tease h2{font-size:clamp(48px,6.2vw,88px)}
.home-contact{padding-top:clamp(58px,6vw,88px);padding-bottom:clamp(58px,6vw,88px);background:linear-gradient(110deg,rgba(97,65,60,.12),transparent 45%)}
.home-contact .section-head{margin:0;align-items:center}
.home-contact .section-head h2{font-size:clamp(42px,5vw,72px);line-height:.92;max-width:760px}

/* CONTACT — asymmetric editorial playground, not a spreadsheet. */
.contact-wrap.contact-playground{min-height:auto;padding:150px var(--pad) 90px;display:block;overflow:hidden}
.contact-head{position:relative;z-index:2}.contact-head .contact-title{font-size:clamp(64px,11.2vw,176px);margin:9px 0 55px;max-width:1000px;line-height:.84}
.contact-scene{position:relative;min-height:620px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;gap:18px;padding:clamp(26px,3vw,50px);border:1px solid var(--line);overflow:hidden;background:#0b1413}
.contact-pattern{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.8}
.contact-pattern::before{content:"";position:absolute;width:70%;height:130%;right:-18%;top:-28%;background:
  radial-gradient(ellipse at 32% 45%,rgba(228,32,27,.92) 0 8%,rgba(254,126,60,.82) 10% 16%,transparent 27%),
  radial-gradient(ellipse at 58% 62%,rgba(14,104,115,.88) 0 24%,transparent 44%),
  radial-gradient(ellipse at 72% 25%,rgba(241,234,216,.42) 0 8%,rgba(254,126,60,.48) 13%,transparent 28%);
  filter:blur(16px);transform:rotate(-13deg) scale(1.16)}
.contact-pattern::after{content:"";position:absolute;left:-8%;bottom:-40%;width:64%;height:82%;background:radial-gradient(ellipse at 40% 50%,rgba(14,104,115,.58),transparent 46%),radial-gradient(ellipse at 62% 52%,rgba(254,126,60,.38),transparent 35%);filter:blur(22px);transform:rotate(10deg)}
.contact-pattern span{position:absolute;inset:0;opacity:.16;background:repeating-linear-gradient(112deg,transparent 0 17px,rgba(241,234,216,.34) 18px,transparent 19px 38px);mix-blend-mode:overlay}
.contact-email-card,.contact-note,.contact-reel-card{position:relative;z-index:2;background:rgba(9,18,18,.82);backdrop-filter:blur(11px);border:1px solid rgba(241,234,216,.22)}
.contact-email-card{grid-column:1/9;grid-row:1/2;padding:clamp(28px,4vw,58px);align-self:start}
.contact-email{display:flex;flex-wrap:wrap;gap:0;font-size:clamp(30px,4vw,62px);line-height:1.02;letter-spacing:-.045em;margin-top:20px;max-width:100%;overflow-wrap:anywhere}
.contact-copy{margin-top:28px;background:transparent;border:0;border-bottom:1px solid var(--red);padding:0 0 5px;color:var(--red);font:10px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}
.contact-note{padding:24px 26px}.contact-note--city{grid-column:9/13;grid-row:1/2;align-self:end;transform:translateY(24px) rotate(1deg)}
.contact-note--work{grid-column:2/8;grid-row:2/3;align-self:start;transform:translateY(6px) rotate(-1deg)}
.contact-note .label,.contact-reel-card .label,.contact-email-card .label{display:block;color:var(--red);font:10px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em}
.contact-note strong{display:block;margin-top:12px;font-size:clamp(20px,2vw,31px);line-height:1.18;font-weight:500}
.contact-reel-card{grid-column:8/13;grid-row:2/3;padding:26px;align-self:end;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;transform:translateY(-10px)}
.contact-reel-card strong{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(28px,3vw,46px);line-height:.95;text-transform:uppercase}
.contact-reel-card:hover{border-color:var(--orange);background:rgba(97,65,60,.44)}

/* Reel tag underneath player removed; keep clean frame. */
.reel-caption{display:none!important}

@media(max-width:1100px){
  .featured{grid-template-columns:repeat(2,minmax(0,1fr))}.featured .project-card:last-child{grid-column:1/-1;width:calc(50% - 10px)}
}

@media(max-width:900px){
  .hero::after{background:linear-gradient(90deg,rgba(5,10,10,.28) 0%,rgba(5,10,10,.11) 32%,transparent 67%),linear-gradient(0deg,rgba(5,10,10,.24),transparent 27%)!important}
  .play-circle{width:36px!important;height:36px!important}
  .featured{grid-template-columns:1fr 1fr}.featured .project-card:last-child{grid-column:1/-1;width:calc(50% - 9px)}
  .home-about .about-tease{grid-template-columns:.8fr 1.2fr;gap:28px}.home-about .about-tease>div:last-child{grid-column:1/-1;max-width:620px}
  .contact-scene{min-height:560px}.contact-email-card{grid-column:1/10}.contact-note--city{grid-column:9/13}.contact-note--work{grid-column:1/8}.contact-reel-card{grid-column:8/13}
}

@media(max-width:640px){
  .hero{height:max(560px,84svh)}.hero-copy{bottom:5vh}.hero-title{font-size:clamp(48px,13vw,64px)!important}.hero-line{font-size:14px}.reel-cta{font-size:9px;margin-top:15px}.play-circle{width:32px!important;height:32px!important}
  .home-work{padding-top:58px;padding-bottom:62px}.featured{grid-template-columns:1fr;gap:34px}.featured .project-card:last-child{grid-column:auto;width:100%}.featured .project-card .media,.featured .project-card:first-child .media{aspect-ratio:16/9!important}.card-title{font-size:34px}.card-copy{font-size:13px}
  .stats-marquee .marquee-track{padding:11px 0}.stats-marquee .marquee-track span{font-size:8.5px;margin-right:36px}
  .home-about{padding:55px 18px 58px}.home-about .about-tease{grid-template-columns:1fr!important;gap:22px}.home-about .about-tease .still{width:62%;aspect-ratio:4/5}.home-about .about-tease h2{font-size:44px;line-height:.9}.home-about .about-tease>div:last-child{grid-column:auto!important}.home-about .about-tease p{font-size:14px;margin:0 0 11px;line-height:1.55}
  .home-contact{padding:50px 18px 54px}.home-contact .section-head{display:block}.home-contact .section-head h2{font-size:42px;line-height:.94;margin-bottom:22px;max-width:8em}.home-contact .text-link{display:inline-block}

  .contact-wrap.contact-playground{padding:106px 16px 58px!important}.contact-head .eyebrow{font-size:9px}.contact-head .contact-title{font-size:clamp(47px,13.2vw,61px)!important;line-height:.88;margin:8px 0 35px!important;max-width:100%}.contact-head .contact-title .serif{font-size:.96em}
  .contact-scene{display:flex;flex-direction:column;min-height:0;padding:14px;gap:12px;border-color:rgba(241,234,216,.12)}
  .contact-pattern{height:150px;position:relative;order:-1;margin:-14px -14px 0}.contact-pattern::before{width:120%;height:170%;right:-35%;top:-45%;filter:blur(11px)}.contact-pattern::after{width:100%;height:120%;left:-35%;bottom:-65%;filter:blur(14px)}
  .contact-email-card,.contact-note,.contact-reel-card{transform:none!important;grid-column:auto;grid-row:auto;width:100%;padding:22px 18px;background:rgba(9,18,18,.9)}
  .contact-email{display:block;font-size:clamp(25px,7vw,31px);line-height:1.06;letter-spacing:-.04em}.contact-email span{display:block}
  .contact-copy{margin-top:21px}.contact-note strong{font-size:21px}.contact-reel-card{min-height:110px;gap:28px}.contact-reel-card strong{font-size:31px}
  .reel-page{padding-top:106px}.reel-page .section-head h1{font-size:48px!important}
}

/* =====================================================================
   Aug 07 — final polish pass: melt loader, softer hero, mobile hierarchy
   ===================================================================== */

/* HOME MARK — a small house outline with a slow moving brand gradient. */
.sigil--nav{
  --sigil-size:27px!important;
  width:var(--sigil-size)!important;
  height:var(--sigil-size)!important;
  transform:none!important;
  filter:drop-shadow(0 0 5px rgba(254,126,60,.12))!important;
  overflow:visible;
}
.sigil--nav::before{
  content:""!important;
  position:absolute!important;
  inset:2px!important;
  border-radius:0!important;
  clip-path:none!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.8 12 3l9 7.8v9.2a1 1 0 0 1-1 1h-5.4v-6.4H9.4V21H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.8 12 3l9 7.8v9.2a1 1 0 0 1-1 1h-5.4v-6.4H9.4V21H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
  background:linear-gradient(110deg,var(--paper) 0 20%,var(--orange) 38%,var(--red) 52%,#69a8a7 70%,var(--paper) 92%)!important;
  background-size:260% 100%!important;
  animation:homeOutlineFlow 7s ease-in-out infinite!important;
}
.sigil--nav::after{display:none!important}
.sigil--nav i,.sigil--nav b{display:none!important}
@keyframes homeOutlineFlow{
  0%,100%{background-position:0% 50%;transform:translate(0,0) scale(1)}
  40%{background-position:100% 50%;transform:translate(.3px,-.4px) scale(1.015)}
  70%{background-position:55% 50%;transform:translate(-.35px,.25px) scale(.995)}
}

/* LOADING — based on the supplied PERFECT reference: dark filled Helvetica-like
   letters with a thin pale edge and a colorful heat/melt that stretches downward. */
.sigil--loader{
  --sigil-size:auto!important;
  width:min(330px,72vw)!important;
  height:112px!important;
  transform:none!important;
  filter:none!important;
  overflow:visible!important;
  isolation:isolate;
}
.sigil--loader::before,
.sigil--loader::after{
  content:"LOADING"!important;
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  clip-path:none!important;
  border-radius:0!important;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-weight:800!important;
  font-size:clamp(43px,7vw,78px)!important;
  line-height:1!important;
  letter-spacing:-.065em!important;
  white-space:nowrap!important;
}
.sigil--loader::before{
  z-index:3!important;
  color:#071010!important;
  background:none!important;
  -webkit-text-stroke:1.35px rgba(241,234,216,.92)!important;
  text-shadow:
    0 0 2px rgba(241,234,216,.55),
    -2px 1px 3px rgba(0,220,238,.88),
    2px -1px 3px rgba(255,55,74,.92),
    0 4px 11px rgba(254,126,60,.7)!important;
  animation:loadingBodyMelt 1.85s cubic-bezier(.45,0,.3,1) infinite alternate!important;
}
.sigil--loader::after{
  z-index:1!important;
  color:transparent!important;
  background:linear-gradient(90deg,#00d7ea 0%,#ff344d 22%,#ff8c32 43%,#f02594 63%,#17cfe4 82%,#ff4c2f 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:blur(5px) saturate(1.55)!important;
  transform-origin:50% 28%!important;
  opacity:.9!important;
  animation:loadingColorMelt 1.85s cubic-bezier(.45,0,.3,1) infinite alternate!important;
}
.sigil--loader i,.sigil--loader b{
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  top:48%!important;
  height:78%!important;
  border-radius:45% 45% 65% 65%!important;
  transform-origin:50% 0!important;
  filter:blur(14px) saturate(1.55)!important;
  opacity:.6!important;
  clip-path:polygon(2% 0,98% 0,93% 30%,87% 100%,76% 55%,68% 94%,58% 45%,49% 100%,38% 54%,28% 92%,18% 44%,8% 100%)!important;
}
.sigil--loader i{
  left:7%!important;width:57%!important;
  background:linear-gradient(90deg,#ff2c45,#ff7a31 25%,#14c9df 52%,#ff2490 78%,#f44b24)!important;
  animation:loadingDripA 1.85s ease-in-out infinite alternate!important;
}
.sigil--loader b{
  right:5%!important;width:49%!important;
  background:linear-gradient(90deg,#19d3df,#ff255f 34%,#ff8a2d 66%,#1bc9d5)!important;
  animation:loadingDripB 1.85s .16s ease-in-out infinite alternate!important;
}
@keyframes loadingBodyMelt{
  0%{transform:translateY(-1px) scaleY(.99) skewX(-.3deg);filter:blur(0)}
  45%{transform:translateY(1px) scaleY(1.02) skewX(.5deg)}
  100%{transform:translateY(3px) scaleY(1.055) skewX(-.7deg)}
}
@keyframes loadingColorMelt{
  0%{transform:translateY(2px) scaleY(1.05);opacity:.58}
  45%{transform:translateY(8px) scaleY(1.25) skewX(.8deg);opacity:.78}
  100%{transform:translateY(17px) scaleY(1.55) skewX(-1.2deg);opacity:.92}
}
@keyframes loadingDripA{0%{transform:translateY(0) scaleY(.48);opacity:.28}100%{transform:translateY(10px) scaleY(1.16);opacity:.68}}
@keyframes loadingDripB{0%{transform:translateY(2px) scaleY(.55);opacity:.24}100%{transform:translateY(18px) scaleY(1.32);opacity:.62}}
.loader-line{display:none!important}
.loader-symbol{min-height:140px!important}
.transition-core{min-width:min(330px,72vw)!important;min-height:130px!important}

/* Keep nav/menu behavior visually identical on every shell page. */
@media(max-width:900px){
  .mobile-drawer{
    top:78px!important;left:10px!important;right:10px!important;
    padding:22px 24px!important;border-radius:24px!important;
    background:rgba(9,18,18,.985)!important;
    border:1px solid rgba(241,234,216,.16)!important;
    box-shadow:0 20px 60px rgba(0,0,0,.3)!important;
    gap:14px!important;
  }
  .mobile-drawer a{font:12px 'IBM Plex Mono',monospace!important;text-transform:uppercase!important;letter-spacing:.12em!important;padding:8px 2px!important;border-bottom:1px solid rgba(241,234,216,.16)!important}
}

/* Home hero: preserve the reel, but put a controlled vignette only behind the copy. */
.hero::after{
  background:linear-gradient(0deg,rgba(5,10,10,.14) 0%,transparent 22%)!important;
}
.hero-copy{isolation:isolate}
.hero-copy::before{
  content:"";position:absolute;z-index:-1;left:-8%;top:-22%;width:112%;height:142%;pointer-events:none;
  background:radial-gradient(ellipse at 34% 58%,rgba(3,8,8,.76) 0%,rgba(3,8,8,.50) 38%,rgba(3,8,8,.16) 62%,transparent 78%);
  filter:blur(18px);
}
/* Blur/fade the reel into Featured Work instead of ending on a hard line. */
.hero{border-bottom:0!important}
.home-work{position:relative;z-index:4;margin-top:-88px;padding-top:clamp(150px,13vw,205px)!important;background:var(--black)}
.home-work::before{
  content:"";position:absolute;left:0;right:0;top:-112px;height:116px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,18,18,0),rgba(9,18,18,.58) 46%,var(--black) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 100%);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 100%);
}

/* Remove project action chips from landing/work covers; the cards already read as clickable. */
.project-card .preview-ui,.work-item .preview-ui{display:none!important}

/* Keep Corvette — Dream On on one line on desktop landing page. */
@media(min-width:1101px){
  .home-work .project-card:nth-child(2) .card-title{font-size:clamp(26px,2.35vw,40px)!important;white-space:nowrap!important;letter-spacing:-.03em}
}

/* Stats ribbons should feel raised from the page rather than pasted flat. */
.stats-marquee{box-shadow:0 18px 36px -24px rgba(0,0,0,.86),0 8px 18px -16px rgba(254,126,60,.35)}

/* Restore the earlier Director section composition. */
.home-about .about-tease{
  grid-template-columns:minmax(240px,.7fr) 1.35fr .8fr!important;
  gap:clamp(28px,5vw,80px)!important;align-items:center!important;
}
.home-about .about-tease .still{width:100%!important;aspect-ratio:4/3!important}
.home-about .about-tease h2{font-size:clamp(52px,7.6vw,112px)!important;line-height:.84!important}
.home-about .about-tease>div:last-child{grid-column:auto!important;max-width:none!important}

/* Contact gradient is alive on both desktop and mobile. */
.contact-pattern::before{animation:contactBlobOne 12s ease-in-out infinite alternate;background-size:130% 130%!important}
.contact-pattern::after{animation:contactBlobTwo 15s ease-in-out infinite alternate;background-size:150% 150%!important}
.contact-pattern span{animation:contactLines 18s linear infinite}
@keyframes contactBlobOne{0%{transform:translate(-2%,2%) rotate(-13deg) scale(1.12);filter:blur(16px) saturate(.95)}50%{transform:translate(-8%,-3%) rotate(-6deg) scale(1.26);filter:blur(20px) saturate(1.16)}100%{transform:translate(2%,5%) rotate(-18deg) scale(1.18);filter:blur(15px) saturate(1.05)}}
@keyframes contactBlobTwo{0%{transform:translate(0,0) rotate(10deg) scale(1)}50%{transform:translate(12%,-8%) rotate(2deg) scale(1.18)}100%{transform:translate(-5%,5%) rotate(15deg) scale(1.08)}}
@keyframes contactLines{to{background-position:180px 0}}

/* Mobile contact should preserve the asymmetry of desktop instead of becoming four blocks. */
@media(max-width:640px){
  .home-work{margin-top:-58px;padding-top:112px!important}
  .home-work::before{top:-80px;height:84px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
  .hero-copy::before{left:-10%;top:-16%;width:118%;height:132%;filter:blur(14px);background:radial-gradient(ellipse at 35% 60%,rgba(3,8,8,.74),rgba(3,8,8,.42) 42%,rgba(3,8,8,.1) 67%,transparent 80%)}
  .home-about .about-tease{grid-template-columns:1fr!important;gap:22px!important;align-items:start!important}
  .home-about .about-tease .still{width:62%!important;aspect-ratio:4/3!important}
  .home-about .about-tease h2{font-size:44px!important;line-height:.9!important}
  .home-about .about-tease>div:last-child{grid-column:auto!important}

  .contact-wrap.contact-playground{padding:104px 16px 58px!important}
  .contact-head .contact-title{font-size:clamp(45px,12.2vw,57px)!important;line-height:.9!important;margin:8px 0 30px!important;max-width:9.2em!important}
  .contact-scene{
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:auto auto auto!important;
    min-height:520px!important;padding:16px!important;gap:10px!important;overflow:hidden!important;
  }
  .contact-pattern{position:absolute!important;inset:0!important;height:auto!important;margin:0!important;order:initial!important}
  .contact-pattern::before{width:155%!important;height:135%!important;right:-74%!important;top:-24%!important;filter:blur(13px)!important}
  .contact-pattern::after{width:125%!important;height:95%!important;left:-55%!important;bottom:-32%!important;filter:blur(15px)!important}
  .contact-email-card,.contact-note,.contact-reel-card{width:auto!important;background:rgba(9,18,18,.78)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;padding:18px 16px!important}
  .contact-email-card{grid-column:1/7!important;grid-row:1!important;transform:rotate(-.25deg)!important}
  .contact-note--work{grid-column:1/5!important;grid-row:2!important;align-self:start!important;transform:translateY(4px) rotate(-.7deg)!important}
  .contact-note--city{grid-column:4/7!important;grid-row:2!important;align-self:end!important;transform:translateY(28px) rotate(.7deg)!important;z-index:3!important}
  .contact-reel-card{grid-column:2/7!important;grid-row:3!important;min-height:104px!important;align-self:end!important;transform:translateY(8px) rotate(.35deg)!important;gap:18px!important}
  .contact-email{display:flex!important;flex-wrap:wrap!important;font-size:clamp(22px,6.2vw,28px)!important;line-height:1.04!important;letter-spacing:-.045em!important}
  .contact-email span{display:inline!important}
  .contact-note strong{font-size:clamp(16px,4.7vw,20px)!important;line-height:1.2!important}
  .contact-reel-card strong{font-size:27px!important;line-height:.96!important}
  .contact-copy{margin-top:18px!important}
}
@media(max-width:640px){
  /* Director teaser restored to the earlier full-width mobile composition. */
  .home-about .about-tease .still{width:100%!important;aspect-ratio:4/3!important}
  .home-about .about-tease h2{font-size:52px!important;line-height:.88!important}
}
/* Transition atmosphere: soft film-burn color bleed rather than a tech sweep. */
.page-transition::before,.page-transition::after{
  inset:-18%!important;opacity:.34!important;
  background:radial-gradient(ellipse at 38% 55%,rgba(255,46,78,.32),transparent 24%),radial-gradient(ellipse at 57% 44%,rgba(254,126,60,.34),transparent 26%),radial-gradient(ellipse at 68% 58%,rgba(16,173,188,.22),transparent 23%)!important;
  filter:blur(34px)!important;transform:none!important;animation:transitionBurn 2.4s ease-in-out infinite alternate!important;
}
.page-transition::after{animation-delay:-1.1s!important;opacity:.2!important;transform:scale(1.12)!important}
@keyframes transitionBurn{0%{translate:-6% 1%;scale:1}55%{translate:5% -3%;scale:1.12}100%{translate:-1% 4%;scale:1.04}}
.sigil--loader i{right:auto!important}.sigil--loader b{left:auto!important}

/* =====================================================================
   Aug 07 — Round 5 navigation / transition consistency
   ===================================================================== */
.navlinks{justify-self:center!important;text-align:center!important}
.mobile-drawer{align-items:center!important;text-align:center!important}
.mobile-drawer a{width:100%!important;text-align:center!important}

/* Work-page intro line: four points smaller than the previous scale. */
.work .page-intro p{font-size:clamp(13px,1.1vw,18px)!important;line-height:1.4!important}

/* Cross-page transition is now a compact retro glow bar. Homepage's initial reel loader remains separate. */
.page-transition{background:rgba(4,10,10,.84)!important;backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important}
.page-transition .transition-core{display:none!important}
.page-transition::before{
  content:""!important;position:absolute!important;inset:auto!important;left:50%!important;top:50%!important;
  width:108px!important;height:7px!important;transform:translate(-50%,-50%)!important;
  border:1px solid rgba(241,234,216,.26)!important;border-radius:2px!important;
  background:linear-gradient(90deg,rgba(228,32,27,.25),rgba(14,104,115,.2))!important;
  box-shadow:0 0 8px rgba(228,32,27,.28),0 0 18px rgba(14,104,115,.18),inset 0 0 8px rgba(241,234,216,.08)!important;
  filter:none!important;opacity:1!important;animation:none!important;
}
.page-transition::after{
  content:""!important;position:absolute!important;inset:auto!important;top:50%!important;left:calc(50% - 52px)!important;
  width:28px!important;height:5px!important;margin-top:-2.5px!important;border-radius:1px!important;
  background:linear-gradient(90deg,var(--red),#d74c3c,var(--teal),var(--paper))!important;
  box-shadow:0 0 8px rgba(228,32,27,.7),0 0 14px rgba(14,104,115,.42)!important;
  filter:none!important;opacity:1!important;transform:none!important;
  animation:shellRetroBarSweep .82s steps(6,end) infinite!important;
}
@keyframes shellRetroBarSweep{0%{translate:0 0;scale:.7 1;opacity:.45}50%{translate:38px 0;scale:1.15 1;opacity:1}100%{translate:76px 0;scale:.72 1;opacity:.48}}

/* =====================================================================
   Aug 07 — Round 6: initial loader, reel blend, contact fit
   ===================================================================== */

/* Dedicated homepage buffer mark so the first-load experience cannot fall
   back to the legacy icon. It follows the supplied PERFECT reference: dark
   outlined letters with chromatic heat bleeding / melting downward. */
.perfect-loader{
  position:relative;
  width:min(330px,74vw);
  height:118px;
  isolation:isolate;
}
.perfect-loader span,
.perfect-loader::before,
.perfect-loader::after{
  content:"LOADING";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(44px,7vw,78px);
  line-height:1;
  letter-spacing:-.065em;
}
.perfect-loader span{
  z-index:3;
  color:#071010;
  -webkit-text-stroke:1.35px rgba(241,234,216,.94);
  text-shadow:-2px 1px 3px rgba(0,214,235,.75),2px -1px 3px rgba(255,47,76,.84),0 4px 10px rgba(254,126,60,.52);
  animation:perfectBodyMelt 1.9s cubic-bezier(.45,0,.3,1) infinite alternate;
}
.perfect-loader::before{
  z-index:1;
  color:transparent;
  background:linear-gradient(90deg,#00d7ea,#ff344d 23%,#ff8c32 44%,#f02594 64%,#17cfe4 82%,#ff4c2f);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:blur(5px) saturate(1.5);
  transform-origin:50% 25%;
  animation:perfectColorMelt 1.9s cubic-bezier(.45,0,.3,1) infinite alternate;
}
.perfect-loader::after{
  z-index:0;
  top:48%;left:8%;right:8%;bottom:-20%;inset:auto 8% -20% 8%;
  border-radius:48% 48% 70% 70%;
  background:linear-gradient(90deg,#ff2949,#ff7a31 24%,#10cadd 48%,#f02691 72%,#ff5b29);
  filter:blur(15px) saturate(1.55);
  opacity:.56;
  clip-path:polygon(0 0,100% 0,95% 28%,91% 100%,79% 55%,70% 96%,61% 42%,51% 100%,41% 53%,30% 92%,20% 44%,8% 100%);
  transform-origin:50% 0;
  animation:perfectDrip 1.9s ease-in-out infinite alternate;
}
@keyframes perfectBodyMelt{0%{transform:translateY(-1px) scaleY(.99) skewX(-.25deg)}100%{transform:translateY(3px) scaleY(1.055) skewX(-.7deg)}}
@keyframes perfectColorMelt{0%{transform:translateY(2px) scaleY(1.03);opacity:.55}100%{transform:translateY(16px) scaleY(1.5) skewX(-1deg);opacity:.92}}
@keyframes perfectDrip{0%{transform:translateY(0) scaleY(.48);opacity:.25}100%{transform:translateY(12px) scaleY(1.12);opacity:.64}}
.loader .loader-symbol{min-height:138px!important;display:grid!important;place-items:center!important}

/* Reel-to-work blend: almost no blur on the reel itself. The transition is
   a very short opacity/color feather only at the exact section boundary. */
.home-work{
  margin-top:-18px!important;
  padding-top:clamp(96px,8vw,132px)!important;
}
.home-work::before{
  top:-28px!important;
  height:30px!important;
  background:linear-gradient(180deg,rgba(9,18,18,0),rgba(9,18,18,.24) 48%,var(--black) 100%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:blur(2px)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* Contact reel wording follows the reel page. */
.contact-reel-card strong{letter-spacing:-.015em}

@media(max-width:640px){
  .home-work{margin-top:-10px!important;padding-top:88px!important}
  .home-work::before{top:-18px!important;height:20px!important;filter:blur(1.5px)!important}

  /* Fit the entire contact composition into a compact, readable mobile card
     while preserving the desktop asymmetry. */
  .contact-wrap.contact-playground{padding:98px 14px 44px!important}
  .contact-head .eyebrow{font-size:8px!important}
  .contact-head .contact-title{
    font-size:clamp(39px,10.8vw,50px)!important;
    line-height:.9!important;
    margin:7px 0 22px!important;
    max-width:8.6em!important;
  }
  .contact-scene{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:auto auto auto!important;
    min-height:0!important;
    padding:11px!important;
    gap:9px!important;
    overflow:hidden!important;
  }
  .contact-pattern{position:absolute!important;inset:0!important;height:auto!important;margin:0!important}
  .contact-email-card,.contact-note,.contact-reel-card{
    width:auto!important;
    padding:14px 13px!important;
    background:rgba(9,18,18,.76)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
  }
  .contact-email-card{grid-column:1/7!important;grid-row:1!important;transform:rotate(-.15deg)!important}
  .contact-note--work{grid-column:1/5!important;grid-row:2!important;transform:rotate(-.45deg)!important;align-self:stretch!important}
  .contact-note--city{grid-column:5/7!important;grid-row:2!important;transform:translateY(12px) rotate(.45deg)!important;align-self:end!important}
  .contact-reel-card{grid-column:2/7!important;grid-row:3!important;min-height:76px!important;transform:translateY(0) rotate(.2deg)!important;gap:8px!important}
  .contact-email{font-size:clamp(21px,5.65vw,26px)!important;line-height:1.02!important;margin-top:11px!important}
  .contact-copy{margin-top:13px!important;font-size:8px!important}
  .contact-note .label,.contact-reel-card .label,.contact-email-card .label{font-size:8px!important}
  .contact-note strong{font-size:clamp(13px,3.7vw,16px)!important;line-height:1.16!important;margin-top:7px!important}
  .contact-reel-card strong{font-size:clamp(22px,6vw,27px)!important;line-height:.94!important}
}
.perfect-loader::after{content:""!important;font-size:0!important;color:transparent!important}

/* =====================================================================
   Aug 07 — Round 7: reel edge + contact viewport fit
   ===================================================================== */

/* The reel itself stays sharp all the way to the boundary. The section seam
   is only a tiny 8px tonal feather — no blur layer over faces or copy. */
.home-work{
  margin-top:-4px!important;
  padding-top:clamp(84px,7vw,116px)!important;
}
.home-work::before{
  top:-8px!important;
  height:9px!important;
  background:linear-gradient(180deg,rgba(9,18,18,0),rgba(9,18,18,.18) 58%,var(--black) 100%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  opacity:1!important;
}

/* Homepage buffer loader: completely suppress every legacy icon layer so
   only the PERFECT-inspired melting LOADING word can render. */
.loader-symbol::before,.loader-symbol::after{display:none!important;content:none!important}
.loader-symbol>.sigil,.loader-symbol>img{display:none!important}
.loader .perfect-loader{display:block!important}

/* Closing section: headline only, no secondary line competing above/beside it. */
.home-contact .section-head{align-items:flex-end!important}
.home-contact .section-head>.text-link{display:none!important}

@media(max-width:640px){
  .home-work{margin-top:-2px!important;padding-top:74px!important}
  .home-work::before{top:-6px!important;height:7px!important;filter:none!important}

  /* Contact stays visually like desktop, but all four pieces fit in the first
     composition without needing a second card-height scroll. */
  .contact-wrap.contact-playground{
    padding:90px 14px 32px!important;
    min-height:auto!important;
  }
  .contact-head .contact-title{
    font-size:clamp(35px,9.7vw,45px)!important;
    line-height:.9!important;
    margin:6px 0 17px!important;
    max-width:8.8em!important;
  }
  .contact-scene{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:auto auto auto!important;
    gap:7px!important;
    min-height:340px!important;
    max-height:390px!important;
    padding:9px!important;
  }
  .contact-email-card,.contact-note,.contact-reel-card{padding:12px!important}
  .contact-email-card{grid-column:1/7!important;grid-row:1!important}
  .contact-note--work{grid-column:1/5!important;grid-row:2!important;transform:rotate(-.35deg)!important}
  .contact-note--city{grid-column:5/7!important;grid-row:2!important;transform:translateY(7px) rotate(.35deg)!important}
  .contact-reel-card{grid-column:2/7!important;grid-row:3!important;min-height:66px!important;gap:5px!important}
  .contact-email{font-size:clamp(19px,5.25vw,24px)!important;margin-top:8px!important}
  .contact-copy{margin-top:10px!important;font-size:7.5px!important;padding:7px 10px!important}
  .contact-note .label,.contact-reel-card .label,.contact-email-card .label{font-size:7px!important}
  .contact-note strong{font-size:clamp(12px,3.35vw,15px)!important;margin-top:5px!important}
  .contact-reel-card strong{font-size:clamp(19px,5.1vw,23px)!important}
}

/* =====================================================================
   Aug 10 — Round 8: localized hero vignette, subtle reel seam, full desktop
   director portrait, mobile footer/reel refinements, loader hardening
   ===================================================================== */

/* Keep the reel image itself clean. Darken only the compact region occupied
   by the hero copy so faces / footage stay visible elsewhere. */
.hero::after{
  background:linear-gradient(0deg,rgba(5,10,10,.07) 0%,transparent 12%)!important;
}
.hero-copy::before{
  left:-3.5%!important;
  top:-8%!important;
  width:103%!important;
  height:116%!important;
  background:radial-gradient(ellipse at 34% 54%,rgba(3,8,8,.72) 0%,rgba(3,8,8,.47) 35%,rgba(3,8,8,.15) 57%,transparent 74%)!important;
  filter:blur(11px)!important;
}

/* A short optical bridge at the exact reel/work boundary: enough to soften
   the cut, but never large enough to wash over the reel copy. */
.home-work{
  margin-top:-7px!important;
  padding-top:clamp(88px,7vw,118px)!important;
}
.home-work::before{
  top:-20px!important;
  height:22px!important;
  background:linear-gradient(180deg,rgba(9,18,18,0) 0%,rgba(9,18,18,.10) 30%,rgba(9,18,18,.55) 72%,var(--black) 100%)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  filter:none!important;
  opacity:1!important;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%,#000 100%)!important;
  mask-image:linear-gradient(180deg,transparent,#000 42%,#000 100%)!important;
}

/* Closing CTA arrow is part of the headline again. */
.home-contact .cta-arrow{
  display:inline-block;
  margin-left:.12em;
  color:var(--paper);
  font-family:'Instrument Sans',Arial,sans-serif;
  font-weight:400;
  transform:translateY(-.05em);
  transition:transform .3s ease,color .3s ease;
}
.home-contact:hover .cta-arrow{transform:translate(.14em,-.05em);color:var(--red)}

/* Desktop only: show the complete director photograph instead of cropping it.
   Mobile keeps the existing crop/ratio, which was already working well. */
@media(min-width:901px){
  .home-about .about-tease{
    grid-template-columns:minmax(230px,.62fr) 1.25fr .82fr!important;
    gap:clamp(32px,4.3vw,70px)!important;
  }
  .home-about .about-tease .still{
    width:100%!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    background:var(--black2)!important;
  }
  .home-about .about-tease .still img{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    display:block!important;
  }
  .about-hero-new{
    grid-template-columns:minmax(300px,.78fr) minmax(440px,1.22fr)!important;
    gap:clamp(42px,5.5vw,84px)!important;
    align-items:center!important;
  }
  .about-portrait{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/5!important;
    overflow:hidden!important;
    background:var(--black2)!important;
  }
  .about-portrait img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}

/* The legacy loader glyph is removed from the DOM, and this makes any stale
   residual loader class impossible to display if a cached template lingers. */
.loader .sigil,
.loader .sigil--loader,
.loader-symbol .sigil,
.page-transition .sigil--loader{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.loader .perfect-loader{display:block!important;visibility:visible!important;opacity:1!important}

/* Mobile-only refinements. */
@media(max-width:640px){
  .hero-copy::before{
    left:-4%!important;
    top:-6%!important;
    width:104%!important;
    height:112%!important;
    background:radial-gradient(ellipse at 34% 56%,rgba(3,8,8,.68) 0%,rgba(3,8,8,.42) 36%,rgba(3,8,8,.12) 58%,transparent 73%)!important;
    filter:blur(8px)!important;
  }
  .home-work{margin-top:-4px!important;padding-top:78px!important}
  .home-work::before{
    top:-14px!important;
    height:16px!important;
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
  }

  /* Homepage footer: legal + location remain quiet; email becomes the clear
     final action. Reel is intentionally omitted only on mobile. */
  .home .footer{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:14px 18px!important;
    align-items:end!important;
    padding-top:28px!important;
    padding-bottom:32px!important;
  }
  .home .footer>div:first-child{grid-column:1;grid-row:1}
  .home .footer .center{grid-column:1;grid-row:2;text-align:left!important}
  .home .footer .right{grid-column:2;grid-row:1/3;align-self:center;text-align:right!important}
  .home .footer .right a[href="reel.html"]{display:none!important}
  .home .footer .right a[href^="mailto:"]{
    display:inline-block!important;
    color:var(--paper)!important;
    font-size:12px!important;
    letter-spacing:.15em!important;
    padding:10px 0 7px!important;
    border-bottom:2px solid var(--red)!important;
    text-shadow:0 0 14px rgba(228,32,27,.20)!important;
  }

  /* On the dedicated reel page, don't reserve an entire viewport after a
     16:9 player; bring the stats banner directly up under the reel. */
  .reel .reel-page{
    min-height:auto!important;
    padding-top:106px!important;
    padding-bottom:26px!important;
  }
  .reel .full-reel{margin-bottom:0!important}
  .reel .stats-marquee{margin-top:0!important}
}

/* =====================================================================
   Aug 10 — Round 9: loader eradication, localized vignette, reliable
   motion covers, compact desktop contact
   ===================================================================== */

/* ONE loader language everywhere: a compact glowing retro status bar.
   The old loading word/glyph no longer exists in the HTML. */
.retro-loader-bar{
  position:relative;
  width:104px;
  height:7px;
  overflow:hidden;
  border:1px solid rgba(241,234,216,.30);
  border-radius:2px;
  background:linear-gradient(90deg,rgba(228,32,27,.12),rgba(14,104,115,.12));
  box-shadow:0 0 10px rgba(228,32,27,.28),0 0 22px rgba(14,104,115,.18),inset 0 0 9px rgba(241,234,216,.07);
}
.retro-loader-bar::before{
  content:"";position:absolute;inset:1px;
  background:repeating-linear-gradient(90deg,rgba(241,234,216,.08) 0 7px,transparent 7px 12px);
  opacity:.45;pointer-events:none;
}
.retro-loader-bar>i{
  display:block!important;width:0;height:100%;margin:0!important;
  background:linear-gradient(90deg,var(--red),#ff5840,var(--orange),#62b1b0,var(--teal),var(--paper));
  box-shadow:0 0 8px rgba(228,32,27,.75),0 0 16px rgba(14,104,115,.42);
  transition:width .16s linear;
}
.loader{background:rgba(4,10,10,.94)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.loader::before{display:none!important;content:none!important}
.loader-inner{width:auto!important;display:grid!important;place-items:center!important}
.loader .retro-loader-bar--initial{width:112px;height:7px}

/* Shared navigation transition = the same bar, never a symbol or full-screen sweep. */
.page-transition{
  background:rgba(4,10,10,.78)!important;
  backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;
}
.page-transition::before{
  content:""!important;position:absolute!important;left:50%!important;top:50%!important;inset:auto!important;
  width:104px!important;height:7px!important;transform:translate(-50%,-50%)!important;
  border:1px solid rgba(241,234,216,.30)!important;border-radius:2px!important;
  background:linear-gradient(90deg,rgba(228,32,27,.13),rgba(14,104,115,.13))!important;
  box-shadow:0 0 10px rgba(228,32,27,.28),0 0 22px rgba(14,104,115,.18),inset 0 0 9px rgba(241,234,216,.07)!important;
  animation:none!important;opacity:1!important;filter:none!important;
}
.page-transition::after{
  content:""!important;position:absolute!important;inset:auto!important;top:50%!important;left:calc(50% - 50px)!important;
  width:26px!important;height:5px!important;margin-top:-2.5px!important;border-radius:1px!important;
  background:linear-gradient(90deg,var(--red),var(--orange),#62b1b0,var(--teal),var(--paper))!important;
  box-shadow:0 0 8px rgba(228,32,27,.75),0 0 15px rgba(14,104,115,.45)!important;
  opacity:1!important;filter:none!important;transform:none!important;
  animation:round9RetroSweep .82s steps(6,end) infinite!important;
}
@keyframes round9RetroSweep{
  0%{translate:0 0;scale:.72 1;opacity:.42}
  50%{translate:38px 0;scale:1.12 1;opacity:1}
  100%{translate:74px 0;scale:.72 1;opacity:.45}
}
/* Absolute kill switch for every historical loader glyph/wordmark class. */
.sigil--loader,.perfect-loader,.loader-symbol,.transition-core,.transition-label{display:none!important;visibility:hidden!important;opacity:0!important}

/* Localized vignette: deliberately lives ABOVE the reel and BELOW the copy.
   Previous negative z-index implementation could disappear behind the video. */
.hero-copy{isolation:isolate!important}
.hero-copy::before{
  content:""!important;position:absolute!important;z-index:0!important;
  left:-28px!important;top:-22px!important;width:min(680px,106%)!important;height:calc(100% + 44px)!important;
  border-radius:48% 42% 44% 52%!important;
  background:radial-gradient(ellipse at 34% 54%,rgba(2,7,7,.67) 0%,rgba(2,7,7,.47) 34%,rgba(2,7,7,.20) 54%,rgba(2,7,7,.055) 68%,transparent 78%)!important;
  filter:blur(10px)!important;pointer-events:none!important;
}
.hero-copy>*{position:relative;z-index:1}
/* Don't double-darken the whole reel. */
.hero::after{background:linear-gradient(0deg,rgba(5,10,10,.055) 0%,transparent 9%)!important}

/* Actual optical blend at the seam: 34px on desktop, feathered so only the
   final few reel pixels soften into Featured Work. */
.hero{border-bottom:0!important}
.home-work{position:relative!important;margin-top:-10px!important;padding-top:clamp(92px,7vw,120px)!important}
.home-work::before{
  content:""!important;position:absolute!important;left:0!important;right:0!important;top:-30px!important;height:32px!important;z-index:0!important;
  background:linear-gradient(180deg,rgba(9,18,18,0) 0%,rgba(9,18,18,.12) 32%,rgba(9,18,18,.60) 74%,var(--black) 100%)!important;
  backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.42) 38%,#000 78%)!important;
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.42) 38%,#000 78%)!important;
  pointer-events:none!important;
}
.home-work>.section-head,.home-work>.featured{position:relative;z-index:1}

/* Motion covers: video layer becomes visible as soon as a decoded frame exists.
   No filters, grading or transforms are applied to the supplied MP4s. */
.motion-layer.local-motion{filter:none!important;opacity:0;will-change:opacity}
.motion-layer.local-motion.ready{opacity:1!important}

/* Desktop Contact: preserve the same asymmetric design, just compress its
   vertical footprint so the whole rectangle reads without a second scroll. */
@media(min-width:901px){
  .contact-wrap.contact-playground{padding-top:118px!important;padding-bottom:54px!important}
  .contact-head .contact-title{font-size:clamp(58px,8.7vw,132px)!important;line-height:.86!important;margin:8px 0 34px!important;max-width:900px!important}
  .contact-scene{min-height:420px!important;height:clamp(400px,48vh,470px)!important;padding:clamp(20px,2.2vw,34px)!important;gap:14px!important}
  .contact-email-card{padding:clamp(22px,2.5vw,38px)!important}
  .contact-email{font-size:clamp(28px,3.2vw,50px)!important;margin-top:14px!important}
  .contact-copy{margin-top:20px!important}
  .contact-note{padding:18px 22px!important}
  .contact-note strong{font-size:clamp(18px,1.65vw,27px)!important;margin-top:8px!important}
  .contact-note--city{transform:translateY(12px) rotate(.7deg)!important}
  .contact-note--work{transform:translateY(2px) rotate(-.7deg)!important}
  .contact-reel-card{padding:20px 22px!important;min-height:108px!important;transform:translateY(-3px)!important}
  .contact-reel-card strong{font-size:clamp(26px,2.45vw,38px)!important}
}

@media(max-width:640px){
  .hero-copy::before{
    left:-15px!important;top:-12px!important;width:calc(100% + 20px)!important;height:calc(100% + 25px)!important;
    background:radial-gradient(ellipse at 31% 55%,rgba(2,7,7,.60) 0%,rgba(2,7,7,.39) 35%,rgba(2,7,7,.14) 54%,transparent 74%)!important;
    filter:blur(7px)!important;
  }
  .home-work{margin-top:-5px!important;padding-top:78px!important}
  .home-work::before{top:-18px!important;height:20px!important;backdrop-filter:blur(2.5px)!important;-webkit-backdrop-filter:blur(2.5px)!important}
}

/* =====================================================================
   Aug 10 — Round 10 final: corner vignette + compact desktop contact
   ===================================================================== */

/* The vignette is anchored to the left/lower-left edge of the reel, like a
   natural lens falloff: darkest at the corner behind the copy and quickly
   dissolving into the footage. It is deliberately NOT a bubble around text. */
.home .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(
    ellipse 42% 82% at 0% 66%,
    rgba(3,8,8,.82) 0%,
    rgba(3,8,8,.67) 23%,
    rgba(3,8,8,.45) 41%,
    rgba(3,8,8,.23) 57%,
    rgba(3,8,8,.075) 72%,
    transparent 84%
  );
}
/* Retire the old copy-shaped vignette so there is only one controlled falloff. */
.home .hero-copy::before{display:none!important;content:none!important}

/* Desktop contact: smaller headline allows the full asymmetric card to enter
   the first viewport while preserving the same internal design and breathing room. */
@media(min-width:901px){
  .contact-wrap.contact-playground{
    padding-top:96px!important;
    padding-bottom:40px!important;
  }
  .contact-head .contact-title{
    font-size:clamp(54px,6.6vw,106px)!important;
    line-height:.86!important;
    margin:8px 0 20px!important;
    max-width:760px!important;
  }
  .contact-scene{
    min-height:350px!important;
    height:clamp(350px,42vh,400px)!important;
    padding:clamp(18px,1.9vw,30px)!important;
  }
}

@media(max-width:640px){
  /* Preserve the same corner-origin idea on phones, but keep the falloff tighter
     so it does not swallow the reel or the transition into Featured Work. */
  .home .hero::before{
    background:radial-gradient(
      ellipse 78% 60% at 0% 73%,
      rgba(3,8,8,.76) 0%,
      rgba(3,8,8,.60) 25%,
      rgba(3,8,8,.36) 44%,
      rgba(3,8,8,.15) 61%,
      rgba(3,8,8,.04) 74%,
      transparent 84%
    );
  }
}

/* =====================================================================
   Aug 10 — Round 11: stronger localized vignette + full-screen mobile reel
   ===================================================================== */

/* Increase the corner vignette strength by ~50% while keeping the same
   compact footprint. It remains localized to the copy side of the reel. */
.home .hero::before{
  background:radial-gradient(
    ellipse 42% 82% at 0% 66%,
    rgba(3,8,8,1) 0%,
    rgba(3,8,8,1) 23%,
    rgba(3,8,8,.68) 41%,
    rgba(3,8,8,.35) 57%,
    rgba(3,8,8,.115) 72%,
    transparent 84%
  )!important;
}

@media(max-width:640px){
  /* iPhone 15 Pro / modern mobile: the reel hero occupies the complete
     visible browser viewport. No shortened 84svh hero and no broad bottom
     darkening—the only darkness is the localized copy vignette. */
  .home .hero{
    height:100svh!important;
    min-height:100svh!important;
    max-height:none!important;
  }
  @supports(height:100dvh){
    .home .hero{height:100dvh!important;min-height:100dvh!important}
  }
  .home .hero video{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .home .hero::after{background:transparent!important}
  .home .hero::before{
    background:radial-gradient(
      ellipse 78% 60% at 0% 73%,
      rgba(3,8,8,1) 0%,
      rgba(3,8,8,.90) 25%,
      rgba(3,8,8,.54) 44%,
      rgba(3,8,8,.225) 61%,
      rgba(3,8,8,.06) 74%,
      transparent 84%
    )!important;
  }
  .home .hero-copy{
    bottom:clamp(46px,6.5svh,68px)!important;
  }
}

/* ===== Round 12: translucent dark-glass nav + larger eyebrow text ===== */
.nav{
  background:rgba(6,13,13,.38)!important;
  -webkit-backdrop-filter:blur(13px) saturate(1.18) brightness(.82)!important;
  backdrop-filter:blur(13px) saturate(1.18) brightness(.82)!important;
  border-color:rgba(241,234,216,.18)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(241,234,216,.035)!important;
}
.nav.scrolled{
  background:rgba(6,13,13,.50)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15) brightness(.78)!important;
  backdrop-filter:blur(14px) saturate(1.15) brightness(.78)!important;
}
.navlinks a,.mobile-menu{
  color:var(--paper)!important;
  text-shadow:0 1px 8px rgba(0,0,0,.70)!important;
}
/* Small red label text called out in the latest pass */
.eyebrow{font-size:13px!important;line-height:1.25!important}
@media(max-width:640px){
  .nav{background:rgba(6,13,13,.42)!important;-webkit-backdrop-filter:blur(12px) saturate(1.16) brightness(.80)!important;backdrop-filter:blur(12px) saturate(1.16) brightness(.80)!important}
  .eyebrow{font-size:13px!important}
}

/* =====================================================================
   Aug 27 — Round 13: one loader everywhere + photography section
   ===================================================================== */

/* The sweep previously animated the `translate` property, which older Safari
   ignores, and an earlier rule pinned `transform:none!important` so a
   transform-based animation could never win. Both are corrected here. */
.page-transition{transition:opacity .22s ease,visibility .22s ease!important}
.page-transition::after{
  transform:translateX(0)!important;
  translate:none!important;
  animation:retroSweep .82s steps(6,end) infinite!important;
}
@keyframes retroSweep{
  0%{transform:translateX(0) scaleX(.72)!important;opacity:.42}
  50%{transform:translateX(38px) scaleX(1.12)!important;opacity:1}
  100%{transform:translateX(74px) scaleX(.72)!important;opacity:.45}
}
/* Full-screen backdrop blur is the most expensive thing that can run during a
   navigation. Phones drop it and use flat opacity instead. */
@media(max-width:900px){
  .page-transition{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(4,10,10,.92)!important}
}
@media(prefers-reduced-motion:reduce){
  .page-transition::after{animation:none!important;transform:translateX(38px)!important}
}

/* =====================================================================
   Aug 27 — Round 14
   ===================================================================== */

/* ---------- ONE loading bar, drawn with real elements ----------
   The historical ::before/::after versions carried `transform:none!important`
   and `translate:none!important`, and an !important declaration always beats a
   CSS animation, so the sweep could never move on some builds. That is what was
   stuttering between pages. Both pseudo-elements are retired here. */
.page-transition::before,
.page-transition::after{content:none!important;display:none!important}
.page-transition .rl{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:104px;height:7px;overflow:hidden;border-radius:2px;
  border:1px solid rgba(241,234,216,.30);
  background:linear-gradient(90deg,rgba(228,32,27,.13),rgba(14,104,115,.13));
  box-shadow:0 0 10px rgba(228,32,27,.28),0 0 22px rgba(14,104,115,.18),inset 0 0 9px rgba(241,234,216,.07);
}
.page-transition .rl::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(241,234,216,.08) 0 7px,transparent 7px 12px);
  opacity:.45;
}
.page-transition .rl i{
  position:absolute;top:1px;bottom:1px;left:0;width:26px;border-radius:1px;
  background:linear-gradient(90deg,var(--red),#ff5840,var(--orange),#62b1b0,var(--teal),var(--paper));
  box-shadow:0 0 8px rgba(228,32,27,.75),0 0 16px rgba(14,104,115,.42);
  animation:rlSweep .82s steps(6,end) infinite;
}
@keyframes rlSweep{
  0%{transform:translateX(0) scaleX(.72);opacity:.42}
  50%{transform:translateX(38px) scaleX(1.12);opacity:1}
  100%{transform:translateX(74px) scaleX(.72);opacity:.45}
}
/* The homepage reel loader now shows the identical bar rather than a fill. */
.loader .retro-loader-bar--initial{width:104px;height:7px}
.loader .retro-loader-bar--initial>i{
  width:26px!important;left:0;position:absolute;top:1px;bottom:1px;height:auto;
  transition:none!important;animation:rlSweep .82s steps(6,end) infinite;
}
.loader .retro-loader-bar--initial{position:relative;overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .page-transition .rl i,.loader .retro-loader-bar--initial>i{
    animation:none!important;transform:translateX(38px)!important}
}

/* ---------- hero: full-width fade into the next section ----------
   Replaces the localized dark blob that sat behind the name. */
.hero-copy::before{display:none!important;content:none!important}
.hero{position:relative}
.hero .hero-fade{
  position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  height:clamp(180px,26vh,340px);
  background:linear-gradient(180deg,
    rgba(9,18,18,0) 0%,
    rgba(9,18,18,.28) 34%,
    rgba(9,18,18,.62) 62%,
    rgba(9,18,18,.88) 84%,
    var(--black) 100%);
}
/* A light scrim keeps the headline legible now that the blob is gone. */
.hero::after{background:
  linear-gradient(90deg,rgba(5,10,10,.55) 0%,rgba(5,10,10,.26) 44%,rgba(5,10,10,.04) 74%),
  linear-gradient(0deg,rgba(5,10,10,.34),transparent 40%)!important}
.home-work{margin-top:-1px!important;padding-top:clamp(76px,6vw,104px)!important}
.home-work::before{display:none!important}

/* ---------- softened edges on Featured Work and the About block ---------- */
.home-work .project-card .media,
.about-tease .still{
  border-radius:18px;overflow:hidden;
  -webkit-mask-image:radial-gradient(125% 125% at 50% 50%,#000 74%,rgba(0,0,0,.78) 90%,rgba(0,0,0,.22) 98%,transparent 100%);
  mask-image:radial-gradient(125% 125% at 50% 50%,#000 74%,rgba(0,0,0,.78) 90%,rgba(0,0,0,.22) 98%,transparent 100%);
}
.home-work .project-card .media img,
.home-work .project-card .media video,
.about-tease .still img{border-radius:18px}
.about-tease .still{box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}

/* ---------- proof strip: contact-card palette, one claim per project ---------- */
.stats-marquee{
  background:var(--black)!important;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:none!important;
}
.stats-marquee .marquee-track span{color:var(--paper2);margin-right:0}
.stats-marquee .marquee-track b{color:var(--red);font-weight:500;letter-spacing:.16em}
.stats-marquee .marquee-track .sep{color:var(--line);margin:0 34px;font-weight:400}

/* =====================================================================
   Aug 28 — Round 15
   ===================================================================== */

/* ---------- Featured Work: edges dissolve instead of stopping ----------
   The card was a hard rectangle: 1px border, solid card background and a
   square crop. All three are removed so the frame feathers out the way the
   reel does at the bottom of the hero. */
.home-work .project-card .media{
  border:0!important;
  background:transparent!important;
  border-radius:22px;
  overflow:hidden;
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* the darkening overlay was drawing its own hard edge on top of the mask */
.home-work .project-card .motion-cover::after{
  background:linear-gradient(180deg,transparent 58%,rgba(9,18,18,.55))!important;
  opacity:.85!important;
}
.home-work .project-card .preview-ui span{
  background:rgba(5,10,10,.5);border-radius:999px;
}
.home-work .project-card .media::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:22px;
  box-shadow:inset 0 0 46px 16px rgba(9,18,18,.55);
}
.home-work{background:transparent}

/* same treatment on the about still */
.about-tease .still{
  border-radius:22px;overflow:hidden;border:0!important;
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
@media(max-width:900px){
  .home-work .project-card .media,.about-tease .still{
    border-radius:18px;
    -webkit-mask-image:
      linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%),
      linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:
      linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%),
      linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  }
  .home-work .project-card .media::after{box-shadow:inset 0 0 34px 12px rgba(9,18,18,.5);border-radius:18px}
}

/* ---------- hero credit block: three lines, same type size ---------- */
.hero-copy .role-stack{
  display:flex;flex-direction:column;gap:3px;margin-bottom:6px;
  padding-left:16px;position:relative;
}
.hero-copy .role-stack::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:linear-gradient(180deg,var(--orange),var(--red));border-radius:2px;
}
.hero-copy .role-stack span{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper2);line-height:1.5;
}
.hero-copy .role-stack span:first-child{color:var(--red)}

/* Nav is fixed and floating, so no page may begin underneath it on phones.
   Applies to film project pages and the standard page hero as well. */
@media(max-width:900px){
  .proj-hero{padding-top:clamp(124px,26vw,168px)!important}
  .page-hero{padding-top:clamp(124px,26vw,168px)!important}
}

/* =====================================================================
   Round 16 — mobile scroll performance + work grid edges
   ===================================================================== */

/* ---------- work page covers get the landing page treatment ---------- */
.work-item .media{
  border:0!important;
  background:transparent!important;
  border-radius:20px;
  overflow:hidden;
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.work-item .media::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:20px;
  background:
    linear-gradient(180deg,rgba(9,18,18,.5) 0,transparent 12%,transparent 88%,rgba(9,18,18,.5) 100%),
    linear-gradient(90deg,rgba(9,18,18,.45) 0,transparent 9%,transparent 91%,rgba(9,18,18,.45) 100%);
}
@media(max-width:900px){
  .work-item .media{
    border-radius:16px;
    -webkit-mask-image:
      linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%),
      linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:
      linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%),
      linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  }
  .work-item .media::after{border-radius:16px}
}

/* ---------- the role block reads the same at every width ---------- */
.hero-copy .role-stack{gap:4px;padding-left:18px}
.hero-copy .role-stack span{font-size:11px;letter-spacing:.13em}
@media(min-width:901px){
  .hero-copy .role-stack{gap:5px;padding-left:20px;margin-bottom:10px}
  .hero-copy .role-stack::before{width:2px;top:3px;bottom:3px}
}

/* =====================================================================
   Scroll performance on phones.
   The jank came from effects that repaint on every scroll frame: a
   backdrop blur on the fixed nav sitting over moving content, a CSS filter
   applied to a playing full-screen video, and a screen-blend aura layered
   on top of it. None of them survive a phone's compositor budget.
   ===================================================================== */
@media(max-width:900px){
  .nav{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(9,18,18,.92)!important;
  }
  .mobile-drawer{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(9,18,18,.97)!important}
  .preview-ui span{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(5,10,10,.72)!important}

  /* filtering a playing video costs a GPU pass per frame; bake the look into
     a static overlay instead */
  .hero video{filter:none!important}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:rgba(4,10,10,.30);
  }
  .hero-aura{display:none!important}

  /* stop off-screen sections from being painted at all */
  .section,.work-grid,.marquee,.footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 640px;
  }
  .hero,.page-hero,.proj-hero,.photo-hero{content-visibility:visible}

  /* transforms and opacity only, so scrolling stays on the compositor */
  .project-card:hover img,.work-item:hover img,.motion-cover:hover .cover-poster{transform:none!important}
  .project-card img,.work-item img{transition:none!important}
}

/* the photo hero stack cross-fades five full-bleed frames; keep it on the
   compositor and out of the paint path */
body.photo .photo-hero__stack figure{will-change:opacity;backface-visibility:hidden}
@media(max-width:900px){
  body.photo .lb{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(8,13,15,.985)!important}
}

/* =====================================================================
   Round 17
   ===================================================================== */

/* The drawer was only ever given display:none inside the 900px query, so on
   wide screens it had no display rule at all. Any page without another rule
   to catch it rendered the drawer links inline over the header. */
.mobile-drawer{display:none}
.mobile-drawer.open{display:flex}

/* Photo project pages: clear the fixed nav pill on first paint at every width. */
body.photo .photo-head{padding-top:clamp(132px,12vw,168px)}
body.photo .photo-title,body.photo .photo-back{scroll-margin-top:120px}
.about-closing{margin:26px 0 0;max-width:60ch;color:var(--paper2);line-height:1.7;font-size:16px}
@media(max-width:900px){.manifesto-new .about-closing{margin-top:20px;font-size:15px}}