/* Photos on the public site — placed by scripts/apply-media.js from assets/media-manifest.json.
   Every rule here only styles elements that script (or the appliance grid) adds, so removing
   the photos from the manifest leaves the pages exactly as they were before. */
:root{--hero-scrim-strong:rgba(20,11,29,.94);--hero-scrim-soft:rgba(20,11,29,.50);}
[data-theme="light"]{--hero-scrim-strong:rgba(251,248,252,.96);--hero-scrim-soft:rgba(251,248,252,.55);}

/* ── homepage hero: full-bleed photo (or looping video) behind the headline and the tracker card ── */
#top{overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--bg-2);}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100% !important;max-width:none !important;object-fit:cover;object-position:75% 45%;}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--hero-scrim-strong) 0%,var(--hero-scrim-strong) 34%,var(--hero-scrim-soft) 72%,var(--hero-scrim-soft) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 22%);}
.hero-media img{animation:heroZoom 22s ease-out both;}
@keyframes heroZoom{from{transform:scale(1.08);}to{transform:scale(1);}}
@media (max-width:900px){
  .hero-media img,.hero-media video{object-position:center 35%;}
  .hero-media::after{background:linear-gradient(180deg,var(--hero-scrim-soft) 0%,var(--hero-scrim-strong) 45%,var(--hero-scrim-strong) 100%);}
}
@media (prefers-reduced-motion: reduce){.hero-media video{display:none;}.hero-media img{animation:none;}}

/* ── photo band on top of homepage cards ── */
.card-photo{display:block;margin:-28px -26px 18px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--bg-3);}
.card-photo.work{margin:-26px -24px 16px;aspect-ratio:8/5;}
.card-photo img{display:block;width:100%;height:100% !important;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.card-hover:hover .card-photo img,.solution-card:hover .card-photo img{transform:scale(1.05);}
.solution-card .card-photo + .ic-badge,.card-photo.work + .ic-badge{position:relative;margin-top:-44px;background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}

/* ── appliance grid tiles (assets/pages/index-54a366.js adds .tile-photo when assets/media.js has one) ── */
.appliance-tile{overflow:hidden;}
.appliance-tile .tile-photo{display:block;margin:-22px -18px 0;aspect-ratio:8/5;overflow:hidden;background:var(--bg-3);}
.appliance-tile .tile-photo img{display:block;width:100%;height:100% !important;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.appliance-tile:hover .tile-photo img{transform:scale(1.06);}
.appliance-tile .tile-photo + .ic{position:relative;margin-top:-20px;background:var(--surface);border:1px solid var(--border);animation:none;}

/* ── service / solution page hero photo ── */
.page-hero-photo{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--border);background:var(--bg-3);box-shadow:var(--shadow-glow);}
.page-hero-photo img{display:block;width:100%;height:100% !important;object-fit:cover;}
/* the "Typical response time" card floats over the bottom of the photo */
.page-hero-photo + .card.tilt-3d{position:relative;margin:-72px 22px 0;padding:20px 22px !important;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);}
.page-hero-photo + .card.tilt-3d > div[style*="width:64px"]{display:none !important;} /* its icon — the photo replaces it */
/* on solution pages the photo replaces the drawing */
.page-hero-photo.replace + .card{display:none;}

/* ── photo credits: one quiet line/list at the bottom of the page, never on the photos ── */
.photo-credits{padding-top:0 !important;padding-bottom:28px !important;font-size:12px;color:var(--text-faint);}
.photo-credits summary{cursor:pointer;width:max-content;}
.photo-credits ul{margin:12px 0 0;padding-left:18px;columns:2;column-gap:36px;line-height:1.8;}
.photo-credits p{margin:0;}
.photo-credits a{color:var(--text-dim);text-decoration:underline;}
@media (max-width:900px){.photo-credits ul{columns:1;}}

/* ── /media-review.html ── */
.mr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.mr-cell{margin:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.mr-cell img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--bg-3);}
.mr-cell figcaption{padding:10px 12px 12px;font-size:12px;line-height:1.55;color:var(--text-dim);}
.mr-cell figcaption b{color:var(--text);}
.mr-cell a{color:inherit;}

/* ── card photos on service / solution / area pages ── */
.card-photo.pc,.card-photo.inc{margin:-26px -26px 18px;aspect-ratio:16/9;}
.problem-card{overflow:hidden;}
.card-photo.pc + .ic-badge,.card-photo.inc + .ic-badge{position:relative;margin-top:-44px;background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}
.problem-card:hover .card-photo img{transform:scale(1.05);}
.related-card{overflow:hidden;}
.related-card .rc-photo{display:block;margin:-18px -18px 0;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3);}
.related-card .rc-photo img{display:block;width:100%;height:100% !important;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.related-card:hover .rc-photo img{transform:scale(1.06);}
.related-card .rc-photo + .ic-badge{position:relative;margin-top:-22px;background:var(--surface);border:1px solid var(--border);}
.area-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--bg-3);}
.area-thumb img{display:block;width:100%;height:100% !important;object-fit:cover;}
.area-thumb + span{display:none;} /* the emoji — the photo replaces it */
.card-photo.pc + .ic-badge,.card-photo.inc + .ic-badge,.related-card .rc-photo + .ic-badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.related-card .rc-photo + .ic-badge{width:38px;height:38px;border-radius:10px;}
/* area pages: the hero grid's right cell is the checklist card itself — stack photo above it in column 2 */
.page-hero-photo.area{grid-column:2;grid-row:1;}
.page-hero-photo.area + .card{grid-column:2;grid-row:2;}
div:has(> .page-hero-photo.area) > div:first-child{grid-row:1 / span 2;}
@media (max-width:900px){
  .page-hero-photo.area,.page-hero-photo.area + .card,div:has(> .page-hero-photo.area) > div:first-child{grid-column:auto;grid-row:auto;}
}