/* ── Photo backgrounds: higher ed ── */
.he-card {
  background-position-x: center;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.he-grad-1 {
  background-image: url("https://testadmissions.gitam.edu/images/applyloginimages/Ratna-Varshith-Kolachala.webp");
}

.he-grad-2 {
  background-image: url("https://testadmissions.gitam.edu/images/applyloginimages/Siddhardha-Nanda.webp");
}

.he-grad-3 {
  background-image: url("https://testadmissions.gitam.edu/images/applyloginimages/Jushatha-Varsha-Koduri.webp");
}

.he-grad-4 {
  background-image: url("https://testadmissions.gitam.edu/images/applyloginimages/Surya-Sandeep-Akella.webp");
}

.he-grad-5 {
  background-image: url("https://testadmissions.gitam.edu/images/applyloginimages/Tejomurtula-Kameswari-Yasaswini.webp");
}

.he-grad-6 {
  background-image: url("https://testadmissions.gitam.edu/images/applyloginimages/Ram-Ridhan.webp");
}

.he-card::after {
  background: transparent;
}

.he-flag .economics-img {
  width: 108px;
}

.he-flag .edinburgh-img {
  width: 175px;
}

.he-flag .pennsylvania-img {
  width: 104px;
}

.he-flag .chicago-img {
  width: 144px;
}

.he-flag .newyork-img {
  width: 100px;
}

.he-flag .columbia-img {
  width: 77px;
}

.he-flag img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bt-role-tag.he-dept-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

/* No scroll-reveal fade on these grids — admissions page shows cards immediately */
html.anim .he-grid > *,
html.anim .entre-bento > *,
html.anim .beyond-bento > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

      /* ─── SECTION 8: HIGHER EDUCATION ADMITS ───────── */
      .higher-ed-section {
        background: var(--gd);
        padding: 72px 64px;
        position: relative;
        overflow: hidden;
        color: #fff;
      }

      .higher-ed-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          circle,
          rgba(244, 228, 201, 0.05) 1px,
          transparent 1px
        );
        background-size: 24px 24px;
        pointer-events: none;
      }

      .higher-ed-header {
        margin-bottom: 40px;
        position: relative;
        z-index: 1;
      }

      .higher-ed-title {
        font-family: var(--font-body);
        font-size: clamp(28px, 3vw, 42px);
        font-weight: 800;
        color: #fff;
        letter-spacing: -1px;
        line-height: 1.1;
        margin-bottom: 6px;
      }

      .higher-ed-title span {
        color: var(--gl);
      }

      .higher-ed-sub {
        font-size: 14px;
        font-weight: 400;
        color: rgba(244, 228, 201, 0.65);
      }

      .he-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        position: relative;
        z-index: 1;
      }

      .he-card {
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        min-height: 360px;
        cursor: pointer;
        transition: transform 0.25s;
      }

      .he-card:hover {
        transform: translateY(-4px);
      }

      .he-flag-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 140px;
        opacity: 0.2;
        line-height: 1;
        pointer-events: none;
        transition: opacity 0.4s ease;
      }

      .he-grad-1 {
        background: linear-gradient(
          160deg,
          #001e1a 0%,
          #003a32 55%,
          #005548 100%
        );
      }

      .he-grad-2 {
        background: linear-gradient(
          160deg,
          #001520 0%,
          #002a40 55%,
          #003d58 100%
        );
      }

      .he-grad-3 {
        background: linear-gradient(
          160deg,
          #1a1400 0%,
          #352800 55%,
          #503c00 100%
        );
      }

      .he-grad-4 {
        background: linear-gradient(
          160deg,
          #1a0022 0%,
          #350045 55%,
          #500068 100%
        );
      }

      .he-grad-5 {
        background: linear-gradient(
          160deg,
          #001a10 0%,
          #003520 55%,
          #005030 100%
        );
      }

      .he-grad-6 {
        background: linear-gradient(
          160deg,
          #1a1000 0%,
          #352000 55%,
          #503000 100%
        );
      }

      .he-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          to top,
          rgba(0, 10, 8, 0.72) 0%,
          rgba(0, 10, 8, 0.28) 38%,
          transparent 72%
        );
        pointer-events: none;
        transition: background 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .he-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 28%;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.75) 0%,
          rgba(0, 0, 0, 0.35) 55%,
          transparent 100%
        );
        z-index: 1;
        pointer-events: none;
        transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .he-top {
        position: absolute;
        top: 14px;
        left: 14px;
        right: 14px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .he-dept-tag {
        background: rgba(0, 35, 32, 0.88);
        border: 1px solid rgba(139, 203, 183, 0.65);
        backdrop-filter: blur(8px);
        border-radius: 100px;
        padding: 5px 12px;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.3px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
      }

      .he-year-tag {
        font-size: 10px;
        font-weight: 700;
        color: var(--gd);
        background: var(--gl);
        border-radius: 100px;
        padding: 5px 12px;
        letter-spacing: 0.4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
      }

      .he-reveal {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(4px);
        transition:
          max-height 0.44s cubic-bezier(0.22, 0.61, 0.36, 1),
          opacity 0.3s ease 0.06s,
          transform 0.38s ease 0.06s,
          margin 0.44s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .he-card.is-revealed .he-reveal {
        max-height: 120px;
        opacity: 1;
        transform: translateY(0);
      }

      .he-card.is-revealed .he-dept-tag.he-reveal {
        max-height: 32px;
      }

      .he-card.is-revealed .he-overlay {
        background: linear-gradient(
          to top,
          rgba(0, 10, 8, 0.94) 0%,
          rgba(0, 10, 8, 0.55) 50%,
          transparent 100%
        );
      }

      .he-card.is-revealed::after {
        height: 62%;
      }

      .he-card.is-revealed .he-flag-bg {
        opacity: 0.1;
      }

      .he-card.is-revealed .he-uni {
        margin-bottom: 10px;
      }

      .he-bottom {
        position: absolute;
        bottom: 16px;
        left: 16px;
        right: 16px;
        z-index: 2;
      }

      .he-uni {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 0;
      }

      .he-flag {
        font-size: 22px;
        line-height: 1.15;
        flex-shrink: 0;
        margin-top: 1px;
      }

      .he-name {
        font-family: var(--font-body);
        font-size: clamp(16px, 1.6vw, 20px);
        font-weight: 700;
        color: #fff;
        letter-spacing: -0.3px;
        line-height: 1.1;
        margin-bottom: 3px;
      }

      .he-meta {
        font-size: 11px;
        font-weight: 400;
        color: rgba(244, 228, 201, 0.55);
      }

      /* wide card (first slot) */
      .he-card-wide {
        grid-column: 1 / 3;
        min-height: 400px;
      }

      .he-card-wide .he-name {
        font-size: clamp(20px, 2vw, 26px);
      }

      .he-card-wide .he-flag-bg {
        font-size: 220px;
      }

      .he-card-wide .he-flag {
        font-size: 26px;
      }