/* One owner for the opening film and its transparent, naturally scrolling introduction. */
.opening-sequence{position:relative;isolation:isolate;z-index:3;background:#111}
body .opening-sequence>.film-hero{position:sticky;top:var(--site-header-height,128px);z-index:0;height:auto;min-height:0;aspect-ratio:16/9;max-height:none;overflow:hidden}
body .opening-sequence>.film-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
body .opening-sequence>.client-strip-track{z-index:2}
body .opening-introduction{position:relative;z-index:1;height:auto;min-height:0;padding:16px 8% 24px;background:transparent;color:#fff;pointer-events:auto}
body .opening-introduction .film-hero-copy{position:relative;inset:auto;padding:0;width:100%;max-width:1100px;opacity:var(--intro-reveal,1);visibility:visible;transform:none;transition:none}
body .opening-introduction .film-controls{position:relative;inset:auto;margin:20px 0 0;padding:0;opacity:var(--intro-reveal,1);visibility:visible;display:flex;justify-content:space-between;transition:none}
body .opening-introduction .hero-title-clean{max-width:980px;font-size:clamp(46px,5.15vw,82px);line-height:.96;letter-spacing:-.052em;margin:0 0 18px}
body .opening-introduction .hero-title-clean em{font-size:.94em}
body .opening-introduction .film-hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.6}
body.theme-light .opening-introduction :is(p,h1,a,button){color:#fff}
body .opening-introduction .light-button,body.theme-light .opening-introduction .light-button{color:#171918}
body .opening-sequence>.film-hero:after{display:block;background:linear-gradient(to bottom,transparent 36%,rgba(17,17,17,.12) 55%,rgba(17,17,17,.5) 78%,#111 100%);opacity:var(--hero-copy-reveal,0);pointer-events:none;transition:none}

/* The complete client ribbon feathers into the following photograph. */
body .client-strip-track>.client-strip:after{content:'';position:absolute;top:100%;left:0;right:0;height:min(clamp(32px,5svh,64px),var(--client-seam-space,64px));opacity:var(--client-seam-opacity,0);background:linear-gradient(to bottom,#111 0%,rgba(17,17,17,.9) 18%,rgba(17,17,17,.55) 48%,rgba(17,17,17,.15) 78%,transparent 100%);pointer-events:none}
body.theme-light .client-strip-track>.client-strip:after{background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.9) 18%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.15) 78%,transparent 100%)}

/* Agency media stays inside its own project and keeps its play control in view. */
body .agency-film{padding-bottom:0!important;scroll-margin-top:var(--chapter-top)}
body .agency-film>.visual{position:sticky!important;top:calc(var(--chapter-top) + var(--agency-copy-height,110px) + 24px)!important;max-width:calc((100svh - var(--chapter-top) - var(--agency-copy-height,110px) - 56px)*16/9);margin-inline:auto}
body .agency-film>.project-copy.chapter-heading{margin-bottom:24px}
.agency-scroll-runway{height:clamp(80px,12svh,160px)}

/* About stories hold the photograph while their copy moves with native page scrolling. */
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 body:not(.page-editing) :is(#studio,#talent).scene{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;padding:0!important;min-height:0!important;height:auto!important;overflow:visible;isolation:isolate}
 body:not(.page-editing) :is(#studio,#talent).scene>.visual{grid-area:1/1;position:sticky!important;top:var(--site-header-height,128px)!important;inset-inline:0!important;bottom:auto!important;width:100%;height:calc(100svh - var(--site-header-height,128px));z-index:0;mask-image:none!important;opacity:1!important;transform:none!important;overflow:hidden}
 body:not(.page-editing) :is(#studio,#talent).scene>.visual>img{height:100%;width:100%;object-fit:cover;transform:none!important}
 body:not(.page-editing) :is(#studio,#talent).scene>.studio-copy{grid-area:1/1;position:relative;z-index:1;align-self:start;width:100%;min-height:calc(100svh - var(--site-header-height,128px) + 96px);padding:clamp(56px,8svh,96px) 7vw 48px!important;pointer-events:none}
 body:not(.page-editing) :is(#studio,#talent) .studio-copy :is(a,button){pointer-events:auto}
}

body #mobile-studio{scroll-margin-top:calc(var(--site-header-height,128px) + var(--client-ribbon-height,0px))}

/* Compact reference composition: content determines the crop and the next section's edge. */
body:not(.page-editing) #mobile-studio.scene{padding:0!important;min-height:0!important;height:auto!important;isolation:isolate}
body:not(.page-editing) #mobile-studio.scene>.visual{position:absolute!important;inset:0!important;width:100%;height:100%;z-index:0;mask-image:none!important;opacity:1!important;transform:none!important;overflow:hidden}
body:not(.page-editing) #mobile-studio.scene>.visual>img{height:100%;width:100%;object-fit:cover;object-position:center 46%;transform:none!important}
body:not(.page-editing) #mobile-studio.scene>.studio-copy{position:relative;z-index:1;max-width:none;width:100%;min-height:0!important;padding:clamp(56px,5.5vw,110px) 6.5% 28px!important;opacity:1;transition:none}
body #mobile-studio .studio-copy h2{font-size:clamp(64px,6.5vw,140px);line-height:.96;letter-spacing:-.055em;max-width:9em;color:#f1f0e9}
body #mobile-studio .studio-copy h2 em{display:block;margin-left:1.8em;max-width:5.8em;font-size:.96em;line-height:.98;white-space:normal}
body #mobile-studio .studio-copy .eyebrow{font-size:10px;letter-spacing:.23em;margin-bottom:32px;color:#b4b6a9}
body #mobile-studio .studio-copy>p:not(.eyebrow){max-width:45ch;font-size:14px;line-height:1.8;color:#b4b6a9;margin:32px 0 20px}
body #mobile-studio .studio-copy>p.concept-note{font-size:11px}
body #mobile-studio .studio-copy .text-link{font-size:12px;color:#d5d6ce;margin-right:20px}
body #mobile-studio>.visual:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,#111 0%,rgba(17,17,17,.72) 5%,transparent 24%,transparent 73%,rgba(17,17,17,.65) 91%,#111 100%);opacity:var(--studio-edge-fade,1)}
body.theme-light #mobile-studio>.visual:before{background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.65) 5%,transparent 24%,transparent 73%,rgba(255,255,255,.6) 91%,#fff 100%)}
/* Static, monochrome grain is confined to the photograph beneath the copy and edge fades. */
body #mobile-studio>.visual{isolation:isolate}
body #mobile-studio>.visual>.studio-film-grain{position:absolute;inset:0;z-index:1;pointer-events:none;background:url("assets/studio-film-grain.svg") repeat 0 0/180px 180px;mix-blend-mode:overlay;opacity:.085}
@media(max-width:767px){
 body .opening-introduction{padding:20px 6% 24px}
 body .opening-introduction .hero-title-clean{font-size:clamp(38px,6.3vw,66px)}
 body:not(.page-editing) #mobile-studio.scene>.studio-copy{padding:clamp(140px,24svh,200px) 6% 28px!important}
 body #mobile-studio .studio-copy h2{font-size:clamp(38px,8vw,60px);max-width:100%}
 body #mobile-studio .studio-copy h2 em{margin-left:.6em;max-width:8em}
 body #mobile-studio .studio-copy .eyebrow{margin-bottom:20px}
 body #mobile-studio .studio-copy>p:not(.eyebrow){margin-top:24px}
 body .agency-film>.visual{position:relative!important;top:auto!important;max-width:100%}
 .agency-scroll-runway{display:none}
}
@media(prefers-reduced-motion:reduce){
 body .opening-sequence>.film-hero,body .agency-film>.visual{position:relative!important;top:auto!important}
 body .opening-introduction .film-hero-copy,body .opening-introduction .film-controls{opacity:1}
 .agency-scroll-runway{display:none}
}
body.page-editing .agency-film>.visual{position:relative!important;top:auto!important}
body.page-editing .agency-scroll-runway{display:none}

@media(max-height:620px){
 body .agency-film>.visual{position:relative!important;top:auto!important;max-width:100%}
 .agency-scroll-runway{display:none}
}
@media(prefers-reduced-motion:reduce){body .event-columns{min-height:0}}

/* The photograph holds briefly while the introduction travels upward over it. */
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 body:not(.page-editing) #mobile-studio.scene{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;overflow:visible}
 body:not(.page-editing) #mobile-studio.scene>.visual{grid-area:1/1;position:sticky!important;inset:auto!important;top:calc(var(--site-header-height,128px) + var(--client-ribbon-height,0px))!important;height:var(--studio-frame-height,640px);width:100%;align-self:start}
 body:not(.page-editing) #mobile-studio.scene>.visual>img{object-position:center 24%}
 body:not(.page-editing) #mobile-studio.scene>.studio-copy{grid-area:1/1;align-self:start;padding-top:clamp(150px,14vw,240px)!important;pointer-events:none}
 body:not(.page-editing) #mobile-studio .studio-copy :is(a,button){pointer-events:auto}
}

/* Light framing inverts only the portion of the introduction crossing the film. */
.intro-film-contrast{display:none}
body.theme-light .opening-sequence{background:#fff}
body.theme-light .opening-introduction{color:#171918}
body.theme-light .opening-introduction :is(p,h1,h1 em,a,button){color:#171918}
body.theme-light .opening-introduction .light-button{background:#171918;color:#fff}
body.theme-light .opening-introduction .film-controls button{border-color:#17191880}
body.theme-light .opening-introduction>.intro-film-contrast{display:block;position:absolute;inset:0;z-index:3;padding:inherit;pointer-events:none;user-select:none;overflow:hidden}
body.theme-light .opening-introduction>.intro-film-contrast :is(p,h1,h1 em,a,button){color:#fff}
body.theme-light .opening-introduction>.intro-film-contrast .light-button{background:#f3f1eb;color:#171918}
body.theme-light .opening-introduction>.intro-film-contrast .film-controls button{border-color:#ffffff90}

/* The studio owns a complete image stage before the green chapter enters. */
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 body:not(.page-editing) #mobile-studio.scene>.studio-copy{min-height:calc(var(--studio-frame-height, calc(100svh - var(--site-header-height,128px))) + 96px)!important;padding-bottom:72px!important}
}

/* Opening composition: the first title straddles the film edge at arrival. */
body .opening-introduction{margin-top:calc(-1 * clamp(100px,10vw,180px));margin-bottom:96px;transform:translate3d(0,var(--intro-drift,0px),0)}
body .opening-introduction .film-hero-copy,body .opening-introduction .film-controls{opacity:1}
/* Keep the approved photograph above the lower red buckle, with copy at shoulder level. */
body:not(.page-editing) #mobile-studio.scene>.visual>img{height:129.3%!important;object-position:center top!important}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 body:not(.page-editing) #mobile-studio.scene>.studio-copy{padding-top:calc(var(--studio-frame-height,900px) * .48)!important}
}
@media(max-width:767px){body .opening-introduction{margin-top:-64px;margin-bottom:64px}}
@media(prefers-reduced-motion:reduce){body .opening-introduction{transform:none;margin-bottom:0}}

/* A sticky stage must fit below the header; oversized photography scrolls normally. */
body .opening-sequence>.film-hero.media-pin-disabled{position:relative!important;top:auto!important}
body:not(.page-editing) #mobile-studio.studio-pin-disabled.scene>.visual{position:absolute!important;inset:0!important;height:100%!important}

/* Oversized media and copy remain in document flow on short viewports. */
body #corporate.corporate-pin-disabled .corporate-packages,
body #kim-shui.kim-pin-disabled .kim-pair-grid,
body .vici-stage .vici-spread.vici-pin-disabled{position:relative!important;top:auto!important}

/* A readable information panel travels with the photograph in normal page flow. */
body #mobile-studio.scene.studio-info-layout{--studio-panel-bg:#fff;--studio-panel-ink:#171918;--studio-panel-muted:#52564f;--studio-panel-rule:#17191835;display:block!important;padding:0!important;min-height:0!important;height:auto!important;overflow:hidden}
body.theme-light #mobile-studio.scene.studio-info-layout{--studio-panel-bg:#111;--studio-panel-ink:#f7f6f2;--studio-panel-muted:#c4c5c0;--studio-panel-rule:#ffffff38}
body #mobile-studio.scene.studio-info-layout>.visual{position:absolute!important;inset:0!important;width:100%;height:100%!important}
body #mobile-studio.scene.studio-info-layout>.visual>img{height:100%!important;width:100%;object-fit:cover;object-position:center 20%!important;transform:none!important}
body #mobile-studio.scene.studio-info-layout>.studio-copy{position:relative;z-index:2;width:100%;max-width:none;opacity:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,19vw);gap:4vw;align-items:start;min-height:clamp(700px,calc(100svh - var(--site-header-height,128px) - var(--client-ribbon-height,0px)),1100px)!important;padding:clamp(310px,25vw,480px) 3.5% 64px 6.5%!important;pointer-events:none}
body #mobile-studio .studio-heading{min-width:0}
body #mobile-studio .studio-info{max-width:370px;background:var(--studio-panel-bg);color:var(--studio-panel-ink);padding:clamp(22px,1.8vw,34px);border:1px solid var(--studio-panel-rule);pointer-events:auto}
body #mobile-studio .studio-info .service-intro{color:var(--studio-panel-ink)!important;font-size:clamp(17px,1.05vw,20px);line-height:1.55;margin:0;max-width:none}
body #mobile-studio .studio-info .concept-note{color:var(--studio-panel-muted)!important;font-size:13px;line-height:1.55;margin:22px 0;max-width:none}
body #mobile-studio .studio-info .phrase-fade{opacity:1!important}
body #mobile-studio .studio-info-actions{display:grid;gap:10px;border-top:1px solid var(--studio-panel-rule);padding-top:18px}
body #mobile-studio .studio-info-actions .text-link{display:flex;justify-content:space-between;gap:12px;min-height:48px;width:100%;margin:0;padding:12px 14px;border:1px solid var(--studio-panel-rule);color:var(--studio-panel-ink);font-size:14px;line-height:1.35;letter-spacing:0}
body #mobile-studio .studio-info-actions .text-link:last-child{background:var(--studio-panel-ink);color:var(--studio-panel-bg);border-color:var(--studio-panel-ink)}
body #mobile-studio .studio-info-actions .text-link:hover{outline:1px solid var(--studio-panel-ink);outline-offset:2px}
body #mobile-studio .studio-info-actions .text-link:focus-visible{outline:2px solid var(--studio-panel-ink);outline-offset:4px}
@media(max-width:1279px){
 body #mobile-studio.scene.studio-info-layout{--studio-photo-height:clamp(460px,65vw,770px)}
 body #mobile-studio.scene.studio-info-layout>.visual{height:var(--studio-photo-height)!important}
 body #mobile-studio.scene.studio-info-layout>.studio-copy{display:block;min-height:0!important;padding:0!important}
 body #mobile-studio.scene.studio-info-layout .studio-heading{display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--studio-photo-height);padding:40px 6%}
 body #mobile-studio .studio-info{max-width:none;padding:32px 6%;border:0}
 body #mobile-studio .studio-info .service-intro{max-width:58ch;font-size:18px}
 body #mobile-studio .studio-info-actions{display:flex;flex-wrap:wrap;max-width:620px}
 body #mobile-studio .studio-info-actions .text-link{width:auto;flex:1 1 240px}
 body #mobile-studio .studio-info .concept-note{max-width:62ch}
}
@media(max-width:767px){
 body #mobile-studio.scene.studio-info-layout{--studio-photo-height:clamp(430px,100vw,600px)}
 body #mobile-studio.scene.studio-info-layout .studio-heading{padding:40px 6% 32px}
 body #mobile-studio .studio-info{padding-block:26px}
 body #mobile-studio .studio-info-actions{display:grid}
 body #mobile-studio .studio-info-actions .text-link{width:100%}
}

/* Owner placement: use the upper storefront space, clear of the brush kit. */
@media(min-width:1280px){body #mobile-studio .studio-info{position:absolute;top:clamp(32px,4vw,76px);right:3.5%;width:clamp(270px,19vw,370px)}}
/* Another 10% on the existing 1.15 mark; trade vertical padding for size. */
body.commission>.header .official-logo{width:92.4px;height:92.4px;scale:1.15;transform-origin:center}
body.commission>.header{padding-block:17.8px}
@media(max-width:760px){body.commission>.header{padding-block:7.8px}}