/*
DESIGN INTENT: A service cloud rolls in from the side and continues beyond the screen edge.
What: White side clouds hold black ZT Otez Regular copy and full-width galleries; the ring header backlight fades with scene entry and exit.
Why: Keep the service pitch safely inset while artwork reaches the moving scalloped outline, and avoid a hard lighting cut as scroll enters the ring.
Where: aesthera99/site/service-cloud.css. Original figure media and 940ms handoff stay in index.html.
*/
@font-face{font-family:"ZT Otez";src:url("./public/fonts/ZTOtez-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* Jackson selected this exact Regular face in the local serif comparison.
   Scope it to reading copy so the original hero, navigation and Cloud Puff art keep their identity. */
.project-cloud__summary,.project-cloud__scope,
.service-placeholder,.service-placeholder p,.service-placeholder strong,.service-placeholder span,
.suite-intro__summary,.suite-chapter__heading p,.suite-overview p,.suite-collection>header p,.suite-system p,.suite-closing p,
.fast-contact__intro>p:not([class]){
 font-family:"ZT Otez",Georgia,serif!important;font-weight:400!important;font-synthesis:none;
}
/* Matching transparent shadows let the visible gallery state fade the same light
   on all three controls, including a smooth reversal during interrupted scroll. */
.brand-lockup,.site-nav__action{filter:drop-shadow(0 0 5px #fff0) drop-shadow(0 0 13px #fff0) drop-shadow(0 0 25px #fff0);transition:filter 700ms ease-in-out}
body.is-gallery-header-lit .brand-lockup,
body.is-gallery-header-lit .site-nav__action{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 13px #fff) drop-shadow(0 0 25px #ffffffd9)}
.project-cloud__sheet{top:0;bottom:0;left:22%;right:0;width:78%;background:#fff;color:#000;overflow:hidden}
.project-cloud.is-reversed .project-cloud__sheet{left:0;right:22%;width:78%}
.project-cloud__sheet::before{display:none}
.project-cloud .project-cloud__silhouette,.project-cloud.is-reversed .project-cloud__silhouette{display:block;top:0;left:0;right:auto;transform:none}
/* The scroll owner spans the clip plane. Only copy receives a safe inset;
   media must paint underneath the scallops instead of stopping at the text edge. */
.project-cloud__body{left:0;right:0;width:auto;height:100%;padding:clamp(44px,7svh,80px) 0 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:none}
.project-cloud__body::-webkit-scrollbar{display:none}
.project-cloud.is-reversed .project-cloud__body{left:0;right:0;padding:clamp(44px,7svh,80px) 0 0}
.project-cloud__body:focus{outline:none}
.project-cloud__body:focus-visible{box-shadow:inset 0 0 0 2px #0008}
.project-cloud__copy,.project-cloud.is-reversed .project-cloud__copy{position:relative;inset:auto;width:100%;max-width:none;padding:0 5% 32px 18%;background:transparent;box-shadow:none;overflow:visible;color:#000;transform:translate3d(0,20px,0)}
.project-cloud.is-reversed .project-cloud__copy{padding:0 18% 32px 5%}
.project-cloud__copy .cloud-puff-heading__glyph{filter:brightness(0)}
.project-cloud.is-open .project-cloud__copy,.project-cloud.is-reversed.is-open .project-cloud__copy{transform:translate3d(0,0,0)}
.project-cloud__copy h2,.project-cloud__copy h2.is-cloud-puff-long{font-size:clamp(36px,4.2vw,60px);max-width:none;line-height:1;letter-spacing:0}
.project-cloud__summary{font:400 clamp(18px,1.6vw,23px)/1.5 "ZT Otez",Georgia,serif;max-width:52ch;margin:25px 0 0;text-wrap:pretty}
.project-cloud__scope{font:400 clamp(14px,1.15vw,17px)/1.6 "ZT Otez",Georgia,serif!important;max-width:58ch;margin:20px 0 0}
.project-cloud__media,.project-cloud.is-reversed .project-cloud__media{position:relative;inset:auto;width:100%;height:auto;overflow:visible;margin:0;padding:0;transform:translate3d(0,16px,0)}
.project-cloud.is-open.is-media-ready .project-cloud__media,.project-cloud.is-reversed.is-open.is-media-ready .project-cloud__media{transform:translate3d(0,0,0)}
.project-cloud__media-grid[data-project-media-layout]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-rows:auto;gap:0;height:auto;min-height:0;background:#fff}
.project-cloud__media-grid[data-project-media-layout]>.project-cloud__media-card{background:#fff}
.project-cloud__media-grid[data-project-media-layout]>.project-cloud__media-card{grid-column:span 1;grid-row:auto;aspect-ratio:1.4;min-height:0}
.project-cloud__media-grid[data-project-media-layout]>.project-cloud__media-card--poster{aspect-ratio:3/4}
.project-cloud__media-grid[data-project-media-layout]>[data-project-media-lead],.project-cloud__media-grid[data-project-media-layout=service-web]>.project-cloud__media-card{grid-column:1/-1;aspect-ratio:16/9}
.project-cloud__media-grid[data-project-media-layout]>.service-placeholder{grid-column:span 1;grid-row:auto;min-height:270px;padding:28px;justify-content:center;text-align:left;background:#fff;color:#000;border-color:#0004}
/* Future-example labels remain readable inside the same cropped grid. */
.project-cloud:not(.is-reversed) .project-cloud__media-grid[data-project-media-layout]>.service-placeholder:nth-child(even){padding-left:var(--cloud-placeholder-inset,36%)}
.project-cloud.is-reversed .project-cloud__media-grid[data-project-media-layout]>.service-placeholder:last-child{padding-right:var(--cloud-placeholder-inset,36%)}
.project-cloud__media-card img,.project-cloud__media-card video{object-fit:cover}
.project-cloud__close{background:#ffffffde;border-radius:50%;width:48px;height:48px;top:22px;left:22px}
.project-cloud.is-reversed .project-cloud__close{left:auto;right:22px}
.project-cloud__close:focus-visible{outline:3px solid #003a7e;outline-offset:4px}
.project-cloud__close img,.project-cloud__close:focus-visible img{filter:brightness(0)}
@media(max-width:1000px) and (min-width:701px){
 .project-cloud__sheet{left:17%;width:83%}.project-cloud.is-reversed .project-cloud__sheet{right:17%;width:83%}
 .project-cloud__copy{padding-left:17%;padding-right:4%}.project-cloud.is-reversed .project-cloud__copy{padding-left:4%;padding-right:17%}
 .project-cloud__copy h2,.project-cloud__copy h2.is-cloud-puff-long{font-size:clamp(32px,4.5vw,44px)}
}
@media(max-width:700px){
 .project-cloud{--cloud-placeholder-inset:17%}
 .project-cloud__figure,.project-cloud.is-reversed .project-cloud__figure{top:0;bottom:auto;left:0;right:auto;width:100%;height:25svh;padding:0 38% 0 0}
 .project-cloud.is-reversed .project-cloud__figure{padding:0 0 0 38%}
 .project-cloud__sheet{top:20svh;left:4%;right:0;bottom:0;width:96%;overflow:hidden;background:#fff;clip-path:url('#project-cloud-gallery-clip');-webkit-clip-path:url('#project-cloud-gallery-clip')}
 .project-cloud.is-reversed .project-cloud__sheet{top:20svh;left:0;right:4%;bottom:0;width:96%;overflow:hidden;background:#fff;clip-path:url('#project-cloud-gallery-clip');-webkit-clip-path:url('#project-cloud-gallery-clip')}
 .project-cloud__sheet::before{display:none}.project-cloud__silhouette{display:block}
 .project-cloud__body,.project-cloud.is-reversed .project-cloud__body{left:0;right:0;inset-block:0;width:auto;height:100%;padding:36px 0 0;overflow-y:auto}
 .project-cloud__copy,.project-cloud.is-reversed .project-cloud__copy{padding:0 5% 26px 17%;background:transparent;width:100%;max-width:none}
 .project-cloud.is-reversed .project-cloud__copy{padding:0 17% 26px 5%}
 .project-cloud__copy h2,.project-cloud__copy h2.is-cloud-puff-long{font-size:clamp(27px,7.8vw,44px)}
 .project-cloud__summary{font-size:17px;line-height:1.5;margin-top:24px}.project-cloud__scope{font-size:14px!important;line-height:1.6!important}
 .project-cloud__media,.project-cloud.is-reversed .project-cloud__media{margin:0}
 .project-cloud__media-grid[data-project-media-layout]{grid-template-columns:1fr;gap:0;grid-auto-rows:auto}
 .project-cloud__media-grid[data-project-media-layout]>.project-cloud__media-card,.project-cloud__media-grid[data-project-media-layout]>.service-placeholder{grid-column:1/-1}
 .project-cloud__media-grid[data-project-media-layout]>.service-placeholder{min-height:250px;padding:24px}
 .project-cloud:not(.is-reversed) .project-cloud__media-grid[data-project-media-layout]>.service-placeholder{padding-left:17%;padding-right:5%}
 .project-cloud.is-reversed .project-cloud__media-grid[data-project-media-layout]>.service-placeholder{padding-left:5%;padding-right:17%}
 .project-cloud__close{left:auto;right:20px;top:20px}.project-cloud.is-reversed .project-cloud__close{left:20px;right:auto}
}
@media(prefers-reduced-motion:reduce){.brand-lockup,.site-nav__action,.project-cloud__sheet,.project-cloud__copy,.project-cloud__media{transition:none!important}}