/* ===================================================================
   ADETOLA COMPREHENSIVE COLLEGE — DESIGN SYSTEM
   =================================================================== */

:root{
  /* ---- Brand colour tokens ---- */
  --c-ink:        #1A2030;   /* primary text */
  --c-ink-soft:   #4B5468;   /* secondary text */
  --c-navy:       #173B73;   /* primary brand blue (from crest) */
  --c-navy-deep:  #0C2451;   /* deep blue, headers/footers/overlays */
  --c-red:        #C8272D;   /* brand red (from crest + motto) */
  --c-red-deep:   #93181D;   /* hover/active red */
  --c-green:      #2C7A3F;   /* turf accent */
  --c-green-deep: #1C5429;   /* dark turf stripe */
  --c-gold:       #E2A33A;   /* sparing highlight (badges, stars) */
  --c-sand:       #FBF5E8;   /* warm section background */
  --c-paper:      #FFFFFF;   /* card / base background */
  --c-line:       #E7DFCC;   /* hairline borders on sand */
  --c-line-soft:  #E7E9EE;   /* hairline borders on white */

  /* ---- Type ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;


a, button{
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }   
    
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

  /* ---- Layout ---- */
  --container: 1240px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(12,36,81,0.07);
  --shadow-md: 0 14px 38px rgba(12,36,81,0.14);
  --shadow-red: 0 14px 30px rgba(200,39,45,0.28);

  --nav-h: 84px;
}

/* ---------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-ink);
  background:var(--c-paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--c-navy-deep);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; }
:focus-visible{
  outline:3px solid var(--c-gold);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--c-red); color:#fff; padding:10px 18px;
  z-index:999; border-radius:0 0 8px 0; font-weight:700;
}
.skip-link:focus{ left:0; }

/* ---------------------------------------------------------------
   Type helpers
   --------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  font-weight:800;
  color:var(--c-red);
}
.eyebrow::before{
  content:"";
  width:22px; height:3px;
  background:repeating-linear-gradient(115deg, var(--c-green) 0 5px, var(--c-green-deep) 5px 10px);
  border-radius:2px;
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--c-gold); }

.display-xl{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); }
.display-lg{ font-size:clamp(2rem, 3.8vw, 3rem); }
.display-md{ font-size:clamp(1.6rem, 2.6vw, 2.1rem); }

.lede{
  font-size:1.15rem;
  color:var(--c-ink-soft);
  max-width:640px;
}
.center{ text-align:center; margin-inline:auto; }

em.accent{
  font-style:italic;
  color:var(--c-red);
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:.96rem;
  padding:15px 30px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--c-red);
  color:#fff;
  box-shadow:var(--shadow-red);
}
.btn-primary:hover{ background:var(--c-red-deep); transform:translateY(-2px); }

.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.btn-outline:hover{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateY(-2px); }

.btn-navy{
  background:var(--c-navy);
  color:#fff;
}
.btn-navy:hover{ background:var(--c-navy-deep); transform:translateY(-2px); }

.btn-ghost{
  background:transparent;
  border-color:var(--c-navy);
  color:var(--c-navy);
}
.btn-ghost:hover{ background:var(--c-navy); color:#fff; transform:translateY(-2px); }

.btn-sm{ padding:10px 20px; font-size:.86rem; }
.btn-block{ width:100%; }

/* ---------------------------------------------------------------
   Header / Navigation
   --------------------------------------------------------------- */
.topbar{
  background:var(--c-navy-deep);
  color:#cfe0ff;
  font-size:.82rem;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; padding-bottom:8px;
  gap:16px;
  flex-wrap:wrap;
}
.topbar a{ color:#fff; font-weight:700; }
.topbar-left{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-item{ display:inline-flex; align-items:center; gap:7px; opacity:.92; }
.topbar-item svg{ width:14px; height:14px; flex-shrink:0; }

.site-header{
  position:sticky; top:0; z-index:500;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--c-line-soft);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 8px 24px rgba(12,36,81,.1); }

.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
  gap:18px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ width:50px; height:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{
  font-family:var(--font-display);
  font-size:1.08rem;
  color:var(--c-navy-deep);
  font-weight:700;
}
.brand-text span{
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-red);
  font-weight:800;
}

