/* My Custom Stickers people photos (5 Nov 2026). Real photos framed as die-cut photo stickers: ink outline, white cut,
   peel shadow. No text ever sits on a photo. Loaded after mcs.css / mcs-home.css (nx-mcs-people.php). */
.mc-ppl{margin:0;position:relative;overflow:hidden;background:var(--mc-mat-2,#cfe4d1)}
.mc-ppl-img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.mc-ppl-img{transition:transform .5s ease}a:hover .mc-ppl-img,.mc-use:hover .mc-ppl-img{transform:scale(1.035)}}

/* home: "Stickers for every job" cards get a photo header */
.mc-use .mc-ppl--use{margin:-22px -20px 16px -5px!important;aspect-ratio:16/9;border-bottom:3px solid var(--mc-ink);border-radius:0 22px 0 0}
.mc-use .mc-ppl--use::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -40px 40px -30px rgba(21,23,28,.18);pointer-events:none}

/* home: trade band */
.mc-trades .mc-ppl--trades .mc-ppl-img{object-position:72% 40%}
@media (max-width:759px){.mc-trades-in.has-ppl::after{width:110px;height:110px;right:-52px;top:-52px}.mc-trades-in.has-ppl .mc-sec-h h2{padding-right:34px}}
.mc-trades .mc-ppl--trades{aspect-ratio:2/1;border-radius:18px;box-shadow:0 0 0 3px #fff,0 10px 24px rgba(0,0,0,.35);margin:0 0 22px;z-index:1}
@media (min-width:1100px){
  .mc-trades-in.has-ppl{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:40px;align-items:center}
  .mc-trades-in.has-ppl>.mc-sec-h{grid-column:1;grid-row:1;margin-bottom:0}
  .mc-trades-in.has-ppl>.mc-ppl--trades{grid-column:2;grid-row:1;aspect-ratio:4/3;margin:6px 6px 26px 0;transform:rotate(2deg)}
  .mc-trades-in.has-ppl>.mc-trade-list{grid-column:1/-1;grid-row:2}
}

/* home: quote band */
.mc-cta .mc-ppl--cta{aspect-ratio:16/9;max-width:440px;margin:0 auto 20px;border:3px solid var(--mc-ink);border-radius:18px;box-shadow:0 0 0 5px #fff;transform:rotate(1.2deg)}
@media (min-width:900px){
  .mc-cta-in.has-ppl{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:40px;align-items:center;padding:34px 40px}
  .mc-cta-in.has-ppl{grid-template-rows:1fr auto auto auto 1fr}
  .mc-cta-in.has-ppl>*:not(.mc-ppl){grid-column:2}
  .mc-cta-in.has-ppl>h2{grid-row:2}.mc-cta-in.has-ppl>p{grid-row:3}.mc-cta-in.has-ppl>.mc-hero-ctas{grid-row:4;margin-top:20px}
  .mc-cta-in.has-ppl>.mc-ppl--cta{grid-column:1;grid-row:1/-1;aspect-ratio:4/3;width:100%;margin:0;transform:rotate(-2deg)}
}

/* category head: photo sticker beside the product sticker (wide screens only, so phones keep their text-first head) */
.mc-ppl--cat{display:none}
@media (min-width:1100px){
  .mc-site .fp-cathead-in.has-ppl.has-ppl{grid-template-columns:minmax(0,1fr) 380px;column-gap:36px}
  .mc-site .fp-cathead-in.has-ppl>.fp-cathead-txt{grid-column:1;grid-row:1}
  .mc-site .fp-cathead-in.has-ppl>.mc-ppl--cat{display:block;grid-column:2;grid-row:1;align-self:center;aspect-ratio:4/3;margin:26px 8px 26px 0;border-radius:20px;box-shadow:var(--mc-stk);transform:rotate(2deg);z-index:1}
  .mc-site .fp-cathead-in.has-ppl>.mc-catart{grid-column:2;grid-row:1;justify-self:start;align-self:end;padding:0 0 10px;margin-left:-34px;z-index:2}
  .mc-site .fp-cathead-in.has-ppl>.mc-catart img{width:128px;height:128px}
  .mc-site .fp-cathead-in.has-ppl>.mc-catart::after{left:96px;bottom:14px;white-space:nowrap}
}

/* category: "Stuck? Ask a person." card */
.mc-site .fp-askcard .mc-ppl--ask{order:-2;flex:none;width:auto;aspect-ratio:16/9;margin:-26px -26px 6px;border-bottom:3px solid var(--mc-ink)}
.mc-site .fp-cat-end .fp-askcard .mc-ppl--ask{flex:0 0 auto;width:calc(100% + 52px);max-width:none}
@media (min-width:600px){
  .mc-site .fp-askcard:has(.mc-ppl--ask){display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,1fr);grid-auto-rows:auto;column-gap:16px;row-gap:10px;align-items:center;align-content:center}
  .mc-site .fp-askcard:has(.mc-ppl--ask)>.mc-ppl--ask{grid-column:1;grid-row:1/span 3;width:100%;margin:0;aspect-ratio:4/3;border:3px solid var(--mc-ink);border-radius:16px;align-self:center}
  .mc-site .fp-askcard:has(.mc-ppl--ask)>:is(h2,p){grid-column:2/-1;margin:0;flex-basis:auto!important}
  .mc-site .fp-askcard:has(.mc-ppl--ask)>a{grid-row:3;width:100%;margin:0}
  .mc-site .fp-askcard:has(.mc-ppl--ask)>a:only-of-type{grid-column:2/-1;width:auto;justify-self:start}
}

/* help / company pages: photo sticker on the right of the head card, a slim strip under the text on phones */
.mc-site .fp-arthead-in.has-ppl>.mc-ppl--help{aspect-ratio:16/7;max-height:170px;width:100%;margin:18px 0 0;border:3px solid var(--mc-ink);border-radius:16px}
@media (min-width:1001px){
  .mc-site .fp-arthead-in.has-ppl{position:relative;min-height:330px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .mc-site .fp-arthead-in.has-ppl>*:not(.mc-ppl){max-width:calc(100% - min(34%,400px) - 56px)!important}
  .mc-site .fp-arthead-in.has-ppl>.mc-ppl--help{position:absolute;right:34px;top:50%;width:min(34%,400px);max-height:none;aspect-ratio:4/3;margin:0;border:0;border-radius:20px;box-shadow:var(--mc-stk);transform:translateY(-50%) rotate(2.2deg)}
}

/* blog index head */
.mc-ppl--blog{display:none}
@media (min-width:1001px){
  .mc-pagehead .mc-wrap.has-ppl{position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .mc-pagehead .mc-wrap.has-ppl>*:not(.mc-ppl){max-width:calc(100% - 460px)}
  .mc-pagehead .mc-wrap.has-ppl>.mc-ppl--blog{display:block;position:absolute;right:calc(var(--mc-g) + 12px);top:50%;width:400px;aspect-ratio:4/3;border-radius:20px;box-shadow:var(--mc-stk);transform:translateY(-50%) rotate(-2deg)}
}

/* empty basket */
.mc-site .fp-emptycart-ph{min-width:0}
.mc-site .fp-emptycart-ph .mc-ppl{aspect-ratio:4/3;border:3px solid var(--mc-ink);border-radius:18px;box-shadow:0 0 0 5px #fff,0 8px 18px rgba(21,23,28,.16);transform:rotate(-2deg)}
@media (max-width:759px){.mc-site .fp-emptycart-ph .mc-ppl{aspect-ratio:16/8;transform:none}}

/* 404 */
.mc-404 .mc-ppl--404{aspect-ratio:16/8;border:3px solid var(--mc-ink);border-radius:18px}
@media (min-width:900px){
  .mc-404-in.has-ppl{grid-template-columns:auto minmax(0,1fr) minmax(0,320px)}
  .mc-404-in.has-ppl>*:not(.mc-404-peel):not(.mc-ppl){grid-column:2}
  .mc-404-in.has-ppl>.mc-404-peel{grid-column:1;grid-row:1/span 4}
  .mc-404-in.has-ppl>.mc-ppl--404{grid-column:3;grid-row:1/span 6;align-self:center;aspect-ratio:4/5;border:0;border-radius:20px;box-shadow:var(--mc-stk);transform:rotate(2.5deg)}
}
@media (min-width:1500px){.mc-site .fp-cathead-in.has-ppl.has-ppl{grid-template-columns:minmax(0,1fr) 460px}}