/* ==========================================================================
   GCIIT Society — "Monolith Dusk" Theme
   Derived directly from the GCIIT logo:
     Header:  Deep Midnight Navy  #0D2240  (logo outer text ring)
     Primary: Warm Brown          #7B4A1E  (logo silhouettes & ESTD text)
     Gold:    Logo Gold           #D4A017  (logo ring border & shapes)
     BG:      Earthy Stone        #EDE8E0  (warm heritage backdrop)
   Section rhythm: no two consecutive sections share the same background.
   ========================================================================== */

:root {
  /* ── Brand palette (from logo) ────────────────────────────────────────── */
  --navy:         #0D2240;   /* logo outer-ring navy — header                */
  --navy-mid:     #1E3A5F;   /* logo inner-ring navy — secondary surface     */
  --navy-deep:    #081828;   /* darkest navy — mobile menu, footer           */
  --brown:        #7B4A1E;   /* logo brown — primary CTA / accent            */
  --brown-dark:   #5E3614;   /* darker brown — hover state                   */
  --brown-soft:   #9B6030;   /* lighter brown — rust accent                  */
  --gold:         #D4A017;   /* logo gold ring — highlight accent            */
  --gold-light:   #E8B830;   /* lighter gold — glow/shine                    */
  --gold-pale:    #F5E4A0;   /* very pale gold — subtle tint                 */

  /* ── Section stripe backgrounds (warm earthy stone) ──────────────────── */
  --bg:           #EDE8E0;   /* page canvas — warm stone                     */
  --stripe-a:     #F5EDD8;   /* Section stripe A — cream parchment           */
  --stripe-b:     #E5DDD0;   /* Section stripe B — mid stone                 */
  --stripe-c:     #DDD5C8;   /* Section stripe C — deeper stone              */
  --card:         #FDFAF4;   /* Card surface — lightest                      */

  /* ── Typography ───────────────────────────────────────────────────────── */
  --ink:          #1A0E06;   /* deepest text                                 */
  --ink-muted:    #5A4A36;   /* secondary / muted text                       */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border:       #CEC4B0;   /* standard border                              */
  --border-soft:  rgba(206,196,176,.6);
  --border-gold:  rgba(212,160,23,.35);
}

/* ── Page canvas ─────────────────────────────────────────────────────────── */
html {
  background-color: var(--bg);
}

body {
  margin: 0 !important;
  background: transparent;
  color: var(--ink);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  position: relative;
  min-height: 100vh;
}

/* Meghalaya monolith sketch backdrop — reduced transparency by an additional 10% */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(237,232,224,0.44) 0%,
      rgba(237,232,224,0.30) 45%,
      rgba(237,232,224,0.40) 100%
    ),
    url("../img/bg-monolith.jpg") center center / cover no-repeat fixed;
  filter: saturate(0.80) brightness(1.02);
  opacity: 1;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -.015em;
  color: var(--navy);
}
h2 { font-weight: 600; }

/* ── FULL-LENGTH HEADER & FOOTER ALIGNMENT ACROSS ALL PAGES ──────────────── */
/* Full length width matching the hero text container (.wrap padding: 0 25px) */
header .wrap,
footer .wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-left: 25px !important;
  padding-right: 25px !important;
  box-sizing: border-box !important;
}

header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  background: var(--navy) !important;
  border-bottom: 1px solid rgba(212,160,23,.22) !important;
  box-shadow: 0 12px 32px -16px rgba(8,24,40,.9), 0 1px 4px rgba(0,0,0,.3) !important;
}

header .wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px !important;
  height: auto !important;
  gap: 16px !important;
}

/* Logo gold crest lettering */
header .brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: var(--gold) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: .02em !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
}

