/* Preserve the complete learning scenes, including faces and shared materials. */
.hero-visual,
.page-visual-frame { aspect-ratio: auto; }
.hero-visual picture,
.hero-visual img,
.page-visual-frame picture,
.page-visual-frame img { display: block; width: 100%; height: auto; }
.page-visual-frame { max-width: 960px; margin: 0 auto; }
.page-visual-frame--approach,
.page-visual-frame--dyslexia,
.page-visual-frame--reading { max-width: 680px; }
.services-hero-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 3rem; }
.services-portrait { max-width: 540px; }
.services-portrait picture { display: block; }
.services-portrait img { width: 100%; height: auto; aspect-ratio: auto; border-radius: 1rem; }
footer .nav-logo::before { display: none; }
footer .nav-logo img { display: block; width: 180px; height: auto; padding: .6rem; border-radius: .75rem; background: var(--white); }
@media (max-width: 900px) {
  .services-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .services-portrait { display: block; width: 100%; max-width: 600px; margin: 0 auto; }
  .services-portrait figcaption { padding-top: 1rem; }
}

/* Visible context for illustrative scenes; keep the caption with its image. */
.image-note { display: block; margin: 0; padding: .65rem 1rem; color: #465563; background: #F5F1E8; font-size: .8rem; font-weight: 400; line-height: 1.5; text-align: left; }
.services-portrait figcaption .image-note { padding: 0 0 .55rem; background: transparent; }