/* ==========================================================================
   Loxford International College — static build
   ========================================================================== */

:root{
  --red:      #CA141D;
  --blue:     #0673B7;
  --navy:     #052A65;
  --ink:      #101214;
  --grey:     #525252;
  --muted:    #B3BCD1;
  --light:    #ECF0F9;
  --white:    #FFFFFF;

  --container: 1200px;
  --header-h:  92px;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  color:var(--grey);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  margin:0;
  color:var(--ink);
  font-weight:700;
  line-height:1.4;
}
h1{ font-size:44px; line-height:1.38; }
h2{ font-size:38px; line-height:1.5; }
h3{ font-size:32px; line-height:1.5; }
h4{ font-size:28px; line-height:1.5; }
h5{ font-size:24px; line-height:1.5; }
h6{ font-size:20px; line-height:1.5; }

p{ margin:0 0 16px; }
p:last-child{ margin-bottom:0; }

a{ color:var(--blue); text-decoration:none; transition:color .25s ease; }
a:hover{ color:var(--red); }

img{ max-width:100%; height:auto; display:block; }

ul{ margin:0; padding:0; list-style:none; }

/* The gutter sits outside the 1200px content width, so cards measure the
   same as the original design rather than 40px narrower. */
.container{
  width:100%;
  max-width:calc(var(--container) + 40px);
  margin-inline:auto;
  padding-inline:20px;
}

/* ---------- shared bits ---------- */

.eyebrow{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:14px;
}
.eyebrow--light{ color:var(--muted); }

.section{ padding:96px 0; }
.section--flush{ padding:0; }
.section--light{ background:var(--light); }
.section--navy{ background:var(--navy); color:var(--muted); }
.section--navy h2,.section--navy h3{ color:var(--white); }

.section-head{ max-width:760px; margin-bottom:56px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head p{ margin-top:16px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 28px;
  border:0;
  border-radius:0;
  font-family:var(--font);
  font-size:16px;
  font-weight:700;
  line-height:1.75;
  color:var(--white);
  background:var(--red);
  cursor:pointer;
  transition:background-color .3s ease, color .3s ease;
}
.btn:hover,.btn:focus-visible{ background:var(--blue); color:var(--white); }

/* the secondary hero button is a solid white block, not an outline */
.btn--ghost{
  background:var(--white);
  color:var(--ink);
}
.btn--ghost:hover{ background:var(--blue); color:var(--white); }

.btn--outline{
  background:transparent;
  color:var(--navy);
  box-shadow:inset 0 0 0 2px var(--navy);
}
.btn--outline:hover{ background:var(--navy); color:var(--white); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:relative;
  z-index:100;
  background:var(--white);
}

/* ---------- top bar: logo + contact details ---------- */

.header-top{ border-bottom:2px solid var(--light); }

.header-top .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  min-height:103px;
}

.brand{ flex:0 0 auto; }
.brand img{ width:304px; }

.header-contacts{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:32px;
}

.header-contact{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-contact .ico{
  display:grid;
  place-items:center;
  width:40px; height:40px;
  flex:0 0 auto;
  background:var(--blue);
  color:var(--white);
}
.header-contact .ico svg{ width:16px; height:16px; }

.header-contact .label{
  display:block;
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  color:var(--grey);
}
.header-contact .value{
  display:block;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  color:var(--ink);
}
.header-contact a.value:hover{ color:var(--red); }

/* ---------- nav row ---------- */

.header-main .container{
  display:flex;
  align-items:center;
  gap:32px;
  min-height:76px;
}

.nav ul{
  display:flex;
  align-items:center;
}

.nav li{ margin-right:68px; }
.nav li:last-child{ margin-right:0; }

.nav a{
  display:block;
  font-size:16px;
  font-weight:400;
  text-transform:uppercase;
  color:var(--ink);
  transition:color .25s ease;
}
.nav a:hover{ color:var(--blue); }
.nav a.is-active{ color:var(--red); }

.header-cta{ flex:0 0 auto; margin-inline-start:auto; }
.header-cta .btn{ padding:12px 24px; font-size:16px; }

/* the in-drawer CTA is only for the mobile menu */
.nav > .btn{ display:none; }

.nav-toggle,.nav-close{
  display:none;
  width:46px; height:46px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--navy);
  cursor:pointer;
}
.nav-toggle svg,.nav-close svg{ width:26px; height:26px; margin-inline:auto; }

