/* One campaign image and one team-style video carousel per project. */
.project-showcase-feature{position:relative;margin:0;width:100%;aspect-ratio:16/9;max-height:760px;overflow:hidden;border-radius:28px;background:#242a29}
.project-showcase-feature>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.work-project[data-project=mayson] .project-showcase-feature>img{object-position:center 32%}
.project-showcase-carousel{margin-top:30px;min-width:0}
.project-showcase-stage{position:relative;width:100%;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;min-height:690px}
.project-showcase-stage.is-dragging{cursor:grabbing}
.project-showcase-stage:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:22px}
.project-showcase-card{position:absolute;left:50%;top:16px;width:clamp(240px,24vw,340px);margin:0;overflow:hidden;border-radius:24px;background:#f9f9f5;box-shadow:0 18px 30px -28px #1f1f2545;will-change:transform,opacity}
.project-showcase-picture{position:relative;aspect-ratio:9/16;overflow:hidden;background:color-mix(in srgb,var(--project-accent) 20%,#18201f)}
.project-showcase-picture>img,.project-showcase-picture>video,.project-showcase-picture>iframe,.project-showcase-film{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;margin:0;padding:0}
.project-showcase-picture>img,.project-showcase-film>img{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;-webkit-user-drag:none}
.project-showcase-picture>video{object-fit:cover;background:#101414}
.project-showcase-picture>iframe{background:#101414}
.project-showcase-picture [hidden]{display:none!important}
.project-showcase-film{cursor:pointer;background:none;color:#fff}
.project-sample-play,.project-sample-play-icon{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:62px;height:62px;border:1px solid #ffffffbd;border-radius:50%;background:#14201f75;backdrop-filter:blur(14px);color:#fff;transition:scale .25s,background .25s}
.project-sample-play{cursor:pointer;z-index:2;padding:0}
.project-sample-play svg,.project-sample-play-icon svg{width:25px;height:25px;margin-left:3px}
.project-sample-play:hover,.project-showcase-film:hover .project-sample-play-icon{scale:1.08;background:#14201fa8}
.project-sample-play:focus-visible,.project-showcase-film:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.project-sample-badge{position:absolute;z-index:1;left:16px;top:16px;padding:8px 11px;border:1px solid #fff7;border-radius:100px;background:#111b1b65;backdrop-filter:blur(12px);color:#fff;font:500 10px/1 var(--sans);letter-spacing:.12em;pointer-events:none}
.project-showcase-picture:has(video:not([hidden])) .project-sample-badge,.project-showcase-picture:has(iframe) .project-sample-badge{display:none}
.project-showcase-copy{padding:19px 22px 23px;min-height:92px}
.project-showcase-copy>span{font:400 9px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#000}
.project-showcase-copy h4{font:400 20px/1.2 var(--sans);letter-spacing:-.025em;margin:8px 0 0;color:#000}
.project-showcase-controls{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:12px}
.project-showcase-controls button{display:grid;place-items:center;width:52px;height:52px;border:1px solid #25252520;border-radius:50%;background:#ffffff9c;color:#000;touch-action:manipulation;transition:scale .25s,background .25s}
.project-showcase-controls button:hover{scale:1.08;background:#fff}
.project-showcase-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.project-showcase-controls svg{width:21px;height:21px}
.project-showcase-controls [data-showcase-count]{min-width:70px;text-align:center;font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.13em}
@media(max-width:700px){
 .project-showcase-card{width:min(72vw,330px)}
}
@media(max-width:600px){
 .project-showcase-feature{aspect-ratio:4/3;border-radius:20px}
 .project-showcase-feature>img{object-position:60% center}
 .project-showcase-carousel{margin-top:20px}
 .project-showcase-stage{min-height:590px;width:calc(100% + 32px);margin-inline:-16px}
 .project-showcase-card{border-radius:21px}
 .project-showcase-copy{padding:17px 19px 20px;min-height:84px}
 .project-showcase-copy h4{font-size:19px}
 .project-showcase-controls{gap:10px;margin-top:8px}
 .project-showcase-controls button{width:44px;height:44px}
 .project-sample-play,.project-sample-play-icon{width:55px;height:55px}
}
@media(prefers-reduced-motion:reduce){.project-sample-play,.project-sample-play-icon,.project-showcase-controls button{transition:none}}


/* Keep Mayson as a playable widescreen film within the original layout. */
.project-showcase-feature[data-project-feature]{aspect-ratio:16/9;max-height:none}
.project-showcase-feature>video{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;margin:0;padding:0;object-fit:cover;object-position:center 32%;background:#101414}
.project-feature-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:12px;padding:16px 23px;border:1px solid #ffffffa6;border-radius:var(--ag-pill-radius);color:#fff;background:#14201f85;backdrop-filter:blur(14px);font:500 14px/1.2 var(--sans);cursor:pointer}
.project-feature-play svg{width:22px;height:22px}
.project-feature-play:hover{background:#14201fc4}
.project-feature-play:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.project-showcase-feature [hidden]{display:none!important}
.project-showcase-feature .work-video-controls{top:24px;bottom:auto}
@media(max-width:600px){.project-showcase-feature .work-video-controls{top:12px}}

/* Card depth belongs to its carousel, below the fixed All projects control. */
.project-showcase-stage{isolation:isolate}

/* Use the complete supplied Mayson campaign artwork in the wide banner pill. */
.work-project[data-project=mayson] .project-showcase-feature{aspect-ratio:1920/1110;max-height:none}
.work-project[data-project=mayson] .project-showcase-feature>img{object-position:center}

/* Mayson media cards are widescreen; other project galleries remain portrait. */
.work-project[data-project=mayson] .project-showcase-card{width:clamp(300px,46vw,620px)}
.work-project[data-project=mayson] .project-showcase-picture{aspect-ratio:16/9}
.work-project[data-project=mayson] .project-showcase-stage{min-height:0}
.work-project[data-project=mayson] .project-showcase-picture>video{object-fit:contain}
@media(max-width:700px){.work-project[data-project=mayson] .project-showcase-card{width:min(84vw,520px)}}

/* V172: uninterrupted media cards, with category labels remaining over the artwork. */
.work-project .project-showcase-card>.project-showcase-copy{display:none!important}
.work-project .project-showcase-picture{border-radius:inherit}
.work-project .project-showcase-stage{min-height:0}