/* One presentation contract for project cards, independent of photo import batch.
   Fixed 3:2 frames contain the complete photograph and its existing watermark.
   Explicit box dimensions also prevent srcset intrinsic sizing from shrinking images. */
#main .case-grid,
#main .business-content-grid:has(> .business-content-card > .business-content-photo[href^="/cases/"]),
#main .xj-field-grid {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px;align-items:stretch;
}
#main .case-card,
#main .business-content-card:has(> .business-content-photo[href^="/cases/"]),
#main .xj-field-grid > article {
  display:flex;flex-direction:column;min-width:0;max-width:none;height:100%;margin:0;
  border:1px solid #D5DDE8;border-radius:3px;overflow:hidden;background:#FFFFFF;box-shadow:none;
}
#main .case-card[hidden]{display:none}
#main .case-card > .case-image-link,
#main .business-content-card > .business-content-photo[href^="/cases/"],
#main .xj-field-grid > article > a:has(> img) {
  display:block;position:relative;flex:none;width:100%;height:auto;min-height:0;max-height:none;
  aspect-ratio:3 / 2;margin:0;padding:0;overflow:hidden;background:#F4F1EB;
}
#main .case-card > .case-image-link > img,
#main .business-content-photo[href^="/cases/"] > img,
#main .xj-field-grid > article > a > img {
  position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;max-width:100%;max-height:100%;
  aspect-ratio:auto;margin:0;padding:0;object-fit:contain;object-position:center;filter:none;transform:none;transition:none;
  background:#F4F1EB;
}
#main .case-card > img,
#main .xj-field-grid > article > img {
  display:block;flex:none;width:100%;height:auto;max-width:100%;max-height:none;aspect-ratio:3 / 2;
  margin:0;padding:0;object-fit:contain;object-position:center;background:#F4F1EB;filter:none;transform:none;
}
#main .case-card > div,
#main .business-content-card:has(> .business-content-photo[href^="/cases/"]) > .business-content-copy,
#main .xj-field-grid > article > div {
  display:flex;flex-direction:column;flex:1;min-width:0;padding:24px;gap:0;
}
#main .case-card > div > p,
#main .business-content-card:has(> .business-content-photo[href^="/cases/"]) .business-content-label,
#main .xj-field-grid .xj-field-label {
  margin:0;font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.08em;color:#5F6C80;
}
#main .case-card h3,
#main .business-content-card:has(> .business-content-photo[href^="/cases/"]) h3,
#main .xj-field-grid h3 {
  min-height:3em;margin:10px 0 0;font-size:22px;font-weight:700;line-height:1.5;
  color:#101827;text-wrap:initial;overflow-wrap:anywhere;
}
#main .case-card .case-tags {margin:12px 0 0;gap:6px}
#main .case-card .case-tags span {font-size:12px;line-height:1.6;padding:4px 8px}
#main .case-card small,
#main .business-content-card:has(> .business-content-photo[href^="/cases/"]) .business-content-copy > p:not(.business-content-label),
#main .xj-field-grid article > div > p:not(.xj-field-label) {
  display:block;min-height:3.6em;margin:14px 0 0;font-size:15px;font-weight:400;line-height:1.8;
  color:#5F6C80;overflow-wrap:anywhere;
}
#main .case-card .case-details-link,
#main .business-content-card:has(> .business-content-photo[href^="/cases/"]) .business-content-copy > .text-link,
#main .xj-field-grid .xj-field-link {
  align-self:flex-start;margin: auto 0 0;padding-top:18px;font-size:14px;font-weight:600;line-height:1.6;
}
/* Detail pages share a reading width and spacing; photos retain their native ratio.
   Small source files are not enlarged into fabricated high-resolution detail. */
#main .managed-case {max-width:1000px}
#main .managed-case > header {margin-bottom:28px}
#main .managed-case .content-photo {margin:28px 0}
#main .managed-case .history-media-gallery .content-photo {margin:0}
#main .managed-case .content-photo-link {max-width:100%;margin-inline:auto}
#main .managed-case .content-photo img {display:block;height:auto;max-width:100%;max-height:none;object-fit:contain;filter:none;transform:none}
#main .managed-case .managed-body {font-size:16px;line-height:1.85;overflow-wrap:anywhere}
#main .managed-case .managed-body h2 {font-size:26px;line-height:1.5;margin:30px 0 14px}
#main .managed-case .managed-body p {margin:0 0 18px}
#main .managed-case .business-detail-context {margin:28px 0;padding:24px}
#main .managed-case .business-detail-context h2 {font-size:24px;line-height:1.5}
@media(max-width:720px){
  #main .case-grid,
  #main .business-content-grid:has(> .business-content-card > .business-content-photo[href^="/cases/"]),
  #main .xj-field-grid {grid-template-columns:1fr;gap:24px}
  #main .case-card > div,
  #main .business-content-card:has(> .business-content-photo[href^="/cases/"]) > .business-content-copy,
  #main .xj-field-grid > article > div {padding:20px}
  #main .case-card h3,
  #main .business-content-card:has(> .business-content-photo[href^="/cases/"]) h3,
  #main .xj-field-grid h3 {min-height:0;font-size:20px}
  #main .case-card small,
  #main .business-content-card:has(> .business-content-photo[href^="/cases/"]) .business-content-copy > p:not(.business-content-label),
  #main .xj-field-grid article > div > p:not(.xj-field-label) {min-height:0;font-size:14px}
  #main .managed-case .managed-body {font-size:15px}
  #main .managed-case .managed-body h2,#main .managed-case .business-detail-context h2 {font-size:22px}
  #main .managed-case .business-detail-context {padding:20px}
}

/* The seven retained query-string case URLs use the legacy case shell. */
#main.legacy-case-main {width:min(1000px,calc(100% - 64px))}
#main.legacy-case-main .content {font-size:16px;line-height:1.85}
#main.legacy-case-main .hero-grid {grid-template-columns:minmax(0,1fr);gap:28px;margin-bottom:28px}
#main.legacy-case-main .hero-grid > div {padding-top:0}
#main.legacy-case-main .hero-grid > img {width:100%;max-width:800px;height:auto;margin:0 auto;object-fit:contain}
#main.legacy-case-main .lede {font-size:16px;line-height:1.85}
#main.legacy-case-main .content h2 {font-size:26px;line-height:1.5;margin:30px 0 14px}
#main.legacy-case-main .cta-band {padding:24px;margin-top:28px}
#main.legacy-case-main .cta-band h2 {font-size:24px;margin:0 0 14px}
@media(max-width:720px){
 #main.legacy-case-main {width:calc(100% - 36px)}
 #main.legacy-case-main .content,#main.legacy-case-main .lede {font-size:15px}
 #main.legacy-case-main .content h2,#main.legacy-case-main .cta-band h2 {font-size:22px}
 #main.legacy-case-main .cta-band {padding:20px}
}