/* photo-tiers-20261101 (Sam, 1 Nov 2026): every case card and case page carries a visual: photo -> client logo -> line illustration.
   One tile: 3:2 box, whole image shown (contain). Logos sit centred at their own pixel size or smaller (width:auto, capped by max-width), never stretched. */
html body .card-media.card-media{margin:0 0 16px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#ebe8e1;border-radius:6px}
html body .card-media.card-media img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:transparent;border-radius:0}
html body .card-media.card-media--logo{background:#fff;border:1px solid var(--line,#ddd)}
html body .card-media.card-media--logo img{width:auto;height:auto;max-width:62%;max-height:46%;object-fit:contain}
html body .card-media.card-media--illustration{background:#fbf8f1}
/* Inside the dark bank feature card the drawing keeps its light paper ground. */
html body .case-feature .card-media{margin-bottom:22px}
/* Related-case links on case pages: small tile left of the text. */
html body .case-related a.has-media{display:grid;grid-template-columns:112px 1fr;column-gap:16px;align-items:center}
html body .case-related a.has-media .card-media{grid-row:1 / span 2;margin:0;width:112px}
/* Case page lead that is a logo or an illustration. */
html body .case-lead.case-lead--logo{display:flex;align-items:center;justify-content:center;aspect-ratio:3/1;max-width:960px;background:#fff;border:1px solid var(--line,#ddd)}
html body .case-lead.case-lead--logo img{width:auto;max-width:60%;height:auto}
html body .case-lead.case-lead--illustration img{width:min(100%,960px);height:auto;background:#fbf8f1}
/* The College of Surgeons feature card now opens with its photo: content from the top, not centred. */
html body .showcase-proof .work-text{justify-content:flex-start}