/* =====================================================================
   home2.css — ALTERNATIVE homepage concept (v2 · MINIMAL)
   Brief: like the reference schools (Prometheus / Pathways / Shiv Nadar) —
   mostly WHITE, ONE accent (maroon), very little content, lots of whitespace.
   No coloured bands, no gradients, no gold, green essentially unused.
   Fully namespaced under .h2 so it never affects the live site.
   ===================================================================== */

.h2 {
  --ink: #262320;
  --muted: #6E6A63;
  --line: #E8E3D8;
  --accent: #8D2130;          /* maroon — the single accent */
  --paper: #FCFAF5;           /* barely-there warm white for alt sections */
  --pad: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --maxw: 1200px;
  --r: 10px;
  --ease: cubic-bezier(.22,1,.36,1);
  font-family: var(--font-sans);
  color: var(--ink);
  background: #fff;
  overflow-x: clip;
}
.h2 *,.h2 *::before,.h2 *::after { box-sizing: border-box; }
.h2 :where(h1,h2,h3,h4) { color: inherit; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.14; }

.h2wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.3rem, 5vw, 2.6rem); }

/* ---- shared type ---- */
.h2eyebrow { display: inline-flex; align-items: center; gap: .7em; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; }
.h2eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.h2eyebrow--center { justify-content: center; }
.h2title { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem); color: var(--ink); }
.h2title em { font-style: italic; color: var(--accent); }
.h2lead { font-size: 1.05rem; line-height: 1.8; color: var(--muted); }

.h2sec { padding-block: var(--pad); }
.h2sec--paper { background: var(--paper); }
.h2head { max-width: 640px; }
.h2head--center { margin-inline: auto; text-align: center; }
.h2head .h2lead { margin-top: 1rem; }

