*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --s0: #F0F8FF;
      --s1: #D6EEFF;
      --s2: #A8D8F0;
      --s3: #5BA4CF;
      --s4: #1A6FA8;
      --s5: #0D4A73;
      --s6: #062033;
      --acc: #0090D9;
      --ink: #0A1929;
    }
    html { scroll-behavior: smooth; }
    body { font-family: "Inter", sans-serif; background: #fff; color: var(--ink); overflow-x: hidden; }

    /* ─── NAV ─── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 300;
      height: 66px; display: flex; align-items: center;
      justify-content: space-between; padding: 0 3.5rem;
      background: rgba(6,32,51,0.65); backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .nav-brand { display: flex; flex-direction: column; gap: 2px; }
    .nav-logo { font-family:"Cormorant Garamond",serif; font-size:1.45rem; font-weight:600; color:#fff; letter-spacing:0.1em; line-height:1; }
    .nav-logo span { color: var(--s2); }
    .nav-sub { font-size:0.52rem; letter-spacing:0.28em; text-transform:uppercase; color:rgba(255,255,255,0.38); }
    nav ul { list-style:none; display:flex; gap:2.2rem; align-items:center; }
    nav ul a { text-decoration:none; font-size:0.80rem; font-weight:500; color:rgba(255,255,255,0.6); letter-spacing:0.07em; text-transform:uppercase; transition:color 0.2s; }
    nav ul a:hover { color:#fff; }
    .nav-cta { background:var(--acc)!important; color:#fff!important; padding:0.5rem 1.4rem; border-radius:5px; font-weight:700!important; }
    .nav-cta:hover { background:var(--s5)!important; }
    .nav-hotline { font-size:0.7rem; color:var(--s2); font-weight:600; }

    
    /* ═══════════════════════════════════════════════
       HERO — Exact cover-page design replication
    ═══════════════════════════════════════════════ */
    .hero {
      position: relative;
      height: 100vh; min-height: 590px;
      display: flex; flex-direction: column;
      overflow: hidden;
      background: #e8e8e8; /* fallback / hatched bg colour */
    }

    /* Crosshatch pattern — exactly like the cover's grey diamond grid */
    .hero-hatch {
      position: absolute; inset: 0; z-index: 0;
      background-color: #d8d8d8;
      background-image:
        repeating-linear-gradient(
          45deg,
          rgba(255,255,255,0.55) 0px, rgba(255,255,255,0.55) 1px,
          transparent 1px, transparent 8px
        ),
        repeating-linear-gradient(
          -45deg,
          rgba(255,255,255,0.55) 0px, rgba(255,255,255,0.55) 1px,
          transparent 1px, transparent 8px
        );
    }

    /* Aerial campus photo — right ~62% of the frame, full height */
    .hero-photo {
      position: absolute;
      top: 0; right: 0;
      width: 68%;
      height: 100%;
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
      z-index: 1;
    }
    /* Soft left-edge fade so photo blends into the hatch background */
    .hero-photo::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(
        to right,
        #d8d8d8 0%,
        rgba(216,216,216,0.6) 12%,
        transparent 30%
      );
    }
    /* Bottom fade for caption readability */
    .hero-photo::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0,0,0,0.45) 100%
      );
    }

    /* ADMISSION OPEN — vertical ribbon, top-right, sky blue */
    .admission-ribbon {
      position: absolute; top: 0; right: 0; z-index: 20;
      background: var(--acc);
      color: white;
      font-size: 0.58rem; font-weight: 800;
      letter-spacing: 0.22em; text-transform: uppercase;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      padding: 1rem 0.48rem;
    }

    /* ── GIANT STACKED LETTERS column — left side ── */
    /* Exact cover: each syllable of "മിടുമിടുക്കരാകാൻ" stacked top-to-bottom
       Letters: മി / ടു / മി / ടു / ക്ക / രാ / കാ / ൻ              */
 .cover-stack {
  position: absolute;
  top: 0;
  left:40px;
  top:45%;
  transform:translateY(-50%);      /* control horizontal position */
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 7.5rem;
  pointer-events: none; /* prevents blocking other elements */
}