header .brand small {
  display: block !important;
  color: rgba(212,160,23,.75) !important;
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

/* Logo ring — gold border */
.logo {
  box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,.5) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
header .brand:hover .logo {
  transform: scale(1.04) !important;
  box-shadow: 0 0 0 2.5px var(--gold-light), 0 6px 18px rgba(0,0,0,.6) !important;
}

/* Desktop nav links — screens above 820px */
@media (min-width: 821px) {
  header .site-nav {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
  }
}

header .site-nav a {
  color: #FFFFFF !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15.5px !important;
  letter-spacing: .015em !important;
  padding: 8px 0 !important;
  border-bottom: 3px solid transparent !important;
  text-decoration: none !important;
  background: none !important;
  opacity: .9 !important;
  transition: color .2s, border-color .2s, opacity .2s, text-shadow .2s !important;
}

header .site-nav a:hover {
  color: #FFFFFF !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(255,255,255,.45) !important;
  border-bottom-color: var(--gold-light) !important;
}

header .site-nav a[aria-current],
header .site-nav a.active {
  color: var(--gold-light) !important;
  opacity: 1 !important;
  border-bottom-color: var(--gold) !important;
  font-weight: 600 !important;
}

.burger {
  border-color: rgba(212,160,23,.4) !important;
}
.burger span {
  background: rgba(212,160,23,.8) !important;
}

/* ── Mobile menu behavior (< 820px) ──────────────────────────────────────── */
@media (max-width: 820px) {
  .burger {
    display: flex !important;
  }
  header .wrap {
    min-height: 64px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  /* Hidden by default on mobile */
  header .site-nav {
    display: none !important;
    flex-basis: 100% !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-top: 1px solid rgba(212,160,23,.18) !important;
    background: var(--navy-deep) !important;
    margin-top: 8px !important;
    padding: 6px 18px 16px !important;
  }
  /* Open state when hamburger is clicked */
  header.open .site-nav {
    display: flex !important;
  }
  header .site-nav a {
    display: block !important;
    padding: 12px 6px !important;
    border-bottom: 1px solid rgba(212,160,23,.12) !important;
    color: rgba(212,160,23,.85) !important;
    font-size: 16px !important;
  }
  header .site-nav a[aria-current] {
    border-bottom-color: rgba(212,160,23,.12) !important;
    color: var(--gold) !important;
    box-shadow: inset 4px 0 0 var(--brown) !important;
    padding-left: 14px !important;
  }
}

/* ── SECTION ALTERNATING BACKGROUNDS ────────────────────────────────────────
   Order on home page:
   1. .hs          Hero Slider        → transparent      (sketch shows through)
   2. .stats       Stats counters     → --stripe-a       (cream parchment)
   3. .ctrs        Our Centers        → transparent      (sketch again)
   4. .pt          Partners           → --stripe-b       (mid stone)
   5. .fc          Featured Courses   → --stripe-a       (cream, lifts from stone)
   6. #why         Why Choose         → --stripe-c       (deepest stone)
   7. #journey     Journey timeline   → transparent      (sketch breathes)
   8. .quotes      Testimonials       → --navy           (dark reversal)
   9. .apply       CTA                → --brown          (warm brown climax)
   ────────────────────────────────────────────────────────────────────────── */

/* 1. Hero — transparent */
.hs {
  background: transparent !important;
  position: relative;
  padding: 54px 0 92px;
}

/* 2. Stats — cream parchment */
.stats {
  background: var(--stripe-a) !important;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0 64px;
}

/* 3. Centers — transparent */
.ctrs {
  background: transparent !important;
}

/* 4. Partners — mid stone / cream card */
.pt {
  background: var(--stripe-a) !important;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* 5. Featured Courses — transparent (same as Our Centers) so sketch shows through */
.courses.fc,
section#courses.fc,
section.fc {
  background: transparent !important;
  border-top:    0 !important;
  border-bottom: 0 !important;
}

/* 6. Why Choose — subtle stone stripe for clean alternating rhythm */
#why {
  background: var(--stripe-a) !important;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* 7. Testimonials (What Our Students Say) — transparent (same as Our Centers) */
.quotes {
  background: transparent !important;
  color: var(--ink) !important;
  border-top:    0 !important;
  border-bottom: 0 !important;
}
.quotes h2    { color: var(--navy) !important; }
.quotes .lead { color: var(--ink-muted) !important; }

/* 9. CTA (Start your course this term) — Logo Gold/Yellow #D4A017 (Exact color of GCIIT header/footer text) */
section.apply, .cta-apply {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-top: 1px solid rgba(13,34,64,.12) !important;
}
section.apply h2         { color: var(--navy) !important; max-width: none; font-family: 'Fraunces', Georgia, serif; font-size: clamp(30px, 3.8vw, 42px); font-weight: 700; }
section.apply p          { color: #2A1A10 !important; font-size: 17px; }
section.apply .btn       { background: var(--navy) !important; color: #FFFFFF !important; box-shadow: 0 12px 24px -10px rgba(13,34,64,.5) !important; border: 0 !important; font-weight: 700; }
section.apply .btn:hover { background: #081828 !important; color: var(--gold-light) !important; transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(13,34,64,.6) !important; }

/* Inner page top-banner */
.top {
  background: rgba(237,232,224,.82);
  border-bottom: 3px solid var(--brown);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.top .wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
}
.top h1 { color: var(--navy) !important; }
.top p  {
  color: var(--ink-muted) !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── HEADER — Deep Midnight Navy ────────────────────────────────────────── */
header {
  background: var(--navy);
  border-bottom: 1px solid rgba(212,160,23,.22);
  box-shadow:
    0 12px 32px -16px rgba(8,24,40,.9),
    0 1px 4px rgba(0,0,0,.3);
}
header .wrap { min-height: 72px; }

/* Logo gold crest lettering */
header .brand {
  color: var(--gold);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
header .brand small {
  color: rgba(212,160,23,.75);
  font-family: 'Figtree', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}

/* Logo ring — gold border echoing the logo ring */
.logo {
  box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,.5);
  transition: transform .25s ease, box-shadow .25s ease;
}
header .brand:hover .logo {
  transform: scale(1.04);
  box-shadow: 0 0 0 2.5px var(--gold-light), 0 6px 18px rgba(0,0,0,.6);
}

/* Nav links — warm sandy gold text, gold active underline */
header .site-nav { gap: 28px; }
header .site-nav a {
  color: rgba(212,160,23,.72);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: .015em;
  padding: 8px 0;
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s;
}
header .site-nav a:hover { color: var(--gold-light); }
header .site-nav a[aria-current],
header .site-nav a.active {
  color: var(--gold);
  border-bottom-color: var(--brown);
}

.burger       { border-color: rgba(212,160,23,.4); }
.burger span  { background: rgba(212,160,23,.8); }

@media (max-width: 820px) {
  header .wrap { min-height: 64px; }
  header .site-nav {
    border-top: 1px solid rgba(212,160,23,.18);
    background: var(--navy-deep);
    padding: 10px 18px 16px;
  }
  header .site-nav a {
    border-bottom: 1px solid rgba(212,160,23,.12);
    color: rgba(212,160,23,.72);
  }
  header .site-nav a[aria-current] {
    border-bottom-color: rgba(212,160,23,.12);
    color: var(--gold);
    box-shadow: inset 4px 0 0 var(--brown);
    padding-left: 14px;
  }
}

/* ── BUTTONS — Warm Brown primary, Gold outline secondary ─────────────────── */
.btn, .wbtn {
  background: var(--brown);
  color: var(--stripe-a);
  border-radius: 999px;
  padding: 14px 32px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1.5px solid transparent;
  box-shadow: 0 10px 24px -10px rgba(123,74,30,.6), 0 2px 4px rgba(26,14,6,.12);
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn:hover, .wbtn:hover {
  background: var(--brown-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(94,54,20,.7), 0 4px 8px rgba(26,14,6,.15);
}
.btn.alt {
  background: var(--card);
  color: var(--navy);
  border: 1.5px solid var(--border);
  box-shadow: 0 8px 20px -12px rgba(26,14,6,.25);
}
.btn.alt:hover {
  background: #fff;
  color: var(--brown);
  border-color: var(--brown);
  box-shadow: 0 12px 24px -10px rgba(123,74,30,.35);
}
.more .btn, .btn.dark { background: var(--brown); color: var(--stripe-a); }

/* ── HERO TYPOGRAPHY & PHOTO FRAME ──────────────────────────────────────── */
.hs h1 {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  font-size: clamp(36px, 5.2vw, 62px);
}
.hs h1 .hl { color: var(--brown); }
.hs .hero-text p { color: var(--ink-muted); font-size: 19.5px; line-height: 1.6; }

/* Photo card — sleek rounded frame with soft neutral shadow, no yellowish border */
.photo {
  background: var(--card);
  border: 1px solid rgba(206,196,176,.8);
  border-radius: 28px;
  padding: 8px;
  box-shadow:
    0 24px 50px -20px rgba(13,34,64,.28),
    0 8px 24px -10px rgba(26,14,6,.18),
    0 0 0 6px rgba(253,250,244,.95);
  transition: transform .4s ease, box-shadow .4s ease;
}
.photo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 32px 58px -20px rgba(13,34,64,.35),
    0 12px 28px -8px rgba(26,14,6,.22),
    0 0 0 7px rgba(253,250,244,1);
}
.photo img   { border-radius: 20px; display: block; width: 100%; height: 100%; object-fit: cover; }
.photo::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 20px;
  background: linear-gradient(180deg, transparent 65%, rgba(13,34,64,.18));
  pointer-events: none;
}

/* 3D scene cards (Colors: #e60076, #5B32E8, #f37e09 with tight mobile gap and safe bounds) */
.scene {
  height: 340px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}
.cd {
  border-radius: 14px !important;
  padding: 14px 22px !important;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.08) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  min-width: 75% !important;
  width: max-content !important;
  max-width: 90% !important;
  box-sizing: border-box !important;
}
.cd b {
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(15px, 1.8vw, 19px) !important;
  letter-spacing: -.01em !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* 1st Card: Magenta #e60076 */
.c1 {
  background: #e60076 !important;
  left: 2% !important;
  top: 10% !important;
}
/* 2nd Card: Royal Purple-Blue #5B32E8 */
.c2 {
  background: #5B32E8 !important;
  left: 10% !important;
  top: 38% !important;
}
/* 3rd Card: Orange #f37e09 (safely positioned within container) */
.c3 {
  background: #f37e09 !important;
  left: 18% !important;
  top: 66% !important;
}
.ring {
  border-color: rgba(212,160,23,.3) !important;
  opacity: .55 !important;
}

/* Mobile: Cards grouped close together with just 3-5% gap between them */
@media (max-width: 820px) {
  .scene {
    height: 220px !important;
    max-width: 360px !important;
    margin: 10px auto 0 !important;
  }
  .cd {
    padding: 11px 18px !important;
    max-width: 90% !important;
  }
  .cd b {
    font-size: 15px !important;
  }
  .c1 {
    left: 2% !important;
    top: 4% !important;
  }
  .c2 {
    left: 8% !important;
    top: 35% !important; /* ~3-5% visual vertical spacing */
  }
  .c3 {
    left: 14% !important;
    top: 66% !important; /* ~3-5% visual vertical spacing */
  }
}

@media (max-width: 420px) {
  .scene {
    height: 200px !important;
  }
  .cd {
    padding: 9px 14px !important;
    max-width: 92% !important;
  }
  .cd b {
    font-size: 13.5px !important;
  }
}

/* ── SLIDER CONTROLS — Clean Navy arrows with white/neutral icon, no yellow border ─────────────────── */
.hs-ctl {
  position: absolute;
  left: 0; right: 0; bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 10;
}
.hs-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #FFFDF9;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(13,34,64,.45), 0 2px 6px rgba(0,0,0,.15);
  transition: all .2s cubic-bezier(.2,.7,.2,1);
}
.hs-arrow:hover {
  background: var(--brown);
  border-color: rgba(255,255,255,.4);
  color: #FFFFFF;
  transform: scale(1.08);
  box-shadow: 0 12px 24px -6px rgba(123,74,30,.5);
}
.hs-dots {
  display: flex; gap: 10px; align-items: center;
  background: rgba(245,237,216,.88);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(206,196,176,.85);
  box-shadow: 0 6px 16px -8px rgba(26,14,6,.2);
  backdrop-filter: blur(6px);
}
.hs-dot {
  position: relative; width: 10px; height: 10px;
  padding: 0; border: 0; border-radius: 999px;
  background: var(--border); cursor: pointer; overflow: hidden;
  transition: width .4s cubic-bezier(.2,.7,.2,1), background-color .3s;
}
.hs-dot:hover { background: var(--ink-muted); }
.hs-dot i { position: absolute; inset: 0; width: 0; background: var(--brown); border-radius: inherit; }
.hs-dot[aria-selected="true"] { width: 44px; background: rgba(212,160,23,.22); }
.hs-dot[aria-selected="true"] i { width: 100%; }
.hs.run   .hs-dot[aria-selected="true"] i { width: 0; animation: fillbar var(--dur,6.5s) linear forwards; }
.hs.paused .hs-dot[aria-selected="true"] i { animation-play-state: paused; }

/* ── STATS — Logo gold metric numbers on cream parchment ─────────────────── */
.stats .sh {
  color: var(--navy);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -.015em;
  margin-bottom: 28px;
  text-align: center;
  grid-column: 1 / -1;
}
.stats .wrap > div {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 20px 28px;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: 0 14px 32px -18px rgba(13,34,64,.14), 0 2px 6px rgba(26,14,6,.05);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.stats .wrap > div::before {
  content: "";
  position: absolute; top: 0; left: 20%; right: 20%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .75;
}
.stats .wrap > div:hover {
  transform: translateY(-5px);
  border-color: var(--border-gold);
  box-shadow: 0 24px 44px -18px rgba(123,74,30,.22), 0 4px 12px rgba(26,14,6,.07);
}
.stats b {
  display: block;
  color: var(--brown);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.stats span {
  display: block;
  color: var(--ink-muted);
  font-size: 15.5px;
  font-weight: 500;
}

/* ── EDITORIAL CARDS ─────────────────────────────────────────────────────── */
/* Centers — on transparent → parchment card surface */
.ctr {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 14px 32px -20px rgba(13,34,64,.16);
  transition: transform .3s ease, box-shadow .3s, border-color .3s;
}
.ctr:hover {
  transform: translateY(-5px);
  border-color: var(--border-gold);
  box-shadow: 0 22px 40px -18px rgba(123,74,30,.22);
}

/* Partners — on mid-stone → parchment card */
.pc {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  box-shadow: 0 14px 34px -18px rgba(13,34,64,.14);
  transition: transform .25s ease, box-shadow .25s;
}
.pc:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -18px rgba(13,34,64,.22); }

/* Course cards — on cream → pure white lift */
.cc {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px -20px rgba(13,34,64,.16);
}
.cc:hover {
  box-shadow: 0 24px 42px -18px rgba(123,74,30,.25);
  border-color: var(--border-gold);
}
.ci { background: var(--navy); color: var(--gold); }
.cc:hover .ci { background: var(--brown); }

/* Filter chips */
.chip[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: var(--stripe-a); }

/* Why cards — on deepest stone → parchment lift */
.wc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 12px 28px -18px rgba(13,34,64,.13);
  transition: transform .3s ease, box-shadow .3s, border-color .3s;
}
.wc:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -16px rgba(123,74,30,.2);
  border-color: var(--border-gold);
}

/* ── TESTIMONIALS — Sleek clean cards with navy accents ──────────────────── */
.tgrid {
  gap: 40px 24px;
}
.tcard {
  background: #FFFFFF !important;
  border: 1px solid rgba(206,196,176,.65) !important;
  border-radius: 18px !important;
  padding: 42px 24px 24px !important;
  box-shadow: 0 14px 34px -18px rgba(13,34,64,.12), 0 2px 6px rgba(0,0,0,.04) !important;
  border-bottom: 3.5px solid var(--gold) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
.tcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 44px -18px rgba(13,34,64,.2) !important;
}
.qm {
  background: var(--navy) !important;
  color: var(--gold-light) !important;
  width: 48px !important;
  height: 48px !important;
  top: -24px !important;
  left: 24px !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 8px 18px -6px rgba(13,34,64,.4) !important;
}
.oc {
  background: rgba(245,237,216,.9) !important;
  color: var(--brown-dark) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  margin-bottom: 14px !important;
}
.tcard blockquote {
  color: var(--ink) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin: 0 0 20px !important;
  font-style: normal !important;
}
.tcard figcaption {
  border-top: 1px solid rgba(206,196,176,.5) !important;
  padding-top: 16px !important;
}
.tcard figcaption b {
  color: var(--navy) !important;
  font-size: 16px !important;
}
.tcard figcaption em {
  color: var(--brown) !important;
}
.tcard figcaption small {
  color: var(--ink-muted) !important;
}

/* Avatar badge */
.av {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px -4px rgba(13,34,64,.3) !important;
}
.av.g1 { background: var(--navy) !important; color: var(--gold-light) !important; }
.av.g2 { background: var(--gold) !important; color: var(--navy) !important; }
.av.g3 { background: var(--brown) !important; color: #FFFFFF !important; }

/* ── STATS COUNTER BAR (98% Satisfaction, 4.9/5 Rating, 1000+ Stories) ──────
   Rich deep navy pill container with pure white / soft gold metrics
   ────────────────────────────────────────────────────────────────────────── */
.qs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  margin-top: 52px !important;
  padding: 26px 16px !important;
  background: var(--navy) !important;
  border: 1px solid rgba(212,160,23,.25) !important;
  border-radius: 20px !important;
  text-align: center !important;
  box-shadow: 0 20px 40px -18px rgba(13,34,64,.55), 0 4px 12px rgba(0,0,0,.15) !important;
}
.qs > div + div {
  border-left: 1px solid rgba(255,255,255,.15) !important;
}
.qs strong {
  display: block !important;
  color: #FFFFFF !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(32px, 3.8vw, 44px) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
.qs span {
  display: block !important;
  color: rgba(245,237,216,.8) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}

/* ── JOURNEY OF EXCELLENCE TIMELINE (Matches Reference Image) ──────────── */
#journey {
  padding: 68px 0 !important;
  text-align: center;
}

#journey h2 {
  font-size: clamp(32px, 4.4vw, 44px) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  text-align: center !important;
  margin: 0 auto 10px !important;
  letter-spacing: -.02em !important;
}

#journey .lead {
  font-size: 16px !important;
  color: var(--ink-muted) !important;
  text-align: center !important;
  max-width: 65ch !important;
  margin: 0 auto 52px !important;
}

/* Timeline vertical line */
.jr {
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  max-width: 960px !important;
}

.jr:before,
.jr:after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 4px !important;
  margin-left: -2px !important;
  border-radius: 4px !important;
}

.jr:before {
  background: rgba(206,196,176,.45) !important;
}

.jr:after {
  background: linear-gradient(180deg, var(--navy) 0%, var(--gold) 100%) !important;
  transform-origin: top !important;
  transform: scaleY(var(--p, 0)) !important;
  transition: transform .15s ease-out !important;
}

.jr li {
  position: relative !important;
  width: 50% !important;
  padding: 0 48px 46px 0 !important;
  text-align: right !important;
  box-sizing: border-box !important;
}

.jr li:nth-child(even) {
  margin-left: 50% !important;
  padding: 0 0 46px 48px !important;
  text-align: left !important;
}

.jr li:last-child {
  padding-bottom: 0 !important;
}

/* Timeline central circular node badge (Deep navy with gold icon & dual gold ring) */
.nd {
  position: absolute !important;
  top: 18px !important;
  right: -24px !important;
  z-index: 5 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: var(--navy) !important;
  color: var(--gold) !important;
  border: 3px solid #FDFAF4 !important;
  box-shadow: 0 0 0 2.5px var(--gold), 0 4px 12px rgba(13,34,64,.35) !important;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s, box-shadow .3s !important;
}

.jr li:nth-child(even) .nd {
  right: auto !important;
  left: -24px !important;
}

.nd svg {
  width: 20px !important;
  height: 20px !important;
}

/* Node pulse when active */
.jr li.cur .nd,
.jr li:hover .nd {
  transform: scale(1.12) !important;
  background: var(--navy) !important;
  color: var(--gold-light) !important;
  box-shadow: 0 0 0 3.5px var(--gold-light), 0 6px 18px rgba(13,34,64,.5) !important;
}

/* Timeline Card: Speech bubble styling from uploaded image */
.jc {
  position: relative !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(220,212,198,.8) !important;
  border-radius: 16px !important;
  padding: 26px 30px !important;
  box-shadow: 0 12px 32px -16px rgba(13,34,64,.12), 0 2px 6px rgba(0,0,0,.03) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}

.jc:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(212,160,23,.5) !important;
  box-shadow: 0 20px 40px -16px rgba(13,34,64,.22), 0 4px 10px rgba(0,0,0,.05) !important;
}

/* Speech bubble pointy arrow connecting to node */
.jc:after {
  content: "" !important;
  position: absolute !important;
  top: 30px !important;
  right: -9px !important;
  width: 16px !important;
  height: 16px !important;
  background: #FFFFFF !important;
  border: solid rgba(220,212,198,.8) !important;
  border-width: 1px 1px 0 0 !important;
  transform: rotate(45deg) !important;
}

.jr li:nth-child(even) .jc:after {
  right: auto !important;
  left: -9px !important;
  border-width: 0 0 1px 1px !important;
}

/* Year number (Bold, deep navy font matching screenshot) */
.yr {
  display: block !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  color: var(--navy) !important;
  margin-bottom: 6px !important;
  letter-spacing: -.02em !important;
}

.yr:after {
  display: none !important; /* No horizontal underline matching screenshot */
}

/* Milestone Title */
.jc h3 {
  font-family: 'Figtree', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #1A0E06 !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

/* Milestone Description */
.jc p {
  font-family: 'Figtree', sans-serif !important;
  font-size: 14.5px !important;
  color: var(--ink-muted) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Scroll Animation Transitions (left cards glide from left, right cards from right) */
.jr li.rv {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}

.jr li:nth-child(even).rv {
  transform: translateX(35px);
}

.jr li.rv.in,
.jr li:nth-child(even).rv.in {
  opacity: 1;
  transform: none;
}

/* Mobile responsive timeline (< 820px) */
@media (max-width: 820px) {
  .jr:before,
  .jr:after {
    left: 24px !important;
  }
  .jr li,
  .jr li:nth-child(even) {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 0 34px 64px !important;
    text-align: left !important;
  }
  .jr .nd,
  .jr li:nth-child(even) .nd {
    left: 0 !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    top: 14px !important;
  }
  .jc:after,
  .jr li:nth-child(even) .jc:after {
    right: auto !important;
    left: -8px !important;
    border-width: 0 0 1px 1px !important;
    top: 26px !important;
  }
  .jr li.rv,
  .jr li:nth-child(even).rv {
    transform: translateY(26px) !important;
  }
  .jr li.rv.in,
  .jr li:nth-child(even).rv.in {
    transform: none !important;
  }
}

/* ── FOOTER — Unified layout & colors across all pages ───────────────────── */
footer {
  background: var(--navy) !important;
  color: rgba(212,160,23,.75) !important;
  border-top: 1px solid rgba(212,160,23,.2) !important;
  padding: 54px 0 38px !important;
}

footer .wrap {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  gap: 36px !important;
}

footer h3 {
  color: var(--gold) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 18px !important;
  margin-bottom: 14px !important;
}

footer p {
  color: rgba(245,237,216,.85) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 10px !important;
}

footer a {
  color: #FFFFFF !important;
  font-size: 15px !important;
  text-decoration: none !important;
  display: block !important;
  margin: 6px 0 !important;
  opacity: .9 !important;
  transition: color .2s ease, opacity .2s ease !important;
}

footer a:hover {
  color: var(--gold-light) !important;
  opacity: 1 !important;
}

footer .fbrand h3 {
  color: var(--gold) !important;
  font-size: 24px !important;
}

/* Social media buttons */
.f-social {
  display: flex !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.s-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  transition: all .25s ease !important;
  opacity: 1 !important;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.3) !important;
  border: 0 !important;
}

/* Official Facebook Brand Color */
.s-btn.s-fb {
  background: #1877F2 !important;
}
.s-btn.s-fb:hover {
  background: #0d65d9 !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px -4px rgba(24,119,242,.6) !important;
}

/* Official Instagram Brand Color (Signature Radial Gradient) */
.s-btn.s-ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
}
.s-btn.s-ig:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px -4px rgba(214,36,159,.6) !important;
}

