/* ============================================================
   LUMA Integration — theme bridge
   The design prototype used a custom <image-slot> element (a drag/drop
   preview component powered by image-slot.js). In production those become
   plain <img class="media ri-slot"> tags fed from JetEngine media fields.
   These rules give each <img> the exact box its <image-slot> occupied,
   so the rendered result is pixel-identical to the prototype.
   Load this AFTER luma-site.css and the page stylesheets.
   ============================================================ */

/* Service pages ------------------------------------------------ */
.svc-why-media .media{
  width:100%;height:clamp(360px,46vw,580px);border-radius:var(--r);
  overflow:hidden;display:block;object-fit:cover;}
.svc-process-media .media{
  width:100%;height:clamp(380px,46vw,580px);border-radius:var(--r);
  overflow:hidden;display:block;object-fit:cover;}
.svc-other .media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);}
.svc-other:hover .media{transform:scale(1.06);}

/* About page --------------------------------------------------- */
.ab-portrait .media{
  display:block;width:100%;height:clamp(380px,46vw,560px);object-fit:cover;}

/* The .ab-feature / .arch-feature / .svc-feat-img boxes already have
   matching `.media` rules in their own stylesheets, so nothing to add. */