.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:98;
  background:rgba(5,42,101,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
body.nav-open .nav-backdrop{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:48px;
  min-height:918px;
  padding-top:156px;
  background:var(--navy) top center / cover no-repeat;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.8;
  background:linear-gradient(90deg, var(--ink) 25%, rgba(16,18,20,0) 65%);
}
.hero > *{ position:relative; z-index:1; }

.hero .container{ padding-bottom:0; }

.hero-copy{ max-width:620px; }

.hero-copy h1{
  font-size:52px;
  line-height:1.19;
  color:var(--white);
}

.hero-copy h1 .mark{
  position:relative;
  display:inline-block;
  white-space:nowrap;
}
.hero-copy h1 .mark svg{
  position:absolute;
  left:0; right:0; bottom:-16px;
  width:100%; height:26px;
  overflow:visible;
}
.hero-copy h1 .mark svg path{
  fill:none;
  stroke:var(--red);
  stroke-width:6;
  stroke-linecap:round;
}

.hero-copy p{
  margin-top:34px;
  max-width:520px;
  font-size:17px;
  color:rgba(255,255,255,.82);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:36px;
}

/* ---------- the three panels anchored to the bottom of the hero ---------- */

.hero-panels{
  width:100%;
  min-height:292px;
}
.hero-panels .container{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;
  min-height:292px;
  padding-inline:0;
}
.hero-panels .hero-panel{ min-width:0; }

/* Content is anchored to the bottom so the titles and paragraphs line up
   across all three panels even though the panels themselves are stepped. */
.hero-panel{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:24px;
  padding:32px;
  color:var(--white);
}

.hero-panel--navy{ min-height:208px; background:var(--navy); }
.hero-panel--blue{ min-height:212px; background:linear-gradient(180deg,var(--blue) 0%,var(--navy) 100%); }
.hero-panel--red { min-height:292px; background:var(--red); }

.hero-panel h3{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:clamp(18px, 1.72vw, 24px);
  font-weight:700;
  line-height:1.3;
  color:var(--white);
  /* "Recognized Qualifications" runs to two lines while the other two fit
     on one, so every heading reserves two lines and they stay level. */
  min-height:2.6em;
}
.hero-panel h3 svg{
  width:clamp(26px, 2.4vw, 36px);
  height:clamp(26px, 2.4vw, 36px);
  flex:0 0 auto;
}

.hero-panel p{
  font-size:16px;
  line-height:28px;
  color:var(--white);
}

/* the avatar stack + "2K+" badge inside the red panel */
.hero-avatars{ display:flex; align-items:center; }

.hero-avatars img,
.hero-avatars .count{
  width:48px; height:48px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid var(--white);
  margin-right:-12px;
}
.hero-avatars img{ object-fit:cover; }
.hero-avatars .count{
  display:grid;
  place-items:center;
  margin-right:0;
  background:var(--blue);
  font-size:16px;
  font-weight:700;
  color:var(--white);
}

/* ==========================================================================
   Welcome / stats
   ========================================================================== */

.welcome-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}

.welcome-intro .kicker{
  display:block;
  font-size:20px;
  font-weight:700;
  color:var(--red);
  margin-bottom:8px;
}
.welcome-intro .kicker span{ display:block; color:var(--navy); font-size:32px; }
.welcome-intro h2{ margin:24px 0 20px; }

.stats{ display:flex; flex-direction:column; }

/* Each figure sits in its own panel with a thick coloured edge, the first
   one picked out in white and red. */
.stat{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:24px;
  align-items:center;
  padding:28px 30px;
  background:var(--light);
  border-left:6px solid var(--blue);
}
.stat:first-child{
  background:var(--white);
  border-left-color:var(--red);
}

.stat-figure{ text-align:left; }
.stat-label{
  display:block;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey);
}
.stat-value{
  display:block;
  font-size:48px;
  font-weight:700;
  line-height:1.2;
  color:var(--navy);
}
.stat p{ font-size:15px; }