.nav-links{
  display:flex; align-items:center; gap:6px;
  list-style:none;
}
.nav-links a{
  display:inline-block;
  padding:10px 16px;
  font-weight:700;
  font-size:.94rem;
  color:var(--c-ink);
  border-radius:8px;
  position:relative;
}
.nav-links a::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:6px; height:3px;
  background:repeating-linear-gradient(115deg, var(--c-green) 0 5px, var(--c-green-deep) 5px 10px);
  border-radius:3px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.nav-links a:hover::after,
.nav-links a.is-active::after{ transform:scaleX(1); }
.nav-links a.is-active{ color:var(--c-navy-deep); }

.nav-cta{ display:flex; align-items:center; gap:10px; }

/* Portal Login — links out to the separate School Management System */
.nav-portal-btn{
  display:inline-flex; align-items:center; gap:7px;
}
.nav-portal-btn svg{ width:15px; height:15px; flex-shrink:0; }

.nav-portal-item{ margin-top:12px; display:none; }
.nav-portal-item a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--c-navy); color:#fff !important;
  border-radius:12px; border-bottom:none !important;
  font-weight:800 !important;
  padding:14px 6px !important;
}
.nav-portal-item a:hover{ background:var(--c-navy-deep); }
.nav-portal-item svg{ width:16px; height:16px; flex-shrink:0; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px;
  border-radius:10px;
  align-items:center; justify-content:center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; display:block;
  width:24px; height:2.5px;
  background:var(--c-navy-deep);
  border-radius:2px;
  position:relative;
  transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav-toggle span::before{ position:absolute; top:-8px; }
.nav-toggle span::after{ position:absolute; top:8px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width: 980px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 0 0;
    flex-direction:column; align-items:stretch;
    background:#fff;
    padding:14px 22px 30px;
    gap:2px;
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .nav-links.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links a{ padding:14px 6px; border-bottom:1px solid var(--c-line-soft); border-radius:0; }
  .nav-links a::after{ display:none; }
  .nav-cta .btn-sm-desktop{ display:none; }
  .nav-toggle{ display:flex; }
  .topbar-left{ display:none; }
  .nav-portal-item{ display:block; }
}

/* ---------------------------------------------------------------
   Hero (home)
   --------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(92vh, 800px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--c-navy-deep);
  padding-left: 10px;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
}
.hero-media video,
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(185deg, rgba(8,21,46,.55) 0%, rgba(8,21,46,.55) 38%, rgba(8,21,46,.88) 100%);
}
.hero-content{
  position:relative; z-index:2;
  color:#fff;
  padding:160px 0 130px;
  width:100%;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  padding:8px 16px 8px 10px;
  border-radius:999px;
  font-size:.78rem; font-weight:800; letter-spacing:.05em;
  margin-bottom:26px;
}
.hero-badge .dot{
  width:8px; height:8px; border-radius:50%; background:var(--c-gold);
  box-shadow:0 0 0 4px rgba(226,163,58,.25);
}
.hero h1{
  color:#fff;
  font-size:clamp(2.6rem, 6vw, 4.8rem);
  max-width:920px;
  margin-bottom:22px;
}
.hero h1 em{
  font-style:italic;
  color:#FFD9A6;
}
.hero p.lede{ color:#E7ECFB; max-width:560px; font-size:1.18rem; }
.hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }

.hero-stripe-edge{
  position:absolute; left:0; right:0; bottom:-2px; height:64px;
  background:repeating-linear-gradient(115deg, var(--c-green) 0 36px, var(--c-green-deep) 36px 72px);
  clip-path:polygon(0 38%, 100% 0, 100% 100%, 0 100%);
  z-index:1;
  opacity:.95;
}

/* ---------------------------------------------------------------
   Page banner (inner pages)
   --------------------------------------------------------------- */
.page-banner{
  position:relative;
  background:var(--c-navy-deep);
  color:#fff;
  padding:96px 0 76px;
  overflow:hidden;
}
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.34;
  filter:saturate(1.05);
}
.page-banner::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(9,24,53,.55), rgba(9,24,53,.94));
}
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ color:#fff; margin-bottom:14px; font-size:clamp(2.1rem,4.4vw,3.2rem); }
.page-banner p{ color:#DCE4F7; max-width:600px; font-size:1.08rem; margin-bottom:0;}
.crumb{
  display:flex; gap:8px; align-items:center;
  font-size:.82rem; font-weight:700; letter-spacing:.03em;
  color:#AFC2EC; margin-bottom:18px;
}
.crumb a{ color:#fff; }
.crumb a:hover{ text-decoration:underline; }

.banner-pitch::before{ background-image:url("../images/hero-pitch.jpg"); }
.banner-excursion::before{ background-image:url("../images/excursion-factory-01.jpg"); }
.banner-culture::before{ background-image:url("../images/culture-day.jpg"); }
.banner-facility::before{ background-image:url("../images/facility-pitch-building.jpg"); }
.banner-sports::before{ background-image:url("../images/sports-03.jpg"); }
.banner-bus::before{ background-image:url("../images/excursion-bus-03.jpg"); }

.banner-stripe{
  position:absolute; left:0; right:0; bottom:-1px; height:14px;
  background:repeating-linear-gradient(115deg, var(--c-green) 0 22px, var(--c-green-deep) 22px 44px);
  z-index:2;
}

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.section{ padding:96px 0; }
.section-sm{ padding:64px 0; }
.section-alt{ background:var(--c-sand); }
.section-navy{ background:var(--c-navy-deep); color:#fff; }
.section-navy h2{ color:#fff; }
.section-navy .lede{ color:#C9D5F0; }

.section-head{ max-width:720px; margin-bottom:54px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:.4em; }

/* ---------------------------------------------------------------
   Stats strip
   --------------------------------------------------------------- */
.stats-strip{
  background:var(--c-navy);
  position:relative;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.stat-item{
  text-align:center;
  padding:46px 18px;
  color:#fff;
  border-right:1px solid rgba(255,255,255,.14);
}
.stat-item:last-child{ border-right:none; }
.stat-num{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.6vw,2.9rem);
  font-weight:700;
  display:block;
  color:#fff;
}
.stat-num .unit{ color:var(--c-gold); }
.stat-label{
  font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  font-weight:700; color:#BCCBEE; margin-top:6px;
}
@media (max-width:760px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-item{ border-bottom:1px solid rgba(255,255,255,.14); }
}

/* ---------------------------------------------------------------
   Grids
   --------------------------------------------------------------- */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1020px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-5{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------
   Value cards
   --------------------------------------------------------------- */
.value-card{
  background:#fff;
  border:1px solid var(--c-line-soft);
  border-radius:var(--radius-md);
  padding:30px 26px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;
  position:relative;
  overflow:hidden;
}
.value-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.value-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:6px;
  background:repeating-linear-gradient(115deg, var(--c-green) 0 12px, var(--c-green-deep) 12px 24px);
}
.value-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--c-navy), var(--c-navy-deep));
  color:#fff;
  margin-bottom:18px;
}
.value-icon svg{ width:26px; height:26px; }
.value-card h3{ font-size:1.15rem; margin-bottom:8px; color:var(--c-navy-deep); }
.value-card p{ color:var(--c-ink-soft); font-size:.96rem; margin:0; }

/* ---------------------------------------------------------------
   Program cards
   --------------------------------------------------------------- */
.program-card{
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--c-line-soft);
  transition:transform .22s ease, box-shadow .22s ease;
  display:flex; flex-direction:column;
}
.program-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.program-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.program-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.program-card:hover .program-thumb img{ transform:scale(1.07); }
.program-tag{
  position:absolute; top:14px; left:14px;
  background:rgba(12,36,81,.82);
  color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}
.program-body{ padding:22px 22px 26px; flex:1; display:flex; flex-direction:column; }
.program-body h3{ font-size:1.2rem; margin-bottom:8px; }
.program-body p{ color:var(--c-ink-soft); font-size:.95rem; flex:1; }
.program-link{
  font-weight:800; color:var(--c-red); font-size:.9rem;
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
}
.program-link svg{ width:16px; height:16px; transition:transform .2s ease; }
.program-card:hover .program-link svg{ transform:translateX(4px); }

/* ---------------------------------------------------------------
   Founder / quote block
   --------------------------------------------------------------- */
.founder-card{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:36px;
  align-items:center;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:38px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--c-line-soft);
}
.founder-mono{
  width:170px; height:170px; border-radius:50%;
  background:linear-gradient(150deg, var(--c-navy), var(--c-navy-deep));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-size:3.1rem; font-weight:700;
  border:6px solid var(--c-sand);
  box-shadow:0 0 0 3px var(--c-red);
  margin-inline:auto;
}
.founder-quote{ font-family:var(--font-display); font-size:1.3rem; color:var(--c-navy-deep); font-style:italic; margin-bottom:14px; }
.founder-name{ font-weight:800; color:var(--c-ink); }
.founder-role{ color:var(--c-red); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:720px){
  .founder-card{ grid-template-columns:1fr; text-align:center; padding:30px 22px; }
}

