/* Projects: one image led introduction and five principles in a spatial carousel. */
.work-approach{display:block;min-width:0;margin-top:var(--ag-section-space)}
.work-approach-feature{position:relative;min-height:clamp(480px,calc(45vw - 40px),650px);overflow:hidden;isolation:isolate;border-radius:28px;background:#171b1b;color:#fff}
.work-approach-feature-art{position:absolute;inset:0 0 0 40%;z-index:-2;mask-image:linear-gradient(90deg,transparent,#000 16%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%)}
.work-approach-feature-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.work-approach-feature-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,22,23,0.79059) 0%,rgba(16,22,23,0.59294) 24%,rgba(16,22,23,0.29647) 40%,rgba(16,22,23,0.08471) 54%,transparent 66%),linear-gradient(0deg,rgba(16,22,23,0.3) 0%,rgba(16,22,23,0.08471) 22%,transparent 40%)}
.work-approach-feature-copy{position:relative;display:flex;min-height:inherit;flex-direction:column;justify-content:center;align-items:flex-start;width:min(59%,710px);padding:clamp(38px,5.3vw,82px)}
.work-approach-feature .eyebrow{color:#fff}
.work-approach-feature h2{font:400 clamp(54px,5.6vw,90px)/.97 var(--display);letter-spacing:-.02em;color:#fff;margin:24px 0 27px;text-wrap:balance}
.work-approach-feature h2 em{font-weight:400}
.work-approach-feature p{font:400 clamp(15px,1.2vw,18px)/1.7 var(--sans);color:#fff;max-width:590px;margin:0}
.work-pillars-carousel{margin-top:clamp(28px,3.4vw,48px);min-width:0}
.work-pillars-stage{position:relative;min-height:0;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.work-pillars-stage.is-dragging{cursor:grabbing}
.work-pillars-stage:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:20px}
.work-pillar-card{position:absolute;left:50%;top:16px;width:clamp(340px,31vw,490px);overflow:hidden;border-radius:23px;background:#f5f5f1;box-shadow:0 18px 30px -28px #1f1f2545;will-change:transform,opacity;user-select:none;-webkit-user-select:none}
.work-pillar-image{position:relative;aspect-ratio:1.16;overflow:hidden;background:#2a302e}
.work-pillar-image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;-webkit-user-drag:none}
.work-pillar-card:nth-child(2) .work-pillar-image img{object-position:center 44%}
.work-pillar-card:nth-child(3) .work-pillar-image img{object-position:center 32%}
.work-pillar-card:nth-child(4) .work-pillar-image img{object-position:center 35%}
.work-pillar-card:nth-child(5) .work-pillar-image img{object-position:center 42%}
.work-pillar-copy{min-height:278px;padding:25px 27px 30px;user-select:text;-webkit-user-select:text}
.work-pillar-copy h3{font:400 clamp(30px,2.3vw,40px)/1.1 var(--display);letter-spacing:-0.015em;color:#000;margin:0 0 15px}
.work-pillar-copy p{font:400 15px/1.7 var(--sans);color:#000;margin:0;max-width:none}
.work-pillars-controls{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:12px}
.work-pillars-controls button{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1px solid #25252520;background:#ffffff9c;color:#000;touch-action:manipulation;transition:transform .25s,background .25s}
.work-pillars-controls button:hover{transform:scale(1.08);background:#fff}
.work-pillars-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.work-pillars-controls svg{width:21px;height:21px}
.work-pillars-count{font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.13em;min-width:70px;text-align:center}
@media(max-width:900px){
  .work-approach-feature{min-height:560px}
  .work-approach-feature-art{inset:0 0 0 30%}
  .work-approach-feature-copy{width:min(70%,660px)}
  .work-approach-feature h2{font-size:clamp(52px,7vw,70px)}
}
@media(max-width:600px){
  .work-approach{margin-top:68px}
  .work-approach-feature{min-height:610px;border-radius:22px}
  .work-approach-feature-art{inset:290px 0 0;mask-image:linear-gradient(180deg,transparent,#000 18%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%)}
  .work-approach-feature-art img{object-position:50% 30%}
  .work-approach-feature-shade{background:linear-gradient(180deg,rgba(16,22,23,0.76588) 0%,rgba(16,22,23,0.63882) 24%,rgba(16,22,23,0.40588) 44%,rgba(16,22,23,0.15882) 60%,transparent 76%)}
  .work-approach-feature-copy{width:100%;min-height:0;justify-content:flex-start;padding:32px 26px 0}
  .work-approach-feature h2{font-size:clamp(45px,12vw,58px);line-height:1.015;margin:16px 0 18px}
  .work-approach-feature p{font-size:14px;line-height:1.55}
  .work-pillars-carousel{margin-top:25px}
  .work-pillar-card{width:80vw;border-radius:20px}
  .work-pillar-copy{min-height:300px;padding:23px 22px 27px}
  .work-pillar-copy h3{font-size:31px}
  .work-pillar-copy p{font-size:14px;line-height:1.65}
  .work-pillars-controls{gap:10px;margin-top:12px}
  .work-pillars-controls button{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){.work-pillars-controls button{transition:none}}

/* Let the carousel run edge to edge while the feature stays aligned with other content. */
.work-approach.section-shell{width:100%;max-width:none;overflow:hidden;margin-inline:0}
.work-approach-feature{width:calc(100% - var(--gutter)*2);max-width:1552px;margin-inline:auto}
.work-pillars-carousel,.work-pillars-stage{width:100%;max-width:none}
.work-pillars-controls{width:var(--ag-team-shell,calc(100% - 6.4%));max-width:1600px;margin-inline:auto}
@media(max-width:700px){.work-pillar-card{width:80vw}}


/* Keep the opening film, accountability banner and principles visually grouped. */
body[data-page="work"] .work-cinema+.work-approach{margin-top:calc(32px - var(--work-cinema-tail))}
.work-pillars-carousel{margin-top:8px}
@media(max-width:600px){body[data-page="work"] .work-cinema+.work-approach{margin-top:calc(24px - var(--work-cinema-tail))}.work-pillars-carousel{margin-top:4px}}

/* Match the Mayson-to-CTA gap on both sides of the principles carousel. */
body[data-page="work"]{--work-carousel-section-gap:88px}
body[data-page="work"] .work-pillars-carousel{margin-top:calc(var(--work-carousel-section-gap) - 16px)}
body[data-page="work"] .work-approach+.work-collection{margin-top:var(--work-carousel-section-gap)}
/* Retain the collection heading for its accessible section label without a spare visual row. */
body[data-page="work"] .work-collection-heading.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){body[data-page="work"]{--work-carousel-section-gap:48px}}