/* ---------- full-width campus image ---------- */

.campus-band img{ width:100%; object-fit:cover; }

/* ==========================================================================
   Partners
   ========================================================================== */

.partners-head{ text-align:center; max-width:820px; margin:0 auto 48px; }
.partners-head p{ color:var(--muted); }

/* Attestation marks — shown at their real colours on a light plaque so the
   official seals stay legible and are not restyled. */
.auth-marks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:24px;
  align-items:stretch;
}

.auth-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin:0;
  padding:28px 20px;
  background:var(--white);
  text-align:center;
}
.auth-mark img{
  height:104px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}
.auth-mark figcaption{
  font-size:14px;
  line-height:1.5;
  font-weight:600;
  color:var(--navy);
  margin-top:auto;
}

.auth-note{
  max-width:820px;
  margin:32px auto 0;
  font-size:13.5px;
  line-height:1.7;
  text-align:center;
  color:var(--muted);
}

/* ==========================================================================
   Academics
   ========================================================================== */

.academics-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:72px;
  align-items:center;
}

.degree-list{ display:grid; gap:24px; }

.degree{
  padding:28px 30px;
  background:var(--light);
  border-left:4px solid var(--red);
  transition:transform .3s ease, box-shadow .3s ease;
}
.degree:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(5,42,101,.12);
}
.degree h5{ margin-bottom:10px; color:var(--navy); }
.degree p{ font-size:15px; }

/* ==========================================================================
   Specializations
   ========================================================================== */

.spec-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.spec-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:488px;
  padding:24px;
  color:var(--white);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  isolation:isolate;
}
.spec-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(5,42,101,.15) 0%, rgba(5,42,101,.92) 78%);
  transition:background .35s ease;
}
.spec-card:hover::before{
  background:linear-gradient(180deg, rgba(202,20,29,.25) 0%, rgba(202,20,29,.92) 78%);
}
.spec-card h5{ color:var(--white); margin-bottom:12px; }
.spec-card p{
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.86);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease;
}
.spec-card:hover p,.spec-card:focus-within p{ max-height:260px; opacity:1; }

/* ==========================================================================
   Learning activities (2 wide cards)
   ========================================================================== */

.activity-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}

.activity-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:32px;
  min-height:379px;
  padding:32px;
  color:var(--white);
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
/* Each banner is tinted with a brand colour rather than a neutral scrim. */
.activity-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(202,20,29,.82);
}
.activity-card:nth-child(even)::before{ background:rgba(6,115,183,.82); }

.activity-card h2{ color:var(--white); font-size:28px; max-width:340px; }

.activity-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
.activity-foot p{ color:var(--white); max-width:290px; font-size:16px; }

.activity-arrow{
  display:grid;
  place-items:center;
  width:72px; height:72px;
  flex:0 0 auto;
  color:var(--white);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  transition:background-color .3s ease, color .3s ease;
}
.activity-card:hover .activity-arrow{ background:var(--white); color:var(--ink); }
.activity-arrow svg{ width:24px; height:24px; }

/* ==========================================================================
   Campus life
   ========================================================================== */

.campus-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
}
.campus-grid .campus-card{ min-height:640px; padding:40px; }

/* ---------- faculties: facility tiles ---------- */

.facility-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.facility-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:488px;
  padding:24px;
  color:var(--white);
  background:var(--red) center / cover no-repeat;
  isolation:isolate;
  overflow:hidden;
}
/* The wash lifts on hover, leaving the tile a flat brand red. */
.facility-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:transparent;
  background-image:linear-gradient(180deg, rgba(5,42,101,.2) 0%, rgba(5,42,101,.88) 78%);
  transition:background-color .3s ease, background-image .3s ease;
}
.facility-card:hover::before{
  background-color:var(--red);
  background-image:none;
}

.facility-card h5{
  display:flex;
  align-items:flex-end;
  /* Two lines are reserved so every title in a row shares one baseline. */
  min-height:2.6em;
  margin-bottom:12px;
  font-size:24px;
  line-height:1.3;
  color:var(--white);
}
.facility-card p{
  font-size:16px;
  line-height:1.6;
  color:var(--white);
}