/* ---------------------------------------------------------------
   Timeline ("yard line" motif)
   --------------------------------------------------------------- */
.timeline{ position:relative; padding-left:36px; }
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:4px;
  background:repeating-linear-gradient(180deg, var(--c-green) 0 14px, var(--c-green-deep) 14px 28px);
  border-radius:4px;
}
.timeline-item{ position:relative; padding-bottom:40px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-36px; top:2px;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:4px solid var(--c-red);
}
.timeline-year{
  font-family:var(--font-display); font-weight:700; color:var(--c-red);
  font-size:1.3rem; display:block; margin-bottom:4px;
}
.timeline-item h3{ font-size:1.1rem; margin-bottom:6px; }
.timeline-item p{ color:var(--c-ink-soft); margin:0; max-width:620px; }

/* ---------------------------------------------------------------
   Process steps (admissions — a real sequence, numbers earn their place)
   --------------------------------------------------------------- */
.process-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:22px;
}
@media (max-width:1020px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }
.process-step{
  background:#fff; border:1px solid var(--c-line-soft); border-radius:var(--radius-md);
  padding:28px 22px; position:relative; box-shadow:var(--shadow-sm);
}
.process-num{
  font-family:var(--font-display); font-weight:700; font-size:2.4rem;
  color:transparent;
  -webkit-text-stroke:2px var(--c-navy);
  display:block; margin-bottom:10px;
}
.process-step h3{ font-size:1.04rem; margin-bottom:8px; }
.process-step p{ font-size:.9rem; color:var(--c-ink-soft); margin:0; }
.process-arrow{
  display:none;
}
@media (min-width:1021px){
  .process-step:not(:last-child)::after{
    content:"";
    position:absolute; top:50%; right:-22px; width:22px; height:3px;
    background:repeating-linear-gradient(115deg, var(--c-green) 0 5px, var(--c-green-deep) 5px 10px);
  }
}

