/* =========================================================
   PRARAMBH — style.css
   Design tokens: "Sunrise" palette
   Navy (trust/authority) -> Marigold (celebration/CTA) -> Coral (prize highlight)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --navy:        #16274B;
  --navy-deep:   #0E1B36;
  --marigold:    #F5A623;
  --marigold-dk: #B9780C;
  --coral:       #E85D3D;
  --forest:      #1F6F54;
  --paper:       #FBFAF6;
  --sky:         #EEF3F8;
  --ink:         #1B2230;
  --ink-soft:    #5B6373;
  --line:        #E4E1D6;
  --white:       #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body:    'Manrope', sans-serif;

  --header-h: 76px;
  --util-h:   36px;
  --container: 1280px;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(14,27,54,0.10);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

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

/* ---------- Skip link (a11y) ---------- */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--marigold);
  color:var(--navy-deep);
  padding:10px 16px;
  z-index:1000;
  border-radius:0 0 8px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

/* =========================================================
   1. TOP UTILITY BAR
   ========================================================= */
.utility-bar{
  background:var(--navy-deep);
  color:rgba(255,255,255,0.85);
  font-size:15px;
  height:var(--util-h);
}
.utility-bar .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.utility-left{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.utility-left a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:inherit;
}
.utility-left a:hover{ color:var(--marigold); }
.utility-left svg{ width:14px; height:14px; flex:none; }

.utility-notice{
  color:var(--marigold);
  font-weight:600;
  letter-spacing:.2px;
  animation:blink-fade 1.8s ease-in-out infinite;
}
@keyframes blink-fade{
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}
@media (prefers-reduced-motion:reduce){
  .utility-notice{ animation:none; }
}

.utility-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.utility-right a{
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  transition:background .15s ease, transform .15s ease;
}
.utility-right a:hover{ background:var(--marigold); color:var(--navy-deep); transform:translateY(-1px); }
.utility-right svg{ width:14px;height:14px; }

/* =========================================================
   2. MAIN HEADER
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.site-header.is-scrolled{
  box-shadow:var(--shadow);
}
.header-inner{
  width:100%;
  height:var(--header-h);
  padding:0 24px 0 12px;   
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* --- Logo / sunrise mark --- */
.brand{
  display:flex;
  align-items:center;
  gap:6px;      /* pehle 10px tha */
  flex:none;
  margin-right:-4px;   /* thoda aur left-shift + nav ko space milega */
}
.brand-logo{
  height:50px;
  width:auto;
  max-width:170px;
  object-fit:contain;
  flex:none;
}
.brand-word{
  font-family:var(--font-display);
  font-weight:700;
  font-size:23px;
  color:var(--navy);
  line-height:1;
  letter-spacing:.2px;
}
.brand-sub{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--coral);
  margin-top:3px;
}

/* --- Primary nav --- */
.main-nav{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  justify-content:center;
}
.main-nav > ul{
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:nowrap;
}
.main-nav > ul > li{ position:relative; flex:none; }
.nav-link{
  display:flex;
  align-items:center;
  gap:3px;
  padding:12px 9px;
  font-size:15.5px;
  font-weight:600;
  color:var(--ink);
  border-radius:8px;
  white-space:nowrap;
  transition:color .15s ease, background .15s ease;
}
.nav-link:hover,
.nav-link:focus-visible,
li.is-open > .nav-link{
  color:var(--navy);
  background:var(--sky);
}
.nav-link.highlight{ color:var(--coral); }
.nav-link.highlight:hover{ color:var(--coral); background:#FDEDE7; }
.caret{
  width:9px;height:9px;
  transition:transform .18s ease;
  flex:none;
}
li.is-open > .nav-link .caret{ transform:rotate(180deg); }

/* --- Dropdown panel --- */
.dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:250px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:50;
}
li.is-open > .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown a{
  display:block;
  padding:10px 12px;
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  border-radius:7px;
}
.dropdown a:hover,
.dropdown a:focus-visible{
  background:var(--sky);
  color:var(--navy);
}

/* --- Header actions --- */
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}
.icon-btn{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink);
  background:var(--white);
  transition:border-color .15s ease, color .15s ease;
}
.icon-btn:hover{ border-color:var(--navy); color:var(--navy); }
.icon-btn svg{ width:17px;height:17px; }

.btn-register{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--marigold);
  color:var(--navy-deep);
  font-weight:700;
  font-size:14.5px;
  padding:11px 20px;
  border-radius:999px;
  border:none;
  transition:background .15s ease, transform .15s ease;
}
.btn-register:hover{ background:var(--marigold-dk); color:var(--white); transform:translateY(-1px); }
.btn-register svg{ width:15px; height:15px; }

/* --- Mobile toggle --- */
.nav-toggle{
  display:none;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  align-items:center;
  justify-content:center;
}
.nav-toggle svg{ width:20px;height:20px; }

/* =========================================================
   Responsive: tablet / mobile
   ========================================================= */
@media (max-width: 960px){
  .main-nav{
    position:fixed;
    top:calc(var(--util-h) + var(--header-h));
    left:0;right:0;bottom:0;
    background:var(--white);
    justify-content:flex-start;
    padding:12px 20px 100px;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:400;
  }
  body.nav-open .main-nav{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; width:100%; }
  .main-nav > ul > li{ width:100%; border-bottom:1px solid var(--line); }
  .nav-link{ width:100%; justify-content:space-between; padding:16px 6px; border-radius:0; }
  .nav-link:hover, li.is-open > .nav-link{ background:none; }
  .dropdown{
    position:static;
    opacity:1;visibility:visible;transform:none;
    display:none;
    box-shadow:none;
    border:none;
    padding:0 0 8px 12px;
    max-width:none;
  }
  li.is-open > .dropdown{ display:block; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-register span{ display:none; }
  .btn-register{ padding:11px 14px; }
}

@media (max-width: 620px){
  .utility-notice{ display:none; }
  .brand-sub{ display:none; }

  .utility-text{ display:none; }

  .utility-left{
    gap:14px;
    flex-wrap:nowrap;
  }

  .utility-bar .container{
    justify-content:center;
    gap:14px;
  }

  .brand-logo{ height:38px; }
  .header-inner{ padding:0 12px; }
}

/* =========================================================
   SECTION 1 — Hero + quick registration form
   ========================================================= */
.hero{
  position:relative;
  height:calc(100vh - var(--header-h) - var(--util-h));
  min-height:520px;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(14,27,54,0.68) 0%,
    rgba(14,27,54,0.42) 28%,
    rgba(14,27,54,0.08) 52%,
    rgba(251,250,246,0.75) 72%,
    var(--paper) 94%
  );
}
.hero-grid{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  align-items:center;
  gap:32px;
  padding:24px;
}

/* --- Left: headline copy --- */
.hero-copy{ max-width:520px; color:var(--white); }
.hero-eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--marigold);
  background:rgba(14,27,54,0.35);
  border:1px solid rgba(245,166,35,0.5);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}
.hero-copy h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(30px,4vw,46px);
  line-height:1.14;
  color:var(--white);
  margin:0 0 16px;
}
.hero-copy p{
  font-size:16px;
  color:rgba(255,255,255,0.88);
  margin:0 0 24px;
  max-width:440px;
}
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-badges .badge{
  font-size:13px;
  font-weight:600;
  color:var(--navy-deep);
  background:var(--white);
  padding:7px 16px;
  border-radius:999px;
}

