@font-face{font-family:Easyfeel Serif;src:url('assets/fonts/cormorant-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Easyfeel Serif;src:url('assets/fonts/cormorant-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Easyfeel Serif;src:url('assets/fonts/cormorant-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
:root{--ink:#100f0d;--soft-ink:#191714;--material-edge:#050504;--ivory:#eee6d8;--muted:#aba293;--copper:#c3946d;--pink:#e6a6b5;--line:rgba(238,230,216,.2);--pad:clamp(1.4rem,6vw,7rem);--frame-width:1800px;--page-gutter:max(var(--pad),calc((100% - var(--frame-width))/2 + var(--pad)));--serif:'Easyfeel Serif',Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;--progress:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem;background:var(--ink);color:var(--ivory)}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased}
body.dialog-open,body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
:where(button[data-film]){appearance:none;border:0;border-radius:0;padding:0;background:none;text-align:inherit}
:where(button.project-visual,button.award-image,button.broadcast-image,button.archive-film){width:100%}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--pink);outline-offset:7px}
p,h1,h2,h3,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400}
em{font-weight:400}
::selection{background:var(--pink);color:var(--ink)}
/* Backgrounds fill the frame; shared gutters keep the composition centered. */
.section-wrap{width:100%;padding-inline:var(--page-gutter);margin-inline:auto}
.eyebrow,.chapter{font-size:.75rem;font-weight:500;letter-spacing:.16em;line-height:1.6;text-transform:uppercase}
.micro{font-size:.75rem;line-height:1.5;letter-spacing:.05em;color:var(--muted)}
.chapter{display:flex;align-items:center;gap:1.1rem;color:var(--muted);margin-bottom:2.3rem}
.chapter span{width:2.5rem;height:1px;background:currentColor;opacity:.5}
.skip{position:fixed;top:1rem;left:1rem;transform:translateY(-200%);z-index:300;background:var(--ivory);color:var(--ink);padding:.75rem 1rem}
.skip:focus{transform:none}
.site-header{height:6rem;position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;z-index:50;padding:0 var(--page-gutter);transition:height .4s,background .4s,border-color .4s;border-bottom:1px solid transparent;color:var(--ivory)}
.site-header.scrolled{height:4.7rem;background:rgba(16,15,13,.91);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(238,230,216,.12)}
.wordmark{font-family:var(--serif);font-weight:400;font-size:2.9rem;line-height:1;letter-spacing:-.075em;flex:none}
.wordmark span{color:var(--pink)}
.site-header nav{display:flex;gap:2.5rem;align-items:center;font-size:.875rem}
.site-header nav a{position:relative;padding-block:.6rem}
.site-header nav a:after{content:'';position:absolute;left:0;right:0;bottom:.25rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.site-header nav a:hover:after{transform:scaleX(1)}
.hello-link{margin-left:0}.hello-link span{margin-left:.6rem}
.menu-toggle{display:none;width:44px;height:44px;border:0;background:none;position:relative}
.menu-toggle span{position:absolute;left:9px;width:26px;height:1px;background:currentColor;top:18px;transition:transform .25s}
.menu-toggle span+span{top:26px}
.menu-toggle[aria-expanded=true] span{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span+span{transform:translateY(-4px) rotate(-45deg)}
.reading-progress{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--copper);transform-origin:left;transform:scaleX(var(--progress))}
.hero{position:relative;isolation:isolate;min-height:max(49rem,100svh);display:flex;align-items:center;overflow:hidden;background:#15110f}
.hero-scenes,.hero-shade,.scene{position:absolute;inset:0;z-index:-2}
.scene{opacity:0;transition:opacity 1.7s ease;overflow:hidden}
.scene.is-active{opacity:1}
.scene img{width:100%;height:100%;object-fit:cover;object-position:center;transform:none;transition:none}
.scene.is-active img{transform:none}
.hero-scenes img{filter:contrast(1.04) brightness(1.025) saturate(1.02)}
html[data-motion=paused] .scene img{transform:none;transition:none}
.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(11,10,9,.62),rgba(11,10,9,.03) 75%),linear-gradient(0deg,#100f0d 0,rgba(16,15,13,.88) 5%,transparent 40%,rgba(16,15,13,.17) 80%,rgba(16,15,13,.65))}
.hero-content{padding:10rem var(--page-gutter) 13rem;width:100%;margin-inline:auto}
.hero-content .eyebrow{display:flex;gap:1rem;align-items:center;margin-bottom:2.4rem;color:#e6dccf}
.short-rule{width:2.4rem;height:1px;background:var(--pink)}
h1{font-size:clamp(5rem,11.2vw,11rem);line-height:.9;letter-spacing:-.055em;text-shadow:0 2px 24px rgba(0,0,0,.12)}
h1 em{color:#efd6bd;letter-spacing:-.04em}
.hero-title-lead{font-size:.95em}
.hero-intro{margin-top:2.4rem;color:#e2d9cb;font-size:1rem;line-height:1.7;max-width:33rem}
/* Animate the opening from first paint, before deferred scroll code runs. */
#hero-title>.hero-title-lead,#hero-title>em{display:inline-block;animation:hero-title-arrive 2.1s cubic-bezier(.25,.55,.3,1) both}
#hero-title>.hero-title-lead{animation-delay:.42s}
#hero-title>em{animation-delay:.8s;animation-duration:2.25s}
.hero-content>.eyebrow,.hero-intro,.hero-content>.underlined{animation:hero-copy-arrive 1.3s cubic-bezier(.25,.55,.3,1) both}
.hero-content>.eyebrow{animation-delay:.18s}
.hero-intro{animation-delay:1.45s}
.hero-content>.underlined{animation-delay:1.8s}
@keyframes hero-title-arrive{from{opacity:0;transform:translate3d(0,.14em,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hero-copy-arrive{from{opacity:0;transform:translate3d(0,11px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.underlined{font-size:.875rem;display:inline-flex;align-items:center;justify-content:space-between;gap:2.8rem;border-bottom:1px solid currentColor;padding:.7rem 0;min-height:44px;transition:color .2s}
.underlined:hover{color:var(--pink)}
.hero-content .underlined{margin-top:1.8rem}
.underlined span{font-size:1.2rem}
.hero-foot{position:absolute;bottom:2.5rem;left:var(--page-gutter);right:var(--page-gutter);display:flex;justify-content:space-between;align-items:end;gap:2rem}
.film-cue{display:flex;align-items:center;gap:1.2rem}
.play-button{width:52px;height:52px;border:1px solid rgba(238,230,216,.6);border-radius:50%;display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.play-button svg{width:20px;height:20px}
.film-cue:hover .play-button{color:var(--ink);background:var(--ivory)}
.film-cue strong{display:block;font-size:.95rem;font-weight:500;margin-top:.15rem}
.film-cue .micro{letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}
.scene-credit{display:block;color:var(--muted);font-size:.75rem;margin-top:.15rem}
.film-cue.cue-reveal>span:last-child{animation:hero-cue-arrive 1.1s cubic-bezier(.25,.55,.3,1) both}
@keyframes hero-cue-arrive{from{opacity:0;transform:translate3d(0,7px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.scene-controls{display:flex;align-items:center;gap:1.4rem}
.scene-count{font-size:.75rem;letter-spacing:.15em;color:var(--muted);font-variant-numeric:tabular-nums}
.scene-count b{color:var(--ivory);font-weight:400}
.scene-picks{display:flex;gap:8px}
.scene-picks button{border:0;background:none;width:36px;height:44px;padding:0;position:relative}
.scene-picks button:after{content:'';height:2px;position:absolute;left:0;right:0;top:21px;background:#6d675d;transition:background .2s}
.scene-picks button[aria-pressed=true]:after{background:var(--ivory)}
.scene-next{width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
.scene-next svg{width:20px;height:20px}
.clients{padding-block:3.8rem 4.8rem;background:linear-gradient(to bottom,var(--ink) 52%,var(--material-edge) 100%)}
.clients-top{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);margin-bottom:2.8rem}
.clients-top .eyebrow{font-size:.75rem}
.logo-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;column-gap:clamp(1.5rem,3vw,3.5rem);row-gap:2rem}
.logo-gallery>li{height:68px;display:grid;place-items:center;min-width:0}
.logo-gallery img{filter:invert(93%) sepia(17%) saturate(287%) hue-rotate(343deg) brightness(98%);object-fit:contain;opacity:.82;transition:opacity .3s;max-width:100%;max-height:50px}
.logo-gallery img.wide-logo{object-fit:contain}
.logo-gallery>li:hover img{opacity:1}
.material-section{position:relative;isolation:isolate;overflow:hidden}
.material-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 82%,transparent 100%)}
.source{min-height:56rem;min-height:max(46rem,90svh);display:flex;align-items:center;background:var(--material-edge)}
.source .material-image{object-position:center}
.source-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(12,10,8,.78),rgba(12,10,8,.2) 48%,transparent 78%),linear-gradient(0deg,var(--material-edge) 0,rgba(5,5,4,.92) 5%,transparent 27%,transparent 72%,rgba(5,5,4,.92) 96%,var(--material-edge) 100%)}
.source-copy{width:100%;padding-block:8rem}
.source h2,.piano h2{font-size:clamp(4rem,8.2vw,8rem);line-height:.93;letter-spacing:-.035em}
.source h2 em{color:var(--copper)}
.source-copy>p:not(.chapter){margin-top:2rem;font-size:1.15rem;line-height:1.65;max-width:29rem;color:#dfd0be}
.source-copy>p.source-detail{font-size:.95rem;max-width:26rem;color:#b8a58f;margin-top:1.3rem}
.material-caption{position:absolute;bottom:2.4rem;right:var(--page-gutter);letter-spacing:.15em;text-transform:uppercase;font-size:.75rem;color:#cdbfaa}
.work{padding-block:8rem 7rem;background:linear-gradient(to bottom,var(--material-edge) 0,var(--ink) 11rem)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:4rem;margin-bottom:4.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
h2{font-size:clamp(3.5rem,6.3vw,6.3rem);line-height:.97;letter-spacing:-.045em}
h2 em{color:var(--copper)}
.section-aside{font-size:.95rem;line-height:1.7;color:var(--muted);margin-bottom:.6rem;margin-right:4%}
.section-aside .editorial-index{display:block;margin-bottom:1.2rem;color:var(--copper);font-size:.75rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase}
.project-visual{position:relative;display:block;overflow:hidden;background:#221d18;isolation:isolate}
.project-visual:after,.award-image:after,.broadcast-image:after{content:'';position:absolute;inset:0;background:none;pointer-events:none}
.project-visual img{width:100%;height:100%;object-fit:cover;transition:none}
.project-visual:hover img,.project-visual:focus-visible img{transform:none}
.project-lead{margin-left:7%;margin-right:3%}
.project-lead .project-visual{aspect-ratio:1.782}
.frame-corner{position:absolute;z-index:1;top:1.5rem;left:1.6rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:white}
.project-play{position:absolute;bottom:1.3rem;right:1.5rem;z-index:1;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-size:.8rem;color:white;letter-spacing:.02em}
.small-play{width:33px;height:33px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;font-size:.55rem;padding-left:2px}
.project-caption{display:flex;justify-content:space-between;align-items:start;gap:1.5rem;margin-top:1.4rem}
.project-caption .micro{text-transform:uppercase;letter-spacing:.11em;font-size:.75rem}
.project-caption h3{font-size:2.45rem;line-height:1.15;letter-spacing:-.035em;margin-top:.35rem}
.project-lead .project-caption h3{font-size:clamp(3.2rem,4.7vw,5rem);line-height:.92}
.project-caption>p{color:var(--muted);font-size:.875rem;line-height:1.6;text-align:right;padding-top:.25rem}
.work-duet{display:block;margin-top:8rem}
.project-wide-left{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(13rem,.45fr);gap:5%;align-items:end;margin-right:3%}
.project-wide-left .project-visual{grid-column:1;grid-row:1;aspect-ratio:2.453}.project-wide-left .project-visual img{object-position:center}
.project-wide-left .project-caption{grid-column:2;grid-row:1;display:block;margin:0 0 1rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.project-wide-left .project-caption h3{font-size:clamp(3rem,4.3vw,4.8rem);line-height:.9}
.project-wide-left .project-caption>p{text-align:left;margin-top:1.2rem}
.project-wide-right{display:grid;grid-template-columns:minmax(14rem,.55fr) minmax(0,1.45fr);gap:7%;align-items:center;margin:9rem 2% 0 9%}
.project-wide-right .project-visual{grid-column:2;grid-row:1;aspect-ratio:1.973}.project-wide-right .project-visual img{object-position:center}
.project-wide-right .project-caption{grid-column:1;grid-row:1;display:block;margin:0;padding:1.3rem 0 1.5rem;border-top:1px solid var(--line)}
.project-wide-right .project-caption h3{font-size:clamp(3.2rem,4.7vw,5rem);line-height:.92}
.project-wide-right .project-caption>p{text-align:left;margin-top:1.2rem}
.project-feature{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:7%;margin-top:8rem}
.project-feature .project-visual{aspect-ratio:1.44}.project-feature .project-visual img{object-position:center}
.feature-copy{position:relative;padding:1.3rem 0 1.5rem;border-top:1px solid var(--line)}
.feature-copy .micro,.closing-copy .micro{text-transform:uppercase;letter-spacing:.11em;font-size:.75rem}
.feature-copy h3{font-size:clamp(3rem,5.7vw,6rem);line-height:.92;letter-spacing:-.05em;margin-block:.35rem 2rem}
.feature-copy h3 em{color:#a8b4ae}
.feature-copy>p{font-size:1rem;line-height:1.7;color:var(--muted)}
.project-closing{display:grid;grid-template-columns:.72fr 1.28fr;align-items:end;gap:8%;margin:9rem 6% 0 2%}
.project-closing .project-visual{grid-column:2;grid-row:1;aspect-ratio:1.65}
.project-closing .project-visual img{object-position:center}
.closing-copy{grid-column:1;grid-row:1;padding:1.5rem 0 1.2rem;border-top:1px solid var(--line)}
.closing-copy h3{font-size:clamp(3rem,5.5vw,5.7rem);line-height:.9;letter-spacing:-.05em;margin-block:.35rem 1.8rem}
.closing-copy h3 em{color:#c5c8c9}
.closing-copy>p{font-size:1rem;line-height:1.7;color:var(--muted)}
.archive-link{display:flex;justify-content:center;margin-top:5rem}
.recognition{padding-block:7rem 8rem;border-top:1px solid var(--line);background:linear-gradient(to bottom,var(--soft-ink) 0,var(--soft-ink) calc(100% - 12rem),var(--material-edge) 100%)}
.recognition-top{display:flex;gap:4rem;justify-content:space-between;align-items:start;margin-bottom:5rem}
.recognition-top .chapter{max-width:24rem;flex:none;margin-top:.6rem;font-size:.75rem}
.recognition-top h2{text-align:right;font-size:clamp(3.2rem,5.5vw,5.6rem)}
.award-feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;align-items:center}
.award-label{font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ivory)}
.award-status{font-family:var(--serif);font-style:italic;font-size:2.8rem;line-height:1.1;color:var(--copper);margin-top:.2rem;margin-bottom:2.5rem}
.award-copy h3{font-size:clamp(2.6rem,4vw,4.7rem);line-height:1;letter-spacing:-.03em}
.award-copy h3 em{font-size:.85em;color:#d3c9b9}
.award-copy>p:not(.award-label,.award-status){font-size:1rem;color:var(--muted);line-height:1.7;max-width:29rem;margin-top:1.7rem}
.award-copy .underlined{margin-top:1.5rem}
.award-image{display:block;position:relative;aspect-ratio:1.35;overflow:hidden;background:#e2d9bf}
.award-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.award-image .project-play{color:var(--ivory)}
.broadcast-feature{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:8%;margin-top:6.5rem;padding-top:3rem;border-top:1px solid var(--line)}
.broadcast-image{display:block;position:relative;overflow:hidden;aspect-ratio:1.86}
.broadcast-image img{height:100%;width:100%;object-fit:cover}
.broadcast-feature h3{font-size:clamp(2.5rem,4vw,4.4rem);line-height:1.03;letter-spacing:-.03em;margin-block:1.2rem}
.broadcast-feature h3 em{color:var(--copper)}
.broadcast-feature div>p:not(.micro){font-size:.9rem;line-height:1.6;color:var(--muted)}
.piano{min-height:max(47rem,94svh);display:flex;align-items:center;background:var(--material-edge)}
.piano .material-image{object-position:center}
.piano-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(10,9,8,.78),rgba(10,9,8,.2) 70%),linear-gradient(0deg,var(--material-edge) 0,rgba(5,5,4,.9) 5%,transparent 27%,transparent 72%,rgba(5,5,4,.9) 96%,var(--material-edge) 100%)}
.piano-copy{width:100%;padding-block:8rem}
.piano h2 em{color:#dec6a2}
.piano h2{font-size:clamp(4.5rem,8.2vw,9rem)}
.piano .chapter{color:#bbaa95}
.studio{padding-block:7rem 8rem;background:linear-gradient(to bottom,var(--material-edge) 0,var(--ink) 11rem)}
.studio-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:start}
.studio-intro .eyebrow{color:var(--muted);margin-bottom:2rem}
.studio-intro h2{font-size:clamp(3.3rem,5.8vw,6.2rem)}
.studio-story{padding-top:4.2rem}
.studio-story>p{font-size:1.1rem;line-height:1.7;color:#d3cabb;max-width:35rem}
.studio-story .studio-bio strong{font-weight:600;color:var(--ivory)}
.studio-story>p+p{margin-top:1.5rem;font-size:.96rem;color:var(--muted)}
.studio-story>p.micro{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-top:2rem}
.practice{display:grid;grid-template-columns:1fr 2fr;gap:6%;margin-top:6.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.practice-label .chapter{margin-bottom:1.8rem}
.practice-label>p:not(.chapter){font-family:var(--serif);font-size:2rem;line-height:1.15;color:#c6b7a3}
.service-item{border-bottom:1px solid var(--line);padding:1.8rem 0 2rem}
.service-item:first-child{padding-top:.25rem}
.service-item h3{display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:1.7rem;align-items:baseline;font-family:var(--sans);font-size:1rem;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.16em;color:#c6b7a3;text-transform:uppercase}
.service-item h3>span{font-family:var(--sans);font-style:normal;font-weight:500;font-size:.875rem;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#c6b7a3}
.service-body{padding:.9rem 2rem 0 3.7rem;color:#fff;max-width:44rem;font-size:1rem;line-height:1.65}
.service-body .formats{font-size:.875rem;line-height:1.6;margin-top:1.2rem;color:inherit}
.contact{padding-block:6rem 4.5rem;background:#2f2119;border-top:1px solid #634d3c;position:relative;isolation:isolate;overflow:hidden}
.contact:before{content:'';position:absolute;z-index:-2;inset:-1px;background:url('assets/contact-synth-moody-clean-3840.webp') center 50%/cover no-repeat;opacity:.72;filter:saturate(.72) sepia(.12) brightness(.7) contrast(1.04)}
.contact:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(45,29,20,.58) 0%,rgba(40,26,18,.7) 56%,rgba(23,15,12,.86) 100%),linear-gradient(180deg,rgba(34,22,16,.54) 0%,rgba(40,26,18,.55) 46%,rgba(24,15,12,.91) 100%)}
.contact>.eyebrow{color:#bfa98f;margin-bottom:3rem}
.contact h2{font-size:clamp(5.5rem,13vw,14rem);line-height:.88;letter-spacing:-.05em;padding-bottom:.1em}
.contact h2 em{color:#e5b7a7;display:inline-block;margin-left:min(14vw,252px)}
.contact-foot{display:flex;justify-content:space-between;align-items:end;margin-top:4rem;gap:2rem;padding-top:2rem;border-top:1px solid rgba(238,230,216,.25)}
.contact-foot>p{font-size:.95rem;line-height:1.65;color:#c7b59e}
.contact-email{font-size:1rem;line-height:1.65;letter-spacing:normal;color:#c7b59e;border-bottom:1px solid #ad8b6a;padding:.7rem 0}
.contact-email>span{margin-left:2.2rem;color:inherit}
footer{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:2.8rem;background:#100f0d}
footer .wordmark{font-size:2.5rem}footer p{font-size:.75rem;color:var(--muted)}footer p:last-child{text-align:right}
dialog{width:min(92vw,1260px);max-width:none;max-height:94svh;border:1px solid #5b5246;padding:0;background:#171410;color:var(--ivory);overflow:auto;box-shadow:0 30px 120px #000}
dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(10px)}
.film-dialog-top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;gap:1rem}
.film-dialog-top h2{font-family:var(--sans);font-size:1rem;letter-spacing:0;line-height:1.5;margin-top:.25rem}
#close-film{border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ivory);width:44px;height:44px;padding:0;display:grid;place-items:center;flex:none;transition:background .2s,color .2s,border-color .2s}
#close-film svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#close-film:hover{background:var(--ivory);border-color:var(--ivory);color:var(--ink)}
#film-title:focus{outline:none}
#close-film:focus-visible,.fullscreen-toggle:focus-visible{outline:2px solid var(--muted);outline-offset:4px}
.film-player{aspect-ratio:16/9;position:relative;background:#000}
.film-player iframe{position:absolute;inset:0;border:0;width:100%;height:100%}
.film-dialog-foot{display:flex;gap:1rem;justify-content:flex-end;padding:1rem 1.5rem;color:var(--muted);font-size:.8rem}
.film-dialog-foot a{color:var(--ivory);text-decoration:underline;text-underline-offset:4px}
.fullscreen-toggle{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ivory);display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.fullscreen-toggle:hover{background:var(--ivory);border-color:var(--ivory);color:var(--ink)}
.fullscreen-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
dialog.viewer-expanded{position:fixed;inset:0;width:var(--viewer-width,100vw);height:var(--viewer-height,100dvh);max-width:none;max-height:none;margin:0;border:0;overflow:hidden;background:#000}
dialog.viewer-expanded .film-dialog-top{display:none}
dialog.viewer-expanded .film-player{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto}
dialog.viewer-expanded .film-dialog-foot{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:3;padding:0;border:0}
dialog.viewer-expanded .film-dialog-foot>p,dialog.viewer-expanded .viewer-navigation{display:none}
dialog.viewer-expanded .fullscreen-toggle{background:rgba(16,15,13,.62);border-color:rgba(238,230,216,.55);backdrop-filter:blur(8px)}
@media(max-width:1050px){
  :root{--pad:2.4rem}.site-header nav{gap:1.5rem}.hello-link{margin-left:0}.logo-gallery{gap:1rem}
  .hero{min-height:max(49rem,93svh)}.hero-content{padding-bottom:12rem}h1{font-size:8rem}
  .section-aside{margin-right:0}.project-lead{margin-left:5%}.work-duet{gap:5%}.award-feature{gap:5%}
  .recognition-top{display:block}.recognition-top h2{text-align:left}.recognition-top .chapter{max-width:100%}
  .studio-intro{gap:5%}.studio-story{padding-top:3.5rem}
  .clients{padding-block:3rem}.logo-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 2.5rem}.logo-gallery>li{height:62px}
}
@media(max-width:760px){
  :root{--pad:1.5rem;--mobile-header-height:4.5rem;--safe-top:env(safe-area-inset-top,0px)}
  html{scroll-padding-top:calc(var(--mobile-header-height) + var(--safe-top) + 1rem)}
  body{background:var(--ink)}
  .skip{top:calc(var(--safe-top) + 1rem)}
  /* One steady, opaque surface through the iPhone safe area and browser chrome. */
  .site-header,.site-header.scrolled,.archive-page .site-header{height:calc(var(--mobile-header-height) + var(--safe-top));padding-top:var(--safe-top);padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate;transition:border-color .4s}
  /* Paint above the viewport too, where iOS can reveal content beneath its toolbar. */
  .site-header::before{content:'';position:absolute;inset:-100vh 0 0;inset-block-start:-100lvh;z-index:-1;background:var(--ink);pointer-events:none}
  .site-header .wordmark{font-size:2.5rem}
  .menu-toggle{display:block}.site-header nav{display:none;position:absolute;top:100%;inset-inline:0;max-height:calc(100svh - var(--mobile-header-height) - var(--safe-top));overflow-y:auto;overscroll-behavior-y:contain;padding:2rem var(--pad) max(3rem,env(safe-area-inset-bottom,0px));background:var(--ink);border-bottom:1px solid var(--line);font-family:var(--serif);font-size:2.2rem;align-items:start;gap:.5rem}
  .site-header.scrolled nav{top:100%}.site-header nav.is-open{display:flex;flex-direction:column}.site-header nav a{width:100%}.site-header nav .hello-link{font-family:var(--sans);font-size:1rem;margin-top:1.4rem}
  .hero{min-height:max(47rem,100svh)}.hero-content{padding-top:calc(9rem + var(--safe-top));padding-bottom:14rem}.hero-content .eyebrow{font-size:.75rem;letter-spacing:.13em;margin-bottom:2rem}
  h1{font-size:clamp(4rem,20.8vw,7.5rem);line-height:.91}.hero-intro{font-size:.95rem;max-width:25rem;margin-top:2rem}
  .hero-shade{background:linear-gradient(90deg,rgba(9,8,7,.4),rgba(9,8,7,.06)),linear-gradient(0deg,#100f0d 0,rgba(16,15,13,.82) 12%,transparent 77%,rgba(16,15,13,.65))}
  .scene img[data-hero-frame="mls"]{object-position:45% center}.scene img[data-hero-frame="resorts"]{object-position:51% center}.scene img[data-hero-frame="mixtape"]{object-position:53% center}.scene img[data-hero-frame="adobe"]{object-position:45% center}.scene img[data-hero-frame="razr"]{object-position:56% center}.scene img[data-hero-frame="newBalance"]{object-position:65% center}
  .hero-foot{bottom:1.6rem;display:grid;gap:.9rem}.scene-controls{gap:.75rem;justify-content:space-between;width:100%}.scene-picks{flex:1;min-width:0;gap:6px;justify-content:center}.scene-picks button{width:auto;min-width:0;max-width:44px;flex:1}
  .film-cue{gap:.8rem}.film-cue .play-button{width:44px;height:44px}.scene-credit{font-size:.75rem}.film-cue strong{font-size:.875rem}
  .clients-top{display:block}.clients-top .micro{margin-top:.5rem}.clients-top .eyebrow{font-size:.75rem}.logo-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.5rem}.logo-gallery>li{height:54px}.logo-gallery img{max-width:74%;max-height:38px}.logo-gallery img.wide-logo{max-height:38px;max-width:88%;object-fit:contain}
  .source{min-height:47rem}.source .material-image{object-position:65% center}.source-shade{background:linear-gradient(90deg,rgba(12,10,8,.85),rgba(12,10,8,.5) 62%,rgba(12,10,8,.08)),linear-gradient(0deg,var(--material-edge) 0,rgba(5,5,4,.92) 5%,transparent 30%,transparent 68%,rgba(5,5,4,.92) 96%,var(--material-edge) 100%)}
  .source-copy{padding-block:6rem}.source-copy>p:not(.chapter){font-size:1rem;max-width:26rem}.source-copy>p.source-detail{font-size:.9rem}.source h2{font-size:clamp(3.4rem,13vw,5.2rem)}.chapter{font-size:.75rem;gap:.8rem;margin-bottom:1.8rem}
  .material-caption{right:auto;left:var(--pad);font-size:.75rem;bottom:1.8rem}.work{padding-block:5rem}.section-heading{display:block;margin-bottom:2.8rem}.section-aside{margin-top:2rem;font-size:.9rem}.section-aside br{display:none}.section-aside{max-width:26rem}
  h2{font-size:clamp(3.5rem,10vw,4.7rem)}.project-lead{margin-inline:0}.project-lead .project-visual{aspect-ratio:1.5}.project-caption{display:block}.project-caption>p{text-align:left;margin-top:.6rem}.project-caption h3{font-size:2.1rem}.project-lead .project-caption h3{font-size:3.2rem}
  .frame-corner{top:1rem;left:1rem;font-size:.75rem}.project-play{bottom:.75rem;right:1rem;font-size:.75rem}.small-play{width:30px;height:30px}
  .work-duet{display:block;margin-top:4.2rem}.project-wide-left{display:block;margin:0 8% 0 0}.project-wide-left .project-visual{aspect-ratio:1.65}.project-wide-left .project-caption{margin-top:1.2rem;padding-top:1rem}.project-wide-left .project-caption h3{font-size:3rem}.project-wide-right{display:block;margin:4.8rem 0 0 10%}.project-wide-right .project-visual{aspect-ratio:1.5}.project-wide-right .project-caption{margin-top:1.2rem;padding-top:1rem}.project-wide-right .project-caption h3{font-size:3.2rem}
  .project-feature{display:block;margin:4.8rem 0 0 10%}.project-feature .project-visual{aspect-ratio:1.5}.feature-copy{margin-top:1.2rem;padding:1rem 0 1.5rem;border-top:1px solid var(--line)}.feature-copy h3{font-size:3.2rem;line-height:.92;letter-spacing:-.035em;margin-block:.35rem 1rem}.feature-copy p{font-size:.9rem}
  .project-closing{grid-template-columns:1fr;gap:1.7rem;margin:4.5rem 0 0}.project-closing .project-visual{grid-column:1;grid-row:1;aspect-ratio:1.4;margin-left:8%}.closing-copy{grid-column:1;grid-row:2;padding-top:1.3rem}.closing-copy h3{font-size:3.9rem;margin-block:.35rem 1rem}.closing-copy>p{font-size:.9rem}.archive-link{margin-top:3rem}
  .recognition{padding-block:4rem 5rem}.recognition-top{margin-bottom:3rem}.recognition-top h2{font-size:3.8rem}.recognition-top .chapter{font-size:.75rem;letter-spacing:.11em;flex-wrap:wrap}.award-feature{grid-template-columns:1fr;gap:2.5rem}.award-status{margin-bottom:1.7rem}.award-copy h3{font-size:3rem}.award-copy>p:not(.award-label,.award-status){font-size:.95rem}
  .award-image{aspect-ratio:1.5;width:93%;margin-left:7%}.broadcast-feature{grid-template-columns:1fr;gap:2rem;margin-top:3rem;padding-top:2.5rem}.broadcast-feature h3{font-size:3rem;margin-block:1rem}.broadcast-feature .micro{font-size:.75rem}
  .piano{min-height:46rem}.piano .material-image{object-position:66% center}.piano-shade{background:linear-gradient(90deg,rgba(10,9,8,.81),rgba(10,9,8,.25)),linear-gradient(0deg,var(--material-edge) 0,rgba(5,5,4,.9) 5%,transparent 30%,transparent 68%,rgba(5,5,4,.9) 96%,var(--material-edge) 100%)}.piano h2{font-size:clamp(4rem,14vw,5.2rem)}.piano-copy{padding-block:6rem}
  .studio{padding-block:4.5rem 5rem}.studio-intro{grid-template-columns:1fr;gap:2rem}.studio-intro h2{font-size:3.6rem}.studio-story{padding-top:0}.studio-story>p{font-size:1rem}.studio-story>p+p{font-size:.9rem}.practice{grid-template-columns:1fr;gap:1.5rem;margin-top:3rem;padding-top:2rem}.practice-label>p:not(.chapter){display:none}.practice-label .chapter{margin-bottom:.2rem}
  .service-item{padding:1.45rem 0 1.7rem}.service-item:first-child{padding-top:.5rem}.service-item h3{column-gap:1rem}.service-body{padding-left:3rem;padding-right:.5rem;font-size:.95rem}
  .contact{padding-block:4rem 3rem}.contact:before{background-image:image-set(url('assets/contact-synth-moody-clean-640.webp') 1x,url('assets/contact-synth-moody-clean-1280.webp') 2x);background-position:58% 50%;opacity:.68}.contact:after{background:linear-gradient(90deg,rgba(43,28,20,.76),rgba(26,17,13,.86)),linear-gradient(180deg,rgba(36,23,17,.58),rgba(24,15,12,.92))}.contact>.eyebrow{font-size:.75rem}.contact h2{font-size:clamp(3.8rem,18.8vw,7rem);line-height:.91}.contact h2 em{margin-left:10vw}.contact-foot{display:block;margin-top:2.5rem}.contact-foot>p{font-size:.9rem}.contact-email{display:inline-block;margin-top:1rem}.contact-email span{margin-left:1.2rem}
  footer{flex-wrap:wrap;padding-block:2rem;gap:1.5rem}footer>p:nth-child(2){display:none}footer p:last-child{font-size:.75rem}
  dialog{width:calc(100vw - 1.2rem);max-height:95svh}.film-dialog-top{padding:1rem}.film-dialog-foot{padding:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:flex-end}.film-dialog-foot p{margin:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene,.scene img,.project-visual img,.site-header{transition:none!important;transform:none!important}#hero-title>.hero-title-lead,#hero-title>em,.hero-content>.eyebrow,.hero-intro,.hero-content>.underlined,.film-cue.cue-reveal>span:last-child{animation:none!important;opacity:1!important;transform:none!important}}
@media(forced-colors:active){.logo-gallery img{filter:none}.source-copy,.hero-content,.piano-copy{background:Canvas;color:CanvasText}.hero-shade{background:Canvas;opacity:.65}}

@media(max-width:760px){.scene img[data-hero-frame="f1"]{object-position:50% center}}

/* Readable body copy and film controls at every viewport. */
.hero-intro,.source-copy>p.source-detail,.section-aside,.project-caption>p,.feature-copy>p,.award-copy>p:not(.award-label,.award-status),.broadcast-feature div>p:not(.micro),.studio-story>p,.studio-story>p+p,.service-body,.contact-foot>p{font-size:1rem}
.studio-story>p.micro{font-size:.75rem}
.project-play{font-size:.875rem}

/* Keep the films' own color and detail; shade only the labels. */
.frame-corner{background:rgba(12,11,10,.6);padding:.4rem .65rem;border-radius:3px}
.project-play{background:rgba(12,11,10,.65);padding:.35rem .7rem;border-radius:3px}

/* Scroll choreography preserves each section's dimensions and native navigation. */
.scroll-line{display:block}
.scroll-depth-active{will-change:translate}
@media(prefers-reduced-motion:reduce){
  .scroll-depth{translate:none!important;will-change:auto}
  .scroll-line{transform:none!important;opacity:1!important}
}
@media print{
  .scroll-depth{translate:none!important}
  .scroll-line{transform:none!important;opacity:1!important}
  #hero-title>.hero-title-lead,#hero-title>em,.hero-content>.eyebrow,.hero-intro,.hero-content>.underlined,.film-cue.cue-reveal>span:last-child{animation:none!important;opacity:1!important;transform:none!important}
}