/* Additions for the case study pages built in the v3 website (28 Oct 2026): Pallet Pickups and the print shop.
   Loaded after styles.css and case.css. Only adds; it changes nothing the other case study pages use. */

/* Placeholders waiting on Parikshit. Loud on purpose so none slip into a deploy. */
.ph{display:inline-block;padding:6px 10px;border-radius:10px;border:1.5px dashed #E08A00;background:repeating-linear-gradient(135deg,#FFF8EC 0 10px,#FFF2DB 10px 20px);color:#8A4B00;font-family:var(--body);font-size:14px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none}
.ph::before{content:"Placeholder · ";font-weight:800}
.ph--dark{border-color:#F5A23B;background:repeating-linear-gradient(135deg,#2A1D0E 0 10px,#33230F 10px 20px);color:#FFC77A}

/* Initial badge for a client with no photo on file. */
.csx-by__badge{width:56px;height:56px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--orange);color:var(--black);font-family:var(--head);font-weight:700;font-size:22px}

/* Where to crop the new photos (the hero is cut to 21:9, stories to 2:1). */
.csx-hero__img img[src*="pallet-1-hero"]{object-position:50% 10%}
.csx-hero__img img[src*="print-1-hero"]{object-position:50% 22%}
.csx-story__img img[src*="pallet-2-phone"]{object-position:50% 60%}
.csx-story__img img[src*="pallet-3-forklift"]{object-position:50% 55%}
.csx-story__img img[src*="print-3-embroidery"]{object-position:50% 72%}
.csx-story__img img[src*="print-4-boxes"]{object-position:50% 45%}
@media (max-width:640px){
  .csx-hero__img img[src*="pallet-1-hero"]{object-position:30% 20%}
  .csx-hero__img img[src*="print-1-hero"]{object-position:22% 30%}
}