/* Official YouTube Brand Color */
.s-btn.s-yt {
  background: #FF0000 !important;
}
.s-btn.s-yt:hover {
  background: #cc0000 !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px -4px rgba(255,0,0,.6) !important;
}

/* Contact info lines with icons */
.fc-line {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  color: #FFFFFF !important;
}

.fc-ico {
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.fc-phones {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.fc-line a.fc-link {
  display: inline !important;
  color: #FFFFFF !important;
  opacity: .95 !important;
  text-decoration: none !important;
  margin: 0 !important;
}

.fc-line a.fc-link:hover {
  color: var(--gold-light) !important;
  text-decoration: underline !important;
}

footer .copy {
  grid-column: 1 / -1 !important;
  border-top: 1px solid rgba(212,160,23,.18) !important;
  color: #FFFFFF !important;
  opacity: .85 !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
  text-align: center !important;
  font-size: 14px !important;
}

@media (max-width: 820px) {
  footer .wrap {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* ── FOCUS & MISC ─────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible { outline-color: var(--gold); }
.qm, .pin { box-shadow: 0 10px 18px -8px rgba(13,34,64,.4); }
.hero { border-bottom-color: var(--border); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .stats .wrap { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .stats .wrap > div { padding: 24px 16px; }
}
@media (max-width: 480px) {
  .stats .wrap { grid-template-columns: 1fr; }
}

/* ── TWO HORIZONTAL ADJACENT VISION & MISSION CARDS (About Page) ────────── */
.vm-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  margin: 0 auto !important;
}

.vm-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 38px 32px !important;
  box-shadow: 0 14px 34px -18px rgba(13,34,64,.12), 0 2px 6px rgba(0,0,0,.03) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.vm-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(212,160,23,.5) !important;
  box-shadow: 0 20px 42px -18px rgba(13,34,64,.2) !important;
}

.vm-head {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.vm-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: var(--navy) !important;
  color: var(--gold) !important;
  box-shadow: 0 8px 18px -6px rgba(13,34,64,.4) !important;
  flex-shrink: 0 !important;
}

.vm-icon svg {
  display: block;
}

.vm-head h2 {
  font-size: 28px !important;
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--navy) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.vm-card p {
  color: var(--ink-muted) !important;
  line-height: 1.7 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

@media (max-width: 820px) {
  .vm-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ── TEAM PHOTO STYLES & HOVER EFFECTS (Team Page) ─────────────────────── */
.team-photo-wrap {
  display: flex;
  justify-content: center;
}

/* Uploaded employee photos */
.team-photo {
  width: 210px !important;
  height: 210px !important;
  object-fit: cover !important;
  border-radius: 24px !important;
  border: 3.5px solid var(--gold) !important;
  background: var(--card) !important;
  padding: 4px !important;
  box-shadow:
    0 16px 36px -12px rgba(13,34,64,.35),
    0 4px 12px -2px rgba(0,0,0,.15),
    0 0 0 6px rgba(253,250,244,.9) !important;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease !important;
  cursor: pointer;
}

.team-photo:hover {
  transform: translateY(-6px) scale(1.03) !important;
  border-color: var(--gold-light) !important;
  box-shadow:
    0 24px 48px -12px rgba(13,34,64,.45),
    0 8px 20px -2px rgba(212,160,23,.25),
    0 0 0 8px #FFFFFF !important;
}

.team-photo.sm {
  width: 68px !important;
  height: 68px !important;
  border-radius: 16px !important;
  border: 2.5px solid var(--gold) !important;
  padding: 2px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 8px 18px -6px rgba(13,34,64,.25), 0 0 0 3px rgba(253,250,244,.85) !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease !important;
}

.team-photo.sm:hover {
  transform: translateY(-3px) scale(1.08) !important;
  border-color: var(--gold-light) !important;
  box-shadow: 0 12px 24px -6px rgba(13,34,64,.35), 0 0 0 4px #FFFFFF !important;
}

/* Photo placeholders */
.team-photo-ph {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 210px !important;
  height: 210px !important;
  border-radius: 24px !important;
  background: var(--card) !important;
  border: 3px dashed rgba(212,160,23,.65) !important;
  color: var(--navy) !important;
  box-shadow: 0 12px 28px -10px rgba(13,34,64,.18), 0 0 0 5px rgba(253,250,244,.85) !important;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease, background-color .3s !important;
  cursor: pointer;
}

.team-photo-ph:hover {
  border-color: var(--gold) !important;
  background: #FFFFFF !important;
  transform: translateY(-5px) scale(1.03) !important;
  box-shadow: 0 20px 40px -12px rgba(13,34,64,.3), 0 0 0 7px #FFFFFF !important;
}

.team-photo-ph span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-muted) !important;
  letter-spacing: .02em;
}

.team-photo-ph.sm {
  width: 68px !important;
  height: 68px !important;
  border-radius: 16px !important;
  flex-shrink: 0 !important;
  gap: 0 !important;
  color: var(--navy) !important;
  border: 2px dashed rgba(212,160,23,.65) !important;
  box-shadow: 0 6px 16px -6px rgba(13,34,64,.18), 0 0 0 3px rgba(253,250,244,.85) !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease !important;
}

.team-photo-ph.sm:hover {
  transform: translateY(-3px) scale(1.08) !important;
  border-color: var(--gold) !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 22px -6px rgba(13,34,64,.3), 0 0 0 4px #FFFFFF !important;
}

/* ── CONTACT PAGE ICONS & GOOGLE MAP ─────────────────────────────────────── */
.cl .ci-item {
  padding: 16px 0 !important;
  border-top: 1px solid var(--border) !important;
}

.cl .ci-item dt {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  margin-bottom: 6px !important;
}

.c-ico {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--navy) !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 10px -4px rgba(13,34,64,.3) !important;
}

.cl .ci-item dd {
  margin: 0 0 0 48px !important;
  color: var(--ink-muted) !important;
  line-height: 1.6 !important;
}

.map-sec {
  padding: 56px 0 72px !important;
}

.map-head {
  text-align: center;
  margin-bottom: 28px;
}

.map-head h2 {
  font-size: 32px !important;
  color: var(--navy) !important;
  margin-bottom: 6px !important;
}

.map-head p {
  color: var(--ink-muted) !important;
  font-size: 16px !important;
}

.map-frame {
  border-radius: 20px !important;
  padding: 8px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 16px 36px -16px rgba(13,34,64,.2) !important;
  overflow: hidden;
}

/* ── EXCELLENCE METRICS GRAPH (About Page) ─────────────────────────────── */
.metrics-sec {
  background: var(--bg) !important;
  padding: 72px 0 !important;
}

.metrics-head {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 36px !important;
}

.metrics-head h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(28px, 4vw, 38px) !important;
  color: var(--navy) !important;
  margin-bottom: 8px !important;
}

.metrics-head .lead {
  color: var(--ink-muted) !important;
  font-size: 16.5px !important;
  margin: 0 !important;
}

.metrics-card {
  max-width: 840px !important;
  margin: 0 auto !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 40px 42px !important;
  box-shadow: 0 16px 36px -16px rgba(13,34,64,.12), 0 2px 8px rgba(0,0,0,.03) !important;
}

.metric-row {
  margin-bottom: 24px !important;
}

.metric-row:last-child {
  margin-bottom: 0 !important;
}

.metric-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}

