/* =====================================================================
   HighPur Water Express — brand imagery treatment
   Unified cool grade · edge-feather · telemetry framing · mono captions
   Images are treated as REPRESENTATIVE brand imagery, not literal proof.
   ===================================================================== */

/* ---- shared figure component ---------------------------------------- */
.imgfig{
  position:relative; overflow:hidden; border-radius:20px;
  border:1px solid var(--glass-line);
  background:var(--abyss-2);
  box-shadow:0 30px 70px rgba(2,12,18,.5), inset 0 1px 0 rgba(127,246,234,.08);
}
.imgfig img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* unified cool grade — locks every photo to the site palette */
  filter:saturate(.8) contrast(1.07) brightness(.9);
  transition:transform 1.2s var(--ease), filter .6s ease;
}
.imgfig:hover img{ transform:scale(1.045); filter:saturate(.94) contrast(1.08) brightness(1.0); }

/* navy/cyan wash + bottom scrim for caption legibility */
.imgfig::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,34,44,.18) 0%, transparent 26%, transparent 52%, rgba(4,20,28,.86) 100%),
    radial-gradient(120% 80% at 80% 0%, rgba(39,211,245,.12), transparent 55%);
}
/* faint hex/scanline texture tying photos to the data-room motif */
.imgfig::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}

/* telemetry corner-ticks */
.imgfig__tick{ position:absolute; z-index:3; width:13px; height:13px; border:1px solid var(--glass-line-2); pointer-events:none; }
.imgfig__tick--tl{ left:12px; top:12px; border-right:0; border-bottom:0; }
.imgfig__tick--tr{ right:12px; top:12px; border-left:0; border-bottom:0; }
.imgfig__tick--bl{ left:12px; bottom:12px; border-right:0; border-top:0; }
.imgfig__tick--br{ right:12px; bottom:12px; border-left:0; border-top:0; }

/* mono spec caption */
.imgfig__cap{
  position:absolute; left:18px; right:18px; bottom:15px; z-index:3;
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mist);
}
.imgfig__cap::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--aqua); box-shadow:0 0 9px var(--aqua);
}
.imgfig__cap em{ font-style:normal; color:var(--mist-dim); letter-spacing:.1em; }

/* ---- band variant: full-width feature strip ------------------------- */
.imgfig--band{
  width:min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin:0 auto 48px;
  height:clamp(240px, 32vw, 400px);
}

/* ---- hero composite backdrop ---------------------------------------- */
.hero-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-photo img{
  position:absolute; top:0; right:0; height:100%; width:72%;
  object-fit:cover; object-position:center right;
  filter:saturate(.78) contrast(1.05) brightness(.82);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 24%, #000 60%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 24%, #000 60%);
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--abyss) 6%, rgba(4,20,28,.4) 34%, transparent 60%),
    linear-gradient(180deg, rgba(4,20,28,.55) 0%, transparent 24%, transparent 58%, var(--abyss) 100%);
}
/* keep hero content above the photo */
.hero-inner{ position:relative; z-index:2; }
.hero-hud, .scroll-cue{ z-index:2; }

/* ---- section background imagery (atmospheric, behind content) -------- */
.section-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.section-bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.26; filter:saturate(.65) contrast(1.05) brightness(.7);
  -webkit-mask-image:radial-gradient(130% 100% at 60% 45%, #000 28%, transparent 82%);
          mask-image:radial-gradient(130% 100% at 60% 45%, #000 28%, transparent 82%);
}
.section-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--abyss) 0%, transparent 26%, transparent 72%, var(--abyss) 100%);
}
.compare .section-head, .compare .ba{ position:relative; z-index:1; }

/* ---- product cooler figure ------------------------------------------ */
.product-media .imgfig{ min-height:360px; }
.product-media .imgfig img{ object-position:right center; }

/* ---- showcase: three real-work figures ------------------------------ */
.showcase-grid{ grid-template-columns:repeat(3,1fr) !important; grid-template-rows:auto !important; }
.showcase-grid .imgfig{ min-height:300px; }
.showcase-note{
  max-width:var(--maxw); margin:22px auto 0; padding:0 var(--pad);
  text-align:center; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mist-dim);
}

@media (max-width:1024px){
  .showcase-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:920px){
  .hero-photo img{
    width:100%; opacity:.55; filter:saturate(.7) contrast(1.04) brightness(.6);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 30%, #000 70%);
            mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 30%, #000 70%);
  }
  .hero-photo::after{
    background:linear-gradient(180deg, var(--abyss) 4%, rgba(4,20,28,.55) 30%, rgba(4,20,28,.78) 100%);
  }
}
@media (max-width:560px){
  .showcase-grid{ grid-template-columns:1fr !important; }
  .imgfig--band{ height:clamp(200px,52vw,300px); }
}