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

    * {
      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
    }

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 28px
    }

    .doc {
      background: linear-gradient(90deg, var(--maroon), var(--navy));
      color: #fff;
      text-align: center;
      padding: 9px 20px;
      font-size: 12px
    }

    .doc b {
      color: #ffd97a
    }

    /* ---------- HEADER ---------- */
    header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: #fff;
      box-shadow: 0 2px 14px rgba(0, 0, 0, .07)
    }

    .hwrap {
      max-width: var(--maxw);
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 10px 28px;
      min-height: 104px
    }

    .logo img {
      height: 82px;
      width: auto;
      display: block
    }

    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 13px;
      font-size: 13.5px;
      font-weight: 700;
      color: #3a2f34;
      letter-spacing: .2px;
      white-space: nowrap;
      cursor: pointer
    }

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

    .item.has>a::after {
      content: "\25be";
      font-size: 10px;
      color: var(--muted)
    }

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

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

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

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

    .admis {
      margin-left: 10px;
      background: var(--maroon);
      color: #fff !important;
      padding: 12px 24px;
      border-radius: 26px;
      font-weight: 800;
      font-size: 13.5px;
      box-shadow: 0 6px 16px rgba(122, 31, 56, .28)
    }

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

    /* ---------- HERO ---------- */
    .hero {
      position: relative;
      height: 82vh;
      min-height: 560px;
      overflow: hidden;
      background: #2a0f18
    }

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

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

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

      to {
        transform: scale(1)
      }
    }

    .scrim {
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(90deg, rgba(28, 8, 16, .72) 0%, rgba(28, 8, 16, .28) 42%, rgba(28, 8, 16, 0) 68%),
        linear-gradient(0deg, rgba(20, 6, 12, .6) 0%, rgba(20, 6, 12, 0) 40%)
    }

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

    .hcap .eb {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: #ffd98a;
      background: rgba(0, 0, 0, .28);
      padding: 6px 13px;
      border-radius: 18px;
      margin-bottom: 16px
    }

    .hcap h1 {
      margin: 0 0 20px;
      font-size: clamp(30px, 4.4vw, 52px);
      line-height: 1.08;
      font-weight: 800;
      text-shadow: 0 3px 24px rgba(0, 0, 0, .4);
      min-height: 1.1em
    }

    .hcap .cta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--gold);
      color: #2a1c00;
      padding: 14px 28px;
      border-radius: 30px;
      font-weight: 800;
      font-size: 14.5px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .25)
    }

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

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

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

    .harrow.l {
      left: 20px
    }

    .harrow.r {
      right: 20px
    }

    .dots {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      gap: 9px
    }

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

    .dots i.on {
      opacity: 1;
      width: 28px;
      border-radius: 6px
    }

    .brochure {
      position: absolute;
      right: 6vw;
      bottom: 9%;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(23, 40, 74, .9);
      color: #fff;
      padding: 12px 20px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 13.5px
    }

    .brochure:hover {
      background: var(--navy)
    }

    /* ---------- phase note ---------- */
    .next {
      background: var(--cream);
      text-align: center;
      padding: 40px 28px;
      color: var(--muted);
      font-size: 14px
    }

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

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

      .hero {
        height: 68vh
      }

      .brochure {
        display: none
      }
    }

    /* ===== Phase 4 sections ===== */
    .sec {
      padding: 64px 0
    }

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

    .stitle {
      text-align: center;
      margin: 0 auto 34px;
      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: 30px;
      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 10px 30px rgba(70, 20, 40, .10)
    }

    .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
    }

    .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
    }

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

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

    .acard {
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line)
    }

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

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

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

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

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

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

    .stat4 {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
      margin: 20px 0
    }

    .stat4 .n {
      font-size: 32px;
      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
    }

    .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
    }

    .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: 300px;
      border-radius: 16px;
      overflow: hidden
    }

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

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

    .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, .65))
    }

    .accord {
      display: flex;
      gap: 14px;
      min-height: 360px
    }

    .apanel {
      flex: 0 0 90px;
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: flex .4s 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, .85))
    }

    .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: 34px;
      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: 26px
    }

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

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

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

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

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

    .rcard {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 22px;
      background: #fff
    }

    .rcard .stars {
      color: #e6a52c;
      font-size: 15px;
      letter-spacing: 2px;
      margin-bottom: 8px
    }

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

    .rcard .who {
      font-size: 12.5px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .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
    }

    .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: 160px
    }

    .gal .gi img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .gal .gi.hide {
      display: none
    }

    .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
    }

    @media(max-width:900px) {

      .about-grid,
      .grid3,
      .grid4,
      .track,
      .gal {
        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 {
        grid-template-columns: 1fr
      }
    }

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

    footer .wrap {
      padding: 54px 28px 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
    }

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

    .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
    }

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

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

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

    @media(max-width:560px) {
      .fgrid {
        grid-template-columns: 1fr
      }
    }

    /* ===== reviews (real rating) ===== */
    .revwrap {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 34px;
      align-items: center;
      max-width: 900px;
      margin: 0 auto
    }

    .revscore {
      text-align: center;
      background: var(--cream);
      border-radius: 16px;
      padding: 26px
    }

    .revscore .big {
      font-size: 56px;
      font-weight: 800;
      color: var(--maroon);
      line-height: 1
    }

    .revscore .rstars {
      color: #e6a52c;
      font-size: 20px;
      letter-spacing: 3px;
      margin: 6px 0
    }

    .revscore .rc {
      font-size: 13px;
      color: var(--muted)
    }

    .revquote {
      position: relative;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 26px 30px
    }

    .revquote .qmark {
      position: absolute;
      top: 2px;
      left: 18px;
      font-size: 64px;
      color: var(--gold);
      opacity: .35;
      font-family: Georgia, serif
    }

    .revquote p {
      font-size: 19px;
      line-height: 1.5;
      color: var(--navy);
      font-weight: 600;
      margin: 12px 0 14px
    }

    .revquote .who {
      font-size: 12.5px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px
    }

    /* ===== mobile menu ===== */
    .hwrap {
      position: relative
    }

    .burger {
      display: none;
      margin-left: auto;
      background: none;
      border: none;
      font-size: 27px;
      color: var(--maroon);
      cursor: pointer;
      line-height: 1
    }

    @media(max-width:700px) {
      .revwrap {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:980px) {
      .burger {
        display: block
      }

      nav.nav {
        display: none;
        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, .14);
        margin-left: 0
      }

      nav.nav.open {
        display: flex
      }

      .item {
        width: 100%
      }

      .item>a {
        width: 100%;
        padding: 13px 24px
      }

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

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

      .admis {
        margin: 10px 24px
      }
    }

    /* fixed floating donation button */
    .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
    }

    @media(max-width:560px) {
      .donate-fab {
        right: 14px;
        bottom: 14px;
        padding: 12px 18px;
        font-size: 13px
      }
    }

    /* lightbox */
    .lb {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, .85);
      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
    }

    /* dummy review cards */
    .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
    }

    .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)
    }

    .rhead .gm {
      margin-left: auto
    }

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

/* 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)}