/* Locally hosted, representative education photography and accessible media controls. */
figure { margin:0; }
.hero-photo-wrap { height:440px; min-height:0; transform:none; margin:0; position:relative; }
.hero-photo-frame { position:relative; width:min(88%,440px); height:92%; margin:auto; overflow:hidden; border:8px solid #fff; border-radius:190px 190px 28px 28px; background:#e7e4da; box-shadow:0 28px 80px rgba(16,40,61,.18); transform:rotate(2deg); }
.hero-photo-frame::after { position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(10,31,47,.72)); content:""; }
.hero-photo-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero-photo-frame figcaption { position:absolute; z-index:1; right:24px; bottom:22px; left:24px; display:flex; flex-direction:column; gap:3px; color:#fff; font:600 19px/1.25 var(--display); }
.hero-photo-frame figcaption small { color:#e7e8df; font:500 10px/1.5 var(--sans); letter-spacing:.11em; text-transform:uppercase; }
.hero-photo-note { position:absolute; z-index:2; right:0; bottom:6%; display:flex; align-items:center; gap:10px; padding:13px 17px; border:1px solid rgba(16,40,61,.08); border-radius:999px; background:#fffefa; box-shadow:0 12px 34px rgba(16,40,61,.11); color:var(--navy); font-size:11px; }
.hero-photo-note span { color:var(--wl-jade); font:700 11px var(--display); }
.hero-photo-note i { color:var(--wl-amber); font-style:normal; }
.hero-photo-orbit { position:absolute; z-index:-1; top:4%; right:1%; width:94%; aspect-ratio:1; border:1px solid rgba(210,164,90,.45); border-radius:50%; }
.subject-spotlight { overflow:hidden; padding:0 0 25px; }
.subject-spotlight .eyebrow,.subject-spotlight h3,.subject-spotlight>p:not(.eyebrow) { margin-right:25px; margin-left:25px; }
.subject-spotlight .eyebrow { margin-top:22px; }
.subject-spotlight-image { display:block; width:100%; height:190px; object-fit:cover; }
.subject-spotlight.maths .subject-spotlight-image { object-position:center 54%; }
.subject-spotlight.science .subject-spotlight-image { object-position:center 43%; }
.subject-symbol { top:188px; }

.media-showcase { padding-top:104px; padding-bottom:112px; background:linear-gradient(145deg,#f4efe3,#fbf8f1 58%,#edf3ee); }
.media-heading-row,.gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin:40px 0 32px; }
.media-heading-row h2 { margin:0; color:var(--navy); font:500 clamp(40px,5vw,66px)/1.02 var(--display); letter-spacing:-.065em; }
.media-heading-row>p,.gallery-heading>p { max-width:390px; margin:0 0 7px; color:#596b74; font-size:15px; }
.media-carousel { max-width:1080px; margin:0 auto; padding:14px; border:1px solid rgba(16,40,61,.12); border-radius:24px; background:#fffefa; box-shadow:0 28px 80px rgba(16,40,61,.09); outline:none; }
.media-carousel:focus-visible { outline:3px solid var(--wl-coral); outline-offset:4px; }
.carousel-viewport { overflow:hidden; border-radius:15px; }
.carousel-track { display:flex; transition:transform .5s cubic-bezier(.2,.75,.25,1); will-change:transform; touch-action:pan-y; }
.carousel-slide { position:relative; flex:0 0 100%; min-width:0; margin:0; }
.carousel-slide[aria-hidden="true"] { pointer-events:none; }
.carousel-image-button,.media-open { position:relative; display:block; width:100%; padding:0; border:0; border-radius:0; background:#e4e5dc; cursor:zoom-in; text-align:left; }
.carousel-image-button { height:clamp(300px,48vw,590px); overflow:hidden; }
.carousel-image-button img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.25,1); }
.carousel-image-button:hover img,.media-open:hover img { transform:scale(1.025); }
.image-expand { position:absolute; right:18px; bottom:18px; display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(255,255,255,.72); border-radius:50%; background:rgba(16,40,61,.72); color:white; font-size:20px; opacity:.9; transition:transform .2s,background .2s; }
.media-open:hover .image-expand { transform:translate(2px,-2px); background:var(--wl-jade-deep); }
.carousel-slide figcaption { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; padding:17px 7px 6px; }
.carousel-slide figcaption strong { color:var(--navy); font:600 18px var(--display); }
.carousel-slide figcaption span { color:#73807b; font-size:11px; }
.carousel-controls { display:flex; align-items:center; justify-content:center; gap:18px; padding:18px 0 4px; }
.carousel-arrow,.lightbox-close { display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(16,40,61,.2); border-radius:50%; background:white; color:var(--navy); font-size:20px; cursor:pointer; transition:background .2s,color .2s,transform .2s; }
.carousel-arrow:hover,.carousel-arrow:focus-visible,.lightbox-close:hover { background:var(--navy); color:white; transform:translateY(-1px); }
.carousel-dots { display:flex; justify-content:center; gap:9px; }
.carousel-dot { width:10px; height:10px; padding:0; border:0; border-radius:50%; background:#c7cfca; cursor:pointer; transition:width .25s,background .25s; }
.carousel-dot[aria-current="true"] { width:28px; border-radius:999px; background:var(--wl-jade); }
.carousel-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; clip-path:inset(50%); }
.media-gallery-block { margin-top:98px; }
.gallery-heading { margin:0 0 25px; }
.gallery-heading h3,.video-feature h3 { margin:0; color:var(--navy); font:500 clamp(30px,3.5vw,43px)/1.1 var(--display); letter-spacing:-.05em; }
.gallery-heading h3 em,.video-feature h3 em { color:#a47e43; font-family:var(--serif); font-weight:400; }
.gallery-heading .eyebrow { margin-bottom:9px; }
.gallery-heading>p { max-width:300px; font-size:12px; }
.media-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.gallery-item { min-width:0; }
.gallery-item-wide { grid-column:span 2; }
.gallery-item .media-open { height:clamp(180px,21vw,300px); overflow:hidden; border-radius:15px; }
.gallery-item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.gallery-item figcaption { padding:9px 2px 0; color:#718079; font-size:11px; }

.video-feature { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(250px,.8fr); align-items:center; gap:52px; max-width:1080px; margin:94px auto 0; padding:30px; border:1px solid rgba(16,40,61,.12); border-radius:24px; background:#fffefa; }
.video-placeholder { position:relative; min-height:280px; overflow:hidden; display:flex; align-items:end; padding:24px; border-radius:16px; background:#10283d; isolation:isolate; }
.video-placeholder::after { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(16,40,61,.05),rgba(16,40,61,.82)); content:""; }
.video-placeholder img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; }
.video-placeholder-label { color:white; font:600 17px/1.4 var(--display); }
.video-placeholder-label small { color:#e7dfcc; font:500 10px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.video-feature .eyebrow { margin-bottom:12px; }
.video-feature p:last-child { margin-bottom:0; color:#66756f; font-size:14px; }

.media-lightbox { width:min(94vw,1100px); max-width:none; max-height:94vh; padding:0; overflow:visible; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:#0c1e2c; color:white; box-shadow:0 28px 100px rgba(0,0,0,.45); }
.media-lightbox::backdrop { background:rgba(5,15,23,.86); backdrop-filter:blur(5px); }
.lightbox-shell { position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; max-height:94vh; }
.lightbox-image { display:block; max-width:100%; width:auto; height:auto; max-height:78vh; margin:auto; object-fit:contain; }
.lightbox-caption { padding:17px 24px 21px; border-top:1px solid rgba(255,255,255,.14); }
.lightbox-caption h2 { margin:0 0 5px; color:white; font:600 17px var(--display); }
.lightbox-caption p { margin:0; color:#d0dad7; font-size:13px; }
.lightbox-close { position:absolute; z-index:2; top:14px; right:14px; width:46px; height:46px; border-color:rgba(255,255,255,.7); background:rgba(10,31,47,.8); color:white; font-size:30px; line-height:1; }
.lightbox-close:hover { background:white; color:var(--navy); }

.image-story { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.8fr); align-items:center; gap:clamp(40px,8vw,100px); }
.editorial-photo,.schedule-photo,.teacher-context-photo,.trial-context-photo,.contact-context-photo,.privacy-context-photo { overflow:hidden; border:8px solid #fff; border-radius:22px; background:#e5e6dc; box-shadow:0 22px 64px rgba(16,40,61,.12); }
.editorial-photo img,.schedule-photo img,.teacher-context-photo img,.trial-context-photo img,.contact-context-photo img,.privacy-context-photo img { display:block; width:100%; height:100%; max-height:440px; object-fit:cover; }
.editorial-photo img { height:400px; }
.editorial-photo figcaption,.schedule-photo figcaption,.teacher-context-photo figcaption,.trial-context-photo figcaption,.contact-context-photo figcaption,.privacy-context-photo figcaption { padding:9px 12px 10px; background:#fffefa; color:#6d7b75; font-size:10px; line-height:1.45; }
.image-story-copy h2 { margin:0 0 18px; color:var(--navy); font:500 clamp(38px,4.5vw,58px)/1.02 var(--display); letter-spacing:-.06em; }
.image-story-copy h2 em { color:#a47e43; font-family:var(--serif); font-weight:400; }
.image-story-copy>p:not(.eyebrow) { color:#586a72; }
.learning-steps-inline { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.learning-steps-inline span { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--wl-line); border-radius:999px; background:#fffefa; color:var(--navy); font-size:12px; }
.learning-steps-inline b { color:var(--wl-jade); font-size:10px; }

.subject-feature-section { background:linear-gradient(130deg,#f6f1e6,#fbf8f1); }
.subject-feature-section .section-heading { display:flex; align-items:end; justify-content:space-between; gap:36px; }
.subject-feature-section .section-heading>p { max-width:360px; }
.subject-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:36px; }
.subject-feature-card { overflow:hidden; border:1px solid rgba(16,40,61,.1); border-radius:20px; background:#fffefa; box-shadow:0 14px 45px rgba(16,40,61,.07); }
.subject-feature-card figure img { display:block; width:100%; height:270px; object-fit:cover; }
.subject-feature-card figure figcaption { padding:8px 18px; color:#73807b; font-size:10px; }
.subject-feature-card>div { padding:8px 24px 23px; }
.subject-feature-card h3 { margin:0 0 8px; color:var(--navy); font:600 27px var(--display); }
.subject-feature-card>div>p:last-child { margin:0; color:#5f706e; font-size:14px; }
.subject-feature-maths { border-top:4px solid var(--wl-amber); }
.subject-feature-science { border-top:4px solid var(--wl-jade); }

.schedule-photo { display:grid; grid-template-columns:minmax(180px,.62fr) minmax(0,1fr); align-items:center; gap:18px; max-width:880px; margin:0 auto 42px; }
.schedule-photo img { height:210px; border-radius:14px; }
.schedule-photo figcaption { padding:12px; }
.teacher-context-photo { margin:25px 0; }
.teacher-context-photo img { height:210px; object-position:center 40%; }
.trial-context-photo { margin:22px 0; }
.trial-context-photo img { height:240px; object-position:center 44%; }
.contact-context-photo { margin:24px 0 0; }
.contact-context-photo img { height:200px; }
.privacy-context-photo { margin:24px 0 32px; }
.privacy-context-photo img { height:210px; object-position:center 47%; }

@media (max-width:820px) {
  .hero-photo-wrap { width:100%; height:360px; margin:4px 0 0; transform:none; }
  .hero-photo-frame { width:min(84%,410px); height:92%; }
  .media-showcase { padding-top:72px; padding-bottom:78px; }
  .media-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-item-wide { grid-column:span 2; }
  .gallery-item .media-open { height:240px; }
  .image-story { grid-template-columns:minmax(0,1fr); gap:34px; }
  .editorial-photo img { height:340px; }
  .subject-feature-section .section-heading { display:block; }
  .schedule-photo { grid-template-columns:minmax(160px,.65fr) minmax(0,1fr); }
  .video-feature { gap:28px; }
}
@media (max-width:520px) {
  .hero-photo-wrap { height:300px; margin:0 -10px; width:calc(100% + 20px); }
  .hero-photo-frame { width:82%; border-width:5px; border-radius:140px 140px 22px 22px; }
  .hero-photo-frame figcaption { right:15px; bottom:15px; left:15px; font-size:15px; }
  .hero-photo-note { right:-2px; bottom:0; padding:10px 13px; font-size:10px; }
  .subject-spotlight-image { height:170px; }
  .media-heading-row,.gallery-heading { display:block; margin-top:25px; }
  .media-heading-row>p,.gallery-heading>p { margin-top:14px; }
  .media-carousel { margin-inline:-6px; padding:8px; border-radius:17px; }
  .carousel-image-button { height:260px; }
  .carousel-slide figcaption { display:block; padding:12px 5px 4px; }
  .carousel-slide figcaption strong { display:block; font-size:15px; }
  .carousel-slide figcaption span { display:block; margin-top:4px; font-size:10px; }
  .carousel-controls { gap:12px; padding-top:14px; }
  .carousel-arrow { width:40px; height:40px; }
  .carousel-dots { gap:6px; }
  .carousel-dot { width:8px; height:8px; }
  .carousel-dot[aria-current="true"] { width:22px; }
  .media-gallery-block { margin-top:62px; }
  .media-gallery { gap:9px; }
  .gallery-item .media-open { height:clamp(140px,50vw,205px); border-radius:12px; }
  .gallery-item figcaption { padding-top:7px; font-size:9px; }
  .video-feature { grid-template-columns:minmax(0,1fr); gap:23px; margin-top:58px; padding:16px; border-radius:19px; }
  .video-placeholder { min-height:210px; }
  .media-lightbox { width:calc(100vw - 20px); border-radius:14px; }
  .lightbox-image { max-height:72vh; }
  .lightbox-caption { padding:14px 16px 17px; }
  .lightbox-close { top:9px; right:9px; }
  .subject-feature-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .subject-feature-card figure img { height:210px; }
  .schedule-photo { grid-template-columns:minmax(0,1fr); gap:0; margin-bottom:30px; }
  .schedule-photo img { height:200px; }
  .editorial-photo img { height:250px; }
  .teacher-context-photo img,.contact-context-photo img,.privacy-context-photo img { height:180px; }
  .trial-context-photo img { height:200px; }
}
@media (max-width:360px) {
  .hero-photo-wrap { height:265px; }
  .carousel-image-button { height:220px; }
  .gallery-item .media-open { height:145px; }
}
@media (prefers-reduced-motion:reduce) {
  .carousel-track,.carousel-image-button img,.media-open img,.carousel-dot,.carousel-arrow { transition:none !important; }
}