.m-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(13,34,64,.06) !important;
  color: var(--navy) !important;
  flex-shrink: 0 !important;
  transition: transform .2s ease, background-color .2s ease !important;
}

.metric-row:hover .m-icon {
  transform: scale(1.08) !important;
  background: rgba(212,160,23,.2) !important;
}

.m-title {
  flex: 1 !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  text-align: left !important;
  letter-spacing: -.01em !important;
}

.m-val {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #9A6500 !important;
  background: #FDF4E3 !important;
  border: 1px solid rgba(212,160,23,.35) !important;
  padding: 2px 12px !important;
  border-radius: 999px !important;
  letter-spacing: .02em !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  white-space: nowrap !important;
}

.bar {
  height: 12px !important;
  background: #EDE4D6 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08) !important;
  position: relative !important;
  width: 100% !important;
}

.bar i {
  display: block !important;
  height: 100% !important;
  width: 0 !important;
  background: linear-gradient(90deg, var(--navy) 0%, #1c3c66 45%, var(--gold) 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 10px rgba(212,160,23,.4) !important;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.go .bar i {
  width: var(--w) !important;
}

@media (max-width: 640px) {
  .metrics-card {
    padding: 24px 20px !important;
  }
  .m-title {
    font-size: 15px !important;
  }
  .m-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .m-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
}

/* ── COURSES PAGE: APPLY NOW BUTTON ENHANCEMENT ────────────────────────── */
.item a.apply,
.group .item a.apply,
.group .item .apply {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 20px !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: var(--navy) !important;
  background: #FFFFFF !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px -2px rgba(13,34,64,.12), 0 1px 3px rgba(0,0,0,.04) !important;
  transition: all .22s cubic-bezier(0.2, 0, 0, 1) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  align-self: center !important;
}

.item a.apply:hover,
.group .item a.apply:hover,
.group .item .apply:hover {
  background: var(--navy) !important;
  color: var(--gold) !important;
  border-color: var(--navy) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px -4px rgba(13,34,64,.32), 0 3px 6px rgba(0,0,0,.08) !important;
}

.item a.apply:active,
.group .item a.apply:active,
.group .item .apply:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px -1px rgba(13,34,64,.2) !important;
}

/* ── ADMISSION HERO: FULL-WIDTH SINGLE COLUMN ───────────────────────────── */
.admission .top .wrap,
.top .wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.admission .top p,
.top p {
  max-width: none !important;
  width: 100% !important;
  font-size: 19px !important;
  line-height: 1.6 !important;
}