.campus-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:400px;
  padding:30px;
  color:var(--white);
  background-size:cover;
  background-position:center;
  isolation:isolate;
  transition:transform .35s ease;
}
.campus-card:hover{ transform:translateY(-6px); }
.campus-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(5,42,101,.1) 0%, rgba(5,42,101,.9) 75%);
}
.campus-card h5{ color:var(--white); font-size:22px; margin-bottom:12px; }
.campus-card p{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.85); }

/* ==========================================================================
   Why us
   ========================================================================== */

.why-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:72px;
  align-items:center;
}

.why-media img{ width:100%; }

.feature-list{ display:grid; gap:32px; }

.feature{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:22px;
  align-items:start;
}
.feature-icon{
  display:grid;
  place-items:center;
  width:64px; height:64px;
  background:var(--light);
  color:var(--red);
}
.feature-icon svg{ width:30px; height:30px; }
.feature h6{ margin-bottom:8px; color:var(--navy); }
.feature p{ font-size:15px; }

/* ==========================================================================
   Steps
   ========================================================================== */

.steps-head{ max-width:660px; margin-bottom:60px; }
.steps-head h2{ margin-bottom:16px; }
.steps-head h2 span{ display:block; }
.steps-head p{ max-width:540px; }

/* Each step is a full-width row: number + title on the left, copy on the right. */
.steps{
  display:flex;
  flex-direction:column;
  gap:56px;
}

.step{
  display:grid;
  /* The label column shrinks with the viewport instead of forcing a
     515px track that would push the page sideways on a phone. */
  grid-template-columns:minmax(0,515px) minmax(0,1fr);
  gap:56px;
  align-items:start;
}

.step-head{
  display:flex;
  align-items:center;
  gap:16px;
}

.step-num{
  display:grid;
  place-items:center;
  width:56px; height:56px;
  flex:0 0 auto;
  font-size:24px;
  font-weight:700;
  color:var(--white);
  background:var(--red);
}

.step h4{
  font-size:28px;
  line-height:1.5;
  color:var(--ink);
}
.step p{ max-width:540px; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band{
  position:relative;
  background:var(--navy);
  overflow:hidden;
}
.cta-band .container{
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;
  align-items:end;
  min-height:300px;
}
.cta-copy{ padding:72px 0; max-width:640px; }
.cta-copy h2{ color:var(--white); }
.cta-copy p{ margin:16px 0 32px; color:var(--muted); }
.cta-media{ align-self:end; }
.cta-media img{ max-height:340px; width:auto; }

/* ==========================================================================
   Testimonials
   ========================================================================== */

/* Horizontal slider, two panels in view, driven by scroll-snap so it needs
   no library — the dots below simply scroll it. */
.testimonial-slider{
  display:flex;
  gap:32px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:4px;
}
.testimonial-slider::-webkit-scrollbar{ display:none; }

.testimonial{
  flex:0 0 calc((100% - 32px) / 2);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:32px;
  background:var(--light);
}

.testimonial-author{
  display:flex;
  align-items:center;
  gap:18px;
  font-weight:700;
  color:var(--navy);
}
.testimonial-author img{
  width:88px; height:88px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
}
.testimonial-author span{ font-size:16px; }

.testimonial blockquote{
  margin:0;
  font-size:16px;
  line-height:28px;
  color:var(--grey);
}

.slider-dots{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:36px;
}
.slider-dots button{
  width:10px; height:10px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--muted);
  cursor:pointer;
  transition:background-color .25s ease, transform .25s ease;
}
.slider-dots button:hover{ background:var(--blue); }
.slider-dots button.is-active{ background:var(--red); transform:scale(1.3); }

