:root {
      --maroon: #7a1f38;
      --maroon2: #9a2f4f;
      --gold: #c99a3e;
      --gold2: #dcb257;
      --navy: #17284a;
      --ink: #2b2429;
      --muted: #867b80;
      --cream: #fbf7f0;
      --line: #ece4d8;
      --white: #fff;
      --maxw: 1220px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.55
    }

    a {
      text-decoration: none;
      color: inherit
    }

    /* ---------- HEADER (transparent over hero) ---------- */
    header.hdr {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 60;
      transition: background .35s, box-shadow .35s, padding .35s
    }

    .hwrap {
      max-width: var(--maxw);
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 18px 30px;
      transition: padding .35s;
      position: relative
    }

    .logo img {
      height: 78px;
      width: auto;
      display: block;
      transition: height .35s, filter .35s;
      filter: brightness(0) invert(1)
    }

    nav.nav {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 2px
    }

    .item {
      position: relative
    }

    .item>a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 12px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .2px;
      white-space: nowrap;
      cursor: pointer;
      transition: color .3s;
      text-shadow: 0 1px 8px rgba(0, 0, 0, .35)
    }

    .item.has>a::after {
      content: "\25be";
      font-size: 10px;
      opacity: .85
    }

    .dropdown {
      position: absolute;
      top: calc(100% - 2px);
      left: 0;
      background: #fff;
      border-top: 3px solid var(--maroon);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
      border-radius: 6px;
      min-width: 210px;
      padding: 6px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: .16s
    }

    .item:hover .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
    }

    .dropdown a {
      display: block;
      padding: 9px 18px;
      font-size: 13px;
      color: #4a3f44;
      text-shadow: none
    }

    .dropdown a:hover {
      background: #faf3f4;
      color: var(--maroon)
    }

    .admis {
      margin-left: 10px;
      background: var(--gold);
      color: #2a1c00 !important;
      padding: 12px 24px;
      border-radius: 26px;
      font-weight: 800;
      font-size: 13.5px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
      transition: .2s
    }

    .admis:hover {
      background: var(--gold2)
    }

    .burger {
      display: none;
      margin-left: auto;
      background: none;
      border: none;
      font-size: 28px;
      color: #fff;
      cursor: pointer;
      line-height: 1
    }

    /* solid (scrolled) state */
    header.hdr.solid {
      background: #fff;
      box-shadow: 0 2px 16px rgba(0, 0, 0, .10)
    }

    header.hdr.solid .hwrap {
      padding: 8px 30px
    }

    header.hdr.solid .logo img {
      height: 78px;
      filter: none
    }

    header.hdr.solid .item>a {
      color: #3a2f34;
      text-shadow: none
    }

    header.hdr.solid .item>a:hover {
      color: var(--maroon)
    }

    header.hdr.solid .admis {
      background: var(--maroon);
      color: #fff !important
    }

    header.hdr.solid .burger {
      color: var(--maroon)
    }

    /* ---------- HERO (full screen) ---------- */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 600px;
      overflow: hidden;
      background: #2a0f18
    }

    .slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.3s ease
    }

    .slide.on {
      opacity: 1;
      animation: kb 9s ease forwards
    }

    @keyframes kb {
      from {
        transform: scale(1.12)
      }

      to {
        transform: scale(1)
      }
    }

    .scrim {
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(90deg, rgba(24, 8, 14, .7) 0%, rgba(24, 8, 14, .34) 40%, rgba(24, 8, 14, .05) 72%),
        linear-gradient(0deg, rgba(18, 6, 10, .66) 0%, rgba(18, 6, 10, 0) 42%),
        linear-gradient(180deg, rgba(18, 6, 10, .45) 0%, rgba(18, 6, 10, 0) 22%)
    }

    .hcap {
      position: absolute;
      z-index: 4;
      left: 0;
      bottom: 16%;
      max-width: 820px;
      padding: 0 6vw;
      color: #fff
    }

    .hcap .eb {
      display: inline-block;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #ffd98a;
      margin-bottom: 18px;
      opacity: 0
    }

    .hcap h1 {
      margin: 0 0 24px;
      font-size: clamp(34px, 5.6vw, 68px);
      line-height: 1.05;
      font-weight: 800;
      text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
      opacity: 0
    }

    .hcap .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--gold);
      color: #2a1c00;
      padding: 15px 32px;
      border-radius: 32px;
      font-weight: 800;
      font-size: 15px;
      box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
      opacity: 0
    }

    .hcap .cta:hover {
      background: var(--gold2)
    }

    .hcap.anim .eb {
      animation: rise .6s .05s ease forwards
    }

    .hcap.anim h1 {
      animation: rise .7s .16s ease forwards
    }

    .hcap.anim .cta {
      animation: rise .7s .32s ease forwards
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .harrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .14);
      border: 1px solid rgba(255, 255, 255, .5);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
      transition: .2s
    }

    .harrow:hover {
      background: var(--maroon);
      border-color: var(--maroon)
    }

    .harrow.l {
      left: 22px
    }

    .harrow.r {
      right: 22px
    }

    .dots {
      position: absolute;
      bottom: 30px;
      right: 6vw;
      z-index: 5;
      display: flex;
      gap: 10px
    }

    .dots i {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #fff;
      opacity: .5;
      cursor: pointer;
      transition: .25s
    }

    .dots i.on {
      opacity: 1;
      width: 30px;
      border-radius: 6px;
      background: var(--gold)
    }

    .scrolldown {
      position: absolute;
      bottom: 26px;
      left: 50%;
      z-index: 5;
      color: #fff;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      text-align: center;
      opacity: .85;
      animation: bob 1.8s infinite
    }

    .scrolldown .ch {
      display: block;
      font-size: 22px;
      margin-top: 2px
    }

    @keyframes bob {

      0%,
      100% {
        transform: translate(-50%, 0)
      }

      50% {
        transform: translate(-50%, 9px)
      }
    }

    .next {
      background: var(--cream);
      text-align: center;
      padding: 54px 28px;
      color: var(--muted);
      font-size: 14px
    }

    .next b {
      color: var(--maroon)
    }

    @media(max-width:980px) {
      nav.nav {
        margin-left: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 8px 0;
        box-shadow: 0 14px 26px rgba(0, 0, 0, .16);
        display: none
      }

      nav.nav.open {
        display: flex
      }

      .burger {
        display: block
      }

      .item>a {
        color: #3a2f34;
        text-shadow: none;
        width: 100%;
        padding: 13px 26px
      }

      .item.has>a::after {
        margin-left: auto
      }

      .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 6px 14px;
        display: none
      }

      .item.open-sub .dropdown {
        display: block
      }

      .admis {
        margin: 10px 26px
      }

      .hero {
        height: 88vh
      }
    }

    /* ===== sections ===== */
    .wrap2 {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 30px
    }

    .sec {
      padding: 70px 0
    }

    .sec.alt {
      background: var(--cream)
    }

    .stitle {
      text-align: center;
      margin: 0 auto 36px;
      max-width: 720px
    }

    .eb2 {
      display: inline-block;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--gold);
      background: rgba(201, 154, 62, .14);
      padding: 6px 14px;
      border-radius: 20px
    }

    .stitle h2 {
      margin: 12px 0 0;
      color: var(--maroon);
      font-size: 32px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase
    }

    .stitle .u {
      width: 66px;
      height: 4px;
      background: var(--gold);
      border-radius: 3px;
      margin: 14px auto 0
    }

    .stitle p {
      color: var(--muted);
      font-size: 15px;
      margin: 12px 0 0
    }

    .shadow {
      box-shadow: 0 12px 34px rgba(70, 20, 40, .12)
    }

    .btnm {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--maroon);
      color: #fff;
      font-weight: 700;
      font-size: 13.5px;
      padding: 11px 22px;
      border-radius: 26px;
      cursor: pointer;
      transition: .2s
    }

    .btnm:hover {
      background: var(--maroon2)
    }

    .btng {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--maroon);
      border: 2px solid var(--maroon);
      font-weight: 700;
      font-size: 13.5px;
      padding: 10px 20px;
      border-radius: 26px;
      cursor: pointer;
      transition: .2s
    }

    .btng:hover {
      background: var(--maroon);
      color: #fff
    }

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

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

    /* ticker */
    .ticker {
      background: var(--maroon);
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      padding: 11px 0
    }

    .tk {
      display: inline-block;
      padding-left: 100%;
      animation: mar 26s linear infinite;
      font-weight: 700;
      font-size: 13.5px;
      letter-spacing: .04em
    }

    .tk span {
      color: var(--gold2);
      margin: 0 6px
    }

    .ticker:hover .tk {
      animation-play-state: paused
    }

    @keyframes mar {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-100%)
      }
    }

    /* admissions cards */
    .acard {
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      transition: transform .25s, box-shadow .25s
    }

    .acard:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(70, 20, 40, .16)
    }

    .acard .imwrap {
      overflow: hidden
    }

    .acard img {
      width: 100%;
      height: 210px;
      object-fit: cover;
      display: block;
      transition: transform .4s
    }

    .acard:hover img {
      transform: scale(1.06)
    }

    .acard.res img {
      height: 300px;
      object-fit: contain;
      background: #fff;
      padding: 6px
    }

    .acard.res:hover img {
      transform: none
    }

    .acard .ab {
      padding: 16px 18px;
      text-align: center
    }

    /* about */
    .about-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 46px;
      align-items: center
    }

    .about-grid img {
      width: 100%;
      border-radius: 18px;
      display: block
    }

    .about-grid p {
      color: #5a4f54;
      font-size: 15px
    }

    .stat4 {
      display: flex;
      gap: 34px;
      flex-wrap: wrap;
      margin: 22px 0
    }

    .stat4 .n {
      font-size: 36px;
      font-weight: 800;
      color: var(--maroon);
      line-height: 1
    }

    .stat4 .c {
      font-size: 12px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-top: 4px
    }

    /* beyond tabs */
    .tabs {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 28px
    }

    .tab {
      font-size: 14px;
      font-weight: 700;
      color: #5a5f6a;
      background: #fff;
      border: 1px solid var(--line);
      padding: 11px 24px;
      border-radius: 28px;
      cursor: pointer;
      transition: .2s
    }

    .tab.on {
      background: var(--maroon);
      color: #fff;
      border-color: var(--maroon)
    }

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

    .track.hidden {
      display: none
    }

    .tile {
      position: relative;
      height: 310px;
      border-radius: 16px;
      overflow: hidden
    }

    .tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s
    }

    .tile:hover img {
      transform: scale(1.08)
    }

    .tile .cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 16px;
      color: #fff;
      font-weight: 700;
      background: linear-gradient(transparent, rgba(0, 0, 0, .66))
    }

    /* academics accordion */
    .accord {
      display: flex;
      gap: 14px;
      min-height: 380px
    }

    .apanel {
      flex: 0 0 92px;
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: flex .45s ease
    }

    .apanel.on {
      flex: 1 1 auto;
      cursor: default
    }

    .apanel img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .apanel::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(23, 16, 20, .12), rgba(90, 20, 40, .86))
    }

    .apanel .vlabel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 2;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      color: #fff;
      font-weight: 800;
      font-size: 18px;
      padding: 22px 0
    }

    .apanel.on .vlabel {
      display: none
    }

    .apanel .full {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: none;
      flex-direction: column;
      justify-content: flex-end;
      padding: 36px;
      color: #fff
    }

    .apanel.on .full {
      display: flex
    }

    .apanel .full .k {
      color: var(--gold2);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .apanel .full h3 {
      margin: 6px 0 10px;
      font-size: 27px
    }

    .apanel .full p {
      margin: 0 0 16px;
      font-size: 14px;
      max-width: 520px;
      color: #f0e6ea
    }

    /* principal */
    .principal {
      max-width: 840px;
      margin: 0 auto;
      text-align: center
    }

    .principal .crest {
      width: 86px;
      height: 86px;
      object-fit: contain;
      margin: 0 auto 10px;
      display: block
    }

    .principal .quote {
      font-size: 24px;
      line-height: 1.5;
      color: var(--navy);
      font-weight: 600;
      font-style: italic;
      margin: 16px 0
    }

    .principal .sign {
      color: var(--maroon);
      font-weight: 800
    }

    /* reviews */
    .ratehead {
      text-align: center;
      margin-bottom: 26px
    }

    .ratehead .rr {
      font-size: 15px;
      color: var(--muted)
    }

    .ratehead .rr b {
      color: var(--maroon);
      font-size: 20px
    }

    .ratehead .rs {
      color: #e6a52c;
      font-size: 18px;
      letter-spacing: 2px
    }

    .rcard {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 22px;
      background: #fff;
      transition: transform .25s, box-shadow .25s
    }

    .rcard:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .08)
    }

    .rhead {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px
    }

    .av {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--maroon);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      flex: 0 0 auto
    }

    .rn {
      font-weight: 700;
      font-size: 13.5px;
      color: var(--ink)
    }

    .rcard .stars {
      color: #e6a52c;
      font-size: 14px;
      letter-spacing: 1px
    }

    .rcard p {
      font-size: 14px;
      color: #4a4046;
      margin: 0
    }

    .gm {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 11px;
      color: #4285F4
    }

    .rhead .gm {
      margin-left: auto
    }

    .dummy-note {
      text-align: center;
      color: var(--muted);
      font-size: 12.5px;
      margin-top: 18px;
      font-style: italic
    }

    /* gallery */
    .ftabs {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 26px
    }

    .ftab {
      font-size: 13px;
      font-weight: 600;
      padding: 8px 18px;
      border-radius: 20px;
      border: 1.5px solid var(--line);
      background: #fff;
      color: var(--muted);
      cursor: pointer
    }

    .ftab.on {
      background: var(--maroon);
      color: #fff;
      border-color: var(--maroon)
    }

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

    .gal .gi {
      border-radius: 12px;
      overflow: hidden;
      height: 170px
    }

    .gal .gi img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      cursor: zoom-in;
      transition: transform .4s
    }

    .gal .gi img:hover {
      transform: scale(1.08)
    }

    .gal .gi.hide {
      display: none
    }

    /* faq */
    .faq {
      max-width: 820px;
      margin: 0 auto
    }

    .qa {
      border: 1px solid var(--line);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden
    }

    .qa .q {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 16px 20px;
      cursor: pointer;
      font-weight: 700;
      color: var(--navy)
    }

    .qa .q .pm {
      color: var(--gold);
      font-size: 22px;
      flex: 0 0 auto
    }

    .qa .a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s;
      padding: 0 20px;
      color: #5a4f54;
      font-size: 14px
    }

    .qa.open .a {
      max-height: 220px;
      padding: 0 20px 18px
    }

    /* footer */
    footer {
      background: #17284a;
      color: #c7cede
    }

    footer .wrap2 {
      padding: 56px 30px 26px
    }

    .fgrid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 38px;
      align-items: start
    }

    .flogo {
      display: inline-flex;
      background: #fff;
      padding: 10px 16px;
      border-radius: 12px;
      margin-bottom: 14px
    }

    .flogo img {
      height: 78px;
      width: auto;
      display: block
    }

    .fcon {
      font-size: 13px;
      line-height: 1.9;
      color: #b9c1d4
    }

    .fcon a {
      color: #dfe4ef;
      font-weight: 600
    }

    .fsoc {
      display: flex;
      gap: 10px;
      margin-top: 14px
    }

    .fsoc span {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #dfe4ef
    }

    .wa {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #25a35a;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 16px;
      border-radius: 22px;
      margin-top: 12px
    }

    .fh {
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      margin: 0 0 16px;
      letter-spacing: .4px
    }

    .flinks {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 13px
    }

    .flinks li {
      padding: 6px 0;
      color: #c2cadb;
      cursor: pointer
    }

    .flinks li:hover {
      color: #fff
    }

    .paybtn {
      display: inline-block;
      text-align: center;
      background: var(--maroon);
      color: #fff;
      font-weight: 700;
      font-size: 12.5px;
      line-height: 1.3;
      padding: 12px 18px;
      border-radius: 10px;
      margin-top: 16px;
      cursor: pointer
    }

    .donate .qr {
      background: #fff;
      padding: 8px;
      border-radius: 10px;
      width: 134px
    }

    .donate .qr img {
      width: 100%;
      display: block;
      border-radius: 4px
    }

    .donate .cap {
      font-size: 11px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: #9aa6c0;
      margin: 10px 0 12px
    }

    .btng2 {
      display: inline-flex;
      background: var(--gold);
      color: #2a1c00;
      font-weight: 800;
      font-size: 12.5px;
      padding: 10px 18px;
      border-radius: 24px;
      cursor: pointer
    }

    .fcopy {
      border-top: 1px solid rgba(255, 255, 255, .12);
      margin-top: 34px;
      padding-top: 18px;
      font-size: 12px;
      color: #94a0bb;
      text-align: center
    }

    /* floating + backtop + lightbox */
    .donate-fab {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 70;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--maroon);
      color: #fff;
      font-weight: 800;
      font-size: 14px;
      padding: 14px 22px;
      border-radius: 30px;
      box-shadow: 0 10px 26px rgba(122, 31, 56, .42);
      cursor: pointer;
      transition: .2s
    }

    .donate-fab:hover {
      background: var(--maroon2);
      transform: translateY(-2px)
    }

    .donate-fab .hb {
      color: #ffd98a;
      font-size: 16px
    }

    .backtop {
      position: fixed;
      left: 22px;
      bottom: 22px;
      z-index: 70;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      border: none;
      font-size: 20px;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: .25s;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .25)
    }

    .backtop.show {
      opacity: 1;
      visibility: visible
    }

    .lb {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, .86);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 30px;
      cursor: zoom-out
    }

    .lb.on {
      display: flex
    }

    .lb img {
      max-width: 92vw;
      max-height: 90vh;
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
    }

    .lb .lbx {
      position: absolute;
      top: 16px;
      right: 26px;
      color: #fff;
      font-size: 42px;
      line-height: 1;
      cursor: pointer
    }

    /* scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .7s ease, transform .7s ease
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    @media(max-width:980px) {

      .about-grid,
      .grid3,
      .grid4,
      .track,
      .gal,
      .fgrid {
        grid-template-columns: 1fr 1fr
      }

      .accord {
        flex-direction: column;
        min-height: 0
      }

      .apanel {
        flex: 0 0 auto;
        height: 74px
      }

      .apanel.on {
        height: auto;
        min-height: 300px
      }

      .apanel .full {
        position: relative
      }
    }

    @media(max-width:560px) {

      .about-grid,
      .grid3,
      .grid4,
      .track,
      .gal,
      .fgrid,
      .stat4 {
        grid-template-columns: 1fr
      }

      .donate-fab {
        right: 14px;
        bottom: 14px;
        padding: 12px 18px;
        font-size: 13px
      }
    }

    /* ===== curved dividers ===== */
    .sec {
      position: relative
    }

    .sec .wrap2 {
      position: relative;
      z-index: 2
    }

    .sec::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 54px;
      background-repeat: no-repeat;
      background-position: top;
      background-size: 100% 54px;
      pointer-events: none;
      z-index: 0
    }

    .sec.alt::before {
      background-image: url("%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,16 C1080,54 360,54 0,16 Z' fill='%23ffffff'/%3E%3C/svg%3E")
    }

    .sec:not(.alt)::before {
      background-image: url("%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,16 C1080,54 360,54 0,16 Z' fill='%23fbf7f0'/%3E%3C/svg%3E")
    }

    .no-wave::before {
      display: none !important
    }

    /* ===== active nav ===== */
    .item.active>a {
      color: var(--gold)
    }

    header.hdr.solid .item.active>a {
      color: var(--maroon)
    }

    /* ===== glass admissions card in hero ===== */
    .glasscard {
      position: absolute;
      right: 6vw;
      top: 50%;
      transform: translateY(-50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      gap: 3px;
      background: rgba(255, 255, 255, .14);
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 18px;
      padding: 22px 26px;
      color: #fff;
      box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
      max-width: 255px
    }

    .glasscard .gc-eb {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #ffd98a
    }

    .glasscard b {
      font-size: 32px;
      line-height: 1;
      margin: 2px 0
    }

    .glasscard .gc-sub {
      font-size: 12.5px;
      opacity: .92
    }

    /* ===== why LFH ===== */
    .wf {
      text-align: center;
      padding: 10px
    }

    .wfi {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background: rgba(201, 154, 62, .15);
      color: var(--maroon);
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px
    }

    .wf h4 {
      margin: 0 0 6px;
      font-size: 16px;
      color: var(--navy)
    }

    .wf p {
      margin: 0;
      font-size: 13px;
      color: #6a5f64
    }

    /* ===== impact band + petals ===== */
    .impact {
      position: relative;
      overflow: hidden;
      background: linear-gradient(120deg, var(--maroon) 0%, #5a1528 55%, var(--navy) 100%);
      color: #fff;
      padding: 58px 0
    }

    .impact-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      text-align: center;
      position: relative;
      z-index: 3
    }

    .impact .imi {
      font-size: 30px;
      margin-bottom: 8px
    }

    .impact .n {
      font-size: 46px;
      font-weight: 800;
      line-height: 1;
      color: #ffd98a
    }

    .impact .c {
      font-size: 13px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: #ecdfe4;
      margin-top: 6px
    }

    .petals {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none
    }

    .petal {
      position: absolute;
      top: -30px;
      width: 22px;
      height: 22px;
      background: url("%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C5 7 5 13 10 20 15 13 15 7 10 0Z' fill='%23e78fae'/%3E%3C/svg%3E") center/contain no-repeat;
      opacity: .5;
      animation: petalfall linear infinite
    }

    @keyframes petalfall {
      0% {
        transform: translateY(-10%) rotate(0);
        opacity: 0
      }

      12% {
        opacity: .55
      }

      100% {
        transform: translateY(360px) rotate(340deg);
        opacity: 0
      }
    }

    /* ===== reviews carousel ===== */
    .revcar {
      position: relative;
      max-width: 700px;
      margin: 0 auto;
      min-height: 184px
    }

    .revslide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .6s;
      pointer-events: none
    }

    .revslide.on {
      opacity: 1;
      pointer-events: auto
    }

    .rcard.big {
      padding: 28px 30px
    }

    .rcard.big p {
      font-size: 16px;
      line-height: 1.55
    }

    .revdots {
      display: flex;
      gap: 9px;
      justify-content: center;
      margin-top: 18px
    }

    .revdots i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--line);
      cursor: pointer;
      transition: .25s
    }

    .revdots i.on {
      background: var(--maroon);
      width: 24px;
      border-radius: 5px
    }

    /* ===== lightbox nav + caption ===== */
    .lba {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      color: #fff;
      font-size: 44px;
      cursor: pointer;
      padding: 0 14px;
      user-select: none;
      opacity: .85
    }

    .lba:hover {
      opacity: 1
    }

    .lba.prev {
      left: 12px
    }

    .lba.next {
      right: 12px
    }

    .lbcap {
      position: absolute;
      bottom: 24px;
      left: 0;
      right: 0;
      text-align: center;
      color: #fff;
      font-size: 14px;
      letter-spacing: .03em
    }

    /* ===== draw-on underline ===== */
    .stitle .u {
      width: 0;
      transition: width .7s .25s ease
    }

    .stitle.in .u {
      width: 66px
    }

    /* ===== button sheen ===== */
    .btnm,
    .admis,
    .cta,
    .btng2 {
      position: relative;
      overflow: hidden
    }

    .btnm::after,
    .admis::after,
    .cta::after,
    .btng2::after {
      content: "";
      position: absolute;
      top: 0;
      left: -130%;
      width: 55%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent);
      transform: skewX(-20deg);
      transition: left .6s ease;
      pointer-events: none
    }

    .btnm:hover::after,
    .admis:hover::after,
    .cta:hover::after,
    .btng2:hover::after {
      left: 140%
    }

    @media(max-width:980px) {
      .glasscard {
        display: none
      }
    }

    @media(max-width:700px) {
      .impact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 16px
      }
    }
 