@media (max-width:768px){

  .cover-stack{
    left: 25%;
  
      top:20%;
  }

  .cs{
    font-size: 1.2rem;
  }
   .hero-caption{
    top: 45%;        /* adjust for smaller screen */
    left: 80px;
    right: 15px;
  }

 
}

.hero-section{
  position: relative;
}
    .cs {
      display: block;
      font-family: 'Noto Sans Malayalam', 'Manjari', sans-serif;
      font-weight: 900;
      /* Cover uses very large, slightly rounded bold glyphs */
      font-size: clamp(5rem, 11.5vw, 11.5rem);
      line-height: 0.88;
      letter-spacing: -0.03em;
      /* Sky blue — same vibrant hue as cover */
      color: #1A9DE8;
      /* 3D rounded shadow effect matching the cover */
      text-shadow:
        3px 3px 0px rgba(0,80,160,0.25),
        0 4px 16px rgba(0,100,200,0.2);
      /* Each letter slightly overlaps the next */
      margin-bottom: -0.04em;
      /* padding-top: 150px; */
        padding-left: 19px; 
    }

    /* The cover's letters vary slightly in size row by row */
    .cs-1  { font-size: clamp(5.5rem, 7.5vw, 12.5rem); }
    .cs-2  { font-size: clamp(5rem,   11.5vw, 11.5rem); margin-top: -0.05em; }
    .cs-3  { font-size: clamp(5.5rem, 12vw,   12rem);   margin-top: -0.06em; }
    .cs-4  { font-size: clamp(5rem,   11.5vw, 11.5rem); margin-top: -0.05em; }
    .cs-5  { font-size: clamp(6rem,   13vw,   13rem);   margin-top: -0.04em; }
    .cs-6  { font-size: clamp(5.5rem, 12.5vw, 12.5rem); margin-top: -0.06em; }
    .cs-7  { font-size: clamp(6rem,   13vw,   13rem);   margin-top: -0.05em; }
    .cs-8  { font-size: clamp(5rem,   11vw,   11rem);   margin-top: -0.04em; }

    /* Caption — bottom left, over the photo, exactly like the cover */
    .hero-caption {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 15;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 2rem 2.5rem 2rem 2rem;
      background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
    }
    .hero-caption-left {
       /* max-width: 340px; */
         margin-left: auto;
    text-align: right;
       }
  .caption-ml {
  font-family: 'Noto Sans Malayalam', sans-serif;
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  padding: 15px 20px;
  background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 100%);
  border-radius: 6px;
  max-width: 420px;
}