/* ==========================================================================
   News
   ========================================================================== */

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.news-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  box-shadow:0 10px 30px rgba(5,42,101,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.news-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(5,42,101,.15); }
.news-thumb{ aspect-ratio:16/10; overflow:hidden; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.news-card:hover .news-thumb img{ transform:scale(1.06); }
.news-body{ padding:28px; }
.news-date{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:10px;
}
.news-body h6{ margin-bottom:10px; font-size:19px; color:var(--navy); }
.news-body p{ font-size:15px; line-height:1.6; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  background:var(--navy);
  color:var(--white);
  padding-top:72px;
}
.site-footer h6{ color:var(--white); margin-bottom:24px; font-size:24px; }
.site-footer p{ color:var(--white); font-size:16px; }
.site-footer a{ color:var(--white); }
.site-footer a:hover{ color:var(--muted); }

.footer-grid{
  display:grid;
  grid-template-columns:384px minmax(0,588px);
  justify-content:space-between;
  gap:48px;
  padding-bottom:56px;
}

.footer-brand img{ width:230px; margin-bottom:24px; filter:brightness(0) invert(1); }
.footer-brand p{ max-width:384px; }

.footer-contact address{
  font-style:normal;
  font-size:16px;
  line-height:1.9;
  color:var(--white);
}

.socials{ display:flex; gap:20px; margin-top:28px; }
.socials a{
  display:grid;
  place-items:center;
  color:#69727D;
  transition:color .3s ease;
}
.socials a:hover{ color:var(--white); }
.socials svg{ width:24px; height:24px; }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:16px 32px;
  justify-content:space-between;
  align-items:center;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:16px;
}
.footer-bottom ul{ display:flex; gap:32px; }

/* ---------- floating whatsapp ---------- */

.whatsapp-float{
  position:fixed;
  right:24px; bottom:24px;
  z-index:90;
  display:grid;
  place-items:center;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  color:var(--white);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:transform .3s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); color:var(--white); }
.whatsapp-float svg{ width:30px; height:30px; display:block; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .partners-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Inner page hero
   ========================================================================== */

.page-hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:478px;
  padding:64px 0;
  background:var(--navy) center / cover no-repeat;
  color:var(--white);
  isolation:isolate;
}
/* Flat dark wash, exactly as the original — the blue tone comes from the
   photographs themselves, not from the overlay. */
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--ink);
  opacity:.7;
}
.page-hero h1{ color:var(--white); max-width:760px; }
.page-hero p{ margin-top:18px; max-width:620px; color:rgba(255,255,255,.85); }

.breadcrumb{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:18px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--white); }

/* ---------- generic content cards used by inner pages ---------- */

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.card-grid--2{ grid-template-columns:repeat(2,1fr); }

.info-card{
  padding:34px 30px;
  background:var(--white);
  box-shadow:0 10px 30px rgba(5,42,101,.08);
  border-top:4px solid var(--blue);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.info-card:hover{
  transform:translateY(-6px);
  border-color:var(--red);
  box-shadow:0 22px 48px rgba(5,42,101,.15);
}
.info-card h5{ margin-bottom:12px; font-size:21px; color:var(--navy); }
.info-card p{ font-size:15px; line-height:1.7; }

/* ---------- legal pages ---------- */

.legal{
  max-width:780px;
  margin-inline:auto;
}
.legal h3{
  margin:40px 0 12px;
  font-size:22px;
  color:var(--navy);
}
.legal h3:first-of-type{ margin-top:0; }
.legal p{ margin-bottom:16px; }

.legal-updated{
  display:inline-block;
  margin-bottom:36px;
  padding:8px 16px;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  background:var(--light);
}

/* ---------- form ---------- */

.form-card{
  max-width:640px;
  margin-inline:auto;
  padding:44px;
  background:var(--white);
  box-shadow:0 20px 60px rgba(5,42,101,.12);
}
.field{ margin-bottom:22px; }
.field label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  font-family:var(--font);
  font-size:16px;
  color:var(--ink);
  background:var(--light);
  border:1px solid transparent;
  border-radius:0;
  transition:border-color .25s ease, background-color .25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:var(--white);
  border-color:var(--blue);
}
.form-note{ margin-top:18px; font-size:14px; }

.form-result{
  display:none;
  margin-top:22px;
  padding:18px 20px;
  font-size:15px;
  border-left:4px solid var(--blue);
  background:var(--light);
}
.form-result.is-shown{ display:block; }

/* ==========================================================================
   Inner page components
   ========================================================================== */

/* ---------- split: media beside copy ---------- */

