/* Millat Academy High School — Home Page styles.
   Mobile-first, no frameworks. Theme: modern school + subtle Islamic identity
   (deep navy blue, soft blue tints, royal blue accent). Geometric pattern is decorative only. */
:root{
  --navy:#173B67; --navy-2:#3B82C4; --gold:#F6C945; --gold-dark:#8a6508;
  --bg:#F8F7F3; --cream:#ffffff; --soft:#EEF4F8; --ink:#263238; --muted:#5a6472;
  --line:#d8e2ea; --radius:14px; --shadow:0 10px 30px rgba(23,59,103,.12);
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --container:1160px;
  /* Subtle eight-point geometric lattice (decorative, low contrast) */
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23173B67' stroke-opacity='0.10'%3E%3Cpath d='M36 6l7 23 23 7-23 7-7 23-7-23-23-7 23-7z'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0 0 .5rem;color:var(--navy);text-wrap:balance}
p{margin:0 0 .85rem}
a{color:var(--navy-2)}
section[id]{scroll-margin-top:84px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.container{width:min(var(--container),100% - 2.5rem);margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.7rem 1.1rem;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.center{text-align:center;margin-top:1.25rem}
.config-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:1rem}
.config-note code{background:var(--soft);padding:.1rem .35rem;border-radius:4px}

/* Buttons — 44px+ touch targets */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.95rem;white-space:nowrap;
  padding:.8rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;min-height:48px}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:#173B67}
.btn--gold:hover{background:#dda91f;color:#173B67}
.btn--whatsapp{background:#25D366;color:#fff}
.btn--whatsapp:hover{background:#1da851;color:#fff}
.btn--whatsapp svg{flex:0 0 auto}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-2)}
.btn--outline{border-color:var(--navy);color:var(--navy);background:#fff}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:#fff;color:var(--navy)}
.btn--sm{padding:.6rem 1.1rem;min-height:44px;font-size:.88rem}
.btn--block{width:100%;margin-top:1rem}
.text-link{font-weight:600;color:var(--navy-2);text-decoration:none;border-bottom:2px solid var(--gold)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--gold-dark);margin:0 0 .4rem}
.eyebrow--light{color:#bfdbfe}

/* Topbar */
.topbar{background:var(--navy);color:#dce6f7;font-size:.82rem}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.45rem 0}
.topbar a{color:#fff;text-decoration:none}
.topbar__item{display:flex;align-items:center;gap:.4rem;margin:0}
.topbar__right{display:flex;align-items:center;gap:.6rem}
.topbar__dot{opacity:.5}
@media(max-width:700px){.topbar__item{display:none}.topbar__inner{justify-content:center}}

/* Header — compact on mobile, sticky with scroll transition */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(23,59,103,.14)}
.site-header.is-scrolled .header__inner{padding:.5rem 0}
.header__inner{display:flex;align-items:center;gap:1rem;padding:.7rem 0;transition:padding .25s ease}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;min-width:0}
.brand__mark{width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:var(--navy);color:#dbeafe;
  display:grid;place-items:center;font-family:var(--font-display);font-size:1.6rem;font-weight:700;position:relative}
.brand__mark::after{content:"";position:absolute;inset:4px;border:1px solid rgba(147,197,253,.6);border-radius:8px;pointer-events:none}
.brand__mark--sm{width:32px;height:32px;flex-basis:32px;font-size:1.1rem;border-radius:8px;display:inline-grid;vertical-align:middle;margin-right:.4rem}
.brand__mark--sm::after{inset:3px;border-radius:6px}
.brand__text{min-width:0}
.brand__name{display:block;font-size:1.02rem;color:var(--navy);line-height:1.2}
.brand__tagline{color:var(--muted);font-size:.75rem;letter-spacing:.02em;display:block}
.nav__list{display:flex;gap:.8rem;list-style:none;margin:0;padding:0}
.nav__link{text-decoration:none;color:var(--ink);font-weight:500;font-size:.88rem;padding:.4rem .1rem;border-bottom:2px solid transparent}
.nav__link:hover,.nav__link.is-active{color:var(--navy);border-color:var(--gold)}
.header__actions{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:1px solid var(--line);border-radius:10px;padding:.65rem;cursor:pointer;min-width:48px;min-height:44px;align-items:center;justify-content:center}
.nav-toggle span{width:22px;height:2px;background:var(--navy);display:block;border-radius:2px}
.mobile-menu{border-top:1px solid var(--line);background:#fff;padding:1rem 1.25rem 1.25rem}
.mobile-menu ul{list-style:none;margin:0 0 .5rem;padding:0;display:grid;gap:.15rem}
.mobile-menu a:not(.btn){display:block;padding:.7rem .3rem;text-decoration:none;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
@media(max-width:1120px){.nav,.header__actions .btn{display:none}.nav-toggle{display:flex}}
@media(max-width:480px){
  .header__inner{gap:.6rem;padding:.55rem 0}
  .brand{grid-template-columns:auto;gap:.55rem}
  .brand__mark{width:40px;height:40px;flex-basis:40px;font-size:1.3rem;border-radius:10px}
  .brand__name{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand__tagline{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Hero — fits small screens, readable overlay, swipe supported */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero__slides{position:relative;min-height:min(82vh,640px);display:grid}
.hero__slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease;position:relative;display:flex;align-items:flex-end;min-height:min(82vh,640px)}
.hero__slide.is-active{opacity:1;visibility:visible;position:relative}
.hero__slide picture,.hero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,59,103,.28) 0%,rgba(23,59,103,.58) 60%,rgba(23,59,103,.80) 100%)}
.hero__content{position:relative;z-index:2;padding:4rem 0 4.5rem;max-width:720px}
.hero__kicker{display:inline-block;background:rgba(246,201,69,.95);color:#173B67;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;margin:0 0 .9rem}
.hero__title{color:#fff;font-size:clamp(2rem,5.2vw,3.6rem);margin-bottom:.7rem}
.hero__sub{color:#e9f0ea;font-size:clamp(1rem,2.2vw,1.2rem);max-width:34rem}
.hero__ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}
.hero__controls{position:absolute;left:0;right:0;bottom:1.1rem;z-index:3;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.hero__arrow{pointer-events:auto;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.4rem;cursor:pointer;line-height:1}
.hero__arrow:hover{background:#fff;color:var(--navy)}
.hero__dots{display:flex;gap:.5rem;pointer-events:auto}
.hero__dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0;min-width:12px;min-height:12px}
.hero__dots button.is-active{background:var(--gold);border-color:var(--gold)}
@media(max-width:640px){.hero__slides,.hero__slide{min-height:470px}.hero__content{padding:3rem 0 4.25rem}}
@media(max-width:480px){.hero__ctas .btn{flex:1 1 100%}}

/* Islamic identity / values — cream + subtle geometric pattern, arch accents */
.values{background:var(--cream) var(--pattern);border-block:1px solid var(--line)}
.values__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.value-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.2rem;text-align:center;box-shadow:var(--shadow)}
.value__arch{width:54px;height:62px;margin:0 auto .8rem;background:var(--navy);color:#dbeafe;
  border-radius:50% 50% 12px 12px;display:grid;place-items:center;font-size:1.4rem;position:relative}
.value__arch::after{content:"";position:absolute;inset:5px;border:1px solid rgba(147,197,253,.6);border-radius:inherit;pointer-events:none}
.value-card h3{font-family:var(--font-body);font-size:1rem;margin:0 0 .35rem}
.value-card p{color:var(--muted);font-size:.88rem;margin:0}
.values__note{text-align:center;color:var(--muted);font-size:.85rem;margin:1.25rem 0 0}
@media(max-width:960px){.values__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.values__grid{grid-template-columns:1fr 1fr;gap:.7rem}.value-card{padding:1rem .7rem}.value-card p{font-size:.8rem}}

/* Highlights */
.highlights{background:var(--soft);padding:0 0 1rem}
.highlights__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;margin:-3rem 0 0;padding:0;position:relative;z-index:5}
.highlight{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--radius);padding:1rem .95rem;box-shadow:var(--shadow)}
.highlight dt{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;gap:.4rem;align-items:center}
.highlight__icon{color:var(--gold-dark)}
.highlight dd{margin:.3rem 0 0}
.highlight dd strong{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--navy)}
.highlight dd span{font-size:.82rem;color:var(--muted)}
@media(max-width:960px){.highlights__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.highlights__grid{grid-template-columns:repeat(2,1fr);margin-top:-2rem}}

/* Sections */
.section{padding:3.25rem 0}
@media(max-width:640px){.section{padding:2.25rem 0}}
.section__head{max-width:44rem;margin:0 auto 1.6rem;text-align:center}
.section__head h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.section__sub{color:var(--muted);margin:0}

/* Notices */
.notices{background:#fff}
.notices__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.25rem;align-items:start}
.notice--featured{background:var(--navy);color:#e9f0ea;border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.notice--featured::before{content:"";position:absolute;inset:0;background:var(--pattern);opacity:.5;pointer-events:none}
.notice--featured>*{position:relative}
.notice--featured h3{color:#fff;font-size:1.4rem}
.notice--featured time{color:#93c5fd;font-size:.85rem;font-weight:600}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--gold);color:#173B67;border-radius:999px;padding:.25rem .7rem;margin-bottom:.6rem}
.badge--urgent{background:#e5484d;color:#fff}
.badge--muted{background:var(--line);color:var(--muted)}
/* High-visibility notice category badges — category reads first */
.badge--holiday{background:#F39A3D;color:#fff}
.badge--exams{background:#173B67;color:#fff}
.badge--sports{background:#55A96A;color:#fff}
.badge--admissions{background:#3B82C4;color:#fff}
.badge--events{background:#F6C945;color:#263238}
.badge--results{background:#2E7D5B;color:#fff}
.badge--meeting{background:#546E7A;color:#fff}
.notice-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.notice-list li{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;display:flex;gap:1rem;justify-content:space-between;align-items:flex-start}
.notice-list h3{font-family:var(--font-body);font-size:1rem;margin:0 0 .15rem}
.notice-list time{font-size:.8rem;color:var(--muted);font-weight:600}
.notice-list p{font-size:.9rem;color:var(--muted);margin:.3rem 0 0}
@media(max-width:860px){.notices__grid{grid-template-columns:1fr}}
/* Mobile: show max 2 notices; "View All" expands the rest */
@media(max-width:640px){
  .notice-list li:nth-child(n+3){display:none}
  .notice-list.is-expanded li:nth-child(n+3){display:flex}
}

/* About */
.about{background:var(--soft)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.about__media{position:relative}
.about__media img{border-radius:18px 18px 18px 18px;box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}
.about__exp{position:absolute;left:1rem;bottom:-1.2rem;background:var(--navy);color:#fff;border-radius:14px;padding:.9rem 1.2rem;display:flex;gap:.7rem;align-items:center;box-shadow:var(--shadow)}
.about__exp strong{font-family:var(--font-display);font-size:2rem;line-height:1;color:#bfdbfe}
.tick-list{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.5rem}
.tick-list li{padding-left:1.8rem;position:relative}
.tick-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.3rem;height:1.3rem;background:var(--navy);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.75rem}
@media(max-width:860px){.about__grid{grid-template-columns:1fr}.about__exp{bottom:-1rem}}
/* Mobile: square About image so it never looks too tall */
@media(max-width:640px){.about__media img{aspect-ratio:1/1}}

/* Why / cards */
.why{background:#fff}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;background:#fff;transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card__icon{font-size:1.6rem}
.card__photo{width:64px;height:64px;border-radius:16px;object-fit:cover;background:var(--soft)}
.card h3{font-family:var(--font-body);font-size:1.05rem;margin:.6rem 0 .4rem}
.card p{color:var(--muted);font-size:.93rem;margin:0}
@media(max-width:860px){.cards-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards-3{grid-template-columns:1fr}}

/* Academics */
.academics{background:var(--navy) var(--pattern);color:#e9f0ea}
.academics h2{color:#fff}
.academics .section__sub{color:#b9c8e8}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.acad{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:1.4rem}
.acad h3{color:#fff;font-family:var(--font-body);font-size:1.02rem}
.acad__meta{color:#93c5fd;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.acad p:last-child{color:#c2d0e8;font-size:.9rem;margin:0}
.academics .btn--navy{background:#fff;color:var(--navy)}
@media(max-width:960px){.cards-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards-4{grid-template-columns:1fr}}
/* Mobile: show max 2 academic stages (rest on the Academics page) */
@media(max-width:640px){.academics .cards-4 .acad:nth-child(n+3){display:none}}

/* Facilities */
.facilities{background:var(--soft)}
.facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.facility{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.facility:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.facility img{aspect-ratio:16/10;object-fit:cover;width:100%}
.facility div{padding:1.1rem 1.2rem 1.3rem}
.facility h3{font-family:var(--font-body);font-size:1rem;margin:0 0 .3rem}
.facility p{color:var(--muted);font-size:.9rem;margin:0}
@media(max-width:900px){.facility-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.facility-grid{grid-template-columns:1fr}}

/* Activities */
.activities{background:#fff}
.activity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.activity{margin:0;border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid var(--line)}
.activity img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .4s ease}
.activity:hover img{transform:scale(1.04)}
.activity figcaption{position:absolute;inset:auto 0 0 0;padding:2.2rem 1rem .9rem;color:#fff;background:linear-gradient(transparent,rgba(23,59,103,.88))}
.activity figcaption strong{display:block;font-size:1rem}
.activity figcaption span{font-size:.82rem;opacity:.9}
@media(max-width:900px){.activity-grid{grid-template-columns:repeat(2,1fr)}.activity img{aspect-ratio:4/3}}

/* Principal */
.principal{background:var(--cream) var(--pattern)}
.principal__grid{display:grid;grid-template-columns:320px 1fr;gap:2rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.6rem;box-shadow:var(--shadow)}
.principal__photo img{border-radius:120px 120px 18px 18px;box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;width:100%}
.principal blockquote{font-family:var(--font-display);font-size:clamp(1.1rem,2.4vw,1.45rem);color:var(--navy);border-left:4px solid var(--gold);padding-left:1.1rem;margin:1rem 0}
.principal__name strong{display:block}
.principal__name span{color:var(--muted);font-size:.9rem}
@media(max-width:760px){.principal__grid{grid-template-columns:1fr;padding:1.25rem}.principal__photo{max-width:300px;margin-inline:auto}.principal__photo img{max-width:100%;border-radius:28px;object-position:top center;max-height:62vh;aspect-ratio:1/1}}

/* Gallery */
.gallery{background:#fff}
.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.g-item{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:zoom-in;background:var(--soft)}
.g-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.g-item:hover img{transform:scale(1.05)}
.g-item span{position:absolute;left:.7rem;top:.7rem;background:rgba(23,59,103,.88);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .7rem;border-radius:999px}
@media(max-width:760px){.gallery__grid{grid-template-columns:repeat(2,1fr)}}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(23,59,103,.92);display:flex;align-items:center;justify-content:center;padding:1rem}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(920px,94vw);max-height:82vh;border-radius:12px;object-fit:contain;background:#000}
.lightbox__close{position:absolute;top:1rem;right:1rem;background:#fff;border:0;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.1rem}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:0;width:48px;height:48px;border-radius:50%;font-size:1.5rem;cursor:pointer}
.lightbox__prev{left:1rem}.lightbox__next{right:1rem}

/* CTA — emerald with subtle pattern, elegant not promotional */
.cta{background:var(--navy) var(--pattern);color:#fff;padding:3rem 0;border-block:3px solid var(--gold)}
.cta h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.3rem)}
.cta p{color:#bccbe6}
.cta__inner{display:grid;grid-template-columns:1.4fr .8fr;gap:2rem;align-items:center}
.cta__btns{display:flex;flex-direction:column;gap:.8rem}
@media(max-width:760px){.cta__inner{grid-template-columns:1fr}}

/* Contact */
.contact{background:#fff}
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:start}
.contact__list{list-style:none;padding:0;display:grid;gap:.6rem;margin:1rem 0 1.3rem}
.contact__btns{display:flex;gap:.7rem;flex-wrap:wrap}
.contact__map iframe{width:100%;min-height:320px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
@media(max-width:860px){.contact__grid{grid-template-columns:1fr}}

/* Footer */
.footer{background:#173B67;color:#c3d2ec}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1.5rem;padding:2.5rem 0 1.75rem}
.footer h3{color:#fff;font-family:var(--font-body);font-size:.95rem;text-transform:uppercase;letter-spacing:.08em}
.footer__brand p{font-size:.92rem}
.brand__name--footer{color:#fff;font-weight:700}
.footer__tag{color:#93c5fd}
.footer__links{list-style:none;padding:0;display:grid;gap:.45rem;font-size:.92rem}
.footer__links a{color:#c3d2ec;text-decoration:none}
.footer__links a:hover{color:#fff;text-decoration:underline}
.social{display:flex;gap:.6rem;margin-top:1rem}
.social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;text-decoration:none}
.social a svg{display:block}
.social a:hover{background:var(--gold);color:#173B67}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding:1rem 0;font-size:.85rem}
.footer__bottom-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer__bottom p{margin:0}
.footer__bottom a{color:#fff}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ============ ABOUT PAGE (reuses home design system) ============ */
.page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;display:flex;align-items:flex-end;min-height:min(44vh,360px)}
.page-hero picture,.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero__content{position:relative;z-index:2;padding:3.5rem 0 2.5rem}
.page-hero h1{color:#fff;font-size:clamp(2rem,5vw,3.2rem);margin:.4rem 0 .5rem}
.page-hero p{color:#e9f0ea;font-size:clamp(1rem,2.2vw,1.2rem);max-width:36rem;margin:0}
.breadcrumb{list-style:none;display:flex;gap:.5rem;margin:0 0 .3rem;padding:0;font-size:.85rem}
.breadcrumb li+li::before{content:"/";margin-right:.5rem;color:var(--gold)}
.breadcrumb a{color:#fff;text-decoration:none;border-bottom:1px solid var(--gold)}
.breadcrumb [aria-current]{color:#bfdbfe}
@media(max-width:640px){.page-hero{min-height:300px}.page-hero__content{padding:3rem 0 2rem}}

.story{background:#fff}
.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.story__media{position:relative;padding-bottom:2.5rem}
.story__img-main{border-radius:18px;box-shadow:var(--shadow);aspect-ratio:16/10;object-fit:cover;width:100%}
.story__grid > :only-child{grid-column:1/-1}

/* ---- Preloader (home page) ---- */
#preloader{position:fixed;inset:0;z-index:999;background:var(--navy);display:flex;align-items:center;justify-content:center;transition:opacity .45s ease}
#preloader.is-done{opacity:0;pointer-events:none}
.preloader__inner{text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.preloader__logo{width:88px;height:88px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.preloader__inner p{margin:.8rem 0 0;font-weight:600;letter-spacing:.04em}
.preloader__bar{width:180px;height:4px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden;margin:1rem auto 0}
.preloader__bar span{display:block;height:100%;width:40%;background:var(--gold);border-radius:999px;animation:preload-slide 1.1s infinite ease-in-out}
@keyframes preload-slide{0%{transform:translateX(-110%)}100%{transform:translateX(460%)}}
.story__img-small{position:absolute;right:-.5rem;bottom:0;width:46%;border-radius:14px;border:4px solid #fff;box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}
.placeholder-note{font-size:.85rem;color:var(--muted);background:var(--soft);border:1px dashed var(--line);border-radius:10px;padding:.7rem .9rem}
.placeholder-note code{background:#fff;padding:.1rem .35rem;border-radius:4px}
@media(max-width:860px){.story__grid{grid-template-columns:1fr}.story__img-small{right:.5rem}}

.who{background:var(--soft)}

.vm{background:#fff}
.vm__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.vm__card{background:var(--cream) var(--pattern);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:16px;padding:1.6rem;box-shadow:var(--shadow)}
.vm__card h3{font-size:1.4rem}
.vm__card p{color:var(--ink);margin:0}
@media(max-width:760px){.vm__grid{grid-template-columns:1fr}}

.islamic{background:var(--navy) var(--pattern);color:#e9f0ea}
.islamic h2{color:#fff}
.islamic p{color:#bccbe6}
.islamic__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.islamic .tick-list li{color:#e9f0ea}
.islamic .tick-list li::before{background:#55A96A;color:#fff}
.islamic__cards{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.islamic .value-card{box-shadow:none}
@media(max-width:900px){.islamic__grid{grid-template-columns:1fr}.islamic__cards{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.islamic__cards{grid-template-columns:1fr 1fr;gap:.7rem}.islamic .value-card{padding:1rem .7rem}.islamic .value-card p{font-size:.8rem}}

.approach{background:#fff}
.approach__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.approach__grid li{border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.1rem;background:var(--soft)}
.approach__num{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--gold-dark);font-weight:700}
.approach__grid h3{font-family:var(--font-body);font-size:.98rem;margin:.4rem 0 .3rem}
.approach__grid p{font-size:.86rem;color:var(--muted);margin:0}
@media(max-width:960px){.approach__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.approach__grid{grid-template-columns:1fr}}

.school-values{background:var(--soft)}
.pill-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.pill-grid li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:999px;padding:.6rem 1.2rem;font-weight:600;font-size:.92rem;color:var(--navy);box-shadow:var(--shadow)}

/* Highlights strip on inner pages: no hero overlap */
.highlights--page{padding-top:2.5rem}
.highlights--page .highlights__grid{margin-top:0}
@media(max-width:560px){.highlights--page .highlights__grid{margin-top:0}}

/* ============ PRINCIPAL PAGE (reuses site design system) ============ */
.profile-meta{margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.profile-meta div{display:grid;grid-template-columns:130px 1fr;gap:.75rem;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.profile-meta dt{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.profile-meta dd{margin:0;font-weight:600;color:var(--navy)}
@media(max-width:480px){.profile-meta div{grid-template-columns:1fr;gap:.1rem}}

.msg{background:#fff}
.msg__inner{max-width:46rem;margin-inline:auto}
.msg__inner p{font-size:1.02rem}
.msg__lead{font-family:var(--font-display);font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--navy);border-left:4px solid var(--gold);padding-left:1.1rem}
/* ---- Administration messages: same blue-card theme as team cards ---- */
#principal-msg .principal__grid,#director-msg .principal__grid,#vice-principal-msg .principal__grid,#headmaster-msg .principal__grid{background:#fff;border:1px solid var(--line);border-top:5px solid var(--gold);color:var(--ink);box-shadow:var(--shadow)}
#principal-msg .principal__grid .eyebrow,#director-msg .principal__grid .eyebrow,#vice-principal-msg .principal__grid .eyebrow,#headmaster-msg .principal__grid .eyebrow{color:var(--gold-dark)}
#principal-msg .principal__grid h2,#director-msg .principal__grid h2,#vice-principal-msg .principal__grid h2,#headmaster-msg .principal__grid h2{color:var(--navy)}
#principal-msg .principal__grid .principal__body p,#director-msg .principal__grid .principal__body p,#vice-principal-msg .principal__grid .principal__body p,#headmaster-msg .principal__grid .principal__body p{color:var(--ink)}
#principal-msg .msg__lead,#director-msg .msg__lead,#vice-principal-msg .msg__lead,#headmaster-msg .msg__lead{color:var(--navy)}
#principal-msg .signature strong,#director-msg .signature strong,#vice-principal-msg .signature strong,#headmaster-msg .signature strong{color:var(--navy)}
#principal-msg .signature span,#director-msg .signature span,#vice-principal-msg .signature span,#headmaster-msg .signature span{color:var(--muted)}
#principal-msg .principal__photo img,#director-msg .principal__photo img,#vice-principal-msg .principal__photo img,#headmaster-msg .principal__photo img{border:3px solid var(--gold);aspect-ratio:1/1}
#principal-msg .placeholder-note,#director-msg .placeholder-note,#vice-principal-msg .placeholder-note,#headmaster-msg .placeholder-note{background:var(--soft);border-color:var(--line);color:var(--muted)}
#principal-msg .placeholder-note code,#director-msg .placeholder-note code,#vice-principal-msg .placeholder-note code,#headmaster-msg .placeholder-note code{background:#fff;color:var(--ink)}
.signature{margin-top:1.5rem}
.signature strong{display:block;font-size:1.1rem;color:var(--navy)}
.signature span{color:var(--muted);font-size:.9rem}

.vm__grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.vm__grid--3{grid-template-columns:1fr}}

.audiences{background:var(--soft)}
.philosophy{background:#fff}
.goals{background:var(--cream) var(--pattern)}
.goals__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
@media(max-width:860px){.goals__grid{grid-template-columns:1fr}}

.quote-band{background:var(--navy) var(--pattern);color:#fff;text-align:center;padding:2.75rem 0;border-block:3px solid var(--gold)}
.quote-band blockquote{font-family:var(--font-display);font-size:clamp(1.3rem,3.4vw,2rem);color:#fff;max-width:44rem;margin:0 auto .75rem;text-wrap:balance}
.quote-band p{color:#b9c8e8;font-size:.9rem;margin:0}
@media(max-width:640px){.quote-band{padding:2rem 0}}

/* ============ ADMINISTRATION PAGE (reuses site design system) ============ */
.admin-intro{background:#fff;padding-bottom:0}
.admin-intro__inner{max-width:46rem;margin-inline:auto;text-align:center}
.admin-intro__inner h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.team{background:#fff}
/* Four administrators, equal visual importance */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.team-card{background:linear-gradient(165deg,#2E6398 0%,#173B67 55%,#0C2540 100%);border:1px solid #0C2540;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1.1rem 1.4rem;transition:transform .2s ease,box-shadow .2s ease}
.team-card:hover{transform:translateY(-3px)}
.team-card img{width:128px;height:128px;flex:0 0 128px;border-radius:50%;object-fit:cover;object-position:top center;background:rgba(255,255,255,.15);border:3px solid var(--gold)}
.team-card div{padding:0;display:flex;flex-direction:column;gap:.15rem;flex:1;align-items:center}
.team-card h3{font-family:var(--font-body);font-size:1.05rem;margin:.9rem 0 0;color:#fff}
.team-card__role{color:var(--gold);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin:0}
.team-card__qual{color:#ffe9a8;font-size:.82rem;font-weight:600;margin:.15rem 0 0}
.sig-qual{display:block;color:var(--muted);font-size:.85rem;margin-top:.2rem}
.team-card p{font-size:.87rem;color:#d7e3f8;margin:.4rem 0 .7rem}
.team-card .text-link{margin-top:auto;color:#fff;font-weight:700}
@media(max-width:960px){.team-grid{grid-template-columns:repeat(4,1fr);gap:.7rem}.team-card{padding:1.1rem .7rem}.team-card img{width:96px;height:96px;flex-basis:96px}}
@media(max-width:640px){.team-grid{grid-template-columns:1fr}.team-card img{width:128px;height:128px;flex-basis:128px}}
/* Alternating message sections; mobile always photo-first */
.principal--alt{background:var(--soft)}
@media(min-width:761px){.principal__grid--flip .principal__photo{order:2}}
.vision-mini{background:#fff;padding-top:0}

/* ============ ACADEMICS PAGE (reuses site design system) ============ */
.curriculum{background:var(--soft)}
.subjects{background:#fff}
.assessment{background:var(--soft)}
.achievements{background:var(--cream) var(--pattern)}
.acad-highlights{background:var(--soft)}
.journey{background:#fff}
/* Class chips inside stage cards */
.chips{list-style:none;margin:.6rem 0 .8rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{background:var(--navy);color:#fff;font-weight:600;font-size:.82rem;border-radius:999px;padding:.32rem .8rem}
/* Step timelines: assessment cycle + educational journey */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem;counter-reset:step}
.steps li{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:1rem .8rem;text-align:center;position:relative;box-shadow:var(--shadow)}
.steps li strong{display:block;color:var(--navy);font-size:.95rem}
.steps li span{font-size:.8rem;color:var(--muted)}
.steps li:not(:last-child)::after{content:"›";position:absolute;right:-.85rem;top:50%;transform:translateY(-50%);color:var(--gold-dark);font-size:1.6rem;font-weight:700}
.assessment .steps li,.journey .steps li{background:#fff}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}.steps li:not(:last-child)::after{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr;max-width:24rem;margin-inline:auto}}

/* ============ ADMISSIONS PAGE (reuses site design system) ============ */
.avail{display:inline-block;font-size:.75rem;font-weight:700;color:var(--gold-dark);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem;margin-left:.3rem}
.steps--6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1100px){.steps--6{grid-template-columns:repeat(3,1fr)}.steps--6 li:not(:last-child)::after{display:none}}
/* Responsive eligibility table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
.table-wrap table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem}
.table-wrap caption{text-align:left;font-weight:700;color:var(--navy);padding:.9rem 1rem .4rem}
.table-wrap th,.table-wrap td{text-align:left;padding:.7rem 1rem;border-top:1px solid var(--line)}
.table-wrap thead th{background:var(--navy);color:#fff;border-top:0}
.table-wrap tbody th{color:var(--navy)}
/* Key-date rows */
.date-list{margin:0;padding:0;display:grid;gap:.6rem}
.date-list div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem 1.1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;box-shadow:var(--shadow)}
.date-list dt{font-weight:600;color:var(--navy)}
.date-list dd{margin:0;color:var(--muted);font-size:.9rem;white-space:nowrap}
/* Enquiry form */
.form-section{background:var(--soft)}
.form{max-width:46rem;margin-inline:auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem;box-shadow:var(--shadow)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field--full{grid-column:1/-1}
.field label{font-weight:600;font-size:.9rem;color:var(--navy)}
.field label span{color:#b42318}
.field label .optional{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:.7rem .9rem;min-height:48px;background:#fff;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,201,69,.45)}
.field [aria-invalid="true"]{border-color:#b42318}
.field__error{font-size:.82rem;color:#b42318;margin:0}
.form__actions{margin-top:1.25rem;display:flex;gap:.8rem;flex-wrap:wrap}
.form__status{margin:1rem 0 0;font-weight:600}
.form__status.is-success{color:#2E7D5B}
.form__status.is-error{color:#b42318}
@media(max-width:640px){.form{padding:1.4rem 1.1rem}.form__grid{grid-template-columns:1fr}}
/* FAQ accordion */
.faq-section{background:#fff}
.faq{max-width:46rem;margin-inline:auto;display:grid;gap:.6rem}
.faq__item{border:1px solid var(--line);border-radius:12px;background:var(--soft);overflow:hidden}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:none;border:0;padding:1rem 1.2rem;font:inherit;font-weight:600;color:var(--navy);cursor:pointer;text-align:left;min-height:56px}
.faq__q span{color:var(--gold-dark);font-size:1.3rem;line-height:1;flex-shrink:0;transition:transform .2s ease}
.faq__q[aria-expanded="true"] span{transform:rotate(45deg)}
.faq__a{padding:0 1.2rem 1.1rem}
.faq__a p{margin:0;color:var(--muted);font-size:.93rem}

/* ============ FACILITIES PAGE (reuses site design system) ============ */
.campus{background:#fff}
.campus-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.8rem}
.campus-grid figure{margin:0;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line)}
.campus-grid img{width:100%;height:100%;min-height:220px;object-fit:cover;transition:transform .35s ease}
.campus-grid figure:hover img{transform:scale(1.04)}
.campus-grid figcaption{position:absolute;left:.7rem;bottom:.7rem;background:rgba(23,59,103,.88);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .7rem;border-radius:999px}
.campus-feature img{min-height:320px}
@media(max-width:860px){.campus-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.campus-grid{grid-template-columns:1fr}.campus-grid img,.campus-feature img{min-height:0}}
/* Gallery category filter */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 1.25rem}
.filter-btn{border:2px solid var(--line);background:#fff;color:var(--navy);font-weight:600;font-size:.85rem;border-radius:999px;padding:.5rem 1.1rem;min-height:44px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.filter-btn:hover{border-color:var(--gold)}
.filter-btn.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.g-item[hidden]{display:none}

/* ============ GALLERY PAGE (reuses site design system) ============ */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.featured{background:var(--soft)}
.feature-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:repeat(2,1fr);gap:.8rem;min-height:420px}
.feature-grid .g-item:first-child{grid-row:1/-1}
.feature-grid .g-item:first-child img{height:100%}
.feature-grid .g-item figcaption{position:absolute;inset:auto 0 0 0;padding:2rem .9rem .8rem;color:#fff;background:linear-gradient(transparent,rgba(23,59,103,.88));text-align:left}
.feature-grid .g-item figcaption strong{display:block;font-size:.98rem}
.feature-grid .g-item figcaption span{font-size:.78rem;opacity:.9}
.feature-grid .g-item .badge{margin-bottom:.35rem}
.gallery-main{background:#fff}
.gallery-tools{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1rem}
.filter-bar--scroll{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:.4rem;margin:0;scrollbar-width:thin}
.filter-bar--scroll .filter-btn{flex-shrink:0}
.search-wrap{max-width:26rem;margin-inline:auto;width:100%}
.search-wrap input{font:inherit;width:100%;border:2px solid var(--line);border-radius:999px;padding:.65rem 1.2rem;min-height:48px;background:#fff;color:var(--ink)}
.search-wrap input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,201,69,.45)}
.result-count{text-align:center;color:var(--muted);font-size:.88rem;margin:0 0 1rem}
.album-active{text-align:center;font-size:.9rem;color:var(--muted)}
.album-active .text-link{background:none;border:0;cursor:pointer;font-size:.9rem}
.gallery__grid--page{grid-template-columns:repeat(3,1fr)}
.g-item figcaption{position:absolute;inset:auto 0 0 0;padding:1.8rem .8rem .7rem;color:#fff;background:linear-gradient(transparent,rgba(23,59,103,.88));text-align:left}
.g-item figcaption strong{display:block;font-size:.9rem}
.g-item .badge{font-size:.62rem;padding:.15rem .55rem;margin-bottom:.3rem}
.albums{background:var(--soft)}
.album-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.album-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.1rem;text-align:center;cursor:pointer;box-shadow:var(--shadow);font:inherit;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;min-height:48px}
.album-card:hover{transform:translateY(-3px)}
.album-card.is-active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,201,69,.45)}
.album-card h3{font-family:var(--font-body);font-size:1rem;margin:.6rem 0 .3rem}
.album-card p{font-size:.85rem;color:var(--muted);margin:0}
.album-card .album-count{display:inline-block;font-size:.75rem;font-weight:700;color:var(--gold-dark)}
/* Skeleton / empty / error states */
#gallerySkeleton{display:none}
#gallerySkeleton.is-loading{display:grid}
.skel{border-radius:12px;aspect-ratio:4/3;background:linear-gradient(100deg,var(--soft) 40%,#e2eaf5 50%,var(--soft) 60%);background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.gallery-empty,.gallery-error{text-align:center;border:1px dashed var(--line);border-radius:var(--radius);padding:2.5rem 1.5rem;background:var(--soft)}
.gallery-empty[hidden],.gallery-error[hidden]{display:none}
.gallery-empty h3,.gallery-error h3{font-size:1.3rem}
/* Lightbox caption + counter */
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem;max-width:min(920px,94vw)}
.lb-figure img{max-width:100%;max-height:74vh}
.lb-meta{display:flex;gap:.8rem;align-items:baseline;color:#dbe6f7;font-size:.9rem;text-align:center;flex-wrap:wrap;justify-content:center}
#lbCount{font-weight:700;color:var(--gold,#93c5fd);white-space:nowrap}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr 1fr;min-height:0}.album-grid{grid-template-columns:repeat(2,1fr)}.gallery__grid--page{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr 1fr}.feature-grid .g-item:first-child{grid-column:1/-1;grid-row:auto}.feature-grid .g-item:first-child img{aspect-ratio:16/10}}

/* ---- Site-wide announcement bar (all pages, via Settings) ---- */
.announce-bar{background:var(--navy);color:#fff;font-size:.88rem;font-weight:600;text-align:center;padding:.55rem 2.5rem .55rem 1rem;position:relative}
.announce-bar a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.announce-bar .announce-close{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;font-size:1rem;cursor:pointer;min-width:44px;min-height:44px}

/* ---- Principal intro (home + about): text only for now (reversible) ---- */
section[aria-labelledby="principalTitle"] .principal__photo{display:none}
section[aria-labelledby="principalTitle"] .principal__grid{grid-template-columns:1fr}

/* ---- Administration page: photos hidden for now (reversible) ---- */
body[data-page="administration"] .page-hero picture,
body[data-page="administration"] .team-card img,
body[data-page="administration"] .principal__photo{display:none}
body[data-page="administration"] .principal__grid{grid-template-columns:1fr}

/* Mobile: uniform 1:1 image ratio (hero slider excluded — it stays full-bleed) */
@media(max-width:640px){
  .about__media img,.facility img,.activity img,.principal__photo img,
  .g-item img,.story__img-main,.story__img-small,.team-card img,
  .campus-grid img{aspect-ratio:1/1}
  img.story__img-main{aspect-ratio:16/10}
}

/* ============ ADMIN PANEL (private page, reuses design system) ============ */
.admin-top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:100}
.admin-top__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.admin-top .brand__name{color:#fff}
.admin-top .brand__tagline{color:#bcd0ee}
.admin-top__right{display:flex;align-items:center;gap:.7rem}
.admin-top .btn--outline{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.admin-user{font-size:.88rem;color:#dbe6f7}
.admin-ver{font-size:.72rem;color:#bcd0ee;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:.1rem .55rem;white-space:nowrap}
.admin-login h1{font-size:clamp(1.6rem,3.6vw,2.2rem)}
.admin-panel h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:1rem}
.tabbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.tab-btn{border:2px solid var(--line);background:#fff;color:var(--navy);font-weight:600;font-size:.9rem;border-radius:999px;padding:.6rem 1.2rem;min-height:48px;cursor:pointer}
.tab-btn.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.tab-count{opacity:.75;font-weight:400}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.25rem}
.admin-card h2{font-size:1.2rem}
.field--check{flex-direction:row;gap:1.2rem;align-items:center}
.field--check label{display:flex;gap:.45rem;align-items:center;font-weight:500;color:var(--ink)}
.field--check input{width:auto;min-height:22px}
.rows{display:grid;gap:.7rem}
.row{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;box-shadow:var(--shadow)}
.row small{color:var(--muted)}
.row__actions{display:flex;gap:.5rem;flex-shrink:0;align-items:center}
.row__actions select{font:inherit;border:2px solid var(--line);border-radius:8px;padding:.45rem .6rem;min-height:44px;background:#fff}
.pill{display:inline-block;font-size:.72rem;font-weight:700;background:var(--soft);border:1px solid var(--line);color:var(--navy);border-radius:999px;padding:.15rem .6rem}
.pill--off{background:#fdecec;border-color:#f3c2c2;color:#b42318}
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.admin-photo{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.admin-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.admin-photo div{padding:.8rem 1rem}
@media(max-width:900px){.admin-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.row{flex-direction:column}.admin-grid{grid-template-columns:1fr}.admin-card{padding:1.2rem 1rem}}

/* ---- Website Content CMS (admin) ---- */
.cms-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.cms-chip{border:2px solid var(--line);background:#fff;color:var(--navy);font-weight:600;font-size:.85rem;border-radius:999px;padding:.55rem 1.1rem;min-height:44px;cursor:pointer}
.cms-chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.checkline{display:flex;gap:.5rem;align-items:center;font-weight:500;color:var(--ink)}
.checkline input{width:auto;min-height:22px}
.field__hint{display:block;font-size:.78rem;color:var(--muted);margin-top:.25rem}
.field input[type="file"]{margin-top:.4rem;font-size:.85rem}

/* ---- Dashboard cards: whole card clickable, view-link stays on top ---- */
.card{position:relative}
.stretched-link::after{content:"";position:absolute;inset:0}
.card .view-link{position:relative;z-index:2}

/* ---- Home sections: 4 cards on tablet/desktop, max 2 on mobile ---- */
@media(max-width:640px){
  .home-cards>*:nth-child(n+3){display:none}
}
img.brand__logo{width:48px;height:48px;max-width:56px;max-height:56px;flex:0 0 48px;border-radius:50%;object-fit:cover;background:#fff}
.brand__mark--sm img.brand__logo,.footer__brand img.brand__logo{width:32px;height:32px;flex-basis:32px}
@media(max-width:640px){img.brand__logo{width:40px;height:40px;flex-basis:40px}}

/* ---- Easy-form helpers: notice + photo live previews ---- */
.notice-preview{background:var(--soft);border:1px dashed var(--line);border-radius:12px;padding:1rem 1.1rem;margin-top:1rem}
.notice-preview h3{font-size:1.05rem;margin:.4rem 0 .15rem}
.notice-preview time{font-size:.82rem;color:var(--muted)}
.notice-preview p{margin:.35rem 0 0;font-size:.92rem}
.photo-preview{max-width:100%;max-height:220px;border-radius:12px;border:1px solid var(--line);object-fit:cover}

/* ---- Admin mobile-friendly ---- */
@media(max-width:640px){
  .admin-top__inner{flex-wrap:wrap;row-gap:.5rem}
  .admin-top__right{width:100%;display:flex;align-items:center;gap:.6rem}
  .admin-user{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #logoutBtn{flex:0 0 auto}
  .tabbar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
  .tab-btn{flex:0 0 auto}
  .cms-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
  .cms-chip{flex:0 0 auto}
  .admin-panel input,.admin-panel select,.admin-panel textarea,.admin-login input{font-size:16px}
  .row__actions{width:100%}
  .row__actions .btn{flex:1;min-height:48px}
  .row__actions select{flex:1;min-height:48px}
  .admin-card{padding:1.2rem 1rem}
  .form__actions .btn{flex:1;min-height:48px}
}