/* DESIGN INTENT: A continuous brand portfolio, legible copy and individually floating original cloud glyphs.
What: Work reads as one complete offer through real media; the original cloud viewer remains intact.
Why: Visitors see the whole offer and original work without choosing service tabs.
Where: aesthera99/site/service-work.css. No new typeface, media or interaction dependency. */
.fast-drawer--work{width:min(100vw,76rem);background:#f7f8fc;color:#003a7e;scrollbar-color:#003a7e #e6ecf6}
.fast-drawer--work .fast-work{gap:24px;padding:clamp(24px,4.5vw,64px);padding-top:84px}
.fast-drawer--work .fast-drawer__close--floating{position:sticky;float:right;top:18px;margin:18px 18px -62px;background:#f7f8fc;color:#003a7e}
.suite-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:0 0 clamp(38px,5vw,64px)}
.suite-intro>.suite-artifact{grid-column:auto}
.suite-intro>.suite-artifact>img{height:auto;max-height:640px;aspect-ratio:3/4;object-fit:contain}
.suite-eyebrow{font:700 13px/1.4 Arial,sans-serif;letter-spacing:.08em;margin:0 0 24px}
.suite-intro h2{font:400 clamp(34px,4.3vw,55px)/1.05 'Peace Agency',Arial,sans-serif;letter-spacing:-.035em;white-space:pre-line;margin:0;max-width:1000px}
.suite-intro__summary{font:600 clamp(18px,1.7vw,21px)/1.45 Arial,sans-serif;max-width:810px;margin:24px 0 30px;text-wrap:pretty}
.suite-overview{display:grid;grid-template-columns:1fr;gap:14px;border-top:2px solid #003a7e;padding-top:22px}
.suite-overview>div{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline}
.suite-overview strong{font:700 18px/1.2 Arial,sans-serif}
.suite-overview p{font:600 13px/1.5 Arial,sans-serif;margin:0}
.suite-chapter{border-top:1px solid #003a7e4d;padding:clamp(34px,5vw,64px) 0}
.suite-chapter__heading{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start;margin-bottom:30px}
.suite-chapter__number{grid-column:1/-1;font:700 13px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px}
.suite-chapter__heading h2{font:400 clamp(27px,3.2vw,42px)/1.12 'Peace Agency',Arial,sans-serif;letter-spacing:-.025em;margin:0;text-wrap:balance}
.suite-chapter__heading p{font:600 clamp(17px,1.6vw,21px)/1.5 Arial,sans-serif;margin:0;text-wrap:pretty}
.suite-collection+ .suite-collection{margin-top:52px}
.suite-collection>header{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin:0 0 18px}
.suite-collection h3{font:700 25px/1.2 Arial,sans-serif;margin:0}
.suite-collection>header p{font:600 15px/1.45 Arial,sans-serif;margin:0}
.suite-collection__media{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.suite-artifact{margin:0;min-width:0;grid-column:span 3;scroll-margin-top:86px;outline:0}
.suite-artifact>img,.suite-artifact>video{display:block;width:100%;height:clamp(210px,30vw,390px);object-fit:contain;background:#e6eaf1}
.suite-artifact>video{background:#080a10}
.suite-collection__media>.suite-artifact:first-child{grid-column:1/-1}
.suite-collection__media>.suite-artifact:first-child>img,.suite-collection__media>.suite-artifact:first-child>video,.suite-chapter>.suite-artifact>img{height:clamp(260px,45vw,570px)}
.suite-collection--identities .suite-artifact,.suite-collection--identities .suite-artifact:first-child{grid-column:span 2}
.suite-collection--identities .suite-artifact>img,.suite-collection--identities .suite-artifact:first-child>img{height:clamp(230px,34vw,430px)}
.suite-artifact__caption{font:700 15px/1.4 Arial,sans-serif;margin-top:12px;display:flex;justify-content:space-between;gap:14px}
.suite-artifact__credit{font-size:12px;font-weight:600;max-width:48%;text-align:right;opacity:.78}
.suite-artifact[data-selected-work]>img,.suite-artifact[data-selected-work]>video{outline:3px solid #003a7e;outline-offset:5px}
.suite-artifact:focus-visible>img,.suite-artifact video:focus-visible{outline:3px solid #003a7e;outline-offset:5px}
.suite-spaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.service-placeholder{margin:0;min-height:220px;border:1px dashed #003a7e66;background:linear-gradient(140deg,#f9fbff,#e7eef9);padding:28px;display:flex;flex-direction:column;justify-content:center;color:#003a7e;font:600 16px/1.4 Arial,sans-serif;text-align:left}
.service-placeholder span{font:700 12px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;margin-bottom:24px;opacity:.8}
.service-placeholder strong{font-size:24px;line-height:1.12}
.service-placeholder p{margin:12px 0 0;font-size:16px;line-height:1.5;font-weight:600}
.suite-system{padding:40px;background:#003a7e;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.suite-system h2,.suite-closing h2{font:400 clamp(27px,3vw,39px)/1.15 'Peace Agency',Arial,sans-serif;letter-spacing:-.025em;margin:0;white-space:pre-line}
.suite-system p,.suite-closing p{font:600 clamp(17px,1.7vw,21px)/1.5 Arial,sans-serif;margin:0}
.suite-closing{padding:55px 0 12px}.suite-closing p{margin-top:20px}
.fast-drawer--work .fast-work__contact{width:100%;color:#003a7e;background:transparent;border-color:#003a7e}
.project-cloud__summary{font-weight:600;font-size:clamp(16px,1.12vw,18px);line-height:1.5}
.project-cloud__scope{font-weight:700!important;font-size:14px!important;line-height:1.5!important}
.fast-contact__intro,.scope-feeder__hint,.scope-review__notice,.scope-review__summary p{font-weight:600}
.project-cloud__scope{font:600 12px/1.55 Arial;margin:15px 0 0}
.project-cloud__media-grid .service-placeholder{min-height:300px;grid-column:span 2;grid-row:span 2}
.project-cloud__media-grid[data-project-media-layout=service-web]{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:42svh;grid-auto-flow:row;background:#e7eef9}
.project-cloud__media-grid[data-project-media-layout=service-web]>.project-cloud__media-card{grid-column:1/-1;grid-row:span 1}
.project-cloud__media-grid[data-project-media-layout=service-web]>.service-placeholder{grid-column:span 1;grid-row:span 1}
.project-cloud__media-grid[data-project-media-layout=service-social]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr;height:100%;background:#e7eef9}
.project-cloud__media-grid[data-project-media-layout=service-social]>.service-placeholder{grid-column:span 1;grid-row:span 1;justify-content:flex-start;padding-top:12svh}
@media(min-width:701px){
 .project-cloud__media-grid[data-project-media-layout=service-social]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
 .project-cloud__media-grid[data-project-media-layout=service-social]>.service-placeholder{padding-left:28%;padding-top:10svh}
 .project-cloud__media-grid[data-project-media-layout=service-social]>.service-placeholder:last-child{justify-content:flex-end;padding-bottom:9svh;padding-top:0}
 .project-cloud__media-grid[data-project-media-layout=service-web]>.service-placeholder:nth-child(2){text-align:right}
}
.service-film-label{position:absolute;z-index:1;left:12px;bottom:12px;padding:7px 10px;background:#fff;color:#003a7e;font:700 12px Arial}

/* Labels are siblings of the invisible hit areas, so the original atlas is their only motion clock. */
.work-portfolio__label{position:absolute;z-index:3;left:30.5%;top:48.2%;transform:translateX(-50%);font-size:clamp(25px,3.6vw,52px);white-space:nowrap;filter:drop-shadow(0 2px 3px #3375a76b);pointer-events:none;transition:opacity 360ms ease}
.work-portfolio__label[data-figure=angel]{left:67%;top:50.5%;font-size:clamp(24px,3.1vw,46px)}
.work-portfolio__label[data-figure=butterfly]{left:42.5%;top:80.5%}
.work-portfolio__label .cloud-puff-heading{gap:0;justify-content:center}
.work-portfolio__label .cloud-puff-heading__glyph{animation:none;will-change:transform}
.work-sky.is-project-open .work-portfolio__label,.work-sky__portfolios:has(.is-project-source) .work-portfolio__label{opacity:0}
@media(max-width:700px){
 .fast-drawer--work .fast-work{padding:74px 22px 30px}.suite-intro{grid-template-columns:1fr;gap:30px}.suite-eyebrow{font-size:11px;margin-bottom:20px}.suite-intro h2{font-size:clamp(33px,8.7vw,56px)}
 .suite-intro__summary{font-size:19px;margin:22px 0 28px}.suite-overview{grid-template-columns:1fr;gap:16px;padding-top:20px}.suite-overview>div{display:grid;grid-template-columns:115px 1fr;gap:12px;align-items:baseline}.suite-overview strong{font:700 18px/1.25 Arial,sans-serif}.suite-overview p{font-size:13px;margin:0}
 .suite-chapter__heading{grid-template-columns:1fr;gap:15px}.suite-chapter__number{margin:0}.suite-chapter__heading p{font-size:18px}.suite-chapter__heading h2{font-size:30px}
 .suite-collection>header{display:block}.suite-collection>header p{margin-top:8px}.suite-collection__media{gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .suite-artifact,.suite-collection--identities .suite-artifact,.suite-collection--identities .suite-artifact:first-child{grid-column:1/-1}
 .suite-artifact>img,.suite-artifact>video,.suite-collection__media>.suite-artifact:first-child>img,.suite-collection__media>.suite-artifact:first-child>video,.suite-chapter>.suite-artifact>img,.suite-collection--identities .suite-artifact>img,.suite-collection--identities .suite-artifact:first-child>img{height:auto;aspect-ratio:var(--artifact-ratio);max-height:70svh;object-fit:contain}
 .suite-artifact__caption{font-size:14px}.suite-artifact__credit{font-size:11px}.suite-spaces{grid-template-columns:1fr;gap:18px}.service-placeholder{padding:24px;min-height:210px}
 .suite-system{grid-template-columns:1fr;padding:28px 24px;gap:24px}.suite-system p,.suite-closing p{font-size:18px}.suite-closing{padding-top:42px}
 .project-cloud__summary{font-size:17px;line-height:1.5}.project-cloud__media-grid .service-placeholder{grid-column:1/-1}
 .work-portfolio__label{font-size:clamp(16px,5.2vw,30px);top:49%}.work-portfolio__label[data-figure=angel]{font-size:clamp(16px,5.1vw,30px);top:51.2%}
 .project-cloud__media-grid[data-project-media-layout=service-web],.project-cloud__media-grid[data-project-media-layout=service-social]{grid-template-columns:1fr;grid-auto-rows:45svh;height:auto}
 .project-cloud__media-grid[data-project-media-layout=service-social]>.service-placeholder{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){.work-portfolio__label .cloud-puff-heading__glyph{will-change:auto}}
