/* NewClientEngine — photo utilities.
 * Implements the shared classes from NCE_Cursor_Photo_Placement_Instruction.md.
 * Loaded after nce-nav.css on the pages that use photos (index, how-it-works,
 * who-we-help, about, free-report). Every image carries explicit intrinsic
 * width/height plus an aspect-ratio box so nothing shifts layout (CLS), and
 * everything below the first screen is lazy-loaded. A plum -> teal wash unifies
 * photos from different sources so they read as one brand family. */

.nce-photo{position:relative;overflow:hidden;border-radius:14px;background:#F4ECE0;border:1px solid rgba(42,19,64,.10)}
.nce-photo img{display:block;width:100%;height:100%;object-fit:cover}
.nce-photo.has-wash::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(42,19,64,.34) 0%,rgba(42,19,64,.08) 58%,rgba(15,184,177,.12) 100%)}

/* Two-photo proof row (homepage) */
.nce-photo-row{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:34px}
.nce-photo-row .nce-photo{aspect-ratio:3/2}
.home-photo-proof{margin:14px 0 4px}

/* Text + image split (how-it-works process, free-report hero) */
.nce-media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);gap:42px;align-items:center}
.nce-media-split .nce-photo{aspect-ratio:3/2}

/* Industry-card photo (who-we-help) */
.nce-card-photo{aspect-ratio:4/3;margin:-2px -2px 18px;border-radius:10px 10px 6px 6px}

/* Portrait + credibility cards (about) */
.nce-portrait-photo{aspect-ratio:4/5}
.about-proof{display:grid;gap:18px}
.about-proof .credi{margin-top:0}

@media(max-width:880px){
  .nce-photo-row,
  .nce-media-split{grid-template-columns:1fr}
}