@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: light; --ink: #183a33; --muted: #657a73; --green: #1d6b55; --lime: #d6f073; --paper: #f6f8f1; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
.topbar { max-width: 1160px; margin: auto; padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--green); color: white; font-weight: 800; font-family: Manrope, sans-serif; }
.brand strong, .brand small { display: block; }.brand small { color: var(--muted); font-size: 12px; margin-top: 3px; }
nav { display: flex; gap: 30px; } nav a { text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; } nav a:hover { color: var(--green); }
main { max-width: 1160px; margin: auto; padding: 18px 28px 48px; }
.hero { min-height: 420px; overflow: hidden; background: #e8efdf; border-radius: 28px; padding: 66px 7%; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; position: relative; }
.hero-copy { position: relative; z-index: 2; }.eyebrow { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { font-family: Manrope, sans-serif; letter-spacing: -.04em; } h1 { font-size: clamp(48px, 7vw, 82px); line-height: .98; margin: 18px 0; } h2 { font-size: clamp(25px, 3vw, 34px); line-height: 1.15; margin: 12px 0; }
.intro { max-width: 440px; color: #546b62; font-size: 18px; line-height: 1.7; }.button { display: inline-flex; gap: 20px; align-items: center; margin-top: 15px; border-radius: 30px; padding: 15px 20px; background: var(--green); color: white; text-decoration: none; font-weight: 700; font-size: 14px; }
.hero-art { height: 285px; position: relative; }.sun { width: 220px; height: 220px; border-radius: 50%; background: var(--lime); position: absolute; top: 16px; left: 22%; }.book { position: absolute; border-radius: 18px 18px 10px 10px; box-shadow: 0 24px 30px #3154471c; }.book-one { width: 210px; height: 135px; background: #fffdf4; transform: rotate(-12deg); top: 100px; left: 13%; }.book-two { width: 210px; height: 135px; background: #74b99a; transform: rotate(8deg); top: 128px; left: 28%; }.plant { position: absolute; right: 1%; bottom: 8px; font-size: 92px; color: var(--green); }
.content-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; margin-top: 24px; }.info-card, .news-card, .contact { border-radius: 22px; padding: 32px; background: white; }.info-card p:not(.eyebrow), .news-card p:not(.eyebrow) { color: var(--muted); line-height: 1.75; }.note { font-size: 13px; padding-top: 14px; border-top: 1px solid #e8eee7; }.news-card { background: #1d6b55; color: white; position: relative; overflow: hidden; }.news-card .eyebrow { color: var(--lime); }.news-card p:not(.eyebrow) { color: #d1e4d8; }.news-icon { position: absolute; right: 25px; top: 16px; font-size: 80px; color: #ffffff20; }.coming { font-size: 12px; font-weight: 700; color: var(--lime); }
.school-facts { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.school-facts li { background: #f3f6ef; border-radius: 13px; padding: 14px; }.school-facts strong, .school-facts span { display: block; }.school-facts strong { font-family: Manrope, sans-serif; font-size: 20px; color: var(--green); }.school-facts span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.leaders { margin-top: 24px; padding: 34px; border-radius: 22px; background: #eaf0e4; }.leaders h2 { margin-bottom: 8px; }.leaders-intro { color: var(--muted); margin-top: 0; line-height: 1.6; }.leader-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.leader-card { display: flex; align-items: flex-start; gap: 14px; padding: 17px; border: 1px solid #e6ece2; background: white; border-radius: 16px; }.leader-number { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: #e4f0dc; color: var(--green); font-family: Manrope, sans-serif; font-weight: 800; }.leader-card p { margin: 0 0 6px; color: var(--muted); font-size: 12px; }.leader-card h3 { margin: 0 0 5px; font-family: Manrope, sans-serif; font-size: 16px; }.leader-card div > span { color: var(--green); font-size: 12px; font-weight: 700; }
.programs { margin-top: 24px; padding: 34px; border-radius: 22px; background: #fff; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 26px; }.programs-copy p:last-child { max-width: 570px; color: var(--muted); line-height: 1.75; }.subject-chips { display: flex; flex-wrap: wrap; gap: 10px; }.subject-chips span { padding: 11px 15px; border-radius: 30px; background: #eaf3e5; color: var(--green); font-size: 13px; font-weight: 700; }
.contact { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 28px; background: #edf2e7; }.contact p { color: var(--muted); line-height: 2; }.contact strong { color: var(--ink); }
footer { max-width: 1160px; margin: auto; padding: 22px 28px 32px; display: flex; justify-content: space-between; color: #82938b; font-size: 13px; }
@media (max-width: 720px) { .topbar { align-items: flex-start; flex-direction: column; }.topbar nav { width: 100%; justify-content: space-between; gap: 12px; flex-wrap: wrap; }.topbar nav a { font-size: 12px; } main { padding: 8px 16px 32px; }.hero { grid-template-columns: 1fr; padding: 42px 28px 12px; }.hero-art { height: 210px; transform: scale(.85); transform-origin: left top; }.content-grid, .programs { grid-template-columns: 1fr; }.info-card, .news-card, .contact { padding: 25px; }.contact { align-items: flex-start; flex-direction: column; gap: 0; }.leaders, .programs { padding: 25px; }.leader-grid { grid-template-columns: 1fr; } footer { padding-inline: 18px; } }