.ui-icon { display:inline-block; width:18px; height:18px; vertical-align:-3px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.header-actions { display:flex; align-items:center; gap:10px; margin-left:24px; }
.header #main-navigation { margin-left:auto; }
.menu-toggle { display:none; }
.theme-toggle .ui-icon { width:20px; height:20px; }
.theme-sun { display:none; }
html[data-theme="dark"] .theme-sun { display:inline-block; }
html[data-theme="dark"] .theme-moon { display:none; }
.header .brand .logo-dark { display:none; }
.header .brand img { background:transparent!important; mix-blend-mode:normal; }
html[data-theme="dark"] .header .brand .logo-light { display:none; }
html[data-theme="dark"] .header .brand .logo-dark { display:block; }
@media(max-width:650px) {
 .header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 18px; }
 .header .brand { gap:8px; min-width:0; }
 .header .brand img { width:54px; height:54px; }
 .brand b { font-size:12px; letter-spacing:2.5px; }.brand { font-size:9px; letter-spacing:1px; }
 .header-actions { margin:0; gap:8px; }
 .theme-toggle,.menu-toggle { width:42px; height:42px; min-height:42px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--surface,#fff); padding:10px; cursor:pointer; }
 .nav-ready .menu-toggle { display:inline-grid; place-items:center; }
 .menu-toggle .menu-close { display:none; }.menu-toggle[aria-expanded="true"] .menu-close { display:block; }.menu-toggle[aria-expanded="true"] .menu-open { display:none; }
 .header #main-navigation { grid-column:1/-1; margin:0; width:100%; display:flex; flex-direction:column; align-items:stretch; gap:6px; background:var(--surface,#fff); border:1px solid var(--line); border-radius:16px; padding:10px; }
 .nav-ready .header #main-navigation { display:none; }.nav-ready .header #main-navigation.is-open { display:flex; }
 .header #main-navigation a { justify-content:center; padding:12px; min-height:46px; border-radius:10px; border:0; font-size:14px; }
 .header #main-navigation a[aria-current] { background:var(--soft,#edf2e8); color:var(--green); font-weight:700; }
 .header #main-navigation .nav-contact { background:var(--green); color:var(--cream); }
 .hero-copy,.section-heading,.story-copy,.curriculum-heading,.directory-intro,.discover>div:first-child,.journey-grid>div:first-child,.faq>div:first-child,.contact,.footer { text-align:center; }
 .hero-copy .eyebrow,.lead,.section-heading,.curriculum-heading>p,.story-copy p,.discover p,.journey-grid>div:first-child p { margin-left:auto; margin-right:auto; }
 .actions,.hero-curricula,.hero-notes,.learning-tags,.subject-nav { justify-content:center; }
 .hero-curricula { margin-inline:auto; }.hero-notes { align-items:center; }
 .curriculum-card,.benefits article { text-align:center; align-items:center; }.curriculum-card a { align-self:center; }.curriculum-symbol { width:100%; }
 .teacher-tools { align-items:stretch; }.teacher-search-form { text-align:center; }.teacher-search-controls input { text-align:left; }.teacher-search-meta { text-align:left; }
 .directory-context { flex-direction:column; align-items:center; }.intro-bottom .text-link { margin-top:8px; }
 .teacher-card h2,.sample-label { text-align:center; }.teacher-card dl { text-align:left; }
 .footer { align-items:center; }.contact-links { width:100%; }.mobile-enquire { justify-content:center; gap:20px; }
 .faq details,.steps,.learning-map { text-align:left; }
}
@media(max-width:360px) { .header { padding-inline:12px; }.header .brand img { width:44px; height:44px; }.header-actions { gap:5px; }.brand b { letter-spacing:1.7px; font-size:11px; } }
@media(max-width:650px) { .header-actions { grid-column:2; grid-row:1; } .header .brand { grid-column:1; grid-row:1; } }

/* Smooth mobile menu opening and closing. */
@media (max-width: 650px) {
    .nav-ready .header #main-navigation {
        display: flex;
        max-height: 0;
        min-height: 0;
        padding: 0 10px;
        border-width: 0 1px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: max-height .32s ease, padding .32s ease,
                    border-width .32s ease, opacity .22s ease,
                    transform .32s ease, visibility 0s .32s;
    }
    .nav-ready .header #main-navigation.is-open {
        max-height: 360px;
        padding: 10px;
        border-width: 1px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: max-height .32s ease, padding .32s ease,
                    border-width .32s ease, opacity .22s ease,
                    transform .32s ease, visibility 0s;
    }
}
@media (prefers-reduced-motion: reduce) {
    .nav-ready .header #main-navigation,
    .nav-ready .header #main-navigation.is-open {
        transition: none;
        transform: none;
    }
}

