/* =========================================================
   Image system: proportional (aspect-ratio) sizing instead of
   fixed heights, so photos crop the same way on every screen.
   Loaded last — overrides earlier fixed heights.
   ========================================================= */
img{image-rendering:auto}

/* ---------- consistent proportions ---------- */
.prob-img{height:auto;aspect-ratio:16/9}
.why-img{height:auto;aspect-ratio:16/10}
.case .media{height:auto;aspect-ratio:16/10}
.case .media img{height:118%}
.gal{height:auto;aspect-ratio:3/4}
.gal.gal-lg{height:auto;aspect-ratio:4/5}
.gal-track{align-items:stretch}
.gal-track > .gal{width:clamp(240px,24vw,320px)}
.gal-track > .gal.gal-lg{width:clamp(300px,32vw,440px)}
.split-img{height:auto;aspect-ratio:5/4}
.split-img img{height:118%}
.pain-photo{height:auto;aspect-ratio:4/3}
.pain-photo img{height:118%}
.img-band{height:auto;aspect-ratio:21/9;min-height:360px;max-height:640px}
.ib-media img{height:118%;object-position:center 35%}

/* outcomes bento: rows scale with the viewport instead of fixed pixels */
.outcomes{grid-template-rows:repeat(2,clamp(230px,23vw,380px))}
.oc img{object-position:center 30%}

/* ---------- side-by-side: FAQ ---------- */
.faq-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq-split .faq{max-width:none;margin:0}
.faq-side{position:sticky;top:110px;display:grid;gap:26px}
.faq-side h2{margin:18px 0 14px;font-size:clamp(30px,3.6vw,48px)}
.faq-side .lead{margin-bottom:22px}

/* ---------- side-by-side: tools ---------- */
.tools-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.tools-side{display:grid;gap:26px}
.tools-side h2{margin:18px 0 14px;font-size:clamp(30px,3.6vw,48px)}
.tools-split .tools{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin:0}

/* ---------- shared side photo ---------- */
.side-photo{position:relative;margin:0;border-radius:26px;overflow:hidden;background:#1a1f4a;box-shadow:0 30px 60px -28px rgba(35,45,140,.45)}
.side-photo img{width:100%;height:100%;object-fit:cover}
.faq-photo{aspect-ratio:7/6}
.tools-photo{aspect-ratio:16/10}

/* ---------- CTA band photo ---------- */
.cta-media{position:relative;display:grid}
.cta-photo{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:6/5;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.cta-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.cta-media .checks{position:absolute;left:-28px;bottom:-22px;right:28%;background:rgba(10,14,44,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:20px 22px;gap:10px}
.cta-media .checks li{font-size:14px}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .faq-split,.tools-split{grid-template-columns:1fr}
  .faq-side{position:static}
  .faq-photo{aspect-ratio:16/9}
  .tools-split .tools{grid-template-columns:repeat(5,minmax(0,1fr))}
  .outcomes{grid-template-rows:repeat(3,clamp(220px,34vw,340px))}
  .img-band{aspect-ratio:16/9}
  .cta-media{max-width:560px}
  .cta-media .checks{left:16px;right:16px;bottom:16px}
}

/* ---------- phones ---------- */
@media (max-width:680px){
  .outcomes{grid-template-rows:none;grid-auto-rows:auto}
  .oc{aspect-ratio:4/5}
  .gal-track > .gal,.gal-track > .gal.gal-lg{width:78vw!important;max-width:340px}
  .gal,.gal.gal-lg{aspect-ratio:4/5}
  .img-band{aspect-ratio:auto;min-height:420px}
  .tools-split .tools{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faq-photo,.tools-photo{aspect-ratio:4/3}
  .pain-photo{aspect-ratio:4/3}
  .cta-photo{aspect-ratio:4/3}
  .cta-media .checks{position:static;margin-top:-30px;margin-inline:12px;padding:16px}
}
@media (max-width:360px){
  .tools-split .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* tablets: keep text and photo side by side inside the stacked section */
@media (min-width:681px) and (max-width:1100px){
  .faq-side,.tools-side{grid-template-columns:1.1fr .9fr;align-items:center}
  .faq-photo,.tools-photo{aspect-ratio:4/3}
}