/* ---- buttons / links (maroon only) ---- */
.h2btn { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-sans); font-weight: 600; font-size: .92rem; padding: .9em 1.7em; border-radius: 999px; border: 1.5px solid var(--accent); transition: background .3s var(--ease), color .3s, transform .3s var(--ease); cursor: pointer; line-height: 1; }
.h2btn svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.h2btn:hover svg { transform: translateX(4px); }
.h2btn--solid { background: var(--accent); color: #fff; }
.h2btn--solid:hover { background: #6f1926; transform: translateY(-2px); }
.h2btn--line { background: transparent; color: var(--accent); }
.h2btn--line:hover { background: var(--accent); color: #fff; }
.h2link { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: .88rem; color: var(--accent); }
.h2link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.h2link:hover svg { transform: translateX(5px); }

/* ---- gentle reveal (main.js toggles .is-in) ---- */
.h2 [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--reveal-delay,0ms); }
.h2 [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .h2 [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* =====================================================================
   1 · HERO — full-width banner slider (crossfade)
   ===================================================================== */
.h2hero { position: relative; min-height: clamp(500px, 82vh, 760px); display: flex; align-items: center; overflow: hidden; color: #fff; }
.h2hero__slider { position: absolute; inset: 0; z-index: 0; }
.h2hero__slider .swiper, .h2hero__slider .swiper-wrapper, .h2hero__slider .swiper-slide { height: 100%; }
.h2hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); }
.h2hero .swiper-slide-active .h2hero__slide { animation: h2kb 6s ease-out forwards; }
@keyframes h2kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.h2hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(26,12,13,.82) 0%, rgba(26,12,13,.52) 40%, rgba(26,12,13,.14) 72%, transparent 100%),
    linear-gradient(0deg, rgba(26,12,13,.42) 0%, transparent 42%);
}
.h2hero__inner { position: relative; z-index: 2; width: 100%; padding-block: 2rem; }
.h2hero__badge { display: inline-flex; align-items: center; gap: .6em; padding: .55em 1.15em; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: .76rem; font-weight: 600; letter-spacing: .14em;  color: #fff; margin-bottom: 1.5rem; }
.h2hero__badge .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(141,33,48,.4); }
.h2hero__title { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.4rem); color: #fff; max-width: 16ch; text-wrap: balance; }
.h2hero__title em { font-style: italic; color: #8d2130; }
.h2hero__sub { margin-top: 1.3rem; max-width: 48ch; font-size: 1.08rem; line-height: 1.75; color: rgba(255,255,255,.9); }
.h2hero__cta { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.h2hero__cta .h2btn--line { border-color: rgba(255,255,255,.6); color: #fff; }
.h2hero__cta .h2btn--line:hover { background: #fff; color: var(--accent); border-color: #fff; }
.h2hero__pg { position: absolute; z-index: 3; bottom: clamp(1.1rem, 3vh, 1.9rem); left: 0; right: 0; display: flex; justify-content: center; gap: .5rem; }
.h2hero__pg .swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 999px; background: #fff; opacity: .45; transition: width .3s var(--ease), opacity .3s; cursor: pointer; }
.h2hero__pg .swiper-pagination-bullet-active { width: 28px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .h2hero .swiper-slide-active .h2hero__slide { animation: none; } }

/* thin stat line under hero */
.h2facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.h2facts__row { display: flex; flex-wrap: wrap; }
.h2fact { flex: 1 1 0; min-width: 150px; padding: clamp(1.4rem,3vw,2.2rem) 1rem; text-align: center; border-left: 1px solid var(--line); }
.h2fact:first-child { border-left: 0; }
.h2fact__n { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem,1.2rem+1.4vw,2.4rem); color: var(--ink); line-height: 1; }
.h2fact__n span { color: var(--accent); }
.h2fact__l { display: block; margin-top: .5rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* =====================================================================
   2 · STAGES — three plain cards
   ===================================================================== */
.h2stages__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem,3vw,2.2rem); margin-top: 3rem; }
.h2stage { display: flex; flex-direction: column; }
.h2stage__img { overflow: hidden; border-radius: var(--r); aspect-ratio: 4/3; }
.h2stage__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.h2stage:hover .h2stage__img img { transform: scale(1.05); }
.h2stage__tag { margin: 1.3rem 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.h2stage h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: .5rem; }
.h2stage p { font-size: .95rem; line-height: 1.7; color: var(--muted); margin-bottom: 1rem; }
.h2stage .h2link { margin-top: auto; }

/* =====================================================================
   3 · WHY — feature (image + key points)
   ===================================================================== */
.h2feature__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.h2feature__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
.h2points { list-style: none; margin: 1.7rem 0 1.9rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.h2points li { display: flex; gap: .8rem; align-items: flex-start; }
.h2points .ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(141,33,48,.09); color: var(--accent); }
.h2points .ic svg { width: 17px; height: 17px; }
.h2points b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.04rem; margin-bottom: .15rem; }
.h2points span { font-size: .86rem; color: var(--muted); line-height: 1.55; }

/* =====================================================================
   4 · NEWS — three plain cards
   ===================================================================== */
.h2news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.h2news__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem,3vw,2.2rem); margin-top: 2.8rem; }
.h2ncard { display: flex; flex-direction: column; }
.h2ncard__img { overflow: hidden; border-radius: var(--r); aspect-ratio: 16/10; }
.h2ncard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.h2ncard:hover .h2ncard__img img { transform: scale(1.05); }
.h2ncard__meta { margin: 1.2rem 0 .6rem; display: flex; align-items: center; gap: .8rem; font-size: .78rem; color: var(--muted); }
.h2ncard__cat { color: var(--accent); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.h2ncard h3 { font-size: 1.18rem; line-height: 1.4; color: var(--ink); margin-bottom: .9rem; }
.h2ncard .h2link { margin-top: auto; }

/* =====================================================================
   5 · CAMPUSES — two plain cards (text below image)
   ===================================================================== */
.h2camp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,3vw,2.2rem); margin-top: 3rem; }
.h2camp { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; transition: box-shadow .4s var(--ease); }
.h2camp:hover { box-shadow: 0 24px 50px rgba(40,25,20,.1); }
.h2camp__img { overflow: hidden; aspect-ratio: 16/9; }
.h2camp__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.h2camp:hover .h2camp__img img { transform: scale(1.04); }
.h2camp__body { padding: clamp(1.5rem,3vw,2.2rem); }
.h2camp__loc { display: inline-flex; align-items: center; gap: .4em; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.h2camp__loc svg { width: 15px; height: 15px; }
.h2camp__body h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: .6rem; }
.h2camp__body p { font-size: .94rem; line-height: 1.7; color: var(--muted); margin-bottom: 1.2rem; }
.h2camp__cta { display: flex; gap: 1.4rem; align-items: center; }

/* =====================================================================
   6 · CTA — one quiet accent moment
   ===================================================================== */
.h2cta { text-align: center; }
.h2cta__inner { border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); padding: clamp(3rem,7vw,5.5rem) 1.5rem; }
.h2cta__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem,1.4rem+2.2vw,3rem); line-height: 1.12; color: var(--ink); }
.h2cta__title em { font-style: italic; color: var(--accent); }
.h2cta__p { margin: 1.1rem auto 0; max-width: 52ch; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.h2cta__btns { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .h2hero { min-height: clamp(440px, 78vh, 620px); }
  .h2feature__grid { grid-template-columns: 1fr; }
  .h2feature__img { order: -1; }
  .h2stages__grid, .h2news__grid { grid-template-columns: 1fr 1fr; }
  .h2camp__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .h2stages__grid, .h2news__grid, .h2points { grid-template-columns: 1fr; }
  .h2fact { flex-basis: 50%; }
  .h2fact:nth-child(odd) { border-left: 0; }
}