/* Mobile */
@media (max-width:768px){

  .hero-caption-right{
    padding: 0 15px;
   top: 73% !important;
        text-align: left !important;
  }

  .caption-ml{
    display: none;
    font-size: 1rem;
    line-height: 1.5;
    /* margin-bottom: 15rem; */
    padding: 0px 15px;
    max-width: 100%;
  }
  .stat-lab{
    font-size: 0.50rem !important;
  }

}
    .caption-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
    .hero-caption-right {
      display: flex; flex-direction: column;
      align-items: flex-end; gap: 0.6rem;
       
  
    text-align: right;
    position: relative;
    right: 5%;
    top: 40%;
    /* transform: translateY(-50%); */
    }
    .statsbar {
      display: flex;
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px; overflow: hidden;
    }
    .stat-cell { padding: 0.7rem 1.3rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.07); }
    .stat-cell:last-child { border-right: none; }
    .stat-num { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:300; color:#fff; line-height:1; }
    .stat-lab { font-size:0.80rem; letter-spacing:0.13em; text-transform:uppercase; color:#ffffff; margin-top:0.15rem; }

    /* Bottom logo bar — exactly like cover */
    .hero-logo-bar {
      background: white;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.8rem 2.5rem;
      position: relative; z-index: 20;
      flex-shrink: 0;
    }
    .hb-gurukulam { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:600; color:#0a1929; letter-spacing:0.08em; }
    .hb-gurukulam span { color: var(--acc); }
    .hb-tag { font-size:0.5rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(10,25,41,0.4); margin-top:2px; }
    .hb-labour { text-align:right; }
    .hb-labour-name { font-size:1rem; font-weight:900; color:#1A6FA8; letter-spacing:0.04em; line-height:1; }
    .hb-labour-sub { font-size:0.5rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(10,25,41,0.45); }

    /* scroll cue */
    .scroll-cue { position:absolute; right:2.5rem; bottom:5rem; z-index:25; display:flex; flex-direction:column; align-items:center; gap:0.35rem; opacity:0.4; }
    .scroll-cue span { font-size:0.56rem; letter-spacing:0.2em; text-transform:uppercase; color:#fff; }
    .scroll-line { width:1px; height:36px; background:linear-gradient(to bottom,#fff,transparent); animation:sline 2s ease-in-out infinite; }
    @keyframes sline { 0%,100%{opacity:0.4} 50%{opacity:1} }

    /* @media(max-width:768px){
      .cover-stack { width: 55%; }
      .cs { font-size: clamp(2rem, 7vw, 8rem);      
        padding-top: 523px;
        padding-left: 19px; 
    }
      .hero-photo { width: 80%; }
      .hero-caption { flex-direction: column; gap: 1rem; align-items: flex-start; }
      .hero-caption-right { align-items: flex-start; }
    } */

    /* ─── VIDEOS ─── */
    .videos { background: var(--s6); padding: 5rem 2rem; }
    .videos .sec-label { color: var(--s2); }
    .videos .sec-title { color: #fff; }
    .videos .sec-body { color: rgba(255,255,255,0.45); }
    .videos-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem;
      max-width: 1200px;
      margin: 3rem auto 0;
    }
   .video-wrap{
position:relative;
width:100%;
padding-bottom:56.25%;
border-radius:10px;
overflow:hidden;
background:#000;
}

.video-thumb{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
z-index:5;
}
    .video-wrap:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,144,217,0.35); border-color: rgba(168,216,240,0.3); }
  
    .video-wrap:hover .video-thumb { transform: scale(1.04); }
    /* Dark scrim over thumbnail */
    .video-wrap::before {
      content: '';
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 100%);
      transition: background 0.3s;
        pointer-events: none;
    }
    .video-wrap:hover::before { background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,144,217,0.35) 100%); }
    /* Play button */
   .play-btn{
position:absolute;
inset:0;
z-index:3;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}
    .play-icon {
      width: 56px; height: 56px;
      background: rgba(255,255,255,0.92);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: #cc0000;
      padding-left: 4px; /* optical centre for triangle */
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
      transition: transform 0.2s, background 0.2s;
    }
    .video-wrap:hover .play-icon { transform: scale(1.15); background: #fff; }
    @media(max-width:900px){ .videos-grid { grid-template-columns: repeat(2,1fr); } }
    @media(max-width:540px){ .videos-grid { grid-template-columns: 1fr; } }


    .about { background: #fff; }

    /* Founder timeline cards */
    .about-founders {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem; max-width: 1100px; margin: 3.5rem auto 0;
    }
    .founder-card {
      background: var(--s0); border-radius: 14px; padding: 2rem 1.8rem;
      border: 1px solid rgba(91,164,207,0.15);
      border-top: 4px solid var(--s3);
      display: flex; flex-direction: column; gap: 0.4rem;
      transition: all 0.3s;
    }
    .founder-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(26,111,168,0.1); border-top-color: var(--acc); }
    .founder-card-accent { border-top-color: var(--acc); background: linear-gradient(160deg, #EBF5FF, #D6EEFF); }
    .founder-year { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 300; color: var(--s3); line-height: 1; margin-bottom: 0.3rem; }
    .founder-icon { font-size: 1.8rem; margin-bottom: 0.2rem; }
    .founder-name { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
    .founder-role { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.5rem; }
    .founder-desc { font-size: 0.86rem; line-height: 1.75; color: var(--ink); opacity: 0.65; flex: 1; }
    .founder-link { font-size: 0.75rem; font-weight: 600; color: var(--acc); text-decoration: none; margin-top: 0.8rem; letter-spacing: 0.03em; }
    .founder-link:hover { text-decoration: underline; }

    /* Ecosystem grid */
    .about-eco-title {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.28em;
      text-transform: uppercase; color: var(--acc);
      text-align: center; margin: 4rem auto 1.5rem;
    }
    .about-eco {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.2rem; max-width: 1100px; margin: 0 auto;
    }
    .eco-card {
      background: #fff; border-radius: 12px; padding: 1.8rem 1.6rem;
      border: 1px solid rgba(91,164,207,0.15); border-left: 4px solid var(--s3);
      display: flex; flex-direction: column; gap: 0.35rem;
      text-decoration: none; transition: all 0.3s;
      box-shadow: 0 2px 10px rgba(26,111,168,0.04);
    }
    .eco-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26,111,168,0.11); border-left-color: var(--acc); }
    .eco-card-highlight { border-left-color: var(--acc); background: linear-gradient(160deg, #f5fbff, #eaf5ff); }
    .eco-icon { font-size: 1.6rem; margin-bottom: 0.2rem; }
    .eco-name { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
    .eco-desc { font-size: 0.82rem; line-height: 1.75; color: var(--ink); opacity: 0.62; flex: 1; margin-top: 0.2rem; }
    .eco-url { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--acc); margin-top: 0.6rem; }

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


    .apply-strip {
      background: linear-gradient(135deg, var(--s5) 0%, var(--s6) 100%);
      padding: 3.5rem 2rem;
      display: flex; align-items: center; justify-content: center;
      gap: 3rem; flex-wrap: wrap;
      position: relative; overflow: hidden;
    }
    .apply-strip::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 52px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 52px);
      pointer-events: none;
    }
    .apply-strip-text { position: relative; z-index: 1; }
    .apply-strip-text h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 300; color: #fff; line-height: 1.2;
    }
    .apply-strip-text h3 em { font-style: italic; color: var(--s2); }
    .apply-strip-text p {
      font-size: 0.82rem; color: rgba(255,255,255,0.5);
      margin-top: 0.35rem; letter-spacing: 0.02em;
    }
    .btn-apply {
      position: relative; z-index: 1;
      display: inline-flex; align-items: center; gap: 0.6rem;
      background: var(--acc); color: white; border: none;
      padding: 1rem 2.6rem; border-radius: 6px;
      font-size: 0.92rem; font-weight: 700; cursor: pointer;
      letter-spacing: 0.05em; text-decoration: none;
      transition: all 0.25s; white-space: nowrap;
      box-shadow: 0 4px 20px rgba(0,144,217,0.4);
    }
    .btn-apply:hover {
      background: #fff; color: var(--s5);
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(0,144,217,0.35);
    }
    .btn-apply .arrow {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.2); border-radius: 50%;
      font-size: 0.9rem; transition: background 0.2s;
    }
    .btn-apply:hover .arrow { background: rgba(26,111,168,0.15); }


    .ticker { background:var(--s6); overflow:hidden; padding:1.4rem 0; border-top:1px solid rgba(168,216,240,0.1); }
    .ticker-inner { display:flex; gap:3.5rem; white-space:nowrap; animation:tick 28s linear infinite; }
    @keyframes tick { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    .tick-item { font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(168,216,240,0.45); display:flex; align-items:center; gap:2rem; }
    .tick-item::after { content:"✦"; color:var(--s3); font-size:0.45rem; }

    /* ─── SECTIONS ─── */
    section { padding: 6rem 2rem; }
    .sec-label { font-size:1.65rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:var(--acc); margin-bottom:1rem; text-align:center; }
    .sec-title { font-family:"Cormorant Garamond",serif; font-size:clamp(1.9rem,4vw,3rem); font-weight:300; text-align:center; color:var(--ink); line-height:1.2; max-width:700px; margin:0 auto 1.2rem; }
    .sec-title em { font-style:italic; color:var(--s4); }
    .sec-body { font-size:1rem; line-height:1.85; color:var(--ink); opacity:0.6; max-width:620px; margin:0 auto; text-align:center; }

    /* ─── PROBLEM ─── */
    .problem { background:var(--s6); color:#fff; position:relative; overflow:hidden; }
    .problem::before {
      content:''; position:absolute; inset:0;
      background: radial-gradient(ellipse 70% 90% at 0% 50%, rgba(0,144,217,0.15) 0%, transparent 65%),
                  radial-gradient(ellipse 50% 70% at 100% 50%, rgba(26,111,168,0.1) 0%, transparent 65%);
      pointer-events:none;
    }
    .problem-inner { max-width:960px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; position:relative; }
    .big-q { font-family:"Cormorant Garamond",serif; font-size:clamp(2rem,4vw,3.2rem); font-weight:300; font-style:italic; color:#fff; line-height:1.25; margin-bottom:1.5rem; }
    .big-q em { font-style:normal; font-weight:600; color:var(--s2); }
    .problem-left p { font-size:0.94rem; line-height:1.85; color:rgba(255,255,255,0.5); }
    .problem-right { display:flex; flex-direction:column; gap:0.85rem; }
    .challenge-item {
      display:flex; align-items:flex-start; gap:0.9rem;
      background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
      border-left:3px solid var(--s3); border-radius:0 8px 8px 0;
      padding:0.9rem 1.1rem; transition:all 0.25s;
    }
    .challenge-item:hover { background:rgba(0,144,217,0.1); border-left-color:var(--acc); }
    .ci { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
    .challenge-item p { font-size:0.86rem; color:rgba(255,255,255,0.58); line-height:1.65; }

    /* ─── WHY ─── */
    .why { background:var(--s0); }
    .why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; max-width:1100px; margin:3.5rem auto 0; }
    .why-card {
      background:#fff; border-radius:10px; padding:2.1rem 1.7rem;
      border:1px solid rgba(91,164,207,0.15); border-top:3px solid var(--s3);
      transition:all 0.3s; box-shadow:0 2px 10px rgba(26,111,168,0.05);
    }
    .why-card:hover { transform:translateY(-6px); box-shadow:0 18px 36px rgba(26,111,168,0.12); border-top-color:var(--acc); }
    .why-icon { font-size:1.9rem; margin-bottom:0.9rem; }
    .why-card h3 { font-family:"Cormorant Garamond",serif; font-size:1.25rem; font-weight:600; color:var(--ink); margin-bottom:0.45rem; }
    .why-card p { font-size:0.86rem; line-height:1.75; color:var(--ink); opacity:0.6; }

    /* ─── PANCHA ─── */
    .pancha { background:#fff; position:relative; overflow:hidden; }
    .pancha::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 50% at 50% 100%, rgba(168,216,240,0.18) 0%, transparent 70%); pointer-events:none; }
    .pancha-grid { max-width:1150px; margin:3.5rem auto 0; display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; position:relative; z-index:1; }
    .bhuta { border-radius:12px; padding:1.8rem 1.2rem; text-align:center; transition:all 0.3s; position:relative; overflow:hidden; }
    .bhuta::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; }
    .bhuta:hover { transform:translateY(-7px); }
    .b1 { background:linear-gradient(160deg,#EBF5FF,#D6EEFF); border:1px solid #BDD8F0; }
    .b1::after { background:var(--s3); } .b1:hover { box-shadow:0 16px 32px rgba(91,164,207,0.18); }
    .b2 { background:linear-gradient(160deg,#E0F0FF,#C8E5FF); border:1px solid #A8D0F0; }
    .b2::after { background:var(--s4); } .b2:hover { box-shadow:0 16px 32px rgba(26,111,168,0.18); }
    .b3 { background:linear-gradient(160deg,#D5ECFF,#BBE0FF); border:1px solid #93CCEE; }
    .b3::after { background:var(--acc); } .b3:hover { box-shadow:0 16px 32px rgba(0,144,217,0.18); }
    .b4 { background:linear-gradient(160deg,#C9E7FF,#B0D9FF); border:1px solid #7DBDEC; }
    .b4::after { background:var(--s5); } .b4:hover { box-shadow:0 16px 32px rgba(13,74,115,0.16); }
    .b5 { background:linear-gradient(160deg,#BDE3FF,#A3D4FF); border:1px solid #68B0E8; }
    .b5::after { background:var(--s6); } .b5:hover { box-shadow:0 16px 32px rgba(6,32,51,0.14); }
    .bh-sym { font-size:2rem; margin-bottom:0.55rem; }
    .bh-ml { font-family:"Cormorant Garamond",serif; font-size:1.35rem; font-weight:600; color:var(--s5); margin-bottom:0.15rem; }
    .bh-name { font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--s4); opacity:0.6; margin-bottom:0.85rem; }
    .bh-dom { font-weight:700; font-size:0.74rem; color:var(--ink); margin-bottom:0.5rem; letter-spacing:0.02em; }
    .bh-items { font-size:0.74rem; line-height:1.75; color:var(--ink); opacity:0.58; }

    /* ─── CHARACTER ─── */
    .character { background:linear-gradient(155deg, var(--s5) 0%, var(--s6) 100%); position:relative; overflow:hidden; }
    .character::before {
      content:''; position:absolute; inset:0;
      background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(0,144,217,0.18) 0%, transparent 60%),
                  radial-gradient(ellipse 50% 60% at 80% 30%, rgba(91,164,207,0.1) 0%, transparent 60%);
      pointer-events:none;
    }
    .char-q-wrap { max-width:800px; margin:0 auto 3rem; text-align:center; position:relative; }
    .char-qmark { font-family:"Cormorant Garamond",serif; font-size:7rem; color:var(--s3); opacity:0.25; line-height:0.6; display:block; margin-bottom:0.5rem; }
    .char-q { font-family:"Cormorant Garamond",serif; font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:300; font-style:italic; color:#fff; line-height:1.4; position:relative; }
    .char-q em { font-style:normal; font-weight:600; color:var(--s2); }
    .char-traits { display:flex; flex-wrap:wrap; gap:0.65rem; justify-content:center; max-width:860px; margin:0 auto; position:relative; }
    .trait {
      background:rgba(255,255,255,0.07); border:1px solid rgba(168,216,240,0.18);
      border-radius:3px; padding:0.42rem 1rem;
      font-size:0.78rem; color:rgba(255,255,255,0.72); letter-spacing:0.03em; transition:all 0.2s;
    }
    .trait:hover { background:rgba(0,144,217,0.22); border-color:var(--s2); color:#fff; }

    /* ─── CLUBS ─── */
    .clubs { background:var(--s0); }
    .clubs-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:1000px; margin:3.5rem auto 0; }
    .clubs-col h3 { font-family:"Cormorant Garamond",serif; font-size:1.45rem; font-weight:600; color:var(--ink); margin-bottom:1.1rem; padding-bottom:0.65rem; border-bottom:2px solid var(--s3); }
    .club-item { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 0; border-bottom:1px solid rgba(91,164,207,0.12); font-size:0.86rem; color:var(--ink); opacity:0.73; transition:opacity 0.2s; }
    .club-item:hover { opacity:1; }
    .club-item::before { content:"▸"; color:var(--acc); font-size:0.52rem; flex-shrink:0; }
    .club-item:last-child { border-bottom:none; }

    /* ─── ADMISSION ─── */
    .admission { background:#fff; }
    .adm-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; max-width:1060px; margin:3.5rem auto 0; align-items:start; }
    .adm-left h2 { font-family:"Cormorant Garamond",serif; font-size:2.1rem; font-weight:300; color:var(--ink); margin-bottom:1rem; line-height:1.3; }
    .adm-left h2 em { color:var(--s4); font-style:italic; }
    .adm-left p { font-size:0.9rem; line-height:1.85; color:var(--ink); opacity:0.58; margin-bottom:0.8rem; }
    .adm-contacts { display:flex; flex-direction:column; gap:0.75rem; margin-top:1.4rem; }
    .adm-ci { display:flex; gap:0.7rem; align-items:flex-start; font-size:0.84rem; color:var(--ink); }
    .adm-ci a { color:var(--acc); text-decoration:none; font-weight:600; }
    .adm-ci a:hover { text-decoration:underline; }
    .adm-ico { font-size:1rem; flex-shrink:0; margin-top:1px; }
    .adm-form { background:var(--s0); border-radius:14px; padding:2.5rem; border:1px solid rgba(91,164,207,0.18); box-shadow:0 4px 20px rgba(26,111,168,0.07); }
    .adm-form h3 { font-family:"Cormorant Garamond",serif; font-size:1.45rem; font-weight:600; color:var(--ink); margin-bottom:1.4rem; }
    .fg { margin-bottom:1rem; }
    .fg label { display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--s4); margin-bottom:0.3rem; }
    .fg input, .fg select {
      width:100%; padding:0.7rem 0.9rem;
      background:#fff; border:1.5px solid rgba(91,164,207,0.28);
      border-radius:7px; font-size:0.88rem; font-family:"Inter",sans-serif; color:var(--ink);
      transition:border-color 0.2s; outline:none;
    }
    .fg input:focus, .fg select:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(0,144,217,0.1); }
    .frow { display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; }
    .fsub {
      width:100%; padding:0.95rem; background:var(--acc); color:#fff; border:none;
      border-radius:7px; font-size:0.9rem; font-weight:700; cursor:pointer;
      letter-spacing:0.05em; transition:all 0.25s; margin-top:0.4rem;
    }
    .fsub:hover { background:var(--s5); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,144,217,0.3); }
    .fnote { font-size:0.68rem; text-align:center; color:var(--ink); opacity:0.35; margin-top:0.65rem; }

    /* ─── CTA ─── */
    .cta-section {
      position:relative; overflow:hidden; text-align:center; padding:7rem 2rem;
      background:linear-gradient(140deg, var(--s4) 0%, var(--s6) 100%);
    }
    .cta-section::before {
      content:''; position:absolute; inset:0;
      background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(0,144,217,0.35) 0%, transparent 60%);
      pointer-events:none;
    }
    .cta-grid {
      content:''; position:absolute; inset:0;
      background-image:
        repeating-linear-gradient(0deg,rgba(255,255,255,0.025) 0,rgba(255,255,255,0.025) 1px,transparent 1px,transparent 56px),
        repeating-linear-gradient(90deg,rgba(255,255,255,0.025) 0,rgba(255,255,255,0.025) 1px,transparent 1px,transparent 56px);
      pointer-events:none;
    }
    .cta-section h2 { font-family:"Cormorant Garamond",serif; font-size:clamp(2rem,5vw,3.8rem); font-weight:300; color:#fff; max-width:700px; margin:0 auto 1rem; line-height:1.15; position:relative; z-index:1; }
    .cta-section h2 em { font-style:italic; color:var(--s2); }
    .cta-section p { color:rgba(255,255,255,0.58); font-size:1rem; margin-bottom:2.2rem; position:relative; z-index:1; }
    .cta-hotline { font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:2rem; position:relative; z-index:1; }
    .btn-white { background:#fff; color:var(--s5); border:none; padding:1rem 3rem; border-radius:6px; font-size:0.9rem; font-weight:700; cursor:pointer; letter-spacing:0.04em; transition:all 0.25s; text-decoration:none; display:inline-block; position:relative; z-index:1; }
    .btn-white:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,0.22); }

    /* ─── FOOTER ─── */
    footer { background:var(--s6); color:#fff; padding:3rem 2rem; text-align:center; }
    .ft-logo { font-family:"Cormorant Garamond",serif; font-size:1.8rem; font-weight:300; }
    .ft-logo span { color:var(--s2); }
    .ft-tag { font-size:0.55rem; letter-spacing:0.28em; text-transform:uppercase; opacity:0.3; margin-top:0.3rem; }
    .ft-info { margin-top:1.4rem; font-size:0.75rem; opacity:0.32; line-height:2; }
    .ft-info a { color:var(--s2); text-decoration:none; }

    /* ─── RESPONSIVE ─── */
    @media(max-width:900px){
      nav { padding:0 1.5rem; } nav ul { display:none; }
      .hero-cover { padding:0 2rem 0; }
      .hero-left { padding-bottom:5rem; }
      .problem-inner,.clubs-grid,.adm-inner { grid-template-columns:1fr; gap:2.5rem; }
      .pancha-grid { grid-template-columns:repeat(2,1fr); }
      .frow { grid-template-columns:1fr; }
      .scroll-cue { right:1.5rem; }
    }
/* HERO BASE */

.hero{
position:relative;
width:100%;
overflow:hidden;
}

.hero-hatch{
display:flex;
flex-direction:column;
justify-content:space-between;
/* padding:40px; */
min-height:100vh;
}

/* Malayalam Title */


.cs{
font-size:90px;
font-weight:900;
color:#2196f3;
}

/* Caption layout */



/* Stats */

.statsbar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}

.stat-cell{
background:rgba(0,0,0,0.6);
color:#fff;
padding:15px;
text-align:center;
border-radius:6px;
}

/* Buttons */

.caption-actions{
margin-top:20px;
display:flex;
gap:10px;
}

.btn-p{
background:#1E3A8A;
color:white;
padding:12px 20px;
text-decoration:none;
border-radius:5px;
}

.btn-g{
background:#F59E0B;
color:white;
padding:12px 20px;
text-decoration:none;
border-radius:5px;
}

/* LOGO BAR */

.hero-logo-bar{
background:#fff;
display:flex;
justify-content:space-between;
padding:20px 40px;
align-items:center;
}

/* MOBILE FIX */

@media (max-width:768px){

.hero-hatch{
padding:20px;
min-height:auto;
}

/* Title smaller */

.cs{
font-size:53px;
text-align:center;
display:block;
}

/* Stack layout */

.hero-caption{

align-items:center;
text-align:center;
gap:25px;
}

/* Buttons full width */

.caption-actions{
flex-direction:column;
width:100%;
}

.btn-p,
.btn-g{
width:100%;
text-align:center;
}

/* Stats grid */

.statsbar{
grid-template-columns:repeat(3,1fr);
width:100%;
}

/* Logo bar stacked */

.hero-logo-bar{
flex-direction:column;
text-align:center;
gap:10px;
}

/* Hide scroll cue */

.scroll-cue{
display:none;
}

}




.gallery-section{
padding:80px 20px;
max-width:1200px;
margin:auto;
}

.gallery-header{
text-align:center;
margin-bottom:50px;
}

.gallery-header h2{
font-size:32px;
margin-bottom:10px;
}

.gallery-header p{
max-width:700px;
margin:auto;
/* color:#555; */
line-height:1.6;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.gallery-card{
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:0.3s;
}

.gallery-card:hover{
transform:translateY(-6px);
}

.gallery-card img{
width:100%;
height:200px;
object-fit:cover;
}

.gallery-card h3{
padding:15px;
font-size:18px;
}

.gallery-card p{
padding:0 15px 15px;
font-size:14px;
/* color:#666; */
}
.whatsapp-float{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

.whatsapp-float img{
    width: 60px;
    height: 60px;
}