/* ==========================================================================
   lumen - light, roomy, and quiet until it needs not to be.

   Replaces the previous theme's style.css. Bootstrap 3.3.7 still loads
   underneath, because the homepage body is Bootstrap grid markup written in
   the CMS editor; nothing here touches .row or .col-*.

   The design rests on three things: a lot of white, one indigo that only
   appears on things you can act on, and soft 18px corners used consistently
   so the page reads as a set of panels rather than a wall of text. The hero
   photograph is inset in a panel rather than full-bleed with words on top,
   because a school's uploaded photograph is usually busy and the message
   should not have to fight it.
   ========================================================================== */

:root {
    --lm-ink:      #121630;
    --lm-ink-soft: #656C8A;
    --lm-bg:       #FFFFFF;
    --lm-soft:     #F5F6FC;
    --lm-line:     #E6E8F2;
    --lm-brand:    #3E3BD6;
    --lm-brand-dk: #2E2BB0;
    --lm-mint:     #10A37F;
    --lm-r:        18px;
    --lm-shadow:   0 14px 40px rgba(18, 22, 48, .10);
    --lm-shadow-s: 0 4px 14px rgba(18, 22, 48, .07);
    --lm-display:  "Outfit", "Segoe UI", Helvetica, Arial, sans-serif;
    --lm-text:     "Public Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ base */
html { -webkit-text-size-adjust: 100%; }
body.lm-body {
    margin: 0;
    background: var(--lm-bg);
    color: var(--lm-ink);
    font-family: var(--lm-text);
    font-size: 16px;
    line-height: 1.68;
    overflow-x: hidden;
}
.lm-body a { color: var(--lm-brand); text-decoration: none; }
.lm-body a:hover, .lm-body a:focus { color: var(--lm-brand-dk); }
.lm-body img { max-width: 100%; height: auto; }
.lm-body :focus-visible { outline: 3px solid var(--lm-brand); outline-offset: 3px; border-radius: 6px; }

.lm-btn {
    display: inline-block;
    padding: 13px 26px;
    background: var(--lm-brand);
    color: #fff !important;
    font-family: var(--lm-display);
    font-weight: 600;
    font-size: 15.5px;
    border: 1px solid var(--lm-brand);
    border-radius: 999px;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lm-btn:hover, .lm-btn:focus { background: var(--lm-brand-dk); border-color: var(--lm-brand-dk); text-decoration: none !important; transform: translateY(-1px); box-shadow: var(--lm-shadow-s); }
.lm-btn-ghost { background: transparent; color: var(--lm-ink) !important; border-color: var(--lm-line); }
.lm-btn-ghost:hover { background: var(--lm-soft); border-color: var(--lm-ink); color: var(--lm-ink) !important; }

.lm-card { background: #fff; border: 1px solid var(--lm-line); border-radius: var(--lm-r); padding: 24px; box-shadow: var(--lm-shadow-s); }

/* ------------------------------------------------------------------- bar */
.lm-head { position: sticky; top: 0; z-index: 1030; }
.lm-bar {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.lm-head.is-stuck .lm-bar { border-bottom-color: var(--lm-line); box-shadow: 0 6px 24px rgba(18, 22, 48, .07); }

.lm-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; }
.lm-brand img { max-height: 56px; width: auto; transition: max-height .2s ease; }
.lm-head.is-stuck .lm-brand img { max-height: 44px; }

.lm-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.lm-menu > li { position: relative; }
.lm-menu > li > a {
    display: block;
    padding: 9px 14px;
    color: var(--lm-ink);
    font-family: var(--lm-display);
    font-size: 15px;
    font-weight: 500;
    border-radius: 999px;
    transition: background .16s ease, color .16s ease;
}
.lm-menu > li > a:hover { background: var(--lm-soft); color: var(--lm-brand); text-decoration: none; }
.lm-menu > li.active > a { background: var(--lm-soft); color: var(--lm-brand); }
.lm-menu > li > a .fa-angle-down { font-size: 12px; opacity: .5; margin-left: 2px; }

.lm-sub {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 224px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--lm-line);
    border-radius: 14px;
    box-shadow: var(--lm-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 20;
}
.lm-sub-right { left: auto; right: 0; }
.lm-menu > li:hover > .lm-sub, .lm-menu > li.open > .lm-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.lm-sub > li > a { display: block; padding: 9px 14px; border-radius: 10px; color: var(--lm-ink); font-size: 14.5px; }
.lm-sub > li > a:hover { background: var(--lm-soft); color: var(--lm-brand); text-decoration: none; }

.lm-cta > a {
    margin-left: 8px;
    background: var(--lm-brand);
    color: #fff !important;
    padding: 10px 22px !important;
}
.lm-cta > a:hover { background: var(--lm-brand-dk) !important; }

.lm-burger { display: none; width: 44px; height: 40px; padding: 9px 8px; background: none; border: 1px solid var(--lm-line); border-radius: 12px; }
.lm-burger span { display: block; height: 2px; background: var(--lm-ink); margin: 4px 0; transition: transform .2s ease, opacity .2s ease; }
.lm-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lm-burger.is-open span:nth-child(2) { opacity: 0; }
.lm-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
.lm-hero {
    padding: 54px 0 46px;
    background:
        radial-gradient(1000px 420px at 12% -8%, rgba(62, 59, 214, .10), transparent 60%),
        radial-gradient(760px 360px at 92% 4%, rgba(16, 163, 127, .10), transparent 58%),
        var(--lm-bg);
}
.lm-hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 46px; align-items: center; }

.lm-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    background: rgba(16, 163, 127, .10);
    color: #0B7F62;
    border-radius: 999px;
    font-family: var(--lm-display);
    font-size: 13.5px;
    font-weight: 600;
}
.lm-hero-title {
    margin: 16px 0 12px;
    font-family: var(--lm-display);
    font-weight: 700;
    font-size: 50px;
    line-height: 1.06;
    letter-spacing: -.018em;
    text-wrap: balance;
}
.lm-hero-sub { margin: 0 0 26px; font-size: 18px; color: var(--lm-ink-soft); max-width: 30em; }
.lm-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; }

