/* Template additions on top of the design-system layer (site.css): placeholder slots for product
   visuals. Replace each .ph-media block with an <img> or <video> when you have the asset. */
.ph-media{ position:relative; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center;
  width:100%; aspect-ratio:16/9; padding:clamp(20px,4vw,48px); border-radius:var(--r-5);
  background:linear-gradient(135deg, var(--wash-lilac), var(--wash-peri) 55%, var(--wash-pink)); color:var(--ink-900); }
.ph-media b{ font-weight:500; font-size:clamp(16px,1.8vw,22px); letter-spacing:-.01em; }
.ph-media span{ font-size:14px; color:var(--slate-600); max-width:38em; }
.seq-frame .ph-media{ border-radius:inherit; height:100%; aspect-ratio:auto; min-height:320px; }
.svc-photo .ph-media{ aspect-ratio:16/9; }