/* ---------------------------------------------------------------
   Checklist
   --------------------------------------------------------------- */
.check-list{ list-style:none; display:grid; gap:14px; }
.check-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.98rem; color:var(--c-ink-soft);
}
.check-list svg{ width:22px; height:22px; flex-shrink:0; color:var(--c-green); margin-top:1px; }

/* ---------------------------------------------------------------
   Accordion (FAQ)
   --------------------------------------------------------------- */
.accordion-item{
  border-bottom:1px solid var(--c-line);
}
.accordion-item:first-child{ border-top:1px solid var(--c-line); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px;
  font-family:var(--font-body); font-weight:800; font-size:1.02rem; color:var(--c-navy-deep);
}
.accordion-trigger .plus{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--c-navy); position:relative;
  transition:transform .25s ease, background .25s ease;
}
.accordion-trigger .plus::before,
.accordion-trigger .plus::after{
  content:""; position:absolute; background:var(--c-navy);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.accordion-trigger .plus::before{ width:12px; height:2px; }
.accordion-trigger .plus::after{ width:2px; height:12px; transition:opacity .2s ease; }
.accordion-item[data-open="true"] .plus{ background:var(--c-navy); transform:rotate(180deg); }
.accordion-item[data-open="true"] .plus::before,
.accordion-item[data-open="true"] .plus::after{ background:#fff; }
.accordion-item[data-open="true"] .plus::after{ opacity:0; }
.accordion-panel{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
}
.accordion-panel-inner{ padding:0 30px 24px 4px; color:var(--c-ink-soft); }

/* ---------------------------------------------------------------
   Gallery
   --------------------------------------------------------------- */
.filter-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:38px;
}
.filter-btn{
  border:2px solid var(--c-line);
  background:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-weight:800; font-size:.86rem;
  color:var(--c-ink-soft);
  cursor:pointer;
  transition:all .2s ease;
}
.filter-btn:hover{ border-color:var(--c-navy); color:var(--c-navy); }
.filter-btn.is-active{ background:var(--c-navy); border-color:var(--c-navy); color:#fff; }

.masonry{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  grid-auto-flow:dense;
}
@media (max-width:980px){ .masonry{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .masonry{ grid-template-columns:repeat(2,1fr); } }

.g-item{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  cursor:pointer;
  background:#0c1a33;
  aspect-ratio:1/1;
}
.g-item.tall{ grid-row:span 2; aspect-ratio:1/2.15; }
.g-item.wide{ grid-column:span 2; aspect-ratio:2.15/1; }
.g-item img,
.g-item video{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.g-item:hover img,
.g-item:hover video{ transform:scale(1.08); }
.g-item .g-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 14px 12px;
  background:linear-gradient(180deg, transparent, rgba(8,18,38,.88));
  color:#fff; font-size:.84rem; font-weight:700;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.g-item:hover .g-cap{ opacity:1; transform:translateY(0); }
.g-item .play-badge{
  position:absolute; top:12px; right:12px;
  width:38px;height:38px; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-navy-deep);
}
.g-item .play-badge svg{ width:16px; height:16px; }
.g-item[hidden]{ display:none; }

.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(7,14,30,.92);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ max-width:min(960px,90vw); max-height:84vh; position:relative; }
.lightbox-inner img,
.lightbox-inner video{ max-width:100%; max-height:84vh; border-radius:12px; display:block; margin-inline:auto; }
.lightbox-cap{ color:#cfd9f3; text-align:center; margin-top:14px; font-size:.92rem; }
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ background:rgba(255,255,255,.28); }
.lightbox-close{ top:-52px; right:0; width:40px; height:40px; }
.lightbox-prev,.lightbox-next{ top:50%; transform:translateY(-50%); width:46px; height:46px; }
.lightbox-prev{ left:-64px; }
.lightbox-next{ right:-64px; }
@media (max-width:760px){
  .lightbox-prev{ left:6px; } .lightbox-next{ right:6px; } .lightbox-close{ top:6px; right:6px; background:rgba(0,0,0,.5);}
}

/* ---------------------------------------------------------------
   CTA banner
   --------------------------------------------------------------- */
.cta-banner{
  position:relative;
  background:var(--c-red);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:54px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-banner::before{
  content:"";
  position:absolute; right:-60px; top:-60px; width:280px; height:280px;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 18px, transparent 18px 36px);
  border-radius:50%;
}
.cta-banner h2{ color:#fff; margin-bottom:10px; }
.cta-banner p{ color:#FFE2E2; margin:0; max-width:480px; }
.cta-text{ position:relative; z-index:1; }
.cta-actions{ position:relative; z-index:1; display:flex; gap:14px; flex-wrap:wrap; }
.cta-banner .btn-primary{ background:#fff; color:var(--c-red); box-shadow:0 14px 30px rgba(0,0,0,.22); }
.cta-banner .btn-primary:hover{ background:#FFF3F3; }

/* ---------------------------------------------------------------
   Forms
   --------------------------------------------------------------- */
.field{ margin-bottom:20px; }
.field label{
  display:block; font-weight:800; font-size:.86rem; margin-bottom:8px; color:var(--c-navy-deep);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1.6px solid var(--c-line);
  background:#fff;
  font-family:inherit;
  font-size:.97rem;
  color:var(--c-ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--c-navy);
  box-shadow:0 0 0 4px rgba(23,59,115,.12);
}
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.84rem; color:var(--c-ink-soft); margin-top:-4px; }
.form-status{
  margin-top:18px; padding:14px 18px; border-radius:10px;
  background:#EAF6EC; color:#1C5429; font-weight:700; font-size:.92rem;
  display:none;
}
.form-status.is-visible{ display:block; }

/* ---------------------------------------------------------------
   Contact cards
   --------------------------------------------------------------- */
.campus-card{
  background:#fff; border:1px solid var(--c-line-soft); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-sm);
}
.campus-card h3{ font-size:1.05rem; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.campus-card h3 svg{ width:20px; height:20px; color:var(--c-red); flex-shrink:0; }
.campus-card p{ color:var(--c-ink-soft); font-size:.94rem; margin:0; }

.contact-line{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--c-line-soft);
  font-weight:700; color:var(--c-ink);
}
.contact-line svg{ width:20px; height:20px; color:var(--c-red); flex-shrink:0; }
.contact-line a:hover{ color:var(--c-red); }

.map-frame{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--c-line-soft);
  box-shadow:var(--shadow-sm); height:340px;
}
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer{ background:var(--c-navy-deep); color:#C9D5F0; padding-left: 10px;}
.footer-top{ padding:74px 0 46px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px;
}
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer-brand img{ width:48px; }
.footer-brand strong{ color:#fff; font-family:var(--font-display); font-size:1.1rem; display:block; }
.footer-brand span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-gold); font-weight:800; }
.footer-col h4{
  color:#fff; font-family:var(--font-body); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:800; margin-bottom:18px;
}
.footer-col p{ color:#AEC0E8; font-size:.92rem; }
.footer-links{ list-style:none; display:grid; gap:11px; }
.footer-links a{ color:#C9D5F0; font-size:.94rem; }
.footer-links a:hover{ color:#fff; text-decoration:underline; }
.footer-addr{ font-size:.9rem; color:#AEC0E8; margin-bottom:16px; line-height:1.5; }
.footer-addr strong{ color:#fff; display:block; margin-bottom:3px; }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.social-row a:hover{ background:var(--c-red); }
.social-row svg{ width:17px; height:17px; color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.84rem; color:#8FA4D4;
}
.footer-bottom a{ color:#8FA4D4; }
.footer-bottom a:hover{ color:#fff; }

/* ---------------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------------
   Misc helpers
   --------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:36px; } }
.img-frame{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); position:relative; }
.img-frame img{ width:100%; height:100%; object-fit:cover; }
.badge-float{
  position:absolute; bottom:-22px; left:-22px;
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:18px 22px; display:flex; align-items:center; gap:14px;
}
.badge-float .num{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:var(--c-red); }
.badge-float .lbl{ font-size:.78rem; color:var(--c-ink-soft); font-weight:700; max-width:110px; line-height:1.25; }
@media (max-width:560px){ .badge-float{ left:12px; bottom:-18px; padding:12px 16px; } }

.tag-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--c-sand); border:1px solid var(--c-line);
  padding:7px 14px; border-radius:999px; font-size:.82rem; font-weight:700; color:var(--c-navy-deep);
}

hr.divider{
  border:none; height:10px; margin:0;
  background:repeating-linear-gradient(115deg, var(--c-green) 0 26px, var(--c-green-deep) 26px 52px);
}

.whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:600;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .2s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:28px; height:28px; color:#fff; }

@media (max-width:760px){
  .section{ padding:64px 0; }
  .founder-card{ padding:26px; }
  .cta-banner{ padding:34px; }
}