/* ===== Formenzo unified premium image treatment (navy #16213A / gold #C9A24A) =====
   Add class "fz-img" to any element that carries a photo (an <img> wrapper OR a
   background-image div). One layer makes every mixed photo read as one luxe family. */

.fz-img{position:relative;overflow:hidden;border-radius:inherit;isolation:isolate;background:#16213A}

/* A) real <img> children — duotone tune */
.fz-img>img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.78) contrast(1.06) brightness(.92) sepia(.14) hue-rotate(-10deg);
  transform:scale(1.001);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s}

/* B) navy scrim + gold glow — anchors ANY photo into the family.
      backdrop-filter also tunes background-image divs that have no <img>. */
.fz-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,33,58,.20) 0%,rgba(22,33,58,.04) 40%,rgba(22,33,58,.66) 100%),
             radial-gradient(120% 90% at 85% 0%,rgba(201,162,74,.16),transparent 55%);
  mix-blend-mode:multiply;
  backdrop-filter:saturate(.78) contrast(1.06) brightness(.94) sepia(.12);
  transition:background .4s}

/* C) hairline gold edge + gold base rule — the premium signature */
.fz-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(201,162,74,.32),inset 0 -2px 0 rgba(201,162,74,.55)}

/* D) hover: photo breathes, scrim lifts, color warms toward true */
.card:hover .fz-img>img,a:hover .fz-img>img,.fz-img:hover>img{
  transform:scale(1.045);
  filter:saturate(.95) contrast(1.08) brightness(.98) sepia(.08) hue-rotate(-10deg)}
.card:hover .fz-img::before,a:hover .fz-img::before,.fz-img:hover::before{
  background:linear-gradient(180deg,rgba(22,33,58,.10) 0%,rgba(22,33,58,.02) 40%,rgba(22,33,58,.55) 100%),
             radial-gradient(120% 90% at 85% 0%,rgba(201,162,74,.20),transparent 55%)}

/* E) anything ON the photo (badges, names, chips) sits above the scrim, readable */
.fz-img .on-photo,.fz-img>*:not(img){position:relative;z-index:3}
.fz-img .on-photo{text-shadow:0 1px 8px rgba(12,23,48,.55)}

/* F) inline <img> cards that can't take a wrapper (guide cards) — tone only */
.guide img{filter:saturate(.8) contrast(1.05) sepia(.12) hue-rotate(-8deg);transition:filter .5s}
.guide:hover img{filter:saturate(.95) contrast(1.07) sepia(.06) hue-rotate(-8deg)}

@media (prefers-reduced-motion:reduce){
  .fz-img>img{transition:none}
  .card:hover .fz-img>img,a:hover .fz-img>img,.fz-img:hover>img{transform:none}
}