/* --- Right: registration card --- */
.hero-form-wrap{
  align-self:stretch;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.hero-form{
  width:100%;
  max-width:380px;
  max-height:100%;
  overflow-y:auto;
  background:var(--white);
  border-radius:14px;
  padding:18px 20px 16px;
  box-shadow:var(--shadow);
  border-top:4px solid var(--coral);
}
.hero-form h2{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  color:var(--navy);
  margin:0 0 2px;
}
.hero-form-bar{
  width:4px;
  height:17px;
  background:var(--coral);
  border-radius:2px;
  display:inline-block;
  flex:none;
}
.hero-form-sub{
  font-size:12px;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.hero-form label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  margin:8px 0 4px;
}
.hero-form label .req{ color:var(--coral); }
.hero-form input,
.hero-form select{
  width:100%;
  height:37px;
  padding:0 12px;
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hero-form input::placeholder{ color:var(--ink-soft); opacity:.75; }
.hero-form input:focus,
.hero-form select:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(22,39,75,0.12);
}
.hero-form select{ appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6373' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:15px;
}
.btn-submit{
  width:100%;
  margin-top:12px;
  height:40px;
  background:var(--navy);
  color:var(--white);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.2px;
  border:none;
  border-radius:8px;
  transition:background .15s ease, transform .15s ease;
}
.btn-submit:hover{ background:var(--marigold-dk); transform:translateY(-1px); }

@media (max-width: 860px){
  .hero{
    height:auto;
    min-height:calc(100vh - var(--header-h) - var(--util-h));
  }
  .hero-overlay{
    background:linear-gradient(180deg, rgba(14,27,54,0.72) 0%, rgba(14,27,54,0.5) 55%, var(--paper) 96%);
  }
  .hero-grid{ height:auto; grid-template-columns:1fr; padding:36px 20px; }
  .hero-copy{ max-width:none; }
  .hero-form-wrap{ justify-content:stretch; }
  .hero-form{ max-width:none; max-height:none; overflow-y:visible; }
}

/* =========================================================
   INNER PAGE — shared page banner + breadcrumb
   (used by About Prarambh Exam and, later, every inner page)
   ========================================================= */
.page-banner{
  background:var(--navy);
  padding:38px 0 34px;
  text-align:center;
}
.breadcrumb{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:rgba(255,255,255,0.65);
  margin-bottom:12px;
}
.breadcrumb a{ color:rgba(255,255,255,0.85); }
.breadcrumb a:hover{ color:var(--marigold); }
.breadcrumb [aria-current="page"]{ color:var(--marigold); font-weight:600; }
.page-banner h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(26px,3.4vw,36px);
  color:var(--white);
  margin:0;
}

/* =========================================================
   ABOUT PRARAMBH EXAM — intro
   ========================================================= */
.about-intro{ padding:64px 0 8px; }
.about-intro-inner{ max-width:760px; margin:0 auto; text-align:center; }
.eyebrow-tag{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--coral);
  background:#FDEDE7;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
}
.about-intro h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(26px,3.6vw,36px);
  color:var(--navy);
  margin:0 0 20px;
}
.about-intro p{
  font-size:16px;
  color:var(--ink-soft);
  margin:0 0 16px;
  text-align:left;
}
.about-intro p strong{ color:var(--navy); }

.exam-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:28px 0 0;
  padding:22px;
  background:var(--sky);
  border-radius:14px;
}
.exam-badges li{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);
  padding:8px 16px;
  border-radius:999px;
}

/* =========================================================
   ABOUT PRARAMBH EXAM — key highlight cards
   ========================================================= */
.about-highlights{ padding:56px 0 64px; }
.highlight-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:24px;
}
.highlight-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px 26px;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.highlight-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.highlight-icon{
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  margin-bottom:18px;
}
.highlight-icon svg{ width:26px; height:26px; }
.highlight-icon.icon-navy{ background:#E9EDF5; color:var(--navy); }
.highlight-icon.icon-forest{ background:#E7F3EE; color:var(--forest); }
.highlight-icon.icon-coral{ background:#FDEDE7; color:var(--coral); }
.highlight-card h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  color:var(--navy);
  margin:0 0 6px;
}
.highlight-card p{
  font-size:14px;
  color:var(--ink-soft);
  margin:0;
}

/* =========================================================
   ABOUT PRARAMBH EXAM — CTA strip
   ========================================================= */
.about-cta{ background:var(--navy-deep); padding:40px 0; margin-top:16px; }
.about-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.about-cta-inner h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:22px;
  color:var(--white);
  margin:0 0 4px;
}
.about-cta-inner p{
  font-size:14px;
  color:rgba(255,255,255,0.75);
  margin:0;
}
.about-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-outline{
  display:inline-flex;
  align-items:center;
  color:var(--white);
  font-weight:700;
  font-size:14.5px;
  padding:11px 22px;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:999px;
  transition:border-color .15s ease, background .15s ease;
}
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,0.08); }

@media (max-width: 620px){
  .about-intro p{ text-align:left; }
  .about-cta-inner{ text-align:center; justify-content:center; }
}

/* =========================================================
   ABOUT PRARAMBH EXAM — design tokens
   Falls back gracefully if the global stylesheet doesn't
   already define these variables.
   ========================================================= */
.about-page{
  --navy-deep:  var(--navy-deep, #10233F);
  --navy:       var(--navy, #1B3A63);
  --forest:     var(--forest, #2F6F5E);
  --coral:      var(--coral, #E2624F);
  --gold:       var(--gold, #C8932F);
  --paper:      var(--paper, #F7F5EF);
  --white:      var(--white, #FFFFFF);
  --ink:        var(--ink, #16202B);
  --ink-soft:   rgba(22,32,43,.68);
  --font-display: var(--font-display, 'Fraunces', Georgia, serif);
  --font-body:    var(--font-body, 'Inter', -apple-system, sans-serif);
  --font-mono:    var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
}

/* =========================================================
   PAGE BANNER
   ========================================================= */
.page-banner-sub{
  font-family:var(--font-body);
  font-size:15px;
  color:rgba(255,255,255,0.78);
  margin:6px 0 0;
}

/* =========================================================
   SHARED SECTION HEADS
   ========================================================= */
.eyebrow-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--coral);
  background:rgba(226,98,79,0.1);
  border:1px solid rgba(226,98,79,0.25);
  padding:4px 12px;
  border-radius:999px;
}
.eyebrow-center{ display:block; width:max-content; margin:0 auto 14px; }
.eyebrow-light{
  color:var(--gold);
  background:rgba(200,147,47,0.12);
  border-color:rgba(200,147,47,0.35);
  display:block; width:max-content; margin:0 auto 14px;
}
.section-heading{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(24px,3vw,32px);
  color:var(--navy-deep);
  text-align:center;
  margin:0 0 40px;
}
.section-heading-light{ color:var(--white); }

/* =========================================================
   HIGHLIGHTS — extra icon colour
   ========================================================= */
.icon-gold{ color:var(--gold); background:rgba(200,147,47,0.12); }

/* =========================================================
   THE PATHWAY (signature section)
   ========================================================= */
.about-pathway{
  background:var(--navy-deep);
  background-image:radial-gradient(circle at 12% 20%, rgba(200,147,47,0.14), transparent 45%);
  padding:64px 0 72px;
  text-align:center;
}
.pathway-intro{
  font-family:var(--font-body);
  color:rgba(255,255,255,0.78);
  max-width:560px;
  margin:-14px auto 48px;
  font-size:15.5px;
  line-height:1.6;
}
.pathway-track{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  justify-content:center;
}
.pathway-origin{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:var(--white);
  border-radius:18px;
  padding:20px 26px;
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
  border:2px solid var(--gold);
}
.pathway-origin-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--coral);
  text-transform:uppercase;
}
.pathway-origin-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:17px;
  color:var(--navy-deep);
  line-height:1.25;
}
.pathway-line{
  flex:1 1 60px;
  min-width:40px;
  height:2px;
  background-image:repeating-linear-gradient(to right, var(--gold) 0 8px, transparent 8px 16px);
}
.pathway-destinations{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  list-style:none;
  margin:0; padding:0;
  max-width:520px;
}
.pathway-destinations li span{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--white);
  border:1px dashed rgba(255,255,255,0.45);
  border-radius:8px;
  padding:8px 14px;
  background:rgba(255,255,255,0.06);
}

@media (max-width:760px){
  .pathway-track{ flex-direction:column; }
  .pathway-line{ width:2px; height:36px; background-image:repeating-linear-gradient(to bottom, var(--gold) 0 8px, transparent 8px 16px); }
}

/* =========================================================
   EXAM AT A GLANCE
   ========================================================= */
.about-glance{ background:var(--paper); padding:64px 0; }
.glance-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.glance-card{
  background:var(--white);
  border:1px solid rgba(16,35,63,0.08);
  border-radius:14px;
  padding:24px 22px;
  box-shadow:0 8px 24px rgba(16,35,63,0.05);
}
.glance-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--forest);
  margin-bottom:10px;
}
.glance-card h3{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  color:var(--navy-deep);
  margin:0 0 8px;
}
.glance-card p{
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0;
}