/* icon feature cards */
.ic-card{background:#fff;border:1px solid #efe3d8;border-radius:20px;padding:34px 24px;text-align:center;box-shadow:0 14px 34px rgba(70,20,40,.08);transition:transform .28s ease,box-shadow .28s ease}
.ic-card:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(70,20,40,.15)}
.ic-card .ic{width:72px;height:72px;border-radius:22px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--maroon),var(--gold));color:#fff;box-shadow:0 10px 20px rgba(122,31,56,.28)}
.ic-card .ic svg{width:34px;height:34px}
.ic-card h4{color:var(--maroon);margin:0 0 8px;font-size:17px}
.ic-card p{margin:0;font-size:13.5px;color:#6a5f64;line-height:1.6}
.ic-link{display:inline-block;margin-top:12px;color:var(--maroon);font-weight:700;font-size:13px;cursor:pointer}
.ic-link:hover{color:var(--gold)}

/* ===== admission announcement cards (evergreen) ===== */
.acard.soon,.acard.apply{padding:30px 26px;text-align:left;display:flex;flex-direction:column;justify-content:center;min-height:250px;border-radius:20px;box-shadow:0 14px 34px rgba(70,20,40,.08)}
.acard.soon{background:linear-gradient(150deg,#fbf7f0,#f4e7e0);border:1px solid #ecdccf}
.soon-badge{align-self:flex-start;background:linear-gradient(135deg,var(--maroon),var(--gold));color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:20px;box-shadow:0 8px 18px rgba(122,31,56,.25)}
.acard.soon h4{color:var(--maroon);font-size:20px;margin:16px 0 3px}
.soon-cls{font-weight:700;color:#7a4a54;font-size:14px;margin-bottom:8px}
.soon-sub{color:#6a5f64;font-size:13px;line-height:1.6;margin:0 0 18px}
.acard.soon a{align-self:flex-start}
.acard.apply{background:#fff;border:1px solid #efe3d8}
.eb3{color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.steps li{display:flex;align-items:flex-start;gap:13px}
.steps .sn{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--maroon),var(--gold));color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.steps b{display:block;color:var(--maroon);font-size:14px;line-height:1.3}
.steps small{color:#6a5f64;font-size:12.5px}


/* ===== icon cards — Option C: thin gold ring, floating icon (premium) ===== */
.ic-card .ic{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid rgba(201,154,62,.55);color:var(--maroon);box-shadow:0 8px 22px rgba(122,31,56,.08)}
.ic-card .ic svg{width:30px;height:30px;stroke:var(--maroon)}
.ic-card:hover .ic{border-color:var(--gold);box-shadow:0 12px 28px rgba(122,31,56,.15)}


/* ===== SSC Result section (Layout 4) ===== */
.grid2c{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:840px;margin:0 auto}
.ssc-band{background:linear-gradient(135deg,#7a1f38,#9a2f4f);border-radius:26px;color:#fff;padding:44px;display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center;box-shadow:0 34px 64px rgba(122,31,56,.28);position:relative;overflow:hidden}
.ssc-band::before{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(201,154,62,.40),transparent 68%)}
.ssc-band::after{content:"";position:absolute;left:-70px;bottom:-110px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%)}
.ssc-hero{text-align:center;position:relative;z-index:1}
.ssc-pct{font-size:92px;font-weight:800;line-height:.9;background:linear-gradient(180deg,#fff,#f0cf92);-webkit-background-clip:text;background-clip:text;color:transparent}
.ssc-pct span{font-size:42px;vertical-align:top}
.ssc-sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#f0cf92;margin-top:8px;font-weight:700}
.ssc-appeared{font-size:13px;color:rgba(255,255,255,.72);margin-top:8px}
.ssc-toppers{position:relative;z-index:1;border-left:1px solid rgba(255,255,255,.16);padding-left:44px}
.ssc-toppers h4{margin:0 0 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#f0cf92}
.ssc-toppers ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ssc-toppers li{display:flex;align-items:center;gap:14px;font-size:15px}
.ssc-toppers .rk{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#f0cf92}
.ssc-toppers .nm{color:rgba(255,255,255,.94)}
.ssc-toppers li b{margin-left:auto;font-weight:800;color:#fff}
.ssc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.ssc-stat{background:#fff;border:1px solid #efe3d8;border-radius:16px;padding:22px 16px;text-align:center;box-shadow:0 12px 28px rgba(70,20,40,.06)}
.ssc-stat b{display:block;font-size:32px;color:var(--maroon);font-weight:800;line-height:1}
.ssc-stat span{font-size:12px;color:#8a7d82;text-transform:uppercase;letter-spacing:.07em;margin-top:6px;display:block}
.ssc-cong{text-align:center;margin-top:24px;color:#6a5f64;font-size:14px}
.ssc-cong span{color:var(--maroon);font-weight:700;white-space:nowrap}
@media(max-width:820px){.ssc-band{grid-template-columns:1fr;gap:26px;padding:32px}.ssc-toppers{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-left:0;padding-top:24px}.ssc-stats{grid-template-columns:1fr 1fr}.grid2c{grid-template-columns:1fr;max-width:460px}}