.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:72px;
  align-items:center;
}
.split--reverse .split-media{ order:2; }

.split-media img{ width:100%; }

/* ---------- icon cards (values, disciplines) ---------- */

.icon-card{
  padding:34px 30px;
  background:var(--white);
  box-shadow:0 10px 30px rgba(5,42,101,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.icon-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(5,42,101,.15); }
.icon-card h5,.icon-card h6{ margin-bottom:12px; color:var(--navy); }
.icon-card p{ font-size:15px; line-height:1.7; }

.icon-badge{
  display:grid;
  place-items:center;
  width:58px; height:58px;
  margin-bottom:20px;
  background:var(--light);
  color:var(--red);
}
.icon-badge svg{ width:28px; height:28px; }

.card-grid--4{ grid-template-columns:repeat(4,1fr); }

/* Core values sit directly on the page background rather than in panels. */
.card-grid--plain{ gap:0; }
.card-grid--plain .icon-card{
  background:transparent;
  box-shadow:none;
  padding:0 32px 40px 0;
}
.card-grid--plain .icon-card:hover{ transform:none; box-shadow:none; }

/* ---------- inline icon rows (used under split copy) ---------- */

.icon-rows{ display:grid; gap:28px; margin-top:36px; }
.icon-row{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:20px;
  align-items:start;
}
.icon-row h6{ margin-bottom:8px; color:var(--navy); }
.icon-row p{ font-size:15px; }
.icon-row .icon-badge{ margin-bottom:0; }

/* ---------- counters row ---------- */

.counter-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  margin-bottom:64px;
}
.counter{ padding-right:24px; border-right:1px solid #DCE3F1; }
.counter:last-child{ border-right:0; }
.counter .stat-value{ font-size:44px; }
.counter p{ font-size:15px; margin-top:8px; }

/* ---------- program cards (image on top) ---------- */

.program-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  box-shadow:0 10px 30px rgba(5,42,101,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.program-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(5,42,101,.15); }
/* Degree cards use a tall, portrait-leaning image like the original. */
.program-thumb{ aspect-ratio:379/425; overflow:hidden; }
.program-card--wide .program-thumb{ aspect-ratio:16/9; }
.program-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.program-card:hover .program-thumb img{ transform:scale(1.06); }
.program-body{ display:flex; flex-direction:column; gap:12px; padding:32px 30px 36px; flex:1; }
.program-body h4{ font-size:24px; color:var(--navy); }
.program-body .subtitle{
  font-size:15px;
  font-weight:700;
  color:var(--red);
}
.program-body p{ font-size:15px; line-height:1.7; }
.program-body .btn{ align-self:flex-start; margin-top:auto; }

/* ---------- video block ---------- */

.video-card{
  position:relative;
  display:grid;
  place-items:center;
  min-height:420px;
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.video-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(5,42,101,.42);
}
.video-play{
  display:grid;
  place-items:center;
  width:84px; height:84px;
  border-radius:50%;
  background:var(--white);
  color:var(--red);
  transition:transform .3s ease, background-color .3s ease, color .3s ease;
}
.video-play:hover{ transform:scale(1.1); background:var(--red); color:var(--white); }
.video-play svg{ width:30px; height:30px; margin-left:4px; }

.video-frame{ width:100%; }
.video-frame video{ width:100%; display:block; background:var(--ink); }

/* ---------- FAQ accordion ---------- */

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 28px;
  align-items:start;
}

.faq{
  background:var(--white);
  box-shadow:0 8px 24px rgba(5,42,101,.07);
}
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 26px;
  font-size:17px;
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  flex:0 0 auto;
  width:12px; height:12px;
  border-right:2px solid var(--red);
  border-bottom:2px solid var(--red);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s ease;
}
.faq[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.faq summary:hover{ color:var(--red); }
.faq-answer{ padding:0 26px 24px; font-size:15px; line-height:1.75; }

/* ---------- gallery ---------- */

.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.gallery img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform .5s ease, filter .4s ease;
}
.gallery a{ overflow:hidden; display:block; }
.gallery a:hover img{ transform:scale(1.08); filter:saturate(1.15); }

/* ---------- mosaic (learning hub) ---------- */

.mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.mosaic img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.mosaic-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  padding:32px 28px;
  background:var(--navy);
  color:var(--muted);
}
.mosaic-card h5{ color:var(--white); font-size:21px; }
.mosaic-card p{ font-size:15px; line-height:1.7; }
.mosaic-card:nth-of-type(even){ background:var(--red); }
.mosaic-card:nth-of-type(even) p{ color:rgba(255,255,255,.9); }

/* ---------- events (blue band) ---------- */

.section--blue{ background:var(--blue); color:rgba(255,255,255,.88); }
.section--blue h2,.section--blue h5{ color:var(--white); }
.section--blue .eyebrow{ color:rgba(255,255,255,.75); }

.event-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.event-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  overflow:hidden;
}
.event-thumb{ aspect-ratio:16/10; }
.event-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.event-card:hover .event-thumb img{ transform:scale(1.06); }
.event-body{ padding:28px 26px 32px; }
.event-body h5{ font-size:20px; color:var(--navy); margin-bottom:12px; }
.event-body p{ font-size:15px; line-height:1.7; color:var(--grey); }

/* ---------- contact CTA (gradient) ---------- */

.contact-cta{
  padding:72px 64px;
  background:linear-gradient(120deg, var(--navy) 0%, var(--blue) 100%);
  color:rgba(255,255,255,.88);
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:56px;
  align-items:center;
}
.contact-cta h2,.contact-cta h4{ color:var(--white); }
.contact-cta p{ margin:18px 0 32px; }

.contact-list{ display:grid; gap:16px; margin-top:24px; }
.contact-list li{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:15px;
}
.contact-list svg{ width:20px; height:20px; flex:0 0 auto; color:var(--white); }
.contact-list a{ color:var(--white); }
.contact-list a:hover{ color:var(--muted); }

/* ---------- certificate verification result ---------- */

.verify-result{
  max-width:640px;
  margin:28px auto 0;
  background:var(--white);
  box-shadow:0 20px 60px rgba(5,42,101,.12);
  overflow:hidden;
}

.result-banner{
  padding:22px 28px;
  border-left:5px solid var(--blue);
  background:var(--light);
}
.result-banner strong{
  display:block;
  margin-bottom:4px;
  font-size:18px;
  color:var(--navy);
}
.result-banner p{ font-size:15px; }