.lm-hero-show { position: relative; }
.lm-hero-show .carousel { border-radius: 22px; overflow: hidden; box-shadow: var(--lm-shadow); }
.lm-hero-show .carousel-inner > .item > img { width: 100%; height: 440px; object-fit: cover; }
.lm-dots { bottom: 14px; }
.lm-dots > li { width: 9px; height: 9px; margin: 0 4px; background: rgba(255,255,255,.55); border-color: transparent; }
.lm-dots > .active { width: 26px; border-radius: 999px; background: #fff; border-color: transparent; }
.lm-arrow { width: 52px; background: none !important; opacity: .9; text-shadow: none; }
.lm-arrow .fa { font-size: 34px; color: #fff; }

/* ------------------------------------------------------------------ main */
.lm-main { padding: 54px 0 70px; }
.lm-prose { font-size: 16.5px; color: #2A3048; }
.lm-prose h1, .lm-prose h2, .lm-prose h3, .lm-prose h4,
.lm-body .page-title, .lm-body .about-title {
    font-family: var(--lm-display);
    font-weight: 600;
    color: var(--lm-ink);
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.lm-prose h1 { font-size: 38px; margin: 0 0 18px; }
.lm-prose h2 { font-size: 30px; margin: 40px 0 14px; }
.lm-prose h3 { font-size: 22px; margin: 28px 0 10px; }
.lm-prose h4 { font-size: 18px; margin: 22px 0 8px; }
.lm-prose p { margin: 0 0 16px; }
.lm-prose ul, .lm-prose ol { margin: 0 0 18px; padding-left: 20px; }
.lm-prose li { margin-bottom: 7px; }
.lm-prose ul { list-style: none; padding-left: 2px; }
.lm-prose ul > li { position: relative; padding-left: 26px; }
.lm-prose ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .55em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(62, 59, 214, .18);
    box-shadow: inset 0 0 0 2.5px var(--lm-brand);
}
.lm-prose ol { list-style: decimal; padding-left: 22px; }
.lm-prose ol > li::before { content: none; }
.lm-prose img { border-radius: 14px; }
.lm-prose blockquote {
    margin: 22px 0;
    padding: 18px 22px;
    background: var(--lm-soft);
    border: 0;
    border-left: 4px solid var(--lm-brand);
    border-radius: 0 14px 14px 0;
    font-size: 17px;
}
.lm-prose table { width: 100%; margin: 0 0 20px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--lm-line); border-radius: 14px; overflow: hidden; }
.lm-prose th, .lm-prose td { padding: 11px 14px; border-bottom: 1px solid var(--lm-line); text-align: left; }
.lm-prose th { background: var(--lm-soft); font-family: var(--lm-display); font-weight: 600; }
.lm-prose tr:last-child td { border-bottom: 0; }
.lm-prose a { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------- sidebar */
.lm-aside { position: sticky; top: 104px; }
.lm-aside-title { margin: 0 0 14px; font-family: var(--lm-display); font-size: 19px; font-weight: 600; }
.lm-news { list-style: none; margin: 0; padding: 0; }
.lm-news > li + li { border-top: 1px solid var(--lm-line); }
.lm-news > li > a { display: block; padding: 13px 0; color: var(--lm-ink); }
.lm-news > li > a:hover { text-decoration: none; color: var(--lm-brand); }
.lm-news-date { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--lm-ink-soft); margin-bottom: 3px; }
.lm-news-title { font-size: 15px; line-height: 1.45; }
.lm-news-empty { padding: 13px 0; color: var(--lm-ink-soft); font-size: 15px; }

/* -------------------- classes the inner pages expect from the stylesheet */
.lm-body .page-title { font-size: 32px; margin: 0 0 18px; }
.lm-body .about-title { font-size: 26px; margin: 0 0 16px; }
.lm-body .innermain { padding: 44px 0; }
.lm-body .post-list { list-style: none; padding: 0; margin: 0; }
.lm-body .post-list > li { padding: 18px 0; border-bottom: 1px solid var(--lm-line); }
.lm-body .relative { position: relative; }
.lm-body .fullwidth, .lm-body .fullwidthinner { width: 100%; }
.lm-body .spacet30 { padding-top: 30px; }
.lm-body .spacet50 { padding-top: 50px; }
.lm-body .spaceb40 { padding-bottom: 40px; }
.lm-body .spaceb50 { padding-bottom: 50px; }
.lm-body .mediarow { margin-bottom: 24px; }

/* ---------------------------------------------------------------- footer */
.lm-foot { margin-top: 20px; background: var(--lm-ink); color: rgba(255, 255, 255, .70); }
.lm-foot a { color: rgba(255, 255, 255, .78); }
.lm-foot a:hover { color: #fff; text-decoration: none; }
.lm-foot h3 { margin: 0 0 16px; font-family: var(--lm-display); font-size: 17px; font-weight: 600; color: #fff; }
.lm-foot-top { display: grid; grid-template-columns: 1.25fr 1.5fr 1fr; gap: 44px; padding: 56px 0 44px; }
.lm-foot-logo { max-height: 60px; width: auto; margin-bottom: 18px; background: #fff; padding: 8px 12px; border-radius: 12px; }
.lm-foot-addr { font-size: 14.5px; line-height: 1.7; margin: 0 0 16px; }
.lm-foot-list { list-style: none; margin: 0; padding: 0; }
.lm-foot-list > li { padding: 6px 0; font-size: 14.5px; break-inside: avoid; }
.lm-foot-list .fa { width: 20px; color: var(--lm-mint); }
.lm-foot-list-wide { column-count: 2; column-gap: 24px; }
.lm-foot-base { border-top: 1px solid rgba(255, 255, 255, .10); padding: 18px 0; }
.lm-foot-base p { margin: 0; text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, .52); }

.lm-social { display: flex; gap: 10px; }
.lm-social a {
    width: 40px; height: 40px; line-height: 40px; text-align: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    color: rgba(255, 255, 255, .82) !important;
    transition: background .18s ease, transform .18s ease;
}
.lm-social a:hover { background: var(--lm-brand); border-color: var(--lm-brand); transform: translateY(-2px); }

/* ------------------------------------------------------ floating actions */
.lm-enquire {
    position: fixed; right: 20px; bottom: 78px; z-index: 1040;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: var(--lm-mint);
    color: #fff !important;
    font-family: var(--lm-display);
    font-weight: 600;
    border-radius: 999px;
    box-shadow: var(--lm-shadow);
}
.lm-enquire:hover { background: #0B7F62; text-decoration: none !important; }

.lm-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 1040;
    width: 46px; height: 46px; line-height: 46px; text-align: center;
    background: var(--lm-ink); color: #fff !important; border-radius: 50%;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.lm-top.is-on { opacity: .92; visibility: visible; }
.lm-top:hover { opacity: 1; text-decoration: none !important; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1199px) {
    .lm-hero-title { font-size: 42px; }
    .lm-hero-show .carousel-inner > .item > img { height: 380px; }
}

@media (max-width: 991px) {
    .lm-burger { display: block; }
    .lm-nav { position: relative; flex-wrap: wrap; }
    .lm-menu {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px;
        background: #fff;
        border: 1px solid var(--lm-line);
        border-radius: 16px;
        box-shadow: var(--lm-shadow);
        max-height: 72vh;
        overflow-y: auto;
    }
    .lm-menu.is-open { display: flex; }
    .lm-menu > li > a { border-radius: 10px; padding: 12px 14px; }
    .lm-sub {
        position: static; opacity: 1; visibility: visible; transform: none;
        display: none; box-shadow: none; border: 0; border-radius: 0;
        margin: 0 0 0 12px; padding: 0 0 0 10px;
        border-left: 2px solid var(--lm-line);
    }
    .lm-menu > li.open > .lm-sub { display: block; }
    .lm-cta > a { margin: 8px 0 0; text-align: center; }

    .lm-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .lm-hero { padding: 36px 0 34px; }
    .lm-foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 767px) {
    .lm-hero-title { font-size: 32px; }
    .lm-hero-sub { font-size: 16.5px; }
    .lm-hero-show .carousel-inner > .item > img { height: 260px; }
    .lm-prose h1 { font-size: 29px; }
    .lm-prose h2 { font-size: 25px; }
    .lm-main { padding: 34px 0 46px; }
    .lm-foot-top { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 32px; }
    .lm-foot-list-wide { column-count: 1; }
    .lm-enquire span { display: none; }
    .lm-enquire { padding: 13px 15px; }
    .lm-prose [style*="width"] { max-width: 100% !important; }
    .lm-prose table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .lm-body * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* CMSWIDTH: a page whose body brings its own containers is given the full
   width to lay them out in, rather than a container inside a container. */
.lm-bleed { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.lm-bleed > .row { margin-left: 0; margin-right: 0; }

/* ==========================================================================
   Home page sections - this theme's palette and faces, mapped onto the tokens
   backend/themes/_shared/home-sections.css reads. The layout itself is shared
   by every theme and lives in that one file, so a fix to it is one edit
   rather than eight.
   ========================================================================== */

.hs {
    --hs-ink:      var(--lm-ink);
    --hs-soft:     var(--lm-ink-soft);
    --hs-line:     var(--lm-line);
    --hs-wash:     var(--lm-soft);
    --hs-paper:    var(--lm-bg);
    --hs-brand:    var(--lm-brand);
    --hs-brand-dk: var(--lm-brand-dk);
    --hs-r:        var(--lm-r);
    --hs-shadow:   var(--lm-shadow);
    --hs-display:  var(--lm-display);
    --hs-text:     var(--lm-text);
}