
:root {
  --navy:#123b61;
  --blue:#1e6597;
  --blue-light:#eaf3f9;
  --gold:#efc24f;
  --cream:#fffaf0;
  --green:#2e7047;
  --text:#25323b;
  --muted:#66747d;
  --white:#fff;
  --shadow:0 16px 40px rgba(20,49,73,.11);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.65}
a{color:inherit}
button,input,textarea{font:inherit}
.container{width:min(1120px,calc(100% - 36px));margin:auto}
.top-strip{background:#0d2e4a;color:#dce8f0;font-size:.83rem}
.top-strip-inner{display:flex;justify-content:space-between;gap:20px;padding:7px 0}
.branding{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.crest{width:68px;height:68px;display:grid;place-items:center;border:4px double var(--gold);border-radius:50%;background:var(--navy);color:white;font-family:Georgia,serif;font-size:1.4rem;font-weight:800}
.brand h1{margin:0;color:var(--navy);font:800 2rem Georgia,serif;letter-spacing:.03em}
.brand p{margin:2px 0 0;color:var(--green);font-weight:700;font-size:.9rem}
.flag{width:58px;border:1px solid #bbb}
.flag span{height:16px;display:block;text-align:center;line-height:16px;font-size:13px}.red{background:#ce1126}.gold{background:#fcd116}.green{background:#006b3f}
.main-nav{background:var(--navy);position:relative;z-index:20}
.nav-inner{display:flex;align-items:center}
.menu{display:flex}.menu a{color:white;text-decoration:none;padding:15px 20px;font-weight:700;font-size:.93rem;border-bottom:3px solid transparent}
.menu a:hover,.menu a.active{background:#194e7b;border-color:var(--gold)}
.menu-toggle{display:none;color:white;background:transparent;border:0;padding:14px 0;font-weight:700}
.notice-bar{background:#fff3c5;border-bottom:1px solid #efd379}
.notice-inner{display:flex;gap:12px;align-items:center;padding:8px 0;font-size:.9rem;overflow:hidden}
.notice-inner strong{color:#9a1f1f;white-space:nowrap}
.ticker{overflow:hidden;white-space:nowrap}.ticker span{display:inline-block;padding-left:100%;animation:ticker 22s linear infinite}
@keyframes ticker{to{transform:translateX(-100%)}}
.hero-slider{height:590px;position:relative;overflow:hidden;background:#456}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease;display:flex;align-items:center;background-size:cover;background-position:center}
.slide.active{opacity:1;visibility:visible}
.slide-one{background: url('img/1web.jpg') no-repeat center center / cover;}
.slide-two{background: url('img/20251003_112601.jpg') no-repeat center center / cover;}
.slide-three{background: url('img/Back_to_school.png') no-repeat center center / cover;}
.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,30,49,.82),rgba(7,30,49,.25))}
.hero-content{position:relative;z-index:2;color:white;max-width:760px}
.eyebrow,.section-kicker{text-transform:uppercase;letter-spacing:.16em;font-size:.77rem;font-weight:800;color:var(--gold);margin:0 0 10px}
.hero-content h2{font:800 clamp(2.6rem,6vw,5rem) Georgia,serif;line-height:1.03;margin:0 0 18px;max-width:780px}
.hero-content>p:not(.eyebrow){font-size:1.15rem;max-width:650px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:6px;text-decoration:none;border:0;font-weight:800;cursor:pointer}
.btn.primary{background:var(--gold);color:#13283b}
.btn.primary:hover{background:#ffd96f}
.btn.secondary{border:1px solid rgba(255,255,255,.65);color:white;background:rgba(255,255,255,.08)}
.btn.light{background:white;color:var(--navy)}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(10,30,50,.4);color:white;font-size:2rem;cursor:pointer}
.slider-btn.prev{left:22px}.slider-btn.next{right:22px}
.slider-dots{position:absolute;z-index:4;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:9px}
.slider-dots button{width:10px;height:10px;border-radius:50%;border:1px solid white;background:transparent;padding:0}
.slider-dots button.active{background:white}
.quick-stats{background:var(--navy);color:white}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats-grid div{padding:22px;text-align:center;border-right:1px solid rgba(255,255,255,.15)}.stats-grid div:last-child{border-right:0}
.stats-grid strong,.stats-grid span{display:block}.stats-grid strong{font:800 1.45rem Georgia,serif}.stats-grid span{color:#bfd2df;font-size:.83rem}
.section{padding:82px 0}
.section.tinted{background:var(--blue-light)}
.section-title{font:800 clamp(2rem,4vw,3.1rem) Georgia,serif;color:var(--navy);line-height:1.15;margin:0 0 22px}
.center{text-align:center}.narrow{max-width:720px;margin-left:auto;margin-right:auto}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.image-card{min-height:360px;border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;font-size:1.45rem;font-weight:800;text-align:center}
.image-card small{display:block;margin-top:8px;font-size:.82rem;font-weight:400}
.school-image-placeholder{background: url('img/school.jpg') no-repeat center center / cover;}
.headteacher-section{background:var(--cream)}
.headteacher-layout{display:grid;grid-template-columns:minmax(280px,390px) 1fr;gap:64px;align-items:center}
.headteacher-portrait-card{margin:0;background:white;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.headteacher-portrait-card img{display:block;width:100%;height:auto}
.headteacher-portrait-card figcaption{padding:20px 24px;border-top:4px solid var(--gold)}
.headteacher-portrait-card strong,.headteacher-portrait-card span{display:block}
.headteacher-portrait-card strong{color:var(--navy);font:800 1.35rem Georgia,serif}
.headteacher-portrait-card span{margin-top:3px;color:var(--muted);font-size:.9rem}
.headteacher-copy{max-width:650px}
.headteacher-copy blockquote{margin:25px 0;padding:16px 22px;border-left:4px solid var(--gold);background:rgba(255,255,255,.7);color:var(--navy);font:italic 1.2rem/1.55 Georgia,serif}
.headteacher-contact-card{max-width:900px;margin:64px auto 0;text-align:center}
.headteacher-contact-card h3{margin:0 0 20px;color:var(--navy);font:800 1.6rem Georgia,serif}
.headteacher-contact-card img{display:block;width:100%;height:auto;border-radius:10px;background:white;box-shadow:var(--shadow)}
.classroom-placeholder{background:url('img/classroom.jpg') no-repeat center center / cover;}
.text-link{color:var(--blue);font-weight:800;text-decoration:none}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.feature-card,.value-card{background:white;padding:28px;border-radius:9px;box-shadow:var(--shadow)}
.icon{font-size:2rem}.feature-card h3,.value-card h3{color:var(--navy);margin:12px 0 8px}
.two-panel{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.panel{padding:34px;border:1px solid #dbe3e9;border-radius:9px}
.panel h2{font-family:Georgia,serif;color:var(--navy)}
.news-item{padding:18px 0;border-top:1px solid #e0e7ec}.news-item span{color:var(--green);font-size:.75rem;font-weight:800;text-transform:uppercase}.news-item h3{margin:4px 0}
.event-row{display:grid;grid-template-columns:70px 1fr;gap:16px;align-items:center;padding:16px 0;border-top:1px solid #e0e7ec}.event-row h3,.event-row p{margin:0}.date-box{background:var(--navy);color:white;text-align:center;padding:10px 6px;border-radius:6px}.date-box strong,.date-box span{display:block}.date-box strong{font-size:1rem}.date-box span{font-size:.72rem;color:#c8d9e5}
.cta{background:linear-gradient(135deg,var(--green),#1e526d);color:white;padding:58px 0}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{font:800 2.4rem Georgia,serif;margin:0}.cta p{margin:8px 0 0}
.site-footer{background:#0e2e48;color:#c8d7e2}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:55px 0}.site-footer h3{color:white}.site-footer a{display:block;text-decoration:none;margin:6px 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:13px 0;font-size:.85rem}
.page-banner{height:330px;display:flex;align-items:center;position:relative;color:white;background-size:cover}.page-banner .container{position:relative;z-index:2}.page-banner h2{font:800 3.8rem Georgia,serif;margin:0}.page-banner p{text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--gold)}
.about-banner{background:linear-gradient(135deg,#486e87,#6c8754)}.academics-banner{background:linear-gradient(135deg,#496f91,#3c7055)}.gallery-banner{background-image:url('img/gallery/5.jpg');background-position:center 42%}.contact-banner{background:linear-gradient(135deg,#3c6f63,#4c6c88)}
.welcome-layout{display:grid;grid-template-columns:330px 1fr;gap:55px;align-items:start}
.portrait-card{position:sticky;top:20px;background:white;border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.portrait-placeholder{height:390px;display:grid;place-items:center;text-align:center;background:url('img/headteacher.jpeg') no-repeat center center / cover;color:white;font-weight:800;font-size:1.2rem}
.business-card-image{height:260px;background:#edf2f5 url('img/email-signature.jpg') no-repeat center center / contain}
.portrait-caption{padding:22px}.portrait-caption h3{margin:0;color:var(--navy)}.portrait-caption p{margin:4px 0 0}
.welcome-long p{margin:0 0 19px}.signature{margin-top:30px;padding-top:20px;border-top:1px solid #ddd}.signature strong,.signature span{display:block}.signature strong{font-family:Georgia,serif;color:var(--navy);font-size:1.25rem}
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.subject-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:35px}.subject-grid div{background:white;padding:22px 15px;border-radius:7px;text-align:center;font-weight:800;color:var(--navy);box-shadow:0 8px 22px rgba(20,49,73,.08)}
.gallery-modern{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.gallery-item{display:block;padding:0;background:white;border:0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;text-align:left;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.gallery-item:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(20,49,73,.17)}.gallery-item img{display:block;width:100%;height:230px;object-fit:cover;transition:transform .35s ease}.gallery-item:hover img{transform:scale(1.025)}.gallery-item span{display:block;padding:16px 18px;font-weight:800;color:var(--navy)}.gallery-featured{grid-column:span 2}.gallery-featured img{height:360px}
.lightbox{position:fixed;inset:0;background:rgba(4,16,26,.88);z-index:100;display:none;align-items:center;justify-content:center;padding:25px}.lightbox.open{display:flex}.lightbox-content{width:min(800px,100%);text-align:center;color:white}.lightbox-image{display:block;width:100%;max-height:65vh;object-fit:contain;border-radius:8px;background:#203747}.lightbox-close{position:absolute;right:25px;top:18px;color:white;background:none;border:0;font-size:2.5rem}
.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px}.contact-card{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid #e0e6ea}.contact-card>span{font-size:1.5rem}.contact-card h3,.contact-card p{margin:0}
.modern-form{padding:35px;border-radius:10px;box-shadow:var(--shadow);background:white}.modern-form h2{font-family:Georgia,serif;color:var(--navy);margin-top:0}.modern-form label{display:block;font-weight:800;margin:14px 0 6px}.modern-form input,.modern-form textarea{width:100%;padding:12px;border:1px solid #c9d4dc;border-radius:5px;background:#fbfcfd}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-note{font-size:.78rem;color:var(--muted)}.form-status{min-height:1.6em;margin-bottom:0;font-weight:700}.form-status.success{color:var(--green)}.form-status.error{color:#a51f1f}.modern-form button:disabled{cursor:wait;opacity:.7}
.map-section{padding:0 0 80px}.school-map{display:block;width:100%;height:330px;border:0;border-radius:9px;background:#dce6eb}
@media(max-width:850px){
 .top-strip-inner{flex-direction:column;gap:0}.flag{display:none}.menu-toggle{display:block}.nav-inner{display:block}.menu{display:none;flex-direction:column}.menu.open{display:flex}.menu a{padding:12px 0}
 .hero-slider{height:530px}.slider-btn{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}
 .intro-grid,.two-panel,.welcome-layout,.contact-layout,.headteacher-layout{grid-template-columns:1fr}.portrait-card{position:static;max-width:430px}.headteacher-portrait-card{width:min(100%,390px);margin:auto}.headteacher-copy{max-width:none}.headteacher-contact-card{margin-top:48px}
 .feature-grid{grid-template-columns:repeat(2,1fr)}.three-grid{grid-template-columns:1fr}.subject-grid{grid-template-columns:repeat(2,1fr)}.gallery-modern{grid-template-columns:repeat(2,1fr)}.gallery-featured{grid-column:span 2}
 .cta-inner{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .container{width:min(100% - 24px,1120px)}.branding{padding:13px 0}.crest{width:56px;height:56px}.brand h1{font-size:1.45rem}.brand p{font-size:.72rem}
 .hero-content h2{font-size:2.65rem}.hero-slider{height:520px}.section{padding:58px 0}.feature-grid,.gallery-modern,.stats-grid,.footer-grid{grid-template-columns:1fr}.gallery-featured{grid-column:auto}.gallery-featured img,.gallery-item img{height:240px}.stats-grid div{border-right:0;border-bottom:1px solid rgba(255,255,255,.13)}
 .page-banner{height:250px}.page-banner h2{font-size:2.65rem}.form-row{grid-template-columns:1fr}.subject-grid{grid-template-columns:1fr}.headteacher-layout{gap:34px}.headteacher-contact-card{margin-top:40px}
}