.result-banner--success{ border-color:#0A7D3F; background:#EEFAF2; }
.result-banner--success strong{ color:#0A7D3F; }
.result-banner--error{ border-color:var(--red); background:#FDF1F1; }
.result-banner--error strong{ color:var(--red); }

.result-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
.result-table th,
.result-table td{
  padding:14px 28px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--light);
}
.result-table th{
  width:40%;
  font-weight:700;
  color:var(--navy);
}
.result-table tr:last-child th,
.result-table tr:last-child td{ border-bottom:0; }

.result-actions{ padding:24px 28px 28px; }

@media print{
  .site-header,.site-footer,.whatsapp-float,.page-hero,
  .form-card,.result-actions,.nav-backdrop{ display:none !important; }
  .verify-result{ box-shadow:none; border:1px solid #ccc; margin:0; }
  .section{ padding:0; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1200px){
  .spec-grid{ grid-template-columns:repeat(3,1fr); }
  .campus-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1024px){
  h1{ font-size:40px; }
  h2{ font-size:34px; }

  .section{ padding:72px 0; }

  .brand img{ width:230px; }
  .header-contacts{ display:none; }
  .header-top .container{ min-height:78px; }

  /* The nav row collapses to nothing, but must NOT be display:none —
     the drawer lives inside it and would be unreachable. */
  .header-main{ border-bottom:0; }
  .header-main .container{ min-height:0; padding-block:0; }

  .nav-toggle{ display:block; }
  .nav-close{ display:block; }
  .header-cta{ display:none; }

  .hero{ min-height:0; padding-top:64px; }
  .hero-panels .container{ grid-template-columns:1fr; min-height:0; }
  .hero-panel{ min-height:0 !important; padding:32px 20px !important; }

  .nav{
    position:fixed;
    top:0; bottom:0; right:0;
    z-index:99;
    width:min(340px,86vw);
    padding:24px;
    background:var(--white);
    transform:translateX(100%);
    transition:transform .35s ease;
    overflow-y:auto;
  }
  body.nav-open .nav{ transform:none; }

  .nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-top:24px;
  }
  .nav a{
    padding:16px 4px;
    border-bottom:1px solid var(--light);
    font-size:15px;
  }
  .nav a::after{ display:none; }
  .nav > .btn{ display:flex; margin-top:24px; width:100%; }

  .hero-copy h1{ font-size:44px; }

  .welcome-grid,
  .academics-grid,
  .why-grid,
  .steps-head{ grid-template-columns:1fr; gap:44px; }

  .activity-grid,
  .news-grid,
  .card-grid{ grid-template-columns:repeat(2,1fr); }

  .spec-grid{ grid-template-columns:repeat(2,1fr); }
  .facility-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .facility-card{ min-height:420px; }
  .steps{ grid-template-columns:repeat(2,1fr); }

  .cta-band .container{ grid-template-columns:1fr; }
  .cta-media{ display:none; }

  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }

  .split{ grid-template-columns:1fr; gap:44px; }
  .split--reverse .split-media{ order:0; }

  .card-grid--4{ grid-template-columns:repeat(2,1fr); }
  .counter-grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .counter{ border-right:0; padding-right:0; }

  .faq-grid{ grid-template-columns:1fr; }
  .event-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery,
  .mosaic{ grid-template-columns:repeat(3,1fr); }

  .contact-cta{ grid-template-columns:1fr; padding:56px 40px; gap:40px; }
}

@media (max-width:767px){
  h1{ font-size:34px; line-height:1.25; }
  h2{ font-size:30px; line-height:1.3; }
  h3{ font-size:26px; }
  h5{ font-size:21px; }

  .section{ padding:56px 0; }
  .section-head{ margin-bottom:40px; }

  .brand img{ width:180px; }

  .hero{ padding-top:48px; gap:36px; }
  .hero-copy h1{ font-size:34px; }
  .hero-copy p{ margin-top:24px; }
  .hero-actions .btn{ flex:1 1 100%; }
  .hero-panel h3{ font-size:21px; }
  .hero-panel h3 svg{ width:30px; height:30px; }

  .stat{ grid-template-columns:1fr; gap:10px; }
  .stat-value{ font-size:40px; }

  .facility-grid{ grid-template-columns:1fr; }
  .facility-card{ min-height:360px; }
  .facility-card h5{ font-size:21px; min-height:0; }

  /* Steps stack: number + title on one line, description beneath. */
  .steps{ gap:36px; }
  .step{ grid-template-columns:1fr; gap:14px; }
  .step h4{ font-size:21px; }
  .step-num{ width:44px; height:44px; font-size:19px; }

  .spec-grid,
  .activity-grid,
  .campus-grid,
  .steps,
  .news-grid,
  .card-grid,
  .card-grid--2{ grid-template-columns:1fr; }

  .spec-card p{ max-height:260px; opacity:1; }

  /* One testimonial per view on a phone. */
  .testimonial-slider{ gap:16px; }
  .testimonial{ flex-basis:100%; }

  .activity-card{ padding:32px; min-height:340px; }
  .activity-card h2{ font-size:26px; }

  .feature{ grid-template-columns:1fr; gap:14px; }

  .partners-track{ gap:48px; }

  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:flex-start; }

  .form-card{ padding:28px 22px; }

  .page-hero{ padding:calc(var(--header-h) + 56px) 0 56px; }

  .card-grid--4,
  .counter-grid,
  .event-grid{ grid-template-columns:1fr; }

  .gallery,
  .mosaic{ grid-template-columns:repeat(2,1fr); }

  .icon-row{ grid-template-columns:1fr; gap:14px; }

  .video-card{ min-height:280px; }
  .video-play{ width:64px; height:64px; }

  .contact-cta{ padding:40px 24px; }
  .faq summary{ padding:18px 20px; font-size:16px; }
  .faq-answer{ padding:0 20px 20px; }

  .program-body{ padding:26px 24px 30px; }
}