:root{--accent:#fff;--bg:#080808;--gutter:clamp(24px,6.67vw,96px)}
body{background:#080808;color:#ffffff}.site-header{background:#080808}.studio-main{padding:0 var(--gutter)}
.studio-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:72px 0 68px}.studio-intro h1{font-size:clamp(44px,6vw,88px);font-weight:500;line-height:1;letter-spacing:-.035em}.studio-intro p{font-size:clamp(17px,1.6vw,23px);line-height:1.35;color:#aaa}
.studio-section-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px}.studio-section-heading h2{font-size:clamp(23px,2.5vw,34px);font-weight:400;letter-spacing:-.015em}.studio-section-heading>span,.studio-section-heading p{font-size:14px;color:#a9a9a9}.studio-section-heading p{margin-top:12px}
.film-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}.film-filters button{background:transparent;border:1px solid #343434;color:#bbb;padding:12px 17px;min-height:44px;font-size:13px;border-radius:0;transition:background .2s,color .2s}.film-filters button[aria-pressed=true]{background:#eee;color:#080808;border-color:#eee}.film-filters button:hover{border-color:#aaa;color:#fff}.film-filters button[aria-pressed=true]:hover{color:#080808}
.film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.film-card{display:flex;flex-direction:column;text-align:left;min-width:0;padding:0;border:1px solid #252525;border-radius:0;background:#111;color:#fff;overflow:hidden;transition:border-color .25s,background .25s}.film-featured{grid-column:span 2}.film-image{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;width:100%;background:#202020}.film-featured .film-image{aspect-ratio:auto;flex:1;min-height:230px}.film-image img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.82);transition:filter .3s,transform .6s}.film-featured .film-image img{position:absolute;inset:0}.film-card:hover img,.film-card[aria-pressed=true] img{filter:brightness(1);transform:scale(1.025)}.film-card:hover,.film-card[aria-pressed=true]{border-color:#fff;background:#242424}.film-card[aria-pressed=true]{box-shadow:inset 0 -3px 0 #fff}.film-play{position:absolute;bottom:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;background:#000b}.film-play svg{width:20px;height:20px;fill:#fff;stroke:none}.film-caption{display:flex;flex-direction:column;padding:21px 20px;gap:10px;flex:0 0 auto}.film-category{text-transform:uppercase;font-size:10px;letter-spacing:.09em;color:#aaa}.film-title{font-weight:400;font-size:clamp(16px,1.35vw,21px);line-height:1.3;min-height:2.6em}.film-action{font-size:12px;color:#bbb;display:flex;justify-content:space-between;margin-top:10px}.film-card[hidden]{display:none}
.film-viewer{margin-bottom:28px;border:1px solid #555;padding:24px;background:#141414;scroll-margin-top:120px}.film-viewer[hidden]{display:none}.viewer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px}.viewer-top h3{font-size:22px;font-weight:400;max-width:800px;line-height:1.3}.viewer-top button{flex-shrink:0;background:transparent;color:#fff;border:0;min-height:44px;padding:0 8px}.viewer-top button span{margin-left:12px;font-size:23px}#film-player{aspect-ratio:16/9;background:#000}#film-player iframe{width:100%;height:100%;border:0;display:block}#youtube-link{display:inline-block;padding:20px 0 0;font-size:14px;color:#bbb;text-decoration:underline;text-underline-offset:4px}
.short-form{padding:100px 0 0}.short-controls{display:flex;gap:8px}.short-controls button{width:44px;height:44px;border:1px solid #555;background:none;color:white;border-radius:0;font-size:20px}.short-controls button:hover{background:#fff;color:#000}.short-track{display:flex;gap:20px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-color:#777 #181818;padding-bottom:20px}.short-placeholder{flex:0 0 clamp(190px,21vw,310px);aspect-ratio:9/16;background:#111;border:1px solid #303030;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:24px;scroll-snap-align:start}.short-frame{display:block;width:30px;height:46px;border:1px solid #555;margin-bottom:auto}.short-placeholder>span:not(.short-frame){font-size:17px}.short-placeholder small{font-size:13px;color:#aaa;margin-top:8px}.studio-contact{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:100px 0}.studio-contact h2{font-size:clamp(26px,3vw,44px);font-weight:400;line-height:1.15}.studio-contact a{background:white;color:black;padding:18px 24px;font-size:13px;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:1000px){.film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.film-featured{grid-column:span 2}.film-featured .film-image{aspect-ratio:16/9;min-height:0}.studio-intro{padding-block:48px}.studio-section-heading>span{max-width:180px;text-align:right}}
@media(max-width:600px){.studio-intro{display:block;padding:40px 0}.studio-intro p{margin-top:22px}.studio-section-heading{align-items:flex-start}.studio-section-heading>span{font-size:11px;max-width:120px}.film-grid{grid-template-columns:1fr;gap:20px}.film-featured{grid-column:auto}.film-filters{flex-wrap:nowrap;overflow:auto;padding-bottom:10px;margin-bottom:16px}.film-filters button{white-space:nowrap}.film-title{min-height:0}.film-viewer{padding:12px;scroll-margin-top:96px}.viewer-top h3{font-size:17px}.viewer-top{gap:12px}.short-form{padding-top:64px}.short-track{gap:14px}.studio-contact{display:block;padding:64px 0}.studio-contact a{display:inline-block;margin-top:28px}}
@media(prefers-reduced-motion:reduce){.film-card,.film-image img,.film-filters button{transition:none}}

/* Compact, thumbnail-led selection; the full library is opt-in. */
.film-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.film-card,.film-card:hover,.film-card[aria-pressed=true]{background:transparent;border:0;box-shadow:none;overflow:visible}
.film-featured{grid-column:auto}
.film-card .film-image{aspect-ratio:16/9;min-height:0;flex:none;outline:1px solid transparent;outline-offset:3px;transition:outline-color .2s}
.film-card .film-image img{position:static;filter:brightness(.93)}
.film-card[aria-pressed=true] .film-image,.film-card:hover .film-image{outline-color:#fff}
.film-caption{padding:14px 0 0;gap:7px}
.film-category{font-size:10px;letter-spacing:.055em;color:#999}
.film-title{font-size:clamp(15px,1.25vw,19px);line-height:1.3;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.film-play{width:32px;height:32px;bottom:10px;right:10px}
.film-filters{gap:24px;border-bottom:1px solid #292929;margin-bottom:28px;flex-wrap:nowrap;overflow:auto}
.film-filters button{padding:12px 0 16px;border:0;border-bottom:2px solid transparent;white-space:nowrap;background:none!important;color:#aaa}
.film-filters button[aria-pressed=true],.film-filters button[aria-pressed=true]:hover{color:#fff;border-bottom-color:#fff}
.film-expand-row{display:flex;align-items:center;justify-content:space-between;margin-top:28px;padding-top:18px;border-top:1px solid #292929;gap:24px}
#film-count{font-size:12px;color:#999}#expand-films{border:0;background:none;color:#fff;font-size:14px;min-height:44px;padding:0;display:flex;align-items:center;gap:24px}#expand-films[hidden]{display:none}#expand-films span{font-size:22px;font-weight:300}
#long-title{scroll-margin-top:124px}.short-form{padding-top:72px}
@media(max-width:760px){.film-grid{gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}.film-grid:not(.is-expanded){display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin:-4px}.film-grid:not(.is-expanded) .film-card{flex:0 0 78%;scroll-snap-align:start}.film-filters{gap:22px}.film-filters button{font-size:12px}.film-card[hidden]{display:none}}
@media(max-width:480px){.film-grid.is-expanded{grid-template-columns:1fr}.film-grid:not(.is-expanded) .film-card{flex-basis:86%}.film-caption{padding-top:12px}.film-title{font-size:16px}}
/* Group 24: full-bleed image, editorial film grid, expanding shorts, light services. */
body{background:#000}.studio-main{padding:0}.site-header{position:absolute;inset:0 0 auto;background:transparent;border:0;width:100%}.site-header nav [aria-current]::after{display:none}
.studio-hero{position:relative;height:min(100svh,58vw);min-height:500px;overflow:hidden;background:#17272e}.studio-hero>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.studio-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0003,transparent 30%,#0005)}.studio-hero-copy{position:absolute;z-index:1;inset:auto 24px 24px;text-align:center}.studio-hero h1{font-size:clamp(46px,6.5vw,96px);font-weight:700;line-height:1.05;letter-spacing:-.025em}.studio-hero-copy a{display:inline-flex;align-items:center;gap:12px;margin-top:18px;min-height:44px;font-size:clamp(12px,1.1vw,17px);font-weight:300;color:#eee}
.long-form,.short-form{max-width:1280px;margin-inline:auto;padding:96px clamp(24px,6vw,80px) 0}.studio-section-heading{margin-bottom:28px}.studio-section-heading h2{font-weight:600}.studio-section-heading p{font-size:15px;line-height:1.55;max-width:720px;margin-top:14px;color:#b7b7b7}
.film-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 20px}.film-card{overflow:hidden;background:#111}.film-card .film-image{aspect-ratio:1.45}.film-card:nth-child(7n+1),.film-card:nth-child(7n+7){grid-column:span 2}.film-card:nth-child(7n+1) .film-image,.film-card:nth-child(7n+7) .film-image{aspect-ratio:3}.film-caption{padding:14px 16px 18px;transition:background-color .22s,color .22s;gap:7px}.film-title{font-size:16px}.film-category{color:#aaa;transition:color .22s}.film-card:hover,.film-card[aria-pressed=true]{background:#fff;color:#000}.film-card:hover .film-category,.film-card[aria-pressed=true] .film-category{color:#555}.film-card:hover .film-image,.film-card[aria-pressed=true] .film-image{outline:0}.film-card .film-image img{object-fit:cover}.film-filters{margin-bottom:28px}.film-expand-row{margin-top:24px}
.short-form{padding-top:88px;padding-bottom:112px}.short-accordion{display:flex;gap:16px;height:clamp(320px,36vw,520px)}.short-panel{position:relative;min-width:0;flex:1;overflow:hidden;background:#222;transition:flex .65s cubic-bezier(.22,1,.36,1)}.short-panel.is-active{flex:2.7}.short-panel>img{width:100%;height:100%;object-fit:cover;filter:brightness(.6);transition:filter .5s}.short-panel.is-active>img{filter:brightness(.95)}.short-panel button{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:transparent;display:flex;align-items:flex-end;justify-content:space-between;padding:20px;color:#fff;text-align:left}.short-panel button>span:first-child{writing-mode:vertical-rl;transform:rotate(180deg);font-size:14px;text-shadow:0 1px 5px #000}.short-panel.is-active button>span:first-child{visibility:hidden}.short-panel button>span:last-child{position:absolute;right:14px;top:14px;font-size:22px}.short-panel.is-active button>span:last-child{transform:rotate(45deg)}.short-detail{position:absolute;inset:auto 0 0;padding:48px 20px 20px;background:linear-gradient(transparent,#000d);pointer-events:none}.short-detail p{font-size:19px;line-height:1.2}.short-detail>span{font-size:11px;color:#ddd;display:block;margin-top:10px}.short-detail[hidden]{display:none}
.studio-offer{background:#dcdcdc;color:#101010;padding:112px max(8vw,calc((100vw - 1120px)/2)) 160px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.offer-statement{position:sticky;top:100px}.offer-statement h2{font-size:clamp(22px,2.8vw,44px);font-weight:500;line-height:1.12;letter-spacing:-.012em}.offer-statement h2 span{color:#101010;transition:color 300ms ease-out}.offer-statement h2.reveal-ready span{color:#929292}.offer-statement h2.reveal-ready span.revealed{color:#101010}.offer-accordion details{margin:0 0 3px;padding:0;background:#080808;color:#fff;border:0}.offer-accordion summary{padding:26px 24px;display:flex;justify-content:space-between;gap:20px;font-size:clamp(18px,1.6vw,24px);font-weight:500;line-height:1.2;min-height:90px}.offer-accordion summary span{font-weight:300;font-size:24px}.offer-accordion details[open] summary span{transform:rotate(45deg)}.offer-accordion details p{padding:8px 24px 32px;font-size:15px;line-height:1.5;color:#bdbdbd}.studio-contact{padding:88px var(--gutter)}
@media(max-width:760px){.studio-hero{height:76svh;min-height:460px}.studio-hero-copy{bottom:20px}.studio-hero h1{font-size:52px}.long-form,.short-form{padding-inline:24px;padding-top:60px}.film-grid,.film-grid.is-expanded{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.film-card:nth-child(7n+1),.film-card:nth-child(7n+7){grid-column:span 2}.film-card .film-image{aspect-ratio:1.3}.film-card:nth-child(7n+1) .film-image,.film-card:nth-child(7n+7) .film-image{aspect-ratio:2}.film-caption{padding:12px}.film-title{font-size:14px}.short-accordion{height:420px;gap:8px}.short-panel.is-active{flex:5}.short-panel button{padding:10px}.short-panel button>span:first-child{font-size:11px}.short-detail{padding-inline:12px}.short-detail p{font-size:16px}.studio-offer{grid-template-columns:1fr;gap:40px;padding:64px 24px 80px}.offer-statement{position:static}.offer-statement h2{max-width:550px;font-size:32px}.short-form{padding-bottom:64px}}
@media(max-width:480px){.studio-hero h1{font-size:44px}.short-accordion{height:380px}.short-panel.is-active{flex:7}.short-panel button>span:last-child{right:6px;top:8px;font-size:18px}.short-panel button>span:first-child{font-size:10px}.short-detail>span{font-size:10px}.film-grid:not(.is-expanded){display:grid}.film-title{-webkit-line-clamp:3}}
@media(prefers-reduced-motion:reduce){.short-panel,.short-panel>img,.offer-statement h2 span,.film-caption{transition:none}}
/* Keep thumbnail titles intact in the wide editorial slots. */
.film-card:nth-child(7n+1) .film-image img,.film-card:nth-child(7n+7) .film-image img{object-fit:contain;background:#080808}
/* Quiet captions: the image carries the work. */
.film-caption{padding:10px 12px 12px;gap:0;min-height:0}
.film-category{display:none}
.film-title{font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0;-webkit-line-clamp:2;min-height:0}
.film-card{background:#0c0c0c}.film-grid{gap:28px 18px}
.studio-section-heading h2{font-size:clamp(23px,2vw,29px)}
.studio-section-heading p{font-size:13px;max-width:640px;margin-top:10px}
.film-filters{gap:22px;margin-bottom:22px}.film-filters button{font-size:12px}
.short-accordion{overflow-x:auto;align-items:stretch;padding-bottom:8px;height:480px;gap:12px}
.short-panel{flex:1 0 62px}.short-panel.is-active{flex:4 0 250px}
.short-panel>.short-select{position:absolute;inset:0;width:100%;height:100%}
.short-panel.is-active>.short-select{bottom:auto;height:44px}
.short-panel .short-detail{z-index:3;pointer-events:auto;padding-top:50px}
.short-panel .short-detail p{font-size:13px;margin-bottom:12px}
.short-panel .short-play-button{position:static;inset:auto;display:inline-flex;width:auto;height:auto;min-height:38px;padding:8px 14px;border:1px solid #fff;background:#fff;color:#000;font-size:12px;align-items:center;justify-content:center}
.short-panel .short-detail a{display:block;font-size:11px;margin-top:12px;text-decoration:underline;text-underline-offset:3px}
.short-player{position:absolute;inset:0 0 90px;z-index:4;background:#000}.short-player[hidden]{display:none}.short-player iframe{width:100%;height:100%;border:0}
.short-panel.is-playing .short-detail{padding:12px;background:#111}.short-panel.is-playing .short-play-button,.short-panel.is-playing .short-detail p{display:none}
.short-panel.is-playing .short-detail a{margin:0;min-height:44px;display:flex;align-items:center}
@media(max-width:760px){.film-title{font-size:12px}.film-caption{padding:9px 10px 11px}.short-accordion{height:430px}.short-panel{flex:0 0 44px}.short-panel.is-active{flex:0 0 245px}.short-panel .short-select>span:first-child{font-size:11px}}
/* Three editorial rows, matching the supplied wireframe. */
.film-grid,.film-grid.is-expanded{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
.film-card .film-image,.film-card:nth-child(7n+1) .film-image,.film-card:nth-child(7n+7) .film-image{aspect-ratio:auto;height:clamp(170px,20vw,260px);background:transparent;border:1px solid #535353;box-sizing:border-box;outline:none}
.film-placeholder{display:block;position:absolute;inset:0;background:#292929;transition:background .25s}
.film-card:nth-child(3n+1) .film-placeholder{background:#c9c9c9}.film-card:nth-child(3n+2) .film-placeholder{background:#565656}
.film-card:hover .film-image,.film-card[aria-pressed=true] .film-image{border-color:#fff;outline:none}
.film-card:hover .film-placeholder,.film-card[aria-pressed=true] .film-placeholder{filter:invert(1)}
.film-caption{padding:10px 0;background:transparent}.film-card:hover .film-caption,.film-card[aria-pressed=true] .film-caption{padding-inline:10px;background:#fff;color:#000}
.film-title{font-size:12px;line-height:1.35}.film-play{background:#0009}
.film-expand-row{justify-content:center}.film-expand-row #film-count{display:none}
#expand-films{border:1px solid #777;min-height:44px;padding:0 20px}
.short-accordion{height:480px;overflow-x:auto;gap:10px}.short-panel{flex:1 0 48px}.short-panel.is-active{flex:0 0 270px}
.short-panel.is-playing>img,.short-panel.is-playing>.short-select{visibility:hidden}
.short-player{inset:0;z-index:4;height:100%;width:100%;background:#000}.short-player iframe{display:block;width:100%;height:100%;border:0}
.short-panel.is-playing .short-detail{position:absolute;z-index:5;bottom:0;padding:0 8px;background:#000d;inset:auto 0 0}
.short-panel.is-playing .short-detail a{font-size:10px;min-height:26px;justify-content:center}
.offer-accordion details{margin-bottom:4px}.offer-accordion details p{padding-bottom:34px}
@media(max-width:600px){.film-grid,.film-grid.is-expanded{grid-template-columns:1fr}.film-card:nth-child(7n+1),.film-card:nth-child(7n+7){grid-column:auto}.film-card .film-image,.film-card:nth-child(7n+1) .film-image,.film-card:nth-child(7n+7) .film-image{height:auto;aspect-ratio:16/9}.short-accordion{height:400px}.short-panel{flex:0 0 35px}.short-panel.is-active{flex:0 0 225px}}
.playback-help{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;font-size:12px;color:#bbb}.playback-help button{min-height:40px;border:1px solid #777;background:transparent;color:#fff;padding:8px 14px;font-size:12px}
#film-player iframe,.short-player iframe{pointer-events:auto!important;visibility:visible!important}
.short-panel.is-playing .short-detail{position:absolute;top:100%;bottom:auto;z-index:5;min-height:30px;background:#000}.short-panel.is-playing{overflow:visible}.short-accordion{padding-bottom:38px;height:518px}
@media(max-width:600px){.short-accordion{height:438px}.playback-help{align-items:flex-start}}
/* One expanded film plus four preview bars per viewport. */
.short-accordion{--active-short:min(270px,48%);--short-gap:10px;gap:var(--short-gap);scrollbar-width:thin;scrollbar-color:#777 #151515;overscroll-behavior-x:contain}
.short-accordion .short-panel{flex:0 0 calc((100% - var(--active-short) - 4 * var(--short-gap))/4);min-width:0}
.short-accordion .short-panel.is-active{flex:0 0 var(--active-short)}
@media(max-width:600px){.short-accordion{--short-gap:6px}.short-select>span:first-child{max-height:80%;overflow:hidden}}
.short-loading{position:absolute;left:12px;right:12px;bottom:48px;padding:10px;background:#111;color:#eee;font-size:12px;z-index:6;pointer-events:none}.short-loading[hidden]{display:none}
.short-accordion{--active-short:clamp(200px,48%,270px)}

/* Outcome-led film shelves: one horizontal row for each format. */
.film-genre{margin-top:48px;min-width:0}
.genre-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:20px}
.genre-heading h3{margin:0 0 8px;font-size:22px;font-weight:500;letter-spacing:0}
.genre-benefits{margin:0 0 10px;color:#fff;font-size:13px;line-height:1.5}
.genre-description{margin:0;max-width:650px;font-size:14px;line-height:1.6;color:#999;font-weight:400}
.genre-controls{display:flex;gap:6px;flex-shrink:0}
.genre-controls button{width:38px;height:38px;border:1px solid #454545;border-radius:0;background:#000;color:#fff;font-size:20px;cursor:pointer;transition:background .2s,color .2s}
.genre-controls button:hover{background:#fff;color:#000}
.film-shelf{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#444 #111;padding-bottom:14px}
.film-shelf .film-card{flex:0 0 calc((100% - 36px)/3);min-width:0;scroll-snap-align:start;grid-column:auto;align-self:flex-start}
.film-shelf .film-image{width:100%;height:auto;aspect-ratio:16/9;border:1px solid #535353}
.film-shelf .film-caption{min-height:0;padding:10px 0;font-size:12px;line-height:1.45}
.film-shelf .film-title{font-size:12px;line-height:1.45;font-weight:400}
.film-shelf .film-card:hover .film-caption{padding-left:10px;padding-right:10px}
.genre-controls button:focus-visible,.film-shelf:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:900px){.film-shelf .film-card{flex-basis:calc((100% - 18px)/2)}}
@media(max-width:600px){.film-genre{margin-top:36px}.genre-heading{gap:12px}.genre-heading h3{font-size:20px}.genre-description{font-size:13px}.genre-benefits{font-size:12px}.film-shelf .film-card{flex-basis:85%}.film-shelf{gap:12px}.genre-controls{align-self:flex-start}.genre-controls button{width:32px;height:32px}}
/* Clear headline and compact format hierarchy. */
.studio-hero h1{margin:0 auto;max-width:1150px;font-family:'Suisse Intl',sans-serif;font-size:clamp(44px,5.5vw,86px);font-weight:700;letter-spacing:-.012em;line-height:1.08}
.studio-hero h1 span{display:block;font-size:inherit;font-weight:700;margin:0}
.studio-hero h1 strong{display:block;font-size:inherit;font-weight:700;letter-spacing:inherit}
.long-form>.film-genre:first-of-type{margin-top:0}
.genre-heading h2{font-size:clamp(22px,2.2vw,30px);font-weight:500;line-height:1.2;margin:0 0 8px;letter-spacing:-.015em}
.genre-benefits{color:#aaa;margin:0;font-size:13px}
.film-genre{margin-top:56px}
.film-shelf .film-card .film-image{aspect-ratio:16/9;height:auto}
.film-shelf .film-caption{background:transparent}
@media(max-width:760px){.studio-hero-copy{left:20px;right:20px}.studio-hero h1{font-size:clamp(28px,6vw,54px)}}
@media(max-width:480px){.studio-hero h1{font-size:clamp(25px,6.6vw,34px)}}

/* Match the homepage hero frame and text anchors. */
.studio-hero{height:min(100svh,71vw);min-height:600px}
.studio-hero>img{object-fit:cover;object-position:center}
.studio-hero::after{background:linear-gradient(0deg,rgba(0,0,0,.88),transparent 46%)}
.studio-hero-copy{display:contents}
.studio-hero-copy h1{position:absolute;z-index:1;left:clamp(24px,6.3vw,100px);right:clamp(24px,6.3vw,100px);bottom:74px;max-width:1150px;margin:0 auto;text-align:center;font-size:clamp(44px,5.5vw,86px);line-height:1.08;letter-spacing:-.012em}
.studio-hero-copy>a{position:absolute;z-index:1;bottom:24px;left:50%;transform:translateX(-50%);margin:0;min-height:36px;white-space:nowrap;font-size:14px;font-weight:300}
@media(max-width:760px){.studio-hero{height:88svh;min-height:580px}.studio-hero-copy h1{left:20px;right:20px;bottom:78px;font-size:clamp(36px,6vw,54px)}}
@media(max-width:480px){.studio-hero-copy h1{font-size:34px}.studio-hero-copy>a{font-size:clamp(10px,2.6vw,14px)}}

/* Show the complete widescreen thumbnail, including on hover. */
.film-shelf .film-card .film-image img{width:100%;height:100%;object-fit:contain;object-position:center;background:#000;transform:none}
.film-shelf .film-card:hover .film-image img,.film-shelf .film-card[aria-pressed=true] .film-image img{transform:none}

.film-shelf .film-title{display:block;white-space:normal;overflow:visible;text-overflow:clip;min-height:0;max-width:100%}
.film-shelf .film-caption{min-width:0;width:100%}

/* Persistent navigation, with contrast over the opening photograph. */
.creative-page .site-header{position:fixed;inset:0 0 auto;background:transparent;box-shadow:none;transition:background-color .2s ease}
.creative-page .site-header.is-scrolled{background:#000;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.creative-page .studio-hero::before{content:"";position:absolute;inset:0 0 auto;height:220px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.3) 48%,transparent)}
.creative-page .site-header .brand{filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.creative-page .site-header nav>a:not(.nav-build),.creative-page .mobile-menu summary{text-shadow:0 2px 5px rgba(0,0,0,.7)}

.studio-hero>.studio-hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* The entire short thumbnail is the playback control. */
.short-panel:not(.is-playing) .short-detail{display:none}
.short-panel.is-active:not(.is-playing) .short-select{height:100%;inset:0;width:100%;z-index:3}

/* Framed films with compact reference-style captions. */
.film-shelf .film-card{padding:4px;border:1px solid #282828;border-radius:0;background:#0b0b0b;color:#eee;transition:border-color .2s,background-color .2s}
.film-shelf .film-card .film-image{border:0;outline:0;background:#000}
.film-shelf .film-card .film-caption{padding:14px 10px 16px;background:#0b0b0b;color:inherit;transition:color .2s}
.film-shelf .film-card .film-title{font-family:'Suisse Intl',sans-serif;font-size:12px;font-weight:500;line-height:1.45;letter-spacing:.025em;text-transform:uppercase}
.film-shelf .film-card:hover,.film-shelf .film-card:focus-visible{background:#0b0b0b;border-color:#FF6A00;color:#FF6A00;box-shadow:none}
.film-shelf .film-card:hover .film-caption,.film-shelf .film-card:focus-visible .film-caption{background:#0b0b0b;color:#FF6A00;padding:14px 10px 16px}
.film-shelf .film-card[aria-pressed=true]{border-color:#FF6A00;background:#0b0b0b;color:#FF6A00;box-shadow:none}
.film-shelf .film-card:hover .film-image,.film-shelf .film-card[aria-pressed=true] .film-image{border:0;outline:0}

/* Orange fills the frame and caption, rather than outlining the card. */
.film-shelf .film-card{border:0;background:#0b0b0b}
.film-shelf .film-card:hover,.film-shelf .film-card[aria-pressed=true],.film-shelf .film-card:focus-visible{border:0;background:#FF6A00;color:#080808;box-shadow:none}
.film-shelf .film-card:hover .film-caption,.film-shelf .film-card[aria-pressed=true] .film-caption,.film-shelf .film-card:focus-visible .film-caption{background:#FF6A00;color:#080808}

/* Equal card dimensions across all long-form shelves. */
.film-shelf .film-card{align-self:stretch}
.film-shelf .film-card .film-image{flex:0 0 auto;min-height:0;height:auto;aspect-ratio:16/9}
.film-shelf .film-card .film-caption{height:100px;min-height:100px;flex:0 0 100px;overflow:auto}

/* Two full videos per row, with horizontal browsing for the rest. */
.film-shelf .film-card{flex-basis:calc((100% - 18px)/2)}
@media(max-width:600px){.film-shelf .film-card{flex-basis:85%}}

/* One continuous molten-orange fill across the frame and title area. */
.film-shelf .film-card:hover,.film-shelf .film-card[aria-pressed=true],.film-shelf .film-card:focus-visible{background:linear-gradient(115deg,#FF6A00 0%,#FF9A1F 100%);color:#080808}
.film-shelf .film-card:hover .film-caption,.film-shelf .film-card[aria-pressed=true] .film-caption,.film-shelf .film-card:focus-visible .film-caption{background:transparent;color:#080808}

/* Horizontal editorial mosaic with titles on the footage. */
.mosaic-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:28px}
.mosaic-heading h2{font-size:clamp(24px,3vw,38px);font-weight:500;line-height:1.15;max-width:22ch}
.mosaic-heading p{font-size:12px;color:#aaa;white-space:nowrap}
.film-mosaic{display:grid;grid-auto-flow:column dense;grid-template-rows:repeat(4,1fr);grid-auto-columns:calc((100% - 36px)/4);gap:12px;height:clamp(480px,47vw,680px);overflow-x:auto;scroll-snap-type:x proximity;padding:0 0 14px;scrollbar-width:thin;scrollbar-color:#555 #111}
.film-mosaic .film-card{position:relative;display:block;grid-column:auto;grid-row:span 2;padding:0;border:0;border-radius:0;background:#111;color:#fff;overflow:hidden;scroll-snap-align:start;isolation:isolate}
.film-mosaic .film-card:nth-child(5n+1){grid-column:span 2;grid-row:span 4}
.film-mosaic .film-card:nth-child(5n+2),.film-mosaic .film-card:nth-child(5n+3){grid-row:span 2}
.film-mosaic .film-card:nth-child(5n+4){grid-row:span 2}
.film-mosaic .film-card:nth-child(5n+5){grid-column:span 2;grid-row:span 2}
.film-mosaic .film-card .film-image{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;border:0;outline:none}
.film-mosaic .film-card .film-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;filter:none}
.film-mosaic .film-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.1) 65%,transparent)}
.film-mosaic .film-card .film-caption{position:absolute;inset:auto 20px 20px;z-index:3;padding:0;height:auto;min-height:0;width:auto;background:none;color:#fff;gap:6px}
.film-mosaic .film-title{display:block;font-size:clamp(13px,1.2vw,17px);line-height:1.3;font-weight:500;text-transform:none;letter-spacing:0;white-space:normal;min-height:0}
.film-mosaic .mosaic-category{font-size:11px;font-weight:400;color:#d4d4d4}
.film-mosaic .film-play,.film-mosaic .film-category{display:none}
.film-mosaic .film-card:hover,.film-mosaic .film-card[aria-pressed=true]{background:#111;color:#fff;box-shadow:none}
.film-mosaic .film-card:hover .film-title{color:#FF9A1F}
.film-preview{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.film-preview iframe{border:0;width:100%;height:100%;pointer-events:none}
.film-mosaic .film-card:focus-visible{outline:3px solid #FF6A00;outline-offset:-3px}
@media(max-width:760px){.film-mosaic{grid-auto-columns:calc((100% - 12px)/2);height:560px}.mosaic-heading{display:block}.mosaic-heading p{margin-top:12px}.film-mosaic .film-card:nth-child(5n+1){grid-column:span 2;grid-row:span 2}.film-mosaic .film-card .film-caption{inset:auto 14px 14px}.film-mosaic .film-title{font-size:13px}}
.film-preview{container-type:size}
.film-preview iframe{position:absolute;left:50%;top:50%;width:max(100%,177.78cqh);height:max(100%,56.25cqw);max-width:none;transform:translate(-50%,-50%)}
.film-mosaic .film-card:hover .film-caption,.film-mosaic .film-card[aria-pressed=true] .film-caption{background:transparent;color:#fff;padding:0}

/* Edge-to-edge previews; the tile itself opens the full film. */
.film-mosaic .film-card .film-caption{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;inset:auto}
.film-mosaic .film-card:hover .film-caption,.film-mosaic .film-card[aria-pressed=true] .film-caption{padding:0}
.film-mosaic .film-card::after{display:none}
.film-mosaic .film-card .film-image{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.film-mosaic .film-card .film-image img{object-fit:cover;filter:none}
.film-preview iframe{min-width:100%;min-height:100%}
@media(max-width:760px){.film-mosaic{grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:85%;height:540px}}

/* Repeating reference pattern: one square, two stacked landscape films. */
.film-mosaic{--mosaic-gap:clamp(18px,4vw,56px);display:grid;grid-template-columns:none;grid-auto-columns:calc((100% - var(--mosaic-gap)) * .58) calc((100% - var(--mosaic-gap)) * .42);grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--mosaic-gap);height:auto;aspect-ratio:1.81;scroll-snap-type:x proximity;padding-bottom:12px}
.film-mosaic .film-card{min-width:0;min-height:0}
.film-mosaic .film-card:nth-child(3n+1){scroll-snap-align:start}
@media(max-width:760px){.film-mosaic{--mosaic-gap:16px;grid-auto-columns:72% 52%;aspect-ratio:1.38;grid-template-rows:repeat(2,minmax(0,1fr));height:auto}}

.mosaic-navigation{display:flex;justify-content:flex-end;gap:16px;margin-top:12px}
.mosaic-navigation button{display:grid;place-items:center;width:44px;height:44px;padding:6px;background:none;border:0;border-radius:0;box-shadow:none;color:#aaa;cursor:pointer;transition:color .2s}
.mosaic-navigation button svg{width:32px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}
.mosaic-navigation button:hover{color:#FF6A00}
.mosaic-navigation button:focus-visible{outline:1px solid #FF6A00;outline-offset:3px}

/* Keep YouTube loading/title chrome out of silent preview tiles. */
.film-preview{opacity:0;transition:opacity .25s;pointer-events:none}
.film-preview.is-clean-playing{opacity:1}
.film-preview iframe{width:max(calc(100% + 144px),calc(177.78cqh + 256px));height:max(calc(100% + 144px),calc(56.25cqw + 144px));pointer-events:none}

.film-mosaic,.short-accordion{scrollbar-width:none}
.film-mosaic::-webkit-scrollbar,.short-accordion::-webkit-scrollbar{display:none}
.gallery-pages{display:flex;justify-content:center;align-items:center;gap:8px;min-height:32px;margin-top:14px}
.gallery-pages button{position:relative;display:grid;place-items:center;width:24px;height:28px;padding:0;border:0;background:transparent;color:#666;cursor:pointer}
.gallery-pages button::before{content:"";display:block;width:7px;height:7px;background:currentColor;transition:background-color .25s,transform .25s}
.gallery-pages button[aria-current="true"]{color:#fff}
.gallery-pages button[aria-current="true"]::before{transform:scale(1.35)}
.gallery-pages button:hover{color:#FF6A00}
.gallery-pages button:focus-visible{outline:1px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.gallery-pages button::before{transition:none}}

/* Short previews remain image-only; accessible button labels are preserved. */
.short-select>span:first-child,.short-detail>p{display:none}

.film-static-placeholder{position:absolute;inset:0;display:block;background:#303030}
.film-card:nth-child(3n+1) .film-static-placeholder{background:#d5d5d5}
.film-card:nth-child(3n+2) .film-static-placeholder{background:#292929}
.film-card:nth-child(3n) .film-static-placeholder{background:#858585}

.film-mosaic .film-card .film-image img{object-fit:contain;object-position:center;background:#000;transform:none}

/* A true square on the left, with two equal frames sharing its height. */
.long-form{container-type:inline-size}
.film-mosaic{height:calc((100cqw - var(--mosaic-gap)) * .58);aspect-ratio:auto;padding-bottom:0}
.film-mosaic .film-card .film-image img{object-fit:cover;object-position:center;background:#000}
@media(max-width:760px){.film-mosaic{height:72cqw;aspect-ratio:auto}}

/* Six Shorts visible: one expanded preview and five compact tiles. */
.short-accordion .short-panel{flex:0 0 calc((100% - var(--active-short) - 5 * var(--short-gap)) / 5)}
.short-accordion .short-panel.is-active{flex:0 0 var(--active-short)}

.offer-accordion{opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease,visibility .5s}
.offer-accordion.is-revealed{opacity:1;visibility:visible;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.offer-accordion{transition:none;transform:none}}

/* Unfold the offer list downward when the copy reaches “factory floor.” */
.offer-accordion{opacity:1;transform:none;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .85s cubic-bezier(.16,1,.3,1),visibility .85s}
.offer-accordion.is-revealed{opacity:1;transform:none;clip-path:inset(0);visibility:visible}
@media(prefers-reduced-motion:reduce){.offer-accordion{transition:none}}

/* Sequential panel entrances begin with the first revealed word. */
.offer-accordion{clip-path:none;visibility:hidden;transition:visibility 0s .9s}
.offer-accordion.is-revealed{clip-path:none;visibility:visible;transition-delay:0s}
.offer-accordion>details{opacity:0;transform:translateY(-18px);clip-path:inset(0 0 100% 0);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1),clip-path .9s cubic-bezier(.16,1,.3,1);transition-delay:0s}
.offer-accordion.is-revealed>details{opacity:1;transform:translateY(0);clip-path:inset(0);transition-delay:calc(var(--panel-order,0) * .22s)}
.offer-accordion>details:nth-child(2){--panel-order:1}
.offer-accordion>details:nth-child(3){--panel-order:2}
.offer-accordion>details:nth-child(4){--panel-order:3}
@media(prefers-reduced-motion:reduce){.offer-accordion,.offer-accordion>details,.offer-accordion.is-revealed>details{transition:none;transition-delay:0s;transform:none}}

@font-face{font-family:'Offer Eurostile';src:url('assets/fonts/Eurostile-Reg.otf') format('opentype');font-weight:400;font-display:swap}
.studio-offer{grid-template-columns:minmax(0,1fr);justify-content:start;gap:48px}
.offer-statement{position:static}
.offer-accordion{width:100%;max-width:560px;grid-column:1}
.offer-accordion summary .offer-number,.offer-accordion details[open] summary .offer-number{font-family:'Offer Eurostile',sans-serif;font-weight:400;font-size:26px;line-height:1;transform:none;font-variant-numeric:tabular-nums}
@media(max-width:760px){.studio-offer{grid-template-columns:minmax(0,1fr);gap:36px}}

.work-collection-title{max-width:26ch;margin:0 0 36px;font-size:clamp(28px,3.2vw,44px);font-weight:500;line-height:1.15;letter-spacing:-.015em}

/* Two format choices, one expanded gallery below. */
.format-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.format-choice{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0;border:0;border-radius:0;overflow:hidden;background:#252525;color:#fff;cursor:pointer}
.format-choice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5);transition:filter .35s,transform .6s}
.format-choice>span{position:relative;font-size:clamp(13px,1.5vw,20px);font-weight:300;letter-spacing:0;padding:16px;text-align:center}
.format-choice:hover img,.format-choice[aria-expanded=true] img{filter:brightness(.72);transform:scale(1.025)}
.format-choice[aria-expanded=true]::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FF6A00,#FF9A1F)}
.format-choice:focus-visible{outline:2px solid #FF6A00;outline-offset:5px}
.format-gallery{margin-top:clamp(36px,6vw,80px)}
.format-gallery[hidden]{display:none!important}
#short-gallery{padding:0;max-width:none;width:100%}
#long-gallery .film-mosaic{display:flex;gap:20px;grid-template-columns:none;height:auto;aspect-ratio:auto;padding:0 0 12px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#777 #151515}
#long-gallery .film-card{flex:0 0 calc((100% - 40px)/2.5);width:auto;height:auto;aspect-ratio:16/9;scroll-snap-align:start}
#long-gallery .film-image img{object-fit:contain}
#long-gallery .film-viewer{margin:0 0 28px}
@media(max-width:600px){.format-choices{gap:14px}.format-choice>span{font-size:12px;padding:8px}.format-gallery{margin-top:32px}}
@media(prefers-reduced-motion:reduce){.format-choice img{transition:none}}

/* Reference layout: external left-aligned labels above square previews. */
.work-collection-title{font-size:clamp(30px,4vw,54px);line-height:1.03;font-weight:500;max-width:24ch;margin-bottom:clamp(44px,6.8vw,92px)}
.format-choices{gap:clamp(20px,3.2vw,44px);align-items:start}
.format-choice{display:flex;flex-direction:column;align-items:stretch;aspect-ratio:auto;overflow:visible;background:transparent;text-align:left}
.format-choice>span:first-child{display:block;padding:0 0 10px;text-align:left;font-size:clamp(13px,1.6vw,22px);font-weight:300;line-height:1.2}
.format-choice .format-image{display:block;position:relative;width:100%;aspect-ratio:1;overflow:hidden;padding:0;background:#666}
.format-choice .format-image img{position:absolute;inset:0;filter:none}
.format-choice:hover img,.format-choice[aria-expanded=true] img{filter:brightness(.85);transform:none}
.format-choice[aria-expanded=true]::after{display:none}
.format-choice[aria-expanded=true]>span:first-child{color:#FF9A1F}
@media(max-width:600px){.work-collection-title{font-size:30px;margin-bottom:40px}.format-choice>span:first-child{font-size:11px;padding-bottom:8px}.format-choices{gap:16px}}

/* More breathing room below the format previews. */
.format-choices{margin-bottom:clamp(40px,5vw,72px)}
.format-gallery{margin-top:clamp(56px,7vw,96px)}

/* Always-visible galleries: one film row and the expanding Shorts strip. */
#long-gallery{margin-top:0}
.gallery-title{margin:0 0 24px;font-size:clamp(16px,1.6vw,22px);font-weight:300;line-height:1.2}
#long-gallery .film-mosaic::-webkit-scrollbar{display:block;height:6px}
#long-gallery .film-mosaic::-webkit-scrollbar-thumb{background:#777}
#long-gallery .film-mosaic::-webkit-scrollbar-track{background:#151515}
.gallery-pages[hidden]{display:none}
@media(max-width:760px){#long-gallery .film-card{flex-basis:82%}#long-gallery .film-mosaic{gap:16px}.short-accordion .short-panel{flex-basis:48px}.short-accordion .short-panel.is-active{flex-basis:var(--active-short)}}

/* Full-width galleries with a compact shared heading and navigation line. */
.gallery-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}
.gallery-header .gallery-title{margin:0;font-size:20px;font-weight:400;line-height:1.2;letter-spacing:0;color:#ffffff}
.gallery-navigation{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;margin-top:16px}
.gallery-navigation[hidden]{display:none}
.gallery-navigation button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#ffffff;cursor:pointer;transition:color .2s}
.gallery-navigation button:hover:not(:disabled){color:#FF9A1F}
.gallery-navigation button:disabled{color:#555;cursor:default}
.gallery-navigation button:focus-visible{outline:2px solid #ffffff;outline-offset:2px}
.gallery-navigation svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#long-gallery .film-mosaic{scrollbar-width:none;padding-bottom:0}
#long-gallery .film-mosaic::-webkit-scrollbar{display:none}
#short-gallery{margin-top:72px}
@media(max-width:760px){.gallery-header{gap:16px;margin-bottom:16px}.gallery-header .gallery-title{font-size:18px}#short-gallery{margin-top:48px}}
@media(prefers-reduced-motion:reduce){.gallery-navigation button{transition:none}}

/* Reference-inspired expanded player, with square outer and control-bar edges. */
#long-gallery .film-viewer{padding:0;border:0;background:transparent}
.viewer-top{align-items:center;justify-content:flex-end;margin-bottom:16px}
.viewer-top h3{font-size:18px;color:#ddd}
.cinema-player{position:relative;overflow:hidden;background:#000;border-radius:0}
.cinema-player #film-player{aspect-ratio:16/9}
.cinema-big-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border:0;border-radius:50%;background:#111e;color:#fff;cursor:pointer}
.cinema-big-play[hidden]{display:none}
.cinema-player svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cinema-big-play svg{width:30px;height:30px;fill:currentColor;stroke:none}
.cinema-controls{position:absolute;bottom:12px;left:12px;right:12px;padding:8px 12px 4px;background:#161711;color:#fff;border-radius:0}
.cinema-toolbar{display:flex;align-items:center;gap:8px}
.cinema-toolbar button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.cinema-player input[type=range]{border:0;box-shadow:none;accent-color:#fff;cursor:pointer;height:16px;padding:0;margin:0}
#film-seek{display:block;width:100%}
#film-volume{width:80px}
#film-time{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
#film-speed{width:auto;max-width:80px;flex:0 0 auto;margin-left:auto;background:#161711;color:#fff;border:0;min-height:44px;padding:0 8px;font-size:13px;cursor:pointer}
.cinema-player :focus-visible{outline:2px solid white;outline-offset:3px}
.cinema-player button:disabled{opacity:.45;cursor:wait}
.cinema-player:fullscreen{display:flex;flex-direction:column;justify-content:center}
.cinema-player:fullscreen #film-player{aspect-ratio:auto;flex:1;min-height:0}
.playback-help:has(#film-status:empty){display:none}
#youtube-link{font-size:12px;padding-top:12px}
@media(max-width:600px){.cinema-controls{padding-inline:8px}.cinema-toolbar{gap:2px}#film-volume{width:48px}#film-time{font-size:10px}.cinema-big-play{width:56px;height:56px}.viewer-top h3{font-size:15px}}

@media(max-width:480px){.offer-statement h2{font-size:29px}}

/* Match the homepage agency statement and content gutters. */
.creative-page{--content-gutter:max(10vw,calc((100vw - 1200px)/2))}
/* Viewport-based gutters belong on full-width sections, not the old 1280px wrapper. */
.long-form,.studio-offer,.studio-contact{width:100%;max-width:none;box-sizing:border-box;padding-inline:var(--content-gutter)}
.studio-offer{padding-top:64px;padding-bottom:72px}
.offer-statement h2{font-family:'Suisse Intl','Helvetica Neue',sans-serif;font-size:clamp(22px,2.8vw,44px);font-weight:500;line-height:1.12;letter-spacing:-.012em;text-wrap:pretty}
@media(max-width:760px){.creative-page{--content-gutter:8vw}.studio-offer{padding-top:56px;padding-bottom:64px}.offer-statement h2{font-size:32px}}
@media(max-width:480px){.offer-statement h2{font-size:29px}}

@media(prefers-reduced-motion:reduce){.offer-statement h2.reveal-ready span{color:#101010;transition:none}}

/* Fade the hero footage into the gallery's black surface. */
.studio-hero::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.94) 8%,rgba(0,0,0,.62) 25%,rgba(0,0,0,.18) 48%,transparent 65%);pointer-events:none}
.work-collection-title span{color:#ffffff;transition:color 300ms ease-out}
.work-collection-title.reveal-ready span{color:#55585c}
.work-collection-title.reveal-ready span.revealed{color:#ffffff}
@media(prefers-reduced-motion:reduce){.work-collection-title.reveal-ready span{color:#ffffff;transition:none}}

/* Homepage-style segment entrances; content remains usable throughout. */
.segment-enter{opacity:.35;transform:translate3d(0,18px,0);transition:opacity 450ms ease-out,transform 550ms cubic-bezier(.16,1,.3,1)}
.segment-enter.segment-visible,.segment-enter:focus-within{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.segment-enter{opacity:1;transform:none;transition:none}}

/* More separation between the hero and the opening gallery heading. */
.long-form{padding-top:160px}
@media(max-width:760px){.long-form{padding-top:96px}}

/* Breathing room below the Shorts navigation before the next section. */
#short-gallery{padding-bottom:96px}
@media(max-width:760px){#short-gallery{padding-bottom:64px}}

/* More space above the studio statement. */
.studio-offer{padding-top:176px}
@media(max-width:760px){.studio-offer{padding-top:112px}}

/* Image-led process showcase, following the supplied reference. */
.studio-process{min-width:0;width:100%;margin-top:24px}
.process-track{position:relative;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.process-track::-webkit-scrollbar{display:none}
.process-card{position:relative;flex:0 0 calc((100% - 16px)/2);min-width:0;min-height:500px;aspect-ratio:3/2;scroll-snap-align:start;background:#bbb9b3;color:#fff;overflow:hidden}
.process-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.process-card:nth-child(3) .process-photo{object-position:48% center}
.process-card:nth-child(5) .process-photo{object-position:38% center}
.process-caption{position:absolute;left:20px;bottom:20px;width:calc(100% - 40px);max-width:350px;padding:24px;background:rgba(14,20,26,.58);-webkit-backdrop-filter:blur(24px) saturate(135%);backdrop-filter:blur(24px) saturate(135%);border:1px solid rgba(255,255,255,.16);color:#fff}
.process-step{font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.04em;color:#e1e1dc}
.process-caption h3{margin:28px 0 14px;font-size:25px;font-weight:500;line-height:1.12;letter-spacing:-.02em}
.process-caption p{font-size:14px;line-height:1.5;color:#ffffff;margin:0}
.process-caption .process-result{margin-top:20px;padding-top:16px;border-top:1px solid #ffffff40;font-size:13px}
.process-result>span{display:block;margin-bottom:6px;font-size:11px;color:#d7d7d0}
.process-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-top:20px}
.process-footer>p{font-size:11px;line-height:1.35;text-transform:uppercase;letter-spacing:.025em;color:#555}
.process-progress{display:flex;gap:2px}
.process-progress button{display:grid;place-items:center;width:28px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.process-progress button>span{width:2px;height:20px;background:#a3a39d;transition:background-color .2s,height .2s}
.process-progress button[aria-current=true]>span{width:4px;height:28px;background:#ff6a00}
.process-arrows{justify-self:end}
.process-arrows .gallery-navigation{margin:0}
.process-arrows .gallery-navigation button{background:#b3b1aa;color:#fff}
.process-arrows .gallery-navigation button:disabled{opacity:.35}
.studio-process :focus-visible{outline:2px solid #101010;outline-offset:3px}
@media(max-width:1000px){.process-card{min-height:600px}.process-caption{left:16px;bottom:16px;width:calc(100% - 32px);padding:20px}.process-caption h3{font-size:23px}}
@media(max-width:760px){.studio-process{margin-top:12px}.process-card{flex-basis:88%;min-height:560px;aspect-ratio:auto}.process-footer{grid-template-columns:1fr auto;gap:12px}.process-footer>p{grid-column:1/-1}.process-progress{justify-self:start}.process-caption{max-width:none}.process-placeholder{padding-top:40px}}
@media(prefers-reduced-motion:reduce){.process-progress button>span{transition:none}}

/* Gallery labels share the bottom navigation row. */
.gallery-navigation{align-items:center}
.gallery-footer-title{margin:0 auto 0 0;font-family:inherit;font-size:16px;line-height:1.3;font-weight:400;letter-spacing:0;color:#ffffff}

/* Shared grid and type hierarchy for the stories introduction. */
.work-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:0;align-items:start}
.work-intro-heading{display:contents}
.work-intro .work-collection-title{grid-column:1 / 8;grid-row:1;margin:0 0 16px;font-size:clamp(30px,3.4vw,50px);line-height:1.08;letter-spacing:-.02em;max-width:none}
.work-intro-link{grid-column:1 / 8;grid-row:2;justify-self:start;display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:8px 0;color:#bdbdbd;font-size:14px;line-height:1.4;text-decoration:none;transition:color 180ms ease-out}
.work-intro-link svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.work-intro-link:hover{color:#fff}
.work-intro-link:focus-visible{outline:2px solid #fff;outline-offset:5px}
.work-intro-heading #long-gallery{grid-column:1 / 8;grid-row:3;min-width:0;width:100%;margin-top:24px;scroll-margin-top:100px}
.work-intro-heading #long-gallery .film-card{flex-basis:86%}
.work-intro-heading #long-gallery .film-mosaic{gap:16px}
.work-collection-copy{grid-column:8 / -1;grid-row:3;min-width:0;align-self:stretch;margin:24px 0 60px;padding-left:24px;display:flex;flex-direction:column}
.work-collection-lead{margin:0 0 16px;font-size:clamp(20px,1.8vw,26px);line-height:1.2;font-weight:500;letter-spacing:-.015em;color:#ffffff}
.work-collection-description{margin:0 0 12px;font-size:14px;line-height:1.5;font-weight:400;color:#bdbdbd}
.work-outcomes{flex:1;display:flex;flex-direction:column;list-style:none;padding:0;margin:0}
.work-outcomes li{flex:1;display:flex;align-items:center;gap:.25em;padding:5px 0;border-top:1px solid #292929;font-size:clamp(16px,1.45vw,20px);line-height:1.25;font-weight:500;letter-spacing:-.01em;color:#ffffff}
.work-outcomes li span{color:#aaa;font-weight:400}
#long-gallery .gallery-navigation,#short-gallery .gallery-navigation{gap:8px;margin-top:16px}
#long-gallery .gallery-navigation button,#short-gallery .gallery-navigation button{transition:background-color 180ms ease-out,color 180ms ease-out}
#long-gallery .gallery-navigation button:hover:not(:disabled),#short-gallery .gallery-navigation button:hover:not(:disabled){background:#1c1c1e;color:#fff}
#long-gallery .film-card:focus-visible{outline:2px solid #fff;outline-offset:-3px}
@media(min-width:901px){.long-form{padding-inline:max(6vw,calc((100vw - 1440px)/2))}}
@media(max-width:900px){
 .work-intro{display:block}
 .work-intro-heading{display:block}
 .work-intro .work-collection-title{margin-bottom:16px}
 .work-intro-heading #long-gallery{margin-top:24px}
 .work-collection-copy{margin:40px 0 0;padding:0;max-width:600px}
 .work-collection-lead{font-size:22px;margin-bottom:12px}
 .work-collection-lead br{display:none}
 .work-outcomes{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
 .work-outcomes li{padding:12px 0;font-size:17px}
}
@media(max-width:400px){.work-outcomes{grid-template-columns:1fr}.work-intro .work-collection-title{font-size:29px}}
@media(prefers-reduced-motion:reduce){.work-intro-link,#long-gallery .gallery-navigation button,#short-gallery .gallery-navigation button{transition:none}}

/* One complete 16:9 film per stop, with reference-style progress. */
.work-intro-heading #long-gallery .film-mosaic{gap:0;scroll-snap-type:x mandatory}
.work-intro-heading #long-gallery .film-card{flex:0 0 100%;aspect-ratio:16/9;scroll-snap-align:start;scroll-snap-stop:always}
#long-gallery .film-image{aspect-ratio:16/9}
#long-gallery .gallery-navigation{align-items:center}
#long-gallery .gallery-navigation>button{background:#333;color:#fff}
#long-gallery .gallery-navigation>button:disabled{background:#1c1c1e;color:#666}
#long-gallery .film-progress{display:flex;flex:1;min-width:0;align-items:center;margin-right:16px}
#long-gallery .film-progress-tick{flex:1;min-width:0;max-width:28px;height:44px;background:transparent;padding:0}
#long-gallery .film-progress-tick span{display:block;width:2px;height:18px;background:#666;transition:height 180ms ease-out,background-color 180ms ease-out}
#long-gallery .film-progress-tick[aria-current=true] span{width:4px;height:28px;background:#ff6a00}
#long-gallery .film-progress-tick:hover:not(:disabled){background:transparent}
#long-gallery .film-progress-tick:hover span{background:#eee}
#long-gallery .film-progress-tick[aria-current=true]:hover span{background:#ff6a00}
@media(prefers-reduced-motion:reduce){#long-gallery .film-progress-tick span{transition:none}}

/* Unboxed arrows for the long-form carousel. */
#long-gallery .gallery-navigation>button,#long-gallery .gallery-navigation>button:disabled,#long-gallery .gallery-navigation>button:hover:not(:disabled){background:transparent}

/* Replace the thumbnail in place without changing the gallery geometry. */
.film-stage{position:relative;min-width:0}
.film-stage.is-playing .film-mosaic{visibility:hidden}
#long-gallery .film-stage .film-viewer{position:absolute;inset:0;margin:0;padding:0;background:#000;z-index:5;scroll-margin:0}
.film-stage .cinema-player,.film-stage #film-player{width:100%;height:100%}
.film-stage .viewer-top{position:absolute;top:8px;right:8px;z-index:6;margin:0}
.film-stage #close-film{font-size:0;width:44px;height:44px;padding:0;background:#111;color:#fff}
.film-stage #close-film span{margin:0;font-size:24px}
.film-stage .playback-help{position:absolute;top:60px;left:16px;right:16px;z-index:6;background:#111;color:#fff;padding:12px;font-size:13px}
.film-stage #youtube-link{display:none;position:absolute;top:124px;left:16px;z-index:6;background:#111;padding:8px 12px}
.film-stage .film-viewer:has(#film-status:not(:empty)) #youtube-link{display:inline-block}

/* Quiet playback chrome; project context lives beside the film. */
.work-collection-copy[hidden]{display:none}
.film-stage .viewer-top{display:none}
.film-stage .cinema-controls{left:0;right:0;bottom:0;padding:0 8px;background:#111;transition:opacity 200ms ease-out}
.film-stage .cinema-toolbar{gap:4px}
.film-stage .cinema-toolbar button{width:36px;height:36px}
.film-stage #film-seek{height:12px}
.film-stage #film-volume{width:48px}
.film-stage #film-speed{min-height:36px;font-size:12px;padding-inline:4px}
.film-stage #film-time{font-size:11px}
.film-stage .cinema-big-play{width:52px;height:52px}
.film-stage.is-running:not(.controls-visible) .cinema-controls:not(:focus-within){opacity:0;pointer-events:none}
.film-case{min-height:0;overflow:auto;gap:16px}
.film-case-title{margin:0;font-size:clamp(20px,1.8vw,27px);line-height:1.15;font-weight:500;letter-spacing:-.015em;color:#ffffff}
.film-case-summary{margin:0;font-size:15px;line-height:1.5;color:#bdbdbd}
.film-case-stats{display:flex;gap:32px;margin:0;padding-top:16px;border-top:1px solid #292929}
.film-case-stats dt{font-size:12px;line-height:1.4;color:#aaa;margin-bottom:4px}
.film-case-stats dd{margin:0;font-size:15px;color:#ffffff;font-variant-numeric:tabular-nums}
.film-case-actions{margin-top:auto}
.film-case #close-film{min-height:44px;padding:8px 0;border:0;background:transparent;color:#bdbdbd;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.film-case #close-film:hover{color:#fff}
.film-case #close-film:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.film-stage .cinema-controls{transition:none}}

/* Status and recovery actions belong beside the film, never over it. */
.film-case .playback-help{position:static;margin:0 0 8px;padding:0;background:none;font-size:13px;color:#bdbdbd;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.film-case .playback-help:has(#film-status:empty){display:none}
.film-case #retry-film{min-height:36px;padding:4px 8px;background:transparent;border:1px solid #444;color:#ddd;font:inherit}
.film-case #youtube-link{position:static;display:inline-block;padding:0;margin-right:20px;font-size:13px;background:none}
.film-case-actions{display:flex;flex-wrap:wrap;gap:0 16px;align-items:center}
.film-case .playback-help{flex-basis:100%}
.film-case .playback-help:has(#film-status:empty) + #youtube-link{display:none}

/* A thumbnail-led surface for the film and its context. */
.work-intro{position:relative;isolation:isolate;--film-tone:#091b30}
.work-intro::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-24px;bottom:-24px;left:-24px;right:-24px;background:var(--film-tone);transition:background-color 550ms ease-out}
.work-intro .work-outcomes li,.work-intro .film-case-stats{border-color:rgba(220,232,246,.16)}
.work-intro .work-outcomes li span,.work-intro .film-case-stats dt{color:#b4c0ce}
.work-intro .work-collection-description,.work-intro .film-case-summary{color:#c3ccd8}
@media(max-width:760px){.work-intro::before{left:-16px;right:-16px;bottom:-24px}}
@media(prefers-reduced-motion:reduce){.work-intro::before{transition:none}}

/* Equal panel insets and shared columns keep every edge intentional. */
.work-intro{padding:clamp(32px,4vw,64px);column-gap:32px;box-sizing:border-box}
.work-intro::before{inset:0}
.work-collection-copy{padding-left:0}
.work-intro .work-collection-title{margin-bottom:16px}
.work-intro-heading #long-gallery{margin-top:32px}
.work-collection-copy{margin-top:32px}
.work-outcomes li{display:grid;grid-template-columns:5.8em minmax(0,1fr);column-gap:12px;align-items:center}
.work-intro .work-outcomes li:first-child{margin-top:4px}
@media(max-width:1100px) and (min-width:901px){.work-intro{column-gap:24px;padding:32px}.work-collection-lead{font-size:20px}.work-collection-description{font-size:13px}.work-outcomes li{font-size:15px;grid-template-columns:5.5em minmax(0,1fr);column-gap:8px}}
@media(max-width:900px){.work-intro{padding:32px}.work-collection-copy{margin-top:40px}.work-outcomes{display:flex}.work-outcomes li{grid-template-columns:5.8em minmax(0,1fr)}}
@media(max-width:600px){.work-intro{padding:24px}.work-intro::before{inset:0}.work-intro .work-collection-title{font-size:clamp(25px,6vw,30px)}.work-intro-link{font-size:13px;gap:12px}.work-collection-lead{font-size:21px}}

/* Keep each outcome together; reveal it after the headline has completed. */
.work-intro .work-outcomes li{display:flex;gap:.25em;grid-template-columns:none}
.purpose-pending .work-collection-lead,.purpose-pending .work-collection-description,.purpose-pending .work-outcomes li{opacity:0}
@media(prefers-reduced-motion:reduce){.purpose-pending .work-collection-lead,.purpose-pending .work-collection-description,.purpose-pending .work-outcomes li{opacity:1}}

/* A quiet outcome list gives the film visual priority. */
.work-collection-copy:not(.film-case) .work-collection-lead{margin-bottom:24px}
.work-intro .work-outcomes{justify-content:space-between;gap:8px}
.work-intro .work-outcomes li{flex:0 0 auto;border:0;padding:0;line-height:1.4}
.work-intro .work-outcomes li:first-child{margin-top:0}
@media(max-width:900px){.work-intro .work-outcomes{gap:14px}}

/* A compact editorial grid keeps all five purposes visible. */
.purpose-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;align-content:start}
.purpose-grid li{border-top:1px solid #ffffff28;padding-top:12px;display:flex;flex-direction:column;gap:7px;min-width:0}
.purpose-grid li:last-child{grid-column:1/-1}
.purpose-grid span{font-size:12px;line-height:1.3;color:#b4c0ce}
.purpose-grid strong{font-size:clamp(19px,1.9vw,29px);font-weight:400;line-height:1.15;letter-spacing:-.025em;color:#fff}
.purpose-pending .purpose-grid li{opacity:0}
@media(prefers-reduced-motion:reduce){.purpose-pending .purpose-grid li{opacity:1}}
#film-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.short-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
@media(prefers-reduced-motion:reduce){.purpose-pending .purpose-display,.purpose-pending .purpose-navigation,.purpose-pending .purpose-pause{opacity:1}}

/* The external viewing option stays available beside local playback. */
.film-case .playback-help:has(#film-status:empty) + #youtube-link{display:inline-block}

/* Compact playback controls overlay the same 16:9 image frame. */
.film-stage{padding-bottom:0}
#long-gallery .film-stage .film-viewer{bottom:0}
.film-stage .cinema-player{overflow:hidden}
.film-stage .cinema-controls{top:auto;bottom:0;left:0;right:0;height:auto;padding:22px 12px 6px;background:linear-gradient(transparent,rgba(3,8,14,.88) 40%,rgba(3,8,14,.96));opacity:1;pointer-events:auto}
.film-stage .cinema-toolbar{height:40px;gap:8px}
.film-stage .cinema-toolbar button{width:40px;height:40px;color:#c6ced6;transition:color .15s}
.film-stage .cinema-toolbar button:hover{color:#fff}
.film-stage .cinema-player svg{width:18px;height:18px;stroke-width:1.6}
.film-stage #film-seek{appearance:none;-webkit-appearance:none;height:16px;background:transparent;--played:0%}
.film-stage #film-seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#fff var(--played),#ffffff35 var(--played))}
.film-stage #film-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:#fff;margin-top:-3px}
.film-stage #film-seek::-moz-range-track{height:2px;background:#ffffff35}
.film-stage #film-seek::-moz-range-progress{height:2px;background:#fff}
.film-stage #film-seek::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#fff}
.film-stage #film-time{font-size:11px;color:#bcc6d0;margin-left:4px}
.film-stage #film-speed{background:transparent;color:#c6ced6;font-size:11px;height:40px}
.film-stage #film-speed option{background:#111;color:#fff}
.film-stage #film-volume{width:48px;height:12px}
.film-stage .cinema-big-play{display:none}
.film-stage .cinema-player:fullscreen{overflow:hidden;padding-bottom:0;background:#000}
.film-stage .cinema-player:fullscreen .cinema-controls{top:auto;bottom:0;padding-inline:24px}
@media(max-width:600px){.film-stage .cinema-toolbar{gap:2px}.film-stage #film-volume{display:none}.film-stage #film-time{font-size:10px}}
.film-skip span{position:relative;font-size:25px;line-height:1}
.film-skip small{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:8px;line-height:1}
#film-player video{cursor:pointer}

/* The poster and active player occupy the exact same outer rectangle. */
#long-gallery{container-type:inline-size}
#long-gallery .film-stage{height:56.25cqw;padding-bottom:0}
#long-gallery .film-stage .film-mosaic{height:100%}
.work-intro-heading #long-gallery .film-card{height:100%;aspect-ratio:auto}
#long-gallery .film-card .film-image{height:100%;aspect-ratio:auto}
#long-gallery .film-card .film-image img{width:100%;height:100%;object-fit:cover}

.work-collection-copy:not(.film-case) .work-collection-lead{margin-bottom:16px}
.purpose-intro{font-size:14px;line-height:1.45;color:#b4c0ce;margin:0 0 16px}
.purpose-pending .purpose-intro{opacity:0}
@media(prefers-reduced-motion:reduce){.purpose-pending .purpose-intro{opacity:1}}

/* Preserve the entire photograph inside the same reserved player footprint. */
#long-gallery .film-card .film-image{background:#050c14}
#long-gallery .film-card .film-image img{object-fit:contain;object-position:center;transform:none!important}
/* Posters use the same 16:9 image area as playback; reserved controls blend into the section. */
#long-gallery .film-card .film-image{height:100%;background:transparent}
#long-gallery .film-card .film-image img{object-fit:contain;object-position:center}
#long-gallery .film-card{background:transparent}

/* One consistent icon family, with usable hit targets and quiet sliders. */
.film-stage .cinema-toolbar{gap:2px;height:36px}
.film-stage .cinema-toolbar button{width:36px;height:36px;color:#fff}
.film-stage .cinema-player svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.film-stage #film-toggle svg{fill:currentColor;stroke:none;width:18px;height:18px}
.film-stage .film-skip svg{width:23px;height:23px}
.film-stage .film-skip text{fill:currentColor;stroke:none;font:8px Arial,sans-serif;text-anchor:middle}
.film-stage #film-volume{appearance:none;-webkit-appearance:none;width:48px;height:24px;background:transparent;--volume:100%;margin-right:10px}
.film-stage #film-volume::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#fff var(--volume),#ffffff55 var(--volume))}
.film-stage #film-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:7px;border-radius:50%;background:#fff;margin-top:-2.5px}
.film-stage #film-volume::-moz-range-track{height:2px;background:#ffffff55}
.film-stage #film-volume::-moz-range-progress{height:2px;background:#fff}
.film-stage #film-volume::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:#fff}
.film-stage #film-time{font-size:11px;color:#fff;margin-left:5px}
.film-stage #film-speed{appearance:none;-webkit-appearance:none;background:none;padding:0 8px;min-height:36px;height:36px;min-width:36px;font-size:12px;color:#fff}
.film-stage.is-running:not(.controls-visible) .cinema-controls:not(:focus-within){opacity:0;pointer-events:none}
@media(pointer:coarse){.film-stage .cinema-toolbar button{min-width:40px;min-height:40px}.film-stage .cinema-toolbar{height:40px}}
@media(max-width:600px){.film-stage .cinema-controls{padding:18px 8px 4px}.film-stage #film-time{font-size:10px}.film-stage #film-volume{display:none}}

/* Keep both side panels in one stable slot while their content crossfades. */
.film-context{grid-column:8/-1;grid-row:3;display:grid;min-width:0;align-self:stretch;margin:32px 0 0}
.film-context>.work-collection-copy{grid-area:1/1;min-width:0;max-width:none;margin:0;padding:0;align-self:stretch}
.film-context>.work-collection-copy[hidden]{display:flex;visibility:hidden;pointer-events:none}
.film-context>.work-collection-copy[inert]{pointer-events:none}
@media(max-width:900px){.film-context{margin-top:40px;max-width:600px}}

/* Give the purpose headline a distinct voice using the existing brand typeface. */
.work-collection-lead{font-family:'Wild West Eurostile Medium','Eurostile',sans-serif;font-weight:500;letter-spacing:0;line-height:1.16;font-synthesis:none}

/* Content results share the gallery grid, with the numbers carrying the emphasis. */
.studio-results{padding:0 0 clamp(72px,8vw,128px);scroll-margin-top:120px}
.results-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin:0}
.result-stat{border-top:1px solid #ffffff35;padding-top:28px;min-width:0;display:flex;flex-direction:column}
.result-number{order:0;margin:0 0 24px;font-size:clamp(54px,7vw,106px);font-weight:500;line-height:.95;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;color:#ffffff;white-space:nowrap}
.result-number span{color:inherit;font-size:.6em;letter-spacing:-.025em;margin-left:.06em}
.result-stat dt{order:1;font-size:clamp(19px,1.8vw,25px);font-weight:500;line-height:1.25;letter-spacing:-.02em}
.result-context{order:2;margin:9px 0 0;font-size:14px;line-height:1.5;color:#b9c5d2}
@media(max-width:650px){.results-grid{grid-template-columns:1fr;gap:36px}.result-stat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:20px;padding-top:24px;align-items:end}.result-number{grid-column:1;grid-row:1/3;font-size:clamp(52px,12vw,76px);margin:0;align-self:center}.result-stat dt{grid-column:2;grid-row:1;font-size:19px}.result-context{grid-column:2;grid-row:2;font-size:13px;align-self:start;margin-top:5px}.studio-results{padding-bottom:72px}}

.result-number{font-family:'Wild West Eurostile Heavy','Eurostile',sans-serif;font-weight:850;font-synthesis:none;letter-spacing:-.025em;font-size:clamp(50px,6.4vw,98px)}
@media(max-width:650px){.result-number{font-size:clamp(46px,11vw,70px)}}

/* Quiet, evenly weighted results: one shared rule, aligned figures and labels. */
.results-grid{gap:0;border-top:1px solid #ffffff30;padding-top:40px}
.result-stat{border-top:0;padding:0 clamp(20px,3vw,48px)}
.result-stat:first-child{padding-left:0}
.result-stat:last-child{padding-right:0}
.result-stat+.result-stat{border-left:1px solid #ffffff24}
.result-number{margin-bottom:28px;font-size:clamp(48px,6vw,92px);line-height:1.05}
.result-stat dt{font-size:clamp(18px,1.6vw,23px);line-height:1.3}
.result-context{max-width:25ch;margin-top:8px;color:#b9c5d2}
@media(max-width:650px){
 .results-grid{padding-top:0;border-top:0;gap:0}
 .result-stat,.result-stat:first-child,.result-stat:last-child{padding:28px 0;border-top:1px solid #ffffff30}
 .result-stat+.result-stat{border-left:0}
 .result-number{font-size:clamp(44px,10vw,64px);margin:0}
 .result-context{margin-top:6px}
}

/* Reference-led process: generous landscape photography with compact glass notes. */
.studio-process{margin-top:40px}
.process-card{flex-basis:76%;min-height:0;aspect-ratio:3/2}
.process-photo,.process-card:nth-child(3) .process-photo,.process-card:nth-child(5) .process-photo{object-position:center}
.process-caption{left:24px;bottom:24px;width:320px;max-width:calc(100% - 48px);min-height:190px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:42px;background:rgba(48,46,41,.48);border:0;-webkit-backdrop-filter:blur(26px) saturate(115%);backdrop-filter:blur(26px) saturate(115%)}
.process-caption h3{margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.025em;text-transform:uppercase}
.process-caption h3 span{display:inline-block;margin-right:10px;color:#fff}
.process-caption p{font-size:14px;line-height:1.5;color:#fff}
@media(min-width:1600px){.process-card{flex-basis:65%}.process-caption{width:340px;min-height:210px;padding:24px}}
@media(max-width:760px){.studio-process{margin-top:28px}.process-card{flex-basis:94%;aspect-ratio:4/5;min-height:440px}.process-caption{left:16px;bottom:16px;width:290px;max-width:calc(100% - 32px);min-height:174px;padding:18px;gap:30px}.process-caption h3{font-size:11px}.process-caption p{font-size:13px}}
/* Match the supplied photo-and-caption template. */
.studio-offer{background:#ffffff}
.studio-process{width:calc(100% + 2 * (var(--content-gutter) - 20px));margin-left:calc(20px - var(--content-gutter))}
.process-card{flex-basis:65%;aspect-ratio:1.54;min-height:0}
.process-caption{width:32%;min-width:240px;max-width:340px;min-height:185px;left:20px;bottom:20px;padding:20px;gap:56px;background:rgba(75,72,65,.48)}
.process-caption h3{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:0}
.process-caption h3 span{font-size:0;width:9px;height:9px;background:white;flex:none;margin:0}
.process-caption p{font-size:14px;line-height:1.45}
.process-footer>p{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
@media(max-width:760px){.studio-process{width:calc(100% + 2 * (var(--content-gutter) - 16px));margin-left:calc(16px - var(--content-gutter))}.process-card{flex-basis:94%;aspect-ratio:4/5;min-height:440px}.process-caption{width:260px;min-width:0;max-width:calc(100% - 32px);min-height:175px;left:16px;bottom:16px;padding:18px;gap:38px}.process-caption p{font-size:13px}}

/* Original process copy, inside the approved landscape frame. */
.process-caption{display:block;width:340px;min-width:0;max-width:calc(100% - 40px);min-height:0;padding:22px}
.process-caption h3{display:block;margin:22px 0 12px;font-family:'Suisse Intl','Helvetica Neue',sans-serif;font-size:25px;font-weight:500;line-height:1.12;letter-spacing:-.02em;text-transform:none}
.process-caption .process-step{font-size:11px;line-height:1.4;letter-spacing:.04em;color:#efefeb}
.process-caption .process-result{margin-top:18px;padding-top:14px;border-top:1px solid #ffffff40;font-size:13px;line-height:1.45}
.process-caption .process-result>span{display:block;margin-bottom:6px;font-size:11px;color:#ecece6}
@media(max-width:1100px){.process-caption{width:310px;padding:18px}.process-caption h3{margin-top:18px;font-size:23px}.process-caption p{font-size:13px}.process-caption .process-result{font-size:12px}}
@media(max-width:760px){.process-caption{max-width:calc(100% - 32px);width:300px}.process-card{min-height:480px}.process-caption h3{font-size:23px}}

/* Bottom navigation shares a left progress / right arrows layout. */
.process-footer{grid-template-columns:minmax(0,1fr) auto}
.process-progress{justify-self:start}
.process-arrows .gallery-navigation>button,
.process-arrows .gallery-navigation>button:hover:not(:disabled),
.process-arrows .gallery-navigation>button:disabled{background:transparent;color:#101010}
.process-arrows .gallery-navigation>button:focus-visible{outline-color:#101010}
#short-gallery .short-progress{display:flex;align-items:center;flex:1;min-width:0;margin-right:auto}
#short-gallery .short-progress button{display:grid;place-items:center;flex:0 1 28px;min-width:0;height:44px;padding:0;background:transparent}
#short-gallery .short-progress button span{display:block;width:2px;height:18px;background:#777;transition:height 180ms ease-out,background-color 180ms ease-out}
#short-gallery .short-progress button[aria-current=true] span{width:4px;height:28px;background:#ff6a00}
#short-gallery .short-progress button:hover:not(:disabled){background:transparent}
#short-gallery .short-progress button:hover span{background:#eee}
#short-gallery .short-progress button[aria-current=true]:hover span{background:#ff6a00}
@media(prefers-reduced-motion:reduce){#short-gallery .short-progress button span{transition:none}}
/* Align the process heading, photographs and controls with the galleries above. */
.studio-process{width:100%;margin-left:0}
@media(min-width:901px){.studio-offer{padding-inline:max(6vw,calc((100vw - 1440px)/2))}}
/* Compact caption panels leave more of the photography visible. */
.process-caption{width:280px;padding:18px}
.process-caption h3{margin:14px 0 10px;font-size:22px}
.process-caption p{font-size:13px;line-height:1.4}
.process-caption .process-step{font-size:10px}
.process-caption .process-result{margin-top:12px;padding-top:10px;font-size:12px;line-height:1.4}
.process-caption .process-result>span{font-size:10px;margin-bottom:4px}
@media(max-width:760px){.process-caption{width:260px;padding:16px}.process-caption h3{font-size:21px;margin-top:12px}}

/* A complete, readable process without stock imagery. */
.process-flow{width:100%;margin-top:12px;min-width:0;border-bottom:1px solid #10101025}
.process-flow-step{position:relative;border-top:1px solid #10101025}
.process-flow-step::before{content:'';position:absolute;left:0;top:-1px;width:100%;height:1px;background:#101010;transform:scaleX(0);transform-origin:left;transition:transform 500ms cubic-bezier(.22,1,.36,1)}
.process-flow-step[data-open=true]::before{transform:scaleX(1)}
.process-flow-step h3{margin:0}
.process-flow-toggle{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(180px,.7fr) 24px;align-items:center;gap:24px;width:100%;padding:30px 0;border:0;background:none;color:#161616;text-align:left;cursor:pointer;font:inherit}
.process-flow-number{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;font-weight:400;color:#71716b}
.process-flow-title{font-size:clamp(23px,2.6vw,38px);font-weight:500;line-height:1.15;letter-spacing:-.025em}
.process-flow-summary{font-size:14px;font-weight:400;line-height:1.4;color:#62625c}
.process-flow-icon{position:relative;width:18px;height:18px;justify-self:end}
.process-flow-icon::before,.process-flow-icon::after{content:'';position:absolute;background:currentColor;top:8px;left:1px;width:16px;height:1px;transition:transform 350ms ease}
.process-flow-icon::after{transform:rotate(90deg)}
.process-flow-step[data-open=true] .process-flow-icon::after{transform:rotate(0)}
.process-flow-toggle:hover .process-flow-title{color:#66665e}
.process-flow-toggle:focus-visible{outline:2px solid #161616;outline-offset:6px}
.process-flow-panel{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 450ms cubic-bezier(.22,1,.36,1),opacity 240ms ease,visibility 450ms}
.process-flow-step[data-open=true] .process-flow-panel{grid-template-rows:1fr;opacity:1;visibility:visible}
.process-flow-clip{overflow:hidden;min-height:0}
.process-flow-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:48px;padding:0 48px 36px 88px}
.process-flow-label{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.065em;text-transform:uppercase;color:#6c6c65}
.process-flow-content p{font-size:16px;line-height:1.6;margin:0;max-width:43ch;color:#33332f}
.process-flow-deliverable{border-left:1px solid #10101020;padding-left:24px}
.process-flow-deliverable p{color:#161616}
.flow-reveal{opacity:0;transform:translateY(14px);transition:opacity 650ms ease var(--flow-delay),transform 650ms cubic-bezier(.22,1,.36,1) var(--flow-delay)}
.flow-reveal.flow-visible{opacity:1;transform:none}
@media(max-width:760px){
 .process-flow-toggle{grid-template-columns:28px minmax(0,1fr) 18px;gap:14px;padding:24px 0}
 .process-flow-title{font-size:25px}.process-flow-summary{grid-column:2;grid-row:2;font-size:13px;margin-top:-5px}.process-flow-icon{grid-column:3;grid-row:1/3}
 .process-flow-content{grid-template-columns:1fr;gap:24px;padding:0 0 28px 42px}.process-flow-content p{font-size:15px}.process-flow-deliverable{border-left:0;border-top:1px solid #10101020;padding:20px 0 0}
}
@media(prefers-reduced-motion:reduce){.process-flow-step::before,.process-flow-panel,.process-flow-icon::after,.process-flow-icon::before,.flow-reveal{transition:none}.flow-reveal{opacity:1;transform:none}}
#process-heading{scroll-margin-top:128px}

/* Tighter entry, with a sequential line-and-type reveal. */
.studio-offer{padding-top:72px;gap:32px}
.process-flow{margin-top:0}
.process-flow-step{border-top-color:transparent}
.process-flow-step::after{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:#10101025;transform-origin:left;transform:scaleX(1);transition:transform 850ms cubic-bezier(.22,1,.36,1) var(--flow-delay,0ms);pointer-events:none}
.process-flow-step.flow-reveal:not(.flow-visible)::after{transform:scaleX(0)}
.process-flow-step.flow-reveal{transform:none}
.process-flow-toggle>.process-flow-title,.process-flow-toggle>.process-flow-summary,.process-flow-toggle>.process-flow-number{transition:opacity 650ms ease,transform 700ms cubic-bezier(.22,1,.36,1)}
.flow-reveal:not(.flow-visible) .process-flow-title{opacity:0;transform:translateY(22px)}
.flow-reveal:not(.flow-visible) .process-flow-summary{opacity:0;transform:translateY(12px)}
.flow-reveal:not(.flow-visible) .process-flow-number{opacity:0;transform:translateY(8px)}
.flow-visible .process-flow-title{transition-delay:calc(var(--flow-delay) + 90ms)}
.flow-visible .process-flow-summary{transition-delay:calc(var(--flow-delay) + 180ms)}
.process-flow-content>div{opacity:0;transform:translateY(8px);transition:opacity 220ms ease,transform 220ms ease}
.process-flow-step[data-open=true] .process-flow-content>div{opacity:1;transform:none;transition-duration:400ms;transition-delay:100ms}
.process-flow-step[data-open=true] .process-flow-content>div+div{transition-delay:160ms}
@media(max-width:760px){.studio-offer{padding-top:48px;gap:28px}}
@media(prefers-reduced-motion:reduce){.process-flow-step::after,.process-flow-toggle>.process-flow-title,.process-flow-toggle>.process-flow-summary,.process-flow-toggle>.process-flow-number,.process-flow-content>div{transition:none!important;transform:none!important;opacity:1!important}}

/* Stronger hierarchy: editorial introduction and a focused active chapter. */
.studio-offer{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start;padding-block:80px}
.studio-offer .offer-statement{position:sticky;top:128px}
.process-eyebrow{font-size:11px;letter-spacing:.1em;line-height:1.5;color:#676760;margin:0 0 24px}
.studio-offer .offer-statement h2{font-size:clamp(30px,3.2vw,48px);line-height:1.1;letter-spacing:-.025em;max-width:19ch}
.studio-offer .offer-statement h2 br{display:none}
.process-flow{border-bottom:0}
.process-flow-step{transition:background-color 400ms ease,color 400ms ease;isolation:isolate}
.process-flow-step[data-open=true]{background:#191b1a;color:#fff}
.process-flow-step[data-open=true]::before{background:#191b1a}
.process-flow-step[data-open=true]::after{opacity:0}
.process-flow-toggle{grid-template-columns:42px minmax(0,1fr) 20px;gap:18px;padding:26px 24px;color:inherit}
.process-flow-number{font-size:17px;color:#7a7a73;align-self:start;padding-top:6px;transition:color 300ms}
.process-flow-title{font-size:clamp(23px,2vw,30px);line-height:1.15}
.process-flow-summary{grid-column:2;grid-row:2;font-size:13px;margin-top:-9px;color:#777770}
.process-flow-icon{grid-column:3;grid-row:1/3}
.process-flow-step[data-open=true] .process-flow-number{color:#e7e8df}
.process-flow-step[data-open=true] .process-flow-summary{color:#aeb3ae}
.process-flow-step[data-open=true] .process-flow-toggle:hover .process-flow-title{color:#fff}
.process-flow-step[data-open=true] .process-flow-toggle:focus-visible{outline-color:#8b8b83;outline-offset:3px}
.process-flow-content{grid-template-columns:1fr;gap:22px;padding:0 36px 30px 84px}
.process-flow-content p{font-size:15px;line-height:1.55;max-width:46ch;color:#d8dcd7}
.process-flow-label{font-size:10px;letter-spacing:.09em;color:#969e96;margin-bottom:9px}
.process-flow-deliverable{padding:20px 0 0;border-left:0;border-top:1px solid #ffffff26}
.process-flow-deliverable p{color:#fff;font-size:17px;line-height:1.4}
.studio-contact{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;padding-block:88px}
.studio-contact-label{font-size:11px;letter-spacing:.1em;color:#a0a0a0;margin:0 0 22px}
.studio-contact h2{font-size:clamp(40px,4.7vw,72px);line-height:1.03;letter-spacing:-.035em;font-weight:500;margin:0}
.studio-contact-action>p{font-size:17px;line-height:1.5;color:#b8b8b8;margin:0 0 24px}
.studio-contact-action>a{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:18px 24px;background:#fff;color:#111;font-size:16px;text-decoration:none;min-height:56px}
.studio-contact-action>a:hover{background:#deded8}
.studio-contact-action>a:focus-visible{outline:2px solid #fff;outline-offset:6px}
@media(max-width:900px){.studio-offer{grid-template-columns:1fr;gap:36px;padding-block:56px}.studio-offer .offer-statement{position:static}.studio-offer .offer-statement h2{max-width:28ch;font-size:clamp(30px,5vw,40px)}.process-eyebrow{margin-bottom:16px}.process-flow-toggle{padding:24px 20px}.process-flow-content{padding-left:80px;padding-right:28px}.studio-contact{grid-template-columns:1fr;gap:32px;padding-block:64px}}
@media(max-width:480px){.process-flow-toggle{grid-template-columns:26px minmax(0,1fr) 18px;gap:12px;padding:22px 16px}.process-flow-title{font-size:23px}.process-flow-number{font-size:13px}.process-flow-content{padding:0 20px 26px 54px}.process-flow-content p{font-size:14px}.process-flow-deliverable p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.process-flow-step,.process-flow-number{transition:none}}

/* Animate measured panel heights so opening and closing remain fluid in WebKit. */
.process-flow-panel{display:block;height:0;overflow:hidden;opacity:0;visibility:hidden;transition:none}
.process-flow-step[data-open=true] .process-flow-panel{height:auto;opacity:1;visibility:visible}
.process-flow-icon::before,.process-flow-icon::after{transition:transform 620ms cubic-bezier(.65,0,.2,1)}
.process-flow-step{transition:background-color 620ms cubic-bezier(.65,0,.2,1),color 400ms ease}
.process-flow-content>div{transition:opacity 220ms ease,transform 300ms ease}
.process-flow-step[data-open=true] .process-flow-content>div{transition-duration:450ms;transition-delay:170ms}
.process-flow-step[data-open=true] .process-flow-content>div+div{transition-delay:240ms}
@media(prefers-reduced-motion:reduce){.process-flow-icon::before,.process-flow-icon::after,.process-flow-step,.process-flow-content>div{transition:none!important}}

/* A live stage marker gives the introduction a purposeful visual anchor. */
.process-compass{max-width:380px;margin-top:48px;opacity:0;transform:translateY(12px);transition:opacity 650ms ease,transform 700ms cubic-bezier(.22,1,.36,1)}
.process-compass.compass-visible{opacity:1;transform:none}
.compass-count{display:flex;align-items:baseline;gap:14px;line-height:1}
.compass-current{font-family:'Wild West Eurostile Heavy','Eurostile',sans-serif;font-weight:850;font-synthesis:none;font-size:clamp(72px,7.6vw,116px);letter-spacing:-.04em;color:#1a1c1b}
.compass-total{font-family:ui-monospace,SFMono-Regular,monospace;font-size:14px;color:#777a72}
.compass-stage{font-size:18px;font-weight:500;line-height:1.4;margin-top:12px}
.compass-track{display:flex;gap:8px;margin-top:26px}
.compass-track span{position:relative;height:4px;flex:1;background:#d8dad2;overflow:hidden}
.compass-track span::after{content:'';position:absolute;inset:0;background:#888f83;transform:scaleX(0);transform-origin:left;transition:transform 600ms cubic-bezier(.22,1,.36,1),background 300ms ease}
.compass-track .is-past::after,.compass-track .is-current::after{transform:scaleX(1)}
.compass-track .is-current::after{background:#191b1a}
.compass-endpoints{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;letter-spacing:.08em;color:#74776f}
@media(max-width:900px){.process-compass{margin-top:28px;max-width:320px}.compass-current{font-size:64px}.compass-stage{font-size:16px}.compass-track{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.process-compass{opacity:1;transform:none;transition:none}.compass-track span::after{transition:none}}

/* A working visual storyboard, independent of scroll-gated heading reveals. */
#creative-process{scroll-margin-top:112px;gap:clamp(32px,5vw,80px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#creative-process .offer-statement{top:110px;min-width:0}
#creative-process .process-eyebrow{display:none}
#creative-process h2{font-size:clamp(28px,2.7vw,42px);max-width:25ch;margin-bottom:32px}
#creative-process .process-flow-step{opacity:1;transform:none}
#creative-process .process-flow-panel{visibility:visible}
#creative-process .process-flow-content>div{transition:none;transform:none}
.process-preview{background:#191b1a;color:#ffffff;padding:22px;overflow:hidden}
.preview-top{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:#c8ccc4;align-items:center}
.preview-light{width:7px;height:7px;background:#d4e4b4;border-radius:50%}
.preview-canvas{position:relative;aspect-ratio:1.8;margin:22px 0;background:#232624;overflow:hidden}
.preview-scene{position:absolute;inset:0;animation:process-scene .65s cubic-bezier(.16,1,.3,1) both}
.preview-scene[hidden]{display:none}
.preview-caption{font-size:15px!important;line-height:1.45!important;color:#c8ccc4!important;min-height:44px;margin:0 0 18px!important}
.preview-controls{border-top:1px solid #ffffff25;padding-top:12px;display:flex;justify-content:space-between;align-items:center}
.preview-controls button{color:#ffffff;background:none;border:0;min-width:44px;min-height:44px;font:inherit;font-size:14px;cursor:pointer}
.preview-controls button:hover{color:#d4e4b4}.preview-controls button:focus-visible{outline:2px solid #d4e4b4;outline-offset:2px}
.preview-controls>div{display:flex;gap:4px}.preview-prev,.preview-next{font-size:23px!important}
.story-note{position:absolute;border:1px solid #777f73;background:#30362f;padding:10px 14px;font-size:clamp(12px,1vw,15px);animation:note-in .8s both}
.note-a{top:12%;left:7%;transform:rotate(-5deg)}.note-b{top:18%;right:6%;transform:rotate(5deg);animation-delay:.12s}.note-c{top:40%;left:27%;animation-delay:.24s}
.story-thread{position:absolute;top:64%;height:13%;left:50%;border-left:1px solid #a6b392;animation:process-scene 1s both}.story-focus{position:absolute;bottom:6%;width:100%;text-align:center;font-size:clamp(18px,1.7vw,26px);color:#e1efc8;animation:process-scene 1.2s both}
.scene-plan{display:flex;gap:10px;align-items:center;padding:20px}.shot-card{width:33.333%;background:#e3e4db;color:#252a24;padding:5px 5px 12px;animation:note-in .7s both}.shot-card:nth-child(2){animation-delay:.15s;transform:translateY(-12px)}.shot-card:nth-child(3){animation-delay:.3s}.shot-card img{width:100%;aspect-ratio:1.15;object-fit:cover;filter:grayscale(1)}.shot-card span{display:block;font-size:10px;margin-top:8px}.shot-track{position:absolute;bottom:12%;left:20px;right:20px;display:flex;gap:10px}.shot-track i{height:3px;background:#9cac89;flex:1}
.scene-capture>img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45);animation:frame-focus 1.8s both}.viewfinder{position:absolute;inset:16%;border:1px solid #e1efc8;clip-path:polygon(0 0,20% 0,20% 1%,1% 1%,1% 20%,0 20%,0 0,100% 0,100% 20%,99% 20%,99% 1%,80% 1%,80% 0,100% 0,100% 100%,80% 100%,80% 99%,99% 99%,99% 80%,100% 80%,100% 100%,0 100%,0 80%,1% 80%,1% 99%,20% 99%,20% 100%,0 100%)}.capture-rec{position:absolute;left:14px;top:12px;font-size:11px;color:#fff}.capture-detail{position:absolute;bottom:14px;left:14px;font-size:13px;color:white;text-shadow:0 2px 8px #000}
.edit-monitor{width:45%;height:48%;margin:5% auto 0;overflow:hidden}.edit-monitor img{width:100%;height:100%;object-fit:cover}.edit-timeline{position:absolute;bottom:8%;left:8%;right:8%;height:30%;border-top:1px solid #747c70;padding-top:8px}.edit-track{display:flex;gap:4px;height:25px;margin-bottom:5px}.edit-track i{flex:1;background:#899b74}.edit-track i:nth-child(even){flex:1.6;background:#bdcba8}.audio-track{height:12px}.audio-track i{background:#667965!important}.edit-playhead{position:absolute;left:0;top:0;bottom:0;border-left:2px solid #fff;animation:edit-scan 2.4s ease-in-out both}
.scene-deliver{display:flex;align-items:center;justify-content:center;gap:6%;padding:24px}.delivery-wide{width:65%;aspect-ratio:16/9}.delivery-tall{width:24%;aspect-ratio:9/16}.scene-deliver>div{position:relative;animation:note-in .8s both}.delivery-tall{animation-delay:.18s!important}.scene-deliver img{width:100%;height:100%;object-fit:cover}.scene-deliver span{position:absolute;bottom:6px;left:6px;color:white;background:#151815;padding:4px 6px;font-size:10px}
@keyframes process-scene{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes note-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes frame-focus{from{transform:scale(1.14);filter:grayscale(1) blur(3px)}to{transform:scale(1);filter:grayscale(.45) blur(0)}}
@keyframes edit-scan{from{left:0}to{left:100%}}
@media(max-width:900px){#creative-process{grid-template-columns:1fr}#creative-process .offer-statement{position:static}#creative-process h2{max-width:30ch}.process-preview{max-width:620px}.preview-canvas{max-height:300px}.process-flow{min-width:0}}
@media(max-width:480px){.process-preview{padding:16px}.preview-canvas{aspect-ratio:1.5}.preview-caption{min-height:64px}.story-note{padding:8px}.scene-plan{padding:12px;gap:6px}.shot-card span{font-size:9px}.edit-track{height:18px}.audio-track{height:9px}}
@media(prefers-reduced-motion:reduce){.preview-scene,.preview-scene *{animation:none!important;transition:none!important}}

/* Pure visual process studies; the adjacent steps carry the explanation. */
.process-preview{padding:0;background:#202421}
.preview-canvas{margin:0;aspect-ratio:1.65;max-height:none}
.capture-rec{color:#ff4545;font-weight:600;animation:record-on .7s ease-out both}
@keyframes record-on{from{color:#fff}to{color:#ff4545}}
.scene-story{display:block}
.story-paper{position:absolute;left:12%;top:12%;width:43%;height:76%;background:#e4e5db;padding:8%;transform:rotate(-7deg);box-shadow:0 10px 25px #0003;animation:note-in .7s both}
.script-heading{height:5%;width:60%;background:#4b5349;margin-bottom:20%}
.script-line{height:3%;background:#a1a798;margin-block:12%;width:100%}.script-line.short{width:65%}
.script-highlight{height:10%;width:100%;background:#96ac75;transform-origin:left;animation:script-select 1s .25s both}.script-mark{width:18%;aspect-ratio:1;border:1px solid #6f805d;border-radius:50%;margin-top:20%}
.story-selected{position:absolute;right:10%;top:28%;width:42%;height:50%;padding:7px;background:#cfd5c5;transform:rotate(6deg);box-shadow:0 12px 28px #0005;animation:note-in .9s .2s both}.story-selected img{width:100%;height:100%;object-fit:cover;filter:grayscale(.65)}.story-crop{position:absolute;inset:18%;border:1px solid #ffffff}
@keyframes script-select{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scene-plan{display:block;padding:0}
.storyboard-grid{position:absolute;inset:15% 9%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:12px}
.storyboard-grid img{width:100%;height:100%;min-height:0;object-fit:cover;border:5px solid #dce0d3;animation:note-in .7s both;filter:grayscale(.6)}
.storyboard-grid img:nth-child(2){animation-delay:.1s}.storyboard-grid img:nth-child(3){animation-delay:.2s}.storyboard-grid img:nth-child(4){animation-delay:.3s}.storyboard-grid img:nth-child(5){animation-delay:.4s}.storyboard-grid img:nth-child(6){animation-delay:.5s}
.plan-selection{position:absolute;left:9%;top:15%;width:calc(27.333% - 8px);height:calc(35% - 6px);outline:2px solid #a6c883;outline-offset:4px;animation:plan-scan 2.4s steps(1) both;pointer-events:none}
@keyframes plan-scan{0%{translate:0 0}33%{translate:calc(100% + 12px) 0}66%,100%{translate:calc(200% + 24px) 0}}
.scene-edit .edit-timeline{top:10%;bottom:auto;height:26%}
.scene-edit .edit-monitor{position:absolute;bottom:8%;left:24%;width:52%;height:48%;margin:0}
.scene-deliver{display:block;padding:0}
.export-format{position:absolute;border:5px solid #dbe0d2;background:#dbe0d2;box-shadow:0 12px 24px #0005;overflow:hidden}
.export-format img{width:100%;height:100%;object-fit:cover}
.export-landscape{left:7%;top:31%;width:45%;aspect-ratio:16/9;animation:export-wide 1s both!important;z-index:1}
.export-square{left:43%;top:29%;width:29%;aspect-ratio:1;animation:export-square 1s both!important;z-index:2}
.export-portrait{right:7%;top:17%;width:24%;aspect-ratio:9/16;animation:export-tall 1s both!important;z-index:3}
@keyframes export-wide{from{transform:translateX(45%) scale(.7);opacity:.2}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes export-square{from{transform:translateX(-10%) scale(.7);opacity:.2}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes export-tall{from{transform:translateX(-80%) scale(.7);opacity:.2}to{transform:translateX(0) scale(1);opacity:1}}
@media(max-width:480px){.process-preview{padding:0}.preview-canvas{aspect-ratio:1.5}.storyboard-grid{gap:8px}.storyboard-grid img{border-width:3px}.export-format{border-width:3px}}
@media(prefers-reduced-motion:reduce){.preview-scene,.preview-scene *{animation:none!important;transition:none!important}}
.scene-deliver>.export-format{position:absolute}

/* New concepts: distill an idea, coordinate a shoot, reach an audience. */
.preview-scene>svg{width:100%;height:100%;display:block;fill:none;stroke:#b7c0ae;stroke-width:1.5}
.signal-inputs{stroke:#66725f;stroke-dasharray:350;animation:signal-draw 1.4s ease-out both}
.signal-core{fill:#d5e2be;stroke:none;transform-origin:300px 180px;animation:core-resolve 1.5s both}
.signal-output{stroke:#e5f0d5;stroke-width:2.5;stroke-dasharray:420;animation:signal-draw 1.7s .6s both}
.signal-pulses{fill:#e5f0d5;stroke:none;animation:source-fade 2s both}
@keyframes signal-draw{from{stroke-dashoffset:420;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
@keyframes core-resolve{from{transform:scale(.3);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes source-fade{from{opacity:.2}to{opacity:1}}
.camera-sight{fill:#b6cc8910;stroke:#667858;stroke-dasharray:5 7}
.stage-ground{stroke:#5b6558}.plan-subject{fill:#343e30;stroke:#d1dfbe;stroke-width:2}
.plan-light path:first-child{fill:#cbdc9d0d;stroke:#a2b48455}.plan-light rect{fill:#d0dcbd;stroke:none}.plan-light{animation:light-set 1.2s both;transform-origin:center}.light-right{animation-delay:.25s}
.plan-camera{stroke:#e2ead6;stroke-width:2;animation:camera-set 1s both}.plan-camera rect{fill:#35402f}.plan-orbit{stroke:#8a9e77;stroke-dasharray:5 8;animation:signal-draw 2s both}
@keyframes light-set{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
@keyframes camera-set{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
.release-rings{stroke:#607052;stroke-width:1;opacity:.5}.release-rings circle{transform-origin:300px 180px;animation:reach-ring 2.6s ease-out both}.release-rings circle:nth-child(2){animation-delay:.2s}.release-rings circle:nth-child(3){animation-delay:.4s}
.release-links{stroke:#829870;stroke-dasharray:260;animation:signal-draw 2s both}.release-screen rect{fill:#dce6cd;stroke:none}.release-screen path{fill:#25301e;stroke:none}.release-audience{stroke:#d6e5c3;stroke-width:2}.release-audience>g{animation:audience-arrive 1s .8s both}
@keyframes reach-ring{from{transform:scale(.25);opacity:0}to{transform:scale(1);opacity:.5}}
@keyframes audience-arrive{from{opacity:0}to{opacity:1}}
.scene-edit .edit-monitor{top:7%;bottom:auto;left:20%;width:60%;height:53%;margin:0}
.scene-edit .edit-timeline{top:auto;bottom:7%;height:25%;left:8%;right:8%;padding-top:6px}
.scene-edit .edit-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;height:65%;margin-bottom:4px}
.scene-edit .edit-track img{width:100%;height:100%;min-height:0;object-fit:cover;opacity:.45;outline:1px solid transparent;outline-offset:-1px}.scene-edit .edit-track img.active-clip{opacity:1;outline-color:#d4e4b4}
.scene-edit .audio-track{height:17%;display:flex}.scene-edit .edit-playhead{animation:none;z-index:2;top:0;bottom:0;left:0}
@media(prefers-reduced-motion:reduce){.preview-scene,.preview-scene *{animation:none!important;transition:none!important}}

/* Film-led process studies: select, sequence, distribute. */
.process-discover svg,.process-board svg,.process-release svg{width:100%;height:100%;display:block}
.contact-shot{opacity:.3;animation:contact-select 3.2s ease both}
.contact-shot.shot-1{opacity:1;animation:contact-hero 3.2s ease both}
.story-selection{stroke-dasharray:616;stroke-dashoffset:0;animation:selection-draw 2.4s ease both}
.story-mark{stroke-dasharray:30;animation:mark-draw 2.8s ease both}
.board-shot{animation:board-arrange 2.2s cubic-bezier(.16,1,.3,1) both;transform-origin:center}
.board-shot-0{--shift:60px;--angle:-13deg}.board-shot-1{--shift:0px;--angle:9deg;animation-delay:.12s}.board-shot-2{--shift:-60px;--angle:-8deg;animation-delay:.24s}
.board-line{stroke-dasharray:476;animation:selection-draw 2s ease both}
.release-branch{stroke-dasharray:300;animation:selection-draw 2.4s ease both}
.release-portrait{animation:format-spread 2s cubic-bezier(.16,1,.3,1) both;--x:-180px;--y:45px}
.release-post{animation:format-spread 2.4s cubic-bezier(.16,1,.3,1) both;--x:-285px;--y:-60px}
@keyframes contact-select{0%,20%{opacity:1}100%{opacity:.3}}
@keyframes contact-hero{0%{opacity:.55}55%,100%{opacity:1}}
@keyframes selection-draw{0%,15%{stroke-dashoffset:616}100%{stroke-dashoffset:0}}
@keyframes mark-draw{0%,65%{stroke-dashoffset:30}100%{stroke-dashoffset:0}}
@keyframes board-arrange{from{transform:translateX(var(--shift)) rotate(var(--angle))}to{transform:translateX(0) rotate(0)}}
@keyframes format-spread{0%,10%{transform:translate(var(--x),var(--y)) scale(.6);opacity:0}35%{opacity:1}100%{transform:translate(0,0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.preview-scene,.preview-scene *{animation:none!important;transition:none!important}}

/* Keep the video action visible before hover. */
#long-gallery .film-card .film-play{display:grid;place-items:center;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:clamp(56px,6vw,80px);height:clamp(56px,6vw,80px);border-radius:50%;background:rgba(0,0,0,.62);pointer-events:none;transition:background .2s ease}
#long-gallery .film-card .film-play svg{width:44%;height:44%;fill:#fff;stroke:none;transform:translateX(-2%)}
#long-gallery .film-card:hover .film-play,#long-gallery .film-card:focus-visible .film-play{background:#f47b32}

/* Production planning and audience growth: one clear action per scene. */
.plan-type{font-family:inherit;font-size:13px;stroke:none;letter-spacing:.035em}
.plan-slot{animation:plan-place .8s cubic-bezier(.16,1,.3,1) both}
.slot-one{animation-delay:.2s}.slot-two{animation-delay:.7s}.slot-three{animation-delay:1.2s}
.plan-cursor{animation:plan-scan 4.8s cubic-bezier(.4,0,.2,1) both}
.reach-count{font-family:inherit;font-size:40px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.reach-label{font-family:inherit;font-size:12px;letter-spacing:.12em}
.reach-note{font-family:inherit;font-size:10px}
.reach-line{stroke-dasharray:1;stroke-dashoffset:0;animation:reach-grow 5s linear both}
@keyframes plan-place{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes plan-scan{0%,35%{transform:translateX(0)}100%{transform:translateX(363px)}}
@keyframes reach-grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.plan-slot,.plan-cursor,.reach-line{animation:none!important}}

/* Camera thirds replace the corner frame; retain more of the left image. */
.scene-capture>img{object-position:left center}
.scene-capture .viewfinder{inset:0;border:0;clip-path:none;background:none}
.scene-capture .viewfinder::before,.scene-capture .viewfinder::after{content:"";position:absolute;pointer-events:none}
.scene-capture .viewfinder::before{top:0;bottom:0;left:33.333%;width:33.333%;border-left:1px solid #ffffff80;border-right:1px solid #ffffff80}
.scene-capture .viewfinder::after{left:0;right:0;top:33.333%;height:33.333%;border-top:1px solid #ffffff80;border-bottom:1px solid #ffffff80}

.story-excerpt{animation:story-excerpt 4s ease both}.story-audio-scan{animation:story-audio-scan 4s cubic-bezier(.4,0,.2,1) both}
@keyframes story-excerpt{0%,45%{opacity:0}70%,100%{opacity:1}}
@keyframes story-audio-scan{0%{transform:translateX(0);opacity:1}75%{transform:translateX(265px);opacity:1}100%{transform:translateX(265px);opacity:0}}
@media(prefers-reduced-motion:reduce){.story-excerpt{animation:none}.story-audio-scan{display:none}}

/* Story strategy: two inputs resolve into a clear creative brief. */
.strategy-label{font-family:inherit;font-size:12px;letter-spacing:.035em}
.strategy-path path{stroke-dasharray:1;animation:strategy-connect 1.8s cubic-bezier(.4,0,.2,1) both}
.strategy-path path:nth-child(2){animation-delay:.3s}
.strategy-brief{animation:strategy-reveal .8s 1.3s ease both}
.strategy-messages{animation:strategy-reveal .8s 1.9s ease both}
.strategy-highlight{transform-box:fill-box;transform-origin:left;animation:strategy-mark .7s 2.5s cubic-bezier(.16,1,.3,1) both}
@keyframes strategy-connect{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes strategy-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes strategy-mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.strategy-path path,.strategy-brief,.strategy-messages,.strategy-highlight{animation:none!important}}

/* Fullscreen support, including an expanded-player fallback for embedded browsers. */
.short-fullscreen{position:absolute;right:12px;top:12px;z-index:8;width:44px;height:44px;border:1px solid #ffffff80;background:#000b;color:#fff;font-size:27px;cursor:pointer}
#cinema-player:fullscreen,.short-player:fullscreen{width:100vw;height:100vh;background:#000;aspect-ratio:auto;max-width:none;max-height:none}
#cinema-player:fullscreen video,.short-player:fullscreen video{width:100%;height:100%;object-fit:contain}
.player-expanded{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;z-index:2147483647!important;background:#000!important;transform:none!important}
.player-expanded video,.player-expanded iframe{width:100%!important;height:100%!important;object-fit:contain!important}
.player-fullscreen-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:30;min-height:44px;padding:10px 16px;background:#161616;color:#fff;border:1px solid #888;cursor:pointer}

@media(max-width:760px){
 #ww-page #hero,.creative-page .studio-hero,.mfg-page .mfg-hero{height:100svh!important;min-height:560px!important;max-height:none!important;padding:0!important}
}
#hero-video,.studio-hero-video,.mfg-hero-video{pointer-events:none!important;object-fit:cover!important}
#hero-video::-webkit-media-controls,.studio-hero-video::-webkit-media-controls,.mfg-hero-video::-webkit-media-controls{display:none!important}
#hero-video::-webkit-media-controls-start-playback-button,.studio-hero-video::-webkit-media-controls-start-playback-button,.mfg-hero-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
@media(max-width:760px){
 .creative-page .studio-hero-copy{display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:80px 24px;box-sizing:border-box}
 .creative-page .studio-hero-copy h1{position:static;inset:auto;font-size:clamp(30px,7.7vw,44px);line-height:1.12;margin:0;text-align:center;transform:none!important}
 .creative-page .studio-hero-copy>a{position:static;transform:none!important;white-space:normal;text-align:center;font-size:11px;min-height:44px;margin:0}
}

@media(max-width:760px){
 .creative-page .studio-hero-copy h1{font-size:clamp(24px,6.8vw,42px);line-height:1.18;text-shadow:0 2px 12px rgba(0,0,0,.45)}
 .creative-page .studio-hero-copy h1>span,.creative-page .studio-hero-copy h1>strong{display:block;white-space:nowrap}
}

/* Keep the supporting hero link legible over mobile footage. */
@media(max-width:760px){
 .creative-page .studio-hero-copy>a{color:#fff;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:.025em;text-shadow:0 1px 3px #000,0 2px 12px rgba(0,0,0,.85);opacity:1;min-height:44px}
}

/* Shared mobile headline-to-link spacing. */
@media(max-width:760px){
 .creative-page .studio-hero-copy{gap:12px}
 .creative-page .studio-hero-copy>a{display:inline-flex;align-items:center;justify-content:center;margin:0;padding-block:0;min-height:44px;box-sizing:border-box}
}

@media(max-width:760px){
 .creative-page .studio-hero-copy h1{text-shadow:0 2px 8px rgba(0,0,0,.45),0 5px 24px rgba(0,0,0,.65),0 10px 48px rgba(0,0,0,.5)}
}