@media (max-width:900px){ .glance-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .glance-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FAQ
   ========================================================= */
.about-faq{ padding:64px 0 72px; }
.about-faq-inner{ max-width:720px; }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  background:var(--white);
  border:1px solid rgba(16,35,63,0.1);
  border-radius:12px;
  padding:16px 20px;
}
.faq-item + .faq-item{ margin-top:0; }
.faq-item summary{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15.5px;
  color:var(--navy-deep);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--coral);
  transition:transform .15s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:12px 0 2px;
}

/* =========================================================
   ABOUT PRARAMBH EXAM — design tokens
   IMPORTANT: these are namespaced as --ab-* so they never
   self-reference. Each one falls back to your site's real
   variable if it exists, otherwise uses the value after the
   comma. (Never write `--navy-deep: var(--navy-deep, ...)`
   on the same element — that's a cycle and the browser
   silently discards it, which is what caused the white text.)
   ========================================================= */
.about-page{
  --ab-navy-deep: var(--navy-deep, #10233F);
  --ab-navy:      var(--navy, #1B3A63);
  --ab-navy-tint: #EBF0F7;
  --ab-coral:     var(--coral, #E2624F);
  --ab-gold:      var(--gold, #C8932F);
  --ab-paper:     var(--paper, #F7F5EF);
  --ab-white:     #FFFFFF;
  --ab-ink:       #16202B;
  --ab-ink-soft:  rgba(22,32,43,.68);
  --ab-font-display: var(--font-display, 'Fraunces', Georgia, serif);
  --ab-font-body:    var(--font-body, 'Inter', -apple-system, sans-serif);
  --ab-font-mono:    var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);

  color:var(--ab-ink);
}
.about-page p,
.about-page h1,
.about-page h2,
.about-page h3{ color:inherit; }

/* =========================================================
   PAGE BANNER
   ========================================================= */
.page-banner-sub{
  font-family:var(--ab-font-body);
  font-size:15px;
  color:rgba(255,255,255,0.82);
  margin:6px 0 0;
}

/* =========================================================
   SHARED SECTION HEADS
   ========================================================= */
.eyebrow-tag{
  display:inline-block;
  font-family:var(--ab-font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ab-white);
  background:var(--ab-navy-deep);
  padding:6px 14px;
  border-radius:999px;
}
.eyebrow-center{ display:block; width:max-content; margin:0 auto 14px; }
.eyebrow-light{
  color:var(--ab-navy-deep);
  background:var(--ab-gold);
  display:block; width:max-content; margin:0 auto 14px;
}
.section-heading{
  font-family:var(--ab-font-display);
  font-weight:600;
  font-size:clamp(24px,3vw,32px);
  color:var(--ab-navy-deep);
  text-align:center;
  margin:0 0 40px;
}
.section-heading-light{ color:var(--ab-white); }

/* =========================================================
   ABOUT INTRO — exam badge pills (simplified, single colour)
   ========================================================= */
.exam-badges{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:28px 0 0;
  padding:0;
}
.exam-badges li{
  font-family:var(--ab-font-body);
  font-weight:600;
  font-size:13.5px;
  color:var(--ab-navy-deep);
  background:var(--ab-navy-tint);
  border-radius:999px;
  padding:9px 18px;
}

/* =========================================================
   HIGHLIGHTS — one consistent accent colour, not four
   ========================================================= */
.highlight-icon{
  color:var(--ab-navy-deep) !important;
  background:var(--ab-navy-tint) !important;
}
.icon-gold{ color:var(--ab-navy-deep); background:var(--ab-navy-tint); }
.highlight-card h3{ color:var(--ab-navy-deep); }
.highlight-card p{ color:var(--ab-ink-soft); }

/* =========================================================
   THE PATHWAY — now image-left, content-right
   ========================================================= */
.about-pathway{
  background:var(--ab-navy-deep);
  padding:64px 0 72px;
}
.pathway-layout{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:48px;
  align-items:center;
}
.pathway-visual{
  display:flex;
  justify-content:center;
}
.pathway-visual svg{ width:100%; max-width:340px; height:auto; }

.pathway-content{ text-align:left; }
.pathway-content .eyebrow-light,
.pathway-content .section-heading-light{ margin-left:0; }
.pathway-intro{
  font-family:var(--ab-font-body);
  color:rgba(255,255,255,0.82);
  max-width:480px;
  margin:0 0 28px;
  font-size:15.5px;
  line-height:1.65;
}
.pathway-destinations{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  margin:0; padding:0;
}
.pathway-destinations li span{
  display:inline-block;
  font-family:var(--ab-font-body);
  font-weight:600;
  font-size:13.5px;
  color:var(--ab-navy-deep);
  border-radius:999px;
  padding:8px 16px;
  background:var(--ab-white);
}

@media (max-width:820px){
  .pathway-layout{ grid-template-columns:1fr; text-align:center; }
  .pathway-content{ text-align:center; }
  .pathway-content .eyebrow-light,
  .pathway-content .section-heading-light{ margin-left:auto; margin-right:auto; }
  .pathway-intro{ margin-left:auto; margin-right:auto; }
  .pathway-destinations{ justify-content:center; }
}

/* =========================================================
   EXAM AT A GLANCE — cards now have real background colour
   ========================================================= */
.about-glance{ background:var(--ab-white); padding:64px 0; }
.glance-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.glance-card{
  background:var(--ab-navy-tint);
  border-radius:14px;
  padding:24px 22px;
}
.glance-tag{
  display:inline-block;
  font-family:var(--ab-font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ab-coral);
  margin-bottom:10px;
}
.glance-card h3{
  font-family:var(--ab-font-display);
  font-size:18px;
  font-weight:600;
  color:var(--ab-navy-deep);
  margin:0 0 8px;
}
.glance-card p{
  font-family:var(--ab-font-body);
  font-size:14.5px;
  color:var(--ab-ink-soft);
  line-height:1.55;
  margin:0;
}

@media (max-width:900px){ .glance-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .glance-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FAQ
   ========================================================= */
.about-faq{ padding:64px 0 72px; background:var(--ab-paper); }
.about-faq-inner{ max-width:720px; }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  background:var(--ab-white);
  border:1px solid rgba(16,35,63,0.1);
  border-radius:12px;
  padding:16px 20px;
}
.faq-item summary{
  font-family:var(--ab-font-body);
  font-weight:600;
  font-size:15.5px;
  color:var(--ab-navy-deep);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:var(--ab-font-mono);
  font-size:18px;
  color:var(--ab-coral);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{
  font-family:var(--ab-font-body);
  font-size:14.5px;
  color:var(--ab-ink-soft);
  line-height:1.6;
  margin:12px 0 2px;
}

/* =========================================================
   ABOUT PRARAMBH EXAM — design tokens
   Namespaced --ab-* so nothing self-references (a self-
   referencing var like `--navy-deep: var(--navy-deep, ...)`
   is invalid and gets silently dropped by the browser).
   Falls back to your site's real variables when present.
   ========================================================= */
.about-page{
  --ab-navy:      var(--navy-deep, #1B2A4A);
  --ab-red:       var(--coral, #E2624F);
  --ab-blue:      #2F6FE4;
  --ab-gold:      var(--gold, #C8932F);
  --ab-paper:     #F7F8FA;
  --ab-white:     #FFFFFF;
  --ab-ink-soft:  #5B6472;
  --ab-font-display: var(--font-display, 'Poppins', Georgia, serif);
  --ab-font-body:    var(--font-body, 'Inter', -apple-system, sans-serif);
  --ab-font-mono:    var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);

  color:var(--ab-ink-soft);
}
.about-page h1,
.about-page h2,
.about-page h3{ color:var(--ab-navy); }

/* =========================================================
   PAGE BANNER
   ========================================================= */
.page-banner{
  background:linear-gradient(160deg, var(--ab-navy), #24365C);
  padding:46px 0 40px;
}
.breadcrumb{ font-family:var(--ab-font-mono); font-size:12px; color:rgba(255,255,255,.6); display:flex; gap:8px; margin-bottom:14px; }
.breadcrumb a{ color:rgba(255,255,255,.8); }
.breadcrumb [aria-current]{ color:var(--ab-gold); }
.page-banner h1{ font-family:var(--ab-font-display); font-weight:700; font-size:clamp(28px,4vw,40px); color:var(--ab-white); margin:0; }
.page-banner-sub{ font-family:var(--ab-font-body); font-size:15px; color:rgba(255,255,255,0.82); margin:8px 0 0; }

/* =========================================================
   SHARED SECTION HEADS
   ========================================================= */
.eyebrow-tag{
  display:inline-block;
  font-family:var(--ab-font-body);
  font-weight:600;
  font-size:14px;
  color:var(--ab-blue);
}
.eyebrow-center{ display:block; width:max-content; margin:0 auto 10px; }
.eyebrow-light{ color:var(--ab-gold); display:block; width:max-content; margin:0 auto 10px; }
.section-heading{
  font-family:var(--ab-font-display);
  font-weight:700;
  font-size:clamp(24px,3vw,32px);
  color:var(--ab-navy);
  text-align:center;
  margin:0 0 40px;
}
.section-heading-light{ color:var(--ab-white); }

/* =========================================================
   ABOUT INTRO — photo left, copy right
   ========================================================= */
.about-intro{ padding:72px 0; background:var(--ab-white); }
.about-intro-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:center;
}

.about-intro-media{ position:relative; }
.about-intro-media img{
  width:100%; height:auto; display:block;
  border-radius:16px; object-fit:cover;
}
.about-intro-badge{
  position:absolute; left:24px; bottom:24px;
  background:var(--ab-white);
  border-radius:12px;
  padding:14px 20px;
  box-shadow:0 12px 30px rgba(16,35,63,0.18);
  display:flex; flex-direction:column; line-height:1.15;
}
.about-intro-badge-num{
  font-family:var(--ab-font-display); font-weight:700; font-size:26px; color:var(--ab-red);
}
.about-intro-badge-label{
  font-family:var(--ab-font-body); font-size:13px; color:var(--ab-ink-soft); margin-top:2px;
}

.about-intro-content h2{
  font-family:var(--ab-font-display);
  font-weight:700;
  font-size:clamp(28px,3.4vw,36px);
  line-height:1.2;
  margin:0 0 18px;
  padding-left:16px;
  border-left:4px solid var(--ab-red);
}
.about-intro-content h2::after{
  content:"";
  display:block;
  width:56px; height:3px;
  background:var(--ab-red);
  margin-top:16px;
}
.about-intro-content p{
  font-family:var(--ab-font-body);
  font-size:15.5px;
  line-height:1.7;
  color:var(--ab-ink-soft);
  margin:0 0 16px;
  text-align:left;
}
.about-link{ color:var(--ab-blue); font-weight:600; }

.exam-badges{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:10px;
  margin:24px 0 0; padding:0;
}
.exam-badges li{
  font-family:var(--ab-font-body);
  font-weight:600;
  font-size:13px;
  color:var(--ab-navy);
  background:var(--ab-paper);
  border-radius:999px;
  padding:8px 16px;
}

@media (max-width:900px){
  .about-intro-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   HIGHLIGHTS — one consistent red accent
   ========================================================= */
.about-highlights{ background:var(--ab-paper); padding:64px 0 68px; }
.highlight-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.highlight-card{
  background:var(--ab-white);
  border-radius:14px;
  padding:26px 22px;
  text-align:center;
}
.highlight-icon{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ab-red);
  margin-bottom:14px;
}
.highlight-icon svg{ width:26px; height:26px; }
.highlight-card h3{ font-family:var(--ab-font-display); font-size:16px; font-weight:600; color:var(--ab-navy); margin:0 0 6px; }
.highlight-card p{ font-family:var(--ab-font-body); font-size:14px; line-height:1.55; color:var(--ab-ink-soft); margin:0; }

@media (max-width:900px){ .highlight-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .highlight-grid{ grid-template-columns:1fr; } }

/* =========================================================
   THE PATHWAY — image-left, content-right (dark section for
   contrast between the light sections above and below)
   ========================================================= */
.about-pathway{ background:var(--ab-navy); padding:64px 0 72px; }
.pathway-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center; }
.pathway-visual{ display:flex; justify-content:center; }
.pathway-visual svg{ width:100%; max-width:340px; height:auto; }
.pathway-content{ text-align:left; }
.pathway-intro{
  font-family:var(--ab-font-body);
  color:rgba(255,255,255,0.82);
  max-width:480px;
  margin:0 0 28px;
  font-size:15.5px;
  line-height:1.65;
}
.pathway-destinations{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.pathway-destinations li span{
  display:inline-block;
  font-family:var(--ab-font-body);
  font-weight:600;
  font-size:13.5px;
  color:var(--ab-navy);
  border-radius:999px;
  padding:8px 16px;
  background:var(--ab-white);
}

@media (max-width:820px){
  .pathway-layout{ grid-template-columns:1fr; text-align:center; }
  .pathway-content{ text-align:center; }
  .pathway-intro{ margin-left:auto; margin-right:auto; }
  .pathway-destinations{ justify-content:center; }
}

/* =========================================================
   EXAM AT A GLANCE
   ========================================================= */
.about-glance{ background:var(--ab-white); padding:64px 0; }
.glance-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.glance-card{ background:var(--ab-paper); border-radius:14px; padding:24px 22px; }
.glance-tag{
  display:inline-block;
  font-family:var(--ab-font-body);
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ab-red);
  margin-bottom:10px;
}
.glance-card h3{ font-family:var(--ab-font-display); font-size:18px; font-weight:600; color:var(--ab-navy); margin:0 0 8px; }
.glance-card p{ font-family:var(--ab-font-body); font-size:14.5px; color:var(--ab-ink-soft); line-height:1.55; margin:0; }

@media (max-width:900px){ .glance-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .glance-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FAQ
   ========================================================= */
.about-faq{ padding:64px 0 72px; background:var(--ab-paper); }
.about-faq-inner{ max-width:720px; }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ background:var(--ab-white); border-radius:12px; padding:16px 20px; }
.faq-item summary{
  font-family:var(--ab-font-body);
  font-weight:600;
  font-size:15.5px;
  color:var(--ab-navy);
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--ab-font-mono); font-size:18px; color:var(--ab-red); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ font-family:var(--ab-font-body); font-size:14.5px; color:var(--ab-ink-soft); line-height:1.6; margin:12px 0 2px; }

/* =========================================================
   CTA STRIP
   ========================================================= */
.about-cta{ background:var(--ab-navy); padding:40px 0; }
.about-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.about-cta-inner h3{ font-family:var(--ab-font-display); font-weight:600; font-size:22px; color:var(--ab-white); margin:0 0 4px; }
.about-cta-inner p{ font-size:14px; color:rgba(255,255,255,0.75); margin:0; }
.about-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-register{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ab-red); color:var(--ab-white);
  font-weight:700; font-size:14.5px;
  padding:11px 22px; border-radius:999px;
}
.btn-outline{
  display:inline-flex; align-items:center;
  color:var(--ab-white); font-weight:700; font-size:14.5px;
  padding:11px 22px; border:1px solid rgba(255,255,255,0.4); border-radius:999px;
  transition:border-color .15s ease, background .15s ease;
}
.btn-outline:hover{ border-color:var(--ab-white); background:rgba(255,255,255,0.08); }

@media (max-width: 620px){
  .about-cta-inner{ text-align:center; justify-content:center; }
}
/* =========================================================
   HOME — About the Examination snapshot
   Namespaced tokens (--ha-*) so nothing self-references or
   clashes with other pages' styles.
   ========================================================= */
.home-about{
  --ha-navy:    var(--navy-deep, #1B2A4A);
  --ha-red:     var(--coral, #C0392B);
  --ha-blue:    #2F6FE4;
  --ha-ink-soft: #5B6472;
  --ha-white:   #FFFFFF;
  --ha-paper:   #F7F8FA;
  --ha-font-display: var(--font-display, 'Poppins', Georgia, serif);
  --ha-font-body:    var(--font-body, 'Inter', -apple-system, sans-serif);

  background:var(--ha-white);
  padding:72px 0;
}

.home-about-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:center;
}

/* ---------- left: photo + stat badge ---------- */
.home-about-media{
  position:relative;
}
.home-about-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  object-fit:cover;
}
.home-about-badge{
  position:absolute;
  left:24px;
  bottom:24px;
  background:var(--ha-white);
  border-radius:12px;
  padding:14px 20px;
  box-shadow:0 12px 30px rgba(16,35,63,0.18);
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.home-about-badge-num{
  font-family:var(--ha-font-display);
  font-weight:700;
  font-size:26px;
  color:var(--ha-red);
}
.home-about-badge-label{
  font-family:var(--ha-font-body);
  font-size:13px;
  color:var(--ha-ink-soft);
  margin-top:2px;
}

/* ---------- right: eyebrow, heading, copy ---------- */
.home-about-eyebrow{
  display:inline-block;
  font-family:var(--ha-font-body);
  font-weight:600;
  font-size:14px;
  color:var(--ha-blue);
  margin-bottom:10px;
}
.home-about-content h2{
  font-family:var(--ha-font-display);
  font-weight:700;
  font-size:clamp(28px,3.4vw,36px);
  color:var(--ha-navy);
  line-height:1.2;
  margin:0 0 18px;
  padding-left:16px;
  border-left:4px solid var(--ha-red);
}
.home-about-content h2::after{
  content:"";
  display:block;
  width:56px;
  height:3px;
  background:var(--ha-red);
  margin-top:16px;
}
.home-about-content p{
  font-family:var(--ha-font-body);
  font-size:15.5px;
  line-height:1.7;
  color:var(--ha-ink-soft);
  margin:0 0 16px;
}
.home-about-link{
  color:var(--ha-blue);
  font-weight:600;
}

/* ---------- 3 highlight cards ---------- */
.home-about-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:32px;
}
.home-about-card{
  background:var(--ha-paper);
  border-radius:14px;
  padding:22px 18px;
  text-align:center;
}
.home-about-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ha-red);
  margin-bottom:12px;
}
.home-about-icon svg{ width:26px; height:26px; }
.home-about-card h3{
  font-family:var(--ha-font-display);
  font-weight:600;
  font-size:15.5px;
  color:var(--ha-navy);
  margin:0 0 4px;
}
.home-about-card p{
  font-family:var(--ha-font-body);
  font-size:13px;
  color:var(--ha-ink-soft);
  margin:0;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .home-about-grid{ grid-template-columns:1fr; }
  .home-about-cards{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .home-about-badge{ left:12px; bottom:12px; padding:10px 14px; }
  .home-about-badge-num{ font-size:22px; }
}

/* =========================================================
   FINAL OVERRIDES — eyebrow pills + card-style page banner
   Placed last on purpose so it wins over the earlier
   duplicated .eyebrow-tag / .page-banner rules above.
   ========================================================= */

/* ---------- Eyebrow pills: red background, white text ---------- */
.eyebrow-tag,
.eyebrow-center,
.eyebrow-light{
  display:inline-block;
  font-family:var(--ab-font-mono, 'IBM Plex Mono', 'Courier New', monospace);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#FFFFFF !important;
  background:var(--ab-red, #db4730) !important;
  border:none !important;
  padding:6px 16px;
  border-radius:999px;
  width:max-content;
}
.eyebrow-center,
.eyebrow-light{
  display:block !important;
  width:max-content !important;
  margin:0 auto 14px !important;
}

/* ---------- Page banner: dark rounded card + breadcrumb below ---------- */
.page-banner{
  background:var(--ab-paper, #F7F8FA);
  padding:48px 0 30px;
  text-align:center;
}
.page-banner-card{
  background:var(--ab-navy, #1B2A4A);
  border-radius:20px;
  padding:44px 40px 38px;
  max-width:760px;
  margin:0 auto 18px;
  box-shadow:0 18px 40px rgba(16,35,63,0.18);
}
.page-banner-card h1{
  font-family:var(--ab-font-display, 'Poppins', Georgia, serif);
  font-weight:700;
  font-size:clamp(26px,3.4vw,36px);
  color:#FFFFFF;
  margin:0 0 10px;
}
.page-banner-sub{
  font-family:var(--ab-font-body, 'Inter', sans-serif);
  font-size:18px;
  color:rgba(255,255,255,0.82);
  max-width:520px;
  margin:0 auto;
}
.page-banner .breadcrumb{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-family:var(--ab-font-mono, monospace);
  font-size:17px;
  color:var(--ab-ink-soft, #5B6472);
  margin:0;
}
.page-banner .breadcrumb a{ color:var(--ab-blue, #2F6FE4); font-weight:600; }
.page-banner .breadcrumb a:hover{ text-decoration:underline; }
.page-banner .breadcrumb [aria-current="page"]{ color:var(--ab-red, #E2624F); font-weight:700; }

@media (max-width:620px){
  .page-banner-card{ padding:34px 24px 30px; }
}
/* ---------- Home About: Learn More button ---------- */
.home-about-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ha-red, #C0392B);
  color:#FFFFFF;
  font-family:var(--ha-font-body, 'Inter', sans-serif);
  font-weight:700;
  font-size:14.5px;
  padding:12px 24px;
  border-radius:999px;
  margin:6px 0 4px;
  transition:background .15s ease, transform .15s ease;
}
.home-about-btn svg{ width:16px; height:16px; }
.home-about-btn:hover{
  background:#A22F22;
  transform:translateY(-1px);
  color:#FFFFFF;
}

/* =========================================================
   KEY DETAILS ABOUT THE EXAMINATION — homepage fact strip
   Uses the site's own root palette (navy, coral, forest,
   marigold) rotated per card so it isn't flat/monotone.
   ========================================================= */
.kd-section{
  padding:72px 0;
  background:var(--paper, #FBFAF6);
}
.kd-eyebrow{
  display:block;
  width:max-content;
  margin:0 auto 14px;
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#FFFFFF;
  background:var(--coral, #E85D3D);
  padding:6px 16px;
  border-radius:999px;
}
.kd-heading{
  font-family:var(--font-display, 'Fraunces', serif);
  font-weight:600;
  font-size:clamp(24px,3vw,32px);
  color:var(--navy, #16274B);
  text-align:center;
  margin:0 0 8px;
}
.kd-sub{
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-size:15px;
  color:var(--ink-soft, #5B6373);
  text-align:center;
  max-width:520px;
  margin:0 auto 44px;
}

.kd-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
}
.kd-card{
  background:var(--white, #FFFFFF);
  border-radius:16px;
  padding:26px 20px;
  text-align:center;
  border-top:3px solid transparent;
  box-shadow:0 8px 20px rgba(14,27,54,0.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.kd-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(14,27,54,0.10);
}
.kd-card:nth-child(5n+1){ border-top-color:var(--navy, #16274B); }
.kd-card:nth-child(5n+2){ border-top-color:var(--coral, #E85D3D); }
.kd-card:nth-child(5n+3){ border-top-color:var(--forest, #1F6F54); }
.kd-card:nth-child(5n+4){ border-top-color:var(--marigold-dk, #B9780C); }
.kd-card:nth-child(5n+5){ border-top-color:var(--navy, #16274B); }

.kd-icon{
  width:52px; height:52px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.kd-icon svg{ width:24px; height:24px; }
.kd-card:nth-child(5n+1) .kd-icon{ background:#E9EDF5; color:var(--navy, #16274B); }
.kd-card:nth-child(5n+2) .kd-icon{ background:#FDEEE8; color:var(--coral, #E85D3D); }
.kd-card:nth-child(5n+3) .kd-icon{ background:#E7F3EE; color:var(--forest, #1F6F54); }
.kd-card:nth-child(5n+4) .kd-icon{ background:#FBF1DE; color:var(--marigold-dk, #B9780C); }
.kd-card:nth-child(5n+5) .kd-icon{ background:#E9EDF5; color:var(--navy, #16274B); }

.kd-label{
  display:block;
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-weight:700;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft, #5B6373);
  margin-bottom:8px;
}
.kd-value{
  display:block;
  font-family:var(--font-display, 'Fraunces', serif);
  font-weight:600;
  font-size:15.5px;
  line-height:1.4;
  color:var(--navy, #16274B);
}

@media (max-width:1000px){
  .kd-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:620px){
  .kd-grid{ grid-template-columns:1fr; }
}
/* =========================================================
   WHY PRARAMBH — homepage preview (3 cards + link to full page)
   Rotating accent colours from the site's root palette.
   ========================================================= */
.wpp-section{ padding:72px 0; background:var(--white, #FFFFFF); }
.wpp-eyebrow{
  display:block;
  width:max-content;
  margin:0 auto 14px;
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#FFFFFF;
  background:var(--navy, #16274B);
  padding:6px 16px;
  border-radius:999px;
}
.wpp-heading{
  font-family:var(--font-display, 'Fraunces', serif);
  font-weight:600;
  font-size:clamp(24px,3vw,32px);
  color:var(--navy, #16274B);
  text-align:center;
  margin:0 0 8px;
}
.wpp-sub{
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-size:15px;
  color:var(--ink-soft, #5B6373);
  text-align:center;
  max-width:560px;
  margin:0 auto 40px;
}

.wpp-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.wpp-card{
  background:var(--sky, #EEF3F8);
  border-radius:16px;
  padding:28px 24px;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.wpp-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(14,27,54,0.08);
}
.wpp-icon{
  width:50px; height:50px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  background:var(--white, #FFFFFF);
}
.wpp-icon svg{ width:24px; height:24px; }
.wpp-card:nth-child(3n+1) .wpp-icon{ color:var(--navy, #16274B); }
.wpp-card:nth-child(3n+2) .wpp-icon{ color:var(--coral, #E85D3D); }
.wpp-card:nth-child(3n+3) .wpp-icon{ color:var(--forest, #1F6F54); }
.wpp-card h3{
  font-family:var(--font-display, 'Fraunces', serif);
  font-weight:600;
  font-size:17px;
  color:var(--navy, #16274B);
  margin:0 0 8px;
}
.wpp-card p{
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft, #5B6373);
  margin:0;
}

.wpp-cta{ text-align:center; margin-top:36px; }
.wpp-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--marigold, #F5A623);
  color:var(--navy-deep, #0E1B36);
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-weight:700;
  font-size:14.5px;
  padding:13px 26px;
  border-radius:999px;
  transition:background .15s ease, transform .15s ease;
}
.wpp-btn svg{ width:16px; height:16px; }
.wpp-btn:hover{
  background:var(--marigold-dk, #B9780C);
  color:#FFFFFF;
  transform:translateY(-1px);
}

@media (max-width:900px){ .wpp-grid{ grid-template-columns:1fr; } }

/* =========================================================
   RULES & CONDITIONS — light, smooth timeline layout
   Soft pastel palette instead of dark navy, still visually
   distinct from the card-grid sections above.
   ========================================================= */
.rc-section{
  background:var(--sky, #EEF3F8);
  padding:80px 0;
}
.rc-head{ text-align:center; max-width:560px; margin:0 auto 52px; }
.rc-eyebrow{
  display:inline-block;
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFFFFF;
  background:var(--coral, #E85D3D);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px;
}
.rc-heading{
  font-family:var(--font-display, 'Fraunces', serif);
  font-weight:600;
  font-size:clamp(26px,3.4vw,36px);
  color:var(--navy, #16274B);
  margin:0 0 10px;
}
.rc-sub{
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-size:15px;
  color:var(--ink-soft, #5B6373);
  margin:0;
}

/* ---------- Timeline ---------- */
.rc-timeline{
  position:relative;
  max-width:760px;
  margin:0 auto;
}
.rc-timeline::before{
  content:"";
  position:absolute;
  left:27px;
  top:8px;
  bottom:8px;
  width:2px;
  background:repeating-linear-gradient(to bottom, rgba(22,39,75,0.14) 0 8px, transparent 8px 16px);
}
.rc-item{ position:relative; padding-left:76px; margin-bottom:22px; }
.rc-item:last-child{ margin-bottom:0; }
.rc-num{
  position:absolute;
  left:0; top:0;
  width:56px; height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display, 'Fraunces', serif);
  font-weight:700;
  font-size:16px;
  border:2px solid var(--white, #FFFFFF);
  box-shadow:0 6px 16px rgba(22,39,75,0.10);
}
.rc-item:nth-child(5n+1) .rc-num{ background:#E9EDF5; color:var(--navy, #16274B); }
.rc-item:nth-child(5n+2) .rc-num{ background:#FDEEE8; color:var(--coral, #E85D3D); }
.rc-item:nth-child(5n+3) .rc-num{ background:#E7F3EE; color:var(--forest, #1F6F54); }
.rc-item:nth-child(5n+4) .rc-num{ background:#FBF1DE; color:var(--marigold-dk, #B9780C); }
.rc-item:nth-child(5n+5) .rc-num{ background:#FDEEE8; color:var(--coral, #E85D3D); }

.rc-body{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:var(--white, #FFFFFF);
  border:1px solid var(--line, #E4E1D6);
  border-radius:14px;
  padding:18px 22px;
  box-shadow:0 6px 18px rgba(22,39,75,0.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rc-body:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(22,39,75,0.09);
}
.rc-icon{
  flex:none;
  width:38px; height:38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.rc-item:nth-child(5n+1) .rc-icon{ background:#E9EDF5; color:var(--navy, #16274B); }
.rc-item:nth-child(5n+2) .rc-icon{ background:#FDEEE8; color:var(--coral, #E85D3D); }
.rc-item:nth-child(5n+3) .rc-icon{ background:#E7F3EE; color:var(--forest, #1F6F54); }
.rc-item:nth-child(5n+4) .rc-icon{ background:#FBF1DE; color:var(--marigold-dk, #B9780C); }
.rc-item:nth-child(5n+5) .rc-icon{ background:#FDEEE8; color:var(--coral, #E85D3D); }
.rc-icon svg{ width:18px; height:18px; }
.rc-body h3{
  font-family:var(--font-display, 'Fraunces', serif);
  font-weight:600;
  font-size:16.5px;
  color:var(--navy, #16274B);
  margin:0 0 4px;
}
.rc-body p{
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft, #5B6373);
  margin:0;
}

/* ---------- Bottom notice ---------- */
.rc-notice{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:760px;
  margin:36px auto 0;
  background:#FBF1DE;
  border:1px solid rgba(185,120,12,0.28);
  border-radius:14px;
  padding:18px 24px;
}
.rc-notice-icon{
  flex:none;
  width:32px; height:32px;
  color:var(--marigold-dk, #B9780C);
}
.rc-notice-icon svg{ width:100%; height:100%; }
.rc-notice p{
  font-family:var(--font-body, 'Manrope', sans-serif);
  font-weight:600;
  font-size:14.5px;
  color:var(--marigold-dk, #B9780C);
  margin:0;
}

@media (max-width:620px){
  .rc-timeline::before{ left:23px; }
  .rc-item{ padding-left:64px; }
  .rc-num{ width:48px; height:48px; font-size:14px; }
  .rc-body{ flex-direction:column; gap:10px; }
  .rc-notice{ flex-direction:column; text-align:center; }
}

/* =========================================================
   SECTION 6 — Exam Syllabus & Format (home page preview)
   Concept: each class group is an "admit card" ticket stub —
   the same visual language as an exam admit card. Section
   background is a faint ruled answer-sheet: a red margin
   line + light blue horizontal ruling.

   Optional: this pairs well with a serif display face for
   the heading (Fraunces is used below with safe fallbacks).
   If your header.php doesn't load it yet, add:
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&display=swap" rel="stylesheet">
   ========================================================= */

.es-section{
  --es-navy:   var(--navy, #101b42);
  --es-paper:  #fffdf6;
  --es-red:    #d64545;
  --es-blue:   #3f6fd1;
  --es-gold:   #e8a916;
  --es-coral:  #e0563f;
  --es-ink-soft: #5c6072;

  position: relative;
  padding: 88px 0;
  background-color: var(--es-paper);
  background-image:
    linear-gradient(to right, transparent 0 46px, rgba(214,69,69,.32) 46px 48px, transparent 48px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(63,111,209,.14) 31px 32px);
}

/* ---------- header ---------- */
.es-head{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 640px;
  margin: 0 0 48px;
}

.es-head-icon{
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--es-navy);
  background: #fff;
  border: 1.5px solid rgba(16,27,66,.14);
  border-radius: 10px;
}
.es-head-icon svg{ width: 24px; height: 24px; }

.es-heading{
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--es-navy);
  margin: 4px 0 8px;
}

.es-sub{
  color: var(--es-ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- ticket row ---------- */
.es-tickets{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.es-ticket{
  --accent: var(--es-navy);
  display: flex;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(16,27,66,.05), 0 14px 30px -18px rgba(16,27,66,.35);
  border: 1.5px solid color-mix(in srgb, var(--accent) 38%, #fff);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.es-ticket:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(16,27,66,.05), 0 22px 36px -18px rgba(16,27,66,.4);
}

.es-ticket-a{ --accent: var(--es-blue); }
.es-ticket-b{ --accent: var(--es-gold); }
.es-ticket-c{ --accent: var(--es-coral); }

.es-ticket-main{
  flex: 1;
  min-width: 0;
  padding: 22px 20px;
}

.es-ticket-label{
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--es-navy);
  padding-left: 14px;
  position: relative;
}
.es-ticket-label::before{
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.es-ticket-meta{
  font-size: 12.5px;
  color: var(--es-ink-soft);
  margin: 3px 0 18px;
}

/* subject weight bars */
.es-bars{
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.es-bar-row{
  display: grid;
  grid-template-columns: 76px 1fr 20px;
  align-items: center;
  gap: 8px;
}

.es-bar-name{
  font-size: 11.5px;
  color: var(--es-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-bar-track{
  height: 6px;
  border-radius: 4px;
  background: rgba(16,27,66,.07);
  overflow: hidden;
}

.es-bar-fill{
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 4px;
  background: var(--accent);
}

.es-bar-count{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--es-navy);
  text-align: right;
}

/* perforation divider between ticket + stub */
.es-ticket-perf{
  position: relative;
  flex: none;
  width: 0;
  border-left: 2px dashed rgba(16,27,66,.18);
  margin: 14px 0;
}
.es-ticket-perf::before,
.es-ticket-perf::after{
  content: "";
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--es-paper);
  border-radius: 50%;
  transform: translateX(-50%);
}
.es-ticket-perf::before{ top: -21px; }
.es-ticket-perf::after{ bottom: -21px; }

/* stub — the "tear-off" corner with the headline numbers */
.es-ticket-stub{
  flex: none;
  width: 118px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}

.es-stub-num{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--es-navy);
  line-height: 1;
}

.es-stub-label{
  font-size: 11px;
  color: var(--es-ink-soft);
  margin-top: 2px;
}

.es-stub-sub{
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 10px;
}

.es-stub-ticks{
  display: block;
  width: 100%;
  height: 16px;
  margin-top: 16px;
  background-image: repeating-linear-gradient(
    to right,
    var(--accent) 0 2px,
    transparent 2px 5px,
    var(--accent) 5px 6px,
    transparent 6px 10px
  );
  opacity: .35;
}

/* ---------- CTA ---------- */
.es-cta{
  margin-top: 40px;
}

.es-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--es-navy);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.es-btn:hover{
  background: #1a2a63;
  transform: translateY(-1px);
}
.es-btn svg{ width: 17px; height: 17px; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .es-tickets{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .es-section{
    padding: 60px 0;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(63,111,209,.14) 31px 32px);
  }
  .es-heading{ font-size: 26px; }
  .es-ticket{ flex-direction: column; }
  .es-ticket-perf{
    width: auto;
    height: 0;
    border-left: none;
    border-top: 2px dashed rgba(16,27,66,.18);
    margin: 0 18px;
  }
  .es-ticket-perf::before,
  .es-ticket-perf::after{ top: 50%; transform: translateY(-50%); }
  .es-ticket-perf::before{ left: -21px; }
  .es-ticket-perf::after{ left: auto; right: -21px; }
  .es-ticket-stub{
    width: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 20px;
  }
  .es-stub-ticks{ display: none; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .es-ticket{ transition: none; }
}

/* =========================================================
   SECTION 7 — How to Apply
   ========================================================= */
.hta-section {
  padding: 70px 0;
  background: #f8f9fb;
}

.hta-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 45px;
}

.hta-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d6001c; /* swap to your brand accent */
  margin-bottom: 10px;
}

.hta-heading {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #1a1a2e;
}

.hta-sub {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
}

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

.hta-card {
  position: relative;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 16px;
  padding: 34px 26px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.hta-card-featured {
  border-color: #d6001c;
  box-shadow: 0 10px 26px rgba(214,0,28,0.12);
}

.hta-ribbon {
  position: absolute;
  top: 18px;
  right: -6px;
  background: #d6001c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 4px 0 0 4px;
}

.hta-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(214,0,28,0.08);
  color: #d6001c;
  margin-bottom: 18px;
}

.hta-icon svg {
  width: 26px;
  height: 26px;
}

.hta-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1a1a2e;
}

.hta-card > p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 14px;
}

.hta-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: #d6001c;
  background: rgba(214,0,28,0.07);
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 22px;
}

.hta-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: #d6001c;
  padding: 11px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.hta-btn svg {
  width: 16px;
  height: 16px;
}

.hta-btn:hover {
  opacity: 0.88;
}

.hta-btn-outline {
  background: #fff;
  color: #d6001c;
  border: 1.5px solid #d6001c;
}

/* Responsive */
@media (max-width: 900px) {
  .hta-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PRIZES & BENEFITS — HOME PAGE PREVIEW SECTION (v2)
   ========================================================= */

.hpz-section{
  --hpz-ink:      #2b1900;
  --hpz-ink-soft: #6b4e1e;
  position: relative;
  background: linear-gradient(120deg, #8a5700 0%, #d4900f 55%, #f2b705 100%);
  padding: 64px 0;
  overflow: hidden;
}

/* faint trophy watermark — decorative only, never overlaps content */
.hpz-section::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}

.hpz-section .container{ position: relative; z-index: 1; }

.hpz-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
}

.hpz-top-text{ max-width: 620px; }

.hpz-eyebrow{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hpz-ink);
  background: rgba(255,255,255,.6);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.hpz-heading{
  font-size: 30px;
  font-weight: 800;
  color: var(--hpz-ink);
  margin: 0 0 10px;
}

.hpz-sub{
  font-size: 15px;
  color: #000000;
  margin: 0;
  line-height: 1.55;
}

.hpz-btn{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--hpz-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.hpz-btn:hover{ background: #1c1000; transform: translateY(-1px); }
.hpz-btn svg{ width: 18px; height: 18px; flex: none; transition: transform .15s ease; }
.hpz-btn:hover svg{ transform: translateX(3px); }

.hpz-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hpz-card{
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 14px 30px -18px rgba(43,25,0,.45);
}

.hpz-card-icon{
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.hpz-card-icon svg{ width: 22px; height: 22px; }

.hpz-card[data-kind="cash"] .hpz-card-icon{ color: #16a34a; background: rgba(22,163,74,.12); }
.hpz-card[data-kind="trophy"] .hpz-card-icon{ color: #b8860b; background: rgba(184,134,11,.14); }
.hpz-card[data-kind="tour"] .hpz-card-icon{ color: #7c3aed; background: rgba(124,58,237,.12); }

.hpz-card h3{ font-size: 15.5px; font-weight: 800; color: var(--hpz-ink); margin: 0 0 6px; }
.hpz-card p{ font-size: 13px; color: var(--hpz-ink-soft); margin: 0; line-height: 1.5; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hpz-top{ flex-direction: column; align-items: flex-start; }
  .hpz-cards{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .hpz-heading{ font-size: 24px; }
  .hpz-section{ padding: 46px 0; }
  .hpz-btn{ width: 100%; justify-content: center; }
}

/* =========================================================
   FOUNDER & PRESIDENT — HOME PAGE PREVIEW SECTION
   ========================================================= */

.fp-section{
  --fp-ink:      #0b2b2a;
  --fp-ink-soft: #4a6b69;
  background: linear-gradient(135deg, #0f3d3a 0%, #14524d 55%, #1c6b63 100%);
  padding: 70px 0;
}

.fp-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 46px;
  align-items: center;
}

/* ---------- photo side ---------- */

.fp-media{
  position: relative;
  max-width: 350px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.45);
}
.fp-media img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.fp-media-badge{
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(255,255,255,.95);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp-media-badge-line1{ font-size: 12.5px; font-weight: 800; color: var(--fp-ink); }
.fp-media-badge-line2{ font-size: 11px; font-weight: 600; color: var(--fp-ink-soft); }

/* ---------- content side ---------- */
.fp-eyebrow{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #d7fff4;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.fp-heading{
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}

.fp-role{
  font-size: 14.5px;
  font-weight: 600;
  color: #9fe8d9;
  margin: 0 0 18px;
}

.fp-blurb{
  font-size: 14.5px;
  color: rgba(255,255,255,.82);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 560px;
}

.fp-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.fp-badge{
  font-size: 12px;
  font-weight: 600;
  color: #eafff9;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 12px;
  border-radius: 999px;
}

.fp-stats{
  display: flex;
  gap: 34px;
  margin-bottom: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.fp-stat{ display: flex; flex-direction: column; }
.fp-stat-num{ font-size: 24px; font-weight: 800; color: #fff; line-height: 1; }
.fp-stat-label{ font-size: 12px; color: rgba(255,255,255,.7); margin-top: 4px; }

.fp-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: #fff;
  color: var(--fp-ink);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.fp-btn:hover{ background: #eafff9; transform: translateY(-1px); }
.fp-btn svg{ width: 18px; height: 18px; transition: transform .15s ease; }
.fp-btn:hover svg{ transform: translateX(3px); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .fp-grid{ grid-template-columns: 1fr; }
  .fp-media{ max-width: 340px; margin: 0 auto; }
  .fp-content{ text-align: center; }
  .fp-blurb{ margin-left: auto; margin-right: auto; }
  .fp-badges{ justify-content: center; }
  .fp-stats{ justify-content: center; }
  .fp-stat{ align-items: center; }
}

@media (max-width: 560px){
  .fp-section{ padding: 44px 0; }
  .fp-heading{ font-size: 22px; }

  /* photo: shorter aspect ratio + smaller so it doesn't dominate the screen */
  .fp-media{ max-width: 240px; }
  .fp-media img{ aspect-ratio: 1 / 1; }
  .fp-media-badge{
    left: 10px; bottom: 10px;
    padding: 8px 12px;
  }
  .fp-media-badge-line1{ font-size: 11.5px; }
  .fp-media-badge-line2{ font-size: 10px; }

  .fp-role{ font-size: 13.5px; }
  .fp-blurb{ font-size: 14px; }

  /* badges: smaller pills, tighter gap */
  .fp-badges{ gap: 6px; }
  .fp-badge{ font-size: 11px; padding: 5px 10px; }

  /* stats: keep 3 across but shrink so nothing overflows */
  .fp-stats{
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .fp-stat-num{ font-size: 19px; }
  .fp-stat-label{ font-size: 10.5px; }

  /* button: full width, text wraps cleanly instead of overflowing */
  .fp-btn{
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    padding: 13px 18px;
    font-size: 13.5px;
  }
}
/* ===== Vice Principal & HOD Mathematics section (dark, matches Founder style) ===== */
.pd-section {
  background: #973535;
  padding: 40px 0;  
  margin-top: 40px;
}
.pd-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.pd-media {
  position: relative;
  max-width: 350px;
  margin: 0 auto;              
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.45);
}

.pd-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;         
  object-fit: cover;
  object-position: top center;
}

.pd-media-badge {
  position: absolute;
  bottom: -18px;
  left: 20px;
  background: #fff;
  color: #4a1f24;
  padding: 12px 18px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.pd-media-badge-line1 {
  font-weight: 700;
  font-size: 0.9rem;
}

.pd-media-badge-line2 {
  font-size: 0.78rem;
  color: #7a4a3a;
}

.pd-eyebrow {
  display: inline-block;
  color: #f3d9cf;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  border: 1px solid rgba(243, 217, 207, 0.4);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 18px;
}

.pd-heading {
  margin: 0 0 6px;
  font-size: 2.1rem;
  color: #ffffff;
  font-weight: 800;
}

.pd-role {
  color: #f0b6a4;
  font-weight: 600;
  margin-bottom: 20px;
}

.pd-blurb {
  color: #e8d3cd;
  line-height: 1.75;
  margin-bottom: 16px;
  max-width: 60ch;
}

.pd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.pd-badge {
  background: transparent;
  color: #f3e3dd;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.pd-stats {
  display: flex;
  gap: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 18px;
}

.pd-stat {
  display: flex;
  flex-direction: column;
}

.pd-stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
}

.pd-stat-label {
  font-size: 0.85rem;
  color: #e0bcb2;
}

.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #4a1f24;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
}

.pd-btn svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 860px) {
  .pd-grid {
    grid-template-columns: 1fr;
  }
  .pd-media-badge {
    left: 12px;
  }
}
.hero-form-alert {
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.hero-form-alert--ok  { color: #15803d; background: #dcfce7; }
.hero-form-alert--err { color: #b91c1c; background: #fee2e2; }