/* Comfortable, clearly ordered homepage actions on phones. */
@media (max-width: 650px) {
    .hero-copy .actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        width: 100%;
        max-width: 380px;
        margin: 28px auto 0;
    }
    .hero-copy .actions > .button {
        width: 100%;
        min-height: 60px;
        padding: 14px 22px;
        justify-content: center;
        gap: 16px;
        border-radius: 12px;
        font-size: 15px;
    }
    .hero-copy .actions .note-icon {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
    }
    .hero-copy .actions .note-icon svg {
        display: block;
        width: 20px;
        height: 20px;
    }
    .hero-copy .actions > .text-link {
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 8px 4px;
        font-size: 14px;
        border-bottom: 0;
        text-decoration: underline;
        text-underline-offset: 6px;
    }
    .hero-copy .hero-notes {
        justify-content: center;
        margin-top: 20px;
        gap: 8px 16px;
    }
}

/* Header returns when scrolling upward on mobile and desktop. */
.header.scroll-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--cream);
    box-shadow: 0 4px 18px #142f320d;
    transform: translateY(0);
    transition: transform .25s ease;
}
.header.scroll-header.header-away {
    transform: translateY(calc(-100% - 2px));
    pointer-events: none;
}
.header.scroll-header:focus-within {
    transform: translateY(0);
    pointer-events: auto;
}
@media (max-width: 650px) {
    html { scroll-padding-top: 110px; }
    .teacher-card { scroll-margin-top: 110px; }
    .header.scroll-header #main-navigation.is-open {
        max-height: min(360px, 65vh);
        overflow-y: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .header.scroll-header { transition: none; }
}

/* Desktop navigation stays visible without leaving the document flow. */
@media (min-width: 651px) {
    .header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--cream);
        box-shadow: 0 4px 18px #142f320d;
        transform: none;
    }
    html { scroll-padding-top: 140px; }
    .teacher-card { scroll-margin-top: 140px; }
}

/* Desktop-only: full-width compact header and teacher introduction entrance. */
@media (min-width: 651px) {
    .header {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding: 12px clamp(24px, 4vw, 64px);
    }
    .header .brand img {
        width: 60px;
        height: 60px;
    }
    .directory-intro > .eyebrow,
    .directory-intro > h1,
    .directory-intro > .intro-bottom,
    .directory-intro > .directory-context,
    .directory-intro > .demo-notice,
    .directory-intro > .teacher-tools {
        animation: teacher-intro-rise .85s cubic-bezier(.2,.65,.25,1) both;
    }
    .directory-intro > h1 { animation-delay: .06s; }
    .directory-intro > .intro-bottom { animation-delay: .12s; }
    .directory-intro > .directory-context { animation-delay: .18s; }
    .directory-intro > .demo-notice { animation-delay: .24s; }
    .directory-intro > .teacher-tools { animation-delay: .30s; }
}
@keyframes teacher-intro-rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .directory-intro > * { animation: none !important; }
}

/* Full-width desktop background, with the original centred content width. */
@media (min-width: 651px) {
    #parent-student-guide {
        width: 100%;
        max-width: none;
        padding-inline: max(40px, calc((100% - 1160px) / 2));
        border-radius: 0;
        box-shadow: none;
        clip-path: none;
    }
}
@media (min-width: 651px) and (max-width: 900px) {
    #parent-student-guide { padding-inline: 25px; }
}

/* Let the hero glow fade across the viewport instead of stopping at .wrap. */
.hero {
    background: none;
    overflow: visible;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 60% at 75% 40%, #e2c96922 0%, transparent 100%);
}

/* Keep online-class monitor icons aligned inside their available space. */
.map-foot { display:flex; align-items:center; gap:12px; }
.map-foot svg, .curriculum-symbol svg { display:block; flex-shrink:0; width:24px; height:24px; }