/* Image-related styles: photo-led Hero and FAQ visual treatment. */
:root { --radius-lg: 30px; }

/* Hero photography: blended into the section, not presented as an isolated card. */
.hero { position: relative; min-height: 450px; }
.hero-grid { position: relative; min-height: 390px; }
.hero-copy { position: relative; z-index: 2; max-width: 600px; padding: 22px 0; }
.hero-backdrop { position: absolute; z-index: 0; top: -80px; right: 0; width: min(62vw, 860px); height: calc(100% + 170px); overflow: hidden; background: #e5eef8; }
.hero-backdrop::after { position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.94) 8%, rgba(255,255,255,.48) 28%, rgba(255,255,255,0) 58%); content: ""; }
.hero-photo, .hero-photo img { width: 100%; height: 100%; }
.hero-photo { background: #dbe8f5; }
.hero-photo img { display: block; object-fit: cover; object-position: 75% center; filter: brightness(1.08) saturate(.92); }

/* FAQ photography: cropped medical scene with location caption. */
.faq-photo { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin: 40px 0 0; border-radius: var(--radius); background: #dbe7f3; }
.faq-photo::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,35,63,.58), rgba(16,35,63,0) 56%); content: ""; }
.faq-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% 49%; filter: brightness(1.05) saturate(.92); }
.faq-photo figcaption { position: absolute; z-index: 1; right: 16px; bottom: 13px; left: 16px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-shadow: 0 1px 3px rgba(16,35,63,.35); }

@media (max-width: 900px) { .hero { min-height: 0; } .hero-grid { min-height: 0; } .hero-backdrop { position: relative; top: auto; right: auto; order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 20px; border-radius: var(--radius-lg); } .hero-backdrop::after { background: linear-gradient(0deg, rgba(17,43,85,.22), rgba(17,43,85,0) 60%); } .hero-photo { overflow: hidden; border-radius: inherit; } .hero-photo img { object-position: 65% center; } }
@media (max-width: 440px) { .hero-backdrop { aspect-ratio: 1 / 1; } }